Merge branch 'next' into pr/19183

.circleci/config.yml

@@ -43,7 +43,7 @@ executors:
         default: 'small'
     working_directory: /tmp/storybook
     docker:
-      - image: mcr.microsoft.com/playwright:v1.32.3-focal
+      - image: mcr.microsoft.com/playwright:v1.34.3-focal
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
@@ -144,7 +144,9 @@ jobs:
             - code/node_modules
             - code/addons
             - code/frameworks
+            - code/deprecated
             - code/lib
+            - code/builders
             - code/ui
             - code/renderers
             - code/presets
@@ -690,6 +692,7 @@ workflows:
     when:
       equal: [daily, << pipeline.parameters.workflow >>]
     jobs:
+      - pretty-docs
       - build
       - lint:
           requires:
@@ -700,23 +703,29 @@ workflows:
       - unit-tests:
           requires:
             - build
+      - script-unit-tests:
+          requires:
+            - build
+      - chromatic-internal-storybooks:
+          requires:
+            - build
       - create-sandboxes:
-          parallelism: 31
+          parallelism: 32
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 31
+          parallelism: 32
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 31
+          parallelism: 32
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 31
+          parallelism: 32
           requires:
             - build-sandboxes
       - e2e-dev:
@@ -724,7 +733,7 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 31
+          parallelism: 32
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness

.github/CODEOWNERS

@@ -0,0 +1,8 @@
+# Any change inside the `/code` and `/scripts` directories will require approval from @storybookjs/core team.
+
+/.github/ @storybookjs/core
+/.circleci/ @storybookjs/core
+/.yarn/ @storybookjs/core
+/code/ @storybookjs/core
+/scripts/ @storybookjs/core
+/package.json @storybookjs/core

.github/workflows/canary-release-pr.WIP

@@ -0,0 +1,88 @@
+name: Publish canary release of PR
+run-name: 'Canary release: PR #${{ github.event.pull_request.number }} at ${{ github.sha }}'
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+    branches:
+      - next
+
+env:
+  PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+  PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number }}
+  cancel-in-progress: true
+
+permissions:
+  pull-requests: write
+
+jobs:
+  release-canary:
+    name: Release canary version
+    runs-on: ubuntu-latest
+    environment: canary-release
+    defaults:
+      run:
+        working-directory: scripts
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: |
+            ~/.yarn/berry/cache
+          key: yarn-v1-${{ hashFiles('scripts/yarn.lock') }}-${{ hashFiles('code/yarn.lock') }}
+          restore-keys: |
+            yarn-v1-${{ hashFiles('scripts/yarn.lock') }}-${{ hashFiles('code/yarn.lock') }}
+            yarn-v1-${{ hashFiles('scripts/yarn.lock') }}
+            yarn-v1
+
+      - name: Install dependencies
+        working-directory: .
+        run: yarn task --task=install --start-from=install
+
+      - name: Set version
+        id: version
+        run: |
+          SHORT_SHA=$(git rev-parse --short ${{ github.sha }})
+          yarn release:version --release-type prerelease --pre-id pr-${{ github.event.pull_request.number }}-$SHORT_SHA --verbose
+
+      - name: Publish v${{ steps.version.outputs.next-version }}
+        env:
+          YARN_NPM_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: yarn release:publish --tag pr-${{ github.event.pull_request.number }} --verbose
+
+      - name: Create comment on PR
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh pr comment ${{ github.event.pull_request.number }}\
+            --repo "${{github.repository }}"\
+            --body "🚀 This pull request has been published as version \`${{ steps.version.outputs.next-version }}\` and with the tag \`pr-${{ github.event.pull_request.number }}\`.
+          [You can see it on the npm registry here](https://npmjs.com/package/@storybook/cli/v/${{ steps.version.outputs.next-version }})".
+
+      - name: Create failing comment on PR
+        if: failure()
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh pr comment ${{ github.event.pull_request.number }}\
+            --repo "${{github.repository }}"\
+            --body "Failed to publish canary version of this pul request. See the failed workflow run at See run at: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"
+
+      # - name: Report failure to Discord
+      #   if: failure()
+      #   env:
+      #     DISCORD_WEBHOOK: ${{ secrets.DISCORD_MONITORING_URL }}
+      #   uses: Ilshidur/action-discord@master
+      #   with:
+      #     args: 'The GitHub Action for publishing version ${{ steps.version.outputs.current-version }} (triggered by ${{ github.triggering_actor }}) failed! See run at: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}'

.github/workflows/check-release-tasks.yml

@@ -0,0 +1,19 @@
+name: Check release tasks
+run-name: 'Check tasks for "${{ github.event.pull_request.title }}" PR'
+
+on:
+  pull_request:
+    types:
+      - opened
+      - edited
+    branches:
+      - 'latest-release'
+      - 'next-release'
+
+jobs:
+  task-check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: chromaui/task-completed-checker-action@main
+        with:
+          repo-token: '${{ secrets.GITHUB_TOKEN }}'

.github/workflows/danger-js.yml

@@ -1,6 +1,6 @@
 on:
   pull_request:
-    types: [opened, synchronize, reopened, labeled, unlabeled]
+    types: [opened, synchronize, reopened, labeled, unlabeled, edited]
 
 name: Danger JS
 jobs:
@@ -13,7 +13,7 @@ jobs:
           node-version: '16'
       - uses: actions/checkout@v3
       - name: Danger JS
-        uses: danger/danger-js@10.9.0
+        uses: danger/danger-js@11.2.6
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:

.github/workflows/generate-sandboxes-main.yml

@@ -4,6 +4,13 @@ on:
   schedule:
     - cron: '2 2 */1 * *'
   workflow_dispatch:
+  # To test fixes on push rather than wait for the scheduling, do the following:
+  # 1. Uncomment the lines below and add your branch.
+  # push:
+  #   branches:
+  #     - <your-branch-name>
+  # 2. change the "ref" value to <your-branch-name> in the actions/checkout step below.
+  # 3. 👉 DON'T FORGET TO UNDO THE VALUES BACK TO `main` BEFORE YOU MERGE YOUR CHANGES!
 
 jobs:
   generate:
@@ -41,3 +48,10 @@ jobs:
       - name: Publish
         run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=main
         working-directory: ./code
+      - name: The job has failed
+        if: ${{ failure() || cancelled() }}
+        env:
+          DISCORD_WEBHOOK: ${{ secrets.DISCORD_MONITORING_URL }}
+        uses: Ilshidur/action-discord@master
+        with:
+          args: 'The generation of sandboxes in the **main** branch has failed. [View Run](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})'

.github/workflows/generate-sandboxes-next.yml

@@ -10,7 +10,7 @@ on:
   #   branches:
   #     - <your-branch-name>
   # 2. change the "ref" value to <your-branch-name> in the actions/checkout step below.
-  # 3. don't forget to undo the values back to `next` before you merge your changes.
+  # 3. 👉 DON'T FORGET TO UNDO THE VALUES BACK TO `next` BEFORE YOU MERGE YOUR CHANGES!
 
 jobs:
   generate:
@@ -48,3 +48,10 @@ jobs:
       - name: Publish
         run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=next
         working-directory: ./code
+      - name: The job has failed
+        if: ${{ failure() || cancelled() }}
+        env:
+          DISCORD_WEBHOOK: ${{ secrets.DISCORD_MONITORING_URL }}
+        uses: Ilshidur/action-discord@master
+        with:
+          args: 'The generation of sandboxes in the **next** branch has failed. [View Run](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})'

.github/workflows/prepare-patch-release.yml

@@ -0,0 +1,178 @@
+name: Prepare patch PR
+run-name: Prepare patch PR, triggered by ${{ github.triggering_actor }}
+
+on:
+  push:
+    branches:
+      - next
+  workflow_dispatch:
+
+env:
+  PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+  PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
+
+concurrency:
+  group: ${{ github.workflow }}
+  cancel-in-progress: true
+
+jobs:
+  prepare-patch-pull-request:
+    name: Prepare patch pull request
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: scripts
+    steps:
+      - name: Checkout main
+        uses: actions/checkout@v3
+        with:
+          ref: main
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: |
+            ~/.yarn/berry/cache
+          key: yarn-v1-${{ hashFiles('scripts/yarn.lock') }}-${{ hashFiles('code/yarn.lock') }}
+          restore-keys: |
+            yarn-v1-${{ hashFiles('scripts/yarn.lock') }}-${{ hashFiles('code/yarn.lock') }}
+            yarn-v1-${{ hashFiles('scripts/yarn.lock') }}
+            yarn-v1
+
+      - name: Install Script Dependencies
+        run: |
+          yarn install
+
+      - name: Check if pull request is frozen
+        if: github.event_name != 'workflow_dispatch'
+        id: check-frozen
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: yarn release:is-pr-frozen
+
+      - name: Cancel when frozen
+        if: steps.check-frozen.outputs.frozen == 'true' && github.event_name != 'workflow_dispatch'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        # From https://stackoverflow.com/a/75809743
+        run: |
+          gh run cancel ${{ github.run_id }}
+          gh run watch ${{ github.run_id }}
+
+      - name: Check for unreleased changes
+        id: unreleased-changes
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: yarn release:unreleased-changes-exists --unpicked-patches
+
+      - name: Fetch next branch
+        run:
+          # depth needs to be set to a high enough number that it will contain all the merge commits to cherry-pick
+          # as of May 2023, the whole repo had 55K commits
+          git fetch --depth=2000 origin next
+
+      - name: Pick patches
+        id: pick-patches
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          git config --global user.name 'github-actions[bot]'
+          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
+          yarn release:pick-patches
+
+      - name: Install code dependencies
+        working-directory: .
+        run: yarn task --task=install --start-from=install
+
+      - name: Bump version
+        id: bump-version
+        if: steps.unreleased-changes.outputs.has-changes-to-release == 'true'
+        run: |
+          yarn release:version --release-type patch --verbose
+
+      # We need the current version to set the branch name, even when not bumping the version
+      - name: Get current version
+        id: current-version
+        if: steps.unreleased-changes.outputs.has-changes-to-release == 'false'
+        run: |
+          yarn release:get-current-version --verbose
+
+      - name: Set version output
+        id: versions
+        run: |
+          echo "current=${{ steps.bump-version.outputs.current-version || steps.current-version.outputs.current-version }}" >> "$GITHUB_OUTPUT"
+          echo "next=${{ steps.bump-version.outputs.next-version || steps.current-version.outputs.current-version }}" >> "$GITHUB_OUTPUT"
+
+      - name: Write changelog
+        if: steps.unreleased-changes.outputs.has-changes-to-release == 'true'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          yarn release:write-changelog ${{ steps.versions.outputs.next }} --unpicked-patches --verbose
+
+      - name: 'Commit changes to branch: version-patch-from-${{ steps.versions.outputs.current }}'
+        working-directory: .
+        run: |
+          git config --global user.name 'github-actions[bot]'
+          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
+          git checkout -b version-patch-from-${{ steps.versions.outputs.current }}
+          git add .
+          git commit -m "Bump version from ${{ steps.versions.outputs.current }} to ${{ steps.versions.outputs.next }}" || true
+          git push --force origin version-patch-from-${{ steps.versions.outputs.current }}
+
+      - name: Generate PR description
+        id: description
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: yarn release:generate-pr-description --unpicked-patches --manual-cherry-picks='${{ steps.pick-patches.outputs.failed-cherry-picks }}' ${{ steps.unreleased-changes.outputs.has-changes-to-release == 'true' && format('{0}={1} {2}={3}', '--current-version', steps.versions.outputs.current, '--next-version', steps.versions.outputs.next) || '' }} --verbose
+
+      - name: Create or update pull request with release
+        if: steps.unreleased-changes.outputs.has-changes-to-release == 'true'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          if PR_STATE=$(gh pr view --json state --jq .state 2>/dev/null) && [[ -n "$PR_STATE" && "$PR_STATE" == *"OPEN"* ]]; then
+            gh pr edit \
+              --repo "${{github.repository }}" \
+              --title "Bump version on \`main\`: patch from ${{ steps.versions.outputs.current }} to ${{ steps.versions.outputs.next }}" \
+              --body "${{ steps.description.outputs.description }}"
+          else
+            gh pr create \
+              --repo "${{github.repository }}" \
+              --title "Bump version on \`main\`: patch from ${{ steps.versions.outputs.current }} to ${{ steps.versions.outputs.next }}" \
+              --base latest-release \
+              --head version-patch-from-${{ steps.versions.outputs.current }} \
+              --body "${{ steps.description.outputs.description }}"
+          fi
+
+      - name: Create or update pull request without release
+        if: steps.unreleased-changes.outputs.has-changes-to-release == 'false'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          if PR_STATE=$(gh pr view --json state --jq .state 2>/dev/null) && [[ -n "$PR_STATE" && "$PR_STATE" == *"OPEN"* ]]; then
+            gh pr edit \
+              --repo "${{github.repository }}"\
+              --title "Merge patches to \`main\`" \
+              --body "${{ steps.description.outputs.description }}"
+          else
+            gh pr create \
+              --repo "${{github.repository }}"\
+              --title "Merge patches to \`main\`" \
+              --base latest-release \
+              --head version-patch-from-${{ steps.versions.outputs.current }} \
+              --body "${{ steps.description.outputs.description }}"
+          fi
+
+      - name: Report job failure to Discord
+        if: failure()
+        env:
+          DISCORD_WEBHOOK: ${{ secrets.DISCORD_MONITORING_URL }}
+        uses: Ilshidur/action-discord@master
+        with:
+          args: 'The GitHub Action for preparing the release pull request bumping from v${{ steps.versions.outputs.current }} to v${{ steps.versions.outputs.next }} (triggered by ${{ github.triggering_actor }}) failed! See run at: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}'

.github/workflows/prepare-prerelease.yml

@@ -0,0 +1,162 @@
+name: Prepare prerelease PR
+run-name: Prepare prerelease PR, triggered by ${{ github.triggering_actor }}
+
+on:
+  push:
+    branches:
+      - next
+  workflow_dispatch:
+    inputs:
+      release-type:
+        description: 'Which release type to use for bumping the version'
+        required: true
+        default: 'prerelease'
+        type: choice
+        options:
+          - prerelease
+          - prepatch
+          - preminor
+          - premajor
+          - patch
+          - minor
+          - major
+      pre-id:
+        description: For prerelease versions, what prerelease identifier to use, eg. 'alpha', 'beta', 'rc'
+        required: false
+        type: string
+
+env:
+  PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+  PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
+
+concurrency:
+  group: ${{ github.workflow }}
+  cancel-in-progress: true
+
+jobs:
+  prepare-prerelease-pull-request:
+    name: Prepare prerelease pull request
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: scripts
+    steps:
+      - name: Checkout next
+        uses: actions/checkout@v3
+        with:
+          ref: next
+          # this needs to be set to a high enough number that it will contain the last version tag
+          # as of May 2023, the whole repo had 55K commits
+          fetch-depth: 10000
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: |
+            ~/.yarn/berry/cache
+          key: yarn-v1-${{ hashFiles('scripts/yarn.lock') }}-${{ hashFiles('code/yarn.lock') }}
+          restore-keys: |
+            yarn-v1-${{ hashFiles('scripts/yarn.lock') }}-${{ hashFiles('code/yarn.lock') }}
+            yarn-v1-${{ hashFiles('scripts/yarn.lock') }}
+            yarn-v1
+
+      - name: Install Script Dependencies
+        run: |
+          yarn install
+
+      - name: Check if pull request is frozen
+        if: github.event_name != 'workflow_dispatch'
+        id: check-frozen
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: yarn release:is-pr-frozen
+
+      - name: Cancel when frozen
+        if: steps.check-frozen.outputs.frozen == 'true' && github.event_name != 'workflow_dispatch'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        # From https://stackoverflow.com/a/75809743
+        run: |
+          gh run cancel ${{ github.run_id }}
+          gh run watch ${{ github.run_id }}
+
+      # tags are needed to get changes and changelog generation
+      - name: Fetch git tags
+        run: git fetch --tags origin
+
+      - name: Check for unreleased changes
+        id: unreleased-changes
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: yarn release:unreleased-changes-exists
+
+      - name: Cancel when no release necessary
+        if: steps.unreleased-changes.outputs.has-changes-to-release == 'false'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        # From https://stackoverflow.com/a/75809743
+        run: |
+          gh run cancel ${{ github.run_id }}
+          gh run watch ${{ github.run_id }}
+
+      - name: Install code dependencies
+        working-directory: .
+        run: yarn task --task=install --start-from=install
+
+      - name: Bump version
+        id: bump-version
+        run: |
+          yarn release:version --release-type ${{ inputs.release-type || 'prerelease' }} ${{ inputs.pre-id && format('{0} {1}', '--pre-id', inputs.pre-id) || '' }} --verbose
+
+      - name: Write changelog
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          yarn release:write-changelog ${{ steps.bump-version.outputs.next-version }} --verbose
+
+      - name: 'Commit changes to branch: version-prerelease-from-${{ steps.bump-version.outputs.current-version }}'
+        working-directory: .
+        run: |
+          git config --global user.name 'github-actions[bot]'
+          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
+          git checkout -b version-prerelease-from-${{ steps.bump-version.outputs.current-version }}
+          git add .
+          git commit -m "Bump version from ${{ steps.bump-version.outputs.current-version }} to ${{ steps.bump-version.outputs.next-version }}" || true
+          git push --force origin version-prerelease-from-${{ steps.bump-version.outputs.current-version }}
+
+      - name: Generate PR description
+        id: description
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: yarn release:generate-pr-description --current-version ${{ steps.bump-version.outputs.current-version }} --next-version ${{ steps.bump-version.outputs.next-version }} --verbose
+
+      - name: Create or update pull request
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          if PR_STATE=$(gh pr view --json state --jq .state 2>/dev/null) && [[ -n "$PR_STATE" && "$PR_STATE" == *"OPEN"* ]]; then
+            gh pr edit \
+              --repo "${{github.repository }}" \
+              --title "Bump version on \`next\`: ${{ inputs.release-type || 'prerelease' }} ${{ inputs.pre-id && format('({0})', inputs.pre-id) }} from ${{ steps.bump-version.outputs.current-version }} to ${{ steps.bump-version.outputs.next-version }}" \
+              --body "${{ steps.description.outputs.description }}"
+          else
+            gh pr create \
+              --repo "${{github.repository }}"\
+              --title "Bump version on \`next\`: ${{ inputs.release-type || 'prerelease' }} ${{ inputs.pre-id && format('({0})', inputs.pre-id) }} from ${{ steps.bump-version.outputs.current-version }} to ${{ steps.bump-version.outputs.next-version }}" \
+              --base next-release \
+              --head version-prerelease-from-${{ steps.bump-version.outputs.current-version }} \
+              --body "${{ steps.description.outputs.description }}"
+          fi
+
+      - name: Report job failure to Discord
+        if: failure()
+        env:
+          DISCORD_WEBHOOK: ${{ secrets.DISCORD_MONITORING_URL }}
+        uses: Ilshidur/action-discord@master
+        with:
+          args: 'The GitHub Action for preparing the release pull request bumping from v${{ steps.bump-version.outputs.current-version }} to v${{ steps.bump-version.outputs.next-version }} (triggered by ${{ github.triggering_actor }}) failed! See run at: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}'

.github/workflows/publish.yml

@@ -0,0 +1,133 @@
+name: Publish
+run-name: Publish new version on ${{ github.ref_name }}, triggered by ${{ github.triggering_actor }}
+
+on:
+  push:
+    branches:
+      - latest-release
+      - next-release
+
+env:
+  PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+  PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
+
+permissions:
+  contents: write
+  pull-requests: write
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref_name }}
+
+jobs:
+  publish:
+    name: Publish new version
+    runs-on: ubuntu-latest
+    environment: release
+    defaults:
+      run:
+        working-directory: scripts
+    steps:
+      - name: Checkout ${{ github.ref_name }}
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 100
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: |
+            ~/.yarn/berry/cache
+          key: yarn-v1-${{ hashFiles('scripts/yarn.lock') }}-${{ hashFiles('code/yarn.lock') }}
+          restore-keys: |
+            yarn-v1-${{ hashFiles('scripts/yarn.lock') }}-${{ hashFiles('code/yarn.lock') }}
+            yarn-v1-${{ hashFiles('scripts/yarn.lock') }}
+            yarn-v1
+
+      - name: Install script dependencies
+        run: |
+          yarn install
+
+      - name: Get current version
+        id: version
+        run: yarn release:get-current-version
+
+      - name: Check if publish is needed
+        id: publish-needed
+        run: yarn release:is-version-published ${{ steps.version.outputs.current-version }}
+
+      - name: Check release vs prerelease
+        if: steps.publish-needed.outputs.published == 'false'
+        id: is-prerelease
+        run: yarn release:is-prerelease
+
+      - name: Install code dependencies
+        if: steps.publish-needed.outputs.published == 'false'
+        working-directory: .
+        run: yarn task --task=install --start-from=install
+
+      - name: Publish
+        if: steps.publish-needed.outputs.published == 'false'
+        env:
+          YARN_NPM_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: yarn release:publish --tag ${{ steps.is-prerelease.outputs.prerelease == 'true' && 'next' || 'latest' }} --verbose
+
+      - name: Get target branch
+        id: target
+        run: echo "target=${{ github.ref_name == 'next-release' && 'next' || 'main' }}" >> $GITHUB_OUTPUT
+
+      - name: Get changelog for ${{ steps.version.outputs.current-version }}
+        if: steps.publish-needed.outputs.published == 'false'
+        id: changelog
+        run: yarn release:get-changelog-from-file ${{ steps.version.outputs.current-version }}
+
+      # tags are needed to get list of patches to label as picked
+      - name: Fetch git tags
+        run: git fetch --tags origin
+
+      - name: Label patch PRs as picked
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: yarn release:label-patches
+
+      - name: Create GitHub Release
+        if: steps.publish-needed.outputs.published == 'false'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh release create \
+          v${{ steps.version.outputs.current-version }} \
+            --repo "${{ github.repository }}" \
+            --target ${{ github.ref_name }} \
+            --title "v${{ steps.version.outputs.current-version }}" \
+            --notes "${{ steps.changelog.outputs.changelog }}" \
+            ${{ steps.is-prerelease.outputs.prerelease == 'true' && '--prerelease' || '' }}
+
+      - name: Merge ${{ github.ref_name }} into ${{ steps.target.outputs.target }}
+        run: |
+          git config --global user.name "github-actions[bot]"
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git fetch origin ${{ steps.target.outputs.target }}
+          git checkout ${{ steps.target.outputs.target }}
+          git merge ${{ github.ref_name }}
+          git push origin ${{ steps.target.outputs.target }}
+
+      # Force push from next to main if it is not a prerelease, and this release is from next-release
+      # This happens when eg. next has been tracking 7.1.0-alpha.X, and now we want to release 7.1.0
+      # This will keep release-next, next and main all tracking v7.1.0
+      # - name: Force push ${{ steps.target.outputs.target }} to main
+      #   if: steps.publish-needed.outputs.published == 'false' && steps.target.outputs.target == 'next' && !steps.is-prerelease.outputs.prerelease
+      #   run: |
+      #     git push --force origin ${{ steps.target.outputs.target }}:main
+
+      - name: Report job failure to Discord
+        if: failure()
+        env:
+          DISCORD_WEBHOOK: ${{ secrets.DISCORD_MONITORING_URL }}
+        uses: Ilshidur/action-discord@master
+        with:
+          args: 'The GitHub Action for publishing version ${{ steps.version.outputs.current-version }} (triggered by ${{ github.triggering_actor }}) failed! See run at: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}'

.spelling

@@ -7,7 +7,6 @@ addon
 addons
 api
 apollo
-aurelia
 bundlers
 center
 centered

.yarnrc.yml

@@ -2,4 +2,10 @@ installStatePath: ./.yarn/root-install-state.gz
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.4.1.cjs
+npmPublishAccess: public
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: "@yarnpkg/plugin-workspace-tools"
+
+yarnPath: .yarn/releases/yarn-3.5.1.cjs

CHANGELOG.md

@@ -1,3 +1,346 @@
+## 7.1.0-alpha.29 (June 6, 2023)
+
+#### Bug Fixes
+
+-   CLI: Fix upgrade notification message [#22933](https://github.com/storybooks/storybook/pull/22933)
+-   Core: Fix indexing errors by excluding node_modules stories [#22873](https://github.com/storybooks/storybook/pull/22873)
+
+## 7.1.0-alpha.28 (June 6, 2023)
+
+#### Bug Fixes
+
+-   Docs: E2E tests for Source block update fix [#22835](https://github.com/storybooks/storybook/pull/22835)
+-   Docs: Fix Source block snippet updates [#22807](https://github.com/storybooks/storybook/pull/22807)
+
+## 7.1.0-alpha.27 (June 4, 2023)
+
+#### Features
+
+-   Webpack: Add option toinify using swc [#22843](https://github.com/storybooks/storybook/pull/22843)
+
+#### Bug Fixes
+
+-   Server: Fix .stories.yml support [#22906](https://github.com/storybooks/storybook/pull/22906)
+-   Storysource: Fix StyledSyntaxHighlighter to wrap long lines [#22541](https://github.com/storybooks/storybook/pull/22541)
+
+#### Maintenance
+
+-   TS: Migrate @storybook/web-components to strict TS [#22399](https://github.com/storybooks/storybook/pull/22399)
+-   TS: Migrate @storybook/addon-storyshots-puppeteer to strict TS [#22407](https://github.com/storybooks/storybook/pull/22407)
+-   TS: Migrate @storybook/addon-jest to strict TS [#22389](https://github.com/storybooks/storybook/pull/22389)
+-   TS: Migrate @storybook/addon-mdx-gfm to strict TS [#22659](https://github.com/storybooks/storybook/pull/22659)
+-   TS: Migrate @storybook/addon-storyshots to strict TS [#22487](https://github.com/storybooks/storybook/pull/22487)
+
+#### Build
+
+-   Error on YN0060 - INCOMPATIBLE_PEER_DEPENDENCY  [#22398](https://github.com/storybooks/storybook/pull/22398)
+-   Build: upgrade yarn [#22855](https://github.com/storybooks/storybook/pull/22855)
+-   Add CODEOWNERS [#22869](https://github.com/storybooks/storybook/pull/22869)
+
+## 7.1.0-alpha.26 (May 31, 2023)
+
+#### Bug Fixes
+
+-   Addons: Fix `Addon_BaseAnnotations` type [#22771](https://github.com/storybooks/storybook/pull/22771)
+-   Viewport: Fix viewport menu [#22829](https://github.com/storybooks/storybook/pull/22829)
+
+#### Maintenance
+
+-   NextJS: Fix types [#22836](https://github.com/storybooks/storybook/pull/22836)
+-   React: Update babel dependencies to fix sandbox creation [#22824](https://github.com/storybooks/storybook/pull/22824)
+
+#### Build
+
+-   Build: sort package json files [#22847](https://github.com/storybooks/storybook/pull/22847)
+-   Build: cleanup the test-storybooks [#22846](https://github.com/storybooks/storybook/pull/22846)
+-   Build: fix the theme output during development [#22841](https://github.com/storybooks/storybook/pull/22841)
+-   Build: move deprecated packages [#22753](https://github.com/storybooks/storybook/pull/22753)
+-   Build: move builders [#22751](https://github.com/storybooks/storybook/pull/22751)
+
+## 7.1.0-alpha.25 (May 26, 2023)
+
+#### Bug Fixes
+
+-   Vue3: Fix TS 5.0 compat with vue-component-type-helpers [#22814](https://github.com/storybooks/storybook/pull/22814)
+
+#### Build
+
+-   Build: Fix the local storybook [#22805](https://github.com/storybooks/storybook/pull/22805)
+-   Build: Add more checks to ci:daily workflow [#22815](https://github.com/storybooks/storybook/pull/22815)
+-   Build: Revert conditional decorator story and downgrade Typescript version [#22812](https://github.com/storybooks/storybook/pull/22812)
+
+## 7.1.0-alpha.24 (May 26, 2023)
+
+#### Bug Fixes
+
+-   Vue3: Fix reactive args updates in decorators [#22717](https://github.com/storybooks/storybook/pull/22717)
+
+#### Build
+
+-   Build: Update Nx to latest version [#22694](https://github.com/storybooks/storybook/pull/22694)
+
+## 7.1.0-alpha.23 (May 24, 2023)
+
+#### Bug Fixes
+
+-   Core: Fix `managerHead` preset in `main.ts` [#22701](https://github.com/storybooks/storybook/pull/22701)
+
+## 7.1.0-alpha.22 (May 24, 2023)
+
+#### Bug Fixes
+
+-   Vite: Fix pnpm support by replacing @storybook/global with `window` [#22709](https://github.com/storybooks/storybook/pull/22709)
+
+## 7.1.0-alpha.21 (May 23, 2023)
+
+#### Features
+
+-   Webpack: Add option to use swc instead of babel [#22075](https://github.com/storybooks/storybook/pull/22075)
+
+#### Bug Fixes
+
+-   UI: Fix `.mp3` support for builder-manager [#22699](https://github.com/storybooks/storybook/pull/22699)
+-   CLI: Fix support for BROWSER env var [#21473](https://github.com/storybooks/storybook/pull/21473)
+-   Vite: Fix missing @storybook/global dependency [#22700](https://github.com/storybooks/storybook/pull/22700)
+-   Next.js: Fix compatibility with Next 13.4.3 [#22697](https://github.com/storybooks/storybook/pull/22697)
+-   CLI: Fix error parsing on NPM proxy [#22690](https://github.com/storybooks/storybook/pull/22690)
+-   Core: Only connect to serverChannel in development mode [#22575](https://github.com/storybooks/storybook/pull/22575)
+-   CLI: Improve error handling when dealing with angular.json files [#22663](https://github.com/storybooks/storybook/pull/22663)
+-   CLI: Skip prompting for eslint plugin with --yes flag [#22651](https://github.com/storybooks/storybook/pull/22651)
+-   CLI: Fix upgrade to not upgrade nx packages [#22419](https://github.com/storybooks/storybook/pull/22419)
+-   CLI: Only handle CTRL + C on init event [#22687](https://github.com/storybooks/storybook/pull/22687)
+-   Angular: Remove console.log [#22671](https://github.com/storybooks/storybook/pull/22671)
+
+## 7.1.0-alpha.20 (May 20, 2023)
+
+#### Bug Fixes
+
+-   CLI: Account for windows paths when copying templates [#22644](https://github.com/storybooks/storybook/pull/22644)
+-   CLI: Fix pnpm init command [#22635](https://github.com/storybooks/storybook/pull/22635)
+-   UI: Add legacy font formats [#22576](https://github.com/storybooks/storybook/pull/22576)
+-   Webpack: Remove the alias for `global` [#22393](https://github.com/storybooks/storybook/pull/22393)
+
+#### Maintenance
+
+-   CLI: Reduce installation noise and improve error handling [#22554](https://github.com/storybooks/storybook/pull/22554)
+-   Actions: Fix type of withActions [#22455](https://github.com/storybooks/storybook/pull/22455)
+
+#### Build
+
+-   Build: add discord notification when generating sandboxes fails [#22638](https://github.com/storybooks/storybook/pull/22638)
+-   Build: set correct ref on sandboxes Github action [#22625](https://github.com/storybooks/storybook/pull/22625)
+-   Build: Fix sandbox generation scripts [#22620](https://github.com/storybooks/storybook/pull/22620)
+
+## 7.1.0-alpha.19 (May 16, 2023)
+
+#### Bug Fixes
+
+-   Normalize paths exposed to vite-builder's `storybook-stories.js` file [#22327](https://github.com/storybooks/storybook/pull/22327)
+
+## 7.1.0-alpha.18 (May 15, 2023)
+
+#### Bug Fixes
+
+-   CLI: Fix `getFrameworkPackage` logic [#22559](https://github.com/storybooks/storybook/pull/22559)
+-   CLI: Remove automigrate reference from init command [#22561](https://github.com/storybooks/storybook/pull/22561)
+
+#### Maintenance
+
+-   CLI: Detach automigrate command from storybook init [#22523](https://github.com/storybooks/storybook/pull/22523)
+
+## 7.1.0-alpha.17 (May 12, 2023)
+
+#### Bug Fixes
+
+-   CLI: Fix storybook upgrade precheckfailure object [#22517](https://github.com/storybooks/storybook/pull/22517)
+-   CLI: Throw errors instead of rejecting promises [#22515](https://github.com/storybooks/storybook/pull/22515)
+-   CSF: Expose story id in composeStories [#22471](https://github.com/storybooks/storybook/pull/22471)
+-   CLI: Remove unsupported frameworks/renderers and improve builder detection [#22492](https://github.com/storybooks/storybook/pull/22492)
+
+## 7.1.0-alpha.16 (May 11, 2023)
+
+#### Bug Fixes
+
+-   Web-components: Fix source decorator to handle document fragments [#22513](https://github.com/storybooks/storybook/pull/22513)
+-   Angular: Adjust child process I/O for compodoc command [#22441](https://github.com/storybooks/storybook/pull/22441)
+-   Core: Fix windows path error in StoryStore v6 [#22512](https://github.com/storybooks/storybook/pull/22512)
+
+#### Maintenance
+
+-   CLI: Prompt to force initialization when storybook is detected [#22392](https://github.com/storybooks/storybook/pull/22392)
+-   UI: Fix css inconsistency in Button and Icon components [#22497](https://github.com/storybooks/storybook/pull/22497)
+
+#### Build
+
+-   Sandboxes: Pin @vitejs/plugin-react to avoid conflict [#22501](https://github.com/storybooks/storybook/pull/22501)
+
+## 7.1.0-alpha.15 (May 11, 2023)
+
+#### Bug Fixes
+
+-   CLI: Do not show a migration summary on sb init [#22109](https://github.com/storybooks/storybook/pull/22109)
+-   Toolbars: Fix title behavior in UI [#22496](https://github.com/storybooks/storybook/pull/22496)
+-   UI: Show current search shortcut in search box sidebar [#21619](https://github.com/storybooks/storybook/pull/21619)
+-   Measure: Deactivate when switching to Docs mode [#21602](https://github.com/storybooks/storybook/pull/21602)
+-   Outline: Fix additional outline border in docs mode [#21773](https://github.com/storybooks/storybook/pull/21773)
+
+## 7.1.0-alpha.14 (May 9, 2023)
+
+#### Bug Fixes
+
+-   CLI: Scope styles in sample components from the CLI templates [#22162](https://github.com/storybooks/storybook/pull/22162)
+-   CLI: Fix copyTemplate failures on `init` [#22375](https://github.com/storybooks/storybook/pull/22375)
+-   CLI: Fix server init [#22443](https://github.com/storybooks/storybook/pull/22443)
+-   Server: Add json indexer [#22460](https://github.com/storybooks/storybook/pull/22460)
+-   React: Use correct default annotations for composeStories [#22308](https://github.com/storybooks/storybook/pull/22308)
+-   UI: Fix opacity of list-item color [#22074](https://github.com/storybooks/storybook/pull/22074)
+
+#### Maintenance
+
+-   CLI: Refactor package manager methods to be async [#22401](https://github.com/storybooks/storybook/pull/22401)
+-   Angular: Improve Error message for angular.json not found [#22377](https://github.com/storybooks/storybook/pull/22377)
+-   TypeScript: Migrate @storybook/instrumenter to strict TS [#22370](https://github.com/storybooks/storybook/pull/22370)
+-   TypeScript: Migrate @storybook/core-events to strict TS [#22448](https://github.com/storybooks/storybook/pull/22448)
+-   TypeScript: Migrate @storybook/core-client to strict TS [#22447](https://github.com/storybooks/storybook/pull/22447)
+-   TypeScript: Migrate @storybook/react-vite and @storybook/preact-vite to strict TS [#22428](https://github.com/storybooks/storybook/pull/22428)
+-   TypeScript: Migrate @storybook/svelte-vite to strict TS [#22411](https://github.com/storybooks/storybook/pull/22411)
+-   TypeScript: Migrate @storybook/types to strict TS [#22397](https://github.com/storybooks/storybook/pull/22397)
+-   TypeScript: Migrate @storybook/addon-storysource to strict TS [#22367](https://github.com/storybooks/storybook/pull/22367)
+-   TypeScript: Migrate @storybook/client-api to strict TS [#22421](https://github.com/storybooks/storybook/pull/22421)
+-   TypeScript: Migrate @storybook/sveltekit to strict TS [#22412](https://github.com/storybooks/storybook/pull/22412)
+-   TypeScript: Migrate @storybook/source-loader to strict TS [#22420](https://github.com/storybooks/storybook/pull/22420)
+
+## 7.1.0-alpha.13 (May 5, 2023)
+
+#### Bug Fixes
+
+-   Core: Fix virtual modules excluded for babel-loader [#22331](https://github.com/storybooks/storybook/pull/22331)
+
+#### Maintenance
+
+-   Angular: Allow TypeScript 4.0.0 and 5.0.0 [#22391](https://github.com/storybooks/storybook/pull/22391)
+-   Angular: Enable Angular Unit tests [#22355](https://github.com/storybooks/storybook/pull/22355)
+-   TypeScript: Migrate @storybook/theming to strict TS [#22376](https://github.com/storybooks/storybook/pull/22376)
+-   TypeScript: Migrate @storybook/channel-websocket to strict TS [#22364](https://github.com/storybooks/storybook/pull/22364)
+-   TypeScript: Migrate @storybook/addon-outline to strict TS [#22369](https://github.com/storybooks/storybook/pull/22369)
+-   TypeScript: Migrate @storybook/addon-viewbook to strict ts [#22339](https://github.com/storybooks/storybook/pull/22339)
+-   TypeScript: Migrate @storybook/channels to strict TS [#22365](https://github.com/storybooks/storybook/pull/22365)
+
+#### Build
+
+-   Add Angular Prerelease sandbox [#22379](https://github.com/storybooks/storybook/pull/22379)
+
+## 7.1.0-alpha.12 (May 3, 2023)
+
+#### Bug Fixes
+
+-   Migrate: skip the automigration for gf markdown when user isn't using mdx [#22186](https://github.com/storybooks/storybook/pull/22186)
+-   UI: Addon panel does not update after disabling/enabling an addon [#22258](https://github.com/storybooks/storybook/pull/22258)
+-   Typescript: Fix bad typings caused by tsup bug [#22261](https://github.com/storybooks/storybook/pull/22261)
+-   Core: Fix source snippets for stories with mapped args [#22135](https://github.com/storybooks/storybook/pull/22135)
+
+#### Maintenance
+
+-   Telemetry: Persist sessionId across runs [#22325](https://github.com/storybooks/storybook/pull/22325)
+-   Packaging: Move `types` condition to the front in all `package.json.exports` maps [#22321](https://github.com/storybooks/storybook/pull/22321)
+-   Packaging: Don't generate ESM dist for preset files [#22330](https://github.com/storybooks/storybook/pull/22330)
+-   Typescript: Migrate `@storybook/csf-tools` to strict TS [#22312](https://github.com/storybooks/storybook/pull/22312)
+-   Typescript: Migrate @storybook/postinstall and @storybook/router to strict TS [#22200](https://github.com/storybooks/storybook/pull/22200)
+-   Maintenance: Fix urls for all packages in package.json [#22101](https://github.com/storybooks/storybook/pull/22101)
+-   Docs: Improve component typings [#22050](https://github.com/storybooks/storybook/pull/22050)
+
+#### Build
+
+-   Build: Comment out flaky test [#22310](https://github.com/storybooks/storybook/pull/22310)
+-   Build: Migrate `@storybook/web-components-vite` to strict TS [#22309](https://github.com/storybooks/storybook/pull/22309)
+-   Build: Migrate `@storybook/html-vite` to strict TS [#22293](https://github.com/storybooks/storybook/pull/22293)
+-   Build: Migrate @storybook/preset-vue-webpack to strict TS [#22320](https://github.com/storybooks/storybook/pull/22320)
+-   Build: Use `next` branch for sandbox and repro commands [#22238](https://github.com/storybooks/storybook/pull/22238)
+
+## 7.1.0-alpha.11 (April 28, 2023)
+
+#### Features
+
+-   Feature: Add support for Angular 16 [#22096](https://github.com/storybooks/storybook/pull/22096)
+
+#### Bug Fixes
+
+-   Vue3: Rollback v7 breaking change and keep reactive v6-compatible API [#22229](https://github.com/storybooks/storybook/pull/22229)
+
+#### Maintenance
+
+-   Core: Add tests for mapping behaviour in #22169 [#22301](https://github.com/storybooks/storybook/pull/22301)
+
+#### Dependency Upgrades
+
+-   Update glob to v10.0.0 [#22171](https://github.com/storybooks/storybook/pull/22171)
+
+## 7.1.0-alpha.10 (April 28, 2023)
+
+#### Bug Fixes
+
+-   Vue3: Fix compiler error when there is double tag [#22286](https://github.com/storybooks/storybook/pull/22286)
+-   Args: Fix multiple mapped args return array of labels [#22169](https://github.com/storybooks/storybook/pull/22169)
+-   Angular: Fix storyshots by removing deprecated import [#22134](https://github.com/storybooks/storybook/pull/22134)
+-   Ember: Fix wrong path [#22203](https://github.com/storybooks/storybook/pull/22203)
+-   CLI: Add web-components webpack5 to missing-babelrc automigration [#22202](https://github.com/storybooks/storybook/pull/22202)
+-   Docs: Fix inline story style [#21870](https://github.com/storybooks/storybook/pull/21870)
+
+#### Build
+
+-   Fix vue-cli/default-js sandbox [#22259](https://github.com/storybooks/storybook/pull/22259)
+-   Core: Fix `DOCS_RENDERED` test [#22255](https://github.com/storybooks/storybook/pull/22255)
+-   Add regex to ignore outdated Browserslist in Jest initialization base file [#22260](https://github.com/storybooks/storybook/pull/22260)
+
+## 7.1.0-alpha.9 (April 26, 2023)
+
+#### Features
+
+-   NextJS: Allow disabling next/image lazy loading [#21909](https://github.com/storybooks/storybook/pull/21909)
+-   Core: Allow Flow syntax in stories [#21859](https://github.com/storybooks/storybook/pull/21859)
+
+#### Bug Fixes
+
+-   Vue3: Support multiple setup functions [#22170](https://github.com/storybooks/storybook/pull/22170)
+-   UI: Fix shift + 7 shortcut to focus search field [#22073](https://github.com/storybooks/storybook/pull/22073)
+-   UI: Fix controls missing when navigating from story [#21967](https://github.com/storybooks/storybook/pull/21967)
+
+#### Maintenance
+
+-   Core: Rename manager UI mjs to js [#22247](https://github.com/storybooks/storybook/pull/22247)
+-   Remove dead code [#22019](https://github.com/storybooks/storybook/pull/22019)
+-   Vue3: Move TS stories into a separate folder [#22235](https://github.com/storybooks/storybook/pull/22235)
+
+#### Build
+
+-   Build: Migrate @storybook/addon-docs to strict-ts [#22180](https://github.com/storybooks/storybook/pull/22180)
+-   Build: Migrate @storybook/highlight to strict TS [#22181](https://github.com/storybooks/storybook/pull/22181)
+-   Build: Enable strict TS by default [#22143](https://github.com/storybooks/storybook/pull/22143)
+
+## 7.1.0-alpha.8 (April 24, 2023)
+
+#### Features
+
+-   Core: Support custom hosts using window.location server channel URL [#22055](https://github.com/storybooks/storybook/pull/22055)
+
+#### Bug Fixes
+
+-   Addon-actions: Fix ESM by upgrading from uuid-browser to uuid [#22037](https://github.com/storybooks/storybook/pull/22037)
+-   Addon-actions: Fix decorator type [#22175](https://github.com/storybooks/storybook/pull/22175)
+-   NextJS: Fix tsconfig resolution [#22160](https://github.com/storybooks/storybook/pull/22160)
+-   Core: Pass parameters in `SET_INDEX` for docs entries [#22154](https://github.com/storybooks/storybook/pull/22154)
+
+#### Maintenance
+
+-   CSF: Improve error message for bad default export [#22190](https://github.com/storybooks/storybook/pull/22190)
+-   CLI: Add addon query-params to list of SB7 incompatible addons [#22095](https://github.com/storybooks/storybook/pull/22095)
+
+#### Build
+
+-   Build: Fix sandbox publish script [#22206](https://github.com/storybooks/storybook/pull/22206)
+-   Build: Fix lit sandboxes [#22201](https://github.com/storybooks/storybook/pull/22201)
+-   Vite sandboxes: use stable Vite 4.3 [#22183](https://github.com/storybooks/storybook/pull/22183)
+
 ## 7.1.0-alpha.7 (April 19, 2023)
 
 #### Bug Fixes

Issue.md

@@ -0,0 +1,67 @@
+*What:*
+We want to step our TS game in the monorepo and enable strict typescript in all packages!
+
+*Why:*
+Having TS track for you if a variable might be null or not, enables us to code with much more confidence, 
+and also gives us quick in editor feedback, when you make assumptions that are not actually true! 
+
+*How:*
+We would like to change as little as possible of the actual runtime behavior in this migration.
+However, we also don't want to simply silence the compiler everywhere with `!`, `as` or `ts-ignore` to get this migration in.
+As a rule of thumb, if the logic is easy enough, prefer improving the code (e.g. add a null check) over silencing the compiler.
+If the change needed to do the right thing, is too risky, and not in your expertise, it is okay to silence the compiler.
+It is not ideal, but we still gain the benefit that new code written will have extra typesafety.
+
+Feel free to contribute too any of packages in the list below!
+
+- [ ] @storybook/addon-backgrounds
+- [ ] @storybook/addon-docs
+- [ ] @storybook/addon-highlight
+- [ ] @storybook/addon-interactions
+- [ ] @storybook/addon-jest
+- [ ] @storybook/addon-mdx-gfm
+- [ ] @storybook/addon-measure
+- [ ] @storybook/addon-outline
+- [ ] @storybook/addon-storyshots
+- [ ] @storybook/addon-storyshots-puppeteer
+- [ ] @storybook/addon-storysource
+- [ ] @storybook/addon-viewport
+- [ ] @storybook/addons
+- [ ] @storybook/angular
+- [ ] @storybook/api
+- [ ] @storybook/blocks
+- [ ] @storybook/channel-postmessage
+- [ ] @storybook/channel-websocket
+- [ ] @storybook/channels
+- [ ] @storybook/cli
+- [ ] @storybook/client-api
+- [ ] @storybook/codemod
+- [ ] @storybook/components
+- [ ] @storybook/core-client
+- [ ] @storybook/core-events
+- [ ] @storybook/core-server
+- [ ] @storybook/csf-tools
+- [ ] @storybook/docs-tools
+- [ ] @storybook/external-docs
+- [ ] @storybook/html-vite
+- [ ] @storybook/instrumenter
+- [ ] @storybook/manager
+- [ ] @storybook/manager-api
+- [ ] @storybook/postinstall
+- [ ] @storybook/preact-vite
+- [ ] @storybook/preset-create-react-app
+- [ ] @storybook/preset-vue-webpack
+- [ ] @storybook/preset-vue3-webpack
+- [ ] @storybook/react-vite
+- [ ] @storybook/router
+- [ ] @storybook/scripts
+- [ ] @storybook/server
+- [ ] @storybook/source-loader
+- [ ] @storybook/svelte-vite
+- [ ] @storybook/sveltekit
+- [ ] @storybook/theming
+- [ ] @storybook/types
+- [ ] @storybook/vue3-vite
+- [ ] @storybook/vue3-webpack5
+- [ ] @storybook/web-components
+- [ ] @storybook/web-components-vite

MIGRATION.md

@@ -21,6 +21,11 @@
     - [Add strict mode](#add-strict-mode)
     - [Importing plain markdown files with `transcludeMarkdown` has changed](#importing-plain-markdown-files-with-transcludemarkdown-has-changed)
     - [Stories field in .storybook/main.js is mandatory](#stories-field-in-storybookmainjs-is-mandatory)
+    - [Stricter global types](#stricter-global-types)
+    - [Deploying build artifacts](#deploying-build-artifacts)
+      - [Dropped support for file URLs](#dropped-support-for-file-urls)
+      - [Serving with nginx](#serving-with-nginx)
+      - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules)
   - [7.0 Core changes](#70-core-changes)
     - [7.0 feature flags removed](#70-feature-flags-removed)
     - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates)
@@ -118,6 +123,7 @@
     - [Main.js framework field](#mainjs-framework-field)
     - [Using the v7 store](#using-the-v7-store)
     - [v7-style story sort](#v7-style-story-sort)
+    - [v7 default sort behavior](#v7-default-sort-behavior)
     - [v7 Store API changes for addon authors](#v7-store-api-changes-for-addon-authors)
     - [Storyshots compatibility in the v7 store](#storyshots-compatibility-in-the-v7-store)
   - [Emotion11 quasi-compatibility](#emotion11-quasi-compatibility)
@@ -507,7 +513,6 @@ Storybook 7 introduces the concept of `frameworks`, which abstracts configuratio
 > Note:
 > All of the following changes can be done automatically either via `npx storybook@latest upgrade --prerelease` or via the `npx storybook@latest automigrate` command. It's highly recommended to use these commands, which will tell you exactly what to do.
 
-
 ##### Available framework packages
 
 In 7.0, `frameworks` combine a `renderer` and a `builder`, with the exception of a few packages that do not contain multiple builders, such as `@storybook/angular`, which only has Webpack 5 support.
@@ -671,7 +676,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 const config: StorybookConfig = {
   framework: {
     name: '@storybook/react-vite',
-    options: {}
+    options: {},
   },
   // ... your configuration
 };
@@ -794,6 +799,63 @@ import ReadMe from './README.md?raw';
 In 6.x, the `stories` key field in `.storybook/main.js` was optional. In 7.0, it is mandatory.
 Please follow up the [Configure your Storybook project](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project) section to configure your Storybook project.
 
+#### Stricter global types
+
+In 6.x, you could declare and use [`globals`](https://storybook.js.org/docs/react/essentials/toolbars-and-globals) without declaring their corresponding `globalTypes`. We've made this more strict in 7.0, so that the `globalTypes` declaration is required, and undeclared globals will be ignored.
+
+#### Deploying build artifacts
+
+Starting with 7.x, we are using modern [ECMAScript Modules (ESM)](https://nodejs.org/api/esm.html).
+
+Those end up as `.mjs` files in your static Storybook artifact and need to be served as `application/javascript`, indicated by the `Content-Type` HTTP header.
+
+For a simple HTTP server to view a Storybook build, you can run `npx http-server storybook-static`.
+
+Note that [using the serve package](https://storybook.js.org/docs/react/faq#i-see-a-no-preview-error-with-a-storybook-production-build) will not work.
+
+##### Dropped support for file URLs
+
+In 6.x it was possible to open a Storybook build from the file system.
+
+ESM requires loading over HTTP(S), which is incompatible with the browser's CORS settings for `file://` URLs.
+
+So you now need to use a web server as described above.
+
+##### Serving with nginx
+
+With [nginx](https://www.nginx.com/), you need to extend [the MIME type handling](https://github.com/nginx/nginx/blob/master/conf/mime.types) in your configuration:
+
+```
+    include mime.types;
+    types {
+        application/javascript mjs;
+    }
+```
+
+It would otherwise default to serving the `.mjs` files as `application/octet-stream`.
+
+##### Ignore story files from node_modules
+
+In 6.x Storybook literally followed the glob patterns specified in your `.storybook/main.js` `stories` field. Storybook 7.0 ignores files from `node_modules` unless your glob pattern includes the string `"node_modules"`.
+
+Given the following `main.js`:
+
+```js
+export default {
+  stories: ['../**/*.stories.*']
+}
+```
+
+If you want to restore the previous behavior to include `node_modules`, you can update it to:
+
+```js
+export default {
+  stories: ['../**/*.stories.*', '../**/node_modules/**/*.stories.*']
+}
+```
+
+The first glob would have node_modules automatically excluded by Storybook, and the second glob would include all stories that are under a nested `node_modules` directory.
+
 ### 7.0 Core changes
 
 #### 7.0 feature flags removed
@@ -1071,7 +1133,7 @@ In v6.x `@storybook/web-components` had a peer dependency on `lit-html` v1 or v2
 
 #### Create React App: dropped CRA4 support
 
-Since v7 [drops webpack4 support](#webpack4-support-discontinued), it longer supports Create React App < 5.0. If you're using an earlier version of CRA, please upgrade or stay on Storybook 6.x.
+Since v7 [drops webpack4 support](#webpack4-support-discontinued), it no longer supports Create React App < 5.0. If you're using an earlier version of CRA, please upgrade or stay on Storybook 6.x.
 
 #### HTML: No longer auto-dedents source code
 
@@ -1087,7 +1149,7 @@ Storybook 7 adds 2 new packages for addon authors to use: `@storybook/preview-ap
 These 2 packages replace `@storybook/addons`.
 
 When adding addons to storybook, you can (for example) add panels:
-  
+
 ```js
 import { addons } from '@storybook/manager-api';
 
@@ -1102,7 +1164,7 @@ The `addons` export is now a named export only, there's no default export anymor
 
 The package `@storybook/addons` is still available, but it's only for backwards compatibility. It's not recommended to use it anymore.
 
-It's also been used by addon creators to gain access to a few APIs like `makeDecorator`. 
+It's also been used by addon creators to gain access to a few APIs like `makeDecorator`.
 These APIs are now available in `@storybook/preview-api`.
 
 Storybook users have had access to a few storybook-lifecycle hooks such as `useChannel`, `useParameter`, `useStorybookState`;
@@ -1140,7 +1202,6 @@ It should no longer depend on `@storybook/addons`, but instead on `@storybook/pr
 You might also depend (and use) these packages in your addon's decorators: `@storybook/store`, `@storybook/preview-web`, `@storybook/core-client`, `@storybook/client-api`; these have all been consolidated into `@storybook/preview-api`.
 So if you use any of these packages, please import what you need from `@storybook/preview-api` instead.
 
-
 Storybook 7 will prepare manager-code for the browser using ESbuild (before it was using a combination of webpack + babel).
 This is a very important change, though it will not affect most addons.
 It means that when creating custom addons, particularly custom addons within the repo in which they are consumed,
@@ -1149,8 +1210,8 @@ This can result in errors if you are using experimental JS features in your addo
 or using babel dependent features such as Component selectors in Emotion.
 
 ESbuild also places some constraints on things you can import into your addon's manager code: only woff2 files are supported, and not all image file types are supported.
-Here's the list of supported file types:
-https://github.com/storybookjs/storybook/blob/4a37372f649e85e7a0c35b0493da016dbb5dee17/code/lib/builder-manager/src/index.ts#L54-L64
+Here's the [list](https://github.com/storybookjs/storybook/blob/next/code/builders/builder-manager/src/index.ts#L53-L70) of supported file types.
+
 This is not configurable.
 
 If this is a problem for your addon, you need to pre-compile your addon's manager code to ensure it works.
@@ -1170,17 +1231,19 @@ All of storybook's core addons have been updated and are ready to use with Story
 We're working with the community to update the most popular addons.
 But if you're using an addon that hasn't been updated yet, it might not work.
 
-It's possible for example for older addons to use APIs that are no longer available in Storybook 7. 
+It's possible for example for older addons to use APIs that are no longer available in Storybook 7.
 Your addon might not show upside of the storybook (manager) UI, or storybook might fail to start entirely.
 
 When this happens to you please open an issue on the addon's repo, and ask the addon author to update their addon to be compatible with Storybook 7.
 It's also useful for the storybook team to know which addons are not yet compatible, so please open an issue on the storybook repo as well; particularly if the addon is popular and causes a critical failure.
 
 Here's a list of popular addons that are known not to be compatible with Storybook 7 yet:
+
 - [ ] [storybook-addon-jsx](https://github.com/storybookjs/addon-jsx)
 - [ ] [storybook-addon-dark-mode](https://github.com/hipstersmoothie/storybook-dark-mode)
 
 Though storybook should de-duplicate storybook packages, storybook CLI's `upgrade` command will warn you when you have multiple storybook-dependencies, because it is a possibility that this causes addons/storybook to not work, so when running into issues, please run this:
+
 ```
 npx sb upgrade
 ```
@@ -2144,6 +2207,41 @@ function storySort(a, b) {
 },
 ```
 
+**NOTE:** v7-style sorting is statically analyzed by Storybook, which puts a variety of constraints versus v6:
+
+- Sorting must be specified in the user's `.storybook/preview.js`. It cannot be specified by an addon or preset.
+- The `preview.js` export should not be generated by a function.
+- `storySort` must be a self-contained function that does not reference external variables.
+
+#### v7 default sort behavior
+
+The behavior of the default `storySort` function has also changed in v7 thanks to [#18423](https://github.com/storybookjs/storybook/pull/18243), which gives better control over hierarchical sorting.
+
+In 6.x, the following configuration would sort any story/doc containing the title segment `Introduction` to the top of the sidebar, so this would match `Introduction`, `Example/Introduction`, `Very/Nested/Introduction`, etc.
+
+```js
+// preview.js
+export default {
+  parameters: {
+    options: {
+      storySort: {
+        order: ['Introduction', '*'],
+      },
+    },
+  },
+};
+```
+
+In 7.0+, the targeting is more precise, so the preceding example would match `Introduction`, but not anything nested. If you wanted to sort `Example/Introduction` first, you'd need to specify that:
+
+```js
+storySort: {
+  order: ['*', ['Introduction', '*']],
+}
+```
+
+This would sort `*/Introduction` first, but not `Introduction` or `Very/Nested/Introduction`. If you want to target `Introduction` stories/docs anywhere in the hierarchy, you can do this with a [custom sort function](https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#sorting-stories).
+
 #### v7 Store API changes for addon authors
 
 The Story Store in v7 mode is async, so synchronous story loading APIs no longer work. In particular:
@@ -2797,7 +2895,7 @@ To help you upgrade your stories, we've created a codemod:
 npx @storybook/cli@latest migrate csf-hoist-story-annotations --glob="**/*.stories.js"
 ```
 
-For more information, [see the documentation](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#csf-hoist-story-annotations).
+For more information, [see the documentation](https://github.com/storybookjs/storybook/blob/next/code/lib/codemod/README.md#csf-hoist-story-annotations).
 
 ### Zero config typescript
 
@@ -2851,7 +2949,7 @@ npm install core-js@^3.0.1 --save-dev
 
 ### Args passed as first argument to story
 
-Starting in 6.0, the first argument to a story function is an [Args object](https://storybook.js.org/docs/react/api/csf#args-story-inputs). In 5.3 and earlier, the first argument was a [StoryContext](https://github.com/storybookjs/storybook/blob/next/lib/addons/src/types.ts#L49-L61), and that context is now passed as the second argument by default.
+Starting in 6.0, the first argument to a story function is an [Args object](https://storybook.js.org/docs/react/api/csf#args-story-inputs). In 5.3 and earlier, the first argument was a [StoryContext](https://github.com/storybookjs/storybook/blob/release/5.3/lib/addons/src/types.ts#L24-L31), and that context is now passed as the second argument by default.
 
 This breaking change only affects you if your stories actually use the context, which is not common. If you have any stories that use the context, you can either (1) update your stories, or (2) set a flag to opt-out of new behavior.
 
@@ -3085,7 +3183,7 @@ The story store no longer emits `renderCurrentStory`/`RENDER_CURRENT_STORY` to t
 
 We've removed the ability to specify the hierarchy separators (how you control the grouping of story kinds in the sidebar). From Storybook 6.0 we have a single separator `/`, which cannot be configured.
 
-If you are currently using custom separators, we encourage you to migrate to using `/` as the sole separator. If you are using `|` or `.` as a separator currently, we provide a codemod, [`upgrade-hierarchy-separators`](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#upgrade-hierarchy-separators), that can be used to rename your components. **Note: the codemod will not work for `.mdx` components, you will need to make the changes by hand.**
+If you are currently using custom separators, we encourage you to migrate to using `/` as the sole separator. If you are using `|` or `.` as a separator currently, we provide a codemod, [`upgrade-hierarchy-separators`](https://github.com/storybookjs/storybook/blob/next/code/lib/codemod/README.md#upgrade-hierarchy-separators), that can be used to rename your components. **Note: the codemod will not work for `.mdx` components, you will need to make the changes by hand.**
 
 ```
 npx sb@latest migrate upgrade-hierarchy-separators --glob="*/**/*.stories.@(tsx|jsx|ts|js)"
@@ -3576,7 +3674,7 @@ Addon-docs configuration gets simpler in 5.3. In 5.2, each framework had its own
 
 We've deprecated the ability to specify the hierarchy separators (how you control the grouping of story kinds in the sidebar). From Storybook 6.0 we will have a single separator `/`, which cannot be configured.
 
-If you are currently using custom separators, we encourage you to migrate to using `/` as the sole separator. If you are using `|` or `.` as a separator currently, we provide a codemod, [`upgrade-hierarchy-separators`](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#upgrade-hierarchy-separators), that can be used to rename all your components.
+If you are currently using custom separators, we encourage you to migrate to using `/` as the sole separator. If you are using `|` or `.` as a separator currently, we provide a codemod, [`upgrade-hierarchy-separators`](https://github.com/storybookjs/storybook/blob/next/code/lib/codemod/README.md#upgrade-hierarchy-separators), that can be used to rename all your components.
 
 ```
 yarn sb migrate upgrade-hierarchy-separators --glob="*.stories.js"
@@ -4444,7 +4542,7 @@ The new package names are:
 
 If your codebase is small, it's probably doable to replace them by hand (in your codebase and in `package.json`).
 
-But if you have a lot of occurrences in your codebase, you can use a [codemod we created](./lib/codemod) for you.
+But if you have a lot of occurrences in your codebase, you can use a [codemod we created](./code/lib/codemod) for you.
 
 > A codemod makes automatic changed to your app's code.
 

code/.eslintrc.js

@@ -69,7 +69,15 @@ module.exports = {
     },
     {
       // these packages use pre-bundling, dependencies will be bundled, and will be in devDepenencies
-      files: ['addons/**/*', 'frameworks/**/*', 'lib/**/*', 'renderers/**/*', 'ui/**/*'],
+      files: [
+        'addons/**/*',
+        'frameworks/**/*',
+        'lib/**/*',
+        'builders/**/*',
+        'deprecated/**/*',
+        'renderers/**/*',
+        'ui/**/*',
+      ],
       excludedFiles: ['frameworks/angular/**/*', 'frameworks/ember/**/*', 'lib/core-server/**/*'],
       rules: {
         'import/no-extraneous-dependencies': [
@@ -139,12 +147,6 @@ module.exports = {
         'spaced-comment': 'off',
       },
     },
-    {
-      files: ['**/mithril/**/*'],
-      rules: {
-        'react/no-unknown-property': 'off', // Need to deactivate otherwise eslint replaces some unknown properties with React ones
-      },
-    },
     {
       files: ['**/e2e-tests/**/*'],
       rules: {

code/.yarnrc.yml

@@ -25,5 +25,5 @@ plugins:
 unsafeHttpWhitelist:
   - localhost
 
-yarnPath: ../.yarn/releases/yarn-3.4.1.cjs
+yarnPath: ../.yarn/releases/yarn-3.5.1.cjs
 installStatePath: '../.yarn/code-install-state.gz'

code/__mocks__/fs-extra.js

@@ -15,6 +15,7 @@ function __setMockFiles(newMockFiles) {
 const readFile = async (filePath) => mockFiles[filePath];
 const readFileSync = (filePath = '') => mockFiles[filePath];
 const existsSync = (filePath) => !!mockFiles[filePath];
+const readJson = (filePath = '') => JSON.parse(mockFiles[filePath]);
 const readJsonSync = (filePath = '') => JSON.parse(mockFiles[filePath]);
 const lstatSync = (filePath) => ({
   isFile: () => !!mockFiles[filePath],
@@ -24,6 +25,7 @@ const lstatSync = (filePath) => ({
 fs.__setMockFiles = __setMockFiles;
 fs.readFile = readFile;
 fs.readFileSync = readFileSync;
+fs.readJson = readJson;
 fs.readJsonSync = readJsonSync;
 fs.existsSync = existsSync;
 fs.lstatSync = lstatSync;

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "7.1.0-alpha.7",
+  "version": "7.1.0-alpha.29",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
@@ -18,7 +18,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/a11y"
+    "directory": "code/addons/a11y"
   },
   "funding": {
     "type": "opencollective",
@@ -27,25 +27,25 @@
   "license": "MIT",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "node": "./dist/index.js",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.mjs"
     },
     "./manager": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./preview": {
+      "types": "./dist/preview.d.ts",
       "require": "./dist/preview.js",
-      "import": "./dist/preview.mjs",
-      "types": "./dist/preview.d.ts"
+      "import": "./dist/preview.mjs"
     },
     "./register": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./package.json": "./package.json"
   },
@@ -63,16 +63,16 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addon-highlight": "7.1.0-alpha.7",
-    "@storybook/channels": "7.1.0-alpha.7",
-    "@storybook/client-logger": "7.1.0-alpha.7",
-    "@storybook/components": "7.1.0-alpha.7",
-    "@storybook/core-events": "7.1.0-alpha.7",
+    "@storybook/addon-highlight": "7.1.0-alpha.29",
+    "@storybook/channels": "7.1.0-alpha.29",
+    "@storybook/client-logger": "7.1.0-alpha.29",
+    "@storybook/components": "7.1.0-alpha.29",
+    "@storybook/core-events": "7.1.0-alpha.29",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.1.0-alpha.7",
-    "@storybook/preview-api": "7.1.0-alpha.7",
-    "@storybook/theming": "7.1.0-alpha.7",
-    "@storybook/types": "7.1.0-alpha.7",
+    "@storybook/manager-api": "7.1.0-alpha.29",
+    "@storybook/preview-api": "7.1.0-alpha.29",
+    "@storybook/theming": "7.1.0-alpha.29",
+    "@storybook/types": "7.1.0-alpha.29",
     "axe-core": "^4.2.0",
     "lodash": "^4.17.21",
     "react-resize-detector": "^7.1.2"
@@ -104,7 +104,7 @@
       "./src/preview.tsx"
     ]
   },
-  "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
     "displayName": "Accessibility",
     "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",

code/addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "7.1.0-alpha.7",
+  "version": "7.1.0-alpha.29",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",
@@ -14,7 +14,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/actions"
+    "directory": "code/addons/actions"
   },
   "funding": {
     "type": "opencollective",
@@ -23,30 +23,30 @@
   "license": "MIT",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "node": "./dist/index.js",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.mjs"
     },
     "./decorator": {
+      "types": "./dist/decorator.d.ts",
       "require": "./dist/decorator.js",
-      "import": "./dist/decorator.mjs",
-      "types": "./dist/decorator.d.ts"
+      "import": "./dist/decorator.mjs"
     },
     "./manager": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./preview": {
+      "types": "./dist/preview.d.ts",
       "require": "./dist/preview.js",
-      "import": "./dist/preview.mjs",
-      "types": "./dist/preview.d.ts"
+      "import": "./dist/preview.mjs"
     },
     "./register.js": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./package.json": "./package.json"
   },
@@ -80,14 +80,14 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.1.0-alpha.7",
-    "@storybook/components": "7.1.0-alpha.7",
-    "@storybook/core-events": "7.1.0-alpha.7",
+    "@storybook/client-logger": "7.1.0-alpha.29",
+    "@storybook/components": "7.1.0-alpha.29",
+    "@storybook/core-events": "7.1.0-alpha.29",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.1.0-alpha.7",
-    "@storybook/preview-api": "7.1.0-alpha.7",
-    "@storybook/theming": "7.1.0-alpha.7",
-    "@storybook/types": "7.1.0-alpha.7",
+    "@storybook/manager-api": "7.1.0-alpha.29",
+    "@storybook/preview-api": "7.1.0-alpha.29",
+    "@storybook/theming": "7.1.0-alpha.29",
+    "@storybook/types": "7.1.0-alpha.29",
     "dequal": "^2.0.2",
     "lodash": "^4.17.21",
     "polished": "^4.2.2",
@@ -95,10 +95,11 @@
     "react-inspector": "^6.0.0",
     "telejson": "^7.0.3",
     "ts-dedent": "^2.0.0",
-    "uuid-browser": "^3.1.0"
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.167",
+    "@types/uuid": "^9.0.1",
     "typescript": "~4.9.3"
   },
   "peerDependencies": {
@@ -124,7 +125,7 @@
       "./src/preview.ts"
     ]
   },
-  "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
     "displayName": "Actions",
     "unsupportedFrameworks": [

code/addons/actions/src/decorator.ts

@@ -1,5 +1,6 @@
 import { global } from '@storybook/global';
 import { useEffect, makeDecorator } from '@storybook/preview-api';
+import type { PartialStoryFn, Renderer } from '@storybook/types';
 import { actions } from './runtime/actions';
 
 import { PARAM_KEY } from './constants';
@@ -51,15 +52,20 @@ const applyEventHandlers = (actionsFn: any, ...handles: any[]) => {
   }, [root, actionsFn, handles]);
 };
 
-export const withActions = makeDecorator({
-  name: 'withActions',
-  parameterName: PARAM_KEY,
-  skipIfNoParametersOrOptions: true,
-  wrapper: (getStory, context, { parameters }) => {
-    if (parameters?.['handles']) {
-      applyEventHandlers(actions, ...parameters['handles']);
-    }
+// This type is basically the same as DecoratorFunction from @storybook/types.
+// We can not use DecoratorFunction though as the type has to be generic.
+// Hard to explain, but you will understand when you try to solve this issue:
+// https://github.com/storybookjs/storybook/issues/22384
+export const withActions: <T extends Renderer>(storyFn: PartialStoryFn<T>) => T['storyResult'] =
+  makeDecorator({
+    name: 'withActions',
+    parameterName: PARAM_KEY,
+    skipIfNoParametersOrOptions: true,
+    wrapper: (getStory, context, { parameters }) => {
+      if (parameters?.['handles']) {
+        applyEventHandlers(actions, ...parameters['handles']);
+      }
 
-    return getStory(context);
-  },
-});
+      return getStory(context);
+    },
+  });

code/addons/actions/src/runtime/action.ts

@@ -1,4 +1,4 @@
-import uuidv4 from 'uuid-browser/v4';
+import { v4 as uuidv4 } from 'uuid';
 import { addons } from '@storybook/preview-api';
 import { EVENT_ID } from '../constants';
 import type { ActionDisplay, ActionOptions, HandlerFunction } from '../models';

code/addons/actions/src/typings.d.ts

@@ -1,2 +0,0 @@
-// TODO: following packages need definition files or a TS migration
-declare module 'uuid-browser/v4';

code/addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "7.1.0-alpha.7",
+  "version": "7.1.0-alpha.29",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
@@ -17,7 +17,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/backgrounds"
+    "directory": "code/addons/backgrounds"
   },
   "funding": {
     "type": "opencollective",
@@ -27,25 +27,25 @@
   "author": "jbaxleyiii",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "node": "./dist/index.js",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.mjs"
     },
     "./manager": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./preview": {
+      "types": "./dist/preview.d.ts",
       "require": "./dist/preview.js",
-      "import": "./dist/preview.mjs",
-      "types": "./dist/preview.d.ts"
+      "import": "./dist/preview.mjs"
     },
     "./register": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./package.json": "./package.json"
   },
@@ -76,14 +76,14 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.1.0-alpha.7",
-    "@storybook/components": "7.1.0-alpha.7",
-    "@storybook/core-events": "7.1.0-alpha.7",
+    "@storybook/client-logger": "7.1.0-alpha.29",
+    "@storybook/components": "7.1.0-alpha.29",
+    "@storybook/core-events": "7.1.0-alpha.29",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.1.0-alpha.7",
-    "@storybook/preview-api": "7.1.0-alpha.7",
-    "@storybook/theming": "7.1.0-alpha.7",
-    "@storybook/types": "7.1.0-alpha.7",
+    "@storybook/manager-api": "7.1.0-alpha.29",
+    "@storybook/preview-api": "7.1.0-alpha.29",
+    "@storybook/theming": "7.1.0-alpha.29",
+    "@storybook/types": "7.1.0-alpha.29",
     "memoizerific": "^1.11.3",
     "ts-dedent": "^2.0.0"
   },
@@ -112,7 +112,7 @@
       "./src/preview.tsx"
     ]
   },
-  "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
     "displayName": "Backgrounds",
     "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",

code/addons/backgrounds/src/preview.tsx

@@ -1,8 +1,9 @@
+import type { Addon_DecoratorFunction } from '@storybook/types';
 import { withBackground } from './decorators/withBackground';
 import { withGrid } from './decorators/withGrid';
 import { PARAM_KEY } from './constants';
 
-export const decorators = [withGrid, withBackground];
+export const decorators: Addon_DecoratorFunction[] = [withGrid, withBackground];
 export const parameters = {
   [PARAM_KEY]: {
     grid: {

code/addons/backgrounds/tsconfig.json

@@ -1,4 +1,7 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"]
+  "include": ["src/**/*"],
+  "compilerOptions": {
+    "strict": false
+  }
 }

code/addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "7.1.0-alpha.7",
+  "version": "7.1.0-alpha.29",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",
@@ -18,7 +18,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/controls"
+    "directory": "code/addons/controls"
   },
   "funding": {
     "type": "opencollective",
@@ -27,20 +27,20 @@
   "license": "MIT",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "node": "./dist/index.js",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.mjs"
     },
     "./manager": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./register": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./package.json": "./package.json"
   },
@@ -68,15 +68,15 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/blocks": "7.1.0-alpha.7",
-    "@storybook/client-logger": "7.1.0-alpha.7",
-    "@storybook/components": "7.1.0-alpha.7",
-    "@storybook/core-common": "7.1.0-alpha.7",
-    "@storybook/manager-api": "7.1.0-alpha.7",
-    "@storybook/node-logger": "7.1.0-alpha.7",
-    "@storybook/preview-api": "7.1.0-alpha.7",
-    "@storybook/theming": "7.1.0-alpha.7",
-    "@storybook/types": "7.1.0-alpha.7",
+    "@storybook/blocks": "7.1.0-alpha.29",
+    "@storybook/client-logger": "7.1.0-alpha.29",
+    "@storybook/components": "7.1.0-alpha.29",
+    "@storybook/core-common": "7.1.0-alpha.29",
+    "@storybook/manager-api": "7.1.0-alpha.29",
+    "@storybook/node-logger": "7.1.0-alpha.29",
+    "@storybook/preview-api": "7.1.0-alpha.29",
+    "@storybook/theming": "7.1.0-alpha.29",
+    "@storybook/types": "7.1.0-alpha.29",
     "lodash": "^4.17.21",
     "ts-dedent": "^2.0.0"
   },
@@ -102,7 +102,7 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
     "displayName": "Controls",
     "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",

code/addons/controls/template/stories/basics.stories.ts

@@ -4,7 +4,8 @@ import type { PartialStoryFn, StoryContext } from '@storybook/types';
 export default {
   component: globalThis.Components.Pre,
   decorators: [
-    (storyFn: PartialStoryFn, context: StoryContext) => storyFn({ args: { object: context.args } }),
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ args: { object: { ...context.args } } }),
   ],
   argTypes: {
     boolean: { control: 'boolean' },

code/addons/controls/template/stories/conditional.stories.ts

@@ -4,7 +4,8 @@ import type { PartialStoryFn, StoryContext } from '@storybook/types';
 export default {
   component: globalThis.Components.Pre,
   decorators: [
-    (storyFn: PartialStoryFn, context: StoryContext) => storyFn({ args: { object: context.args } }),
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ args: { object: { ...context.args } } }),
   ],
 };
 

code/addons/controls/template/stories/disable.stories.ts

@@ -4,7 +4,8 @@ import type { PartialStoryFn, StoryContext } from '@storybook/types';
 export default {
   component: globalThis.Components.Pre,
   decorators: [
-    (storyFn: PartialStoryFn, context: StoryContext) => storyFn({ args: { object: context.args } }),
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ args: { object: { ...context.args } } }),
   ],
 };
 

code/addons/controls/template/stories/filters.stories.ts

@@ -4,7 +4,8 @@ import type { PartialStoryFn, StoryContext } from '@storybook/types';
 export default {
   component: globalThis.Components.Pre,
   decorators: [
-    (storyFn: PartialStoryFn, context: StoryContext) => storyFn({ args: { object: context.args } }),
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ args: { object: { ...context.args } } }),
   ],
   args: {
     helloWorld: 1,

code/addons/controls/template/stories/issues.stories.ts

@@ -4,7 +4,8 @@ import type { PartialStoryFn, StoryContext } from '@storybook/types';
 export default {
   component: globalThis.Components.Pre,
   decorators: [
-    (storyFn: PartialStoryFn, context: StoryContext) => storyFn({ args: { object: context.args } }),
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ args: { object: { ...context.args } } }),
   ],
 };
 

code/addons/controls/template/stories/matchers.stories.ts

@@ -4,7 +4,8 @@ import type { PartialStoryFn, StoryContext } from '@storybook/types';
 export default {
   component: globalThis.Components.Pre,
   decorators: [
-    (storyFn: PartialStoryFn, context: StoryContext) => storyFn({ args: { object: context.args } }),
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ args: { object: { ...context.args } } }),
   ],
 };
 

code/addons/controls/template/stories/sorting.stories.ts

@@ -4,7 +4,8 @@ import type { PartialStoryFn, StoryContext } from '@storybook/types';
 export default {
   component: globalThis.Components.Pre,
   decorators: [
-    (storyFn: PartialStoryFn, context: StoryContext) => storyFn({ args: { object: context.args } }),
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ args: { object: { ...context.args } } }),
   ],
   argTypes: {
     x: { type: { required: true } },

code/addons/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "7.1.0-alpha.7",
+  "version": "7.1.0-alpha.29",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -17,7 +17,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/docs"
+    "directory": "code/addons/docs"
   },
   "funding": {
     "type": "opencollective",
@@ -27,44 +27,42 @@
   "exports": {
     ".": {
       "node": "./dist/index.js",
+      "types": "./dist/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.mjs"
     },
     "./preview": {
+      "types": "./dist/preview.d.ts",
       "require": "./dist/preview.js",
-      "import": "./dist/preview.mjs",
-      "types": "./dist/preview.d.ts"
+      "import": "./dist/preview.mjs"
     },
     "./preset": {
-      "require": "./dist/preset.js",
-      "import": "./dist/preset.mjs",
-      "types": "./dist/preset.d.ts"
+      "types": "./dist/preset.d.ts",
+      "require": "./dist/preset.js"
     },
     "./blocks": {
+      "types": "./dist/blocks.d.ts",
       "require": "./dist/blocks.js",
-      "import": "./dist/blocks.mjs",
-      "types": "./dist/blocks.d.ts"
+      "import": "./dist/blocks.mjs"
     },
     "./dist/preview": {
+      "types": "./dist/preview.d.ts",
       "require": "./dist/preview.js",
-      "import": "./dist/preview.mjs",
-      "types": "./dist/preview.d.ts"
+      "import": "./dist/preview.mjs"
     },
     "./dist/preset": {
-      "require": "./dist/preset.js",
-      "import": "./dist/preset.mjs",
-      "types": "./dist/preset.d.ts"
+      "types": "./dist/preset.d.ts",
+      "require": "./dist/preset.js"
     },
     "./dist/shims/mdx-react-shim": {
+      "types": "./dist/shims/mdx-react-shim.d.ts",
       "require": "./dist/shims/mdx-react-shim.js",
-      "import": "./dist/shims/mdx-react-shim.mjs",
-      "types": "./dist/shims/mdx-react-shim.d.ts"
+      "import": "./dist/shims/mdx-react-shim.mjs"
     },
     "./mdx-react-shim": {
+      "types": "./dist/shims/mdx-react-shim.d.ts",
       "require": "./dist/shims/mdx-react-shim.js",
-      "import": "./dist/shims/mdx-react-shim.mjs",
-      "types": "./dist/shims/mdx-react-shim.d.ts"
+      "import": "./dist/shims/mdx-react-shim.mjs"
     },
     "./svelte/HOC.svelte": "./svelte/HOC.svelte",
     "./ember": "./ember/index.js",
@@ -101,19 +99,19 @@
   "dependencies": {
     "@jest/transform": "^29.3.1",
     "@mdx-js/react": "^2.1.5",
-    "@storybook/blocks": "7.1.0-alpha.7",
-    "@storybook/client-logger": "7.1.0-alpha.7",
-    "@storybook/components": "7.1.0-alpha.7",
-    "@storybook/csf-plugin": "7.1.0-alpha.7",
-    "@storybook/csf-tools": "7.1.0-alpha.7",
+    "@storybook/blocks": "7.1.0-alpha.29",
+    "@storybook/client-logger": "7.1.0-alpha.29",
+    "@storybook/components": "7.1.0-alpha.29",
+    "@storybook/csf-plugin": "7.1.0-alpha.29",
+    "@storybook/csf-tools": "7.1.0-alpha.29",
     "@storybook/global": "^5.0.0",
     "@storybook/mdx2-csf": "^1.0.0",
-    "@storybook/node-logger": "7.1.0-alpha.7",
-    "@storybook/postinstall": "7.1.0-alpha.7",
-    "@storybook/preview-api": "7.1.0-alpha.7",
-    "@storybook/react-dom-shim": "7.1.0-alpha.7",
-    "@storybook/theming": "7.1.0-alpha.7",
-    "@storybook/types": "7.1.0-alpha.7",
+    "@storybook/node-logger": "7.1.0-alpha.29",
+    "@storybook/postinstall": "7.1.0-alpha.29",
+    "@storybook/preview-api": "7.1.0-alpha.29",
+    "@storybook/react-dom-shim": "7.1.0-alpha.29",
+    "@storybook/theming": "7.1.0-alpha.29",
+    "@storybook/types": "7.1.0-alpha.29",
     "fs-extra": "^11.1.0",
     "remark-external-links": "^8.0.0",
     "remark-slug": "^6.0.0",
@@ -143,7 +141,7 @@
       "@storybook/mdx1-csf"
     ]
   },
-  "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
     "displayName": "Docs",
     "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",

code/addons/docs/src/DocsRenderer.tsx

@@ -48,6 +48,8 @@ export class DocsRenderer<TRenderer extends Renderer> {
         ...docsParameter?.components,
       };
 
+      const TDocs = Docs as typeof Docs<TRenderer>;
+
       return new Promise((resolve, reject) => {
         import('@mdx-js/react')
           .then(({ MDXProvider }) =>
@@ -55,13 +57,13 @@ export class DocsRenderer<TRenderer extends Renderer> {
             renderElement(
               <ErrorBoundary showException={reject} key={Math.random()}>
                 <MDXProvider components={components}>
-                  <Docs context={context} docsParameter={docsParameter} />
+                  <TDocs context={context} docsParameter={docsParameter} />
                 </MDXProvider>
               </ErrorBoundary>,
               element
             )
           )
-          .then(resolve);
+          .then(() => resolve());
       });
     };
 

code/addons/docs/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "strict": true
   },
   "include": ["src/**/*"]
 }

code/addons/essentials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "7.1.0-alpha.7",
+  "version": "7.1.0-alpha.29",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",
@@ -14,7 +14,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/essentials"
+    "directory": "code/addons/essentials"
   },
   "funding": {
     "type": "opencollective",
@@ -24,84 +24,84 @@
   "exports": {
     ".": {
       "node": "./dist/index.js",
+      "types": "./dist/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.mjs"
     },
     "./actions/preview": {
+      "types": "./dist/actions/preview.d.ts",
       "require": "./dist/actions/preview.js",
-      "import": "./dist/actions/preview.mjs",
-      "types": "./dist/actions/preview.d.ts"
+      "import": "./dist/actions/preview.mjs"
     },
     "./actions/manager": {
+      "types": "./dist/actions/manager.d.ts",
       "require": "./dist/actions/manager.js",
-      "import": "./dist/actions/manager.mjs",
-      "types": "./dist/actions/manager.d.ts"
+      "import": "./dist/actions/manager.mjs"
     },
     "./backgrounds/preview": {
+      "types": "./dist/backgrounds/preview.d.ts",
       "require": "./dist/backgrounds/preview.js",
-      "import": "./dist/backgrounds/preview.mjs",
-      "types": "./dist/backgrounds/preview.d.ts"
+      "import": "./dist/backgrounds/preview.mjs"
     },
     "./backgrounds/manager": {
+      "types": "./dist/backgrounds/manager.d.ts",
       "require": "./dist/backgrounds/manager.js",
-      "import": "./dist/backgrounds/manager.mjs",
-      "types": "./dist/backgrounds/manager.d.ts"
+      "import": "./dist/backgrounds/manager.mjs"
     },
     "./controls/manager": {
+      "types": "./dist/controls/manager.d.ts",
       "require": "./dist/controls/manager.js",
-      "import": "./dist/controls/manager.mjs",
-      "types": "./dist/controls/manager.d.ts"
+      "import": "./dist/controls/manager.mjs"
     },
     "./docs/preview": {
+      "types": "./dist/docs/preview.d.ts",
       "require": "./dist/docs/preview.js",
-      "import": "./dist/docs/preview.mjs",
-      "types": "./dist/docs/preview.d.ts"
+      "import": "./dist/docs/preview.mjs"
     },
     "./docs/preset": {
+      "types": "./dist/docs/preset.d.ts",
       "require": "./dist/docs/preset.js",
-      "import": "./dist/docs/preset.mjs",
-      "types": "./dist/docs/preset.d.ts"
+      "import": "./dist/docs/preset.mjs"
     },
     "./docs/mdx-react-shim": {
+      "types": "./dist/docs/mdx-react-shim.d.ts",
       "require": "./dist/docs/mdx-react-shim.js",
-      "import": "./dist/docs/mdx-react-shim.mjs",
-      "types": "./dist/docs/mdx-react-shim.d.ts"
+      "import": "./dist/docs/mdx-react-shim.mjs"
     },
     "./highlight/preview": {
+      "types": "./dist/highlight/preview.d.ts",
       "require": "./dist/highlight/preview.js",
-      "import": "./dist/highlight/preview.mjs",
-      "types": "./dist/highlight/preview.d.ts"
+      "import": "./dist/highlight/preview.mjs"
     },
     "./measure/preview": {
+      "types": "./dist/measure/preview.d.ts",
       "require": "./dist/measure/preview.js",
-      "import": "./dist/measure/preview.mjs",
-      "types": "./dist/measure/preview.d.ts"
+      "import": "./dist/measure/preview.mjs"
     },
     "./measure/manager": {
+      "types": "./dist/measure/manager.d.ts",
       "require": "./dist/measure/manager.js",
-      "import": "./dist/measure/manager.mjs",
-      "types": "./dist/measure/manager.d.ts"
+      "import": "./dist/measure/manager.mjs"
     },
     "./outline/preview": {
+      "types": "./dist/outline/preview.d.ts",
       "require": "./dist/outline/preview.js",
-      "import": "./dist/outline/preview.mjs",
-      "types": "./dist/outline/preview.d.ts"
+      "import": "./dist/outline/preview.mjs"
     },
     "./outline/manager": {
+      "types": "./dist/outline/manager.d.ts",
       "require": "./dist/outline/manager.js",
-      "import": "./dist/outline/manager.mjs",
-      "types": "./dist/outline/manager.d.ts"
+      "import": "./dist/outline/manager.mjs"
     },
     "./toolbars/manager": {
+      "types": "./dist/toolbars/manager.d.ts",
       "require": "./dist/toolbars/manager.js",
-      "import": "./dist/toolbars/manager.mjs",
-      "types": "./dist/toolbars/manager.d.ts"
+      "import": "./dist/toolbars/manager.mjs"
     },
     "./viewport/manager": {
+      "types": "./dist/viewport/manager.d.ts",
       "require": "./dist/viewport/manager.js",
-      "import": "./dist/viewport/manager.mjs",
-      "types": "./dist/viewport/manager.d.ts"
+      "import": "./dist/viewport/manager.mjs"
     },
     "./package.json": "./package.json"
   },
@@ -119,23 +119,23 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addon-actions": "7.1.0-alpha.7",
-    "@storybook/addon-backgrounds": "7.1.0-alpha.7",
-    "@storybook/addon-controls": "7.1.0-alpha.7",
-    "@storybook/addon-docs": "7.1.0-alpha.7",
-    "@storybook/addon-highlight": "7.1.0-alpha.7",
-    "@storybook/addon-measure": "7.1.0-alpha.7",
-    "@storybook/addon-outline": "7.1.0-alpha.7",
-    "@storybook/addon-toolbars": "7.1.0-alpha.7",
-    "@storybook/addon-viewport": "7.1.0-alpha.7",
-    "@storybook/core-common": "7.1.0-alpha.7",
-    "@storybook/manager-api": "7.1.0-alpha.7",
-    "@storybook/node-logger": "7.1.0-alpha.7",
-    "@storybook/preview-api": "7.1.0-alpha.7",
+    "@storybook/addon-actions": "7.1.0-alpha.29",
+    "@storybook/addon-backgrounds": "7.1.0-alpha.29",
+    "@storybook/addon-controls": "7.1.0-alpha.29",
+    "@storybook/addon-docs": "7.1.0-alpha.29",
+    "@storybook/addon-highlight": "7.1.0-alpha.29",
+    "@storybook/addon-measure": "7.1.0-alpha.29",
+    "@storybook/addon-outline": "7.1.0-alpha.29",
+    "@storybook/addon-toolbars": "7.1.0-alpha.29",
+    "@storybook/addon-viewport": "7.1.0-alpha.29",
+    "@storybook/core-common": "7.1.0-alpha.29",
+    "@storybook/manager-api": "7.1.0-alpha.29",
+    "@storybook/node-logger": "7.1.0-alpha.29",
+    "@storybook/preview-api": "7.1.0-alpha.29",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@storybook/vue": "7.1.0-alpha.7",
+    "@storybook/vue": "7.1.0-alpha.29",
     "typescript": "^4.9.3"
   },
   "peerDependencies": {
@@ -166,5 +166,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc"
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
 }

code/addons/gfm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "7.1.0-alpha.7",
+  "version": "7.1.0-alpha.29",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",
@@ -17,7 +17,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/gfm"
+    "directory": "code/addons/gfm"
   },
   "funding": {
     "type": "opencollective",
@@ -26,14 +26,14 @@
   "license": "MIT",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "node": "./dist/index.js",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     },
     "./preset": {
+      "types": "./dist/index.d.ts",
       "node": "./dist/index.js",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
@@ -51,7 +51,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/node-logger": "7.1.0-alpha.7",
+    "@storybook/node-logger": "7.1.0-alpha.29",
     "remark-gfm": "^3.0.1",
     "ts-dedent": "^2.0.0"
   },
@@ -69,5 +69,5 @@
       "cjs"
     ]
   },
-  "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc"
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
 }

code/addons/gfm/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "strict": true
   },
   "include": ["src/**/*"]
 }

code/addons/highlight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "7.1.0-alpha.7",
+  "version": "7.1.0-alpha.29",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",
@@ -15,7 +15,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/highlight"
+    "directory": "code/addons/highlight"
   },
   "funding": {
     "type": "opencollective",
@@ -25,15 +25,15 @@
   "author": "winkerVSbecks",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "node": "./dist/index.js",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.mjs"
     },
     "./preview": {
+      "types": "./dist/preview.d.ts",
       "require": "./dist/preview.js",
-      "import": "./dist/preview.mjs",
-      "types": "./dist/preview.d.ts"
+      "import": "./dist/preview.mjs"
     },
     "./package.json": "./package.json"
   },
@@ -61,9 +61,9 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-events": "7.1.0-alpha.7",
+    "@storybook/core-events": "7.1.0-alpha.29",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.1.0-alpha.7"
+    "@storybook/preview-api": "7.1.0-alpha.29"
   },
   "devDependencies": {
     "@types/webpack-env": "^1.16.0",
@@ -78,7 +78,7 @@
       "./src/preview.ts"
     ]
   },
-  "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Highlight",

code/addons/highlight/src/preview.ts

@@ -53,7 +53,7 @@ const resetHighlight = () => {
   const id = HIGHLIGHT_STYLE_ID;
   const sheetToBeRemoved = document.getElementById(id);
   if (sheetToBeRemoved) {
-    sheetToBeRemoved.parentNode.removeChild(sheetToBeRemoved);
+    sheetToBeRemoved.parentNode?.removeChild(sheetToBeRemoved);
   }
 };
 

code/addons/highlight/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "rootDir": "./src",
-    "types": ["webpack-env"]
+    "types": ["webpack-env"],
+    "strict": true
   },
   "include": ["src/**/*"]
 }

code/addons/interactions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "7.1.0-alpha.7",
+  "version": "7.1.0-alpha.29",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",
@@ -14,7 +14,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/interactions"
+    "directory": "code/addons/interactions"
   },
   "funding": {
     "type": "opencollective",
@@ -23,25 +23,25 @@
   "license": "MIT",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "node": "./dist/index.js",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.mjs"
     },
     "./manager": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./preview": {
+      "types": "./dist/preview.d.ts",
       "require": "./dist/preview.js",
-      "import": "./dist/preview.mjs",
-      "types": "./dist/preview.d.ts"
+      "import": "./dist/preview.mjs"
     },
     "./register.js": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./package.json": "./package.json"
   },
@@ -72,17 +72,17 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.1.0-alpha.7",
-    "@storybook/components": "7.1.0-alpha.7",
-    "@storybook/core-common": "7.1.0-alpha.7",
-    "@storybook/core-events": "7.1.0-alpha.7",
+    "@storybook/client-logger": "7.1.0-alpha.29",
+    "@storybook/components": "7.1.0-alpha.29",
+    "@storybook/core-common": "7.1.0-alpha.29",
+    "@storybook/core-events": "7.1.0-alpha.29",
     "@storybook/global": "^5.0.0",
-    "@storybook/instrumenter": "7.1.0-alpha.7",
-    "@storybook/manager-api": "7.1.0-alpha.7",
-    "@storybook/preview-api": "7.1.0-alpha.7",
-    "@storybook/theming": "7.1.0-alpha.7",
-    "@storybook/types": "7.1.0-alpha.7",
-    "jest-mock": "^27.0.6",
+    "@storybook/instrumenter": "7.1.0-alpha.29",
+    "@storybook/manager-api": "7.1.0-alpha.29",
+    "@storybook/preview-api": "7.1.0-alpha.29",
+    "@storybook/theming": "7.1.0-alpha.29",
+    "@storybook/types": "7.1.0-alpha.29",
+    "jest-mock": "^29.5.0",
     "polished": "^4.2.2",
     "ts-dedent": "^2.2.0"
   },
@@ -114,11 +114,10 @@
       "./src/index.ts",
       "./src/manager.tsx",
       "./src/preview.ts",
-      "./src/preset/checkActionsLoaded.ts"
-    ],
-    "platform": "node"
+      "./src/preset.ts"
+    ]
   },
-  "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
     "displayName": "Interactions",
     "unsupportedFrameworks": [

code/addons/interactions/preset.js

@@ -1,4 +1,4 @@
-const { checkActionsLoaded } = require('./dist/preset/checkActionsLoaded');
+const { checkActionsLoaded } = require('./dist/preset');
 
 function previewAnnotations(entry = [], options) {
   checkActionsLoaded(options.configDir);

code/addons/interactions/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "types": ["testing-library__jest-dom"]
+    "types": ["testing-library__jest-dom"],
+    "strict": false
   },
   "include": ["src/**/*"]
 }

code/addons/jest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "7.1.0-alpha.7",
+  "version": "7.1.0-alpha.29",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",
@@ -19,7 +19,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/jest"
+    "directory": "code/addons/jest"
   },
   "funding": {
     "type": "opencollective",
@@ -29,20 +29,20 @@
   "author": "Renaud Tertrais <renaud.tertrais@gmail.com> (https://github.com/renaudtertrais)",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "node": "./dist/index.js",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.mjs"
     },
     "./manager": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./register": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./package.json": "./package.json"
   },
@@ -70,15 +70,16 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.1.0-alpha.7",
-    "@storybook/components": "7.1.0-alpha.7",
-    "@storybook/core-events": "7.1.0-alpha.7",
+    "@storybook/client-logger": "7.1.0-alpha.29",
+    "@storybook/components": "7.1.0-alpha.29",
+    "@storybook/core-events": "7.1.0-alpha.29",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.1.0-alpha.7",
-    "@storybook/preview-api": "7.1.0-alpha.7",
-    "@storybook/theming": "7.1.0-alpha.7",
+    "@storybook/manager-api": "7.1.0-alpha.29",
+    "@storybook/preview-api": "7.1.0-alpha.29",
+    "@storybook/theming": "7.1.0-alpha.29",
     "react-resize-detector": "^7.1.2",
-    "upath": "^1.2.0"
+    "tiny-invariant": "^1.3.1",
+    "upath": "^2.0.1"
   },
   "devDependencies": {
     "typescript": "~4.9.3"
@@ -105,7 +106,7 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
     "displayName": "Jest",
     "icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",

code/addons/jest/src/components/Message.tsx

@@ -15,11 +15,11 @@ const titleEndToken = ':';
 type MsgElement = string | JSX.Element;
 
 class TestDetail {
-  description: MsgElement[];
+  description!: MsgElement[];
 
-  result: MsgElement[];
+  result!: MsgElement[];
 
-  stackTrace: string;
+  stackTrace!: string;
 }
 const StackTrace = styled.pre(({ theme }) => ({
   background: theme.color.lighter,

code/addons/jest/src/components/Panel.tsx

@@ -75,7 +75,7 @@ const SuiteTotals = styled(UnstyledSuiteTotals)(({ theme }) => ({
   },
 }));
 
-const SuiteProgressPortion = styled.div<{ color: any; progressPercent: number }>(
+const SuiteProgressPortion = styled.div<{ color?: string; progressPercent: number }>(
   ({ color, progressPercent }) => ({
     height: 6,
     top: 3,
@@ -114,7 +114,7 @@ const getColorByType = (type: string) => {
     case StatusTypes.TODO_TYPE:
       return convert(themes.light).color.purple;
     default:
-      return null;
+      return undefined;
   }
 };
 
@@ -132,8 +132,8 @@ const TestPanel: FC<{ test: Test }> = ({ test }) => {
   return (
     <section ref={ref}>
       <SuiteHead>
-        <SuiteTotals {...{ result, width }} />
-        {width > 240 ? (
+        <SuiteTotals {...{ result, width: width ?? 0 }} />
+        {width != null && width > 240 ? (
           <ProgressWrapper>
             {sortedTestsByCount.map((entry: any) => {
               return (
@@ -261,7 +261,7 @@ const Content = styled(({ tests, className }: ContentProps) => (
 });
 
 interface PanelProps {
-  tests: null | Test[];
+  tests?: Test[];
 }
 
 const Panel = ({ tests }: PanelProps) => (
@@ -287,7 +287,7 @@ const Panel = ({ tests }: PanelProps) => (
 );
 
 Panel.defaultProps = {
-  tests: null,
+  tests: undefined,
 };
 
 export default provideJestResult(Panel);

code/addons/jest/src/components/Result.tsx

@@ -1,6 +1,7 @@
 import React, { Fragment, useState } from 'react';
 import { styled, themes, convert } from '@storybook/theming';
 import { Icons } from '@storybook/components';
+// eslint-disable-next-line import/no-named-as-default
 import Message from './Message';
 
 const Wrapper = styled.div<{ status: string }>(({ theme, status }) => ({
@@ -8,7 +9,7 @@ const Wrapper = styled.div<{ status: string }>(({ theme, status }) => ({
   width: '100%',
   borderTop: `1px solid ${theme.appBorderColor}`,
   '&:hover': {
-    background: status === `failed` ? theme.background.hoverable : null,
+    background: status === `failed` ? theme.background.hoverable : undefined,
   },
 }));
 
@@ -18,7 +19,7 @@ const HeaderBar = styled.div<{ status: string }>(({ theme, status }) => ({
   background: 'none',
   color: 'inherit',
   textAlign: 'left',
-  cursor: status === `failed` ? 'pointer' : null,
+  cursor: status === `failed` ? 'pointer' : undefined,
   borderLeft: '3px solid transparent',
   width: '100%',
   display: 'flex',
@@ -72,7 +73,7 @@ export function Result(props: ResultProps) {
               }}
             />
           ) : null}
-          <div>{capitalizeFirstLetter(fullName) || capitalizeFirstLetter(title)}</div>
+          <div>{capitalizeFirstLetter(fullName ?? '') || capitalizeFirstLetter(title ?? '')}</div>
         </HeaderBar>
       </Wrapper>
       {isOpen ? (

code/addons/jest/src/hoc/provideJestResult.tsx

@@ -71,9 +71,9 @@ export const provideTests = (Component: ComponentType<InjectedProps>) =>
       this.setState({ kind, storyName, tests });
     };
 
-    mounted: boolean;
+    mounted!: boolean;
 
-    stopListeningOnStory: () => void;
+    stopListeningOnStory!: () => void;
 
     render() {
       const { active } = this.props;

code/addons/jest/src/shared.ts

@@ -1,3 +1,4 @@
+import invariant from 'tiny-invariant';
 import type { StorybookInternalParameters } from '@storybook/types';
 
 // addons, panels and events get unique names using a prefix
@@ -23,7 +24,9 @@ export function defineJestParameter(parameters: AddonParameters): string[] | nul
   }
 
   if (jest === undefined && typeof filePath === 'string') {
-    const fileName = filePath.split('/').pop().split('.')[0];
+    const lastPath = filePath.split('/').pop();
+    invariant(lastPath != null, 'split should always return at least one value');
+    const fileName = lastPath.split('.')[0];
     return [fileName];
   }
 

code/addons/jest/tsconfig.json

@@ -1,5 +1,7 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {},
+  "compilerOptions": {
+    "strict": true
+  },
   "include": ["src/**/*"]
 }

code/addons/links/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "7.1.0-alpha.7",
+  "version": "7.1.0-alpha.29",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "addon",
@@ -14,7 +14,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/links"
+    "directory": "code/addons/links"
   },
   "funding": {
     "type": "opencollective",
@@ -23,30 +23,30 @@
   "license": "MIT",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "node": "./dist/index.js",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.mjs"
     },
     "./manager": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./preview": {
+      "types": "./dist/preview.d.ts",
       "require": "./dist/preview.js",
-      "import": "./dist/preview.mjs",
-      "types": "./dist/preview.d.ts"
+      "import": "./dist/preview.mjs"
     },
     "./react": {
+      "types": "./dist/react/index.d.ts",
       "require": "./dist/react/index.js",
-      "import": "./dist/react/index.mjs",
-      "types": "./dist/react/index.d.ts"
+      "import": "./dist/react/index.mjs"
     },
     "./register": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./package.json": "./package.json"
   },
@@ -80,14 +80,14 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.1.0-alpha.7",
-    "@storybook/core-events": "7.1.0-alpha.7",
+    "@storybook/client-logger": "7.1.0-alpha.29",
+    "@storybook/core-events": "7.1.0-alpha.29",
     "@storybook/csf": "^0.1.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.1.0-alpha.7",
-    "@storybook/preview-api": "7.1.0-alpha.7",
-    "@storybook/router": "7.1.0-alpha.7",
-    "@storybook/types": "7.1.0-alpha.7",
+    "@storybook/manager-api": "7.1.0-alpha.29",
+    "@storybook/preview-api": "7.1.0-alpha.29",
+    "@storybook/router": "7.1.0-alpha.29",
+    "@storybook/types": "7.1.0-alpha.29",
     "prop-types": "^15.7.2",
     "ts-dedent": "^2.0.0"
   },
@@ -119,12 +119,11 @@
     ],
     "post": "./scripts/fix-preview-api-reference.ts"
   },
-  "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
     "displayName": "Links",
     "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",
     "unsupportedFrameworks": [
-      "marko",
       "react-native"
     ]
   }

code/addons/links/src/preview.ts

@@ -1,3 +1,4 @@
+import type { Addon_DecoratorFunction } from '@storybook/types';
 import { withLinks } from './index';
 
-export const decorators = [withLinks];
+export const decorators: Addon_DecoratorFunction[] = [withLinks];

code/addons/measure/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "7.1.0-alpha.7",
+  "version": "7.1.0-alpha.29",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",
@@ -16,7 +16,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/measure"
+    "directory": "code/addons/measure"
   },
   "funding": {
     "type": "opencollective",
@@ -26,25 +26,25 @@
   "author": "winkerVSbecks",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "node": "./dist/index.js",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.mjs"
     },
     "./manager": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./preview": {
+      "types": "./dist/preview.d.ts",
       "require": "./dist/preview.js",
-      "import": "./dist/preview.mjs",
-      "types": "./dist/preview.d.ts"
+      "import": "./dist/preview.mjs"
     },
     "./register": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./package.json": "./package.json"
   },
@@ -75,13 +75,14 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.1.0-alpha.7",
-    "@storybook/components": "7.1.0-alpha.7",
-    "@storybook/core-events": "7.1.0-alpha.7",
+    "@storybook/client-logger": "7.1.0-alpha.29",
+    "@storybook/components": "7.1.0-alpha.29",
+    "@storybook/core-events": "7.1.0-alpha.29",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.1.0-alpha.7",
-    "@storybook/preview-api": "7.1.0-alpha.7",
-    "@storybook/types": "7.1.0-alpha.7"
+    "@storybook/manager-api": "7.1.0-alpha.29",
+    "@storybook/preview-api": "7.1.0-alpha.29",
+    "@storybook/types": "7.1.0-alpha.29",
+    "tiny-invariant": "^1.3.1"
   },
   "devDependencies": {
     "typescript": "~4.9.3"
@@ -108,7 +109,7 @@
       "./src/preview.tsx"
     ]
   },
-  "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
     "displayName": "Measure",
     "unsupportedFrameworks": [

code/addons/measure/src/box-model/canvas.ts

@@ -1,5 +1,6 @@
 /* eslint-disable no-param-reassign */
 import { global } from '@storybook/global';
+import invariant from 'tiny-invariant';
 
 interface Size {
   width: number;
@@ -25,6 +26,7 @@ function createCanvas(): CanvasState {
   const canvas = global.document.createElement('canvas');
   canvas.id = 'storybook-addon-measure';
   const context = canvas.getContext('2d');
+  invariant(context != null);
   // Set canvas width & height
   const { width, height } = getDocumentWidthAndHeight();
   setCanvasWidthAndHeight(canvas, context, { width, height });
@@ -67,16 +69,18 @@ export function init() {
 
 export function clear() {
   if (state.context) {
-    state.context.clearRect(0, 0, state.width, state.height);
+    state.context.clearRect(0, 0, state.width ?? 0, state.height ?? 0);
   }
 }
 
-export function draw(callback: (context: CanvasRenderingContext2D) => void) {
+export function draw(callback: (context?: CanvasRenderingContext2D) => void) {
   clear();
   callback(state.context);
 }
 
 export function rescale() {
+  invariant(state.canvas, 'Canvas should exist in the state.');
+  invariant(state.context, 'Context should exist in the state.');
   // First reset so that the canvas size doesn't impact the container size
   setCanvasWidthAndHeight(state.canvas, state.context, { width: 0, height: 0 });
 
@@ -91,7 +95,7 @@ export function rescale() {
 export function destroy() {
   if (state.canvas) {
     clear();
-    state.canvas.parentNode.removeChild(state.canvas);
+    state.canvas.parentNode?.removeChild(state.canvas);
     state = {};
   }
 }

code/addons/measure/src/box-model/labels.ts

@@ -285,7 +285,7 @@ export function labelStacks(
       acc[l.position] = [];
     }
 
-    acc[l.position].push(l);
+    acc[l.position]?.push(l);
 
     return acc;
   }, {});

code/addons/measure/src/box-model/visualizer.ts

@@ -282,7 +282,7 @@ function drawContent(
 }
 
 function drawBoxModel(element: HTMLElement) {
-  return (context: CanvasRenderingContext2D) => {
+  return (context?: CanvasRenderingContext2D) => {
     if (element && context) {
       const measurements = measureElement(element);
 

code/addons/measure/src/preview.tsx

@@ -1,7 +1,8 @@
+import type { Addon_DecoratorFunction } from '@storybook/types';
 import { withMeasure } from './withMeasure';
 import { PARAM_KEY } from './constants';
 
-export const decorators = [withMeasure];
+export const decorators: Addon_DecoratorFunction[] = [withMeasure];
 
 export const globals = {
   [PARAM_KEY]: false,

code/addons/measure/src/withMeasure.ts

@@ -46,7 +46,7 @@ export const withMeasure = (StoryFn: StoryFunction<Renderer>, context: StoryCont
       });
     };
 
-    if (measureEnabled) {
+    if (context.viewMode === 'story' && measureEnabled) {
       document.addEventListener('pointerover', onPointerOver);
       init();
       window.addEventListener('resize', onResize);
@@ -58,7 +58,7 @@ export const withMeasure = (StoryFn: StoryFunction<Renderer>, context: StoryCont
       window.removeEventListener('resize', onResize);
       destroy();
     };
-  }, [measureEnabled]);
+  }, [measureEnabled, context.viewMode]);
 
   return StoryFn();
 };

code/addons/measure/tsconfig.json

@@ -1,4 +1,7 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"]
+  "include": ["src/**/*"],
+  "compilerOptions": {
+    "strict": true
+  }
 }

code/addons/outline/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "7.1.0-alpha.7",
+  "version": "7.1.0-alpha.29",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",
@@ -19,7 +19,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/outline"
+    "directory": "code/addons/outline"
   },
   "funding": {
     "type": "opencollective",
@@ -29,25 +29,25 @@
   "author": "winkerVSbecks",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "node": "./dist/index.js",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.mjs"
     },
     "./manager": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./preview": {
+      "types": "./dist/preview.d.ts",
       "require": "./dist/preview.js",
-      "import": "./dist/preview.mjs",
-      "types": "./dist/preview.d.ts"
+      "import": "./dist/preview.mjs"
     },
     "./register": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./package.json": "./package.json"
   },
@@ -78,13 +78,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.1.0-alpha.7",
-    "@storybook/components": "7.1.0-alpha.7",
-    "@storybook/core-events": "7.1.0-alpha.7",
+    "@storybook/client-logger": "7.1.0-alpha.29",
+    "@storybook/components": "7.1.0-alpha.29",
+    "@storybook/core-events": "7.1.0-alpha.29",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.1.0-alpha.7",
-    "@storybook/preview-api": "7.1.0-alpha.7",
-    "@storybook/types": "7.1.0-alpha.7",
+    "@storybook/manager-api": "7.1.0-alpha.29",
+    "@storybook/preview-api": "7.1.0-alpha.29",
+    "@storybook/types": "7.1.0-alpha.29",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
@@ -112,7 +112,7 @@
       "./src/preview.tsx"
     ]
   },
-  "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
     "displayName": "Outline",
     "unsupportedFrameworks": [

code/addons/outline/src/preview.tsx

@@ -1,7 +1,8 @@
+import type { Addon_DecoratorFunction } from '@storybook/types';
 import { withOutline } from './withOutline';
 import { PARAM_KEY } from './constants';
 
-export const decorators = [withOutline];
+export const decorators: Addon_DecoratorFunction[] = [withOutline];
 
 export const globals = {
   [PARAM_KEY]: false,

code/addons/outline/src/withOutline.ts

@@ -11,7 +11,7 @@ export const withOutline = (StoryFn: StoryFunction<Renderer>, context: StoryCont
   const isInDocs = context.viewMode === 'docs';
 
   const outlineStyles = useMemo(() => {
-    const selector = isInDocs ? `#anchor--${context.id} .docs-story` : '.sb-show-main';
+    const selector = isInDocs ? `[data-story-block="true"]` : '.sb-show-main';
 
     return outlineCSS(selector);
   }, [context]);

code/addons/outline/tsconfig.json

@@ -1,4 +1,7 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"]
+  "include": ["src/**/*"],
+  "compilerOptions": {
+    "strict": true
+  }
 }

code/addons/storyshots-core/README.md

@@ -603,11 +603,10 @@ initStoryshots({
 
 Use this table as a reference for manually specifying the framework.
 
-| angular        | html | preact       |
-| -------------- | ---- | ------------ |
-| react          | riot | react-native |
-| svelte         | vue  | vue3         |
-| web-components | rax  |              |
+| angular | html         | preact         |
+| ------- | ------------ | -------------- |
+| react   | react-native | vue3           |
+| svelte  | vue          | web-components |
 
 ### `test`
 

code/addons/storyshots-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots",
-  "version": "7.1.0-alpha.7",
+  "version": "7.1.0-alpha.29",
   "description": "Take a code snapshot of every story automatically with Jest",
   "keywords": [
     "addon",
@@ -14,7 +14,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/storyshots-core"
+    "directory": "code/addons/storyshots-core"
   },
   "funding": {
     "type": "opencollective",
@@ -32,21 +32,21 @@
     "*.d.ts"
   ],
   "scripts": {
+    "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
     "prep": "../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
     "@jest/transform": "^29.3.1",
     "@storybook/babel-plugin-require-context-hook": "1.0.1",
-    "@storybook/client-api": "7.1.0-alpha.7",
-    "@storybook/core-common": "7.1.0-alpha.7",
-    "@storybook/core-webpack": "7.1.0-alpha.7",
+    "@storybook/client-api": "7.1.0-alpha.29",
+    "@storybook/core-common": "7.1.0-alpha.29",
+    "@storybook/core-webpack": "7.1.0-alpha.29",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.1.0-alpha.7",
-    "@storybook/types": "7.1.0-alpha.7",
-    "@types/glob": "^7.1.3",
+    "@storybook/preview-api": "7.1.0-alpha.29",
+    "@storybook/types": "7.1.0-alpha.29",
     "@types/jest-specific-snapshot": "^0.5.6",
-    "glob": "^8.1.0",
-    "jest-specific-snapshot": "^7.0.0",
+    "glob": "^10.0.0",
+    "jest-specific-snapshot": "^8.0.0",
     "preact-render-to-string": "^5.1.19",
     "pretty-format": "^29.0.0",
     "react-test-renderer": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -57,19 +57,18 @@
     "@angular/core": "^13.3.6",
     "@angular/platform-browser-dynamic": "^13.3.6",
     "@emotion/jest": "^11.8.0",
-    "@storybook/addon-docs": "7.1.0-alpha.7",
-    "@storybook/angular": "7.1.0-alpha.7",
-    "@storybook/react": "7.1.0-alpha.7",
-    "@storybook/vue": "7.1.0-alpha.7",
-    "@storybook/vue3": "7.1.0-alpha.7",
+    "@storybook/addon-docs": "7.1.0-alpha.29",
+    "@storybook/angular": "7.1.0-alpha.29",
+    "@storybook/react": "7.1.0-alpha.29",
+    "@storybook/vue": "7.1.0-alpha.29",
+    "@storybook/vue3": "7.1.0-alpha.29",
     "babel-loader": "^9.1.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "enzyme-to-json": "^3.6.1",
-    "jest-preset-angular": "^12.2.3",
+    "jest-preset-angular": "^13.0.1",
     "jest-vue-preprocessor": "^1.7.1",
     "react-test-renderer": "^16",
-    "rimraf": "^3.0.2",
     "rxjs": "^6.6.3",
     "vue-jest": "^5.0.0-alpha.8"
   },
@@ -142,14 +141,12 @@
     "access": "public"
   },
   "bundler": {},
-  "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
     "displayName": "Storyshots",
     "icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
     "unsupportedFrameworks": [
-      "ember",
-      "mithril",
-      "marko"
+      "ember"
     ]
   }
 }

code/addons/storyshots-core/src/Stories2SnapsConverter.test.ts

@@ -7,7 +7,7 @@ describe('getSnapshotFileName', () => {
     const context = { fileName: 'foo.js', kind: 'kind' };
 
     const result = target.getSnapshotFileName(context);
-    const platformAgnosticResult = result.replace(/\\|\//g, '/');
+    const platformAgnosticResult = result?.replace(/\\|\//g, '/');
 
     // This is an absolute path, so we need to use `toContain()`
     expect(platformAgnosticResult).toContain('__snapshots__/foo.storyshot');
@@ -17,7 +17,7 @@ describe('getSnapshotFileName', () => {
     const context = { fileName: 'foo.web.stories.js', kind: 'kind' };
 
     const result = target.getSnapshotFileName(context);
-    const platformAgnosticResult = result.replace(/\\|\//g, '/');
+    const platformAgnosticResult = result?.replace(/\\|\//g, '/');
 
     // This is an absolute path, so we need to use `toContain()`
     expect(platformAgnosticResult).toContain('__snapshots__/foo.web.stories.storyshot');
@@ -27,7 +27,7 @@ describe('getSnapshotFileName', () => {
     const context = { fileName: 'test/foo.js', kind: 'kind' };
 
     const result = target.getSnapshotFileName(context);
-    const platformAgnosticResult = result.replace(/\\|\//g, '/');
+    const platformAgnosticResult = result?.replace(/\\|\//g, '/');
 
     // This is an absolute path, so we need to use `toContain()`
     expect(platformAgnosticResult).toContain('test/__snapshots__/foo.storyshot');

code/addons/storyshots-core/src/Stories2SnapsConverter.ts

@@ -55,7 +55,7 @@ export class Stories2SnapsConverter {
               }
         `
       );
-      return null;
+      return undefined;
     }
 
     return this.getStoryshotFile(fileName);

code/addons/storyshots-core/src/api/StoryshotsOptions.ts

@@ -1,4 +1,4 @@
-import type { IOptions } from 'glob';
+import type { GlobOptionsWithFileTypesFalse } from 'glob';
 import type { Stories2SnapsConverter } from '../Stories2SnapsConverter';
 import type { SupportedFramework } from '../frameworks';
 import type { RenderTree } from '../frameworks/Loader';
@@ -9,7 +9,7 @@ export interface TestMethodOptions {
   renderTree: RenderTree;
   renderShallowTree: RenderTree;
   stories2snapsConverter: Stories2SnapsConverter;
-  snapshotFileName: string;
+  snapshotFileName?: string;
   options: any;
   done?: () => void;
 }
@@ -25,7 +25,7 @@ export interface StoryshotsTestMethod {
 export interface StoryshotsOptions {
   asyncJest?: boolean;
   config?: (options: any) => void;
-  integrityOptions?: IOptions | false;
+  integrityOptions?: GlobOptionsWithFileTypesFalse | false;
   configPath?: string;
   suite?: string;
   storyKindRegex?: RegExp | string;

code/addons/storyshots-core/src/api/index.ts

@@ -54,7 +54,7 @@ function testStorySnapshots(options: StoryshotsOptions = {}) {
   // subsequent calls to `it()` etc will all happen within this tick, which is required
   // by Jest (cannot add tests asynchronously)
   globalWindow.__STORYBOOK_STORY_STORE__.initializationPromise.then(() => {
-    const data = storybook.raw().reduce(
+    const data = storybook.raw()?.reduce(
       (acc, item) => {
         if (storyNameRegex && !item.name.match(storyNameRegex)) {
           return acc;
@@ -86,7 +86,7 @@ function testStorySnapshots(options: StoryshotsOptions = {}) {
       }[]
     );
 
-    if (data.length) {
+    if (data && data.length) {
       callTestMethodGlobals(testMethod);
 
       snapshotsTests({

code/addons/storyshots-core/src/api/integrityTestTemplate.ts

@@ -1,6 +1,6 @@
 /* eslint-disable jest/no-export */
 import fs from 'fs';
-import glob from 'glob';
+import { globSync } from 'glob';
 import { global } from '@storybook/global';
 import { dedent } from 'ts-dedent';
 
@@ -50,7 +50,7 @@ function integrityTest(integrityOptions: any, stories2snapsConverter: any) {
   describe('Storyshots Integrity', () => {
     it('Abandoned Storyshots', () => {
       const snapshotExtension = stories2snapsConverter.getSnapshotExtension();
-      const storyshots = glob.sync(`**/*${snapshotExtension}`, integrityOptions);
+      const storyshots = globSync(`**/*${snapshotExtension}`, integrityOptions);
 
       // @ts-expect-error (ts doesn't 'get' the extension happening on line 9)
       expect(storyshots).notToBeAbandoned(stories2snapsConverter);

code/addons/storyshots-core/src/frameworks/SupportedFramework.ts

@@ -3,10 +3,8 @@ export type SupportedFramework =
   | 'html'
   | 'preact'
   | 'react'
-  | 'riot'
   | 'react-native'
   | 'svelte'
   | 'vue'
   | 'vue3'
-  | 'web-components'
-  | 'rax';
+  | 'web-components';

code/addons/storyshots-core/src/frameworks/configure.ts

@@ -74,7 +74,7 @@ function getConfigPathParts(input: string): Output {
 
         return specifier;
       });
-      output.requireContexts = output.stories.map((specifier) => {
+      output.requireContexts = output.stories?.map((specifier) => {
         const { path: basePath, recursive, match } = toRequireContext(specifier);
 
         // eslint-disable-next-line no-underscore-dangle
@@ -114,7 +114,7 @@ function configure<TRenderer extends Renderer>(
   }));
 
   if (preview) {
-    // This is essentially the same code as lib/builder-webpack5/templates/virtualModuleEntry.template
+    // This is essentially the same code as builders/builder-webpack5/templates/virtualModuleEntry.template
     const {
       parameters,
       decorators,

code/addons/storyshots-core/src/frameworks/frameworkLoader.ts

@@ -28,7 +28,7 @@ function getLoaders(): Loader[] {
       return null;
     })
     .filter(Boolean)
-    .map((loader) => require(loader).default);
+    .map((loader) => loader && require(loader).default);
 }
 
 function loadFramework(options: StoryshotsOptions) {

code/addons/storyshots-core/src/frameworks/rax/loader.ts

@@ -1,60 +0,0 @@
-import { global } from '@storybook/global';
-import configure from '../configure';
-import hasDependency from '../hasDependency';
-import type { Loader } from '../Loader';
-import type { StoryshotsOptions } from '../../api/StoryshotsOptions';
-
-function test(options: StoryshotsOptions): boolean {
-  return options.framework === 'rax' || (!options.framework && hasDependency('@storybook/rax'));
-}
-
-function load(options: StoryshotsOptions) {
-  global.STORYBOOK_ENV = 'rax';
-
-  let mockStartedAPI: any;
-
-  jest.mock('@storybook/preview-api', () => {
-    const previewAPI = jest.requireActual('@storybook/preview-api');
-
-    return {
-      ...previewAPI,
-      start: (...args: any[]) => {
-        mockStartedAPI = previewAPI.start(...args);
-        return mockStartedAPI;
-      },
-    };
-  });
-
-  jest.mock('@storybook/rax', () => {
-    const renderAPI = jest.requireActual('@storybook/rax');
-
-    renderAPI.addDecorator = mockStartedAPI.clientApi.addDecorator;
-    renderAPI.addParameters = mockStartedAPI.clientApi.addParameters;
-
-    return renderAPI;
-  });
-
-  // eslint-disable-next-line global-require
-  const storybook = require('@storybook/rax');
-
-  configure({
-    ...options,
-    storybook,
-  });
-
-  return {
-    framework: 'rax' as const,
-    renderTree: jest.requireActual('./renderTree').default,
-    renderShallowTree: () => {
-      throw new Error('Shallow renderer is not supported for rax');
-    },
-    storybook,
-  };
-}
-
-const raxLoader: Loader = {
-  load,
-  test,
-};
-
-export default raxLoader;

code/addons/storyshots-core/src/frameworks/rax/renderTree.ts

@@ -1,12 +0,0 @@
-// eslint-disable-next-line import/no-unresolved
-import raxTestRenderer from 'rax-test-renderer';
-
-function getRenderedTree(story: any, context: any, { renderer, ...rendererOptions }: any) {
-  const storyElement = story.render();
-  const currentRenderer = renderer || raxTestRenderer.create;
-  const tree = currentRenderer(storyElement, rendererOptions);
-
-  return tree;
-}
-
-export default getRenderedTree;

code/addons/storyshots-core/src/frameworks/riot/loader.ts

@@ -1,65 +0,0 @@
-import { global } from '@storybook/global';
-import hasDependency from '../hasDependency';
-import configure from '../configure';
-import type { Loader } from '../Loader';
-import type { StoryshotsOptions } from '../../api/StoryshotsOptions';
-
-function mockRiotToIncludeCompiler() {
-  jest.mock('riot', () => jest.requireActual('riot/riot.js'));
-}
-
-function test(options: StoryshotsOptions): boolean {
-  return options.framework === 'riot' || (!options.framework && hasDependency('@storybook/riot'));
-}
-
-function load(options: StoryshotsOptions) {
-  global.STORYBOOK_ENV = 'riot';
-  mockRiotToIncludeCompiler();
-
-  let mockStartedAPI: any;
-
-  jest.mock('@storybook/preview-api', () => {
-    const previewAPI = jest.requireActual('@storybook/preview-api');
-
-    return {
-      ...previewAPI,
-      start: (...args: any[]) => {
-        mockStartedAPI = previewAPI.start(...args);
-        return mockStartedAPI;
-      },
-    };
-  });
-
-  jest.mock('@storybook/riot', () => {
-    const renderAPI = jest.requireActual('@storybook/riot');
-
-    renderAPI.addDecorator = mockStartedAPI.clientApi.addDecorator;
-    renderAPI.addParameters = mockStartedAPI.clientApi.addParameters;
-
-    return renderAPI;
-  });
-
-  // eslint-disable-next-line global-require
-  const storybook = require('@storybook/riot');
-
-  configure({
-    ...options,
-    storybook,
-  });
-
-  return {
-    framework: 'riot' as const,
-    renderTree: jest.requireActual('./renderTree').default,
-    renderShallowTree: () => {
-      throw new Error('Shallow renderer is not supported for riot');
-    },
-    storybook,
-  };
-}
-
-const riotLoader: Loader = {
-  load,
-  test,
-};
-
-export default riotLoader;

code/addons/storyshots-core/src/frameworks/riot/renderTree.ts

@@ -1,36 +0,0 @@
-import { global } from '@storybook/global';
-
-const { document } = global;
-
-const riotForStorybook = jest.requireActual('@storybook/riot');
-
-function bootstrapADocumentAndReturnANode() {
-  const rootElement = document.createElement('div');
-  rootElement.id = 'storybook-root';
-  document.body = document.createElement('body');
-  document.body.appendChild(rootElement);
-  return rootElement;
-}
-
-function makeSureThatResultIsRenderedSomehow({ context, result, rootElement }: any) {
-  if (!rootElement.firstChild) {
-    const { kind, name } = context;
-    riotForStorybook.render({
-      storyFn: () => result,
-      kind,
-      name,
-    });
-  }
-}
-
-function getRenderedTree(story: any, context: any) {
-  const rootElement = bootstrapADocumentAndReturnANode();
-
-  const result = story.render();
-
-  makeSureThatResultIsRenderedSomehow({ context, result, rootElement });
-
-  return rootElement;
-}
-
-export default getRenderedTree;

code/addons/storyshots-core/src/typings.d.ts

@@ -3,7 +3,6 @@
 declare module 'jest-preset-angular/*';
 declare module 'preact-render-to-string/jsx';
 declare module 'react-test-renderer*';
-declare module 'rax-test-renderer*';
 
 declare module '@storybook/babel-plugin-require-context-hook/register';
 

code/addons/storyshots-core/tsconfig.json

@@ -4,7 +4,8 @@
     "declaration": true,
     "jsx": "preserve",
     "skipLibCheck": true,
-    "skipDefaultLibCheck": true
+    "skipDefaultLibCheck": true,
+    "strict": true
   },
   "include": ["src/**/*.ts"]
 }

code/addons/storyshots-puppeteer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots-puppeteer",
-  "version": "7.1.0-alpha.7",
+  "version": "7.1.0-alpha.29",
   "description": "Image snapshots addition to StoryShots based on puppeteer",
   "keywords": [
     "addon",
@@ -13,7 +13,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/storyshots-puppeteer"
+    "directory": "code/addons/storyshots-puppeteer"
   },
   "funding": {
     "type": "opencollective",
@@ -31,13 +31,14 @@
     "*.d.ts"
   ],
   "scripts": {
+    "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
     "prep": "../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
     "@axe-core/puppeteer": "^4.2.0",
     "@storybook/csf": "^0.1.0",
-    "@storybook/node-logger": "7.1.0-alpha.7",
-    "@storybook/types": "7.1.0-alpha.7",
+    "@storybook/node-logger": "7.1.0-alpha.29",
+    "@storybook/types": "7.1.0-alpha.29",
     "@types/jest-image-snapshot": "^5.1.0",
     "jest-image-snapshot": "^6.0.0"
   },
@@ -45,11 +46,10 @@
     "@types/puppeteer": "^5.4.0",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.1",
-    "puppeteer": "^2.0.0 || ^3.0.0",
-    "rimraf": "^3.0.2"
+    "puppeteer": "^2.0.0 || ^3.0.0"
   },
   "peerDependencies": {
-    "@storybook/addon-storyshots": "7.1.0-alpha.7",
+    "@storybook/addon-storyshots": "7.1.0-alpha.29",
     "puppeteer": ">=2.0.0"
   },
   "peerDependenciesMeta": {
@@ -61,5 +61,5 @@
     "access": "public"
   },
   "bundler": {},
-  "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc"
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
 }

code/addons/storyshots-puppeteer/src/config.ts

@@ -28,10 +28,10 @@ interface DirectNavigationOptions {
 
 export interface CommonConfig {
   storybookUrl: string;
-  chromeExecutablePath: string;
-  getGotoOptions: (options: Options) => DirectNavigationOptions;
+  chromeExecutablePath?: string;
+  getGotoOptions: (options: Options) => DirectNavigationOptions | undefined;
   customizePage: (page: Page) => Promise<void>;
-  getCustomBrowser: () => Promise<Browser>;
+  getCustomBrowser?: () => Promise<Browser>;
   /**
    * Puppeteer browser launch options:
    * {@link https://pptr.dev/api/puppeteer.puppeteernode.launch/ puppeteer.launch()}
@@ -48,7 +48,7 @@ export interface PuppeteerTestConfig extends CommonConfig {
 }
 
 export interface ImageSnapshotConfig extends CommonConfig {
-  getMatchOptions: (options: Options) => MatchImageSnapshotOptions;
+  getMatchOptions: (options: Options) => MatchImageSnapshotOptions | undefined;
   getScreenshotOptions: (options: Options) => Base64ScreenShotOptions;
   beforeScreenshot: (page: Page, options: Options) => Promise<void | ElementHandle>;
   afterScreenshot: (options: { image: string | void | Buffer; context: Context }) => Promise<void>;
@@ -95,11 +95,11 @@ export const defaultImageSnapshotConfig: ImageSnapshotConfig = {
   ...defaultCommonConfig,
   getMatchOptions: noop,
   getScreenshotOptions: defaultScreenshotOptions,
-  beforeScreenshot: noop,
-  afterScreenshot: noop,
+  beforeScreenshot: asyncNoop,
+  afterScreenshot: asyncNoop,
 };
 
 export const defaultAxeConfig: AxeConfig = {
   ...defaultCommonConfig,
-  beforeAxeTest: noop,
+  beforeAxeTest: asyncNoop,
 };

code/addons/storyshots-puppeteer/tsconfig.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "skipLibCheck": true,
     "types": ["node"],
-    "declaration": true
+    "declaration": true,
+    "strict": true
   },
   "include": ["src/**/*"]
 }

code/addons/storysource/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "7.1.0-alpha.7",
+  "version": "7.1.0-alpha.29",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",
@@ -14,7 +14,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/storysource"
+    "directory": "code/addons/storysource"
   },
   "funding": {
     "type": "opencollective",
@@ -23,20 +23,19 @@
   "license": "MIT",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "node": "./dist/index.js",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.mjs"
     },
     "./preset": {
-      "require": "./dist/preset.js",
-      "import": "./dist/preset.mjs",
-      "types": "./dist/preset.d.ts"
+      "types": "./dist/preset.d.ts",
+      "require": "./dist/preset.js"
     },
     "./manager": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./package.json": "./package.json"
   },
@@ -54,16 +53,17 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.1.0-alpha.7",
-    "@storybook/components": "7.1.0-alpha.7",
-    "@storybook/manager-api": "7.1.0-alpha.7",
-    "@storybook/preview-api": "7.1.0-alpha.7",
-    "@storybook/router": "7.1.0-alpha.7",
-    "@storybook/source-loader": "7.1.0-alpha.7",
-    "@storybook/theming": "7.1.0-alpha.7",
+    "@storybook/client-logger": "7.1.0-alpha.29",
+    "@storybook/components": "7.1.0-alpha.29",
+    "@storybook/manager-api": "7.1.0-alpha.29",
+    "@storybook/preview-api": "7.1.0-alpha.29",
+    "@storybook/router": "7.1.0-alpha.29",
+    "@storybook/source-loader": "7.1.0-alpha.29",
+    "@storybook/theming": "7.1.0-alpha.29",
     "estraverse": "^5.2.0",
     "prop-types": "^15.7.2",
-    "react-syntax-highlighter": "^15.5.0"
+    "react-syntax-highlighter": "^15.5.0",
+    "tiny-invariant": "^1.3.1"
   },
   "devDependencies": {
     "@types/react": "^16.14.34",
@@ -92,7 +92,7 @@
       "./src/preset.ts"
     ]
   },
-  "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
     "displayName": "Storysource",
     "icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png",

code/addons/storysource/src/StoryPanel.tsx

@@ -7,6 +7,7 @@ import {
   type SyntaxHighlighterProps,
   type SyntaxHighlighterRendererProps,
 } from '@storybook/components';
+import invariant from 'tiny-invariant';
 
 // @ts-expect-error Typedefs don't currently expose `createElement` even though it exists
 import { createElement as createSyntaxHighlighterElement } from 'react-syntax-highlighter';
@@ -58,21 +59,25 @@ export const StoryPanel: React.FC<StoryPanelProps> = ({ api }) => {
   // prefer to use the source from source-loader, but fallback to
   // source provided by csf-plugin for vite usage
   const source = loaderSource || docsSource || 'loading source...';
-  const currentLocation = locationsMap
-    ? locationsMap[
-        Object.keys(locationsMap).find((key: string) => {
-          const sourceLoaderId = key.split('--');
-          return story.id.endsWith(sourceLoaderId[sourceLoaderId.length - 1]);
-        })
-      ]
+  const currentLocationIndex = locationsMap
+    ? Object.keys(locationsMap).find((key: string) => {
+        const sourceLoaderId = key.split('--');
+        return story.id.endsWith(sourceLoaderId[sourceLoaderId.length - 1]);
+      })
     : undefined;
+  const currentLocation =
+    locationsMap && currentLocationIndex ? locationsMap[currentLocationIndex] : undefined;
   React.useEffect(() => {
     if (selectedStoryRef.current) {
       selectedStoryRef.current.scrollIntoView();
     }
   }, [selectedStoryRef.current]);
 
-  const createPart = ({ rows, stylesheet, useInlineStyles }: SyntaxHighlighterRendererProps) =>
+  const createPart = ({
+    rows,
+    stylesheet,
+    useInlineStyles,
+  }: SyntaxHighlighterRendererProps): React.ReactNode[] =>
     rows.map((node, i) =>
       createSyntaxHighlighterElement({
         node,
@@ -112,9 +117,11 @@ export const StoryPanel: React.FC<StoryPanelProps> = ({ api }) => {
   };
 
   const createParts = ({ rows, stylesheet, useInlineStyles }: SyntaxHighlighterRendererProps) => {
-    const parts = [];
+    const parts: React.ReactNode[] = [];
     let lastRow = 0;
 
+    invariant(locationsMap, 'locationsMap should be defined while creating parts');
+
     Object.keys(locationsMap).forEach((key) => {
       const location = locationsMap[key];
       const first = location.startLoc.line - 1;
@@ -126,7 +133,7 @@ export const StoryPanel: React.FC<StoryPanelProps> = ({ api }) => {
       const start = createPart({ rows: rows.slice(lastRow, first), stylesheet, useInlineStyles });
       const storyPart = createStoryPart({ rows, stylesheet, useInlineStyles, location, id, refId });
 
-      parts.push(start);
+      parts.push(...start);
       parts.push(storyPart);
 
       lastRow = last;
@@ -134,7 +141,7 @@ export const StoryPanel: React.FC<StoryPanelProps> = ({ api }) => {
 
     const lastPart = createPart({ rows: rows.slice(lastRow), stylesheet, useInlineStyles });
 
-    parts.push(lastPart);
+    parts.push(...lastPart);
 
     return parts;
   };
@@ -169,6 +176,8 @@ export const StoryPanel: React.FC<StoryPanelProps> = ({ api }) => {
       format={false}
       copyable={false}
       padded
+      wrapLongLines
+      lineProps={{ style: { whiteSpace: 'pre' } }}
     >
       {source}
     </StyledSyntaxHighlighter>

code/addons/storysource/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "strict": true
   },
   "include": ["src/**/*"]
 }

code/addons/toolbars/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "7.1.0-alpha.7",
+  "version": "7.1.0-alpha.29",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",
@@ -18,7 +18,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/toolbars"
+    "directory": "code/addons/toolbars"
   },
   "funding": {
     "type": "opencollective",
@@ -27,20 +27,20 @@
   "license": "MIT",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "node": "./dist/index.js",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.mjs"
     },
     "./manager": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./register": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./package.json": "./package.json"
   },
@@ -68,11 +68,11 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.1.0-alpha.7",
-    "@storybook/components": "7.1.0-alpha.7",
-    "@storybook/manager-api": "7.1.0-alpha.7",
-    "@storybook/preview-api": "7.1.0-alpha.7",
-    "@storybook/theming": "7.1.0-alpha.7"
+    "@storybook/client-logger": "7.1.0-alpha.29",
+    "@storybook/components": "7.1.0-alpha.29",
+    "@storybook/manager-api": "7.1.0-alpha.29",
+    "@storybook/preview-api": "7.1.0-alpha.29",
+    "@storybook/theming": "7.1.0-alpha.29"
   },
   "devDependencies": {
     "typescript": "~4.9.3"
@@ -99,7 +99,7 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
     "displayName": "Toolbars",
     "icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",

code/addons/toolbars/src/components/ToolbarMenuList.tsx

@@ -1,7 +1,6 @@
 import type { FC } from 'react';
 import React, { useState, useCallback } from 'react';
 import { useGlobals } from '@storybook/manager-api';
-import { deprecate } from '@storybook/client-logger';
 import { WithTooltip, TooltipLinkList } from '@storybook/components';
 import { ToolbarMenuButton } from './ToolbarMenuButton';
 import type { WithKeyboardCycleProps } from '../hoc/withKeyboardCycle';
@@ -31,23 +30,14 @@ export const ToolbarMenuList: FC<ToolbarMenuListProps> = withKeyboardCycle(
       icon = getSelectedIcon({ currentValue, items }) || icon;
     }
 
-    // Deprecation support for old "name of global arg used as title"
-    if (!title) {
-      title = name;
-      deprecate(
-        '`showName` is deprecated as `name` will stop having dual purposes in the future. Please specify a `title` in `globalTypes` instead.'
-      );
-    } else if (!icon && !title) {
-      title = name;
-      deprecate(
-        `Using the \`name\` "${name}" as toolbar title for backward compatibility. \`name\` will stop having dual purposes in the future. Please specify either a \`title\` or an \`icon\` in \`globalTypes\` instead.`
-      );
-    }
-
     if (dynamicTitle) {
       title = getSelectedTitle({ currentValue, items }) || title;
     }
 
+    if (!title && !icon) {
+      console.warn(`Toolbar '${name}' has no title or icon`);
+    }
+
     const handleItemClick = useCallback(
       (value: string | undefined) => {
         updateGlobals({ [id]: value });

code/addons/toolbars/src/components/ToolbarMenuListItem.tsx

@@ -21,7 +21,7 @@ export const ToolbarMenuListItem = ({
   const Icon = icon && <Icons style={{ opacity: 1 }} icon={icon} />;
 
   const Item: TooltipLinkListLink = {
-    id: value || currentValue,
+    id: value ?? '_reset',
     active: currentValue === value,
     right,
     title,

code/addons/toolbars/src/utils/get-selected.ts

@@ -6,7 +6,9 @@ interface GetSelectedItemProps {
 }
 
 export const getSelectedItem = ({ currentValue, items }: GetSelectedItemProps) => {
-  const selectedItem = currentValue != null && items.find((item) => item.value === currentValue);
+  const selectedItem =
+    currentValue != null &&
+    items.find((item) => item.value === currentValue && item.type !== 'reset');
   return selectedItem;
 };
 

code/addons/viewport/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "7.1.0-alpha.7",
+  "version": "7.1.0-alpha.29",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",
@@ -15,7 +15,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/viewport"
+    "directory": "code/addons/viewport"
   },
   "funding": {
     "type": "opencollective",
@@ -24,25 +24,25 @@
   "license": "MIT",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "node": "./dist/index.js",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.mjs"
     },
     "./manager": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./preview": {
+      "types": "./dist/preview.d.ts",
       "require": "./dist/preview.ts",
-      "import": "./dist/preview.mjs",
-      "types": "./dist/preview.d.ts"
+      "import": "./dist/preview.mjs"
     },
     "./register": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./package.json": "./package.json"
   },
@@ -73,13 +73,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.1.0-alpha.7",
-    "@storybook/components": "7.1.0-alpha.7",
-    "@storybook/core-events": "7.1.0-alpha.7",
+    "@storybook/client-logger": "7.1.0-alpha.29",
+    "@storybook/components": "7.1.0-alpha.29",
+    "@storybook/core-events": "7.1.0-alpha.29",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.1.0-alpha.7",
-    "@storybook/preview-api": "7.1.0-alpha.7",
-    "@storybook/theming": "7.1.0-alpha.7",
+    "@storybook/manager-api": "7.1.0-alpha.29",
+    "@storybook/preview-api": "7.1.0-alpha.29",
+    "@storybook/theming": "7.1.0-alpha.29",
     "memoizerific": "^1.11.3",
     "prop-types": "^15.7.2"
   },
@@ -109,7 +109,7 @@
       "./src/preview.ts"
     ]
   },
-  "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
     "displayName": "Viewport",
     "icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",

code/addons/viewport/src/Tool.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-fallthrough */
 import type { ReactNode, FC } from 'react';
 import React, { useState, Fragment, useEffect, useRef, memo } from 'react';
 import memoize from 'memoizerific';
@@ -37,25 +36,16 @@ const baseViewports: ViewportItem[] = [responsiveViewport];
 
 const toLinks = memoize(50)((list: ViewportItem[], active: LinkBase, set, state, close): Link[] => {
   return list
+    .filter((i) => i.id !== responsiveViewport.id || active.id !== i.id)
     .map((i) => {
-      switch (i.id) {
-        case responsiveViewport.id: {
-          if (active.id === i.id) {
-            return null;
-          }
-        }
-        default: {
-          return {
-            ...i,
-            onClick: () => {
-              set({ ...state, selected: i.id });
-              close();
-            },
-          };
-        }
-      }
-    })
-    .filter(Boolean);
+      return {
+        ...i,
+        onClick: () => {
+          set({ ...state, selected: i.id });
+          close();
+        },
+      };
+    });
 });
 
 const wrapperId = 'storybook-preview-wrapper';
@@ -112,13 +102,14 @@ interface ViewportToolState {
 }
 
 const getStyles = (
-  prevStyles: ViewportStyles,
+  prevStyles: ViewportStyles | undefined,
   styles: Styles,
   isRotated: boolean
-): ViewportStyles => {
+): ViewportStyles | undefined => {
   if (styles === null) {
-    return null;
+    return undefined;
   }
+
   const result = typeof styles === 'function' ? styles(prevStyles) : styles;
   return isRotated ? flip(result) : result;
 };
@@ -154,7 +145,8 @@ export const ViewportTool: FC = memo(
     useEffect(() => {
       setState({
         selected:
-          defaultViewport || (viewports[state.selected] ? state.selected : responsiveViewport.id),
+          defaultViewport ||
+          (state.selected && viewports[state.selected] ? state.selected : responsiveViewport.id),
         isRotated: defaultOrientation === 'landscape',
       });
     }, [defaultOrientation, defaultViewport]);

code/addons/viewport/src/models/Viewport.ts

@@ -1,4 +1,4 @@
-export type Styles = ViewportStyles | ((s: ViewportStyles) => ViewportStyles) | null;
+export type Styles = ViewportStyles | ((s: ViewportStyles | undefined) => ViewportStyles) | null;
 
 export interface Viewport {
   name: string;

code/addons/viewport/tsconfig.json

@@ -1,4 +1,7 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"]
+  "include": ["src/**/*"],
+  "compilerOptions": {
+    "strict": true
+  }
 }