docs(parser): parse custom values and mixed enums

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

@@ -8,7 +8,7 @@ import ComponentPropsToggle from './ComponentPropsEnumToggle'
 import ComponentPropsValue from './ComponentPropsEnumValue'
 
 const ComponentPropsEnum = ({ limit, showAll, toggle, type, values }) => {
-  if (type !== 'enum' || !values) return null
+  if (!_.includes(type, 'enum') || !values) return null
 
   const exceeds = values.length > limit
   const sliced = showAll ? values : _.slice(values, 0, limit)

gulp/plugins/gulp-react-docgen.js

@@ -1,10 +1,10 @@
 import gutil from 'gulp-util'
 import _ from 'lodash'
 import path from 'path'
-import { parse } from 'react-docgen'
+import { defaultHandlers, parse } from 'react-docgen'
 import through from 'through2'
 
-import { parseDefaultValue, parseDocBlock, parseType } from './util'
+import { parseDefaultValue, parseDocBlock, parserCustomHandler, parseType } from './util'
 
 export default (filename) => {
   const defaultFilename = 'docgenInfo.json'
@@ -28,7 +28,10 @@ export default (filename) => {
 
     try {
       const relativePath = file.path.replace(`${process.cwd()}/`, '')
-      const parsed = parse(file.contents)
+      const parsed = parse(file.contents, null, [
+        ...defaultHandlers,
+        parserCustomHandler,
+      ])
 
       // replace the component`description` string with a parsed doc block object
       parsed.docBlock = parseDocBlock(parsed.description)

gulp/plugins/util/index.js

@@ -1,3 +1,4 @@
 export parseDefaultValue from './parseDefaultValue'
 export parseDocBlock from './parseDocBlock'
+export parserCustomHandler from './parserCustomHandler'
 export parseType from './parseType'

gulp/plugins/util/parseType.js

@@ -1,32 +1,37 @@
 const _ = require('lodash')
+const { names } = require('../../../src/elements/Flag/Flag') // eslint-disable-line no-unused-vars
 const SUI = require('../../../src/lib/SUI') // eslint-disable-line no-unused-vars
 
 const evalValue = value => eval(value) // eslint-disable-line no-eval
 
+const isTransformable = value => typeof value === 'string' && (value.includes('SUI') || value.includes('names'))
+
 const uniqValues = values => _.uniqWith(values, (val, other) => `${val}` === `${other}`)
 
 const transformEnumValues = values => _.flatMap(values, ({ value }) => {
+  if (value === 'names') return evalValue(value)
   if (_.startsWith(value, '...SUI')) return evalValue(value.substring(3))
   return value.replace(/'/g, '')
 })
 
 const parseEnum = (type) => {
   const { value } = type
 
-  if (typeof value === 'string' && value.includes('SUI')) {
-    return { ...type, value: uniqValues(evalValue(value)) }
-  }
-
+  if (isTransformable(value)) return { ...type, value: uniqValues(evalValue(value)) }
   return { ...type, value: uniqValues(transformEnumValues(value)) }
 }
 
 const parseUnion = (union) => {
   const { value } = union
+  const values = _.flatten(_.map(
+    _.filter(value, { name: 'enum' }),
+    type => parseEnum(type).value,
+  ))
 
   return {
     ...union,
     name: _.map(value, 'name').join('|'),
-    value: _.map(value, type => (type.name === 'enum' ? parseEnum(type) : type)),
+    value: values,
   }
 }
 

gulp/plugins/util/parserCustomHandler.js

@@ -0,0 +1,51 @@
+import _ from 'lodash'
+import { types } from 'recast'
+import { utils } from 'react-docgen'
+
+const { namedTypes } = types
+const { getMemberValuePath, getPropertyName, resolveToValue } = utils
+
+const getObjectName = path => `${_.get(path, 'object.name')}.${_.get(path, 'property.name')}`
+
+const getArgumentValue = (path) => {
+  if (namedTypes.Identifier.check(path)) return path.name
+  if (namedTypes.MemberExpression.check(path)) return getObjectName(path)
+
+  throw new Error('Unsupported value')
+}
+
+const amendPropTypes = (documentation, path) => {
+  if (!namedTypes.ObjectExpression.check(path.node)) return
+
+  path.get('properties').each((propertyPath) => {
+    const propertyName = getPropertyName(propertyPath)
+    const propDescriptor = documentation.getPropDescriptor(propertyName)
+    const valuePath = propertyPath.get('value')
+
+    if (!namedTypes.CallExpression.check(valuePath.node)) return
+
+    const argumentPath = valuePath.get('arguments').value[0]
+
+    const calleePath = valuePath.get('callee').node
+    const objectName = getObjectName(calleePath)
+
+    if (objectName === 'customPropTypes.onlyProp' || objectName === 'customPropTypes.suggest') {
+      propDescriptor.type = {
+        name: 'enum',
+        value: getArgumentValue(argumentPath),
+      }
+    }
+  })
+}
+
+const parserCustomHandler = (documentation, path) => {
+  let propTypesPath = getMemberValuePath(path, 'propTypes')
+  if (!propTypesPath) return
+
+  propTypesPath = resolveToValue(propTypesPath)
+  if (!propTypesPath) return
+
+  amendPropTypes(documentation, propTypesPath)
+}
+
+export default parserCustomHandler

src/elements/Flag/Flag.js

@@ -11,7 +11,7 @@ import {
   shallowEqual,
 } from '../../lib'
 
-const names = [
+export const names = [
   'ad', 'andorra', 'ae', 'united arab emirates', 'uae', 'af', 'afghanistan', 'ag', 'antigua', 'ai', 'anguilla', 'al',
   'albania', 'am', 'armenia', 'an', 'netherlands antilles', 'ao', 'angola', 'ar', 'argentina', 'as', 'american samoa',
   'at', 'austria', 'au', 'australia', 'aw', 'aruba', 'ax', 'aland islands', 'az', 'azerbaijan', 'ba', 'bosnia', 'bb',