wip

docs/app/Components/ComponentDoc/ComponentDoc.js

@@ -1,43 +1,193 @@
 import _ from 'lodash'
-import React, { PropTypes } from 'react'
+import React, { Component, PropTypes } from 'react'
 import DocumentTitle from 'react-document-title'
+import { Link } from 'react-router'
 
-import ComponentDescription from './ComponentDescription'
 import ComponentExamples from './ComponentExamples'
 import ComponentProps from './ComponentProps'
 import docgenInfo from '../../docgenInfo.json'
 
-const ComponentDoc = ({ _meta }) => {
-  // TODO remove docgetInfo searching in favor of separate docgen.json in each component directory
-  // This just parses out a single docgen file based on component path name.
-  // Our current docgen gulp task concats these into one, only for us to split it back out.
-  // The leading slash in the RegEx is required, some components end with the same name.
-  const docPath = _.find(_.keys(docgenInfo), path => new RegExp(`${__PATH_SEP__}${_meta.name}.js$`).test(path))
-  const docgen = docgenInfo[docPath]
-
-  return (
-    <DocumentTitle title={`${_meta.name} | UI React`}>
-      <div>
-        <ComponentDescription
-          _meta={_meta}
-          docgen={docgen}
-          docPath={docPath}
-        />
-        {docgen.props && <ComponentProps props={docgen.props} />}
-        <ComponentExamples name={_meta.name} />
-      </div>
-    </DocumentTitle>
-  )
-}
+import { META } from 'src/lib'
+import * as stardust from 'src'
+import { Grid, Header, Icon, List } from 'src'
+
+const docgenPaths = _.keys(docgenInfo)
 
-ComponentDoc.propTypes = {
-  /** An element type to render as (string or function). */
-  as: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.func,
-  ]),
+const getDocgenPath = (componentName) => _.find(docgenPaths, path => {
+  return new RegExp(`${__PATH_SEP__}${componentName}.js$`).test(path)
+})
 
-  _meta: PropTypes.object,
+const propsToggleStyle = {
+  display: 'inline-flex',
+  marginRight: '0.5em',
+  marginTop: 0,
+  cursor: 'pointer',
+}
+const linkListStyle = {
+  position: 'absolute',
+  padding: '0.5em',
+  margin: '0.5em',
+  top: '0',
+  right: '0',
+  boxShadow: '0 0 1em 0.5em #f7f7f7',
+  background: '#f7f7f7',
 }
 
-export default ComponentDoc
+const pathSepRegEx = new RegExp(_.escapeRegExp(__PATH_SEP__), 'g')
+
+export default class ComponentDoc extends Component {
+  static propTypes = {
+    _meta: PropTypes.object,
+  }
+
+  state = {
+    activePropsTab: null,
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      activePropsTab: this.state.activePropsTab ? nextProps._meta.name : null,
+    })
+  }
+
+  handlePropsTabClick = (name) => {
+    this.setState({
+      activePropsTab: this.state.activePropsTab === name ? null : name,
+    })
+  }
+
+  renderSee() {
+    const { _meta } = this.props
+    const docPath = getDocgenPath(_meta.name)
+    const docgen = docgenInfo[docPath]
+    const seeTags = _.filter(docgen.docBlock.tags, ['title', 'see'])
+
+    const seeLinks = _.map(seeTags, ({ description }) => {
+      const seeMeta = _.get(stardust[description], '_meta')
+      if (!seeMeta) return
+
+      const { type, name } = seeMeta
+
+      return (
+        <Link key={description} to={`/${type}s/${_.kebabCase(name)}`} className='item'>
+          {description}
+        </Link>
+      )
+    })
+
+    return (
+      <List className='horizontal' style={{ display: 'block' }}>
+        <div className='item'>
+          <Header size='tiny' color='grey'>
+            {seeLinks.length > 0 ? 'See:' : ' '}
+          </Header>
+        </div>
+        {seeLinks}
+      </List>
+    )
+  }
+
+  renderSemanticDocsLink = () => {
+    const { _meta } = this.props
+
+    if (META.isAddon(_meta)) return null
+
+    const name = META.isParent(_meta) ? _meta.name : _meta.parent
+    const url = `http://semantic-ui.com/${_meta.type}s/${name}.html`.toLowerCase()
+
+    return (
+      <List.Item icon='book'>
+        <a href={url} target='_blank'>
+          Semantic UI {name} Docs
+        </a>
+      </List.Item>
+    )
+  }
+
+  renderSourceLink() {
+    const { _meta } = this.props
+    const docPath = getDocgenPath(_meta.name)
+    // no matter the OS path separator, use '/' since these link to github
+    const posixPath = docPath.replace(pathSepRegEx, '/')
+    return (
+      <List.Item icon='github'>
+        <code>
+          <a href={`https://github.com/TechnologyAdvice/stardust/blob/master/${posixPath}`} target='_blank'>
+            {posixPath}
+          </a>
+        </code>
+      </List.Item>
+    )
+  }
+
+  render() {
+    const { _meta } = this.props
+    const { activePropsTab } = this.state
+
+    const docPath = getDocgenPath(_meta.name)
+    const docgen = docgenInfo[docPath]
+    const selectedDocgen = docgenInfo[getDocgenPath(activePropsTab)]
+
+    const subComponents = _.flatMap(stardust, SDComponent => _.filter(SDComponent, staticValue => (
+      _.get(staticValue, '_meta.parent') === _meta.name
+    )))
+
+    return (
+      <DocumentTitle title={`${_meta.name} | UI React`}>
+        <div>
+          <Grid padded columns='1'>
+            <Grid.Column>
+              <Header as='h1' style={{ marginBottom: '0.25em' }}>
+                {_meta.name}
+                <Header.Subheader>{docgen.docBlock.description}</Header.Subheader>
+              </Header>
+              {this.renderSee()}
+              <List className='link' style={linkListStyle}>
+                {this.renderSourceLink()}
+                {this.renderSemanticDocsLink()}
+              </List>
+              <Header
+                as='h4'
+                className='no-anchor'
+                style={propsToggleStyle}
+                onClick={() => this.handlePropsTabClick(activePropsTab || _meta.name)}
+              >
+                <a>
+                  <Icon name={`toggle ${activePropsTab ? 'on' : 'off'}`} />
+                  Props
+                  {subComponents.length > 0 && ':'}
+                </a>
+              </Header>
+              <div className='ui compact secondary menu'>
+                {subComponents.length > 0 && (
+                  <div
+                    className={activePropsTab === _meta.name ? 'active link item' : 'link item'}
+                    onClick={() => this.handlePropsTabClick(_meta.name)}
+                  >
+                    {_meta.name}
+                  </div>
+                )}
+                {_.map(subComponents, sub => (
+                  <div
+                    key={sub._meta.name}
+                    className={activePropsTab === sub._meta.name ? 'active link item' : 'link item'}
+                    onClick={() => this.handlePropsTabClick(sub._meta.name)}
+                  >
+                    {_meta.name}.{sub._meta.name.replace(_meta.name, '')}
+                  </div>
+                ))}
+              </div>
+              {selectedDocgen && (
+                <div>
+                  <br />
+                  <ComponentProps props={selectedDocgen.props} />
+                </div>
+              )}
+            </Grid.Column>
+          </Grid>
+          <ComponentExamples name={_meta.name} />
+        </div>
+      </DocumentTitle>
+    )
+  }
+}