From 2a9b09e3636cf4b06a35bab3d8cbe0b9725cc003 Mon Sep 17 00:00:00 2001
From: Jon Badgett <jonthenerd@users.noreply.github.com>
Date: Wed, 17 May 2023 08:40:07 -0500
Subject: [PATCH 01/56] docs: add information about @storybook/preview-api
 useArgs hook

Provide example for those migrating from v6 to v7 and were previously using the @storybook/client-api useArgs hook
---
 docs/writing-stories/args.md | 37 ++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index 4d3a53652ff7..f329e1fb0453 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -207,6 +207,43 @@ Similarly, special formats are available for dates and colors. Date objects will
 
 Args specified through the URL will extend and override any default values of args set on the story.
 
+## Setting args from withihn a story
+
+Components with interactivity often need their containing component, or page, to respond to events, modify their state, then pass a changed arg back to the rendered component to reflect the change. For example, you would want a Switch component to be checked by a user and the arg shown in Storybook to reflect the change. This can be accomplished by using the `useArgs` hook exported by `@storybook/preview-api`:
+
+```ts
+// my-component/component.stories.tsx
+
+import { StoryObj, Meta } from "@storybook/react";
+import { useArgs } from "@storybook/preview-api";
+import { Switch } from ".";
+
+export const meta: Meta<typeof Switch> = {
+    title: "Inputs/Switch",
+    component: Switch
+};
+export default meta;
+
+type Story = StoryObj<typeof Switch>;
+
+export const Standard = {
+    ...template,
+    args: {
+        isChecked: false,
+        label: "Switch Me!"
+    },
+    render: (args) => {
+        const [{ isChecked }, updateArgs] = useArgs();
+
+        function onChange() {
+            updateArgs({ isChecked: !isChecked });
+        }
+
+        return <Switch {...args} onChange={onChange} isChecked={isChecked} />;
+    }    
+};
+```
+
 ## Mapping to complex arg values
 
 Complex values such as JSX elements cannot be serialized to the manager (e.g., the Controls addon) or synced with the URL. Arg values can be "mapped" from a simple string to a complex type using the `mapping` property in `argTypes` to work around this limitation. It works in any arg but makes the most sense when used with the `select` control type.

From 9e5f9817d641177f365a321a0ecce963573f8a9e Mon Sep 17 00:00:00 2001
From: Jon Badgett <jonthenerd@users.noreply.github.com>
Date: Wed, 17 May 2023 08:46:31 -0500
Subject: [PATCH 02/56] docs: fix issue with code sample

Removed remnant of template method. Shoudl be GTG now.
---
 docs/writing-stories/args.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index f329e1fb0453..50440ee76564 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -226,8 +226,7 @@ export default meta;
 
 type Story = StoryObj<typeof Switch>;
 
-export const Standard = {
-    ...template,
+export const Example = {    
     args: {
         isChecked: false,
         label: "Switch Me!"

From b701f0fa547361f730769cffcaad511310612b12 Mon Sep 17 00:00:00 2001
From: Jon Badgett <jonthenerd@users.noreply.github.com>
Date: Wed, 17 May 2023 09:03:41 -0500
Subject: [PATCH 03/56] docs: fix code block - remove unnecessary export

Removed unnecessary export
---
 docs/writing-stories/args.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index 50440ee76564..17dbe3bc8754 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -218,7 +218,7 @@ import { StoryObj, Meta } from "@storybook/react";
 import { useArgs } from "@storybook/preview-api";
 import { Switch } from ".";
 
-export const meta: Meta<typeof Switch> = {
+const meta: Meta<typeof Switch> = {
     title: "Inputs/Switch",
     component: Switch
 };

From aade9cc5f33fdf327f24460c5deb5c0fc5e48fa1 Mon Sep 17 00:00:00 2001
From: Jon Badgett <jonthenerd@users.noreply.github.com>
Date: Wed, 17 May 2023 09:25:39 -0500
Subject: [PATCH 04/56] docs: now passes eslint

Made changes to code block to ensure that it will pass eslint rule `react-hooks/rules-of-hooks`
---
 docs/writing-stories/args.md | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index 17dbe3bc8754..4006ca9d9f7a 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -216,7 +216,7 @@ Components with interactivity often need their containing component, or page, to
 
 import { StoryObj, Meta } from "@storybook/react";
 import { useArgs } from "@storybook/preview-api";
-import { Switch } from ".";
+import { Switch, SwitchProps } from ".";
 
 const meta: Meta<typeof Switch> = {
     title: "Inputs/Switch",
@@ -226,20 +226,23 @@ export default meta;
 
 type Story = StoryObj<typeof Switch>;
 
+// Separate render logic into a new function that will not cause issues with eslint rule `react-hooks/rules-of-hooks`
+const WrappedComponent = (args: SwitchProps) => {
+  const [{ isChecked }, updateArgs] = UseArgs();
+
+    function onChange() {
+        updateArgs({ isChecked: !isChecked });
+    }
+
+    return <Switch {...args} onChange={onChange} isChecked={isChecked} />;
+}
+
 export const Example = {    
     args: {
         isChecked: false,
         label: "Switch Me!"
     },
-    render: (args) => {
-        const [{ isChecked }, updateArgs] = useArgs();
-
-        function onChange() {
-            updateArgs({ isChecked: !isChecked });
-        }
-
-        return <Switch {...args} onChange={onChange} isChecked={isChecked} />;
-    }    
+    render: (args) => <WrappedComponent {...args} />
 };
 ```
 

From 1d5413028689b53bcb01fca97ed7685ce0a8f7af Mon Sep 17 00:00:00 2001
From: Jon Badgett <jonthenerd@users.noreply.github.com>
Date: Wed, 17 May 2023 12:38:52 -0500
Subject: [PATCH 05/56] docs: change code block to be minimum example that does
 not cause eslint or storybook errors

---
 docs/writing-stories/args.md | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index 4006ca9d9f7a..5a353bec6dd9 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -216,7 +216,7 @@ Components with interactivity often need their containing component, or page, to
 
 import { StoryObj, Meta } from "@storybook/react";
 import { useArgs } from "@storybook/preview-api";
-import { Switch, SwitchProps } from ".";
+import { Switch } from ".";
 
 const meta: Meta<typeof Switch> = {
     title: "Inputs/Switch",
@@ -226,23 +226,21 @@ export default meta;
 
 type Story = StoryObj<typeof Switch>;
 
-// Separate render logic into a new function that will not cause issues with eslint rule `react-hooks/rules-of-hooks`
-const WrappedComponent = (args: SwitchProps) => {
-  const [{ isChecked }, updateArgs] = UseArgs();
-
-    function onChange() {
-        updateArgs({ isChecked: !isChecked });
-    }
-
-    return <Switch {...args} onChange={onChange} isChecked={isChecked} />;
-}
-
 export const Example = {    
     args: {
         isChecked: false,
         label: "Switch Me!"
     },
-    render: (args) => <WrappedComponent {...args} />
+    render: (args) => {
+      // eslint-disable-next-line
+      const [{ isChecked }, updateArgs] = UseArgs();
+
+      function onChange() {
+          updateArgs({ isChecked: !isChecked });
+      }
+
+      return <Switch {...args} onChange={onChange} isChecked={isChecked} />;
+    }
 };
 ```
 

From d12518c66788c47fd0aa0e3c67d5873a93b3b156 Mon Sep 17 00:00:00 2001
From: Jon Badgett <jonthenerd@users.noreply.github.com>
Date: Wed, 17 May 2023 12:42:48 -0500
Subject: [PATCH 06/56] docs: fix typo in header

---
 docs/writing-stories/args.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index 5a353bec6dd9..811d5d06a781 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -207,7 +207,7 @@ Similarly, special formats are available for dates and colors. Date objects will
 
 Args specified through the URL will extend and override any default values of args set on the story.
 
-## Setting args from withihn a story
+## Setting args from within a story
 
 Components with interactivity often need their containing component, or page, to respond to events, modify their state, then pass a changed arg back to the rendered component to reflect the change. For example, you would want a Switch component to be checked by a user and the arg shown in Storybook to reflect the change. This can be accomplished by using the `useArgs` hook exported by `@storybook/preview-api`:
 

From 665c1a88a6760f3d3167834e2dae1513979a9f2a Mon Sep 17 00:00:00 2001
From: Jon Badgett <jonthenerd@users.noreply.github.com>
Date: Thu, 18 May 2023 08:00:59 -0500
Subject: [PATCH 07/56] docs: align code pattern to ensure no eslint or
 storybook issues

---
 docs/writing-stories/args.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index 811d5d06a781..89337d510193 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -231,8 +231,7 @@ export const Example = {
         isChecked: false,
         label: "Switch Me!"
     },
-    render: (args) => {
-      // eslint-disable-next-line
+    render: function Render(args) {      
       const [{ isChecked }, updateArgs] = UseArgs();
 
       function onChange() {

From 449b0529a0031ca0ef8256502d19de02af03a5ff Mon Sep 17 00:00:00 2001
From: Jon Badgett <jonthenerd@users.noreply.github.com>
Date: Fri, 16 Jun 2023 15:04:41 -0500
Subject: [PATCH 08/56] make changes per recommendations

---
 .../react/page-story-args-within-story.js.mdx | 27 ++++++++++++
 .../react/page-story-args-within-story.ts.mdx | 31 ++++++++++++++
 docs/writing-stories/args.md                  | 41 +++++--------------
 3 files changed, 68 insertions(+), 31 deletions(-)
 create mode 100644 docs/snippets/react/page-story-args-within-story.js.mdx
 create mode 100644 docs/snippets/react/page-story-args-within-story.ts.mdx

diff --git a/docs/snippets/react/page-story-args-within-story.js.mdx b/docs/snippets/react/page-story-args-within-story.js.mdx
new file mode 100644
index 000000000000..c523c2682eb3
--- /dev/null
+++ b/docs/snippets/react/page-story-args-within-story.js.mdx
@@ -0,0 +1,27 @@
+```ts
+// my-component/component.stories.js|jsx
+
+import { useArgs } from '@storybook/preview-api';
+import { Switch } from '.';
+
+export const meta = {
+  title: 'Inputs/Switch',
+  component: Switch,
+};
+
+export const Example = {
+  args: {
+    isChecked: false,
+    label: 'Switch Me!',
+  },
+  render: function Render(args) {
+    const [{ isChecked }, updateArgs] = UseArgs();
+
+    function onChange() {
+      updateArgs({ isChecked: !isChecked });
+    }
+
+    return <Switch {...args} onChange={onChange} isChecked={isChecked} />;
+  },
+};
+```
diff --git a/docs/snippets/react/page-story-args-within-story.ts.mdx b/docs/snippets/react/page-story-args-within-story.ts.mdx
new file mode 100644
index 000000000000..fb0fdff989a0
--- /dev/null
+++ b/docs/snippets/react/page-story-args-within-story.ts.mdx
@@ -0,0 +1,31 @@
+```ts
+// my-component/component.stories.ts|tsx
+
+import { StoryObj, Meta } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+import { Switch } from '.';
+
+const meta: Meta<typeof Switch> = {
+  title: 'Inputs/Switch',
+  component: Switch,
+};
+export default meta;
+
+type Story = StoryObj<typeof Switch>;
+
+export const Example = {
+  args: {
+    isChecked: false,
+    label: 'Switch Me!',
+  },
+  render: function Render(args) {
+    const [{ isChecked }, updateArgs] = UseArgs();
+
+    function onChange() {
+      updateArgs({ isChecked: !isChecked });
+    }
+
+    return <Switch {...args} onChange={onChange} isChecked={isChecked} />;
+  },
+};
+```
diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index 89337d510193..ea83df908531 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -211,37 +211,16 @@ Args specified through the URL will extend and override any default values of ar
 
 Components with interactivity often need their containing component, or page, to respond to events, modify their state, then pass a changed arg back to the rendered component to reflect the change. For example, you would want a Switch component to be checked by a user and the arg shown in Storybook to reflect the change. This can be accomplished by using the `useArgs` hook exported by `@storybook/preview-api`:
 
-```ts
-// my-component/component.stories.tsx
-
-import { StoryObj, Meta } from "@storybook/react";
-import { useArgs } from "@storybook/preview-api";
-import { Switch } from ".";
-
-const meta: Meta<typeof Switch> = {
-    title: "Inputs/Switch",
-    component: Switch
-};
-export default meta;
-
-type Story = StoryObj<typeof Switch>;
-
-export const Example = {    
-    args: {
-        isChecked: false,
-        label: "Switch Me!"
-    },
-    render: function Render(args) {      
-      const [{ isChecked }, updateArgs] = UseArgs();
-
-      function onChange() {
-          updateArgs({ isChecked: !isChecked });
-      }
-
-      return <Switch {...args} onChange={onChange} isChecked={isChecked} />;
-    }
-};
-```
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'react/this-pr-example-snippet.js.mdx',
+    'react/page-story-args-within-story.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
 
 ## Mapping to complex arg values
 

From cec457628d99c542e4d09465e939b619131842b4 Mon Sep 17 00:00:00 2001
From: Jon Badgett <jonthenerd@users.noreply.github.com>
Date: Fri, 16 Jun 2023 15:18:45 -0500
Subject: [PATCH 09/56] fix typos; align style to other js code snippets

---
 .../react/page-story-args-within-story.js.mdx         | 11 ++++++++---
 .../react/page-story-args-within-story.ts.mdx         |  7 ++++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/docs/snippets/react/page-story-args-within-story.js.mdx b/docs/snippets/react/page-story-args-within-story.js.mdx
index c523c2682eb3..ceec5acabc65 100644
--- a/docs/snippets/react/page-story-args-within-story.js.mdx
+++ b/docs/snippets/react/page-story-args-within-story.js.mdx
@@ -1,10 +1,10 @@
-```ts
+```js
 // my-component/component.stories.js|jsx
 
 import { useArgs } from '@storybook/preview-api';
 import { Switch } from '.';
 
-export const meta = {
+export default {
   title: 'Inputs/Switch',
   component: Switch,
 };
@@ -14,8 +14,13 @@ export const Example = {
     isChecked: false,
     label: 'Switch Me!',
   },
+  /**
+   * 👇 React things the Storybook function "useArgs" is a hook, but it's really not.
+   * Using a named capital-letter function prevents an ESLint warning related to this.
+   * Don't lint? You can use an arrow function instead.
+   */
   render: function Render(args) {
-    const [{ isChecked }, updateArgs] = UseArgs();
+    const [{ isChecked }, updateArgs] = useArgs();
 
     function onChange() {
       updateArgs({ isChecked: !isChecked });
diff --git a/docs/snippets/react/page-story-args-within-story.ts.mdx b/docs/snippets/react/page-story-args-within-story.ts.mdx
index fb0fdff989a0..9c1dc3c601d1 100644
--- a/docs/snippets/react/page-story-args-within-story.ts.mdx
+++ b/docs/snippets/react/page-story-args-within-story.ts.mdx
@@ -18,8 +18,13 @@ export const Example = {
     isChecked: false,
     label: 'Switch Me!',
   },
+  /**
+   * 👇 React things the Storybook function "useArgs" is a hook, but it's really not.
+   * Using a named capital-letter function prevents an ESLint warning related to this.
+   * Don't lint? You can use an arrow function instead.
+   */
   render: function Render(args) {
-    const [{ isChecked }, updateArgs] = UseArgs();
+    const [{ isChecked }, updateArgs] = useArgs();
 
     function onChange() {
       updateArgs({ isChecked: !isChecked });

From 8add32d6d97614d82b64bdec03a6b627ccbef2bd Mon Sep 17 00:00:00 2001
From: Jon Badgett <jonthenerd@users.noreply.github.com>
Date: Fri, 16 Jun 2023 15:21:47 -0500
Subject: [PATCH 10/56] fix mispelling in comments

---
 docs/snippets/react/page-story-args-within-story.js.mdx | 2 +-
 docs/snippets/react/page-story-args-within-story.ts.mdx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/snippets/react/page-story-args-within-story.js.mdx b/docs/snippets/react/page-story-args-within-story.js.mdx
index ceec5acabc65..8b8391d786d7 100644
--- a/docs/snippets/react/page-story-args-within-story.js.mdx
+++ b/docs/snippets/react/page-story-args-within-story.js.mdx
@@ -15,7 +15,7 @@ export const Example = {
     label: 'Switch Me!',
   },
   /**
-   * 👇 React things the Storybook function "useArgs" is a hook, but it's really not.
+   * 👇 React believes the Storybook function "useArgs" is a hook, but it's really not.
    * Using a named capital-letter function prevents an ESLint warning related to this.
    * Don't lint? You can use an arrow function instead.
    */
diff --git a/docs/snippets/react/page-story-args-within-story.ts.mdx b/docs/snippets/react/page-story-args-within-story.ts.mdx
index 9c1dc3c601d1..1e232015c992 100644
--- a/docs/snippets/react/page-story-args-within-story.ts.mdx
+++ b/docs/snippets/react/page-story-args-within-story.ts.mdx
@@ -19,7 +19,7 @@ export const Example = {
     label: 'Switch Me!',
   },
   /**
-   * 👇 React things the Storybook function "useArgs" is a hook, but it's really not.
+   * 👇 React believes the Storybook function "useArgs" is a hook, but it's really not.
    * Using a named capital-letter function prevents an ESLint warning related to this.
    * Don't lint? You can use an arrow function instead.
    */

From ebbff0d7410106fb9610f149d7fa68aedcfb9e68 Mon Sep 17 00:00:00 2001
From: Trevor Sears <trevor@trevorsears.com>
Date: Thu, 3 Aug 2023 03:55:02 -0400
Subject: [PATCH 11/56] Added more portable path handling code to better
 support win32-style paths.

---
 .../webpack/loader/local/get-font-face-declarations.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts b/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts
index 20e1df8deeb2..006c7f126f5b 100644
--- a/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts
+++ b/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts
@@ -11,7 +11,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions, rootContex
   const localFontSrc = options.props.src as LocalFontSrc;
 
   // Parent folder relative to the root context
-  const parentFolder = options.filename.split('/').slice(0, -1).join('/').replace(rootContext, '');
+  const parentFolder = path.dirname(options.filename).replace(rootContext, '');
 
   const { validateData } = require('../utils/local-font-utils');
   const { weight, style, variable } = validateData('', options.props);
@@ -23,9 +23,13 @@ export async function getFontFaceDeclarations(options: LoaderOptions, rootContex
     6
   )}`;
 
+  const arePathsWin32Format = /^[a-z]:\\/iu.test(options.filename);
+  const cleanWin32Path = (pathString: string): string =>
+    arePathsWin32Format ? pathString.replace(/\\/gu, '/') : pathString;
+
   const getFontFaceCSS = () => {
     if (typeof localFontSrc === 'string') {
-      const localFontPath = path.join(parentFolder, localFontSrc);
+      const localFontPath = cleanWin32Path(path.join(parentFolder, localFontSrc));
 
       return `@font-face {
           font-family: ${id};
@@ -34,7 +38,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions, rootContex
     }
     return localFontSrc
       .map((font) => {
-        const localFontPath = path.join(parentFolder, font.path);
+        const localFontPath = cleanWin32Path(path.join(parentFolder, font.path));
 
         return `@font-face {
           font-family: ${id};

From f9e2e0d5d8161a29136e0046957e75ffd6122e03 Mon Sep 17 00:00:00 2001
From: Jon Badgett <jonthenerd@users.noreply.github.com>
Date: Fri, 11 Aug 2023 16:05:10 -0500
Subject: [PATCH 12/56] add typescript 4.9 snippet

---
 .../react/page-story-args-within-story.js.mdx | 15 ++++----
 .../page-story-args-within-story.ts-4-9.mdx   | 35 +++++++++++++++++++
 .../react/page-story-args-within-story.ts.mdx | 21 ++++++-----
 docs/writing-stories/args.md                  |  8 ++---
 node_modules/.package-lock.json               |  6 ++++
 5 files changed, 62 insertions(+), 23 deletions(-)
 create mode 100644 docs/snippets/react/page-story-args-within-story.ts-4-9.mdx
 create mode 100644 node_modules/.package-lock.json

diff --git a/docs/snippets/react/page-story-args-within-story.js.mdx b/docs/snippets/react/page-story-args-within-story.js.mdx
index 8b8391d786d7..282e81f79cf7 100644
--- a/docs/snippets/react/page-story-args-within-story.js.mdx
+++ b/docs/snippets/react/page-story-args-within-story.js.mdx
@@ -2,22 +2,21 @@
 // my-component/component.stories.js|jsx
 
 import { useArgs } from '@storybook/preview-api';
-import { Switch } from '.';
+import { Checkbox } from './checkbox';
 
 export default {
-  title: 'Inputs/Switch',
-  component: Switch,
+  title: 'Inputs/Checkbox',
+  component: Checkbox,
 };
 
 export const Example = {
   args: {
     isChecked: false,
-    label: 'Switch Me!',
+    label: 'Try Me!',
   },
   /**
-   * 👇 React believes the Storybook function "useArgs" is a hook, but it's really not.
-   * Using a named capital-letter function prevents an ESLint warning related to this.
-   * Don't lint? You can use an arrow function instead.
+   * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name.
+   * If you are not concerned with linting, you may use an arrow function.
    */
   render: function Render(args) {
     const [{ isChecked }, updateArgs] = useArgs();
@@ -26,7 +25,7 @@ export const Example = {
       updateArgs({ isChecked: !isChecked });
     }
 
-    return <Switch {...args} onChange={onChange} isChecked={isChecked} />;
+    return <Checkbox {...args} onChange={onChange} isChecked={isChecked} />;
   },
 };
 ```
diff --git a/docs/snippets/react/page-story-args-within-story.ts-4-9.mdx b/docs/snippets/react/page-story-args-within-story.ts-4-9.mdx
new file mode 100644
index 000000000000..5a23cb8f523e
--- /dev/null
+++ b/docs/snippets/react/page-story-args-within-story.ts-4-9.mdx
@@ -0,0 +1,35 @@
+```ts
+// my-component/component.stories.ts|tsx
+
+import { StoryObj, Meta } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+import { Checkbox } from './checkbox';
+
+const meta = {
+  title: 'Inputs/Checkbox',
+  component: Checkbox,
+} satisfies Meta<typeof Checkbox>;
+export default meta;
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const Example = {
+  args: {
+    isChecked: false,
+    label: 'Try Me!',
+  },
+  /**
+   * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name.
+   * If you are not concerned with linting, you may use an arrow function.
+   */
+  render: function Render(args) {
+    const [{ isChecked }, updateArgs] = useArgs();
+
+    function onChange() {
+      updateArgs({ isChecked: !isChecked });
+    }
+
+    return <Checkbox {...args} onChange={onChange} isChecked={isChecked} />;
+  },
+} satisfies Story;
+```
diff --git a/docs/snippets/react/page-story-args-within-story.ts.mdx b/docs/snippets/react/page-story-args-within-story.ts.mdx
index 1e232015c992..137e37cbf3d6 100644
--- a/docs/snippets/react/page-story-args-within-story.ts.mdx
+++ b/docs/snippets/react/page-story-args-within-story.ts.mdx
@@ -3,25 +3,24 @@
 
 import { StoryObj, Meta } from '@storybook/react';
 import { useArgs } from '@storybook/preview-api';
-import { Switch } from '.';
+import { Checkbox } from './checkbox';
 
-const meta: Meta<typeof Switch> = {
-  title: 'Inputs/Switch',
-  component: Switch,
+const meta: Meta<typeof Checkbox> = {
+  title: 'Inputs/Checkbox',
+  component: Checkbox,
 };
 export default meta;
 
-type Story = StoryObj<typeof Switch>;
+type Story = StoryObj<typeof Checkbox>;
 
-export const Example = {
+export const Example: Story = {
   args: {
     isChecked: false,
-    label: 'Switch Me!',
+    label: 'Try Me!',
   },
   /**
-   * 👇 React believes the Storybook function "useArgs" is a hook, but it's really not.
-   * Using a named capital-letter function prevents an ESLint warning related to this.
-   * Don't lint? You can use an arrow function instead.
+   * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name.
+   * If you are not concerned with linting, you may use an arrow function.
    */
   render: function Render(args) {
     const [{ isChecked }, updateArgs] = useArgs();
@@ -30,7 +29,7 @@ export const Example = {
       updateArgs({ isChecked: !isChecked });
     }
 
-    return <Switch {...args} onChange={onChange} isChecked={isChecked} />;
+    return <Checkbox {...args} onChange={onChange} isChecked={isChecked} />;
   },
 };
 ```
diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index 6c6b98b1fbf7..dbf89e71aed7 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -215,14 +215,14 @@ Args specified through the URL will extend and override any default values of ar
 
 ## Setting args from within a story
 
-Components with interactivity often need their containing component, or page, to respond to events, modify their state, then pass a changed arg back to the rendered component to reflect the change. For example, you would want a Switch component to be checked by a user and the arg shown in Storybook to reflect the change. This can be accomplished by using the `useArgs` hook exported by `@storybook/preview-api`:
+Components with interactivity often need their containing component, or page, to respond to events, modify their state, then pass a changed arg back to the rendered component to reflect the change. For example, you would want a Checkbox component to be checked by a user and the arg shown in Storybook to reflect the change. This can be accomplished by using the `useArgs` hook exported by `@storybook/preview-api`:
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
-  paths={[
-    'react/this-pr-example-snippet.js.mdx',
-    'react/page-story-args-within-story.ts.mdx',
+  paths={[    
+    'react/page-story-args-within-story.js.mdx',
+    'react/page-story-args-within-story.ts.mdx'
   ]}
 />
 
diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
new file mode 100644
index 000000000000..b157d40c0f7a
--- /dev/null
+++ b/node_modules/.package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "@storybook/root",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

From 44fa3c34c7667b5eef546afe9d4e58b20aa8aa35 Mon Sep 17 00:00:00 2001
From: Jon Badgett <jonthenerd@users.noreply.github.com>
Date: Fri, 11 Aug 2023 16:09:27 -0500
Subject: [PATCH 13/56] removed added file. Why wasn't this excluded via
 .gitignore???

---
 node_modules/.package-lock.json | 6 ------
 1 file changed, 6 deletions(-)
 delete mode 100644 node_modules/.package-lock.json

diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
deleted file mode 100644
index b157d40c0f7a..000000000000
--- a/node_modules/.package-lock.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "@storybook/root",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}

From 504fefa0160a02b369318e9a820caf44fb2cbf1f Mon Sep 17 00:00:00 2001
From: Jon Badgett <jonthenerd@users.noreply.github.com>
Date: Fri, 11 Aug 2023 16:14:47 -0500
Subject: [PATCH 14/56] modify text to align to pull request comment

---
 docs/writing-stories/args.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index dbf89e71aed7..c0a9bf0d2519 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -215,7 +215,7 @@ Args specified through the URL will extend and override any default values of ar
 
 ## Setting args from within a story
 
-Components with interactivity often need their containing component, or page, to respond to events, modify their state, then pass a changed arg back to the rendered component to reflect the change. For example, you would want a Checkbox component to be checked by a user and the arg shown in Storybook to reflect the change. This can be accomplished by using the `useArgs` hook exported by `@storybook/preview-api`:
+Interactive components often need to be controlled by their containing component or page to respond to events, modify their state and reflect those changes in the UI. For example, when a user toggles a switch component, the switch should be checked, and the arg shown in Storybook should reflect the change. To enable this, you can use the [`useArgs`](../addons/addons-api.md#useargs) API exported by `@storybook/preview-api`:
 
 <!-- prettier-ignore-start -->
 

From 41d8edf15fda19a3be37dd4e0a04e82b841cab82 Mon Sep 17 00:00:00 2001
From: Jon Badgett <jonthenerd@users.noreply.github.com>
Date: Fri, 11 Aug 2023 16:43:41 -0500
Subject: [PATCH 15/56] remove link to incorrect api

---
 docs/writing-stories/args.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index c0a9bf0d2519..240b96dc3d4d 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -215,7 +215,7 @@ Args specified through the URL will extend and override any default values of ar
 
 ## Setting args from within a story
 
-Interactive components often need to be controlled by their containing component or page to respond to events, modify their state and reflect those changes in the UI. For example, when a user toggles a switch component, the switch should be checked, and the arg shown in Storybook should reflect the change. To enable this, you can use the [`useArgs`](../addons/addons-api.md#useargs) API exported by `@storybook/preview-api`:
+Interactive components often need to be controlled by their containing component or page to respond to events, modify their state and reflect those changes in the UI. For example, when a user toggles a switch component, the switch should be checked, and the arg shown in Storybook should reflect the change. To enable this, you can use the `useArgs` API exported by `@storybook/preview-api`:
 
 <!-- prettier-ignore-start -->
 

From de8ab0988a98aaeb4732c010e8ae5860ebd450cf Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 23 Aug 2023 14:00:19 +0200
Subject: [PATCH 16/56] add migration notes for storyIndexers

---
 MIGRATION.md | 65 ++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 56 insertions(+), 9 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 5022eefb59bd..0736a8c3e0ed 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,7 +1,9 @@
 <h1>Migration</h1>
 
+- [From version 7.3.0 to 7.4.0](#from-version-730-to-740)
+  - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
 - [From version 7.0.0 to 7.2.0](#from-version-700-to-720)
-    - [Addon API is more type-strict](#addon-api-is-more-type-strict)
+  - [Addon API is more type-strict](#addon-api-is-more-type-strict)
 - [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
   - [7.0 breaking changes](#70-breaking-changes)
     - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below)
@@ -27,7 +29,7 @@
     - [Deploying build artifacts](#deploying-build-artifacts)
       - [Dropped support for file URLs](#dropped-support-for-file-urls)
       - [Serving with nginx](#serving-with-nginx)
-      - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules)
+      - [Ignore story files from node_modules](#ignore-story-files-from-node_modules)
   - [7.0 Core changes](#70-core-changes)
     - [7.0 feature flags removed](#70-feature-flags-removed)
     - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates)
@@ -39,7 +41,7 @@
     - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default)
   - [7.0 Vite changes](#70-vite-changes)
     - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically)
-    - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
+    - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
   - [7.0 Webpack changes](#70-webpack-changes)
     - [Webpack4 support discontinued](#webpack4-support-discontinued)
     - [Babel mode v7 exclusively](#babel-mode-v7-exclusively)
@@ -89,7 +91,7 @@
     - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration)
     - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
     - [Autoplay in docs](#autoplay-in-docs)
-    - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global)
+    - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global)
   - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes)
     - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default)
     - [`Story` type deprecated](#story-type-deprecated)
@@ -302,6 +304,50 @@
   - [Packages renaming](#packages-renaming)
   - [Deprecated embedded addons](#deprecated-embedded-addons)
 
+## From version 7.3.0 to 7.4.0
+
+#### `storyIndexers` is replaced with `experimental_indexers`
+
+Defining custom indexers for stories has become a more official - yet still experimental - API which is now configured at `experimental_indexers` instead of `storyIndexers` in `main.ts`. `storyIndexers` has been deprecated and will be fully removed in version 8.0.0.
+
+The new experimental indexers are documented [here](TODO!!!). The most notable change from `storyIndexers` is that the indexer must now return a list of [`IndexInput`](https://github.com/storybookjs/storybook/blob/next/code/lib/types/src/modules/indexer.ts#L104-L148) instead of `CsfFile`. It's possible to construct an `IndexInput` from a `CsfFile` using the `CsfFile.indexInputs` getter.
+
+That means you can convert an existing story indexer like this:
+
+```diff
+// .storybook/main.ts
+
+import { readFileSync } from 'fs';
+import { loadCsf } from '@storybook/csf-tools';
+
+export default {
+-  storyIndexers = (indexers) => {
+-    const indexer = async (fileName, opts) => {
++  experimental_indexers = (indexers) => {
++    const index = async (fileName, opts) => {
+      const code = readFileSync(fileName, { encoding: 'utf-8' });
+      const makeTitle = (userTitle) => {
+        // Do something with the auto title retrieved by Storybook
+        return userTitle;
+      };
+
+      // Parse the CSF file with makeTitle as a custom context
+-      return loadCsf(code, { ...compilationOptions, makeTitle, fileName }).parse();
++      return loadCsf(code, { ...compilationOptions, makeTitle, fileName }).parse().indexInputs;
+    };
+
+    return [
+      {
+        test: /(stories|story)\.[tj]sx?$/,
+-        indexer,
++        index,
+      },
+      ...(indexers || []),
+    ];
+  },
+};
+```
+
 ## From version 7.0.0 to 7.2.0
 
 #### Addon API is more type-strict
@@ -311,6 +357,7 @@ When registering an addon using `@storybook/manager-api`, the addon API is now m
 The `type` property is now a required field, and the `id` property should not be set anymore.
 
 Here's a correct example:
+
 ```tsx
 import { addons, types } from '@storybook/manager-api';
 
@@ -318,7 +365,7 @@ addons.register('my-addon', () => {
   addons.add('my-addon/panel', {
     type: types.PANEL,
     title: 'My Addon',
-    render: ({ active }) => active ? <div>Hello World</div> : null,
+    render: ({ active }) => (active ? <div>Hello World</div> : null),
   });
 });
 ```
@@ -869,16 +916,16 @@ Given the following `main.js`:
 
 ```js
 export default {
-  stories: ['../**/*.stories.*']
-}
+  stories: ['../**/*.stories.*'],
+};
 ```
 
 If you want to restore the previous behavior to include `node_modules`, you can update it to:
 
 ```js
 export default {
-  stories: ['../**/*.stories.*', '../**/node_modules/**/*.stories.*']
-}
+  stories: ['../**/*.stories.*', '../**/node_modules/**/*.stories.*'],
+};
 ```
 
 The first glob would have node_modules automatically excluded by Storybook, and the second glob would include all stories that are under a nested `node_modules` directory.

From 8b81a5f3657e52384c31f6117372514e1d22026d Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 23 Aug 2023 14:03:22 +0200
Subject: [PATCH 17/56] deprecate storyIndexers

---
 code/lib/core-server/src/utils/StoryIndexGenerator.ts | 10 +++++-----
 code/lib/types/src/modules/core-common.ts             |  2 +-
 code/lib/types/src/modules/indexer.ts                 |  4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
index d2a195a31463..7a501a95a5f0 100644
--- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts
+++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
@@ -25,7 +25,7 @@ import type {
 } from '@storybook/types';
 import { userOrAutoTitleFromSpecifier, sortStoriesV7 } from '@storybook/preview-api';
 import { commonGlobOptions, normalizeStoryPath } from '@storybook/core-common';
-import { logger, once } from '@storybook/node-logger';
+import { deprecate, logger, once } from '@storybook/node-logger';
 import { getStorySortParameter } from '@storybook/csf-tools';
 import { storyNameFromExport, toId } from '@storybook/csf';
 import { analyze } from '@storybook/docs-mdx';
@@ -120,10 +120,10 @@ export class StoryIndexGenerator {
   ) {
     this.specifierToCache = new Map();
     if (options.storyIndexers.length > 1) {
-      // TODO: write migration notes before enabling this warning
-      // deprecate(
-      //   "'storyIndexers' is deprecated, please use 'indexers' instead. See migration notes at XXX"
-      // );
+      deprecate(
+        dedent`'storyIndexers' is deprecated, please use 'experimental_indexers' instead.
+        Please refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storyindexers-is-replaced-with-experimental_indexers`
+      );
     }
   }
 
diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts
index 45d94e585eb3..0f2a9f54c271 100644
--- a/code/lib/types/src/modules/core-common.ts
+++ b/code/lib/types/src/modules/core-common.ts
@@ -369,7 +369,7 @@ export interface StorybookConfig {
 
   /**
    * Process CSF files for the story index.
-   * @soonDeprecated use {@link experimental_indexers} instead
+   * @deprecated use {@link experimental_indexers} instead
    */
   storyIndexers?: PresetValue<StoryIndexer[]>;
 
diff --git a/code/lib/types/src/modules/indexer.ts b/code/lib/types/src/modules/indexer.ts
index ccd1ddaef206..5346f7d41f5a 100644
--- a/code/lib/types/src/modules/indexer.ts
+++ b/code/lib/types/src/modules/indexer.ts
@@ -68,7 +68,7 @@ export type Indexer = BaseIndexer & {
    */
   index: (fileName: string, options: IndexerOptions) => Promise<IndexInput[]>;
   /**
-   * @soonDeprecated Use {@link index} instead
+   * @deprecated Use {@link index} instead
    */
   indexer?: never;
 };
@@ -79,7 +79,7 @@ export type DeprecatedIndexer = BaseIndexer & {
 };
 
 /**
- * @soonDeprecated Use {@link Indexer} instead
+ * @deprecated Use {@link Indexer} instead
  */
 export type StoryIndexer = Indexer | DeprecatedIndexer;
 

From 01dea7ccf7d8524fb27f56dbe33456be352ef423 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 24 Aug 2023 10:58:04 +0200
Subject: [PATCH 18/56] add deprecation warnings and migration notes for
 storyStoreV6

---
 MIGRATION.md                                  | 21 +++++++++++++++++++
 .../src/utils/StoryIndexGenerator.ts          |  8 ++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 0736a8c3e0ed..31c92a7a8ca0 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,6 +1,7 @@
 <h1>Migration</h1>
 
 - [From version 7.3.0 to 7.4.0](#from-version-730-to-740)
+  - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
   - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
 - [From version 7.0.0 to 7.2.0](#from-version-700-to-720)
   - [Addon API is more type-strict](#addon-api-is-more-type-strict)
@@ -306,6 +307,26 @@
 
 ## From version 7.3.0 to 7.4.0
 
+#### `storyStoreV6` and `storiesOf` is deprecated
+
+`storyStoreV6` and `storiesOf` is deprecated and will be completely removed in Storybook 8.0.0.
+
+If you're using `storiesOf` we recommend you migrate your stories to CSF3 for a better story writing experience.
+In many cases you can get started with the migration by using two migration scripts:
+
+```bash
+
+# 1. convert storiesOf to CSF
+npx storybook@latest migrate storiesof-to-csf --glob="**/*.stories.tsx" --parser=tsx
+
+# 2. Convert CSF 2 to CSF 3
+npx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx
+```
+
+They won't do a perfect migration so we recommend that you manually go through each file afterwards.
+
+Alternatively you can build your own `storiesOf` implementation by leveraging the new (experimental) indexer API ([documentation](TODO), [migration](#storyindexers-is-replaced-with-experimental_indexers)). A proof of concept of such an implementation can be seen in [this StackBlitz demo](https://stackblitz.com/edit/github-h2rgfk?file=README.md). See the demo's `README.md` for a deeper explanation of the implementation.
+
 #### `storyIndexers` is replaced with `experimental_indexers`
 
 Defining custom indexers for stories has become a more official - yet still experimental - API which is now configured at `experimental_indexers` instead of `storyIndexers` in `main.ts`. `storyIndexers` has been deprecated and will be fully removed in version 8.0.0.
diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
index 7a501a95a5f0..88393bde2e6a 100644
--- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts
+++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
@@ -122,7 +122,13 @@ export class StoryIndexGenerator {
     if (options.storyIndexers.length > 1) {
       deprecate(
         dedent`'storyIndexers' is deprecated, please use 'experimental_indexers' instead.
-        Please refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storyindexers-is-replaced-with-experimental_indexers`
+        Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storyindexers-is-replaced-with-experimental_indexers`
+      );
+    }
+    if (options.storyStoreV7 === false) {
+      deprecate(
+        dedent`storyStoreV6 is deprecated, please migrate to storyStoreV7 instead.
+        Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated`
       );
     }
   }

From 1a5e4eea04c574dd30c3c40f84f1a610319fb920 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 24 Aug 2023 11:10:37 +0200
Subject: [PATCH 19/56] move deprecation warning to build and dev

---
 code/lib/core-server/src/build-static.ts              | 10 +++++++++-
 code/lib/core-server/src/dev-server.ts                |  9 +++++++++
 code/lib/core-server/src/utils/StoryIndexGenerator.ts |  8 +-------
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/code/lib/core-server/src/build-static.ts b/code/lib/core-server/src/build-static.ts
index 810c871724fd..659dbf834767 100644
--- a/code/lib/core-server/src/build-static.ts
+++ b/code/lib/core-server/src/build-static.ts
@@ -2,7 +2,7 @@ import chalk from 'chalk';
 import { copy, emptyDir, ensureDir } from 'fs-extra';
 import { dirname, isAbsolute, join, resolve } from 'path';
 import { global } from '@storybook/global';
-import { logger } from '@storybook/node-logger';
+import { deprecate, logger } from '@storybook/node-logger';
 import { telemetry, getPrecedingUpgrade } from '@storybook/telemetry';
 import type {
   BuilderOptions,
@@ -23,6 +23,7 @@ import {
 import { ConflictingStaticDirConfigError } from '@storybook/core-events/server-errors';
 
 import isEqual from 'lodash/isEqual.js';
+import dedent from 'ts-dedent';
 import { outputStats } from './utils/output-stats';
 import {
   copyAllStaticFiles,
@@ -122,6 +123,13 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption
       presets.apply<DocsOptions>('docs', {}),
     ]);
 
+  if (features?.storyStoreV7 === false) {
+    deprecate(
+      dedent`storyStoreV6 is deprecated, please migrate to storyStoreV7 instead.
+        - Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated`
+    );
+  }
+
   const fullOptions: Options = {
     ...options,
     presets,
diff --git a/code/lib/core-server/src/dev-server.ts b/code/lib/core-server/src/dev-server.ts
index 2eb1ea420cda..2941c1a06c73 100644
--- a/code/lib/core-server/src/dev-server.ts
+++ b/code/lib/core-server/src/dev-server.ts
@@ -5,7 +5,9 @@ import invariant from 'tiny-invariant';
 import type { CoreConfig, Options, StorybookConfig } from '@storybook/types';
 
 import { logConfig } from '@storybook/core-common';
+import { deprecate } from '@storybook/node-logger';
 
+import dedent from 'ts-dedent';
 import { getMiddleware } from './utils/middleware';
 import { getServerAddresses } from './utils/server-address';
 import { getServer } from './utils/server-init';
@@ -35,6 +37,13 @@ export async function storybookDevServer(options: Options) {
     getServerChannel(server)
   );
 
+  if (features?.storyStoreV7 === false) {
+    deprecate(
+      dedent`storyStoreV6 is deprecated, please migrate to storyStoreV7 instead.
+      - Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated`
+    );
+  }
+
   let indexError: Error | undefined;
   // try get index generator, if failed, send telemetry without storyCount, then rethrow the error
   const initializedStoryIndexGenerator: Promise<StoryIndexGenerator | undefined> =
diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
index 88393bde2e6a..bdcb626a3132 100644
--- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts
+++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
@@ -122,13 +122,7 @@ export class StoryIndexGenerator {
     if (options.storyIndexers.length > 1) {
       deprecate(
         dedent`'storyIndexers' is deprecated, please use 'experimental_indexers' instead.
-        Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storyindexers-is-replaced-with-experimental_indexers`
-      );
-    }
-    if (options.storyStoreV7 === false) {
-      deprecate(
-        dedent`storyStoreV6 is deprecated, please migrate to storyStoreV7 instead.
-        Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated`
+        - Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storyindexers-is-replaced-with-experimental_indexers`
       );
     }
   }

From eb4d699434bd760a6833aa03e68596007335e502 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 24 Aug 2023 11:24:56 +0200
Subject: [PATCH 20/56] update docs snippets for indexers

---
 docs/snippets/common/storybook-main-csf-indexer.ts.mdx    | 8 ++++----
 .../common/storybook-main-story-indexer-main.ts.mdx       | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/snippets/common/storybook-main-csf-indexer.ts.mdx b/docs/snippets/common/storybook-main-csf-indexer.ts.mdx
index 09f6f85f02e9..0c533f8152ee 100644
--- a/docs/snippets/common/storybook-main-csf-indexer.ts.mdx
+++ b/docs/snippets/common/storybook-main-csf-indexer.ts.mdx
@@ -5,16 +5,16 @@ import { readFileSync } from 'fs';
 import { loadCsf } from '@storybook/csf-tools';
 
 export default {
-  storyIndexers = (indexers) => {
-    const indexer = async (fileName, opts) => {
+  experimental_indexers = (indexers) => {
+    const index = async (fileName, opts) => {
       const code = readFileSync(fileName, { encoding: 'utf-8' });
-      return loadCsf(code, { ...opts, fileName }).parse();
+      return loadCsf(code, { ...opts, fileName }).parse().indexInputs;
     };
 
     return [
       {
         test: /(stories|story)\.[tj]sx?$/,
-        indexer,
+        index,
       },
       ...(indexers || []),
     ];
diff --git a/docs/snippets/common/storybook-main-story-indexer-main.ts.mdx b/docs/snippets/common/storybook-main-story-indexer-main.ts.mdx
index 7c4885028a5d..77c9363b4f62 100644
--- a/docs/snippets/common/storybook-main-story-indexer-main.ts.mdx
+++ b/docs/snippets/common/storybook-main-story-indexer-main.ts.mdx
@@ -9,8 +9,8 @@ import type { StorybookConfig } from '@storybook/your-framework';
 import { parseCode } from './parseCode';
 
 const config: StorybookConfig = {
-  storyIndexers: (indexers, addonOptions) => {
-    const indexer = async (fileName, compilationOptions) => {
+  experimental_indexers: (indexers, addonOptions) => {
+    const index = async (fileName, compilationOptions) => {
       const code = parseCode(fileName, addonOptions);
       const makeTitle = (userTitle) => {
         // Do something with the auto title retrieved by Storybook
@@ -18,13 +18,13 @@ const config: StorybookConfig = {
       };
 
       // Parse the CSF file with makeTitle as a custom context
-      return loadCsf(code, { ...compilationOptions, makeTitle, fileName }).parse();
+      return loadCsf(code, { ...compilationOptions, makeTitle, fileName }).parse().indexInputs;
     };
 
     return [
       {
         test: /\.(md|html)$/,
-        indexer,
+        index,
       },
       ...(indexers || []),
     ];

From b53e602e7562dca61b0d45539ad3d8f71a199a1e Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Tue, 5 Sep 2023 10:44:04 +0200
Subject: [PATCH 21/56] rename `index` to `indexFn`

---
 MIGRATION.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 31c92a7a8ca0..33268d612c97 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -345,7 +345,7 @@ export default {
 -  storyIndexers = (indexers) => {
 -    const indexer = async (fileName, opts) => {
 +  experimental_indexers = (indexers) => {
-+    const index = async (fileName, opts) => {
++    const indexFn = async (fileName, opts) => {
       const code = readFileSync(fileName, { encoding: 'utf-8' });
       const makeTitle = (userTitle) => {
         // Do something with the auto title retrieved by Storybook
@@ -361,7 +361,7 @@ export default {
       {
         test: /(stories|story)\.[tj]sx?$/,
 -        indexer,
-+        index,
++        indexFn,
       },
       ...(indexers || []),
     ];

From 214b6ec65c4c4d808f0a4a5c67679d405dfea54b Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Tue, 5 Sep 2023 14:28:43 +0200
Subject: [PATCH 22/56] indexFn -> createIndex

---
 MIGRATION.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 33268d612c97..fc7c93c87ffb 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -345,7 +345,7 @@ export default {
 -  storyIndexers = (indexers) => {
 -    const indexer = async (fileName, opts) => {
 +  experimental_indexers = (indexers) => {
-+    const indexFn = async (fileName, opts) => {
++    const createIndex = async (fileName, opts) => {
       const code = readFileSync(fileName, { encoding: 'utf-8' });
       const makeTitle = (userTitle) => {
         // Do something with the auto title retrieved by Storybook
@@ -361,7 +361,7 @@ export default {
       {
         test: /(stories|story)\.[tj]sx?$/,
 -        indexer,
-+        indexFn,
++        createIndex,
       },
       ...(indexers || []),
     ];

From eea29bcf9f26994651043eaa262c55f37e5ac8f0 Mon Sep 17 00:00:00 2001
From: Jon Badgett <jonthenerd@users.noreply.github.com>
Date: Sun, 10 Sep 2023 15:22:11 -0500
Subject: [PATCH 23/56] add react IFRenderer to args docs addition

---
 docs/writing-stories/args.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index 240b96dc3d4d..26a61edfb322 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -213,6 +213,8 @@ Similarly, special formats are available for dates and colors. Date objects will
 
 Args specified through the URL will extend and override any default values of args set on the story.
 
+<IfRenderer renderer='react'>
+
 ## Setting args from within a story
 
 Interactive components often need to be controlled by their containing component or page to respond to events, modify their state and reflect those changes in the UI. For example, when a user toggles a switch component, the switch should be checked, and the arg shown in Storybook should reflect the change. To enable this, you can use the `useArgs` API exported by `@storybook/preview-api`:
@@ -228,6 +230,8 @@ Interactive components often need to be controlled by their containing component
 
 <!-- prettier-ignore-end -->
 
+</IfRenderer>
+
 ## Mapping to complex arg values
 
 Complex values such as JSX elements cannot be serialized to the manager (e.g., the Controls addon) or synced with the URL. Arg values can be "mapped" from a simple string to a complex type using the `mapping` property in `argTypes` to work around this limitation. It works in any arg but makes the most sense when used with the `select` control type.

From b253aeb798654d1359f19647071e5d885d2d063d Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Mon, 11 Sep 2023 20:39:22 +0100
Subject: [PATCH 24/56] Adds conditional render to the Styling and CSS docs

---
 docs/configure/styling-and-css.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/configure/styling-and-css.md b/docs/configure/styling-and-css.md
index b328359af00f..92ac363e6b47 100644
--- a/docs/configure/styling-and-css.md
+++ b/docs/configure/styling-and-css.md
@@ -35,6 +35,8 @@ CSS-in-JS libraries are designed to use basic JavaScript, and they often work in
 
 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'>
+
 ## Troubleshooting
 
 ### Styles aren't being applied with Angular
@@ -56,7 +58,7 @@ The latest Angular releases introduced significant changes in configuring and st
 }
 ```
 
-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), which will override the application's styles:
+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:
 
 ```json
 {
@@ -121,3 +123,5 @@ 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).
+
+</IfRenderer>

From 65bca16b96be937046dfbe4c08ecadae37ec929e Mon Sep 17 00:00:00 2001
From: Bryan Thomas <49354825+bryanjtc@users.noreply.github.com>
Date: Wed, 13 Sep 2023 04:35:35 -0500
Subject: [PATCH 25/56] fix(builder-vite): Fix missing @storybook/addon-docs
 dependency

---
 code/builders/builder-vite/package.json | 1 +
 code/yarn.lock                          | 1 +
 2 files changed, 2 insertions(+)

diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json
index e0317dc2b45b..efbff1c6c6f0 100644
--- a/code/builders/builder-vite/package.json
+++ b/code/builders/builder-vite/package.json
@@ -43,6 +43,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
+    "@storybook/addon-docs": "workspace:*",
     "@storybook/channels": "workspace:*",
     "@storybook/client-logger": "workspace:*",
     "@storybook/core-common": "workspace:*",
diff --git a/code/yarn.lock b/code/yarn.lock
index 4ba4e1ab6559..8303f28125d3 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6526,6 +6526,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/builder-vite@workspace:builders/builder-vite"
   dependencies:
+    "@storybook/addon-docs": "workspace:*"
     "@storybook/channels": "workspace:*"
     "@storybook/client-logger": "workspace:*"
     "@storybook/core-common": "workspace:*"

From fe6f5d7ac5177fdd3aa8a30e72510f34f3553937 Mon Sep 17 00:00:00 2001
From: Bryan Thomas <49354825+bryanjtc@users.noreply.github.com>
Date: Thu, 14 Sep 2023 12:09:17 -0500
Subject: [PATCH 26/56] Move mdx plugin from builder-vite to addon-docs

---
 code/addons/docs/package.json                            | 3 ++-
 .../docs}/src/plugins/mdx-plugin.ts                      | 6 +-----
 .../docs}/src/plugins/mdx-plugin.types.d.ts              | 0
 code/addons/docs/src/preset.ts                           | 9 +++++++++
 code/builders/builder-vite/package.json                  | 7 -------
 code/builders/builder-vite/src/plugins/index.ts          | 1 -
 code/builders/builder-vite/src/vite-config.ts            | 2 --
 code/yarn.lock                                           | 5 +----
 8 files changed, 13 insertions(+), 20 deletions(-)
 rename code/{builders/builder-vite => addons/docs}/src/plugins/mdx-plugin.ts (89%)
 rename code/{builders/builder-vite => addons/docs}/src/plugins/mdx-plugin.types.d.ts (100%)

diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
index ac17aa3ca0f8..d47e7e290529 100644
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@@ -121,7 +121,8 @@
   "devDependencies": {
     "react": "^16.14.0",
     "react-dom": "^16.8.0",
-    "typescript": "~4.9.3"
+    "typescript": "~4.9.3",
+    "vite": "^4.0.4"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
diff --git a/code/builders/builder-vite/src/plugins/mdx-plugin.ts b/code/addons/docs/src/plugins/mdx-plugin.ts
similarity index 89%
rename from code/builders/builder-vite/src/plugins/mdx-plugin.ts
rename to code/addons/docs/src/plugins/mdx-plugin.ts
index 8e4b51f16d6e..abe82237c87c 100644
--- a/code/builders/builder-vite/src/plugins/mdx-plugin.ts
+++ b/code/addons/docs/src/plugins/mdx-plugin.ts
@@ -3,7 +3,6 @@ import type { Plugin } from 'vite';
 import remarkSlug from 'remark-slug';
 import remarkExternalLinks from 'remark-external-links';
 import { createFilter } from 'vite';
-import { dirname, join } from 'path';
 
 const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith('story.mdx');
 
@@ -34,10 +33,7 @@ export async function mdxPlugin(options: Options): Promise<Plugin> {
       const mdxLoaderOptions = await options.presets.apply('mdxLoaderOptions', {
         ...mdxPluginOptions,
         mdxCompileOptions: {
-          providerImportSource: join(
-            dirname(require.resolve('@storybook/addon-docs/package.json')),
-            '/dist/shims/mdx-react-shim'
-          ),
+          providerImportSource: require.resolve('@storybook/mdx2-csf'),
           ...mdxPluginOptions?.mdxCompileOptions,
           remarkPlugins: [remarkSlug, remarkExternalLinks].concat(
             mdxPluginOptions?.mdxCompileOptions?.remarkPlugins ?? []
diff --git a/code/builders/builder-vite/src/plugins/mdx-plugin.types.d.ts b/code/addons/docs/src/plugins/mdx-plugin.types.d.ts
similarity index 100%
rename from code/builders/builder-vite/src/plugins/mdx-plugin.types.d.ts
rename to code/addons/docs/src/plugins/mdx-plugin.types.d.ts
diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
index 2adfe2e0e2b5..e93d405107c7 100644
--- a/code/addons/docs/src/preset.ts
+++ b/code/addons/docs/src/preset.ts
@@ -11,6 +11,7 @@ import { global } from '@storybook/global';
 import { loadCsf } from '@storybook/csf-tools';
 import { logger } from '@storybook/node-logger';
 import { ensureReactPeerDeps } from './ensure-react-peer-deps';
+import { mdxPlugin } from './plugins/mdx-plugin';
 
 async function webpack(
   webpackConfig: any = {},
@@ -175,6 +176,14 @@ export const addons: StorybookConfig['addons'] = [
   require.resolve('@storybook/react-dom-shim/dist/preset'),
 ];
 
+export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets, features }) => {
+  const { plugins = [] } = config;
+
+  plugins.push(mdxPlugin({ presets, features }));
+
+  return config;
+};
+
 /*
  * This is a workaround for https://github.com/Swatinem/rollup-plugin-dts/issues/162
  * something down the dependency chain is using typescript namespaces, which are not supported by rollup-plugin-dts
diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json
index efbff1c6c6f0..cfe95805b7b8 100644
--- a/code/builders/builder-vite/package.json
+++ b/code/builders/builder-vite/package.json
@@ -43,12 +43,10 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addon-docs": "workspace:*",
     "@storybook/channels": "workspace:*",
     "@storybook/client-logger": "workspace:*",
     "@storybook/core-common": "workspace:*",
     "@storybook/csf-plugin": "workspace:*",
-    "@storybook/mdx2-csf": "^1.0.0",
     "@storybook/node-logger": "workspace:*",
     "@storybook/preview": "workspace:*",
     "@storybook/preview-api": "workspace:*",
@@ -60,8 +58,6 @@
     "find-cache-dir": "^3.0.0",
     "fs-extra": "^11.1.0",
     "magic-string": "^0.30.0",
-    "remark-external-links": "^8.0.0",
-    "remark-slug": "^6.0.0",
     "rollup": "^2.25.0 || ^3.3.0"
   },
   "devDependencies": {
@@ -97,9 +93,6 @@
     "entries": [
       "./src/index.ts"
     ],
-    "externals": [
-      "@storybook/mdx1-csf"
-    ],
     "platform": "node"
   },
   "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17"
diff --git a/code/builders/builder-vite/src/plugins/index.ts b/code/builders/builder-vite/src/plugins/index.ts
index bccebbdb4833..68e540908dc6 100644
--- a/code/builders/builder-vite/src/plugins/index.ts
+++ b/code/builders/builder-vite/src/plugins/index.ts
@@ -1,5 +1,4 @@
 export * from './inject-export-order-plugin';
-export * from './mdx-plugin';
 export * from './strip-story-hmr-boundaries';
 export * from './code-generator-plugin';
 export * from './csf-plugin';
diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts
index a832f2e92a96..75778971b26a 100644
--- a/code/builders/builder-vite/src/vite-config.ts
+++ b/code/builders/builder-vite/src/vite-config.ts
@@ -15,7 +15,6 @@ import {
   codeGeneratorPlugin,
   csfPlugin,
   injectExportOrderPlugin,
-  mdxPlugin,
   stripStoryHMRBoundary,
   externalGlobalsPlugin,
 } from './plugins';
@@ -81,7 +80,6 @@ export async function pluginConfig(options: Options) {
   const plugins = [
     codeGeneratorPlugin(options),
     await csfPlugin(options),
-    await mdxPlugin(options),
     injectExportOrderPlugin,
     stripStoryHMRBoundary(),
     {
diff --git a/code/yarn.lock b/code/yarn.lock
index 8303f28125d3..5e009a321010 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -5925,6 +5925,7 @@ __metadata:
     remark-slug: ^6.0.0
     ts-dedent: ^2.0.0
     typescript: ~4.9.3
+    vite: ^4.0.4
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -6526,12 +6527,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/builder-vite@workspace:builders/builder-vite"
   dependencies:
-    "@storybook/addon-docs": "workspace:*"
     "@storybook/channels": "workspace:*"
     "@storybook/client-logger": "workspace:*"
     "@storybook/core-common": "workspace:*"
     "@storybook/csf-plugin": "workspace:*"
-    "@storybook/mdx2-csf": ^1.0.0
     "@storybook/node-logger": "workspace:*"
     "@storybook/preview": "workspace:*"
     "@storybook/preview-api": "workspace:*"
@@ -6546,8 +6545,6 @@ __metadata:
     fs-extra: ^11.1.0
     glob: ^10.0.0
     magic-string: ^0.30.0
-    remark-external-links: ^8.0.0
-    remark-slug: ^6.0.0
     rollup: ^3.20.1
     slash: ^5.0.0
     typescript: ~4.9.3

From d8a0049bbadf07df846cdd30db7059c3510f001c Mon Sep 17 00:00:00 2001
From: Bryan Thomas <49354825+bryanjtc@users.noreply.github.com>
Date: Thu, 14 Sep 2023 12:16:16 -0500
Subject: [PATCH 27/56] Await mdxPlugin

---
 code/addons/docs/src/preset.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
index e93d405107c7..d0c6d7658784 100644
--- a/code/addons/docs/src/preset.ts
+++ b/code/addons/docs/src/preset.ts
@@ -179,7 +179,7 @@ export const addons: StorybookConfig['addons'] = [
 export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets, features }) => {
   const { plugins = [] } = config;
 
-  plugins.push(mdxPlugin({ presets, features }));
+  plugins.push(await mdxPlugin({ presets, features }));
 
   return config;
 };

From 3acfceb6d336e0640851ea32e0a582f45d0204ff Mon Sep 17 00:00:00 2001
From: Bryan Thomas <49354825+bryanjtc@users.noreply.github.com>
Date: Thu, 14 Sep 2023 12:29:51 -0500
Subject: [PATCH 28/56] Replace createFilter import from vite with
 @rollup/pluginutils

---
 code/addons/docs/package.json              | 1 +
 code/addons/docs/src/plugins/mdx-plugin.ts | 2 +-
 code/yarn.lock                             | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
index d47e7e290529..5bd40d570777 100644
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@@ -100,6 +100,7 @@
   "dependencies": {
     "@jest/transform": "^29.3.1",
     "@mdx-js/react": "^2.1.5",
+    "@rollup/pluginutils": "^5.0.2",
     "@storybook/blocks": "workspace:*",
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
diff --git a/code/addons/docs/src/plugins/mdx-plugin.ts b/code/addons/docs/src/plugins/mdx-plugin.ts
index abe82237c87c..d49e86822eb2 100644
--- a/code/addons/docs/src/plugins/mdx-plugin.ts
+++ b/code/addons/docs/src/plugins/mdx-plugin.ts
@@ -2,7 +2,7 @@ import type { Options } from '@storybook/types';
 import type { Plugin } from 'vite';
 import remarkSlug from 'remark-slug';
 import remarkExternalLinks from 'remark-external-links';
-import { createFilter } from 'vite';
+import { createFilter } from '@rollup/pluginutils';
 
 const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith('story.mdx');
 
diff --git a/code/yarn.lock b/code/yarn.lock
index 5e009a321010..54dd68750142 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -5905,6 +5905,7 @@ __metadata:
   dependencies:
     "@jest/transform": ^29.3.1
     "@mdx-js/react": ^2.1.5
+    "@rollup/pluginutils": ^5.0.2
     "@storybook/blocks": "workspace:*"
     "@storybook/client-logger": "workspace:*"
     "@storybook/components": "workspace:*"

From 39fa07119464cb5f896bc9c9ce3d1aee666af4ce Mon Sep 17 00:00:00 2001
From: Bryan Thomas <49354825+bryanjtc@users.noreply.github.com>
Date: Thu, 14 Sep 2023 12:45:46 -0500
Subject: [PATCH 29/56] Use StorybookConfig type from @storybook/builder-vite

---
 code/addons/docs/package.json  | 1 +
 code/addons/docs/src/preset.ts | 6 +++++-
 code/yarn.lock                 | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
index 5bd40d570777..535e1a3302d8 100644
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@@ -120,6 +120,7 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
+    "@storybook/builder-vite": "workspace:*",
     "react": "^16.14.0",
     "react-dom": "^16.8.0",
     "typescript": "~4.9.3",
diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
index d0c6d7658784..48c88927b159 100644
--- a/code/addons/docs/src/preset.ts
+++ b/code/addons/docs/src/preset.ts
@@ -7,6 +7,7 @@ import { dedent } from 'ts-dedent';
 import type { DocsOptions, Indexer, Options, StorybookConfig } from '@storybook/types';
 import type { CsfPluginOptions } from '@storybook/csf-plugin';
 import type { JSXOptions, CompileOptions } from '@storybook/mdx2-csf';
+import type { StorybookConfigVite } from '@storybook/builder-vite';
 import { global } from '@storybook/global';
 import { loadCsf } from '@storybook/csf-tools';
 import { logger } from '@storybook/node-logger';
@@ -176,7 +177,10 @@ export const addons: StorybookConfig['addons'] = [
   require.resolve('@storybook/react-dom-shim/dist/preset'),
 ];
 
-export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets, features }) => {
+export const viteFinal: StorybookConfigVite['viteFinal'] = async (
+  config,
+  { presets, features }
+) => {
   const { plugins = [] } = config;
 
   plugins.push(await mdxPlugin({ presets, features }));
diff --git a/code/yarn.lock b/code/yarn.lock
index 54dd68750142..ac77c33181cd 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -5907,6 +5907,7 @@ __metadata:
     "@mdx-js/react": ^2.1.5
     "@rollup/pluginutils": ^5.0.2
     "@storybook/blocks": "workspace:*"
+    "@storybook/builder-vite": "workspace:*"
     "@storybook/client-logger": "workspace:*"
     "@storybook/components": "workspace:*"
     "@storybook/csf-plugin": "workspace:*"

From ab089d4e8a5c653cd9e0401663980623f5e41252 Mon Sep 17 00:00:00 2001
From: Bryan Thomas <49354825+bryanjtc@users.noreply.github.com>
Date: Thu, 14 Sep 2023 13:07:51 -0500
Subject: [PATCH 30/56] Replace parameter for mdxPlugin

---
 code/addons/docs/src/preset.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
index 48c88927b159..c73528bc04de 100644
--- a/code/addons/docs/src/preset.ts
+++ b/code/addons/docs/src/preset.ts
@@ -177,13 +177,10 @@ export const addons: StorybookConfig['addons'] = [
   require.resolve('@storybook/react-dom-shim/dist/preset'),
 ];
 
-export const viteFinal: StorybookConfigVite['viteFinal'] = async (
-  config,
-  { presets, features }
-) => {
+export const viteFinal: StorybookConfigVite['viteFinal'] = async (config, ...options) => {
   const { plugins = [] } = config;
 
-  plugins.push(await mdxPlugin({ presets, features }));
+  plugins.push(await mdxPlugin(...options));
 
   return config;
 };

From aabf48e5a873cb61ebb1b426b0c91eda855d3a44 Mon Sep 17 00:00:00 2001
From: Bryan Thomas <49354825+bryanjtc@users.noreply.github.com>
Date: Thu, 14 Sep 2023 13:26:13 -0500
Subject: [PATCH 31/56] Move mdxPlugin import

---
 code/addons/docs/src/preset.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
index c73528bc04de..0d2f25bdd19b 100644
--- a/code/addons/docs/src/preset.ts
+++ b/code/addons/docs/src/preset.ts
@@ -12,7 +12,6 @@ import { global } from '@storybook/global';
 import { loadCsf } from '@storybook/csf-tools';
 import { logger } from '@storybook/node-logger';
 import { ensureReactPeerDeps } from './ensure-react-peer-deps';
-import { mdxPlugin } from './plugins/mdx-plugin';
 
 async function webpack(
   webpackConfig: any = {},
@@ -179,8 +178,9 @@ export const addons: StorybookConfig['addons'] = [
 
 export const viteFinal: StorybookConfigVite['viteFinal'] = async (config, ...options) => {
   const { plugins = [] } = config;
+  const { mdxPlugin } = await import('./plugins/mdx-plugin');
 
-  plugins.push(await mdxPlugin(...options));
+  plugins.push(mdxPlugin(...options));
 
   return config;
 };

From fc7fc7f1a488538b9621f6c12c46e8a38a8e8d90 Mon Sep 17 00:00:00 2001
From: Bryan Thomas <49354825+bryanjtc@users.noreply.github.com>
Date: Thu, 14 Sep 2023 15:06:15 -0500
Subject: [PATCH 32/56] Replace types in viteFinal to fix error

---
 code/addons/docs/package.json  | 1 -
 code/addons/docs/src/preset.ts | 5 ++---
 code/yarn.lock                 | 1 -
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
index 535e1a3302d8..5bd40d570777 100644
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@@ -120,7 +120,6 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@storybook/builder-vite": "workspace:*",
     "react": "^16.14.0",
     "react-dom": "^16.8.0",
     "typescript": "~4.9.3",
diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
index 0d2f25bdd19b..22b5834c9e9a 100644
--- a/code/addons/docs/src/preset.ts
+++ b/code/addons/docs/src/preset.ts
@@ -7,7 +7,6 @@ import { dedent } from 'ts-dedent';
 import type { DocsOptions, Indexer, Options, StorybookConfig } from '@storybook/types';
 import type { CsfPluginOptions } from '@storybook/csf-plugin';
 import type { JSXOptions, CompileOptions } from '@storybook/mdx2-csf';
-import type { StorybookConfigVite } from '@storybook/builder-vite';
 import { global } from '@storybook/global';
 import { loadCsf } from '@storybook/csf-tools';
 import { logger } from '@storybook/node-logger';
@@ -176,11 +175,11 @@ export const addons: StorybookConfig['addons'] = [
   require.resolve('@storybook/react-dom-shim/dist/preset'),
 ];
 
-export const viteFinal: StorybookConfigVite['viteFinal'] = async (config, ...options) => {
+export const viteFinal = async (config: any, options: Options) => {
   const { plugins = [] } = config;
   const { mdxPlugin } = await import('./plugins/mdx-plugin');
 
-  plugins.push(mdxPlugin(...options));
+  plugins.push(mdxPlugin(options));
 
   return config;
 };
diff --git a/code/yarn.lock b/code/yarn.lock
index ac77c33181cd..54dd68750142 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -5907,7 +5907,6 @@ __metadata:
     "@mdx-js/react": ^2.1.5
     "@rollup/pluginutils": ^5.0.2
     "@storybook/blocks": "workspace:*"
-    "@storybook/builder-vite": "workspace:*"
     "@storybook/client-logger": "workspace:*"
     "@storybook/components": "workspace:*"
     "@storybook/csf-plugin": "workspace:*"

From f97552c39798fa09ab71a4bef3adb1e0ad3b8e3e Mon Sep 17 00:00:00 2001
From: chocoscoding <chocoscoding@gmail.com>
Date: Mon, 18 Sep 2023 07:34:29 +0100
Subject: [PATCH 33/56] (fix):Adjust the contrast ratio for focus and hover
 states to meet the minimum requirement of 3.1

---
 code/lib/theming/src/base.ts                        | 2 +-
 code/ui/manager/src/components/sidebar/Tree.tsx     | 1 +
 code/ui/manager/src/components/sidebar/TreeNode.tsx | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/code/lib/theming/src/base.ts b/code/lib/theming/src/base.ts
index 03157875c857..15e1c4e1b5be 100644
--- a/code/lib/theming/src/base.ts
+++ b/code/lib/theming/src/base.ts
@@ -48,7 +48,7 @@ export const background = {
   bar: color.lightest,
   content: color.lightest,
   gridCellSize: 10,
-  hoverable: transparentize(0.93, color.secondary), // hover state for items in a list
+  hoverable: transparentize(0.92, color.secondary), // hover state for items in a list
 
   // Notification, error, and warning backgrounds
   positive: '#E1FFD4',
diff --git a/code/ui/manager/src/components/sidebar/Tree.tsx b/code/ui/manager/src/components/sidebar/Tree.tsx
index dadff45d9988..3b7efe5a2e96 100644
--- a/code/ui/manager/src/components/sidebar/Tree.tsx
+++ b/code/ui/manager/src/components/sidebar/Tree.tsx
@@ -133,6 +133,7 @@ export const LeafNodeStyleWrapper = styled.div(({ theme }) => ({
   '&:hover, &:focus': {
     outline: 'none',
     background: theme.background.hoverable,
+    color: theme.color.lighter,
   },
   '&[data-selected="true"]': {
     color: theme.color.lightest,
diff --git a/code/ui/manager/src/components/sidebar/TreeNode.tsx b/code/ui/manager/src/components/sidebar/TreeNode.tsx
index dc837accee6d..0ba7cbd35a08 100644
--- a/code/ui/manager/src/components/sidebar/TreeNode.tsx
+++ b/code/ui/manager/src/components/sidebar/TreeNode.tsx
@@ -73,6 +73,7 @@ const BranchNode = styled.button<{
   background: 'transparent',
   '&:hover, &:focus': {
     background: theme.background.hoverable,
+    color: theme.color.lighter,
     outline: 'none',
   },
 }));

From 7758e8f5ff518ccc35d912b1719062156b5f1f7a Mon Sep 17 00:00:00 2001
From: Bryan Thomas <49354825+bryanjtc@users.noreply.github.com>
Date: Mon, 18 Sep 2023 07:49:38 -0500
Subject: [PATCH 34/56] Keep the previous providerImportSource value

---
 code/addons/docs/src/plugins/mdx-plugin.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/code/addons/docs/src/plugins/mdx-plugin.ts b/code/addons/docs/src/plugins/mdx-plugin.ts
index d49e86822eb2..82f754fd3cd8 100644
--- a/code/addons/docs/src/plugins/mdx-plugin.ts
+++ b/code/addons/docs/src/plugins/mdx-plugin.ts
@@ -3,6 +3,7 @@ import type { Plugin } from 'vite';
 import remarkSlug from 'remark-slug';
 import remarkExternalLinks from 'remark-external-links';
 import { createFilter } from '@rollup/pluginutils';
+import { dirname, join } from 'path';
 
 const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith('story.mdx');
 
@@ -33,7 +34,10 @@ export async function mdxPlugin(options: Options): Promise<Plugin> {
       const mdxLoaderOptions = await options.presets.apply('mdxLoaderOptions', {
         ...mdxPluginOptions,
         mdxCompileOptions: {
-          providerImportSource: require.resolve('@storybook/mdx2-csf'),
+          providerImportSource: join(
+            dirname(require.resolve('@storybook/addon-docs/package.json')),
+            '/dist/shims/mdx-react-shim'
+          ),
           ...mdxPluginOptions?.mdxCompileOptions,
           remarkPlugins: [remarkSlug, remarkExternalLinks].concat(
             mdxPluginOptions?.mdxCompileOptions?.remarkPlugins ?? []

From 0f5e6c1eb671bb2081b7b78fe417856fb4ebcd54 Mon Sep 17 00:00:00 2001
From: Bryan Thomas <49354825+bryanjtc@users.noreply.github.com>
Date: Tue, 19 Sep 2023 07:33:14 -0500
Subject: [PATCH 35/56] Move @rollup/pluginutils to devDependencies

---
 code/addons/docs/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
index 5bd40d570777..c9a396875f18 100644
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@@ -100,7 +100,6 @@
   "dependencies": {
     "@jest/transform": "^29.3.1",
     "@mdx-js/react": "^2.1.5",
-    "@rollup/pluginutils": "^5.0.2",
     "@storybook/blocks": "workspace:*",
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
@@ -120,6 +119,7 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
+    "@rollup/pluginutils": "^5.0.2",
     "react": "^16.14.0",
     "react-dom": "^16.8.0",
     "typescript": "~4.9.3",

From 927bdd98254b42b7317bf209b004128fdfe31f5a Mon Sep 17 00:00:00 2001
From: chocoscoding <chocoscoding@gmail.com>
Date: Tue, 19 Sep 2023 15:15:00 +0100
Subject: [PATCH 36/56] light mode error fix

---
 code/lib/theming/src/base.ts                        | 2 +-
 code/ui/manager/src/components/sidebar/Tree.tsx     | 1 -
 code/ui/manager/src/components/sidebar/TreeNode.tsx | 1 -
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/code/lib/theming/src/base.ts b/code/lib/theming/src/base.ts
index 15e1c4e1b5be..077dbef4e124 100644
--- a/code/lib/theming/src/base.ts
+++ b/code/lib/theming/src/base.ts
@@ -48,7 +48,7 @@ export const background = {
   bar: color.lightest,
   content: color.lightest,
   gridCellSize: 10,
-  hoverable: transparentize(0.92, color.secondary), // hover state for items in a list
+  hoverable: transparentize(0.52, color.secondary), // hover state for items in a list
 
   // Notification, error, and warning backgrounds
   positive: '#E1FFD4',
diff --git a/code/ui/manager/src/components/sidebar/Tree.tsx b/code/ui/manager/src/components/sidebar/Tree.tsx
index 3b7efe5a2e96..dadff45d9988 100644
--- a/code/ui/manager/src/components/sidebar/Tree.tsx
+++ b/code/ui/manager/src/components/sidebar/Tree.tsx
@@ -133,7 +133,6 @@ export const LeafNodeStyleWrapper = styled.div(({ theme }) => ({
   '&:hover, &:focus': {
     outline: 'none',
     background: theme.background.hoverable,
-    color: theme.color.lighter,
   },
   '&[data-selected="true"]': {
     color: theme.color.lightest,
diff --git a/code/ui/manager/src/components/sidebar/TreeNode.tsx b/code/ui/manager/src/components/sidebar/TreeNode.tsx
index 0ba7cbd35a08..dc837accee6d 100644
--- a/code/ui/manager/src/components/sidebar/TreeNode.tsx
+++ b/code/ui/manager/src/components/sidebar/TreeNode.tsx
@@ -73,7 +73,6 @@ const BranchNode = styled.button<{
   background: 'transparent',
   '&:hover, &:focus': {
     background: theme.background.hoverable,
-    color: theme.color.lighter,
     outline: 'none',
   },
 }));

From 8beddfa79dcc05233d2c989ba10dd6345676f9b3 Mon Sep 17 00:00:00 2001
From: chocoscoding <chocoscoding@gmail.com>
Date: Tue, 19 Sep 2023 15:36:34 +0100
Subject: [PATCH 37/56] hoverable color change

---
 code/lib/theming/src/base.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/lib/theming/src/base.ts b/code/lib/theming/src/base.ts
index 077dbef4e124..5f60c0e812df 100644
--- a/code/lib/theming/src/base.ts
+++ b/code/lib/theming/src/base.ts
@@ -48,7 +48,7 @@ export const background = {
   bar: color.lightest,
   content: color.lightest,
   gridCellSize: 10,
-  hoverable: transparentize(0.52, color.secondary), // hover state for items in a list
+  hoverable: transparentize(0.9, color.secondary), // hover state for items in a list
 
   // Notification, error, and warning backgrounds
   positive: '#E1FFD4',

From 5ef917a41c868485e64e86332d5b8bef3f1bf52a Mon Sep 17 00:00:00 2001
From: roottool <operation.versatile.roottool@gmail.com>
Date: Thu, 21 Sep 2023 14:56:40 +0000
Subject: [PATCH 38/56] feat: Convert from proposal plugins to transform
 plugins

---
 code/frameworks/nextjs/package.json           |  8 +--
 code/frameworks/nextjs/src/babel/preset.ts    |  8 +--
 .../src/argTypes/convert/convert.test.ts      |  2 +-
 .../react/src/docs/extractArgTypes.test.ts    |  2 +-
 code/yarn.lock                                | 57 +++----------------
 scripts/package.json                          |  2 +-
 scripts/yarn.lock                             | 16 +-----
 7 files changed, 22 insertions(+), 73 deletions(-)

diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json
index a2b64993a8e5..98d72bc63cf1 100644
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@@ -80,13 +80,13 @@
   },
   "dependencies": {
     "@babel/core": "^7.22.9",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-    "@babel/plugin-proposal-numeric-separator": "^7.18.6",
-    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-syntax-bigint": "^7.8.3",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-assertions": "^7.22.5",
+    "@babel/plugin-transform-class-properties": "^7.22.5",
+    "@babel/plugin-transform-export-namespace-from": "^7.22.11",
+    "@babel/plugin-transform-numeric-separator": "^7.22.11",
+    "@babel/plugin-transform-object-rest-spread": "^7.22.15",
     "@babel/plugin-transform-runtime": "^7.22.9",
     "@babel/preset-env": "^7.22.9",
     "@babel/preset-react": "^7.22.5",
diff --git a/code/frameworks/nextjs/src/babel/preset.ts b/code/frameworks/nextjs/src/babel/preset.ts
index 08a6c18e4312..46dddd1d1659 100644
--- a/code/frameworks/nextjs/src/babel/preset.ts
+++ b/code/frameworks/nextjs/src/babel/preset.ts
@@ -142,9 +142,9 @@ export default (api: any, options: NextBabelPresetOptions = {}): BabelPreset =>
       require('@babel/plugin-syntax-dynamic-import'),
       require('@babel/plugin-syntax-import-assertions'),
       require('./plugins/react-loadable-plugin'),
-      [require('@babel/plugin-proposal-class-properties'), options['class-properties'] || {}],
+      [require('@babel/plugin-transform-class-properties'), options['class-properties'] || {}],
       [
-        require('@babel/plugin-proposal-object-rest-spread'),
+        require('@babel/plugin-transform-object-rest-spread'),
         {
           useBuiltIns: true,
         },
@@ -172,8 +172,8 @@ export default (api: any, options: NextBabelPresetOptions = {}): BabelPreset =>
       isServer && require('@babel/plugin-syntax-bigint'),
       // Always compile numeric separator because the resulting number is
       // smaller.
-      require('@babel/plugin-proposal-numeric-separator'),
-      require('@babel/plugin-proposal-export-namespace-from'),
+      require('@babel/plugin-transform-numeric-separator'),
+      require('@babel/plugin-transform-export-namespace-from'),
     ].filter(Boolean),
   };
 };
diff --git a/code/lib/docs-tools/src/argTypes/convert/convert.test.ts b/code/lib/docs-tools/src/argTypes/convert/convert.test.ts
index 5b7b15ec6c63..51ad20482478 100644
--- a/code/lib/docs-tools/src/argTypes/convert/convert.test.ts
+++ b/code/lib/docs-tools/src/argTypes/convert/convert.test.ts
@@ -812,7 +812,7 @@ const transformToModule = (inputCode: string) => {
 const annotateWithDocgen = (inputCode: string, filename: string) => {
   const options = {
     presets: ['@babel/typescript', '@babel/react'],
-    plugins: ['babel-plugin-react-docgen', '@babel/plugin-proposal-class-properties'],
+    plugins: ['babel-plugin-react-docgen', '@babel/plugin-transform-class-properties'],
     babelrc: false,
     filename,
   };
diff --git a/code/renderers/react/src/docs/extractArgTypes.test.ts b/code/renderers/react/src/docs/extractArgTypes.test.ts
index 31ea19fd754c..f96a8722e9d9 100644
--- a/code/renderers/react/src/docs/extractArgTypes.test.ts
+++ b/code/renderers/react/src/docs/extractArgTypes.test.ts
@@ -37,7 +37,7 @@ const transformToModule = (inputCode: string) => {
 const annotateWithDocgen = (inputPath: string) => {
   const options = {
     presets: ['@babel/typescript', '@babel/react'],
-    plugins: ['babel-plugin-react-docgen', '@babel/plugin-proposal-class-properties'],
+    plugins: ['babel-plugin-react-docgen', '@babel/plugin-transform-class-properties'],
     babelrc: false,
   };
   const { code } = transformFileSync(inputPath, options) || {};
diff --git a/code/yarn.lock b/code/yarn.lock
index c347c91c99c8..2aad85e88b48 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -414,7 +414,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/compat-data@npm:^7.20.5, @babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.22.9":
+"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.22.9":
   version: 7.22.9
   resolution: "@babel/compat-data@npm:7.22.9"
   checksum: 1334264b041f8ad4e33036326970c9c26754eb5c04b3af6c223fe6da988cbb8a8542b5526f49ec1ac488210d2f710484a0e4bcd30256294ae3f261d0141febad
@@ -555,7 +555,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-compilation-targets@npm:^7.12.0, @babel/helper-compilation-targets@npm:^7.20.7, @babel/helper-compilation-targets@npm:^7.22.15, @babel/helper-compilation-targets@npm:^7.22.5, @babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.22.9":
+"@babel/helper-compilation-targets@npm:^7.12.0, @babel/helper-compilation-targets@npm:^7.22.15, @babel/helper-compilation-targets@npm:^7.22.5, @babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.22.9":
   version: 7.22.15
   resolution: "@babel/helper-compilation-targets@npm:7.22.15"
   dependencies:
@@ -683,7 +683,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.18.9, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3":
+"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3":
   version: 7.22.5
   resolution: "@babel/helper-plugin-utils@npm:7.22.5"
   checksum: d2c4bfe2fa91058bcdee4f4e57a3f4933aed7af843acfd169cd6179fab8d13c1d636474ecabb2af107dc77462c7e893199aa26632bac1c6d7e025a17cbb9d20d
@@ -844,7 +844,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-class-properties@npm:^7.13.0, @babel/plugin-proposal-class-properties@npm:^7.16.5, @babel/plugin-proposal-class-properties@npm:^7.18.6":
+"@babel/plugin-proposal-class-properties@npm:^7.13.0, @babel/plugin-proposal-class-properties@npm:^7.16.5":
   version: 7.18.6
   resolution: "@babel/plugin-proposal-class-properties@npm:7.18.6"
   dependencies:
@@ -871,18 +871,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-export-namespace-from@npm:^7.18.9":
-  version: 7.18.9
-  resolution: "@babel/plugin-proposal-export-namespace-from@npm:7.18.9"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.18.9
-    "@babel/plugin-syntax-export-namespace-from": ^7.8.3
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: b90346bd3628ebd44138d0628a5aba1e6b11748893fb48e87008cac30f3bc7cd3161362e49433156737350318174164436357a66fbbfdbe952606b460bd8a0e4
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-proposal-nullish-coalescing-operator@npm:^7.13.8":
   version: 7.18.6
   resolution: "@babel/plugin-proposal-nullish-coalescing-operator@npm:7.18.6"
@@ -895,33 +883,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-numeric-separator@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/plugin-proposal-numeric-separator@npm:7.18.6"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.18.6
-    "@babel/plugin-syntax-numeric-separator": ^7.10.4
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: a83a65c6ec0d2293d830e9db61406d246f22d8ea03583d68460cb1b6330c6699320acce1b45f66ba3c357830720e49267e3d99f95088be457c66e6450fbfe3fa
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-proposal-object-rest-spread@npm:^7.20.7":
-  version: 7.20.7
-  resolution: "@babel/plugin-proposal-object-rest-spread@npm:7.20.7"
-  dependencies:
-    "@babel/compat-data": ^7.20.5
-    "@babel/helper-compilation-targets": ^7.20.7
-    "@babel/helper-plugin-utils": ^7.20.2
-    "@babel/plugin-syntax-object-rest-spread": ^7.8.3
-    "@babel/plugin-transform-parameters": ^7.20.7
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: b9818749bb49d8095df64c45db682448d04743d96722984cbfd375733b2585c26d807f84b4fdb28474f2d614be6a6ffe3d96ffb121840e9e5345b2ccc0438bd8
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-proposal-optional-chaining@npm:^7.13.12":
   version: 7.21.0
   resolution: "@babel/plugin-proposal-optional-chaining@npm:7.21.0"
@@ -1665,7 +1626,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-parameters@npm:^7.20.7, @babel/plugin-transform-parameters@npm:^7.22.15, @babel/plugin-transform-parameters@npm:^7.22.5":
+"@babel/plugin-transform-parameters@npm:^7.22.15, @babel/plugin-transform-parameters@npm:^7.22.5":
   version: 7.22.15
   resolution: "@babel/plugin-transform-parameters@npm:7.22.15"
   dependencies:
@@ -7284,13 +7245,13 @@ __metadata:
   resolution: "@storybook/nextjs@workspace:frameworks/nextjs"
   dependencies:
     "@babel/core": ^7.22.9
-    "@babel/plugin-proposal-class-properties": ^7.18.6
-    "@babel/plugin-proposal-export-namespace-from": ^7.18.9
-    "@babel/plugin-proposal-numeric-separator": ^7.18.6
-    "@babel/plugin-proposal-object-rest-spread": ^7.20.7
     "@babel/plugin-syntax-bigint": ^7.8.3
     "@babel/plugin-syntax-dynamic-import": ^7.8.3
     "@babel/plugin-syntax-import-assertions": ^7.22.5
+    "@babel/plugin-transform-class-properties": ^7.22.5
+    "@babel/plugin-transform-export-namespace-from": ^7.22.11
+    "@babel/plugin-transform-numeric-separator": ^7.22.11
+    "@babel/plugin-transform-object-rest-spread": ^7.22.15
     "@babel/plugin-transform-runtime": ^7.22.9
     "@babel/preset-env": ^7.22.9
     "@babel/preset-react": ^7.22.5
diff --git a/scripts/package.json b/scripts/package.json
index 906bb2b95926..8a1ace601a4d 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -58,12 +58,12 @@
   "dependencies": {
     "@actions/core": "^1.10.0",
     "@babel/core": "^7.22.0",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-decorators": "^7.22.0",
     "@babel/plugin-syntax-class-properties": "^7.12.13",
     "@babel/plugin-syntax-decorators": "^7.22.0",
     "@babel/plugin-syntax-jsx": "^7.21.0",
     "@babel/plugin-syntax-typescript": "^7.21.0",
+    "@babel/plugin-transform-class-properties": "^7.22.5",
     "@babel/preset-env": "^7.22.0",
     "@babel/preset-react": "^7.22.0",
     "@babel/preset-typescript": "^7.21.0",
diff --git a/scripts/yarn.lock b/scripts/yarn.lock
index ee273eaf2d45..ee865b1b5b66 100644
--- a/scripts/yarn.lock
+++ b/scripts/yarn.lock
@@ -131,7 +131,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.22.11, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.22.5":
+"@babel/helper-create-class-features-plugin@npm:^7.22.11, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.22.5":
   version: 7.22.15
   resolution: "@babel/helper-create-class-features-plugin@npm:7.22.15"
   dependencies:
@@ -393,18 +393,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-class-properties@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/plugin-proposal-class-properties@npm:7.18.6"
-  dependencies:
-    "@babel/helper-create-class-features-plugin": ^7.18.6
-    "@babel/helper-plugin-utils": ^7.18.6
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: d5172ac6c9948cdfc387e94f3493ad86cb04035cf7433f86b5d358270b1b9752dc25e176db0c5d65892a246aca7bdb4636672e15626d7a7de4bc0bd0040168d9
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-proposal-decorators@npm:^7.22.0":
   version: 7.22.15
   resolution: "@babel/plugin-proposal-decorators@npm:7.22.15"
@@ -2891,12 +2879,12 @@ __metadata:
   dependencies:
     "@actions/core": ^1.10.0
     "@babel/core": ^7.22.0
-    "@babel/plugin-proposal-class-properties": ^7.18.6
     "@babel/plugin-proposal-decorators": ^7.22.0
     "@babel/plugin-syntax-class-properties": ^7.12.13
     "@babel/plugin-syntax-decorators": ^7.22.0
     "@babel/plugin-syntax-jsx": ^7.21.0
     "@babel/plugin-syntax-typescript": ^7.21.0
+    "@babel/plugin-transform-class-properties": ^7.22.5
     "@babel/preset-env": ^7.22.0
     "@babel/preset-react": ^7.22.0
     "@babel/preset-typescript": ^7.21.0

From 25e38c0106bbf8d85e8070eabba64b231fef9642 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Fri, 22 Sep 2023 10:29:58 +0200
Subject: [PATCH 39/56] add an await when setting state

---
 code/lib/manager-api/src/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/lib/manager-api/src/index.tsx b/code/lib/manager-api/src/index.tsx
index bb7fe0e5ec6c..3b0a21bdcb94 100644
--- a/code/lib/manager-api/src/index.tsx
+++ b/code/lib/manager-api/src/index.tsx
@@ -411,8 +411,8 @@ export function useSharedState<S>(stateId: string, defaultState?: S) {
     }
   });
 
-  const setState = (s: S | API_StateMerger<S>, options?: Options) => {
-    const result = api.setAddonState<S>(stateId, s, options);
+  const setState = async (s: S | API_StateMerger<S>, options?: Options) => {
+    const result = await api.setAddonState<S>(stateId, s, options);
     STORYBOOK_ADDON_STATE[stateId] = result;
     return result;
   };

From df96c9df8f1999ed530d193f89c9e184d110d468 Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Fri, 22 Sep 2023 12:22:49 +0000
Subject: [PATCH 40/56] Update CHANGELOG.md for v7.4.4 [skip ci]

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 966bf5ce9a52..febe34319967 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 7.4.4
+
+- Core: Fix Promise cycle bug in useSharedState - [#24268](https://github.com/storybookjs/storybook/pull/24268), thanks [@ndelangen](https://github.com/ndelangen)!
+- Manager: Fix useAddonState when using a setter function - [#24237](https://github.com/storybookjs/storybook/pull/24237), thanks [@ndelangen](https://github.com/ndelangen)!
+
 ## 7.4.3
 
 - CLI: Fix `sb add` adding duplicative entries - [#24229](https://github.com/storybookjs/storybook/pull/24229), thanks [@ndelangen](https://github.com/ndelangen)!

From 2fa0afaec1245f72f0b70b1e443aa6cf4a904561 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Fri, 22 Sep 2023 15:31:54 +0200
Subject: [PATCH 41/56] cancel an action when the PR count is 0

---
 .github/workflows/prepare-patch-release.yml | 9 +++++++++
 scripts/release/pick-patches.ts             | 4 ++++
 2 files changed, 13 insertions(+)

diff --git a/.github/workflows/prepare-patch-release.yml b/.github/workflows/prepare-patch-release.yml
index e4f8e38df502..237d3f87e186 100644
--- a/.github/workflows/prepare-patch-release.yml
+++ b/.github/workflows/prepare-patch-release.yml
@@ -88,6 +88,15 @@ jobs:
           git config --global user.email '32066757+storybook-bot@users.noreply.github.com'
           yarn release:pick-patches
 
+      - name: Cancel when 0 picked
+        if: steps.pick-patches.outputs.pr-count == '0'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        # From https://stackoverflow.com/a/75809743
+        run: |
+          gh run cancel ${{ github.run_id }}
+          gh run watch ${{ github.run_id }}
+
       - name: Bump version deferred
         id: bump-version
         if: steps.unreleased-changes.outputs.has-changes-to-release == 'true'
diff --git a/scripts/release/pick-patches.ts b/scripts/release/pick-patches.ts
index eab1743dcc7b..ef31087ef976 100644
--- a/scripts/release/pick-patches.ts
+++ b/scripts/release/pick-patches.ts
@@ -48,6 +48,10 @@ export const run = async (_: unknown) => {
     spinner.warn('No PRs found.');
   }
 
+  if (process.env.GITHUB_ACTIONS === 'true') {
+    setOutput('pr-count', JSON.stringify(patchPRs.length));
+  }
+
   const failedCherryPicks: string[] = [];
 
   // eslint-disable-next-line no-restricted-syntax

From 09c793b2c982c761f7f5dcf6ac9ea3ab14bc9eb1 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Sun, 24 Sep 2023 19:32:23 +0200
Subject: [PATCH 42/56] add missing dependency in useEffect hook

this was causing browsers to crash
---
 code/lib/manager-api/src/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/code/lib/manager-api/src/index.tsx b/code/lib/manager-api/src/index.tsx
index 3b0a21bdcb94..951dc494a93a 100644
--- a/code/lib/manager-api/src/index.tsx
+++ b/code/lib/manager-api/src/index.tsx
@@ -397,7 +397,6 @@ export function useSharedState<S>(stateId: string, defaultState?: S) {
     existingState,
     STORYBOOK_ADDON_STATE[stateId] ? STORYBOOK_ADDON_STATE[stateId] : defaultState
   );
-
   let quicksync = false;
 
   if (state === defaultState && defaultState !== undefined) {
@@ -409,7 +408,7 @@ export function useSharedState<S>(stateId: string, defaultState?: S) {
     if (quicksync) {
       api.setAddonState<S>(stateId, defaultState);
     }
-  });
+  }, [quicksync]);
 
   const setState = async (s: S | API_StateMerger<S>, options?: Options) => {
     const result = await api.setAddonState<S>(stateId, s, options);

From 12be604837545e73ada1777924f5ce4e77629ae7 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Sun, 24 Sep 2023 11:12:31 -0700
Subject: [PATCH 43/56] Revert "Build: Cancel when the PR count is 0"

---
 .github/workflows/prepare-patch-release.yml | 9 ---------
 scripts/release/pick-patches.ts             | 4 ----
 2 files changed, 13 deletions(-)

diff --git a/.github/workflows/prepare-patch-release.yml b/.github/workflows/prepare-patch-release.yml
index 237d3f87e186..e4f8e38df502 100644
--- a/.github/workflows/prepare-patch-release.yml
+++ b/.github/workflows/prepare-patch-release.yml
@@ -88,15 +88,6 @@ jobs:
           git config --global user.email '32066757+storybook-bot@users.noreply.github.com'
           yarn release:pick-patches
 
-      - name: Cancel when 0 picked
-        if: steps.pick-patches.outputs.pr-count == '0'
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        # From https://stackoverflow.com/a/75809743
-        run: |
-          gh run cancel ${{ github.run_id }}
-          gh run watch ${{ github.run_id }}
-
       - name: Bump version deferred
         id: bump-version
         if: steps.unreleased-changes.outputs.has-changes-to-release == 'true'
diff --git a/scripts/release/pick-patches.ts b/scripts/release/pick-patches.ts
index ef31087ef976..eab1743dcc7b 100644
--- a/scripts/release/pick-patches.ts
+++ b/scripts/release/pick-patches.ts
@@ -48,10 +48,6 @@ export const run = async (_: unknown) => {
     spinner.warn('No PRs found.');
   }
 
-  if (process.env.GITHUB_ACTIONS === 'true') {
-    setOutput('pr-count', JSON.stringify(patchPRs.length));
-  }
-
   const failedCherryPicks: string[] = [];
 
   // eslint-disable-next-line no-restricted-syntax

From b61d71b6dee8e54a394781fce53fc97208bde678 Mon Sep 17 00:00:00 2001
From: Rohan Poojary <47334631+RohanPoojary1107@users.noreply.github.com>
Date: Sun, 24 Sep 2023 20:42:06 +0100
Subject: [PATCH 44/56] Update storybook-addons-api-usechannel.js.mdx

Add missing import for `useChannel` hook
---
 docs/snippets/common/storybook-addons-api-usechannel.js.mdx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/snippets/common/storybook-addons-api-usechannel.js.mdx b/docs/snippets/common/storybook-addons-api-usechannel.js.mdx
index 0d66a5955350..dd6d238d1c48 100644
--- a/docs/snippets/common/storybook-addons-api-usechannel.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-usechannel.js.mdx
@@ -7,6 +7,8 @@ import { AddonPanel, Button } from '@storybook/components';
 
 import { STORY_CHANGED } from '@storybook/core-events';
 
+import { useChannel } from '@storybook/manager-api';
+
 export const Panel = () => {
   // Creates a Storybook API channel and subscribes to the STORY_CHANGED event
   const emit = useChannel({

From a3cdabb025524822807318bc137f69be006596c2 Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Sun, 24 Sep 2023 19:42:56 +0000
Subject: [PATCH 45/56] Update CHANGELOG.md for v7.4.5 [skip ci]

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index febe34319967..65162adc174c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 7.4.5
+
+- UI: Fix infinite hook call causing browsers to freeze - [#24291](https://github.com/storybookjs/storybook/pull/24291), thanks [@yannbf](https://github.com/yannbf)!
+
 ## 7.4.4
 
 - Core: Fix Promise cycle bug in useSharedState - [#24268](https://github.com/storybookjs/storybook/pull/24268), thanks [@ndelangen](https://github.com/ndelangen)!

From bbe075a18ae07f15d67cede6fc048a8192498d6e Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Mon, 25 Sep 2023 05:44:59 -0500
Subject: [PATCH 46/56] deprecate storyIndexers on usage

---
 code/lib/core-server/src/utils/StoryIndexGenerator.ts | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
index 418ba796d375..0f847b8917a1 100644
--- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts
+++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
@@ -119,12 +119,6 @@ export class StoryIndexGenerator {
     public readonly options: StoryIndexGeneratorOptions
   ) {
     this.specifierToCache = new Map();
-    if (options.storyIndexers.length > 1) {
-      deprecate(
-        dedent`'storyIndexers' is deprecated, please use 'experimental_indexers' instead.
-        - Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storyindexers-is-replaced-with-experimental_indexers`
-      );
-    }
   }
 
   async initialize() {
@@ -298,6 +292,10 @@ export class StoryIndexGenerator {
     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 },

From 0b7f436ac01c54342a32c5f883f57feec6a377e6 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Mon, 25 Sep 2023 05:54:50 -0500
Subject: [PATCH 47/56] add docs link to migration

---
 MIGRATION.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index b529325aac69..acb9780812d8 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -325,13 +325,13 @@ npx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx
 
 They won't do a perfect migration so we recommend that you manually go through each file afterwards.
 
-Alternatively you can build your own `storiesOf` implementation by leveraging the new (experimental) indexer API ([documentation](TODO), [migration](#storyindexers-is-replaced-with-experimental_indexers)). A proof of concept of such an implementation can be seen in [this StackBlitz demo](https://stackblitz.com/edit/github-h2rgfk?file=README.md). See the demo's `README.md` for a deeper explanation of the implementation.
+Alternatively you can build your own `storiesOf` implementation by leveraging the new (experimental) indexer API ([documentation](https://storybook.js.org/docs/react/api/main-config-indexers), [migration](#storyindexers-is-replaced-with-experimental_indexers)). A proof of concept of such an implementation can be seen in [this StackBlitz demo](https://stackblitz.com/edit/github-h2rgfk?file=README.md). See the demo's `README.md` for a deeper explanation of the implementation.
 
 #### `storyIndexers` is replaced with `experimental_indexers`
 
 Defining custom indexers for stories has become a more official - yet still experimental - API which is now configured at `experimental_indexers` instead of `storyIndexers` in `main.ts`. `storyIndexers` has been deprecated and will be fully removed in version 8.0.0.
 
-The new experimental indexers are documented [here](TODO!!!). The most notable change from `storyIndexers` is that the indexer must now return a list of [`IndexInput`](https://github.com/storybookjs/storybook/blob/next/code/lib/types/src/modules/indexer.ts#L104-L148) instead of `CsfFile`. It's possible to construct an `IndexInput` from a `CsfFile` using the `CsfFile.indexInputs` getter.
+The new experimental indexers are documented [here](https://storybook.js.org/docs/react/api/main-config-indexers). The most notable change from `storyIndexers` is that the indexer must now return a list of [`IndexInput`](https://github.com/storybookjs/storybook/blob/next/code/lib/types/src/modules/indexer.ts#L104-L148) instead of `CsfFile`. It's possible to construct an `IndexInput` from a `CsfFile` using the `CsfFile.indexInputs` getter.
 
 That means you can convert an existing story indexer like this:
 
@@ -1114,7 +1114,7 @@ Starting in 7.0, we drop support for Angular < 14
 
 _Has automigration_
 
-In Storybook 6.4 we deprecated calling Storybook directly (e.g. `npm run storybook`) for Angular. In Storybook 7.0, we've removed it entirely. Instead, you have to set up the Storybook builder in your `angular.json` and execute `ng run <your-project>:storybook` to start Storybook. 
+In Storybook 6.4 we deprecated calling Storybook directly (e.g. `npm run storybook`) for Angular. In Storybook 7.0, we've removed it entirely. Instead, you have to set up the Storybook builder in your `angular.json` and execute `ng run <your-project>:storybook` to start Storybook.
 
 You can run `npx storybook@next automigrate` to automatically fix your configuration, or visit https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular/README.md#how-do-i-migrate-to-an-angular-storybook-builder for instructions on how to set up Storybook for Angular manually.
 

From 130154b338667957d561fac45de9d9f2c711c6a4 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Mon, 25 Sep 2023 06:00:49 -0500
Subject: [PATCH 48/56] fix migration title

---
 MIGRATION.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index acb9780812d8..767ca41326d2 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,6 +1,6 @@
 <h1>Migration</h1>
 
-- [From version 7.3.0 to 7.4.0](#from-version-730-to-740)
+- [From version 7.4.0 to 7.5.0](#from-version-740-to-750)
   - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
   - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
 - [From version 7.0.0 to 7.2.0](#from-version-700-to-720)
@@ -305,7 +305,7 @@
   - [Packages renaming](#packages-renaming)
   - [Deprecated embedded addons](#deprecated-embedded-addons)
 
-## From version 7.3.0 to 7.4.0
+## From version 7.4.0 to 7.5.0
 
 #### `storyStoreV6` and `storiesOf` is deprecated
 

From 7e6b56a40559c7cdbf6563d75dca7078b5e13853 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Mon, 25 Sep 2023 06:14:24 -0500
Subject: [PATCH 49/56] add migration note about support both versions

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

diff --git a/MIGRATION.md b/MIGRATION.md
index 767ca41326d2..1708f26a3dbe 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -369,6 +369,8 @@ export default {
 };
 ```
 
+As an addon author you can support previous versions of Storybook by setting both `storyIndexers` and `indexers_experimental`, without triggering the deprecation warning.
+
 ## From version 7.0.0 to 7.2.0
 
 #### Addon API is more type-strict

From 5d07fb4c9bae60a496ec74996ae8486fe52ee07d Mon Sep 17 00:00:00 2001
From: Jacob <snowcave@gmail.com>
Date: Wed, 27 Sep 2023 20:14:25 -0700
Subject: [PATCH 50/56] Updates snippet to reference an existing import

---
 docs/snippets/common/storybook-auto-docs-mdx-file.mdx.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/snippets/common/storybook-auto-docs-mdx-file.mdx.mdx b/docs/snippets/common/storybook-auto-docs-mdx-file.mdx.mdx
index 835b3a41372e..499b7f22a570 100644
--- a/docs/snippets/common/storybook-auto-docs-mdx-file.mdx.mdx
+++ b/docs/snippets/common/storybook-auto-docs-mdx-file.mdx.mdx
@@ -19,7 +19,7 @@ It's often used to apply consistent positioning for content across pages in an a
 
 ## Usage
 
-<Canvas of={ButtonStories.Basic} />
+<Canvas of={PageStories.Basic} />
 
 # List
 

From 128c71aca35a4d8c2ef6466dc5ef0107fdf0459e Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Sat, 30 Sep 2023 17:25:53 +0100
Subject: [PATCH 51/56] Docs: Adds theming video

---
 docs/configure/theming.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/configure/theming.md b/docs/configure/theming.md
index 5650ddc9899a..15828905eaab 100644
--- a/docs/configure/theming.md
+++ b/docs/configure/theming.md
@@ -2,6 +2,8 @@
 title: 'Theming'
 ---
 
+<YouTubeCallout id="x2nGXHAKOrE" title="Storybook Theming" />
+
 Storybook is theme-able using a lightweight theming API.
 
 ## Global theming

From 855d053001508b8542e88a490b8d55d67d7538b7 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisaadi@gmail.com>
Date: Mon, 2 Oct 2023 01:47:04 +0300
Subject: [PATCH 52/56] docs: fix import path

---
 docs/snippets/common/storybook-addon-panel-initial.js.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/snippets/common/storybook-addon-panel-initial.js.mdx b/docs/snippets/common/storybook-addon-panel-initial.js.mdx
index 707e8bb199a7..f097d264461a 100644
--- a/docs/snippets/common/storybook-addon-panel-initial.js.mdx
+++ b/docs/snippets/common/storybook-addon-panel-initial.js.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { addons, types } from '@storybook/preview-api';
+import { addons, types } from '@storybook/manager-api';
 
 import { AddonPanel } from '@storybook/components';
 

From 6ee8dcadba9c005ebfb368195d147b4ca67c949c Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 3 Oct 2023 09:11:40 +0200
Subject: [PATCH 53/56] Fix Nextjs project detection

---
 .github/workflows/generate-sandboxes-next.yml | 2 +-
 code/lib/cli/src/project_types.ts             | 9 +--------
 scripts/sandbox/generate.ts                   | 4 ++++
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/.github/workflows/generate-sandboxes-next.yml b/.github/workflows/generate-sandboxes-next.yml
index f6ab2f7c822f..c20f5491ef30 100644
--- a/.github/workflows/generate-sandboxes-next.yml
+++ b/.github/workflows/generate-sandboxes-next.yml
@@ -43,7 +43,7 @@ jobs:
         run: yarn wait-on http://localhost:6001
         working-directory: ./code
       - name: Generate
-        run: yarn generate-sandboxes --local-registry --exclude=angular-cli/prerelease
+        run: yarn generate-sandboxes --local-registry --exclude=angular-cli/prerelease --debug
         working-directory: ./code
       - name: Publish
         run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=next
diff --git a/code/lib/cli/src/project_types.ts b/code/lib/cli/src/project_types.ts
index 25c058dee818..05c64b402423 100644
--- a/code/lib/cli/src/project_types.ts
+++ b/code/lib/cli/src/project_types.ts
@@ -5,11 +5,6 @@ function ltMajor(versionRange: string, major: number) {
   return validRange(versionRange) && minVersion(versionRange).major < major;
 }
 
-function gtMajor(versionRange: string, major: number) {
-  // Uses validRange to avoid a throw from minVersion if an invalid range gets passed
-  return validRange(versionRange) && minVersion(versionRange).major > major;
-}
-
 function eqMajor(versionRange: string, major: number) {
   // Uses validRange to avoid a throw from minVersion if an invalid range gets passed
   return validRange(versionRange) && minVersion(versionRange).major === major;
@@ -162,9 +157,7 @@ export const supportedTemplates: TemplateConfiguration[] = [
   },
   {
     preset: ProjectType.NEXTJS,
-    dependencies: {
-      next: (versionRange) => eqMajor(versionRange, 9) || gtMajor(versionRange, 9),
-    },
+    dependencies: ['next'],
     matcherFunction: ({ dependencies }) => {
       return dependencies.every(Boolean);
     },
diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts
index 0e477b1a6220..22a4eccf4d14 100755
--- a/scripts/sandbox/generate.ts
+++ b/scripts/sandbox/generate.ts
@@ -125,6 +125,10 @@ const runGenerators = async (
   localRegistry = true,
   debug = false
 ) => {
+  if (debug) {
+    console.log('Debug mode enabled. Verbose logs will be printed to the console.');
+  }
+
   console.log(`🤹‍♂️ Generating sandboxes with a concurrency of ${maxConcurrentTasks}`);
 
   const limit = pLimit(maxConcurrentTasks);

From f83a01b9101bc4be978beb2a4b5d1019b19e4340 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Tue, 3 Oct 2023 11:10:39 +0200
Subject: [PATCH 54/56] move from serve-favicon to a custom route to support
 svg

---
 code/lib/core-server/package.json             |  2 -
 .../core-server/src/utils/server-statics.ts   |  8 ++--
 code/yarn.lock                                | 38 -------------------
 3 files changed, 4 insertions(+), 44 deletions(-)

diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json
index 8c10b00e73ed..c249bc634c35 100644
--- a/code/lib/core-server/package.json
+++ b/code/lib/core-server/package.json
@@ -94,7 +94,6 @@
     "prompts": "^2.4.0",
     "read-pkg-up": "^7.0.1",
     "semver": "^7.3.7",
-    "serve-favicon": "^2.5.0",
     "telejson": "^7.2.0",
     "tiny-invariant": "^1.3.1",
     "ts-dedent": "^2.0.0",
@@ -108,7 +107,6 @@
     "@types/compression": "^1.7.0",
     "@types/ip": "^1.1.0",
     "@types/node-fetch": "^2.5.7",
-    "@types/serve-favicon": "^2.5.2",
     "@types/ws": "^8",
     "boxen": "^5.1.2",
     "jest-os-detection": "^1.3.1",
diff --git a/code/lib/core-server/src/utils/server-statics.ts b/code/lib/core-server/src/utils/server-statics.ts
index b2d5a5e3cbce..19d569cfcc06 100644
--- a/code/lib/core-server/src/utils/server-statics.ts
+++ b/code/lib/core-server/src/utils/server-statics.ts
@@ -3,16 +3,16 @@ import type { Options, StorybookConfig } from '@storybook/types';
 import { getDirectoryFromWorkingDir } from '@storybook/core-common';
 import { ConflictingStaticDirConfigError } from '@storybook/core-events/server-errors';
 import chalk from 'chalk';
+import type { Router } from 'express';
 import express from 'express';
 import { pathExists } from 'fs-extra';
-import path from 'path';
-import favicon from 'serve-favicon';
+import path, { basename } from 'path';
 import isEqual from 'lodash/isEqual.js';
 
 import { dedent } from 'ts-dedent';
 import { defaultStaticDirs } from './constants';
 
-export async function useStatics(router: any, options: Options) {
+export async function useStatics(router: Router, options: Options) {
   const staticDirs =
     (await options.presets.apply<StorybookConfig['staticDirs']>('staticDirs')) ?? [];
   const faviconPath = await options.presets.apply<string>('favicon');
@@ -54,7 +54,7 @@ export async function useStatics(router: any, options: Options) {
     );
   }
 
-  router.use(favicon(faviconPath));
+  router.get(`/${basename(faviconPath)}`, (req, res) => res.sendFile(faviconPath));
 }
 
 export const parseStaticDir = async (arg: string) => {
diff --git a/code/yarn.lock b/code/yarn.lock
index 704c48e55acf..af6301afc76b 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6853,7 +6853,6 @@ __metadata:
     "@types/node-fetch": ^2.5.7
     "@types/pretty-hrtime": ^1.0.0
     "@types/semver": ^7.3.4
-    "@types/serve-favicon": ^2.5.2
     "@types/ws": ^8
     better-opn: ^3.0.2
     boxen: ^5.1.2
@@ -6874,7 +6873,6 @@ __metadata:
     prompts: ^2.4.0
     read-pkg-up: ^7.0.1
     semver: ^7.3.7
-    serve-favicon: ^2.5.0
     slash: ^5.0.0
     telejson: ^7.2.0
     tiny-invariant: ^1.3.1
@@ -9645,15 +9643,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/serve-favicon@npm:^2.5.2":
-  version: 2.5.4
-  resolution: "@types/serve-favicon@npm:2.5.4"
-  dependencies:
-    "@types/express": "*"
-  checksum: 60bb648eff8bba7f589e9a2027879c39c137c96e1afafb6a09cb220477c1ebe74c3ce4293c52724592f04e3278950b82741f449c8517a432c163107333a0d6b8
-  languageName: node
-  linkType: hard
-
 "@types/serve-index@npm:^1.9.1":
   version: 1.9.1
   resolution: "@types/serve-index@npm:1.9.1"
@@ -23671,13 +23660,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ms@npm:2.1.1":
-  version: 2.1.1
-  resolution: "ms@npm:2.1.1"
-  checksum: 056140c631e740369fa21142417aba1bd629ab912334715216c666eb681c8f015c622dd4e38bc1d836b30852b05641331661703af13a0397eb0ca420fc1e75d9
-  languageName: node
-  linkType: hard
-
 "ms@npm:2.1.2":
   version: 2.1.2
   resolution: "ms@npm:2.1.2"
@@ -28475,13 +28457,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safe-buffer@npm:5.1.1":
-  version: 5.1.1
-  resolution: "safe-buffer@npm:5.1.1"
-  checksum: 1c233bd105deeba3c9a8911ed4ec24ba45adbb51fec02f7944a10a202c38e3df4ef2b524bdeb55f2e4f8c77c13b2959e2e2e6022e5d99acdd70633b5f7e138cf
-  languageName: node
-  linkType: hard
-
 "safe-buffer@npm:5.1.2, safe-buffer@npm:~5.1.0, safe-buffer@npm:~5.1.1":
   version: 5.1.2
   resolution: "safe-buffer@npm:5.1.2"
@@ -28790,19 +28765,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"serve-favicon@npm:^2.5.0":
-  version: 2.5.0
-  resolution: "serve-favicon@npm:2.5.0"
-  dependencies:
-    etag: ~1.8.1
-    fresh: 0.5.2
-    ms: 2.1.1
-    parseurl: ~1.3.2
-    safe-buffer: 5.1.1
-  checksum: 7244ced3c46f8dfde591dc801f1e21ebc8fa07c4870cbbaee3ce37104b3aad32858e674e251a8ed4837867ea0dd67cb734b485ae5a7b0895cb6022f8b8c79303
-  languageName: node
-  linkType: hard
-
 "serve-index@npm:^1.9.1":
   version: 1.9.1
   resolution: "serve-index@npm:1.9.1"

From bd3abf2a48dae9e4dcac838770efb0f21cee63e7 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Tue, 3 Oct 2023 12:25:15 +0200
Subject: [PATCH 55/56] disable Angular 15 sandbox in CI

---
 .circleci/config.yml                  | 20 ++++++++++----------
 code/lib/cli/src/sandbox-templates.ts |  2 +-
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 617cdac42c28..ee9dee76c725 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -555,19 +555,19 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 21
+          parallelism: 20
           requires:
             - build
       - build-sandboxes:
-          parallelism: 21
+          parallelism: 20
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 18
+          parallelism: 17
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 18
+          parallelism: 17
           requires:
             - build-sandboxes
       - e2e-dev:
@@ -575,7 +575,7 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 18
+          parallelism: 17
           requires:
             - build-sandboxes
       - bench:
@@ -609,22 +609,22 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 34
+          parallelism: 33
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 34
+          parallelism: 33
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 31
+          parallelism: 30
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 31
+          parallelism: 30
           requires:
             - build-sandboxes
       - e2e-dev:
@@ -632,7 +632,7 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 31
+          parallelism: 30
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness
diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts
index 69e858f1d14f..799de8e593ee 100644
--- a/code/lib/cli/src/sandbox-templates.ts
+++ b/code/lib/cli/src/sandbox-templates.ts
@@ -576,7 +576,7 @@ export const merged: TemplateKey[] = [
   ...normal,
   'react-webpack/18-ts',
   'react-webpack/17-ts',
-  'angular-cli/15-ts',
+  // 'angular-cli/15-ts', // TODO: re-enable when building the storybook works again
   'preact-webpack5/default-ts',
   'preact-vite/default-ts',
   'html-webpack/default',

From 090ba7f3dec6bed98e3aaa538ca11d23bd8dca41 Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Tue, 3 Oct 2023 13:05:28 +0000
Subject: [PATCH 56/56] Write changelog for 7.5.0-alpha.4

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

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
index b198f6cba525..cc8636b9d524 100644
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@@ -1,3 +1,15 @@
+## 7.5.0-alpha.4
+
+- CLI: Fix Nextjs project detection - [#24346](https://github.com/storybookjs/storybook/pull/24346), thanks [@yannbf](https://github.com/yannbf)!
+- Core: Deprecate `storyStoreV6` (including `storiesOf`) and `storyIndexers` - [#23938](https://github.com/storybookjs/storybook/pull/23938), thanks [@JReinhold](https://github.com/JReinhold)!
+- Core: Fix Promise cycle bug in useSharedState - [#24268](https://github.com/storybookjs/storybook/pull/24268), thanks [@ndelangen](https://github.com/ndelangen)!
+- Core: Fix missing favicon during dev - [#24356](https://github.com/storybookjs/storybook/pull/24356), thanks [@ndelangen](https://github.com/ndelangen)!
+- NextJS: Change babel plugins from `proposal-...` to `transform-...` - [#24290](https://github.com/storybookjs/storybook/pull/24290), thanks [@roottool](https://github.com/roottool)!
+- Nextjs: Improve support for Windows-style paths - [#23695](https://github.com/storybookjs/storybook/pull/23695), thanks [@T99](https://github.com/T99)!
+- UI: Fix infinite hook call causing browsers to freeze - [#24291](https://github.com/storybookjs/storybook/pull/24291), thanks [@yannbf](https://github.com/yannbf)!
+- UI: Improve contrast ratio between focus / hover - [#24205](https://github.com/storybookjs/storybook/pull/24205), thanks [@chocoscoding](https://github.com/chocoscoding)!
+- Vite: Move mdx-plugin from @storybook/builder-vite to @storybook/addon-docs - [#24166](https://github.com/storybookjs/storybook/pull/24166), thanks [@bryanjtc](https://github.com/bryanjtc)!
+
 ## 7.5.0-alpha.3
 
 - Build: Filter some manager errors - [#24217](https://github.com/storybookjs/storybook/pull/24217), thanks [@yannbf](https://github.com/yannbf)!
diff --git a/code/package.json b/code/package.json
index 386254893d93..807ed23fcac5 100644
--- a/code/package.json
+++ b/code/package.json
@@ -328,5 +328,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "7.5.0-alpha.4"
 }
diff --git a/docs/versions/next.json b/docs/versions/next.json
index 2995041f2b7a..e6e5140c4079 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"7.5.0-alpha.3","info":{"plain":"- Build: Filter some manager errors - [#24217](https://github.com/storybookjs/storybook/pull/24217), thanks [@yannbf](https://github.com/yannbf)!\n- Build: Migrate @storybook/addon-backgrounds to strict-ts - [#22178](https://github.com/storybookjs/storybook/pull/22178), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Build: Upgrade chromatic bin package - [#24133](https://github.com/storybookjs/storybook/pull/24133), thanks [@ndelangen](https://github.com/ndelangen)!\n- CLI: Change `/Date$/` to `/Dates$/i` - [#24195](https://github.com/storybookjs/storybook/pull/24195), thanks [@arup1221](https://github.com/arup1221)!\n- CLI: Fix `sb add` adding duplicative entries - [#24229](https://github.com/storybookjs/storybook/pull/24229), thanks [@ndelangen](https://github.com/ndelangen)!\n- Core: Throw an error when critical presets fail to load - [#24176](https://github.com/storybookjs/storybook/pull/24176), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Unify error when builder is missing - [#24177](https://github.com/storybookjs/storybook/pull/24177), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Upgrade `esbuild-register` to `3.5.0` - [#24175](https://github.com/storybookjs/storybook/pull/24175), thanks [@anneau](https://github.com/anneau)!\n- Dependencies: Upgrade `file-system-cache` - [#24232](https://github.com/storybookjs/storybook/pull/24232), thanks [@seriouz](https://github.com/seriouz)!\n- Indexer: Rename `index` to `createIndex` - [#24075](https://github.com/storybookjs/storybook/pull/24075), thanks [@JReinhold](https://github.com/JReinhold)!\n- Maintenance: Regen lockfiles - [#24152](https://github.com/storybookjs/storybook/pull/24152), thanks [@ndelangen](https://github.com/ndelangen)!\n- Manager: Fix useAddonState when using a setter function - [#24237](https://github.com/storybookjs/storybook/pull/24237), thanks [@ndelangen](https://github.com/ndelangen)!\n- NextJS: Add compatibility with nextjs `13.5` - [#24239](https://github.com/storybookjs/storybook/pull/24239), thanks [@ndelangen](https://github.com/ndelangen)!\n- NextJS: Aliases `react` and `react-dom` like `next.js` does - [#23671](https://github.com/storybookjs/storybook/pull/23671), thanks [@sookmax](https://github.com/sookmax)!\n- Nextjs: Improve Google Fonts failure error messages and documentation - [#23891](https://github.com/storybookjs/storybook/pull/23891), thanks [@nsheaps](https://github.com/nsheaps)!\n- Nextjs: Migrate from config to previewAnnotations - [#24178](https://github.com/storybookjs/storybook/pull/24178), thanks [@yannbf](https://github.com/yannbf)!\n- Theming: Add `barHoverColor` - [#20169](https://github.com/storybookjs/storybook/pull/20169), thanks [@julien-deramond](https://github.com/julien-deramond)!\n- Types: Allow `null` in value of `experimental_updateStatus` to clear status - [#24206](https://github.com/storybookjs/storybook/pull/24206), thanks [@ndelangen](https://github.com/ndelangen)!\n- Types: Don't distribute generic type of Meta and Story - [#24110](https://github.com/storybookjs/storybook/pull/24110), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- UI: Expand sidebar for selected story when using composition - [#23781](https://github.com/storybookjs/storybook/pull/23781), thanks [@joaonunomota](https://github.com/joaonunomota)!\n- UI: Fix SVG override fill when path has a fill attribute - [#24156](https://github.com/storybookjs/storybook/pull/24156), thanks [@ndelangen](https://github.com/ndelangen)!\n- UI: Fix TreeNode alignment when using a different font - [#22221](https://github.com/storybookjs/storybook/pull/22221), thanks [@bdriguesdev](https://github.com/bdriguesdev)!\n- UI: Fix custom theme hover-color inconsistency - [#22262](https://github.com/storybookjs/storybook/pull/22262), thanks [@yoshi2no](https://github.com/yoshi2no)!\n- UI: Fix keydown shortcut within shadow tree - [#24179](https://github.com/storybookjs/storybook/pull/24179), thanks [@stropitek](https://github.com/stropitek)!\n- UI: Improve look and feel of status UI in sidebar - [#24099](https://github.com/storybookjs/storybook/pull/24099), thanks [@ndelangen](https://github.com/ndelangen)!"}}
+{"version":"7.5.0-alpha.4","info":{"plain":"- CLI: Fix Nextjs project detection - [#24346](https://github.com/storybookjs/storybook/pull/24346), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Deprecate `storyStoreV6` (including `storiesOf`) and `storyIndexers` - [#23938](https://github.com/storybookjs/storybook/pull/23938), thanks [@JReinhold](https://github.com/JReinhold)!\n- Core: Fix Promise cycle bug in useSharedState - [#24268](https://github.com/storybookjs/storybook/pull/24268), thanks [@ndelangen](https://github.com/ndelangen)!\n- Core: Fix missing favicon during dev - [#24356](https://github.com/storybookjs/storybook/pull/24356), thanks [@ndelangen](https://github.com/ndelangen)!\n- NextJS: Change babel plugins from `proposal-...` to `transform-...` - [#24290](https://github.com/storybookjs/storybook/pull/24290), thanks [@roottool](https://github.com/roottool)!\n- Nextjs: Improve support for Windows-style paths - [#23695](https://github.com/storybookjs/storybook/pull/23695), thanks [@T99](https://github.com/T99)!\n- UI: Fix infinite hook call causing browsers to freeze - [#24291](https://github.com/storybookjs/storybook/pull/24291), thanks [@yannbf](https://github.com/yannbf)!\n- UI: Improve contrast ratio between focus / hover - [#24205](https://github.com/storybookjs/storybook/pull/24205), thanks [@chocoscoding](https://github.com/chocoscoding)!\n- Vite: Move mdx-plugin from @storybook/builder-vite to @storybook/addon-docs - [#24166](https://github.com/storybookjs/storybook/pull/24166), thanks [@bryanjtc](https://github.com/bryanjtc)!"}}