Merge pull request #873 from dannyrb/docs/monorepo-updates-3

docs: contributing and recipes

README.md

@@ -273,7 +273,6 @@ MIT © [OHIF](https://github.com/OHIF)
 [netlify-image]: https://api.netlify.com/api/v1/badges/a5d369ab-18a6-41c3-bcde-83805205ac7f/deploy-status
 [netlify-url]: https://app.netlify.com/sites/ohif/deploys
 [all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square
-[contributing-url]: https://github.com/OHIF/Viewers/blob/master/CONTRIBUTING.md
 [circleci-image]: https://circleci.com/gh/OHIF/Viewers.svg?style=svg
 [circleci-url]: https://circleci.com/gh/OHIF/Viewers
 [codecov-image]: https://codecov.io/gh/OHIF/Viewers/branch/master/graph/badge.svg

docs/latest/README.md

@@ -40,7 +40,7 @@ Check out these helpful links:
 - Ready to dive into some code? Check out our
   [Getting Started Guide](./essentials/getting-started.md).
 - We're an active, vibrant community.
-  [Learn how you can be more involved.](./contributing.md)
+  [Learn how you can be more involved.](./contributing/index.md)
 - Feeling lost? Read our [help page](./help.md).
 
 <!--

docs/latest/SUMMARY.md

@@ -46,6 +46,6 @@
 ---
 
 - [FAQ](frequently-asked-questions.md)
-- [Contributing](contributing.md)
+- [Contributing](contributing/index.md)
 - [Browser Support](browser-support.md)
 - [Help](help.md)

docs/latest/contributing.md

@@ -1,103 +0,0 @@
-# Contributing
-
-## I would like to contribute code - how do I do this?
-
-Fork the repository, make your change and submit a pull request.
-
-- The OHIF Viewer consists of code from three different repositories. Make sure
-  your change is modifying the appropriate one:
-  - `ohif-core`: Business Logic
-  - `react-viewerbase`: Reusable React Component Library
-  - `Viewers`: The glue, PWA, and primary extension point
-- At a minimum, you may want to read the following documentation:
-  - [Essentials: Getting Started](./essentials/getting-started.md)
-  - [Advanced: Architecture](./advanced/architecture.md)
-
-### When changes impact multiple repositories
-
-This is a particularly tricky scenario. We don't want to publish code in one
-repository, just so we can test and complete the other half of its requirements
-in another. Thankfully, there are a couple of ways you can test unpublished
-dependent changes locally before publishing:
-
-- [Use `yarn link`](https://yarnpkg.com/en/docs/cli/link)
-
-For example if you are working on `ohif-core` and would like to use your local
-version to debug a problem in `Viewers`, simply run yarn link inside of the
-`ohif-core` project.
-
-- If you're experiencing issues with `yarn link`,
-  [try `yalc`](https://github.com/whitecolor/yalc)
-
-Yalc provides an improved workflow as we add more and more dependent packages
-that are "in-progress". This comes into play as we begin working on extensions
-and their dependencies.
-
-```js
-// Install yalc for the first time
-yarn global add yalc
-
-// EXAMPLE: using an in-development version of ohif-core w/ Viewers locally
-// 1. Navigate to ohif-core's project root
-yarn install
-yalc publish
-
-// 2. Run the following after each change to ohif-core
-yarn build
-yalc push .
-
-// 3. Use the local package in our Viewers project. Navigate to the Viewers
-//    Project root.
-yarn install
-yalc add ohif-core
-yarn run dev
-```
-
-## Any guidance on submitting changes?
-
-While we do appreciate code contributions, triaging and integrating contributed
-code changes can be very time consuming. Please consider the following tips when
-working on your pull requests:
-
-- Functionality is appropriate for the repository. Consider creating a GitHub
-  issue to discuss your suggested changes.
-- The scope of the pull request is not too large. Please consider separate pull
-  requests for each feature as big pull requests are very time consuming to
-  understand.
-
-We will provide feedback on your pull requests as soon as possible. Following
-the tips above will help ensure your changes are reviewed.
-
-## Testing contribution pull requests
-
-OHIF uses [netlify](netlify.com) so that pull requests are autogenerated and
-available for testing.
-
-For example, [this url][example-url] allows you to test [pull request 237, the
-request that created this FAQ entry,][pr-237] using data pulled from Amazon S3.
-
-Replacing the number 237 in the link below with your pull request number should
-let you test it as well and you can use this link for discussions on github
-without requiring reviewers to download and build your branch.
-
-```bash
-https://deploy-preview-237--ohif.netlify.com/viewer/?url=https://s3.eu-central-1.amazonaws.com/ohif-viewer/sampleDICOM.json
-```
-
-If you have made a documentation change, a link like this will let you preview
-the gitbook generated by the pull request:
-
-```bash
-https://deploy-preview-237--ohif.netlify.com/contributing.html
-```
-
-<!--
-  Links
-  -->
-
-<!-- prettier-ignore-start -->
-
-[example-url]: https://deploy-preview-237--ohif.netlify.com/viewer/?url=https://s3.eu-central-1.amazonaws.com/ohif-viewer/sampleDICOM.json
-[pr-237]: https://github.com/OHIF/Viewers/pull/237
-
-<!-- prettier-ignore-end -->

docs/latest/contributing/index.md

@@ -0,0 +1,115 @@
+# Contributing
+
+## How can I help?
+
+Fork the repository, make your change and submit a pull request. If you would
+like to discuss the changes you intend to make to clarify where or how they
+should be implemented, please don't hesitate to create a new issue. At a
+minimum, you may want to read the following documentation:
+
+- [Essentials: Getting Started](./essentials/getting-started.md)
+- [Advanced: Architecture](./advanced/architecture.md)
+
+### When changes impact multiple repositories
+
+While this can be tricky, we've tried to reduce how often this situation crops
+up this with our [recent switch to a monorepo][monorepo]. Our maintained
+extensions, ui components, internationalization library, and business logic can
+all be developed by simply running `yarn run dev` from the repository root.
+
+Testing the viewer with locally developed, unpublished package changes from a
+package outside of the monorepo is most common with extension development. Let's
+demonstrate how to accomplish this with two commonly forked extension
+dependencies:
+
+#### `cornerstone-tools`
+
+On your local file system:
+
+```bash
+# code/my-projects/
+.
+├── cornerstonejs/cornerstone-tools
+└── ohif/viewers
+```
+
+- Open a terminal/shell
+- Navigate to `cornerstonejs/cornerstone-tools`
+  - `npm install`
+  - [`yarn link`](https://yarnpkg.com/en/docs/cli/link)
+  - `npm run dev`
+- Open a new terminal/shell
+- Navigate to `ohif/viewers`.
+  - `yarn install`
+  - [`yarn link cornerstone-tools`](https://yarnpkg.com/en/docs/cli/link)
+  - `yarn run dev`
+
+As you make changed to `cornerstone-tools`, and it's output is rebuilt, you
+should see the following behavior:
+
+<!-- Insert GIF here -->
+
+If you wish to stop using your local package, run the following commands in the
+`ohif/viewers` repository root:
+
+- `yarn unlink cornerstone-tools`
+- `yarn install --force`
+
+#### `react-vtkjs-viewport`
+
+...
+
+#### Other linkage notes
+
+We're still working out some of the kinks with local package development as
+there are a lot of factors that can influence the behavior of our development
+server and bundler. If you encounter issues not addressed here, please don't
+hesitate to reach out on GitHub.
+
+## Any guidance on submitting changes?
+
+While we do appreciate code contributions, triaging and integrating contributed
+code changes can be very time consuming. Please consider the following tips when
+working on your pull requests:
+
+- Functionality is appropriate for the repository. Consider creating a GitHub
+  issue to discuss your suggested changes.
+- The scope of the pull request is not too large. Please consider separate pull
+  requests for each feature as big pull requests are very time consuming to
+  understand.
+
+We will provide feedback on your pull requests as soon as possible. Following
+the tips above will help ensure your changes are reviewed.
+
+## Testing contribution pull requests
+
+OHIF uses [netlify](netlify.com) so that pull requests are autogenerated and
+available for testing.
+
+For example, [this url][example-url] allows you to test [pull request 237, the
+request that created this FAQ entry,][pr-237] using data pulled from Amazon S3.
+
+Replacing the number 237 in the link below with your pull request number should
+let you test it as well and you can use this link for discussions on github
+without requiring reviewers to download and build your branch.
+
+```bash
+https://deploy-preview-237--ohif.netlify.com/viewer/?url=https://s3.eu-central-1.amazonaws.com/ohif-viewer/sampleDICOM.json
+```
+
+If you have made a documentation change, a link like this will let you preview
+the gitbook generated by the pull request:
+
+```bash
+https://deploy-preview-237--ohif.netlify.com/contributing.html
+```
+
+<!--
+  Links
+  -->
+
+<!-- prettier-ignore-start -->
+[example-url]: https://deploy-preview-237--ohif.netlify.com/viewer/?url=https://s3.eu-central-1.amazonaws.com/ohif-viewer/sampleDICOM.json
+[pr-237]: https://github.com/OHIF/Viewers/pull/237
+[monorepo]: https://github.com/OHIF/Viewers/issues/768
+<!-- prettier-ignore-end -->

docs/latest/essentials/themeing.md

@@ -4,7 +4,7 @@ Themeing is currently accomplished with color variables that are defined within
 the [`:root`](https://css-tricks.com/almanac/selectors/r/root/) selector
 (allowing them to cascade across all elements). This repository's components,
 and the ones we consume from our
-[React Viewerbase component library](https://react.ohif.org/styling-and-theming)
+[`@ohif/ui` component library](https://react.ohif.org/styling-and-theming)
 utilize them. We are interested in pursuing more robust themeing options, and
 open to pull requests and discussion issues.
 
@@ -80,12 +80,12 @@ function RadicalImagingLogo() {
       href: 'http://radicalimaging.com',
     },
     React.createElement('h5', {}, 'RADICAL IMAGING')
-  )
+  );
 }
 
 props.whiteLabelling = {
   logoComponent: RadicalImagingLogo(),
-}
+};
 ```
 
 <!--

docs/latest/essentials/translating.md

@@ -145,8 +145,8 @@ becomes a new namespace automatically.
 - CineDialog: Translations for the toll tips inside the Cine Player Dialog
 - Common: all common jargons that can be reused like `t('$t(common:image)')`
 - Header: translations related to OHIF's Header Top Bar
-- MeasurementTable - Translations for the react-viewerbase Measurement Table
+- MeasurementTable - Translations for the `@ohif/ui` Measurement Table
-- UserPreferencesModal - Translations for the react-viewerbase Preferences Modal
+- UserPreferencesModal - Translations for the `@ohif/ui` Preferences Modal
 
 ### How to use another NameSpace inside the current NameSpace?
 

docs/latest/frequently-asked-questions.md

@@ -19,8 +19,8 @@ Follow the steps outlined in the [Bug Report Template][bug-report-template].
 At the moment we are in the process of defining our roadmap and will do our best
 to communicate this to the community. If your requested feature is on the
 roadmap, then it will most likely be built at some point. If it is not, you are
-welcome to build it yourself and [contribute it](contributing.md). If you have
+welcome to build it yourself and [contribute it](contributing/index.md). If you
-resources and would like to fund the development of a feature, please
+have resources and would like to fund the development of a feature, please
 [contact us](http://www.ohif.org) or work with community members that offer
 [consulting services][commercial-support].
 

extensions/cornerstone/src/toolbarModule.js

@@ -3,8 +3,6 @@
 // - Include SVG Source/Inline?
 // - By URL, or own component?
 
-// TODO: `ohif-core` toolbar builder?
-
 // What KINDS of toolbar buttons do we have...
 // - One's that dispatch commands
 // - One's that set tool's active

extensions/dicom-html/package.json

@@ -20,9 +20,9 @@
     "access": "public"
   },
   "scripts": {
-    "dev": "cross-env NODE_ENV=production webpack --config .webpack/webpack.dev.js --watch --debug --output-pathinfo",
+    "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --debug --output-pathinfo",
     "dev:dicom-html": "yarn run dev",
-    "build": "webpack --config .webpack/webpack.prod.js",
+    "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
     "build:package": "yarn run build",
     "prepublishOnly": "yarn run build",
     "start": "yarn run dev"

platform/core/README.md

@@ -35,7 +35,7 @@ can be used with Vue, React, Vanilla JS, or any number of other frameworks.
 
 The documentation for this library is sparse. The best way to get started is to
 look at its
-[top level exports](https://github.com/OHIF/ohif-core/blob/master/src/index.js),
+[top level exports](https://github.com/OHIF/Viewers/blob/master/platform/core/src/index.js),
 and explore the source code of features that interest you. If you want to see
 how we use this library, you can check out [our viewer
 implementation][react-viewer].
@@ -57,12 +57,12 @@ yarn add @ohif/core --exact
 ### Usage
 
 Usage is dependent on the feature(s) you want to leverage. The bulk of
-`ohif-core`'s features are "pure" and can be imported and used in place.
+`@ohif/core`'s features are "pure" and can be imported and used in place.
 
 _Example: retrieving study metadata from a server_
 
 ```js
-import { studies } from "@ohif/core";
+import { studies } from '@ohif/core';
 
 const studiesMetadata = await studies.retrieveStudiesMetadata(
   server, // Object
@@ -125,11 +125,10 @@ Links:
 
 <!-- prettier-ignore-start -->
 <!-- ROW -->
-[npm-url]: https://npmjs.org/package/ohif-core
+[npm-url]: https://npmjs.org/package/@ohif/core
-[npm-downloads-image]: https://img.shields.io/npm/dm/ohif-core.svg?style=flat-square
+[npm-downloads-image]: https://img.shields.io/npm/dm/@ohif/core.svg?style=flat-square
-[npm-version-image]: https://img.shields.io/npm/v/ohif-core.svg?style=flat-square
+[npm-version-image]: https://img.shields.io/npm/v/@ohif/core.svg?style=flat-square
 [all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square
-[contributing-url]: https://github.com/OHIF/ohif-core/blob/master/CONTRIBUTING.md
 [license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square
 [license-url]: LICENSE
 <!-- Misc. -->

platform/ui/README.md

@@ -49,8 +49,8 @@ yarn add @ohif/ui --exact
 ## Usage
 
 ```jsx
-import React, { Component } from "react";
+import React, { Component } from 'react';
-import { LayoutButton } from "@ohif/ui";
+import { LayoutButton } from '@ohif/ui';
 
 class Example extends Component {
   constructor(props) {
@@ -58,10 +58,10 @@ class Example extends Component {
 
     this.state = {
       selectedCell: {
-        className: "hover",
+        className: 'hover',
         col: 1,
-        row: 1
+        row: 1,
-      }
+      },
     };
   }
 
@@ -117,10 +117,9 @@ Links:
 
 <!-- prettier-ignore-start -->
 [all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square
-[contributing-url]: https://github.com/OHIF/react-viewerbase/blob/master/CONTRIBUTING.md
+[npm-url]: https://npmjs.org/package/@ohif/ui
-[npm-url]: https://npmjs.org/package/react-viewerbase
+[npm-downloads-image]: https://img.shields.io/npm/dm/@ohif/ui.svg?style=flat-square
-[npm-downloads-image]: https://img.shields.io/npm/dm/react-viewerbase.svg?style=flat-square
+[npm-version-image]: https://img.shields.io/npm/v/@ohif/ui.svg?style=flat-square
-[npm-version-image]: https://img.shields.io/npm/v/react-viewerbase.svg?style=flat-square
 [license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square
 [license-url]: LICENSE
 <!-- prettier-ignore-end -->

platform/ui/src/__docs__/compatibility.mdx

@@ -7,7 +7,7 @@ route: /compatibility
 
 ## Browser Support
 
-React Viewerbase relies on
+`@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.
 

platform/ui/src/__docs__/getting-started.mdx

@@ -11,20 +11,20 @@ route: /getting-started
 > possibility of introducing breaking changes. Please depend on an "exact"
 > version in your projects to prevent issues caused by loose versioning.
 
-Install `react-viewerbase` from npm:
+Install `@ohif/ui` from npm:
 
 ```shell
 // with npm
-npm i react-viewerbase --save-exact
+npm i @ohif/ui --save-exact
 
 // with yarn
-yarn add react-viewerbase --exact
+yarn add @ohif/ui --exact
 ```
 
 ## Usage
 
-There is some setup required for `react-viewerbase`. We are working to eliminate
+There is some setup required for `@ohif/ui`. We are working to eliminate these
-these requirements with the goal of providing ready to use components.
+requirements with the goal of providing ready to use components.
 
 ### External Dependencies
 
@@ -37,8 +37,8 @@ or the font you set for your theme:
 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700|Sanchez&display=swap';
 ```
 
-React Viewerbase also looks for theme CSS variabled defined on `:root`. You can
+`@ohif/ui` also looks for theme CSS variabled defined on `:root`. You can find a
-find a list of variables [on the theming page](/styling-and-theming)
+list of variables [on the theming page](/styling-and-theming)
 
 ### Import & Use
 
@@ -46,7 +46,7 @@ You can use components in your React app:
 
 ```js
 import React, { Component } from 'react';
-import { LayoutButton } from 'react-viewerbase';
+import { LayoutButton } from '@ohif/ui';
 
 class Example extends Component {
   constructor(props) {

platform/ui/src/__docs__/introduction.mdx

@@ -3,14 +3,14 @@ name: Introduction
 route: /
 ---
 
-import { Playground, Props } from 'docz'
+import { Playground, Props } from 'docz';
-import { State } from 'react-powerplug'
+import { State } from 'react-powerplug';
-import { TableList, TableListItem } from './../index.js'
+import { TableList, TableListItem } from './../index.js';
 
 # Introduction
 
-**React Viewerbase is a collection of components and utilities** that power
+**@ohif/ui is a collection of components and utilities** that power OHIF's
-OHIF's [zero-footprint DICOM viewer](https://github.com/OHIF/Viewers)
+[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
@@ -25,11 +25,11 @@ OHIF's [zero-footprint DICOM viewer](https://github.com/OHIF/Viewers)
 > version in your projects to prevent issues caused by loose versioning.
 
 ```js
-// Add 'react-viewerbase' as a dependency
+// Add '@ohif/ui' as a dependency
-yarn add react-viewerbase
+yarn add @ohif/ui
 
 // Import and use components
-import { TableList } from 'react-viewerbase'
+import { TableList } from '@ohif/ui'
 ```
 
 <Playground>
@@ -56,7 +56,7 @@ import { TableList } from 'react-viewerbase'
             >
               <label>{item.label}</label>
             </TableListItem>
-          )
+          );
         })}
       </TableList>
     )}

platform/ui/src/__docs__/translating.mdx

@@ -36,9 +36,9 @@ export default withTranslation('MyNameSpace')(MyComponent);
 For further information about namespaces and how they work, please visit
 [OHIF Namespaces docs](https://docs.ohif.org/essentials/translating.html#namespaces).
 
-### How to get right the Name Space of a react-viewerbase component?
+### 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
+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
@@ -50,10 +50,10 @@ E.g.
 export default withTranslation('TheNamespaceYouAreLookingFor')(TheComponentYouWantToUse);
 ```
 
-### How to use another NameSpace inside the current NameSpace?
+### 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:
+Namespace, like this following example getting data from `InnerSpace` Namespace:
 
 ```
 $t(InnerSpace:Reset)
@@ -64,8 +64,8 @@ export default withTranslation('OuterSpace')(TheComponent);
 
 ## I18next Provider
 
-**React Viewerbase** pass down the `t` function trough the custom
+**@ohif/ui** pass down the `t` function trough the custom
-[withTranslation HOC](https://github.com/OHIF/react-viewerbase/blob/master/src/utils/LanguageProvider.js).
+[withTranslation HOC](https://github.com/OHIF/Viewers/blob/master/platform/ui/src/utils/LanguageProvider.js).
 
 ---
 

platform/ui/src/components/cineDialog/CineDialog.js

@@ -121,11 +121,6 @@ class CineDialog extends PureComponent {
     }
   };
 
-  // TODO:
-  // - Add next / previous display set buttons which just call
-  // onClickNextDisplaySet and onClickPreviousDisplaySet which are passed in as props.
-  // See https://github.com/OHIF/Viewers/blob/master/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.html#L38
-  // - Add 'isEnabled' prop: https://github.com/OHIF/Viewers/blob/master/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.js#L301
   render() {
     const { t } = this.props;
     return (

platform/viewer/README.md

@@ -188,7 +188,6 @@ Links:
 [docker-pulls-img]: https://img.shields.io/docker/pulls/ohif/viewer.svg?style=flat-square
 [docker-image-url]: https://hub.docker.com/r/ohif/viewer
 [all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square
-[contributing-url]: https://github.com/OHIF/Viewers/blob/react/CONTRIBUTING.md
 [license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square
 [license-url]: LICENSE
 <!-- DOCS -->

platform/viewer/public/config/docker_openresty-orthanc-keycloak.js

@@ -13,7 +13,6 @@ window.config = {
         imageRendering: 'wadors',
         thumbnailRendering: 'wadors',
         // REQUIRED TAG:
-        // https://github.com/OHIF/ohif-core/blob/59e1e04b92be24aee5d4402445cb3dcedb746995/src/studies/retrieveStudyMetadata.js#L54
         // TODO: Remove tag after https://github.com/OHIF/ohif-core/pull/19 is merged and we bump version
         requestOptions: {
           // undefined to use JWT + Bearer auth
@@ -39,4 +38,4 @@ window.config = {
       post_logout_redirect_uri: '/logout-redirect.html',
     },
   ],
-}
+};

platform/viewer/src/store/index.js

@@ -11,7 +11,7 @@ import { reducer as oidcReducer } from 'redux-oidc';
 import { redux } from '@ohif/core';
 import thunkMiddleware from 'redux-thunk';
 
-// Combine our ohif-core, ui, and oidc reducers
+// Combine our @ohif/core, ui, and oidc reducers
 // Set init data, using values found in localStorage
 const { reducers, localStorage } = redux;
 const middleware = [thunkMiddleware];