Rewrite interactive documentation

Consolidate all docs within the latest storybook

Ref #1172

.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,

.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

package.json

@@ -1,18 +1,16 @@
 {
   "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:* -- {@}\" --",
     "compile:commonjs": "cd packages/react-native-web && cross-env BABEL_ENV=commonjs babel --root-mode upward src --out-dir dist/cjs --ignore \"**/__tests__\"",
     "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": {

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;
+};

packages/docs/.storybook/addons.js

@@ -0,0 +1 @@
+// import '@storybook/addon-options/register';

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);

packages/website/storybook/.storybook/decorator-centered.js → 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%'
   }
 });
 

packages/docs/.storybook/presets.js

@@ -0,0 +1,10 @@
+module.exports = [
+  {
+    name: '@storybook/addon-docs/preset',
+    options: {
+      configureJSX: true,
+      babelOptions: {},
+      sourceLoaderOptions: null
+    }
+  }
+];

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"
+  }
+}

packages/docs/src/apis/AppRegistry/AppRegistry.stories.mdx

@@ -0,0 +1,107 @@
+import { Meta, Props } from '@storybook/addon-docs/blocks';
+
+<Meta title="APIs|AppRegistry" />
+
+# 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`.

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';

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';
+
+<Meta title="APIs|AppState" />
+
+# 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
+
+<Preview withSource='none'>
+  <Story name="stateChanges">{stories.stateChanges}</Story>
+</Preview>

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 (
+    <View>
+      <Text>Active count: {state.active}</Text>
+      <Text>Background count: {state.background}</Text>
+      <Text>Current state is: {state.currentState}</Text>
+    </View>
+  );
+}

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';