Make notifications not depend on common (codesandbox#2380)

* Make notifications not depend on common

This greatly simplifies our build setup, recursive dependencies
can go wrong very fast

* Fix topology of dependencies

* Simplify dependency graph

* Deduplicate yarn.lock

* Fix params for tests

* Checkout git with cache

* Remove duplicate checkout

Author: CompuIves

.circleci/config.yml

@@ -129,6 +129,21 @@ executors:
 ################################
 
 commands:
+  checkout_with_cache:
+    description: 'Checkout git with a cache'
+    steps:
+      - restore_cache:
+          keys:
+            - v27-source-cache-{{ .Branch }}-{{ .Revision }}
+            - v27-source-cache-{{ .Branch }}-
+            - v27-source-cache-
+
+      - checkout
+
+      - save_cache:
+          key: v27-source-cache-{{ .Branch }}-{{ .Revision }}
+          paths:
+            - '.git'
   build_deps:
     description: 'Install Dependencies with `yarn install`'
     steps:
@@ -146,7 +161,6 @@ commands:
   build_prod:
     description: 'Build the Application with `yarn build:prod`'
     steps:
-      - checkout
       - restore_cache: *restore_deps_cache
       - attach_workspace: *attach_deps_workspace
       - restore_cache: *restore_prod_homepage_cache
@@ -173,7 +187,6 @@ commands:
     description:
       "Test Integrations with `yarn start:test` & 'yarn test:integrations'"
     steps:
-      - checkout
       - restore_cache: *restore_deps_cache
       - attach_workspace: *attach_deps_workspace
       - run:
@@ -199,18 +212,16 @@ commands:
   test_jest:
     description: 'Test with `yarn test`'
     steps:
-      - checkout
       - restore_cache: *restore_deps_cache
       - attach_workspace: *attach_deps_workspace
       - run:
           name: Test
-          command: yarn test --ci --testResultsProcessor="jest-junit"
+          command: yarn test:ci
           environment:
             JEST_JUNIT_OUTPUT: 'reports/junit/js-tests-results.xml'
   yarn_lint:
     description: 'Lint with `yarn lint`'
     steps:
-      - checkout
       - restore_cache: *restore_deps_cache
       - attach_workspace: *attach_deps_workspace
       - run:
@@ -219,7 +230,6 @@ commands:
   yarn_typecheck:
     description: 'Lint with `yarn typecheck`'
     steps:
-      - checkout
       - restore_cache: *restore_deps_cache
       - attach_workspace: *attach_deps_workspace
       - run:
@@ -260,32 +270,32 @@ jobs:
   build-deps:
     executor: node
     steps:
-      - checkout
+      - checkout_with_cache
       - build_deps
   build-prod:
     executor: node
     steps:
-      - checkout
+      - checkout_with_cache
       - build_prod
   test-integrations:
     executor: node-with-puppeteer
     steps:
-      - checkout
+      - checkout_with_cache
       - test_integrations
   test-jest:
     executor: node
     steps:
-      - checkout
+      - checkout_with_cache
       - test_jest
   lint:
     executor: node
     steps:
-      - checkout
+      - checkout_with_cache
       - yarn_lint
   typecheck:
     executor: node
     steps:
-      - checkout
+      - checkout_with_cache
       - yarn_typecheck
   create-docker-image:
     executor: docker_machine

.eslintrc

@@ -93,7 +93,9 @@
           { "args": "none", "ignoreRestSiblings": true }
         ],
         "no-useless-constructor": "off",
-        "@typescript-eslint/no-useless-constructor": "warn"
+        "@typescript-eslint/no-useless-constructor": "warn",
+        "import/extensions": 0,
+        "import/no-unresolved": 0
       }
     }
   ]

package.json

@@ -12,7 +12,7 @@
     "build:prod": "cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" lerna run build  --scope homepage --stream && lerna run build --scope app --stream && lerna run copy-assets --scope app --stream",
     "build:embed": "lerna run build:embed --scope app --stream && gulp",
     "build:clean": "lerna run build:clean --scope app --scope homepage && rimraf www",
-    "build:deps": "lerna run build:dev --scope codesandbox-api --scope @codesandbox/notifications --scope @codesandbox/executors && lerna run build:dev --scope @codesandbox/common && lerna run build:dev --scope vscode-textmate --scope codesandbox-browserfs --scope node-services && lerna run build:dev --scope sse-hooks && lerna run build --scope codesandbox-deps",
+    "build:deps": "lerna run build:dev",
     "build:common": "lerna run build:dev --scope @codesandbox/common --stream",
     "build:dynamic": "lerna run build --scope dynamic-pages --stream",
     "start": "yarn build:deps && lerna run start --scope @codesandbox/common --scope app --parallel",
@@ -27,6 +27,7 @@
     "start:storybook": "lerna run start:storybook --scope=@codesandbox/common --stream",
     "start:dev_api": "lerna run start:dev_api --scope app --stream",
     "test": "lerna run test --ignore codesandbox-browserfs",
+    "test:ci": "lerna run test --ignore codesandbox-browserfs -- --ci --testResultsProcessor=\"jest-junit\" ",
     "test:integrations": "lerna exec --scope app --stream -- yarn test:integrations",
     "test:jest-lite": "lerna exec --scope app --stream -- yarn run test jest-lite --watch --coverage",
     "now-build": "yarn build:deps && lerna run build:storybook --scope @codesandbox/common",
@@ -59,11 +60,7 @@
       "codesandbox-deps/tern"
     ]
   },
-  "resolutions": {
-    "react-split-pane/react-dom": "^16.8.6"
-  },
   "devDependencies": {
-    "@types/react": "^16.8.12",
     "all-contributors-cli": "^5.4.0",
     "babel-eslint": "^10.0.2",
     "concurrently": "^4.1.0",
@@ -77,10 +74,9 @@
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "~7.4.0",
     "eslint-plugin-react-hooks": "^1.6.0",
-    "flow-bin": "^0.72.0",
     "gulp": "^3.9.1",
     "husky": "^2.2.0",
-    "lerna": "^2.5.1",
+    "lerna": "^3.16.4",
     "prettier": "1.17.0",
     "pretty-quick": "^1.10.0",
     "typescript": "3.5.3"

packages/app/package.json

@@ -79,7 +79,6 @@
     "express": "^4.15.3",
     "file-loader": "^1.1.11",
     "filesize": "^3.5.6",
-    "flow-bin": "^0.57.3",
     "fs-extra": "^8.0.1",
     "gulp-replace": "^0.5.4",
     "gzip-size": "3.0.0",

packages/app/src/app/pages/index.tsx

@@ -2,9 +2,11 @@ import React, { useEffect } from 'react';
 import { Route, Switch, Redirect, withRouter } from 'react-router-dom';
 import { DragDropContext } from 'react-dnd';
 import _debug from '@codesandbox/common/lib/utils/debug';
-import { Toasts } from '@codesandbox/notifications';
+import { Toasts, NotificationStatus } from '@codesandbox/notifications';
 import { notificationState } from '@codesandbox/common/lib/utils/notifications';
 import send, { DNT } from '@codesandbox/common/lib/utils/analytics';
+import theme from '@codesandbox/common/lib/theme';
+import { Button } from '@codesandbox/common/lib/components/Button';
 import Loadable from 'app/utils/Loadable';
 import { inject, hooksObserver } from 'app/componentConnectors';
 import { ErrorBoundary } from './common/ErrorBoundary';
@@ -78,7 +80,16 @@ const RoutesComponent = ({ signals: { appUnmounted } }) => {
           return null;
         }}
       />
-      <Toasts state={notificationState} />
+      <Toasts
+        colors={{
+          [NotificationStatus.ERROR]: theme.dangerBackground(),
+          [NotificationStatus.SUCCESS]: theme.green(),
+          [NotificationStatus.NOTICE]: theme.secondary(),
+          [NotificationStatus.WARNING]: theme.primary(),
+        }}
+        state={notificationState}
+        Button={Button}
+      />
       <Boundary>
         <Content>
           <Switch>

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codesandbox/common",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "repository": {
     "type": "git",
     "url": "https://github.com/codesandbox/codesandbox-client",
@@ -17,15 +17,15 @@
     "start:storybook": "start-storybook",
     "build:storybook": "build-storybook -c .storybook -o public",
     "build:lib": "yarn clean && yarn tsc && yarn babel src --out-dir lib && yarn cpx \"src/**/*.{css,svg,png,jpg}\" lib",
-    "build": "yarn build:lib && yarn build:storybook",
+    "build": "yarn build:lib",
     "build:dev": "yarn build",
     "prepublish": "yarn build",
     "lint": "eslint --ext .js,.ts,.tsx src"
   },
   "dependencies": {
     "@babel/plugin-transform-flow-strip-types": "^7.0.0",
     "@babel/polyfill": "^7.4.4",
-    "@codesandbox/notifications": "^1.0.3",
+    "@codesandbox/notifications": "^1.0.6",
     "@codesandbox/template-icons": "^0.7.1",
     "@sentry/browser": "^5.6.2",
     "@tippy.js/react": "^2.1.1",
@@ -61,7 +61,6 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-async-to-generator": "^7.5.0",
     "@babel/plugin-transform-runtime": "^7.5.5",
-    "@codesandbox/template-icons": "^0.7.0",
     "@storybook/addon-a11y": "^5.1.11",
     "@storybook/addon-actions": "^5.1.9",
     "@storybook/addon-knobs": "^5.1.9",

packages/deps/package.json

@@ -11,6 +11,7 @@
   "main": "dist/index.js",
   "scripts": {
     "build": "yarn build:clean && yarn build:rollup",
+    "build:dev": "yarn build",
     "build:clean": "rimraf dist",
     "build:rollup": "rollup -c"
   },

packages/dynamic-pages/package.json

@@ -15,7 +15,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@codesandbox/common": "^1.0.6",
+    "@codesandbox/common": "^1.0.8",
     "@zeit/next-css": "^1.0.1",
     "airtable": "^0.5.9",
     "date-fns": "^1.30.1",

packages/executors/package.json

@@ -41,7 +41,7 @@
     "typescript": "^3.5.1"
   },
   "dependencies": {
-    "@codesandbox/common": "^1.0.6",
+    "@codesandbox/common": "^1.0.8",
     "codesandbox-api": "^0.0.22",
     "debug": "^4.1.1",
     "socket.io-client": "^2.2.0"

packages/homepage/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@babel/preset-flow": "^7.0.0",
-    "@codesandbox/common": "^1.0.6",
+    "@codesandbox/common": "^1.0.8",
     "algoliasearch": "^3.24.5",
     "babel-plugin-macros": "^2.4.2",
     "babel-preset-gatsby": "^0.2.8",