wip split example menu json

Author: levithomason

.gitignore

@@ -8,8 +8,8 @@
 coverage/
 dist/
 docs/app/componentMenu.json
-docs/app/exampleMenu.json
 docs/app/componentInfo
+docs/app/exampleMenus
 docs/build/
 dll/
 node_modules/

.prettierignore

@@ -10,7 +10,7 @@ coverage/
 dist/
 dll/
 docs/app/componentMenu.json
-docs/app/exampleMenu.json
+docs/app/exampleMenus
 docs/build/
 
 package.json

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

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { Accordion, Menu, Sticky } from 'semantic-ui-react'
 
-import exampleMenu from 'docs/app/exampleMenu'
 import ComponentSidebarSection from './ComponentSidebarSection'
 
 const sidebarStyle = {
@@ -24,14 +23,18 @@ class ComponentSidebar extends Component {
 
   state = {}
 
-  constructor(props) {
-    super(props)
-
-    this.state = { sections: exampleMenu[props.displayName] }
+  componentDidMount() {
+    this.fetchSections()
   }
 
   componentWillReceiveProps(nextProps) {
-    this.setState({ sections: exampleMenu[nextProps.displayName] })
+    this.fetchSections(nextProps)
+  }
+
+  fetchSections = ({ displayName } = this.props) => {
+    import(`docs/app/exampleMenus/${displayName}.examples.json`).then((sections) => {
+      this.setState({ sections })
+    })
   }
 
   render() {

gulp/plugins/gulp-component-menu.js

@@ -1,19 +1,15 @@
+import Vinyl from 'vinyl'
 import gutil from 'gulp-util'
-import path from 'path'
 import through from 'through2'
 
 import getComponentInfo from './util/getComponentInfo'
 
-export default (filename) => {
-  const defaultFilename = 'componentMenu.json'
+const pluginName = 'gulp-component-menu'
+
+export default () => {
   const result = []
-  const pluginName = 'gulp-component-menu'
-  let finalFile
-  let latestFile
 
   function bufferContents(file, enc, cb) {
-    latestFile = file
-
     if (file.isNull()) {
       cb(null, file)
       return
@@ -44,10 +40,12 @@ export default (filename) => {
   }
 
   function endStream(cb) {
-    finalFile = latestFile.clone({ contents: false })
-    finalFile.path = path.join(latestFile.base, filename || defaultFilename)
-    finalFile.contents = new Buffer(JSON.stringify(result, null, 2))
-    this.push(finalFile)
+    const file = new Vinyl({
+      path: './componentMenu.json',
+      contents: Buffer.from(JSON.stringify(result, null, 2)),
+    })
+
+    this.push(file)
     cb()
   }
 

gulp/plugins/gulp-example-menu.js

@@ -1,35 +1,30 @@
+import Vinyl from 'vinyl'
 import gutil from 'gulp-util'
 import _ from 'lodash'
 import path from 'path'
 import through from 'through2'
 
-import config from '../../config'
-import { parseDocExample, parseDocSection } from './util'
+import { parseDocSection } from './util'
 
-const examplesPath = path.join(config.paths.docsSrc(), 'Examples', path.sep)
+const SECTION_ORDER = {
+  Types: 1,
+  States: 2,
+  Content: 3,
+  Variations: 4,
+  Groups: 5,
+  DEFAULT_ORDER: 6,
+  Usage: 9,
+}
 
-const normalizeResult = result =>
-  JSON.stringify(
-    _.mapValues(result, sections =>
-      _.map(_.sortBy(sections, 'position'), ({ examples, sectionName }) => ({
-        examples,
-        sectionName,
-      })),
-    ),
-    null,
-    2,
-  )
+const getSectionOrder = sectionName =>
+  _.find(SECTION_ORDER, (val, key) => _.includes(sectionName, key)) || SECTION_ORDER.DEFAULT_ORDER
 
-export default (filename) => {
-  const defaultFilename = 'exampleMenu.json'
-  const result = {}
-  const pluginName = 'gulp-example-menu'
-  let finalFile
-  let latestFile
+const pluginName = 'gulp-example-menu'
 
-  function bufferContents(file, enc, cb) {
-    latestFile = file
+export default () => {
+  const exampleFilesByDisplayName = {}
 
+  function bufferContents(file, enc, cb) {
     if (file.isNull()) {
       cb(null, file)
       return
@@ -41,32 +36,44 @@ export default (filename) => {
     }
 
     try {
-      const relativePath = file.path.replace(examplesPath, '')
-      const [, component, section] = _.split(relativePath, path.sep)
+      // eslint-disable-next-line no-unused-vars
+      const [type, displayName, sectionName, exampleName] = _.split(file.path, path.sep).slice(-4)
+      const { examples } = parseDocSection(file.contents)
 
-      if (section === 'index.js') {
-        result[component] = parseDocExample(file.contents)
-        cb()
-        return
-      }
+      _.merge(exampleFilesByDisplayName, {
+        [displayName]: {
+          [sectionName]: {
+            order: getSectionOrder(sectionName),
+            sectionName,
+            examples,
+          },
+        },
+      })
 
-      result[component][section] = {
-        ...result[component][section],
-        ...parseDocSection(file.contents),
-      }
       cb()
     } catch (err) {
       const pluginError = new gutil.PluginError(pluginName, err)
       pluginError.message += `\nFile: ${file.path}.`
       this.emit('error', pluginError)
+      // eslint-disable-next-line no-console
+      console.log(err)
     }
   }
 
   function endStream(cb) {
-    finalFile = latestFile.clone({ contents: false })
-    finalFile.path = path.join(latestFile.base, filename || defaultFilename)
-    finalFile.contents = new Buffer(normalizeResult(result))
-    this.push(finalFile)
+    _.forEach(exampleFilesByDisplayName, (contents, displayName) => {
+      const sortedContents = _.sortBy(contents, ['order', 'sectionName']).map(
+        ({ sectionName, examples }) => ({ sectionName, examples }),
+      )
+
+      const file = new Vinyl({
+        path: `./${displayName}.examples.json`,
+        contents: Buffer.from(JSON.stringify(sortedContents, null, 2)),
+      })
+
+      this.push(file)
+    })
+
     cb()
   }
 

gulp/plugins/gulp-react-docgen.js

@@ -1,3 +1,4 @@
+import Vinyl from 'vinyl'
 import gutil from 'gulp-util'
 import through from 'through2'
 
@@ -20,9 +21,10 @@ export default () =>
     try {
       const contents = getComponentInfo(file.path)
 
-      const infoFile = file.clone({ content: false })
-      infoFile.path = file.path.replace(/js$/, 'info.json')
-      infoFile.contents = Buffer.from(JSON.stringify(contents, null, 2))
+      const infoFile = new Vinyl({
+        path: `./${file.basename.replace(/js$/, 'info.json')}`,
+        contents: Buffer.from(JSON.stringify(contents, null, 2)),
+      })
 
       cb(null, infoFile)
     } catch (err) {

gulp/plugins/util/getComponentInfo.js

@@ -3,7 +3,7 @@ import path from 'path'
 import { defaultHandlers, parse } from 'react-docgen'
 import fs from 'fs'
 
-import { parseDefaultValue, parseDocBlock, parserCustomHandler, parseType } from './'
+import { parseDefaultValue, parseDocblock, parserCustomHandler, parseType } from './'
 
 const getComponentInfo = (filepath) => {
   const absPath = path.resolve(process.cwd(), filepath)
@@ -62,7 +62,7 @@ const getComponentInfo = (filepath) => {
   ).toLowerCase()
 
   // replace the component.description string with a parsed docblock object
-  info.docblock = parseDocBlock(info.description)
+  info.docblock = parseDocblock(info.description)
   delete info.description
 
   // file and path info
@@ -74,7 +74,7 @@ const getComponentInfo = (filepath) => {
 
   // replace prop `description` strings with a parsed docblock object and updated `type`
   _.each(info.props, (propDef, propName) => {
-    const { description, tags } = parseDocBlock(propDef.description)
+    const { description, tags } = parseDocblock(propDef.description)
     const { name, value } = parseType(propName, propDef)
 
     info.props[propName] = {

gulp/plugins/util/index.js

@@ -1,7 +1,6 @@
 export getComponentInfo from './getComponentInfo'
 export parseDefaultValue from './parseDefaultValue'
-export parseDocBlock from './parseDocBlock'
-export parseDocExample from './parseDocExample'
+export parseDocblock from './parseDocblock'
 export parseDocSection from './parseDocSection'
 export parserCustomHandler from './parserCustomHandler'
 export parseType from './parseType'