docs(layouts): add layout examples

docs/app/Components/Layout.js → docs/app/Components/DocsLayout.js

@@ -1,18 +1,21 @@
 import AnchorJS from 'anchor-js'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
+import { Route } from 'react-router-dom'
 
 import Sidebar from 'docs/app/Components/Sidebar/Sidebar'
 import style from 'docs/app/Style'
 import { scrollToAnchor } from 'docs/app/utils'
+import { getUnhandledProps } from 'src/lib'
 
 const anchors = new AnchorJS({
   icon: '#',
 })
 
-export default class Layout extends Component {
+export default class DocsLayout extends Component {
   static propTypes = {
-    children: PropTypes.node,
+    component: PropTypes.func,
+    render: PropTypes.func,
   }
 
   componentDidMount() {
@@ -43,14 +46,23 @@ export default class Layout extends Component {
     this.pathname = location.pathname
   }
 
-  render() {
+  renderChildren = props => {
+    const { component: Children, render } = this.props
+
+    if (render) return render()
     return (
       <div style={style.container}>
         <Sidebar style={style.menu} />
         <div style={style.main}>
-          {this.props.children}
+          <Children {...props} />
         </div>
       </div>
     )
   }
+
+  render() {
+    const rest = getUnhandledProps(DocsLayout, this.props)
+
+    return <Route {...rest} render={this.renderChildren} />
+  }
 }

docs/app/Components/LayoutsLayout.js

@@ -0,0 +1,80 @@
+import _ from 'lodash'
+import React, { Component, PropTypes } from 'react'
+import { NavLink, Route } from 'react-router-dom'
+
+import { Button } from 'src'
+import { getUnhandledProps } from 'src/lib'
+import { repoURL } from 'docs/app/utils'
+
+const docsButtonStyle = {
+  position: 'fixed',
+  margin: '2em',
+  bottom: 0,
+  left: 0,
+  animation: 'back-to-docs 1.5s ease-in-out infinite',
+  zIndex: 6,
+}
+
+const style = (
+  <style>{`
+    @keyframes back-to-docs {
+        0% { transform: translateY(0); }
+        50% { transform: translateY(0.35em); }
+        100% { transform: translateY(0); }
+    }
+  `}</style>
+)
+
+export default class LayoutsLayout extends Component {
+  static propTypes = {
+    component: PropTypes.func,
+    render: PropTypes.func,
+    computedMatch: PropTypes.object,
+  }
+
+  componentDidMount() {
+    scrollTo(0, 0)
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    scrollTo(0, 0)
+  }
+
+  renderChildren = props => {
+    const { component: Children, computedMatch, render } = this.props
+
+    if (render) return render()
+
+    const filename = `${_.startCase(computedMatch.params.name).replace(' ', '')}Layout.js`
+
+    return (
+      <div>
+        {style}
+        <Children {...props} />
+        <div style={docsButtonStyle}>
+          <Button
+            as={NavLink}
+            to='/layouts'
+            color='teal'
+            icon='left arrow'
+            content='Layouts'
+          />
+          <Button
+            as={NavLink}
+            to={`${repoURL}/blob/master/docs/app/Layouts/${filename}`}
+            color='secondary'
+            icon='github'
+            content='Source'
+            target='_blank'
+          />
+        </div>
+      </div>
+    )
+  }
+
+  render() {
+    const rest = getUnhandledProps(LayoutsLayout, this.props)
+
+    return <Route {...rest} render={this.renderChildren} />
+  }
+}

docs/app/Components/LayoutsRoot.js

@@ -0,0 +1,23 @@
+import _ from 'lodash'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+
+import * as Layouts from '../Layouts'
+
+export default class LayoutsRoot extends Component {
+  static propTypes = {
+    match: PropTypes.shape({
+      params: PropTypes.shape({
+        name: PropTypes.string.isRequired,
+      }),
+    }),
+  }
+
+  render() {
+    const name = _.get(this, 'props.match.params.name')
+    const layoutName = `${_.startCase(name).replace(/ /g, '')}Layout`
+    const Layout = Layouts[layoutName]
+
+    return Layout ? <Layout /> : null
+  }
+}

docs/app/Components/Sidebar/Sidebar.js

@@ -196,6 +196,9 @@ class Sidebar extends Component {
             <Menu.Item as={NavLink} to='/usage' activeClassName='active'>
               Usage
             </Menu.Item>
+            <Menu.Item as={NavLink} to='/layouts' activeClassName='active'>
+              Layouts
+            </Menu.Item>
             <Menu.Item as='a' href={repoURL}>
               <Icon name='github' /> GitHub
             </Menu.Item>