Rewrite interactive documentation

Consolidate all docs within the latest storybook

Ref #1172

Author: necolas

.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 renamed to 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/website/storybook/.storybook/babel.config.js renamed to packages/docs/babel.config.js

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