docs(FTZ): use PropsTable (#1268)

* remove HOCs, remove `active` on `ComponentButton`, remove unused props

* rename to ComponentPropsTable, add useComponentProps hook

* add FTZ components to docgen, to propsTable

* fix links, update docgen to filter interfaces

* fix ignore

* revert link() changes

* invert condition

* update error contents

* restore link stuff

Author: layershifter

build/gulp/plugins/gulp-component-menu.ts

@@ -39,7 +39,7 @@ export default () => {
         const jsonInfo = fs.readFileSync(infoFilePath)
         componentInfo = JSON.parse(jsonInfo.toString())
       } else {
-        componentInfo = getComponentInfo(file.path)
+        componentInfo = getComponentInfo(file.path, [])
       }
 
       if (componentInfo.isParent) {

build/gulp/plugins/gulp-react-docgen.ts

@@ -7,7 +7,7 @@ import { getComponentInfo } from './util'
 
 const pluginName = 'gulp-react-docgen'
 
-export default () =>
+export default (ignoredInterfaces: string[] = []) =>
   through2.obj(function bufferContents(file, enc, cb) {
     if (file.isNull()) {
       cb(null, file)
@@ -21,7 +21,7 @@ export default () =>
 
     try {
       const infoFilename = file.basename.replace(/\.tsx$/, '.info.json')
-      const contents = getComponentInfo(file.path)
+      const contents = getComponentInfo(file.path, ignoredInterfaces)
 
       const infoFile = new Vinyl({
         path: `./${infoFilename}`,

build/gulp/plugins/util/getComponentInfo.ts

@@ -12,7 +12,7 @@ interface BehaviorInfo {
   category: string
 }
 
-const getComponentInfo = (filepath: string) => {
+const getComponentInfo = (filepath: string, ignoredParentInterfaces: string[]) => {
   const absPath = path.resolve(process.cwd(), filepath)
 
   const dir = path.dirname(absPath)
@@ -99,14 +99,21 @@ const getComponentInfo = (filepath: string) => {
     const { description, tags } = parseDocblock(propDef.description)
     const { name, value } = parseType(propName, propDef)
 
-    info.props[propName] = {
-      ...propDef,
-      description,
-      tags,
-      value,
-      defaultValue: parseDefaultValue(propDef),
-      name: propName,
-      type: name,
+    const parentInterface = _.get(propDef, 'parent.name')
+    const visibleInDefinition = !_.includes(ignoredParentInterfaces, parentInterface)
+
+    if (visibleInDefinition) {
+      info.props[propName] = {
+        ...propDef,
+        description,
+        tags,
+        value,
+        defaultValue: parseDefaultValue(propDef),
+        name: propName,
+        type: name,
+      }
+    } else {
+      delete info.props[propName]
     }
   })
 

build/gulp/tasks/docs.ts

@@ -68,11 +68,14 @@ task(
   ),
 )
 
-// ----------------------------------------s
+// ----------------------------------------
 // Build
 // ----------------------------------------
 
-const componentsSrc = [`${paths.posix.packageSrc('react')}/components/*/[A-Z]*.tsx`]
+const componentsSrc = [
+  `${paths.posix.packageSrc('react')}/components/*/[A-Z]*.tsx`,
+  `${paths.posix.packageSrc('react')}/lib/accessibility/FocusZone/[A-Z]!(*.types).tsx`,
+]
 const behaviorSrc = [`${paths.posix.packageSrc('react')}/lib/accessibility/Behaviors/*/[a-z]*.ts`]
 const examplesIndexSrc = `${paths.posix.docsSrc()}/examples/*/*/*/index.tsx`
 const examplesSrc = `${paths.posix.docsSrc()}/examples/*/*/*/!(*index|.knobs).tsx`
@@ -88,7 +91,7 @@ const markdownSrc = [
 task('build:docs:component-info', () =>
   src(componentsSrc, { since: lastRun('build:docs:component-info') })
     .pipe(
-      cache(gulpReactDocgen(), {
+      cache(gulpReactDocgen(['DOMAttributes', 'HTMLAttributes']), {
         name: 'componentInfo',
       }),
     )

docs/src/components/ComponentDoc/ComponentControls/ComponentButton.tsx

@@ -4,12 +4,11 @@ import * as React from 'react'
 interface LabelledButtonProps {
   iconName: string
   label: string
-  active: boolean
   onClick?: (event: React.SyntheticEvent) => void
 }
 
-const LabelledButton = createComponent<LabelledButtonProps>({
-  displayName: 'LabelledButton',
+const ComponentButton = createComponent<LabelledButtonProps>({
+  displayName: 'ComponentButton',
   render: ({ stardust, ...props }) => {
     const { iconName, label, onClick } = props
     return (
@@ -20,4 +19,4 @@ const LabelledButton = createComponent<LabelledButtonProps>({
     )
   },
 })
-export default LabelledButton
+export default ComponentButton

docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx

@@ -9,7 +9,6 @@ import * as _ from 'lodash'
 import * as React from 'react'
 import { NavLink } from 'react-router-dom'
 
-import { updateForKeys } from 'docs/src/hoc'
 import ComponentButton from './ComponentButton'
 import { ComponentSourceManagerLanguage } from 'docs/src/components/ComponentDoc/ComponentSourceManager'
 import ComponentControlsCodeSandbox from './ComponentControlsCodeSandbox/ComponentControlsCodeSandbox'
@@ -25,10 +24,7 @@ type ComponentControlsProps = {
   onShowRtl: (e: React.SyntheticEvent) => void
   onShowTransparent: (e: React.SyntheticEvent) => void
   onShowVariables: (e: React.SyntheticEvent) => void
-  showCode: boolean
   showRtl: boolean
-  showTransparent: boolean
-  showVariables: boolean
 }
 
 const controlsTheme: ThemeInput = {
@@ -58,10 +54,7 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
     exampleCode,
     exampleLanguage,
     examplePath,
-    showCode,
     showRtl,
-    showTransparent,
-    showVariables,
     onCopyLink,
     onShowCode,
     onShowRtl,
@@ -83,7 +76,7 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
         items={[
           {
             key: 'show-code',
-            content: <ComponentButton iconName="code" label="Try it" active={showCode} />,
+            content: <ComponentButton iconName="code" label="Try it" />,
             onClick: onShowCode,
             accessibility: toolbarButtonBehavior,
           },
@@ -100,31 +93,25 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
           },
           {
             key: 'show-variables',
-            content: (
-              <ComponentButton iconName="paint brush" label="Theme it" active={showVariables} />
-            ),
+            content: <ComponentButton iconName="paint brush" label="Theme it" />,
             onClick: onShowVariables,
             accessibility: toolbarButtonBehavior,
           },
           {
             key: 'show-transparent',
-            content: (
-              <ComponentButton iconName="adjust" label="Transparent" active={showTransparent} />
-            ),
+            content: <ComponentButton iconName="adjust" label="Transparent" />,
             onClick: onShowTransparent,
             accessibility: toolbarButtonBehavior,
           },
           {
             key: 'show-rtl',
-            content: <ComponentButton iconName="align right" label="RTL" active={showRtl} />,
+            content: <ComponentButton iconName="align right" label="RTL" />,
             onClick: onShowRtl,
             accessibility: toolbarButtonBehavior,
           },
           {
             key: 'maximize',
-            content: (
-              <ComponentButton iconName="external alternate" label="Popout" active={false} />
-            ),
+            content: <ComponentButton iconName="external alternate" label="Popout" />,
             as: NavLink,
             to: `/maximize/${_.kebabCase(
               examplePath
@@ -144,7 +131,6 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
                   <ComponentButton
                     iconName="linkify"
                     label={active ? 'Copied!' : 'Permalink'}
-                    active={active}
                     onClick={onClick}
                   />
                 )}
@@ -160,11 +146,4 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
   )
 }
 
-export default updateForKeys([
-  'exampleCode',
-  'examplePath',
-  'showRtl',
-  'showCode',
-  'showTransparent',
-  'showVariables',
-])(ComponentControls, ComponentButton)
+export default React.memo(ComponentControls)

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCodeSandbox/ComponentControlsCodeSandbox.tsx

@@ -2,16 +2,14 @@ import * as React from 'react'
 import CodeSandboxer from 'react-codesandboxer'
 
 import { ComponentSourceManagerLanguage } from 'docs/src/components/ComponentDoc/ComponentSourceManager'
-import { updateForKeys } from 'docs/src/hoc'
 import { appTemplateJs, appTemplateTs } from './indexTemplates'
-import LabelledButton from '../ComponentButton'
+import ComponentButton from '../ComponentButton'
 import createPackageJson from './createPackageJson'
 
 type ComponentControlsCodeSandboxProps = {
   exampleCode: string
   exampleLanguage: ComponentSourceManagerLanguage
   exampleName: string
-  active: boolean
 }
 
 type ComponentControlsCodeSandboxState = {
@@ -20,7 +18,7 @@ type ComponentControlsCodeSandboxState = {
   sandboxUrl: string
 }
 
-class ComponentControlsShowCode extends React.Component<
+class ComponentControlsCodeSandbox extends React.PureComponent<
   ComponentControlsCodeSandboxProps,
   ComponentControlsCodeSandboxState
 > {
@@ -55,7 +53,7 @@ class ComponentControlsShowCode extends React.Component<
   }
 
   render() {
-    const { active, exampleLanguage, exampleCode, exampleName } = this.props
+    const { exampleLanguage, exampleCode, exampleName } = this.props
     const { examplePath, sandboxUrl } = this.state
 
     const main = exampleLanguage === 'ts' ? 'index.tsx' : 'index.js'
@@ -64,12 +62,7 @@ class ComponentControlsShowCode extends React.Component<
 
     if (sandboxUrl) {
       return (
-        <LabelledButton
-          label="Click to open"
-          onClick={this.handleClick}
-          iconName="checkmark"
-          active={active}
-        />
+        <ComponentButton label="Click to open" onClick={this.handleClick} iconName="checkmark" />
       )
     }
 
@@ -86,13 +79,12 @@ class ComponentControlsShowCode extends React.Component<
         skipRedirect
         template={template}
       >
-        {({ isLoading, isDeploying, active }) => {
+        {({ isLoading, isDeploying }) => {
           const loading = isLoading || isDeploying
           return (
-            <LabelledButton
+            <ComponentButton
               iconName={loading ? 'spinner' : 'connectdevelop'}
               label={loading ? 'Exporting...' : 'CodeSandbox'}
-              active={active}
             />
           )
         }}
@@ -101,4 +93,4 @@ class ComponentControlsShowCode extends React.Component<
   }
 }
 
-export default updateForKeys(['exampleCode', 'active'])(ComponentControlsShowCode)
+export default ComponentControlsCodeSandbox

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCopyLink.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import LabelledButton from './ComponentButton'
+import ComponentButton from './ComponentButton'
 import * as _ from 'lodash'
 
 export default class ComponentControlsCopyLink extends React.Component<any, any> {
@@ -24,10 +24,9 @@ export default class ComponentControlsCopyLink extends React.Component<any, any>
     const { active } = this.state
 
     return (
-      <LabelledButton
+      <ComponentButton
         iconName="linkify"
         label={active ? 'Copied!' : this.btnLabel}
-        active={active}
         onClick={this.handleClick}
       />
     )

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

@@ -511,7 +511,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
       description,
       title,
     } = this.props
-    const { showCode, showRtl, showTransparent, showVariables } = this.state
+    const { showCode, showRtl, showTransparent } = this.state
 
     return (
       <Flex column>
@@ -535,10 +535,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
                     onShowRtl={this.handleShowRtlClick}
                     onShowVariables={this.handleShowVariablesClick}
                     onShowTransparent={this.handleShowTransparentClick}
-                    showCode={showCode}
                     showRtl={showRtl}
-                    showTransparent={showTransparent}
-                    showVariables={showVariables}
                   />
                 </Flex.Item>
               </Flex>

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

@@ -2,7 +2,6 @@ import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { updateForKeys } from 'docs/src/hoc'
 import ComponentPropExtra from './ComponentPropExtra'
 import ComponentPropToggle from './ComponentPropEnumToggle'
 import ComponentPropValue from './ComponentPropEnumValue'
@@ -39,4 +38,9 @@ ComponentPropEnum.propTypes = {
   values: PropTypes.array,
 }
 
-export default updateForKeys(['showAll', 'type', 'values'])(ComponentPropEnum)
+const arePropsEqual = (prevProps, nextProps) =>
+  prevProps.showAll === nextProps.showAll &&
+  prevProps.type === nextProps.type &&
+  prevProps.values === nextProps.values
+
+export default React.memo(ComponentPropEnum, arePropsEqual)

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

@@ -1,8 +1,6 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { updateForKeys } from 'docs/src/hoc'
-
 const toggleStyle = {
   cursor: 'pointer',
 }
@@ -19,4 +17,6 @@ ComponentPropEnumToggle.propTypes = {
   total: PropTypes.number,
 }
 
-export default updateForKeys(['showAll'])(ComponentPropEnumToggle)
+const areEqualProps = (prevProps, nextProps) => prevProps.showAll === nextProps.showAll
+
+export default React.memo(ComponentPropEnumToggle, areEqualProps)

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

@@ -1,8 +1,6 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { neverUpdate } from 'docs/src/hoc'
-
 const spanStyle = {
   display: 'inline-block',
   paddingRight: '0.2em',
@@ -18,4 +16,6 @@ ComponentPropEnumValue.propTypes = {
   children: PropTypes.node,
 }
 
-export default neverUpdate(ComponentPropEnumValue)
+const arePropsEqual = () => true
+
+export default React.memo(ComponentPropEnumValue, arePropsEqual)

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

@@ -2,7 +2,6 @@ import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { neverUpdate } from 'docs/src/hoc'
 import ComponentPropExtra, { ComponentPropExtraProps } from './ComponentPropExtra'
 
 interface ComponentPropFunctionProps extends ComponentPropExtraProps {
@@ -75,4 +74,6 @@ ComponentPropFunctionSignature.propTypes = {
   tags: PropTypes.array,
 }
 
-export default neverUpdate(ComponentPropFunctionSignature)
+const arePropsEqual = () => true
+
+export default React.memo(ComponentPropFunctionSignature, arePropsEqual)