Build: Move monorepo to Yarn 2

.circleci/config.yml

@@ -1,7 +1,7 @@
 version: 2.1
 
 executors:
-  sb_node_10_classic:
+  sb_node_12_classic:
     parameters:
       class:
         description: The Resource class
@@ -10,20 +10,7 @@ executors:
         default: 'medium'
     working_directory: /tmp/storybook
     docker:
-      - image: circleci/node:10
-        environment:
-          NODE_OPTIONS: --max_old_space_size=3076
-    resource_class: <<parameters.class>>
-  sb_node_10_browsers:
-    parameters:
-      class:
-        description: The Resource class
-        type: enum
-        enum: ['small', 'medium', 'large', 'xlarge']
-        default: 'medium'
-    working_directory: /tmp/storybook
-    docker:
-      - image: circleci/node:10-browsers
+      - image: circleci/node:12
         environment:
           NODE_OPTIONS: --max_old_space_size=3076
     resource_class: <<parameters.class>>
@@ -77,25 +64,25 @@ jobs:
   build:
     executor:
       class: large
-      name: sb_node_10_classic
+      name: sb_node_12_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
       - restore_cache:
           name: Restore Yarn cache
           keys:
-            - build-yarn-cache-v4--{{ checksum "yarn.lock" }}
+            - build-yarn-2-cache-v1--{{ checksum "yarn.lock" }}
       - run:
           name: Install dependencies
-          command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
+          command: yarn install --immutable
       - run:
           name: Bootstrap
           command: yarn bootstrap --core
       - save_cache:
           name: Save Yarn cache
-          key: build-yarn-cache-v4--{{ checksum "yarn.lock" }}
+          key: build-yarn-2-cache-v1--{{ checksum "yarn.lock" }}
           paths:
-            - ~/.cache/yarn
+            - ~/.yarn/berry/cache
       - persist_to_workspace:
           root: .
           paths:
@@ -106,7 +93,7 @@ jobs:
             - app
             - lib
   chromatic:
-    executor: sb_node_10_browsers
+    executor: sb_node_12_browsers
     parallelism: 4
     steps:
       # Keep using default checkout because Chromatic needs some git history to work properly
@@ -120,7 +107,7 @@ jobs:
   packtracker:
     executor:
       class: medium
-      name: sb_node_10_browsers
+      name: sb_node_12_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -134,7 +121,7 @@ jobs:
   examples:
     executor:
       class: medium
-      name: sb_node_10_browsers
+      name: sb_node_12_browsers
     parallelism: 4
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -152,7 +139,7 @@ jobs:
   publish:
     executor:
       class: medium
-      name: sb_node_10_classic
+      name: sb_node_12_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -168,7 +155,7 @@ jobs:
   e2e-tests-node-10:
     executor:
       class: medium
-      name: sb_node_10_browsers
+      name: sb_node_12_browsers
     working_directory: /tmp/storybook
     parallelism: 4
     steps:
@@ -195,16 +182,16 @@ jobs:
           command: yarn wait-on http://localhost:6000
       - run:
           name: set registry
-          command: yarn config set registry http://localhost:6000/
+          command: yarn config set npmRegistryServer http://localhost:6000/
       - run:
           name: test local registry
-          command: yarn info @storybook/core
+          command: yarn npm info @storybook/core
       - run:
           name: Install Cypress binary
           command: yarn cypress install
       - run:
           name: run e2e tests
-          command: yarn test:e2e-framework --skip preact
+          command: yarn test:e2e-framework --clean --skip preact
       - store_artifacts:
           path: /tmp/storybook/cypress
           destination: cypress
@@ -237,10 +224,10 @@ jobs:
           command: yarn wait-on http://localhost:6000
       - run:
           name: Set registry
-          command: yarn config set registry http://localhost:6000/
+          command: yarn config set npmRegistryServer http://localhost:6000/
       - run:
           name: Test local registry
-          command: yarn info @storybook/core
+          command: yarn npm info @storybook/core
       - run:
           name: Install Cypress binary
           command: yarn cypress install
@@ -269,10 +256,10 @@ jobs:
           command: yarn wait-on http://localhost:6000
       - run:
           name: Set registry
-          command: yarn config set registry http://localhost:6000/
+          command: yarn config set npmRegistryServer http://localhost:6000/
       - run:
           name: Test local registry
-          command: yarn info @storybook/core
+          command: yarn npm info @storybook/core
       - run:
           name: Install Cypress binary
           command: yarn cypress install
@@ -285,7 +272,7 @@ jobs:
   e2e-tests-yarn-2-pnp:
     executor:
       class: medium
-      name: sb_node_10_browsers
+      name: sb_node_12_browsers
     working_directory: /tmp/storybook
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -301,10 +288,10 @@ jobs:
           command: yarn wait-on http://localhost:6000
       - run:
           name: set registry
-          command: yarn config set registry http://localhost:6000/
+          command: yarn config set npmRegistryServer http://localhost:6000/
       - run:
           name: test local registry
-          command: yarn info @storybook/core
+          command: yarn npm info @storybook/core
       - run:
           name: Install Cypress binary
           command: yarn cypress install
@@ -341,7 +328,11 @@ jobs:
   smoke-tests:
     executor:
       class: medium
-      name: sb_node_10_browsers
+      name: sb_node_12_browsers
+    environment:
+      # Disable ESLint when running smoke tests to improve perf + As of CRA 4.0.3, CRA kitchen sinks are throwing
+      # because of some ESLint warnings, related to: https://github.com/facebook/create-react-app/pull/10590
+      DISABLE_ESLINT_PLUGIN: 'true'
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -408,20 +399,20 @@ jobs:
             cd examples/cra-react15
             yarn storybook --smoke-test --quiet
   frontpage:
-    executor: sb_node_10_browsers
+    executor: sb_node_12_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
       - run:
           name: Install dependencies
-          command: yarn bootstrap --install
+          command: yarn install --immutable
       - run:
           name: Trigger build
           command: ./scripts/build-frontpage.js
   lint:
     executor:
       class: small
-      name: sb_node_10_classic
+      name: sb_node_12_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -431,7 +422,7 @@ jobs:
           name: Lint
           command: yarn lint
   unit-tests:
-    executor: sb_node_10_browsers
+    executor: sb_node_12_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -447,7 +438,7 @@ jobs:
   coverage:
     executor:
       class: small
-      name: sb_node_10_browsers
+      name: sb_node_12_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'

.github/workflows/tests-unit.yml

@@ -9,15 +9,16 @@ jobs:
     steps:
     - uses: actions/setup-node@v1
       with:
-        node-version: '10.x'
+        node-version: '12.x'
     - uses: actions/checkout@v2
     - name: Cache node modules
       uses: actions/cache@v2
       with:
         path: node_modules
-        key: build-v2-${{ hashFiles('**/yarn.lock') }}
+        key: yarn-2-cache-v1-${{ hashFiles('**/yarn.lock') }}
     - name: install, bootstrap
       run: |
+        yarn install --immutable
         yarn bootstrap --core
     - name: test
       run: |

.gitignore

@@ -33,3 +33,11 @@ examples/ember-cli/ember-output
 tsconfig.tsbuildinfo
 lib/core-server/prebuilt
 examples/angular-cli/addon-jest.testresults.json
+
+# Yarn stuff
+/.yarn/*
+!/.yarn/releases
+!/.yarn/plugins
+!/.yarn/sdks
+!/.yarn/versions
+/.pnp.*

.yarnrc.yml

@@ -0,0 +1,12 @@
+compressionLevel: 0
+
+enableGlobalCache: true
+
+nodeLinker: node-modules
+
+npmRegistryServer: "https://registry.yarnpkg.com"
+
+unsafeHttpWhitelist:
+  - localhost
+
+yarnPath: .yarn/releases/yarn-sources.cjs

addons/docs/src/frameworks/angular/angular-properties.test.ts

@@ -16,7 +16,7 @@ const runCompodoc = (inputPath: string) => {
   // FIXME: for now, this requires a tsconfig.json for each test case. Tried generating
   // one dynamically in tmpDir, but compodoc doesn't handle absolute paths properly
   // (and screwed around with relative paths as well, but couldn't get it working)
-  spawnSync('compodoc', ['-p', `${testDir}/tsconfig.json`, '-e', 'json', '-d', tmpDir], {
+  spawnSync('yarn', ['compodoc', '-p', `${testDir}/tsconfig.json`, '-e', 'json', '-d', tmpDir], {
     stdio: 'inherit',
   });
   const output = fs.readFileSync(`${tmpDir}/documentation.json`, 'utf8');

addons/docs/src/frameworks/web-components/web-components-properties.test.ts

@@ -11,7 +11,7 @@ const inputRegExp = /^input\..*$/;
 const runWebComponentsAnalyzer = (inputPath: string) => {
   const { name: tmpDir, removeCallback } = tmp.dirSync();
   const customElementsFile = `${tmpDir}/custom-elements.json`;
-  spawnSync('wca', ['analyze', inputPath, '--outFile', customElementsFile], {
+  spawnSync('yarn', ['wca', 'analyze', inputPath, '--outFile', customElementsFile], {
     stdio: 'inherit',
   });
   const output = fs.readFileSync(customElementsFile, 'utf8');

examples/angular-cli/package.json

@@ -5,14 +5,13 @@
   "license": "MIT",
   "scripts": {
     "build": "ng build",
-    "prebuild-storybook": "yarn storybook:prebuild",
-    "build-storybook": "build-storybook -s src/assets",
+    "build-storybook": "yarn storybook-prebuild && build-storybook -s src/assets",
     "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
     "e2e": "ng e2e",
     "ng": "ng",
     "start": "ng serve",
-    "storybook": "yarn storybook:prebuild && start-storybook -p 9008 -s src/assets",
-    "storybook:prebuild": "yarn test:generate-output && yarn docs:json",
+    "storybook": "yarn storybook-prebuild && start-storybook -p 9008 -s src/assets",
+    "storybook-prebuild": "yarn test:generate-output && yarn docs:json",
     "test": "jest",
     "test:coverage": "jest --coverage",
     "test:generate-output": "jest --json --config=jest.addon-config.js --outputFile=addon-jest.testresults.json || true",

examples/cra-kitchen-sink/package.json

@@ -32,7 +32,7 @@
     "@storybook/addon-storyshots": "6.2.5",
     "@storybook/addons": "6.2.5",
     "@storybook/builder-webpack4": "6.2.5",
-    "@storybook/preset-create-react-app": "^3.1.6-alpha.0",
+    "@storybook/preset-create-react-app": "^3.1.6",
     "@storybook/react": "6.2.5",
     "@storybook/theming": "6.2.5",
     "webpack": "4"

examples/cra-react15/package.json

@@ -22,7 +22,7 @@
     "@storybook/addon-links": "6.2.5",
     "@storybook/addons": "6.2.5",
     "@storybook/builder-webpack4": "6.2.5",
-    "@storybook/preset-create-react-app": "^3.1.6-alpha.0",
+    "@storybook/preset-create-react-app": "^3.1.6",
     "@storybook/react": "6.2.5",
     "@storybook/theming": "6.2.5",
     "babel-core": "6",

examples/cra-ts-essentials/package.json

@@ -37,7 +37,7 @@
     "@storybook/addon-essentials": "6.2.5",
     "@storybook/addons": "6.2.5",
     "@storybook/builder-webpack4": "6.2.5",
-    "@storybook/preset-create-react-app": "^3.1.6-alpha.0",
+    "@storybook/preset-create-react-app": "^3.1.6",
     "@storybook/react": "6.2.5",
     "webpack": "4"
   },

examples/cra-ts-kitchen-sink/package.json

@@ -41,7 +41,7 @@
     "@storybook/addon-links": "6.2.5",
     "@storybook/addons": "6.2.5",
     "@storybook/builder-webpack4": "6.2.5",
-    "@storybook/preset-create-react-app": "^3.1.6-alpha.0",
+    "@storybook/preset-create-react-app": "^3.1.6",
     "@storybook/react": "6.2.5",
     "@types/enzyme": "^3.10.8",
     "enzyme": "^3.11.0",

examples/ember-cli/package.json

@@ -4,10 +4,10 @@
   "private": true,
   "scripts": {
     "build": "ember build --output-path ember-output",
-    "prebuild-storybook": "yarn build && shx cp -r public/* ember-output",
-    "build-storybook": "build-storybook -s ember-output",
+    "build-storybook": "yarn storybook-prebuild && build-storybook -s ember-output",
     "dev": "ember serve",
     "storybook": "yarn build && start-storybook -p 9009 -s ember-output",
+    "storybook-prebuild": "yarn build && shx cp -r public/* ember-output",
     "storybook:dev": "yarn dev & start-storybook -p 9009 -s ember-output"
   },
   "dependencies": {

lib/builder-webpack4/package.json

@@ -97,7 +97,7 @@
     "react-dev-utils": "^11.0.3",
     "stable": "^0.1.8",
     "style-loader": "^1.3.0",
-    "terser-webpack-plugin": "^3.1.0",
+    "terser-webpack-plugin": "^4.2.3",
     "ts-dedent": "^2.0.0",
     "url-loader": "^4.1.1",
     "util-deprecate": "^1.0.2",

lib/builder-webpack5/src/preview/iframe-webpack.config.ts

@@ -228,7 +228,9 @@ export default async ({
                 mangle: false,
                 keep_fnames: true,
               },
-            }),
+              // It looks like the types from `@types/terser-webpack-plugin` are not matching the latest version of
+              // Webpack yet
+            }) as any,
           ]
         : [],
     },

lib/cli-sb/package.json

@@ -15,9 +15,7 @@
     "directory": "lib/cli"
   },
   "license": "MIT",
-  "bin": {
-    "sb": "./index.js"
-  },
+  "bin": "./index.js",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },

lib/core-server/package.json

@@ -84,7 +84,7 @@
     "serve-favicon": "^2.5.0",
     "style-loader": "^1.3.0",
     "telejson": "^5.1.0",
-    "terser-webpack-plugin": "^3.1.0",
+    "terser-webpack-plugin": "^4.2.3",
     "ts-dedent": "^2.0.0",
     "url-loader": "^4.1.1",
     "util-deprecate": "^1.0.2",