{renderRowTitle('Important Links')}
-
+
Visit the forum
@@ -102,6 +99,6 @@ const AboutModal = ({buildNumber, versionNumber}) => {
AboutModal.propTypes = {
buildNumber: PropTypes.string,
versionNumber: PropTypes.string,
-}
+};
export default AboutModal;
diff --git a/platform/ui/src/components/AboutModal/__stories__/aboutModal.stories.mdx b/platform/ui/src/components/AboutModal/__stories__/aboutModal.stories.mdx
new file mode 100644
index 000000000..5e48f2b23
--- /dev/null
+++ b/platform/ui/src/components/AboutModal/__stories__/aboutModal.stories.mdx
@@ -0,0 +1,48 @@
+import AboutModal from '../AboutModal';
+import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
+import {
+ createComponentTemplate,
+ createStoryMetaSettings,
+} from '../../../storybook/functions/create-component-story';
+
+export const argTypes = {
+ component: AboutModal,
+ title: 'Modals/About',
+};
+
+
+
+export const aboutTemplate = args => (
+
+
+
+
+
+);
+
+{title}
);
@@ -40,11 +40,9 @@ const Dropdown = ({ id, children, showDropdownIcon, list }) => {
const renderTitleElement = () => {
return (
-
+
+);
+
+
+
+);
+
+
+
{children}
- {showDropdownIcon && (
-
);
};
@@ -94,7 +92,7 @@ const Dropdown = ({ id, children, showDropdownIcon, list }) => {
return (
-
+
,
+ showDropdownIcon: true,
+ list: [
+ {
+ title: 'Item 1',
+ icon: 'clipboard',
+ onClick: () => {
+ alert('Item 1 clicked');
+ },
+ },
+ {
+ title: 'Item 2',
+ icon: 'tracked',
+ onClick: () => {
+ alert('Item 2 clicked');
+ },
+ },
+ ],
+ }}
+ >
+ {DropdownTemplate.bind({})}
+
+
+
+## Contribute
+
+
diff --git a/platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.jsx b/platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.jsx
index 0d1fcb105..ed522cb28 100644
--- a/platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.jsx
+++ b/platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.jsx
@@ -14,7 +14,7 @@ const ExpandableToolbarButton = ({
icon,
className,
content: Content,
- contentProps
+ contentProps,
}) => {
const classes = {
type: {
@@ -54,7 +54,12 @@ const ExpandableToolbarButton = ({
{renderTitleElement()}
diff --git a/platform/ui/src/components/Dropdown/__stories__/dropdown.stories.mdx b/platform/ui/src/components/Dropdown/__stories__/dropdown.stories.mdx
new file mode 100644
index 000000000..b52ff0d9a
--- /dev/null
+++ b/platform/ui/src/components/Dropdown/__stories__/dropdown.stories.mdx
@@ -0,0 +1,75 @@
+import Dropdown from '../Dropdown';
+import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
+import { createComponentTemplate } from '../../../storybook/functions/create-component-story';
+
+export const argTypes = {
+ component: Dropdown,
+ title: 'Components/Dropdown',
+};
+
+
+
+export const DropdownTemplate = (args) => (
+ // Todo: this should not set a background
+
+
+);
+
+
-
+
@@ -62,9 +67,11 @@ const ExpandableToolbarButton = ({
);
};
-const noop = () => { };
+const noop = () => {};
ExpandableToolbarButton.defaultProps = {
+ id: '',
+ icon: 'clipboard',
isActive: false,
type: 'primary',
content: null,
diff --git a/platform/ui/src/components/Header/__stories__/Header.stories.mdx b/platform/ui/src/components/Header/__stories__/Header.stories.mdx
new file mode 100644
index 000000000..bfe34d74a
--- /dev/null
+++ b/platform/ui/src/components/Header/__stories__/Header.stories.mdx
@@ -0,0 +1,51 @@
+import Header from '../Header';
+import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
+import { createComponentTemplate } from '../../../storybook/functions/create-component-story';
+
+export const argTypes = {
+ component: Header,
+ title: 'Components/Header',
+};
+
+
+
+export const HeaderTemplate = createComponentTemplate(Header);
+
+
-
+
+
{splitedHotkeys.map((hotkeys, index) => {
return (
-
-
+
+
{hotkeys.map((hotkey, hotkeyIndex) => {
const [id, definition] = hotkey;
const isFirst = hotkeyIndex === 0;
const error = errors[id];
- const onChangeHandler = keys => onHotkeyChangeHandler(id, { ...definition, keys });
+ const onChangeHandler = keys =>
+ onHotkeyChangeHandler(id, { ...definition, keys });
return (
-
-
+
+
{t('Function')}
-
+
+ variant="subtitle"
+ className={classNames(
+ 'pr-6 h-full flex flex-row items-center whitespace-nowrap',
+ isFirst && 'mt-5'
+ )}
+ >
{definition.label}
-
+
{t('Shortcut')}
-
-
@@ -101,7 +129,7 @@ const HotkeysPreferences = ({ disabled, hotkeyDefinitions, errors: controlledErr
);
};
-const noop = () => { };
+const noop = () => {};
HotkeysPreferences.propTypes = {
onChange: PropTypes.func,
@@ -113,12 +141,12 @@ HotkeysPreferences.propTypes = {
unpause: PropTypes.func.isRequired,
startRecording: PropTypes.func.isRequired,
record: PropTypes.func.isRequired,
- }).isRequired
+ }).isRequired,
};
HotkeysPreferences.defaultProps = {
onChange: noop,
- disabled: false
+ disabled: false,
};
export default HotkeysPreferences;
diff --git a/platform/ui/src/components/Icon/Icon.jsx b/platform/ui/src/components/Icon/Icon.jsx
index 7f32ae937..f99723bd7 100644
--- a/platform/ui/src/components/Icon/Icon.jsx
+++ b/platform/ui/src/components/Icon/Icon.jsx
@@ -2,12 +2,21 @@ import React from 'react';
import PropTypes from 'prop-types';
import getIcon from './getIcon';
-const Icon = ({ name, ...otherProps }) => {
+const Icon = ({ name, className, ...otherProps }) => {
+ if (className) {
+ return (
+ {getIcon(name, { ...otherProps })} ;
};
Icon.propTypes = {
name: PropTypes.string.isRequired,
+ className: PropTypes.string,
};
export default Icon;
diff --git a/platform/ui/src/components/Icon/__stories__/icon.stories.mdx b/platform/ui/src/components/Icon/__stories__/icon.stories.mdx
new file mode 100644
index 000000000..a1617aa96
--- /dev/null
+++ b/platform/ui/src/components/Icon/__stories__/icon.stories.mdx
@@ -0,0 +1,92 @@
+import Icon from '../Icon';
+import { ICONS } from '../getIcon';
+
+import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
+import { createComponentTemplate } from '../../../storybook/functions/create-component-story';
+
+export const argTypes = {
+ component: Icon,
+ title: 'Components/Icon',
+};
+
+
+
+export const IconTemplate = (args) => (
+ // Todo: Icon colors
+
+
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+ iconName: 'clipboard',
+};
diff --git a/platform/ui/src/components/Input/__stories__/input.stories.mdx b/platform/ui/src/components/Input/__stories__/input.stories.mdx
new file mode 100644
index 000000000..7a156cbb4
--- /dev/null
+++ b/platform/ui/src/components/Input/__stories__/input.stories.mdx
@@ -0,0 +1,75 @@
+import Input from '../Input';
+
+import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
+import { createComponentTemplate } from '../../../storybook/functions/create-component-story';
+
+export const argTypes = {
+ component: Input,
+ title: 'Components/Input',
+};
+
+
+
+export const InputTemplate = createComponentTemplate(Input);
+
+
+
+
+ {getIcon(name, className, { ...otherProps })}
+
+ );
+ }
+
return
+
+);
+
+
+
+);
+
+
+
+);
+
+
+
+);
+
+
+
+);
+
+
+
+);
+
+
+
+);
+
+
+
+);
+
+
+
+
+
+);
+
+
+
+
+
+
+
+);
+
+ (
+
+ +### Primary Colors + +
+ +#### Usage + +Therefore you can use the className to style the color of a component (using +`bg-${color-class}`) or text (using `text-${color-class}`). + +```jsx +
+
+ +### Secondary Colors + +
+ +### Common Colors + +
+ +### Custom Colors + +{children} ;
+};
diff --git a/platform/ui/src/storybook/components/footer/footer.jsx b/platform/ui/src/storybook/components/footer/footer.jsx
new file mode 100644
index 000000000..6b0787a38
--- /dev/null
+++ b/platform/ui/src/storybook/components/footer/footer.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const Footer = ({ componentRelativePath }) => {
+ return (
+
+ +### Install OHIF Packages + +Install OHIF Packages using `yarn install` command. + +
+ +### Change Directory to OHIF UI + +Change directory to OHIF UI using `cd platform/ui` command. + +
+ +### Run Storybook + +You can now run the storybook using `yarn storybook` command. This will open the +storybook in your browser. You should be able to interact with Storybook and the +already existing stories. + +
+ +### Writing a Story + +Stories for each UI component are stored in the `__stories__` folder. Stories +are written in the `mdx` file format. You can read more about `mdx` file format +[here](https://storybook.js.org/docs/react/api/mdx). In summary, the `mdx` file +format is a way to write stories in a plain text format, but with the ability to +use React components. + +For Components that don't have a `mdx` file, you need to create a `mdx` file, +Storybook automatically fetch the `mdx` file and render the story. You can use +one of the already existing `mdx` files for the component (e.g. +`button.stories.mdx`). If there is already a `mdx` file for the component, you +can add you usage in the `usage` section of the `mdx` file. (again you can see +`button.stories.mdx` for an example). + +## Potential Issues + +There are some potential issues that you might encounter when writing a story +for a component. Please read the following sections carefully. + +### Wrong Code Block Formatting + +`mdx` is sensitive to whitespaces, so if you have a code block that has spaces +in between the code block, it will not render correctly, and you will get an +error. Always check the code block when you get an error. + +For instance the following code block will generate the error (notice the extra +vertical space in the code block): + +```jsx +export const TooltipTemplate = (args) => ( +
+ +### Stories with the same name + +You should not have multiple stories with the same name. If you have multiple +stories with the same name, it will cause an error. + +The following code block will generate an error: + +```jsx + + + +``` diff --git a/platform/ui/src/storybook/functions/create-component-story.js b/platform/ui/src/storybook/functions/create-component-story.js new file mode 100644 index 000000000..07f27dcae --- /dev/null +++ b/platform/ui/src/storybook/functions/create-component-story.js @@ -0,0 +1,49 @@ +import React from 'react'; + +export function createComponentTemplate(ComponentClass) { + return args =>
+ +## Storybook Introduction + +We use [Storybook](https://storybook.js.org/) to document and showcase our +components. On the left side of the screen, you'll see the component tree +categorized into different sections. + +
+ alert(`Series ${direction}`)}
+ studyData={{
+ label: 'A',
+ isTracked: false,
+ isLocked: false,
+ isRehydratable: true,
+ studyDate: '07-Sep-2010',
+ 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: '2.0mm',
+ spacing: '1.25mm',
+ scanner: 'Aquilion',
+ },
+ }}
+ />
+
+)
diff --git a/platform/ui/src/storybook/assets/button.png b/platform/ui/src/storybook/assets/button.png
new file mode 100644
index 000000000..3f665cb38
Binary files /dev/null and b/platform/ui/src/storybook/assets/button.png differ
diff --git a/platform/ui/src/storybook/assets/code.png b/platform/ui/src/storybook/assets/code.png
new file mode 100644
index 000000000..f377145c0
Binary files /dev/null and b/platform/ui/src/storybook/assets/code.png differ
diff --git a/platform/ui/src/storybook/assets/codeblock-error.png b/platform/ui/src/storybook/assets/codeblock-error.png
new file mode 100644
index 000000000..5bd2f44b5
Binary files /dev/null and b/platform/ui/src/storybook/assets/codeblock-error.png differ
diff --git a/platform/ui/src/storybook/assets/component-tree.png b/platform/ui/src/storybook/assets/component-tree.png
new file mode 100644
index 000000000..13384dc4b
Binary files /dev/null and b/platform/ui/src/storybook/assets/component-tree.png differ
diff --git a/platform/ui/src/storybook/assets/header.png b/platform/ui/src/storybook/assets/header.png
new file mode 100644
index 000000000..751f0b6c5
Binary files /dev/null and b/platform/ui/src/storybook/assets/header.png differ
diff --git a/platform/ui/src/storybook/assets/sandbox.png b/platform/ui/src/storybook/assets/sandbox.png
new file mode 100644
index 000000000..6d2fbf526
Binary files /dev/null and b/platform/ui/src/storybook/assets/sandbox.png differ
diff --git a/platform/ui/src/storybook/assets/storybook.png b/platform/ui/src/storybook/assets/storybook.png
new file mode 100644
index 000000000..696313257
Binary files /dev/null and b/platform/ui/src/storybook/assets/storybook.png differ
diff --git a/platform/ui/src/storybook/color/color.jsx b/platform/ui/src/storybook/color/color.jsx
new file mode 100644
index 000000000..5a0de8dbd
--- /dev/null
+++ b/platform/ui/src/storybook/color/color.jsx
@@ -0,0 +1,6 @@
+import React from 'react';
+
+// Create a square box with a given color
+export const Color = ({ color }) => {
+ return ;
+};
diff --git a/platform/ui/src/storybook/colors.stories.mdx b/platform/ui/src/storybook/colors.stories.mdx
new file mode 100644
index 000000000..32b97f15f
--- /dev/null
+++ b/platform/ui/src/storybook/colors.stories.mdx
@@ -0,0 +1,117 @@
+import { Meta } from '@storybook/addon-docs';
+import { Color } from './color/color';
+
+
+
+## Overview
+
+Below you can see the color palette of the application and the className to use
+for each color.
+
++ +### Primary Colors + +
+
+
+
+
+ primary-dark
+
+
+
+ primary-light
+
+
+
+ primary-main
+
+
+
+ primary-active
+
++ +#### Usage + +Therefore you can use the className to style the color of a component (using +`bg-${color-class}`) or text (using `text-${color-class}`). + +```jsx +
OHIF UI Components
+```
+
+to render
+
+OHIF UI Components
+
++
+ +### Secondary Colors + +
+
+
+
+
+ secondary-dark
+
+
+
+ secondary-light
+
+
+
+ secondary-main
+
+
+
+ secondary-active
+
++ +### Common Colors + +
+
+
+
+
+ common-bright
+
+
+
+ common-light
+
+
+
+ common-main
+
+
+
+ common-dark
+
+
+
+ common-active
+
++ +### Custom Colors + +
+
diff --git a/platform/ui/src/storybook/components/anchor-list-item/anchor-list-item.jsx b/platform/ui/src/storybook/components/anchor-list-item/anchor-list-item.jsx
new file mode 100644
index 000000000..f1171a322
--- /dev/null
+++ b/platform/ui/src/storybook/components/anchor-list-item/anchor-list-item.jsx
@@ -0,0 +1,3 @@
+export const AnchorListItem = ({ children }) => {
+ return
+
+ customgreen-100
+
+
+
+ customblue-100
+
+
+
+ customblue-200
+
+
+
+ );
+};
diff --git a/platform/ui/src/storybook/components/heading/heading.jsx b/platform/ui/src/storybook/components/heading/heading.jsx
new file mode 100644
index 000000000..95059bb8f
--- /dev/null
+++ b/platform/ui/src/storybook/components/heading/heading.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+function GitHubLogo() {
+ return (
+
+ );
+}
+
+export const Heading = ({ title, componentRelativePath }) => {
+ return (
+ + We always welcome feedback and suggestions. If you are interested to add + additional usecases, please send us a pull request. Edit this page on{' '} + + Github + + . +
+
+
+ );
+};
diff --git a/platform/ui/src/storybook/components/image/image.jsx b/platform/ui/src/storybook/components/image/image.jsx
new file mode 100644
index 000000000..896ff4e4f
--- /dev/null
+++ b/platform/ui/src/storybook/components/image/image.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+// centers the image in the container in the page
+export const WithImage = ({ children, image, alt, className }) => (
+
+
+ {componentRelativePath && (
+ + {title} +
+
+
+
+ )}
+
+ 
+ {children}
+
+);
diff --git a/platform/ui/src/storybook/components/index.jsx b/platform/ui/src/storybook/components/index.jsx
new file mode 100644
index 000000000..210348827
--- /dev/null
+++ b/platform/ui/src/storybook/components/index.jsx
@@ -0,0 +1,17 @@
+// https://github.com/mondaycom/monday-ui-react-core/tree/master/src/storybook
+//
+import { Heading } from './heading/heading';
+import { AnchorListItem } from './anchor-list-item/anchor-list-item';
+import { LinkComponent } from './link-component/link-component';
+import { SectionName } from './section-name/section-name';
+import { Footer } from './footer/footer';
+import { WithImage } from './image/image';
+
+export {
+ Heading,
+ AnchorListItem,
+ LinkComponent,
+ SectionName,
+ Footer,
+ WithImage,
+};
diff --git a/platform/ui/src/storybook/components/link-component/link-component.jsx b/platform/ui/src/storybook/components/link-component/link-component.jsx
new file mode 100644
index 000000000..52b42447e
--- /dev/null
+++ b/platform/ui/src/storybook/components/link-component/link-component.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+export const LinkComponent = ({
+ children,
+ href,
+ target: originalTarget,
+ rel,
+}) => {
+ const onClick = (event) => {
+ if (originalTarget) {
+ return;
+ }
+
+ const target = document.querySelector(href);
+ if (target) {
+ event.preventDefault();
+ event.stopPropagation();
+ target.scrollIntoView();
+ }
+ };
+ return (
+
+ {children}
+
+ );
+};
diff --git a/platform/ui/src/storybook/components/section-name/section-name.jsx b/platform/ui/src/storybook/components/section-name/section-name.jsx
new file mode 100644
index 000000000..2e29b4fa8
--- /dev/null
+++ b/platform/ui/src/storybook/components/section-name/section-name.jsx
@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+import { useMemo } from 'react';
+
+export const SectionName = ({ className, children, ...props }) => {
+ const id = useMemo(
+ () =>
+ children
+ .toLowerCase()
+ .split(' ')
+ .join('-'),
+ [children]
+ );
+ // eslint-disable-next-line jsx-a11y/heading-has-content
+ return (
+ + {children} +
+ ); +}; + +SectionName.propTypes = { + children: PropTypes.string.isRequired, +}; diff --git a/platform/ui/src/storybook/contribute.stories.mdx b/platform/ui/src/storybook/contribute.stories.mdx new file mode 100644 index 000000000..1562ceee9 --- /dev/null +++ b/platform/ui/src/storybook/contribute.stories.mdx @@ -0,0 +1,110 @@ +import { Meta } from '@storybook/addon-docs'; +import { WithImage } from './components'; +import { WelcomeHeader } from './header/header'; + +import StoryBook from './assets/storybook.png'; +import CodeBlock from './assets/codeblock-error.png'; + + + +## How to Contribute to the Docs + +We are always looking for new contributors. If you are interested in +contributing to the docs, please follow below instructions to run the storyBook +locally and submit your new stories. + ++ +### Install OHIF Packages + +Install OHIF Packages using `yarn install` command. + +
+ +### Change Directory to OHIF UI + +Change directory to OHIF UI using `cd platform/ui` command. + +
+ +### Run Storybook + +You can now run the storybook using `yarn storybook` command. This will open the +storybook in your browser. You should be able to interact with Storybook and the +already existing stories. + +
+ +### Writing a Story + +Stories for each UI component are stored in the `__stories__` folder. Stories +are written in the `mdx` file format. You can read more about `mdx` file format +[here](https://storybook.js.org/docs/react/api/mdx). In summary, the `mdx` file +format is a way to write stories in a plain text format, but with the ability to +use React components. + +For Components that don't have a `mdx` file, you need to create a `mdx` file, +Storybook automatically fetch the `mdx` file and render the story. You can use +one of the already existing `mdx` files for the component (e.g. +`button.stories.mdx`). If there is already a `mdx` file for the component, you +can add you usage in the `usage` section of the `mdx` file. (again you can see +`button.stories.mdx` for an example). + +## Potential Issues + +There are some potential issues that you might encounter when writing a story +for a component. Please read the following sections carefully. + +### Wrong Code Block Formatting + +`mdx` is sensitive to whitespaces, so if you have a code block that has spaces +in between the code block, it will not render correctly, and you will get an +error. Always check the code block when you get an error. + +For instance the following code block will generate the error (notice the extra +vertical space in the code block): + +```jsx +export const TooltipTemplate = (args) => ( +
+
+);
+```
+
+
+
+
+ // Imagine a whitespace here, we cannot show the extra vertical space, since
+ mdx will generate error
+
+ + +### Stories with the same name + +You should not have multiple stories with the same name. If you have multiple +stories with the same name, it will cause an error. + +The following code block will generate an error: + +```jsx + + + +``` diff --git a/platform/ui/src/storybook/functions/create-component-story.js b/platform/ui/src/storybook/functions/create-component-story.js new file mode 100644 index 000000000..07f27dcae --- /dev/null +++ b/platform/ui/src/storybook/functions/create-component-story.js @@ -0,0 +1,49 @@ +import React from 'react'; + +export function createComponentTemplate(ComponentClass) { + return args =>
+ 
+
+);
diff --git a/platform/ui/src/storybook/welcome.stories.mdx b/platform/ui/src/storybook/welcome.stories.mdx
new file mode 100644
index 000000000..74eb33dbf
--- /dev/null
+++ b/platform/ui/src/storybook/welcome.stories.mdx
@@ -0,0 +1,62 @@
+import { Meta } from '@storybook/addon-docs';
+import { WithImage } from './components';
+import { WelcomeHeader } from './header/header';
+
+import ComponentTree from './assets/component-tree.png';
+import Button from './assets/button.png';
+import Sandbox from './assets/sandbox.png';
+import Code from './assets/code.png';
+
+
+
++ +## Storybook Introduction + +We use [Storybook](https://storybook.js.org/) to document and showcase our +components. On the left side of the screen, you'll see the component tree +categorized into different sections. + +