othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip on switching from docz to docusaurus

Browse Source
This commit is contained in:
Erik Ziegler 2021-07-13 23:48:16 +02:00
parent 69e36106e3
commit 09469e6ac5
97 changed files with 1505 additions and 7132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.webpack/webpack.base.js
View File

@ -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

7
package.json
View File

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

2
platform/core/.webpack/webpack.prod.js
View File

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

11
platform/ui/src/components/AboutModal/AboutModal.mdx → platform/docs/docs/component-library/components/AboutModal.mdx
View File

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

38
platform/ui/src/components/Button/Button.mdx → platform/docs/docs/component-library/components/Button.mdx
View File

@ -4,8 +4,7 @@ menu: General
route: components/button
---
import { Playground, Props } from 'docz';
import { Button, IconButton, Icon } from '../';
import { Button, IconButton, Icon } from '@ohif/ui';
# Button
@ -19,7 +18,7 @@ import { Button } from '@ohif/ui';
## Outlined Buttons
<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} />
````

20
platform/ui/src/components/ButtonGroup/ButtonGroup.mdx → platform/docs/docs/component-library/components/ButtonGroup.mdx
View File

@ -4,8 +4,7 @@ menu: General
route: components/buttonGroup
---
import { Playground, Props } from 'docz';
import { ButtonGroup, Button, IconButton, Icon } from '../';
import { ButtonGroup, Button, IconButton, Icon } from '@ohif/ui';
# ButtonGroup
@ -19,7 +18,7 @@ import { ButtonGroup } from '@ohif/ui';
## Basic button group
<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} />
````

16
platform/ui/src/components/CinePlayer/CinePlayer.mdx → platform/docs/docs/component-library/components/CinePlayer.mdx
View File

@ -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} />
```

14
platform/ui/src/components/ContextMenu/ContextMenu.mdx → platform/docs/docs/component-library/components/ContextMenu.mdx
View File

@ -4,8 +4,7 @@ menu: General
route: components/contextMenu
---
import { Playground, Props } from 'docz';
import { ContextMenu } from '../';
import { ContextMenu } from '@ohif/ui';
# Context Menu
@ -17,8 +16,9 @@ import { ContextMenu } from '../';
import { ContextMenu } from '@ohif/ui';
```
<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} />
```

15
platform/ui/src/components/DateRange/DateRange.mdx → platform/docs/docs/component-library/components/DateRange.mdx
View File

@ -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} />
```

70
platform/docs/docs/component-library/components/Dropdown.mdx Normal file
View File

@ -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} />
```

12
platform/ui/src/components/EmptyStudies/EmptyStudies.mdx → platform/docs/docs/component-library/components/EmptyStudies.mdx
View File

@ -4,8 +4,7 @@ menu: Data Display
route: components/empty-studies
---
import { Playground, Props } from 'docz';
import { EmptyStudies } from '../';
import { EmptyStudies } from '@ohif/ui';
# Empty Studies
@ -19,12 +18,13 @@ import { EmptyStudies } from '@ohif/ui';
## Basic usage
<Playground>
<div className="p-4">
```jsx live
<div className="p-4">
<EmptyStudies />
</div>
</Playground>
</div>
```
## Properties
<Props of={EmptyStudies} />
```

12
platform/ui/src/components/ErrorBoundary/ErrorBoundary.mdx → platform/docs/docs/component-library/components/ErrorBoundary.mdx
View File

@ -4,8 +4,7 @@ menu: Data Display
route: components/errorBoundary
---
import { Playground, Props } from 'docz';
import { ErrorBoundary } from '../';
import { ErrorBoundary } from '@ohif/ui';
# Error Boundary
@ -19,7 +18,7 @@ import { ErrorBoundary } from '@ohif/ui';
## Basic usage
<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} />
````

90
platform/docs/docs/component-library/components/ExpandableToolbarButton.mdx Normal file
View File

@ -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} />
```

14
platform/ui/src/components/Input/Input.mdx → platform/docs/docs/component-library/components/Input.mdx
View File

@ -4,8 +4,7 @@ menu: Form
route: components/input
---
import { Playground, Props } from 'docz';
import { Input } from '../';
import { Input } from '@ohif/ui';
# Input
@ -17,8 +16,9 @@ import { Input } from '@ohif/ui';
## Basic usage
<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} />
```

17
platform/ui/src/components/InputDateRange/InputDateRange.mdx → platform/docs/docs/component-library/components/InputDateRange.mdx
View File

@ -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} />
```

15
platform/ui/src/components/InputGroup/InputGroup.mdx → platform/docs/docs/component-library/components/InputGroup.mdx
View File

@ -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} />
```

17
platform/ui/src/components/InputMultiSelect/InputMultiSelect.mdx → platform/docs/docs/component-library/components/InputMultiSelect.mdx
View File

@ -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} />
```

24
platform/ui/src/components/InputText/InputText.mdx → platform/docs/docs/component-library/components/InputText.mdx
View File

@ -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} />
```

14
platform/ui/src/components/Label/Label.mdx → platform/docs/docs/component-library/components/Label.mdx
View File

@ -4,8 +4,7 @@ menu: Form
route: components/label
---
import { Playground, Props } from 'docz';
import { Label } from '../';
import { Label } from '@ohif/ui';
# Label
@ -17,16 +16,19 @@ import { Label } from '@ohif/ui';
## Basic usage
<Playground>
{() => {
```jsx live
{
() => {
return (
<div className="p-4">
<Label text="Label" />
</div>
);
}}
</Playground>
};
}
```
## Properties
<Props of={Label} />
```

84
platform/docs/docs/component-library/components/ListMenu.mdx Normal file
View File

@ -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} />
```

17
platform/ui/src/components/MeasurementTable/MeasurementTable.mdx → platform/docs/docs/component-library/components/MeasurementTable.mdx
View File

@ -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)),
onEdit: (id) => alert(`Edit: ${id}`),
onClick: id => setActiveMeasurementItem(s => (s === id ? null : 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} />
````

30
platform/docs/docs/component-library/components/NavBar.mdx Normal file
View File

@ -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} />
```

14
platform/ui/src/components/Notification/Notification.mdx → platform/docs/docs/component-library/components/Notification.mdx
View File

@ -4,8 +4,7 @@ menu: Feedback
route: components/notification
---
import { Playground, Props } from 'docz';
import { Notification } from '../';
import { Notification } from '@ohif/ui';
# Notification
@ -20,8 +19,9 @@ import { Notification } from '@ohif/ui';
## Basic usage
<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} />
```

14
platform/ui/src/components/SegmentationTable/SegmentationTable.mdx → platform/docs/docs/component-library/components/SegmentationTable.mdx
View File

@ -4,8 +4,7 @@ menu: Data Display
route: components/segmentationTable
---
import { Playground, Props } from 'docz';
import { SegmentationTable } from '../';
import { SegmentationTable } from '@ohif/ui';
# Segmentation Table
@ -17,8 +16,9 @@ import { SegmentationTable } from '@ohif/ui';
## Basic usage
<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} />
```

16
platform/ui/src/components/Select/Select.mdx → platform/docs/docs/component-library/components/Select.mdx
View File

@ -4,8 +4,7 @@ menu: Form
route: components/select
---
import { Playground, Props } from 'docz';
import { Select } from '../';
import { Select } from '@ohif/ui';
# Select
@ -17,7 +16,7 @@ import { Select } from '@ohif/ui';
## Basic usage
<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} />
````

12
platform/ui/src/components/SidePanel/SidePanel.mdx → platform/docs/docs/component-library/components/SidePanel.mdx
View File

@ -4,8 +4,7 @@ menu: General
route: components/sidePanel
---
import { Playground, Props } from 'docz';
import { SidePanel } from '../';
import { SidePanel } from '@ohif/ui';
# 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} />
````

13
platform/ui/src/components/SplitButton/SplitButton.mdx → platform/docs/docs/component-library/components/SplitButton.mdx
View File

@ -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} />
```

22
platform/ui/src/components/StudyBrowser/StudyBrowser.mdx → platform/docs/docs/component-library/components/StudyBrowser.mdx
View File

@ -4,8 +4,7 @@ menu: General
route: components/studyBrowser
---
import { Playground, Props } from 'docz';
import { StudyBrowser } from '../';
import { StudyBrowser } from '@ohif/ui';
# 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} />
```

15
platform/ui/src/components/StudyItem/StudyItem.mdx → platform/docs/docs/component-library/components/StudyItem.mdx
View File

@ -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} />
```

17
platform/ui/src/components/StudyListFilter/StudyListFilter.mdx → platform/docs/docs/component-library/components/StudyListFilter.mdx
View File

@ -5,9 +5,9 @@ route: components/studyListFilter
---
import { useState } from 'react';
import { Playground, Props } from 'docz';
import { StudyListFilter, Modal } from '../';
import { ModalProvider } from '../../contextProviders';
import { StudyListFilter, Modal } from '@ohif/ui';
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} />
```

19
platform/ui/src/components/StudyListPagination/StudyListPagination.mdx → platform/docs/docs/component-library/components/StudyListPagination.mdx
View File

@ -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} />
```

21
platform/ui/src/components/StudyListTable/StudyListTable.mdx → platform/docs/docs/component-library/components/StudyListTable.mdx
View File

@ -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) =>
isExpanded ? rows.filter((n) => rowKey !== n) : [...rows, rowKey]
setExpandedRows(rows =>
isExpanded ? rows.filter(n => rowKey !== n) : [...rows, rowKey]
),
isExpanded,
};
@ -54,9 +55,11 @@ import { StudyListTable } from '@ohif/ui';
/>
</div>
);
}}
</Playground>
};
}
```
## Properties
<Props of={StudyListTable} />
```

14
platform/ui/src/components/Table/Table.mdx → platform/docs/docs/component-library/components/Table.mdx
View File

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

6
platform/ui/src/components/Thumbnail/Thumbnail.mdx.todo → platform/docs/docs/component-library/components/Thumbnail.mdx.todo
View File

@ -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

6
platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.mdx.todo → platform/docs/docs/component-library/components/ThumbnailNoImage.mdx.todo
View File

@ -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

6
platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.mdx.todo → platform/docs/docs/component-library/components/ThumbnailTracked.mdx.todo
View File

@ -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

46
platform/docs/docs/component-library/components/ToolbarButton.mdx Normal file
View File

@ -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} />
```

40
platform/docs/docs/component-library/components/Tooltip.mdx Normal file
View File

@ -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} />
```

14
platform/ui/src/components/TooltipClipboard/TooltipClipboard.mdx → platform/docs/docs/component-library/components/TooltipClipboard.mdx
View File

@ -4,8 +4,7 @@ menu: Data Display
route: components/tooltipClipboard
---
import { Playground, Props } from 'docz';
import { TooltipClipboard } from '../';
import { TooltipClipboard } from '@ohif/ui';
# 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>
</div>
); }}
</Playground>
</div>;
```
## Properties

12
platform/ui/src/components/Typography/Typography.mdx → platform/docs/docs/component-library/components/Typography.mdx
View File

@ -4,8 +4,7 @@ menu: General
route: components/typography
---
import { Playground, Props } from 'docz';
import { Typography } from '../';
import { Typography } from '@ohif/ui';
# 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} />
````

55
platform/docs/docs/component-library/components/Viewport.mdx Normal file
View File

@ -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} />
```

23
platform/ui/src/components/ViewportActionBar/ViewportActionBar.mdx → platform/docs/docs/component-library/components/ViewportActionBar.mdx
View File

@ -4,8 +4,7 @@ menu: Data Display
route: components/viewportActionBar
---
import { Playground, Props } from 'docz';
import { ViewportActionBar } from '../';
import { ViewportActionBar } from '@ohif/ui';
# Viewport Action Bar
@ -19,8 +18,7 @@ import { ViewportActionBar } from '@ohif/ui';
## Basic usage
<>
<Playground>
````jsx live
<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} />
````

13
platform/ui/src/components/ViewportGrid/ViewportGrid.mdx → platform/docs/docs/component-library/components/ViewportGrid.mdx
View File

@ -4,9 +4,7 @@ menu: General
route: components/viewportGrid
---
import { Playground, Props } from 'docz';
import { DragAndDropProvider } from '../../contextProviders';
import { ViewportGrid } from '../../components';
import { DragAndDropProvider, ViewportGrid } from '@ohif/ui';
# ViewportGrid
@ -20,8 +18,8 @@ import { ViewportGrid } from '@ohif/ui';
## Basic usage
<Playground>
<DragAndDropProvider>
```jsx live
<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>
</Playground>
</DragAndDropProvider>
```
## Properties
<Props of={ViewportGrid} />
```

9
platform/ui/src/components/ViewportPane/ViewportPane.mdx.todo → platform/docs/docs/component-library/components/ViewportPane.mdx.todo
View File

@ -4,9 +4,8 @@ menu: General
route: components/viewport-pane
---
import { Playground, Props } from 'docz';
import { ViewportGrid, ViewportPane } from '../../components';
import { DragAndDropProvider } from '../../contextProviders';
import { ViewportGrid, ViewportPane, DragAndDropProvider } from '@ohif/ui';
# 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

13
platform/ui/src/components/WindowLevelMenuItem/WindowLevelMenuItem.mdx → platform/docs/docs/component-library/components/WindowLevelMenuItem.mdx
View File

@ -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} />
```

16
platform/ui/src/components/Icon/icon.mdx → platform/docs/docs/component-library/components/icon.mdx
View File

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

4
platform/ui/src/contextProviders/ModalProvider.mdx → platform/docs/docs/component-library/context-providers/ModalProvider.mdx
View File

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

24
platform/ui/src/contextProviders/ViewportDialogProvider.mdx → platform/docs/docs/component-library/context-providers/ViewportDialogProvider.mdx
View File

@ -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 ServicesManager from './../../../core/src/services/ServicesManager';
<!-- import UIViewportDialogService from './../../../core/src/services/UIViewportDialogService';
import ServicesManager from './../../../core/src/services/ServicesManager'; !-->
import { Dialog, Button, Notification } from '../components';
import { ViewportDialogProvider, useViewportDialog } from '../contextProviders';
import {
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} />
````

178
platform/docs/docs/component-library/context-providers/ViewportDialogProvider.mdx.todo Normal file
View File

@ -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} />

9
platform/ui/src/pages/Colors/Colors.mdx → platform/docs/docs/component-library/pages/Colors.mdx
View File

@ -3,8 +3,7 @@ name: Colors
route: system/colors
---
import { Playground, Props } from 'docz';
import BackgroundColor from './BackgroundColor';
import BackgroundColor from '@ohif/ui';
# 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',
},
```
````

11
platform/ui/src/pages/getting-started.mdx → platform/docs/docs/component-library/pages/getting-started.mdx
View File

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

7
platform/ui/src/views/StudyList/StudyList.mdx.todo → platform/docs/docs/component-library/views/StudyList.mdx.todo
View File

@ -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>
```

12
platform/ui/src/views/Viewer/Viewer.mdx.todo → platform/docs/docs/component-library/views/Viewer.mdx.todo
View File

@ -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';
import Header from './components/Header';
import { DragAndDropProvider } from '../../contextProviders';
Header,
DragAndDropProvider,
} 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>
```

46
platform/docs/docusaurus.config.js
View File

@ -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",
from: ['/connecting-to-image-archives/google-cloud-healthcare', '/connecting-to-image-archives/google-cloud-healthcare.html']
}
]
to: '/deployment/recipes/google-cloud-healthcare',
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: [
{

1
platform/docs/package.json
View File

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

25
platform/docs/pluginOHIFWebpackConfig.js Normal file
View File

@ -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,
},
},
],
},
};
},
};
};

18
platform/docs/src/theme/ReactLiveScope/index.js Normal file
View File

@ -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;

1
platform/ui/.gitignore vendored
View File

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

8
platform/ui/.webpack/webpack.dev.js Normal file
View File

@ -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 });
};

22
platform/ui/.webpack/webpack.prod.js
View File

@ -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'],
},
],
},
});
};

18
platform/ui/README.md
View File

@ -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
```

18
platform/ui/doczrc.js
View File

@ -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,
};

8
platform/ui/gatsby-config.js
View File

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

43
platform/ui/gatsby-node.js
View File

@ -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)],
},
});
};

40
platform/ui/netlify.toml
View File

@ -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'''

30
platform/ui/package.json
View File

@ -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",
"build": "docz build",
"build:ui:ci": "docz build",
"dev": "docz dev",
"serve": "docz serve",
"docs:preview": "yarn run dev"
"start": "yarn run build --watch",
"build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
"build:package": "yarn run build"
},
"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",
"theme-ui": "0.2.x"
"react-with-direction": "^1.3.1"
},
"devDependencies": {
"autoprefixer": "9.7.4",
"docz": "2.3.2-alpha.0",
"gatsby": "^2.25.0",
"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",
"postcss": "^8.3.5",
"postcss-loader": "^6.1.1",
"prop-types": "15.7.2",
"tailwindcss": "1.6.2"
}

14
platform/ui/src/components/AboutModal/AboutModal.jsx
View File

@ -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="Build number" value={process.env.BUILD_NUM} />
<Row title="Version number" value={versionNumber} />
<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;

2
platform/ui/src/components/CinePlayer/CinePlayer.jsx
View File

@ -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';

68
platform/ui/src/components/Dropdown/Dropdown.mdx
View File

@ -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} />

58
platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.mdx
View File

@ -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} />

2
platform/ui/src/components/Header/Header.jsx
View File

@ -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');

2
platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.jsx
View File

@ -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';

52
platform/ui/src/components/ListMenu/ListMenu.mdx
View File

@ -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} />

4
platform/ui/src/components/Modal/Modal.jsx
View File

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

30
platform/ui/src/components/NavBar/NavBar.mdx
View File

@ -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} />

4
platform/ui/src/components/Snackbar/SnackbarContainer.jsx
View File

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

2
platform/ui/src/components/SplitButton/SplitButton.jsx
View File

@ -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:

2
platform/ui/src/components/StudyListFilter/StudyListFilter.jsx
View File

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

2
platform/ui/src/components/ThemeWrapper/ThemeWrapper.js
View File

@ -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 }) => (

44
platform/ui/src/components/ToolbarButton/ToolbarButton.mdx
View File

@ -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} />

40
platform/ui/src/components/Tooltip/Tooltip.mdx
View File

@ -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} />

2
platform/ui/src/components/UserPreferences/UserPreferences.jsx
View File

@ -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 }) => {

55
platform/ui/src/components/Viewport/Viewport.mdx
View File

@ -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} />

2
platform/ui/src/contextProviders/SnackbarProvider.jsx
View File

@ -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);

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

@ -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>
);
};

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

@ -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>
);
};

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

@ -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>
);
};

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

@ -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>
</>
)}
</>
);
});

24
platform/ui/src/gatsby-theme-docz/theme.css
View File

@ -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;
}

13
platform/ui/src/gatsby-theme-docz/wrapper.js
View File

@ -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;

8
platform/ui/index.js → platform/ui/src/index.js
View File

@ -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';

0
platform/ui/src/gatsby-theme-docz/tailwind.css → platform/ui/src/tailwind.css
View File

2
platform/ui/tailwind.config.js
View File

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

6
platform/viewer/.webpack/webpack.pwa.js
View File

@ -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

6
platform/viewer/package.json
View File

@ -38,11 +38,11 @@
"README.md"
],
"peerDependencies": {
"cornerstone-core": "^2.3.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
"cornerstone-core": "^2.3.0"
},
"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",

6321
yarn.lock
View File

File diff suppressed because it is too large Load Diff