diff --git a/.circleci/config.yml b/.circleci/config.yml index c2a8b04f3..7a4660b0a 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -27,7 +27,7 @@ executors: - image: 'cypress/browsers:node14.15.0-chrome86-ff82' defaults: &defaults docker: - - image: cimg/node:14.18 + - image: cimg/node:14.19 environment: TERM: xterm # Enable colors in term QUICK_BUILD: true @@ -347,9 +347,8 @@ workflows: store_artifacts: true working_directory: platform/viewer build: - git submodule update --init && - npx cross-env QUICK_BUILD=true APP_CONFIG=config/e2e.js - yarn run build + git submodule update --init && npx cross-env QUICK_BUILD=true + APP_CONFIG=config/e2e.js yarn run build start: yarn run test:e2e:serve spec: 'cypress/integration/common/**/*,cypress/integration/pwa/**/*' wait-on: 'http://localhost:3000' @@ -376,9 +375,8 @@ workflows: store_artifacts: true working_directory: platform/viewer build: - git submodule update --init && - npx cross-env QUICK_BUILD=true APP_CONFIG=config/e2e.js - yarn run build:package + git submodule update --init && npx cross-env QUICK_BUILD=true + APP_CONFIG=config/e2e.js yarn run build:package start: yarn run test:e2e:serve spec: 'cypress/integration/common/**/*,cypress/integration/script-tag/**/*' wait-on: 'http://localhost:3000' @@ -410,9 +408,8 @@ workflows: store_artifacts: false working_directory: platform/viewer build: - git submodule update --init && - npx cross-env QUICK_BUILD=true APP_CONFIG=config/e2e.js - yarn run build + git submodule update --init && npx cross-env QUICK_BUILD=true + APP_CONFIG=config/e2e.js yarn run build # start server --> verify running --> percy + chrome + cypress command: yarn run test:e2e:dist cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}' @@ -490,9 +487,8 @@ workflows: store_artifacts: false working_directory: platform/viewer build: - git submodule update --init && - npx cross-env QUICK_BUILD=true APP_CONFIG=config/e2e.js - yarn run build + git submodule update --init && npx cross-env QUICK_BUILD=true + APP_CONFIG=config/e2e.js yarn run build # start server --> verify running --> percy + chrome + cypress command: yarn run test:e2e:dist cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}' diff --git a/.gitignore b/.gitignore index c2c0ec2b9..8e0d39f14 100644 --- a/.gitignore +++ b/.gitignore @@ -8,7 +8,6 @@ docs/_book src/version.js junit.xml coverage/ -.docz/ *.js.map .yarn platform/docs/.docusaurus @@ -38,4 +37,3 @@ screenshots/ # Locize settings .locize - diff --git a/.netlify/build-deploy-preview.sh b/.netlify/build-deploy-preview.sh index 0e6edc55a..3fd73f8a1 100644 --- a/.netlify/build-deploy-preview.sh +++ b/.netlify/build-deploy-preview.sh @@ -22,16 +22,6 @@ mv platform/viewer/dist/* .netlify/www/pwa -v # Build && Move script output # yarn run build:package -# Build && Move Docz Output -# Using local yarn install to prevent Gatsby from needing to access -# node_modules above the platform/ui folder -cd platform/ui -yarn install -yarn run build -cd ../.. -mkdir -p ./.netlify/www/ui -mv platform/ui/.docz/dist/* .netlify/www/ui -v - # Cache all of the node_module dependencies in # extensions, modules, and platform packages yarn run lerna:cache diff --git a/Dockerfile b/Dockerfile index db257113d..3b6f97a4f 100644 --- a/Dockerfile +++ b/Dockerfile @@ -21,7 +21,7 @@ # Stage 1: Build the application # docker build -t ohif/viewer:latest . -FROM node:15.13.0-slim as builder +FROM node:14-slim as builder RUN mkdir /usr/src/app WORKDIR /usr/src/app @@ -42,7 +42,7 @@ COPY yarn.lock /usr/src/app/yarn.lock RUN apt-get update && apt-get install -y python make g++ # Run the install before copying the rest of the files RUN yarn config set workspaces-experimental true -RUN yarn install +RUN yarn install --verbose ENV PATH /usr/src/app/node_modules/.bin:$PATH ENV QUICK_BUILD true diff --git a/platform/ui/.env b/platform/ui/.env index 0708aefac..bf53e150b 100644 --- a/platform/ui/.env +++ b/platform/ui/.env @@ -1,8 +1,5 @@ #### ## -## We need to pin WebPack's version for docz to work. See this issue: -## https://github.com/pedronauck/docz/issues/704#issuecomment-480295032 -## ## react-scripts checks that dependency versions match before running ## Our top level webpack version causes the preflight check to fail ## This prevents that check diff --git a/platform/ui/doczrc.js b/platform/ui/doczrc.js deleted file mode 100644 index b3abf4cd3..000000000 --- a/platform/ui/doczrc.js +++ /dev/null @@ -1,75 +0,0 @@ -/** - * Docz Configuration File: - * https://www.docz.site/docs/project-configuration - */ - -import { css } from "docz-plugin-css"; - -export default { - dest: "example/build", - public: "/public", - wrapper: "src/__docs__/wrapper", - indexHtml: "src/__docs__/index.html", - // Limited support for importing `.styl` files - codeSandbox: false, - // https://github.com/pedronauck/docz/pull/849/files - // Because we re-export using `index.js` files - notUseSpecifiers: true, - menu: [ - "Introduction", - "Getting Started", - { name: "Elements", menu: ["Form / Select"] }, - { - name: "Components", - menu: [ - "CINE Dialog", - "Layout Button", - "Measurement Table", - "Overlay Trigger", - "Quick Switch", - "Rounded Button Group", - "Select Tree", - "Simple Dialog", - "Study Browser", - "Study List", - "Table List", - "Toolbar Section", - "About Modal", - "User Preferences Modal" - ] - }, - "Styling & Theming", - "Translating", - "Compatibility" - ], - // Rollup Aliases? - // https://github.com/pedronauck/docz/issues/373 - plugins: [ - // CSS - css(), - // Stylus - css({ - preprocessor: "stylus", - cssmodules: false - }) - ], - // `docz` uses file-loader to pull in SVGs. This kills our icons before - // They can be picked up by our `babel-plugin-inline-react-svg` dependency - // You can see where it's configured here: - // https://github.com/pedronauck/docz/blob/f72624d0aa5231dab17e1770e8d36be920f590a2/core/docz-core/src/bundler/loaders.ts#L135-L144 - // How we delete our rule: - // https://github.com/neutrinojs/webpack-chain/issues/48 - onCreateWebpackChain: config => { - config.module.rules.delete("svg"); - }, - modifyBabelRc: babelrc => { - const newBabelRc = { - ...babelrc, - plugins: [ - ...babelrc.plugins, - require.resolve("babel-plugin-inline-react-svg") - ] - }; - return newBabelRc; - } -}; diff --git a/platform/ui/gatsby-node.js b/platform/ui/gatsby-node.js deleted file mode 100644 index 0efa56fe8..000000000 --- a/platform/ui/gatsby-node.js +++ /dev/null @@ -1,25 +0,0 @@ -const path = require('path'); -// ~~ Plugins -const PnpWebpackPlugin = require(`pnp-webpack-plugin`); // Required until Webpack@5 - -exports.onCreateWebpackConfig = args => { - args.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', - ], - // resolve: { - // symlinks: true, - // }, - }, - resolveLoader: { - plugins: [PnpWebpackPlugin.moduleLoader(module)], - }, - }); -}; diff --git a/platform/ui/package.json b/platform/ui/package.json index f4a32369b..9abfb273e 100644 --- a/platform/ui/package.json +++ b/platform/ui/package.json @@ -20,9 +20,8 @@ "README.md" ], "scripts": { - "dev": "docz dev", + "dev": "echo \"No dev script yet\" && exit 0", "dev:ui": "yarn run dev", - "docs": "docz build", "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js", "build:package": "yarn run build", "prepublishOnly": "yarn run build", @@ -64,10 +63,6 @@ "devDependencies": { "@mdx-js/tag": "^0.20.3", "autoprefixer": "^9.6.0", - "docz": "1.2.0", - "docz-core": "1.2.0", - "docz-plugin-css": "0.11.0", - "docz-theme-default": "1.2.0", "lodash.clonedeep": "^4.5.0", "react-powerplug": "1.0.0" } diff --git a/platform/ui/src/__docs__/NameSpace.js b/platform/ui/src/__docs__/NameSpace.js deleted file mode 100644 index 81e1bfa34..000000000 --- a/platform/ui/src/__docs__/NameSpace.js +++ /dev/null @@ -1,17 +0,0 @@ -import React, { Fragment } from 'react'; -import { Link } from 'docz'; -import PropTypes from 'prop-types'; - -const NameSpace = ({ name }) => ( - - The namespace used on this component was: 
{name}
Check the{' '} - translation docs{' '} - to see how to override it. - -); - -NameSpace.propTypes = { - name: PropTypes.string.isRequired, -}; - -export default NameSpace; diff --git a/platform/ui/src/__docs__/assets/github.png b/platform/ui/src/__docs__/assets/github.png deleted file mode 100644 index 7db0aacec..000000000 Binary files a/platform/ui/src/__docs__/assets/github.png and /dev/null differ diff --git a/platform/ui/src/__docs__/assets/npm.png b/platform/ui/src/__docs__/assets/npm.png deleted file mode 100644 index 4fbd0761b..000000000 Binary files a/platform/ui/src/__docs__/assets/npm.png and /dev/null differ diff --git a/platform/ui/src/__docs__/assets/react.png b/platform/ui/src/__docs__/assets/react.png deleted file mode 100644 index e307be822..000000000 Binary files a/platform/ui/src/__docs__/assets/react.png and /dev/null differ diff --git a/platform/ui/src/__docs__/assets/typescript.png b/platform/ui/src/__docs__/assets/typescript.png deleted file mode 100644 index 69a60783d..000000000 Binary files a/platform/ui/src/__docs__/assets/typescript.png and /dev/null differ diff --git a/platform/ui/src/__docs__/compatibility.mdx b/platform/ui/src/__docs__/compatibility.mdx deleted file mode 100644 index fd6b842c7..000000000 --- a/platform/ui/src/__docs__/compatibility.mdx +++ /dev/null @@ -1,15 +0,0 @@ ---- -name: Compatibility -route: /compatibility ---- - -# Compatibility - -## Browser Support - -`@ohif/ui` relies on -[browsers supported by Styled Components](https://www.styled-components.com/docs/faqs#which-browsers-are-supported) -or browsers supported by emotion. - -Supported Browsers: IE11, IE 9+ (with Map + Set polyfills), Chrome, Firefox (and -derivatives), Edge, and Safari. diff --git a/platform/ui/src/__docs__/config/Wrapper.js b/platform/ui/src/__docs__/config/Wrapper.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/platform/ui/src/__docs__/docs-settings.mdx b/platform/ui/src/__docs__/docs-settings.mdx deleted file mode 100644 index 200133a85..000000000 --- a/platform/ui/src/__docs__/docs-settings.mdx +++ /dev/null @@ -1,13 +0,0 @@ ---- -name: Docs Settings -route: /docs-settings ---- - -import LanguageSwitcher from '../components/languageSwitcher'; - -# Components Language - -You can change the language of the components displayed in this documentation by -choosing an option in the selector below: - - diff --git a/platform/ui/src/__docs__/getting-started.mdx b/platform/ui/src/__docs__/getting-started.mdx deleted file mode 100644 index eea8c528d..000000000 --- a/platform/ui/src/__docs__/getting-started.mdx +++ /dev/null @@ -1,76 +0,0 @@ ---- -name: Getting Started -route: /getting-started ---- - -# Getting Started - -## Installation - -> This component library is pre- v1.0. All realeases until a v1.0 have the -> possibility of introducing breaking changes. Please depend on an "exact" -> version in your projects to prevent issues caused by loose versioning. - -Install `@ohif/ui` from npm: - -```shell -// with npm -npm i @ohif/ui --save-exact - -// with yarn -yarn add @ohif/ui --exact -``` - -## Usage - -There is some setup required for `@ohif/ui`. We are working to eliminate these -requirements with the goal of providing ready to use components. - -### External Dependencies - -We have tried to keep the number of external dependencies limited to make setup -as easy as possible. You will, however, need to include either the default font -or the font you set for your theme: - -```js -// Google Fonts, Roboto -'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap'; -``` - -`@ohif/ui` also looks for theme CSS variabled defined on `:root`. You can find a -list of variables [on the theming page](/styling-and-theming) - -### Import & Use - -You can use components in your React app: - -```js -import React, { Component } from 'react'; -import { LayoutButton } from '@ohif/ui'; - -class Example extends Component { - constructor(props) { - super(props); - - this.state = { - selectedCell: { - className: 'hover', - col: 1, - row: 1, - }, - }; - } - - render() { - return ( - this.setState({ selectedCell: cell })} - /> - ); - } -} -``` - -> NOTE: It is heavily recommended that you use a CSS reset or normalize. As well -> as the following style: `* { Box-sizing: Border-box }` diff --git a/platform/ui/src/__docs__/index.html b/platform/ui/src/__docs__/index.html deleted file mode 100644 index 7920139aa..000000000 --- a/platform/ui/src/__docs__/index.html +++ /dev/null @@ -1,83 +0,0 @@ - - - - - - - - - - {{ title }} - - - - - - - {{ head }} - - - -
- {{ footer }} - - - diff --git a/platform/ui/src/__docs__/introduction.mdx b/platform/ui/src/__docs__/introduction.mdx deleted file mode 100644 index 061928b0a..000000000 --- a/platform/ui/src/__docs__/introduction.mdx +++ /dev/null @@ -1,76 +0,0 @@ ---- -name: Introduction -route: / ---- - -import { Playground, Props } from 'docz'; -import { State } from 'react-powerplug'; -import { TableList, TableListItem } from './../index.js'; - -# Introduction - -**@ohif/ui is a collection of components and utilities** that power OHIF's -[zero-footprint DICOM viewer](https://github.com/OHIF/Viewers) -([demo][demo-url]). We maintain them as a separate component library to: - -- Decouple presentation from business logic -- Test and develop components in isolation -- Provide well documented, reusable components -- Aid rapid application development for context specific viewers - -## Quick Example - -> This component library is pre- v1.0. All realeases until a v1.0 have the -> possibility of introducing breaking changes. Please depend on an "exact" -> version in your projects to prevent issues caused by loose versioning. - -```js -// Add '@ohif/ui' as a dependency -yarn add @ohif/ui - -// Import and use components -import { TableList } from '@ohif/ui' -``` - - - - {({ state, setState }) => ( - - {state.listItems.map((item, index) => { - return ( - alert('item clicked')} - > - - - ); - })} - - )} - - - -## FAQ - -... - - - - -[demo-url]: https://docs.ohif.org/demo/ - diff --git a/platform/ui/src/__docs__/styling-and-theming.mdx b/platform/ui/src/__docs__/styling-and-theming.mdx deleted file mode 100644 index ce98dcde0..000000000 --- a/platform/ui/src/__docs__/styling-and-theming.mdx +++ /dev/null @@ -1,56 +0,0 @@ ---- -name: Styling & Theming -route: /styling-and-theming ---- - -# Styling & Theming - -```css -:root { - /* Interface UI Colors */ - --default-color: #9ccef9; - --hover-color: #ffffff; - --active-color: #20a5d6; - --ui-border-color: #44626f; - --ui-border-color-dark: #3c5d80; - --ui-border-color-active: #00a4d9; - --primary-background-color: #000000; - --box-background-color: #3e5975; - - --text-primary-color: #ffffff; - --text-secondary-color: #91b9cd; - --input-background-color: #2c363f; - --input-placeholder-color: #d3d3d3; - - --table-hover-color: #2c363f; - --table-text-primary-color: #ffffff; - --table-text-secondary-color: #91b9cd; - - --large-numbers-color: #6fbde2; - - --state-error: #ffcccc; - --state-error-border: #ffcccc; - --state-error-text: #ffcccc; - - /* Common palette */ - --ui-yellow: #e29e4a; - --ui-sky-blue: #6fbde2; - - /* State palette */ - --ui-state-error: #ffcccc; - --ui-state-error-border: #993333; - --ui-state-error-text: #661111; - --ui-gray-lighter: #436270; - --ui-gray-light: #516873; - --ui-gray: #263340; - --ui-gray-dark: #16202b; - --ui-gray-darker: #151a1f; - --ui-gray-darkest: #14202a; - - --calendar-day-color: #d3d3d3; - --calendar-day-border-color: #d3d3d3; - --calendar-day-active-hover-background-color: #516873; - --calendar-main-color: #263340; - --viewport-border-thickness: 1px; -} -``` diff --git a/platform/ui/src/__docs__/translating.mdx b/platform/ui/src/__docs__/translating.mdx deleted file mode 100644 index 194ad0c80..000000000 --- a/platform/ui/src/__docs__/translating.mdx +++ /dev/null @@ -1,87 +0,0 @@ ---- -name: Translating -route: /translating ---- - -# Translating - -**React Viewerbase** supports internationalization using -[i18next](https://www.i18next.com/) through the npm package -[@ohif/i18n](https://www.npmjs.com/package/@ohif/i18n), where is the main -instance of i18n containing several languages and tools. - -## How to translate components - -All you need is to use the internal custom superset of -[withTranslation HOC](https://react.i18next.com/latest/withtranslation-hoc), -available at `src/utils/LanguageProvider.js` - -e.g.: - -```js -import React from 'react'; -import { withTranslation } from '../utils/LanguageProvider.js'; - -function MyComponent({ t }) { - return

{t('my translated text')}

; -} - -export default withTranslation('MyNameSpace')(MyComponent); -``` - ---- - -## Namespaces - -For further information about namespaces and how they work, please visit -[OHIF Namespaces docs](https://docs.ohif.org/viewer/internationalization.html#namespaces). - -### How to get right the Namespace of a `@ohif/ui` component? - -Check the component's page in this site, the Namespace information should be on -the bottom line. - -Also, a nameSpace is defined when exporting a component, this information can be -found on exports trough the code, in case of missing in docs. - -E.g. - -``` -export default withTranslation('TheNamespaceYouAreLookingFor')(TheComponentYouWantToUse); -``` - -### How to use another Namespace inside the current Namespace? - -i18next provides a parsing feature able to get translations strings from any -Namespace, like this following example getting data from `InnerSpace` Namespace: - -``` -$t(InnerSpace:Reset) -export default withTranslation('OuterSpace')(TheComponent); -``` - ---- - -## I18next Provider - -**@ohif/ui** pass down the `t` function trough the custom -[withTranslation HOC](https://github.com/OHIF/Viewers/blob/master/platform/ui/src/utils/LanguageProvider.js). - ---- - -## Extending and Overriding languages - -[How to Extend languages with @ohif/i18n](https://docs.ohif.org/viewer/internationalization.html#extending-languages-in-ohifi18n) - -## Changing the language - -The language choosing method is the same implemented in -[OHIF Viewers](https://docs.ohif.org/viewer/internationalization.html#changing-the-language) - -> You can also change the language of the components displayed in this -> documentation by choosing an option in the -> [Docs Settings](https://react.ohif.org/docs-settings) section. - -## Debugging translations - -[How to Debug @ohif/i18n](https://docs.ohif.org/viewer/internationalization.html#debugging-translations) diff --git a/platform/ui/src/__docs__/wrapper.js b/platform/ui/src/__docs__/wrapper.js deleted file mode 100644 index 0e94c5559..000000000 --- a/platform/ui/src/__docs__/wrapper.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; - -import PropTypes from 'prop-types'; -import LanguageSwitcher from '../components/languageSwitcher'; - -import './wrapper.styl'; - -const Wrapper = ({ children }) => ( - -
- Display components in: - -
- {children} - -); - -Wrapper.propTypes = { - children: PropTypes.node.isRequired, -}; - -export default Wrapper; diff --git a/platform/ui/src/__docs__/wrapper.styl b/platform/ui/src/__docs__/wrapper.styl deleted file mode 100644 index b1a4dae6d..000000000 --- a/platform/ui/src/__docs__/wrapper.styl +++ /dev/null @@ -1,15 +0,0 @@ -[class*="Sidebar__Menus"] - @media (min-width: 1120px) - margin-top: 80px - -.sidebarLanguageSwitcher - position: fixed - top: 155px - left 0 - z-index: 1049 - padding: 0 24px 20px - border-bottom: 1px dotted #CED4DE - background: #F5F6F7 - transition: all 200ms ease - @media (max-width: 1119px) - left -100% diff --git a/platform/ui/src/components/checkbox/__docs__/checkbox.mdx b/platform/ui/src/components/checkbox/__docs__/checkbox.mdx deleted file mode 100644 index dd74a6af5..000000000 --- a/platform/ui/src/components/checkbox/__docs__/checkbox.mdx +++ /dev/null @@ -1,42 +0,0 @@ ---- -name: Checkbox -menu: Elements -route: /components/checkbox ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { Checkbox } from './../index' -import NameSpace from '../../../__docs__/NameSpace' - -# Checkbox - -## Basic usage - - - - {({ state, setState }) => ( - -
- 
{JSON.stringify(state, null, 2)}
-
-
- -
- - )} - - - -## API - - - -## Translation Namespace - - \ No newline at end of file diff --git a/platform/ui/src/components/cineDialog/__docs__/cineDialog.mdx b/platform/ui/src/components/cineDialog/__docs__/cineDialog.mdx deleted file mode 100644 index 48ecfa0fd..000000000 --- a/platform/ui/src/components/cineDialog/__docs__/cineDialog.mdx +++ /dev/null @@ -1,57 +0,0 @@ ---- -name: CINE Dialog -menu: Components -route: /components/cine-dialog ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { CineDialog } from './../index' -import NameSpace from '../../../__docs__/NameSpace' - -# CINE Dialog - -## Basic usage - - - - {({ state, setState }) => ( - -
- 
{JSON.stringify(state, null, 2)}
-
-
- - setState({ lastChange: 'Clicked SkipToStart' }) - } - onClickSkipToEnd={() => - setState({ lastChange: 'Clicked SkipToEnd' }) - } - onClickNextButton={() => setState({ lastChange: 'Clicked Next' })} - onClickBackButton={() => setState({ lastChange: 'Clicked Back' })} - onLoopChanged={value => setState({ isLoopEnabled: value })} - onFrameRateChanged={value => setState({ cineFrameRate: value })} - onPlayPauseChanged={() => setState({ isPlaying: !state.isPlaying })} - /> -
- - )} - - - -## API - - - -## Translation Namespace - - diff --git a/platform/ui/src/components/content/aboutContent/__docs__/about.mdx b/platform/ui/src/components/content/aboutContent/__docs__/about.mdx deleted file mode 100644 index 21f22168d..000000000 --- a/platform/ui/src/components/content/aboutContent/__docs__/about.mdx +++ /dev/null @@ -1,42 +0,0 @@ ---- -name: About Modal -menu: Components -route: /components/about-modal ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { AboutContent } from './../index.js' - -# About Modal - -## Basic usage - - - - - {({ state, setState }) => ( - - - setState({ isOpen: false })} - /> - - )} - - - - - -## API - - diff --git a/platform/ui/src/components/content/viewportDownloadForm/__docs__/viewportDownloadForm.mdx b/platform/ui/src/components/content/viewportDownloadForm/__docs__/viewportDownloadForm.mdx deleted file mode 100644 index f5c1422c3..000000000 --- a/platform/ui/src/components/content/viewportDownloadForm/__docs__/viewportDownloadForm.mdx +++ /dev/null @@ -1,39 +0,0 @@ ---- -name: Viewport Download Form -menu: Components -route: /components/viewport-download-form ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { ViewportDownloadForm } from './../index' -import NameSpace from '../../../__docs__/NameSpace' - -# Viewport Download Form - -## Basic usage - - - - {({ state, setState }) => ( - -
- 
{JSON.stringify(state, null, 2)}
-
-
- -
- - )} - - - -## API - - - -## Translation Namespace - - diff --git a/platform/ui/src/components/layoutButton/__docs__/layoutButton.css b/platform/ui/src/components/layoutButton/__docs__/layoutButton.css deleted file mode 100644 index 21ec59d7e..000000000 --- a/platform/ui/src/components/layoutButton/__docs__/layoutButton.css +++ /dev/null @@ -1,10 +0,0 @@ -.LayoutExample { - background-color: var(--primary-background-color); - width: 160px; - height: 160px; -} - -.GridLayout td { - padding: 5px; - border: 1px solid black; -} diff --git a/platform/ui/src/components/layoutButton/__docs__/layoutButton.mdx b/platform/ui/src/components/layoutButton/__docs__/layoutButton.mdx deleted file mode 100644 index fc6a5a6ac..000000000 --- a/platform/ui/src/components/layoutButton/__docs__/layoutButton.mdx +++ /dev/null @@ -1,49 +0,0 @@ ---- -name: Layout Button -menu: Components -route: /components/layout-button ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { LayoutButton } from './../index.js' -import './layoutButton.css' -import NameSpace from '../../../__docs__/NameSpace' - -# Layout Button - -## Basic usage - - - - {({ state, setState }) => ( - - {/* STATE */} - 
{JSON.stringify(state, null, 2) }
- - {/* COMPONENT */} -
- setState({ selectedCell: cell })} - /> -
- - )} - - - - -## API - - - -## Translation Namespace - - diff --git a/platform/ui/src/components/measurementTable/__docs__/measurementTable.mdx b/platform/ui/src/components/measurementTable/__docs__/measurementTable.mdx deleted file mode 100644 index d85d87490..000000000 --- a/platform/ui/src/components/measurementTable/__docs__/measurementTable.mdx +++ /dev/null @@ -1,49 +0,0 @@ ---- -name: Measurement Table -menu: Components -route: /components/measurement-table ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { MeasurementTable } from './../index.js' -import NameSpace from '../../../__docs__/NameSpace' -// -import measurements from './measurements.js' -import timepoints from './timepoints.js' -import warnings from './warnings.js' - -# Measurement Table - -## Basic usage - - - - {({ state, setState }) => ( -
- alert('onItemClick')} - onRelabelClick={() => alert('onRelabelClick')} - onDeleteClick={() => alert('onDeleteClick')} - onEditDescriptionClick={() => alert('onEditDescriptionClick')} - /> -
- )} - - - -## API - - - -## Translation Namespace - - diff --git a/platform/ui/src/components/measurementTable/__docs__/measurements.js b/platform/ui/src/components/measurementTable/__docs__/measurements.js deleted file mode 100644 index 2a0507902..000000000 --- a/platform/ui/src/components/measurementTable/__docs__/measurements.js +++ /dev/null @@ -1,93 +0,0 @@ -export default [ - { - maxMeasurements: 5, - groupName: 'Targets', - measurements: [ - { - measurementId: '123', - measurementNumber: '123', - itemNumber: 1, - label: 'Chest Wall Posterior', - hasWarnings: true, - warningTitle: 'Criteria nonconformities', - isSplitLesion: false, - warningList: [ - 'All measurements should have a location', - 'Nodal lesions must be >= 15mm short axis AND >= double the acquisition slice thickness by CT and MR', - ], - data: [ - { - displayText: '25.7 x 12.9', - }, - { - displayText: '24.7 x 11.5', - }, - {}, - ], - }, - { - measurementId: '124', - measurementNumber: '124', - itemNumber: 2, - label: 'Bone Extremity', - data: [ - { - displayText: '24.7 x 11.1', - }, - { - displayText: '21.2 x 10.9', - }, - {}, - ], - }, - ], - }, - { - maxMeasurements: 3, - groupName: 'NonTargets', - measurements: [ - { - measurementId: '125', - measurementNumber: '125', - itemNumber: 1, - label: 'Chest Wall Single Site', - data: [ - { - displayText: 'MD', - }, - { - displayText: 'NM', - }, - {}, - ], - }, - { - measurementId: '126', - measurementNumber: '126', - itemNumber: 2, - label: 'Extremity Multiple Sites', - data: [ - { - displayText: 'CR', - }, - {}, - {}, - ], - }, - { - measurementId: '127', - measurementNumber: '127', - label: 'Extremity Site', - data: [ - { - displayText: 'CR', - }, - {}, - { - displayText: 'NM', - }, - ], - }, - ], - }, -]; diff --git a/platform/ui/src/components/measurementTable/__docs__/timepoints.js b/platform/ui/src/components/measurementTable/__docs__/timepoints.js deleted file mode 100644 index e42b44156..000000000 --- a/platform/ui/src/components/measurementTable/__docs__/timepoints.js +++ /dev/null @@ -1,14 +0,0 @@ -export default [ - { - label: 'Follow-up 2', - date: '20-Dec-18', - }, - { - label: 'Follow-up 1', - date: '15-Jun-18', - }, - { - label: 'Baseline', - date: '10-Apr-18', - }, -]; diff --git a/platform/ui/src/components/measurementTable/__docs__/warnings.js b/platform/ui/src/components/measurementTable/__docs__/warnings.js deleted file mode 100644 index a2da7f90d..000000000 --- a/platform/ui/src/components/measurementTable/__docs__/warnings.js +++ /dev/null @@ -1,6 +0,0 @@ -export default { - warningList: [ - 'All measurements should have a location', - 'Nodal lesions must be >= 15mm short axis AND >= double the acquisition slice thickness by CT and MR', - ], -}; diff --git a/platform/ui/src/components/ohifModal/__docs__/ohifModal.mdx b/platform/ui/src/components/ohifModal/__docs__/ohifModal.mdx deleted file mode 100644 index 67bb3f054..000000000 --- a/platform/ui/src/components/ohifModal/__docs__/ohifModal.mdx +++ /dev/null @@ -1,39 +0,0 @@ ---- -name: OHIFModal -menu: Components -route: /components/ohif-modal ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { OHIFModal } from './../index' -import NameSpace from '../../../__docs__/NameSpace' - -# OHIF Modal - -## Basic usage - - - - {({ state, setState }) => ( - -
- 
{JSON.stringify(state, null, 2)}
-
-
- -
- - )} - - - -## API - - - -## Translation Namespace - - diff --git a/platform/ui/src/components/overlayTrigger/__docs__/OverlayTrigger.mdx b/platform/ui/src/components/overlayTrigger/__docs__/OverlayTrigger.mdx deleted file mode 100644 index 4fc48ee56..000000000 --- a/platform/ui/src/components/overlayTrigger/__docs__/OverlayTrigger.mdx +++ /dev/null @@ -1,84 +0,0 @@ ---- -name: Overlay Trigger -menu: Components -route: /components/overlay-trigger ---- - -import { Playground, Props } from 'docz' -import { Tooltip } from './../../tooltip' -import { OverlayTrigger } from './../index.js' - -# Overlay Trigger - -## Basic usage - -### On Hover - - - -
- { - ['right', 'left', 'bottom', 'top'].map((placement) => { - return ( - - - Here I am! - - } - > - - - - ) - }) - } -
- - - -### On Click - - -
- {['right', 'left', 'bottom', 'top'].map(placement => { - return ( - - Here I am! - - } - > - - - ) - })} -
- - -## API - - diff --git a/platform/ui/src/components/quickSwitch/__docs__/quickSwitch.mdx b/platform/ui/src/components/quickSwitch/__docs__/quickSwitch.mdx deleted file mode 100644 index 75b228448..000000000 --- a/platform/ui/src/components/quickSwitch/__docs__/quickSwitch.mdx +++ /dev/null @@ -1,61 +0,0 @@ ---- -name: Quick Switch -menu: Components -route: /components/quick-switch ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { QuickSwitch } from './../index.js' -// -import studies from './studies.js' - -# Quick Switch - -## Basic usage - - - - {({ state, setState }) => ( - { - return !!study.active; - }).thumbnails} - onSeriesSelected={(selectedSeries) => { - const { studyListData } = state; - const selectedId = selectedSeries.displaySetInstanceUID; - - studyListData.forEach(study => { - study.thumbnails.forEach(series => { - series.active = series.displaySetInstanceUID === selectedId; - }) - }); - - setState({ studyListData }); - }} - onStudySelected={(selectedStudy) => { - const { studyListData } = state; - const selectedId = selectedStudy.StudyInstanceUID; - - studyListData.forEach(study => { - study.active = study.StudyInstanceUID === selectedId; - }); - - setState({ studyListData }); - }} - /> - )} - - - - - -## API - - diff --git a/platform/ui/src/components/quickSwitch/__docs__/studies.js b/platform/ui/src/components/quickSwitch/__docs__/studies.js deleted file mode 100644 index 2580fda90..000000000 --- a/platform/ui/src/components/quickSwitch/__docs__/studies.js +++ /dev/null @@ -1,76 +0,0 @@ -export default [ - { - StudyInstanceUID: '10001', - StudyDescription: 'Anti-PD-1', - modalities: 'CT', - StudyDate: '18-nov-2018', - active: false, - thumbnails: [ - { - imageSrc: - 'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/Anti-PD-1_Lung.jpg', - SeriesDescription: 'Anti-PD-1_Lung', - SeriesNumber: '2', - numImageFrames: 512, - displaySetInstanceUID: '10001-1', - stackPercentComplete: 30, - }, - { - imageSrc: - 'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/Anti-PD-1_MELANOMA.jpg', - SeriesDescription: 'Anti-PD-1_MELANOMA', - SeriesNumber: '2', - InstanceNumber: '1', - numImageFrames: 256, - displaySetInstanceUID: '10001-2', - stackPercentComplete: 70, - }, - ], - }, - { - StudyInstanceUID: '10002', - StudyDescription: 'CPTAC', - modalities: 'CT', - StudyDate: '16-aug-2017', - active: true, - thumbnails: [ - { - imageSrc: - 'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-GBM.jpg', - SeriesDescription: 'CPTAC-GBM', - active: true, - SeriesNumber: '2', - numImageFrames: 512, - displaySetInstanceUID: '10002-1', - stackPercentComplete: 100, - }, - { - imageSrc: - 'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-CM.jpg', - SeriesDescription: 'CPTAC-CM', - SeriesNumber: '2', - InstanceNumber: '1', - displaySetInstanceUID: '10002-2', - numImageFrames: 256, - }, - { - imageSrc: - 'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-HNSCC.jpg', - SeriesDescription: 'CPTAC-HNSCC', - SeriesNumber: '2', - InstanceNumber: '1', - displaySetInstanceUID: '10002-3', - numImageFrames: 256, - }, - { - imageSrc: - 'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-LSCC.jpg', - SeriesDescription: 'CPTAC-LSCC', - SeriesNumber: '2', - InstanceNumber: '1', - displaySetInstanceUID: '10002-4', - numImageFrames: 256, - }, - ], - }, -]; diff --git a/platform/ui/src/components/radioButtonList/__docs__/radioButtonList.mdx b/platform/ui/src/components/radioButtonList/__docs__/radioButtonList.mdx deleted file mode 100644 index 2ad2b205d..000000000 --- a/platform/ui/src/components/radioButtonList/__docs__/radioButtonList.mdx +++ /dev/null @@ -1,74 +0,0 @@ ---- -name: Radio Button List -menu: Elements -route: /components/radio-button-list ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { RadioButtonList } from './../index' -import NameSpace from '../../../__docs__/NameSpace' - -#Radio Button List - -## Basic usage - - - - {({ state, setState }) => ( - -
- 
{JSON.stringify(state, null, 2)}
-
-
- -
- - )} - - - -## API - - - -## Translation Namespace - - \ No newline at end of file diff --git a/platform/ui/src/components/roundedButtonGroup/__docs__/roundedButtonGroup.mdx b/platform/ui/src/components/roundedButtonGroup/__docs__/roundedButtonGroup.mdx deleted file mode 100644 index 5d00b32fc..000000000 --- a/platform/ui/src/components/roundedButtonGroup/__docs__/roundedButtonGroup.mdx +++ /dev/null @@ -1,51 +0,0 @@ ---- -name: Rounded Button Group -menu: Components -route: /components/rounded-button-group ---- - -import { Playground, Props } from 'docz'; -import { State } from 'react-powerplug'; -import { RoundedButtonGroup } from './../index.js'; - -# Rounded Button Group - -A basic styled toggle switch - -## Basic usage - - - - {({ state, setState }) => ( - -
- 
value: {JSON.stringify(state.value, null, 2)}
-
- setState({ value })} - /> - - )} - - - -## API - - diff --git a/platform/ui/src/components/selectTree/__docs__/selectTree.mdx b/platform/ui/src/components/selectTree/__docs__/selectTree.mdx deleted file mode 100644 index 68ee9882e..000000000 --- a/platform/ui/src/components/selectTree/__docs__/selectTree.mdx +++ /dev/null @@ -1,42 +0,0 @@ ---- -name: Select Tree -menu: Components -route: /components/select-tree ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { SelectTree } from './../index.js' - -import selectTreeItems from './selectTreeItems.js' - -# SelectTree - -## Basic usage - - - - {({ state, setState }) => ( - - 
-                {JSON.stringify(state.items, null, 2)}
-
- - setState({ itemLabelSelected: item.label }) } - selectTreeFirstTitle="Select Tree Example Header" - autoFocus={false} - /> - - )} - - - - - -## API - - diff --git a/platform/ui/src/components/selectTree/__docs__/selectTreeItems.js b/platform/ui/src/components/selectTree/__docs__/selectTreeItems.js deleted file mode 100644 index 0c7466966..000000000 --- a/platform/ui/src/components/selectTree/__docs__/selectTreeItems.js +++ /dev/null @@ -1,30 +0,0 @@ -export default [ - { - label: 'A', - value: 'A', - items: [ - { - label: 'Abdominal Wall', - value: 'AbdominalWall', - }, - { - label: 'Adrenal Left', - value: 'AdrenalLeft', - }, - ], - }, - { - label: 'B', - value: 'B', - items: [ - { - label: 'Brain', - value: 'Brain', - }, - { - label: 'Breast', - value: 'Breast', - }, - ], - }, -]; diff --git a/platform/ui/src/components/simpleDialog/__docs__/simpleDialog.mdx b/platform/ui/src/components/simpleDialog/__docs__/simpleDialog.mdx deleted file mode 100644 index 764074b10..000000000 --- a/platform/ui/src/components/simpleDialog/__docs__/simpleDialog.mdx +++ /dev/null @@ -1,83 +0,0 @@ ---- -name: Simple Dialog -menu: Components -route: /components/simple-dialog ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { SimpleDialog } from './../index.js' - -# Simple Dialog - -Its similar to a modal but we can pass its style as props and manipulate it as -we want. Initially used to display tool data changes in our Viewport. - -## Basic usage - - - - {({ state, setState }) => ( - - 
{JSON.stringify(state, null, 2) }
- - {/* Toggle Dialog */} - - - setState({ isDialogOpen: false })} - onConfirm={() => setState({ - isDialogOpen: false, - // If you don't want to update external state until complete, - // This is where you could grab current field values and update parent - // With setState - // - // inputValue: this.input.value, - // selectValue: this.select.value - })} - componentStyle={state.dialogStyle} - onValueChanged={(value) => setState({value}) } - > - - setState({inputValue: e.target.value})} - /> - - - - - )} - - - - -## API - - diff --git a/platform/ui/src/components/studyBrowser/__docs__/ExampleDropTarget.css b/platform/ui/src/components/studyBrowser/__docs__/ExampleDropTarget.css deleted file mode 100644 index 3d5fc34c6..000000000 --- a/platform/ui/src/components/studyBrowser/__docs__/ExampleDropTarget.css +++ /dev/null @@ -1,30 +0,0 @@ -.ExampleDropTarget { - display: flex; - justify-content: center; - flex-direction: column; - - min-height: 100px; - - border: 2px dashed black; - padding: 20px; - transition: 0.2s all ease; -} - -.ExampleDropTarget h4, -.ExampleDropTarger p { - text-align: center; - word-break: break-word; -} - -.ExampleDropTarget.can-drop { - border: 2px dashed #20a5d6; - background-color: #fafafa; - color: black; -} - -.ExampleDropTarget.hovered { - border: 2px dashed #20a5d6; - background-color: black; - color: #91b9cd; - cursor: copy; -} diff --git a/platform/ui/src/components/studyBrowser/__docs__/ExampleDropTarget.js b/platform/ui/src/components/studyBrowser/__docs__/ExampleDropTarget.js deleted file mode 100644 index e505eac31..000000000 --- a/platform/ui/src/components/studyBrowser/__docs__/ExampleDropTarget.js +++ /dev/null @@ -1,84 +0,0 @@ -import React, { Component } from 'react'; -import { DropTarget } from 'react-dnd'; -import PropTypes from 'prop-types'; -import './ExampleDropTarget.css'; - -// Drag sources and drop targets only interact -// if they have the same string type. -const Types = { - THUMBNAIL: 'thumbnail', -}; - -const divTarget = { - drop(props, monitor, component) { - // Note: For this example we use setState, but in - // OHIF we will update the redux store instead - const item = monitor.getItem(); - - component.setState({ - item: { - id: item.id, - SeriesDescription: item.SeriesDescription, - }, - }); - return { id: 'ExampleDropTarget' }; - }, -}; - -// TODO: Find out why we can't move this into the Example app instead. -// It looks like the context isn't properly shared. -class CustomDropTarget extends Component { - static className = 'ExampleDropTarget'; - - state = { - item: null, - }; - - static defaultProps = { - isOver: false, - }; - - static propTypes = { - connectDropTarget: PropTypes.func.isRequired, - canDrop: PropTypes.bool.isRequired, - isOver: PropTypes.bool.isRequired, - }; - - render() { - const { canDrop, isOver, connectDropTarget } = this.props; - const isActive = canDrop && isOver; - - let className = ExampleDropTarget.className; - - if (isActive) { - className += ' hovered'; - } else if (canDrop) { - className += ' can-drop'; - } - - return connectDropTarget( -
-

- {isActive - ? 'Release to drop' - : 'Drag / Drop something from the Study Browser here'} -

-

- {this.state.item && JSON.stringify(this.state.item)} -

-
- ); - } -} - -const collect = (connect, monitor) => ({ - connectDropTarget: connect.dropTarget(), - isOver: monitor.isOver(), - canDrop: monitor.canDrop(), -}); - -const ExampleDropTarget = DropTarget(Types.THUMBNAIL, divTarget, collect)( - CustomDropTarget -); - -export { ExampleDropTarget }; diff --git a/platform/ui/src/components/studyBrowser/__docs__/exampleStudies.js b/platform/ui/src/components/studyBrowser/__docs__/exampleStudies.js deleted file mode 100644 index a9ca38c67..000000000 --- a/platform/ui/src/components/studyBrowser/__docs__/exampleStudies.js +++ /dev/null @@ -1,75 +0,0 @@ -export const studies = [ - { - thumbnails: [ - { - imageSrc: - 'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/Anti-PD-1_Lung.jpg', - SeriesDescription: 'Anti-PD-1_Lung', - active: true, - SeriesNumber: '2', - numImageFrames: 512, - stackPercentComplete: 30, - }, - { - imageSrc: - 'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/Anti-PD-1_MELANOMA.jpg', - SeriesDescription: 'Anti-PD-1_MELANOMA', - SeriesNumber: '2', - InstanceNumber: '1', - numImageFrames: 256, - stackPercentComplete: 70, - }, - { - altImageText: 'SR', - SeriesDescription: 'Imaging Measurement Report', - SeriesNumber: '3', - stackPercentComplete: 100, - }, - ], - }, - { - thumbnails: [ - { - imageSrc: - 'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-GBM.jpg', - SeriesDescription: 'CPTAC-GBM', - active: true, - SeriesNumber: '2', - numImageFrames: 512, - stackPercentComplete: 100, - }, - { - imageSrc: - 'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-CM.jpg', - SeriesDescription: 'CPTAC-CM', - SeriesNumber: '2', - InstanceNumber: '1', - numImageFrames: 256, - }, - { - imageSrc: - 'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-HNSCC.jpg', - SeriesDescription: 'CPTAC-HNSCC', - SeriesNumber: '2', - InstanceNumber: '1', - numImageFrames: 256, - }, - { - imageSrc: - 'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-LSCC.jpg', - SeriesDescription: 'CPTAC-LSCC', - SeriesNumber: '2', - InstanceNumber: '1', - numImageFrames: 256, - }, - ], - }, -]; - -export function onThumbnailClick() { - console.warn('onThumbnailClick'); -} - -export function onThumbnailDoubleClick() { - console.warn('onThumbnailDoubleClick'); -} diff --git a/platform/ui/src/components/studyBrowser/__docs__/studyBrowser.mdx b/platform/ui/src/components/studyBrowser/__docs__/studyBrowser.mdx deleted file mode 100644 index f9606fe84..000000000 --- a/platform/ui/src/components/studyBrowser/__docs__/studyBrowser.mdx +++ /dev/null @@ -1,22 +0,0 @@ ---- -name: Study Browser -menu: Components -route: /components/study-browser ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { WrappedStudyBrowser } from './wrappedStudyBrowser.js' -import { StudyBrowser } from './../index.js' - -# Study Browser - -## Basic usage - - - - - -## API - - diff --git a/platform/ui/src/components/studyBrowser/__docs__/wrappedStudyBrowser.js b/platform/ui/src/components/studyBrowser/__docs__/wrappedStudyBrowser.js deleted file mode 100644 index d7fa76f54..000000000 --- a/platform/ui/src/components/studyBrowser/__docs__/wrappedStudyBrowser.js +++ /dev/null @@ -1,41 +0,0 @@ -import React, { Component } from 'react'; -import { DragDropContext } from 'react-dnd'; -import TouchBackend from 'react-dnd-touch-backend'; - -// -import { - studies, - onThumbnailClick, - onThumbnailDoubleClick, -} from './exampleStudies.js'; -import ExampleDropTarget from './ExampleDropTarget.js'; -import { StudyBrowser } from './../index.js'; - -class StudyBrowserContainer extends Component { - render() { - //const viewportData = [null, null, null, null]; - - return ( - - - - - ); - } -} - -// Note: -// Normally, the top level APP component is wrapped with the DragDropContext -// We wrap this component to create a simple/local example. -const WrappedStudyBrowser = DragDropContext( - TouchBackend({ enableMouseEvents: true }), - null, - true -)(StudyBrowserContainer); - -// http://react-dnd.github.io/react-dnd/docs/api/drag-drop-context -export { WrappedStudyBrowser }; diff --git a/platform/ui/src/components/studyList/__docs__/onSearch.js b/platform/ui/src/components/studyList/__docs__/onSearch.js deleted file mode 100644 index 17c7deb91..000000000 --- a/platform/ui/src/components/studyList/__docs__/onSearch.js +++ /dev/null @@ -1,72 +0,0 @@ -import moment from 'moment'; - -export default function(searchData) { - this.setState({ searchData }); - - const filter = (key, searchData, study) => { - if (key === 'studyDateFrom' && searchData[key] && study['StudyDate']) { - const StudyDate = moment(study['StudyDate'], 'YYYYMMDD'); - return StudyDate.isBetween( - searchData['studyDateFrom'], - searchData['studyDateTo'], - 'days', - '[]' - ); - } else if (searchData[key] && !study[key].includes(searchData[key])) { - return false; - } else { - return true; - } - }; - - const { field, order } = searchData.sortData; - - // just a example of local filtering - let filteredStudies = this.defaultStudies - .filter(function(study) { - const all = [ - 'PatientName', - 'PatientID', - 'AccessionNumber', - 'modalities', - 'StudyDescription', - 'studyDateFrom', - ].every(key => { - return filter(key, searchData, study); - }); - - return all; - }) - .sort(function(a, b) { - if (order === 'desc') { - if (a[field] < b[field]) { - return -1; - } - if (a[field] > b[field]) { - return 1; - } - return 0; - } else { - if (a[field] > b[field]) { - return -1; - } - if (a[field] < b[field]) { - return 1; - } - return 0; - } - }); - - // User can notice the loading icon - return new Promise(resolve => { - setTimeout(() => { - const first = searchData.currentPage * searchData.rowsPerPage; - let last = - searchData.currentPage * searchData.rowsPerPage + - searchData.rowsPerPage; - last = last >= filteredStudies.length ? filteredStudies.length : last; - this.setState({ studies: filteredStudies.slice(first, last) }); - resolve(); - }, 500); - }); -} diff --git a/platform/ui/src/components/studyList/__docs__/studies.js b/platform/ui/src/components/studyList/__docs__/studies.js deleted file mode 100644 index 86de8c647..000000000 --- a/platform/ui/src/components/studyList/__docs__/studies.js +++ /dev/null @@ -1,87 +0,0 @@ -import moment from 'moment'; - -const studies = [ - { - StudyInstanceUID: '11111.111111.111111.11111', - PatientName: 'John Doe', - PatientID: '1', - AccessionNumber: '1234567', - StudyDate: '19930201', - modalities: 'MR', - StudyDescription: 'BRAIN', - }, - { - StudyInstanceUID: '2222.222222.22222.22222', - PatientName: 'José Silva', - PatientID: '2', - AccessionNumber: '7654321', - StudyDate: moment().format('YYYYMMDD'), - modalities: 'CT', - StudyDescription: 'PET CT STANDARD', - }, - { - StudyInstanceUID: '3333.333333.33333.33333', - PatientName: 'Antônio Jefferson', - PatientID: '3', - AccessionNumber: '732311', - StudyDate: moment() - .subtract(14, 'days') - .format('YYYYMMDD'), - modalities: 'US', - StudyDescription: '0', - }, - { - StudyInstanceUID: '444444.44444.44444.4444', - PatientName: 'Antonio da Silva', - PatientID: '4', - AccessionNumber: '732311', - StudyDate: moment() - .subtract(1, 'months') - .format('YYYYMMDD'), - modalities: 'US', - StudyDescription: '0', - }, - { - StudyInstanceUID: '55555.55555.55555.55555', - PatientName: 'Bezerra Souza', - PatientID: '5', - AccessionNumber: '5134543', - StudyDate: moment() - .subtract(6, 'days') - .format('YYYYMMDD'), - modalities: 'US', - StudyDescription: '0', - }, - { - StudyInstanceUID: '66666.66666.66666.6666', - PatientName: 'Geraldo Roger', - PatientID: '6', - AccessionNumber: '5315135', - StudyDate: moment() - .subtract(7, 'days') - .format('YYYYMMDD'), - modalities: 'US', - StudyDescription: 'US', - }, - { - StudyInstanceUID: '77777.77777.77777.77777', - PatientName: '', - PatientID: '7', - AccessionNumber: '5315136', - StudyDate: moment() - .subtract(5, 'days') - .format('YYYYMMDD'), - modalities: 'US', - StudyDescription: 'US', - }, -].sort(function(a, b) { - if (a.PatientName < b.PatientName) { - return -1; - } - if (a.PatientName > b.PatientName) { - return 1; - } - return 0; -}); - -export default studies; diff --git a/platform/ui/src/components/studyList/__docs__/studyList.mdx b/platform/ui/src/components/studyList/__docs__/studyList.mdx deleted file mode 100644 index a782aa9d1..000000000 --- a/platform/ui/src/components/studyList/__docs__/studyList.mdx +++ /dev/null @@ -1,53 +0,0 @@ ---- -name: Study List -menu: Components -route: /components/study-list ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { StudyList } from './../index.js' -// Data -import defaultStudies from './studies.js' -import onSearch from './onSearch.js' -import moment from 'moment' - -# Study List - -## Basic usage - - - { - const StudyDate = moment(study['StudyDate'], 'YYYYMMDD'); - const startDate = moment().subtract(5, 'days'); - const endDate = moment(); - - return StudyDate.isBetween(startDate, endDate, 'days', '[]'); - }).slice(0, 5) - }}> - {({ state, setState }) => ( -
-
- alert('Import study mock ' + e)} - onSelectItem={(StudyInstanceUID) => { alert(StudyInstanceUID + ' has selected! Now you can open your study.'); }} - rowsPerPage={5} - defaultSort={{ field: 'PatientName', order: 'desc', }} - studyListDateFilterNumDays={7} - onSearch={onSearch.bind({ setState, defaultStudies })} - /> -
-
- )} - - - - -## API - - diff --git a/platform/ui/src/components/tabComponents/__docs__/tabComponents.mdx b/platform/ui/src/components/tabComponents/__docs__/tabComponents.mdx deleted file mode 100644 index 5f5e6531f..000000000 --- a/platform/ui/src/components/tabComponents/__docs__/tabComponents.mdx +++ /dev/null @@ -1,27 +0,0 @@ ---- -name: Tab Components -menu: Components -route: /components/tab-components ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { TabComponents } from './../index.js' - -// Data -import tabs from './tabs.js' - -# Tab Components - -## Basic usage - - - - - -## API - - diff --git a/platform/ui/src/components/tabComponents/__docs__/tabs.js b/platform/ui/src/components/tabComponents/__docs__/tabs.js deleted file mode 100644 index 8b2369558..000000000 --- a/platform/ui/src/components/tabComponents/__docs__/tabs.js +++ /dev/null @@ -1,26 +0,0 @@ -export default tabs = [ - { - name: 'tabName1', - Component: () => { - return
tab 1 Content
; - }, - customProps: {}, - hidden: false, - }, - { - name: 'tabName2', - Component: () => { - return
tab 2 Content
; - }, - customProps: {}, - hidden: false, - }, - { - name: 'tabName3', - Component: () => { - return
tab 3 Content
; - }, - customProps: {}, - hidden: true, - }, -]; diff --git a/platform/ui/src/components/tableList/__docs__/tableList.mdx b/platform/ui/src/components/tableList/__docs__/tableList.mdx deleted file mode 100644 index bea1c7db5..000000000 --- a/platform/ui/src/components/tableList/__docs__/tableList.mdx +++ /dev/null @@ -1,48 +0,0 @@ ---- -name: Table List -menu: Components -route: /components/table-list ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { TableList, TableListItem } from './../index.js' - -# Table List - -## Basic usage - - - - {({ state, setState }) => ( - - {state.listItems.map( (item, index) => { - return ( - alert('item clicked')} - > - - - )} - )} - - )} - - - - - -## API - - diff --git a/platform/ui/src/components/toolbarSection/__docs__/exampleButtons.js b/platform/ui/src/components/toolbarSection/__docs__/exampleButtons.js deleted file mode 100644 index 74e08b6a2..000000000 --- a/platform/ui/src/components/toolbarSection/__docs__/exampleButtons.js +++ /dev/null @@ -1,41 +0,0 @@ -export default [ - { - id: 'Pan', - label: 'Pan', - icon: 'arrows', - }, - { - label: 'Zoom', - icon: 'search', - }, - { - label: 'Bidirectional', - icon: 'measure-target', - }, - { - label: 'Stack Scroll', - icon: 'bars', - }, - { - label: 'Reset', - icon: 'reset', - }, - { - label: 'Manual', - icon: 'level', - }, - { - label: 'More', - icon: 'ellipse-circle', - buttons: [ - { - label: 'Reset 2', - icon: 'reset', - }, - { - label: 'Manual 2', - icon: 'adjust', - }, - ], - }, -]; diff --git a/platform/ui/src/components/toolbarSection/__docs__/toolbarSection.docs.mdx b/platform/ui/src/components/toolbarSection/__docs__/toolbarSection.docs.mdx deleted file mode 100644 index a246a2dd5..000000000 --- a/platform/ui/src/components/toolbarSection/__docs__/toolbarSection.docs.mdx +++ /dev/null @@ -1,39 +0,0 @@ ---- -name: Toolbar Section -menu: Components -route: /components/toolbar-section ---- - -import { Playground, Props } from 'docz'; -import { State } from 'react-powerplug'; -import { ToolbarSection } from './../index.js'; -import exampleButtons from './exampleButtons.js'; -import NameSpace from '../../../__docs__/NameSpace'; - -# ToolbarSection - -A basic row of buttons for a toolbar. Active command is `WwwcTool` - -## Basic usage - - - { - alert('pressed'); - }, - }} - > - {({ state, setState }) => } - - - -## API - - - -## Translation Namespace - - diff --git a/platform/ui/src/components/tooltip/__docs__/tooltip.noshow-mdx b/platform/ui/src/components/tooltip/__docs__/tooltip.noshow-mdx deleted file mode 100644 index e5adad984..000000000 --- a/platform/ui/src/components/tooltip/__docs__/tooltip.noshow-mdx +++ /dev/null @@ -1,20 +0,0 @@ ---- -name: Tooltip -menu: Components -route: /components/tooltip ---- - -import { Playground, Props } from 'docz' -import { Tooltip } from './../index.js' - -# Tooltip - -## Basic usage - - - - - -## API - - diff --git a/platform/ui/src/elements/Icon/__docs__/icon.mdx b/platform/ui/src/elements/Icon/__docs__/icon.mdx deleted file mode 100644 index c5b8f07a3..000000000 --- a/platform/ui/src/elements/Icon/__docs__/icon.mdx +++ /dev/null @@ -1,84 +0,0 @@ ---- -name: Icon -menu: Elements -route: /elements/icon ---- - -import { Playground, Props } from 'docz'; -import { State } from 'react-powerplug'; -import { Icon, ICONS } from './../index.js'; - -# Icon - -## Basic usage - - -
- {Object.keys(ICONS) - .sort() - .map((name, i) => { - return ( - -
- -
- {name} -
-
- - ); - })} -
- - -The `` component inherits the color of its parent, and sizing is based -on its parent's `font-size`. Each icon has an `aria-labelledby` to assist screen -readers. - -We use `airbnb`'s [`babel-plugin-inline-react-svg`][airbnb] to automate -optimizing SVG files with [SVGO][svgo] and to create animatable React SVG -components that can be requested asynchronously. You can configure SVGO's -plugins [by following the advice laid out here][svgo-configure] - -## API - - - -The `Icon` component takes a single prop of `name`, which indicates which Icon -should be displayed. Again, the icon responds to contextual text/font styles. - -## Attribution - -A large number of these icons are from [Font Awesome 5's free set.][fa-license] -Some attribution is likely required, depending on your usage. Sometimes as -little as a comment included side-by-side with the accompanying SVG icon. - - - - -[fa-license]: https://fontawesome.com/license -[airbnb]: https://github.com/airbnb/babel-plugin-inline-react-svg -[svgo]: https://github.com/svg/svgo/ -[svgo-configure]: https://github.com/airbnb/babel-plugin-inline-react-svg/issues/9#issuecomment-310178317) - diff --git a/platform/ui/src/elements/Svg/__docs__/svg.mdx b/platform/ui/src/elements/Svg/__docs__/svg.mdx deleted file mode 100644 index 6fe66a7ee..000000000 --- a/platform/ui/src/elements/Svg/__docs__/svg.mdx +++ /dev/null @@ -1,57 +0,0 @@ ---- -name: Svg -menu: Elements -route: /elements/svg ---- - -import { Playground, Props } from 'docz'; -import { State } from 'react-powerplug'; -import { Svg, SVGS } from './../index.js'; - -# Svg - -## Basic usage - - -
- {Object.keys(SVGS) - .sort() - .map((name, i) => { - return ( - -
- -
- {name} -
-
- - ); - })} -
- - -## API - - diff --git a/platform/ui/src/elements/form/__docs__/dropdownMenu.doc.mdx b/platform/ui/src/elements/form/__docs__/dropdownMenu.doc.mdx deleted file mode 100644 index 82be20cb6..000000000 --- a/platform/ui/src/elements/form/__docs__/dropdownMenu.doc.mdx +++ /dev/null @@ -1,42 +0,0 @@ ---- -name: Form / Dropdown Menu -menu: Elements -route: /elements/form-ddMenu ---- - -import { Playground, Props } from 'docz'; -import { State } from 'react-powerplug'; -import { DropdownMenu } from './../index.js'; - -# Select - -## Basic usage - - - - {({ state, setState }) => } - - - -## API - - diff --git a/platform/ui/src/elements/form/__docs__/label.doc.mdx b/platform/ui/src/elements/form/__docs__/label.doc.mdx deleted file mode 100644 index cac3a1652..000000000 --- a/platform/ui/src/elements/form/__docs__/label.doc.mdx +++ /dev/null @@ -1,32 +0,0 @@ ---- -name: Form / Label -menu: Elements -route: /elements/form-label ---- - -import { Playground, Props } from 'docz'; -import { State } from 'react-powerplug'; -import { Label } from './../index.js'; - -# Label - -## Basic usage - - - - {({ state, setState }) => ( -
-
- )} - - - -## API - - diff --git a/platform/ui/src/elements/form/__docs__/range.doc.mdx b/platform/ui/src/elements/form/__docs__/range.doc.mdx deleted file mode 100644 index 33eda0d66..000000000 --- a/platform/ui/src/elements/form/__docs__/range.doc.mdx +++ /dev/null @@ -1,33 +0,0 @@ ---- -name: Form / Range -menu: Elements -route: /elements/form-range ---- - -import { Playground, Props } from 'docz'; -import { State } from 'react-powerplug'; -import { Range } from './../index.js'; - -# Range - -## Basic usage - - - - {({ state, setState }) => ( -
- -
- )} - - - -## API - - diff --git a/platform/ui/src/elements/form/__docs__/select.docs.mdx b/platform/ui/src/elements/form/__docs__/select.docs.mdx deleted file mode 100644 index dd810bb4c..000000000 --- a/platform/ui/src/elements/form/__docs__/select.docs.mdx +++ /dev/null @@ -1,39 +0,0 @@ ---- -name: Form / Select -menu: Elements -route: /elements/form-select ---- - -import { Playground, Props } from 'docz'; -import { State } from 'react-powerplug'; -import { Select } from './../index.js'; - -# Select - -## Basic usage - - - - - {({ state, setState }) =>