From 09469e6ac5f58c96b80536753c2d60f8049a35b6 Mon Sep 17 00:00:00 2001 From: Erik Ziegler Date: Tue, 13 Jul 2021 23:48:16 +0200 Subject: [PATCH] wip on switching from docz to docusaurus --- .webpack/webpack.base.js | 4 + package.json | 7 +- platform/core/.webpack/webpack.prod.js | 2 +- .../components}/AboutModal.mdx | 13 +- .../component-library/components}/Button.mdx | 38 +- .../components}/ButtonGroup.mdx | 20 +- .../components}/CinePlayer.mdx | 16 +- .../components}/ContextMenu.mdx | 14 +- .../components}/DateRange.mdx | 15 +- .../component-library/components/Dropdown.mdx | 70 + .../components}/EmptyStudies.mdx | 14 +- .../components}/ErrorBoundary.mdx | 12 +- .../components/ExpandableToolbarButton.mdx | 90 + .../component-library/components}/Input.mdx | 14 +- .../components}/InputDateRange.mdx | 17 +- .../components}/InputGroup.mdx | 15 +- .../components}/InputMultiSelect.mdx | 17 +- .../components}/InputText.mdx | 24 +- .../component-library/components}/Label.mdx | 14 +- .../component-library/components/ListMenu.mdx | 84 + .../components}/MeasurementTable.mdx | 17 +- .../component-library/components/NavBar.mdx | 30 + .../components}/Notification.mdx | 14 +- .../components}/SegmentationTable.mdx | 14 +- .../component-library/components}/Select.mdx | 16 +- .../components}/SidePanel.mdx | 12 +- .../components}/SplitButton.mdx | 13 +- .../components}/StudyBrowser.mdx | 22 +- .../components}/StudyItem.mdx | 15 +- .../components}/StudyListFilter.mdx | 17 +- .../components}/StudyListPagination.mdx | 19 +- .../components}/StudyListTable.mdx | 21 +- .../component-library/components}/Table.mdx | 48 +- .../components}/Thumbnail.mdx.todo | 6 +- .../components}/ThumbnailNoImage.mdx.todo | 6 +- .../components}/ThumbnailTracked.mdx.todo | 6 +- .../components/ToolbarButton.mdx | 46 + .../component-library/components/Tooltip.mdx | 40 + .../components}/TooltipClipboard.mdx | 16 +- .../components}/Typography.mdx | 12 +- .../component-library/components/Viewport.mdx | 55 + .../components}/ViewportActionBar.mdx | 23 +- .../components}/ViewportGrid.mdx | 13 +- .../components}/ViewportPane.mdx.todo | 9 +- .../components}/WindowLevelMenuItem.mdx | 13 +- .../component-library/components}/icon.mdx | 18 +- .../context-providers}/ModalProvider.mdx | 4 +- .../ViewportDialogProvider.mdx | 24 +- .../ViewportDialogProvider.mdx.todo | 178 + .../docs/component-library/pages}/Colors.mdx | 9 +- .../pages/getting-started.mdx | 13 +- .../views}/StudyList.mdx.todo | 7 +- .../component-library/views}/Viewer.mdx.todo | 12 +- platform/docs/docusaurus.config.js | 46 +- platform/docs/package.json | 1 + platform/docs/pluginOHIFWebpackConfig.js | 25 + .../docs/src/theme/ReactLiveScope/index.js | 18 + platform/ui/.gitignore | 1 - platform/ui/.webpack/webpack.dev.js | 8 + platform/ui/.webpack/webpack.prod.js | 22 +- platform/ui/README.md | 18 - platform/ui/doczrc.js | 18 - platform/ui/gatsby-config.js | 8 - platform/ui/gatsby-node.js | 43 - platform/ui/netlify.toml | 40 - platform/ui/package.json | 30 +- .../src/components/AboutModal/AboutModal.jsx | 14 +- .../src/components/CinePlayer/CinePlayer.jsx | 2 +- .../ui/src/components/Dropdown/Dropdown.mdx | 68 - .../ExpandableToolbarButton.mdx | 58 - platform/ui/src/components/Header/Header.jsx | 2 +- .../HotkeysPreferences/HotkeysPreferences.jsx | 2 +- .../ui/src/components/ListMenu/ListMenu.mdx | 52 - platform/ui/src/components/Modal/Modal.jsx | 4 +- platform/ui/src/components/NavBar/NavBar.mdx | 30 - .../components/Snackbar/SnackbarContainer.jsx | 4 +- .../components/SplitButton/SplitButton.jsx | 2 +- .../StudyListFilter/StudyListFilter.jsx | 2 +- .../components/ThemeWrapper/ThemeWrapper.js | 2 +- .../ToolbarButton/ToolbarButton.mdx | 44 - .../ui/src/components/Tooltip/Tooltip.mdx | 40 - .../UserPreferences/UserPreferences.jsx | 2 +- .../ui/src/components/Viewport/Viewport.mdx | 55 - .../src/contextProviders/SnackbarProvider.jsx | 2 +- .../components/Header/index.js | 69 - .../components/Layout/index.js | 52 - .../components/NavGroup/index.js | 56 - .../components/Sidebar/index.js | 141 - platform/ui/src/gatsby-theme-docz/theme.css | 24 - platform/ui/src/gatsby-theme-docz/wrapper.js | 13 - platform/ui/{ => src}/index.js | 8 +- .../src/{gatsby-theme-docz => }/tailwind.css | 0 platform/ui/src/views/StudyList/StudyList.js | 8 +- platform/ui/tailwind.config.js | 2 +- platform/viewer/.webpack/webpack.pwa.js | 6 - platform/viewer/package.json | 6 +- yarn.lock | 6321 ++--------------- 97 files changed, 1505 insertions(+), 7132 deletions(-) rename platform/{ui/src/components/AboutModal => docs/docs/component-library/components}/AboutModal.mdx (65%) rename platform/{ui/src/components/Button => docs/docs/component-library/components}/Button.mdx (96%) rename platform/{ui/src/components/ButtonGroup => docs/docs/component-library/components}/ButtonGroup.mdx (91%) rename platform/{ui/src/components/CinePlayer => docs/docs/component-library/components}/CinePlayer.mdx (87%) rename platform/{ui/src/components/ContextMenu => docs/docs/component-library/components}/ContextMenu.mdx (85%) rename platform/{ui/src/components/DateRange => docs/docs/component-library/components}/DateRange.mdx (85%) create mode 100644 platform/docs/docs/component-library/components/Dropdown.mdx rename platform/{ui/src/components/EmptyStudies => docs/docs/component-library/components}/EmptyStudies.mdx (65%) rename platform/{ui/src/components/ErrorBoundary => docs/docs/component-library/components}/ErrorBoundary.mdx (88%) create mode 100644 platform/docs/docs/component-library/components/ExpandableToolbarButton.mdx rename platform/{ui/src/components/Input => docs/docs/component-library/components}/Input.mdx (81%) rename platform/{ui/src/components/InputDateRange => docs/docs/component-library/components}/InputDateRange.mdx (77%) rename platform/{ui/src/components/InputGroup => docs/docs/component-library/components}/InputGroup.mdx (93%) rename platform/{ui/src/components/InputMultiSelect => docs/docs/component-library/components}/InputMultiSelect.mdx (83%) rename platform/{ui/src/components/InputText => docs/docs/component-library/components}/InputText.mdx (70%) rename platform/{ui/src/components/Label => docs/docs/component-library/components}/Label.mdx (70%) create mode 100644 platform/docs/docs/component-library/components/ListMenu.mdx rename platform/{ui/src/components/MeasurementTable => docs/docs/component-library/components}/MeasurementTable.mdx (78%) create mode 100644 platform/docs/docs/component-library/components/NavBar.mdx rename platform/{ui/src/components/Notification => docs/docs/component-library/components}/Notification.mdx (89%) rename platform/{ui/src/components/SegmentationTable => docs/docs/component-library/components}/SegmentationTable.mdx (79%) rename platform/{ui/src/components/Select => docs/docs/component-library/components}/Select.mdx (87%) rename platform/{ui/src/components/SidePanel => docs/docs/component-library/components}/SidePanel.mdx (92%) rename platform/{ui/src/components/SplitButton => docs/docs/component-library/components}/SplitButton.mdx (96%) rename platform/{ui/src/components/StudyBrowser => docs/docs/component-library/components}/StudyBrowser.mdx (90%) rename platform/{ui/src/components/StudyItem => docs/docs/component-library/components}/StudyItem.mdx (87%) rename platform/{ui/src/components/StudyListFilter => docs/docs/component-library/components}/StudyListFilter.mdx (93%) rename platform/{ui/src/components/StudyListPagination => docs/docs/component-library/components}/StudyListPagination.mdx (76%) rename platform/{ui/src/components/StudyListTable => docs/docs/component-library/components}/StudyListTable.mdx (80%) rename platform/{ui/src/components/Table => docs/docs/component-library/components}/Table.mdx (58%) rename platform/{ui/src/components/Thumbnail => docs/docs/component-library/components}/Thumbnail.mdx.todo (91%) rename platform/{ui/src/components/ThumbnailNoImage => docs/docs/component-library/components}/ThumbnailNoImage.mdx.todo (90%) rename platform/{ui/src/components/ThumbnailTracked => docs/docs/component-library/components}/ThumbnailTracked.mdx.todo (91%) create mode 100644 platform/docs/docs/component-library/components/ToolbarButton.mdx create mode 100644 platform/docs/docs/component-library/components/Tooltip.mdx rename platform/{ui/src/components/TooltipClipboard => docs/docs/component-library/components}/TooltipClipboard.mdx (57%) rename platform/{ui/src/components/Typography => docs/docs/component-library/components}/Typography.mdx (92%) create mode 100644 platform/docs/docs/component-library/components/Viewport.mdx rename platform/{ui/src/components/ViewportActionBar => docs/docs/component-library/components}/ViewportActionBar.mdx (94%) rename platform/{ui/src/components/ViewportGrid => docs/docs/component-library/components}/ViewportGrid.mdx (71%) rename platform/{ui/src/components/ViewportPane => docs/docs/component-library/components}/ViewportPane.mdx.todo (75%) rename platform/{ui/src/components/WindowLevelMenuItem => docs/docs/component-library/components}/WindowLevelMenuItem.mdx (86%) rename platform/{ui/src/components/Icon => docs/docs/component-library/components}/icon.mdx (79%) rename platform/{ui/src/contextProviders => docs/docs/component-library/context-providers}/ModalProvider.mdx (93%) rename platform/{ui/src/contextProviders => docs/docs/component-library/context-providers}/ViewportDialogProvider.mdx (93%) create mode 100644 platform/docs/docs/component-library/context-providers/ViewportDialogProvider.mdx.todo rename platform/{ui/src/pages/Colors => docs/docs/component-library/pages}/Colors.mdx (93%) rename platform/{ui/src => docs/docs/component-library}/pages/getting-started.mdx (72%) rename platform/{ui/src/views/StudyList => docs/docs/component-library/views}/StudyList.mdx.todo (99%) rename platform/{ui/src/views/Viewer => docs/docs/component-library/views}/Viewer.mdx.todo (96%) create mode 100644 platform/docs/pluginOHIFWebpackConfig.js create mode 100644 platform/docs/src/theme/ReactLiveScope/index.js create mode 100644 platform/ui/.webpack/webpack.dev.js delete mode 100644 platform/ui/doczrc.js delete mode 100644 platform/ui/gatsby-config.js delete mode 100644 platform/ui/gatsby-node.js delete mode 100644 platform/ui/netlify.toml delete mode 100644 platform/ui/src/components/Dropdown/Dropdown.mdx delete mode 100644 platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.mdx delete mode 100644 platform/ui/src/components/ListMenu/ListMenu.mdx delete mode 100644 platform/ui/src/components/NavBar/NavBar.mdx delete mode 100644 platform/ui/src/components/ToolbarButton/ToolbarButton.mdx delete mode 100644 platform/ui/src/components/Tooltip/Tooltip.mdx delete mode 100644 platform/ui/src/components/Viewport/Viewport.mdx delete mode 100644 platform/ui/src/gatsby-theme-docz/components/Header/index.js delete mode 100644 platform/ui/src/gatsby-theme-docz/components/Layout/index.js delete mode 100644 platform/ui/src/gatsby-theme-docz/components/NavGroup/index.js delete mode 100644 platform/ui/src/gatsby-theme-docz/components/Sidebar/index.js delete mode 100644 platform/ui/src/gatsby-theme-docz/theme.css delete mode 100644 platform/ui/src/gatsby-theme-docz/wrapper.js rename platform/ui/{ => src}/index.js (91%) rename platform/ui/src/{gatsby-theme-docz => }/tailwind.css (100%) 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