diff --git a/.eslintrc b/.eslintrc index 08b899e7..477eb3ee 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,7 @@ "react": { "pragma": "React", "version": "16.6", - "flowVersion": "0.78" // Flow version + "flowVersion": "0.109.0" // Flow version } }, // babel parser to support ES6/7 features @@ -139,7 +139,7 @@ // react "react/display-name": 0, - "react/jsx-no-bind": 2, + "react/jsx-no-bind": 0, "react/jsx-no-duplicate-props": 2, "react/jsx-no-undef": 2, "react/jsx-pascal-case": 2, @@ -153,7 +153,7 @@ "react/no-string-refs": 2, "react/no-unknown-property": 2, "react/prefer-es6-class": 2, - "react/prop-types": 2, + "react/prop-types": 0, "react/react-in-jsx-scope": 0, "react/self-closing-comp": 2, "react/sort-comp": 0, diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 8f8f6074..6cedeeae 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -70,15 +70,16 @@ yarn compile yarn compile --watch ``` -## Website and visual tests +## Documentation and visual tests To run the interactive storybook: ``` -yarn website +yarn docs ``` -When you're also making changes to the 'react-native-web' source files, run this command in another process: +When you're also making changes to the 'react-native-web' source files, run this +command in another process: ``` yarn compile --watch diff --git a/package.json b/package.json index d8aefc57..38efd4a8 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "private": true, "version": "0.11.7", - "name": "react-native-web-monorepo", + "name": "monorepo", "scripts": { "clean": "del-cli ./packages/*/dist", "compile": "npm-run-all clean -p \"compile:* -- {@}\" --", @@ -9,10 +9,8 @@ "compile:es": "cd packages/react-native-web && babel --root-mode upward src --out-dir dist --ignore \"**/__tests__\"", "benchmarks": "cd packages/benchmarks && yarn build", "benchmarks:release": "cd packages/benchmarks && yarn release", - "examples": "cd packages/examples && yarn build", - "examples:release": "cd packages/examples && yarn release", - "website": "cd packages/website && yarn start", - "website:release": "cd packages/website && yarn release", + "docs": "cd packages/docs && yarn start", + "docs:release": "cd packages/docs && yarn release", "flow": "flow", "fmt": "prettier --write \"**/*.js\"", "jest": "jest --config ./scripts/jest/config.js", @@ -21,7 +19,7 @@ "precommit": "lint-staged", "prerelease": "yarn test && yarn compile && yarn compile:commonjs", "release": "node ./scripts/release/publish.js", - "postrelease": "yarn benchmarks:release && yarn examples:release && yarn website:release", + "postrelease": "yarn benchmarks:release && yarn docs:release", "test": "yarn flow && yarn lint:check && yarn jest --runInBand" }, "devDependencies": { diff --git a/packages/docs/.storybook/_webpack.config.js b/packages/docs/.storybook/_webpack.config.js new file mode 100644 index 00000000..77de6167 --- /dev/null +++ b/packages/docs/.storybook/_webpack.config.js @@ -0,0 +1,20 @@ +const path = require('path'); +const webpack = require('webpack'); + +module.exports = async ({ config, mode }) => { + config.module.rules.push({ + test: /\.(gif|jpe?g|png|svg)$/, + use: { + loader: 'url-loader', + options: { name: '[name].[ext]' } + } + }); + + config.resolve.extensions = ['.web.js', '.js', '.json', '.web.jsx', '.jsx']; + + config.resolve.alias = { + 'react-native': 'react-native-web' + }; + + return config; +}; diff --git a/packages/docs/.storybook/addons.js b/packages/docs/.storybook/addons.js new file mode 100644 index 00000000..0748e932 --- /dev/null +++ b/packages/docs/.storybook/addons.js @@ -0,0 +1 @@ +// import '@storybook/addon-options/register'; diff --git a/packages/docs/.storybook/config.js b/packages/docs/.storybook/config.js new file mode 100644 index 00000000..0dc1c204 --- /dev/null +++ b/packages/docs/.storybook/config.js @@ -0,0 +1,48 @@ +import { create } from '@storybook/theming'; + +// import centered from './decorator-centered'; +import { addParameters, configure, addDecorator } from '@storybook/react'; + +// Option defaults: +addParameters({ + options: { + storySort: (a, b) => { + const sectionA = a[1].id.split('-')[0]; + const sectionB = b[1].id.split('-')[0]; + + return sectionB.localeCompare(sectionA); + }, + theme: create({ + base: 'light', + brandTitle: 'React Native for Web', + brandUrl: 'https://necolas.github.io/react-native-web' + // To control appearance: + // brandImage: 'http://url.of/some.svg', + }), + /** + * regex for finding the hierarchy separator + * @example: + * null - turn off hierarchy + * /\// - split by `/` + * /\./ - split by `.` + * /\/|\./ - split by `/` or `.` + * @type {Regex} + */ + hierarchySeparator: /\/|\./, + /** + * regex for finding the hierarchy root separator + * @example: + * null - turn off multiple hierarchy roots + * /\|/ - split by `|` + * @type {Regex} + */ + hierarchyRootSeparator: /\|/, + panelPosition: 'bottom' + } +}); + +// addDecorator(centered); + +const context = require.context('../src', true, /\.stories\.(js|mdx)$/); + +configure(context, module); diff --git a/packages/website/storybook/.storybook/decorator-centered.js b/packages/docs/.storybook/decorator-centered.js similarity index 76% rename from packages/website/storybook/.storybook/decorator-centered.js rename to packages/docs/.storybook/decorator-centered.js index c29c0adc..3e97d96d 100644 --- a/packages/website/storybook/.storybook/decorator-centered.js +++ b/packages/docs/.storybook/decorator-centered.js @@ -3,9 +3,7 @@ import { StyleSheet, View } from 'react-native'; const styles = StyleSheet.create({ root: { - minHeight: '100vh', - maxWidth: 680, - marginHorizontal: 'auto' + maxWidth: '100%' } }); diff --git a/packages/docs/.storybook/presets.js b/packages/docs/.storybook/presets.js new file mode 100644 index 00000000..353aa94d --- /dev/null +++ b/packages/docs/.storybook/presets.js @@ -0,0 +1,10 @@ +module.exports = [ + { + name: '@storybook/addon-docs/preset', + options: { + configureJSX: true, + babelOptions: {}, + sourceLoaderOptions: null + } + } +]; diff --git a/packages/website/storybook/.storybook/babel.config.js b/packages/docs/babel.config.js similarity index 100% rename from packages/website/storybook/.storybook/babel.config.js rename to packages/docs/babel.config.js diff --git a/packages/docs/package.json b/packages/docs/package.json new file mode 100644 index 00000000..1af9f359 --- /dev/null +++ b/packages/docs/package.json @@ -0,0 +1,23 @@ +{ + "private": true, + "name": "docs", + "version": "0.11.7", + "scripts": { + "build": "build-storybook --docs -o ./dist -c ./.storybook", + "start": "start-storybook --docs -p 9001 -c ./.storybook", + "release": "yarn build && git checkout gh-pages && rm -rf ../../docs && mv dist ../../docs && git add -A && git commit -m \"Deploy documentation\" && git push origin gh-pages && git checkout -" + }, + "dependencies": { + "@storybook/addon-docs": "5.3.0-alpha.43", + "@storybook/addon-options": "5.3.0-alpha.43", + "@storybook/cli": "5.3.0-alpha.43", + "@storybook/react": "5.3.0-alpha.43", + "@storybook/theming": "5.3.0-alpha.43", + "react-native-web": "0.11.7" + }, + "devDependencies": { + "babel-plugin-react-native-web": "0.11.7", + "url-loader": "^2.2.0", + "webpack": "^4.41.2" + } +} diff --git a/packages/docs/src/apis/AppRegistry/AppRegistry.stories.mdx b/packages/docs/src/apis/AppRegistry/AppRegistry.stories.mdx new file mode 100644 index 00000000..c7cb7993 --- /dev/null +++ b/packages/docs/src/apis/AppRegistry/AppRegistry.stories.mdx @@ -0,0 +1,107 @@ +import { Meta, Props } from '@storybook/addon-docs/blocks'; + + + +# AppRegistry + +AppRegistry is the control point for registering, running, prerendering, and +unmounting all apps. App root components should register themselves with +`AppRegistry.registerComponent`. Apps can be run by invoking +`AppRegistry.runApplication`. + +## Methods + +### getAppKeys() + +Returns an array of all registered app keys + +```js +const appKeys = AppRegistry.getAppKeys(); +``` + +### getApplication(appKey, appParams) + +A web-only method for server-side rendering to HTML and CSS. It returns an +object containing the given application's element and a function to get styles +once the element is rendered. + +Additional props can be passed to the `getStyleElement` function, e.g., your CSP +policy may require a `nonce` to be set on style elements. + +```js +const appKey = 'MyApp'; +const appParams = { ... }; +const { element, getStyleElement } = AppRegistry.getApplication(appKey, appParams); +``` + +### registerComponent(appKey, getComponent) + +Register a component provider under the given appKey. + +```js +const appKey = 'MyApp'; +const getComponent = () => App; +AppRegistry.registerComponent(appKey, getComponent) +``` + +### registerConfig(config) + +Register multiple applications. AppConfig type is: + +```js +type AppConfig = { + appKey: string; + component: ComponentProvider; + run?: function +} + +const config = [{ + appKey: 'FirstApp', + component: () => FirstApp +}, { + appKey: 'SecondApp', + component: () => SecondApp +}]; +AppRegistry.registerConfig(config) +``` + +### registerRunnable(appKey, run) + +Register a custom render function for an application. The function will receive +the `appParameters` passed to `runApplication`. + +```js +AppRegistry.registerRunnable('MyApp', (appParams) => { ... }); +``` + +### runApplication(appKey, appParams) + +Runs the application that was registered under `appKey`. The `appParameters` must +include the `rootTag` into which the application is rendered, and optionally any +`initialProps` or render callback. + +```js +AppRegistry.runApplication('MyApp', { + initialProps: {}, + rootTag: document.getElementById('react-root'), + callback: () => { console.log('React rendering has finished') } +}) +``` + +### setComponentProviderInstrumentationHook(componentProvider) + +```js +type setComponentProviderInstrumentationHook = (componentProvider: func) => Component; +``` + +### setWrapperComponentProvider(appParams) + +```js +type setWrapperComponentProvider = (appParameters: object) => Component; +``` + +### unmountApplicationComponentAtRootTag(rootTag) + +To "stop" an application when a view should be destroyed, call +`AppRegistry.unmountApplicationComponentAtRootTag` with the `rootTag` that was passed +into `runApplication`. diff --git a/packages/docs/src/apis/AppState/AppState.stories.js b/packages/docs/src/apis/AppState/AppState.stories.js new file mode 100644 index 00000000..8d9a9ec2 --- /dev/null +++ b/packages/docs/src/apis/AppState/AppState.stories.js @@ -0,0 +1,6 @@ +export default { + title: 'APIs|AppState', + includeStories: [] +}; + +export { default as stateChanges } from './examples/StateChanges'; diff --git a/packages/docs/src/apis/AppState/AppState.stories.mdx b/packages/docs/src/apis/AppState/AppState.stories.mdx new file mode 100644 index 00000000..7452ae61 --- /dev/null +++ b/packages/docs/src/apis/AppState/AppState.stories.mdx @@ -0,0 +1,44 @@ +import { Meta, Props, Preview, Story } from '@storybook/addon-docs/blocks'; +import * as stories from './AppState.stories.js'; + + + +# AppState + +AppState can tell you if the app is in the foreground or background, and notify +you when the state changes. States: `active` (the app is running in the +foreground), `background` (the app is running in the background, i.e., the user +has not focused the app's tab). + +## Properties + +### isAvailable + +Determines whether the browser environment supports `AppState`. + +### currentState + +Returns the current state of the app: "active" or "background". + +## Methods + +### addEventListener(type, handler) + +Add a handler to AppState changes by listening to the `change` event type and +providing the handler. The handler is called with the app state value. + +```js +AppState.addEventListener('change', (currentState) => {}); +``` + +### removeEventListener(type, handler) + +Remove a handler by passing the `change` event type and the handler. + +AppState.removeEventListener('change', handler); + +## Example + + + {stories.stateChanges} + diff --git a/packages/docs/src/apis/AppState/examples/StateChanges.js b/packages/docs/src/apis/AppState/examples/StateChanges.js new file mode 100644 index 00000000..cd589b34 --- /dev/null +++ b/packages/docs/src/apis/AppState/examples/StateChanges.js @@ -0,0 +1,32 @@ +import React from 'react'; +import { AppState, Text, View } from 'react-native'; + +export default function StateChanges() { + const [state, updateState] = React.useState({ + active: 0, + background: 0, + currentState: AppState.currentState + }); + + const handleChange = nextState => { + updateState(previousState => ({ + ...previousState, + [nextState]: previousState[nextState] + 1 + })); + }; + + React.useEffect(() => { + AppState.addEventListener('change', handleChange); + return () => { + AppState.removeEventListener('change', handleChange); + }; + }, [handleChange]); + + return ( + + Active count: {state.active} + Background count: {state.background} + Current state is: {state.currentState} + + ); +} diff --git a/packages/docs/src/apis/Clipboard/Clipboard.stories.js b/packages/docs/src/apis/Clipboard/Clipboard.stories.js new file mode 100644 index 00000000..33b416e4 --- /dev/null +++ b/packages/docs/src/apis/Clipboard/Clipboard.stories.js @@ -0,0 +1,6 @@ +export default { + title: 'APIs|Clipboard', + includeStories: [] +}; + +export { default as setString } from './examples/SetString'; diff --git a/packages/docs/src/apis/Clipboard/Clipboard.stories.mdx b/packages/docs/src/apis/Clipboard/Clipboard.stories.mdx new file mode 100644 index 00000000..08f4dd05 --- /dev/null +++ b/packages/docs/src/apis/Clipboard/Clipboard.stories.mdx @@ -0,0 +1,39 @@ +import { Meta, Props, Preview, Story } from '@storybook/addon-docs/blocks'; +import * as stories from './Clipboard.stories.js'; + + + +# Clipboard + +Clipboard gives you an interface for setting to the clipboard. (Getting +clipboard content is not currently supported on web.) + +## Methods + +### isAvailable() + +Determines whether the browser environment supports Clipboard at all. + +```js +if (Clipboard.isAvailable) { + // you can use the Clipboard API +} +``` + +### setString(string) + +Copies a string to the clipboard. On web, some browsers may not support copying +to the clipboard, therefore, this function returns a boolean to indicate if the +copy was successful. + +```js +const wasSet = Clipboard.setString('add this to clipboard'); +``` + + + {stories.setString} + + +### getString() + +Not properly supported on Web. Returns a `Promise` of an empty string. diff --git a/packages/docs/src/apis/Clipboard/examples/SetString.js b/packages/docs/src/apis/Clipboard/examples/SetString.js new file mode 100644 index 00000000..b7221c95 --- /dev/null +++ b/packages/docs/src/apis/Clipboard/examples/SetString.js @@ -0,0 +1,35 @@ +import { Button, Clipboard, StyleSheet, TextInput, View } from 'react-native'; +import React from 'react'; + +export default function SetString() { + const setString = () => { + const success = Clipboard.setString('This text was copied to the clipboard by React Native'); + console.log(`Clipboard.setString success? ${success}`); + }; + + return ( + + + - - - diff --git a/packages/examples/src/RNTester/relay@3x.png b/packages/examples/src/RNTester/relay@3x.png deleted file mode 100644 index 59a4386a..00000000 Binary files a/packages/examples/src/RNTester/relay@3x.png and /dev/null differ diff --git a/packages/examples/src/RNTester/slider-left.png b/packages/examples/src/RNTester/slider-left.png deleted file mode 100644 index dff4e11e..00000000 Binary files a/packages/examples/src/RNTester/slider-left.png and /dev/null differ diff --git a/packages/examples/src/RNTester/slider-left@2x.png b/packages/examples/src/RNTester/slider-left@2x.png deleted file mode 100644 index 83c6dd82..00000000 Binary files a/packages/examples/src/RNTester/slider-left@2x.png and /dev/null differ diff --git a/packages/examples/src/RNTester/slider-right.png b/packages/examples/src/RNTester/slider-right.png deleted file mode 100644 index 57e8c7d3..00000000 Binary files a/packages/examples/src/RNTester/slider-right.png and /dev/null differ diff --git a/packages/examples/src/RNTester/slider-right@2x.png b/packages/examples/src/RNTester/slider-right@2x.png deleted file mode 100644 index 8546ba8c..00000000 Binary files a/packages/examples/src/RNTester/slider-right@2x.png and /dev/null differ diff --git a/packages/examples/src/RNTester/slider.png b/packages/examples/src/RNTester/slider.png deleted file mode 100644 index 91419910..00000000 Binary files a/packages/examples/src/RNTester/slider.png and /dev/null differ diff --git a/packages/examples/src/RNTester/slider@2x.png b/packages/examples/src/RNTester/slider@2x.png deleted file mode 100644 index 396614fa..00000000 Binary files a/packages/examples/src/RNTester/slider@2x.png and /dev/null differ diff --git a/packages/examples/src/RNTester/story-background.png b/packages/examples/src/RNTester/story-background.png deleted file mode 100644 index fc082986..00000000 Binary files a/packages/examples/src/RNTester/story-background.png and /dev/null differ diff --git a/packages/examples/src/RNTester/uie_comment_highlighted@2x.png b/packages/examples/src/RNTester/uie_comment_highlighted@2x.png deleted file mode 100644 index b3372675..00000000 Binary files a/packages/examples/src/RNTester/uie_comment_highlighted@2x.png and /dev/null differ diff --git a/packages/examples/src/RNTester/uie_comment_normal@2x.png b/packages/examples/src/RNTester/uie_comment_normal@2x.png deleted file mode 100644 index 6491689f..00000000 Binary files a/packages/examples/src/RNTester/uie_comment_normal@2x.png and /dev/null differ diff --git a/packages/examples/src/RNTester/uie_thumb_big.png b/packages/examples/src/RNTester/uie_thumb_big.png deleted file mode 100644 index dbfdb1b9..00000000 Binary files a/packages/examples/src/RNTester/uie_thumb_big.png and /dev/null differ diff --git a/packages/examples/src/RNTester/uie_thumb_normal@2x.png b/packages/examples/src/RNTester/uie_thumb_normal@2x.png deleted file mode 100644 index 72683dfa..00000000 Binary files a/packages/examples/src/RNTester/uie_thumb_normal@2x.png and /dev/null differ diff --git a/packages/examples/src/RNTester/uie_thumb_selected@2x.png b/packages/examples/src/RNTester/uie_thumb_selected@2x.png deleted file mode 100644 index 79eb69cf..00000000 Binary files a/packages/examples/src/RNTester/uie_thumb_selected@2x.png and /dev/null differ diff --git a/packages/examples/src/RNTester/websocket_test_server.js b/packages/examples/src/RNTester/websocket_test_server.js deleted file mode 100755 index 83a48ed2..00000000 --- a/packages/examples/src/RNTester/websocket_test_server.js +++ /dev/null @@ -1,49 +0,0 @@ -#!/usr/bin/env node -/** - * Copyright (c) 2015-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - * @providesModule websocket_test_server - */ -'use strict'; - -/* eslint-env node */ - -/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error - * found when Flow v0.54 was deployed. To see the error delete this comment and - * run Flow. */ -const WebSocket = require('ws'); - -const fs = require('fs'); -const path = require('path'); - -console.log(`\ -Test server for WebSocketExample - -This will send each incoming message right back to the other side. -Restart with the '--binary' command line flag to have it respond with an -ArrayBuffer instead of a string. -`); - -const respondWithBinary = process.argv.indexOf('--binary') !== -1; -const server = new WebSocket.Server({port: 5555}); -server.on('connection', (ws) => { - ws.on('message', (message) => { - console.log('Received message:', message); - console.log('Cookie:', ws.upgradeReq.headers.cookie); - if (respondWithBinary) { - message = new Buffer(message); - } - if (message === 'getImage') { - message = fs.readFileSync(path.resolve(__dirname, 'flux@3x.png')); - } - console.log('Replying with:', message); - ws.send(message); - }); - - console.log('Incoming connection!'); - ws.send('Why hello there!'); -}); diff --git a/packages/examples/src/index.html b/packages/examples/src/index.html deleted file mode 100644 index 5e88572c..00000000 --- a/packages/examples/src/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - React Native examples - - - - -
- - - diff --git a/packages/examples/src/index.js b/packages/examples/src/index.js deleted file mode 100644 index 1a13c4e1..00000000 --- a/packages/examples/src/index.js +++ /dev/null @@ -1,4 +0,0 @@ -import { AppRegistry } from 'react-native'; -import RNTesterApp from './RNTester/RNTesterApp'; - -AppRegistry.runApplication('RNTesterApp', { rootTag: document.getElementById('root') }); diff --git a/packages/examples/src/nativeImageSource.js b/packages/examples/src/nativeImageSource.js deleted file mode 100644 index 49bd99ba..00000000 --- a/packages/examples/src/nativeImageSource.js +++ /dev/null @@ -1,7 +0,0 @@ -const nativeImageSource = (obj) => { - const uri = obj.android || obj.ios; - obj.uri = `./${uri}.png`; - return obj; -} - -module.exports = nativeImageSource; diff --git a/packages/examples/src/polyfills.js b/packages/examples/src/polyfills.js deleted file mode 100644 index db42ca65..00000000 --- a/packages/examples/src/polyfills.js +++ /dev/null @@ -1,3 +0,0 @@ -global.Promise.prototype.done = global.Promise.prototype.then; -global.clearImmediate = id => clearTimeout(id); -global.setImmediate = fn => setTimeout(fn, 0); diff --git a/packages/examples/webpack.config.js b/packages/examples/webpack.config.js deleted file mode 100644 index 3c5abd47..00000000 --- a/packages/examples/webpack.config.js +++ /dev/null @@ -1,113 +0,0 @@ -const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; -const path = require('path'); - -const appDirectory = path.resolve(__dirname); - -module.exports = { - mode: process.env.NODE_ENV || 'production', - context: __dirname, - entry: [ - // polyfill non-standard APIs - './src/polyfills', - // app entry file - './src' - ], - output: { - path: path.resolve(appDirectory, 'dist'), - filename: 'bundle.js' - }, - module: { - rules: [ - { - test: /\.(gif|jpe?g|png|svg)$/, - use: { - loader: 'file-loader' - } - }, - { - test: /\.js$/, - include: [ - // anything that needs to be compiled to ES5 - path.resolve(appDirectory, 'src') - ], - use: { - loader: 'babel-loader', - options: { - cacheDirectory: false, - presets: ['module:metro-react-native-babel-preset'], - plugins: [ - // needed to support async/await - '@babel/plugin-transform-runtime' - ] - } - } - } - ] - }, - plugins: [ - new BundleAnalyzerPlugin({ - analyzerMode: 'static', - openAnalyzer: false - }) - ], - resolve: { - alias: Object.assign( - { - // use commonjs modules due to mock haste resolver aliases - 'react-native$': 'react-native-web/dist/cjs' - }, - - { - // temporary hack to work around image loading - './flux.png': './flux@3x.png', - '../relay.png': '../relay@3x.png', - './uie_comment_highlighted.png': './uie_comment_highlighted@2x.png', - './uie_comment_normal.png': './uie_comment_normal@2x.png', - './uie_thumb_normal.png': './uie_thumb_normal@2x.png', - './uie_thumb_selected.png': './uie_thumb_selected@2x.png' - }, - - // mock haste resolver - [ - 'ActivityIndicator', - 'Alert', - 'AsyncStorage', - 'Button', - 'DeviceInfo', - 'Modal', - 'NativeModules', - 'Platform', - 'SafeAreaView', - 'SectionList', - 'StyleSheet', - 'Switch', - 'Text', - 'TextInput', - 'TouchableHighlight', - 'TouchableWithoutFeedback', - 'View', - 'ViewPropTypes' - ].reduce( - (acc, curr) => { - acc[curr] = `react-native-web/dist/cjs/exports/${curr}`; - return acc; - }, - { - JSEventLoopWatchdog: 'react-native-web/dist/cjs/vendor/react-native/JSEventLoopWatchdog', - React$: 'react', - ReactNative$: 'react-native-web/dist/cjs', - AnExSet: path.resolve(__dirname, './src/RNTester/AnimatedGratuitousApp/AnExSet'), - RNTesterBlock: path.resolve(__dirname, './src/RNTester/RNTesterBlock'), - RNTesterPage: path.resolve(__dirname, './src/RNTester/RNTesterPage'), - RNTesterSettingSwitchRow: path.resolve( - __dirname, - './src/RNTester/RNTesterSettingSwitchRow' - ), - infoLog$: 'react-native-web/dist/cjs/vendor/react-native/infoLog', - nativeImageSource$: path.resolve(__dirname, './src/nativeImageSource') - } - ) - ), - extensions: ['.web.js', '.js', '.json'] - } -}; diff --git a/packages/website/package.json b/packages/website/package.json deleted file mode 100644 index baea7e3d..00000000 --- a/packages/website/package.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "private": true, - "name": "website", - "version": "0.11.7", - "scripts": { - "build": "build-storybook -o ./dist -c ./storybook/.storybook", - "start": "start-storybook -p 9001 -c ./storybook/.storybook", - "release": "yarn build && git checkout gh-pages && rm -rf ../../storybook && mv dist ../../storybook && git add -A && git commit -m \"Website deploy\" && git push origin gh-pages && git checkout -" - }, - "dependencies": { - "@storybook/addon-options": "^3.4.3", - "@storybook/react": "^3.4.3", - "react": "^16.5.1", - "react-dom": "^16.5.1", - "react-native-web": "0.11.7" - }, - "devDependencies": { - "babel-plugin-react-native-web": "0.11.7", - "url-loader": "^1.0.1", - "webpack": "^4.8.1" - } -} diff --git a/packages/website/storybook/.storybook/addons.js b/packages/website/storybook/.storybook/addons.js deleted file mode 100644 index 8b4d35d7..00000000 --- a/packages/website/storybook/.storybook/addons.js +++ /dev/null @@ -1 +0,0 @@ -import '@storybook/addon-options/register'; diff --git a/packages/website/storybook/.storybook/config.js b/packages/website/storybook/.storybook/config.js deleted file mode 100644 index b3c232d8..00000000 --- a/packages/website/storybook/.storybook/config.js +++ /dev/null @@ -1,23 +0,0 @@ -import { setOptions } from '@storybook/addon-options'; -import centered from './decorator-centered'; -import { configure, addDecorator } from '@storybook/react'; - -const context = require.context('../', true, /Screen\.js$/); - -addDecorator(centered); - -setOptions({ - name: 'React Native Web', - url: 'https://necolas.github.io/react-native-web', - goFullScreen: false, - addonPanelInRight: false, - showSearchBox: false, - showAddonPanel: false, - showStoriesPanel: true -}); - -function loadStories() { - context.keys().forEach(context); -} - -configure(loadStories, module); diff --git a/packages/website/storybook/.storybook/webpack.config.js b/packages/website/storybook/.storybook/webpack.config.js deleted file mode 100644 index 2a6390e1..00000000 --- a/packages/website/storybook/.storybook/webpack.config.js +++ /dev/null @@ -1,20 +0,0 @@ -const path = require('path'); -const webpack = require('webpack'); - -module.exports = storybookBaseConfig => { - storybookBaseConfig.module.rules.push({ - test: /\.(gif|jpe?g|png|svg)$/, - use: { - loader: 'url-loader', - options: { name: '[name].[ext]' } - } - }); - - storybookBaseConfig.resolve.extensions = ['.web.js', '.js', '.json', '.web.jsx', '.jsx']; - - storybookBaseConfig.resolve.alias = { - 'react-native': 'react-native-web' - }; - - return storybookBaseConfig; -}; diff --git a/packages/website/storybook/1-components/ActivityIndicator/ActivityIndicatorScreen.js b/packages/website/storybook/1-components/ActivityIndicator/ActivityIndicatorScreen.js deleted file mode 100644 index bec36481..00000000 --- a/packages/website/storybook/1-components/ActivityIndicator/ActivityIndicatorScreen.js +++ /dev/null @@ -1,59 +0,0 @@ -/* eslint-disable react/jsx-sort-props */ - -/** - * @flow - */ - -import PropAnimating from './examples/PropAnimating'; -import PropColor from './examples/PropColor'; -import PropHidesWhenStopped from './examples/PropHidesWhenStopped'; -import PropSize from './examples/PropSize'; -import React from 'react'; -import UIExplorer, { Description, DocItem, Section, storiesOf } from '../../ui-explorer'; - -const ActivityIndicatorScreen = () => ( - - Displays a customizable activity indicator -
- - - - }} - /> - - - }} - /> - - - }} - /> - - - }} - /> -
- -); - -storiesOf('Components', module).add('ActivityIndicator', ActivityIndicatorScreen); diff --git a/packages/website/storybook/1-components/ActivityIndicator/examples/PropAnimating.js b/packages/website/storybook/1-components/ActivityIndicator/examples/PropAnimating.js deleted file mode 100644 index 14f61d4e..00000000 --- a/packages/website/storybook/1-components/ActivityIndicator/examples/PropAnimating.js +++ /dev/null @@ -1,22 +0,0 @@ -/** - * @flow - */ - -import { ActivityIndicator, StyleSheet, View } from 'react-native'; -import React from 'react'; - -const ActivityIndicatorAnimatingExample = () => ( - - - - -); - -const styles = StyleSheet.create({ - horizontal: { - alignItems: 'center', - flexDirection: 'row' - } -}); - -export default ActivityIndicatorAnimatingExample; diff --git a/packages/website/storybook/1-components/ActivityIndicator/examples/PropColor.js b/packages/website/storybook/1-components/ActivityIndicator/examples/PropColor.js deleted file mode 100644 index 1efa5449..00000000 --- a/packages/website/storybook/1-components/ActivityIndicator/examples/PropColor.js +++ /dev/null @@ -1,34 +0,0 @@ -/** - * @flow - */ - -import React from 'react'; -import { ActivityIndicator, StyleSheet, View } from 'react-native'; - -const ActivityIndicatorColorExample = () => ( - - - - - - - - -); - -const styles = StyleSheet.create({ - horizontal: { - alignItems: 'center', - flexDirection: 'row' - }, - rightPadding: { - paddingRight: 10 - } -}); - -ActivityIndicatorColorExample.metadata = { - id: 'ActivityIndicator.props.color', - description: '' -}; - -export default ActivityIndicatorColorExample; diff --git a/packages/website/storybook/1-components/ActivityIndicator/examples/PropSize.js b/packages/website/storybook/1-components/ActivityIndicator/examples/PropSize.js deleted file mode 100644 index 6faab077..00000000 --- a/packages/website/storybook/1-components/ActivityIndicator/examples/PropSize.js +++ /dev/null @@ -1,35 +0,0 @@ -/** - * @flow - */ - -import React from 'react'; -import { ActivityIndicator, StyleSheet, View } from 'react-native'; - -const sizes = [20, 'small', 36, 'large', 60]; - -const ActivityIndicatorSizeExample = () => ( - - {sizes.map((size, i) => ( - - ))} - - -); - -const styles = StyleSheet.create({ - horizontal: { - alignItems: 'center', - flexDirection: 'row' - }, - rightPadding: { - paddingRight: 10 - }, - large: { marginLeft: 20, transform: [{ scale: 1.75 }] } -}); - -ActivityIndicatorSizeExample.metadata = { - id: 'ActivityIndicator.props.size', - description: '' -}; - -export default ActivityIndicatorSizeExample; diff --git a/packages/website/storybook/1-components/Button/ButtonScreen.js b/packages/website/storybook/1-components/Button/ButtonScreen.js deleted file mode 100644 index d5995a6a..00000000 --- a/packages/website/storybook/1-components/Button/ButtonScreen.js +++ /dev/null @@ -1,74 +0,0 @@ -/* eslint-disable react/jsx-sort-props */ - -/** - * @flow - */ - -import React from 'react'; -import PropColor from './examples/PropColor'; -import PropDisabled from './examples/PropDisabled'; -import PropOnPress from './examples/PropOnPress'; -import UIExplorer, { - AppText, - Code, - Description, - DocItem, - Section, - storiesOf -} from '../../ui-explorer'; - -const ButtonScreen = () => ( - - - - A basic button component. Supports a minimal level of customization. You can build your own - custom button using TouchableOpacity or TouchableNativeFeedback. - - - -
- - - - }} - /> - - - }} - /> - - - }} - /> - - - - -
- -); - -storiesOf('Components', module).add('Button', ButtonScreen); diff --git a/packages/website/storybook/1-components/Button/examples/PropColor.js b/packages/website/storybook/1-components/Button/examples/PropColor.js deleted file mode 100644 index 66ed1218..00000000 --- a/packages/website/storybook/1-components/Button/examples/PropColor.js +++ /dev/null @@ -1,23 +0,0 @@ -/** - * @flow - */ - -import React from 'react'; -import { DividerVertical } from '../helpers'; -import { Button, View } from 'react-native'; - -const emptyFunction = () => {}; - -const ButtonColorExample = () => ( - -