Merge branch 'next' into expand-refs

.circleci/config.yml

@@ -262,48 +262,6 @@ jobs:
       - report-workflow-on-failure
       - store_test_results:
           path: test-results
-  angular-prerelease-sandbox:
-    executor:
-      class: large
-      name: sb_playwright
-    steps:
-      - git-shallow-clone/checkout_advanced:
-          clone_options: '--depth 1 --verbose'
-      - attach_workspace:
-          at: .
-      - run:
-          name: Create Sandbox
-          command: |
-            yarn task --template angular-cli/prerelease --no-link --start-from=never --junit --task sandbox
-      - run:
-          name: Build Sandbox
-          command: |
-            yarn task --template angular-cli/prerelease --no-link --start-from=never --junit --task build
-      - run:
-          name: Chromatic
-          command: |
-            yarn task --template angular-cli/prerelease --no-link --start-from=never --junit --task chromatic
-      - run:
-          name: E2E Tests Production
-          command: |
-            yarn task --template angular-cli/prerelease --no-link --start-from=never --junit --task e2e-tests
-      - run:
-          name: E2E Tests Development
-          command: |
-            yarn task --template angular-cli/prerelease --no-link --start-from=never --junit --task e2e-tests-dev
-      - run:
-          name: Test Runner
-          command: |
-            yarn task --template angular-cli/prerelease --no-link --start-from=never --junit --task test-runner
-      - report-workflow-on-failure:
-          template: angular-cli/prerelease
-      - persist_to_workspace:
-          root: .
-          paths:
-            - sandbox
-      - store_test_results:
-          path: test-results
-
   ## new workflow
   create-sandboxes:
     parameters:
@@ -650,9 +608,6 @@ workflows:
       - chromatic-internal-storybooks:
           requires:
             - build
-      - angular-prerelease-sandbox:
-          requires:
-            - build
       - create-sandboxes:
           parallelism: 34
           requires:

.gitattributes

@@ -1 +1,2 @@
 /**/.yarn/** linguist-generated
+* -text

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

@@ -58,8 +58,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
-
+          node-version-file: '.nvmrc'
       - name: Cache dependencies
         uses: actions/cache@v3
         with:

.github/workflows/danger-js.yml

@@ -21,10 +21,10 @@ jobs:
     name: Danger JS
     runs-on: ubuntu-latest
     steps:
+      - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
-      - uses: actions/checkout@v3
+          node-version-file: '.nvmrc'
       - name: Danger JS
         uses: danger/[email protected]
         env:

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

@@ -1,4 +1,4 @@
-name: Generate and push sandboxes
+name: Generate and push sandboxes (main)
 
 on:
   schedule:
@@ -10,74 +10,48 @@ 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 BEFORE YOU MERGE YOUR CHANGES!
+  # 3. 👉 DON'T FORGET TO UNDO THE VALUES BACK TO `main` BEFORE YOU MERGE YOUR CHANGES!
 
 jobs:
   generate:
     runs-on: ubuntu-latest
     env:
       YARN_ENABLE_IMMUTABLE_INSTALLS: false
       CLEANUP_SANDBOX_NODE_MODULES: true
-    strategy:
-      fail-fast: false
-      matrix:
-        node_version:
-          - 16
-          - 18
-        branch:
-          - main
-          - next
-        include:
-          - node_version: 16
-            # space-delimited list of templates
-            exclude: 'angular-cli/prerelease'
-          - node_version: 18
-            # space-delimited list of templates
-            templates: 'angular-cli/prerelease'
     steps:
       - uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node_version }}
-
+          node-version: 16
       - uses: actions/checkout@v3
         with:
-          ref: ${{ matrix.branch }}
-
+          ref: main
       - name: Setup git user
         run: |
           git config --global user.name "Storybook Bot"
           git config --global user.email "[email protected]"
-
       - name: Install dependencies
         run: node ./scripts/check-dependencies.js
-
       - name: Compile Storybook libraries
         run: yarn task --task compile --start-from=auto --no-link
-
       - name: Publishing to local registry
         run: yarn local-registry --publish
         working-directory: ./code
-
       - name: Running local registry
         run: yarn local-registry --open &
         working-directory: ./code
-
       - name: Wait for registry
         run: yarn wait-on http://localhost:6001
         working-directory: ./code
-
       - name: Generate
-        run: yarn generate-sandboxes --local-registry --templates ${{matrix.templates}} --exclude ${{matrix.exclude}}
+        run: yarn generate-sandboxes --local-registry --exclude=angular-cli/prerelease
         working-directory: ./code
-
       - name: Publish
-        run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=${{ matrix.branch }}
+        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 with Node version **${{ matrix.node_version }}** in the **${{ matrix.branch }}** branch has failed. [View Run](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})'
+          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

@@ -0,0 +1,57 @@
+name: Generate and push sandboxes (next)
+
+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 `next` BEFORE YOU MERGE YOUR CHANGES!
+
+jobs:
+  generate:
+    runs-on: ubuntu-latest
+    env:
+      YARN_ENABLE_IMMUTABLE_INSTALLS: false
+      CLEANUP_SANDBOX_NODE_MODULES: true
+    steps:
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - uses: actions/checkout@v3
+        with:
+          ref: next
+      - name: Setup git user
+        run: |
+          git config --global user.name "Storybook Bot"
+          git config --global user.email "[email protected]"
+      - name: Install dependencies
+        run: node ./scripts/check-dependencies.js
+      - name: Compile Storybook libraries
+        run: yarn task --task compile --start-from=auto --no-link
+      - name: Publishing to local registry
+        run: yarn local-registry --publish
+        working-directory: ./code
+      - name: Running local registry
+        run: yarn local-registry --open &
+        working-directory: ./code
+      - name: Wait for registry
+        run: yarn wait-on http://localhost:6001
+        working-directory: ./code
+      - name: Generate
+        run: yarn generate-sandboxes --local-registry --exclude=angular-cli/prerelease
+        working-directory: ./code
+      - 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

@@ -33,7 +33,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version-file: '.nvmrc'
 
       - name: Cache dependencies
         uses: actions/cache@v3

.github/workflows/prepare-prerelease.yml

@@ -54,7 +54,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version-file: '.nvmrc'
 
       - name: Cache dependencies
         uses: actions/cache@v3

.github/workflows/publish.yml

@@ -45,7 +45,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version-file: '.nvmrc'
 
       - name: Cache dependencies
         uses: actions/cache@v3

.gitignore

@@ -37,7 +37,6 @@ coverage/
 /**/LICENSE
 code/docs/public
 package-lock.json
-.nvmrc
 storybook-static
 .jest-test-results.json
 *.jar

.nvmrc

@@ -0,0 +1 @@
+16.20

CHANGELOG.md

@@ -1,3 +1,20 @@
+## 7.4.2
+
+- Addon API: Improve the updateStatus API - [#24007](https://github.com/storybookjs/storybook/pull/24007), thanks [@ndelangen](https://github.com/ndelangen)!
+- Nextjs: Migrate from config to previewAnnotations - [#24178](https://github.com/storybookjs/storybook/pull/24178), thanks [@yannbf](https://github.com/yannbf)!
+- UI: Fix SVG override fill when path has a fill attribute - [#24156](https://github.com/storybookjs/storybook/pull/24156), thanks [@ndelangen](https://github.com/ndelangen)!
+- UI: Improve look and feel of status UI in sidebar - [#24099](https://github.com/storybookjs/storybook/pull/24099), thanks [@ndelangen](https://github.com/ndelangen)!
+
+## 7.4.1
+
+- CLI: Add uncaughtException handler - [#24018](https://github.com/storybookjs/storybook/pull/24018), thanks [@yannbf](https://github.com/yannbf)!
+- CLI: Fix packageManager handling in `sb add` - [#24079](https://github.com/storybookjs/storybook/pull/24079), thanks [@Integrayshaun](https://github.com/Integrayshaun)!
+- Core: Add CJS entrypoints to errors in core events - [#24038](https://github.com/storybookjs/storybook/pull/24038), thanks [@yannbf](https://github.com/yannbf)!
+- Docs: Fix TOC import - [#24047](https://github.com/storybookjs/storybook/pull/24047), thanks [@shilman](https://github.com/shilman)!
+- Telemetry: Filter addon options to protect sensitive info - [#24000](https://github.com/storybookjs/storybook/pull/24000), thanks [@shilman](https://github.com/shilman)!
+- Types: Remove `@types/react` dep from `@storybook/types` - [#24042](https://github.com/storybookjs/storybook/pull/24042), thanks [@JReinhold](https://github.com/JReinhold)!
+- Vue3: Remove console.log in sourceDecorator - [#24062](https://github.com/storybookjs/storybook/pull/24062), thanks [@oruman](https://github.com/oruman)!
+
 ## 7.4.0
 
 - Addon-docs: Resolve `mdx-react-shim` & `@storybook/global` correctly - [#23941](https://github.com/storybookjs/storybook/pull/23941), thanks [@ndelangen](https://github.com/ndelangen)!

CHANGELOG.prerelease.md

@@ -1,3 +1,19 @@
+## 7.5.0-alpha.2
+
+- Angular: Categorize legacy build options error - [#24014](https://github.com/storybookjs/storybook/pull/24014), thanks [@yannbf](https://github.com/yannbf)!
+- Builder-Webpack5: Categorize builder error - [#24031](https://github.com/storybookjs/storybook/pull/24031), thanks [@yannbf](https://github.com/yannbf)!
+- CI: Inform the user how to dedupe and strip color from info command - [#24087](https://github.com/storybookjs/storybook/pull/24087), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- CLI: Fix packageManager handling in `sb add` - [#24079](https://github.com/storybookjs/storybook/pull/24079), thanks [@Integrayshaun](https://github.com/Integrayshaun)!
+- CLI: Improve sanitization logic in crash reports - [#24028](https://github.com/storybookjs/storybook/pull/24028), thanks [@yannbf](https://github.com/yannbf)!
+- Maintenance: Add more context to explanation in core-events errors - [#24063](https://github.com/storybookjs/storybook/pull/24063), thanks [@yannbf](https://github.com/yannbf)!
+- Monorepo: Fix `svelte-vite` detection - [#24085](https://github.com/storybookjs/storybook/pull/24085), thanks [@legnaleurc](https://github.com/legnaleurc)!
+- NextJS: Fix Image Context reuse (ensure singleton by externalizing it) - [#23881](https://github.com/storybookjs/storybook/pull/23881), thanks [@martinnabhan](https://github.com/martinnabhan)!
+- Source-loader: Fix property key validation - [#24068](https://github.com/storybookjs/storybook/pull/24068), thanks [@MrZillaGold](https://github.com/MrZillaGold)!
+- Svelte: Fix generated properties on Svelte event handler - [#24020](https://github.com/storybookjs/storybook/pull/24020), thanks [@j3rem1e](https://github.com/j3rem1e)!
+- Telemetry: Add platform info to telemetry event - [#24081](https://github.com/storybookjs/storybook/pull/24081), thanks [@yannbf](https://github.com/yannbf)!
+- UI: Fix target id in searchfield label - [#23464](https://github.com/storybookjs/storybook/pull/23464), thanks [@plumpNation](https://github.com/plumpNation)!
+- Vue3: Remove console.log in sourceDecorator - [#24062](https://github.com/storybookjs/storybook/pull/24062), thanks [@oruman](https://github.com/oruman)!
+
 ## 7.5.0-alpha.1
 
 - Core: Add CJS entrypoints to errors in core events - [#24038](https://github.com/storybookjs/storybook/pull/24038), thanks [@yannbf](https://github.com/yannbf)!

CONTRIBUTING.md

@@ -1,13 +1,24 @@
 # Getting started
 
-Storybook is developed against a specific node version. We recommend using [Volta](https://volta.sh/) as it will automatically install the correct node and yarn version when you first use the repo. If you chose not to use Volta please ensure you you have node version 16 installed (suggestion: v16.5)
+Storybook is developed against a specific node version which is defined in an `.nvmrc` file. You can use any Node version manager that uses the `.nvmrc` configuration file (we recommend [fnm](https://fnm.vercel.app/)).
+
+## Using fnm as a Node version manager
+
+- Install fnm [as per instructions](https://github.com/Schniz/fnm/tree/master#installation)
+- In your shell setup include the `use-on-cd`, `corepack-enabled` and `version-file-strategy recursive` parameters in the `fnm env` command, e.g.
+
+  ```sh
+  eval "$(fnm env --use-on-cd --corepack-enabled --version-file-strategy recursive)"
+  ```
+
+## Running the local development environment
 
 - Ensure if you are using Windows to use the Windows Subsystem for Linux (WSL).
 - Run `yarn start` in the root directory to run a basic test Storybook "sandbox".
 
 The `yarn start` script will generate a React Vite TypeScript sandbox with a set of test stories inside it, as well as taking all steps required to get it running (building the various packages we need etc). There is no need to run `yarn` or `yarn install` as `yarn start` will do this for you.
 
-## Issues
+### Issues
 
 If you run `yarn start` and encounter the following error, try rerunning `yarn start` a second time:
 

MIGRATION.md

@@ -1044,7 +1044,11 @@ Starting in 7.0, we drop support for Angular < 14
 
 #### Angular: Drop support for calling Storybook directly
 
-In Storybook 6.4 we have deprecated calling Storybook directly (`npm run storybook`) for Angular. In Storybook 7.0, we've removed it entirely. Instead you have to set up the Storybook builder in your `angular.json` and execute `ng run <your-project>:storybook` to start Storybook. Please visit https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular to set up Storybook for Angular correctly.
+_Has automigration_
+
+In Storybook 6.4 we deprecated calling Storybook directly (e.g. `npm run storybook`) for Angular. In Storybook 7.0, we've removed it entirely. Instead, you have to set up the Storybook builder in your `angular.json` and execute `ng run <your-project>:storybook` to start Storybook. 
+
+You can run `npx storybook@next automigrate` to automatically fix your configuration, or visit https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular/README.md#how-do-i-migrate-to-an-angular-storybook-builder for instructions on how to set up Storybook for Angular manually.
 
 #### Angular: Application providers and ModuleWithProviders
 

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "7.5.0-alpha.1",
+  "version": "7.5.0-alpha.2",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",

code/addons/a11y/src/components/Report/HighlightToggle.tsx

@@ -24,7 +24,7 @@ function areAllRequiredElementsHighlighted(
   highlighted: string[]
 ): CheckBoxStates {
   const highlightedCount = elementsToHighlight.filter((item) =>
-    highlighted.includes(item.target[0])
+    highlighted.includes(item.target[0] as any)
   ).length;
 
   // eslint-disable-next-line no-nested-ternary
@@ -52,7 +52,7 @@ const HighlightToggle: React.FC<ToggleProps> = ({ toggleId, elementsToHighlight
 
   const handleToggle = React.useCallback((): void => {
     toggleHighlight(
-      elementsToHighlight.map((e) => e.target[0]),
+      elementsToHighlight.map((e) => e.target[0] as any),
       checkBoxState !== CheckBoxStates.CHECKED
     );
   }, [elementsToHighlight, checkBoxState, toggleHighlight]);

code/addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "7.5.0-alpha.1",
+  "version": "7.5.0-alpha.2",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",

code/addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "7.5.0-alpha.1",
+  "version": "7.5.0-alpha.2",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",

code/addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "7.5.0-alpha.1",
+  "version": "7.5.0-alpha.2",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",