merging with react branch

.babelrc

@@ -1,14 +1,17 @@
 {
   "presets": [
-    ["@babel/preset-env", {
-      "targets": {
-        "ie": "11"
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "ie": "11"
+        }
       }
-    }],
+    ],
     "@babel/preset-react"
   ],
   "plugins": [
-  	"@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-class-properties",
     "@babel/plugin-transform-regenerator",
     "@babel/plugin-transform-runtime"
   ]

.circleci/config.yml

@@ -0,0 +1,99 @@
+version: 2
+
+### ABOUT
+#
+# This configuration powers our Circleci.io integration
+#
+# Note:
+# Netlify works independently from this configuration to
+# create pull request previews and to update `https://docs.ohif.org`
+###
+
+defaults: &defaults
+  working_directory: ~/repo
+  docker:
+    - image: circleci/node:10.15.1
+
+jobs:
+  build_and_test:
+    <<: *defaults
+    steps:
+      # Download and cache dependencies
+      - checkout
+      - restore_cache:
+          name: Restore Yarn Package Cache
+          keys:
+            # when lock file changes, use increasingly general patterns to restore cache
+            - yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}
+            - yarn-packages-v1-{{ .Branch }}-
+            - yarn-packages-v1-
+      - run:
+          name: Install Dependencies
+          command: yarn install --frozen-lockfile
+      - save_cache:
+          name: Save Yarn Package Cache
+          paths:
+            - ~/.cache/yarn
+          key: yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}
+
+      # Build & Test
+      - run: yarn build
+      # https://www.viget.com/articles/using-junit-on-circleci-2-0-with-jest-and-eslint/
+      - run:
+          name: 'JavaScript Test Suite'
+          command: yarn test:ci
+          environment:
+            JEST_JUNIT_OUTPUT: 'reports/junit/js-test-results.xml'
+
+      # Store result
+      - store_test_results:
+          path: reports/junit
+      - store_artifacts:
+          path: reports/junit
+
+      # Persist :+1:
+      - persist_to_workspace:
+          root: ~/repo
+          paths: .
+
+  npm_publish:
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/repo
+      - run:
+          name: Avoid hosts unknown for github
+          command:
+            mkdir ~/.ssh/ && echo -e "Host github.com\n\tStrictHostKeyChecking
+            no\n" > ~/.ssh/config
+      # --no-ci argument is not ideal; however, semantic-rlease thinks we're
+      # attempting to run it from a `pr`, which is not the case
+      - run:
+          name: Publish using Semantic Release
+          command: npx semantic-release --debug --dry-run
+
+workflows:
+  version: 2
+
+  # PULL REQUESTS
+  pull_requests:
+    jobs:
+      - build_and_test:
+          filters:
+            branches:
+              ignore:
+                - master
+                - react
+                - feature/*
+                - hotfix/*
+
+  # MERGE TO REACT
+  cut_release:
+    jobs:
+      - build_and_test:
+          filters:
+            branches:
+              only: react
+      - npm_publish:
+          requires:
+            - build_and_test

.gitignore

@@ -6,6 +6,8 @@ build
 dist
 docs/_book
 src/version.js
+junit.xml
+coverage/
 
 # YALC (for Erik)
 .yalc

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "proseWrap": "always",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "endOfLine": "lf"
+}

.releaserc

@@ -0,0 +1,3 @@
+{
+  "branch": "react"
+}

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "sysoev.language-stylus",
+    "dbaeumer.vscode-eslint"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,30 @@
+{
+    "editor.rulers": [80, 120],
+  
+    // ===
+    // Spacing
+    // ===
+  
+    "editor.insertSpaces": true,
+    "editor.tabSize": 2,
+    "editor.trimAutoWhitespace": true,
+    "files.trimTrailingWhitespace": true,
+    "files.eol": "\n",
+    "files.insertFinalNewline": true,
+    "files.trimFinalNewlines": true,
+  
+    // ===
+    // Event Triggers
+    // ===
+  
+    "editor.formatOnSave": true,
+    "eslint.autoFixOnSave": true,
+    "eslint.run": "onSave",
+    "eslint.validate": [
+      { "language": "javascript", "autoFix": true },
+      { "language": "javascriptreact", "autoFix": true }
+    ],
+    "prettier.disableLanguages": [],
+    "prettier.endOfLine": "lf"
+  }
+  

LICENSE

@@ -19,4 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-

README-react.md

@@ -12,13 +12,16 @@ To user another DICOMWeb endpoint, adapt index.js
 
 ## To include in your projects
 
-Please refer to the example in the example directory. To set the DICOMWeb endpoint and do other customization, adapt index.html.
+Please refer to the example in the example directory. To set the DICOMWeb
+endpoint and do other customization, adapt index.html.
+
+### Build
 
-### Build 
 1. `yarn install`
 1. `yarn build`
 
-### Run the example 
+### Run the example
+
 1. `cd example`
 1. `yarn install`
 1. `yarn start`
@@ -26,4 +29,4 @@ Please refer to the example in the example directory. To set the DICOMWeb endpoi
 
 ## License
 
-MIT © [OHIF](https://github.com/OHIF)
+MIT © [OHIF](https://github.com/OHIF)

README.md

@@ -28,16 +28,30 @@
 
 ## Why?
 
-Building a web based medical imaging viewer from scratch is time intensive, hard to get right, and expensive. Instead of re-inventing the wheel, you can use the OHIF Viewer as a rock solid platform to build on top of. The Viewer is a [React][react-url] [Progressive Web Application][pwa-url] that can be embedded in existing applications via it's [packaged source (ohif-viewer)][ohif-viewer-url] or hosted stand-alone. The Viewer exposes [configuration][configuration-url] and [extensions][extensions-url] to support workflow customization and advanced functionality at common integration points.
-
-If you're interested in using the OHIF Viewer, but you're not sure it supports your use case [check out our docs](https://deploy-preview-398--ohif.netlify.com/). Still not sure, or you would like to propose new features? Don't hesitate to [create an issue](https://github.com/OHIF/Viewers/issues) or open a pull request ^_^
+Building a web based medical imaging viewer from scratch is time intensive, hard
+to get right, and expensive. Instead of re-inventing the wheel, you can use the
+OHIF Viewer as a rock solid platform to build on top of. The Viewer is a
+[React][react-url] [Progressive Web Application][pwa-url] that can be embedded
+in existing applications via it's [packaged source
+(ohif-viewer)][ohif-viewer-url] or hosted stand-alone. The Viewer exposes
+[configuration][configuration-url] and [extensions][extensions-url] to support
+workflow customization and advanced functionality at common integration points.
 
+If you're interested in using the OHIF Viewer, but you're not sure it supports
+your use case
+[check out our docs](https://deploy-preview-398--ohif.netlify.com/). Still not
+sure, or you would like to propose new features? Don't hesitate to
+[create an issue](https://github.com/OHIF/Viewers/issues) or open a pull request
+^\_^
 
 ## Getting Started
 
-This readme is specific to testing and developing locally. If you're more interested in production deployment strategies, [you can check out our documentation on publishing](https://deploy-preview-398--ohif.netlify.com/).
+This readme is specific to testing and developing locally. If you're more
+interested in production deployment strategies,
+[you can check out our documentation on publishing](https://deploy-preview-398--ohif.netlify.com/).
 
-Want to play around before you dig in? [Check out our LIVE Demo](https://viewer.ohif.org/)
+Want to play around before you dig in?
+[Check out our LIVE Demo](https://viewer.ohif.org/)
 
 ### Setup
 
@@ -50,10 +64,12 @@ _Steps:_
 
 1. Fork this repository
 2. Clone your forked repository (your `origin`)
-  - `git clone git@github.com:YOUR_GITHUB_USERNAME/Viewers.git`
-3. Add `OHIF/Viewers` as a `remote` repository (the `upstream`)
-  - `git remote add upstream git@github.com:OHIF/Viewers.git`
 
+- `git clone git@github.com:YOUR_GITHUB_USERNAME/Viewers.git`
+
+3. Add `OHIF/Viewers` as a `remote` repository (the `upstream`)
+
+- `git remote add upstream git@github.com:OHIF/Viewers.git`
 
 ### Developing Locally
 
@@ -68,16 +84,23 @@ yarn install
 yarn start
 ```
 
-For more advanced local development scenarios, like using your own locally hosted PACS and test data, [check out our Essential: Getting Started](https://deploy-preview-398--ohif.netlify.com/essentials/getting-started.html) guide.
-
+For more advanced local development scenarios, like using your own locally
+hosted PACS and test data,
+[check out our Essential: Getting Started](https://deploy-preview-398--ohif.netlify.com/essentials/getting-started.html)
+guide.
 
 ### Contributing
 
-> Large portions of the Viewer's functionality are maintained in other repositories. To get a better understanding of the Viewer's architecture and "where things live", read [our docs on the Viewer's architecture](https://deploy-preview-398--ohif.netlify.com/advanced/architecture.html#diagram)
+> Large portions of the Viewer's functionality are maintained in other
+> repositories. To get a better understanding of the Viewer's architecture and
+> "where things live", read
+> [our docs on the Viewer's architecture](https://deploy-preview-398--ohif.netlify.com/advanced/architecture.html#diagram)
 
 It is notoriously difficult to setup multiple dependent repositories for
 end-to-end testing and development. That's why we recommend writing and running
-unit tests when adding and modifying features. This allows us to program in isolation without a complex setup, and has the added benefit of producing well-tested business logic.
+unit tests when adding and modifying features. This allows us to program in
+isolation without a complex setup, and has the added benefit of producing
+well-tested business logic.
 
 1. Clone this repository
 2. Navigate to the project directory, and `yarn install`

docs/latest/advanced/extensions.md

@@ -17,7 +17,7 @@ class myCustomExtension {
      *  is used to help determine which component is used */
     getViewportModule: () => reactViewportComponent;
 
-    /** React component that adds buttons/behavior to the viewer Toolbar */ 
+    /** React component that adds buttons/behavior to the viewer Toolbar */
     getToolbarModule: () => reactToolbarComponent;
 
     /** Provides a whitelist of SOPClassUIDs the viewport is capable of rendering.
@@ -59,6 +59,7 @@ Viewport components are managed by the `LayoutManager`. Which Viewport component
 - The SopClassUID for visible/selected datasets
 
 ![Cornerstone Viewport](../assets/img/extensions-viewport.png)
+
 <center><i>An example of three Viewports</i></center>
 
 For a complete example implementation, [check out the OHIFCornerstoneViewport](https://github.com/OHIF/Viewers/blob/react/extensions/ohif-cornerstone-extension/src/OHIFCornerstoneViewport.js).
@@ -68,6 +69,7 @@ For a complete example implementation, [check out the OHIFCornerstoneViewport](h
 An extension can register a Toolbar Module by providing a `getToolbarModule()` method that returns a React Component. The component does not receive any props. If you want to modify or react to state, you will need to connect to the redux store.
 
 ![Toolbar Extension](../assets/img/extensions-toolbar.gif)
+
 <center><i>A toolbar extension example</i></center>
 
 Toolbar components are rendered in the `ToolbarRow` component.
@@ -91,13 +93,13 @@ In a future version, we will likely expose a way to provide the extensions you w
 _app.js_
 
 ```js
-import { createStore, combineReducers } from 'redux';
-import OHIF from 'ohif-core';
-import OHIFCornerstoneExtension from 'ohif-cornerstone-extension';
+import { createStore, combineReducers } from "redux";
+import OHIF from "ohif-core";
+import OHIFCornerstoneExtension from "ohif-cornerstone-extension";
 
 const combined = combineReducers(OHIF.redux.reducers);
 const store = createStore(combined);
-const extensions = [ new OHIFCornerstoneExtension() ];
+const extensions = [new OHIFCornerstoneExtension()];
 
 // Dispatches the `addPlugin` action to the store
 // Adding extension modules to `state.plugins.availablePlugins`
@@ -106,6 +108,6 @@ ExtensionManager.registerExtensions(store, extensions);
 
 ## OHIF Maintained Extensions
 
-A small number of powerful extensions for popular use cases are maintained by OHIF. They're co-located in the [`OHIF/Viewers`](https://github.com/OHIF/Viewers/tree/react/) repository, in the top level [`extensions/`](https://github.com/OHIF/Viewers/tree/react/extensions) directory. 
+A small number of powerful extensions for popular use cases are maintained by OHIF. They're co-located in the [`OHIF/Viewers`](https://github.com/OHIF/Viewers/tree/react/) repository, in the top level [`extensions/`](https://github.com/OHIF/Viewers/tree/react/extensions) directory.
 
 {% include "./_maintained-extensions-table.md" %}

docs/latest/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ohif-viewers-docs",
+  "name": "ohif-viewer-latest-docs",
   "version": "2.0.0",
   "description": "Open Health Imaging Foundation Viewers Metarepo for documentation",
   "main": ".eslintrc.js",

docs/v1/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ohif-viewers-docs",
+  "name": "ohif-viewer-v1-docs",
   "version": "1.0.0",
   "description": "Open Health Imaging Foundation Viewers Metarepo for documentation",
   "main": ".eslintrc.js",

jest.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  verbose: true,
+  testMatch: ['<rootDir>/src/**/*.test.js'],
+  //
+  collectCoverage: false,
+  collectCoverageFrom: [
+    '<rootDir>/src/**/*.{js,jsx}',
+    '!<rootDir>/src/**/*.test.js',
+    '!**/node_modules/**',
+  ],
+  reporters: ['default', 'jest-junit'],
+  //
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/src/__mocks__/fileMock.js',
+    '\\.(css|less)$': 'identity-obj-proxy',
+  },
+  setupFiles: ['<rootDir>/node_modules/jest-canvas-mock/lib/index.js'],
+  setupTestFrameworkScriptFile: '<rootDir>/src/__tests__/globalSetup.js',
+}

package.json

@@ -15,20 +15,43 @@
     "npm": ">=5"
   },
   "scripts": {
-    "build": "yarn run prep && node --max-old-space-size=8192 node_modules/rollup/bin/rollup -c",
-    "prepublishOnly": "yarn run build",
+    "cm": "npx git-cz",
+    "dev": "yarn run preBuild && cross-env PORT=5000 react-scripts start",
+    "dev:debug": "cross-env PORT=5000 react-scripts start",
+    "build": "yarn run preBuild && node --max-old-space-size=4096 node_modules/rollup/bin/rollup -c",
     "lint": "eslint -c .eslintrc --fix src && prettier --single-quote --write src/**/*.{js,jsx,json,css}",
-    "prepare": "yarn run build",
-    "predeploy": "cd example && npm install && yarn run build",
+    "test": "jest",
+    "test:ci": "jest --ci --runInBand --collectCoverage --reporters=default --reporters=jest-junit && codecov",
     "staticDeploy": "./generateStaticSite.sh",
-    "test:watch": "react-scripts test --env=jsdom",
-    "test": "cross-env CI=1 react-scripts test --env=jsdom",
-    "copy:webworkers": "cpx 'node_modules/cornerstone-wado-image-loader/dist/*.min.js*' public",
+    "predeploy": "cd example && npm install && yarn run build",
+    "preBuild": "yarn run version && yarn run copy:webworkers",
     "version": "node -p -e \"'export default \\'' + require('./package.json').version + '\\';'\" > src/version.js",
-    "details": "yarn run version",
-    "prep": "yarn run details && yarn run copy:webworkers",
-    "start": "yarn run prep && cross-env PORT=5000 react-scripts start",
-    "start:debug": "cross-env PORT=5000 react-scripts start"
+    "copy:webworkers": "cpx 'node_modules/cornerstone-wado-image-loader/dist/*.min.js*' public"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,json,css}": [
+      "prettier --single-quote --write",
+      "git add"
+    ]
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "files": [
+    "dist"
+  ],
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
   },
   "peerDependencies": {
     "react": "^15.0.0 || ^16.0.0",
@@ -46,7 +69,7 @@
     "dicom-parser": "^1.8.3",
     "dicomweb-client": "^0.4.2",
     "hammerjs": "^2.0.8",
-    "lodash.isequal": "^4.5.0",
+    "lodash.isequal": "4.5.0",
     "moment": "^2.24.0",
     "ohif-core": "0.4.1",
     "ohif-cornerstone-extension": "^0.0.26",
@@ -77,20 +100,28 @@
     "@babel/preset-react": "^7.0.0",
     "@svgr/rollup": "^4.1.0",
     "babel-eslint": "^9.0.0",
+    "codecov": "3.3.0",
+    "commitizen": "3.1.x",
     "cpx": "1.5.0",
     "cross-env": "^5.2.0",
+    "cz-conventional-changelog": "2.1.0",
     "eslint": "5.12.0",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-node": "^8.0.0",
     "eslint-plugin-promise": "^4.0.1",
     "eslint-plugin-react": "^7.11.1",
-    "husky": "^1.3.1",
+    "husky": "1.3.x",
+    "identity-obj-proxy": "3.0.x",
+    "jest-canvas-mock": "2.0.0",
+    "jest-junit": "6.3.x",
     "lint-staged": "^8.1.0",
-    "lodash.clonedeep": "^4.5.0",
-    "prettier": "^1.15.3",
+    "lodash": "4.17.11",
+    "lodash.clonedeep": "4.5.0",
+    "prettier": "1.15.x",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-scripts": "^2.1.5",
+    "react-test-renderer": "^16.8.6",
     "rollup": "^1.1.2",
     "rollup-plugin-babel": "^4.2.0",
     "rollup-plugin-commonjs": "^9.2.0",
@@ -100,28 +131,9 @@
     "rollup-plugin-peer-deps-external": "^2.2.0",
     "rollup-plugin-postcss": "^2.0.3",
     "rollup-plugin-url": "^2.1.0",
+    "semantic-release": "15.13.x",
     "stylelint": "^9.9.0",
     "stylelint-config-recommended": "^2.1.0",
     "stylus": "^0.54.5"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "src/**/*.{js,jsx,json,css}": [
-      "prettier --single-quote --write",
-      "git add"
-    ]
-  },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ],
-  "files": [
-    "dist"
-  ]
+  }
 }

src/__mocks__/fileMock.js

@@ -0,0 +1,3 @@
+// https://jestjs.io/docs/en/webpack#handling-static-assets
+
+module.exports = 'test-file-stub'

src/__tests__/globalSetup.js

@@ -0,0 +1,9 @@
+const _ = require('lodash')
+const originalConsoleError = console.error
+
+// JSDom's CSS Parser has limited support for certain features
+// This supresses error warnings caused by it
+console.error = function(msg) {
+  if (_.startsWith(msg, 'Error: Could not parse CSS stylesheet')) return
+  originalConsoleError(msg)
+}

src/sanity.test.js

@@ -0,0 +1,8 @@
+describe('Sanity Test', () => {
+  test('how many marbles?', () => {
+    const expectedMarbles = 4
+    const actualMarbles = 2 + 2
+
+    expect(actualMarbles).toEqual(expectedMarbles)
+  })
+})