refactor(ComponentDoc): refactor to HOC

docs/app/Components/ComponentDoc/ComponentDoc.js

@@ -3,13 +3,14 @@ import React from 'react'
 import DocumentTitle from 'react-document-title'
 import { Grid } from 'semantic-ui-react'
 
+import { withDocInfo } from 'docs/app/HOC'
 import ComponentDocHeader from './ComponentDocHeader'
 import ComponentDocLinks from './ComponentDocLinks'
 import ComponentDocSee from './ComponentDocSee'
 import ComponentExamples from './ComponentExamples'
 import ComponentProps from './ComponentProps'
 
-const ComponentDoc = ({ componentGroup, componentName, description, ghLink, path, props, seeItems, suiLink }) => (
+const ComponentDoc = ({ componentGroup, componentName, description, ghLink, path, seeItems, suiLink }) => (
   <DocumentTitle title={`${componentName} | Semantic UI React`}>
     <div>
       <Grid padded columns='1'>
@@ -26,7 +27,7 @@ const ComponentDoc = ({ componentGroup, componentName, description, ghLink, path
         </Grid.Column>
       </Grid>
 
-      <ComponentExamples componentName={name} />
+      <ComponentExamples componentName={componentName} />
     </div>
   </DocumentTitle>
 )
@@ -52,4 +53,4 @@ ComponentDoc.propTypes = {
   suiLink: PropTypes.string,
 }
 
-export default ComponentDoc
+export default withDocInfo(ComponentDoc)

docs/app/Components/ComponentDoc/index.js

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

docs/app/Components/DocsRoot.js

@@ -4,7 +4,7 @@ import React from 'react'
 
 import { META } from 'src/lib'
 import * as semanticUIReact from 'src'
-import ComponentDocWrapper from '../Components/ComponentDoc/ComponentDocWrapper'
+import ComponentDoc from '../Components/ComponentDoc'
 
 const DocsRoot = (props) => {
   const { name } = props.match.params
@@ -13,7 +13,7 @@ const DocsRoot = (props) => {
 
   if (!component || !component._meta || !META.isParent(component)) return null
   return (
-    <ComponentDocWrapper
+    <ComponentDoc
       name={component._meta.name}
       parent={component._meta.parent}
       type={component._meta.type}

docs/app/HOC/index.js

@@ -1,3 +1,4 @@
 export neverUpdate from './neverUpdate'
 export pure from './pure'
 export updateForKeys from './updateForKeys'
+export withDocInfo from './withDocInfo'

docs/app/HOC/withDocInfo.js

@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+
+import docInfo from 'docs/app/docgenInfo.json'
+import { getComponentGroup, getSeeItems, repoURL } from 'docs/app/utils'
+
+const withDocInfo = ChildComponent => class extends Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    parent: PropTypes.string,
+    type: PropTypes.string,
+  }
+
+  constructor(props) {
+    super(props)
+
+    this.state = this.computeProps(props)
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState(this.computeProps(nextProps))
+  }
+
+  computeProps = ({ name, parent, type }) => {
+    const { docBlock, path } = docInfo[name]
+    const { description } = docBlock
+
+    const ghLink = `${repoURL}/blob/master/${path}`
+    const suiLink = `https://semantic-ui.com/${type}s/${name || parent}`.toLowerCase()
+
+    return {
+      description,
+      ghLink,
+      path,
+      suiLink,
+      componentGroup: getComponentGroup(docInfo, name),
+      componentName: name,
+      seeItems: getSeeItems(docInfo, name),
+    }
+  }
+
+  render() {
+    return <ChildComponent {...this.state} />
+  }
+}
+
+export default withDocInfo

docs/app/utils/getComponentGroup.js

@@ -0,0 +1,21 @@
+import _ from 'lodash/fp'
+import * as semanticUIReact from 'src'
+
+const getComponentGroup = (docInfo, componentName) => ({
+  [componentName]: {
+    description: _.get('docBlock.description', docInfo[componentName]),
+    props: _.get('props', docInfo[componentName]),
+  },
+  ..._.flow(
+    _.filter(component => _.get('_meta.parent', component) === componentName),
+    _.map('_meta.name'),
+    _.map(name => ({
+      name,
+      description: _.get('docBlock.description', docInfo[name]),
+      props: _.get('props', docInfo[name]),
+    })),
+    _.keyBy('name'),
+  )(semanticUIReact),
+})
+
+export default getComponentGroup

docs/app/utils/getSeeItems.js

@@ -0,0 +1,13 @@
+import _ from 'lodash/fp'
+import * as semanticUIReact from 'src'
+
+const getSeeItems = (docInfo, componentName) => _.map(({ description }) => {
+  const seeMeta = _.get('_meta', semanticUIReact[description])
+
+  if (!seeMeta) return null
+  const { type, name } = seeMeta
+
+  return { description, name, type }
+}, _.filter(['title', 'see'], _.get('docBlock.tags', docInfo[componentName])))
+
+export default getSeeItems

docs/app/utils/index.js

@@ -4,6 +4,8 @@ import * as semanticUIReact from 'src'
 import { META } from 'src/lib'
 
 export * from './constants'
+export getComponentGroup from './getComponentGroup'
+export getSeeItems from './getSeeItems'
 export scrollToAnchor from './scrollToAnchor'
 
 /**

test/specs/docs/examples-test.js

@@ -1,7 +1,7 @@
 import { createElement } from 'react'
 
-import { exampleContext } from 'docs/app/utils/exampleContext'
-import { sandbox, consoleUtil } from 'test/utils'
+import { sandbox, consoleUtil } from '../../utils'
+import { exampleContext } from '../../../docs/app/utils'
 
 describe('examples', () => {
   /* eslint-disable no-console */