feat(utils): replace react-docgen with typescript (#460)

* -added commonPropTypes const used in the Button component

* -wip replacing react-docgen with react-docgen-typescript

* -wip examples of usage

* -added example usage of default value for non primitive types

* -clean up

* -moving comments on the Accordion from prop types to interface prop

* -removing recast
-moving react-docgen-typescript to devDependencies

* -extracting common prop interfaces and prop types

* -converting some other component's props interfaces

* -converting some other component's props interfaces

* -converting some other component's props interfaces

* -updated changelog and commented prop function signature and enums

* -adding default to some component's props

CHANGELOG.md

@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Documentation
+- Replace react-docgen with react-docgen-typescript for generating the props from the TS props interfaces @mnajdova ([#460](https://github.com/stardust-ui/react/pull/460))
+
 ### BREAKING
 - Replace the `type` prop with `secondary` and `primary` for `Button` @layershifter ([#419](https://github.com/stardust-ui/react/pull/419))
 - Replace the `type` prop with `secondary` and `primary` for `Menu` @layershifter ([#429](https://github.com/stardust-ui/react/pull/429))

build/gulp/plugins/util/getComponentInfo.ts

@@ -1,18 +1,14 @@
 import * as _ from 'lodash'
 import * as path from 'path'
-import { defaultHandlers, parse } from 'react-docgen'
 import * as fs from 'fs'
-import * as ts from 'typescript'
 import parseDefaultValue from './parseDefaultValue'
 import parseDocblock from './parseDocblock'
-import parserCustomHandler from './parserCustomHandler'
 import parseType from './parseType'
-import findExportedComponentDefinitions from './findExportedComponentDefinitions'
+import * as reactDocgenTypescript from 'react-docgen-typescript'
 
 const getComponentInfo = filepath => {
   const absPath = path.resolve(process.cwd(), filepath)
 
-  const contents = fs.readFileSync(absPath).toString()
   const dir = path.dirname(absPath)
   const dirname = path.basename(dir)
   const filename = path.basename(absPath)
@@ -22,18 +18,9 @@ const getComponentInfo = filepath => {
   // "element" for "src/elements/Button/Button.js"
   const componentType = path.basename(path.dirname(dir)).replace(/s$/, '')
 
-  const text = ts.transpile(contents, {
-    jsx: ts.JsxEmit.React,
-    target: ts.ScriptTarget.Latest,
-    module: ts.ModuleKind.CommonJS,
-    allowSyntheticDefaultImports: true,
-  })
+  // start with react-docgen-typescript info
+  const components = reactDocgenTypescript.withDefaultConfig().parse(absPath)
 
-  // start with react-docgen info
-  const components = parse(text, findExportedComponentDefinitions, [
-    ...defaultHandlers,
-    parserCustomHandler,
-  ])
   if (!components.length) {
     throw new Error(`Could not find a component definition in "${filepath}".`)
   }
@@ -45,7 +32,7 @@ const getComponentInfo = filepath => {
       ].join(' '),
     )
   }
-  const info = components[0]
+  const info: any = components[0]
 
   // remove keys we don't use
   delete info.methods

build/gulp/plugins/util/index.ts

@@ -2,5 +2,4 @@ export { default as getComponentInfo } from './getComponentInfo'
 export { default as parseDefaultValue } from './parseDefaultValue'
 export { default as parseDocblock } from './parseDocblock'
 export { default as parseDocSection } from './parseDocSection'
-export { default as parserCustomHandler } from './parserCustomHandler'
 export { default as parseType } from './parseType'

docs/src/components/ComponentDoc/ComponentProp/ComponentPropFunctionSignature.tsx

@@ -20,7 +20,7 @@ const rowStyle: any = {
   flexDirection: 'row',
 }
 
-const getTagType = tag => (tag.type.type === 'AllLiteral' ? 'any' : tag.type.name)
+const getTagType = tag => (tag.type ? (tag.type.type === 'AllLiteral' ? 'any' : tag.type.name) : '')
 
 const ComponentPropFunctionSignature: any = ({ name, tags }) => {
   const params = _.filter(tags, { title: 'param' })

docs/src/components/ComponentDoc/ComponentTable/ComponentTableRow.tsx

@@ -5,8 +5,6 @@ import { Table } from 'semantic-ui-react'
 
 import ComponentPropDefaultValue from '../ComponentProp/ComponentPropDefaultValue'
 import ComponentPropDescription from '../ComponentProp/ComponentPropDescription'
-import ComponentPropEnum from '../ComponentProp/ComponentPropEnum'
-import ComponentPropFunctionSignature from '../ComponentProp/ComponentPropFunctionSignature'
 import ComponentPropName from '../ComponentProp/ComponentPropName'
 
 export default class ComponentTableRow extends React.Component<any, any> {
@@ -25,8 +23,7 @@ export default class ComponentTableRow extends React.Component<any, any> {
   toggleEnums = () => this.setState({ showEnums: !this.state.showEnums })
 
   render() {
-    const { defaultValue, description, name, required, tags, type, value } = this.props
-    const { showEnums } = this.state
+    const { defaultValue, description, name, required, tags, type } = this.props
     const hideRow = this.docSiteHidden(tags)
 
     return (
@@ -40,13 +37,14 @@ export default class ComponentTableRow extends React.Component<any, any> {
         <Table.Cell collapsing>{`{${type}}`}</Table.Cell>
         <Table.Cell>
           <ComponentPropDescription description={description} />
-          <ComponentPropFunctionSignature name={name} tags={tags} />
-          <ComponentPropEnum
-            showAll={showEnums}
-            toggle={this.toggleEnums}
-            type={type}
-            values={value}
-          />
+          {/* TODO change these according to the react-docgen-typescript generated json */}
+          {/*<ComponentPropFunctionSignature name={name} tags={tags} />*/}
+          {/*<ComponentPropEnum*/}
+          {/*showAll={showEnums}*/}
+          {/*toggle={this.toggleEnums}*/}
+          {/*type={type}*/}
+          {/*values={value}*/}
+          {/*/>*/}
         </Table.Cell>
       </Table.Row>
     )

docs/src/components/DocsBehaviorRoot.tsx

@@ -1,10 +1,12 @@
 import * as _ from 'lodash'
 import PropTypes from 'prop-types'
 import * as React from 'react'
-const behaviorMenuItems = require('docs/src/behaviorMenu')
 import { Grid, Header } from 'semantic-ui-react'
 import DocumentTitle from 'react-document-title'
 import ComponentExampleTitle from './ComponentDoc/ComponentExample/ComponentExampleTitle'
+
+const behaviorMenuItems = require('docs/src/behaviorMenu')
+
 class DocsBehaviorRoot extends React.Component<any, any> {
   static propTypes = {
     children: PropTypes.node,