From adf20e3cc32b6600e6203edd625543a6cdae2688 Mon Sep 17 00:00:00 2001 From: Levi Thomason Date: Sat, 28 May 2016 10:47:48 -0700 Subject: [PATCH] chore(router): setup doc site router --- build/webpack.config.js | 2 +- docs/app/404.html | 11 ++++++ docs/app/App.js | 12 ++++++ docs/app/Components/Root.js | 75 +++++++++++++++++++++++++++++++++++++ docs/app/DocsApp.js | 47 ----------------------- docs/app/index.html | 15 +++++++- docs/app/index.js | 8 ++++ docs/app/routes.js | 18 +++++++++ package.json | 1 + test/specs/commonTests.js | 2 +- 10 files changed, 140 insertions(+), 51 deletions(-) create mode 100644 docs/app/404.html create mode 100644 docs/app/App.js create mode 100644 docs/app/Components/Root.js delete mode 100644 docs/app/DocsApp.js create mode 100644 docs/app/index.js create mode 100644 docs/app/routes.js diff --git a/build/webpack.config.js b/build/webpack.config.js index 6afc3d4afe..5b8d7aa3fc 100644 --- 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 new file mode 100644 index 0000000000..5be87dbc1e --- /dev/null +++ b/docs/app/404.html @@ -0,0 +1,11 @@ + + + + + + + + + diff --git a/docs/app/App.js b/docs/app/App.js new file mode 100644 index 0000000000..d193b88b58 --- /dev/null +++ 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 ( + + ) + } +} diff --git a/docs/app/Components/Root.js b/docs/app/Components/Root.js new file mode 100644 index 0000000000..1e99a144c6 --- /dev/null +++ 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 => ( + + + + + + + + )) + + return ( +
+
+ +
+
+ {location.pathname !== '' ? ( +
+ {/* TODO will cleanup, debug to prove router works */} +

router:

+ 
{JSON.stringify(this.context.router, null, 2)}
+

location:

+ 
{JSON.stringify(location, null, 2)}
+

params:

+ 
{JSON.stringify(params, null, 2)}
+

route:

+ 
{JSON.stringify(route, null, 2)}
+

routeParams:

+ 
{JSON.stringify(routeParams, null, 2)}
+

children:

+ {children} +
+ ) : ( + + {components} + + )} +
+
+ ) + } +} diff --git a/docs/app/DocsApp.js b/docs/app/DocsApp.js deleted file mode 100644 index 3f6e69221e..0000000000 --- a/docs/app/DocsApp.js +++ /dev/null @@ -1,47 +0,0 @@ -import 'semantic-ui-css/semantic.js' -import 'semantic-ui-css/semantic.css' -import 'highlight.js/styles/github.css' -import _ from 'lodash' -import React, { Component } from 'react' -import { render } from 'react-dom' - -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 - -class DocsApp extends Component { - state = { menuSearch: '' }; - - render() { - const components = _.map(stardust, '_meta') - .sort(({ name }) => name) - .map(_meta => ( - - - - - - - - )) - - return ( -
-
- -
-
- - {components} - -
-
- ) - } -} - -render(, document.getElementById('root')) diff --git a/docs/app/index.html b/docs/app/index.html index 8d26333a3b..cd95a0d944 100644 --- a/docs/app/index.html +++ b/docs/app/index.html @@ -1,9 +1,20 @@ - + + Stardust + -
+ diff --git a/docs/app/index.js b/docs/app/index.js new file mode 100644 index 0000000000..f234ec5672 --- /dev/null +++ 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(, mountNode) diff --git a/docs/app/routes.js b/docs/app/routes.js new file mode 100644 index 0000000000..8444970e92 --- /dev/null +++ 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 = ( + + + + + + +) + +export default routes diff --git a/package.json b/package.json index 1a2ff22eb5..df25e8d9fb 100644 --- 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 index d02f7f7798..7621617ed4 100644 --- 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 + // descendants() accepts an enzyme // 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