Merge branch 'next' into perf/esm-dist

.circleci/config.yml

@@ -1,7 +1,20 @@
 version: 2.1
 
 executors:
-  sb_node:
+  sb_node_10_classic:
+    parameters:
+      class:
+        description: The Resource class
+        type: enum
+        enum: [ 'small', 'medium', 'large', 'xlarge' ]
+        default: 'medium'
+    working_directory: /tmp/storybook
+    docker:
+      - image: circleci/node:10
+        environment:
+          NODE_OPTIONS: --max_old_space_size=4096
+    resource_class: <<parameters.class>>
+  sb_node_10_browsers:
     parameters:
       class:
         description: The Resource class
@@ -14,7 +27,7 @@ executors:
         environment:
           NODE_OPTIONS: --max_old_space_size=4096
     resource_class: <<parameters.class>>
-  sb_node_12:
+  sb_node_12_browsers:
     parameters:
       class:
         description: The Resource class
@@ -28,13 +41,46 @@ executors:
           NODE_OPTIONS: --max_old_space_size=4096
     resource_class: <<parameters.class>>
 
+orbs:
+  git-shallow-clone: guitarrapc/git-shallow-clone@2.0.3
+
+commands:
+  ensure-pr-is-labeled-with:
+    description: 'A command looking for the labels set on the PR associated to this workflow and checking it contains the label given as parameter'
+    parameters:
+      label:
+        type: string
+    steps:
+      - run:
+          name: Check if PR is labeled with "<< parameters.label >>"
+          command: |
+            sudo apt-get install jq
+
+            PR_NUMBER=$(echo "$CIRCLE_PULL_REQUEST" | sed "s/.*\/pull\///")
+            echo "PR_NUMBER: $PR_NUMBER"
+
+            API_GITHUB="https://api.github.com/repos/$CIRCLE_PROJECT_USERNAME/$CIRCLE_PROJECT_REPONAME"
+            PR_REQUEST_URL="$API_GITHUB/pulls/$PR_NUMBER"
+            PR_RESPONSE=$(curl -H "Authorization: token $GITHUB_TOKEN_STORYBOOK_BOT_READ_REPO" "$PR_REQUEST_URL")
+
+
+            if [ $(echo $PR_RESPONSE | jq '.labels | map(select(.name == "<< parameters.label >>")) | length') -ge 1 ] ||
+               ( [ $(echo $PR_RESPONSE | jq '.labels | length') -ge 1 ] && [ "<< parameters.label >>" == "*" ])
+            then
+              echo "🚀 The PR is labelled with '<< parameters.label >>', job will continue!"
+            else
+              echo "🏁 The PR isn't labelled with '<< parameters.label >>' so this job will end at the current step."
+              circleci-agent step halt
+            fi
+
 jobs:
   build:
     executor:
       class: medium
-      name: sb_node
+      name: sb_node_10_classic
     steps:
-      - checkout
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
       - run:
           name: Remove examples
           command: rm -rf examples/
@@ -64,9 +110,10 @@ jobs:
   install-examples-deps:
     executor:
       class: medium
-      name: sb_node
+      name: sb_node_10_classic
     steps:
-      - checkout
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
       - restore_cache:
           name: Restore Yarn cache
           keys:
@@ -87,35 +134,35 @@ jobs:
             - node_modules
   install-e2e-deps:
     executor:
-      class: medium
-      name: sb_node
+      class: small
+      name: sb_node_10_classic
     steps:
-      - checkout
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
       - run:
           name: Keep only root package
           command: rm -rf examples/ && rm -rf addons/ && rm -rf app/ && rm -rf lib/
       - restore_cache:
-          name: Restore Yarn cache
+          name: Restore cached node_modules
           keys:
-            - install-e2e-deps-yarn-cache-v4--{{ checksum "yarn.lock" }}
-            - install-e2e-deps-yarn-cache-v4--
+            - install-e2e-deps-node_modules-cache-v1--{{ checksum "yarn.lock" }}
       - run:
-          name: Install dependencies
-          command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
+          name: Install dependencies if cache wasn't hit
+          command: "[ ! -d \"node_modules/\" ] && yarn install --frozen-lockfile || echo \"Skipping yarn install\""
       - save_cache:
-          name: Save Yarn cache
-          key: install-e2e-deps-yarn-cache-v4--{{ checksum "yarn.lock" }}
+          name: Save node_modules
+          key: install-e2e-deps-node_modules-cache-v1--{{ checksum "yarn.lock" }}
           paths:
-            - ~/.cache/yarn
+            - node_modules
       - persist_to_workspace:
           root: .
           paths:
-            - examples
             - node_modules
   chromatic:
-    executor: sb_node
+    executor: sb_node_10_browsers
     parallelism: 4
     steps:
+      # Keep using default checkout because Chromatic needs some git history to work properly
       - checkout
       - attach_workspace:
           at: .
@@ -126,9 +173,10 @@ jobs:
   packtracker:
     executor:
       class: medium
-      name: sb_node
+      name: sb_node_10_browsers
     steps:
-      - checkout
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
       - attach_workspace:
           at: .
       - run:
@@ -139,10 +187,11 @@ jobs:
   examples:
     executor:
       class: medium
-      name: sb_node
+      name: sb_node_10_browsers
     parallelism: 4
     steps:
-      - checkout
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
       - attach_workspace:
           at: .
       - run:
@@ -156,9 +205,10 @@ jobs:
   publish:
     executor:
       class: medium
-      name: sb_node
+      name: sb_node_10_classic
     steps:
-      - checkout
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
       - attach_workspace:
           at: .
       - run:
@@ -168,14 +218,25 @@ jobs:
           root: .
           paths:
             - .verdaccio-cache
-  examples-v2:
+  e2e-tests:
     executor:
       class: medium
-      name: sb_node
+      name: sb_node_10_browsers
     working_directory: /tmp/storybook
     parallelism: 4
     steps:
-      - checkout
+      - when:
+          condition:
+            and:
+              - not:
+                  equal: [ master, << pipeline.git.branch >> ]
+              - not:
+                  equal: [ next, << pipeline.git.branch >> ]
+          steps:
+            - ensure-pr-is-labeled-with:
+                label: "run e2e extended test suite"
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
       - attach_workspace:
           at: .
       - run:
@@ -200,13 +261,14 @@ jobs:
       - store_artifacts:
           path: /tmp/storybook/cypress
           destination: cypress
-  examples-v2-cra-bench:
+  e2e-tests-cra-bench:
     executor:
       class: medium
-      name: sb_node_12
+      name: sb_node_12_browsers
     working_directory: /tmp/storybook
     steps:
-      - checkout
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
       - attach_workspace:
           at: .
       - run:
@@ -231,13 +293,14 @@ jobs:
       - store_artifacts:
           path: /tmp/storybook/cypress
           destination: cypress
-  examples-v2-yarn-2:
+  e2e-tests-yarn-2:
     executor:
       class: medium
-      name: sb_node
+      name: sb_node_10_browsers
     working_directory: /tmp/storybook
     steps:
-      - checkout
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
       - attach_workspace:
           at: .
       - run:
@@ -262,14 +325,15 @@ jobs:
       - store_artifacts:
           path: /tmp/storybook/cypress
           destination: cypress
-  e2e:
+  e2e-tests-examples:
     working_directory: /tmp/storybook
     docker:
       - image: cypress/included:4.7.0
         environment:
           TERM: xterm
     steps:
-      - checkout
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
       - attach_workspace:
           at: .
       - run:
@@ -281,17 +345,17 @@ jobs:
           command: yarn await-serve-storybooks
       - run:
           name: cypress run
-          command: yarn test:e2e
+          command: yarn test:e2e-examples
       - store_artifacts:
           path: /tmp/storybook/cypress
           destination: cypress
-
   smoke-tests:
     executor:
       class: medium
-      name: sb_node
+      name: sb_node_10_browsers
     steps:
-      - checkout
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
       - attach_workspace:
           at: .
       - run:
@@ -355,9 +419,10 @@ jobs:
             cd examples/cra-react15
             yarn storybook --smoke-test --quiet
   frontpage:
-    executor: sb_node
+    executor: sb_node_10_browsers
     steps:
-      - checkout
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
       - run:
           name: Install dependencies
           command: yarn bootstrap --install
@@ -367,18 +432,20 @@ jobs:
   lint:
     executor:
       class: small
-      name: sb_node
+      name: sb_node_10_classic
     steps:
-      - checkout
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
       - attach_workspace:
           at: .
       - run:
           name: Lint
           command: yarn lint
-  test:
-    executor: sb_node
+  unit-tests:
+    executor: sb_node_10_browsers
     steps:
-      - checkout
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
       - attach_workspace:
           at: .
       - run:
@@ -391,9 +458,10 @@ jobs:
   coverage:
     executor:
       class: small
-      name: sb_node
+      name: sb_node_10_browsers
     steps:
-      - checkout
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
       - attach_workspace:
           at: .
       - run:
@@ -414,7 +482,7 @@ workflows:
           requires:
             - install-examples-deps
             - build
-      - e2e:
+      - e2e-tests-examples:
           requires:
             - examples
       - smoke-tests:
@@ -425,13 +493,13 @@ workflows:
           requires:
             - install-examples-deps
             - build
-      - test:
+      - unit-tests:
           requires:
             - install-examples-deps
             - build
       - coverage:
           requires:
-            - test
+            - unit-tests
       - chromatic:
           requires:
             - examples
@@ -439,14 +507,13 @@ workflows:
           requires:
             - install-e2e-deps
             - build
-      # too slow/expensive. disabling for now
-      # - examples-v2:
-      #     requires:
-      #       - publish
-      - examples-v2-yarn-2:
+      - e2e-tests:
           requires:
             - publish
-      - examples-v2-cra-bench:
+      - e2e-tests-yarn-2:
+          requires:
+            - publish
+      - e2e-tests-cra-bench:
           requires:
             - publish
   deploy:

.github/workflows/tests-cli.yml

@@ -1,37 +0,0 @@
-name: CLI tests
-
-on:
-  push
-  # push:
-# disabled for now:
-# https://github.community/t5/GitHub-Actions/Preserve-status-from-previous-action-run/m-p/33821#M1661
-#     paths:
-#     - 'lib/**'
-#     - 'app/**'
-
-jobs:
-  cli:
-    name: CLI Fixtures
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/setup-node@v1
-      with:
-        node-version: '10.x'
-    - name: increase filewatcher limit
-      run: |
-        echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
-    - uses: actions/checkout@v2
-    - name: Cache node modules
-      uses: actions/cache@v1
-      with:
-        path: node_modules
-        key: build-v2-${{ hashFiles('**/yarn.lock') }}
-        restore-keys: |
-          build-v2-${{ env.cache-name }}-
-          build-v2-
-    - name: install, bootstrap
-      run: |
-        yarn bootstrap --core
-    - name: cli
-      run: |
-        yarn test --cli

.github/workflows/trigger-circle-ci-workflow.yml

@@ -0,0 +1,21 @@
+name: Trigger CircleCI workflow
+
+on:
+  pull_request:
+    types: [labeled]
+
+jobs:
+  trigger:
+    if: github.event.label.name == 'run e2e extended test suite' && github.event.pull_request.head.repo.fork == false
+    name: Run workflow with all e2e tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Make request to CircleCI
+        run: >
+          curl --request POST
+          --url https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline
+          --header 'Circle-Token: '"$CIRCLE_CI_TOKEN"' '
+          --header 'content-type: application/json'
+          --data '{"branch":"${{ github.event.pull_request.head.ref }}"}'
+        env:
+          CIRCLE_CI_TOKEN: ${{ secrets.CIRCLE_CI_TOKEN }}

jest.config.js

@@ -52,7 +52,6 @@ module.exports = {
     '/dist/',
     '/prebuilt/',
     'addon-jest.test.js',
-    '/cli/test/',
     '/app/angular/*',
     '/examples/cra-kitchen-sink/src/*',
     '/examples/cra-react15/src/*',

lib/ui/src/components/sidebar/useExpanded.ts

@@ -81,8 +81,7 @@ export const useExpanded = ({
   );
 
   const getElementByDataItemId = useCallback(
-    (id: string) =>
-      containerRef.current && containerRef.current.querySelector(`[data-item-id="${id}"]`),
+    (id: string) => containerRef.current?.querySelector(`[data-item-id="${id}"]`),
     [containerRef]
   );
 
@@ -98,7 +97,7 @@ export const useExpanded = ({
     ({ ids, value }) => {
       setExpanded({ ids, value });
       if (ids.length === 1) {
-        const element = containerRef.current.querySelector(
+        const element = containerRef.current?.querySelector(
           `[data-item-id="${ids[0]}"][data-ref-id="${refId}"]`
         );
         if (element) highlightElement(element);

lib/ui/src/components/sidebar/useHighlighted.ts

@@ -67,12 +67,12 @@ export const useHighlighted = ({
       const { itemId, refId } = highlight;
       setTimeout(() => {
         scrollIntoView(
-          containerRef.current.querySelector(`[data-item-id="${itemId}"][data-ref-id="${refId}"]`),
+          containerRef.current?.querySelector(`[data-item-id="${itemId}"][data-ref-id="${refId}"]`),
           true // make sure it's clearly visible by centering it
         );
       }, 0);
     }
-  }, [dataset, highlightedRef, selected]);
+  }, [dataset, highlightedRef, containerRef, selected]);
 
   // Highlight nodes up/down the tree using arrow keys
   useEffect(() => {

package.json

@@ -72,9 +72,9 @@
     "start": "yarn --cwd examples/official-storybook storybook",
     "test": "node ./scripts/test.js",
     "test:cli": "npm --prefix lib/cli run test",
-    "test:e2e": "cypress run",
-    "test:e2e-framework": "ts-node --project=./scripts/tsconfig.json ./scripts/run-e2e.ts",
-    "test:e2e-gui": "concurrently --success first --kill-others \"cypress open\" \"yarn serve-storybooks\""
+    "test:e2e-examples": "cypress run",
+    "test:e2e-examples-gui": "concurrently --success first --kill-others \"cypress open\" \"yarn serve-storybooks\"",
+    "test:e2e-framework": "ts-node --project=./scripts/tsconfig.json ./scripts/run-e2e.ts"
   },
   "husky": {
     "hooks": {

scripts/test.js

@@ -57,12 +57,6 @@ const tasks = {
     projectLocation: path.join(__dirname, '..', 'examples/official-storybook/storyshots-puppeteer'),
     isJest: true,
   }),
-  cli: createProject({
-    name: `Command Line Interface ${chalk.gray('(cli)')}`,
-    defaultValue: false,
-    option: '--cli',
-    projectLocation: './lib/cli',
-  }),
   watchmode: createOption({
     name: `Run in watch-mode ${chalk.gray('(watchmode)')}`,
     defaultValue: false,