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

2021-07-15 00:04:36 +02:00
1 parent 97805df68c
commit d6877cfcf9
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -81,5 +81,4 @@ import { SidePanel } from '@ohif/ui';

 ## Properties

-<Props of={SidePanel} />
-````
+(<ComponentPropsTable componentName={'SidePanel'} />)````
@@ -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'} />
@@ -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'} />
@@ -43,5 +43,5 @@ function() {

 ## Properties

-<Props of={StudyItem} />
+<ComponentPropsTable componentName={'StudyItem'} />
 ```
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
 ```
@@ -37,4 +37,4 @@ import { Thumbnail } from '@ohif/ui';

 ## Properties

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

 ## Properties

-<Props of={ThumbnailNoImage} />
+<ComponentPropsTable componentName={'ThumbnailNoImage'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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'} />
@@ -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.
-
-```
-
-```