feat: add get started page

Author: satya164

docs/app.src.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import RedBox from 'redbox-react';
 import { rehydrate } from 'glamor';
 import App from './templates/App';
-import pages from './dist/app.data.json'; // eslint-disable-line import/no-unresolved
+import { pages, components } from './dist/app.data.json'; // eslint-disable-line import/no-unresolved
 
 rehydrate(window.__GLAMOR__);
 
@@ -13,6 +13,7 @@ const render = () => {
     ReactDOM.render(
       <App
         pages={pages}
+        components={components}
         name={window.__INITIAL_PATH__}
       />,
       root

docs/index.js

@@ -20,12 +20,11 @@ if (!fs.existsSync(dist)) {
   fs.mkdirSync(dist);
 }
 
-let items = [];
+let components = [];
 let pages = [];
 
 function collectInfo() {
-  items = [];
-  pages = [];
+  components = [];
 
   const files = fs.readFileSync(path.join(__dirname, '../src/index.js'))
     .toString()
@@ -48,16 +47,18 @@ function collectInfo() {
     const componentName = comp.split('/').pop().split('.')[0];
     try {
       const componentInfo = parse(fs.readFileSync(comp).toString());
-      items.push({ name: componentName, info: componentInfo });
-      pages.push(componentName);
+      components.push({ name: componentName, info: componentInfo });
     } catch (e) {
       console.log(`${componentName}: ${e.message}`);
     }
   });
 
-  pages.sort();
+  pages = fs.readdirSync(path.join(__dirname, 'pages')).filter(name => name.endsWith('.md')).map(name => ({
+    name: name.replace(/\.md/, ''),
+    text: fs.readFileSync(path.join(__dirname, 'pages', name)).toString(),
+  }));
 
-  fs.writeFileSync(path.join(dist, 'app.data.json'), JSON.stringify(items));
+  fs.writeFileSync(path.join(dist, 'app.data.json'), JSON.stringify({ pages, components }));
 }
 
 collectInfo();
@@ -66,7 +67,8 @@ function buildHTML({ title, description, name }: any) {
   const { html, css, ids } = renderStatic(
     () => ReactDOMServer.renderToString(
       <App
-        pages={items}
+        pages={pages}
+        components={components}
         name={name}
       />
     )
@@ -101,7 +103,7 @@ function buildHTML({ title, description, name }: any) {
   );
 }
 
-buildRoutes(items).forEach(buildHTML);
+buildRoutes(pages, components).forEach(buildHTML);
 
 const entry = [ 'app.src.js' ];
 

docs/pages/Getting Started.md

@@ -0,0 +1,71 @@
+Getting Started
+===============
+
+## Installation
+
+Open a Terminal in your project's folder and run,
+
+```sh
+npm install --save react-native-paper react-native-vector-icons
+```
+
+After installation, you'll need to link [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons).
+
+
+## Usage
+
+Wrap your root component in `Provider` from `react-native-paper`. It's a good idea to wrap the component which is passed to `AppRegsitry.registerComponent`.
+
+Example:
+
+```js
+import React from 'react';
+import { AppRegistry } from 'react-native';
+import { Provider as PaperProvider } from 'react-native-paper';
+import App from './src/App';
+
+function Main() {
+  return (
+    <PaperProvider>
+      <App />
+    </PaperProvider>
+  )
+}
+
+AppRegistry.registerComponent('main', () => Main);
+```
+
+The `PaperProvider` component provides the theme to all the components in the framework. It also acts as a portal to components which need to be rendered at the top level.
+
+
+## Customization
+
+You can provide a custom theme to customize the colors, fonts etc. with the `Provider` component. Check the [default theme](blob/master/src/styles/DefaultTheme.js) to see what customization options are supported.
+
+Example:
+
+```js
+import React from 'react';
+import { AppRegistry } from 'react-native';
+import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
+import color from 'color';
+import App from './src/App';
+
+const theme = {
+  ...DefaultTheme,
+  colors: {
+    ...DefaultTheme.colors,
+    primary: 'tomato',
+    primaryDark: color('tomato').darken(0.2).rgbaString(),
+    accent: 'yellow',
+  },
+};
+
+function Main() {
+  return (
+    <PaperProvider theme={theme}>
+      <App />
+    </PaperProvider>
+  )
+}
+```

docs/templates/App.js

@@ -1,34 +1,73 @@
 /* @flow */
 
 import React from 'react';
+import { insertGlobal } from 'glamor';
 import Router from './Router';
 import Page from './Page';
 import Home from './Home';
 import ComponentDocs from './ComponentDocs';
+import Markdown from './Markdown';
 
-export const buildRoutes = (pages: Array<*>) =>
-  pages.map(it => ({
+insertGlobal(`
+  html {
+    box-sizing: border-box;
+  }
+  *, *:before, *:after {
+    box-sizing: inherit;
+  }
+  html, body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    margin: 0;
+    padding: 0;
+    color: #333;
+    lineHeight: 1.5;
+  }
+  code {
+    font-family: "Roboto Mono", "Operator Mono", "Fira Code", "Ubuntu Mono", "Droid Sans Mono", "Liberation Mono", "Source Code Pro", Menlo, Consolas, Courier, monospace;
+    color: #000;
+    line-height: 2;
+  }
+  a {
+    color: #1976D2;
+    text-decoration: none;
+  }
+  a:hover {
+    color: #2196F3;
+  }
+`);
+
+export const buildRoutes = (pages: Array<*>, components: Array<*>) =>
+  components.map(it => ({
     title: it.name,
     name: it.name.toLowerCase(),
     description: it.info.description,
     component: props => (
-      <Page {...props} pages={pages}>
+      <Page {...props} pages={pages} components={components}>
         <ComponentDocs {...it} />
       </Page>
     ),
-  })).concat({
+  })).concat(pages.map(it => ({
+    title: it.name,
+    name: it.name.toLowerCase().replace(/\s+/g, '-'),
+    description: '',
+    component: props => (
+      <Page {...props} pages={pages} components={components}>
+        <Markdown source={it.text} />
+      </Page>
+    ),
+  }))).concat({
     title: 'Home',
     name: 'index',
     description: '',
     component: props => (
-      <Page {...props} pages={pages}>
+      <Page {...props} pages={pages} components={components}>
         <Home />
       </Page>
     ),
   });
 
-export default function App({ pages, name }: any) {
-  const routes = buildRoutes(pages);
+export default function App({ pages, components, name }: any) {
+  const routes = buildRoutes(pages, components);
   return (
     <Router
       name={name}

docs/templates/ComponentDocs.js

@@ -2,14 +2,8 @@
 
 import React from 'react';
 import { style, merge } from 'glamor';
-import mono from './styles/mono';
-import body from './styles/body';
 import Markdown from './Markdown';
 
-const wrapper = style({
-  padding: '24px 48px',
-});
-
 const name = style({
   fontSize: '36px',
   margin: '24px 0 8px -24px',
@@ -77,7 +71,7 @@ const propDetails = style({
 });
 
 const rest = style({
-  color: '#2196F3',
+  color: '#1976D2',
 });
 
 export default function ComponentDocs(props: any) {
@@ -96,50 +90,51 @@ export default function ComponentDocs(props: any) {
   }).join('\n');
 
   return (
-    <div {...wrapper}>
-      <h1 {...mono} {...name}>{`<${props.name} />`}</h1>
+    <div>
+      <h1 {...name}><code>{`<${props.name} />`}</code></h1>
       <Markdown
-        {...body}
         {...markdown}
         source={description} options={{ linkify: true }}
       />
-      <h2 {...mono} {...propsHeader}>Props</h2>
+      <h2 {...propsHeader}>Props</h2>
       {Object.keys(props.info.props).map(prop => {
         const { flowType, type, required } = props.info.props[prop];
         return (
           <div {...propInfo} key={prop}>
-            <span {...mono}>
-              <span
+            <span>
+              <code
                 {...propRequired}
                 data-hint='required'
               >
                 {required ? '*' : ''}
-              </span>
+              </code>
               <a
-                {...mono}
                 {...propLabel}
                 name={prop}
                 href={`#${prop}`}
               >
-                {prop}: {flowType.name === 'any' && type ? (type.raw || type.name) : (flowType.raw || flowType.name)}
+                <code>
+                  {prop}: {flowType.name === 'any' && type ? (type.raw || type.name) : (flowType.raw || flowType.name)}
+                </code>
               </a>
             </span>
             <Markdown
-              {...body} {...propDetails}
+              {...propDetails}
               source={props.info.props[prop].description}
             />
           </div>
         );
       })}
       {restProps && restProps.length ? restProps.map(prop => (
         <a
-          {...mono}
           {...propLabel}
           {...rest}
           key={prop.name}
           href={prop.link}
         >
-          ...{prop.name}
+          <code>
+            ...{prop.name}
+          </code>
         </a>
       )) : null}
     </div>

docs/templates/Home.js

@@ -2,8 +2,6 @@
 
 import React from 'react';
 import { style } from 'glamor';
-import mono from './styles/mono';
-import body from './styles/body';
 
 const wrapper = style({
   display: 'flex',
@@ -31,8 +29,8 @@ export default function Home() {
   return (
     <div {...wrapper}>
       <div {...inner}>
-        <h1 {...mono} {...heading}>React Native Paper</h1>
-        <p {...body} {...description}>Documentation</p>
+        <h1 {...heading}>React Native Paper</h1>
+        <p {...description}>Documentation</p>
       </div>
     </div>
   );

docs/templates/Markdown.js

@@ -14,6 +14,10 @@ const markdown = style({
     overflowX: 'auto',
   },
 
+  '& code': {
+    fontSize: '.9em',
+  },
+
   '& .hljs-comment': {
     color: '#ABB0B6',
   },