Merge branch 'next' into fix/auto-title-dotted-component

.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/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 }})'

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)!

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/backgrounds/src/containers/BackgroundSelector.tsx

@@ -18,10 +18,10 @@ import { getBackgroundColorByName } from '../helpers';
 
 const createBackgroundSelectorItem = memoize(1000)(
   (
-    id: string,
+    id: string | null,
     name: string,
     value: string,
-    hasSwatch: boolean,
+    hasSwatch: boolean | null,
     change: (arg: { selected: string; name: string }) => void,
     active: boolean
   ): BackgroundSelectorItem => ({
@@ -102,7 +102,7 @@ export const BackgroundSelector: FC = memo(function BackgroundSelector() {
   }
 
   const onBackgroundChange = useCallback(
-    (value: string) => {
+    (value: string | undefined) => {
       updateGlobals({ [BACKGROUNDS_PARAM_KEY]: { ...globals[BACKGROUNDS_PARAM_KEY], value } });
     },
     [backgroundsConfig, globals, updateGlobals]

code/addons/backgrounds/src/helpers/index.ts

@@ -15,7 +15,7 @@ export const isReduceMotionEnabled = () => {
 export const getBackgroundColorByName = (
   currentSelectedValue: string,
   backgrounds: Background[] = [],
-  defaultName: string
+  defaultName: string | null | undefined
 ): string => {
   if (currentSelectedValue === 'transparent') {
     return 'transparent';
@@ -52,7 +52,7 @@ export const clearStyles = (selector: string | string[]) => {
 const clearStyle = (selector: string) => {
   const element = document.getElementById(selector) as HTMLElement;
   if (element) {
-    element.parentElement.removeChild(element);
+    element.parentElement?.removeChild(element);
   }
 };
 
@@ -70,7 +70,7 @@ export const addGridStyle = (selector: string, css: string) => {
   }
 };
 
-export const addBackgroundStyle = (selector: string, css: string, storyId: string) => {
+export const addBackgroundStyle = (selector: string, css: string, storyId: string | null) => {
   const existingStyle = document.getElementById(selector) as HTMLElement;
   if (existingStyle) {
     if (existingStyle.innerHTML !== css) {
@@ -85,7 +85,7 @@ export const addBackgroundStyle = (selector: string, css: string, storyId: strin
     // If grids already exist, we want to add the style tag BEFORE it so the background doesn't override grid
     const existingGridStyle = document.getElementById(gridStyleSelector) as HTMLElement;
     if (existingGridStyle) {
-      existingGridStyle.parentElement.insertBefore(style, existingGridStyle);
+      existingGridStyle.parentElement?.insertBefore(style, existingGridStyle);
     } else {
       document.head.appendChild(style);
     }

code/addons/backgrounds/src/types/index.ts

@@ -20,7 +20,7 @@ export interface Background {
 }
 
 export interface BackgroundsParameter {
-  default?: string;
+  default?: string | null;
   disable?: boolean;
   values: Background[];
 }

code/addons/backgrounds/tsconfig.json

@@ -2,6 +2,6 @@
   "extends": "../../tsconfig.json",
   "include": ["src/**/*"],
   "compilerOptions": {
-    "strict": false
+    "strict": true
   }
 }

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",

code/addons/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "7.5.0-alpha.1",
+  "version": "7.5.0-alpha.2",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",