chore(router): setup doc site router

Semantic-Org · May 28, 2016 · adf20e3 · adf20e3
1 parent af5066c
commit adf20e3
Show file tree

Hide file tree

Showing 10 changed files with 140 additions and 51 deletions.
diff --git a/build/webpack.config.js b/build/webpack.config.js
@@ -35,7 +35,7 @@ const webpackHotMiddlewareEntry = `webpack-hot-middleware/client?${_.map({
 }, (val, key) => `&${key}=${val}`).join('')}`
 
 const APP_ENTRY = [
-  paths.docsSrc('DocsApp.js'),
+  paths.docsSrc('index.js'),
 ]
 
 webpackConfig.entry = __DEV__ ? {

diff --git a/docs/app/404.html b/docs/app/404.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <!-- Hack to redirect SPA routes back to the index.html -->
+  <meta http-equiv="refresh" content="0;URL='http://technologyadvice.github.io/stardust'" />
+  <script>
+    sessionStorage.ghPagesRedirect = location.href
+  </script>
+</head>
+<body></body>
+</html>
diff --git a/docs/app/App.js b/docs/app/App.js
@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+import { Router, browserHistory } from 'react-router'
+
+import routes from './routes'
+
+export default class App extends Component {
+  render() {
+    return (
+      <Router history={browserHistory} routes={routes} />
+    )
+  }
+}
diff --git a/docs/app/Components/Root.js b/docs/app/Components/Root.js
@@ -0,0 +1,75 @@
+import 'semantic-ui-css/semantic.js'
+import 'semantic-ui-css/semantic.css'
+import 'highlight.js/styles/github.css'
+import _ from 'lodash'
+import React, { Component, PropTypes } from 'react'
+import { routerShape } from 'react-router'
+
+import * as stardust from 'stardust'
+
+import ComponentDoc from '../Components/ComponentDoc/ComponentDoc'
+import DocsMenu from '../Components/Sidebar/Sidebar'
+import style from '../Style'
+
+const { Grid, Segment } = stardust
+
+export default class Root extends Component {
+  static contextTypes = {
+    router: routerShape,
+  }
+  static propTypes = {
+    children: PropTypes.node,
+    location: PropTypes.object,
+    params: PropTypes.object,
+    route: PropTypes.object,
+    routeParams: PropTypes.object,
+  }
+
+  state = { menuSearch: '' }
+
+  render() {
+    const { children, location, params, route, routeParams, } = this.props
+    const components = _.map(stardust, '_meta')
+      .sort(({ name }) => name)
+      .map(_meta => (
+        <Grid.Row key={_meta.name} id={_meta.name}>
+          <Grid.Column>
+            <Segment className='basic'>
+              <ComponentDoc _meta={_meta} />
+            </Segment>
+          </Grid.Column>
+        </Grid.Row>
+      ))
+
+    return (
+      <div style={style.container}>
+        <div style={style.menu}>
+          <DocsMenu />
+        </div>
+        <div style={style.main}>
+          {location.pathname !== '' ? (
+            <div>
+              {/* TODO will cleanup, debug to prove router works */}
+              <h1>router:</h1>
+              <pre>{JSON.stringify(this.context.router, null, 2)}</pre>
+              <h1>location:</h1>
+              <pre>{JSON.stringify(location, null, 2)}</pre>
+              <h1>params:</h1>
+              <pre>{JSON.stringify(params, null, 2)}</pre>
+              <h1>route:</h1>
+              <pre>{JSON.stringify(route, null, 2)}</pre>
+              <h1>routeParams:</h1>
+              <pre>{JSON.stringify(routeParams, null, 2)}</pre>
+              <h1>children:</h1>
+              {children}
+            </div>
+          ) : (
+            <Grid className='vertically divided padded'>
+              {components}
+            </Grid>
+          )}
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/docs/app/DocsApp.js b/docs/app/DocsApp.js
diff --git a/docs/app/index.html b/docs/app/index.html
@@ -1,9 +1,20 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+  <meta charset="UTF-8">
   <title>Stardust</title>
+  <script>
+    // Apply gh-pages SPA redirect that was applied in 404.html
+    (function() {
+      var ghPagesRedirect = sessionStorage.ghPagesRedirect
+      delete sessionStorage.ghPagesRedirect
+      if (ghPagesRedirect && ghPagesRedirect !== location.href) {
+        history.replaceState(null, null, ghPagesRedirect)
+      }
+    })()
+  </script>
 </head>
 <body>
-  <div id="root"></div>
+
 </body>
 </html>
diff --git a/docs/app/index.js b/docs/app/index.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import { render } from 'react-dom'
+import App from './App'
+
+const mountNode = document.createElement('div')
+document.body.appendChild(mountNode)
+
+render(<App />, mountNode)
diff --git a/docs/app/routes.js b/docs/app/routes.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import { Route } from 'react-router'
+
+import Root from './Components/Root'
+import ButtonExamples from './Examples/elements/Button/ButtonExamples'
+
+const redirect = to => (nextState, replace) => replace(to)
+
+const routes = (
+  <Route path='/' component={Root}>
+    <Route path='elements'>
+      <Route path='button' component={ButtonExamples} />
+    </Route>
+    <Route path='*' onEnter={redirect('/')} />
+  </Route>
+)
+
+export default routes
diff --git a/package.json b/package.json
@@ -104,6 +104,7 @@
     "react-dom": "^15.0.2",
     "react-highlight": "^0.8.0",
     "react-hot-loader": "^1.3.0",
+    "react-router": "^2.4.1",
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",
     "redbox-react": "^1.2.2",

diff --git a/test/specs/commonTests.js b/test/specs/commonTests.js
@@ -117,7 +117,7 @@ export const isConformant = (Component, requiredProps = {}) => {
       [`data-${_.kebabCase(faker.hacker.noun())}`]: faker.hacker.verb(),
     }
 
-    // descendants accepts a enzyme <selector>
+    // descendants() accepts an enzyme <selector>
     // props should be spread on some descendant
     // we find the descendant with spread props via a matching props object selector
     // we do not test Component for props, of course they exist as we are spreading them