feat: nuke UI project; start new with updated tooling BREAKING_CHANGE (#1468)

BREAKING_CHANGE * initial structure for components rewrite * WIP Input * WIP Label * add button props * add label class name * fix dependency * new examples buttonModules & buttonEmotion + refac * clean up to merge initial code into base branch * remove unused file * extend default theme -- add new colors * chore: prettier formatting * chore: try to exclude feature branch PRs * chore: suggest toml syntax highlighting extension * chore: capture yarn.lock changes * docs: condense readme * chore: update deploy preview to build docz component library * chore: Add component library to deploy preview index * chore: fix invalid tailwindcss config * chore: try tweaking toml to kickstart preview * chore: revert * chore: fix formatting of file index * chore: don't waste precious build minutes on a broken build * chore: chmod build-and-deploy.sh * ci: nuke circleci until we need the workflows on master * debug lerna commands * remove redundant yarn commands * try nohoist * revert tests * attempt to resolve import issue * force update yarn lock * try new workarounds for yarn version * another workaround * shift vtk to extension repo deps * catch vtk addition * update lock * Try older yarn version * try again * debugging * fix: yarn doctor warnings * learn some life lessons from the yarn docs * clean up netlify.toml * clean up netlify.toml * yarn package doctor react-dom * yarn doctor: missing peer dep * yarn doctor, satisfying webpack loader peer deps * fix docz base path for deploy-preview * yarn docter: replaced prePublishOnly usage * More yarn doctoring * ignore .yarn directory * fix last yarn doctor warning * updated yarn lock Co-authored-by: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>
2020-03-02 13:37:00 -05:00 · 2020-03-02 13:37:00 -05:00 · d6e3b45f3c
commit d6e3b45f3c
parent 8c90d76ea6
28 changed files with 22736 additions and 693 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -251,7 +251,9 @@ jobs:
          command:
            echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/repo/.npmrc
      - run: npx lerna version
+      - run: yarn run build:package-all
      - run: npx lerna publish from-package
+      - run: npx lerna run ci:generateSuccessVersion --stream
      - persist_to_workspace:
          root: ~/repo
          paths: .
@ -283,7 +285,7 @@ jobs:
          name: Build and push Docker image
          command: |
            # This file will exist if a new version was published by
-            # our command in the previous job. Created in npm postpublish hook
+            # our command in the previous job. Created in npm ci:generateSuccessVersion script
            # in the `platform/viewer` project.
            if [[ ! -e platform/viewer/success_version.txt ]]; then
              exit 0
@ -305,109 +307,9 @@ jobs:
 workflows:
  version: 2

-  PR_CHECKS:
-    jobs:
-      - UNIT_TESTS:
-          filters:
-            branches:
-              ignore:
-                - master
-                - feature/*
-                - hotfix/*
-      # E2E: PWA
-      - cypress/run:
-          name: 'E2E: PWA'
-          executor: cypress/browsers-chrome76
-          browser: chrome
-          pre-steps:
-            - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
-                add wait-on' # Use yarn latest
-          yarn: true
-          record: false
-          store_artifacts: false
-          working_directory: platform/viewer
-          build: npx cross-env QUICK_BUILD=true yarn run build
-          start: yarn run test:e2e:serve
-          spec: 'cypress/integration/common/**/*,cypress/integration/pwa/**/*'
-          wait-on: 'http://localhost:3000'
-          cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
-          no-workspace: true # Don't persist workspace
-          post-steps:
-            - store_artifacts:
-                path: platform/viewer/cypress/screenshots
-            - store_artifacts:
-                path: platform/viewer/cypress/videos
-          requires:
-            - UNIT_TESTS
-      # E2E: script-tag
-      - cypress/run:
-          name: 'E2E: Script Tag'
-          executor: cypress/browsers-chrome76
-          browser: chrome
-          pre-steps:
-            - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
-                add wait-on' # Use yarn latest
-          yarn: true
-          record: false
-          store_artifacts: false
-          working_directory: platform/viewer
-          build: npx cross-env QUICK_BUILD=true yarn run build:package
-          start: yarn run test:e2e:serve
-          spec: 'cypress/integration/common/**/*,cypress/integration/script-tag/**/*'
-          wait-on: 'http://localhost:3000'
-          cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
-          no-workspace: true # Don't persist workspace
-          post-steps:
-            - store_artifacts:
-                path: platform/viewer/cypress/screenshots
-            - store_artifacts:
-                path: platform/viewer/cypress/videos
-          requires:
-            - UNIT_TESTS
+  # WORKFLOWS Disabled until this feature branch is further along
+  # See Master's CircleCI Config

-  PR_OPTIONAL_VISUAL_TESTS:
-    jobs:
-      - AWAIT_APPROVAL:
-          type: approval
-      # Update hub.docker.org
-      - cypress/run:
-          name: 'Generate Percy Snapshots'
-          executor: cypress/browsers-chrome76
-          browser: chrome
-          pre-steps:
-            - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
-                add wait-on' # Use yarn latest
-          yarn: true
-          store_artifacts: false
-          working_directory: platform/viewer
-          build: npx cross-env QUICK_BUILD=true yarn run build
-          # start server --> verify running --> percy + chrome + cypress
-          command: yarn run test:e2e:dist
-          cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
-          no-workspace: true # Don't persist workspace
-          post-steps:
-            - store_artifacts:
-                path: platform/viewer/cypress/screenshots
-            - store_artifacts:
-                path: platform/viewer/cypress/videos
-          requires:
-            - AWAIT_APPROVAL
-
-  PR_OPTIONAL_DOCKER_PUBLISH:
-    jobs:
-      # https://circleci.com/docs/2.0/workflows/#holding-a-workflow-for-a-manual-approval
-      - AWAIT_APPROVAL:
-          type: approval
-      # Update hub.docker.org
-      - DOCKER_PR_PUBLISH:
-          context: Docker Hub
-          requires:
-            - AWAIT_APPROVAL
-
-  ###
-  # Our workflow for building, deploying, and promoting builds across our
-  # development, staging, and production environments.
-  ###
  DEPLOY:
    jobs:
      - BUILD:
@ -417,61 +319,3 @@ workflows:
      - DEPLOY_TO_DEV:
          requires:
            - BUILD
-      - PROMOTE_TO_STAGING:
-          type: approval
-          requires:
-            - DEPLOY_TO_DEV
-      - DEPLOY_TO_STAGING:
-          requires:
-            - PROMOTE_TO_STAGING
-      - PROMOTE_TO_PRODUCTION:
-          type: approval
-          requires:
-            - DEPLOY_TO_STAGING
-      - DEPLOY_TO_PRODUCTION:
-          requires:
-            - PROMOTE_TO_PRODUCTION
-  ###
-  # Unit and E2E tests have already run for PR_CHECKS
-  # Re-running should not gain us any confidence here
-  ###
-  RELEASE:
-    jobs:
-      - NPM_PUBLISH:
-          filters:
-            branches:
-              only: master
-      - DOCS_PUBLISH:
-          filters:
-            branches:
-              only: master
-      # Update base branch snapshots
-      # and record a Cypress dashboard test run
-      - cypress/run:
-          name: 'Generate Percy Snapshots'
-          executor: cypress/browsers-chrome76
-          browser: chrome
-          pre-steps:
-            - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
-                add wait-on' # Use yarn latest
-          yarn: true
-          store_artifacts: false
-          working_directory: platform/viewer
-          build: npx cross-env QUICK_BUILD=true yarn run build
-          # start server --> verify running --> percy + chrome + cypress
-          command: yarn run test:e2e:dist
-          cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
-          no-workspace: true # Don't persist workspace
-          post-steps:
-            - store_artifacts:
-                path: platform/viewer/cypress/screenshots
-            - store_artifacts:
-                path: platform/viewer/cypress/videos
-            - store_test_results:
-                path: platform/viewer/cypress/results
-          filters:
-            branches:
-              only: master
-      - DOCKER_MASTER_PUBLISH:
-          requires:
-            - NPM_PUBLISH
--- a/.gitignore
+++ b/.gitignore
@ -9,6 +9,7 @@ src/version.js
 junit.xml
 coverage/
 .docz/
+.yarn/

 # YALC (for Erik)
 .yalc
--- a/.netlify/build-deploy-preview.sh
+++ b/.netlify/build-deploy-preview.sh
@ -6,21 +6,24 @@ cd "$(dirname "$0")"
 cd .. # Up to project root

 # Helpful to verify which versions we're using
+echo 'My yarn version is... '
+
 yarn -v
 node -v

-# Install build deps and all monorepo package dependencies. Yarn Workspaces
-# should also symlink all projects appropriately
-yarn install --no-ignore-optional --pure-lockfile
-
 # Build && Move PWA Output
-yarn run build:ci
-mkdir -p ./.netlify/www/pwa
-mv platform/viewer/dist/* .netlify/www/pwa -v
+# yarn run build:ci
+# mkdir -p ./.netlify/www/pwa
+# mv platform/viewer/dist/* .netlify/www/pwa -v

 # Build && Move script output
 # yarn run build:package

+# Build && Move Docz Output
+yarn run build:ui:deploy-preview
+mkdir -p ./.netlify/www/ui
+mv platform/ui/.docz/dist/* .netlify/www/ui -v
+
 echo 'Nothing left to see here. Go home, folks.'

 # Build using react-scripts
--- a/.netlify/www/_redirects
+++ b/.netlify/www/_redirects
@ -4,3 +4,5 @@

 # PWA Demo
 /pwa/* /pwa/index.html 200
+# UI Demo
+/ui/* /ui/index.html 200
--- a/.netlify/www/index.html
+++ b/.netlify/www/index.html
@ -1,14 +1,20 @@
 <html>
-  <head>
-    <title>OHIF Viewer: Deploy Preview</title>
-  </head>
-  <body>
-    <h1>Index of Previews</h1>

-    <ul>
-      <li>
-        <a href="/pwa">Progressive Web App</a>
-      </li>
-    </ul>
-  </body>
+<head>
+  <title>OHIF Viewer: Deploy Preview</title>
+</head>
+
+<body>
+  <h1>Index of Previews</h1>
+
+  <ul>
+    <li>
+      <a href="/pwa">PWA: Viewer</a>
+    </li>
+    <li>
+      <a href="/ui">UI: Component Library</a>
+    </li>
+  </ul>
+</body>
+
 </html>
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -3,6 +3,7 @@
    "esbenp.prettier-vscode",
    "sysoev.language-stylus",
    "dbaeumer.vscode-eslint",
-    "mikestead.dotenv"
+    "mikestead.dotenv",
+    "bungcip.better-toml"
  ]
 }
--- a/build-and-publish-docs.sh
+++ b/build-and-publish-docs.sh
@ -1,64 +0,0 @@
-#!/bin/bash
-
-# Set directory to location of this script
-# https://stackoverflow.com/a/3355423/1867984
-cd "$(dirname "$0")"
-
-yarn -v
-node -v
-
-echo 'Installing Gitbook CLI'
-yarn global add gitbook-cli
-
-echo 'Running Gitbook installation'
-
-# Generate all version's GitBook output
-# For each directory in /docs ...
-cd ./../docs/
-for D in *; do
-    if [ -d "${D}" ]; then
-
-			echo "Generating output for: ${D}"
-			cd "${D}"
-
-			# Clear previous output, generate new
-			rm -rf _book
-			gitbook install
-			gitbook build
-
-			cd ..
-
-		fi
-done
-
-# Move CNAME File into `latest`
-cp CNAME ./latest/_book/CNAME
-
-# Create a history folder in our latest version's output
-mkdir ./latest/_book/history
-
-# Move each version's files to latest's history folder
-for D in *; do
-	if [ -d "${D}" ]; then
-		if [ "${D}" == v* ] ; then
-
-			echo "Moving ${D} to the latest version's history folder"
-
-			mkdir "./latest/_book/history/${D}"
-			cp -v -r "./${D}/_book"/* "./latest/_book/history/${D}"
-
-		fi
-	fi
-done
-
-# Back to repo root
-cd ..
-
-echo "Done generating documentation output"
-echo 'PUBLISHING'
-
-./node_modules/.bin/gh-pages \
-  --silent \
-  --repo https://$GITHUB_TOKEN@github.com/OHIF/Viewers.git \
-  --message 'Autogenerated Message: [ci skip]' \
-	--dist docs/latest/_book
--- a/build-deploy-preview.sh
+++ b/build-deploy-preview.sh
@ -0,0 +1,46 @@
+#!/bin/bash
+
+# Set directory to location of this script
+# https://stackoverflow.com/a/3355423/1867984
+cd "$(dirname "$0")"
+cd .. # Up to project root
+
+# Helpful to verify which versions we're using
+echo 'My yarn version is... '
+
+yarn -v
+node -v
+
+# Make sure we can hit yarn packages
+# yarn global bin
+# yarn config get prefix
+# yarn config set prefix ~/.yarn
+# export PATH="$PATH:`yarn global bin`"
+
+echo '~~ Revving our engines'
+
+yarn list
+
+echo 'shouldnt be required'
+
+yarn global add lerna
+
+yarn list
+
+# Build && Move PWA Output
+# yarn run build:ci
+# mkdir -p ./.netlify/www/pwa
+# mv platform/viewer/dist/* .netlify/www/pwa -v
+
+# Build && Move script output
+# yarn run build:package
+
+# Build && Move Docz Output
+yarn run build:ui
+mkdir -p ./.netlify/www/ui
+mv platform/ui/.docz/dist/* .netlify/www/ui -v
+
+echo 'Nothing left to see here. Go home, folks.'
+
+# Build using react-scripts
+# npx cross-env PUBLIC_URL=/demo APP_CONFIG=config/netlify.js react-scripts --max_old_space_size=4096 build
--- a/extensions/cornerstone/package.json
+++ b/extensions/cornerstone/package.json
@ -24,7 +24,6 @@
    "dev:cornerstone": "yarn run dev",
    "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",
    "test:unit": "jest --watchAll",
    "test:unit:ci": "jest --ci --runInBand --collectCoverage"
@ -32,7 +31,7 @@
  "peerDependencies": {
    "@ohif/core": "^0.50.0",
    "@ohif/ui": "^0.50.0",
-    "cornerstone-core": "^2.2.8",
+    "cornerstone-core": "^2.3.0",
    "cornerstone-math": "^0.1.8",
    "cornerstone-tools": "4.15.1",
    "cornerstone-wado-image-loader": "^3.1.0",
@ -40,14 +39,14 @@
    "dicom-parser": "^1.8.3",
    "hammerjs": "^2.0.8",
    "prop-types": "^15.6.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
    "react-redux": "^6.0.0",
    "react-resize-detector": "^3.4.0",
    "redux": "^4.0.1"
  },
  "dependencies": {
-    "@babel/runtime": "^7.5.5",
+    "@babel/runtime": "7.7.6",
    "classnames": "^2.2.6",
    "lodash.merge": "^4.6.2",
    "lodash.throttle": "^4.1.1",
--- a/extensions/dicom-html/package.json
+++ b/extensions/dicom-html/package.json
@ -24,17 +24,16 @@
    "dev:dicom-html": "yarn run dev",
    "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"
  },
  "peerDependencies": {
    "@ohif/core": "^0.50.0",
    "dcmjs": "^0.12.3",
    "prop-types": "^15.6.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0"
  },
  "dependencies": {
-    "@babel/runtime": "^7.5.5"
+    "@babel/runtime": "7.7.6"
  }
 }
--- a/extensions/dicom-microscopy/package.json
+++ b/extensions/dicom-microscopy/package.json
@ -24,16 +24,15 @@
    "dev:dicom-microscopy": "yarn run dev",
    "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"
  },
  "peerDependencies": {
    "@ohif/core": "^0.50.0",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0"
  },
  "dependencies": {
-    "@babel/runtime": "^7.5.5",
+    "@babel/runtime": "7.7.6",
    "classnames": "^2.2.6",
    "dicom-microscopy-viewer": "^0.6.1"
  }
--- a/extensions/dicom-pdf/package.json
+++ b/extensions/dicom-pdf/package.json
@ -24,18 +24,18 @@
    "dev:dicom-pdf": "yarn run dev",
    "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"
  },
  "peerDependencies": {
    "@ohif/core": "^0.50.0",
    "dicom-parser": "^1.8.3",
    "prop-types": "^15.6.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
+    "webpack": "^4.0.0"
  },
  "dependencies": {
-    "@babel/runtime": "^7.5.5",
+    "@babel/runtime": "7.7.6",
    "classnames": "^2.2.6",
    "lodash.isequal": "^4.5.0",
    "pdfjs-dist": "^2.2.228"
--- a/extensions/lesion-tracker/package.json
+++ b/extensions/lesion-tracker/package.json
@ -24,17 +24,16 @@
    "dev:lesion-tracker": "yarn run dev",
    "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"
  },
  "peerDependencies": {
    "@ohif/core": "^0.50.0",
    "prop-types": "^15.6.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0"
  },
  "dependencies": {
-    "@babel/runtime": "^7.5.5",
+    "@babel/runtime": "7.7.6",
    "classnames": "^2.2.6"
  }
 }
--- a/extensions/vtk/package.json
+++ b/extensions/vtk/package.json
@ -25,7 +25,6 @@
    "dev:dicom-vtk": "yarn run dev",
    "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"
  },
  "peerDependencies": {
@ -40,15 +39,18 @@
    "i18next": "^17.0.3",
    "i18next-browser-languagedetector": "^3.0.1",
    "prop-types": "^15.7.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
    "react-i18next": "^10.11.0",
    "react-redux": "^7.1.0",
    "react-resize-detector": "^4.2.0",
-    "redux": "^4.0.1"
+    "redux": "^4.0.1",
+    "shader-loader": "^1.3.1",
+    "worker-loader": "^2.0.0",
+    "wslink": "^0.1.8"
  },
  "dependencies": {
-    "@babel/runtime": "^7.5.5",
+    "@babel/runtime": "7.7.6",
    "lodash.throttle": "^4.1.1",
    "react-vtkjs-viewport": "^0.9.0"
  },
@ -61,6 +63,8 @@
    "gh-pages": "^2.0.1",
    "i18next": "^17.0.3",
    "i18next-browser-languagedetector": "^3.0.1",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
    "react-i18next": "^10.11.0",
    "react-redux": "^7.1.0",
    "redux": "^4.0.1"
--- a/jest.config.base.js
+++ b/jest.config.base.js
@ -1,39 +1,42 @@
-const path = require("path");
+// https://github.com/facebook/jest/issues/3613
+// Yarn Doctor: `npx @yarnpkg/doctor .` -->
+// '<rootDir>' warning:
+// Strings should avoid referencing the node_modules directory (prefer require.resolve)

 module.exports = {
  verbose: true,
-  roots: ["<rootDir>/src"],
+  roots: ['<rootDir>/src'],
  transform: {
-    "^.+\\.js$": "babel-jest"
+    '^.+\\.js$': 'babel-jest',
  },
-  testMatch: ["<rootDir>/src/**/*.test.js"],
-  testPathIgnorePatterns: ["<rootDir>/node_modules/"],
-  moduleFileExtensions: ["js", "jsx"],
+  testMatch: ['<rootDir>/src/**/*.test.js'],
+  testPathIgnorePatterns: ['<rootDir>/node_modules/'],
+  moduleFileExtensions: ['js', 'jsx'],
  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"
+    '\\.(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',
  },
  // Setup
  // setupFiles: ["jest-canvas-mock/lib/index.js"],
  // Coverage
  reporters: [
-    "default",
+    'default',
    // Docs: https://www.npmjs.com/package/jest-junit
    [
-      "jest-junit",
+      'jest-junit',
      {
-        addFileAttribute: true // CircleCI Only
-      }
-    ]
+        addFileAttribute: true, // CircleCI Only
+      },
+    ],
  ],
  collectCoverage: false,
  collectCoverageFrom: [
-    "<rootDir>/src/**/*.{js,jsx}",
+    '<rootDir>/src/**/*.{js,jsx}',
    // Not
-    "!<rootDir>/src/**/*.test.js",
-    "!**/node_modules/**",
-    "!**/__tests__/**",
-    "!<rootDir>/dist/**"
-  ]
+    '!<rootDir>/src/**/*.test.js',
+    '!**/node_modules/**',
+    '!**/__tests__/**',
+    '!<rootDir>/dist/**',
+  ],
 };
--- a/netlify.toml
+++ b/netlify.toml
@ -11,9 +11,10 @@
 # NODE_VERSION in root `.nvmrc` takes priority
 # YARN_FLAGS: https://www.netlify.com/docs/build-gotchas/#yarn
 [build.environment]
-  NODE_END = "production"
+  # If 'production', `yarn install` does not install devDependencies
+  NODE_ENV = "development"
  NODE_VERSION = "10.16.0"
-  YARN_VERSION = "1.17.3"
+  YARN_VERSION = "1.18.0" # 1.22.0
  RUBY_VERSION = "2.6.2"
  YARN_FLAGS = "--no-ignore-optional --pure-lockfile"

@ -27,7 +28,7 @@
 [context.deploy-preview]
  base = ""
  publish = ".netlify/www/"
-  command = "chmod +x .netlify/build-deploy-preview.sh && .netlify/build-deploy-preview.sh"
+  command = ".netlify/build-deploy-preview.sh"

 [[headers]]
  # Define which paths this specific [[headers]] block will cover.
--- a/package.json
+++ b/package.json
@ -1,10 +1,12 @@
 {
  "name": "root",
  "private": true,
-  "workspaces": [
-    "platform/*",
-    "extensions/*"
-  ],
+  "workspaces": {
+    "packages": [
+      "platform/*",
+      "extensions/*"
+    ]
+  },
  "engines": {
    "node": ">=10",
    "npm": ">=6",
@ -15,6 +17,7 @@
    "build": "lerna run build:viewer --stream",
    "build:lt": "lerna run build:viewer:lesion-tracker --stream",
    "build:ci": "lerna run build:viewer:ci --stream",
+    "build:ui:deploy-preview": "lerna run build:ui:deploy-preview --stream",
    "build:demo": "lerna run build:viewer:demo --stream",
    "build:package": "lerna run build:viewer:package --stream",
    "build:package-all": "lerna run build:package --parallel --stream",
@ -39,8 +42,15 @@
    "link-list": "npm ls --depth=0 --link=true"
  },
  "dependencies": {
-    "@babel/runtime": "^7.5.5",
-    "core-js": "^3.2.1"
+    "@babel/runtime": "7.7.6",
+    "core-js": "^3.2.1",
+    "cornerstone-core": "2.3.0",
+    "react": "16.11.0",
+    "react-dom": "16.11.0",
+    "shader-loader": "^1.3.1",
+    "webpack": "^4.35.2",
+    "worker-loader": "^2.0.0",
+    "wslink": "^0.1.8"
  },
  "devDependencies": {
    "@babel/core": "^7.5.0",
@ -52,7 +62,6 @@
    "@babel/plugin-transform-runtime": "^7.5.0",
    "@babel/preset-env": "^7.5.0",
    "@babel/preset-react": "^7.0.0",
-    "@percy/cypress": "^2.2.0",
    "babel-eslint": "9.x",
    "babel-loader": "^8.0.6",
    "babel-plugin-inline-react-svg": "1.1.0",
@ -61,7 +70,6 @@
    "copy-webpack-plugin": "^5.0.3",
    "cross-env": "^5.2.0",
    "css-loader": "^3.2.0",
-    "cypress-file-upload": "^3.5.3",
    "dotenv": "^8.1.0",
    "eslint": "5.16.0",
    "eslint-config-prettier": "^6.4.0",
@ -87,12 +95,9 @@
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.6.0",
    "prettier": "^1.18.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
    "react-hot-loader": "^4.12.11",
    "redux-testkit": "^1.0.6",
    "serve": "^11.1.0",
-    "shader-loader": "^1.3.1",
    "start-server-and-test": "^1.10.0",
    "style-loader": "^1.0.0",
    "stylelint": "^10.1.0",
@ -100,13 +105,11 @@
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "terser-webpack-plugin": "^2.1.0",
-    "webpack": "^4.35.2",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2",
    "webpack-hot-middleware": "^2.25.0",
    "webpack-merge": "^4.2.1",
-    "workbox-webpack-plugin": "^5.0.0-beta.1",
-    "worker-loader": "^2.0.0"
+    "workbox-webpack-plugin": "^5.0.0-beta.1"
  },
  "husky": {
    "hooks": {
@ -120,6 +123,6 @@
    ]
  },
  "resolutions": {
-    "**/@babel/runtime": "7.5.5"
+    "**/@babel/runtime": "7.7.6"
  }
 }
--- a/platform/core/package.json
+++ b/platform/core/package.json
@ -25,19 +25,24 @@
    "dev:core": "yarn run dev",
    "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",
    "test:unit": "jest --watchAll",
    "test:unit:ci": "jest --ci --runInBand --collectCoverage"
  },
  "peerDependencies": {
+<<<<<<< HEAD
    "cornerstone-core": "^2.2.8",
    "cornerstone-tools": "4.15.1",
    "cornerstone-wado-image-loader": "^3.1.0",
+=======
+    "cornerstone-core": "^2.3.0",
+    "cornerstone-tools": "^4.12.0",
+    "cornerstone-wado-image-loader": "^3.0.0",
+>>>>>>> 4a8675655... feat: nuke UI project; start new with updated tooling BREAKING_CHANGE (#1468)
    "dicom-parser": "^1.8.3"
  },
  "dependencies": {
-    "@babel/runtime": "^7.5.5",
+    "@babel/runtime": "7.7.6",
    "ajv": "^6.10.0",
    "dcmjs": "^0.12.2",
    "dicomweb-client": "^0.6.0",
--- a/platform/i18n/package.json
+++ b/platform/i18n/package.json
@ -24,7 +24,6 @@
    "dev:i18n": "yarn run dev",
    "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
    "build:package": "yarn run build",
-    "prepublishOnly": "yarn run build",
    "pullTranslations": "./pullTranslations.sh",
    "test:unit": "echo 'platform/i18n: missing unit tests'",
    "test:unit:ci": "echo 'platform/i18n: missing unit tests'"
@ -32,12 +31,12 @@
  "peerDependencies": {
    "i18next": "^17.0.3",
    "i18next-browser-languagedetector": "^3.0.1",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
    "react-i18next": "^10.11.0"
  },
  "dependencies": {
-    "@babel/runtime": "^7.5.5",
+    "@babel/runtime": "7.7.6",
    "classnames": "^2.2.6",
    "i18next-locize-backend": "^2.0.0",
    "locize-editor": "^2.0.0",
@ -45,9 +44,11 @@
    "rollup-plugin-json": "^4.0.0"
  },
  "devDependencies": {
-    "i18next": "^15.1.3",
+    "i18next": "^17.0.3",
    "i18next-browser-languagedetector": "^3.0.1",
    "locize-cli": "^4.8.0",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
    "react-i18next": "^10.11.0"
  }
 }
--- a/platform/ui/.gitignore
+++ b/platform/ui/.gitignore
@ -1,2 +1,2 @@
 .docz
-node_modules
+node_modules
--- a/platform/ui/README.md
+++ b/platform/ui/README.md
@ -1,3 +1,4 @@
+<<<<<<< HEAD
 # Basic Docz example

 ## Using `create-docz-app`
@ -38,4 +39,25 @@ yarn build # npm run build

 ```sh
 yarn serve # npm run serve
-```
+```
+=======
+# @ohif/ui
+
+React component library powered by `docz`
+
+## Commands
+
+```sh
+# Install
+yarn # npm i
+
+# Develop
+yarn dev # npm run dev
+
+# Build
+yarn build # npm run build
+
+# Serve (the "build" output)
+yarn serve # npm run serve
+```
+>>>>>>> 4a8675655... feat: nuke UI project; start new with updated tooling BREAKING_CHANGE (#1468)
--- a/platform/ui/gatsby-node.js
+++ b/platform/ui/gatsby-node.js
@ -0,0 +1,20 @@
+const path = require('path');
+
+exports.onCreateWebpackConfig = args => {
+  args.actions.setWebpackConfig({
+    resolve: {
+      // Note the '..' in the path because docz gatsby project lives in the '.docz' directory
+      modules: [
+        // monorepo root
+        path.resolve(__dirname, '../../../node_modules'),
+        // platform/ui
+        path.resolve(__dirname, '../node_modules'),
+        // .docz
+        'node_modules',
+      ],
+      // resolve: {
+      //   symlinks: true,
+      // },
+    },
+  });
+};
--- a/platform/ui/src/components/Button/Button.jsx
+++ b/platform/ui/src/components/Button/Button.jsx
@ -1,23 +1,19 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';

-const baseClasses =
-  'text-center items-center outline-none transition duration-300 ease-in-out font-bold focus:outline-none';
-
 const defaults = {
-  color: 'default',
-  disabled: false,
-  fullWidth: false,
-  rounded: 'medium',
-  size: 'medium',
-  type: 'button',
  variant: 'contained',
+  color: 'default',
+  size: 'medium',
+  radius: 'medium',
+  disabled: false,
+  type: 'button',
 };

-const roundedClasses = {
+const radiusClasses = {
  none: '',
-  small: 'rounded',
+  small: 'rounded-sm',
  medium: 'rounded-md',
  large: 'rounded-lg',
  full: 'rounded-full',
@ -30,46 +26,26 @@ const disabledClasses = {

 const variantClasses = {
  text: {
-    default:
-      'text-primary-light hover:bg-primary-light hover:text-white active:opacity-80 focus:bg-primary-light focus:text-white',
-    primary:
-      'text-primary-main hover:bg-primary-main hover:text-white active:opacity-80 focus:bg-primary-main focus:text-white',
-    secondary:
-      'text-darkBlue-100 hover:bg-darkBlue-100 hover:text-white active:opacity-80 focus:bg-darkBlue-100 focus:text-white',
-    white:
-      'text-white hover:bg-white hover:text-black active:opacity-80 focus:bg-white focus:text-black',
+    default: 'hover:bg-gray-200 text-black',
+    primary: 'hover:bg-blue-100 text-blue-900',
+    secondary: 'hover:bg-blue-100 text-blue-300',
  },
  outlined: {
-    default:
-      'border bg-trasparent border-primary-light text-primary-light hover:opacity-80 active:opacity-100 focus:opacity-80',
-    primary:
-      'border bg-transparent border-primary-main text-primary-main hover:opacity-80 active:opacity-100 focus:opacity-80',
-    secondary:
-      'border bg-transparent border-darkBlue-100 text-darkBlue-100 hover:opacity-80 active:opacity-100 focus:opacity-80',
-    white:
-      'border bg-transparent border-white text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
+    default: 'border border-black text-black hover:bg-gray-200',
+    primary: 'border border-blue-900 text-blue-900 hover:bg-blue-100',
+    secondary: 'border border-blue-300 text-blue-300 hover:bg-blue-100',
  },
  contained: {
-    default:
-      'bg-primary-light text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
-    primary:
-      'bg-primary-main text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
-    secondary:
-      'bg-darkBlue-100 text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
-    white:
-      'bg-white text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
+    default: 'bg-black hover:bg-gray-800 text-white',
+    primary: 'bg-blue-900 hover:bg-blue-800 text-white',
+    secondary: 'bg-blue-300 hover:bg-blue-500 text-black',
  },
 };

 const sizeClasses = {
-  small: 'py-1 px-3 text-base',
-  medium: 'py-1 px-4 text-lg',
-  large: 'py-1 px-6 text-xl',
-};
-
-const fullWidthClasses = {
-  true: 'flex w-full',
-  false: 'inline-flex',
+  small: 'py-1 px-2 text-sm',
+  medium: 'py-2 px-4 text-base',
+  large: 'py-3 px-6 text-lg',
 };

 const Button = ({
@ -77,52 +53,33 @@ const Button = ({
  variant = defaults.variant,
  color = defaults.color,
  size = defaults.size,
-  rounded = defaults.rounded,
+  radius = defaults.radius,
  disabled = defaults.disabled,
  type = defaults.type,
-  fullWidth = defaults.fullWidth,
  startIcon: startIconProp,
  endIcon: endIconProp,
  className,
  ...rest
 }) => {
+  const baseClasses =
+    'inline-flex items-center outline-none transition duration-300 ease-in-out font-bold focus:outline-none';
+
  const startIcon = startIconProp && (
-    <div className="mr-2">
-      {React.cloneElement(startIconProp, {
-        className: classnames('w-4 h-4 fill-current'),
-      })}
-    </div>
+    <div className="mr-2">{startIconProp}</div>
  );

-  const endIcon = endIconProp && (
-    <div className="ml-2">
-      {React.cloneElement(endIconProp, {
-        className: classnames('w-4 h-4 fill-current'),
-      })}
-    </div>
-  );
-  const buttonElement = useRef(null);
-
-  const handleOnClick = e => {
-    buttonElement.current.blur();
-    if (rest.onClick) {
-      rest.onClick(e);
-    }
-  };
+  const endIcon = endIconProp && <div className="ml-2">{endIconProp}</div>;

  return (
    <button
      className={classnames(
        baseClasses,
        variantClasses[variant][color],
-        roundedClasses[rounded],
+        radiusClasses[radius],
        sizeClasses[size],
-        fullWidthClasses[fullWidth],
        disabledClasses[disabled],
        className
      )}
-      ref={buttonElement}
-      onClick={handleOnClick}
      type={type}
      {...rest}
    >
@ -136,10 +93,9 @@ const Button = ({
 Button.propTypes = {
  children: PropTypes.node,
  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  rounded: PropTypes.oneOf(['none', 'small', 'medium', 'large', 'full']),
+  radius: PropTypes.oneOf(['none', 'small', 'medium', 'large', 'full']),
  variant: PropTypes.oneOf(['text', 'outlined', 'contained']),
-  color: PropTypes.oneOf(['default', 'primary', 'secondary', 'white']),
-  fullWidth: PropTypes.bool,
+  color: PropTypes.oneOf(['default', 'primary', 'secondary']),
  disabled: PropTypes.bool,
  type: PropTypes.string,
  startIcon: PropTypes.node,
--- a/platform/ui/src/components/Button/Button.mdx
+++ b/platform/ui/src/components/Button/Button.mdx
@ -6,7 +6,6 @@ route: components/button

 import { Playground, Props } from 'docz';
 import Button from './';
-import IconButton from '../IconButton';

 # Button

@ -16,25 +15,6 @@ Buttons are used to execute actions when users interacts with them.

 <Props of={Button} />

-## Outlined Buttons
-
-<Playground>
-  <>
-    <Button variant="outlined" className="m-1">
-      Default
-    </Button>
-    <Button variant="outlined" color="primary" className="m-1">
-      Primary
-    </Button>
-    <Button variant="outlined" color="secondary" className="m-1">
-      Secondary
-    </Button>
-    <Button variant="outlined" color="white" className="m-1">
-      White
-    </Button>
-  </>
-</Playground>
-
 ## Contained Buttons

 <Playground>
@ -48,13 +28,24 @@ Buttons are used to execute actions when users interacts with them.
    <Button variant="contained" color="secondary" className="m-1">
      Secondary
    </Button>
-    <Button variant="contained" color="white" className="m-1">
-      White
-    </Button>
  </>
 </Playground>

+## Outlined Buttons

+<Playground>
+  <>
+    <Button variant="outlined" className="m-1">
+      Default
+    </Button>
+    <Button variant="outlined" color="primary" className="m-1">
+      Primary
+    </Button>
+    <Button variant="outlined" color="secondary" className="m-1">
+      Secondary
+    </Button>
+  </>
+</Playground>

 ## Text Buttons

@ -69,159 +60,6 @@ Buttons are used to execute actions when users interacts with them.
    <Button variant="text" color="secondary" className="m-1">
      Secondary
    </Button>
-    <Button variant="text" color="white" className="m-1">
-      White
-    </Button>
-  </>
-</Playground>
-
-## Rounded Buttons
-
-<Playground>
-  <>
-    <div className="mb-2">
-      <Button variant="contained" rounded="none" className="m-1">
-        Non Rounded
-      </Button>
-      <Button variant="contained" rounded="small" className="m-1">
-        Small Rounded
-      </Button>
-      <Button variant="contained" rounded="medium" className="m-1">
-        Medium Rounded
-      </Button>
-      <Button variant="contained" rounded="large" className="m-1">
-        Large Rounded
-      </Button>
-      <Button variant="contained" rounded="full" className="m-1">
-        Full Rounded
-      </Button>
-    </div>
-    <div className="mb-2">
-      <Button
-        variant="contained"
-        rounded="none"
-        color="primary"
-        className="m-1"
-      >
-        Non Rounded
-      </Button>
-      <Button
-        variant="contained"
-        rounded="small"
-        color="primary"
-        className="m-1"
-      >
-        Small Rounded
-      </Button>
-      <Button
-        variant="contained"
-        rounded="medium"
-        color="primary"
-        className="m-1"
-      >
-        Medium Rounded
-      </Button>
-      <Button
-        variant="contained"
-        rounded="large"
-        color="primary"
-        className="m-1"
-      >
-        Large Rounded
-      </Button>
-      <Button
-        variant="contained"
-        rounded="full"
-        color="primary"
-        className="m-1"
-      >
-        Full Rounded
-      </Button>
-    </div>
-    <div className="mb-2">
-      <Button
-        variant="contained"
-        rounded="none"
-        color="secondary"
-        className="m-1"
-      >
-        Non Rounded
-      </Button>
-      <Button
-        variant="contained"
-        rounded="small"
-        color="secondary"
-        className="m-1"
-      >
-        Small Rounded
-      </Button>
-      <Button
-        variant="contained"
-        rounded="medium"
-        color="secondary"
-        className="m-1"
-      >
-        Medium Rounded
-      </Button>
-      <Button
-        variant="contained"
-        rounded="large"
-        color="secondary"
-        className="m-1"
-      >
-        Large Rounded
-      </Button>
-      <Button
-        variant="contained"
-        rounded="full"
-        color="secondary"
-        className="m-1"
-      >
-        Full Rounded
-      </Button>
-    </div>
-    <div className="mb-2">
-      <Button
-        variant="contained"
-        rounded="none"
-        color="white"
-        className="m-1"
-      >
-        Non Rounded
-      </Button>
-      <Button
-        variant="contained"
-        rounded="small"
-        color="white"
-        className="m-1"
-      >
-        Small Rounded
-      </Button>
-      <Button
-        variant="contained"
-        rounded="medium"
-        color="white"
-        className="m-1"
-      >
-        Medium Rounded
-      </Button>
-      <Button
-        variant="contained"
-        rounded="large"
-        color="white"
-        className="m-1"
-      >
-        Large Rounded
-      </Button>
-      <Button
-        variant="contained"
-        rounded="full"
-        color="white"
-        className="m-1"
-      >
-        Full Rounded
-      </Button>
-    </div>
  </>
 </Playground>

@ -230,19 +68,19 @@ Buttons are used to execute actions when users interacts with them.
 <Playground>
  <>
    <div>
-      <Button variant="contained" size="small" className="m-1">
+      <Button variant="text" size="small" className="m-1">
        Small
      </Button>
      <Button variant="contained" size="medium" className="m-1">
        Medium
      </Button>
-      <Button variant="contained" size="large" className="m-1">
+      <Button variant="outlined" size="large" className="m-1">
        Large
      </Button>
    </div>
    <div>
      <Button
-        variant="contained"
+        variant="text"
        size="small"
        color="primary"
        className="m-1"
@ -258,65 +96,39 @@ Buttons are used to execute actions when users interacts with them.
        Medium
      </Button>
      <Button
-        variant="contained"
+        variant="outlined"
        size="large"
        color="primary"
        className="m-1"
      >
-        Large
+        large
      </Button>
    </div>
    <div>
-      <Button
-        variant="contained"
-        size="small"
-        color="secondary"
-        className="m-1"
-      >
-        Small
-      </Button>
-      <Button
-        variant="contained"
-        size="medium"
-        color="secondary"
-        className="m-1"
-      >
-        Medium
-      </Button>
-      <Button
-        variant="contained"
-        size="large"
-        color="secondary"
-        className="m-1"
-      >
-        Large
-      </Button>
-    </div>
-    <div>
-      <Button
-        variant="contained"
-        size="small"
-        color="white"
-        className="m-1"
-      >
-        Small
-      </Button>
-      <Button
-        variant="contained"
-        size="medium"
-        color="white"
-        className="m-1"
-      >
-        Medium
-      </Button>
-      <Button
-        variant="contained"
-        size="large"
-        color="white"
-        className="m-1"
-      >
-        Large
-      </Button>
+    <Button
+      variant="text"
+      size="small"
+      color="secondary"
+      className="m-1"
+    >
+      Small
+    </Button>
+    <Button
+      variant="contained"
+      size="medium"
+      color="secondary"
+      className="m-1"
+    >
+      Medium
+    </Button>
+    <Button
+      variant="outlined"
+      size="large"
+      color="secondary"
+      className="m-1"
+    >
+      Large
+    </Button>
    </div>

 </>
@ -335,6 +147,7 @@ Buttons are used to execute actions when users interacts with them.
      className="m-1"
      startIcon={
    <svg
+      class="fill-current w-4 h-4"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
    >
@ -350,22 +163,12 @@ Buttons are used to execute actions when users interacts with them.
      className="m-1"
      endIcon={
    <svg
+      class="fill-current w-4 h-4"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
    >
      <path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
    </svg>
-  }
-    >
-      Download
-    </Button>
-    <Button
-      variant="outlined"
-      rounded="full"
-      color="default"
-      className="m-1"
-      endIcon={
-    <svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m277.332031 128c0 11.78125-9.550781 21.332031-21.332031 21.332031s-21.332031-9.550781-21.332031-21.332031 9.550781-21.332031 21.332031-21.332031 21.332031 9.550781 21.332031 21.332031zm0 0"/><path d="m256 405.332031c-8.832031 0-16-7.167969-16-16v-165.332031h-21.332031c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h37.332031c8.832031 0 16 7.167969 16 16v181.332031c0 8.832031-7.167969 16-16 16zm0 0"/><path d="m256 512c-141.164062 0-256-114.835938-256-256s114.835938-256 256-256 256 114.835938 256 256-114.835938 256-256 256zm0-480c-123.519531 0-224 100.480469-224 224s100.480469 224 224 224 224-100.480469 224-224-100.480469-224-224-224zm0 0"/><path d="m304 405.332031h-96c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h96c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/></svg>
  }
    >
      Download
@ -375,44 +178,3 @@ Buttons are used to execute actions when users interacts with them.
  }}

 </Playground>
-
-## Icon Buttons
-
-<Playground>
-  <IconButton className="mr-2">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.822 20.88l-6.353-6.354c.93-1.465 1.467-3.2 1.467-5.059.001-5.219-4.247-9.467-9.468-9.467s-9.468 4.248-9.468 9.468c0 5.221 4.247 9.469 9.468 9.469 1.768 0 3.421-.487 4.839-1.333l6.396 6.396 3.119-3.12zm-20.294-11.412c0-3.273 2.665-5.938 5.939-5.938 3.275 0 5.94 2.664 5.94 5.938 0 3.275-2.665 5.939-5.94 5.939-3.274 0-5.939-2.664-5.939-5.939z"/></svg>
-  </IconButton>
-  <IconButton className="mr-2" variant="text">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 12l-6-5v4h-5v-5h4l-5-6-5 6h4v5h-5v-4l-6 5 6 5v-4h5v5h-4l5 6 5-6h-4v-5h5v4z"/></svg>
-  </IconButton>
-  <IconButton className="mr-2" variant="outlined" >
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.026 14.116c-3.475 1.673-7.504 3.619-8.484 4.09-1.848.889-3.542-1.445-3.542-1.445l8.761-4.226 3.265 1.581zm7.93 6.884c-.686 0-1.393-.154-2.064-.479-1.943-.941-2.953-3.001-2.498-4.854.26-1.057-.296-1.201-1.145-1.612l-14.189-6.866s1.7-2.329 3.546-1.436c1.134.549 5.689 2.747 9.614 4.651l.985-.474c.85-.409 1.406-.552 1.149-1.609-.451-1.855.564-3.913 2.51-4.848.669-.321 1.373-.473 2.054-.473 2.311 0 4.045 1.696 4.045 3.801 0 1.582-.986 3.156-2.613 3.973-1.625.816-2.765.18-4.38.965l-.504.245.552.27c1.613.789 2.754.156 4.377.976 1.624.819 2.605 2.392 2.605 3.97 0 2.108-1.739 3.8-4.044 3.8zm-2.555-12.815c.489 1.022 1.876 1.378 3.092.793 1.217-.584 1.809-1.893 1.321-2.916-.489-1.022-1.876-1.379-3.093-.794s-1.808 1.894-1.32 2.917zm-3.643 3.625c0-.414-.335-.75-.75-.75-.414 0-.75.336-.75.75s.336.75.75.75.75-.336.75-.75zm6.777 3.213c-1.215-.588-2.604-.236-3.095.786-.491 1.022.098 2.332 1.313 2.919 1.215.588 2.603.235 3.094-.787.492-1.021-.097-2.33-1.312-2.918z"/></svg>
-  </IconButton>
-  <IconButton className="mr-2" color="primary">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.822 20.88l-6.353-6.354c.93-1.465 1.467-3.2 1.467-5.059.001-5.219-4.247-9.467-9.468-9.467s-9.468 4.248-9.468 9.468c0 5.221 4.247 9.469 9.468 9.469 1.768 0 3.421-.487 4.839-1.333l6.396 6.396 3.119-3.12zm-20.294-11.412c0-3.273 2.665-5.938 5.939-5.938 3.275 0 5.94 2.664 5.94 5.938 0 3.275-2.665 5.939-5.94 5.939-3.274 0-5.939-2.664-5.939-5.939z"/></svg>
-  </IconButton>
-  <IconButton className="mr-2" variant="text" color="primary">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 12l-6-5v4h-5v-5h4l-5-6-5 6h4v5h-5v-4l-6 5 6 5v-4h5v5h-4l5 6 5-6h-4v-5h5v4z"/></svg>
-  </IconButton>
-  <IconButton className="mr-2" variant="outlined" color="primary">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.026 14.116c-3.475 1.673-7.504 3.619-8.484 4.09-1.848.889-3.542-1.445-3.542-1.445l8.761-4.226 3.265 1.581zm7.93 6.884c-.686 0-1.393-.154-2.064-.479-1.943-.941-2.953-3.001-2.498-4.854.26-1.057-.296-1.201-1.145-1.612l-14.189-6.866s1.7-2.329 3.546-1.436c1.134.549 5.689 2.747 9.614 4.651l.985-.474c.85-.409 1.406-.552 1.149-1.609-.451-1.855.564-3.913 2.51-4.848.669-.321 1.373-.473 2.054-.473 2.311 0 4.045 1.696 4.045 3.801 0 1.582-.986 3.156-2.613 3.973-1.625.816-2.765.18-4.38.965l-.504.245.552.27c1.613.789 2.754.156 4.377.976 1.624.819 2.605 2.392 2.605 3.97 0 2.108-1.739 3.8-4.044 3.8zm-2.555-12.815c.489 1.022 1.876 1.378 3.092.793 1.217-.584 1.809-1.893 1.321-2.916-.489-1.022-1.876-1.379-3.093-.794s-1.808 1.894-1.32 2.917zm-3.643 3.625c0-.414-.335-.75-.75-.75-.414 0-.75.336-.75.75s.336.75.75.75.75-.336.75-.75zm6.777 3.213c-1.215-.588-2.604-.236-3.095.786-.491 1.022.098 2.332 1.313 2.919 1.215.588 2.603.235 3.094-.787.492-1.021-.097-2.33-1.312-2.918z"/></svg>
-  </IconButton>
-  <IconButton className="mr-2" color="secondary">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.822 20.88l-6.353-6.354c.93-1.465 1.467-3.2 1.467-5.059.001-5.219-4.247-9.467-9.468-9.467s-9.468 4.248-9.468 9.468c0 5.221 4.247 9.469 9.468 9.469 1.768 0 3.421-.487 4.839-1.333l6.396 6.396 3.119-3.12zm-20.294-11.412c0-3.273 2.665-5.938 5.939-5.938 3.275 0 5.94 2.664 5.94 5.938 0 3.275-2.665 5.939-5.94 5.939-3.274 0-5.939-2.664-5.939-5.939z"/></svg>
-  </IconButton>
-  <IconButton className="mr-2" variant="text" color="secondary">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 12l-6-5v4h-5v-5h4l-5-6-5 6h4v5h-5v-4l-6 5 6 5v-4h5v5h-4l5 6 5-6h-4v-5h5v4z"/></svg>
-  </IconButton>
-  <IconButton className="mr-2" variant="outlined" color="secondary">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.026 14.116c-3.475 1.673-7.504 3.619-8.484 4.09-1.848.889-3.542-1.445-3.542-1.445l8.761-4.226 3.265 1.581zm7.93 6.884c-.686 0-1.393-.154-2.064-.479-1.943-.941-2.953-3.001-2.498-4.854.26-1.057-.296-1.201-1.145-1.612l-14.189-6.866s1.7-2.329 3.546-1.436c1.134.549 5.689 2.747 9.614 4.651l.985-.474c.85-.409 1.406-.552 1.149-1.609-.451-1.855.564-3.913 2.51-4.848.669-.321 1.373-.473 2.054-.473 2.311 0 4.045 1.696 4.045 3.801 0 1.582-.986 3.156-2.613 3.973-1.625.816-2.765.18-4.38.965l-.504.245.552.27c1.613.789 2.754.156 4.377.976 1.624.819 2.605 2.392 2.605 3.97 0 2.108-1.739 3.8-4.044 3.8zm-2.555-12.815c.489 1.022 1.876 1.378 3.092.793 1.217-.584 1.809-1.893 1.321-2.916-.489-1.022-1.876-1.379-3.093-.794s-1.808 1.894-1.32 2.917zm-3.643 3.625c0-.414-.335-.75-.75-.75-.414 0-.75.336-.75.75s.336.75.75.75.75-.336.75-.75zm6.777 3.213c-1.215-.588-2.604-.236-3.095.786-.491 1.022.098 2.332 1.313 2.919 1.215.588 2.603.235 3.094-.787.492-1.021-.097-2.33-1.312-2.918z"/></svg>
-  </IconButton>
-  <IconButton className="mr-2" color="white">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.822 20.88l-6.353-6.354c.93-1.465 1.467-3.2 1.467-5.059.001-5.219-4.247-9.467-9.468-9.467s-9.468 4.248-9.468 9.468c0 5.221 4.247 9.469 9.468 9.469 1.768 0 3.421-.487 4.839-1.333l6.396 6.396 3.119-3.12zm-20.294-11.412c0-3.273 2.665-5.938 5.939-5.938 3.275 0 5.94 2.664 5.94 5.938 0 3.275-2.665 5.939-5.94 5.939-3.274 0-5.939-2.664-5.939-5.939z"/></svg>
-  </IconButton>
-  <IconButton className="mr-2" variant="text" color="white">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 12l-6-5v4h-5v-5h4l-5-6-5 6h4v5h-5v-4l-6 5 6 5v-4h5v5h-4l5 6 5-6h-4v-5h5v4z"/></svg>
-  </IconButton>
-  <IconButton className="mr-2" variant="outlined" color="white">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.026 14.116c-3.475 1.673-7.504 3.619-8.484 4.09-1.848.889-3.542-1.445-3.542-1.445l8.761-4.226 3.265 1.581zm7.93 6.884c-.686 0-1.393-.154-2.064-.479-1.943-.941-2.953-3.001-2.498-4.854.26-1.057-.296-1.201-1.145-1.612l-14.189-6.866s1.7-2.329 3.546-1.436c1.134.549 5.689 2.747 9.614 4.651l.985-.474c.85-.409 1.406-.552 1.149-1.609-.451-1.855.564-3.913 2.51-4.848.669-.321 1.373-.473 2.054-.473 2.311 0 4.045 1.696 4.045 3.801 0 1.582-.986 3.156-2.613 3.973-1.625.816-2.765.18-4.38.965l-.504.245.552.27c1.613.789 2.754.156 4.377.976 1.624.819 2.605 2.392 2.605 3.97 0 2.108-1.739 3.8-4.044 3.8zm-2.555-12.815c.489 1.022 1.876 1.378 3.092.793 1.217-.584 1.809-1.893 1.321-2.916-.489-1.022-1.876-1.379-3.093-.794s-1.808 1.894-1.32 2.917zm-3.643 3.625c0-.414-.335-.75-.75-.75-.414 0-.75.336-.75.75s.336.75.75.75.75-.336.75-.75zm6.777 3.213c-1.215-.588-2.604-.236-3.095.786-.491 1.022.098 2.332 1.313 2.919 1.215.588 2.603.235 3.094-.787.492-1.021-.097-2.33-1.312-2.918z"/></svg>
-  </IconButton>
-</Playground>
--- a/platform/ui/src/gatsby-theme-docz/theme.css
+++ b/platform/ui/src/gatsby-theme-docz/theme.css
@ -4,10 +4,4 @@

 [data-testid='live-preview'] {
  padding: 10px;
-  background: #000;
-}
-
-[data-testid='main-container'] h2 {
-  margin: 20px 0;
-  font-weight: bold;
 }
--- a/platform/ui/tailwind.config.js
+++ b/platform/ui/tailwind.config.js
@ -0,0 +1,731 @@
+module.exports = {
+  prefix: '',
+  important: false,
+  separator: ':',
+  theme: {
+    screens: {
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+    },
+    colors: {
+      transparent: 'transparent',
+      black: '#000',
+      white: '#fff',
+
+      primary: {
+        light: '#5acde7',
+        main: '#0142b4',
+        dark: '#03123f',
+        contrastText: '#fff',
+      },
+
+      secondary: {
+        light: '#a2a0af',
+        main: '#333',
+        dark: '#000',
+        // Previously '' (empty string)
+        contrastText: '#fff',
+      },
+
+      darkBlue: {
+        100: '#260d6b',
+        200: '#0c3ebf',
+        300: '#07287f',
+        400: '#011c63',
+        500: '#001449',
+        600: '#03123f',
+        700: '#0c0629',
+        800: '#020424',
+        900: '#010216',
+      },
+      gray: {
+        100: '#f7fafc',
+        200: '#edf2f7',
+        300: '#e2e8f0',
+        400: '#cbd5e0',
+        500: '#a0aec0',
+        600: '#718096',
+        700: '#4a5568',
+        800: '#2d3748',
+        900: '#1a202c',
+      },
+      red: {
+        100: '#fff5f5',
+        200: '#fed7d7',
+        300: '#feb2b2',
+        400: '#fc8181',
+        500: '#f56565',
+        600: '#e53e3e',
+        700: '#c53030',
+        800: '#9b2c2c',
+        900: '#742a2a',
+      },
+      orange: {
+        100: '#fffaf0',
+        200: '#feebc8',
+        300: '#fbd38d',
+        400: '#f6ad55',
+        500: '#ed8936',
+        600: '#dd6b20',
+        700: '#c05621',
+        800: '#9c4221',
+        900: '#7b341e',
+      },
+      yellow: {
+        100: '#fffff0',
+        200: '#fefcbf',
+        300: '#faf089',
+        400: '#f6e05e',
+        500: '#ecc94b',
+        600: '#d69e2e',
+        700: '#b7791f',
+        800: '#975a16',
+        900: '#744210',
+      },
+      green: {
+        100: '#f0fff4',
+        200: '#c6f6d5',
+        300: '#9ae6b4',
+        400: '#68d391',
+        500: '#48bb78',
+        600: '#38a169',
+        700: '#2f855a',
+        800: '#276749',
+        900: '#22543d',
+      },
+      teal: {
+        100: '#e6fffa',
+        200: '#b2f5ea',
+        300: '#81e6d9',
+        400: '#4fd1c5',
+        500: '#38b2ac',
+        600: '#319795',
+        700: '#2c7a7b',
+        800: '#285e61',
+        900: '#234e52',
+      },
+      blue: {
+        100: '#ebf8ff',
+        200: '#bee3f8',
+        300: '#90cdf4',
+        400: '#63b3ed',
+        500: '#4299e1',
+        600: '#3182ce',
+        700: '#2b6cb0',
+        800: '#2c5282',
+        900: '#2a4365',
+      },
+      indigo: {
+        100: '#ebf4ff',
+        200: '#c3dafe',
+        300: '#a3bffa',
+        400: '#7f9cf5',
+        500: '#667eea',
+        600: '#5a67d8',
+        700: '#4c51bf',
+        800: '#434190',
+        900: '#3c366b',
+      },
+      purple: {
+        100: '#faf5ff',
+        200: '#e9d8fd',
+        300: '#d6bcfa',
+        400: '#b794f4',
+        500: '#9f7aea',
+        600: '#805ad5',
+        700: '#6b46c1',
+        800: '#553c9a',
+        900: '#44337a',
+      },
+      pink: {
+        100: '#fff5f7',
+        200: '#fed7e2',
+        300: '#fbb6ce',
+        400: '#f687b3',
+        500: '#ed64a6',
+        600: '#d53f8c',
+        700: '#b83280',
+        800: '#97266d',
+        900: '#702459',
+      },
+    },
+    spacing: {
+      px: '1px',
+      '0': '0',
+      '1': '0.25rem',
+      '2': '0.5rem',
+      '3': '0.75rem',
+      '4': '1rem',
+      '5': '1.25rem',
+      '6': '1.5rem',
+      '8': '2rem',
+      '10': '2.5rem',
+      '12': '3rem',
+      '16': '4rem',
+      '20': '5rem',
+      '24': '6rem',
+      '32': '8rem',
+      '40': '10rem',
+      '48': '12rem',
+      '56': '14rem',
+      '64': '16rem',
+    },
+    backgroundColor: theme => theme('colors'),
+    backgroundPosition: {
+      bottom: 'bottom',
+      center: 'center',
+      left: 'left',
+      'left-bottom': 'left bottom',
+      'left-top': 'left top',
+      right: 'right',
+      'right-bottom': 'right bottom',
+      'right-top': 'right top',
+      top: 'top',
+    },
+    backgroundSize: {
+      auto: 'auto',
+      cover: 'cover',
+      contain: 'contain',
+    },
+    borderColor: theme => ({
+      ...theme('colors'),
+      default: theme('colors.gray.300', 'currentColor'),
+    }),
+    borderRadius: {
+      none: '0',
+      sm: '0.125rem',
+      default: '0.25rem',
+      md: '0.375rem',
+      lg: '0.5rem',
+      full: '9999px',
+    },
+    borderWidth: {
+      default: '1px',
+      '0': '0',
+      '2': '2px',
+      '4': '4px',
+      '8': '8px',
+    },
+    boxShadow: {
+      xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
+      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+      default:
+        '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+      md:
+        '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+      lg:
+        '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+      xl:
+        '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+      inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+      outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
+      none: 'none',
+    },
+    container: {},
+    cursor: {
+      auto: 'auto',
+      default: 'default',
+      pointer: 'pointer',
+      wait: 'wait',
+      text: 'text',
+      move: 'move',
+      'not-allowed': 'not-allowed',
+    },
+    fill: {
+      current: 'currentColor',
+    },
+    flex: {
+      '1': '1 1 0%',
+      auto: '1 1 auto',
+      initial: '0 1 auto',
+      none: 'none',
+    },
+    flexGrow: {
+      '0': '0',
+      default: '1',
+    },
+    flexShrink: {
+      '0': '0',
+      default: '1',
+    },
+    fontFamily: {
+      sans: [
+        'system-ui',
+        '-apple-system',
+        'BlinkMacSystemFont',
+        '"Segoe UI"',
+        'Roboto',
+        '"Helvetica Neue"',
+        'Arial',
+        '"Noto Sans"',
+        'sans-serif',
+        '"Apple Color Emoji"',
+        '"Segoe UI Emoji"',
+        '"Segoe UI Symbol"',
+        '"Noto Color Emoji"',
+      ],
+      serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
+      mono: [
+        'Menlo',
+        'Monaco',
+        'Consolas',
+        '"Liberation Mono"',
+        '"Courier New"',
+        'monospace',
+      ],
+    },
+    fontSize: {
+      xs: '0.75rem',
+      sm: '0.875rem',
+      base: '1rem',
+      lg: '1.125rem',
+      xl: '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+      '4xl': '2.25rem',
+      '5xl': '3rem',
+      '6xl': '4rem',
+    },
+    fontWeight: {
+      hairline: '100',
+      thin: '200',
+      light: '300',
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+      extrabold: '800',
+      black: '900',
+    },
+    height: theme => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      full: '100%',
+      screen: '100vh',
+    }),
+    inset: {
+      '0': '0',
+      auto: 'auto',
+    },
+    letterSpacing: {
+      tighter: '-0.05em',
+      tight: '-0.025em',
+      normal: '0',
+      wide: '0.025em',
+      wider: '0.05em',
+      widest: '0.1em',
+    },
+    lineHeight: {
+      none: '1',
+      tight: '1.25',
+      snug: '1.375',
+      normal: '1.5',
+      relaxed: '1.625',
+      loose: '2',
+      '3': '.75rem',
+      '4': '1rem',
+      '5': '1.25rem',
+      '6': '1.5rem',
+      '7': '1.75rem',
+      '8': '2rem',
+      '9': '2.25rem',
+      '10': '2.5rem',
+    },
+    listStyleType: {
+      none: 'none',
+      disc: 'disc',
+      decimal: 'decimal',
+    },
+    margin: (theme, { negative }) => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      ...negative(theme('spacing')),
+    }),
+    maxHeight: {
+      full: '100%',
+      screen: '100vh',
+    },
+    maxWidth: (theme, { breakpoints }) => ({
+      none: 'none',
+      xs: '20rem',
+      sm: '24rem',
+      md: '28rem',
+      lg: '32rem',
+      xl: '36rem',
+      '2xl': '42rem',
+      '3xl': '48rem',
+      '4xl': '56rem',
+      '5xl': '64rem',
+      '6xl': '72rem',
+      full: '100%',
+      ...breakpoints(theme('screens')),
+    }),
+    minHeight: {
+      '0': '0',
+      full: '100%',
+      screen: '100vh',
+    },
+    minWidth: {
+      '0': '0',
+      full: '100%',
+    },
+    objectPosition: {
+      bottom: 'bottom',
+      center: 'center',
+      left: 'left',
+      'left-bottom': 'left bottom',
+      'left-top': 'left top',
+      right: 'right',
+      'right-bottom': 'right bottom',
+      'right-top': 'right top',
+      top: 'top',
+    },
+    opacity: {
+      '0': '0',
+      '25': '0.25',
+      '50': '0.5',
+      '75': '0.75',
+      '100': '1',
+    },
+    order: {
+      first: '-9999',
+      last: '9999',
+      none: '0',
+      '1': '1',
+      '2': '2',
+      '3': '3',
+      '4': '4',
+      '5': '5',
+      '6': '6',
+      '7': '7',
+      '8': '8',
+      '9': '9',
+      '10': '10',
+      '11': '11',
+      '12': '12',
+    },
+    padding: theme => theme('spacing'),
+    placeholderColor: theme => theme('colors'),
+    stroke: {
+      current: 'currentColor',
+    },
+    strokeWidth: {
+      '0': '0',
+      '1': '1',
+      '2': '2',
+    },
+    textColor: theme => theme('colors'),
+    width: theme => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      '1/2': '50%',
+      '1/3': '33.333333%',
+      '2/3': '66.666667%',
+      '1/4': '25%',
+      '2/4': '50%',
+      '3/4': '75%',
+      '1/5': '20%',
+      '2/5': '40%',
+      '3/5': '60%',
+      '4/5': '80%',
+      '1/6': '16.666667%',
+      '2/6': '33.333333%',
+      '3/6': '50%',
+      '4/6': '66.666667%',
+      '5/6': '83.333333%',
+      '1/12': '8.333333%',
+      '2/12': '16.666667%',
+      '3/12': '25%',
+      '4/12': '33.333333%',
+      '5/12': '41.666667%',
+      '6/12': '50%',
+      '7/12': '58.333333%',
+      '8/12': '66.666667%',
+      '9/12': '75%',
+      '10/12': '83.333333%',
+      '11/12': '91.666667%',
+      full: '100%',
+      screen: '100vw',
+    }),
+    zIndex: {
+      auto: 'auto',
+      '0': '0',
+      '10': '10',
+      '20': '20',
+      '30': '30',
+      '40': '40',
+      '50': '50',
+    },
+    gap: theme => theme('spacing'),
+    gridTemplateColumns: {
+      none: 'none',
+      '1': 'repeat(1, minmax(0, 1fr))',
+      '2': 'repeat(2, minmax(0, 1fr))',
+      '3': 'repeat(3, minmax(0, 1fr))',
+      '4': 'repeat(4, minmax(0, 1fr))',
+      '5': 'repeat(5, minmax(0, 1fr))',
+      '6': 'repeat(6, minmax(0, 1fr))',
+      '7': 'repeat(7, minmax(0, 1fr))',
+      '8': 'repeat(8, minmax(0, 1fr))',
+      '9': 'repeat(9, minmax(0, 1fr))',
+      '10': 'repeat(10, minmax(0, 1fr))',
+      '11': 'repeat(11, minmax(0, 1fr))',
+      '12': 'repeat(12, minmax(0, 1fr))',
+    },
+    gridColumn: {
+      auto: 'auto',
+      'span-1': 'span 1 / span 1',
+      'span-2': 'span 2 / span 2',
+      'span-3': 'span 3 / span 3',
+      'span-4': 'span 4 / span 4',
+      'span-5': 'span 5 / span 5',
+      'span-6': 'span 6 / span 6',
+      'span-7': 'span 7 / span 7',
+      'span-8': 'span 8 / span 8',
+      'span-9': 'span 9 / span 9',
+      'span-10': 'span 10 / span 10',
+      'span-11': 'span 11 / span 11',
+      'span-12': 'span 12 / span 12',
+    },
+    gridColumnStart: {
+      auto: 'auto',
+      '1': '1',
+      '2': '2',
+      '3': '3',
+      '4': '4',
+      '5': '5',
+      '6': '6',
+      '7': '7',
+      '8': '8',
+      '9': '9',
+      '10': '10',
+      '11': '11',
+      '12': '12',
+      '13': '13',
+    },
+    gridColumnEnd: {
+      auto: 'auto',
+      '1': '1',
+      '2': '2',
+      '3': '3',
+      '4': '4',
+      '5': '5',
+      '6': '6',
+      '7': '7',
+      '8': '8',
+      '9': '9',
+      '10': '10',
+      '11': '11',
+      '12': '12',
+      '13': '13',
+    },
+    gridTemplateRows: {
+      none: 'none',
+      '1': 'repeat(1, minmax(0, 1fr))',
+      '2': 'repeat(2, minmax(0, 1fr))',
+      '3': 'repeat(3, minmax(0, 1fr))',
+      '4': 'repeat(4, minmax(0, 1fr))',
+      '5': 'repeat(5, minmax(0, 1fr))',
+      '6': 'repeat(6, minmax(0, 1fr))',
+    },
+    gridRow: {
+      auto: 'auto',
+      'span-1': 'span 1 / span 1',
+      'span-2': 'span 2 / span 2',
+      'span-3': 'span 3 / span 3',
+      'span-4': 'span 4 / span 4',
+      'span-5': 'span 5 / span 5',
+      'span-6': 'span 6 / span 6',
+    },
+    gridRowStart: {
+      auto: 'auto',
+      '1': '1',
+      '2': '2',
+      '3': '3',
+      '4': '4',
+      '5': '5',
+      '6': '6',
+      '7': '7',
+    },
+    gridRowEnd: {
+      auto: 'auto',
+      '1': '1',
+      '2': '2',
+      '3': '3',
+      '4': '4',
+      '5': '5',
+      '6': '6',
+      '7': '7',
+    },
+    transformOrigin: {
+      center: 'center',
+      top: 'top',
+      'top-right': 'top right',
+      right: 'right',
+      'bottom-right': 'bottom right',
+      bottom: 'bottom',
+      'bottom-left': 'bottom left',
+      left: 'left',
+      'top-left': 'top left',
+    },
+    scale: {
+      '0': '0',
+      '50': '.5',
+      '75': '.75',
+      '90': '.9',
+      '95': '.95',
+      '100': '1',
+      '105': '1.05',
+      '110': '1.1',
+      '125': '1.25',
+      '150': '1.5',
+    },
+    rotate: {
+      '-180': '-180deg',
+      '-90': '-90deg',
+      '-45': '-45deg',
+      '0': '0',
+      '45': '45deg',
+      '90': '90deg',
+      '180': '180deg',
+    },
+    translate: (theme, { negative }) => ({
+      ...theme('spacing'),
+      ...negative(theme('spacing')),
+      '-full': '-100%',
+      '-1/2': '-50%',
+      '1/2': '50%',
+      full: '100%',
+    }),
+    skew: {
+      '-12': '-12deg',
+      '-6': '-6deg',
+      '-3': '-3deg',
+      '0': '0',
+      '3': '3deg',
+      '6': '6deg',
+      '12': '12deg',
+    },
+    transitionProperty: {
+      none: 'none',
+      all: 'all',
+      default:
+        'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
+      colors: 'background-color, border-color, color, fill, stroke',
+      opacity: 'opacity',
+      shadow: 'box-shadow',
+      transform: 'transform',
+    },
+    transitionTimingFunction: {
+      linear: 'linear',
+      in: 'cubic-bezier(0.4, 0, 1, 1)',
+      out: 'cubic-bezier(0, 0, 0.2, 1)',
+      'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+    },
+    transitionDuration: {
+      '75': '75ms',
+      '100': '100ms',
+      '150': '150ms',
+      '200': '200ms',
+      '300': '300ms',
+      '500': '500ms',
+      '700': '700ms',
+      '1000': '1000ms',
+    },
+  },
+  variants: {
+    accessibility: ['responsive', 'focus'],
+    alignContent: ['responsive'],
+    alignItems: ['responsive'],
+    alignSelf: ['responsive'],
+    appearance: ['responsive'],
+    backgroundAttachment: ['responsive'],
+    backgroundColor: ['responsive', 'hover', 'focus'],
+    backgroundPosition: ['responsive'],
+    backgroundRepeat: ['responsive'],
+    backgroundSize: ['responsive'],
+    borderCollapse: ['responsive'],
+    borderColor: ['responsive', 'hover', 'focus'],
+    borderRadius: ['responsive'],
+    borderStyle: ['responsive'],
+    borderWidth: ['responsive'],
+    boxShadow: ['responsive', 'hover', 'focus'],
+    boxSizing: ['responsive'],
+    cursor: ['responsive'],
+    display: ['responsive'],
+    fill: ['responsive'],
+    flex: ['responsive'],
+    flexDirection: ['responsive'],
+    flexGrow: ['responsive'],
+    flexShrink: ['responsive'],
+    flexWrap: ['responsive'],
+    float: ['responsive'],
+    clear: ['responsive'],
+    fontFamily: ['responsive'],
+    fontSize: ['responsive'],
+    fontSmoothing: ['responsive'],
+    fontStyle: ['responsive'],
+    fontWeight: ['responsive', 'hover', 'focus'],
+    height: ['responsive'],
+    inset: ['responsive'],
+    justifyContent: ['responsive'],
+    letterSpacing: ['responsive'],
+    lineHeight: ['responsive'],
+    listStylePosition: ['responsive'],
+    listStyleType: ['responsive'],
+    margin: ['responsive'],
+    maxHeight: ['responsive'],
+    maxWidth: ['responsive'],
+    minHeight: ['responsive'],
+    minWidth: ['responsive'],
+    objectFit: ['responsive'],
+    objectPosition: ['responsive'],
+    opacity: ['responsive', 'hover', 'focus'],
+    order: ['responsive'],
+    outline: ['responsive', 'focus'],
+    overflow: ['responsive'],
+    padding: ['responsive'],
+    placeholderColor: ['responsive', 'focus'],
+    pointerEvents: ['responsive'],
+    position: ['responsive'],
+    resize: ['responsive'],
+    stroke: ['responsive'],
+    strokeWidth: ['responsive'],
+    tableLayout: ['responsive'],
+    textAlign: ['responsive'],
+    textColor: ['responsive', 'hover', 'focus'],
+    textDecoration: ['responsive', 'hover', 'focus'],
+    textTransform: ['responsive'],
+    userSelect: ['responsive'],
+    verticalAlign: ['responsive'],
+    visibility: ['responsive'],
+    whitespace: ['responsive'],
+    width: ['responsive'],
+    wordBreak: ['responsive'],
+    zIndex: ['responsive'],
+    gap: ['responsive'],
+    gridAutoFlow: ['responsive'],
+    gridTemplateColumns: ['responsive'],
+    gridColumn: ['responsive'],
+    gridColumnStart: ['responsive'],
+    gridColumnEnd: ['responsive'],
+    gridTemplateRows: ['responsive'],
+    gridRow: ['responsive'],
+    gridRowStart: ['responsive'],
+    gridRowEnd: ['responsive'],
+    transform: ['responsive'],
+    transformOrigin: ['responsive'],
+    scale: ['responsive', 'hover', 'focus'],
+    rotate: ['responsive', 'hover', 'focus'],
+    translate: ['responsive', 'hover', 'focus'],
+    skew: ['responsive', 'hover', 'focus'],
+    transitionProperty: ['responsive'],
+    transitionTimingFunction: ['responsive'],
+    transitionDuration: ['responsive'],
+  },
+  corePlugins: {},
+  plugins: [],
+};
--- a/platform/viewer/package.json
+++ b/platform/viewer/package.json
@ -35,35 +35,36 @@
    "test:e2e:serve": "serve -n -l 3000 -s dist",
    "test:unit": "jest --watchAll",
    "test:unit:ci": "jest --ci --runInBand --collectCoverage",
-    "prepublishOnly": "yarn run build:package",
-    "postpublish": "node -p -e \"require('./package.json').version\" > success_version.txt"
+    "ci:generateSuccessVersion": "node -p -e \"require('./package.json').version\" > success_version.txt"
  },
  "files": [
    "dist",
    "README.md"
  ],
  "peerDependencies": {
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "cornerstone-core": "^2.3.0",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
+    "shader-loader": "^1.3.1",
+    "webpack": "^4.0.0",
+    "worker-loader": "^2.0.0",
+    "wslink": "^0.1.8"
  },
  "dependencies": {
-    "@babel/runtime": "^7.5.5",
-    "@ohif/core": "^2.9.6",
-    "@ohif/extension-cornerstone": "^2.7.3",
-    "@ohif/extension-dicom-html": "^1.2.2",
-    "@ohif/extension-dicom-microscopy": "^0.50.9",
-    "@ohif/extension-dicom-p10-downloader": "^0.1.0",
-    "@ohif/extension-dicom-pdf": "^1.0.3",
-    "@ohif/extension-dicom-rt": "^0.1.4",
-    "@ohif/extension-dicom-segmentation": "^0.2.6",
+    "@babel/runtime": "7.7.6",
+    "@ohif/core": "^2.5.1",
+    "@ohif/extension-cornerstone": "^2.4.0",
+    "@ohif/extension-dicom-html": "^1.1.0",
+    "@ohif/extension-dicom-microscopy": "^0.50.6",
+    "@ohif/extension-dicom-pdf": "^1.0.1",
    "@ohif/extension-lesion-tracker": "^0.2.0",
    "@ohif/extension-vtk": "^1.5.6",
    "@ohif/i18n": "^0.52.8",
    "@ohif/ui": "^1.4.4",
    "@tanem/react-nprogress": "^1.1.25",
+    "@types/react": "^16.0.0",
    "classnames": "^2.2.6",
    "core-js": "^3.2.1",
-    "cornerstone-core": "^2.2.8",
    "cornerstone-math": "^0.1.8",
    "cornerstone-tools": "4.15.1",
    "cornerstone-wado-image-loader": "^3.1.0",
@ -92,7 +93,9 @@
    "vtk.js": "^11.14.0"
  },
  "devDependencies": {
+    "@percy/cypress": "^2.3.0",
    "cypress": "^3.8.0",
+    "cypress-file-upload": "^3.5.3",
    "gh-pages": "2.0.1",
    "identity-obj-proxy": "3.0.x",
    "lodash": "4.17.15",
--- a/yarn.lock
+++ b/yarn.lock