add react-docgen to provide props tables for UI component library

platform/docs/docs/component-library/components/Button.mdx

@@ -5,6 +5,7 @@ route: components/button
 ---
 
 import { Button, IconButton, Icon } from '@ohif/ui';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 # Button
 
@@ -369,5 +370,4 @@ import { IconButton } from '@ohif/ui';
 
 ## Properties
 
-<Props of={Button} />
-````
+<ComponentPropsTable componentName={'Button'} />

platform/docs/docs/component-library/components/ButtonGroup.mdx

@@ -5,6 +5,7 @@ route: components/buttonGroup
 ---
 
 import { ButtonGroup, Button, IconButton, Icon } from '@ohif/ui';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 # ButtonGroup
 
@@ -107,5 +108,4 @@ import { ButtonGroup } from '@ohif/ui';
 
 ## Properties
 
-<Props of={ButtonGroup} />
-````
+<ComponentPropsTable componentName={'ButtonGroup'} />

platform/docs/docs/component-library/components/CinePlayer.mdx

@@ -5,11 +5,10 @@ route: components/CinePlayer
 ---
 
 import { useState } from 'react';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 import { CinePlayer } from '@ohif/ui';
 
-# Input Text
-
 ## Import
 
 ```javascript
@@ -38,5 +37,4 @@ function() {
 
 ## Properties
 
-<Props of={CinePlayer} />
-```
+<ComponentPropsTable componentName={'CinePlayer'} />

platform/docs/docs/component-library/components/ContextMenu.mdx

@@ -5,6 +5,7 @@ route: components/contextMenu
 ---
 
 import { ContextMenu } from '@ohif/ui';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 # Context Menu
 
@@ -45,5 +46,4 @@ function() {
 
 ## Properties
 
-<Props of={ContextMenu} />
-```
+<ComponentPropsTable componentName={'ContextMenu'} />

platform/docs/docs/component-library/components/DateRange.mdx

@@ -5,6 +5,7 @@ route: components/date-range
 ---
 
 import { useState } from 'react';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 import { DateRange } from '@ohif/ui';
 
@@ -42,5 +43,4 @@ function() {
 
 ## Properties
 
-<Props of={DateRange} />
-```
+<ComponentPropsTable componentName={'DateRange'} />

platform/docs/docs/component-library/components/Dropdown.mdx

@@ -5,6 +5,7 @@ route: components/dropdown
 ---
 
 import { Dropdown, IconButton, Icon } from '@ohif/ui';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 # Dropdown
 
@@ -64,5 +65,4 @@ function() {
 
 ## Properties
 
-<Props of={Dropdown} />
-```
+<ComponentPropsTable componentName={'Dropdown'} />

platform/docs/docs/component-library/components/EmptyStudies.mdx

@@ -5,6 +5,7 @@ route: components/empty-studies
 ---
 
 import { EmptyStudies } from '@ohif/ui';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 # Empty Studies
 
@@ -26,5 +27,4 @@ import { EmptyStudies } from '@ohif/ui';
 
 ## Properties
 
-<Props of={EmptyStudies} />
-```
+<ComponentPropsTable componentName={'EmptyStudies'} />

platform/docs/docs/component-library/components/ErrorBoundary.mdx

@@ -5,6 +5,7 @@ route: components/errorBoundary
 ---
 
 import { ErrorBoundary } from '@ohif/ui';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 # Error Boundary
 
@@ -55,5 +56,4 @@ function() {
 
 ## Properties
 
-<Props of={ErrorBoundary} />
-````
+<ComponentPropsTable componentName={'ErrorBoundary'} />

platform/docs/docs/component-library/components/ExpandableToolbarButton.mdx

@@ -5,7 +5,7 @@ route: components/expandableToolbarButton
 ---
 
 import { useState } from 'react';
-
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 import { ExpandableToolbarButton, ListMenu } from '@ohif/ui';
 
 # Toolbar Button
@@ -84,5 +84,4 @@ function() {
 
 ## Properties
 
-<Props of={ExpandableToolbarButton} />
-```
+<ComponentPropsTable componentName={'ExpandableToolbarButton'} />

platform/docs/docs/component-library/components/Input.mdx

@@ -5,6 +5,7 @@ route: components/input
 ---
 
 import { Input } from '@ohif/ui';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 # Input
 
@@ -35,5 +36,4 @@ function() {
 
 ## Properties
 
-<Props of={Input} />
-```
+<ComponentPropsTable componentName={'Input'} />

platform/docs/docs/component-library/components/InputDateRange.mdx

@@ -5,6 +5,7 @@ route: components/InputDateRange
 ---
 
 import { useState } from 'react';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 import { InputDateRange } from '@ohif/ui';
 
@@ -40,5 +41,4 @@ function() {
 
 ## Properties
 
-<Props of={InputDateRange} />
-```
+<ComponentPropsTable componentName={'InputDateRange'} />

platform/docs/docs/component-library/components/InputGroup.mdx

@@ -5,6 +5,7 @@ route: components/InputGroup
 ---
 
 import { useState } from 'react';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 import { InputGroup } from '@ohif/ui';
 
@@ -87,5 +88,4 @@ function() {
 
 ## Properties
 
-<Props of={InputGroup} />
-```
+<ComponentPropsTable componentName={'InputGroup'} />

platform/docs/docs/component-library/components/InputMultiSelect.mdx

@@ -5,6 +5,7 @@ route: components/InputMultiSelect
 ---
 
 import { useState } from 'react';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 import { InputMultiSelect } from '@ohif/ui';
 
@@ -45,5 +46,4 @@ function() {
 
 ## Properties
 
-<Props of={InputMultiSelect} />
-```
+<ComponentPropsTable componentName={'InputMultiSelect'} />

platform/docs/docs/component-library/components/InputText.mdx

@@ -5,6 +5,7 @@ route: components/InputText
 ---
 
 import { useState } from 'react';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 import { InputText } from '@ohif/ui';
 
@@ -39,5 +40,4 @@ function() {
 
 ## Properties
 
-<Props of={InputText} />
-```
+<ComponentPropsTable componentName={'InputText'} />

platform/docs/docs/component-library/components/Label.mdx

@@ -5,6 +5,7 @@ route: components/label
 ---
 
 import { Label } from '@ohif/ui';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 # Label
 
@@ -28,5 +29,4 @@ function() {
 
 ## Properties
 
-<Props of={Label} />
-```
+<ComponentPropsTable componentName={'Label'} />

platform/docs/docs/component-library/components/ListMenu.mdx

@@ -5,6 +5,7 @@ route: components/listMenu
 ---
 
 import { useState } from 'react';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 import { ListMenu, ToolbarButton } from '@ohif/ui';
 
@@ -78,5 +79,4 @@ function() {
 
 ## Properties
 
-<Props of={ListMenu} />
-```
+<ComponentPropsTable componentName={'ListMenu'} />

platform/docs/docs/component-library/components/MeasurementTable.mdx

@@ -5,6 +5,7 @@ route: components/measurementTable
 ---
 
 import { useState } from 'react';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 import { MeasurementTable } from '@ohif/ui';
 
@@ -55,5 +56,4 @@ function() {
 
 ## Properties
 
-<Props of={MeasurementTable} />
-````
+<ComponentPropsTable componentName={'MeasurementTable'} />

platform/docs/docs/component-library/components/NavBar.mdx

@@ -5,6 +5,7 @@ route: components/navBar
 ---
 
 import { NavBar, Typography } from '@ohif/ui';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 # NavBar
 
@@ -26,5 +27,4 @@ import { NavBar } from '@ohif/ui';
 
 ## Properties
 
-<Props of={NavBar} />
-```
+<ComponentPropsTable componentName={'NavBar'} />

platform/docs/docs/component-library/components/Notification.mdx

@@ -5,6 +5,7 @@ route: components/notification
 ---
 
 import { Notification } from '@ohif/ui';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 # Notification
 
@@ -54,5 +55,4 @@ function() {
 
 ## Properties
 
-<Props of={Notification} />
-```
+<ComponentPropsTable componentName={'Notification'} />

platform/docs/docs/component-library/components/SegmentationTable.mdx

@@ -5,6 +5,7 @@ route: components/segmentationTable
 ---
 
 import { SegmentationTable } from '@ohif/ui';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 # Segmentation Table
 
@@ -33,5 +34,4 @@ function() {
 
 ## Properties
 
-<Props of={SegmentationTable} />
-```
+<ComponentPropsTable componentName={'SegmentationTable'} />

platform/docs/docs/component-library/components/Select.mdx

@@ -5,6 +5,7 @@ route: components/select
 ---
 
 import { Select } from '@ohif/ui';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 # Select
 
@@ -66,5 +67,4 @@ import { Select } from '@ohif/ui';
 
 ## Properties
 
-<Props of={Select} />
-````
+<ComponentPropsTable componentName={'Select'} />

platform/docs/docs/component-library/components/SidePanel.mdx

@@ -81,5 +81,4 @@ import { SidePanel } from '@ohif/ui';
 
 ## Properties
 
-<Props of={SidePanel} />
-````
+(<ComponentPropsTable componentName={'SidePanel'} />)````

platform/docs/docs/component-library/components/SplitButton.mdx

@@ -7,6 +7,7 @@ route: components/splitButton
 import { useState } from 'react';
 
 import { SplitButton, WindowLevelMenuItem } from '@ohif/ui';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 # Split Button
 
@@ -84,5 +85,4 @@ function() {
 
 ## Properties
 
-<Props of={SplitButton} />
-```
+<ComponentPropsTable componentName={'SplitButton'} />

platform/docs/docs/component-library/components/StudyBrowser.mdx

@@ -5,6 +5,7 @@ route: components/studyBrowser
 ---
 
 import { StudyBrowser } from '@ohif/ui';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 # StudyBrowser
 
@@ -107,5 +108,4 @@ function() {
 
 ## Properties
 
-<Props of={StudyBrowser} />
-```
+<ComponentPropsTable componentName={'StudyBrowser'} />

platform/docs/docs/component-library/components/StudyItem.mdx

@@ -43,5 +43,5 @@ function() {
 
 ## Properties
 
-<Props of={StudyItem} />
+<ComponentPropsTable componentName={'StudyItem'} />
 ```

platform/docs/docs/component-library/components/StudyListFilter.mdx

@@ -5,6 +5,7 @@ route: components/studyListFilter
 ---
 
 import { useState } from 'react';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 import { StudyListFilter, Modal } from '@ohif/ui';
 import { ModalProvider } from '@ohif/ui';
@@ -118,5 +119,4 @@ function() {
 
 ## Properties
 
-<Props of={StudyListFilter} />
-```
+<ComponentPropsTable componentName={'StudyListFilter'} />

platform/docs/docs/component-library/components/StudyListPagination.mdx

@@ -5,6 +5,7 @@ route: components/studyListPagination
 ---
 
 import { useState } from 'react';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 import { StudyListPagination } from '@ohif/ui';
 
@@ -42,5 +43,4 @@ function() {
 
 ## Properties
 
-<Props of={StudyListPagination} />
-```
+<ComponentPropsTable componentName={'StudyListPagination'} />

platform/docs/docs/component-library/components/StudyListTable.mdx

@@ -5,6 +5,7 @@ route: components/studyListTable
 ---
 
 import { useState } from 'react';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 import { StudyListTable } from '@ohif/ui';
 
@@ -59,5 +60,4 @@ function() {
 
 ## Properties
 
-<Props of={StudyListTable} />
-```
+<ComponentPropsTable componentName={'StudyListTable'} />

platform/docs/docs/component-library/components/Table.mdx

@@ -5,6 +5,7 @@ route: components/table
 ---
 
 import { Table, TableHead, TableBody, TableRow, TableCell } from '@ohif/ui';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 # Table
 
@@ -58,21 +59,21 @@ passing a `className` or `style`.
 
 ### Table Props
 
-<Props of={Table} />
+<ComponentPropsTable componentName={'Table'} />
 
 ### TableHead Props
 
-<Props of={TableHead} />
+<ComponentPropsTable componentName={'TableHead'} />
 
 ### TableBody Props
 
-<Props of={TableBody} />
+<ComponentPropsTable componentName={'TableBody'} />
 
 ### TableRow Props
 
-<Props of={TableRow} />
+<ComponentPropsTable componentName={'TableRow'} />
 
 ### TableCell Props
 
-<Props of={TableCell} />
+<ComponentPropsTable componentName={'TableCell'} />
 ```

platform/docs/docs/component-library/components/Thumbnail.mdx.todo

@@ -37,4 +37,4 @@ import { Thumbnail } from '@ohif/ui';
 
 ## Properties
 
-<Props of={Thumbnail} />
+<ComponentPropsTable componentName={'Thumbnail'} />

platform/docs/docs/component-library/components/ThumbnailNoImage.mdx.todo

@@ -34,4 +34,4 @@ import { Thumbnail } from '@ohif/ui';
 
 ## Properties
 
-<Props of={ThumbnailNoImage} />
+<ComponentPropsTable componentName={'ThumbnailNoImage'} />

platform/docs/docs/component-library/components/ThumbnailTracked.mdx.todo

@@ -6,6 +6,7 @@ route: components/ThumbnailTracked
 
 
 import { ThumbnailTracked } from '../';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 # ThumbnailTracked
 
@@ -36,4 +37,4 @@ import { ThumbnailTracked } from '@ohif/ui';
 
 ## Properties
 
-<Props of={ThumbnailTracked} />
+<ComponentPropsTable componentName={'ThumbnailTracked'} />

platform/docs/docs/component-library/components/ToolbarButton.mdx

@@ -5,6 +5,7 @@ route: components/toolbarButton
 ---
 
 import { useState, useCallback } from 'react';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 import { ToolbarButton } from '@ohif/ui';
 
@@ -43,5 +44,4 @@ function() {
 
 ## Properties
 
-<Props of={ToolbarButton} />
-```
+<ComponentPropsTable componentName={'ToolbarButton'} />

platform/docs/docs/component-library/components/Tooltip.mdx

@@ -5,6 +5,7 @@ route: components/tooltip
 ---
 
 import { Tooltip, Typography } from '@ohif/ui';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 # Tooltip
 
@@ -36,5 +37,4 @@ function TooltipExample(props) {
 
 ## Properties
 
-<Props of={Tooltip} />
-```
+<ComponentPropsTable componentName={'Tooltip'} />

platform/docs/docs/component-library/components/TooltipClipboard.mdx

@@ -5,6 +5,7 @@ route: components/tooltipClipboard
 ---
 
 import { TooltipClipboard } from '@ohif/ui';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 # Tooltip Clipboard
 
@@ -25,4 +26,4 @@ import { TooltipClipboard } from '@ohif/ui';
 
 ## Properties
 
-<Props of={TooltipClipboard} />
+<ComponentPropsTable componentName={'TooltipClipboard'} />

platform/docs/docs/component-library/components/Typography.mdx

@@ -5,6 +5,7 @@ route: components/typography
 ---
 
 import { Typography } from '@ohif/ui';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 # Typography
 
@@ -65,5 +66,4 @@ element.
 
 ## Properties
 
-<Props of={Typography} />
-````
+<ComponentPropsTable componentName={'Typography'} />

platform/docs/docs/component-library/components/Viewport.mdx

@@ -5,6 +5,7 @@ route: components/viewport
 ---
 
 import { Viewport } from '@ohif/ui';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 # Viewport
 
@@ -51,5 +52,4 @@ import { Viewport } from '@ohif/ui';
 
 ## Properties
 
-<Props of={Viewport} />
-```
+<ComponentPropsTable componentName={'Viewport'} />

platform/docs/docs/component-library/components/ViewportActionBar.mdx

@@ -5,6 +5,7 @@ route: components/viewportActionBar
 ---
 
 import { ViewportActionBar } from '@ohif/ui';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 # Viewport Action Bar
 
@@ -132,5 +133,4 @@ import { ViewportActionBar } from '@ohif/ui';
 
 ## Properties
 
-<Props of={ViewportActionBar} />
-````
+<ComponentPropsTable componentName={'ViewportActionBar'} />

platform/docs/docs/component-library/components/ViewportGrid.mdx

@@ -5,6 +5,7 @@ route: components/viewportGrid
 ---
 
 import { DragAndDropProvider, ViewportGrid } from '@ohif/ui';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 # ViewportGrid
 
@@ -35,5 +36,4 @@ import { ViewportGrid } from '@ohif/ui';
 
 ## Properties
 
-<Props of={ViewportGrid} />
-```
+<ComponentPropsTable componentName={'ViewportGrid'} />

platform/docs/docs/component-library/components/ViewportPane.mdx.todo

@@ -6,6 +6,7 @@ route: components/viewport-pane
 
 
 import { ViewportGrid, ViewportPane, DragAndDropProvider } from '@ohif/ui';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 # ViewportPane
 
@@ -32,4 +33,4 @@ import { ViewportPane } from '@ohif/ui';
 
 ## Properties
 
-<Props of={ViewportPane} />
+<ComponentPropsTable componentName={'ViewportPane'} />

platform/docs/docs/component-library/components/WindowLevelMenuItem.mdx

@@ -5,6 +5,7 @@ route: components/windowLevelMenuItem
 ---
 
 import { useState } from 'react';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 import { ListMenu, WindowLevelMenuItem } from '@ohif/ui';
 
@@ -30,5 +31,4 @@ function() {
 
 ## Properties
 
-<Props of={WindowLevelMenuItem} />
-```
+<ComponentPropsTable componentName={'WindowLevelMenuItem'} />

platform/docs/docs/component-library/components/icon.mdx

@@ -5,6 +5,7 @@ route: components/icon
 ---
 
 import { Icon, ICONS } from '@ohif/ui';
+import { ComponentPropsTable } from '../../../src/components/ComponentPropsTable.jsx';
 
 # Icon
 
@@ -43,11 +44,7 @@ import { Icon } from '@ohif/ui';
 
 ## Properties
 
-<Props of={Icon} />
+<ComponentPropsTable componentName={'Icon'} />
 
 The `Icon` component takes a single prop of `name`, which indicates which Icon
 should be displayed. The icon inherit the component text/font styles.
-
-```
-
-```

platform/docs/docusaurus.config.js

@@ -46,8 +46,8 @@ const isI18nStaging = process.env.I18N_STAGING === 'true';
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 (module.exports = {
   title: 'OHIF',
-  tagline: 'Build optimized websites quickly, focus on your content',
-  organizationName: 'facebook',
+  tagline: 'Open-source web-based medical imaging viewer',
+  organizationName: 'Open Health Imaging Foundation',
   projectName: 'OHIF',
   baseUrl,
   baseUrlIssueBanner: true,
@@ -188,6 +188,20 @@ const isI18nStaging = process.env.I18N_STAGING === 'true';
     //     ],
     //   },
     // ],
+    [
+      'docusaurus-plugin-react-docgen',
+      {
+        // pass in a single string or an array of strings
+        //id: 'docgen-button',
+        src: ['../ui/src/components/**/*.jsx'],
+        global: true,
+        /*route: {
+          path: '/docs/api',
+          component: require.resolve('./ComponentDocPage.jsx'),
+          exact: true,
+        },*/
+      },
+    ],
   ],
   presets: [
     [
@@ -368,10 +382,6 @@ const isI18nStaging = process.env.I18N_STAGING === 'true';
         {
           title: 'Community',
           items: [
-            {
-              label: 'Feedback',
-              to: 'https://community.ohif.org/',
-            },
             {
               label: 'Discussion board',
               to: 'https://community.ohif.org/',

platform/docs/package.json

@@ -57,8 +57,13 @@
     ]
   },
   "devDependencies": {
+    "capitalize": "^2.0.3",
+    "docusaurus-plugin-react-docgen": "^0.0.2",
+    "lodash.get": "^4.4.2",
     "postcss-import": "^14.0.2",
     "postcss-preset-env": "^6.7.0",
+    "react-docgen": "^5.4.0",
+    "react-tooltip": "^4.2.21",
     "tailwindcss": "^2.2.4"
   }
 }

platform/docs/src/components/ComponentPropsTable.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { usePluginData } from '@docusaurus/useGlobalData';
+import { PropsTable } from '../react-docgen-props-table/PropsTable'
+
+export function ComponentPropsTable({ componentName }) {
+  if (!componentName) {
+    return null;
+  }
+
+  const data = usePluginData('docusaurus-plugin-react-docgen')
+  const componentDocGenData = data[componentName.toLowerCase()]
+  if (!componentDocGenData) {
+    return null;
+  }
+
+  return (
+    <PropsTable className={'table-auto'} props={componentDocGenData.props}/>
+  )
+}
+
+ComponentPropsTable.PropTypes = {
+  componentName: PropTypes.string.required
+}

platform/docs/src/react-docgen-props-table/PropsTable.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import get from 'lodash.get';
+import capitalize from 'capitalize';
+
+import { humanize } from './humanize-prop';
+import { Table } from './components/Table';
+import { Tooltip } from './components/Tooltip';
+
+const styles = {
+  thead: {
+    textAlign: 'left',
+  },
+};
+
+export const getPropType = (prop, Tooltip) => {
+  const propName = prop.flowType ? prop.flowType.name : prop.type.name;
+  const isEnum = propName.startsWith('"') || propName === 'enum';
+  const name = capitalize(isEnum ? 'enum' : propName);
+  const value = prop.type && prop.type.value;
+
+  if (!name) return null;
+
+  if (
+    !Tooltip ||
+    (isEnum && typeof value === 'string') ||
+    (!prop.flowType && !isEnum && !value) ||
+    (prop.flowType && !prop.flowType.elements)
+  ) {
+    return name;
+  }
+
+  return prop.flowType ? (
+    <Tooltip text={humanize(prop.flowType)}>{name}</Tooltip>
+  ) : (
+    <Tooltip text={humanize(prop.type)}>{name}</Tooltip>
+  );
+};
+
+export const PropsTable = ({ props, ...rest }) => {
+  if (!props || typeof props !== 'object') {
+    throw new Error('invalid props passed to PropsTable');
+  }
+
+  const hasDescription = Object.keys(props).some(name => {
+    const description = get(props, `${name}.description`);
+    return Boolean(description) && Boolean(get(description, 'length'));
+  });
+
+  const Thead = 'thead';
+  const Tr = 'tr';
+  const Th = 'th';
+  const Tbody = 'tbody';
+  const Td = 'td';
+
+  return (
+    <Table {...rest}>
+      <Thead style={styles.thead}>
+        <Tr>
+          <Th>Property</Th>
+          <Th>Type</Th>
+          <Th>Required</Th>
+          <Th>Default</Th>
+
+          {hasDescription && <Th width="40%">Description</Th>}
+        </Tr>
+      </Thead>
+
+      <Tbody>
+        {props &&
+          Object.keys(props).map(name => {
+            const prop = props[name];
+
+            if (!prop.flowType && !prop.type) return null;
+            return (
+              <Tr key={name}>
+                <Td>{name}</Td>
+                <Td>{getPropType(prop, Tooltip)}</Td>
+                <Td>{String(prop.required)}</Td>
+                {!prop.defaultValue ? (
+                  <Td>
+                    <em>-</em>
+                  </Td>
+                ) : (
+                  <Td>
+                    {prop.defaultValue.value === "''" ? (
+                      <em>[Empty String]</em>
+                    ) : (
+                      prop.defaultValue &&
+                      prop.defaultValue.value.replace(/'/g, '')
+                    )}
+                  </Td>
+                )}
+                {hasDescription && (
+                  <Td>{prop.description && prop.description}</Td>
+                )}
+              </Tr>
+            );
+          })}
+      </Tbody>
+    </Table>
+  );
+};

platform/docs/src/react-docgen-props-table/components/Table.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const Table = props => {
+  const { className, style, ...rest } = props;
+  return (
+    <div className={className}>
+      <table className={className} {...rest} />
+    </div>
+  );
+};

platform/docs/src/react-docgen-props-table/components/Tooltip.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactTooltip from 'react-tooltip';
+
+export const Tooltip = ({ text, children }) => {
+  const id = JSON.stringify(text);
+  return (
+    <React.Fragment>
+      <a data-tip data-for={id} href="#" onClick={ev => ev.preventDefault()}>
+        {children}
+      </a>
+
+      <ReactTooltip id={id} effect="solid">
+        {text}
+      </ReactTooltip>
+    </React.Fragment>
+  );
+};

platform/docs/src/react-docgen-props-table/get-prop-type.js

@@ -0,0 +1,23 @@
+import capitalize from 'capitalize'
+import get from 'lodash.get'
+import { humanize } from './humanize-prop'
+
+export const getPropType = (prop) => {
+  const propName = get(prop.flowType || prop.type, 'name')
+  if (!propName) return null
+
+  const isEnum = propName.startsWith('"') || propName === 'enum'
+  const name = capitalize(isEnum ? 'enum' : propName)
+  const value = get(prop, 'type.value')
+  if (!name) return null
+
+  if (
+    (isEnum && typeof value === 'string') ||
+    (!prop.flowType && !isEnum && !value) ||
+    (prop.flowType && !prop.flowType.elements)
+  ) {
+    return name
+  }
+
+  return prop.flowType ? humanize(prop.flowType) : humanize(prop.type)
+}

platform/docs/src/react-docgen-props-table/humanize-prop.js

@@ -0,0 +1,49 @@
+import capitalize from 'capitalize'
+
+const RE_OBJECTOF = /(?:React\.)?(?:PropTypes\.)?objectOf\((?:React\.)?(?:PropTypes\.)?(\w+)\)/
+
+const getTypeStr = (type) => {
+  switch (type.name.toLowerCase()) {
+    case 'instanceof':
+      return `Class(${type.value})`
+    case 'enum':
+      if (type.computed) return type.value
+      return type.value
+        ? type.value.map((v) => `${v.value}`).join(' │ ')
+        : type.raw
+    case 'union':
+      return type.value
+        ? type.value.map((t) => `${getTypeStr(t)}`).join(' │ ')
+        : type.raw
+    case 'array':
+      return type.raw
+    case 'arrayof':
+      return `Array<${getTypeStr(type.value)}>`
+    case 'custom':
+      if (type.raw.indexOf('function') !== -1 || type.raw.indexOf('=>') !== -1) {
+        return 'Custom(Function)'
+      } else if (type.raw.toLowerCase().indexOf('objectof') !== -1) {
+        const m = type.raw.match(RE_OBJECTOF)
+        if (m && m[1]) return `ObjectOf(${capitalize(m[1])})`
+        return 'ObjectOf'
+      }
+      return 'Custom'
+    case 'bool':
+      return 'Boolean'
+    case 'func':
+      return 'Function'
+    case 'shape':
+      const shape = type.value
+      const rst = {}
+
+      Object.keys(shape).forEach(key => {
+        rst[key] = getTypeStr(shape[key])
+      })
+
+      return JSON.stringify(rst, null, 2)
+    default:
+      return capitalize(type.name)
+  }
+}
+
+export const humanize = (type) => getTypeStr(type)

platform/docs/src/react-docgen-props-table/index.js

@@ -0,0 +1,2 @@
+import { PropsTable } from './PropsTable'
+export default PropsTable

platform/docs/tailwind.config.js

@@ -2,7 +2,7 @@ module.exports = {
   prefix: '',
   important: false,
   separator: ':',
-  purge: ['./docs/**/*.jsx', './docs/**/*.mdx'],
+  //purge: ['./docs/**/*.jsx', './docs/**/*.mdx'],
   theme: {
     screens: {
       sm: '640px',