[WIP] New website

docs/01-getting-started.md

@@ -0,0 +1,52 @@
+# Getting Started
+
+Please add pretty-proptypes as dependency to the project,
+
+```sh
+yarn add pretty-proptypes
+```
+
+## Using webpack loader
+
+Add the extract-react-types-loader as dev dependency,
+
+```bash
+yarn add extract-react-types-loader  --dev
+```
+
+We can use webpack's inline loader feature to create documentation,
+
+```jsx
+import Props from 'pretty-proptypes';
+
+// render the props documentation on the page
+<Props
+    heading="My Cool Component"
+    props={require('!!extract-react-types-loader!../MyCoolComponent')}
+/>
+```
+
+## Using Babel plugin
+
+Add the babel-plugin-extract-react-types as dev dependency,
+
+```bash
+yarn add babel-plugin-extract-react-types  --dev
+```
+
+Update the babel config to use this plugin,
+
+```js
+{
+  "plugins": ["babel-plugin-extract-react-types"]
+}
+```
+
+```js
+import MyCoolComponent from 'MyCoolComponent';
+import Props from 'pretty-proptypes';
+
+<Props 
+    heading="My Cool Component"
+    props={MyCoolComponent)}
+```

package.json

@@ -18,7 +18,9 @@
   },
   "bolt": {
     "workspaces": [
-      "packages/*"
+      "packages/*",
+      "website",
+      "website/loaders/*"
     ]
   },
   "preconstruct": {
@@ -33,6 +35,8 @@
   },
   "dependencies": {
     "@aparna036/babel-explode-module": "^2.0.1",
+    "@atlaskit/code": "^11.0.6",
+    "@atlaskit/css-reset": "^5.0.4",
     "@babel/core": "^7.4.4",
     "@babel/plugin-syntax-flow": "^7.2.0",
     "@babel/plugin-syntax-jsx": "^7.2.0",
@@ -54,6 +58,7 @@
     "babel-type-scopes": "^1.1.0",
     "babylon": "^7.0.0-beta.22",
     "babylon-options": "^2.0.1",
+    "bolt": "^0.22.6",
     "eslint": "^5.13.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-config-prettier": "^4.0.0",
@@ -63,28 +68,45 @@
     "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react": "^7.12.4",
     "jest-in-case": "^1.0.2",
+    "lz-string": "^1.4.4",
     "preconstruct": "^0.0.81",
+    "react": "^16.3.1",
+    "react-codemirror": "^1.0.0",
+    "react-dom": "^16.3.1",
+    "react-markdown": "^4.0.6",
     "react-markings": "^1.2.0",
+    "react-router-dom": "^5.0.1",
     "resolve": "^1.10.1",
-    "strip-indent": "^2.0.0"
+    "strip-indent": "^2.0.0",
+    "styled-components": "^4.3.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.4.4",
     "@babel/plugin-proposal-class-properties": "^7.4.4",
     "@babel/plugin-transform-runtime": "^7.4.4",
     "@babel/preset-env": "^7.4.4",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.5",
     "babel-jest": "^24.7.1",
     "babel-plugin-emotion": "^10.0.14",
+    "copy-webpack-plugin": "^5.0.2",
+    "css-loader": "^2.1.1",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "flow-bin": "^0.98.0",
+    "html-webpack-plugin": "^3.2.0",
     "jest": "^24.7.1",
     "jest-in-case": "^1.0.2",
     "jsdom": "^11.7.0",
+    "null-loader": "^0.1.1",
     "prettier": "^1.13.7",
     "react": "^16.3.1",
     "react-addons-test-utils": "^15.6.2",
-    "react-dom": "^16.3.1"
+    "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"
   }
-}
+}

packages/babel-plugin-extract-react-types/README.md

@@ -10,14 +10,18 @@ yarn add babel-plugin-extract-react-types pretty-proptypes
 
 ## Usage
 
-`.babelrc`
+Add the plugin to your babel config.
+
+**.babelrc**
 
 ```json
 {
   "plugins": ["babel-plugin-extract-react-types"]
 }
 ```
 
+## Displaying props
+
 ```jsx
 import SomeComponent from 'somewhere';
 import Props from 'pretty-proptypes';

website/.babelrc

@@ -0,0 +1,4 @@
+{
+    "presets": ["@babel/preset-react", "@babel/preset-env"],
+    "plugins": ["@babel/plugin-proposal-class-properties"]
+}

website/_redirects

@@ -0,0 +1 @@
+/*    /index.html   200

website/loaders/docs-loader/index.js

@@ -0,0 +1,39 @@
+const bolt = require('bolt');
+const path = require('path');
+const fs = require('fs');
+const { promisify } = require('util');
+
+const readFile = promisify(fs.readFile);
+const readDir = promisify(fs.readdir);
+const fsStat = promisify(fs.stat);
+
+module.exports = async function docsLoader() {
+  let docs = {
+    packageDocs: {},
+    documentation: {}
+  };
+  const ws = await bolt.getWorkspaces();
+
+  for (let workspace of ws) {
+    const readMeExists = fs.existsSync(path.resolve(workspace.dir, 'README.md'));
+    if (readMeExists) {
+      docs.packageDocs[workspace.name] = await readFile(
+        path.join(workspace.dir, 'README.md'),
+        'utf-8'
+      );
+    }
+  }
+
+  const staticDocs = await readDir(path.join(__dirname, '..', '..', '..', 'docs'));
+
+  for (let staticDoc of staticDocs) {
+    docs.documentation[staticDoc] = await readFile(
+      path.join(__dirname, '..', '..', '..', 'docs', staticDoc),
+      'utf-8'
+    );
+  }
+
+  return `export default { packageDocs: ${JSON.stringify(
+    docs.packageDocs
+  )}, staticDocs: ${JSON.stringify(docs.documentation)}}`;
+};

website/loaders/docs-loader/package.json

@@ -0,0 +1,5 @@
+{
+    "name": "docs-loader",
+    "version": "0.0.0",
+    "main": "index.js"
+}

website/package.json

@@ -0,0 +1,33 @@
+{
+    "name": "website",
+    "version": "0.0.0",
+    "dependencies": {
+        "@atlaskit/code": "^11.0.6",
+        "@atlaskit/css-reset": "^5.0.4",
+        "bolt": "^0.22.6",
+        "extract-react-types": "^0.21.0",
+        "lz-string": "^1.4.4",
+        "pretty-proptypes": "^0.6.0",
+        "react": "^16.3.1",
+        "react-codemirror": "^1.0.0",
+        "react-dom": "^16.3.1",
+        "react-markdown": "^4.0.6",
+        "react-router-dom": "^5.0.1",
+        "styled-components": "^4.3.2"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.4.4",
+        "@babel/plugin-proposal-class-properties": "^7.4.4",
+        "@babel/preset-env": "^7.4.4",
+        "@babel/preset-react": "^7.0.0",
+        "babel-loader": "^8.0.5",
+        "css-loader": "^2.1.1",
+        "copy-webpack-plugin": "^5.0.2",
+        "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"
+    }
+}

website/public/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-137351111-1"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+
+      gtag('config', 'UA-137351111-1');
+    </script>
+  </head>
+  <body></body>
+</html>

website/src/app.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
+import '@atlaskit/css-reset';
+
+import Header from './components/Header';
+// import Home from './pages/home';
+import PackageDoc from './pages/PackageDoc';
+import Repl from './pages/repl';
+
+const App = () => (
+  <Router>
+    <Route path="*" component={Header} />
+    {/* <Route path="/" exact component={Home} /> */}
+    <Route path="/" exact 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';
+document.body.appendChild(root);
+
+ReactDOM.render(<App />, document.getElementById('root'));

website/src/components/Header/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import './style.css';
+
+export default ({ location }) => {
+  const ifPathNameEqualTo = pathName => location && location.pathname === pathName;
+  return (
+    <nav>
+      <Link to="/">
+        <h1>Extract React Types</h1>
+      </Link>
+      <div className="header-controls">
+        {/* <label>
+          Type system:
+          <select>
+            <option value="flow">Flow</option>
+            <option value="typescript">TypeScript</option>
+          </select>
+        </label> */}
+        {/* <Link to="/" className={ifPathNameEqualTo('/') ? 'active' : ''}>
+          Home
+        </Link> */}
+        <Link to="/" className={ifPathNameEqualTo('/') ? 'active' : ''}>
+          Packages
+        </Link>
+        <Link to="/repl" className={ifPathNameEqualTo('/repl') ? 'active' : ''}>
+          Try it out
+        </Link>
+      </div>
+    </nav>
+  );
+};

website/src/components/Header/style.css

@@ -0,0 +1,28 @@
+nav {
+    background: linear-gradient(270deg, #6738ff, #c3ffbf);
+    padding: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 50px;
+  }
+
+  nav h1 {
+    display: inline-block;
+    text-shadow: 7px 6px 20px #6a4fc6;
+    margin: 5px;
+  }
+
+  nav .header-controls a{
+    color: #ffffff;
+    font-weight: bold;
+    margin-left: 15px;
+  }
+
+  nav .header-controls a.active{
+    text-decoration: underline;
+  }
+
+  nav .header-controls select {
+    margin-left: 10px;
+  }