docs(ComponentDoc): refactor, add sidebar navigation

docs/app/Components/ComponentDoc/ComponentDoc.js

@@ -1,8 +1,11 @@
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import DocumentTitle from 'react-document-title'
+import { withRouter } from 'react-router'
 import { Grid } from 'semantic-ui-react'
 
+import { scrollToAnchor } from 'docs/app/utils'
 import ComponentDocHeader from './ComponentDocHeader'
 import ComponentDocLinks from './ComponentDocLinks'
 import ComponentDocSee from './ComponentDocSee'
@@ -12,13 +15,14 @@ import ComponentSidebar from './ComponentSidebar'
 
 const topRowStyle = { margin: '1em' }
 
-export default class ComponentDoc extends Component {
+class ComponentDoc extends Component {
   static childContextTypes = {
     onPassed: PropTypes.func,
   }
 
   static propTypes = {
     _meta: PropTypes.object,
+    history: PropTypes.object.isRequired,
   }
 
   state = {}
@@ -29,10 +33,22 @@ export default class ComponentDoc extends Component {
     }
   }
 
+  componentWillReceiveProps() {
+    this.setState({ activePath: undefined })
+  }
+
   handleExamplePassed = (e, { examplePath }) => this.setState({ activePath: examplePath })
 
   handleExamplesRef = examplesRef => this.setState({ examplesRef })
 
+  handleSidebarItemClick = (e, { path }) => {
+    const { history } = this.props
+    const aPath = _.kebabCase(_.last(path.split('/')))
+
+    history.replace(`${location.pathname}#${aPath}`)
+    scrollToAnchor()
+  }
+
   render() {
     const { _meta } = this.props
     const { activePath, examplesRef } = this.state
@@ -61,6 +77,7 @@ export default class ComponentDoc extends Component {
                 activePath={activePath}
                 componentName={_meta.parent || _meta.name}
                 examplesRef={examplesRef}
+                onItemClick={this.handleSidebarItemClick}
               />
             </Grid.Column>
           </Grid.Row>
@@ -69,3 +86,5 @@ export default class ComponentDoc extends Component {
     )
   }
 }
+
+export default withRouter(ComponentDoc)

docs/app/Components/ComponentDoc/ComponentSidebar/ComponentSidebar.js

@@ -0,0 +1,80 @@
+import _ from 'lodash'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import { Accordion, Menu, Sticky } from 'semantic-ui-react'
+
+import { pure } from 'docs/app/HOC'
+import menuInfo from 'docs/app/menuInfo.json'
+import ComponentSideBarSection from './ComponentSidebarSection'
+
+const sidebarStyle = {
+  background: '#fff',
+  boxShadow: '0 2px 2px rgba(0, 0, 0, 0.1)',
+  paddingLeft: '1em',
+  paddingBottom: '0.1em',
+  paddingTop: '0.1em',
+}
+
+class ComponentSidebar extends Component {
+  static propTypes = {
+    activePath: PropTypes.string,
+    componentName: PropTypes.string,
+    examplesRef: PropTypes.func,
+    onItemClick: PropTypes.func,
+  }
+
+  state = {}
+
+  constructor(props) {
+    super(props)
+
+    this.state = { sections: this.computeSections(props) }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({ sections: this.computeSections(nextProps) })
+  }
+
+  computeSections = ({ componentName }) => _.get(menuInfo, componentName)
+
+  handleItemClick = (e, { path }) => _.invoke(this.props, 'onItemClick', e, { path })
+
+  handleTitleClick = (e, { name }) => {
+    const { sections } = this.state
+    const { examples } = _.find(sections, { name })
+    const { path } = _.head(examples)
+
+    _.invoke(this.props, 'onItemClick', e, { path })
+  }
+
+  render() {
+    const { activePath, examplesRef } = this.props
+    const { sections } = this.state
+
+console.log(activePath, sections)
+    return (
+      <Sticky context={examplesRef} offset={15}>
+        <Menu
+          as={Accordion}
+          fluid
+          style={sidebarStyle}
+          text
+          vertical
+        >
+          {_.map(sections, ({ examples, name }) => (
+            <ComponentSideBarSection
+              activePath={activePath}
+              examples={examples}
+              key={name}
+              name={name}
+              onItemClick={this.handleItemClick}
+              onTitleClick={this.handleTitleClick}
+            />
+          ))}
+        </Menu>
+      </Sticky>
+    )
+  }
+}
+
+export default pure(ComponentSidebar)

docs/app/Components/ComponentDoc/ComponentSidebar/ComponentSidebarItem.js

@@ -0,0 +1,28 @@
+import _ from 'lodash'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import { Menu } from 'semantic-ui-react'
+
+export default class ComponentSidebarItem extends Component {
+  static propTypes = {
+    active: PropTypes.bool,
+    onClick: PropTypes.func,
+    path: PropTypes.string,
+    title: PropTypes.string,
+  }
+
+  handleClick = e => _.invoke(this.props, 'onClick', e, this.props)
+
+  render() {
+    const { active, path, title } = this.props
+
+    return (
+      <Menu.Item
+        active={active}
+        content={title}
+        name={path}
+        onClick={this.handleClick}
+      />
+    )
+  }
+}

docs/app/Components/ComponentDoc/ComponentSidebar/ComponentSidebarSection.js

@@ -0,0 +1,48 @@
+import _ from 'lodash'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import { Accordion, Icon, Menu } from 'semantic-ui-react'
+
+import { pure } from 'docs/app/HOC'
+import ComponentSidebarItem from './ComponentSidebarItem'
+
+class ComponentSidebarSection extends Component {
+  static propTypes = {
+    activePath: PropTypes.string,
+    examples: PropTypes.object,
+    name: PropTypes.string,
+    onItemClick: PropTypes.func,
+    onTitleClick: PropTypes.func,
+  }
+
+  handleItemClick = (e, itemProps) => _.invoke(this.props, 'onItemClick', e, itemProps)
+
+  handleTitleClick = e => _.invoke(this.props, 'onTitleClick', e, this.props)
+
+  render() {
+    const { activePath, examples, name } = this.props
+    const active = _.find(examples, { path: activePath })
+
+    return (
+      <Menu.Item>
+        <Accordion.Title active={active} onClick={this.handleTitleClick}>
+          <b>{name}</b>
+          <Icon name='dropdown' />
+        </Accordion.Title>
+        <Accordion.Content as={Menu.Menu} active={active}>
+          {_.map(examples, ({ title, path }) => (
+            <ComponentSidebarItem
+              active={activePath === path}
+              key={path}
+              onClick={this.handleItemClick}
+              path={path}
+              title={title}
+            />
+          ))}
+        </Accordion.Content>
+      </Menu.Item>
+    )
+  }
+}
+
+export default pure(ComponentSidebarSection)

docs/app/Components/ComponentDoc/ComponentSidebar/index.js

@@ -0,0 +1 @@
+export default from './ComponentSidebar'