From 5c8ee7f90666b6b1dbcd748554c8c68e6e6f6136 Mon Sep 17 00:00:00 2001 From: Alireza Date: Thu, 10 Feb 2022 14:08:34 -0500 Subject: [PATCH] feat: OHIF-v3 UI Component Library (#2653) * wip on storybook as a replacement for using UI components in docusaurus, since it causes too many problems * fix: storybook webpack config * feat: add more stories * feat: add more stories * feat: add more stories * feat: fix logo and babel runtime error * feat: move to mdx docs for ui * feat: enhanced mdx for header and styles * feat: Add button usecases * feat: Add buttonGroup docs * feat: Add docs and use case to cine and contex menu * feat: fix decorators * feat: add header and dropdown docs * feat: add Icon and input docs * feat: add more docs * feat: add more stories * fix: feedback section * feat: Add doc page * feat: Add typography and color stories * yarn lock * add analytics to v3-ui * new banner image * new viewport component * update review comments --- extensions/cornerstone/package.json | 2 +- extensions/default/package.json | 2 +- extensions/dicom-sr/package.json | 2 +- extensions/measurement-tracking/package.json | 2 +- modes/longitudinal/package.json | 2 +- package.json | 4 +- platform/core/package.json | 2 +- .../docs/platform/extensions/installation.md | 2 +- platform/i18n/package.json | 2 +- platform/ui/.storybook/OHIFTheme.js | 8 + platform/ui/.storybook/custom.css | 3 + platform/ui/.storybook/main.js | 62 + platform/ui/.storybook/manager-head.html | 28 + platform/ui/.storybook/manager.js | 17 + platform/ui/.storybook/preview.js | 84 + platform/ui/README.md | 13 + platform/ui/babel.config.js | 1 + platform/ui/package.json | 16 +- .../src/components/AboutModal/AboutModal.jsx | 31 +- .../__stories__/aboutModal.stories.mdx | 48 + platform/ui/src/components/Button/Button.jsx | 41 +- .../Button/__stories__/button.stories.mdx | 170 + .../__stories__/buttonGroup.stories.mdx | 101 + .../__stories__/cinePlayer.stories.mdx | 32 + .../__stories__/contextMenu.stories.mdx | 63 + .../__stories__/dateRange.stories.mdx | 46 + .../Dialog/__stories__/dialog.stories.mdx | 67 + .../ui/src/components/Dropdown/Dropdown.jsx | 10 +- .../Dropdown/__stories__/dropdown.stories.mdx | 75 + .../ExpandableToolbarButton.jsx | 13 +- .../Header/__stories__/Header.stories.mdx | 51 + .../HotkeysPreferences/HotkeysPreferences.jsx | 76 +- platform/ui/src/components/Icon/Icon.jsx | 11 +- .../Icon/__stories__/icon.stories.mdx | 92 + .../IconButton/IconButton.stories.jsx | 26 + .../Input/__stories__/input.stories.mdx | 75 + .../__stories__/layoutSelector.stories.mdx | 38 + .../__stories__/measurementTable.stories.mdx | 73 + .../components/Notification/Notification.jsx | 11 +- .../__stories__/notification.stories.mdx | 63 + .../__stories__/segmentationTable.stories.mdx | 71 + .../__stories__/sidePanel.stories.mdx | 58 + .../__stories__/splitButton.stories.mdx | 75 + .../__stories__/studyBrowser.stories.mdx | 129 + .../__stories__/studyItem.stories.mdx | 52 + .../studyListExpandedRow.stories.mdx | 57 + .../__stories__/toolbarButton.stories.mdx | 66 + .../__stories__/toolbarButton.stories.mdx | 79 + .../__stories__/typography.stories.mdx | 152 + .../Viewport/__stories__/Viewport.stories.mdx | 67 + .../ViewportActionBar/ViewportActionBar.jsx | 10 +- .../ViewportActionBar.stories.jsx | 35 + platform/ui/src/storybook/assets/button.png | Bin 0 -> 28576 bytes platform/ui/src/storybook/assets/code.png | Bin 0 -> 92528 bytes .../src/storybook/assets/codeblock-error.png | Bin 0 -> 30450 bytes .../src/storybook/assets/component-tree.png | Bin 0 -> 27410 bytes platform/ui/src/storybook/assets/header.png | Bin 0 -> 188849 bytes platform/ui/src/storybook/assets/sandbox.png | Bin 0 -> 54121 bytes .../ui/src/storybook/assets/storybook.png | Bin 0 -> 183046 bytes platform/ui/src/storybook/color/color.jsx | 6 + platform/ui/src/storybook/colors.stories.mdx | 117 + .../anchor-list-item/anchor-list-item.jsx | 3 + .../storybook/components/footer/footer.jsx | 19 + .../storybook/components/heading/heading.jsx | 46 + .../src/storybook/components/image/image.jsx | 17 + .../ui/src/storybook/components/index.jsx | 17 + .../link-component/link-component.jsx | 32 + .../components/section-name/section-name.jsx | 23 + .../ui/src/storybook/contribute.stories.mdx | 110 + .../functions/create-component-story.js | 49 + platform/ui/src/storybook/header/header.jsx | 8 + platform/ui/src/storybook/welcome.stories.mdx | 62 + platform/ui/src/tailwind.css | 3 + platform/ui/static/favicon.png | Bin 0 -> 443 bytes platform/ui/static/ohif-logo-light.svg | 15 + platform/ui/static/ohif-logo.svg | 15 + platform/ui/tailwind.config.js | 5 +- platform/viewer/package.json | 2 +- yarn.lock | 9054 +++++++++++------ 79 files changed, 9004 insertions(+), 2915 deletions(-) create mode 100644 platform/ui/.storybook/OHIFTheme.js create mode 100644 platform/ui/.storybook/custom.css create mode 100644 platform/ui/.storybook/main.js create mode 100644 platform/ui/.storybook/manager-head.html create mode 100644 platform/ui/.storybook/manager.js create mode 100644 platform/ui/.storybook/preview.js create mode 100644 platform/ui/babel.config.js create mode 100644 platform/ui/src/components/AboutModal/__stories__/aboutModal.stories.mdx create mode 100644 platform/ui/src/components/Button/__stories__/button.stories.mdx create mode 100644 platform/ui/src/components/ButtonGroup/__stories__/buttonGroup.stories.mdx create mode 100644 platform/ui/src/components/CinePlayer/__stories__/cinePlayer.stories.mdx create mode 100644 platform/ui/src/components/ContextMenu/__stories__/contextMenu.stories.mdx create mode 100644 platform/ui/src/components/DateRange/__stories__/dateRange.stories.mdx create mode 100644 platform/ui/src/components/Dialog/__stories__/dialog.stories.mdx create mode 100644 platform/ui/src/components/Dropdown/__stories__/dropdown.stories.mdx create mode 100644 platform/ui/src/components/Header/__stories__/Header.stories.mdx create mode 100644 platform/ui/src/components/Icon/__stories__/icon.stories.mdx create mode 100644 platform/ui/src/components/IconButton/IconButton.stories.jsx create mode 100644 platform/ui/src/components/Input/__stories__/input.stories.mdx create mode 100644 platform/ui/src/components/LayoutSelector/__stories__/layoutSelector.stories.mdx create mode 100644 platform/ui/src/components/MeasurementTable/__stories__/measurementTable.stories.mdx create mode 100644 platform/ui/src/components/Notification/__stories__/notification.stories.mdx create mode 100644 platform/ui/src/components/SegmentationTable/__stories__/segmentationTable.stories.mdx create mode 100644 platform/ui/src/components/SidePanel/__stories__/sidePanel.stories.mdx create mode 100644 platform/ui/src/components/SplitButton/__stories__/splitButton.stories.mdx create mode 100644 platform/ui/src/components/StudyBrowser/__stories__/studyBrowser.stories.mdx create mode 100644 platform/ui/src/components/StudyItem/__stories__/studyItem.stories.mdx create mode 100644 platform/ui/src/components/StudyListExpandedRow/__stories__/studyListExpandedRow.stories.mdx create mode 100644 platform/ui/src/components/ToolbarButton/__stories__/toolbarButton.stories.mdx create mode 100644 platform/ui/src/components/Tooltip/__stories__/toolbarButton.stories.mdx create mode 100644 platform/ui/src/components/Typography/__stories__/typography.stories.mdx create mode 100644 platform/ui/src/components/Viewport/__stories__/Viewport.stories.mdx create mode 100644 platform/ui/src/components/ViewportActionBar/ViewportActionBar.stories.jsx create mode 100644 platform/ui/src/storybook/assets/button.png create mode 100644 platform/ui/src/storybook/assets/code.png create mode 100644 platform/ui/src/storybook/assets/codeblock-error.png create mode 100644 platform/ui/src/storybook/assets/component-tree.png create mode 100644 platform/ui/src/storybook/assets/header.png create mode 100644 platform/ui/src/storybook/assets/sandbox.png create mode 100644 platform/ui/src/storybook/assets/storybook.png create mode 100644 platform/ui/src/storybook/color/color.jsx create mode 100644 platform/ui/src/storybook/colors.stories.mdx create mode 100644 platform/ui/src/storybook/components/anchor-list-item/anchor-list-item.jsx create mode 100644 platform/ui/src/storybook/components/footer/footer.jsx create mode 100644 platform/ui/src/storybook/components/heading/heading.jsx create mode 100644 platform/ui/src/storybook/components/image/image.jsx create mode 100644 platform/ui/src/storybook/components/index.jsx create mode 100644 platform/ui/src/storybook/components/link-component/link-component.jsx create mode 100644 platform/ui/src/storybook/components/section-name/section-name.jsx create mode 100644 platform/ui/src/storybook/contribute.stories.mdx create mode 100644 platform/ui/src/storybook/functions/create-component-story.js create mode 100644 platform/ui/src/storybook/header/header.jsx create mode 100644 platform/ui/src/storybook/welcome.stories.mdx create mode 100644 platform/ui/static/favicon.png create mode 100644 platform/ui/static/ohif-logo-light.svg create mode 100644 platform/ui/static/ohif-logo.svg diff --git a/extensions/cornerstone/package.json b/extensions/cornerstone/package.json index 6955e5257..f982b00b8 100644 --- a/extensions/cornerstone/package.json +++ b/extensions/cornerstone/package.json @@ -44,7 +44,7 @@ "react-resize-detector": "^3.4.0" }, "dependencies": { - "@babel/runtime": "7.7.6", + "@babel/runtime": "7.16.3", "lodash.merge": "^4.6.2", "lodash.debounce": "4.0.8", "react-cornerstone-viewport": "4.1.2" diff --git a/extensions/default/package.json b/extensions/default/package.json index 047daac42..ab404853f 100644 --- a/extensions/default/package.json +++ b/extensions/default/package.json @@ -41,6 +41,6 @@ "webpack-merge": "^5.7.3" }, "dependencies": { - "@babel/runtime": "7.7.6" + "@babel/runtime": "7.16.3" } } diff --git a/extensions/dicom-sr/package.json b/extensions/dicom-sr/package.json index f3d639058..c2a03a606 100644 --- a/extensions/dicom-sr/package.json +++ b/extensions/dicom-sr/package.json @@ -43,7 +43,7 @@ "react-cornerstone-viewport": "4.1.2" }, "dependencies": { - "@babel/runtime": "7.7.6", + "@babel/runtime": "7.16.3", "classnames": "^2.2.6" } } diff --git a/extensions/measurement-tracking/package.json b/extensions/measurement-tracking/package.json index 322a2ce5e..ef447e0df 100644 --- a/extensions/measurement-tracking/package.json +++ b/extensions/measurement-tracking/package.json @@ -40,7 +40,7 @@ "webpack-merge": "^5.7.3" }, "dependencies": { - "@babel/runtime": "7.7.6", + "@babel/runtime": "7.16.3", "@ohif/ui": "^1.8.2", "@xstate/react": "^0.8.1", "xstate": "^4.10.0" diff --git a/modes/longitudinal/package.json b/modes/longitudinal/package.json index dfc6ba326..98759cecf 100644 --- a/modes/longitudinal/package.json +++ b/modes/longitudinal/package.json @@ -32,7 +32,7 @@ "@ohif/core": "^2.12.3" }, "dependencies": { - "@babel/runtime": "7.7.6" + "@babel/runtime": "7.16.3" }, "devDependencies": { "webpack": "^5.50.0", diff --git a/package.json b/package.json index 863fe7d61..8a6267e27 100644 --- a/package.json +++ b/package.json @@ -52,8 +52,8 @@ "link-list": "npm ls --depth=0 --link=true" }, "dependencies": { - "@babel/runtime": "7.7.6", "config-point": "^0.3.4", + "@babel/runtime": "7.16.3", "core-js": "^3.2.1", "cornerstone-core": "2.6.0", "wslink": "^0.1.8" @@ -134,6 +134,6 @@ ] }, "resolutions": { - "**/@babel/runtime": "7.7.6" + "**/@babel/runtime": "7.16.3" } } diff --git a/platform/core/package.json b/platform/core/package.json index f6b9dc62e..164d560a9 100644 --- a/platform/core/package.json +++ b/platform/core/package.json @@ -38,7 +38,7 @@ "@ohif/ui": "^1.8.2" }, "dependencies": { - "@babel/runtime": "7.7.6", + "@babel/runtime": "7.16.3", "dcmjs": "0.16.1", "dicomweb-client": "^0.6.0", "isomorphic-base64": "^1.0.2", diff --git a/platform/docs/docs/platform/extensions/installation.md b/platform/docs/docs/platform/extensions/installation.md index d9c66a636..17085e67f 100644 --- a/platform/docs/docs/platform/extensions/installation.md +++ b/platform/docs/docs/platform/extensions/installation.md @@ -80,7 +80,7 @@ the extension. The following lines of code should be added to the OHIF: /* ... */ "dependencies": { /* ... */ - "@babel/runtime": "7.7.6", + "@babel/runtime": "7.16.3", "@ohif/core": "^2.5.1", "@ohif/extension-cornerstone": "^2.4.0", "@ohif/extension-measurement-tracking": "^0.0.1", diff --git a/platform/i18n/package.json b/platform/i18n/package.json index a080442ae..53df5f409 100644 --- a/platform/i18n/package.json +++ b/platform/i18n/package.json @@ -36,7 +36,7 @@ "react-i18next": "^10.11.0" }, "dependencies": { - "@babel/runtime": "7.7.6", + "@babel/runtime": "7.16.3", "i18next-locize-backend": "^2.0.0", "locize-editor": "^2.0.0", "locize-lastused": "^1.1.0" diff --git a/platform/ui/.storybook/OHIFTheme.js b/platform/ui/.storybook/OHIFTheme.js new file mode 100644 index 000000000..6be91b643 --- /dev/null +++ b/platform/ui/.storybook/OHIFTheme.js @@ -0,0 +1,8 @@ +import { create } from '@storybook/theming'; + +export default create({ + base: 'light', + brandTitle: 'OHIF', + brandUrl: 'https://ohif.org', + brandImage: 'ohif-logo-light.svg', +}); diff --git a/platform/ui/.storybook/custom.css b/platform/ui/.storybook/custom.css new file mode 100644 index 000000000..ec7b6867d --- /dev/null +++ b/platform/ui/.storybook/custom.css @@ -0,0 +1,3 @@ +#storybook-explorer-menu svg { + color: #5034ff; +} diff --git a/platform/ui/.storybook/main.js b/platform/ui/.storybook/main.js new file mode 100644 index 000000000..bb96ab74d --- /dev/null +++ b/platform/ui/.storybook/main.js @@ -0,0 +1,62 @@ +const path = require('path'); + +module.exports = { + stories: ['../src/**/*.stories.@(mdx)'], + addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-google-analytics'], + core: { + builder: 'webpack5', + }, + staticDirs: ['../static'], + webpackFinal: async (config, { configType }) => { + // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION' + // You can change the configuration based on that. + // 'PRODUCTION' is used when building the static version of storybook. + // config.module.rules[0].use[0].options.plugins[1] = [ + // '@babel/plugin-proposal-class-properties', + // { loose: true }, + // ]; + + // Make whatever fine-grained changes you need + config.module.rules.push({ + test: /\.m?js/, + resolve: { + fullySpecified: false, + }, + }); + + // Default rule for images /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/ + const fileLoaderRule = config.module.rules.find( + rule => rule.test && rule.test.test('.svg') + ); + fileLoaderRule.exclude = /\.svg$/; + + // console.log(JSON.stringify(config.module.rules, null, 2)); + + config.module.rules.push({ + test: /\.svg$/, + use: [ + { loader: require.resolve('babel-loader') }, + // { loader: 'svg-inline-loader' }, + ], + }); + + config.module.rules.push({ + test: /\.css$/, + use: [ + { + loader: 'postcss-loader', + options: { + // HERE: OPTIONS + postcssOptions: { + plugins: [require('tailwindcss'), require('autoprefixer')], + }, + }, + }, + ], + include: path.resolve(__dirname, '../'), + }); + + // Return the altered config + return config; + }, +}; diff --git a/platform/ui/.storybook/manager-head.html b/platform/ui/.storybook/manager-head.html new file mode 100644 index 000000000..fa916fcbe --- /dev/null +++ b/platform/ui/.storybook/manager-head.html @@ -0,0 +1,28 @@ + +OHIF UI Component + + + + diff --git a/platform/ui/.storybook/manager.js b/platform/ui/.storybook/manager.js new file mode 100644 index 000000000..56d081c23 --- /dev/null +++ b/platform/ui/.storybook/manager.js @@ -0,0 +1,17 @@ +// .storybook/manager.js + +import { addons } from '@storybook/addons'; +import ohifTheme from './OHIFTheme'; +import favicon from '/static/favicon.png'; + +const link = document.createElement('link'); +link.setAttribute('rel', 'shortcut icon'); +link.setAttribute('href', favicon); +document.head.appendChild(link); + +addons.setConfig({ + theme: ohifTheme, +}); + +window.STORYBOOK_GA_ID = "G-3S63CTHNP6" +window.STORYBOOK_REACT_GA_OPTIONS = {} diff --git a/platform/ui/.storybook/preview.js b/platform/ui/.storybook/preview.js new file mode 100644 index 000000000..2fde6ba92 --- /dev/null +++ b/platform/ui/.storybook/preview.js @@ -0,0 +1,84 @@ +import { parameters } from '@storybook/addon-docs/dist/esm/frameworks/react/config'; +import { addParameters } from '@storybook/react'; +import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks'; +import { + Heading, + SectionName, + Footer, + AnchorListItem, + LinkComponent, +} from '../src/storybook/components'; + +import '../src/tailwind.css'; +import './custom.css'; + +// https://github.com/mondaycom/monday-ui-react-core/tree/master/.storybook +addParameters({ + docs: { + ...parameters.docs, + inlineStories: true, + container: ({ children, context }) => ( + {children} + ), + page: DocsPage, + components: { + Heading, + Footer, + h2: SectionName, + h3: ({ children }) => ( +

{children}

+ ), + li: AnchorListItem, + a: LinkComponent, + p: ({ children }) => ( +

{children}

+ ), + // todo: add pre and code + }, + }, + viewMode: 'docs', + previewTabs: { + 'storybook/docs/panel': { + index: -1, + }, + canvas: { title: 'Sandbox' }, + }, + actions: { argTypesRegex: '^on[A-Z].*' }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, + viewport: { + disable: true, + }, + backgrounds: { + default: 'OHIF-v3', + values: [ + { + name: 'White', + value: '#FFFFFF', + }, + { + name: 'OHIF-v3', + value: '#090C29', + }, + { + name: 'Light', + value: '#F8F8F8', + }, + { + name: 'Dark', + value: '#333333', + }, + ], + }, + options: { + storySort: { + order: ['Welcome', 'Contribute', 'Foundations', 'Modals', '*'], + }, + }, +}); + +export const decorators = []; diff --git a/platform/ui/README.md b/platform/ui/README.md index c744c68a5..2dcfda147 100644 --- a/platform/ui/README.md +++ b/platform/ui/README.md @@ -1 +1,14 @@ # @ohif/ui + +## For Running Storybook + +``` +cd platform/ui + +yarn install + +yarn storybook + +``` + +Stories are available default at `http://localhost:6006/` diff --git a/platform/ui/babel.config.js b/platform/ui/babel.config.js new file mode 100644 index 000000000..325ca2a8e --- /dev/null +++ b/platform/ui/babel.config.js @@ -0,0 +1 @@ +module.exports = require('../../babel.config.js'); diff --git a/platform/ui/package.json b/platform/ui/package.json index 7ae7aa8b4..8e7d89991 100644 --- a/platform/ui/package.json +++ b/platform/ui/package.json @@ -21,7 +21,9 @@ "scripts": { "start": "yarn run build --watch", "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js", - "build:package": "yarn run build" + "build:package": "yarn run build", + "storybook": "start-storybook -p 6006", + "build-storybook": "build-storybook" }, "peerDependencies": { "react": "17.0.2", @@ -44,7 +46,19 @@ "react-with-direction": "^1.3.1" }, "devDependencies": { + "@babel/core": "^7.14.8", + "@storybook/addon-actions": "^6.4.9", + "@storybook/addon-docs": "^6.4.9", + "@storybook/addon-essentials": "^6.4.9", + "@storybook/addon-google-analytics": "^6.2.9", + "@storybook/addon-links": "^6.4.9", + "@storybook/builder-webpack5": "^6.4.9", + "@storybook/manager-webpack5": "^6.4.9", + "@storybook/react": "^6.4.9", + "@storybook/source-loader": "^6.4.9", "autoprefixer": "9.7.4", + "babel-loader": "^8.2.2", + "dotenv-webpack": "6.0.4", "postcss": "^8.3.5", "postcss-loader": "^6.1.1", "prop-types": "15.7.2", diff --git a/platform/ui/src/components/AboutModal/AboutModal.jsx b/platform/ui/src/components/AboutModal/AboutModal.jsx index daf15ea91..d7b14533e 100644 --- a/platform/ui/src/components/AboutModal/AboutModal.jsx +++ b/platform/ui/src/components/AboutModal/AboutModal.jsx @@ -13,7 +13,7 @@ const Link = ({ href, children, showIcon = false }) => { > {children} {!!showIcon && ( - + )} @@ -23,31 +23,31 @@ const Link = ({ href, children, showIcon = false }) => { const Row = ({ title, value, link }) => { return (
- + {title} {link ? ( {value} ) : ( - - {value} - - )} + + {value} + + )}
); }; -const AboutModal = ({buildNumber, versionNumber}) => { +const AboutModal = ({ buildNumber, versionNumber }) => { const { os, version, name } = detect(); const browser = `${name[0].toUpperCase()}${name.substr(1)} ${version}`; const renderRowTitle = title => ( -
+
{title} @@ -57,10 +57,7 @@ const AboutModal = ({buildNumber, versionNumber}) => {
{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 => ( +
+ +
+); + + + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) +- [Contribute](#contribute) + +## Overview + +OHIF about modal component provides information about the application version +and build number + + + {aboutTemplate.bind({})} + + +## Props + + + +## Usage + +## Contribute + +
diff --git a/platform/ui/src/components/Button/Button.jsx b/platform/ui/src/components/Button/Button.jsx index 2d9b8cf8b..bbce41391 100644 --- a/platform/ui/src/components/Button/Button.jsx +++ b/platform/ui/src/components/Button/Button.jsx @@ -23,7 +23,6 @@ const roundedClasses = { full: 'rounded-full', }; - const variantClasses = { text: { default: @@ -64,16 +63,11 @@ const variantClasses = { 'border bg-primary-light border-primary-light text-black hover:opacity-80 active:opacity-100 focus:opacity-80', }, disabled: { - default: - 'cursor-not-allowed opacity-50 bg-primary-light text-black', - primary: - 'cursor-not-allowed opacity-50 bg-primary-main text-white', - secondary: - 'cursor-not-allowed opacity-50 bg-secondary-light text-white', - white: - 'cursor-not-allowed opacity-50 bg-white text-black', - black: - 'cursor-not-allowed opacity-50 bg-black text-white', + default: 'cursor-not-allowed opacity-50 bg-primary-light text-black', + primary: 'cursor-not-allowed opacity-50 bg-primary-main text-white', + secondary: 'cursor-not-allowed opacity-50 bg-secondary-light text-white', + white: 'cursor-not-allowed opacity-50 bg-white text-black', + black: 'cursor-not-allowed opacity-50 bg-black text-white', light: 'cursor-not-allowed opacity-50 border bg-primary-light border-primary-light text-black', }, @@ -140,7 +134,7 @@ const Button = ({ variantClasses[variant][color], roundedClasses[rounded], sizeClasses[size], - fullWidthClasses[fullWidth], + fullWidthClasses[fullWidth] )} disabled={disabled} ref={buttonElement} @@ -156,11 +150,25 @@ const Button = ({ ); }; +Button.defaultProps = { + color: defaults.color, + disabled: false, + children: '', + onClick: () => {}, +}; + Button.propTypes = { + /** What is inside the button, can be text or react component */ children: PropTypes.node, + /** Callback to be called when the button is clicked */ + onClick: PropTypes.func.isRequired, + /** Button size */ size: PropTypes.oneOf(['small', 'medium', 'large', 'initial', 'inherit']), + /** Button corner roundness */ rounded: PropTypes.oneOf(['none', 'small', 'medium', 'large', 'full']), + /** Button variants */ variant: PropTypes.oneOf(['text', 'outlined', 'contained']), + /** Button color */ color: PropTypes.oneOf([ 'default', 'primary', @@ -168,16 +176,21 @@ Button.propTypes = { 'white', 'black', 'inherit', - 'light' + 'light', ]), + /** Whether the button should have full width */ fullWidth: PropTypes.bool, + /** Whether the button should be disabled */ disabled: PropTypes.bool, + /** Button type */ type: PropTypes.string, name: PropTypes.string, + /** Button start icon name - if any icon is specified */ startIcon: PropTypes.node, + /** Button end icon name - if any icon is specified */ endIcon: PropTypes.node, + /** Additional TailwindCSS classnames */ className: PropTypes.string, - onClick: PropTypes.func.isRequired, }; export default Button; diff --git a/platform/ui/src/components/Button/__stories__/button.stories.mdx b/platform/ui/src/components/Button/__stories__/button.stories.mdx new file mode 100644 index 000000000..9e90e3a8d --- /dev/null +++ b/platform/ui/src/components/Button/__stories__/button.stories.mdx @@ -0,0 +1,170 @@ +import Button from '../Button'; +import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs'; +import { + createComponentTemplate, + createStoryMetaSettings, +} from '../../../storybook/functions/create-component-story'; + +export const argTypes = { + component: Button, + title: 'Components/Button', +}; + + + +export const buttonTemplate = createComponentTemplate(Button); + + + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) +- [Contribute](#contribute) + + +## Overview + +You can use the button component to create a button. It can be used in different ways, the default +button is a simple button with a text. + + + + {buttonTemplate.bind({})} + + + +## Props + + + +## Usage +### Variants +There can be different variants of buttons: `text`, `outlined`, +`contained`, and `disabled`. + + + + +
+ + + + +
+ + + + +### Colors +There are different colors for the button: `default`, `primary`, `secondary`, `white`, `black`, `inherit`, `light`. + + + + +
+ + + + + + + +
+ + + +### Mixing props +You can mix different props together to create a button. + + + + + + + +### Disabled +You can disable the button by setting the variant to `disabled`. + + + + + + + + +### Start/End Icons +You can add an icon to the start of the button. It accepts an icon component. + + + + + {() => { + // svg icon for github + const Github = () => { + return ( + + + + ) + } + return ; + }} + }} + + + +End Icon is the same as start icon, but for the end of the button. + + + + + {() => { + // svg icon for github + const Github = () => { + return ( + + + + ) + } + return ; + }} + }} + + + + +### Full width +You can make the button full width by setting the `fullWidth` prop to `true`. + + + + + + + +## Contribute +
diff --git a/platform/ui/src/components/ButtonGroup/__stories__/buttonGroup.stories.mdx b/platform/ui/src/components/ButtonGroup/__stories__/buttonGroup.stories.mdx new file mode 100644 index 000000000..274e5f8a9 --- /dev/null +++ b/platform/ui/src/components/ButtonGroup/__stories__/buttonGroup.stories.mdx @@ -0,0 +1,101 @@ +import ButtonGroup from '../ButtonGroup'; +import Button from '../../Button'; +import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs'; +import { + createComponentTemplate, + createStoryMetaSettings, +} from '../../../storybook/functions/create-component-story'; + +export const argTypes = { + component: ButtonGroup, + title: 'Components/ButtonGroup', +}; + + + +export const buttonGroupTemplate = args => ( + + + + + +); + + + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) +- [Contribute](#contribute) + +## Overview + +ButtonGroup is a container for a group of buttons. + + + {buttonGroupTemplate.bind({})} + + +## Props + + + +## Usage + +### Variants + +There are three different variants of ButtonGroup: + + + +
+ + + + + + + + + + + + + + + +
+ + + +### Orientation + +You can change the orientation of the buttons in the group by setting the +`orientation` prop. + + + + + + + + + + +Or vertical + + + + + + + + + + +## Contribute + +
diff --git a/platform/ui/src/components/CinePlayer/__stories__/cinePlayer.stories.mdx b/platform/ui/src/components/CinePlayer/__stories__/cinePlayer.stories.mdx new file mode 100644 index 000000000..eefc054c8 --- /dev/null +++ b/platform/ui/src/components/CinePlayer/__stories__/cinePlayer.stories.mdx @@ -0,0 +1,32 @@ +import CinePlayer from '../CinePlayer'; +import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs'; +import { createComponentTemplate } from '../../../storybook/functions/create-component-story'; + +export const argTypes = { + component: CinePlayer, + title: 'Components/CinePlayer', +}; + + + +export const cineTemplate = createComponentTemplate(CinePlayer); + + + +- [Overview](#overview) +- [Props](#props) +- [Contribute](#contribute) + +## Overview + + + {cineTemplate.bind({})} + + +## Props + + + +## Contribute + +
diff --git a/platform/ui/src/components/ContextMenu/__stories__/contextMenu.stories.mdx b/platform/ui/src/components/ContextMenu/__stories__/contextMenu.stories.mdx new file mode 100644 index 000000000..84d3aadb7 --- /dev/null +++ b/platform/ui/src/components/ContextMenu/__stories__/contextMenu.stories.mdx @@ -0,0 +1,63 @@ +import ContextMenu from '../ContextMenu'; +import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs'; +import { createComponentTemplate } from '../../../storybook/functions/create-component-story'; + +export const argTypes = { + component: ContextMenu, + title: 'Modals/ContextMenu', +}; + + + +export const contextMenueTemplate = createComponentTemplate(ContextMenu); + + + +- [Overview](#overview) +- [Props](#props) +- [Contribute](#contribute) + +## Overview + +Context Menu is a component that is used to display a list of options to the +user. This component can be used for use cases such as opening a list of options +on user right click. + + + { + window.alert(`${item.label} clicked`); + }, + value: {}, + }, + { + label: 'Add Label', + actionType: 'setLabel', + action: (item) => { + window.alert(`${item.label} clicked`); + }, + value: {}, + }, + ], + }} + > + {contextMenueTemplate.bind({})} + + + +## Props + + + +## Contribute + +
diff --git a/platform/ui/src/components/DateRange/__stories__/dateRange.stories.mdx b/platform/ui/src/components/DateRange/__stories__/dateRange.stories.mdx new file mode 100644 index 000000000..682ecb35e --- /dev/null +++ b/platform/ui/src/components/DateRange/__stories__/dateRange.stories.mdx @@ -0,0 +1,46 @@ +import DateRange from '../DateRange'; +import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs'; + +export const argTypes = { + component: DateRange, + title: 'Components/DateRange', +}; + + + +export const DateRangeTemplate = (args) => ( +
+ +
+); + + + +- [Overview](#overview) +- [Props](#props) +- [Contribute](#contribute) + +## Overview + +DateRange is a component that allows you to select a range of dates. + + + + {DateRangeTemplate.bind({})} + + + +## Props + + + +## Contribute + +
diff --git a/platform/ui/src/components/Dialog/__stories__/dialog.stories.mdx b/platform/ui/src/components/Dialog/__stories__/dialog.stories.mdx new file mode 100644 index 000000000..f05dc5c4c --- /dev/null +++ b/platform/ui/src/components/Dialog/__stories__/dialog.stories.mdx @@ -0,0 +1,67 @@ +import Dialog from '../Dialog'; +import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs'; +import { createComponentTemplate } from '../../../storybook/functions/create-component-story'; + +export const argTypes = { + component: Dialog, + title: 'Modals/Dialog', +}; + + + +export const DialogTemplate = createComponentTemplate(Dialog); + + + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) +- [Contribute](#contribute) + +## Overview + +Dialog is a modal dialog component which enabled to show a modal dialog. + + + {DialogTemplate.bind({})} + + +## Props + + + +## Usage + +It can be used to show a modal dialog to submit a form or show a message. + + + { + window.alert('Dialog closed'); + }, + noCloseButton: false, + actions: [ + { + id: 'cancel', + text: 'Cancel', + type: 'cancel', + }, + { + id: 'submit', + text: 'Submit', + type: 'primary', + }, + ], + }} + > + {DialogTemplate.bind({})} + + + +## Contribute + +
diff --git a/platform/ui/src/components/Dropdown/Dropdown.jsx b/platform/ui/src/components/Dropdown/Dropdown.jsx index 647580a36..2656f42b3 100644 --- a/platform/ui/src/components/Dropdown/Dropdown.jsx +++ b/platform/ui/src/components/Dropdown/Dropdown.jsx @@ -21,7 +21,7 @@ const Dropdown = ({ id, children, showDropdownIcon, list }) => { }} data-cy={id} > - {!!icon && } + {!!icon && } {title}
); @@ -40,11 +40,9 @@ const Dropdown = ({ id, children, showDropdownIcon, list }) => { const renderTitleElement = () => { return ( -
+
{children} - {showDropdownIcon && ( - - )} + {showDropdownIcon && }
); }; @@ -94,7 +92,7 @@ const Dropdown = ({ id, children, showDropdownIcon, list }) => { return (
-
+
{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 +
+ +
+); + + + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) +- [Contribute](#contribute) + +## Overview + +Dropdown is a modal Dropdown component which enabled to show a modal Dropdown. + + + + {DropdownTemplate.bind({})} + + + +## Props + + + +## Usage + +You can list the items in the dropdown. + + + Drop Down
, + 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 + +