wip

docs/app/Components/ComponentDoc/ComponentDoc.js

@@ -1,43 +1,93 @@
 import _ from 'lodash'
-import React, { PropTypes } from 'react'
+import React, { Component, PropTypes } from 'react'
 import DocumentTitle from 'react-document-title'
 
 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 * as stardust from 'src'
+import { Header } from 'src'
 
-ComponentDoc.propTypes = {
-  /** An element type to render as (string or function). */
-  as: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.func,
-  ]),
+const docgenPaths = _.keys(docgenInfo)
+const getDocgenPath = (componentName) => _.find(docgenPaths, path => {
+  return new RegExp(`${__PATH_SEP__}${componentName}.js$`).test(path)
+})
 
-  _meta: PropTypes.object,
-}
+export default class ComponentDoc extends Component {
+  static propTypes = {
+    _meta: PropTypes.object,
+  }
+
+  state = {
+    showPropsFor: this.props._meta.name,
+  }
+
+  handleTabClick = (name) => {
+    this.setState({
+      showPropsFor: name,
+    })
+  }
+
+  render() {
+    const { _meta } = this.props
+    const { showPropsFor } = this.state
 
-export default ComponentDoc
+    const docPath = getDocgenPath(_meta.name)
+    const docgen = docgenInfo[docPath]
+
+    // find all sub components that have this component as their parent
+    const subComponents = _.flatMap(stardust, SDComponent => _.filter(SDComponent, staticValue => (
+      _.get(staticValue, '_meta.parent') === _meta.name
+    )))
+    // const subDocgen = _.map(subComponents, sub => {
+    //   const subDocgenPath = getDocgenPath(sub._meta.name)
+    //   return docgenInfo[subDocgenPath]
+    // })
+
+    const subDocgen = docgenInfo[getDocgenPath(showPropsFor)]
+
+    return (
+      <DocumentTitle title={`${_meta.name} | UI React`}>
+        <div>
+          <ComponentDescription
+            _meta={_meta}
+            docgen={docgen}
+            docPath={docPath}
+          />
+          <Header as='h2'>Props</Header>
+          <div className='ui top attached tabular menu'>
+            <a
+              className={showPropsFor === _meta.name ? 'active item' : 'item'}
+              onClick={() => this.handleTabClick(_meta.name)}
+            >
+              {_meta.name}
+            </a>
+            {_.map(subComponents, sub => (
+              <a
+                key={sub._meta.name}
+                className={showPropsFor === sub._meta.name ? 'active item' : 'item'}
+                onClick={() => this.handleTabClick(sub._meta.name)}
+              >
+                {sub._meta.name.replace(_meta.name, '')}
+              </a>
+            ))}
+          </div>
+          {docgen.props && (
+            <div className='ui bottom attached tab segment'>
+              <ComponentProps props={docgen.props} />
+            </div>
+          )}
+          {subDocgen && (
+            <div className='ui bottom attached active tab segment'>
+              {subDocgen.docBlock.description && <Header>{subDocgen.docBlock.description}</Header>}
+              <ComponentProps props={subDocgen.props} />
+            </div>
+          )}
+          <ComponentExamples name={_meta.name} />
+        </div>
+      </DocumentTitle>
+    )
+  }
+}

docs/app/Components/ComponentDoc/ComponentProps.js

@@ -66,7 +66,6 @@ export default class ComponentProps extends Component {
 
     return (
       <div>
-        <Header as='h2'>Props</Header>
         <Table data={content} className='very basic compact'>
           <Table.Column dataKey='name' cellRenderer={this.nameRenderer} />
           <Table.Column cellRenderer={this.requiredRenderer} />

src/lib/META.js

@@ -17,7 +17,7 @@ const TYPE_VALUES = _.values(TYPES)
  * @param {Object} _meta A proposed Stardust _meta object.
  * @returns {Boolean}
  */
-const isMeta = (_meta) => (
+export const isMeta = (_meta) => (
   _.includes(_.get('type', _meta), TYPE_VALUES)
 )
 

src/views/Feed/FeedDate.js

@@ -7,7 +7,9 @@ import {
   getUnhandledProps,
   META,
 } from '../../lib'
-
+/**
+ * Show a feed date
+ */
 function FeedDate(props) {
   const { children, className, date } = props
   const classes = cx(className, 'date')