chore(*): switch to Yarn Plug'n'Play (#871)

* Build all

* Lint all

* Test (almost) all

* Test CLI

* Format

* Make styled-components a peer dependency

* Add missing peer dependencies

* Fix electron fixture

.yarnrc.yml

@@ -1,2 +1,39 @@
-nodeLinker: node-modules
 yarnPath: .yarn/releases/yarn-3.0.2.cjs
+
+packageExtensions:
+  'http-proxy-middleware@^2.0.0':
+    dependencies:
+      '@types/express': '^4.17.13'
+  '@storybook/addons@^6.3.8':
+    dependencies:
+      '@types/webpack-env': '^1.16.0'
+  '@storybook/react@^6.3.8':
+    dependencies:
+      '@storybook/client-api': '^6.3.8'
+      '@types/node': '^14.17.15'
+  '@storybook/theming@^6.3.8':
+    dependencies:
+      '@emotion/serialize': '^0.11.16'
+      '@emotion/utils': '^0.11.3'
+  'redux-persist@^6.0.0':
+    dependencies:
+      '@types/react': '^16.14.15'
+      'react': '^16.14.0'
+  'apollo-server-core@^2.25.2':
+    dependencies:
+      '@types/node': '^14.17.15'
+  'apollo-server@^2.25.2':
+    dependencies:
+      '@types/express': '^4.17.13'
+      '@types/node': '^14.17.15'
+  'graphql-subscriptions@^1.0.0':
+    dependencies:
+      '@types/node': '^14.17.15'
+  'subscriptions-transport-ws@^0.9.19':
+    dependencies:
+      '@types/node': '^14.17.15'
+      '@types/ws': '^7.4.7'
+  'knex@^0.19.5':
+    dependencies:
+      '@types/node': '^14.17.15'
+      'sqlite3': '^5.0.2'

extension/package.json

@@ -27,8 +27,9 @@
     "clean": "rimraf build/ && rimraf dev/",
     "test:app": "cross-env BABEL_ENV=test jest test/app",
     "test:chrome": "jest test/chrome",
-    "test:electron": "jest test/electron",
+    "test:electron": "yarn run build:test:electron:fixture && jest test/electron",
     "test": "yarn run test:app && yarn run build:extension && yarn run test:chrome && yarn run test:electron",
+    "build:test:electron:fixture": "webpack --config test/electron/fixture/webpack.config.js",
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
@@ -38,6 +39,7 @@
     "@redux-devtools/instrument": "^1.11.0",
     "@redux-devtools/serialize": "^0.3.0",
     "@redux-devtools/slider-monitor": "^2.0.0-8",
+    "@redux-devtools/ui": "^1.0.0-9",
     "@redux-devtools/utils": "^1.0.0-6",
     "@types/jsan": "^3.1.2",
     "jsan": "^3.1.13",
@@ -46,10 +48,12 @@
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-icons": "^4.2.0",
+    "react-is": "^16.13.1",
     "react-json-tree": "^0.15.0",
     "react-redux": "^7.2.5",
     "redux": "^4.1.1",
-    "redux-persist": "^6.0.0"
+    "redux-persist": "^6.0.0",
+    "styled-components": "^5.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.15.5",
@@ -57,6 +61,12 @@
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.15.0",
     "@babel/register": "^7.15.3",
+    "@types/chrome": "^0.0.157",
+    "@types/lodash": "^4.14.172",
+    "@types/react": "^16.14.15",
+    "@types/react-dom": "^16.9.13",
+    "@types/react-redux": "^7.1.18",
+    "@types/styled-components": "^5.1.14",
     "babel-loader": "^8.2.2",
     "bestzip": "^2.2.0",
     "chromedriver": "^93.0.1",
@@ -75,6 +85,7 @@
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^6.3.3",
     "gitbook-cli": "^2.3.2",
+    "immutable": "^4.0.0-rc.14",
     "jest": "^27.2.0",
     "path-browserify": "^1.0.1",
     "pug-html-loader": "^1.1.5",

extension/test/electron/fixture/index.html

@@ -8,6 +8,6 @@
     <span id="counter">0</span>
     <button id="increment">+</button>
     <button id="decrement">-</button>
-    <script src="renderer.js"></script>
+    <script src="./dist/renderer.js"></script>
   </body>
 </html>

extension/test/electron/fixture/webpack.config.js

@@ -0,0 +1,10 @@
+const path = require('path');
+
+module.exports = {
+  mode: 'development',
+  entry: './test/electron/fixture/src/renderer.js',
+  output: {
+    filename: 'renderer.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+};

package.json

@@ -1,8 +1,15 @@
 {
   "private": true,
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.31.1",
+    "@typescript-eslint/parser": "^4.31.1",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-jest": "^24.4.0",
+    "eslint-plugin-react": "^7.25.1",
     "lerna": "^4.0.0",
-    "prettier": "2.4.1"
+    "prettier": "2.4.1",
+    "typescript": "~4.3.5"
   },
   "scripts": {
     "format": "prettier --write .",

packages/d3-state-visualizer/src/charts/tree/tree.ts

@@ -581,3 +581,5 @@ export default function (
     }
   };
 }
+
+export { Primitive };

packages/react-base16-styling/package.json

@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@types/base16": "^1.0.2",
-    "@types/lodash.curry": "^4.1.6",
+    "@types/lodash": "^4.14.172",
     "base16": "^1.0.0",
     "color": "^4.0.1",
     "csstype": "^3.0.9",

packages/react-dock/package.json

@@ -38,6 +38,7 @@
     "prepublish": "yarn run type-check && yarn run lint && yarn run test"
   },
   "dependencies": {
+    "@types/lodash": "^4.14.172",
     "@types/prop-types": "^15.7.4",
     "lodash.debounce": "^4.0.8",
     "prop-types": "^15.7.2"
@@ -52,7 +53,7 @@
     "@types/lodash.debounce": "^4.0.6",
     "@types/node": "^14.17.15",
     "@types/react": "^16.14.15",
-    "@types/react-dom": "^16.9.14",
+    "@types/react-dom": "^16.9.13",
     "@types/react-test-renderer": "^16.9.5",
     "@types/styled-components": "^5.1.14",
     "@types/webpack": "^5.28.0",

packages/redux-devtools-app/package.json

@@ -45,6 +45,7 @@
     "@redux-devtools/slider-monitor": "^2.0.0-8",
     "@redux-devtools/ui": "^1.0.0-9",
     "@reduxjs/toolkit": "^1.6.1",
+    "@types/prop-types": "^15.7.4",
     "d3-state-visualizer": "^1.4.0",
     "javascript-stringify": "^2.1.0",
     "jsan": "^3.1.13",
@@ -57,8 +58,7 @@
     "react-redux": "^7.2.5",
     "redux": "^4.1.1",
     "redux-persist": "^6.0.0",
-    "socketcluster-client": "^14.3.2",
+    "socketcluster-client": "^14.3.2"
-    "styled-components": "^5.3.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.15.4",
@@ -67,12 +67,21 @@
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.15.0",
     "@rjsf/core": "^3.1.0",
+    "@types/enzyme": "^3.10.9",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^27.0.1",
+    "@types/jsan": "^3.1.2",
     "@types/json-schema": "^7.0.9",
+    "@types/lodash": "^4.14.172",
     "@types/node": "^14.17.15",
+    "@types/react": "^16.14.15",
+    "@types/react-dom": "^16.9.13",
+    "@types/react-redux": "^7.1.18",
     "@types/socketcluster-client": "^13.0.5",
+    "@types/styled-components": "^5.1.14",
     "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^4.1.0",
+    "@types/webpack-env": "^1.16.0",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
     "@typescript-eslint/parser": "^4.31.1",
     "babel-loader": "^8.2.2",
@@ -94,6 +103,7 @@
     "react-dom": "^16.14.0",
     "rimraf": "^3.0.2",
     "style-loader": "^3.2.1",
+    "styled-components": "^5.3.1",
     "ts-jest": "^27.0.5",
     "ts-node": "^10.2.1",
     "typescript": "~4.3.5",
@@ -103,6 +113,9 @@
     "webpack-dev-server": "^4.2.1"
   },
   "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
+    "@types/react": "^16.3.0 || ^17.0.0",
+    "@types/styled-components": "^5.1.14",
+    "react": "^16.3.0 || ^17.0.0",
+    "styled-components": "^5.3.1"
   }
 }

packages/redux-devtools-app/src/actions/index.ts

@@ -46,7 +46,7 @@ import { Features, State } from '../reducers/instances';
 import { MonitorStateMonitorState } from '../reducers/monitor';
 import { LiftedAction } from '@redux-devtools/core';
 import { Data } from '../reducers/reports';
-import { LiftedState } from '@redux-devtools/instrument';
+import { LiftedState } from '@redux-devtools/core';
 
 let monitorReducer: (
   monitorProps: unknown,

packages/redux-devtools-chart-monitor/src/Chart.tsx

@@ -4,10 +4,11 @@ import { tree } from 'd3-state-visualizer';
 import { Action, Dispatch } from 'redux';
 import { LiftedAction, LiftedState } from '@redux-devtools/core';
 import * as themes from 'redux-devtools-themes';
-import { Base16Theme } from 'react-base16-styling';
 import { ChartMonitorState } from './reducers';
-import { Primitive } from 'd3';
+import {
-import { NodeWithId } from 'd3-state-visualizer/lib/charts/tree/tree';
+  NodeWithId,
+  Primitive,
+} from 'd3-state-visualizer/lib/charts/tree/tree';
 
 const wrapperStyle = {
   width: '100%',
@@ -19,7 +20,7 @@ export interface Props<S, A extends Action<unknown>>
   dispatch: Dispatch<LiftedAction<S, A, ChartMonitorState>>;
   preserveScrollTop: boolean;
   select: (state: S) => unknown;
-  theme: keyof typeof themes | Base16Theme;
+  theme: keyof typeof themes | themes.Base16Theme;
   invertTheme: boolean;
 
   state: S | null;

packages/redux-devtools-chart-monitor/src/ChartMonitor.tsx

@@ -8,12 +8,13 @@ import {
 } from '@redux-devtools/core';
 import deepmerge from 'deepmerge';
 import { Action, Dispatch } from 'redux';
-import { Base16Theme } from 'react-base16-styling';
 
 import reducer, { ChartMonitorState } from './reducers';
 import Chart, { Props } from './Chart';
-import { Primitive } from 'd3';
+import {
-import { NodeWithId } from 'd3-state-visualizer/lib/charts/tree/tree';
+  NodeWithId,
+  Primitive,
+} from 'd3-state-visualizer/lib/charts/tree/tree';
 // eslint-disable-next-line @typescript-eslint/unbound-method
 const { reset, rollback, commit, sweep, toggleAction } = ActionCreators;
 
@@ -28,7 +29,7 @@ const styles: { container: CSSProperties } = {
   },
 };
 
-function invertColors(theme: Base16Theme) {
+function invertColors(theme: themes.Base16Theme) {
   return {
     ...theme,
     base00: theme.base07,
@@ -47,7 +48,7 @@ export interface ChartMonitorProps<S, A extends Action<unknown>>
   dispatch: Dispatch<LiftedAction<S, A, ChartMonitorState>>;
   preserveScrollTop: boolean;
   select: (state: S) => unknown;
-  theme: keyof typeof themes | Base16Theme;
+  theme: keyof typeof themes | themes.Base16Theme;
   invertTheme: boolean;
 
   state: S | null;

packages/redux-devtools-cli/package.json

@@ -59,18 +59,31 @@
     "open": "^8.2.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
+    "react-is": "^16.13.1",
     "semver": "^7.3.5",
     "socketcluster": "^14.4.2",
     "sqlite3": "^5.0.2",
+    "styled-components": "^5.3.1",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
+    "@types/body-parser": "^1.19.1",
+    "@types/cors": "^2.8.12",
     "@types/cross-spawn": "^6.0.2",
+    "@types/express": "^4.17.13",
     "@types/jest": "^27.0.1",
+    "@types/lodash": "^4.14.172",
+    "@types/minimist": "^1.2.2",
     "@types/morgan": "^1.9.3",
     "@types/semver": "^7.3.8",
+    "@types/socketcluster": "^14.0.4",
+    "@types/socketcluster-client": "^13.0.5",
+    "@types/socketcluster-server": "^14.2.6",
+    "@types/styled-components": "^5.1.14",
     "@types/supertest": "^2.0.11",
     "@types/uuid": "^8.3.1",
+    "@typescript-eslint/eslint-plugin": "^4.31.1",
+    "@typescript-eslint/parser": "^4.31.1",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-jest": "^24.4.0",

packages/redux-devtools-inspector-monitor-trace-tab/package.json

@@ -50,6 +50,7 @@
     "@types/jest": "^27.0.1",
     "@types/react": "^16.14.15",
     "@types/redux-devtools-themes": "^1.0.0",
+    "@types/source-map": "0.5.2",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
     "@typescript-eslint/parser": "^4.31.1",
     "enzyme": "^3.11.0",

packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/utils/getSourceMap.ts

@@ -27,7 +27,7 @@ class SourceMap {
   getOriginalPosition(
     line: number,
     column: number
-  ): { source: string; line: number; column: number } {
+  ): { source: string | null; line: number | null; column: number | null } {
     const {
       line: l,
       column: c,
@@ -49,7 +49,7 @@ class SourceMap {
     source: string,
     line: number,
     column: number
-  ): { line: number; column: number } {
+  ): { line: number | null; column: number | null } {
     const { line: l, column: c } = this.__source_map.generatedPositionFor({
       source,
       line,
@@ -65,7 +65,7 @@ class SourceMap {
    * Returns the code for a given source file name.
    * @param {string} sourceName The name of the source file.
    */
-  getSource(sourceName: string): string {
+  getSource(sourceName: string): string | null {
     return this.__source_map.sourceContentFor(sourceName);
   }
 

packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/utils/unmapper.ts

@@ -107,12 +107,12 @@ async function unmap(
       fileUri,
       line,
       column || null,
-      getLinesAround(line, contextLines, fileContents || []),
+      getLinesAround(line!, contextLines, fileContents || []),
       functionName,
       fN,
       lineNumber,
       columnNumber,
-      getLinesAround(lineNumber, contextLines, originalSource)
+      getLinesAround(lineNumber, contextLines, originalSource!)
     );
   });
 }

packages/redux-devtools-inspector-monitor/package.json

@@ -36,6 +36,7 @@
   "dependencies": {
     "@babel/runtime": "^7.15.4",
     "@types/dragula": "^3.7.1",
+    "@types/lodash": "^4.14.172",
     "@types/prop-types": "^15.7.4",
     "dateformat": "^4.5.1",
     "hex-rgba": "^1.0.2",
@@ -63,11 +64,13 @@
     "@types/dateformat": "^3.0.1",
     "@types/hex-rgba": "^1.0.1",
     "@types/history": "^4.7.9",
+    "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.shuffle": "^4.2.6",
     "@types/node": "^14.17.15",
     "@types/react": "^16.14.15",
     "@types/react-dragula": "^1.1.0",
     "@types/react-router": "^5.1.16",
+    "@types/redux-devtools-themes": "^1.0.0",
     "@types/redux-logger": "^3.0.9",
     "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^4.1.0",

packages/redux-devtools-rtk-query-monitor/package.json

@@ -46,8 +46,13 @@
     "@redux-devtools/ui": "^1.0.0-9",
     "@types/prop-types": "^15.7.4",
     "@types/redux-devtools-themes": "^1.0.0",
+    "hex-rgba": "^1.0.2",
+    "immutable": "^4.0.0-rc.14",
+    "jss": "^10.7.1",
+    "jss-preset-default": "^10.7.1",
     "lodash.debounce": "^4.0.8",
     "prop-types": "^15.7.2",
+    "react-base16-styling": "^0.8.0",
     "react-json-tree": "^0.15.0",
     "redux-devtools-themes": "^1.0.0"
   },
@@ -66,9 +71,11 @@
     "@redux-devtools/dock-monitor": "^1.4.0",
     "@reduxjs/toolkit": "^1.6.1",
     "@types/copy-webpack-plugin": "^8.0.1",
+    "@types/hex-rgba": "^1.0.1",
+    "@types/lodash.debounce": "^4.0.6",
     "@types/node": "^14.17.15",
     "@types/react": "^16.14.15",
-    "@types/react-dom": "^16.9.14",
+    "@types/react-dom": "^16.9.13",
     "@types/react-redux": "^7.1.18",
     "@types/react-router-dom": "^5.1.8",
     "@types/webpack": "^5.28.0",

packages/redux-devtools-rtk-query-monitor/src/types.ts

@@ -1,4 +1,4 @@
-import type { LiftedAction, LiftedState } from '@redux-devtools/instrument';
+import type { LiftedAction, LiftedState } from '@redux-devtools/core';
 import type { createApi, QueryStatus } from '@reduxjs/toolkit/query';
 import type { Action, AnyAction, Dispatch } from '@reduxjs/toolkit';
 import type { ComponentType } from 'react';

packages/redux-devtools-ui/package.json

@@ -42,7 +42,6 @@
     "@types/react-select": "^4.0.17",
     "@types/redux-devtools-themes": "^1.0.0",
     "@types/simple-element-resize-detector": "^1.3.0",
-    "@types/styled-components": "^5.1.14",
     "base16": "^1.0.0",
     "codemirror": "^5.62.3",
     "color": "^4.0.1",
@@ -50,8 +49,7 @@
     "react-icons": "^4.2.0",
     "react-select": "^4.3.1",
     "redux-devtools-themes": "^1.0.0",
-    "simple-element-resize-detector": "^1.3.0",
+    "simple-element-resize-detector": "^1.3.0"
-    "styled-components": "^5.3.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.15.4",
@@ -66,6 +64,7 @@
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^27.0.1",
     "@types/react": "^16.14.15",
+    "@types/styled-components": "^5.1.14",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
     "@typescript-eslint/parser": "^4.31.1",
     "csstype": "^3.0.9",
@@ -81,6 +80,7 @@
     "react-dom": "^16.14.0",
     "react-is": "^16.13.1",
     "rimraf": "^3.0.2",
+    "styled-components": "^5.3.1",
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^22.0.0",
@@ -91,6 +91,8 @@
   },
   "peerDependencies": {
     "@types/react": "^16.3.0 || ^17.0.0",
-    "react": "^16.3.0 || ^17.0.0"
+    "@types/styled-components": "^5.1.14",
+    "react": "^16.3.0 || ^17.0.0",
+    "styled-components": "^5.3.1"
   }
 }

packages/redux-devtools-ui/src/Form/schema.ts

@@ -1,4 +1,4 @@
-import type { JSONSchema7 } from 'json-schema';
+import { JSONSchema7 } from 'json-schema';
 
 export const schema: JSONSchema7 = {
   title: 'Example form',

packages/redux-devtools-utils/package.json

@@ -45,6 +45,8 @@
     "@babel/core": "^7.15.5",
     "@babel/preset-env": "^7.15.6",
     "@babel/preset-typescript": "^7.15.0",
+    "@types/jsan": "^3.1.2",
+    "@types/lodash": "^4.14.172",
     "@types/node": "^14.17.15",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
     "@typescript-eslint/parser": "^4.31.1",

packages/redux-devtools-utils/src/importState.ts

@@ -3,7 +3,7 @@ import jsan from 'jsan';
 import { immutableSerialize } from '@redux-devtools/serialize';
 import { Action } from 'redux';
 import Immutable from 'immutable';
-import { PerformAction } from '@redux-devtools/instrument';
+import { PerformAction } from '@redux-devtools/core';
 
 interface State {
   actionsById: { [actionId: number]: PerformAction<Action<unknown>> };

tsconfig.base.json

@@ -6,8 +6,6 @@
     "strict": true,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
+    "forceConsistentCasingInFileNames": true
-    // See https://github.com/DefinitelyTyped/DefinitelyTyped/issues/33311
-    "types": ["node", "jest", "webpack-env", "chrome"]
   }
 }

yarn.lock

@@ -2780,7 +2780,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/utils@npm:0.11.3":
+"@emotion/utils@npm:0.11.3, @emotion/utils@npm:^0.11.3":
   version: 0.11.3
   resolution: "@emotion/utils@npm:0.11.3"
   checksum: 9c4204bda84f9acd153a9be9478a83f9baa74d5d7a4c21882681c4d1b86cd113b84540cb1f92e1c30313b5075f024da2658dbc553f5b00776ef9b6ec7991c0c9
@@ -4491,12 +4491,22 @@ __metadata:
     "@redux-devtools/ui": ^1.0.0-9
     "@reduxjs/toolkit": ^1.6.1
     "@rjsf/core": ^3.1.0
+    "@types/enzyme": ^3.10.9
+    "@types/enzyme-adapter-react-16": ^1.0.6
     "@types/jest": ^27.0.1
+    "@types/jsan": ^3.1.2
     "@types/json-schema": ^7.0.9
+    "@types/lodash": ^4.14.172
     "@types/node": ^14.17.15
+    "@types/prop-types": ^15.7.4
+    "@types/react": ^16.14.15
+    "@types/react-dom": ^16.9.13
+    "@types/react-redux": ^7.1.18
     "@types/socketcluster-client": ^13.0.5
+    "@types/styled-components": ^5.1.14
     "@types/webpack": ^5.28.0
     "@types/webpack-dev-server": ^4.1.0
+    "@types/webpack-env": ^1.16.0
     "@typescript-eslint/eslint-plugin": ^4.31.1
     "@typescript-eslint/parser": ^4.31.1
     babel-loader: ^8.2.2
@@ -4540,7 +4550,10 @@ __metadata:
     webpack-cli: ^4.8.0
     webpack-dev-server: ^4.2.1
   peerDependencies:
+    "@types/react": ^16.3.0 || ^17.0.0
+    "@types/styled-components": ^5.1.14
     react: ^16.3.0 || ^17.0.0
+    styled-components: ^5.3.1
   languageName: unknown
   linkType: soft
 
@@ -4583,13 +4596,24 @@ __metadata:
   resolution: "@redux-devtools/cli@workspace:packages/redux-devtools-cli"
   dependencies:
     "@redux-devtools/app": ^1.0.0-8
+    "@types/body-parser": ^1.19.1
+    "@types/cors": ^2.8.12
     "@types/cross-spawn": ^6.0.2
+    "@types/express": ^4.17.13
     "@types/jest": ^27.0.1
+    "@types/lodash": ^4.14.172
+    "@types/minimist": ^1.2.2
     "@types/morgan": ^1.9.3
     "@types/react": ^16.14.15
     "@types/semver": ^7.3.8
+    "@types/socketcluster": ^14.0.4
+    "@types/socketcluster-client": ^13.0.5
+    "@types/socketcluster-server": ^14.2.6
+    "@types/styled-components": ^5.1.14
     "@types/supertest": ^2.0.11
     "@types/uuid": ^8.3.1
+    "@typescript-eslint/eslint-plugin": ^4.31.1
+    "@typescript-eslint/parser": ^4.31.1
     apollo-server: ^2.25.2
     apollo-server-express: ^2.25.2
     body-parser: ^1.19.0
@@ -4612,11 +4636,13 @@ __metadata:
     open: ^8.2.1
     react: ^16.14.0
     react-dom: ^16.14.0
+    react-is: ^16.13.1
     rimraf: ^3.0.2
     semver: ^7.3.5
     socketcluster: ^14.4.2
     socketcluster-client: ^14.3.2
     sqlite3: ^5.0.2
+    styled-components: ^5.3.1
     supertest: ^6.1.6
     ts-jest: ^27.0.5
     typescript: ~4.3.5
@@ -4798,6 +4824,7 @@ __metadata:
     "@types/jest": ^27.0.1
     "@types/react": ^16.14.15
     "@types/redux-devtools-themes": ^1.0.0
+    "@types/source-map": 0.5.2
     "@typescript-eslint/eslint-plugin": ^4.31.1
     "@typescript-eslint/parser": ^4.31.1
     anser: ^2.0.2
@@ -4844,12 +4871,15 @@ __metadata:
     "@types/dragula": ^3.7.1
     "@types/hex-rgba": ^1.0.1
     "@types/history": ^4.7.9
+    "@types/lodash": ^4.14.172
+    "@types/lodash.debounce": ^4.0.6
     "@types/lodash.shuffle": ^4.2.6
     "@types/node": ^14.17.15
     "@types/prop-types": ^15.7.4
     "@types/react": ^16.14.15
     "@types/react-dragula": ^1.1.0
     "@types/react-router": ^5.1.16
+    "@types/redux-devtools-themes": ^1.0.0
     "@types/redux-logger": ^3.0.9
     "@types/webpack": ^5.28.0
     "@types/webpack-dev-server": ^4.1.0
@@ -4983,10 +5013,12 @@ __metadata:
     "@redux-devtools/ui": ^1.0.0-9
     "@reduxjs/toolkit": ^1.6.1
     "@types/copy-webpack-plugin": ^8.0.1
+    "@types/hex-rgba": ^1.0.1
+    "@types/lodash.debounce": ^4.0.6
     "@types/node": ^14.17.15
     "@types/prop-types": ^15.7.4
     "@types/react": ^16.14.15
-    "@types/react-dom": ^16.9.14
+    "@types/react-dom": ^16.9.13
     "@types/react-redux": ^7.1.18
     "@types/react-router-dom": ^5.1.8
     "@types/redux-devtools-themes": ^1.0.0
@@ -5004,11 +5036,16 @@ __metadata:
     eslint-plugin-react: ^7.25.1
     fork-ts-checker-webpack-plugin: ^6.3.3
     framer-motion: ^4.1.17
+    hex-rgba: ^1.0.2
     html-webpack-plugin: ^5.3.2
+    immutable: ^4.0.0-rc.14
+    jss: ^10.7.1
+    jss-preset-default: ^10.7.1
     lodash.debounce: ^4.0.8
     msw: ^0.28.2
     prop-types: ^15.7.2
     react: ^16.14.0
+    react-base16-styling: ^0.8.0
     react-dom: ^16.14.0
     react-json-tree: ^0.15.0
     react-redux: ^7.2.5
@@ -5148,7 +5185,9 @@ __metadata:
     typescript: ~4.3.5
   peerDependencies:
     "@types/react": ^16.3.0 || ^17.0.0
+    "@types/styled-components": ^5.1.14
     react: ^16.3.0 || ^17.0.0
+    styled-components: ^5.3.1
   languageName: unknown
   linkType: soft
 
@@ -5163,6 +5202,8 @@ __metadata:
     "@redux-devtools/core": ^3.9.0
     "@redux-devtools/serialize": ^0.3.0
     "@types/get-params": ^0.1.0
+    "@types/jsan": ^3.1.2
+    "@types/lodash": ^4.14.172
     "@types/node": ^14.17.15
     "@typescript-eslint/eslint-plugin": ^4.31.1
     "@typescript-eslint/parser": ^4.31.1
@@ -5745,7 +5786,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/client-api@npm:6.3.8":
+"@storybook/client-api@npm:6.3.8, @storybook/client-api@npm:^6.3.8":
   version: 6.3.8
   resolution: "@storybook/client-api@npm:6.3.8"
   dependencies:
@@ -6441,7 +6482,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/body-parser@npm:*":
+"@types/body-parser@npm:*, @types/body-parser@npm:^1.19.1":
   version: 1.19.1
   resolution: "@types/body-parser@npm:1.19.1"
   dependencies:
@@ -6616,6 +6657,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/cors@npm:^2.8.12":
+  version: 2.8.12
+  resolution: "@types/cors@npm:2.8.12"
+  checksum: 8c45f112c7d1d2d831b4b266f2e6ed33a1887a35dcbfe2a18b28370751fababb7cd045e745ef84a523c33a25932678097bf79afaa367c6cb3fa0daa7a6438257
+  languageName: node
+  linkType: hard
+
 "@types/cross-spawn@npm:^6.0.2":
   version: 6.0.2
   resolution: "@types/cross-spawn@npm:6.0.2"
@@ -6717,7 +6765,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/express@npm:*, @types/express@npm:^4.17.12":
+"@types/express@npm:*, @types/express@npm:^4.17.12, @types/express@npm:^4.17.13":
   version: 4.17.13
   resolution: "@types/express@npm:4.17.13"
   dependencies:
@@ -7110,7 +7158,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/minimist@npm:^1.2.0":
+"@types/minimist@npm:^1.2.0, @types/minimist@npm:^1.2.2":
   version: 1.2.2
   resolution: "@types/minimist@npm:1.2.2"
   checksum: b8da83c66eb4aac0440e64674b19564d9d86c80ae273144db9681e5eeff66f238ade9515f5006ffbfa955ceff8b89ad2bd8ec577d7caee74ba101431fb07045d
@@ -7145,10 +7193,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:*":
+"@types/node@npm:*, @types/node@npm:^14.0.10, @types/node@npm:^14.17.15, @types/node@npm:^14.6.2":
-  version: 16.9.1
+  version: 14.17.15
-  resolution: "@types/node@npm:16.9.1"
+  resolution: "@types/node@npm:14.17.15"
-  checksum: 41afcf183a22d59323a0199dd7e0f46591247f45fc08a4434edb26d56dc279ae4fdb80f37989ddd7a0f45e3857c4933e6e82057ede09c5a829f77e373e680375
+  checksum: e0840304db236027e822ef1e149de433afd20d2553699cdc2ce651d107a77646c6eaaeaec8c348eabdc05169440dbc2cf069791bef65ca4b6e5ee4412e69c898
   languageName: node
   linkType: hard
 
@@ -7159,13 +7207,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:^14.0.10, @types/node@npm:^14.17.15, @types/node@npm:^14.6.2":
-  version: 14.17.15
-  resolution: "@types/node@npm:14.17.15"
-  checksum: e0840304db236027e822ef1e149de433afd20d2553699cdc2ce651d107a77646c6eaaeaec8c348eabdc05169440dbc2cf069791bef65ca4b6e5ee4412e69c898
-  languageName: node
-  linkType: hard
-
 "@types/normalize-package-data@npm:^2.4.0":
   version: 2.4.1
   resolution: "@types/normalize-package-data@npm:2.4.1"
@@ -7275,7 +7316,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:*, @types/react-dom@npm:^16.9.13, @types/react-dom@npm:^16.9.14":
+"@types/react-dom@npm:*, @types/react-dom@npm:^16.9.13":
   version: 16.9.14
   resolution: "@types/react-dom@npm:16.9.14"
   dependencies:
@@ -7531,7 +7572,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/socketcluster-server@npm:^14":
+"@types/socketcluster-server@npm:^14, @types/socketcluster-server@npm:^14.2.6":
   version: 14.2.6
   resolution: "@types/socketcluster-server@npm:14.2.6"
   dependencies:
@@ -7544,7 +7585,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/socketcluster@npm:*":
+"@types/socketcluster@npm:*, @types/socketcluster@npm:^14.0.4":
   version: 14.0.4
   resolution: "@types/socketcluster@npm:14.0.4"
   dependencies:
@@ -7562,6 +7603,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/source-map@npm:0.5.2":
+  version: 0.5.2
+  resolution: "@types/source-map@npm:0.5.2"
+  checksum: e7ff6a13f396fbed6ec9181d6801fee0e466ede4b0e7f00662cd7aca34f0f30d22a7bf00e01a901b374f025a2d7857e19eee29a9dcf6c59af5168bcfc06aa66d
+  languageName: node
+  linkType: hard
+
 "@types/stack-utils@npm:^2.0.0":
   version: 2.0.1
   resolution: "@types/stack-utils@npm:2.0.1"
@@ -7732,7 +7780,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/ws@npm:*, @types/ws@npm:^7.0.0":
+"@types/ws@npm:*, @types/ws@npm:^7.0.0, @types/ws@npm:^7.4.7":
   version: 7.4.7
   resolution: "@types/ws@npm:7.4.7"
   dependencies:
@@ -24232,6 +24280,7 @@ fsevents@^1.2.7:
     "@types/base16": ^1.0.2
     "@types/color": ^3.0.2
     "@types/jest": ^27.0.1
+    "@types/lodash": ^4.14.172
     "@types/lodash.curry": ^4.1.6
     "@typescript-eslint/eslint-plugin": ^4.31.1
     "@typescript-eslint/parser": ^4.31.1
@@ -24376,11 +24425,12 @@ fsevents@^1.2.7:
     "@babel/preset-react": ^7.14.5
     "@babel/preset-typescript": ^7.15.0
     "@types/jest": ^27.0.1
+    "@types/lodash": ^4.14.172
     "@types/lodash.debounce": ^4.0.6
     "@types/node": ^14.17.15
     "@types/prop-types": ^15.7.4
     "@types/react": ^16.14.15
-    "@types/react-dom": ^16.9.14
+    "@types/react-dom": ^16.9.13
     "@types/react-test-renderer": ^16.9.5
     "@types/styled-components": ^5.1.14
     "@types/webpack": ^5.28.0
@@ -25593,8 +25643,15 @@ fsevents@^1.2.7:
     "@redux-devtools/instrument": ^1.11.0
     "@redux-devtools/serialize": ^0.3.0
     "@redux-devtools/slider-monitor": ^2.0.0-8
+    "@redux-devtools/ui": ^1.0.0-9
     "@redux-devtools/utils": ^1.0.0-6
+    "@types/chrome": ^0.0.157
     "@types/jsan": ^3.1.2
+    "@types/lodash": ^4.14.172
+    "@types/react": ^16.14.15
+    "@types/react-dom": ^16.9.13
+    "@types/react-redux": ^7.1.18
+    "@types/styled-components": ^5.1.14
     babel-loader: ^8.2.2
     bestzip: ^2.2.0
     chromedriver: ^93.0.1
@@ -25613,6 +25670,7 @@ fsevents@^1.2.7:
     file-loader: ^6.2.0
     fork-ts-checker-webpack-plugin: ^6.3.3
     gitbook-cli: ^2.3.2
+    immutable: ^4.0.0-rc.14
     jest: ^27.2.0
     jsan: ^3.1.13
     localforage: ^1.10.0
@@ -25623,6 +25681,7 @@ fsevents@^1.2.7:
     react: ^16.14.0
     react-dom: ^16.14.0
     react-icons: ^4.2.0
+    react-is: ^16.13.1
     react-json-tree: ^0.15.0
     react-redux: ^7.2.5
     react-transform-catch-errors: ^1.0.2
@@ -25633,6 +25692,7 @@ fsevents@^1.2.7:
     selenium-webdriver: ^3.6.0
     sinon-chrome: ^3.0.1
     style-loader: ^3.2.1
+    styled-components: ^5.3.1
     ts-jest: ^27.0.5
     typescript: ~4.3.5
     webpack: ^5.52.1
@@ -26021,8 +26081,15 @@ resolve@^2.0.0-next.3:
   version: 0.0.0-use.local
   resolution: "root-workspace-0b6124@workspace:."
   dependencies:
+    "@typescript-eslint/eslint-plugin": ^4.31.1
+    "@typescript-eslint/parser": ^4.31.1
+    eslint: ^7.32.0
+    eslint-config-prettier: ^8.3.0
+    eslint-plugin-jest: ^24.4.0
+    eslint-plugin-react: ^7.25.1
     lerna: ^4.0.0
     prettier: 2.4.1
+    typescript: ~4.3.5
   languageName: unknown
   linkType: soft