diff --git a/.webpack/webpack.base.js b/.webpack/webpack.base.js index 46efff112..9f960dbfc 100644 --- a/.webpack/webpack.base.js +++ b/.webpack/webpack.base.js @@ -9,6 +9,8 @@ const loadShadersRule = require('./rules/loadShaders.js'); const loadWebWorkersRule = require('./rules/loadWebWorkers.js'); const transpileJavaScriptRule = require('./rules/transpileJavaScript.js'); // ~~ PLUGINS +const BundleAnalyzerPlugin = require('webpack-bundle-analyzer') + .BundleAnalyzerPlugin; const TerserJSPlugin = require('terser-webpack-plugin'); // ~~ ENV VARS const NODE_ENV = process.env.NODE_ENV; @@ -112,6 +114,8 @@ module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => { process.env.REACT_APP_I18N_DEBUG || '' ), }), + // Uncomment to generate bundle analyzer + // new BundleAnalyzerPlugin(), ], // Fix: https://github.com/webpack-contrib/css-loader/issues/447#issuecomment-285598881 // For issue in cornerstone-wado-image-loader diff --git a/package.json b/package.json index 0d3ae1050..f8e3f295d 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "docs:preview": "lerna run docs:preview --stream", "docs:publish": "chmod +x ./build-and-publish-docs.sh && ./build-and-publish-docs.sh", "release": "yarn run lerna:version && yarn run lerna:publish", + "lerna:clean": "lerna clean", "lerna:cache": "./netlify-lerna-cache.sh", "lerna:restore": "./netlify-lerna-restore.sh", "lerna:version": "npx lerna version prerelease --force-publish", @@ -49,13 +50,15 @@ "@babel/runtime": "7.7.6", "core-js": "^3.2.1", "cornerstone-core": "2.3.0", - "react": "17.0.2", - "react-dom": "17.0.2", "shader-loader": "^1.3.1", "webpack": "^5.43.0", "worker-loader": "^3.0.8", "wslink": "^0.1.8" }, + "peerDependencies": { + "react": "17.0.2", + "react-dom": "17.0.2" + }, "devDependencies": { "@babel/core": "^7.5.0", "@babel/plugin-proposal-class-properties": "^7.5.0", diff --git a/platform/core/.webpack/webpack.prod.js b/platform/core/.webpack/webpack.prod.js index a5c1eec77..017946da0 100644 --- a/platform/core/.webpack/webpack.prod.js +++ b/platform/core/.webpack/webpack.prod.js @@ -1,6 +1,6 @@ const merge = require('webpack-merge'); const path = require('path'); -const webpackCommon = require('./../../../.webpack/webpack.commonjs.js'); +const webpackCommon = require('./../../../.webpack/webpack.base.js'); const pkg = require('./../package.json'); const ROOT_DIR = path.join(__dirname, './..'); diff --git a/platform/ui/src/components/AboutModal/AboutModal.mdx b/platform/docs/docs/component-library/components/AboutModal.mdx similarity index 65% rename from platform/ui/src/components/AboutModal/AboutModal.mdx rename to platform/docs/docs/component-library/components/AboutModal.mdx index 917e20e66..517937988 100644 --- a/platform/ui/src/components/AboutModal/AboutModal.mdx +++ b/platform/docs/docs/component-library/components/AboutModal.mdx @@ -4,7 +4,6 @@ menu: General route: components/aboutModal --- -import { Playground, Props } from 'docz'; import { AboutModal } from '@ohif/ui'; # AboutModal @@ -19,12 +18,10 @@ import { AboutModal } from '@ohif/ui'; ## Usage - -
- -
-
+```jsx live +
+ +
+``` ## Properties - - diff --git a/platform/ui/src/components/Button/Button.mdx b/platform/docs/docs/component-library/components/Button.mdx similarity index 96% rename from platform/ui/src/components/Button/Button.mdx rename to platform/docs/docs/component-library/components/Button.mdx index de867ef58..f531ec03f 100644 --- a/platform/ui/src/components/Button/Button.mdx +++ b/platform/docs/docs/component-library/components/Button.mdx @@ -4,8 +4,7 @@ menu: General route: components/button --- -import { Playground, Props } from 'docz'; -import { Button, IconButton, Icon } from '../'; +import { Button, IconButton, Icon } from '@ohif/ui'; # Button @@ -19,7 +18,7 @@ import { Button } from '@ohif/ui'; ## Outlined Buttons - +````jsx live
-
+``` ## Contained Buttons - +```jsx live
-
+``` ## Text Buttons - +```jsx live
-
+``` ## Rounded Buttons - +```jsx live
-
+``` ## Sizes - +```jsx live
-
+``` ## Buttons with icons - +```jsx live
-
+``` ## Icon Buttons @@ -339,9 +338,9 @@ Icon buttons are generally used in toolbars. ```javascript import { IconButton } from '@ohif/ui'; -``` +```` - +````jsx live
@@ -388,9 +387,9 @@ import { IconButton } from '@ohif/ui';
-
+``` - +```jsx live
@@ -437,8 +436,9 @@ import { IconButton } from '@ohif/ui';
-
+``` ## Properties +```` diff --git a/platform/ui/src/components/ButtonGroup/ButtonGroup.mdx b/platform/docs/docs/component-library/components/ButtonGroup.mdx similarity index 91% rename from platform/ui/src/components/ButtonGroup/ButtonGroup.mdx rename to platform/docs/docs/component-library/components/ButtonGroup.mdx index a24705208..9fac11314 100644 --- a/platform/ui/src/components/ButtonGroup/ButtonGroup.mdx +++ b/platform/docs/docs/component-library/components/ButtonGroup.mdx @@ -4,8 +4,7 @@ menu: General route: components/buttonGroup --- -import { Playground, Props } from 'docz'; -import { ButtonGroup, Button, IconButton, Icon } from '../'; +import { ButtonGroup, Button, IconButton, Icon } from '@ohif/ui'; # ButtonGroup @@ -19,7 +18,7 @@ import { ButtonGroup } from '@ohif/ui'; ## Basic button group - +````jsx live
@@ -37,11 +36,11 @@ import { ButtonGroup } from '@ohif/ui';
-
+``` ## Group sizes and colorss - +```jsx live
@@ -59,11 +58,11 @@ import { ButtonGroup } from '@ohif/ui';
-
+``` ## Group orientation - +```jsx live
@@ -91,11 +90,11 @@ import { ButtonGroup } from '@ohif/ui';
-
+``` ## Split Button - +```jsx live
@@ -104,8 +103,9 @@ import { ButtonGroup } from '@ohif/ui';
-
+``` ## Properties +```` diff --git a/platform/ui/src/components/CinePlayer/CinePlayer.mdx b/platform/docs/docs/component-library/components/CinePlayer.mdx similarity index 87% rename from platform/ui/src/components/CinePlayer/CinePlayer.mdx rename to platform/docs/docs/component-library/components/CinePlayer.mdx index 5abc93249..b1e9fd12b 100644 --- a/platform/ui/src/components/CinePlayer/CinePlayer.mdx +++ b/platform/docs/docs/component-library/components/CinePlayer.mdx @@ -5,7 +5,7 @@ route: components/CinePlayer --- import { useState } from 'react'; -import { Playground, Props } from 'docz'; + import { CinePlayer } from '@ohif/ui'; # Input Text @@ -18,8 +18,9 @@ import { CinePlayer } from '@ohif/ui'; ## Basic usage - - {() => { +```jsx live +{ + () => { return (
@@ -32,11 +33,12 @@ import { CinePlayer } from '@ohif/ui'; />
- ) - }} - -
+ ); + }; +} +``` ## Properties +``` diff --git a/platform/ui/src/components/ContextMenu/ContextMenu.mdx b/platform/docs/docs/component-library/components/ContextMenu.mdx similarity index 85% rename from platform/ui/src/components/ContextMenu/ContextMenu.mdx rename to platform/docs/docs/component-library/components/ContextMenu.mdx index 254b2e720..87fc44053 100644 --- a/platform/ui/src/components/ContextMenu/ContextMenu.mdx +++ b/platform/docs/docs/component-library/components/ContextMenu.mdx @@ -4,8 +4,7 @@ menu: General route: components/contextMenu --- -import { Playground, Props } from 'docz'; -import { ContextMenu } from '../'; +import { ContextMenu } from '@ohif/ui'; # Context Menu @@ -17,8 +16,9 @@ import { ContextMenu } from '../'; import { ContextMenu } from '@ohif/ui'; ``` - - {() => { +```jsx live +{ + () => { const items = [ { label: 'Delete measurement', @@ -41,9 +41,11 @@ import { ContextMenu } from '@ohif/ui'; ); - }} - + }; +} +``` ## Properties +``` diff --git a/platform/ui/src/components/DateRange/DateRange.mdx b/platform/docs/docs/component-library/components/DateRange.mdx similarity index 85% rename from platform/ui/src/components/DateRange/DateRange.mdx rename to platform/docs/docs/component-library/components/DateRange.mdx index f4fd66350..832cd9bd8 100644 --- a/platform/ui/src/components/DateRange/DateRange.mdx +++ b/platform/docs/docs/component-library/components/DateRange.mdx @@ -5,8 +5,8 @@ route: components/date-range --- import { useState } from 'react'; -import { Playground, Props } from 'docz'; -import { DateRange } from '../'; + +import { DateRange } from '@ohif/ui'; # Date Range @@ -20,8 +20,9 @@ import { DateRange } from '@ohif/ui'; ## Date Range - - {() => { +```jsx live +{ + () => { const [dates, setDates] = useState({ startDate: null, endDate: null, @@ -37,9 +38,11 @@ import { DateRange } from '@ohif/ui'; /> ); - }} - + }; +} +``` ## Properties +``` diff --git a/platform/docs/docs/component-library/components/Dropdown.mdx b/platform/docs/docs/component-library/components/Dropdown.mdx new file mode 100644 index 000000000..c75f01fff --- /dev/null +++ b/platform/docs/docs/component-library/components/Dropdown.mdx @@ -0,0 +1,70 @@ +--- +name: Dropdown +menu: General +route: components/dropdown +--- + +import { Dropdown, IconButton, Icon } from '@ohif/ui'; + +# Dropdown + +This component is used when there are more than a few options to choose from. By +hovering or clicking on the trigger, a dropdown menu will appear, which allows +you to choose an option and execute the relevant action. + +## Import + +```javascript +import { Dropdown } from '@ohif/ui'; +``` + +```jsx live +{ + () => { + const handleClick = () => { + alert('Clicked'); + }; + return ( +
+ + + + + + + + +
+ ); + }; +} +``` + +## Properties + + +``` diff --git a/platform/ui/src/components/EmptyStudies/EmptyStudies.mdx b/platform/docs/docs/component-library/components/EmptyStudies.mdx similarity index 65% rename from platform/ui/src/components/EmptyStudies/EmptyStudies.mdx rename to platform/docs/docs/component-library/components/EmptyStudies.mdx index 8570c5ded..57541d6c7 100644 --- a/platform/ui/src/components/EmptyStudies/EmptyStudies.mdx +++ b/platform/docs/docs/component-library/components/EmptyStudies.mdx @@ -4,8 +4,7 @@ menu: Data Display route: components/empty-studies --- -import { Playground, Props } from 'docz'; -import { EmptyStudies } from '../'; +import { EmptyStudies } from '@ohif/ui'; # Empty Studies @@ -19,12 +18,13 @@ import { EmptyStudies } from '@ohif/ui'; ## Basic usage - -
- -
-
+```jsx live +
+ +
+``` ## Properties +``` diff --git a/platform/ui/src/components/ErrorBoundary/ErrorBoundary.mdx b/platform/docs/docs/component-library/components/ErrorBoundary.mdx similarity index 88% rename from platform/ui/src/components/ErrorBoundary/ErrorBoundary.mdx rename to platform/docs/docs/component-library/components/ErrorBoundary.mdx index f3136d1cb..792fe1004 100644 --- a/platform/ui/src/components/ErrorBoundary/ErrorBoundary.mdx +++ b/platform/docs/docs/component-library/components/ErrorBoundary.mdx @@ -4,8 +4,7 @@ menu: Data Display route: components/errorBoundary --- -import { Playground, Props } from 'docz'; -import { ErrorBoundary } from '../'; +import { ErrorBoundary } from '@ohif/ui'; # Error Boundary @@ -19,7 +18,7 @@ import { ErrorBoundary } from '@ohif/ui'; ## Basic usage - +````jsx live
{() => { @@ -28,11 +27,11 @@ import { ErrorBoundary } from '@ohif/ui'; }}
-
+``` ## Custom error fallback - +```jsx live {() => { const CustomFallback = ({ error, componentStack, resetErrorBoundary }) => { return ( @@ -52,8 +51,9 @@ import { ErrorBoundary } from '@ohif/ui'; ); }} - +``` ## Properties +```` diff --git a/platform/docs/docs/component-library/components/ExpandableToolbarButton.mdx b/platform/docs/docs/component-library/components/ExpandableToolbarButton.mdx new file mode 100644 index 000000000..92bc71e69 --- /dev/null +++ b/platform/docs/docs/component-library/components/ExpandableToolbarButton.mdx @@ -0,0 +1,90 @@ +--- +name: Expandable Toolbar Button +menu: General +route: components/expandableToolbarButton +--- + +import { useState } from 'react'; + +import { ExpandableToolbarButton, ListMenu } from '@ohif/ui'; + +# Toolbar Button + +Expandable Toolbar Buttons are used to populate the Toolbar. + +## Import + +```javascript +import { ExpandableToolbarButton, ListMenu } from '@ohif/ui'; +``` + +```jsx live +{ + () => { + const props = { + content: ListMenu, + contentProps: { + options: [ + { + value: 'windowLevelPreset1', + title: 'Soft tissue', + subtitle: '400 / 40', + }, + { + value: 'windowLevelPreset2', + title: 'Lung', + subtitle: '1500 / -600', + }, + { value: 'windowLevelPreset3', title: 'Liver', subtitle: '150 / 90' }, + { value: 'windowLevelPreset4', title: 'Bone', subtitle: '80 / 40' }, + { + value: 'windowLevelPreset5', + title: 'Brain', + subtitle: '2500 / 480', + }, + ], + renderer: ({ title, subtitle, isActive, index }) => ( + <> +
+ + {title} + + + {subtitle} + +
+ + {index + 1} + + + ), + }, + }; + return ( +
+ +
+ ); + }; +} +``` + +## Properties + + +``` diff --git a/platform/ui/src/components/Input/Input.mdx b/platform/docs/docs/component-library/components/Input.mdx similarity index 81% rename from platform/ui/src/components/Input/Input.mdx rename to platform/docs/docs/component-library/components/Input.mdx index 53916359e..51dda1bfb 100644 --- a/platform/ui/src/components/Input/Input.mdx +++ b/platform/docs/docs/component-library/components/Input.mdx @@ -4,8 +4,7 @@ menu: Form route: components/input --- -import { Playground, Props } from 'docz'; -import { Input } from '../'; +import { Input } from '@ohif/ui'; # Input @@ -17,8 +16,9 @@ import { Input } from '@ohif/ui'; ## Basic usage - - {() => { +```jsx live +{ + () => { const [inputValue, setInputValue] = React.useState(''); return (
@@ -31,9 +31,11 @@ import { Input } from '@ohif/ui';
); - }} -
+ }; +} +``` ## Properties +``` diff --git a/platform/ui/src/components/InputDateRange/InputDateRange.mdx b/platform/docs/docs/component-library/components/InputDateRange.mdx similarity index 77% rename from platform/ui/src/components/InputDateRange/InputDateRange.mdx rename to platform/docs/docs/component-library/components/InputDateRange.mdx index 14795cf40..5dd4510ed 100644 --- a/platform/ui/src/components/InputDateRange/InputDateRange.mdx +++ b/platform/docs/docs/component-library/components/InputDateRange.mdx @@ -5,8 +5,8 @@ route: components/InputDateRange --- import { useState } from 'react'; -import { Playground, Props } from 'docz'; -import { InputDateRange } from '../'; + +import { InputDateRange } from '@ohif/ui'; # Input Date Range @@ -18,8 +18,9 @@ import { InputDateRange } from '@ohif/ui'; ## Basic usage - - {() => { +```jsx live +{ + () => { const [dates, setDates] = useState({ startDate: null, endDate: null, @@ -30,14 +31,16 @@ import { InputDateRange } from '@ohif/ui'; setDates(dates)} + onChange={dates => setDates(dates)} /> ); - }} - + }; +} +``` ## Properties +``` diff --git a/platform/ui/src/components/InputGroup/InputGroup.mdx b/platform/docs/docs/component-library/components/InputGroup.mdx similarity index 93% rename from platform/ui/src/components/InputGroup/InputGroup.mdx rename to platform/docs/docs/component-library/components/InputGroup.mdx index cf6a38538..82c846286 100644 --- a/platform/ui/src/components/InputGroup/InputGroup.mdx +++ b/platform/docs/docs/component-library/components/InputGroup.mdx @@ -5,8 +5,8 @@ route: components/InputGroup --- import { useState } from 'react'; -import { Playground, Props } from 'docz'; -import { InputGroup } from '../'; + +import { InputGroup } from '@ohif/ui'; # Input Group @@ -18,8 +18,9 @@ import { InputGroup } from '@ohif/ui'; ## Basic usage - - {() => { +```jsx live +{ + () => { const [filterValues, setFilterValues] = useState({ patient: '', studyDate: { @@ -82,9 +83,11 @@ import { InputGroup } from '@ohif/ui'; /> ); - }} - + }; +} +``` ## Properties +``` diff --git a/platform/ui/src/components/InputMultiSelect/InputMultiSelect.mdx b/platform/docs/docs/component-library/components/InputMultiSelect.mdx similarity index 83% rename from platform/ui/src/components/InputMultiSelect/InputMultiSelect.mdx rename to platform/docs/docs/component-library/components/InputMultiSelect.mdx index 3142c946a..151bb7b63 100644 --- a/platform/ui/src/components/InputMultiSelect/InputMultiSelect.mdx +++ b/platform/docs/docs/component-library/components/InputMultiSelect.mdx @@ -5,8 +5,8 @@ route: components/InputMultiSelect --- import { useState } from 'react'; -import { Playground, Props } from 'docz'; -import { InputMultiSelect } from '../'; + +import { InputMultiSelect } from '@ohif/ui'; # Input Multi Select @@ -18,8 +18,9 @@ import { InputMultiSelect } from '@ohif/ui'; ## Basic usage - - {() => { +```jsx live +{ + () => { const [values, setValues] = useState([]); return (
@@ -33,16 +34,18 @@ import { InputMultiSelect } from '@ohif/ui'; { value: 'SR', label: 'SR' }, ]} value={values} - onChange={(values) => { + onChange={values => { setValues(values); }} />
); - }} -
+ }; +} +``` ## Properties +``` diff --git a/platform/ui/src/components/InputText/InputText.mdx b/platform/docs/docs/component-library/components/InputText.mdx similarity index 70% rename from platform/ui/src/components/InputText/InputText.mdx rename to platform/docs/docs/component-library/components/InputText.mdx index fe0398866..0f8ad99f4 100644 --- a/platform/ui/src/components/InputText/InputText.mdx +++ b/platform/docs/docs/component-library/components/InputText.mdx @@ -5,8 +5,8 @@ route: components/InputText --- import { useState } from 'react'; -import { Playground, Props } from 'docz'; -import { InputText } from '../'; + +import { InputText } from '@ohif/ui'; # Input Text @@ -18,24 +18,28 @@ import { InputText } from '@ohif/ui'; ## Basic usage - - {() => { +```jsx live +{ + () => { const [text, setText] = useState(''); return (
{setText(value)}} + onChange={value => { + setText(value); + }} />
- ) - }} - -
+ ); + }; +} +``` ## Properties +``` diff --git a/platform/ui/src/components/Label/Label.mdx b/platform/docs/docs/component-library/components/Label.mdx similarity index 70% rename from platform/ui/src/components/Label/Label.mdx rename to platform/docs/docs/component-library/components/Label.mdx index 6c8f04330..6481100b7 100644 --- a/platform/ui/src/components/Label/Label.mdx +++ b/platform/docs/docs/component-library/components/Label.mdx @@ -4,8 +4,7 @@ menu: Form route: components/label --- -import { Playground, Props } from 'docz'; -import { Label } from '../'; +import { Label } from '@ohif/ui'; # Label @@ -17,16 +16,19 @@ import { Label } from '@ohif/ui'; ## Basic usage - - {() => { +```jsx live +{ + () => { return (
); - }} -
+ }; +} +``` ## Properties +``` diff --git a/platform/docs/docs/component-library/components/ListMenu.mdx b/platform/docs/docs/component-library/components/ListMenu.mdx new file mode 100644 index 000000000..2a3d647b8 --- /dev/null +++ b/platform/docs/docs/component-library/components/ListMenu.mdx @@ -0,0 +1,84 @@ +--- +name: List Menu +menu: General +route: components/listMenu +--- + +import { useState } from 'react'; + +import { ListMenu, ToolbarButton } from '@ohif/ui'; + +# List Menu + +List Menus are used to populate expandable Toolbar. + +## Import + +```javascript +import { ListMenu, ToolbarButton } from '@ohif/ui'; +``` + +```jsx live +{ + () => { + return ( + ( + <> +
+ + {title} + + + {subtitle} + +
+ + {index + 1} + + + )} + /> + ); + }; +} +``` + +## Properties + + +``` diff --git a/platform/ui/src/components/MeasurementTable/MeasurementTable.mdx b/platform/docs/docs/component-library/components/MeasurementTable.mdx similarity index 78% rename from platform/ui/src/components/MeasurementTable/MeasurementTable.mdx rename to platform/docs/docs/component-library/components/MeasurementTable.mdx index ce837554d..85cc77a79 100644 --- a/platform/ui/src/components/MeasurementTable/MeasurementTable.mdx +++ b/platform/docs/docs/component-library/components/MeasurementTable.mdx @@ -5,8 +5,8 @@ route: components/measurementTable --- import { useState } from 'react'; -import { Playground, Props } from 'docz'; -import { MeasurementTable } from '../'; + +import { MeasurementTable } from '@ohif/ui'; # Measurement Table @@ -18,7 +18,7 @@ import { MeasurementTable } from '@ohif/ui'; ## Basic usage - +````jsx live {() => { const [activeMeasurementItem, setActiveMeasurementItem] = useState(null); const measurementTableData = { @@ -30,8 +30,8 @@ import { MeasurementTable } from '@ohif/ui'; displayText: ['24.0 x 24.0 mm (S:4, I:22)'], isActive: activeMeasurementItem === i + 1, })), - onClick: (id) => setActiveMeasurementItem((s) => (s === id ? null : id)), - onEdit: (id) => alert(`Edit: ${id}`), + onClick: id => setActiveMeasurementItem(s => (s === id ? null : id)), + onEdit: id => alert(`Edit: ${id}`), }; return (
@@ -39,11 +39,11 @@ import { MeasurementTable } from '@ohif/ui';
); }} -
+``` ## Empty Data - +```jsx live {() => { return (
@@ -51,8 +51,9 @@ import { MeasurementTable } from '@ohif/ui';
); }} -
+``` ## Properties +```` diff --git a/platform/docs/docs/component-library/components/NavBar.mdx b/platform/docs/docs/component-library/components/NavBar.mdx new file mode 100644 index 000000000..034545ca7 --- /dev/null +++ b/platform/docs/docs/component-library/components/NavBar.mdx @@ -0,0 +1,30 @@ +--- +name: NavBar +menu: Navigation +route: components/navBar +--- + +import { NavBar, Typography } from '@ohif/ui'; + +# NavBar + +## Import + +```javascript +import { NavBar } from '@ohif/ui'; +``` + +## Basic usage + +```jsx live + + + Header content + + +``` + +## Properties + + +``` diff --git a/platform/ui/src/components/Notification/Notification.mdx b/platform/docs/docs/component-library/components/Notification.mdx similarity index 89% rename from platform/ui/src/components/Notification/Notification.mdx rename to platform/docs/docs/component-library/components/Notification.mdx index ac6422f49..2bfa3275c 100644 --- a/platform/ui/src/components/Notification/Notification.mdx +++ b/platform/docs/docs/component-library/components/Notification.mdx @@ -4,8 +4,7 @@ menu: Feedback route: components/notification --- -import { Playground, Props } from 'docz'; -import { Notification } from '../'; +import { Notification } from '@ohif/ui'; # Notification @@ -20,8 +19,9 @@ import { Notification } from '@ohif/ui'; ## Basic usage - - {() => { +```jsx live +{ + () => { return (
); - }} -
+ }; +} +``` ## Properties +``` diff --git a/platform/ui/src/components/SegmentationTable/SegmentationTable.mdx b/platform/docs/docs/component-library/components/SegmentationTable.mdx similarity index 79% rename from platform/ui/src/components/SegmentationTable/SegmentationTable.mdx rename to platform/docs/docs/component-library/components/SegmentationTable.mdx index b7ad75482..7aa9b66f3 100644 --- a/platform/ui/src/components/SegmentationTable/SegmentationTable.mdx +++ b/platform/docs/docs/component-library/components/SegmentationTable.mdx @@ -4,8 +4,7 @@ menu: Data Display route: components/segmentationTable --- -import { Playground, Props } from 'docz'; -import { SegmentationTable } from '../'; +import { SegmentationTable } from '@ohif/ui'; # Segmentation Table @@ -17,8 +16,9 @@ import { SegmentationTable } from '@ohif/ui'; ## Basic usage - - {() => { +```jsx live +{ + () => { const tableData = { title: 'Segments', amount: 12, @@ -29,9 +29,11 @@ import { SegmentationTable } from '@ohif/ui'; ); - }} - + }; +} +``` ## Properties +``` diff --git a/platform/ui/src/components/Select/Select.mdx b/platform/docs/docs/component-library/components/Select.mdx similarity index 87% rename from platform/ui/src/components/Select/Select.mdx rename to platform/docs/docs/component-library/components/Select.mdx index ad155469a..52843cee5 100644 --- a/platform/ui/src/components/Select/Select.mdx +++ b/platform/docs/docs/component-library/components/Select.mdx @@ -4,8 +4,7 @@ menu: Form route: components/select --- -import { Playground, Props } from 'docz'; -import { Select } from '../'; +import { Select } from '@ohif/ui'; # Select @@ -17,7 +16,7 @@ import { Select } from '@ohif/ui'; ## Basic usage - +````jsx live
-
+``` ## No Options - +```jsx live