Add doc site routes

docs/app/Components/ComponentDoc/ComponentDescription.js

@@ -34,7 +34,7 @@ export default class ComponentDescription extends Component {
     return (
       <List.Item icon='book'>
         <a href={url} target='_blank'>
-          Semantic UI Docs
+          Semantic UI {name} Docs
         </a>
       </List.Item>
     )

docs/app/Components/ComponentDoc/ComponentExamples.js

@@ -1,24 +1,45 @@
 import React, { Component, createElement, PropTypes } from 'react'
 
 import { exampleContext } from 'docs/app/utils'
-import { Divider, Header } from 'stardust'
+import { Divider, Header, Message } from 'stardust'
 
 export default class ComponentExamples extends Component {
   static propTypes = {
     name: PropTypes.string,
   }
 
-  render() {
+  renderExample = () => {
     const { name } = this.props
 
-    const examples = exampleContext.keys()
-      .filter(path => path.includes(`/${name}Examples.js`))
-      .map((path, i) => createElement(exampleContext(path).default, { key: i }))
+    // TODO only find index.js files once PRs for old components are merged and
+    // the docs are updated to use the new naming scheme
+    const examplePath = exampleContext.keys()
+      .find(path => new RegExp(`(${name}Examples|${name}/index).js$`).test(path))
+
+    return examplePath && createElement(exampleContext(examplePath).default)
+  }
+
+  renderMissingExamples = () => {
+    const { name } = this.props
+    return (
+      <Message icon='book' className='info'>
+        If there's no
+        <a
+          href='https://github.com/TechnologyAdvice/stardust/pulls'
+        > pull request </a>
+        open for <code>&lt;{name} /&gt;</code> examples, you should
+        <a
+          href='https://github.com/TechnologyAdvice/stardust/blob/master/CONTRIBUTING.md'
+        > contribute</a>!
+      </Message>
+    )
+  }
 
-    return !examples.length ? null : (
+  render() {
+    return (
       <div>
         <Header.H2>Examples</Header.H2>
-        {examples}
+        {this.renderExample() || this.renderMissingExamples()}
         <Divider className='hidden section' />
       </div>
     )

docs/app/Components/ComponentDoc/ComponentProps.js

@@ -17,14 +17,16 @@ export default class ComponentProps extends Component {
      * @type {object} Props info object where keys are prop names and values are prop definitions.
      */
     props: PropTypes.object,
-  };
-
-  nameRenderer(item) {
-    const required = item.required && <span className='ui empty mini red circular label' />
-    return <code>{item.name} {required}</code>
   }
 
-  defaultValueRenderer(item) {
+  nameRenderer = (item) => <code>{item.name}</code>
+
+  requiredRenderer = (item) => {
+    if (item.required) {
+      return <span className='ui mini red circular label'>required</span>
+    }
+  }
+  defaultValueRenderer = (item) => {
     const defaultValue = _.get(item, 'defaultValue.value')
     const defaultIsComputed = <span className='ui mini gray circular label'>computed</span>
 
@@ -66,6 +68,7 @@ export default class ComponentProps extends Component {
         <Header.H2>Props</Header.H2>
         <Table data={content} className='very basic compact'>
           <Table.Column dataKey='name' cellRenderer={this.nameRenderer} />
+          <Table.Column cellRenderer={this.requiredRenderer} />
           <Table.Column dataKey='type' />
           <Table.Column dataKey='defaultValue' cellRenderer={this.defaultValueRenderer} />
           <Table.Column dataKey='description' />

docs/app/Components/ComponentDoc/ExampleSection.js

@@ -1,17 +1,18 @@
 import React, { Component, PropTypes } from 'react'
+import { Header } from 'stardust'
 
 export default class ExampleSection extends Component {
   static propTypes = {
     children: PropTypes.node,
     title: PropTypes.string,
-  };
+  }
 
   render() {
     return (
       <div>
-        <h3 className='ui dividing header' style={{ margin: '2em 0' }}>
+        <Header dividing style={{ margin: '2em 0' }}>
           {this.props.title}
-        </h3>
+        </Header>
         {this.props.children}
       </div>
     )

docs/app/Components/Layout.js

@@ -0,0 +1,28 @@
+import 'semantic-ui-css/semantic.css'
+import 'highlight.js/styles/github.css'
+import React, { Component, PropTypes } from 'react'
+
+import Sidebar from 'docs/app/Components/Sidebar/Sidebar'
+import style from 'docs/app/Style'
+import { Grid } from 'stardust'
+
+export default class Root extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+  }
+
+  render() {
+    return (
+      <div style={style.container}>
+        <Sidebar style={style.menu} />
+        <div style={style.main}>
+          <Grid className='padded'>
+            <Grid.Column>
+              {this.props.children}
+            </Grid.Column>
+          </Grid>
+        </div>
+      </div>
+    )
+  }
+}

docs/app/Components/PageNotFound/PageNotFound.js

@@ -0,0 +1,60 @@
+import _ from 'lodash'
+import React, { Component } from 'react'
+import { Button, Header, Loader } from 'stardust'
+
+const containerStyle = {
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+  height: '100vh',
+  zIndex: 3000,
+}
+
+const textStyle = {
+  position: 'absolute',
+  padding: '1em',
+  top: 0,
+  left: 0,
+  right: 0,
+  backgroundImage: 'linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2 ))',
+  zIndex: 4000,
+}
+
+const imageStyle = {
+  position: 'absolute',
+  backgroundSize: 'cover',
+  width: '100%',
+  height: '100%',
+  zIndex: 2000,
+}
+
+// we use slightly random sized image sizes to ensure we get a new image from unsplash.it
+const getImageUrl = () => `url(//unsplash.it/${_.random(1500, 1600)}/${_.random(1100, 1200)}})`
+
+class PageNotFound extends Component {
+  state = { backgroundImage: getImageUrl() }
+
+  getNewImage = () => this.setState({ backgroundImage: getImageUrl() })
+
+  render() {
+    const { backgroundImage } = this.state
+    return (
+      <div style={containerStyle}>
+        <div style={textStyle}>
+          <Header inverted>
+            Couldn't find that, but check this out:
+          </Header>
+          <Button className='mini inverted basic' onClick={this.getNewImage}>
+            See Another
+          </Button>
+        </div>
+        <div style={{ ...imageStyle, backgroundImage }} />
+        <Loader active />
+      </div>
+    )
+  }
+}
+
+export default PageNotFound

docs/app/Components/Root.js

@@ -2,63 +2,30 @@ import 'semantic-ui-css/semantic.css'
 import 'highlight.js/styles/github.css'
 import _ from 'lodash/fp'
 import React, { Component, PropTypes } from 'react'
-import { routerShape } from 'react-router'
-
-import { typeOrder } from 'docs/app/utils'
-import * as stardust from 'stardust'
 
 import ComponentDoc from 'docs/app/Components/ComponentDoc/ComponentDoc'
-import DocsMenu from 'docs/app/Components/Sidebar/Sidebar'
-import style from 'docs/app/Style'
+import PageNotFound from 'docs/app/Components/PageNotFound/PageNotFound'
 import META from 'src/utils/Meta'
-
-const { Grid, Segment } = stardust
+import * as stardust from '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,
+    params: PropTypes.shape({
+      name: PropTypes.string.isRequired,
+    }),
   }
 
-  state = { menuSearch: '' }
+  render() {
+    const { name } = this.props.params
+    const component = stardust[_.startCase(name)]
 
-  renderComponentDocs = () => {
-    return _.flow(
-      _.flatMap(_.flow(
-        (type) => _.filter(META.isType(type), stardust),    // get component array by type
-        _.filter(META.isParent),                            // parents only
-        _.sortBy('_meta.name')                              // sorted
-      )),
-      _.map(({ _meta }) => (
-        <Grid.Row key={_meta.name} id={_meta.name}>
-          <Grid.Column>
-            <Segment className='basic'>
-              <ComponentDoc _meta={_meta} />
-            </Segment>
-          </Grid.Column>
-        </Grid.Row>
-      )),
-    )(typeOrder)
-  }
+    if (!component || !component._meta || !META.isParent(component)) {
+      return <PageNotFound />
+    }
 
-  render() {
     return (
-      <div style={style.container}>
-        <div style={style.menu}>
-          <DocsMenu />
-        </div>
-        <div style={style.main}>
-          <Grid className='vertically divided padded'>
-            {this.renderComponentDocs()}
-          </Grid>
-        </div>
-      </div>
+      <ComponentDoc _meta={component._meta} />
     )
   }
 }

docs/app/Components/Sidebar/Sidebar.js

@@ -1,12 +1,17 @@
 import _ from 'lodash/fp'
-import React, { Component } from 'react'
+import React, { Component, PropTypes } from 'react'
+import { Link } from 'react-router'
+
 import * as stardust from 'stardust'
 import { typeOrder } from 'docs/app/utils'
 import META from 'src/utils/Meta'
 
-const { Menu, Input } = stardust
+const { Menu, Icon, Input } = stardust
 
 export default class Sidebar extends Component {
+  static propTypes = {
+    style: PropTypes.object,
+  }
   state = { query: '' }
 
   handleSearchChange = e => this.setState({ query: e.target.value })
@@ -19,9 +24,14 @@ export default class Sidebar extends Component {
         ({ _meta }) => new RegExp(this.state.query, 'i').test(_meta.name),
       ])),
       _.sortBy('_meta.name'),
-      _.map(component => {
-        const name = component._meta.name
-        return <Menu.Item key={name} name={name} href={`#${name}`} />
+      _.map(({ _meta }) => {
+        const route = `${_meta.type}s/${_.kebabCase(_meta.name)}`
+
+        return (
+          <Link to={route} className='item' activeClassName='active' key={_meta.name}>
+            {_meta.name}
+          </Link>
+        )
       })
     )(stardust)
 
@@ -34,17 +44,25 @@ export default class Sidebar extends Component {
   }
 
   render() {
+    const { style } = this.props
     return (
-      <Menu className='inverted secondary vertical fluid' style={{ margin: 0 }}>
-        <Menu.Item>
+      <Menu className='vertical fixed inverted' style={{ ...style }}>
+        <div className='item'>
+          <img src='http://semantic-ui.com/images/logo.png' style={{ marginRight: '1em' }} />
+          <strong>UI-React Docs</strong>
+        </div>
+        <a className='item' href='https://github.com/TechnologyAdvice/stardust'>
+          <Icon className='github' /> GitHub
+        </a>
+        <div className='item'>
           <Input
             className='transparent inverted icon'
             icon='search'
             placeholder='Search'
             iconClass='search link icon'
             onChange={this.handleSearchChange}
           />
-        </Menu.Item>
+        </div>
         {_.map(this.renderItemsByType, typeOrder)}
       </Menu>
     )

docs/app/Examples/addons/Radio/RadioExamples.js → docs/app/Examples/addons/Radio/index.js

@@ -1,7 +1,7 @@
 import React from 'react'
-import Types from './Types/Types'
-import States from './States/States'
-import Variations from './Variations/Variations'
+import Types from './Types'
+import States from './States'
+import Variations from './Variations'
 
 const RadioExamples = () => (
   <div>