wip on switching from docz to docusaurus

.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

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",

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, './..');

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
 
-<Playground>
+```jsx live
-  <div className="p-4">
+<div className="p-4">
-    <AboutModal />
+  <AboutModal />
-  </div>
+</div>
-</Playground>
+```
 
 ## Properties
-
-<Props of={AboutModal} />

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 '@ohif/ui';
-import { Button, IconButton, Icon } from '../';
 
 # Button
 
@@ -19,7 +18,7 @@ import { Button } from '@ohif/ui';
 
 ## Outlined Buttons
 
-<Playground>
+````jsx live
   <div className="p-4">
     <Button variant="outlined" className="m-1">
       Default
@@ -34,11 +33,11 @@ import { Button } from '@ohif/ui';
       White
     </Button>
   </div>
-</Playground>
+```
 
 ## Contained Buttons
 
-<Playground>
+```jsx live
   <div className="p-4">
     <Button variant="contained" className="m-1">
       Default
@@ -53,11 +52,11 @@ import { Button } from '@ohif/ui';
       White
     </Button>
   </div>
-</Playground>
+```
 
 ## Text Buttons
 
-<Playground>
+```jsx live
   <div className="p-4">
     <Button variant="text" className="m-1">
       Default
@@ -72,11 +71,11 @@ import { Button } from '@ohif/ui';
       White
     </Button>
   </div>
-</Playground>
+```
 
 ## Rounded Buttons
 
-<Playground>
+```jsx live
   <div className="p-4">
     <div className="mb-2">
       <Button variant="contained" rounded="none" className="m-1">
@@ -202,11 +201,11 @@ import { Button } from '@ohif/ui';
       </Button>
     </div>
   </div>
-</Playground>
+```
 
 ## Sizes
 
-<Playground>
+```jsx live
   <div className="p-4">
     <div>
       <Button variant="contained" size="small" className="m-1">
@@ -299,11 +298,11 @@ import { Button } from '@ohif/ui';
     </div>
 
 </div>
-</Playground>
+```
 
 ## Buttons with icons
 
-<Playground>
+```jsx live
   <div className="p-4 flex">
     <Button
       variant="contained"
@@ -331,7 +330,7 @@ import { Button } from '@ohif/ui';
       Download
     </Button>
   </div>
-</Playground>
+```
 
 ## Icon Buttons
 
@@ -339,9 +338,9 @@ Icon buttons are generally used in toolbars.
 
 ```javascript
 import { IconButton } from '@ohif/ui';
-```
+````
 
-<Playground>
+````jsx live
   <div className="p-4 flex flex-col items-center">
     <div className="">
       <IconButton className="m-2">
@@ -388,9 +387,9 @@ import { IconButton } from '@ohif/ui';
       </IconButton>
     </div>
   </div>
-</Playground>
+```
 
-<Playground>
+```jsx live
   <div className="p-4">
     <div className="">
       <IconButton className="m-2">
@@ -437,8 +436,9 @@ import { IconButton } from '@ohif/ui';
       </IconButton>
     </div>
   </div>
-</Playground>
+```
 
 ## Properties
 
 <Props of={Button} />
+````

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 '@ohif/ui';
-import { ButtonGroup, Button, IconButton, Icon } from '../';
 
 # ButtonGroup
 
@@ -19,7 +18,7 @@ import { ButtonGroup } from '@ohif/ui';
 
 ## Basic button group
 
-<Playground>
+````jsx live
   <div className="p-4 flex flex-col items-center">
     <ButtonGroup color="primary" className="m-2">
       <Button>One</Button>
@@ -37,11 +36,11 @@ import { ButtonGroup } from '@ohif/ui';
       <Button>Tree</Button>
     </ButtonGroup>
   </div>
-</Playground>
+```
 
 ## Group sizes and colorss
 
-<Playground>
+```jsx live
   <div className="p-4 flex flex-col items-center">
     <ButtonGroup color="default" size="small" className="m-2">
       <Button>One</Button>
@@ -59,11 +58,11 @@ import { ButtonGroup } from '@ohif/ui';
       <Button>Tree</Button>
     </ButtonGroup>
   </div>
-</Playground>
+```
 
 ## Group orientation
 
-<Playground>
+```jsx live
   <div className="p-4 flex flex-row justify-center">
     <ButtonGroup orientation="vertical" color="primary" className="m-2">
       <Button>One</Button>
@@ -91,11 +90,11 @@ import { ButtonGroup } from '@ohif/ui';
       <Button>Tree</Button>
     </ButtonGroup>
   </div>
-</Playground>
+```
 
 ## Split Button
 
-<Playground>
+```jsx live
   <div className="p-4 flex flex-col items-center">
     <ButtonGroup color="primary" className="m-2">
       <Button>Options</Button>
@@ -104,8 +103,9 @@ import { ButtonGroup } from '@ohif/ui';
       </IconButton>
     </ButtonGroup>
   </div>
-</Playground>
+```
 
 ## Properties
 
 <Props of={ButtonGroup} />
+````

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
 
-<Playground>
+```jsx live
-  {() => {
+{
+  () => {
     return (
       <div className="flex flex-col flex-1 p-4 items-center">
         <div className="w-56">
@@ -32,11 +33,12 @@ import { CinePlayer } from '@ohif/ui';
           />
         </div>
       </div>
-    )
+    );
-  }}
+  };
-
+}
-</Playground>
+```
 
 ## Properties
 
 <Props of={CinePlayer} />
+```

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 '@ohif/ui';
-import { ContextMenu } from '../';
 
 # Context Menu
 
@@ -17,8 +16,9 @@ import { ContextMenu } from '../';
 import { ContextMenu } from '@ohif/ui';
 ```
 
-<Playground>
+```jsx live
-  {() => {
+{
+  () => {
     const items = [
       {
         label: 'Delete measurement',
@@ -41,9 +41,11 @@ import { ContextMenu } from '@ohif/ui';
         <ContextMenu items={items} />
       </div>
     );
-  }}
+  };
-</Playground>
+}
+```
 
 ## Properties
 
 <Props of={ContextMenu} />
+```

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
 
-<Playground>
+```jsx live
-  {() => {
+{
+  () => {
     const [dates, setDates] = useState({
       startDate: null,
       endDate: null,
@@ -37,9 +38,11 @@ import { DateRange } from '@ohif/ui';
         />
       </div>
     );
-  }}
+  };
-</Playground>
+}
+```
 
 ## Properties
 
 <Props of={DateRange} />
+```

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 (
+      <div className="py-4">
+        <Dropdown
+          showDropdownIcon={false}
+          list={[
+            {
+              title: 'Option 1',
+              icon: 'info',
+              onClick: handleClick,
+            },
+            {
+              title: 'Option 2',
+              icon: 'settings',
+              onClick: handleClick,
+            },
+          ]}
+        >
+          <IconButton
+            variant="text"
+            color="inherit"
+            size="initial"
+            className="text-primary-active"
+          >
+            <Icon name="settings" />
+          </IconButton>
+          <IconButton
+            variant="text"
+            color="inherit"
+            size="initial"
+            className="text-primary-active"
+          >
+            <Icon name="chevron-down" />
+          </IconButton>
+        </Dropdown>
+      </div>
+    );
+  };
+}
+```
+
+## Properties
+
+<Props of={Dropdown} />
+```

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 '@ohif/ui';
-import { EmptyStudies } from '../';
 
 # Empty Studies
 
@@ -19,12 +18,13 @@ import { EmptyStudies } from '@ohif/ui';
 
 ## Basic usage
 
-<Playground>
+```jsx live
-  <div className="p-4">
+<div className="p-4">
-    <EmptyStudies />
+  <EmptyStudies />
-  </div>
+</div>
-</Playground>
+```
 
 ## Properties
 
 <Props of={EmptyStudies} />
+```

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 '@ohif/ui';
-import { ErrorBoundary } from '../';
 
 # Error Boundary
 
@@ -19,7 +18,7 @@ import { ErrorBoundary } from '@ohif/ui';
 
 ## Basic usage
 
-<Playground>
+````jsx live
   <div className="p-4">
     <ErrorBoundary context="Somewhere">
       {() => {
@@ -28,11 +27,11 @@ import { ErrorBoundary } from '@ohif/ui';
       }}
     </ErrorBoundary>
   </div>
-</Playground>
+```
 
 ## Custom error fallback
 
-<Playground>
+```jsx live
   {() => {
     const CustomFallback = ({ error, componentStack, resetErrorBoundary }) => {
       return (
@@ -52,8 +51,9 @@ import { ErrorBoundary } from '@ohif/ui';
       </div>
     );
   }}
-</Playground>
+```
 
 ## Properties
 
 <Props of={ErrorBoundary} />
+````

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 }) => (
+          <>
+            <div>
+              <span
+                className={classnames(
+                  isActive ? 'text-black' : 'text-white',
+                  'mr-2 text-base'
+                )}
+              >
+                {title}
+              </span>
+              <span
+                className={classnames(
+                  isActive ? 'text-black' : 'text-aqua-pale',
+                  'font-thin text-sm'
+                )}
+              >
+                {subtitle}
+              </span>
+            </div>
+            <span
+              className={classnames(
+                isActive ? 'text-black' : 'text-primary-active',
+                'text-sm'
+              )}
+            >
+              {index + 1}
+            </span>
+          </>
+        ),
+      },
+    };
+    return (
+      <div className="py-10 flex justify-center">
+        <ExpandableToolbarButton {...props} />
+      </div>
+    );
+  };
+}
+```
+
+## Properties
+
+<Props of={ExpandableToolbarButton} />
+```

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 '@ohif/ui';
-import { Input } from '../';
 
 # Input
 
@@ -17,8 +16,9 @@ import { Input } from '@ohif/ui';
 
 ## Basic usage
 
-<Playground>
+```jsx live
-  {() => {
+{
+  () => {
     const [inputValue, setInputValue] = React.useState('');
     return (
       <div className="p-4">
@@ -31,9 +31,11 @@ import { Input } from '@ohif/ui';
         <Input placeholder="Without label" />
       </div>
     );
-  }}
+  };
-</Playground>
+}
+```
 
 ## Properties
 
 <Props of={Input} />
+```

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
 
-<Playground>
+```jsx live
-  {() => {
+{
+  () => {
     const [dates, setDates] = useState({
       startDate: null,
       endDate: null,
@@ -30,14 +31,16 @@ import { InputDateRange } from '@ohif/ui';
           <InputDateRange
             label="Dates"
             value={dates}
-            onChange={(dates) => setDates(dates)}
+            onChange={dates => setDates(dates)}
           />
         </div>
       </div>
     );
-  }}
+  };
-</Playground>
+}
+```
 
 ## Properties
 
 <Props of={InputDateRange} />
+```

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
 
-<Playground>
+```jsx live
-  {() => {
+{
+  () => {
     const [filterValues, setFilterValues] = useState({
       patient: '',
       studyDate: {
@@ -82,9 +83,11 @@ import { InputGroup } from '@ohif/ui';
         />
       </div>
     );
-  }}
+  };
-</Playground>
+}
+```
 
 ## Properties
 
 <Props of={InputGroup} />
+```

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
 
-<Playground>
+```jsx live
-  {() => {
+{
+  () => {
     const [values, setValues] = useState([]);
     return (
       <div className="flex flex-col flex-1 p-4 items-center">
@@ -33,16 +34,18 @@ import { InputMultiSelect } from '@ohif/ui';
               { value: 'SR', label: 'SR' },
             ]}
             value={values}
-            onChange={(values) => {
+            onChange={values => {
               setValues(values);
             }}
           />
         </div>
       </div>
     );
-  }}
+  };
-</Playground>
+}
+```
 
 ## Properties
 
 <Props of={InputMultiSelect} />
+```

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
 
-<Playground>
+```jsx live
-  {() => {
+{
+  () => {
     const [text, setText] = useState('');
     return (
       <div className="flex flex-col flex-1 p-4 items-center">
         <div className="w-56">
           <InputText
-            label='Name'
+            label="Name"
             value={text}
-            onChange={value => {setText(value)}}
+            onChange={value => {
+              setText(value);
+            }}
           />
         </div>
       </div>
-    )
+    );
-  }}
+  };
-
+}
-</Playground>
+```
 
 ## Properties
 
 <Props of={InputText} />
+```

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 '@ohif/ui';
-import { Label } from '../';
 
 # Label
 
@@ -17,16 +16,19 @@ import { Label } from '@ohif/ui';
 
 ## Basic usage
 
-<Playground>
+```jsx live
-  {() => {
+{
+  () => {
     return (
       <div className="p-4">
         <Label text="Label" />
       </div>
     );
-  }}
+  };
-</Playground>
+}
+```
 
 ## Properties
 
 <Props of={Label} />
+```

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 (
+      <ToolbarButton
+        items={[
+          {
+            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 }) => (
+          <>
+            <div>
+              <span
+                className={classnames(
+                  isActive ? 'text-black' : 'text-white',
+                  'mr-2 text-base'
+                )}
+              >
+                {title}
+              </span>
+              <span
+                className={classnames(
+                  isActive ? 'text-black' : 'text-aqua-pale',
+                  'font-thin text-sm'
+                )}
+              >
+                {subtitle}
+              </span>
+            </div>
+            <span
+              className={classnames(
+                isActive ? 'text-black' : 'text-primary-active',
+                'text-sm'
+              )}
+            >
+              {index + 1}
+            </span>
+          </>
+        )}
+      />
+    );
+  };
+}
+```
+
+## Properties
+
+<Props of={ListMenu} />
+```

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
 
-<Playground>
+````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)),
+      onClick: id => setActiveMeasurementItem(s => (s === id ? null : id)),
-      onEdit: (id) => alert(`Edit: ${id}`),
+      onEdit: id => alert(`Edit: ${id}`),
     };
     return (
       <div className="p-4 w-80">
@@ -39,11 +39,11 @@ import { MeasurementTable } from '@ohif/ui';
       </div>
     );
   }}
-</Playground>
+```
 
 ## Empty Data
 
-<Playground>
+```jsx live
   {() => {
     return (
       <div className="p-4 w-80">
@@ -51,8 +51,9 @@ import { MeasurementTable } from '@ohif/ui';
       </div>
     );
   }}
-</Playground>
+```
 
 ## Properties
 
 <Props of={MeasurementTable} />
+````

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
+<NavBar className="justify-center">
+  <Typography variant="h3" className="m-2">
+    Header content
+  </Typography>
+</NavBar>
+```
+
+## Properties
+
+<Props of={NavBar} />
+```

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 '@ohif/ui';
-import { Notification } from '../';
 
 # Notification
 
@@ -20,8 +19,9 @@ import { Notification } from '@ohif/ui';
 
 ## Basic usage
 
-<Playground>
+```jsx live
-  {() => {
+{
+  () => {
     return (
       <div className="p-4 w-full lg:w-2/3">
         <Notification
@@ -50,9 +50,11 @@ import { Notification } from '@ohif/ui';
         />
       </div>
     );
-  }}
+  };
-</Playground>
+}
+```
 
 ## Properties
 
 <Props of={Notification} />
+```

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 '@ohif/ui';
-import { SegmentationTable } from '../';
 
 # Segmentation Table
 
@@ -17,8 +16,9 @@ import { SegmentationTable } from '@ohif/ui';
 
 ## Basic usage
 
-<Playground>
+```jsx live
-  {() => {
+{
+  () => {
     const tableData = {
       title: 'Segments',
       amount: 12,
@@ -29,9 +29,11 @@ import { SegmentationTable } from '@ohif/ui';
         <SegmentationTable {...tableData} />
       </div>
     );
-  }}
+  };
-</Playground>
+}
+```
 
 ## Properties
 
 <Props of={SegmentationTable} />
+```

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 '@ohif/ui';
-import { Select } from '../';
 
 # Select
 
@@ -17,7 +16,7 @@ import { Select } from '@ohif/ui';
 
 ## Basic usage
 
-<Playground>
+````jsx live
   <div className="flex flex-col flex-1 p-4 items-center">
     <div className="w-56">
       <Select
@@ -30,11 +29,11 @@ import { Select } from '@ohif/ui';
       />
     </div>
   </div>
-</Playground>
+```
 
 ## Disabled
 
-<Playground>
+```jsx live
   <div className="flex flex-col flex-1 p-4 items-center">
     <div className="w-56">
       <Select
@@ -48,11 +47,11 @@ import { Select } from '@ohif/ui';
       />
     </div>
   </div>
-</Playground>
+```
 
 ## No Options
 
-<Playground>
+```jsx live
   <div className="flex flex-col flex-1 p-4 items-center">
     <div className="w-56">
       <Select
@@ -63,8 +62,9 @@ import { Select } from '@ohif/ui';
       />
     </div>
   </div>
-</Playground>
+```
 
 ## Properties
 
 <Props of={Select} />
+````

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

@@ -4,8 +4,7 @@ menu: General
 route: components/sidePanel
 ---
 
-import { Playground, Props } from 'docz';
+import { SidePanel } from '@ohif/ui';
-import { SidePanel } from '../';
 
 # SidePanel
 
@@ -17,7 +16,7 @@ import { SidePanel } from '@ohif/ui';
 
 ## Basic usage
 
-<Playground>
+````jsx live
   <div
     className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
     style={{ height: '500px' }}
@@ -36,12 +35,12 @@ import { SidePanel } from '@ohif/ui';
       CONTENT
     </div>
   </div>
-</Playground>
+```
 
 
 ## Multiple panels
 
-<Playground>
+```jsx live
   <div
     className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
     style={{ height: '500px' }}
@@ -67,9 +66,10 @@ import { SidePanel } from '@ohif/ui';
       CONTENT
     </div>
   </div>
-</Playground>
+```
 
 
 ## Properties
 
 <Props of={SidePanel} />
+````

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

@@ -5,7 +5,7 @@ route: components/splitButton
 ---
 
 import { useState } from 'react';
-import { Playground, Props } from 'docz';
+
 import { SplitButton, WindowLevelMenuItem } from '@ohif/ui';
 
 # Split Button
@@ -18,8 +18,9 @@ Split Buttons are used to populate the Toolbar.
 import { SplitButton, WindowLevelMenuItem } from '@ohif/ui';
 ```
 
-<Playground>
+```jsx live
-  {() => {
+{
+  () => {
     const mockedProps = {
       bState: {
         primaryToolId: 'WWWC',
@@ -79,9 +80,11 @@ import { SplitButton, WindowLevelMenuItem } from '@ohif/ui';
         </div>
       </div>
     );
-  }}
+  };
-</Playground>
+}
+```
 
 ## Properties
 
 <Props of={SplitButton} />
+```

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

@@ -4,8 +4,7 @@ menu: General
 route: components/studyBrowser
 ---
 
-import { Playground, Props } from 'docz';
+import { StudyBrowser } from '@ohif/ui';
-import { StudyBrowser } from '../';
 
 # StudyBrowser
 
@@ -17,8 +16,9 @@ import { StudyBrowser } from '@ohif/ui';
 
 ## Basic usage
 
-<Playground>
+```jsx live
-  {() => {
+{
+  () => {
     const studyWithSR = {
       studyInstanceUid: '1',
       date: '07-Sept-2010',
@@ -93,15 +93,21 @@ import { StudyBrowser } from '@ohif/ui';
       },
     ];
     return (
-      <div className="flex flex-1" style={{height: '400px'}}>
+      <div className="flex flex-1" style={{ height: '400px' }}>
         <div className="overflow-hidden w-64">
-          <StudyBrowser tabs={tabs} activeTabName='primary' expandedStudyInstanceUIDs={[]} />
+          <StudyBrowser
+            tabs={tabs}
+            activeTabName="primary"
+            expandedStudyInstanceUIDs={[]}
+          />
         </div>
       </div>
     );
-  }}
+  };
-</Playground>
+}
+```
 
 ## Properties
 
 <Props of={StudyBrowser} />
+```

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

@@ -5,8 +5,8 @@ route: components/studyItem
 ---
 
 import { useState } from 'react';
-import { Playground, Props } from 'docz';
+
-import { StudyItem } from '../';
+import { StudyItem } from '@ohif/ui';
 
 # StudyItem
 
@@ -20,8 +20,9 @@ import { StudyItem } from '@ohif/ui';
 
 ## Basic usage
 
-<Playground>
+```jsx live
-  {() => {
+{
+  () => {
     const [studyActive, setStudyActive] = useState(null);
     return (
       <div className="flex flex-1 items-center justify-center p-4">
@@ -38,9 +39,11 @@ import { StudyItem } from '@ohif/ui';
         </div>
       </div>
     );
-  }}
+  };
-</Playground>
+}
+```
 
 ## Properties
 
 <Props of={StudyItem} />
+```

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

@@ -5,9 +5,9 @@ route: components/studyListFilter
 ---
 
 import { useState } from 'react';
-import { Playground, Props } from 'docz';
+
-import { StudyListFilter, Modal } from '../';
+import { StudyListFilter, Modal } from '@ohif/ui';
-import { ModalProvider } from '../../contextProviders';
+import { ModalProvider } from '@ohif/ui';
 
 # Study List Filter
 
@@ -19,8 +19,9 @@ import { StudyListFilter, ModalProvider, Modal } from '@ohif/ui';
 
 ## Basic usage
 
-<Playground>
+```jsx live
-  {() => {
+{
+  () => {
     const defaultFilterValues = {
       patientName: '',
       mrn: '',
@@ -113,9 +114,11 @@ import { StudyListFilter, ModalProvider, Modal } from '@ohif/ui';
         />
       </ModalProvider>
     );
-  }}
+  };
-</Playground>
+}
+```
 
 ## Properties
 
 <Props of={StudyListFilter} />
+```

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

@@ -5,8 +5,8 @@ route: components/studyListPagination
 ---
 
 import { useState } from 'react';
-import { Playground, Props } from 'docz';
+
-import { StudyListPagination } from '../';
+import { StudyListPagination } from '@ohif/ui';
 
 # StudyListPagination
 
@@ -18,14 +18,15 @@ import { StudyListPagination } from '@ohif/ui';
 
 ## Basic usage
 
-<Playground>
+```jsx live
-  {() => {
+{
+  () => {
     const [currentPage, setCurrentPage] = useState(1);
     const [perPage, setPerPage] = useState(25);
-    const onChangePage = (page) => {
+    const onChangePage = page => {
       setCurrentPage(page);
     };
-    const onChangePerPage = (perPage) => {
+    const onChangePerPage = perPage => {
       setPerPage(perPage);
       setCurrentPage(1);
     };
@@ -37,9 +38,11 @@ import { StudyListPagination } from '@ohif/ui';
         perPage={perPage}
       />
     );
-  }}
+  };
-</Playground>
+}
+```
 
 ## Properties
 
 <Props of={StudyListPagination} />
+```

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

@@ -5,8 +5,8 @@ route: components/studyListTable
 ---
 
 import { useState } from 'react';
-import { Playground, Props } from 'docz';
+
-import { StudyListTable } from '../';
+import { StudyListTable } from '@ohif/ui';
 
 # StudyListTable
 
@@ -20,13 +20,14 @@ import { StudyListTable } from '@ohif/ui';
 
 ## Basic usage
 
-<Playground>
+```jsx live
-  {() => {
+{
+  () => {
     const studies = new Array(10).fill('');
     const [expandedRows, setExpandedRows] = useState([]);
     const tableDataSource = studies.map((study, key) => {
       const rowKey = key + 1;
-      const isExpanded = expandedRows.some((k) => k === rowKey);
+      const isExpanded = expandedRows.some(k => k === rowKey);
       return {
         row: [
           { key: 'Cell 01', content: 'Cell 01', gridCol: 2 },
@@ -40,8 +41,8 @@ import { StudyListTable } from '@ohif/ui';
           </td>
         ),
         onClickRow: () =>
-          setExpandedRows((rows) =>
+          setExpandedRows(rows =>
-            isExpanded ? rows.filter((n) => rowKey !== n) : [...rows, rowKey]
+            isExpanded ? rows.filter(n => rowKey !== n) : [...rows, rowKey]
           ),
         isExpanded,
       };
@@ -54,9 +55,11 @@ import { StudyListTable } from '@ohif/ui';
         />
       </div>
     );
-  }}
+  };
-</Playground>
+}
+```
 
 ## Properties
 
 <Props of={StudyListTable} />
+```

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

@@ -4,8 +4,7 @@ menu: Data Display
 route: components/table
 ---
 
-import { Playground, Props, Link } from 'docz';
+import { Table, TableHead, TableBody, TableRow, TableCell } from '@ohif/ui';
-import { Table, TableHead, TableBody, TableRow, TableCell } from '../';
 
 # Table
 
@@ -24,30 +23,30 @@ import { Table, TableBody, TableCell, TableHead, TableRow } from '@ohif/ui';
 
 ## Basic usage
 
-<Playground>
+```jsx live
-  <div className="p-4">
+<div className="p-4">
-    <Table>
+  <Table>
-      <TableHead>
+    <TableHead>
+      <TableRow>
+        <TableCell>Item 01</TableCell>
+        <TableCell>Item 02</TableCell>
+        <TableCell>Item 03</TableCell>
+        <TableCell>Item 04</TableCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      {new Array(25).fill('').map(row => (
         <TableRow>
-          <TableCell>Item 01</TableCell>
+          <TableCell>Content 01</TableCell>
-          <TableCell>Item 02</TableCell>
+          <TableCell>Content 02</TableCell>
-          <TableCell>Item 03</TableCell>
+          <TableCell>Content 03</TableCell>
-          <TableCell>Item 04</TableCell>
+          <TableCell>Content 04</TableCell>
         </TableRow>
-      </TableHead>
+      ))}
-      <TableBody>
+    </TableBody>
-        {new Array(25).fill('').map((row) => (
+  </Table>
-          <TableRow>
+</div>
-            <TableCell>Content 01</TableCell>
+```
-            <TableCell>Content 02</TableCell>
-            <TableCell>Content 03</TableCell>
-            <TableCell>Content 04</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  </div>
-</Playground>
 
 ## Table width
 
@@ -76,3 +75,4 @@ passing a `className` or `style`.
 ### TableCell Props
 
 <Props of={TableCell} />
+```

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

@@ -4,7 +4,7 @@ menu: General
 route: components/thumbnail
 ---
 
-import { Playground, Props } from 'docz';
+
 import { Thumbnail } from '../';
 
 # Thumbnail
@@ -20,7 +20,7 @@ import { Thumbnail } from '@ohif/ui';
 
 ## Basic usage
 
-<Playground>
+```jsx live
   <div className="flex flex-1 items-center justify-center p-4">
     <div className="w-56">
       <Thumbnail
@@ -33,7 +33,7 @@ import { Thumbnail } from '@ohif/ui';
       />
     </div>
   </div>
-</Playground>
+```
 
 ## Properties
 

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

@@ -4,7 +4,7 @@ menu: General
 route: components/ThumbnailNoImage
 ---
 
-import { Playground, Props } from 'docz';
+
 import { ThumbnailNoImage } from '../';
 
 # ThumbnailNoImage
@@ -19,7 +19,7 @@ import { Thumbnail } from '@ohif/ui';
 
 ## Basic usage
 
-<Playground>
+```jsx live
   <div className="flex flex-1 items-center justify-center p-4">
     <div className="w-64">
       <ThumbnailNoImage
@@ -30,7 +30,7 @@ import { Thumbnail } from '@ohif/ui';
       />
     </div>
   </div>
-</Playground>
+```
 
 ## Properties
 

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

@@ -4,7 +4,7 @@ menu: General
 route: components/ThumbnailTracked
 ---
 
-import { Playground, Props } from 'docz';
+
 import { ThumbnailTracked } from '../';
 
 # ThumbnailTracked
@@ -17,7 +17,7 @@ import { ThumbnailTracked } from '@ohif/ui';
 
 ## Basic usage
 
-<Playground>
+```jsx live
   <div className="flex flex-1 items-center justify-center p-4">
     <div className="w-64">
       <ThumbnailTracked
@@ -32,7 +32,7 @@ import { ThumbnailTracked } from '@ohif/ui';
       />
     </div>
   </div>
-</Playground>
+```
 
 ## Properties
 

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

@@ -0,0 +1,46 @@
+---
+name: Toolbar Button
+menu: General
+route: components/toolbarButton
+---
+
+import { useState } from 'react';
+
+import { ToolbarButton } from '@ohif/ui';
+
+# Toolbar Button
+
+Toolbar Buttons are used to populate the Toolbar.
+
+## Import
+
+```javascript
+import { ToolbarButton } from '@ohif/ui';
+```
+
+```jsx live
+function ToolbarButtonExample(props) {
+  // const [isActive, setIsActive] = useState(false);
+  const tool = {
+    id: 'Zoom',
+    label: 'Zoom',
+    icon: 'tool-zoom',
+    type: null,
+    commandName: 'setToolActive',
+    commandOptions: { toolName: 'Zoom' },
+    //onClick: () => setIsActive(true),
+    isActive: true,
+  };
+
+  return (
+    <div className="py-10 flex justify-center">
+      <ToolbarButton {...tool} />
+    </div>
+  );
+}
+```
+
+## Properties
+
+<Props of={ToolbarButton} />
+```

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

@@ -0,0 +1,40 @@
+---
+name: Tooltip
+menu: Data Display
+route: components/tooltip
+---
+
+import { Tooltip, Typography } from '@ohif/ui';
+
+# Tooltip
+
+Tooltips display informative content when users hover over, focus on, or tap an
+element.
+
+## Import
+
+```javascript
+import { Tooltip } from '@ohif/ui';
+```
+
+```jsx live
+function TooltipExample(props) {
+  const tooltips = ['bottom', 'bottom-left', 'bottom-right', 'left', 'right'];
+  return (
+    <div className="py-10 flex flex-col items-center justify-center">
+      {tooltips.map(tooltip => (
+        <div className="mb-16">
+          <Tooltip content="Tooltip content" position={tooltip}>
+            <Typography>Tooltip {tooltip}</Typography>
+          </Tooltip>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+## Properties
+
+<Props of={Tooltip} />
+```

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

@@ -4,8 +4,7 @@ menu: Data Display
 route: components/tooltipClipboard
 ---
 
-import { Playground, Props } from 'docz';
+import { TooltipClipboard } from '@ohif/ui';
-import { TooltipClipboard } from '../';
 
 # Tooltip Clipboard
 
@@ -14,16 +13,13 @@ element.
 
 ## Import
 
-```javascript
+```jsx live
 import { TooltipClipboard } from '@ohif/ui';
-```
 
-<Playground>
+<div className="p-4">
-  <div className="p-4">
+  <TooltipClipboard>Text to be copied</TooltipClipboard>
-    <TooltipClipboard>Text to be copied</TooltipClipboard>
+</div>;
-  </div>
+```
-  ); }}
-</Playground>
 
 ## Properties
 

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

@@ -4,8 +4,7 @@ menu: General
 route: components/typography
 ---
 
-import { Playground, Props } from 'docz';
+import { Typography } from '@ohif/ui';
-import { Typography } from '../';
 
 # Typography
 
@@ -20,7 +19,7 @@ import { Typography } from '@ohif/ui';
 
 ## Basic usage
 
-<Playground>
+````jsx live
   <div className="p-4">
     <Typography variant="h1">
       h1. The five boxing wizards jump quickly.
@@ -47,7 +46,7 @@ import { Typography } from '@ohif/ui';
       body. The five boxing wizards jump quickly.
     </Typography>
   </div>
-</Playground>
+```
 
 ## Changing the HTML element
 
@@ -56,14 +55,15 @@ You can use the prop `component` to associate the component to be rendered with
 a semantic element. The style of a Typography is independent of the semantic
 element.
 
-<Playground>
+```jsx live
   <div className="p-4">
     <Typography variant="h1" component="h2">
       This is a h2 using the h1 styles.
     </Typography>
   </div>
-</Playground>
+```
 
 ## Properties
 
 <Props of={Typography} />
+````

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

@@ -0,0 +1,55 @@
+---
+name: Viewport
+menu: Data Display
+route: components/viewport
+---
+
+import { Viewport } from '@ohif/ui';
+
+# Viewport
+
+Viewport component to be used in the ViewportGrid.
+
+## Import
+
+```javascript
+import { Viewport } from '@ohif/ui';
+```
+
+## Basic usage
+
+```jsx live
+<div className="p-4 h-screen">
+  <Viewport
+    viewportIndex={0}
+    onSeriesChange={direction => alert(`Series ${direction}`)}
+    studyData={{
+      label: 'A',
+      isTracked: true,
+      isLocked: false,
+      isRehydratable: false,
+      studyDate: '07-Sep-2011',
+      currentSeries: 1,
+      seriesDescription:
+        'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
+      modality: 'CT',
+      patientInformation: {
+        patientName: 'Smith, Jane',
+        patientSex: 'F',
+        patientAge: '59',
+        MRN: '10000001',
+        thickness: '5.0mm',
+        spacing: '1.25mm',
+        scanner: 'Aquilion',
+      },
+    }}
+  >
+    <div className="flex justify-center items-center h-full">CONTENT</div>
+  </Viewport>
+</div>
+```
+
+## Properties
+
+<Props of={Viewport} />
+```

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

@@ -4,8 +4,7 @@ menu: Data Display
 route: components/viewportActionBar
 ---
 
-import { Playground, Props } from 'docz';
+import { ViewportActionBar } from '@ohif/ui';
-import { ViewportActionBar } from '../';
 
 # Viewport Action Bar
 
@@ -19,8 +18,7 @@ import { ViewportActionBar } from '@ohif/ui';
 
 ## Basic usage
 
-<>
+````jsx live
-<Playground>
   <div className="p-4 h-64">
     <ViewportActionBar
       onSeriesChange={direction => alert(`Series ${direction}`)}
@@ -46,8 +44,9 @@ import { ViewportActionBar } from '@ohif/ui';
       }}
     />
   </div>
-</Playground>
+```
-<Playground>
+
+```jsx live
   <div className="p-4 h-64">
     <ViewportActionBar
       onSeriesChange={direction => alert(`Series ${direction}`)}
@@ -73,8 +72,9 @@ import { ViewportActionBar } from '@ohif/ui';
       }}
     />
   </div>
-</Playground>
+```
-<Playground>
+
+```jsx live
   <div className="p-4 h-64">
     <ViewportActionBar
       onSeriesChange={direction => alert(`Series ${direction}`)}
@@ -100,8 +100,8 @@ import { ViewportActionBar } from '@ohif/ui';
       }}
     />
   </div>
-</Playground>
+```
-<Playground>
+```jsx live
   <div className="p-4 h-64">
     <ViewportActionBar
       onSeriesChange={direction => alert(`Series ${direction}`)}
@@ -127,9 +127,10 @@ import { ViewportActionBar } from '@ohif/ui';
       }}
     />
   </div>
-</Playground>
+```
 </>
 
 ## Properties
 
 <Props of={ViewportActionBar} />
+````

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

@@ -4,9 +4,7 @@ menu: General
 route: components/viewportGrid
 ---
 
-import { Playground, Props } from 'docz';
+import { DragAndDropProvider, ViewportGrid } from '@ohif/ui';
-import { DragAndDropProvider } from '../../contextProviders';
-import { ViewportGrid } from '../../components';
 
 # ViewportGrid
 
@@ -20,8 +18,8 @@ import { ViewportGrid } from '@ohif/ui';
 
 ## Basic usage
 
-<Playground>
+```jsx live
-  <DragAndDropProvider>
+<DragAndDropProvider>
   <div className="p-4 h-56">
     <ViewportGrid numRows={1} numCols={2}>
       <div className="flex items-center justify-center h-full text-white">
@@ -32,9 +30,10 @@ import { ViewportGrid } from '@ohif/ui';
       </div>
     </ViewportGrid>
   </div>
-  </DragAndDropProvider>
+</DragAndDropProvider>
-</Playground>
+```
 
 ## Properties
 
 <Props of={ViewportGrid} />
+```

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

@@ -4,9 +4,8 @@ menu: General
 route: components/viewport-pane
 ---
 
-import { Playground, Props } from 'docz';
+
-import { ViewportGrid, ViewportPane } from '../../components';
+import { ViewportGrid, ViewportPane, DragAndDropProvider } from '@ohif/ui';
-import { DragAndDropProvider } from '../../contextProviders';
 
 # ViewportPane
 
@@ -20,7 +19,7 @@ import { ViewportPane } from '@ohif/ui';
 
 ## Basic usage
 
-<Playground>
+```jsx live
   <div className="p-4 h-56">
     <DragAndDropProvider>
       <ViewportGrid numRows={1} numCols={2}>
@@ -29,7 +28,7 @@ import { ViewportPane } from '@ohif/ui';
       </ViewportGrid>
     </DragAndDropProvider>
   </div>
-</Playground>
+```
 
 ## Properties
 

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

@@ -5,7 +5,7 @@ route: components/windowLevelMenuItem
 ---
 
 import { useState } from 'react';
-import { Playground, Props } from 'docz';
+
 import { ListMenu, WindowLevelMenuItem } from '@ohif/ui';
 
 # Window Level Menu Item
@@ -18,16 +18,19 @@ Window Level Menu Item are used as renderer of the ListMenu.
 import { WindowLevelMenuItem, ListMenu } from '@ohif/ui';
 ```
 
-<Playground>
+```jsx live
-  {() => {
+{
+  () => {
     return (
       <div className="py-10 flex justify-center">
         <ListMenu renderer={WindowLevelMenuItem} items={[]} />
       </div>
     );
-  }}
+  };
-</Playground>
+}
+```
 
 ## Properties
 
 <Props of={WindowLevelMenuItem} />
+```

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

@@ -4,9 +4,7 @@ menu: General
 route: components/icon
 ---
 
-import { Playground, Props } from 'docz';
+import { Icon, ICONS } from '@ohif/ui';
-import { Icon } from '../';
-import { ICONS } from './getIcon';
 
 # Icon
 
@@ -18,11 +16,11 @@ import { Icon } from '@ohif/ui';
 
 ## Basic usage
 
-<Playground>
+```jsx live
-  <div className="p-4">
+<div className="p-4">
-    <Icon name="series-active" className="text-primary-light m-4" />
+  <Icon name="series-active" className="text-primary-light m-4" />
-  </div>
+</div>
-</Playground>
+```
 
 ## All Icons
 
@@ -49,3 +47,7 @@ import { Icon } from '@ohif/ui';
 
 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/docs/component-library/context-providers/ModalProvider.mdx

@@ -3,9 +3,7 @@ name: ModalProvider
 route: customHooks/modalProvider
 ---
 
-import { Props } from 'docz';
+import { ModalComponent, ModalProvider } from '@ohif/ui';
-import { ModalProvider } from '../contextProviders';
-import ModalComponent from './ModalComponent.jsx';
 
 # Modal Context Provider
 

platform/docs/docs/component-library/context-providers/ViewportDialogProvider.mdx

@@ -3,14 +3,17 @@ name: ViewportDialogProvider
 route: customHooks/viewportDialogProvider
 ---
 
-import { Playground, Props } from 'docz';
-
 <!-- This is a workaround to import things from ohif/core as docz does not allow us to access window element and @ohif/core does use it once we import to instanciate cornerstone -->
-import UIViewportDialogService from './../../../core/src/services/UIViewportDialogService';
+<!-- import UIViewportDialogService from './../../../core/src/services/UIViewportDialogService';
-import ServicesManager from './../../../core/src/services/ServicesManager';
+import ServicesManager from './../../../core/src/services/ServicesManager'; !-->
 
-import { Dialog, Button, Notification } from '../components';
+import {
-import { ViewportDialogProvider, useViewportDialog } from '../contextProviders';
+  Dialog,
+  Button,
+  Notification,
+  ViewportDialogProvider,
+  useViewportDialog,
+} from '@ohif/ui';
 
 # Viewport Dialog Provider
 
@@ -19,7 +22,7 @@ component across all application.
 
 ## Sample
 
-<Playground>
+````jsx live
   {() => {
     const ViewportNotification = ({ hide }) => {
       return (
@@ -80,11 +83,11 @@ component across all application.
       </div>
     );
   }}
-</Playground>
+```
 
 ## Example using UIViewportDialogService
 
-<Playground>
+```jsx live
   {() => {
     const ViewportNotification = ({ hide }) => {
       return (
@@ -172,8 +175,9 @@ component across all application.
       </div>
     );
   }}
-</Playground>
+```
 
 ## Properties:
 
 <Props of={ViewportDialogProvider} />
+````

platform/docs/docs/component-library/context-providers/ViewportDialogProvider.mdx.todo

@@ -0,0 +1,178 @@
+---
+name: ViewportDialogProvider
+route: customHooks/viewportDialogProvider
+---
+
+
+
+<!-- This is a workaround to import things from ohif/core as docz does not allow us to access window element and @ohif/core does use it once we import to instanciate cornerstone -->
+import UIViewportDialogService from './../../../core/src/services/UIViewportDialogService';
+import ServicesManager from './../../../core/src/services/ServicesManager';
+
+import {  Dialog, Button, Notification, ViewportDialogProvider, useViewportDialog } from '@ohif/ui';
+
+# Viewport Dialog Provider
+
+This is a context provider that allow the application to share the modal
+component across all application.
+
+## Sample
+
+```jsx live
+  {() => {
+    const ViewportNotification = ({ hide }) => {
+      return (
+        <Notification
+          message="Track all measurement for this series?"
+          type="info"
+          actions={[
+            {
+              type: 'cancel',
+              text: 'No',
+              value: 0,
+            },
+            {
+              type: 'secondary',
+              text: 'No, do not ask again',
+              value: -1,
+            },
+            {
+              type: 'primary',
+              text: 'Yes',
+              value: 1,
+            },
+          ]}
+          onSubmit={value => {
+            if (typeof window !== 'undefined') {
+              window.alert(value);
+            }
+          }}
+        />
+      );
+    };
+    const ViewportActionButtons = () => {
+    const [dialogState, dialogApi] = useViewportDialog();
+      return (
+        <Button onClick={() => dialogApi.show({ content: ViewportNotification })}>
+          Open Dialog
+        </Button>
+      );
+    };
+    return (
+      <div className="w-full flex flex-row p-4" style={{height: '400px'}}>
+        <div className="flex flex-1 items-center justify-center h-full w-full bg-black text-white border border-primary-main">
+          <ViewportDialogProvider dialog={Dialog}>
+            <div className="flex flex-1 flex-col items-center justify-center h-full">
+              <ViewportActionButtons />
+              <span>CONTENT 1</span>
+            </div>
+          </ViewportDialogProvider>
+        </div>
+        <div className="flex flex-1 items-center justify-center h-full w-full bg-black text-white border border-primary-main">
+          <ViewportDialogProvider dialog={Dialog}>
+            <div className="flex flex-1 flex-col items-center justify-center h-full">
+              <ViewportActionButtons />
+              <span>CONTENT 1</span>
+            </div>
+          </ViewportDialogProvider>
+        </div>
+      </div>
+    );
+  }}
+```
+
+## Example using UIViewportDialogService
+
+```jsx live
+  {() => {
+    const ViewportNotification = ({ hide }) => {
+      return (
+        <Notification
+          message="Track all measurement for this series?"
+          type="info"
+          actions={[
+            {
+              type: 'cancel',
+              text: 'No',
+              value: 0,
+            },
+            {
+              type: 'secondary',
+              text: 'No, do not ask again',
+              value: -1,
+            },
+            {
+              type: 'primary',
+              text: 'Yes',
+              value: 1,
+            },
+          ]}
+          onSubmit={value => {
+            if (typeof window !== 'undefined') {
+              window.alert(value);
+            }
+          }}
+        />
+      );
+    };
+    // Creating servicesManager and register services should be in the root of your app
+    const servicesManager = new ServicesManager();
+    servicesManager.registerServices([UIViewportDialogService]);
+    // Get service instance
+    const _UIViewportDialogService =
+      servicesManager.services.UIViewportDialogService;
+      console.log(_UIViewportDialogService);
+    return (
+      <div className="w-full flex flex-col p-4" style={{height: '400px'}}>
+        <div className="flex flex-2">
+          <Button
+            className="mr-4 mb-4"
+            onClick={() =>
+              _UIViewportDialogService.show({
+                content: ViewportNotification,
+                viewportIndex: 0,
+              })
+            }
+          >
+            Open dialog on 0
+          </Button>
+          <Button
+            className="mr-4 mb-4"
+            onClick={() =>
+              _UIViewportDialogService.show({
+                content: ViewportNotification,
+                viewportIndex: 1,
+              })
+            }
+          >
+            Open dialog on 1
+          </Button>
+        </div>
+        <div className="flex flex-1 w-full flex-row">
+          <ViewportDialogProvider
+            dialog={Dialog}
+            service={_UIViewportDialogService}
+            viewportIndex={0}
+          >
+            <div className="flex flex-1 items-center justify-center h-full bg-black text-white border border-primary-main">
+              CONTENT 0
+            </div>
+          </ViewportDialogProvider>
+          <ViewportDialogProvider
+            dialog={Dialog}
+            service={_UIViewportDialogService}
+            viewportIndex={1}
+          >
+            <div className="flex flex-1 items-center justify-center h-full bg-black text-white border border-primary-main">
+              CONTENT 1
+            </div>
+          </ViewportDialogProvider>
+        </div>
+      </div>
+    );
+  }}
+```
+
+## Properties:
+
+<Props of={ViewportDialogProvider} />

platform/docs/docs/component-library/pages/Colors.mdx

@@ -3,8 +3,7 @@ name: Colors
 route: system/colors
 ---
 
-import { Playground, Props } from 'docz';
+import BackgroundColor from '@ohif/ui';
-import BackgroundColor from './BackgroundColor';
 
 # Color System
 
@@ -29,7 +28,7 @@ details about color classes.
 
 ## Text
 
-<Playground>
+````jsx live
   <div className="p-8">
     <p className="text-common-bright">text-common-bright</p>
     <p className="text-common-light">text-common-light</p>
@@ -37,7 +36,7 @@ details about color classes.
     <p className="text-common-dark">text-common-dark</p>
     <p className="text-common-active">text-common-active</p>
   </div>
-</Playground>
+```
 
 ## Background
 
@@ -80,4 +79,4 @@ common: {
   dark: '#726f7e',
   active: '#2c3074',
 },
-```
+````

platform/docs/docs/component-library/pages/getting-started.mdx

@@ -3,8 +3,7 @@ name: Getting Started
 route: /
 ---
 
-import { Playground } from 'docz';
+import { Button } from '@ohif/ui';
-import { Button } from '../components';
 
 # Getting Started
 
@@ -33,11 +32,11 @@ yarn add @ohif/ui --exact
 import { Button } from '@ohif/ui';
 ```
 
-<Playground className="p-8" style={{ padding: 8 }}>
+```jsx live
-  <div className="p-8">
+<div className="p-8">
-    <Button onClick={() => alert('Hello!')}>Click here!</Button>
+  <Button onClick={() => alert('Hello!')}>Click here!</Button>
-  </div>
+</div>
-</Playground>
+```
 
 ## Examples
 

platform/docs/docs/component-library/views/StudyList.mdx.todo

@@ -5,7 +5,6 @@ route: examples/studyList
 ---
 
 import { useState } from 'react';
-import { Playground } from 'docz';
 import {
   Icon,
   StudyListExpandedRow,
@@ -17,7 +16,7 @@ import {
   StudyListTable,
   StudyListPagination,
   StudyListFilter
-} from '../../components';
+} from '@ohif/ui';
 import utils from '../../utils';
 
 
@@ -29,7 +28,7 @@ import moment from 'moment';
 This example shows you how you can build a Study List page using the available
 components.
 
-<Playground>
+```jsx live
   {() => {
     const defaultFilterValues = {
       patientName: '',
@@ -344,4 +343,4 @@ components.
       </div>
     );
   }}
-</Playground>
+```

platform/docs/docs/component-library/views/Viewer.mdx.todo

@@ -5,7 +5,7 @@ route: examples/viewer
 ---
 
 import { useState } from 'react';
-import { Playground, Props } from 'docz';
+
 import {
   NavBar,
   SidePanel,
@@ -23,15 +23,15 @@ import {
   ViewportPane,
   StudySummary,
   MeasurementTable,
-} from '../../components';
+  Header,
-import Header from './components/Header';
+  DragAndDropProvider,
-import { DragAndDropProvider } from '../../contextProviders';
+} from '@ohif/ui';
 
 import { tabs } from './studyBrowserMockData';
 
 # Viewer
 
-<Playground>
+```jsx live
   {() => {
     const [activeMeasurementItem, setActiveMeasurementItem] = useState(null);
     const descriptionData = {
@@ -175,4 +175,4 @@ import { tabs } from './studyBrowserMockData';
       </DragAndDropProvider>
     );
   }}
-</Playground>
+```

platform/docs/docusaurus.config.js

@@ -72,6 +72,7 @@ const isI18nStaging = process.env.I18N_STAGING === 'true';
   // },
   themes: ['@docusaurus/theme-live-codeblock'],
   plugins: [
+    path.resolve(__dirname, './pluginOHIFWebpackConfig.js'),
     'plugin-image-zoom', // 3rd party plugin for image click to pop
     [
       '@docusaurus/plugin-client-redirects',
@@ -80,10 +81,13 @@ const isI18nStaging = process.env.I18N_STAGING === 'true';
         redirects: [
           {
             // we need this for https://cloud.google.com/healthcare/docs/how-tos/dicom-viewers
-            to: "/deployment/recipes/google-cloud-healthcare",
+            to: '/deployment/recipes/google-cloud-healthcare',
-            from: ['/connecting-to-image-archives/google-cloud-healthcare', '/connecting-to-image-archives/google-cloud-healthcare.html']
+            from: [
-          }
+              '/connecting-to-image-archives/google-cloud-healthcare',
-        ]
+              '/connecting-to-image-archives/google-cloud-healthcare.html',
+            ],
+          },
+        ],
         // createRedirects: function(path) {
         //   // redirect to /docs from /docs/introduction,
         //   // as introduction has been made the home doc
@@ -275,8 +279,18 @@ const isI18nStaging = process.env.I18N_STAGING === 'true';
         srcDark: 'img/ohif-logo.svg',
       },
       items: [
-        { to: 'https://ohif.org/get-started', label: 'Get Started', target: '_self', position: 'left' },
+        {
-        { to: 'https://ohif.org/examples', label: 'Examples', target: '_self', position: 'left' },
+          to: 'https://ohif.org/get-started',
+          label: 'Get Started',
+          target: '_self',
+          position: 'left',
+        },
+        {
+          to: 'https://ohif.org/examples',
+          label: 'Examples',
+          target: '_self',
+          position: 'left',
+        },
         {
           position: 'left',
           to: '/',
@@ -284,8 +298,18 @@ const isI18nStaging = process.env.I18N_STAGING === 'true';
           docId: 'Introduction',
           label: 'Docs',
         },
-        { to: 'https://ohif.org/community', label: 'Community', target: '_self', position: 'left' },
+        {
-        { to: 'next/help', activeBaseRegex: '(^/help$)|(/next/help)', label: 'Help', position: 'right' },
+          to: 'https://ohif.org/community',
+          label: 'Community',
+          target: '_self',
+          position: 'left',
+        },
+        {
+          to: 'next/help',
+          activeBaseRegex: '(^/help$)|(/next/help)',
+          label: 'Help',
+          position: 'right',
+        },
         // { to: 'https://react.ohif.org/', label: 'UI Component Library', position: 'left' },
         // {to: 'showcase', label: 'Showcase', position: 'left'},
         // right
@@ -299,7 +323,8 @@ const isI18nStaging = process.env.I18N_STAGING === 'true';
           position: 'right',
           dropdownItemsAfter: [
             {
-              to: 'next/viewer/internationalization#contributing-with-new-languages',
+              to:
+                'next/viewer/internationalization#contributing-with-new-languages',
               label: 'Help Us Translate',
             },
           ],
@@ -308,12 +333,11 @@ const isI18nStaging = process.env.I18N_STAGING === 'true';
           to: 'https://github.com/OHIF/Viewers',
           position: 'right',
           className: 'header-github-link',
-          'aria-label': 'GitHub Repository'
+          'aria-label': 'GitHub Repository',
         },
       ],
     },
     footer: {
-
       style: 'dark',
       links: [
         {

platform/docs/package.json

@@ -25,6 +25,7 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
+    "@ohif/ui": "^2.0.0",
     "@docusaurus/core": "2.0.0-beta.3",
     "@docusaurus/plugin-client-redirects": "2.0.0-beta.3",
     "@docusaurus/plugin-ideal-image": "2.0.0-beta.3",

platform/docs/pluginOHIFWebpackConfig.js

@@ -0,0 +1,25 @@
+module.exports = function(context, options) {
+  return {
+    name: 'plugin-ohif-webpack-config',
+    configureWebpack(config, isServer, utils) {
+      return {
+        resolve: {
+          fallback: {
+            fs: false,
+            path: false,
+          },
+        },
+        module: {
+          rules: [
+            {
+              test: /\.m?jsx?$/,
+              resolve: {
+                fullySpecified: false,
+              },
+            },
+          ],
+        },
+      };
+    },
+  };
+};

platform/docs/src/theme/ReactLiveScope/index.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import * as ui from '@ohif/ui';
+
+// Add react-live imports you need here
+const ReactLiveScope = {
+  React,
+  ...React,
+  ...ui,
+};
+
+export default ReactLiveScope;

platform/ui/.gitignore

@@ -1,2 +1 @@
-.docz
 node_modules

platform/ui/.webpack/webpack.dev.js

@@ -0,0 +1,8 @@
+const path = require('path');
+const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
+const SRC_DIR = path.join(__dirname, '../src');
+const DIST_DIR = path.join(__dirname, '../dist');
+
+module.exports = (env, argv) => {
+  return webpackCommon(env, argv, { SRC_DIR, DIST_DIR });
+};

platform/ui/.webpack/webpack.prod.js

@@ -1,6 +1,6 @@
-const merge = require('webpack-merge');
+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, './..');
@@ -33,5 +33,23 @@ module.exports = (env, argv) => {
       libraryTarget: 'umd',
       filename: pkg.main,
     },
+    externals: {
+      '@ohif/core': {
+        commonjs: '@ohif/core',
+        commonjs2: '@ohif/core',
+        amd: '@ohif/core',
+        root: '@ohif/core',
+      },
+      react: 'React',
+      'react-dom': 'ReactDOM',
+    },
+    module: {
+      rules: [
+        {
+          test: /\.css$/i,
+          use: ['style-loader', 'css-loader', 'postcss-loader'],
+        },
+      ],
+    },
   });
 };

platform/ui/README.md

@@ -1,19 +1 @@
 # @ohif/ui
-
-React component library powered by `docz`
-
-## Commands
-
-```sh
-# Install
-yarn # npm i
-
-# Develop
-yarn dev # npm run dev
-
-# Build
-yarn build # npm run build
-
-# Serve (the "build" output)
-yarn serve # npm run serve
-```

platform/ui/doczrc.js

@@ -1,18 +0,0 @@
-export default {
-  title: '@ohif/ui',
-  menu: [
-    'Getting Started',
-    // COMPONENTS ARE DEFINED JUST TO CUSTOMIZE THEIR SORTING
-    'General',
-    'Data Display',
-    'Feedback',
-    'Form',
-    'Navigation',
-    // 'Other',
-  ],
-  ignore: ['README.md', 'CHANGELOG.md'],
-  base: '/',
-  src: './src',
-  files: '**/*.{md,markdown,mdx}',
-  propsParser: false,
-};

platform/ui/gatsby-config.js

@@ -1,8 +0,0 @@
-module.exports = {
-  plugins: [
-    'gatsby-theme-docz',
-    'gatsby-plugin-react-svg',
-    'gatsby-plugin-sass',
-    `gatsby-plugin-postcss`,
-  ],
-};

platform/ui/gatsby-node.js

@@ -1,43 +0,0 @@
-const path = require('path');
-// ~~ Plugins
-const PnpWebpackPlugin = require(`pnp-webpack-plugin`); // Required until Webpack@5
-
-exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
-  if (stage === 'build-html' || stage === 'develop-html') {
-    actions.setWebpackConfig({
-      module: {
-        rules: [
-          {
-            test: /\@ohif\/core/,
-            use: loaders.null(),
-          },
-          {
-            test: /core/,
-            use: loaders.null(),
-          },
-          {
-            test: /cornerstone\-math/,
-            use: loaders.null(),
-          },
-        ],
-      },
-    });
-  }
-
-  actions.setWebpackConfig({
-    node: { fs: 'empty' },
-    resolve: {
-      plugins: [PnpWebpackPlugin],
-      // Note the '..' in the path because docz gatsby project lives in the '.docz' directory
-      modules: [
-        // platform/ui
-        path.resolve(__dirname, '../node_modules'),
-        // .docz
-        'node_modules',
-      ],
-    },
-    resolveLoader: {
-      plugins: [PnpWebpackPlugin.moduleLoader(module)],
-    },
-  });
-};

platform/ui/netlify.toml

@@ -1,40 +0,0 @@
-# Netlify Config
-#
-# TOML Reference:
-# https://www.netlify.com/docs/netlify-toml-reference/
-#
-# We use Netlify for deploy previews and for publishing docs (gh-pages branch).
-# https://viewer.ohif.org is created using a different process that is
-# managed by CircleCI and deployed to our Google Hosting
-#
-
-[build]
-  base = ""
-  publish = ".docz/dist"
-  ignore = "git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF . ../i18n/"
-
-# NODE_VERSION in root `.nvmrc` takes priority
-# YARN_FLAGS: https://www.netlify.com/docs/build-gotchas/#yarn
-[build.environment]
-  # If 'production', `yarn install` does not install devDependencies
-  NODE_ENV = "development"
-  NODE_VERSION = "12.13.0"
-  YARN_VERSION = "1.22.0"
-  RUBY_VERSION = "2.6.2"
-  YARN_FLAGS = "--no-ignore-optional --pure-lockfile"
-  NETLIFY_USE_YARN = "true"
-
-[[headers]]
-  # Define which paths this specific [[headers]] block will cover.
-  for = "/*"
-
-  [headers.values]
-    X-Frame-Options = "DENY"
-    X-XSS-Protection = "1; mode=block"
-
-    # Multi-key header rules are expressed with multi-line strings.
-    cache-control = '''
-    max-age=0,
-    no-cache,
-    no-store,
-    must-revalidate'''

platform/ui/package.json

@@ -4,6 +4,8 @@
   "description": "A set of React components for Medical Imaging Viewers",
   "author": "OHIF Contributors",
   "license": "MIT",
+  "main": "dist/index.umd.js",
+  "module": "src/index.js",
   "publishConfig": {
     "access": "public"
   },
@@ -17,44 +19,34 @@
     "README.md"
   ],
   "scripts": {
-    "start": "yarn run dev",
+    "start": "yarn run build --watch",
-    "build": "docz build",
+    "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
-    "build:ui:ci": "docz build",
+    "build:package": "yarn run build"
-    "dev": "docz dev",
-    "serve": "docz serve",
-    "docs:preview": "yarn run dev"
   },
   "peerDependencies": {
-    "@ohif/core": "ˆ2.9.6"
+    "@ohif/core": "ˆ2.9.6",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
   },
   "dependencies": {
     "browser-detect": "^0.2.28",
     "classnames": "2.2.6",
     "lodash.debounce": "4.0.8",
     "moment": "2.24.0",
-    "react": "17.0.2",
     "react-dates": "^21.8.0",
     "react-dnd": "14.0.2",
     "react-dnd-html5-backend": "14.0.0",
-    "react-dom": "17.0.2",
     "react-draggable": "4.4.3",
     "react-error-boundary": "^3.1.3",
     "react-modal": "3.11.2",
     "react-outside-click-handler": "^1.3.0",
     "react-select": "3.0.8",
-    "react-with-direction": "^1.3.1",
+    "react-with-direction": "^1.3.1"
-    "theme-ui": "0.2.x"
   },
   "devDependencies": {
     "autoprefixer": "9.7.4",
-    "docz": "2.3.2-alpha.0",
+    "postcss": "^8.3.5",
-    "gatsby": "^2.25.0",
+    "postcss-loader": "^6.1.1",
-    "gatsby-plugin-postcss": "^3.7.0",
-    "gatsby-plugin-react-svg": "3.0.0",
-    "gatsby-plugin-sass": "2.3.12",
-    "gatsby-theme-docz": "2.3.1",
-    "node-sass": "^4.14.1",
-    "pnp-webpack-plugin": "^1.6.4",
     "prop-types": "15.7.2",
     "tailwindcss": "1.6.2"
   }

platform/ui/src/components/AboutModal/AboutModal.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Typography, Icon } from '../../components';
+import { Typography, Icon } from '../';
+import PropTypes from 'prop-types';
 import detect from 'browser-detect';
 
 const Link = ({ href, children, showIcon = false }) => {
@@ -41,7 +42,7 @@ const Row = ({ title, value, link }) => {
   );
 };
 
-const AboutModal = () => {
+const AboutModal = ({buildNumber, versionNumber}) => {
   const { os, version, name } = detect();
   const browser = `${name[0].toUpperCase()}${name.substr(1)} ${version}`;
 
@@ -89,8 +90,8 @@ const AboutModal = () => {
           value="https://github.com/OHIF/Viewers/commits/master"
           link="https://github.com/OHIF/Viewers/commits/master"
         />
-        <Row title="Version Number" value={process.env.VERSION_NUMBER} />
+        <Row title="Version number" value={versionNumber} />
-        <Row title="Build number" value={process.env.BUILD_NUM} />
+        <Row title="Build number" value={buildNumber} />
         <Row title="Browser" value={browser} />
         <Row title="OS" value={os} />
       </div>
@@ -98,4 +99,9 @@ const AboutModal = () => {
   );
 };
 
+AboutModal.propTypes = {
+  buildNumber: PropTypes.string,
+  versionNumber: PropTypes.string,
+}
+
 export default AboutModal;

platform/ui/src/components/CinePlayer/CinePlayer.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
-import { IconButton, Icon } from '@ohif/ui';
+import { IconButton, Icon } from '../';
 
 import './CinePlayerCustomInputRange.css';
 

platform/ui/src/components/Dropdown/Dropdown.mdx

@@ -1,68 +0,0 @@
----
-name: Dropdown
-menu: General
-route: components/dropdown
----
-
-import { Playground, Props } from 'docz';
-import { Dropdown, IconButton, Icon } from '../';
-
-# 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';
-```
-
-<Playground>
-  {() => {
-    const handleClick = () => {
-      alert("Clicked");
-    }
-    return (
-      <div className="py-4">
-        <Dropdown
-            showDropdownIcon={false}
-            list={[
-              {
-                title: 'Option 1',
-                icon: 'info',
-                onClick: handleClick,
-              },
-              {
-                title: 'Option 2',
-                icon: 'settings',
-                onClick: handleClick,
-              },
-            ]}
-          >
-            <IconButton
-              variant="text"
-              color="inherit"
-              size="initial"
-              className="text-primary-active"
-            >
-              <Icon name="settings" />
-            </IconButton>
-            <IconButton
-              variant="text"
-              color="inherit"
-              size="initial"
-              className="text-primary-active"
-            >
-              <Icon name="chevron-down" />
-            </IconButton>
-          </Dropdown>
-      </div>
-    );
-  }}
-</Playground>
-
-## Properties
-
-<Props of={Dropdown} />

platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.mdx

@@ -1,58 +0,0 @@
----
-name: Expandable Toolbar Button
-menu: General
-route: components/expandableToolbarButton
----
-
-import { useState } from 'react';
-import { Playground, Props } from 'docz';
-import { ExpandableToolbarButton, ListMenu } from '../';
-
-# Toolbar Button
-
-Expandable Toolbar Buttons are used to populate the Toolbar.
-
-## Import
-
-```javascript
-import { ExpandableToolbarButton, ListMenu } from '@ohif/ui';
-```
-
-<Playground>
-  {() => {
-    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 }) => (
-          <>
-            <div>
-              <span className={classnames(isActive ? "text-black" : "text-white", "mr-2 text-base")}>
-                {title}
-              </span>
-              <span className={classnames(isActive ? "text-black" : "text-aqua-pale", "font-thin text-sm")}>
-                {subtitle}
-              </span>
-            </div>
-            <span className={classnames(isActive ? "text-black" : "text-primary-active", "text-sm")}>{index + 1}</span>
-          </>
-        )
-      }
-    };
-    return (
-      <div className="py-10 flex justify-center">
-        <ExpandableToolbarButton {...props} />
-      </div>
-    );
-  }}
-</Playground>
-
-## Properties
-
-<Props of={ExpandableToolbarButton} />

platform/ui/src/components/Header/Header.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
-import { NavBar, Svg, Icon, IconButton, Dropdown } from '@ohif/ui';
+import { NavBar, Svg, Icon, IconButton, Dropdown } from '../';
 
 function Header({ children, menuOptions, isReturnEnabled, onClickReturnButton, isSticky, WhiteLabeling }) {
   const { t } = useTranslation('Header');

platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { HotkeyField, Typography } from '@ohif/ui';
+import { HotkeyField, Typography } from '../';
 import { useTranslation } from 'react-i18next';
 
 

platform/ui/src/components/ListMenu/ListMenu.mdx

@@ -1,52 +0,0 @@
----
-name: List Menu
-menu: General
-route: components/listMenu
----
-
-import { useState } from 'react';
-import { Playground, Props } from 'docz';
-import { ListMenu, ToolbarButton } from '../';
-
-# List Menu
-
-List Menus are used to populate expandable Toolbar.
-
-## Import
-
-```javascript
-import { ListMenu, ToolbarButton } from '@ohif/ui';
-```
-
-<Playground>
-  {() => {
-    return (
-      <ToolbarButton items={[
-        { 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 }) => (
-          <>
-            <div>
-              <span className={classnames(isActive ? "text-black" : "text-white", "mr-2 text-base")}>
-                {title}
-              </span>
-              <span className={classnames(isActive ? "text-black" : "text-aqua-pale", "font-thin text-sm")}>
-                {subtitle}
-              </span>
-            </div>
-            <span className={classnames(isActive ? "text-black" : "text-primary-active", "text-sm")}>{index + 1}</span>
-          </>
-        )}
-      />
-    );
-  }}
-</Playground>
-
-## Properties
-
-<Props of={ListMenu} />

platform/ui/src/components/Modal/Modal.jsx

@@ -4,8 +4,8 @@ import ReactModal from 'react-modal';
 
 import './Modal.css';
 
-import { Typography, Icon } from '../../components';
+import { Typography, Icon } from '../';
-import { useModal } from '../../contextProviders';
+import { useModal } from '../../contextProviders'
 
 if (typeof document !== 'undefined') {
   ReactModal.setAppElement(document.getElementById('root'));

platform/ui/src/components/NavBar/NavBar.mdx

@@ -1,30 +0,0 @@
----
-name: NavBar
-menu: Navigation
-route: components/navBar
----
-
-import { Playground, Props } from 'docz';
-import { NavBar, Typography } from '../';
-
-# NavBar
-
-## Import
-
-```javascript
-import { NavBar } from '@ohif/ui';
-```
-
-## Basic usage
-
-<Playground>
-  <NavBar className="justify-center">
-    <Typography variant="h3" className="m-2">
-      Header content
-    </Typography>
-  </NavBar>
-</Playground>
-
-## Properties
-
-<Props of={NavBar} />

platform/ui/src/components/Snackbar/SnackbarContainer.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import SnackbarItem from './SnackbarItem';
+import SnackbarItem from './SnackbarItem'
-import { useSnackbar } from '../../contextProviders';
+import { useSnackbar } from '../../contextProviders/SnackbarProvider';
 
 import './Snackbar.css';
 

platform/ui/src/components/SplitButton/SplitButton.jsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import OutsideClickHandler from 'react-outside-click-handler';
 import { useTranslation } from 'react-i18next';
 
-import { Icon, Tooltip, ListMenu } from '@ohif/ui';
+import { Icon, Tooltip, ListMenu } from '../';
 
 const baseClasses = {
   Button:

platform/ui/src/components/StudyListFilter/StudyListFilter.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 
-import { Button, Icon, Typography, InputGroup } from '../../components';
+import { Button, Icon, Typography, InputGroup } from '../';
 
 const StudyListFilter = ({
   filtersMeta,

platform/ui/src/components/ThemeWrapper/ThemeWrapper.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../gatsby-theme-docz/tailwind.css';
+import '../../tailwind.css';
 import '../../assets/styles/styles.css';
 
 const ThemeWrapper = ({ children }) => (

platform/ui/src/components/ToolbarButton/ToolbarButton.mdx

@@ -1,44 +0,0 @@
----
-name: Toolbar Button
-menu: General
-route: components/toolbarButton
----
-
-import { useState } from 'react';
-import { Playground, Props } from 'docz';
-import { ToolbarButton } from '../';
-
-# Toolbar Button
-
-Toolbar Buttons are used to populate the Toolbar.
-
-## Import
-
-```javascript
-import { ToolbarButton } from '@ohif/ui';
-```
-
-<Playground>
-  {() => {
-    const [isActive, setIsActive] = useState(false);
-    const tool = {
-      id: 'Zoom',
-      label: 'Zoom',
-      icon: 'tool-zoom',
-      type: null,
-      commandName: 'setToolActive',
-      commandOptions: { toolName: 'Zoom' },
-      onClick: () => setIsActive(true),
-      isActive,
-    };
-    return (
-      <div className="py-10 flex justify-center">
-        <ToolbarButton {...tool} />
-      </div>
-    );
-  }}
-</Playground>
-
-## Properties
-
-<Props of={ToolbarButton} />

platform/ui/src/components/Tooltip/Tooltip.mdx

@@ -1,40 +0,0 @@
----
-name: Tooltip
-menu: Data Display
-route: components/tooltip
----
-
-import { Playground, Props } from 'docz';
-import { Tooltip, Typography } from '../';
-
-# Tooltip
-
-Tooltips display informative content when users hover over, focus on, or tap an
-element.
-
-## Import
-
-```javascript
-import { Tooltip } from '@ohif/ui';
-```
-
-<Playground>
-  {() => {
-    const tooltips = ['bottom', 'bottom-left', 'bottom-right', 'left', 'right'];
-    return (
-      <div className="py-10 flex flex-col items-center justify-center">
-        {tooltips.map((tooltip) => (
-          <div className="mb-16">
-            <Tooltip content="Tooltip content" position={tooltip}>
-              <Typography>Tooltip {tooltip}</Typography>
-            </Tooltip>
-          </div>
-        ))}
-      </div>
-    );
-  }}
-</Playground>
-
-## Properties
-
-<Props of={Tooltip} />

platform/ui/src/components/UserPreferences/UserPreferences.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Select, Typography, Button, HotkeysPreferences } from '@ohif/ui';
+import { Select, Typography, Button, HotkeysPreferences } from '../';
 import { useTranslation } from 'react-i18next';
 
 const UserPreferences = ({ availableLanguages, defaultLanguage, currentLanguage, disabled, hotkeyDefinitions, hotkeyDefaults, onCancel, onSubmit, onReset }) => {

platform/ui/src/components/Viewport/Viewport.mdx

@@ -1,55 +0,0 @@
----
-name: Viewport
-menu: Data Display
-route: components/viewport
----
-
-import { Playground, Props } from 'docz';
-import { Viewport } from '../';
-
-# Viewport
-
-Viewport component to be used in the ViewportGrid.
-
-## Import
-
-```javascript
-import { Viewport } from '@ohif/ui';
-```
-
-## Basic usage
-
-<Playground>
-  <div className="p-4 h-screen">
-    <Viewport
-      viewportIndex={0}
-      onSeriesChange={(direction) => alert(`Series ${direction}`)}
-      studyData={{
-        label: 'A',
-        isTracked: true,
-        isLocked: false,
-        isRehydratable: false,
-        studyDate: '07-Sep-2011',
-        currentSeries: 1,
-        seriesDescription:
-          'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
-        modality: 'CT',
-        patientInformation: {
-          patientName: 'Smith, Jane',
-          patientSex: 'F',
-          patientAge: '59',
-          MRN: '10000001',
-          thickness: '5.0mm',
-          spacing: '1.25mm',
-          scanner: 'Aquilion',
-        },
-      }}
-    >
-      <div className="flex justify-center items-center h-full">CONTENT</div>
-    </Viewport>
-  </div>
-</Playground>
-
-## Properties
-
-<Props of={Viewport} />

platform/ui/src/contextProviders/SnackbarProvider.jsx

@@ -7,8 +7,8 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 
-import SnackbarContainer from '../components/Snackbar/SnackbarContainer';
 import SnackbarTypes from '../components/Snackbar/SnackbarTypes';
+import SnackbarContainer from '../components/Snackbar/SnackbarContainer';
 
 const SnackbarContext = createContext(null);
 

platform/ui/src/gatsby-theme-docz/components/Header/index.js

@@ -1,69 +0,0 @@
-/** @jsx jsx */
-import { jsx, Box, Flex, useColorMode } from 'theme-ui';
-import { useConfig, useCurrentDoc } from 'docz';
-
-import * as styles from 'gatsby-theme-docz/src/components/Header/styles';
-import {
-  Edit,
-  Menu,
-  Sun,
-  Github,
-} from 'gatsby-theme-docz/src/components/Icons';
-import { Logo } from 'gatsby-theme-docz/src/components/Logo';
-
-export const Header = props => {
-  const { onOpen } = props;
-  const {
-    repository,
-    themeConfig: { showDarkModeSwitch, showMarkdownEditButton },
-  } = useConfig();
-  const { edit = true, ...doc } = useCurrentDoc();
-  const [colorMode, setColorMode] = useColorMode();
-
-  const toggleColorMode = () => {
-    setColorMode(colorMode === 'light' ? 'dark' : 'light');
-  };
-
-  return (
-    <div sx={styles.wrapper} data-testid="header">
-      <div sx={styles.innerContainer}>
-        <div className="flex">
-          <button className="mr-4" sx={styles.menuButton} onClick={onOpen}>
-            <Menu size={25} />
-          </button>
-          <Logo />
-        </div>
-        <Flex>
-          {repository && (
-            <Box sx={{ mr: 2 }}>
-              <a
-                href={repository}
-                sx={styles.headerButton}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <Github size={15} />
-              </a>
-            </Box>
-          )}
-          {showDarkModeSwitch && (
-            <button sx={styles.headerButton} onClick={toggleColorMode}>
-              <Sun size={15} />
-            </button>
-          )}
-        </Flex>
-        {showMarkdownEditButton && edit && doc.link && (
-          <a
-            sx={styles.editButton}
-            href={doc.link}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Edit width={14} />
-            <Box sx={{ pl: 2 }}>Edit page</Box>
-          </a>
-        )}
-      </div>
-    </div>
-  );
-};

platform/ui/src/gatsby-theme-docz/components/Layout/index.js

@@ -1,52 +0,0 @@
-/** @jsx jsx */
-import { useRef, useState } from 'react';
-import { jsx, Layout as BaseLayout, Main } from 'theme-ui';
-import classnames from 'classnames';
-
-import { Header } from '../Header';
-import { Sidebar } from '../Sidebar';
-import * as styles from 'gatsby-theme-docz/src/components/Layout/styles';
-
-const getSidebarStatus = () =>
-  typeof window !== 'undefined' && window.location.pathname === '/';
-
-export const Layout = ({ children }) => {
-  const [sidebarOpen, setSidebarOpen] = useState(getSidebarStatus());
-  const nav = useRef();
-
-  const handleSidebarToggle = () => {
-    setSidebarOpen(s => !s);
-  };
-
-  return (
-    <BaseLayout sx={{ '& > div': { flex: '1 1 auto' } }} data-testid="layout">
-      <Main
-        id="main-layout"
-        sx={styles.main}
-        className={classnames({
-          'overflow-hidden h-screen lg:overflow-auto': sidebarOpen,
-        })}
-      >
-        <Header onOpen={handleSidebarToggle} />
-        <div className={classnames('flex', {})}>
-          <Sidebar
-            ref={nav}
-            sidebarOpen={sidebarOpen}
-            onFocus={() => setSidebarOpen(true)}
-            onBlur={() => setSidebarOpen(false)}
-            onClick={() => setSidebarOpen(false)}
-          />
-          <div
-            id="main-container"
-            className={classnames('py-10 w-full', {
-              'px-4 lg:px-20': sidebarOpen,
-              'px-4 lg:px-8': !sidebarOpen,
-            })}
-          >
-            {children}
-          </div>
-        </div>
-      </Main>
-    </BaseLayout>
-  );
-};

platform/ui/src/gatsby-theme-docz/components/NavGroup/index.js

@@ -1,56 +0,0 @@
-/** @jsx jsx */
-import { jsx } from 'theme-ui';
-import React from 'react';
-import { useCurrentDoc } from 'docz';
-
-import * as styles from 'gatsby-theme-docz/src/components/NavGroup/styles';
-import { NavLink } from 'gatsby-theme-docz/src/components/NavLink';
-import { ChevronDown } from 'gatsby-theme-docz/src/components/Icons';
-
-export const NavGroup = ({ item, sidebarRef }) => {
-  const currentDoc = useCurrentDoc();
-  const currentDocRef = React.useRef();
-  const { name, menu } = item;
-  const [subheadingsVisible, setShowsubheadings] = React.useState(
-    currentDoc.menu === name
-  );
-  const toggleSubheadings = () => setShowsubheadings(!subheadingsVisible);
-  React.useEffect(() => {
-    if (sidebarRef.current && currentDocRef.current) {
-      sidebarRef.current.scrollTo(0, currentDocRef.current.offsetTop);
-    }
-  }, [sidebarRef]);
-  return (
-    <div sx={styles.wrapper} data-testid="nav-group">
-      <div
-        sx={styles.title}
-        onClick={toggleSubheadings}
-        role="button"
-        onKeyDown={toggleSubheadings}
-        tabIndex="0"
-      >
-        {item.name}
-        <ChevronDown sx={styles.chevron({ active: subheadingsVisible })} />
-      </div>
-      <div sx={styles.sublinkWrapper} data-testid="nav-group-links">
-        {menu &&
-          subheadingsVisible &&
-          menu.map(menu => {
-            if (currentDoc.route === menu.route) {
-              return (
-                <NavLink key={menu.id} item={menu} ref={currentDocRef}>
-                  {menu.name}
-                </NavLink>
-              );
-            }
-
-            return (
-              <NavLink key={menu.id} item={menu}>
-                {menu.name}
-              </NavLink>
-            );
-          })}
-      </div>
-    </div>
-  );
-};

platform/ui/src/gatsby-theme-docz/components/Sidebar/index.js

@@ -1,141 +0,0 @@
-/** @jsx jsx */
-/** @jsxFrag React.Fragment */
-import React, { useState, useRef, useEffect } from 'react';
-import classnames from 'classnames';
-
-import { jsx } from 'theme-ui';
-import { useMenus, useCurrentDoc } from 'docz';
-
-import { NavSearch } from 'gatsby-theme-docz/src/components/NavSearch';
-import { NavLink } from 'gatsby-theme-docz/src/components/NavLink';
-import { NavGroup } from 'gatsby-theme-docz/src/components/NavGroup';
-
-export const Sidebar = React.forwardRef((props, ref) => {
-  const [query, setQuery] = useState('');
-  const menus = useMenus({ query });
-  const currentDoc = useCurrentDoc();
-  const currentDocRef = useRef();
-  const handleChange = ev => {
-    setQuery(ev.target.value);
-  };
-  useEffect(() => {
-    if (ref.current && currentDocRef.current) {
-      ref.current.scrollTo(0, currentDocRef.current.offsetTop);
-    }
-  }, [ref]);
-
-  const customMenus = {
-    Components: [],
-    'Custom Hooks': [],
-    System: [],
-    Examples: [],
-  };
-
-  const MENU_CATEGORIES = {
-    Components: [
-      'General',
-      'Form',
-      'Navigation',
-      'Feedback',
-      'Data Display',
-      'Other',
-    ],
-    'Custom Hooks': ['ModalProvider', 'ViewportDialogProvider'],
-    Examples: ['Views'],
-    System: ['Colors'],
-  };
-
-  const renderMenuCategories = () => {
-    return Object.keys(customMenus).map(menuName => {
-      return (
-        <div key={menuName}>
-          <h2 className="pl-2 border-l-8 -ml-4 border-secondary-active">
-            {menuName}
-          </h2>
-          {customMenus[menuName].map(item => item)}
-        </div>
-      );
-    });
-  };
-
-  const getMenuCategory = menuName => {
-    return Object.keys(MENU_CATEGORIES).find(category => {
-      if (MENU_CATEGORIES[category].includes(menuName)) {
-        return category;
-      }
-      return null;
-    });
-  };
-
-  return (
-    <>
-      {props.sidebarOpen && (
-        <>
-          <div className="block lg:hidden">
-            <div
-              role="button"
-              onClick={() => props.onClick()}
-              onKeyDown={() => props.onClick()}
-              className="fixed left-0 w-full h-full bg-black opacity-80"
-              style={{ top: 81, zIndex: 99999 }}
-              tabIndex="0"
-            />
-          </div>
-          <div
-            ref={ref}
-            data-testid="sidebar"
-            className={classnames(
-              'p-8 flex-col bg-white top-0 overflow-auto border-r border-gray-400 hidden fixed left-0 bottom-0 lg:block lg:sticky lg:h-screen lg:top-0'
-            )}
-            style={{
-              display: props.sidebarOpen ? 'block' : 'none',
-              zIndex: 99999,
-              minWidth: 250,
-            }}
-          >
-            <NavSearch
-              placeholder="Type to search..."
-              value={query}
-              onChange={handleChange}
-            />
-            {menus &&
-              menus.map(menu => {
-                const isGroup = !!menu.menu;
-                const Component = isGroup ? NavGroup : NavLink;
-                const menuCategory = getMenuCategory(menu.name) || null;
-
-                if (menuCategory) {
-                  customMenus[menuCategory].push(
-                    <Component key={menu.id} item={menu} sidebarRef={ref}>
-                      {!isGroup && menu.name}
-                    </Component>
-                  );
-                  return null;
-                }
-
-                if (!menu.route) {
-                  return (
-                    <NavGroup key={menu.id} item={menu} sidebarRef={ref} />
-                  );
-                }
-
-                if (menu.route === currentDoc.route) {
-                  return (
-                    <NavLink key={menu.id} item={menu} ref={currentDocRef}>
-                      {menu.name}
-                    </NavLink>
-                  );
-                }
-                return (
-                  <NavLink key={menu.id} item={menu}>
-                    {menu.name}
-                  </NavLink>
-                );
-              })}
-            {renderMenuCategories()}
-          </div>
-        </>
-      )}
-    </>
-  );
-});

platform/ui/src/gatsby-theme-docz/theme.css

@@ -1,24 +0,0 @@
-/**
-  OVERRIDE DOCZ THEME
-*/
-
-[data-testid='live-preview'] {
-  background: #000;
-}
-
-#main-layout {
-  @apply font-sans;
-}
-
-#main-container > h2 {
-  @apply font-bold my-8 text-2xl;
-}
-
-#main-container > ul li a,
-#main-container > a {
-  @apply underline text-blue-500;
-}
-
-code {
-  @apply bg-gray-200 text-lg text-black px-2 py-1 rounded;
-}

platform/ui/src/gatsby-theme-docz/wrapper.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import './tailwind.css';
-import './theme.css';
-
-const Wrapper = ({ children }) => <>{children}</>;
-
-Wrapper.propTypes = {
-  children: PropTypes.node,
-};
-
-export default Wrapper;

platform/ui/src/index.js

@@ -1,5 +1,5 @@
 /** UTILS */
-import utils from './src/utils';
+import utils from './utils';
 export { utils };
 
 /** CONTEXT/HOOKS */
@@ -28,7 +28,7 @@ export {
   UserAuthenticationContext,
   UserAuthenticationProvider,
   useUserAuthentication,
-} from './src/contextProviders';
+} from './contextProviders';
 
 /** COMPONENTS */
 export {
@@ -96,7 +96,7 @@ export {
   ViewportGrid,
   ViewportPane,
   WindowLevelMenuItem,
-} from './src/components';
+} from './components';
 
 /** VIEWS */
-export { StudyList, Viewer } from './src/views';
+export { StudyList, Viewer } from './views';

platform/ui/src/views/StudyList/StudyList.js

@@ -284,10 +284,10 @@ const StudyList = () => {
           />
         </>
       ) : (
-          <div className="flex flex-col items-center justify-center pt-48">
+        <div className="flex flex-col items-center justify-center pt-48">
-            <EmptyStudies />
+          <EmptyStudies />
-          </div>
+        </div>
-        )}
+      )}
     </div>
   );
 };

platform/ui/tailwind.config.js

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

platform/viewer/.webpack/webpack.pwa.js

@@ -5,8 +5,6 @@ const { merge } = require('webpack-merge');
 const webpack = require('webpack');
 const webpackBase = require('./../../../.webpack/webpack.base.js');
 // ~~ Plugins
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
-  .BundleAnalyzerPlugin;
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin');
@@ -27,8 +25,6 @@ const PROXY_DOMAIN = process.env.PROXY_DOMAIN;
 const ENTRY_TARGET = process.env.ENTRY_TARGET || `${SRC_DIR}/index.js`;
 const Dotenv = require('dotenv-webpack');
 
-console.warn(path.resolve(__dirname, '../node_modules'));
-
 module.exports = (env, argv) => {
   const baseConfig = webpackBase(env, argv, { SRC_DIR, DIST_DIR });
   const isProdBuild = process.env.NODE_ENV === 'production';
@@ -57,8 +53,6 @@ module.exports = (env, argv) => {
     },
     plugins: [
       new Dotenv(),
-      // Uncomment to generate bundle analyzer
-      // new BundleAnalyzerPlugin(),
       // Clean output.path
       new CleanWebpackPlugin(),
       // Copy "Public" Folder to Dist

platform/viewer/package.json

@@ -38,11 +38,11 @@
     "README.md"
   ],
   "peerDependencies": {
-    "cornerstone-core": "^2.3.0",
+    "cornerstone-core": "^2.3.0"
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
   },
   "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "@babel/runtime": "7.7.6",
     "@ohif/core": "^2.5.1",
     "@ohif/extension-cornerstone": "^2.4.0",