From 415e913809551bbb4f27c61926a62278c3fd5d3a Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Thu, 28 Dec 2023 16:38:11 +0000
Subject: [PATCH 01/20] Docs: Writing addons changes for peer-deps

---
 docs/addons/writing-addons.md | 39 +++++++++++++++--------------------
 1 file changed, 17 insertions(+), 22 deletions(-)

diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md
index f160bcdb36a..ca963041014 100644
--- a/docs/addons/writing-addons.md
+++ b/docs/addons/writing-addons.md
@@ -94,6 +94,8 @@ By default, code for the UI-based addons is located in one of the following file
 Going through the code blocks in sequence:
 
 ```ts
+// src/Tool.tsx
+
 import { useGlobals, useStorybookApi } from '@storybook/manager-api';
 
 import { Icons, IconButton } from '@storybook/components';
@@ -102,6 +104,8 @@ import { Icons, IconButton } from '@storybook/components';
 The [`useGlobals`](./addons-api.md#useglobals) and [`useStorybookApi`](./addons-api.md#usestorybookapi) hooks from the `manager-api` package are used to access the Storybook's APIs, allowing users to interact with the addon, such as enabling or disabling it. The `Icons` and `IconButtons` components from the [`@storybook/components`](https://www.npmjs.com/package/@storybook/components) package render the icons and buttons in the toolbar.
 
 ```ts
+// src/Tool.tsx
+
 export const Tool = memo(function MyAddonSelector() {
   const [globals, updateGlobals] = useGlobals();
   const api = useStorybookApi();
@@ -201,56 +205,47 @@ Storybook addons, similar to most packages in the JavaScript ecosystem, are dist
 
 1. Have a `dist` folder with the transpiled code.
 2. A `package.json` file declaring:
-   - Peer dependencies
    - Module-related information
    - Integration catalog metadata
 
 ### Module Metadata
 
-The first category of metadata is related to the addon itself. This includes the entry for the module and which files to include when the addon is published. And all the peer-dependencies of the addon (e.g., `react`,`react-dom`, and Storybook's related APIs).
+The first category of metadata is related to the addon itself. This includes the entry for the module, which files to include when the addon is published. And the required configuration to integrate the addon with Storybook, allowing it to be used by its consumers.
 
 ```json
 {
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
+      "node": "./dist/index.js",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
-    },
-    "./manager": {
-      "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
-    },
-    "./preview": {
-      "require": "./dist/preview.js",
-      "import": "./dist/preview.mjs",
-      "types": "./dist/preview.d.ts"
+      "import": "./dist/index.mjs"
     },
+    "./manager": "./dist/manager.mjs",
+    "./preview": "./dist/preview.mjs",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": ["dist/**/*", "README.md", "*.js", "*.d.ts"],
-  "peerDependencies": {
+  "devDependencies": {
     "@storybook/blocks": "^7.0.0",
     "@storybook/components": "^7.0.0",
     "@storybook/core-events": "^7.0.0",
     "@storybook/manager-api": "^7.0.0",
     "@storybook/preview-api": "^7.0.0",
     "@storybook/theming": "^7.0.0",
-    "@storybook/types": "^7.0.0",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "@storybook/types": "^7.0.0"
+  },
+  "bundler": {
+    "exportEntries": ["src/index.ts"],
+    "managerEntries": ["src/manager.ts"],
+    "previewEntries": ["src/preview.ts"]
   }
 }
 ```
 
-#### Why peer-dependencies?
-
-A standard practice in the JavaScript ecosystem ensuring compatibility between modules or packages that are meant to work together, often in a plugin or extension scenario. Peer-dependencies are dependencies that are not bundled with the addon but are expected to be installed by the consumer of the addon. When a module relies on a specific version of another module, it might assume certain features, APIs, or behavior provided by that dependency. By specifying a peer dependency, the module can indicate its compatibility requirements and avoid potential conflicts or unexpected behavior due to incompatible versions.
-
 ### Integration Catalog Metadata
 
 The second metadata category is related to the [integration catalog](https://storybook.js.org/integrations). Most of this information is already pre-configured by the Addon Kit. However, items like the display name, icon, and frameworks must be configured via the `storybook` property to be displayed in the catalog.

From ad70a3685fb50d4486789c149d7c3b5e81ed30cd Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Thu, 28 Dec 2023 20:56:06 +0000
Subject: [PATCH 02/20] Docs: Composition adjustments for the removal of the
 extract function

---
 docs/sharing/storybook-composition.md         | 70 +++++--------------
 .../common/storybook-extract-result.json.mdx  | 38 ----------
 ...rybook-extract-specific-version.npx.js.mdx |  3 +
 ...ybook-extract-specific-version.pnpm.js.mdx |  3 +
 ...ybook-extract-specific-version.yarn.js.mdx |  3 +
 .../storybook-storiesjsonflag-result.json.mdx | 33 ---------
 6 files changed, 27 insertions(+), 123 deletions(-)
 delete mode 100644 docs/snippets/common/storybook-extract-result.json.mdx
 create mode 100644 docs/snippets/common/storybook-extract-specific-version.npx.js.mdx
 create mode 100644 docs/snippets/common/storybook-extract-specific-version.pnpm.js.mdx
 create mode 100644 docs/snippets/common/storybook-extract-specific-version.yarn.js.mdx
 delete mode 100644 docs/snippets/common/storybook-storiesjsonflag-result.json.mdx

diff --git a/docs/sharing/storybook-composition.md b/docs/sharing/storybook-composition.md
index 987d453e51d..50a78daadf6 100644
--- a/docs/sharing/storybook-composition.md
+++ b/docs/sharing/storybook-composition.md
@@ -17,7 +17,7 @@ You’ll see the composed Storybook’s stories in the sidebar alongside your ow
 
 ## Compose published Storybooks
 
-In your [`.storybook/main.js`](../configure/index.md#configure-story-rendering) file add a `refs` field with information about the reference Storybook. Pass in a URL to a statically built Storybook.
+In your [`.storybook/main.js|ts`](../configure/index.md#configure-story-rendering) file add a `refs` field with information about the reference Storybook. Pass in a URL to a statically built Storybook.
 
 <!-- prettier-ignore-start -->
 
@@ -30,15 +30,15 @@ In your [`.storybook/main.js`](../configure/index.md#configure-story-rendering)
 
 <!-- prettier-ignore-end -->
 
-<Callout variant="info" icon="💡">
+<Callout variant="warning">
 
-Limitation: Addons in composed Storybooks will not work as they normally do in a non-composed Storybook.
+Addons in composed Storybooks will not work as they normally do in a non-composed Storybook.
 
 </Callout>
 
 ## Compose local Storybooks
 
-You can also compose multiple Storybooks that are running locally. For instance, if you have a React Storybook and an Angular Storybook running on different ports, you can update your configuration file (i.e., `.storybook/main.js`) and reference them;
+You can also compose multiple Storybooks that are running locally. For instance, if you have a React Storybook and an Angular Storybook running on different ports, you can update your configuration file (i.e., `.storybook/main.js|ts`) and reference them as follows:
 
 <!-- prettier-ignore-start -->
 
@@ -70,17 +70,13 @@ You can also compose Storybooks based on the current development environment (e.
 
 <Callout variant="info" icon="💡">
 
-Similar to the other fields available in Storybook’s configuration file, the `refs` field can also be a function that accepts a config parameter containing Storybook’s configuration object. Check the [Webpack documentation](../builders/webpack.md#override-the-default-configuration) to learn more about it.
+Similar to other fields available in Storybook’s configuration file, the `refs` field can also be a function that accepts a `config` parameter containing Storybook’s configuration object. See the [API reference](../api/main-config-refs.md) for more information.
 
 </Callout>
 
 ## Improve your Storybook composition
 
-So far, we've seen how we can use composition with local or published Storybooks. As your Storybook will grow in time with your stories or through composition with other Storybooks, you can optimize the deployment process using various methods.
-
-### With feature flags
-
-If you're using Storybook 6.4, or higher, you can optimize your composition via the `buildStoriesJson` feature flag, allowing you to generate `index.json` and `stories.json` files with the required information, providing you with a seamless integration without the need for additional dependencies. For example:
+Out of the box, Storybook allows you to compose Storybooks both locally and remotely with a minor change to your configuration. However, as your Storybook grows, you might want to optimize the composition process to improve the overall performance and user experience of your Storybook by enabling the `buildStoriesJson` feature flag that will generate the `index.json` and `stories.json` files with the required information to populate the UI with your composed Storybook stories automatically. For example:
 
 <!-- prettier-ignore-start -->
 
@@ -93,62 +89,32 @@ If you're using Storybook 6.4, or higher, you can optimize your composition via
 
 <!-- prettier-ignore-end -->
 
-<Callout variant="info" icon="💡">
+<Callout variant="info">
 
-If you already enabled automatic code splitting via the [`storyStoreV7`](https://storybook.js.org/docs/builders/webpack#code-splitting), you won't need this flag as it will automatically generate the `index.json` file.
+If you're working with a Storybook version 7.0 or higher, this flag is enabled by default. However, if you're working with an older version and you configured your Storybook to use the [`storyStoreV7`](../api/main-config-features.md#storystorev7) feature flag, you won't need this flag as it will automatically generate the required `index.json` file for you to use.
 
 </Callout>
 
-When you compose a Storybook featuring this flag, it will use the information retrieved from the file to populate the UI with your composed Storybook stories automatically. Here's an example of the output generated by the `index.json` file:
+## Troubleshooting
+
+### Storybook composition is not working with my project
+
+If you're working with an outdated Storybook version or have a project-specific requirement that prevents you from updating your Storybook to the latest version, you can rely on the Storybook CLI to generate the `index.json` file when you deploy your Storybook. For example:
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
-    'common/storybook-storiesjsonflag-result.json.mdx',
+    'common/storybook-extract-specific-version.npx.js.mdx',
+    'common/storybook-extract-specific-version.yarn.js.mdx',
+    'common/storybook-extract-specific-version.pnpm.js.mdx',
   ]}
 />
 
 <!-- prettier-ignore-end -->
 
-### With the CLI
+<Callout variant="info">
 
-If you're working with an outdated Storybook version or have a project-specific requirement that prevents you from enabling the `buildStoriesJson` feature flag. In that case, you can use Storybook's CLI to automatically generate the `index.json` file when you deploy your Storybook. For example:
-
-```shell
-npx storybook extract
-```
-
-<Callout variant="info" icon="💡">
-
-`storybook extract` uses [Puppeteer](https://www.npmjs.com/package/puppeteer), which downloads and installs Chromium. Set the environment `SB_CHROMIUM_PATH` to configure your local Chromium installation.
-
-</Callout>
-
-Although a good approach to improve composition, it comes with a cost, as it will require an additional dependency being added and increased build times. Once it finishes executing, it will generate an `index.json` file in the default build directory (`storybook-static`) with the information related to your Storybook. Here’s an example of the file contents:
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/storybook-extract-result.json.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
-Linking to a Storybook deployed using this approach will yield all the stories and other relevant information displayed in the UI.
-
-If you need, you can also add additional arguments to this command. For instance, if you want to generate the `index.json` file into a custom directory, you can use the following:
-
-```shell
-npx storybook extract my-built-storybook-directory my-other-directory/index.json
-```
-
-When executed, it will look up a built Storybook in the `my-built-storybook-directory` and create the `index.json` file in the `my-other-directory` with all the necessary information.
-
-<Callout variant="info" icon="💡">
-
-If you need to use the arguments, you’ll need to include both of them, or the command will fail.
+The usage of a specific version of the CLI is intended as the `extract` command is not available in Storybook 8.0 or higher. It also requires you to provide additional configuration to generate the `index.json` file accurately. See the [previous documentation](../../../release-7-5/docs/sharing/storybook-composition.md) for more information.
 
 </Callout>
diff --git a/docs/snippets/common/storybook-extract-result.json.mdx b/docs/snippets/common/storybook-extract-result.json.mdx
deleted file mode 100644
index 0bf8a886f78..00000000000
--- a/docs/snippets/common/storybook-extract-result.json.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
-```json
-{
-  "v": 2,
-  "globalParameters": {},
-  "kindParameters": {
-    "components/myComponent": {
-      "fileName": 445,
-      "framework": "react"
-    },
-    "components/myOtherComponent": {
-      "fileName": 447,
-      "framework": "react"
-    }
-  },
-  "stories": {
-    "components-mycomponent--simple": {
-      "id": "components-mycomponent--simple",
-      "name": "Simple",
-      "kind": "components/myComponent",
-      "story": "Simple",
-      "parameters": {
-        "__id": "components-mycomponent--simple",
-        "__isArgsStory": true
-      }
-    },
-    "components-myothercomponent--simple": {
-      "id": "components-myothercomponent--simple",
-      "name": "Simple",
-      "kind": "components/myothercomponent",
-      "story": "Simple",
-      "parameters": {
-        "__id": "components-myothercomponent--simple",
-        "__isArgsStory": true
-      }
-    }
-  }
-}
-```
diff --git a/docs/snippets/common/storybook-extract-specific-version.npx.js.mdx b/docs/snippets/common/storybook-extract-specific-version.npx.js.mdx
new file mode 100644
index 00000000000..828643a532c
--- /dev/null
+++ b/docs/snippets/common/storybook-extract-specific-version.npx.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npx storybook@7.5.3 extract
+```
diff --git a/docs/snippets/common/storybook-extract-specific-version.pnpm.js.mdx b/docs/snippets/common/storybook-extract-specific-version.pnpm.js.mdx
new file mode 100644
index 00000000000..55b88244114
--- /dev/null
+++ b/docs/snippets/common/storybook-extract-specific-version.pnpm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+pnpm dlx storybook@7.5.3 extract
+```
diff --git a/docs/snippets/common/storybook-extract-specific-version.yarn.js.mdx b/docs/snippets/common/storybook-extract-specific-version.yarn.js.mdx
new file mode 100644
index 00000000000..b821fcd2357
--- /dev/null
+++ b/docs/snippets/common/storybook-extract-specific-version.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn dlx storybook@7.5.3 extract
+```
diff --git a/docs/snippets/common/storybook-storiesjsonflag-result.json.mdx b/docs/snippets/common/storybook-storiesjsonflag-result.json.mdx
deleted file mode 100644
index bc8c9814631..00000000000
--- a/docs/snippets/common/storybook-storiesjsonflag-result.json.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
-```json
-{
-  "v": 3,
-  "stories": {
-    "components-mycomponent--simple": {
-      "id": "components-mycomponent--simple",
-      "title": "Components/MyComponent",
-      "name": "Simple",
-      "importPath": "./src/components/MyComponent.stories.jsx",
-      "kind": "Components/MyComponent",
-      "story": "Simple",
-      "parameters": {
-        "__id": "components-mycomponent--simple",
-        "docsOnly": false,
-        "fileName": "./src/components/MyComponent.stories.jsx"
-      }
-    },
-    "components-myothercomponent--simple": {
-      "id": "components-myothercomponent--simple",
-      "title": "Components/MyOtherComponent",
-      "name": "Simple",
-      "importPath": "./src/components/MyOtherComponent.stories.jsx",
-      "kind": "Example/Button",
-      "story": "Simple",
-      "parameters": {
-        "__id": "components-myothercomponent--simple",
-        "docsOnly": false,
-        "fileName": "./src/components/MyOtherComponent.stories.jsx"
-      }
-    }
-  }
-}
-```

From 5bd0359a804e0026d6f39f5955bdbd2a308d3738 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 3 Jan 2024 11:37:56 +0100
Subject: [PATCH 03/20] fix
 https://github.com/storybookjs/storybook/issues/25404

---
 code/ui/manager/src/container/Sidebar.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/code/ui/manager/src/container/Sidebar.tsx b/code/ui/manager/src/container/Sidebar.tsx
index 9041badfd5d..7eec79fc83c 100755
--- a/code/ui/manager/src/container/Sidebar.tsx
+++ b/code/ui/manager/src/container/Sidebar.tsx
@@ -1,7 +1,8 @@
 import React, { useMemo } from 'react';
 
 import type { Combo, StoriesHash } from '@storybook/manager-api';
-import { types, Consumer } from '@storybook/manager-api';
+import { Consumer } from '@storybook/manager-api';
+import { Addon_TypesEnum } from '@storybook/types';
 
 import type { SidebarProps as SidebarComponentProps } from '../components/sidebar/Sidebar';
 import { Sidebar as SidebarComponent } from '../components/sidebar/Sidebar';
@@ -41,9 +42,12 @@ const Sidebar = React.memo(function Sideber({ onMenuClick }: SidebarProps) {
     const whatsNewNotificationsEnabled =
       state.whatsNewData?.status === 'SUCCESS' && !state.disableWhatsNewNotifications;
 
-    const items = api.getElements(types.experimental_SIDEBAR_BOTTOM);
-    const bottom = useMemo(() => Object.values(items), [items]);
-    const top = useMemo(() => Object.values(api.getElements(types.experimental_SIDEBAR_TOP)), []);
+    const bottomItems = api.getElements(Addon_TypesEnum.experimental_SIDEBAR_BOTTOM);
+    const topItems = api.getElements(Addon_TypesEnum.experimental_SIDEBAR_TOP);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const bottom = useMemo(() => Object.values(bottomItems), [...Object.values(bottomItems)]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const top = useMemo(() => Object.values(topItems), [...Object.values(topItems)]);
 
     return {
       title: name,

From 71b8c2fa2505f066b530ede3db8af6f20431715a Mon Sep 17 00:00:00 2001
From: wuzhuobin <jiejin2022@163.com>
Date: Wed, 3 Jan 2024 22:53:39 +0800
Subject: [PATCH 04/20] Update
 button-story-default-export-with-component.ts.mdx

Fix incorrect export doc
---
 .../button-story-default-export-with-component.ts.mdx          | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/snippets/web-components/button-story-default-export-with-component.ts.mdx b/docs/snippets/web-components/button-story-default-export-with-component.ts.mdx
index 805431b359c..8ddd34a485c 100644
--- a/docs/snippets/web-components/button-story-default-export-with-component.ts.mdx
+++ b/docs/snippets/web-components/button-story-default-export-with-component.ts.mdx
@@ -3,7 +3,8 @@
 
 import type { Meta } from '@storybook/web-components';
 
-export default {
+const meta: Meta = {
+  title: 'Button',
   component: 'demo-button',
 };
 

From ff474770a2e923d9ec14ec2bcf76c78aa13ac6c1 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 5 Jan 2024 11:51:42 -0300
Subject: [PATCH 05/20] Types: Remove Story, ComponentStory, ComponentStoryObj,
 ComponentStoryFn and ComponentMeta types

---
 MIGRATION.md                                  |  7 ++
 code/renderers/html/src/public-types.ts       | 11 ---
 code/renderers/preact/src/public-types.ts     | 11 ---
 code/renderers/react/src/public-types.ts      | 71 +------------------
 code/renderers/server/src/public-types.ts     | 11 ---
 code/renderers/vue3/src/public-types.ts       | 11 ---
 .../web-components/src/public-types.ts        | 11 ---
 7 files changed, 8 insertions(+), 125 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 2b610abe8d4..d45dd2d66c8 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -33,6 +33,7 @@
     - [StorybookViteConfig type from @storybook/builder-vite](#storybookviteconfig-type-from-storybookbuilder-vite)
     - [props from WithTooltipComponent from @storybook/components](#props-from-withtooltipcomponent-from-storybookcomponents)
     - [LinkTo direct import from addon-links](#linkto-direct-import-from-addon-links)
+    - [Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types](#story-componentstory-componentstoryobj-componentstoryfn-and-componentmeta-typescript-types)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
     - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
     - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
@@ -619,6 +620,12 @@ import LinkTo from '@storybook/addon-links';
 import LinkTo from '@storybook/addon-links/react';
 ```
 
+#### Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types
+
+The `Story` type is now removed in favor of `StoryFn` and `StoryObj`. More info [here](##story-type-deprecated).
+
+Additionally, for React, the `ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are now removed in favor of `StoryFn`, `StoryObj` and `Meta`. More info [here](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated).
+
 ## From version 7.5.0 to 7.6.0
 
 #### CommonJS with Vite is deprecated
diff --git a/code/renderers/html/src/public-types.ts b/code/renderers/html/src/public-types.ts
index e0b41f5bc62..2dff13d9aa9 100644
--- a/code/renderers/html/src/public-types.ts
+++ b/code/renderers/html/src/public-types.ts
@@ -35,17 +35,6 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<HtmlRenderer, TArgs>;
  */
 export type StoryObj<TArgs = Args> = StoryAnnotations<HtmlRenderer, TArgs>;
 
-/**
- * @deprecated Use `StoryFn` instead.
- * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
- * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
- *
- * Story function that represents a CSFv2 component example.
- *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- */
-export type Story<TArgs = Args> = StoryFn<TArgs>;
-
 export type Decorator<TArgs = StrictArgs> = DecoratorFunction<HtmlRenderer, TArgs>;
 export type Loader<TArgs = StrictArgs> = LoaderFunction<HtmlRenderer, TArgs>;
 export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<HtmlRenderer, TArgs>;
diff --git a/code/renderers/preact/src/public-types.ts b/code/renderers/preact/src/public-types.ts
index b8f62d0dfca..bb0f10559e9 100644
--- a/code/renderers/preact/src/public-types.ts
+++ b/code/renderers/preact/src/public-types.ts
@@ -35,17 +35,6 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<PreactRenderer, TArgs>;
  */
 export type StoryObj<TArgs = Args> = StoryAnnotations<PreactRenderer, TArgs>;
 
-/**
- * @deprecated Use `StoryFn` instead.
- * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
- * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
- *
- * Story function that represents a CSFv2 component example.
- *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- */
-export type Story<TArgs = Args> = StoryFn<TArgs>;
-
 export type Decorator<TArgs = StrictArgs> = DecoratorFunction<PreactRenderer, TArgs>;
 export type Loader<TArgs = StrictArgs> = LoaderFunction<PreactRenderer, TArgs>;
 export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<PreactRenderer, TArgs>;
diff --git a/code/renderers/react/src/public-types.ts b/code/renderers/react/src/public-types.ts
index 838daf868d2..eaacc7fa14d 100644
--- a/code/renderers/react/src/public-types.ts
+++ b/code/renderers/react/src/public-types.ts
@@ -11,15 +11,13 @@ import type {
   StrictArgs,
   ProjectAnnotations,
 } from '@storybook/types';
-import type { ComponentProps, ComponentType, JSXElementConstructor } from 'react';
+import type { ComponentProps, ComponentType } from 'react';
 import type { SetOptional, Simplify } from 'type-fest';
 import type { ReactRenderer } from './types';
 
 export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types';
 export type { ReactRenderer };
 
-type JSXElement = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
-
 /**
  * Metadata to configure the stories for a component.
  *
@@ -74,73 +72,6 @@ type AddMocks<TArgs, DefaultArgs> = Simplify<{
     : TArgs[T];
 }>;
 
-/**
- * @deprecated Use `Meta` instead, e.g. ComponentMeta<typeof Button> -> Meta<typeof Button>.
- *
- * For the common case where a component's stories are simple components that receives args as props:
- *
- * ```tsx
- * export default { ... } as ComponentMeta<typeof Button>;
- * ```
- */
-export type ComponentMeta<T extends JSXElement> = Meta<ComponentProps<T>>;
-
-/**
- * @deprecated Use `StoryFn` instead, e.g. ComponentStoryFn<typeof Button> -> StoryFn<typeof Button>.
- * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
- * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
- *
- * For the common case where a (CSFv2) story is a simple component that receives args as props:
- *
- * ```tsx
- * const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />
- * ```
- */
-export type ComponentStoryFn<T extends JSXElement> = StoryFn<ComponentProps<T>>;
-
-/**
- * @deprecated Use `StoryObj` instead, e.g. ComponentStoryObj<typeof Button> -> StoryObj<typeof Button>.
- *
- * For the common case where a (CSFv3) story is a simple component that receives args as props:
- *
- * ```tsx
- * const MyStory: ComponentStoryObj<typeof Button> = {
- *   args: { buttonArg1: 'val' },
- * }
- * ```
- */
-export type ComponentStoryObj<T extends JSXElement> = StoryObj<ComponentProps<T>>;
-
-/**
- * @deprecated Use `StoryFn` instead.
- * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
- * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
- *
- * Story function that represents a CSFv2 component example.
- *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- */
-export type Story<TArgs = Args> = StoryFn<TArgs>;
-
-/**
- * @deprecated Use `StoryFn` instead, e.g. ComponentStory<typeof Button> -> StoryFn<typeof Button>.
- * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories
- * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/.
- *
- * For the common case where a (CSFv3) story is a simple component that receives args as props:
- *
- * ```tsx
- * const MyStory: ComponentStory<typeof Button> = {
- *   args: { buttonArg1: 'val' },
- * }
- * ```
- */
-export type ComponentStory<T extends JSXElement> = ComponentStoryFn<T>;
-
-/**
- * @deprecated Use Decorator instead.
- */
-export type DecoratorFn = DecoratorFunction<ReactRenderer>;
 export type Decorator<TArgs = StrictArgs> = DecoratorFunction<ReactRenderer, TArgs>;
 export type Loader<TArgs = StrictArgs> = LoaderFunction<ReactRenderer, TArgs>;
 export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<ReactRenderer, TArgs>;
diff --git a/code/renderers/server/src/public-types.ts b/code/renderers/server/src/public-types.ts
index 17a947a51d3..5e36d7a6439 100644
--- a/code/renderers/server/src/public-types.ts
+++ b/code/renderers/server/src/public-types.ts
@@ -34,17 +34,6 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<ServerRenderer, TArgs>;
  */
 export type StoryObj<TArgs = Args> = StoryAnnotations<ServerRenderer, TArgs>;
 
-/**
- * @deprecated Use `StoryFn` instead.
- * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
- * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
- *
- * Story function that represents a CSFv2 component example.
- *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- */
-export type Story<TArgs = Args> = StoryFn<TArgs>;
-
 export type { ServerRenderer };
 export type Decorator<TArgs = StrictArgs> = DecoratorFunction<ServerRenderer, TArgs>;
 export type Loader<TArgs = StrictArgs> = LoaderFunction<ServerRenderer, TArgs>;
diff --git a/code/renderers/vue3/src/public-types.ts b/code/renderers/vue3/src/public-types.ts
index 51e58dc0b08..2bc2653eb0c 100644
--- a/code/renderers/vue3/src/public-types.ts
+++ b/code/renderers/vue3/src/public-types.ts
@@ -74,17 +74,6 @@ type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends Constructor<any>
   ? ComponentPropsAndSlots<TCmpOrArgs>
   : TCmpOrArgs;
 
-/**
- * @deprecated Use `StoryFn` instead.
- * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
- * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
- *
- * Story function that represents a CSFv2 component example.
- *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- */
-export type Story<TArgs = Args> = StoryFn<TArgs>;
-
 export type Decorator<TArgs = StrictArgs> = DecoratorFunction<VueRenderer, TArgs>;
 export type Loader<TArgs = StrictArgs> = LoaderFunction<VueRenderer, TArgs>;
 export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<VueRenderer, TArgs>;
diff --git a/code/renderers/web-components/src/public-types.ts b/code/renderers/web-components/src/public-types.ts
index 9beed94f444..19ccdf4b27a 100644
--- a/code/renderers/web-components/src/public-types.ts
+++ b/code/renderers/web-components/src/public-types.ts
@@ -35,17 +35,6 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<WebComponentsRenderer, TArg
  */
 export type StoryObj<TArgs = Args> = StoryAnnotations<WebComponentsRenderer, TArgs>;
 
-/**
- * @deprecated Use `StoryFn` instead.
- * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
- * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
- *
- * Story function that represents a CSFv2 component example.
- *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- */
-export type Story<TArgs = Args> = StoryFn<TArgs>;
-
 export type Decorator<TArgs = StrictArgs> = DecoratorFunction<WebComponentsRenderer, TArgs>;
 export type Loader<TArgs = StrictArgs> = LoaderFunction<WebComponentsRenderer, TArgs>;
 export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<WebComponentsRenderer, TArgs>;

From e4196ed27067597518cc56334fe649a3dd9b45d1 Mon Sep 17 00:00:00 2001
From: Shaun Lloyd <shaun@chromatic.com>
Date: Fri, 5 Jan 2024 12:12:43 -0500
Subject: [PATCH 06/20] More details for styling and css docs

---
 docs/configure/styling-and-css.md | 167 ++++++++++++++++++++++--------
 1 file changed, 124 insertions(+), 43 deletions(-)

diff --git a/docs/configure/styling-and-css.md b/docs/configure/styling-and-css.md
index f2e70a9b672..ca850007cbb 100644
--- a/docs/configure/styling-and-css.md
+++ b/docs/configure/styling-and-css.md
@@ -2,18 +2,17 @@
 title: 'Styling and CSS'
 ---
 
+<!-- Not Angular -->
+<IfRenderer renderer={['react', 'vue', 'web-components', 'ember', 'html', 'svelte', 'preact', 'qwik', 'solid']}>
+
 There are many ways to include CSS in a web application, and correspondingly there are many ways to include CSS in Storybook. Usually, it is best to try and replicate what your application does with styling in Storybook’s configuration.
+## CSS
+Storybook supports importing CSS files in a few different ways. Storybook will inject these tags into the preview iframe where your components render, not the Storybook Manager UI. The best way to import CSS depends on your project's configuration and your preferences.
 
-If you're using Vite to build your Storybook, you're covered! Storybook will use your vite config file which supports most popular styling tools out-of-the-box 🎉. However, if you're using Webpack, you may need some extra configuration. To make this easier, we recommend using [`@storybook/addon-styling-webpack`](https://storybook.js.org/addons/@storybook/addon-styling-webpack/).
-
-**Note**: If you're using Storybook with Angular or Next.js, you can skip this section. Storybook will automatically use the same styling configuration as your application.
-
-## Importing CSS files
-
-Storybook is pre-configured to recognize imports for CSS files. To add global CSS for all your stories, import it in [`.storybook/preview.js`](./index.md#configure-story-rendering).
-
+### Include static CSS
+If you have a global CSS file that you want to include in all your stories, you can import it in [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head).
+However, these files will not be subject to HMR, so you'll need to restart your Storybook server to see your changes.
 <!-- prettier-ignore-start -->
-
 <CodeSnippets
   paths={[
     'common/storybook-preview-import-global-styles.js.mdx',
@@ -22,66 +21,147 @@ Storybook is pre-configured to recognize imports for CSS files. To add global CS
 />
 
 <!-- prettier-ignore-end -->
+### Import bundled CSS
+All Storybooks are pre-configured to recognize imports for CSS files. To add global CSS for all your stories, import it in [`.storybook/preview.ts`](./overview.md#configure-story-rendering). These files will be subject to HMR, so you can see your changes without restarting your Storybook server.
+<!-- prettier-ignore-start -->
+<CodeSnippets
+  paths={[
+    'common/storybook-preview-import-global-styles.js.mdx',
+    'common/storybook-preview-import-global-styles.ts.mdx',
+  ]}
+/>
 
-If your component files import their CSS files, this will work too. The noticeable exception to this is if you're using CSS processor tools like Sass or Postcss.
+<!-- prettier-ignore-end -->
+If your component files import their CSS files, this will work too. However, if you're using CSS processor tools like Sass or Postcss, you may need some more configuration.
 
-## CSS processors
+## CSS modules
 
-If you're using Vite as your builder, you're covered! Vite supports Sass and PostCSS out-of-the-box 🎉
+### Vite
+Vite comes with CSS modules support out-of-the-box. If you have customized the CSS modules configuration in your `vite.config.js` this will automatically be applied to your Storybook as well. Read more about [Vite's CSS modules support](https://vitejs.dev/guide/features.html#css-modules).
 
-However, if you're using Webpack and want to use Sass and PostCss, you'll need some extra configuration. We recommend installing [`@storybook/addon-styling-webpack`](https://storybook.js.org/addons/@storybook/addon-styling-webpack/) to help you configure these tools. Or if you'd prefer, you can customize [Storybook's webpack configuration yourself](../builders/webpack.md#override-the-default-configuration) to include the appropriate loader(s).
+### Webpack
+<IfRenderer renderer='react'>
+<Callout
+  variant="info"
+  icon="📣"
+  title="Using `@storybook/nextjs`?"
+>
+
+Storybook recreates your Next.js configuration, so you can use CSS modules in your stories without any extra configuration.
+
+</Callout>
+</IfRenderer>
+
+## PostCSS
+
+### Vite
+Vite comes with PostCSS support out-of-the-box. If you have customized the PostCSS configuration in your `vite.config.js` this will automatically be applied to your Storybook as well. Read more about [Vite's PostCSS support](https://vitejs.dev/guide/features.html#postcss).
+
+### Webpack
+<IfRenderer renderer='react'>
+<Callout
+  variant="info"
+  icon="📣"
+  title="Using `@storybook/nextjs`?"
+>
+
+Storybook recreates your Next.js configuration, so you can use PostCSS in your stories without any extra configuration.
+</Callout>
+</IfRenderer>
+
+## CSS pre-processors
+
+### Vite
+Vite comes with Sass, Less, and Stylus support out-of-the-box. Read more about [Vite's CSS Pre-processor support](https://vitejs.dev/guide/features.html#css-pre-processors).
+
+### Webpack
+<IfRenderer renderer='react'>
+<Callout
+  variant="info"
+  icon="📣"
+  title="Using `@storybook/nextjs`?"
+>
+
+Storybook recreates your Next.js configuration, so you can use Sass in your stories without any extra configuration.
+
+</Callout>
+</IfRenderer>
+
+However, if you're using Webpack and want to use Sass or less, you'll need some extra configuration. We recommend installing [`@storybook/addon-styling-webpack`](https://storybook.js.org/addons/@storybook/addon-styling-webpack/) to help you configure these tools. Or if you'd prefer, you can customize [Storybook's webpack configuration yourself](../builders/webpack.md#override-the-default-configuration) to include the appropriate loader(s).
 
 ## CSS-in-JS
-
 CSS-in-JS libraries are designed to use basic JavaScript, and they often work in Storybook without any extra configuration. Some libraries expect components to render in a specific rendering “context” (for example, to provide themes), which can be accomplished with `@storybook/addon-themes`'s [`withThemeFromJSXProvider` decorator](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#withthemefromjsxprovider).
 
 ## Adding webfonts
 
+### `.storybook/preview-head.html`
 If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets.md#serving-static-files-via-storybook-configuration).
 
-<IfRenderer renderer='angular'>
+### `.storybook/preview.ts`
+If you're using something like [`fontsource`](https://fontsource.org/) for your fonts, you can import the needed css files in your [`.storybook/preview.ts`](./overview.md#configure-story-rendering) file.
 
-## Troubleshooting
+</IfRenderer>
 
-### Styles aren't being applied with Angular
+<!-- Angular only -->
+<IfRenderer renderer="angular">
 
-The latest Angular releases introduced significant changes in configuring and styling projects. If you're working with an Angular version greater than 13 and your styles aren't being applied, you may need to check your `angular.json` and adjust the `builder` configuration to import your CSS:
+  Storybook for Angular relies on the Angular CLI to build your stories. This means that you can use any CSS preprocessor that the Angular CLI supports. You can read more about this in the [Angular CLI documentation](https://angular.io/guide/workspace-config#style-script-config).
 
-```json
-{
-  "my-project": {
-    "architect": {
-      "build": {
-        "builder": "@angular-devkit/build-angular:browser",
-        "options": {
-          "styles": ["src/styles.css", "src/styles.scss"]
-        }
-      }
-    }
-  }
-}
-```
+  ## Global styles
+  To add global styles to your Storybook, you can add them to the `styles` array in your `angular.json` file. This will add the styles to the preview iframe where your components render, not the Storybook Manager UI.
 
-Additionally, if you need Storybook-specific styles that are separate from your application, you can configure the styles with [Storybook's custom builder](../get-started/install.md#troubleshooting), which will override the application's styles:
+  Don't forget to also add your global styles to your `build-storybook` target in your `angular.json` file. This will ensure that your global styles are included in the static build of your Storybook as well.
 
-```json
-{
+  ```json
+  {
   "storybook": {
     "builder": "@storybook/angular:start-storybook",
     "options": {
-      "browserTarget": "my-default-project:build",
-      "styles": [".storybook/custom-styles.scss"]
+      "configDir": ".storybook",
+      "browserTarget": "angular-latest:build",
+      "compodoc": true,
+      "compodocArgs": ["-e", "json", "-d", "."],
+      "port": 6006,
+      "styles": [
+        // Add your global styles here
+        "@angular/material/prebuilt-themes/indigo-pink.css",
+        "@fontsource/roboto/300.css",
+        "@fontsource/roboto/400.css",
+        "@fontsource/roboto/500.css",
+        "@fontsource/roboto/700.css",
+        "@fontsource/material-icons",
+        "src/styles.scss"
+      ]
+    }
+  },
+  "build-storybook": {
+    "builder": "@storybook/angular:build-storybook",
+    "options": {
+      "configDir": ".storybook",
+      "browserTarget": "angular-latest:build",
+      "compodoc": true,
+      "compodocArgs": ["-e", "json", "-d", "."],
+      "styles": [
+        // Add your global styles here
+        "@angular/material/prebuilt-themes/indigo-pink.css",
+        "@fontsource/roboto/300.css",
+        "@fontsource/roboto/400.css",
+        "@fontsource/roboto/500.css",
+        "@fontsource/roboto/700.css",
+        "@fontsource/material-icons",
+        "src/styles.scss"
+      ],
+      "outputDir": "storybook-static"
     }
   }
 }
 ```
 
-### NX component libraries not loading styles
+## Troubleshooting
 
-If you're working with Storybook and [Nx libraries](https://nx.dev/structure/library-types),
-you can extend your project's configuration (i.e., `project.json`) and provide the application's styles.
+If you're working with Storybook and [Nx libraries](https://nx.dev/structure/library-types), you can extend your project's configuration (i.e., project.json) and provide the application's styles.
 
-For earlier Nx versions (before `14.1.8`), your configuration would look like this:
+For earlier Nx versions (before 14.1.8), your configuration would look like this:
 
 ```json
  "build-storybook": {
@@ -99,7 +179,7 @@ For earlier Nx versions (before `14.1.8`), your configuration would look like th
   }
 ```
 
-Starting with version `14.1.8`, Nx uses the Storybook builder directly, which means any configuration supplied to the builder also applies to the NX setup. If you're working with a library, you'll need to configure the styling options ( e.g., preprocessors) inside the `build-storybook` `options` configuration object. For example:
+Starting with version 14.1.8, Nx uses the Storybook builder directly, which means any configuration supplied to the builder also applies to the NX setup. If you're working with a library, you'll need to configure the styling options ( e.g., preprocessors) inside the `build-storybook` options configuration object. For example:
 
 ```json
     "storybook": {
@@ -126,6 +206,7 @@ Starting with version `14.1.8`, Nx uses the Storybook builder directly, which me
     }
 ```
 
-When Nx runs, it will load Storybook's configuration and styling based on [`storybook`'s `browserTarget`](https://nx.dev/storybook/extra-topics-for-angular-projects#setting-up-browsertarget).
+When Nx runs, it will load Storybook's configuration and styling based on [Storybook's `browserTarget`](https://nx.dev/storybook/extra-topics-for-angular-projects#setting-up-browsertarget).
 
 </IfRenderer>
+

From 871d749206d6301af8ea946538f2556183b54ce4 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 5 Jan 2024 14:23:42 -0300
Subject: [PATCH 07/20] fix stories

---
 MIGRATION.md                                              | 2 +-
 .../interactions/src/components/Interaction.stories.tsx   | 6 +++---
 .../ui/manager/src/components/preview/Preview.stories.tsx | 4 ++--
 .../ui/manager/src/components/sidebar/Heading.stories.tsx | 8 ++++----
 code/ui/manager/src/settings/SettingsFooter.stories.tsx   | 4 ++--
 code/ui/manager/src/settings/shortcuts.stories.tsx        | 4 ++--
 .../external-docs/components/AccountForm.stories.tsx      | 8 ++++----
 7 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index d45dd2d66c8..bc9405d5112 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -622,7 +622,7 @@ import LinkTo from '@storybook/addon-links/react';
 
 #### Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types
 
-The `Story` type is now removed in favor of `StoryFn` and `StoryObj`. More info [here](##story-type-deprecated).
+The `Story` type is now removed in favor of `StoryFn` and `StoryObj`. More info [here](#story-type-deprecated).
 
 Additionally, for React, the `ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are now removed in favor of `StoryFn`, `StoryObj` and `Meta`. More info [here](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated).
 
diff --git a/code/addons/interactions/src/components/Interaction.stories.tsx b/code/addons/interactions/src/components/Interaction.stories.tsx
index ea03a78431d..4ae080dac30 100644
--- a/code/addons/interactions/src/components/Interaction.stories.tsx
+++ b/code/addons/interactions/src/components/Interaction.stories.tsx
@@ -1,4 +1,4 @@
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react';
 import { expect } from '@storybook/jest';
 import { CallStates } from '@storybook/instrumenter';
 import { userEvent, within } from '@storybook/testing-library';
@@ -7,7 +7,7 @@ import { getCalls } from '../mocks';
 import { Interaction } from './Interaction';
 import SubnavStories from './Subnav.stories';
 
-type Story = ComponentStoryObj<typeof Interaction>;
+type Story = StoryObj<typeof Interaction>;
 
 export default {
   title: 'Addons/Interactions/Interaction',
@@ -17,7 +17,7 @@ export default {
     controls: SubnavStories.args.controls,
     controlStates: SubnavStories.args.controlStates,
   },
-} as ComponentMeta<typeof Interaction>;
+} as Meta<typeof Interaction>;
 
 export const Active: Story = {
   args: {
diff --git a/code/ui/manager/src/components/preview/Preview.stories.tsx b/code/ui/manager/src/components/preview/Preview.stories.tsx
index 624542b2f68..0a639c9db64 100644
--- a/code/ui/manager/src/components/preview/Preview.stories.tsx
+++ b/code/ui/manager/src/components/preview/Preview.stories.tsx
@@ -7,7 +7,7 @@ import { Location, BaseLocationProvider } from '@storybook/router';
 
 import { ThemeProvider, ensure as ensureTheme, themes } from '@storybook/theming';
 
-import type { DecoratorFn } from '@storybook/react';
+import type { Decorator } from '@storybook/react';
 import { Preview } from './Preview';
 
 import { PrettyFakeProvider } from '../../FakeProvider';
@@ -80,7 +80,7 @@ export default {
           </Location>
         </BaseLocationProvider>
       );
-    }) as DecoratorFn,
+    }) as Decorator,
   ],
 };
 
diff --git a/code/ui/manager/src/components/sidebar/Heading.stories.tsx b/code/ui/manager/src/components/sidebar/Heading.stories.tsx
index b958ebe2e1b..34e08e7c02e 100644
--- a/code/ui/manager/src/components/sidebar/Heading.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/Heading.stories.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable storybook/use-storybook-testing-library */
 // @TODO: use addon-interactions and remove the rule disable above
 import React from 'react';
-import type { ComponentMeta, ComponentStoryObj, ComponentStoryFn } from '@storybook/react';
+import type { Meta, StoryObj, StoryFn } from '@storybook/react';
 import { ThemeProvider, useTheme } from '@storybook/theming';
 import type { Theme } from '@storybook/theming';
 import { action } from '@storybook/addon-actions';
@@ -9,7 +9,7 @@ import { screen } from '@testing-library/dom';
 
 import { Heading } from './Heading';
 
-type Story = ComponentStoryFn<typeof Heading>;
+type Story = StoryFn<typeof Heading>;
 
 export default {
   component: Heading,
@@ -19,7 +19,7 @@ export default {
   decorators: [
     (storyFn) => <div style={{ padding: '0 20px', maxWidth: '230px' }}>{storyFn()}</div>,
   ],
-} as ComponentMeta<typeof Heading>;
+} as Meta<typeof Heading>;
 
 const menuItems = [
   { title: 'Menu Item 1', onClick: action('onActivateMenuItem'), id: '1' },
@@ -223,7 +223,7 @@ export const NoBrand: Story = () => {
   );
 };
 
-export const SkipToCanvasLinkFocused: ComponentStoryObj<typeof Heading> = {
+export const SkipToCanvasLinkFocused: StoryObj<typeof Heading> = {
   args: {
     menu: menuItems,
     skipLinkHref: '#storybook-preview-wrapper',
diff --git a/code/ui/manager/src/settings/SettingsFooter.stories.tsx b/code/ui/manager/src/settings/SettingsFooter.stories.tsx
index 09ba093fb6d..5bd0bb8f3b8 100644
--- a/code/ui/manager/src/settings/SettingsFooter.stories.tsx
+++ b/code/ui/manager/src/settings/SettingsFooter.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { DecoratorFn } from '@storybook/react';
+import type { Decorator } from '@storybook/react';
 import SettingsFooter from './SettingsFooter';
 
 export default {
@@ -11,7 +11,7 @@ export default {
       <div style={{ width: '600px', margin: '2rem auto' }}>
         <StoryFn {...c} />
       </div>
-    )) as DecoratorFn,
+    )) as Decorator,
   ],
 };
 
diff --git a/code/ui/manager/src/settings/shortcuts.stories.tsx b/code/ui/manager/src/settings/shortcuts.stories.tsx
index 47d7397584e..555f5b6b0b6 100644
--- a/code/ui/manager/src/settings/shortcuts.stories.tsx
+++ b/code/ui/manager/src/settings/shortcuts.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { actions as makeActions } from '@storybook/addon-actions';
 
-import type { DecoratorFn } from '@storybook/react';
+import type { Decorator } from '@storybook/react';
 import { ShortcutsScreen } from './shortcuts';
 import { defaultShortcuts } from './defaultShortcuts';
 
@@ -26,7 +26,7 @@ export default {
       >
         <StoryFn {...c} />
       </div>
-    )) as DecoratorFn,
+    )) as Decorator,
   ],
 };
 
diff --git a/test-storybooks/external-docs/components/AccountForm.stories.tsx b/test-storybooks/external-docs/components/AccountForm.stories.tsx
index c4579abaf5e..10280adb253 100644
--- a/test-storybooks/external-docs/components/AccountForm.stories.tsx
+++ b/test-storybooks/external-docs/components/AccountForm.stories.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable storybook/use-storybook-testing-library */
 // @TODO: use addon-interactions and remove the rule disable above
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react';
 import { screen } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 import { AccountForm } from './AccountForm';
@@ -12,9 +12,9 @@ export default {
   parameters: {
     layout: 'centered',
   },
-} as ComponentMeta<typeof AccountForm>;
+} as Meta<typeof AccountForm>;
 
-type Story = ComponentStoryObj<typeof AccountForm>;
+type Story = StoryObj<typeof AccountForm>;
 
 export const Standard: Story = {
   args: { passwordVerification: false },
@@ -54,7 +54,7 @@ export const StandardFailHover: Story = {
   },
 };
 
-export const Verification: ComponentStoryObj<typeof AccountForm> = {
+export const Verification: StoryObj<typeof AccountForm> = {
   args: { passwordVerification: true },
 };
 

From 4c7e5458a8b5621ff82d5d75c9e8241b7efc10df Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 5 Jan 2024 15:30:20 -0300
Subject: [PATCH 08/20] add codemod to migration notes

---
 MIGRATION.md | 47 ++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 38 insertions(+), 9 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index bc9405d5112..995cd649dc8 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -33,7 +33,7 @@
     - [StorybookViteConfig type from @storybook/builder-vite](#storybookviteconfig-type-from-storybookbuilder-vite)
     - [props from WithTooltipComponent from @storybook/components](#props-from-withtooltipcomponent-from-storybookcomponents)
     - [LinkTo direct import from addon-links](#linkto-direct-import-from-addon-links)
-    - [Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types](#story-componentstory-componentstoryobj-componentstoryfn-and-componentmeta-typescript-types)
+    - [DecoratorFn, Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types](#decoratorfn-story-componentstory-componentstoryobj-componentstoryfn-and-componentmeta-typescript-types)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
     - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
     - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
@@ -620,11 +620,13 @@ import LinkTo from '@storybook/addon-links';
 import LinkTo from '@storybook/addon-links/react';
 ```
 
-#### Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types
+#### DecoratorFn, Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types
 
 The `Story` type is now removed in favor of `StoryFn` and `StoryObj`. More info [here](#story-type-deprecated).
 
-Additionally, for React, the `ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are now removed in favor of `StoryFn`, `StoryObj` and `Meta`. More info [here](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated).
+The `DecoratorFn` type is now removed in favor of `Decorator`. [More info](#renamed-decoratorfn-to-decorator).
+
+For React, the `ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are now removed in favor of `StoryFn`, `StoryObj` and `Meta`. [More info](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated).
 
 ## From version 7.5.0 to 7.6.0
 
@@ -2221,6 +2223,8 @@ During the 7.0 dev cycle we will be preparing recommendations and utilities to m
 
 #### `Story` type deprecated
 
+_Has codemod_
+
 In 6.x you were able to do this:
 
 ```ts
@@ -2229,24 +2233,43 @@ import type { Story } from '@storybook/react';
 export const MyStory: Story = () => <div />;
 ```
 
-But this will produce a deprecation warning in 7.0 because `Story` has been deprecated.
-To fix the deprecation warning, use the `StoryFn` type:
+However with the introduction of CSF3, the `Story` type has been deprecated in favor of two other types: `StoryFn` for CSF2 and `StoryObj` for CSF3.
 
 ```ts
-import type { StoryFn } from '@storybook/react';
+import type { StoryFn, StoryObj } from '@storybook/react';
 
-export const MyStory: StoryFn = () => <div />;
+export const MyCsf2Story: StoryFn = () => <div />;
+export const MyCsf3Story: StoryObj = {
+  render: () => <div />
+};
 ```
 
 This change is part of our move to CSF3, which uses objects instead of functions to represent stories.
 You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
 
+We have set up a codemod that attempts to automatically migrate your code for you (update the glob to suit your needs):
+
+```
+npx storybook@next migrate upgrade-deprecated-types --glob="**/*.stories.tsx"
+```
+
 #### `ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are deprecated
 
-The type of StoryObj and StoryFn have been changed in 7.0 so that both the "component" as "the props of the component" will be accepted as the generic parameter.
+_Has codemod_
+
+The type of `StoryObj` and `StoryFn` have been changed in 7.0 so that both the "component" as "the props of the component" will be accepted as the generic parameter. You can now replace the types:
+
+```
+ComponentStory -> StoryFn (CSF2) or StoryObj (CSF3)
+ComponentStoryObj -> StoryObj
+ComponentStoryFn -> StoryFn
+ComponentMeta -> Meta
+```
+
+Here are a few examples:
 
 ```ts
-import type { Story } from '@storybook/react';
+import type { StoryFn, StoryObj } from '@storybook/react';
 import { Button, ButtonProps } from './Button';
 
 // This works in 7.0, making the ComponentX types redundant.
@@ -2266,6 +2289,12 @@ export const CSF2Story: StoryFn<ButtonProps> = (args) => <Button {...args} />;
 CSF2Story.args = { label: 'Label' };
 ```
 
+We have set up a codemod that attempts to automatically migrate your code for you (update the glob to suit your needs):
+
+```
+npx storybook@next migrate upgrade-deprecated-types --glob="**/*.stories.tsx"
+```
+
 #### Renamed `renderToDOM` to `renderToCanvas`
 
 The "rendering" function that renderers (ex-frameworks) must export (`renderToDOM`) has been renamed to `renderToCanvas` to acknowledge that some consumers of frameworks/the preview do not work with DOM elements.

From fe96e7f18a93aff54077ad696a3434e85baf20cc Mon Sep 17 00:00:00 2001
From: Shaun Evening <shaun@chromatic.com>
Date: Fri, 5 Jan 2024 13:39:41 -0500
Subject: [PATCH 09/20] Update docs/configure/styling-and-css.md

Co-authored-by: Kyle Gach <kyle.gach@gmail.com>
---
 docs/configure/styling-and-css.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/configure/styling-and-css.md b/docs/configure/styling-and-css.md
index ca850007cbb..d9cb0dd4598 100644
--- a/docs/configure/styling-and-css.md
+++ b/docs/configure/styling-and-css.md
@@ -206,7 +206,7 @@ Starting with version 14.1.8, Nx uses the Storybook builder directly, which mean
     }
 ```
 
-When Nx runs, it will load Storybook's configuration and styling based on [Storybook's `browserTarget`](https://nx.dev/storybook/extra-topics-for-angular-projects#setting-up-browsertarget).
+When Nx runs, it will load Storybook's configuration and styling based on [`storybook.browserTarget`](https://nx.dev/storybook/extra-topics-for-angular-projects#setting-up-browsertarget).
 
 </IfRenderer>
 

From 7acfd6d2f90b5ce62acbc7dc3117dcc5c381feba Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 5 Jan 2024 11:36:08 -0300
Subject: [PATCH 10/20] Types: Remove Framework in favor of Renderer types

---
 MIGRATION.md                                      | 5 +++++
 code/frameworks/angular/src/client/types.ts       | 4 ----
 code/frameworks/ember/src/client/preview/types.ts | 4 ----
 code/renderers/html/src/types.ts                  | 4 ----
 code/renderers/preact/src/types.ts                | 7 -------
 code/renderers/react/src/types.ts                 | 4 ----
 code/renderers/server/src/types.ts                | 4 ----
 code/renderers/vue3/src/types.ts                  | 4 ----
 code/renderers/web-components/src/types.ts        | 4 ----
 9 files changed, 5 insertions(+), 35 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 995cd649dc8..a965c419e59 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -34,6 +34,7 @@
     - [props from WithTooltipComponent from @storybook/components](#props-from-withtooltipcomponent-from-storybookcomponents)
     - [LinkTo direct import from addon-links](#linkto-direct-import-from-addon-links)
     - [DecoratorFn, Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types](#decoratorfn-story-componentstory-componentstoryobj-componentstoryfn-and-componentmeta-typescript-types)
+    - ["Framework" TypeScript types](#framework-typescript-types)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
     - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
     - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
@@ -628,6 +629,10 @@ The `DecoratorFn` type is now removed in favor of `Decorator`. [More info](#rena
 
 For React, the `ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are now removed in favor of `StoryFn`, `StoryObj` and `Meta`. [More info](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated).
 
+#### "Framework" TypeScript types
+
+The Framework types such as `ReactFramework` are now removed in favor of Renderer types such as `ReactRenderer`. This affects all frameworks. [More info](#renamed-xframework-to-xrenderer).
+
 ## From version 7.5.0 to 7.6.0
 
 #### CommonJS with Vite is deprecated
diff --git a/code/frameworks/angular/src/client/types.ts b/code/frameworks/angular/src/client/types.ts
index ef3c4428c21..100b3e91231 100644
--- a/code/frameworks/angular/src/client/types.ts
+++ b/code/frameworks/angular/src/client/types.ts
@@ -37,10 +37,6 @@ export interface StoryFnAngularReturnType {
   userDefinedTemplate?: boolean;
 }
 
-/**
- * @deprecated Use `AngularRenderer` instead.
- */
-export type AngularFramework = AngularRenderer;
 export interface AngularRenderer extends WebRenderer {
   component: any;
   storyResult: StoryFnAngularReturnType;
diff --git a/code/frameworks/ember/src/client/preview/types.ts b/code/frameworks/ember/src/client/preview/types.ts
index 5df0b2632aa..147f4928f24 100644
--- a/code/frameworks/ember/src/client/preview/types.ts
+++ b/code/frameworks/ember/src/client/preview/types.ts
@@ -13,10 +13,6 @@ export interface OptionsArgs {
   element: any;
 }
 
-/**
- * @deprecated Use `EmberRenderer` instead.
- */
-export type EmberFramework = EmberRenderer;
 export interface EmberRenderer extends WebRenderer {
   component: any;
   storyResult: OptionsArgs;
diff --git a/code/renderers/html/src/types.ts b/code/renderers/html/src/types.ts
index e8f264aed80..c6152653b11 100644
--- a/code/renderers/html/src/types.ts
+++ b/code/renderers/html/src/types.ts
@@ -14,10 +14,6 @@ export interface ShowErrorArgs {
   description: string;
 }
 
-/**
- * @deprecated Use `HtmlRenderer` instead.
- */
-export type HtmlFramework = HtmlRenderer;
 export interface HtmlRenderer extends WebRenderer {
   component: string | HTMLElement | ArgsStoryFn<HtmlRenderer>;
   storyResult: StoryFnHtmlReturnType;
diff --git a/code/renderers/preact/src/types.ts b/code/renderers/preact/src/types.ts
index 233528349a1..1a8e545c854 100644
--- a/code/renderers/preact/src/types.ts
+++ b/code/renderers/preact/src/types.ts
@@ -10,13 +10,6 @@ export interface ShowErrorArgs {
   description: string;
 }
 
-/**
- * @dep
- */
-/**
- * @deprecated Use `PreactRenderer` instead.
- */
-export type PreactFramework = PreactRenderer;
 export interface PreactRenderer extends WebRenderer {
   component: AnyComponent<any, any>;
   storyResult: StoryFnPreactReturnType;
diff --git a/code/renderers/react/src/types.ts b/code/renderers/react/src/types.ts
index 637f1b5a5eb..b90766013de 100644
--- a/code/renderers/react/src/types.ts
+++ b/code/renderers/react/src/types.ts
@@ -3,10 +3,6 @@ import type { WebRenderer } from '@storybook/types';
 
 export type { RenderContext, StoryContext } from '@storybook/types';
 
-/**
- * @deprecated Use `ReactRenderer` instead.
- */
-export type ReactFramework = ReactRenderer;
 export interface ReactRenderer extends WebRenderer {
   component: ComponentType<this['T']>;
   storyResult: StoryFnReactReturnType;
diff --git a/code/renderers/server/src/types.ts b/code/renderers/server/src/types.ts
index 4b562f771fb..c386ec965df 100644
--- a/code/renderers/server/src/types.ts
+++ b/code/renderers/server/src/types.ts
@@ -5,10 +5,6 @@ export type { RenderContext } from '@storybook/types';
 export type StoryFnServerReturnType = any;
 export type StoryContext = StoryContextBase<ServerRenderer>;
 
-/**
- * @deprecated Use `ServerRenderer` instead.
- */
-export type ServerFramework = ServerRenderer;
 export interface ServerRenderer extends WebRenderer {
   component: string;
   storyResult: StoryFnServerReturnType;
diff --git a/code/renderers/vue3/src/types.ts b/code/renderers/vue3/src/types.ts
index 1094f678062..dfa6bed7870 100644
--- a/code/renderers/vue3/src/types.ts
+++ b/code/renderers/vue3/src/types.ts
@@ -16,10 +16,6 @@ export type StoryContext = StoryContextBase<VueRenderer>;
 
 export type StorybookVueApp = { vueApp: App<any>; storyContext: StoryContext };
 
-/**
- * @deprecated Use `VueRenderer` instead.
- */
-export type VueFramework = VueRenderer;
 export interface VueRenderer extends WebRenderer {
   // We are omitting props, as we don't use it internally, and more importantly, it completely changes the assignability of meta.component.
   // Try not omitting, and check the type errros in the test file, if you want to learn more.
diff --git a/code/renderers/web-components/src/types.ts b/code/renderers/web-components/src/types.ts
index 32cbce64c69..f58e7eaa01f 100644
--- a/code/renderers/web-components/src/types.ts
+++ b/code/renderers/web-components/src/types.ts
@@ -10,10 +10,6 @@ export type StoryFnHtmlReturnType =
 
 export type StoryContext = StoryContextBase<WebComponentsRenderer>;
 
-/**
- * @deprecated Use `WebComponentsRenderer` instead.
- */
-export type WebComponentsFramework = WebComponentsRenderer;
 export interface WebComponentsRenderer extends WebRenderer {
   component: string;
   storyResult: StoryFnHtmlReturnType;

From 020035fbbd44b000977fd40c85cf36eb1d8b1944 Mon Sep 17 00:00:00 2001
From: Shaun Lloyd <shaun@chromatic.com>
Date: Fri, 5 Jan 2024 14:10:43 -0500
Subject: [PATCH 11/20] Add missing content

---
 docs/configure/styling-and-css.md | 65 +++++++++++++++++++++----------
 1 file changed, 45 insertions(+), 20 deletions(-)

diff --git a/docs/configure/styling-and-css.md b/docs/configure/styling-and-css.md
index d9cb0dd4598..630e6e25ab7 100644
--- a/docs/configure/styling-and-css.md
+++ b/docs/configure/styling-and-css.md
@@ -3,16 +3,38 @@ title: 'Styling and CSS'
 ---
 
 <!-- Not Angular -->
-<IfRenderer renderer={['react', 'vue', 'web-components', 'ember', 'html', 'svelte', 'preact', 'qwik', 'solid']}>
+<If notRenderer="angular">
 
 There are many ways to include CSS in a web application, and correspondingly there are many ways to include CSS in Storybook. Usually, it is best to try and replicate what your application does with styling in Storybook’s configuration.
+
 ## CSS
+
 Storybook supports importing CSS files in a few different ways. Storybook will inject these tags into the preview iframe where your components render, not the Storybook Manager UI. The best way to import CSS depends on your project's configuration and your preferences.
 
+### Import bundled CSS (Recommended)
+
+All Storybooks are pre-configured to recognize imports for CSS files. To add global CSS for all your stories, import it in [`.storybook/preview.ts`](./overview.md#configure-story-rendering). These files will be subject to HMR, so you can see your changes without restarting your Storybook server.
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-preview-import-global-styles.js.mdx',
+    'common/storybook-preview-import-global-styles.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+If your component files import their CSS files, this will work too. However, if you're using CSS processor tools like Sass or Postcss, you may need some more configuration.
+
 ### Include static CSS
+
 If you have a global CSS file that you want to include in all your stories, you can import it in [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head).
 However, these files will not be subject to HMR, so you'll need to restart your Storybook server to see your changes.
+
 <!-- prettier-ignore-start -->
+
 <CodeSnippets
   paths={[
     'common/storybook-preview-import-global-styles.js.mdx',
@@ -21,25 +43,15 @@ However, these files will not be subject to HMR, so you'll need to restart your
 />
 
 <!-- prettier-ignore-end -->
-### Import bundled CSS
-All Storybooks are pre-configured to recognize imports for CSS files. To add global CSS for all your stories, import it in [`.storybook/preview.ts`](./overview.md#configure-story-rendering). These files will be subject to HMR, so you can see your changes without restarting your Storybook server.
-<!-- prettier-ignore-start -->
-<CodeSnippets
-  paths={[
-    'common/storybook-preview-import-global-styles.js.mdx',
-    'common/storybook-preview-import-global-styles.ts.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-If your component files import their CSS files, this will work too. However, if you're using CSS processor tools like Sass or Postcss, you may need some more configuration.
 
 ## CSS modules
 
 ### Vite
+
 Vite comes with CSS modules support out-of-the-box. If you have customized the CSS modules configuration in your `vite.config.js` this will automatically be applied to your Storybook as well. Read more about [Vite's CSS modules support](https://vitejs.dev/guide/features.html#css-modules).
 
 ### Webpack
+
 <IfRenderer renderer='react'>
 <Callout
   variant="info"
@@ -52,12 +64,16 @@ Storybook recreates your Next.js configuration, so you can use CSS modules in yo
 </Callout>
 </IfRenderer>
 
+If you're using Webpack and want to use CSS modules, you'll need some extra configuration. We recommend installing [`@storybook/addon-styling-webpack`](https://storybook.js.org/addons/@storybook/addon-styling-webpack/) to help you configure these tools.
+
 ## PostCSS
 
 ### Vite
+
 Vite comes with PostCSS support out-of-the-box. If you have customized the PostCSS configuration in your `vite.config.js` this will automatically be applied to your Storybook as well. Read more about [Vite's PostCSS support](https://vitejs.dev/guide/features.html#postcss).
 
 ### Webpack
+
 <IfRenderer renderer='react'>
 <Callout
   variant="info"
@@ -66,15 +82,20 @@ Vite comes with PostCSS support out-of-the-box. If you have customized the PostC
 >
 
 Storybook recreates your Next.js configuration, so you can use PostCSS in your stories without any extra configuration.
+
 </Callout>
 </IfRenderer>
 
+If you're using Webpack and want to use PostCSS, you'll need some extra configuration. We recommend installing [`@storybook/addon-styling-webpack`](https://storybook.js.org/addons/@storybook/addon-styling-webpack/) to help you configure these tools.
+
 ## CSS pre-processors
 
 ### Vite
+
 Vite comes with Sass, Less, and Stylus support out-of-the-box. Read more about [Vite's CSS Pre-processor support](https://vitejs.dev/guide/features.html#css-pre-processors).
 
 ### Webpack
+
 <IfRenderer renderer='react'>
 <Callout
   variant="info"
@@ -87,32 +108,36 @@ Storybook recreates your Next.js configuration, so you can use Sass in your stor
 </Callout>
 </IfRenderer>
 
-However, if you're using Webpack and want to use Sass or less, you'll need some extra configuration. We recommend installing [`@storybook/addon-styling-webpack`](https://storybook.js.org/addons/@storybook/addon-styling-webpack/) to help you configure these tools. Or if you'd prefer, you can customize [Storybook's webpack configuration yourself](../builders/webpack.md#override-the-default-configuration) to include the appropriate loader(s).
+If you're using Webpack and want to use Sass or less, you'll need some extra configuration. We recommend installing [`@storybook/addon-styling-webpack`](https://storybook.js.org/addons/@storybook/addon-styling-webpack/) to help you configure these tools. Or if you'd prefer, you can customize [Storybook's webpack configuration yourself](../builders/webpack.md#override-the-default-configuration) to include the appropriate loader(s).
 
 ## CSS-in-JS
+
 CSS-in-JS libraries are designed to use basic JavaScript, and they often work in Storybook without any extra configuration. Some libraries expect components to render in a specific rendering “context” (for example, to provide themes), which can be accomplished with `@storybook/addon-themes`'s [`withThemeFromJSXProvider` decorator](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#withthemefromjsxprovider).
 
 ## Adding webfonts
 
 ### `.storybook/preview-head.html`
+
 If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets.md#serving-static-files-via-storybook-configuration).
 
 ### `.storybook/preview.ts`
+
 If you're using something like [`fontsource`](https://fontsource.org/) for your fonts, you can import the needed css files in your [`.storybook/preview.ts`](./overview.md#configure-story-rendering) file.
 
-</IfRenderer>
+</If>
 
 <!-- Angular only -->
 <IfRenderer renderer="angular">
 
-  Storybook for Angular relies on the Angular CLI to build your stories. This means that you can use any CSS preprocessor that the Angular CLI supports. You can read more about this in the [Angular CLI documentation](https://angular.io/guide/workspace-config#style-script-config).
+Storybook for Angular relies on the Angular CLI to build your stories. This means that you can use any CSS preprocessor that the Angular CLI supports. You can read more about this in the [Angular CLI documentation](https://angular.io/guide/workspace-config#style-script-config).
 
-  ## Global styles
-  To add global styles to your Storybook, you can add them to the `styles` array in your `angular.json` file. This will add the styles to the preview iframe where your components render, not the Storybook Manager UI.
+## Global styles
 
-  Don't forget to also add your global styles to your `build-storybook` target in your `angular.json` file. This will ensure that your global styles are included in the static build of your Storybook as well.
+To add global styles to your Storybook, you can add them to the `styles` array in your `angular.json` file. This will add the styles to the preview iframe where your components render, not the Storybook Manager UI.
 
-  ```json
+Don't forget to also add your global styles to your `build-storybook` target in your `angular.json` file. This will ensure that your global styles are included in the static build of your Storybook as well.
+
+```json
   {
   "storybook": {
     "builder": "@storybook/angular:start-storybook",

From 95231f0e3400aef581cfc2af9829439000a9bf42 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 4 Jan 2024 17:05:44 -0300
Subject: [PATCH 12/20] Manager API: Remove deprecated navigateToSettingsPage
 method

---
 MIGRATION.md                                 | 18 ++++++++++++++++++
 code/lib/manager-api/src/modules/settings.ts | 18 ------------------
 code/ui/manager/src/container/Menu.tsx       |  6 +++---
 3 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index a965c419e59..29f19e2b056 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -35,6 +35,7 @@
     - [LinkTo direct import from addon-links](#linkto-direct-import-from-addon-links)
     - [DecoratorFn, Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types](#decoratorfn-story-componentstory-componentstoryobj-componentstoryfn-and-componentmeta-typescript-types)
     - ["Framework" TypeScript types](#framework-typescript-types)
+    - [`navigateToSettingsPage` method from Storybook's manager-api](#navigatetosettingspage-method-from-storybooks-manager-api)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
     - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
     - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
@@ -633,6 +634,23 @@ For React, the `ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `Co
 
 The Framework types such as `ReactFramework` are now removed in favor of Renderer types such as `ReactRenderer`. This affects all frameworks. [More info](#renamed-xframework-to-xrenderer).
 
+#### `navigateToSettingsPage` method from Storybook's manager-api
+
+The `navigateToSettingsPage` method from manager-api is now removed in favor of `changeSettingsTab`.
+
+```ts
+export const Component = () => {
+  const api = useStorybookApi();
+
+  const someHandler = () => {
+    // Old method: api.navigateToSettingsPage('/settings/about');
+    api.changeSettingsTab('about'); // the /settings path is not necessary anymore
+  };
+
+  // ...
+}
+```
+
 ## From version 7.5.0 to 7.6.0
 
 #### CommonJS with Vite is deprecated
diff --git a/code/lib/manager-api/src/modules/settings.ts b/code/lib/manager-api/src/modules/settings.ts
index aa4924474cd..34a06c6c6dc 100644
--- a/code/lib/manager-api/src/modules/settings.ts
+++ b/code/lib/manager-api/src/modules/settings.ts
@@ -19,13 +19,6 @@ export interface SubAPI {
    * @returns A boolean indicating whether the settings screen is active.
    */
   isSettingsScreenActive: () => boolean;
-  /**
-   * Navigates to the specified settings page.
-   * @param path - The path of the settings page to navigate to. The path should include the `/settings` prefix.
-   * @example  navigateToSettingsPage(`/settings/about`).
-   * @deprecated Use `changeSettingsTab` instead.
-   */
-  navigateToSettingsPage: (path: string) => Promise<void>;
 }
 
 export interface SubState {
@@ -53,17 +46,6 @@ export const init: ModuleFn<SubAPI, SubState> = ({ store, navigate, fullAPI }):
       navigate(`/settings/${path}`);
     },
     isSettingsScreenActive,
-    navigateToSettingsPage: async (path) => {
-      if (!isSettingsScreenActive()) {
-        const { settings, storyId } = store.getState();
-
-        await store.setState({
-          settings: { ...settings, lastTrackedStoryId: storyId },
-        });
-      }
-
-      navigate(path);
-    },
     retrieveSelection() {
       const { settings } = store.getState();
 
diff --git a/code/ui/manager/src/container/Menu.tsx b/code/ui/manager/src/container/Menu.tsx
index 9646acf2cdd..2c8fb64c01a 100644
--- a/code/ui/manager/src/container/Menu.tsx
+++ b/code/ui/manager/src/container/Menu.tsx
@@ -64,7 +64,7 @@ export const useMenu = (
     () => ({
       id: 'about',
       title: 'About your Storybook',
-      onClick: () => api.navigateToSettingsPage('/settings/about'),
+      onClick: () => api.changeSettingsTab('about'),
     }),
     [api]
   );
@@ -76,7 +76,7 @@ export const useMenu = (
     () => ({
       id: 'whats-new',
       title: "What's new?",
-      onClick: () => api.navigateToSettingsPage('/settings/whats-new'),
+      onClick: () => api.changeSettingsTab('whats-new'),
       right: whatsNewNotificationsEnabled && isWhatsNewUnread && (
         <Badge status="positive">Check it out</Badge>
       ),
@@ -88,7 +88,7 @@ export const useMenu = (
     () => ({
       id: 'shortcuts',
       title: 'Keyboard shortcuts',
-      onClick: () => api.navigateToSettingsPage('/settings/shortcuts'),
+      onClick: () => api.changeSettingsTab('shortcuts'),
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.shortcutsPage} /> : null,
       style: {
         borderBottom: `4px solid ${theme.appBorderColor}`,

From b50aea9b04344e51c1268f6417a8c5d37488d378 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 4 Jan 2024 17:30:43 -0300
Subject: [PATCH 13/20] Core: Remove storyIndexers in favor of
 experimental_indexers

---
 MIGRATION.md                                  |  5 ++
 code/lib/core-server/src/build-static.ts      | 19 ++--
 .../src/utils/StoryIndexGenerator.test.ts     |  1 -
 .../src/utils/StoryIndexGenerator.ts          | 86 +------------------
 .../utils/__tests__/index-extraction.test.ts  |  1 -
 .../src/utils/getStoryIndexGenerator.ts       |  2 -
 .../src/utils/stories-json.test.ts            |  1 -
 code/lib/types/src/modules/core-common.ts     | 10 +--
 code/lib/types/src/modules/indexer.ts         | 14 ---
 9 files changed, 16 insertions(+), 123 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 29f19e2b056..6d6dd3e9802 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -36,6 +36,7 @@
     - [DecoratorFn, Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types](#decoratorfn-story-componentstory-componentstoryobj-componentstoryfn-and-componentmeta-typescript-types)
     - ["Framework" TypeScript types](#framework-typescript-types)
     - [`navigateToSettingsPage` method from Storybook's manager-api](#navigatetosettingspage-method-from-storybooks-manager-api)
+    - [storyIndexers](#storyindexers)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
     - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
     - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
@@ -651,6 +652,10 @@ export const Component = () => {
 }
 ```
 
+#### storyIndexers
+
+The Storybook's main.js configuration property `storyIndexers` is now removed in favor of `experimental_indexers`. [More info](#storyindexers-is-replaced-with-experimental_indexers).
+
 ## From version 7.5.0 to 7.6.0
 
 #### CommonJS with Vite is deprecated
diff --git a/code/lib/core-server/src/build-static.ts b/code/lib/core-server/src/build-static.ts
index 683da79eb0f..2ae75f747e5 100644
--- a/code/lib/core-server/src/build-static.ts
+++ b/code/lib/core-server/src/build-static.ts
@@ -94,16 +94,14 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption
     build,
   });
 
-  const [features, core, staticDirs, indexers, deprecatedStoryIndexers, stories, docsOptions] =
-    await Promise.all([
-      presets.apply('features'),
-      presets.apply('core'),
-      presets.apply('staticDirs'),
-      presets.apply('experimental_indexers', []),
-      presets.apply('storyIndexers', []),
-      presets.apply('stories'),
-      presets.apply('docs', {}),
-    ]);
+  const [features, core, staticDirs, indexers, stories, docsOptions] = await Promise.all([
+    presets.apply('features'),
+    presets.apply('core'),
+    presets.apply('staticDirs'),
+    presets.apply('experimental_indexers', []),
+    presets.apply('stories'),
+    presets.apply('docs', {}),
+  ]);
 
   if (features?.storyStoreV7 === false) {
     deprecate(
@@ -150,7 +148,6 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption
     const normalizedStories = normalizeStories(stories, directories);
     const generator = new StoryIndexGenerator(normalizedStories, {
       ...directories,
-      storyIndexers: deprecatedStoryIndexers,
       indexers,
       docs: docsOptions,
       storyStoreV7: !!features?.storyStoreV7,
diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts
index 1fa90d63d8b..bc161fff6ff 100644
--- a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts
+++ b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts
@@ -42,7 +42,6 @@ const getStorySortParameterMock = vi.mocked(getStorySortParameter);
 const options: StoryIndexGeneratorOptions = {
   configDir: path.join(__dirname, '__mockdata__'),
   workingDir: path.join(__dirname, '__mockdata__'),
-  storyIndexers: [],
   indexers: [csfIndexer],
   storyStoreV7: true,
   docs: { defaultName: 'docs', autodocs: false },
diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
index d8f4e8ba95e..96e72091073 100644
--- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts
+++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
@@ -11,20 +11,17 @@ import type {
   DocsIndexEntry,
   ComponentTitle,
   NormalizedStoriesSpecifier,
-  StoryIndexer,
   DocsOptions,
   Path,
   Tag,
   StoryIndex,
   StoryName,
   Indexer,
-  IndexerOptions,
-  DeprecatedIndexer,
   StorybookConfigRaw,
 } from '@storybook/types';
 import { userOrAutoTitleFromSpecifier, sortStoriesV7 } from '@storybook/preview-api';
 import { commonGlobOptions, normalizeStoryPath } from '@storybook/core-common';
-import { deprecate, logger, once } from '@storybook/node-logger';
+import { logger, once } from '@storybook/node-logger';
 import { getStorySortParameter } from '@storybook/csf-tools';
 import { storyNameFromExport, toId } from '@storybook/csf';
 import { analyze } from '@storybook/docs-mdx';
@@ -53,7 +50,6 @@ export type StoryIndexGeneratorOptions = {
   workingDir: Path;
   configDir: Path;
   storyStoreV7: boolean;
-  storyIndexers: StoryIndexer[];
   indexers: Indexer[];
   docs: DocsOptions;
   build?: StorybookConfigRaw['build'];
@@ -284,25 +280,10 @@ export class StoryIndexGenerator {
       return title;
     };
 
-    const indexer = (this.options.indexers as StoryIndexer[])
-      .concat(this.options.storyIndexers)
-      .find((ind) => ind.test.exec(absolutePath));
+    const indexer = this.options.indexers.find((ind) => ind.test.exec(absolutePath));
 
     invariant(indexer, `No matching indexer found for ${absolutePath}`);
 
-    if (indexer.indexer) {
-      deprecate(
-        dedent`'storyIndexers' is deprecated, please use 'experimental_indexers' instead. Found a deprecated indexer with matcher: ${indexer.test}
-          - Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storyindexers-is-replaced-with-experimental_indexers`
-      );
-      return this.extractStoriesFromDeprecatedIndexer({
-        indexer: indexer.indexer,
-        indexerOptions: { makeTitle: defaultMakeTitle },
-        absolutePath,
-        importPath,
-      });
-    }
-
     const indexInputs = await indexer.createIndex(absolutePath, { makeTitle: defaultMakeTitle });
 
     const entries: ((StoryIndexEntryWithMetaId | DocsCacheEntry) & { tags: Tag[] })[] =
@@ -362,69 +343,6 @@ export class StoryIndexGenerator {
     };
   }
 
-  async extractStoriesFromDeprecatedIndexer({
-    indexer,
-    indexerOptions,
-    absolutePath,
-    importPath,
-  }: {
-    indexer: DeprecatedIndexer['indexer'];
-    indexerOptions: IndexerOptions;
-    absolutePath: Path;
-    importPath: Path;
-  }) {
-    const csf = await indexer(absolutePath, indexerOptions);
-
-    const entries = [];
-
-    const componentTags = csf.meta.tags || [];
-    csf.stories.forEach(({ id, name, tags: storyTags, parameters }) => {
-      if (!parameters?.docsOnly) {
-        const tags = (csf.meta.tags ?? []).concat(storyTags ?? [], 'story');
-        invariant(csf.meta.title);
-        entries.push({
-          id,
-          title: csf.meta.title,
-          name,
-          importPath,
-          tags,
-          type: 'story',
-          // We need to keep track of the csf meta id so we know the component id when referencing docs below in `extractDocs`
-          metaId: csf.meta.id,
-        });
-      }
-    });
-
-    if (csf.stories.length) {
-      const { autodocs } = this.options.docs;
-      const componentAutodocs = componentTags.includes(AUTODOCS_TAG);
-      const autodocsOptedIn = autodocs === true || (autodocs === 'tag' && componentAutodocs);
-      // We need a docs entry attached to the CSF file if either:
-      //  a) it is a stories.mdx transpiled to CSF, OR
-      //  b) we have docs page enabled for this file
-      if (componentTags.includes(STORIES_MDX_TAG) || autodocsOptedIn) {
-        const name = this.options.docs.defaultName ?? 'Docs';
-        invariant(csf.meta.title, 'expected a title property in csf.meta');
-        const id = toId(csf.meta.id || csf.meta.title, name);
-        entries.unshift({
-          id,
-          title: csf.meta.title,
-          name,
-          importPath,
-          type: 'docs',
-          tags: [
-            ...componentTags,
-            'docs',
-            ...(autodocsOptedIn && !componentAutodocs ? [AUTODOCS_TAG] : []),
-          ],
-          storiesImports: [],
-        });
-      }
-    }
-
-    return { entries, type: 'stories', dependents: [] } as StoriesCacheEntry;
-  }
-
   async extractDocs(specifier: NormalizedStoriesSpecifier, absolutePath: Path) {
     const relativePath = path.relative(this.options.workingDir, absolutePath);
     try {
diff --git a/code/lib/core-server/src/utils/__tests__/index-extraction.test.ts b/code/lib/core-server/src/utils/__tests__/index-extraction.test.ts
index e76fd6b277b..451a350755b 100644
--- a/code/lib/core-server/src/utils/__tests__/index-extraction.test.ts
+++ b/code/lib/core-server/src/utils/__tests__/index-extraction.test.ts
@@ -15,7 +15,6 @@ vi.mock('@storybook/node-logger');
 const options: StoryIndexGeneratorOptions = {
   configDir: path.join(__dirname, '..', '__mockdata__'),
   workingDir: path.join(__dirname, '..', '__mockdata__'),
-  storyIndexers: [],
   indexers: [],
   storyStoreV7: true,
   docs: { defaultName: 'docs', autodocs: false },
diff --git a/code/lib/core-server/src/utils/getStoryIndexGenerator.ts b/code/lib/core-server/src/utils/getStoryIndexGenerator.ts
index 810b95244c7..078ddcb012d 100644
--- a/code/lib/core-server/src/utils/getStoryIndexGenerator.ts
+++ b/code/lib/core-server/src/utils/getStoryIndexGenerator.ts
@@ -23,14 +23,12 @@ export async function getStoryIndexGenerator(
     workingDir,
   };
   const stories = options.presets.apply('stories');
-  const deprecatedStoryIndexers = options.presets.apply('storyIndexers', []);
   const indexers = options.presets.apply('experimental_indexers', []);
   const docsOptions = options.presets.apply<DocsOptions>('docs', {});
   const normalizedStories = normalizeStories(await stories, directories);
 
   const generator = new StoryIndexGenerator(normalizedStories, {
     ...directories,
-    storyIndexers: await deprecatedStoryIndexers,
     indexers: await indexers,
     docs: await docsOptions,
     workingDir,
diff --git a/code/lib/core-server/src/utils/stories-json.test.ts b/code/lib/core-server/src/utils/stories-json.test.ts
index 61fb64b7164..8d1849e4038 100644
--- a/code/lib/core-server/src/utils/stories-json.test.ts
+++ b/code/lib/core-server/src/utils/stories-json.test.ts
@@ -42,7 +42,6 @@ const getInitializedStoryIndexGenerator = async (
   inputNormalizedStories = normalizedStories
 ) => {
   const options: StoryIndexGeneratorOptions = {
-    storyIndexers: [],
     indexers: [csfIndexer],
     configDir: workingDir,
     workingDir,
diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts
index e44758a6679..a189c8fe5f5 100644
--- a/code/lib/types/src/modules/core-common.ts
+++ b/code/lib/types/src/modules/core-common.ts
@@ -7,7 +7,7 @@ import type { Router } from 'express';
 import type { Server } from 'http';
 import type { PackageJson as PackageJsonFromTypeFest } from 'type-fest';
 
-import type { StoriesEntry, Indexer, StoryIndexer } from './indexer';
+import type { StoriesEntry, Indexer } from './indexer';
 
 /**
  * ⚠️ This file contains internal WIP types they MUST NOT be exported outside this package for now!
@@ -416,8 +416,6 @@ export interface StorybookConfigRaw {
 
   previewAnnotations?: Entry[];
 
-  storyIndexers?: StoryIndexer[];
-
   experimental_indexers?: Indexer[];
 
   docs?: DocsOptions;
@@ -509,12 +507,6 @@ export interface StorybookConfig {
    */
   previewAnnotations?: PresetValue<StorybookConfigRaw['previewAnnotations']>;
 
-  /**
-   * Process CSF files for the story index.
-   * @deprecated use {@link experimental_indexers} instead
-   */
-  storyIndexers?: PresetValue<StorybookConfigRaw['storyIndexers']>;
-
   /**
    * Process CSF files for the story index.
    */
diff --git a/code/lib/types/src/modules/indexer.ts b/code/lib/types/src/modules/indexer.ts
index 4f0838bba05..56d435cdb53 100644
--- a/code/lib/types/src/modules/indexer.ts
+++ b/code/lib/types/src/modules/indexer.ts
@@ -67,22 +67,8 @@ export type Indexer = BaseIndexer & {
    * @returns A promise that resolves to an array of {@link IndexInput} objects.
    */
   createIndex: (fileName: string, options: IndexerOptions) => Promise<IndexInput[]>;
-  /**
-   * @deprecated Use {@link index} instead
-   */
-  indexer?: never;
 };
 
-export type DeprecatedIndexer = BaseIndexer & {
-  indexer: (fileName: string, options: IndexerOptions) => Promise<IndexedCSFFile>;
-  createIndex?: never;
-};
-
-/**
- * @deprecated Use {@link Indexer} instead
- */
-export type StoryIndexer = Indexer | DeprecatedIndexer;
-
 export interface BaseIndexEntry {
   id: StoryId;
   name: StoryName;

From b8f8745c73cd614a4e436a96035a09efaa880eb0 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 5 Jan 2024 17:57:38 -0300
Subject: [PATCH 14/20] TypeScript: Remove deprecated addons module types

---
 code/lib/types/src/modules/addons.ts | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/code/lib/types/src/modules/addons.ts b/code/lib/types/src/modules/addons.ts
index 6002d713e52..49d97e4c3a1 100644
--- a/code/lib/types/src/modules/addons.ts
+++ b/code/lib/types/src/modules/addons.ts
@@ -305,11 +305,6 @@ export type BaseStory<TArgs, StoryFnReturnType> =
 
 export interface Addon_RenderOptions {
   active: boolean;
-  /**
-   * @deprecated You should not use key anymore as of Storybook 7.2 this render method is invoked as a React component.
-   * This property will be removed in 8.0.
-   * */
-  key?: unknown;
 }
 
 export type Addon_Type =
@@ -533,9 +528,4 @@ export enum Addon_TypesEnum {
    * @unstable This will get replaced with a new API in 8.0, use at your own risk.
    */
   experimental_SIDEBAR_TOP = 'sidebar-top',
-
-  /**
-   * @deprecated This property does nothing, and will be removed in Storybook 8.0.
-   */
-  NOTES_ELEMENT = 'notes-element',
 }

From 64a870981f3fdd6d07286b33a42b7f3f0751c80c Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 5 Jan 2024 08:02:09 -0300
Subject: [PATCH 15/20] Addon docs: Remove deprecated parameters

---
 MIGRATION.md                                  | 15 ++++++
 code/addons/docs/docs/docspage.md             |  2 +-
 code/lib/csf-tools/src/enrichCsf.test.ts      |  8 +--
 code/ui/blocks/src/blocks/Source.tsx          | 32 +-----------
 code/ui/blocks/src/blocks/Story.tsx           | 29 +----------
 .../internal/InternalSource.stories.tsx       | 19 -------
 .../src/examples/SourceParameters.stories.tsx | 50 -------------------
 7 files changed, 24 insertions(+), 131 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 6d6dd3e9802..259b2e6c89f 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -37,6 +37,7 @@
     - ["Framework" TypeScript types](#framework-typescript-types)
     - [`navigateToSettingsPage` method from Storybook's manager-api](#navigatetosettingspage-method-from-storybooks-manager-api)
     - [storyIndexers](#storyindexers)
+    - [Deprecated docs parameters](#deprecated-docs-parameters)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
     - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
     - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
@@ -656,6 +657,20 @@ export const Component = () => {
 
 The Storybook's main.js configuration property `storyIndexers` is now removed in favor of `experimental_indexers`. [More info](#storyindexers-is-replaced-with-experimental_indexers).
 
+#### Deprecated docs parameters
+
+The following story and meta parameters are now removed:
+
+```ts
+parameters.docs.iframeHeight           // becomes docs.story.iframeHeight
+parameters.docs.inlineStories          // becomes docs.story.inline
+parameters.jsx.transformSource         // becomes parameters.docs.source.transform
+parameters.docs.transformSource        // becomes parameters.docs.source.transform
+parameters.docs.source.transformSource // becomes parameters.docs.source.transform
+```
+
+More info [here](#autodocs-changes) and [here](#source-block).
+
 ## From version 7.5.0 to 7.6.0
 
 #### CommonJS with Vite is deprecated
diff --git a/code/addons/docs/docs/docspage.md b/code/addons/docs/docs/docspage.md
index 8a8da1fc773..3fef9898f95 100644
--- a/code/addons/docs/docs/docspage.md
+++ b/code/addons/docs/docs/docspage.md
@@ -154,7 +154,7 @@ addParameters({
 });
 ```
 
-With that function, anyone using the docs addon for `@storybook/vue` can make their stories render inline, either globally with the `inlineStories` docs parameter, or on a per-story-basis using the `inline` prop on the `<Story>` doc block. If you come up with an elegant and flexible implementation for the `prepareForInline` function for your own framework, let us know! We'd love to make it the default configuration, to make inline stories more accessible for a larger variety of frameworks!
+With that function, anyone using the docs addon for `@storybook/vue` can make their stories render inline, either globally with the `docs.story.inline` parameter, or on a per-story-basis using the `inline` prop on the `<Story>` doc block. If you come up with an elegant and flexible implementation for the `prepareForInline` function for your own framework, let us know! We'd love to make it the default configuration, to make inline stories more accessible for a larger variety of frameworks!
 
 ## Show/Hide code
 
diff --git a/code/lib/csf-tools/src/enrichCsf.test.ts b/code/lib/csf-tools/src/enrichCsf.test.ts
index d9871e93522..562cacd8c04 100644
--- a/code/lib/csf-tools/src/enrichCsf.test.ts
+++ b/code/lib/csf-tools/src/enrichCsf.test.ts
@@ -641,7 +641,7 @@ describe('enrichCsf', () => {
           title: 'Button',
           parameters: {
             foo: 'bar',
-            docs: { inlineStories: true }
+            docs: { story: { inline: true } }
           }
         }
         export const Basic = () => React.createElement(Button);
@@ -652,7 +652,7 @@ describe('enrichCsf', () => {
             title: 'Button',
             parameters: {
               foo: 'bar',
-              docs: { inlineStories: true }
+              docs: { story: { inline: true } }
             }
           }
           export const Basic = () => <Button />
@@ -665,7 +665,9 @@ describe('enrichCsf', () => {
           parameters: {
             foo: 'bar',
             docs: {
-              inlineStories: true,
+              story: {
+                inline: true
+              },
               description: {
                 component: "The most basic button"
               }
diff --git a/code/ui/blocks/src/blocks/Source.tsx b/code/ui/blocks/src/blocks/Source.tsx
index 30b279d1e9a..033dfd71857 100644
--- a/code/ui/blocks/src/blocks/Source.tsx
+++ b/code/ui/blocks/src/blocks/Source.tsx
@@ -31,12 +31,6 @@ type SourceParameters = SourceCodeProps & {
    * Where to read the source code from, see `SourceType`
    */
   type?: SourceType;
-  /**
-   * Transform the detected source for display
-   *
-   * @deprecated use `transform` prop instead
-   */
-  transformSource?: (code: string, storyContext: StoryContextForLoaders) => string;
   /**
    * Transform the detected source for display
    */
@@ -126,31 +120,7 @@ const getSnippet = ({
 
   const code = useSnippet ? snippet : sourceParameters.originalSource || '';
 
-  if (sourceParameters.transformSource) {
-    deprecate(dedent`The \`transformSource\` parameter at \`parameters.docs.source.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead. 
-    
-    Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
-  `);
-  }
-  if (storyContext.parameters.docs?.transformSource) {
-    deprecate(dedent`The \`transformSource\` parameter at \`parameters.docs.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead. 
-    
-    Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
-  `);
-  }
-  if (storyContext.parameters.jsx?.transformSource) {
-    deprecate(dedent`The \`transformSource\` parameter at \`parameters.jsx.transformSource\` is deprecated, please use \`parameters.docs.source.transform\` instead. 
-    
-    Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#source-block
-  `);
-  }
-
-  const transformer =
-    transformFromProps ??
-    sourceParameters.transform ??
-    sourceParameters.transformSource ?? // deprecated
-    storyContext.parameters.docs?.transformSource ?? // deprecated
-    storyContext.parameters.jsx?.transformSource; // deprecated - used to be implemented in the React renderer's jsxDecorator
+  const transformer = transformFromProps ?? sourceParameters.transform;
 
   return transformer?.(code, storyContext) || code;
 };
diff --git a/code/ui/blocks/src/blocks/Story.tsx b/code/ui/blocks/src/blocks/Story.tsx
index 2211bcc54cd..9480d8946eb 100644
--- a/code/ui/blocks/src/blocks/Story.tsx
+++ b/code/ui/blocks/src/blocks/Story.tsx
@@ -8,9 +8,7 @@ import type {
   StoryAnnotations,
   StoryId,
 } from '@storybook/types';
-import { deprecate } from '@storybook/client-logger';
 
-import dedent from 'ts-dedent';
 import { Story as PureStory, StorySkeleton } from '../components';
 import type { DocsContextProps } from './DocsContext';
 import { DocsContext } from './DocsContext';
@@ -114,25 +112,7 @@ export const getStoryProps = <TFramework extends Renderer>(
   // prefer block props, then story parameters defined by the framework-specific settings
   // and optionally overridden by users
 
-  // Deprecated parameters
-  const { inlineStories, iframeHeight } = docs as {
-    inlineStories?: boolean;
-    iframeHeight?: string;
-    autoplay?: boolean;
-  };
-  if (typeof inlineStories !== 'undefined')
-    deprecate(dedent`The \`docs.inlineStories\` parameter is deprecated, use \`docs.story.inline\` instead. 
-    
-      Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes'
-    `);
-  const inline = props.inline ?? storyParameters.inline ?? inlineStories ?? false;
-
-  if (typeof iframeHeight !== 'undefined') {
-    deprecate(dedent`The \`docs.iframeHeight\` parameter is deprecated, use \`docs.story.iframeHeight\` instead. 
-    
-      Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes'
-    `);
-  }
+  const inline = props.inline ?? storyParameters.inline ?? false;
 
   if (inline) {
     const height = props.height ?? storyParameters.height;
@@ -150,12 +130,7 @@ export const getStoryProps = <TFramework extends Renderer>(
     };
   }
 
-  const height =
-    props.height ??
-    storyParameters.height ??
-    storyParameters.iframeHeight ??
-    iframeHeight ??
-    '100px';
+  const height = props.height ?? storyParameters.height ?? storyParameters.iframeHeight ?? '100px';
   return {
     story,
     inline: false,
diff --git a/code/ui/blocks/src/blocks/internal/InternalSource.stories.tsx b/code/ui/blocks/src/blocks/internal/InternalSource.stories.tsx
index 7490f1d7218..035f1c5e108 100644
--- a/code/ui/blocks/src/blocks/internal/InternalSource.stories.tsx
+++ b/code/ui/blocks/src/blocks/internal/InternalSource.stories.tsx
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import * as ParametersStories from '../../examples/SourceParameters.stories';
 
 import { Source } from '../Source';
 
@@ -29,21 +28,3 @@ export const Ids: Story = {
     ],
   },
 };
-
-export const SourceTransformSourceParameter: Story = {
-  args: {
-    of: ParametersStories.SourceTransformSource,
-  },
-};
-
-export const DocsTransformSourceParameter: Story = {
-  args: {
-    of: ParametersStories.DocsTransformSource,
-  },
-};
-
-export const JsxTransformSourceParameter: Story = {
-  args: {
-    of: ParametersStories.JsxTransformSource,
-  },
-};
diff --git a/code/ui/blocks/src/examples/SourceParameters.stories.tsx b/code/ui/blocks/src/examples/SourceParameters.stories.tsx
index 08ebaf5cb46..ec832b109e8 100644
--- a/code/ui/blocks/src/examples/SourceParameters.stories.tsx
+++ b/code/ui/blocks/src/examples/SourceParameters.stories.tsx
@@ -50,56 +50,6 @@ export const Transform = {
   },
 };
 
-// deprecated
-export const SourceTransformSource = {
-  args: { something: 'else' },
-  parameters: {
-    docs: {
-      source: {
-        transformSource: (
-          src: string,
-          storyContext: StoryContext
-        ) => dedent`// this comment has been added via parameters.docs.source.transformSource!
-        // this is the story id: ${storyContext.id}
-        // these are the current args: ${JSON.stringify(storyContext.args)}
-        ${src}`,
-      },
-    },
-  },
-};
-
-// deprecated
-export const DocsTransformSource = {
-  args: { something: 'else' },
-  parameters: {
-    docs: {
-      transformSource: (
-        src: string,
-        storyContext: StoryContext
-      ) => dedent`// this comment has been added via parameters.docs.transformSource!
-      // this is the story id: ${storyContext.id}
-      // these are the current args: ${JSON.stringify(storyContext.args)}
-      ${src}`,
-    },
-  },
-};
-
-// deprecated
-export const JsxTransformSource = {
-  args: { something: 'else' },
-  parameters: {
-    jsx: {
-      transformSource: (
-        src: string,
-        storyContext: StoryContext
-      ) => dedent`// this comment has been added via parameters.jsx.transformSource!
-      // this is the story id: ${storyContext.id}
-      // these are the current args: ${JSON.stringify(storyContext.args)}
-      ${src}`,
-    },
-  },
-};
-
 export const Code = {
   parameters: { docs: { source: { code } } },
 };

From e85825889624f6ca69c4f41241cb841d1b727eea Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 4 Jan 2024 10:48:24 -0300
Subject: [PATCH 16/20] Doc blocks: Remove deprecated props from Description
 block

---
 MIGRATION.md                                  |  6 ++
 code/ui/blocks/src/blocks/Description.tsx     | 97 +------------------
 .../internal/InternalDescription.stories.tsx  | 85 ----------------
 docs/api/doc-block-description.md             | 24 -----
 4 files changed, 10 insertions(+), 202 deletions(-)
 delete mode 100644 code/ui/blocks/src/blocks/internal/InternalDescription.stories.tsx

diff --git a/MIGRATION.md b/MIGRATION.md
index 259b2e6c89f..c7e2dacfb62 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -38,6 +38,7 @@
     - [`navigateToSettingsPage` method from Storybook's manager-api](#navigatetosettingspage-method-from-storybooks-manager-api)
     - [storyIndexers](#storyindexers)
     - [Deprecated docs parameters](#deprecated-docs-parameters)
+    - [Description Doc block properties](#description-doc-block-properties)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
     - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
     - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
@@ -671,6 +672,11 @@ parameters.docs.source.transformSource // becomes parameters.docs.source.transfo
 
 More info [here](#autodocs-changes) and [here](#source-block).
 
+#### Description Doc block properties
+
+`children`, `markdown` and `type` are now removed in favor of the `of` property. [More info](#doc-blocks).
+
+
 ## From version 7.5.0 to 7.6.0
 
 #### CommonJS with Vite is deprecated
diff --git a/code/ui/blocks/src/blocks/Description.tsx b/code/ui/blocks/src/blocks/Description.tsx
index a6cda58ca93..99b9cf7ce75 100644
--- a/code/ui/blocks/src/blocks/Description.tsx
+++ b/code/ui/blocks/src/blocks/Description.tsx
@@ -1,11 +1,5 @@
 import type { FC } from 'react';
-import React, { useContext } from 'react';
-import { str } from '@storybook/docs-tools';
-import { deprecate } from '@storybook/client-logger';
-
-import type { DocsContextProps } from './DocsContext';
-import { DocsContext } from './DocsContext';
-import type { Component } from './types';
+import React from 'react';
 import type { Of } from './useOf';
 import { useOf } from './useOf';
 import { Markdown } from './Markdown';
@@ -17,39 +11,14 @@ export enum DescriptionType {
   AUTO = 'auto',
 }
 
-type Notes = string | any;
-type Info = string | any;
-
-const DEPRECATION_MIGRATION_LINK =
-  'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo';
-
 interface DescriptionProps {
   /**
    * Specify where to get the description from. Can be a component, a CSF file or a story.
    * If not specified, the description will be extracted from the meta of the attached CSF file.
    */
   of?: Of;
-  /**
-   * @deprecated Manually specifying description type is deprecated. See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo
-   */
-  type?: DescriptionType;
-  /**
-   * @deprecated The 'markdown' prop on the Description block is deprecated. See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo
-   */
-  markdown?: string;
-  /**
-   * @deprecated The 'children' prop on the Description block is deprecated. See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo
-   */
-  children?: string;
 }
 
-const getNotes = (notes?: Notes) =>
-  notes && (typeof notes === 'string' ? notes : str(notes.markdown) || str(notes.text));
-
-const getInfo = (info?: Info) => info && (typeof info === 'string' ? info : str(info.text));
-
-const noDescription = (component?: Component): string | null => null;
-
 const getDescriptionFromResolvedOf = (resolvedOf: ReturnType<typeof useOf>): string | null => {
   switch (resolvedOf.type) {
     case 'story': {
@@ -88,73 +57,15 @@ const getDescriptionFromResolvedOf = (resolvedOf: ReturnType<typeof useOf>): str
   }
 };
 
-const getDescriptionFromDeprecatedProps = (
-  { type, markdown, children }: DescriptionProps,
-  { storyById }: DocsContextProps<any>
-): string => {
-  const { component, parameters } = storyById();
-  if (children || markdown) {
-    return children || markdown;
-  }
-  const { notes, info, docs } = parameters;
-  if (Boolean(notes) || Boolean(info)) {
-    deprecate(
-      `Using 'parameters.notes' or 'parameters.info' properties to describe stories is deprecated. See ${DEPRECATION_MIGRATION_LINK}`
-    );
-  }
-
-  const { extractComponentDescription = noDescription, description } = docs || {};
-
-  // override component description
-  const componentDescriptionParameter = description?.component;
-  if (componentDescriptionParameter) {
-    return componentDescriptionParameter;
-  }
-
-  switch (type) {
-    case DescriptionType.INFO:
-      return getInfo(info);
-    case DescriptionType.NOTES:
-      return getNotes(notes);
-    case DescriptionType.DOCGEN:
-    case DescriptionType.AUTO:
-    default:
-      return extractComponentDescription(component, { component, ...parameters });
-  }
-};
-
 const DescriptionContainer: FC<DescriptionProps> = (props) => {
-  const { of, type, markdown: markdownProp, children } = props;
+  const { of } = props;
 
   if ('of' in props && of === undefined) {
     throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?');
   }
-  const context = useContext(DocsContext);
   const resolvedOf = useOf(of || 'meta');
-  let markdown;
-  if (type || markdownProp || children) {
-    // pre 7.0 mode with deprecated props
-    markdown = getDescriptionFromDeprecatedProps(props, context);
-  } else {
-    // 7.0 mode with new 'of' prop
-    // pre 7.0 with only 'of' prop only supported referencing a component, which 7.0 supports as well here
-    markdown = getDescriptionFromResolvedOf(resolvedOf);
-  }
-  if (type) {
-    deprecate(
-      `Manually specifying description type is deprecated. See ${DEPRECATION_MIGRATION_LINK}`
-    );
-  }
-  if (markdownProp) {
-    deprecate(
-      `The 'markdown' prop on the Description block is deprecated. See ${DEPRECATION_MIGRATION_LINK}`
-    );
-  }
-  if (children) {
-    deprecate(
-      `The 'children' prop on the Description block is deprecated. See ${DEPRECATION_MIGRATION_LINK}`
-    );
-  }
+  const markdown = getDescriptionFromResolvedOf(resolvedOf);
+
   return markdown ? <Markdown>{markdown}</Markdown> : null;
 };
 
diff --git a/code/ui/blocks/src/blocks/internal/InternalDescription.stories.tsx b/code/ui/blocks/src/blocks/internal/InternalDescription.stories.tsx
deleted file mode 100644
index da4c8772894..00000000000
--- a/code/ui/blocks/src/blocks/internal/InternalDescription.stories.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Description, DescriptionType } from '../Description';
-import { Button } from '../../examples/Button';
-
-const meta: Meta<typeof Description> = {
-  component: Description,
-  parameters: {
-    relativeCsfPaths: ['../examples/Button.stories'],
-    docsStyles: true,
-  },
-  args: {
-    of: Button,
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const InfoType: Story = {
-  args: {
-    type: DescriptionType.INFO,
-  },
-};
-export const NotesType: Story = {
-  args: {
-    type: DescriptionType.NOTES,
-  },
-};
-export const DocgenType: Story = {
-  args: {
-    type: DescriptionType.DOCGEN,
-  },
-};
-export const AutoType: Story = {
-  args: {
-    type: DescriptionType.AUTO,
-  },
-};
-export const Markdown: Story = {
-  args: {
-    markdown: `# My Example Markdown
-
-An \`inline\` codeblock
-
-\`\`\`tsx
-// TypeScript React code block
-export const MyStory = () => {
-return <Button>Click me</Button>;
-};
-\`\`\`
-
-\`\`\`
-code block with with no language
-const a = fn({
-b: 2,
-});
-\`\`\`
-`,
-  },
-};
-export const Children: Story = {
-  render: (args) => (
-    <Description {...args}>
-      {`# My Example Markdown
-
-An \`inline\` codeblock
-
-\`\`\`tsx
-// TypeScript React code block
-export const MyStory = () => {
-return <Button>Click me</Button>;
-};
-\`\`\`
-
-\`\`\`
-code block with with no language
-const a = fn({
-b: 2,
-});
-\`\`\`
-`}
-    </Description>
-  ),
-};
diff --git a/docs/api/doc-block-description.md b/docs/api/doc-block-description.md
index 1c188a23934..ce8254d7f57 100644
--- a/docs/api/doc-block-description.md
+++ b/docs/api/doc-block-description.md
@@ -37,30 +37,6 @@ Specifies where to pull the description from. It can either point to a story or
 
 Descriptions are pulled from the JSDoc comments or parameters, and they are rendered as markdown. See [Writing descriptions](#writing-descriptions) for more details.
 
-### `children`
-
-(⛔️ **Deprecated**)
-
-Type: `string`
-
-See [Migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo).
-
-### `markdown`
-
-(⛔️ **Deprecated**)
-
-Type: `string`
-
-See [Migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo).
-
-### `type`
-
-(⛔️ **Deprecated**)
-
-Type: `'info' | 'notes' | 'docgen' | 'auto'`
-
-See [Migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo).
-
 ## Writing descriptions
 
 There are multiple places to write the description of a component/story, depending on what you want to achieve. Descriptions can be written at the story level to describe each story of a component, or they can be written at the meta or component level to describe the component in general.

From e82fe806a63c1997f70dcddcc795b5d8c5974f26 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 5 Jan 2024 18:26:58 -0300
Subject: [PATCH 17/20] Core: Remove collapseAll and expandAll methods

---
 MIGRATION.md                                | 13 +++++++++++++
 code/lib/manager-api/src/modules/channel.ts | 17 -----------------
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index c7e2dacfb62..9d894c1b89c 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -39,6 +39,7 @@
     - [storyIndexers](#storyindexers)
     - [Deprecated docs parameters](#deprecated-docs-parameters)
     - [Description Doc block properties](#description-doc-block-properties)
+    - [Manager API expandAll and collapseAll methods](#manager-api-expandall-and-collapseall-methods)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
     - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
     - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
@@ -676,6 +677,18 @@ More info [here](#autodocs-changes) and [here](#source-block).
 
 `children`, `markdown` and `type` are now removed in favor of the `of` property. [More info](#doc-blocks).
 
+#### Manager API expandAll and collapseAll methods
+
+The `collapseAll` and `expandAll` APIs (possibly used by addons) are now removed. Please emit events for these actions instead:
+
+```ts
+import { STORIES_COLLAPSE_ALL, STORIES_EXPAND_ALL } from '@storybook/core-events';
+import { useStorybookApi } from '@storybook/manager-api';
+
+const api = useStorybookApi()
+api.collapseAll() // becomes api.emit(STORIES_COLLAPSE_ALL)
+api.expandAll() // becomes api.emit(STORIES_EXPAND_ALL)
+```
 
 ## From version 7.5.0 to 7.6.0
 
diff --git a/code/lib/manager-api/src/modules/channel.ts b/code/lib/manager-api/src/modules/channel.ts
index 0ab1dc91008..64df9b32a4c 100644
--- a/code/lib/manager-api/src/modules/channel.ts
+++ b/code/lib/manager-api/src/modules/channel.ts
@@ -1,5 +1,4 @@
 /* eslint-disable no-param-reassign */
-import { STORIES_COLLAPSE_ALL, STORIES_EXPAND_ALL } from '@storybook/core-events';
 import type { Listener } from '@storybook/channels';
 
 import type { API_Provider } from '@storybook/types';
@@ -38,16 +37,6 @@ export interface SubAPI {
    * @param handler - The callback function to be called when the event is emitted.
    */
   once: (type: string, handler: Listener) => void;
-  /**
-   * Emits an event to collapse all stories in the UI.
-   * @deprecated Use `emit(STORIES_COLLAPSE_ALL)` instead. This API will be removed in Storybook 8.0.
-   */
-  collapseAll: () => void;
-  /**
-   * Emits an event to expand all stories in the UI.
-   * @deprecated Use `emit(STORIES_EXPAND_ALL)` instead. This API will be removed in Storybook 8.0.
-   */
-  expandAll: () => void;
 }
 
 export type SubState = Record<string, never>;
@@ -75,12 +64,6 @@ export const init: ModuleFn<SubAPI, SubState> = ({ provider }) => {
       }
       provider.channel?.emit(type, data, ...args);
     },
-    collapseAll: () => {
-      api.emit(STORIES_COLLAPSE_ALL, {});
-    },
-    expandAll: () => {
-      api.emit(STORIES_EXPAND_ALL);
-    },
   };
   return { api, state: {} };
 };

From 548a5ba474ac77ea7e8b166c0dd580d195ac17ce Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 5 Jan 2024 19:03:32 -0300
Subject: [PATCH 18/20] Documentation: Add note about Yarn 1 dropped support

---
 MIGRATION.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/MIGRATION.md b/MIGRATION.md
index c7e2dacfb62..38970bcfd1b 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -9,6 +9,7 @@
     - [Dropping support for \*.stories.mdx (CSF in MDX) format and MDX1 support](#dropping-support-for-storiesmdx-csf-in-mdx-format-and-mdx1-support)
     - [Dropping support for id, name and story in Story block](#dropping-support-for-id-name-and-story-in-story-block)
   - [Core changes](#core-changes)
+    - [Dropping support for Yarn 1](#dropping-support-for-yarn-1)
     - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16)
     - [Autotitle breaking fixes](#autotitle-breaking-fixes)
     - [React v18 in the manager UI (including addons)](#react-v18-in-the-manager-ui-including-addons)
@@ -455,6 +456,10 @@ Referencing stories by `id`, `name` or `story` in the Story block is not possibl
 
 ### Core changes
 
+#### Dropping support for Yarn 1
+
+Storybook will stop providing fixes aimed at Yarn 1 projects. This does not necessarily mean that Storybook will stop working for Yarn 1 projects, just that the team won't provide more fixes aimed at it. For context, it's been 6 years since the release of Yarn 1, and Yarn is currently in version 4, which was [released in October 2023](https://yarnpkg.com/blog/release/4.0).
+
 #### Dropping support for Node.js 16
 
 In Storybook 8, we have dropped Node.js 16 support since it reached end-of-life on 2023-09-11. Storybook 8 supports Node.js 18 and above.

From d70a3bfb75157bcdd284a36ae86235be26400ec0 Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Fri, 5 Jan 2024 22:35:21 +0000
Subject: [PATCH 19/20] Write changelog for 8.0.0-alpha.8 [skip ci]

---
 CHANGELOG.prerelease.md | 17 +++++++++++++++++
 code/package.json       |  3 ++-
 docs/versions/next.json |  2 +-
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
index 077e7014776..05f683fc465 100644
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@@ -1,3 +1,20 @@
+## 8.0.0-alpha.8
+
+- Addon Links: Remove LinkTo from direct import - [#25418](https://github.com/storybookjs/storybook/pull/25418), thanks [@yannbf](https://github.com/yannbf)!
+- Addon docs: Remove deprecated parameters - [#25469](https://github.com/storybookjs/storybook/pull/25469), thanks [@yannbf](https://github.com/yannbf)!
+- Builder Vite: Remove StorybookViteConfig type in favor of StorybookConfig - [#25441](https://github.com/storybookjs/storybook/pull/25441), thanks [@yannbf](https://github.com/yannbf)!
+- Core: Error on explicit actions while rendering or playing - [#25238](https://github.com/storybookjs/storybook/pull/25238), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- Core: Remove collapseAll and expandAll methods - [#25486](https://github.com/storybookjs/storybook/pull/25486), thanks [@yannbf](https://github.com/yannbf)!
+- Core: Remove storyIndexers in favor of experimental_indexers - [#25468](https://github.com/storybookjs/storybook/pull/25468), thanks [@yannbf](https://github.com/yannbf)!
+- Core: Remove unused staticDir type - [#25415](https://github.com/storybookjs/storybook/pull/25415), thanks [@yannbf](https://github.com/yannbf)!
+- Doc blocks: Remove deprecated props from Description block - [#25457](https://github.com/storybookjs/storybook/pull/25457), thanks [@yannbf](https://github.com/yannbf)!
+- Manager API: Remove deprecated navigateToSettingsPage method - [#25467](https://github.com/storybookjs/storybook/pull/25467), thanks [@yannbf](https://github.com/yannbf)!
+- React: Remove deprecated setGlobalConfig portable stories api - [#25442](https://github.com/storybookjs/storybook/pull/25442), thanks [@yannbf](https://github.com/yannbf)!
+- TypeScript: Remove deprecated addons module types - [#25485](https://github.com/storybookjs/storybook/pull/25485), thanks [@yannbf](https://github.com/yannbf)!
+- Types: Remove DecoratorFn, Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta types - [#25477](https://github.com/storybookjs/storybook/pull/25477), thanks [@yannbf](https://github.com/yannbf)!
+- Types: Remove Framework in favor of Renderer types - [#25476](https://github.com/storybookjs/storybook/pull/25476), thanks [@yannbf](https://github.com/yannbf)!
+- UI: Remove deprecated WithTooltip props - [#25440](https://github.com/storybookjs/storybook/pull/25440), thanks [@yannbf](https://github.com/yannbf)!
+
 ## 8.0.0-alpha.7
 
 - Addon-Docs: Upgrade to MDX3 - [#25303](https://github.com/storybookjs/storybook/pull/25303), thanks [@yannbf](https://github.com/yannbf)!
diff --git a/code/package.json b/code/package.json
index cbf48360276..d9c52efe757 100644
--- a/code/package.json
+++ b/code/package.json
@@ -309,5 +309,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.0.0-alpha.8"
 }
diff --git a/docs/versions/next.json b/docs/versions/next.json
index fcd9f1cce99..7de16aa408a 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"8.0.0-alpha.7","info":{"plain":"- Addon-Docs: Upgrade to MDX3 - [#25303](https://github.com/storybookjs/storybook/pull/25303), thanks [@yannbf](https://github.com/yannbf)!\n- CLI: Add Storyshots migration notice - [#25327](https://github.com/storybookjs/storybook/pull/25327), thanks [@yannbf](https://github.com/yannbf)!\n- CLI: Fix regex used in upgrade command - [#25284](https://github.com/storybookjs/storybook/pull/25284), thanks [@yannbf](https://github.com/yannbf)!\n- CLI: Remove --use-npm flag - [#25414](https://github.com/storybookjs/storybook/pull/25414), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Remove unused warnOnLegacyHierarchySeparator type - [#25416](https://github.com/storybookjs/storybook/pull/25416), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Remove vite plugins and drop Vite 3 support - [#25427](https://github.com/storybookjs/storybook/pull/25427), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Maintenance: Add comment to deprecation notice in Button component - [#25411](https://github.com/storybookjs/storybook/pull/25411), thanks [@yannbf](https://github.com/yannbf)!\n- UI: Fix about page layout - [#25396](https://github.com/storybookjs/storybook/pull/25396), thanks [@cdedreuille](https://github.com/cdedreuille)!\n- Viewport: Store viewport, rotation in globals - [#25423](https://github.com/storybookjs/storybook/pull/25423), thanks [@shilman](https://github.com/shilman)!\n- Vite: Fix Vite 5 CJS warnings - [#25005](https://github.com/storybookjs/storybook/pull/25005), thanks [@JReinhold](https://github.com/JReinhold)!"}}
+{"version":"8.0.0-alpha.8","info":{"plain":"- Addon Links: Remove LinkTo from direct import - [#25418](https://github.com/storybookjs/storybook/pull/25418), thanks [@yannbf](https://github.com/yannbf)!\n- Addon docs: Remove deprecated parameters - [#25469](https://github.com/storybookjs/storybook/pull/25469), thanks [@yannbf](https://github.com/yannbf)!\n- Builder Vite: Remove StorybookViteConfig type in favor of StorybookConfig - [#25441](https://github.com/storybookjs/storybook/pull/25441), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Error on explicit actions while rendering or playing - [#25238](https://github.com/storybookjs/storybook/pull/25238), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Core: Remove collapseAll and expandAll methods - [#25486](https://github.com/storybookjs/storybook/pull/25486), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Remove storyIndexers in favor of experimental_indexers - [#25468](https://github.com/storybookjs/storybook/pull/25468), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Remove unused staticDir type - [#25415](https://github.com/storybookjs/storybook/pull/25415), thanks [@yannbf](https://github.com/yannbf)!\n- Doc blocks: Remove deprecated props from Description block - [#25457](https://github.com/storybookjs/storybook/pull/25457), thanks [@yannbf](https://github.com/yannbf)!\n- Manager API: Remove deprecated navigateToSettingsPage method - [#25467](https://github.com/storybookjs/storybook/pull/25467), thanks [@yannbf](https://github.com/yannbf)!\n- React: Remove deprecated setGlobalConfig portable stories api - [#25442](https://github.com/storybookjs/storybook/pull/25442), thanks [@yannbf](https://github.com/yannbf)!\n- TypeScript: Remove deprecated addons module types - [#25485](https://github.com/storybookjs/storybook/pull/25485), thanks [@yannbf](https://github.com/yannbf)!\n- Types: Remove DecoratorFn, Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta types - [#25477](https://github.com/storybookjs/storybook/pull/25477), thanks [@yannbf](https://github.com/yannbf)!\n- Types: Remove Framework in favor of Renderer types - [#25476](https://github.com/storybookjs/storybook/pull/25476), thanks [@yannbf](https://github.com/yannbf)!\n- UI: Remove deprecated WithTooltip props - [#25440](https://github.com/storybookjs/storybook/pull/25440), thanks [@yannbf](https://github.com/yannbf)!"}}

From f37059053bff395f9e488c7dcf48efa845292a0b Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Sat, 6 Jan 2024 03:42:24 +0000
Subject: [PATCH 20/20] Bump version from "8.0.0-alpha.7" to "8.0.0-alpha.8"
 [skip ci]

---
 code/addons/a11y/package.json                 |   2 +-
 code/addons/actions/package.json              |   2 +-
 code/addons/backgrounds/package.json          |   2 +-
 code/addons/controls/package.json             |   2 +-
 code/addons/docs/package.json                 |   2 +-
 code/addons/essentials/package.json           |   2 +-
 code/addons/gfm/package.json                  |   2 +-
 code/addons/highlight/package.json            |   2 +-
 code/addons/interactions/package.json         |   2 +-
 code/addons/jest/package.json                 |   2 +-
 code/addons/links/package.json                |   2 +-
 code/addons/measure/package.json              |   2 +-
 code/addons/outline/package.json              |   2 +-
 code/addons/storysource/package.json          |   2 +-
 code/addons/themes/package.json               |   2 +-
 code/addons/toolbars/package.json             |   2 +-
 code/addons/viewport/package.json             |   2 +-
 code/builders/builder-manager/package.json    |   2 +-
 code/builders/builder-vite/package.json       |   2 +-
 code/builders/builder-webpack5/package.json   |   2 +-
 code/frameworks/angular/package.json          |   2 +-
 code/frameworks/ember/package.json            |   2 +-
 code/frameworks/html-vite/package.json        |   2 +-
 code/frameworks/html-webpack5/package.json    |   2 +-
 code/frameworks/nextjs/package.json           |   2 +-
 code/frameworks/preact-vite/package.json      |   2 +-
 code/frameworks/preact-webpack5/package.json  |   2 +-
 code/frameworks/react-vite/package.json       |   2 +-
 code/frameworks/react-webpack5/package.json   |   2 +-
 code/frameworks/server-webpack5/package.json  |   2 +-
 code/frameworks/svelte-vite/package.json      |   2 +-
 code/frameworks/svelte-webpack5/package.json  |   2 +-
 code/frameworks/sveltekit/package.json        |   2 +-
 code/frameworks/vue3-vite/package.json        |   2 +-
 code/frameworks/vue3-webpack5/package.json    |   2 +-
 .../web-components-vite/package.json          |   2 +-
 .../web-components-webpack5/package.json      |   2 +-
 code/lib/channels/package.json                |   2 +-
 code/lib/cli-sb/package.json                  |   2 +-
 code/lib/cli-storybook/package.json           |   2 +-
 code/lib/cli/package.json                     |   2 +-
 code/lib/cli/src/versions.ts                  | 160 +++++++++---------
 code/lib/client-logger/package.json           |   2 +-
 code/lib/codemod/package.json                 |   2 +-
 code/lib/core-common/package.json             |   2 +-
 code/lib/core-events/package.json             |   2 +-
 code/lib/core-server/package.json             |   2 +-
 code/lib/core-webpack/package.json            |   2 +-
 code/lib/csf-plugin/package.json              |   2 +-
 code/lib/csf-tools/package.json               |   2 +-
 code/lib/docs-tools/package.json              |   2 +-
 code/lib/instrumenter/package.json            |   2 +-
 code/lib/manager-api/package.json             |   2 +-
 code/lib/manager-api/src/version.ts           |   2 +-
 code/lib/node-logger/package.json             |   2 +-
 code/lib/preview-api/package.json             |   2 +-
 code/lib/preview/package.json                 |   2 +-
 code/lib/react-dom-shim/package.json          |   2 +-
 code/lib/router/package.json                  |   2 +-
 code/lib/source-loader/package.json           |   2 +-
 code/lib/telemetry/package.json               |   2 +-
 code/lib/test/package.json                    |   2 +-
 code/lib/theming/package.json                 |   2 +-
 code/lib/types/package.json                   |   2 +-
 code/package.json                             |   5 +-
 code/presets/create-react-app/package.json    |   2 +-
 code/presets/html-webpack/package.json        |   2 +-
 code/presets/preact-webpack/package.json      |   2 +-
 code/presets/react-webpack/package.json       |   2 +-
 code/presets/server-webpack/package.json      |   2 +-
 code/presets/svelte-webpack/package.json      |   2 +-
 code/presets/vue3-webpack/package.json        |   2 +-
 .../web-components-webpack/package.json       |   2 +-
 code/renderers/html/package.json              |   2 +-
 code/renderers/preact/package.json            |   2 +-
 code/renderers/react/package.json             |   2 +-
 code/renderers/server/package.json            |   2 +-
 code/renderers/svelte/package.json            |   2 +-
 code/renderers/vue3/package.json              |   2 +-
 code/renderers/web-components/package.json    |   2 +-
 code/ui/blocks/package.json                   |   2 +-
 code/ui/components/package.json               |   2 +-
 code/ui/manager/package.json                  |   2 +-
 83 files changed, 163 insertions(+), 164 deletions(-)

diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
index 0cc3f893fe2..4dafd318f36 100644
--- a/code/addons/a11y/package.json
+++ b/code/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json
index 4fd60be0ab0..436300a6343 100644
--- a/code/addons/actions/package.json
+++ b/code/addons/actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",
diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json
index 57acc688799..53caf8806c8 100644
--- a/code/addons/backgrounds/package.json
+++ b/code/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json
index 642a2da8c85..c8765ea4feb 100644
--- a/code/addons/controls/package.json
+++ b/code/addons/controls/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",
diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
index 6645021a4ed..ae3b1d031d1 100644
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json
index 2f48b5a214d..252e0af86de 100644
--- a/code/addons/essentials/package.json
+++ b/code/addons/essentials/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",
diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json
index ddb374be238..78ebee0bc0c 100644
--- a/code/addons/gfm/package.json
+++ b/code/addons/gfm/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",
diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json
index daec5b70435..438504d733f 100644
--- a/code/addons/highlight/package.json
+++ b/code/addons/highlight/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
index cb50480fb19..dd322662ce3 100644
--- a/code/addons/interactions/package.json
+++ b/code/addons/interactions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
index 0ec3ceacc94..264d5c218b5 100644
--- a/code/addons/jest/package.json
+++ b/code/addons/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",
diff --git a/code/addons/links/package.json b/code/addons/links/package.json
index aaf4354d46d..89d399d22d4 100644
--- a/code/addons/links/package.json
+++ b/code/addons/links/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "addon",
diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json
index c22e7d1de6e..fceabf0e9de 100644
--- a/code/addons/measure/package.json
+++ b/code/addons/measure/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json
index e3d4ff62edc..77f90fabe7a 100644
--- a/code/addons/outline/package.json
+++ b/code/addons/outline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json
index 19e66c086f5..905e79f7962 100644
--- a/code/addons/storysource/package.json
+++ b/code/addons/storysource/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",
diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json
index 520b8817d1a..ba7d6ad06b3 100644
--- a/code/addons/themes/package.json
+++ b/code/addons/themes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",
diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json
index d16d850f086..cdef7ec7a8e 100644
--- a/code/addons/toolbars/package.json
+++ b/code/addons/toolbars/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",
diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json
index 340f9bba270..ec8dfcea2fd 100644
--- a/code/addons/viewport/package.json
+++ b/code/addons/viewport/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",
diff --git a/code/builders/builder-manager/package.json b/code/builders/builder-manager/package.json
index b5d28ac2f81..3dc07399dec 100644
--- a/code/builders/builder-manager/package.json
+++ b/code/builders/builder-manager/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-manager",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook manager builder",
   "keywords": [
     "storybook"
diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json
index a4fb5f8d101..c4b0712b60c 100644
--- a/code/builders/builder-vite/package.json
+++ b/code/builders/builder-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "A plugin to run and build Storybooks with Vite",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
   "bugs": {
diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json
index 5a884a32031..5796195c88b 100644
--- a/code/builders/builder-webpack5/package.json
+++ b/code/builders/builder-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
index e9bc67d1d44..52924cc3fb4 100644
--- a/code/frameworks/angular/package.json
+++ b/code/frameworks/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json
index 2fca03fb9f3..af49a0b41b5 100644
--- a/code/frameworks/ember/package.json
+++ b/code/frameworks/ember/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ember",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember",
   "bugs": {
diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json
index 96b5f549e39..3b0eec15fc1 100644
--- a/code/frameworks/html-vite/package.json
+++ b/code/frameworks/html-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html-vite",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json
index 8317873fcfa..dc9fad92e94 100644
--- a/code/frameworks/html-webpack5/package.json
+++ b/code/frameworks/html-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html-webpack5",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json
index 8386f63952a..80be950d751 100644
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/nextjs",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for Next.js",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json
index 5bb53bb5b12..296ce62a0f3 100644
--- a/code/frameworks/preact-vite/package.json
+++ b/code/frameworks/preact-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact-vite",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json
index 69457f02adb..285a187a920 100644
--- a/code/frameworks/preact-webpack5/package.json
+++ b/code/frameworks/preact-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact-webpack5",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json
index 5d1d517be0d..3b6d1e3b338 100644
--- a/code/frameworks/react-vite/package.json
+++ b/code/frameworks/react-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-vite",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json
index de1bf261cbd..b849bafa047 100644
--- a/code/frameworks/react-webpack5/package.json
+++ b/code/frameworks/react-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-webpack5",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json
index 73ecd20a495..5b5ab6b6fe3 100644
--- a/code/frameworks/server-webpack5/package.json
+++ b/code/frameworks/server-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/server-webpack5",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json
index 5dac6552c58..eece06f117b 100644
--- a/code/frameworks/svelte-vite/package.json
+++ b/code/frameworks/svelte-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte-vite",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json
index 516ad8caa70..40ea6428710 100644
--- a/code/frameworks/svelte-webpack5/package.json
+++ b/code/frameworks/svelte-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte-webpack5",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json
index cb6d6723464..b97ffa27aad 100644
--- a/code/frameworks/sveltekit/package.json
+++ b/code/frameworks/sveltekit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/sveltekit",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for SvelteKit",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json
index 30503127648..e055410a8bb 100644
--- a/code/frameworks/vue3-vite/package.json
+++ b/code/frameworks/vue3-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3-vite",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json
index 9b975613769..f133bd90aab 100644
--- a/code/frameworks/vue3-webpack5/package.json
+++ b/code/frameworks/vue3-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3-webpack5",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json
index 5c4a0d6832f..97451f9f0dd 100644
--- a/code/frameworks/web-components-vite/package.json
+++ b/code/frameworks/web-components-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components-vite",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json
index fbd4b057071..391c4279903 100644
--- a/code/frameworks/web-components-webpack5/package.json
+++ b/code/frameworks/web-components-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components-webpack5",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
   "keywords": [
     "lit",
diff --git a/code/lib/channels/package.json b/code/lib/channels/package.json
index 8bce7271329..9b3659e76b9 100644
--- a/code/lib/channels/package.json
+++ b/code/lib/channels/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channels",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json
index 31291d5c217..2bedf547a13 100644
--- a/code/lib/cli-sb/package.json
+++ b/code/lib/cli-sb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sb",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json
index 70238bee936..d1cc935b29a 100644
--- a/code/lib/cli-storybook/package.json
+++ b/code/lib/cli-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "storybook",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json
index 4eeef07be2f..671a4f309bd 100644
--- a/code/lib/cli/package.json
+++ b/code/lib/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/cli",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook's CLI - install, dev, build, upgrade, and more",
   "keywords": [
     "cli",
diff --git a/code/lib/cli/src/versions.ts b/code/lib/cli/src/versions.ts
index 8341aa2952d..efd8bdb1d81 100644
--- a/code/lib/cli/src/versions.ts
+++ b/code/lib/cli/src/versions.ts
@@ -1,83 +1,83 @@
 // auto generated file, do not edit
 export default {
-  '@storybook/addon-a11y': '8.0.0-alpha.7',
-  '@storybook/addon-actions': '8.0.0-alpha.7',
-  '@storybook/addon-backgrounds': '8.0.0-alpha.7',
-  '@storybook/addon-controls': '8.0.0-alpha.7',
-  '@storybook/addon-docs': '8.0.0-alpha.7',
-  '@storybook/addon-essentials': '8.0.0-alpha.7',
-  '@storybook/addon-highlight': '8.0.0-alpha.7',
-  '@storybook/addon-interactions': '8.0.0-alpha.7',
-  '@storybook/addon-jest': '8.0.0-alpha.7',
-  '@storybook/addon-links': '8.0.0-alpha.7',
-  '@storybook/addon-mdx-gfm': '8.0.0-alpha.7',
-  '@storybook/addon-measure': '8.0.0-alpha.7',
-  '@storybook/addon-outline': '8.0.0-alpha.7',
-  '@storybook/addon-storysource': '8.0.0-alpha.7',
-  '@storybook/addon-themes': '8.0.0-alpha.7',
-  '@storybook/addon-toolbars': '8.0.0-alpha.7',
-  '@storybook/addon-viewport': '8.0.0-alpha.7',
-  '@storybook/angular': '8.0.0-alpha.7',
-  '@storybook/blocks': '8.0.0-alpha.7',
-  '@storybook/builder-manager': '8.0.0-alpha.7',
-  '@storybook/builder-vite': '8.0.0-alpha.7',
-  '@storybook/builder-webpack5': '8.0.0-alpha.7',
-  '@storybook/channels': '8.0.0-alpha.7',
-  '@storybook/cli': '8.0.0-alpha.7',
-  '@storybook/client-logger': '8.0.0-alpha.7',
-  '@storybook/codemod': '8.0.0-alpha.7',
-  '@storybook/components': '8.0.0-alpha.7',
-  '@storybook/core-common': '8.0.0-alpha.7',
-  '@storybook/core-events': '8.0.0-alpha.7',
-  '@storybook/core-server': '8.0.0-alpha.7',
-  '@storybook/core-webpack': '8.0.0-alpha.7',
-  '@storybook/csf-plugin': '8.0.0-alpha.7',
-  '@storybook/csf-tools': '8.0.0-alpha.7',
-  '@storybook/docs-tools': '8.0.0-alpha.7',
-  '@storybook/ember': '8.0.0-alpha.7',
-  '@storybook/html': '8.0.0-alpha.7',
-  '@storybook/html-vite': '8.0.0-alpha.7',
-  '@storybook/html-webpack5': '8.0.0-alpha.7',
-  '@storybook/instrumenter': '8.0.0-alpha.7',
-  '@storybook/manager': '8.0.0-alpha.7',
-  '@storybook/manager-api': '8.0.0-alpha.7',
-  '@storybook/nextjs': '8.0.0-alpha.7',
-  '@storybook/node-logger': '8.0.0-alpha.7',
-  '@storybook/preact': '8.0.0-alpha.7',
-  '@storybook/preact-vite': '8.0.0-alpha.7',
-  '@storybook/preact-webpack5': '8.0.0-alpha.7',
-  '@storybook/preset-create-react-app': '8.0.0-alpha.7',
-  '@storybook/preset-html-webpack': '8.0.0-alpha.7',
-  '@storybook/preset-preact-webpack': '8.0.0-alpha.7',
-  '@storybook/preset-react-webpack': '8.0.0-alpha.7',
-  '@storybook/preset-server-webpack': '8.0.0-alpha.7',
-  '@storybook/preset-svelte-webpack': '8.0.0-alpha.7',
-  '@storybook/preset-vue3-webpack': '8.0.0-alpha.7',
-  '@storybook/preset-web-components-webpack': '8.0.0-alpha.7',
-  '@storybook/preview': '8.0.0-alpha.7',
-  '@storybook/preview-api': '8.0.0-alpha.7',
-  '@storybook/react': '8.0.0-alpha.7',
-  '@storybook/react-dom-shim': '8.0.0-alpha.7',
-  '@storybook/react-vite': '8.0.0-alpha.7',
-  '@storybook/react-webpack5': '8.0.0-alpha.7',
-  '@storybook/router': '8.0.0-alpha.7',
-  '@storybook/server': '8.0.0-alpha.7',
-  '@storybook/server-webpack5': '8.0.0-alpha.7',
-  '@storybook/source-loader': '8.0.0-alpha.7',
-  '@storybook/svelte': '8.0.0-alpha.7',
-  '@storybook/svelte-vite': '8.0.0-alpha.7',
-  '@storybook/svelte-webpack5': '8.0.0-alpha.7',
-  '@storybook/sveltekit': '8.0.0-alpha.7',
-  '@storybook/telemetry': '8.0.0-alpha.7',
-  '@storybook/test': '8.0.0-alpha.7',
-  '@storybook/theming': '8.0.0-alpha.7',
-  '@storybook/types': '8.0.0-alpha.7',
-  '@storybook/vue3': '8.0.0-alpha.7',
-  '@storybook/vue3-vite': '8.0.0-alpha.7',
-  '@storybook/vue3-webpack5': '8.0.0-alpha.7',
-  '@storybook/web-components': '8.0.0-alpha.7',
-  '@storybook/web-components-vite': '8.0.0-alpha.7',
-  '@storybook/web-components-webpack5': '8.0.0-alpha.7',
-  sb: '8.0.0-alpha.7',
-  storybook: '8.0.0-alpha.7',
+  '@storybook/addon-a11y': '8.0.0-alpha.8',
+  '@storybook/addon-actions': '8.0.0-alpha.8',
+  '@storybook/addon-backgrounds': '8.0.0-alpha.8',
+  '@storybook/addon-controls': '8.0.0-alpha.8',
+  '@storybook/addon-docs': '8.0.0-alpha.8',
+  '@storybook/addon-essentials': '8.0.0-alpha.8',
+  '@storybook/addon-highlight': '8.0.0-alpha.8',
+  '@storybook/addon-interactions': '8.0.0-alpha.8',
+  '@storybook/addon-jest': '8.0.0-alpha.8',
+  '@storybook/addon-links': '8.0.0-alpha.8',
+  '@storybook/addon-mdx-gfm': '8.0.0-alpha.8',
+  '@storybook/addon-measure': '8.0.0-alpha.8',
+  '@storybook/addon-outline': '8.0.0-alpha.8',
+  '@storybook/addon-storysource': '8.0.0-alpha.8',
+  '@storybook/addon-themes': '8.0.0-alpha.8',
+  '@storybook/addon-toolbars': '8.0.0-alpha.8',
+  '@storybook/addon-viewport': '8.0.0-alpha.8',
+  '@storybook/angular': '8.0.0-alpha.8',
+  '@storybook/blocks': '8.0.0-alpha.8',
+  '@storybook/builder-manager': '8.0.0-alpha.8',
+  '@storybook/builder-vite': '8.0.0-alpha.8',
+  '@storybook/builder-webpack5': '8.0.0-alpha.8',
+  '@storybook/channels': '8.0.0-alpha.8',
+  '@storybook/cli': '8.0.0-alpha.8',
+  '@storybook/client-logger': '8.0.0-alpha.8',
+  '@storybook/codemod': '8.0.0-alpha.8',
+  '@storybook/components': '8.0.0-alpha.8',
+  '@storybook/core-common': '8.0.0-alpha.8',
+  '@storybook/core-events': '8.0.0-alpha.8',
+  '@storybook/core-server': '8.0.0-alpha.8',
+  '@storybook/core-webpack': '8.0.0-alpha.8',
+  '@storybook/csf-plugin': '8.0.0-alpha.8',
+  '@storybook/csf-tools': '8.0.0-alpha.8',
+  '@storybook/docs-tools': '8.0.0-alpha.8',
+  '@storybook/ember': '8.0.0-alpha.8',
+  '@storybook/html': '8.0.0-alpha.8',
+  '@storybook/html-vite': '8.0.0-alpha.8',
+  '@storybook/html-webpack5': '8.0.0-alpha.8',
+  '@storybook/instrumenter': '8.0.0-alpha.8',
+  '@storybook/manager': '8.0.0-alpha.8',
+  '@storybook/manager-api': '8.0.0-alpha.8',
+  '@storybook/nextjs': '8.0.0-alpha.8',
+  '@storybook/node-logger': '8.0.0-alpha.8',
+  '@storybook/preact': '8.0.0-alpha.8',
+  '@storybook/preact-vite': '8.0.0-alpha.8',
+  '@storybook/preact-webpack5': '8.0.0-alpha.8',
+  '@storybook/preset-create-react-app': '8.0.0-alpha.8',
+  '@storybook/preset-html-webpack': '8.0.0-alpha.8',
+  '@storybook/preset-preact-webpack': '8.0.0-alpha.8',
+  '@storybook/preset-react-webpack': '8.0.0-alpha.8',
+  '@storybook/preset-server-webpack': '8.0.0-alpha.8',
+  '@storybook/preset-svelte-webpack': '8.0.0-alpha.8',
+  '@storybook/preset-vue3-webpack': '8.0.0-alpha.8',
+  '@storybook/preset-web-components-webpack': '8.0.0-alpha.8',
+  '@storybook/preview': '8.0.0-alpha.8',
+  '@storybook/preview-api': '8.0.0-alpha.8',
+  '@storybook/react': '8.0.0-alpha.8',
+  '@storybook/react-dom-shim': '8.0.0-alpha.8',
+  '@storybook/react-vite': '8.0.0-alpha.8',
+  '@storybook/react-webpack5': '8.0.0-alpha.8',
+  '@storybook/router': '8.0.0-alpha.8',
+  '@storybook/server': '8.0.0-alpha.8',
+  '@storybook/server-webpack5': '8.0.0-alpha.8',
+  '@storybook/source-loader': '8.0.0-alpha.8',
+  '@storybook/svelte': '8.0.0-alpha.8',
+  '@storybook/svelte-vite': '8.0.0-alpha.8',
+  '@storybook/svelte-webpack5': '8.0.0-alpha.8',
+  '@storybook/sveltekit': '8.0.0-alpha.8',
+  '@storybook/telemetry': '8.0.0-alpha.8',
+  '@storybook/test': '8.0.0-alpha.8',
+  '@storybook/theming': '8.0.0-alpha.8',
+  '@storybook/types': '8.0.0-alpha.8',
+  '@storybook/vue3': '8.0.0-alpha.8',
+  '@storybook/vue3-vite': '8.0.0-alpha.8',
+  '@storybook/vue3-webpack5': '8.0.0-alpha.8',
+  '@storybook/web-components': '8.0.0-alpha.8',
+  '@storybook/web-components-vite': '8.0.0-alpha.8',
+  '@storybook/web-components-webpack5': '8.0.0-alpha.8',
+  sb: '8.0.0-alpha.8',
+  storybook: '8.0.0-alpha.8',
 };
diff --git a/code/lib/client-logger/package.json b/code/lib/client-logger/package.json
index 7e756ad1c06..328a6502566 100644
--- a/code/lib/client-logger/package.json
+++ b/code/lib/client-logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/client-logger",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json
index 88c83896047..f0401dc52f7 100644
--- a/code/lib/codemod/package.json
+++ b/code/lib/codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/codemod",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "A collection of codemod scripts written with JSCodeshift",
   "keywords": [
     "storybook"
diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json
index 8e35a8aff93..7bd54a9428a 100644
--- a/code/lib/core-common/package.json
+++ b/code/lib/core-common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-common",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json
index 7a55c13f114..0041af7942d 100644
--- a/code/lib/core-events/package.json
+++ b/code/lib/core-events/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-events",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Event names used in storybook core",
   "keywords": [
     "storybook"
diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json
index 94d8dc73207..cdea9a4b00d 100644
--- a/code/lib/core-server/package.json
+++ b/code/lib/core-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-server",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json
index 2e78d2be65c..a3dc0ce82f6 100644
--- a/code/lib/core-webpack/package.json
+++ b/code/lib/core-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-webpack",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json
index 18cdd0b0f8c..b3769a22ca3 100644
--- a/code/lib/csf-plugin/package.json
+++ b/code/lib/csf-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/csf-plugin",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Enrich CSF files via static analysis",
   "keywords": [
     "storybook"
diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json
index a60526888b3..4da5a9f0429 100644
--- a/code/lib/csf-tools/package.json
+++ b/code/lib/csf-tools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/csf-tools",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Parse and manipulate CSF and Storybook config files",
   "keywords": [
     "storybook"
diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json
index e386f975f9a..c623f5ad7f4 100644
--- a/code/lib/docs-tools/package.json
+++ b/code/lib/docs-tools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/docs-tools",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Shared utility functions for frameworks to implement docs",
   "keywords": [
     "storybook"
diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json
index b4a997503d0..3dc3263f781 100644
--- a/code/lib/instrumenter/package.json
+++ b/code/lib/instrumenter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/instrumenter",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json
index 5bb850cf1c8..84b5a21eea9 100644
--- a/code/lib/manager-api/package.json
+++ b/code/lib/manager-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/manager-api",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Core Storybook Manager API & Context",
   "keywords": [
     "storybook"
diff --git a/code/lib/manager-api/src/version.ts b/code/lib/manager-api/src/version.ts
index 95cfa4d9848..12c1391d88a 100644
--- a/code/lib/manager-api/src/version.ts
+++ b/code/lib/manager-api/src/version.ts
@@ -1 +1 @@
-export const version = '8.0.0-alpha.7';
+export const version = '8.0.0-alpha.8';
diff --git a/code/lib/node-logger/package.json b/code/lib/node-logger/package.json
index a7072d0eac0..73e1e9f5c26 100644
--- a/code/lib/node-logger/package.json
+++ b/code/lib/node-logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/node-logger",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json
index 9427f98ad86..5eef064e569 100644
--- a/code/lib/preview-api/package.json
+++ b/code/lib/preview-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preview-api",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json
index 4ffacc49c87..f7e34a1d9cd 100644
--- a/code/lib/preview/package.json
+++ b/code/lib/preview/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preview",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json
index 482a69d83c1..e13b5b2f3f9 100644
--- a/code/lib/react-dom-shim/package.json
+++ b/code/lib/react-dom-shim/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-dom-shim",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/router/package.json b/code/lib/router/package.json
index 8b1279d46ff..04883c6c9d8 100644
--- a/code/lib/router/package.json
+++ b/code/lib/router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/router",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Core Storybook Router",
   "keywords": [
     "storybook"
diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json
index 77ea29a9690..154007cfc6a 100644
--- a/code/lib/source-loader/package.json
+++ b/code/lib/source-loader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/source-loader",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Source loader",
   "keywords": [
     "lib",
diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json
index d8ade437260..877b60b0b3e 100644
--- a/code/lib/telemetry/package.json
+++ b/code/lib/telemetry/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/telemetry",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Telemetry logging for crash reports and usage statistics",
   "keywords": [
     "storybook"
diff --git a/code/lib/test/package.json b/code/lib/test/package.json
index 2c96d06ae7f..15da6f44b61 100644
--- a/code/lib/test/package.json
+++ b/code/lib/test/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/test",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json
index 3483ca3fc3c..4c9a709946b 100644
--- a/code/lib/theming/package.json
+++ b/code/lib/theming/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/theming",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
diff --git a/code/lib/types/package.json b/code/lib/types/package.json
index 40f0b0b9987..082aa0769ac 100644
--- a/code/lib/types/package.json
+++ b/code/lib/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/types",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Core Storybook TS Types",
   "keywords": [
     "storybook"
diff --git a/code/package.json b/code/package.json
index d9c52efe757..1141320db2f 100644
--- a/code/package.json
+++ b/code/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/root",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "private": true,
   "description": "Storybook root",
   "homepage": "https://storybook.js.org/",
@@ -309,6 +309,5 @@
         "Dependency Upgrades"
       ]
     ]
-  },
-  "deferredNextVersion": "8.0.0-alpha.8"
+  }
 }
diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json
index 81c2824615f..00e0c3ae3f6 100644
--- a/code/presets/create-react-app/package.json
+++ b/code/presets/create-react-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-create-react-app",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for Create React App preset",
   "keywords": [
     "storybook"
diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json
index 3bee502d3fb..79310af1d1e 100644
--- a/code/presets/html-webpack/package.json
+++ b/code/presets/html-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-html-webpack",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json
index d7bf0a6fc58..b037246b106 100644
--- a/code/presets/preact-webpack/package.json
+++ b/code/presets/preact-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-preact-webpack",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"
diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json
index fec3a26cf72..3dedeab48ff 100644
--- a/code/presets/react-webpack/package.json
+++ b/code/presets/react-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-react-webpack",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading",
   "keywords": [
     "storybook"
diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json
index 30dcd273034..fb78b0d00d8 100644
--- a/code/presets/server-webpack/package.json
+++ b/code/presets/server-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-server-webpack",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json
index d2324eebc00..f026579c323 100644
--- a/code/presets/svelte-webpack/package.json
+++ b/code/presets/svelte-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-svelte-webpack",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json
index c6107dba203..7ae5f8e5920 100644
--- a/code/presets/vue3-webpack/package.json
+++ b/code/presets/vue3-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-vue3-webpack",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/presets/web-components-webpack/package.json b/code/presets/web-components-webpack/package.json
index 725c8028614..2e87f7d3a20 100644
--- a/code/presets/web-components-webpack/package.json
+++ b/code/presets/web-components-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-web-components-webpack",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
   "keywords": [
     "lit",
diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json
index 59b01b05b12..07796f7497f 100644
--- a/code/renderers/html/package.json
+++ b/code/renderers/html/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook HTML renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json
index ab5b02ac821..1329733fc1d 100644
--- a/code/renderers/preact/package.json
+++ b/code/renderers/preact/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook Preact renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index b6cdf5691fe..77b8bc412b1 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook React renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json
index 5a271fc210d..ce81de49cdc 100644
--- a/code/renderers/server/package.json
+++ b/code/renderers/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/server",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook Server renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json
index fa35804f1f7..386a15f4d13 100644
--- a/code/renderers/svelte/package.json
+++ b/code/renderers/svelte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook Svelte renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json
index 19cadb7167b..f710f9a92c4 100644
--- a/code/renderers/vue3/package.json
+++ b/code/renderers/vue3/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook Vue 3 renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json
index b920b75aaab..27d7384a2b8 100644
--- a/code/renderers/web-components/package.json
+++ b/code/renderers/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook web-components renderer",
   "keywords": [
     "lit",
diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json
index a8199801e1a..1141822b19d 100644
--- a/code/ui/blocks/package.json
+++ b/code/ui/blocks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/blocks",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Storybook Doc Blocks",
   "keywords": [
     "storybook"
diff --git a/code/ui/components/package.json b/code/ui/components/package.json
index 74d3f290d88..a2ebf3bd843 100644
--- a/code/ui/components/package.json
+++ b/code/ui/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json
index 866fa7b60f9..92ba5532c00 100644
--- a/code/ui/manager/package.json
+++ b/code/ui/manager/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/manager",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Core Storybook UI",
   "keywords": [
     "storybook"