.babelrc.js

@@ -6,7 +6,7 @@ const withTests = {
     ],
   ],
   plugins: [
-    'babel-plugin-require-context-hook',
+    '@storybook/babel-plugin-require-context-hook',
     'babel-plugin-dynamic-import-node',
     '@babel/plugin-transform-runtime',
   ],

.circleci/config.yml

@@ -27,7 +27,7 @@ executors:
         environment:
           NODE_OPTIONS: --max_old_space_size=3076
     resource_class: <<parameters.class>>
-  sb_cypress_6_node_12:
+  sb_cypress_8_node_14:
     parameters:
       class:
         description: The Resource class
@@ -37,8 +37,8 @@ executors:
     working_directory: /tmp/storybook
     docker:
       # ⚠️ The Cypress docker image is based on Node.js one so be careful when updating it because it can also
-      # cause an upgrade of the Node.
-      - image: cypress/included:6.8.0
+      # cause an upgrade of Node.js version too. Cypress 8.5 image is based on Node.js 14
+      - image: cypress/included:8.7.0
         environment:
           NODE_OPTIONS: --max_old_space_size=3076
     resource_class: <<parameters.class>>
@@ -145,7 +145,7 @@ jobs:
       - run:
           name: examples
           command: |
-            yarn build-storybooks
+            yarn build-storybooks --all
       - persist_to_workspace:
           root: .
           paths:
@@ -169,7 +169,7 @@ jobs:
   e2e-tests-extended:
     executor:
       class: medium
-      name: sb_cypress_6_node_12
+      name: sb_cypress_8_node_14
     parallelism: 4
     steps:
       - when:
@@ -195,15 +195,15 @@ jobs:
           command: yarn wait-on http://localhost:6000
       - run:
           name: Run E2E tests
-          command: yarn test:e2e-framework --clean --all --skip angular11 --skip angular --skip vue3 --skip web_components_typescript --skip cra
+          command: yarn test:e2e-framework --clean --all --skip angular11 --skip angular --skip angular12 --skip vue3 --skip web_components_typescript --skip cra
           no_output_timeout: 5m
       - store_artifacts:
-          path: /tmp/storybook/cypress
+          path: /tmp/cypress-record
           destination: cypress
   e2e-tests-core:
     executor:
-      class: medium
-      name: sb_cypress_6_node_12
+      class: large
+      name: sb_cypress_8_node_14
     parallelism: 2
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -221,15 +221,16 @@ jobs:
           name: Run E2E tests
           # Do not test CRA here because it's done in PnP part
           # TODO: Remove `web_components_typescript` as soon as Lit 2 stable is released
-          command: yarn test:e2e-framework vue3 angular angular11 web_components_typescript web_components_lit2
+          # TODO: Add `angular` as soon as Storybook is compatible with Angular 13
+          command: yarn test:e2e-framework vue3 angular12 angular11 web_components_typescript web_components_lit2
           no_output_timeout: 5m
       - store_artifacts:
-          path: /tmp/storybook/cypress
+          path: /tmp/cypress-record
           destination: cypress
   cra-bench:
     executor:
       class: medium
-      name: sb_cypress_6_node_12
+      name: sb_cypress_8_node_14
     working_directory: /tmp/storybook
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -253,7 +254,7 @@ jobs:
   e2e-tests-pnp:
     executor:
       class: medium
-      name: sb_cypress_6_node_12
+      name: sb_cypress_8_node_14
     working_directory: /tmp/storybook
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -271,12 +272,12 @@ jobs:
           name: run e2e tests
           command: yarn test:e2e-framework --pnp sfcVue cra
       - store_artifacts:
-          path: /tmp/storybook/cypress
+          path: /tmp/cypress-record
           destination: cypress
   e2e-tests-examples:
     executor:
       class: small
-      name: sb_cypress_6_node_12
+      name: sb_cypress_8_node_14
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -293,7 +294,7 @@ jobs:
           name: cypress run
           command: yarn test:e2e-examples
       - store_artifacts:
-          path: /tmp/storybook/cypress
+          path: /tmp/cypress-record
           destination: cypress
   smoke-tests:
     executor:
@@ -353,17 +354,6 @@ jobs:
           command: |
             cd examples/cra-react15
             yarn storybook --smoke-test --quiet
-  frontpage:
-    executor: sb_node_12_browsers
-    steps:
-      - git-shallow-clone/checkout_advanced:
-          clone_options: '--depth 1 --verbose'
-      - run:
-          name: Install dependencies
-          command: yarn install --immutable
-      - run:
-          name: Trigger build
-          command: ./scripts/build-frontpage.js
   lint:
     executor:
       class: small
@@ -446,6 +436,3 @@ workflows:
       - cra-bench:
           requires:
             - publish
-  deploy:
-    jobs:
-      - frontpage

.eslintignore

@@ -13,6 +13,7 @@ lib/core-server/prebuilt
 lib/codemod/src/transforms/__testfixtures__
 lib/components/src/controls/react-editable-json-tree
 scripts/storage
+scripts/repros-generator
 *.bundle.js
 *.js.map
 *.d.ts

.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   root: true,
-  extends: ['@storybook/eslint-config-storybook'],
+  extends: ['@storybook/eslint-config-storybook', 'plugin:storybook/recommended'],
   rules: {
     '@typescript-eslint/ban-ts-comment': 'warn',
   },

.github/PULL_REQUEST_TEMPLATE.md

@@ -4,9 +4,9 @@ Issue:
 
 ## How to test
 
-- Is this testable with Jest or Chromatic screenshots?
-- Does this need a new example in the kitchen sink apps?
-- Does this need an update to the documentation?
+- [ ] Is this testable with Jest or Chromatic screenshots?
+- [ ] Does this need a new example in the kitchen sink apps?
+- [ ] Does this need an update to the documentation?
 
 If your answer is yes to any of these, please make sure to include it in your PR.
 

.github/workflows/generate-repros.yml

@@ -0,0 +1,28 @@
+name: Generate And Push Repros
+
+on:
+  schedule:
+    - cron: '2 2 */1 * *'
+  workflow_dispatch:
+# To remove when the branch will be merged
+  push:
+    branches:
+      - generate-repros
+
+jobs:
+  update:
+    runs-on: ubuntu-latest
+    env:
+      YARN_ENABLE_IMMUTABLE_INSTALLS: false
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup git user
+        run: |
+          git config --global user.name "Storybook Bot"
+          git config --global user.email "bot@storybook.js.org"
+      - name: Install dependencies
+        run: yarn install
+      - name: Generate repros with Latest Storybook CLI
+        run: yarn generate-repros --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/repro-templates.git --push --force-push
+      - name: Generate repros with Next Storybook CLI
+        run: yarn generate-repros --next --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/repro-templates.git --push --force-push

.github/workflows/handle-release-branches.yml

@@ -0,0 +1,99 @@
+name: Handle Release Branches
+
+on:
+  push:
+
+jobs:
+  branch-checks:
+    runs-on: ubuntu-latest
+    steps:
+      - id: get-branch
+        run: |
+          BRANCH=($(echo ${{ github.ref }} | sed -E 's/refs\/heads\///'))
+          echo "branch=$BRANCH" >> $GITHUB_ENV
+    outputs:
+      branch: ${{ env.branch }}
+      is-latest-branch: ${{ env.branch == 'main' }}
+      is-next-branch: ${{ env.branch == 'next' }}
+      is-release-branch: ${{ startsWith(env.branch, 'release-') }}
+      is-actionable-branch: ${{ env.branch == 'main' || env.branch == 'next' || startsWith(env.branch, 'release-') }}
+
+  handle-latest:
+    needs: branch-checks
+    if: ${{ needs.branch-checks.outputs.is-latest-branch == 'true' }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - run: curl -X POST "https://api.netlify.com/build_hooks/${{ secrets.FRONTPAGE_HOOK }}"
+
+  get-next-release-branch:
+    needs: branch-checks
+    if: ${{ needs.branch-checks.outputs.is-next-branch == 'true' || needs.branch-checks.outputs.is-release-branch == 'true' }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          ref: next
+          path: next
+
+      - id: next-version
+        uses: notiz-dev/github-action-json-property@release
+        with:
+          path: ${{ github.workspace }}/next/docs/versions/next.json
+          prop_path: version
+
+      - run: |
+          NEXT_RELEASE_BRANCH=($(echo ${{ steps.next-version.outputs.prop }} | sed -E 's/([0-9]+)\.([0-9]+).*/release-\1-\2/'))
+          echo "next-release-branch=$NEXT_RELEASE_BRANCH" >> $GITHUB_ENV
+    outputs:
+      branch: ${{ env.next-release-branch }}
+
+  create-next-release-branch:
+    needs: [branch-checks, get-next-release-branch]
+    if: ${{ needs.branch-checks.outputs.is-next-branch == 'true' }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - run: |
+          set +e
+          REMOTE_BRANCH=$(git branch -r | grep origin/${{ needs.get-next-release-branch.outputs.branch }})
+          if [[ ! -z $REMOTE_BRANCH ]]; then git push origin --delete ${{ needs.get-next-release-branch.outputs.branch }}; fi
+          echo 'Pushing branch ${{ needs.get-next-release-branch.outputs.branch }}...'
+          git push -f origin ${{ needs.branch-checks.outputs.branch }}:${{ needs.get-next-release-branch.outputs.branch }}
+    outputs:
+      branch: ${{ needs.get-next-release-branch.outputs.branch }}
+
+  next-release-branch-check:
+    if: ${{ always() }}
+    needs: [branch-checks, get-next-release-branch]
+    runs-on: ubuntu-latest
+    steps:
+      - run: |
+          IS_NEXT_RELEASE_BRANCH=${{ needs.branch-checks.outputs.branch == needs.get-next-release-branch.outputs.branch }}
+          echo "is-next-release-branch=$IS_NEXT_RELEASE_BRANCH" >> $GITHUB_ENV
+
+      - if: ${{ env.is-next-release-branch == 'true' }}
+        run: echo "relevant-base-branch=next" >> $GITHUB_ENV
+
+      - if: ${{ env.is-next-release-branch == 'true' }}
+        run: |
+          echo 'WARNING: Do not push directly to the `${{ needs.branch-checks.outputs.branch }}` branch. This branch is created and force-pushed over after pushing to the `${{ env.relevant-base-branch }}` branch and the changes you just pushed will be lost.'
+          exit 1
+    outputs:
+      check: ${{ env.is-next-release-branch }}
+
+  request-create-frontpage-branch:
+    if: ${{ always() }}
+    needs: [branch-checks, next-release-branch-check, create-next-release-branch]
+    runs-on: ubuntu-latest
+    steps:
+      - if: ${{ needs.branch-checks.outputs.is-actionable-branch == 'true' && needs.branch-checks.outputs.is-latest-branch == 'false' && needs.next-release-branch-check.outputs.check == 'false' }}
+        run: |
+          curl -X POST https://api.github.com/repos/storybookjs/frontpage/dispatches \
+          -H 'Accept: application/vnd.github.v3+json' \
+          -u ${{ secrets.FRONTPAGE_ACCESS_TOKEN }} \
+          --data '{"event_type": "request-create-frontpage-branch", "client_payload": { "branch": "${{ needs.create-next-release-branch.outputs.branch || needs.branch-checks.outputs.branch }}" }}'

.github/workflows/linear-export.yml

@@ -0,0 +1,27 @@
+name: Export to linear
+
+on:
+  issues:
+    types: [labeled]
+  pull_request:
+    types: [labeled]
+
+jobs:
+  trigger:
+    if: github.event.label.name == 'linear'
+    name: Export to linear
+    runs-on: ubuntu-latest
+    steps:
+      # - uses: hmarr/debug-action@v2
+      - name: Linear action
+        uses: shilman/linear-action@v1
+        with:
+          ghIssueNumber: ${{ github.event.number || github.event.issue.number }}
+          ghRepoOwner: ${{ github.event.repository.owner.login }}
+          ghRepoName: ${{ github.event.repository.name }}
+          ghToken: ${{ secrets.LINEAR_GH_TOKEN }}
+          linearIssuePrefix: SB
+          linearLabel: Storybook
+          linearPRLabel: PR
+          linearTeam: CH
+          linearApiKey: ${{ secrets.LINEAR_API_KEY }}

.github/workflows/tests-unit.yml

@@ -7,19 +7,15 @@ jobs:
     name: Core Unit Tests
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/setup-node@v1
-      with:
-        node-version: '12.x'
-    - uses: actions/checkout@v2
-    - name: Cache node modules
-      uses: actions/cache@v2
-      with:
-        path: node_modules
-        key: yarn-2-cache-v1-${{ hashFiles('**/yarn.lock') }}
-    - name: install, bootstrap
-      run: |
-        yarn install --immutable
-        yarn bootstrap --core
-    - name: test
-      run: |
-        yarn test --runInBand --ci
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "12.x"
+          cache: yarn
+      - name: install, bootstrap
+        run: |
+          yarn install --immutable
+          yarn bootstrap --core
+      - name: test
+        run: |
+          yarn test --runInBand --ci