added docs to website

ajaymathur · ajaymathur · commit ed6bca1cedf2 · 2019-07-18T18:50:33.000+10:00
diff --git a/package.json b/package.json
@@ -19,7 +19,8 @@
   "bolt": {
     "workspaces": [
       "packages/*",
-      "website"
+      "website",
+      "website/loaders/*"
     ]
   },
   "preconstruct": {
@@ -87,6 +88,7 @@
     "react": "^16.3.1",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.3.1",
+    "style-loader": "^0.23.1",
     "webpack": "^4.29.6",
     "webpack-cli": "^3.3.0",
     "webpack-dev-server": "^3.2.1"
diff --git a/website/.babelrc b/website/.babelrc
@@ -1,3 +1,4 @@
 {
-    "presets": ["@babel/preset-react", "@babel/preset-env"]
+    "presets": ["@babel/preset-react", "@babel/preset-env"],
+    "plugins": ["@babel/plugin-proposal-class-properties"]
 }
diff --git a/website/DOCS b/website/DOCS
diff --git a/website/loaders/docs-loader/index.js b/website/loaders/docs-loader/index.js
@@ -0,0 +1,21 @@
+const bolt = require('bolt');
+const path = require('path');
+const fs = require('fs');
+const { promisify } = require('util');
+
+const readFile = promisify(fs.readFile);
+const fsStat = promisify(fs.stat);
+
+module.exports = async function docsLoader() {
+  let docs = {};
+  const ws = await bolt.getWorkspaces();
+
+  for (let workspace of ws) {
+    const readMeExists = fs.existsSync(path.resolve(workspace.dir, 'README.md'));
+    if (readMeExists) {
+      docs[workspace.name] = await readFile(path.join(workspace.dir, 'README.md'), 'utf-8');
+    }
+  }
+
+  return `export default ${JSON.stringify(docs)}`;
+};
diff --git a/website/loaders/docs-loader/package.json b/website/loaders/docs-loader/package.json
@@ -0,0 +1,5 @@
+{
+    "name": "docs-loader",
+    "version": "0.0.0",
+    "main": "index.js"
+}
diff --git a/website/package.json b/website/package.json
@@ -2,15 +2,26 @@
     "name": "website",
     "version": "0.0.0",
     "dependencies": {
+        "bolt": "^0.22.6",
+        "css-loader": "^2.1.1",
+        "extract-react-types": "^0.16.0",
+        "lz-string": "^1.4.4",
+        "pretty-proptypes": "^0.6.0",
         "react": "^16.3.1",
-        "react-dom": "^16.3.1"
+        "react-codemirror": "^1.0.0",
+        "react-dom": "^16.3.1",
+        "react-markdown": "^4.0.6",
+        "react-router-dom": "^5.0.0"
     },
     "devDependencies": {
         "@babel/core": "^7.4.0",
+        "@babel/plugin-proposal-class-properties": "^7.4.0",
         "@babel/preset-env": "^7.4.2",
         "@babel/preset-react": "^7.0.0",
         "babel-loader": "^8.0.5",
         "html-webpack-plugin": "^3.2.0",
+        "null-loader": "^0.1.1",
+        "style-loader": "^0.23.1",
         "webpack": "^4.29.6",
         "webpack-cli": "^3.3.0",
         "webpack-dev-server": "^3.2.1"
diff --git a/website/src/app.js b/website/src/app.js
@@ -1,7 +1,29 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import ReactMarkdown from 'react-markdown';
+import { HashRouter as Router, Route, Link } from 'react-router-dom';
 
-const App = () => <div>Hello World!</div>;
+import docs from '../DOCS';
+import Header from './components/Header';
+import Home from './pages/home';
+import PackageDoc from './pages/PackageDoc';
+import Repl from './pages/Repl';
+
+const App = () => (
+  <Router>
+    <Header />
+    <Route path="/" exact component={Home} />
+    <Route path="/packages" component={PackageDoc} />
+    <Route path="/repl" component={Repl} />
+  </Router>
+);
+
+/**Sample code to print markdown from html */
+/*
+{Object.keys(docs).map(doc => (
+  <ReactMarkdown source={docs[doc]} />
+))}
+*/
 
 const root = document.createElement('div');
 root.id = 'root';
diff --git a/website/src/components/Header/index.js b/website/src/components/Header/index.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import './style.css';
+
+export default () => (
+  <nav>
+    <Link to="/">Home</Link>
+    <Link to="/packages">Packages</Link>
+    <Link to="/repl">Try it out</Link>
+  </nav>
+);
diff --git a/website/src/components/Header/style.css b/website/src/components/Header/style.css
diff --git a/website/src/pages/App.css b/website/src/pages/App.css
@@ -0,0 +1,56 @@
+.container {
+    display: flex;
+    height: calc(100vh - 80px);
+  }
+  
+  .container .block {
+    flex: 0 0 50%;
+    border: 1px solid #a1a1a1;
+  }
+  
+  .container .block.proptypes {
+    padding: 15px;
+    box-sizing: border-box;
+  }
+  
+  .container .block .ReactCodeMirror {
+    height: 100%;
+  }
+  
+  .side-bar {
+    background: linear-gradient(270deg, #6738ff, #c3ffbf);
+    color: #6554c0;
+    padding: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 50px;
+  }
+  
+  .side-bar h1 {
+    display: inline-block;
+    text-shadow: 7px 6px 20px #6a4fc6;
+    margin: 5px;
+  }
+  
+  .side-bar .header-controls {
+    color: #c0feba;
+  }
+  
+  .side-bar .header-controls select {
+    margin-left: 10px;
+  }
+  
+  .error-container {
+    position: absolute;
+    bottom: 0;
+    background: rgb(255, 0, 0);
+    width: 100%;
+    height: 200px;
+    overflow: scroll;
+    margin: 0;
+  }
+  
+  .CodeMirror {
+    height: 100%;
+  }
diff --git a/website/src/pages/PackageDoc.js b/website/src/pages/PackageDoc.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import ReactMarkdown from 'react-markdown';
+import docs from '../../DOCS';
+
+export default function PackageDoc({ location }) {
+  let params = new URLSearchParams(location.search);
+  let docName = params.get('package');
+  return (
+    <div>
+      <ul>
+        {Object.keys(docs).map(docTitle => (
+          <li>
+            <Link to={{ pathname: '/packages', search: `package=${docTitle}` }}>{docTitle}</Link>
+          </li>
+        ))}
+      </ul>
+      <div>
+        <div>
+          <ReactMarkdown source={docs[docName || Object.keys(docs)[0]]} />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/website/src/pages/Repl.js b/website/src/pages/Repl.js
@@ -0,0 +1,90 @@
+import React, { Component, Fragment } from 'react';
+import CodeMirror from 'react-codemirror';
+import 'codemirror/lib/codemirror.css';
+import PrettyProps from 'pretty-proptypes';
+import ert from 'extract-react-types';
+import './App.css';
+import * as uriUtils from './uriUtils';
+
+const STARTING_CODE = {
+  code: `type ButtonPropType = {
+    /* This is*/
+  label: string
+}
+class Button extends React.Component<ButtonPropType>{
+}`,
+  typeSystem: 'flow'
+};
+
+class App extends Component {
+  state = {
+    code:
+      uriUtils.parseQuery().code_lz !== undefined
+        ? uriUtils.decompress(uriUtils.parseQuery().code_lz)
+        : STARTING_CODE.code,
+    dataForPropTypes: ert(STARTING_CODE.code, STARTING_CODE.typeSystem),
+    typeSystem: STARTING_CODE.typeSystem,
+    error: null
+  };
+
+  updateCode = code => {
+    try {
+      const ast = ert(code, this.state.typeSystem);
+      this.setState({
+        dataForPropTypes: ast,
+        error: null
+      });
+      uriUtils.updateQuery({ code: uriUtils.compress(code) });
+    } catch (error) {
+      this.setState({
+        error
+      });
+      window.error = error;
+    }
+  };
+
+  handleSelectChange = event => {
+    this.setState(
+      {
+        typeSystem: event.target.value
+      },
+      () => this.updateCode(this.state.code)
+    );
+  };
+
+  render() {
+    const { code, dataForPropTypes, error } = this.state;
+    return (
+      <Fragment>
+        <div className="side-bar">
+          <h1>Pretty proptypes</h1>
+          <div className="header-controls">
+            <label>
+              Type system:
+              <select onChange={this.handleSelectChange}>
+                <option value="flow">Flow</option>
+                <option value="typescript">TypeScript</option>
+              </select>
+            </label>
+          </div>
+        </div>
+        <div className="container">
+          <div className="block">
+            <CodeMirror
+              style={{ height: '100%' }}
+              value={code}
+              options={{ lineNumbers: true }}
+              onChange={this.updateCode}
+            />
+          </div>
+          <div className="block proptypes">
+            {dataForPropTypes && <PrettyProps className="block" props={dataForPropTypes} />}
+          </div>
+        </div>
+        {error && <pre className="error-container">{error.stack}</pre>}
+      </Fragment>
+    );
+  }
+}
+
+export default App;
diff --git a/website/src/pages/home.js b/website/src/pages/home.js
@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default () => <div>Hello world</div>;
diff --git a/website/src/pages/uriUtils.js b/website/src/pages/uriUtils.js
@@ -0,0 +1,53 @@
+import LZString from 'lz-string';
+
+export const compress = string =>
+  LZString.compressToBase64(string)
+    .replace(/\+/g, '-') // Convert '+' to '-'
+    .replace(/\//g, '_') // Convert '/' to '_'
+    .replace(/=+$/, ''); // Remove ending '='
+
+export const decompress = string =>
+  LZString.decompressFromBase64(
+    string
+      .replace(/-/g, '+') // Convert '-' to '+'
+      .replace(/_/g, '/') // Convert '_' to '/'
+  );
+
+export const encode = value => window.encodeURIComponent(value);
+
+export const decode = value => {
+  try {
+    return window.decodeURIComponent('' + value);
+  } catch (err) {
+    return value;
+  }
+};
+
+export const updateQuery = state => {
+  const query = Object.keys(state)
+    .map(key => {
+      return key === 'code' ? `${key}_lz=` + state.code : key + '=' + encode(state[key]);
+    })
+    .join('&');
+
+  window.location.hash = '?' + query;
+};
+
+export const parseQuery = () => {
+  const raw = document.location.hash
+    .replace(/^#\?/, '')
+    .split('&')
+    .reduce((reduced, pair) => {
+      const pieces = pair.split('=');
+      const name = decodeURIComponent('' + pieces[0]);
+
+      let value = decodeURIComponent('' + pieces[1]);
+      if (value === 'true' || value === 'false') {
+        value = value === 'true';
+      }
+
+      reduced[name] = value;
+      return reduced;
+    }, {});
+  return raw;
+};
diff --git a/website/webpack.config.js b/website/webpack.config.js
@@ -13,14 +13,38 @@ module.exports = {
   },
   module: {
     rules: [
+      {
+        test: /(babel-file-loader)/,
+        use: 'null-loader'
+      },
       {
         test: /\.jsx?$/,
         exclude: /(node_modules)/,
         use: {
           loader: 'babel-loader'
         }
+      },
+      {
+        test: /DOCS/,
+        use: {
+          loader: 'docs-loader'
+        }
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader']
       }
     ]
   },
-  plugins: [new HtmlWebpackPlugin()]
+  node: {
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  },
+  plugins: [new HtmlWebpackPlugin()],
+  resolveLoader: {
+    modules: ['node_modules', path.resolve(__dirname, 'loaders')]
+  }
 };
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`{`
`2`		`- "presets": ["@babel/preset-react", "@babel/preset-env"]`
	`2`	`+ "presets": ["@babel/preset-react", "@babel/preset-env"],`
	`3`	`+ "plugins": ["@babel/plugin-proposal-class-properties"]`
`3`	`4`	`}`