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/ComponentDocLinks.js

@@ -3,7 +3,7 @@ import React from 'react'
 import { List } from 'semantic-ui-react'
 
 import { pure } from 'docs/app/HOC'
-import { getGithubSourceUrl, getPosixPath, getSemanticUIDocsUrl } from 'docs/app/utils'
+import { getDocGithubSourceUrl, getPosixPath, getDocSemanticUiUrl } from 'docs/app/utils'
 
 const linkListStyle = {
   background: '#f7f7f7',
@@ -16,8 +16,8 @@ const linkListStyle = {
 }
 
 const ComponentDocLinks = ({ componentName, type }) => {
-  const ghLink = getGithubSourceUrl(componentName)
-  const suiLink = getSemanticUIDocsUrl(componentName, type)
+  const ghLink = getDocGithubSourceUrl(componentName)
+  const suiLink = getDocSemanticUiUrl(componentName, type)
 
   return (
     <List link style={linkListStyle}>

docs/app/Components/ComponentDoc/ComponentDocSee.js

@@ -4,24 +4,24 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import { Header, List } from 'semantic-ui-react'
 
-import { getSeeLinks } from 'docs/app/utils'
+import { getDocSeeItems } from 'docs/app/utils'
 
 const listStyle = { display: 'block' }
 
 const ComponentDocSee = ({ componentName }) => {
-  const links = getSeeLinks(componentName)
+  const items = getDocSeeItems(componentName)
 
   return (
     <List horizontal link size='small' style={listStyle}>
-      {/* still render empty lists to reserve the whitespace */}
+      {/* Heads up! Still render empty lists to reserve the whitespace */}
       <List.Item>
         <Header
           color='grey'
-          content={links.length > 0 ? 'See:' : ' '}
+          content={items.length > 0 ? 'See:' : ' '}
           size='tiny'
         />
       </List.Item>
-      {_.map(links, ({ description, name, type }) => (
+      {_.map(items, ({ description, name, type }) => (
         <List.Item
           as={Link}
           content={description}

docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js

@@ -81,6 +81,7 @@ class ComponentExample extends Component {
 
   setHashAndScroll = () => {
     const { history } = this.props
+
     history.replace(`${location.pathname}#${this.anchorName}`)
     scrollToAnchor()
   }

docs/app/Components/ComponentDoc/ComponentProps/ComponentProps.js

@@ -3,9 +3,9 @@ import React, { Component } from 'react'
 
 import { getDocSubComponents } from 'docs/app/utils'
 import ComponentTable from '../ComponentTable'
-import ComponentPropsComponentDescription from './ComponentPropsComponentDescription'
-import ComponentPropsHeader from './ComponentPropsHeader'
 import ComponentPropsComponents from './ComponentPropsComponents'
+import ComponentPropsDescription from './ComponentPropsDescription'
+import ComponentPropsHeader from './ComponentPropsHeader'
 
 export default class ComponentProps extends Component {
   static propTypes = {
@@ -49,7 +49,7 @@ export default class ComponentProps extends Component {
 
         {activeName && (
           <div>
-            <ComponentPropsComponentDescription name={activeName} />
+            <ComponentPropsDescription name={activeName} />
             <ComponentTable name={activeName} />
           </div>
         )}

docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsComponentDescription.js → docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsDescription.js

@@ -10,15 +10,15 @@ const descriptionStyle = {
   color: '#777',
 }
 
-const ComponentPropsComponent = ({ name }) => (
+const ComponentPropsDescription = ({ name }) => (
   <div style={descriptionStyle}>
     {getDocDescription(name)}
     <Divider />
   </div>
 )
 
-ComponentPropsComponent.propTypes = {
+ComponentPropsDescription.propTypes = {
   name: PropTypes.string,
 }
 
-export default pure(ComponentPropsComponent)
+export default pure(ComponentPropsDescription)

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

@@ -0,0 +1,79 @@
+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
+
+    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'