Add docs generator (callstack#75)

* docs: start working on docs generator

* docs: add a sidebar listing components

* docs: use next/css instead of styled components

* docs: properly setup routing

* refactor: rework styling

* docs: improve props styling

* chore: fix flow errors

* chore: styling tweaks

Author: satya164

.flowconfig

@@ -24,7 +24,8 @@
 .*/Libraries/react-native/ReactNative.js
 .*/node_modules/jest-runtime/build/__tests__/.*
 
-# Ignore duplicate modules under example/
+.*/node_modules/glamor/es6/CSSPropertyOperations/
+
 .*/example/node_modules/fbjs
 .*/example/node_modules/react
 .*/example/node_modules/react-native

docs/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "es2015",
+    "stage-1",
+    "react"
+  ]
+}

docs/.gitignore

@@ -0,0 +1,2 @@
+.next/
+pages/

docs/index.js

@@ -0,0 +1,59 @@
+/* @flow */
+
+import path from 'path';
+import fs from 'fs';
+import del from 'del';
+import { parse } from 'react-docgen';
+
+const pages = path.join(__dirname, 'pages');
+
+del.sync(pages);
+fs.mkdirSync(pages);
+
+const components = fs.readFileSync(path.join(__dirname, '../src/index.js'))
+  .toString()
+  .split('\n')
+  .map(line => line.split(' ').pop().replace(/('|;)/g, ''))
+  .filter(line => line.startsWith('./components/'))
+  .map(line => require.resolve(path.join(__dirname, '../src', line)));
+
+const items = [];
+const index = [];
+
+components.forEach(comp => {
+  const componentName = comp.split('/').pop().split('.')[0];
+  try {
+    const componentInfo = parse(fs.readFileSync(comp).toString());
+    items.push({ name: componentName, info: componentInfo });
+    index.push(componentName);
+  } catch (e) {
+    console.log(`${componentName}: ${e.message}`);
+  }
+});
+
+items.forEach(it => {
+  fs.writeFileSync(path.join(pages, `${it.name.toLowerCase()}.js`), `
+    import React from 'react';
+    import Page from '../templates/Page';
+    import ComponentDocs from '../templates/ComponentDocs';
+
+    export default function ${it.name}Doc(props) {
+      return (
+        <Page {...props} pages={${JSON.stringify(index)}}>
+          <ComponentDocs name='${it.name}' info={${JSON.stringify(it.info)}} />
+        </Page>
+      );
+    }
+  `);
+});
+
+fs.writeFileSync(path.join(pages, 'index.js'), `
+  import React from 'react';
+  import Home from '../templates/Home';
+  import Page from '../templates/Page';
+  export default (props) => (
+    <Page {...props} pages={${JSON.stringify(index)}}>
+      <Home />
+    </Page>
+  );
+`);

docs/templates/ComponentDocs.js

@@ -0,0 +1,50 @@
+/* @flow */
+
+import React from 'react';
+import css from 'next/css';
+import mono from './styles/mono';
+import body from './styles/body';
+
+const wrapper = css({
+  padding: '24px 48px',
+});
+
+const name = css({
+  fontSize: '36px',
+  margin: '16px 0 16px -24px',
+});
+
+const propsHeader = css({
+  fontSize: '24px',
+  color: '#000',
+  margin: '36px 0 16px',
+});
+
+const propInfo = css({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+});
+
+const propLabel = css({
+  backgroundColor: '#f0f0f0',
+  borderRadius: '3px',
+  padding: '0 8px',
+  margin: '8px 16px 8px 0',
+});
+
+export default function ComponentDocs(props: any) {
+  return (
+    <div {...wrapper}>
+      <div {...mono} {...name}>{`<${props.name} />`}</div>
+      <div {...body}>{props.info.description}</div>
+      <div {...mono} {...propsHeader}>Props</div>
+      {Object.keys(props.info.props).map(prop => (
+        <div {...propInfo} key={prop}>
+          <div {...mono} {...propLabel}>{prop}: {props.info.props[prop].flowType.name}</div>
+          <div {...body}>{props.info.props[prop].description}</div>
+        </div>
+      ))}
+    </div>
+  );
+}

docs/templates/Home.js

@@ -0,0 +1,39 @@
+/* @flow */
+
+import React from 'react';
+import css from 'next/css';
+import mono from './styles/mono';
+import body from './styles/body';
+
+const wrapper = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100vh',
+  padding: '24px 48px',
+});
+
+const inner = css({
+  textAlign: 'center',
+});
+
+const heading = css({
+  fontSize: '36px',
+  fontWeight: 'bold',
+  margin: '16px 0 16px -24px',
+});
+
+const description = css({
+  fontSize: '24px',
+});
+
+export default function Home() {
+  return (
+    <div {...wrapper}>
+      <div {...inner}>
+        <div {...mono} {...heading}>React Native Paper</div>
+        <div {...body} {...description}>Documentation</div>
+      </div>
+    </div>
+  );
+}

docs/templates/Page.js

@@ -0,0 +1,72 @@
+/* @flow */
+
+import React from 'react';
+import css from 'next/css';
+import Link from 'next/link';
+import mono from './styles/mono';
+
+const wrapper = css({
+  display: 'flex',
+  flexDirection: 'row',
+  height: '100vh',
+});
+
+const sidebar = css({
+  width: '240px',
+  padding: '16px',
+  backgroundColor: '#f0f0f0',
+  overflow: 'auto',
+});
+
+const content = css({
+  flex: 1,
+  height: '100%',
+  overflow: 'auto',
+});
+
+const separator = css({
+  border: 0,
+  backgroundColor: '#ddd',
+  height: '1px',
+  margin: '8px',
+});
+
+const link = css({
+  display: 'block',
+  margin: '8px',
+  textDecoration: 'none',
+  opacity: 0.32,
+
+  ':hover': {
+    opacity: 1,
+  },
+});
+
+const active = css({
+  opacity: 1,
+});
+
+export default function Body({ url, pages, children }: any) {
+  return (
+    <div {...wrapper}>
+      <div {...sidebar}>
+        <Link href='/'>
+          <a {...mono} {...link} {...(url.pathname === '/' ? active : null)}>
+            Home
+          </a>
+        </Link>
+        <hr {...separator} />
+        {pages.map(page =>
+          <Link key={page} href={`/${page.toLowerCase()}`}>
+            <a {...mono} {...link} {...(url.pathname === '/' + page.toLowerCase() ? active : null)}>
+              {page}
+            </a>
+          </Link>
+        )}
+      </div>
+      <div {...content}>
+        {children}
+      </div>
+    </div>
+  );
+}

docs/templates/styles/body.js

@@ -0,0 +1,24 @@
+/* @flow */
+
+import css, { insertGlobal } from 'next/css';
+
+insertGlobal(`
+  html {
+    box-sizing: border-box;
+  }
+  *, *:before, *:after {
+    box-sizing: inherit;
+  }
+  html, body {
+    margin: 0;
+    padding: 0;
+    color: '#555',
+  }
+`);
+
+const styles = css({
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+  lineHeight: 1.5,
+});
+
+export default styles;

docs/templates/styles/mono.js

@@ -0,0 +1,11 @@
+/* @flow */
+
+import css from 'next/css';
+
+const styles = css({
+  fontFamily: '"Roboto Mono", "Operator Mono", "Fira Code", "Ubuntu Mono", "Droid Sans Mono", "Liberation Mono", "Source Code Pro", Menlo, Consolas, Courier, monospace',
+  lineHeight: 2,
+  color: '#000',
+});
+
+export default styles;

package.json

@@ -6,7 +6,9 @@
   "scripts": {
     "flow": "flow",
     "lint": "eslint .",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "docs:generate": "babel-node docs/index.js",
+    "docs:dev": "cd docs && next"
   },
   "files": [
     "src/"
@@ -27,14 +29,22 @@
     "react-native-vector-icons": "*"
   },
   "devDependencies": {
+    "babel-cli": "^6.18.0",
     "babel-eslint": "^7.1.0",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-stage-1": "^6.16.0",
+    "del": "^2.2.2",
     "eslint": "^3.9.1",
     "eslint-plugin-babel": "^3.3.0",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-react": "^6.6.0",
     "eslint-plugin-react-native": "^2.0.0",
     "flow-bin": "^0.33.0",
+    "next": "^1.1.2",
     "react": "~15.3.2",
+    "react-docgen": "^2.12.1",
+    "react-dom": "^15.4.0",
     "react-native": "~0.37.0",
     "react-native-vector-icons": "~3.0.0"
   },

src/components/Button.js

@@ -40,17 +40,50 @@ type State = {
   elevation: Animated.Value;
 }
 
+/**
+ * Buttons communicate the action that will occur when the user touches them
+ */
 class Button extends PureComponent<void, Props, State> {
   static propTypes = {
+    /**
+     * Disable the button
+     */
     disabled: PropTypes.bool,
+    /**
+     * Shrink the button for a more compact look
+     */
     shrink: PropTypes.bool,
+    /**
+     * Add elevation to button, as opposed to default flat appearance
+     */
     raised: PropTypes.bool,
+    /**
+     * Use to primary color from theme
+     */
     primary: PropTypes.bool,
+    /**
+     * Text color of button, dark button will render ligh text and vice-versa
+     */
     dark: PropTypes.bool,
+    /**
+     * Whether to show a loading indicator
+     */
     loading: PropTypes.bool,
+    /**
+     * Icon name
+     */
     icon: PropTypes.string,
+    /**
+     * Custom text color for flat button or background color for raised button
+     */
     color: PropTypes.string,
+    /**
+     * Button text
+     */
     children: PropTypes.string.isRequired,
+    /**
+     * Function to execute on press
+     */
     onPress: PropTypes.func,
     style: View.propTypes.style,
     theme: PropTypes.object.isRequired,

src/components/Checkbox.js

@@ -20,6 +20,9 @@ type Props = {
   theme: Theme;
 }
 
+/**
+ * Checkboxes allow the selection of multiple options from a set
+ */
 const Checkbox = (props: Props) => {
   const {
     checked,
@@ -60,9 +63,21 @@ const Checkbox = (props: Props) => {
 };
 
 Checkbox.propTypes = {
+  /**
+   * Whether checkbox is checked
+   */
   checked: PropTypes.bool.isRequired,
+  /**
+   * Whether checkbox is disabled
+   */
   disabled: PropTypes.bool,
+  /**
+   * Function to execute on press
+   */
   onPress: PropTypes.func,
+  /**
+   * Custom color for checkbox
+   */
   color: PropTypes.string,
   theme: PropTypes.object.isRequired,
 };