Merge branch 'next' into fix/interactions-disable-parameter

Author: jeevikar14

docs/_snippets/ghp-github-action.md

@@ -3,13 +3,13 @@ name: Build and Publish Storybook to GitHub Pages
 on:
   push:
     branches:
-      - "your-branch-name" # Use specific branch name
+      - 'your-branch-name' # Use specific branch name
 permissions:
   contents: read
   pages: write
   id-token: write
 concurrency:
-  group: "pages"
+  group: 'pages'
   cancel-in-progress: false
 jobs:
   deploy:
@@ -25,8 +25,8 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
-          cache: "npm" # Adjust caching strategy and configuration if using other package managers
+          node-version: '20'
+          cache: 'npm' # Adjust caching strategy and configuration if using other package managers
       - name: Install dependencies
         run: npm ci # Replace with appropriate command if using other package managers
       - name: Build Storybook
@@ -35,7 +35,7 @@ jobs:
       - name: Upload Pages artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: "storybook-static"
+          path: 'storybook-static'
       # Deploy to Github Pages
       - id: deploy
         name: Deploy to GitHub Pages

docs/_snippets/nextjs-styling-sass-config.md

@@ -10,9 +10,10 @@ export default {
 ```
 
 ```ts filename="next.config.ts" language="ts" renderer="react"
-import * as path from 'path';
 import type { NextConfig } from 'next';
 
+import * as path from 'node:path';
+
 const config: NextConfig = {
   // Any options here are included in Sass compilation for your stories
   sassOptions: {

docs/_snippets/nextjs-styling-sass-preview.md

@@ -4,4 +4,4 @@ import '../styles/globals.scss';
 
 ```ts filename=".storybook/preview.ts" language="ts" renderer="react"
 import '../styles/globals.scss';
-```
+```

docs/_snippets/nextjs-styling-styled-jsx-component.md

@@ -60,4 +60,4 @@ function HelloWorld() {
 }
 
 export default HelloWorld;
-```
+```

docs/_snippets/nextjs-styling-tailwind.md

@@ -4,4 +4,4 @@ import '../app/globals.css';
 
 ```ts filename=".storybook/preview.ts" language="ts" renderer="react"
 import '../app/globals.css';
-```
+```

docs/_snippets/react-native-web-vite-add-framework.md

@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="react-native-web" language="js"
+```js filename=".storybook/main.js" renderer="react" language="js"
 export default {
   addons: [
     '@storybook/addon-react-native-web', // 👈 Remove the addon
@@ -8,7 +8,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="react-native-web" language="ts"
+```ts filename=".storybook/main.ts" renderer="react" language="ts"
 import type { StorybookConfig } from '@storybook/react-native-web-vite';
 
 const config: StorybookConfig = {

docs/_snippets/react-native-web-vite-install.md

@@ -1,11 +1,11 @@
-```shell renderer="react-native-web" language="js" packageManager="npm"
+```shell renderer="common" language="sh" packageManager="npm"
 npm install --save-dev @storybook/react-native-web-vite vite
 ```
 
-```shell renderer="react-native-web" language="js" packageManager="pnpm"
+```shell renderer="common" language="sh" packageManager="pnpm"
 pnpm add --save-dev @storybook/react-native-web-vite vite
 ```
 
-```shell renderer="react-native-web" language="js" packageManager="yarn"
+```shell renderer="common" language="sh" packageManager="yarn"
 yarn add --dev @storybook/react-native-web-vite vite
 ```

docs/get-started/frameworks/angular.mdx

@@ -14,7 +14,7 @@ To install Storybook in an existing Angular project, run this command in your pr
 
 <CodeSnippets path="create-command.md" variant="new-users" copyEvent="CreateCommandCopy" />
 
-You can then get started [writing stories](/docs/get-started/whats-a-story/), [running tests](/docs/writing-tests/) and [documenting your components](/docs/writing-docs/). For more control over the installation process, refer to the [installation guide](/docs/install/).
+You can then get started [writing stories](../whats-a-story.mdx), [running tests](../../writing-tests/index.mdx) and [documenting your components](../../writing-docs/index.mdx). For more control over the installation process, refer to the [installation guide](../install.mdx).
 
 ### Requirements
 
@@ -46,7 +46,7 @@ You will find the output in the configured `outputDir` (default is `dist/storybo
 
 ## Configure
 
-To make the most out of Storybook in your Angular project, you can set up Compodoc integration and Storybook [decorators](/docs/writing-stories/decorators/) based on your project needs.
+To make the most out of Storybook in your Angular project, you can set up Compodoc integration and Storybook [decorators](../../writing-stories/decorators.mdx) based on your project needs.
 
 ### Compodoc
 
@@ -122,7 +122,7 @@ export default preview;
 
 ### Application-wide providers
 
-If your component relies on application-wide providers, like the ones defined by [`BrowserAnimationsModule`](https://angular.dev/api/platform-browser/animations/BrowserAnimationsModule) or any other modules that use the forRoot pattern to provide a [`ModuleWithProviders`](https://angular.dev/api/core/ModuleWithProviders), you can apply the `applicationConfig` [decorator](../../writing-stories/decorators.mdx) to all stories for that component. This will provide them with the [bootstrapApplication function](https://angular.io/guide/standalone-components#configuring-dependency-injection), used to bootstrap the component in Storybook.
+If your component relies on application-wide providers, like the ones defined by [`BrowserAnimationsModule`](https://angular.dev/api/platform-browser/animations/BrowserAnimationsModule) or any other modules that use the forRoot pattern to provide a [`ModuleWithProviders`](https://angular.dev/api/core/ModuleWithProviders), you can apply the `applicationConfig` [decorator](../../writing-stories/decorators.mdx) to all stories for that component. This will provide them with the [bootstrapApplication function](https://angular.dev/api/platform-browser/bootstrapApplication), used to bootstrap the component in Storybook.
 
 ```ts title="ChipsModule.stories.ts"
 import { Meta, applicationConfig, StoryObj } from '@storybook/angular';
@@ -203,7 +203,6 @@ export const WithCustomProvider: Story = {
 };
 ```
 
-
 ## FAQ
 
 ### How do I manually install the Angular framework?

docs/get-started/frameworks/nextjs-vite.mdx

@@ -6,16 +6,15 @@ sidebar:
   title: Next.js (Vite)
 ---
 
-Storybook for Next.js (Vite) is the **recommended** [framework](../../contribute/framework.mdx) for developing and testing UI components in isolation for [Next.js](https://nextjs.org/) applications. It uses [Vite](https://vitejs.dev/) for faster builds, better performance and [Storybook Testing](https://storybook.js.org/docs/writing-tests) support.
+Storybook for Next.js (Vite) is the **recommended** [framework](../../contribute/framework.mdx) for developing and testing UI components in isolation for [Next.js](https://nextjs.org/) applications. It uses [Vite](https://vitejs.dev/) for faster builds, better performance and [Storybook Testing](../../writing-tests/index.mdx) support.
 
 ## Install
 
 To install Storybook in an existing Next.js project, run this command in your project's root directory:
 
 <CodeSnippets path="create-command.md" variant="new-users" copyEvent="CreateCommandCopy" />
 
-You can then get started [writing stories](/docs/get-started/whats-a-story/), [running tests](/docs/writing-tests/) and [documenting your components](/docs/writing-docs/). For more control over the installation process, refer to the [installation guide](/docs/install/).
-
+You can then get started [writing stories](../whats-a-story.mdx), [running tests](../../writing-tests/index.mdx) and [documenting your components](../../writing-docs/index.mdx). For more control over the installation process, refer to the [installation guide](../install.mdx).
 
 ### Requirements
 
@@ -56,9 +55,6 @@ To build Storybook, run:
 
 You will find the output in the configured `outputDir` (default is `storybook-static`).
 
-
-
-
 ## Configure
 
 Storybook for Next.js with Vite supports many Next.js features including:
@@ -410,54 +406,60 @@ const preview: Preview = {
 
 [`next/head`](https://nextjs.org/docs/pages/api-reference/components/head) is supported out of the box. You can use it in your stories like you would in your Next.js application. Please keep in mind, that the Head `children` are placed into the head element of the iframe that Storybook uses to render your stories.
 
-### Styling
 
-#### Sass/Scss
+## Next.js styling
 
-[Global Sass/Scss stylesheets](https://nextjs.org/docs/pages/building-your-application/styling/sass) are supported without any additional configuration as well. Just import them into [`.storybook/preview.js|ts`](../../configure/index.mdx#configure-story-rendering)
+### Sass/Scss
 
-```js title=".storybook/preview.js|ts"
-import '../styles/globals.scss';
-```
+[Global Sass/SCSS stylesheets](https://nextjs.org/docs/pages/building-your-application/styling/sass) are also supported without any additional configuration. Just import them into [the preview config file](../../configure/index.mdx#configure-story-rendering).
 
-This will automatically include any of your [custom Sass configurations](https://nextjs.org/docs/pages/building-your-application/styling/sass#customizing-sass-options) in your `next.config.js` file.
+{/* prettier-ignore-start */}
 
-```js title="next.config.js"
-import * as path from 'path';
+<CodeSnippets path="nextjs-styling-sass-preview.md" />
 
-export default {
-  // Any options here are included in Sass compilation for your stories
-  sassOptions: {
-    includePaths: [path.join(process.cwd(), 'styles')],
-  },
-};
-```
+{/* prettier-ignore-end */}
+
+This will automatically include any of your [custom Sass configurations](https://nextjs.org/docs/pages/building-your-application/styling/sass#customizing-sass-options) in your Next.js config file.
 
-#### CSS/Sass/Scss Modules
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="nextjs-styling-sass-config.md" />
+
+{/* prettier-ignore-end */}
+
+### CSS/Sass/Scss Modules
 
 [CSS modules](https://nextjs.org/docs/pages/building-your-application/styling/css-modules) work as expected.
 
-```jsx title="src/components/Button.jsx"
-// This import will work in Storybook
-import styles from './Button.module.css';
-// Sass/Scss is also supported
-// import styles from './Button.module.scss'
-// import styles from './Button.module.sass'
+{/* prettier-ignore-start */}
 
-export function Button() {
-  return (
-    <button type="button" className={styles.error}>
-      Destroy
-    </button>
-  );
-}
-```
+<CodeSnippets path="nextjs-styling-css-modules.md" />
+
+{/* prettier-ignore-end */}
 
-#### PostCSS
+### Styled JSX
 
-Next.js lets you [customize PostCSS config](https://nextjs.org/docs/pages/building-your-application/configuring/post-css). Thus this framework will automatically handle your PostCSS config for you.
+The built-in CSS-in-JS solution for Next.js is [styled-jsx](https://nextjs.org/docs/pages/building-your-application/styling/css-in-js), and this framework supports that out of the box, too, with zero config.
+
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="nextjs-styling-styled-jsx-component.md" />
+
+{/* prettier-ignore-end */}
+
+### Tailwind
 
-This allows for cool things like zero-config Tailwind! (See [Next.js' example](https://github.com/vercel/next.js/tree/canary/packages/create-next-app/templates/default-tw))
+Tailwind in Next.js [is supported via PostCSS](https://nextjs.org/docs/app/getting-started/css#tailwind-css). Storybook will automatically handle the PostCSS config for you, including any custom PostCSS configuration, so that you can import your global CSS directly into [the preview config file](../../configure/index.mdx#configure-story-rendering):
+
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="nextjs-styling-tailwind.md" />
+
+{/* prettier-ignore-end */}
+
+### PostCSS
+
+Next.js lets you [customize PostCSS config](https://nextjs.org/docs/pages/building-your-application/configuring/post-css). Thus this framework will automatically handle your PostCSS config for you.
 
 ### Imports
 #### Absolute imports
@@ -638,7 +640,7 @@ To enable this set the `experimentalRSC` feature flag in your `.storybook/main.j
 
 Setting this flag automatically wraps your story in a [Suspense](https://react.dev/reference/react/Suspense) wrapper, which is able to render asynchronous components in NextJS's version of React.
 
-If this wrapper causes problems in any of your existing stories, you can selectively disable it using the `react.rsc` [parameter](https://storybook.js.org/docs/writing-stories/parameters) at the global/component/story level:
+If this wrapper causes problems in any of your existing stories, you can selectively disable it using the `react.rsc` [parameter](../../writing-stories/parameters.mdx) at the global/component/story level:
 
 {/* prettier-ignore-start */}
 
@@ -654,7 +656,6 @@ In the future we will provide better mocking support in Storybook and support fo
 
 ## FAQ
 
-
 ### How do I migrate from the `nextjs` (Webpack 5) addon?
 
 #### Automatic migration
@@ -673,7 +674,7 @@ This automigration tool performs the following actions:
 
 <Callout variant="info">
 
-If your project has custom Webpack configurations in `.storybook/main.js|ts` (via `webpackFinal`), you'll need to migrate those to Vite configuration (via `viteFinal`) after running this automigration. See the [Vite builder documentation](../builders/vite.mdx#migrating-from-webpack) for more information.
+If your project has custom Webpack configurations in `.storybook/main.js|ts` (via `webpackFinal`), you'll need to migrate those to Vite configuration (via `viteFinal`) after running this automigration. See the [Vite builder documentation](../../builders/vite.mdx#migrating-from-webpack) for more information.
 
 </Callout>
 
@@ -711,8 +712,6 @@ Finally, if you were using Storybook plugins to integrate with Next.js, those ar
 
 {/* prettier-ignore-end */}
 
-
-
 ### Stories for pages/components which fetch data
 
 Next.js pages can fetch data directly within server components in the `app` directory, which often include module imports that only run in a node environment. This does not (currently) work within Storybook, because if you import from a Next.js page file containing those node module imports in your stories, your Storybook's Vite build will crash because those modules will not run in a browser. To get around this, you can extract the component in your page file into a separate file and import that pure component in your stories. Or, if that's not feasible for some reason, you can [configure Vite to handle those modules](https://vitejs.dev/config/dep-optimization-options.html#optimizedeps-exclude) in your Storybook's [`viteFinal` configuration](../../builders/vite.mdx#configuration).

docs/get-started/frameworks/nextjs.mdx

@@ -8,7 +8,6 @@ sidebar:
 
 Storybook for Next.js (Webpack) is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for [Next.js](https://nextjs.org/) applications using [Webpack 5](https://webpack.js.org/).
 
-
 <Callout variant="info">
 
 **We recommend using [`@storybook/nextjs-vite`](./nextjs-vite.mdx)** for most Next.js projects. The Vite-based framework is faster, more modern, and offers better support for testing features.
@@ -27,8 +26,7 @@ To install Storybook in an existing Next.js project, run this command in your pr
 
 The command will prompt you to choose between this framework and [`@storybook/nextjs-vite`](./nextjs-vite.mdx). We recommend the Vite-based framework ([learn why](./nextjs-vite.mdx#choose-between-vite-and-webpack)).
 
-You can then get started [writing stories](/docs/get-started/whats-a-story/), [running tests](/docs/writing-tests/) and [documenting your components](/docs/writing-docs/). For more control over the installation process, refer to the [installation guide](/docs/install/).
-
+You can then get started [writing stories](../whats-a-story.mdx), [running tests](../../writing-tests/index.mdx) and [documenting your components](../../writing-docs/index.mdx). For more control over the installation process, refer to the [installation guide](../install.mdx).
 
 ### Requirements
 
@@ -54,9 +52,6 @@ To build Storybook, run:
 
 You will find the output in the configured `outputDir` (default is `storybook-static`).
 
-
-
-
 ## Configure
 
 Storybook for Next.js with Vite supports many Next.js features including:
@@ -70,16 +65,6 @@ Storybook for Next.js with Vite supports many Next.js features including:
 * 🎭 [Module mocking](#mocking-modules)
 * ☁️ [React Server Component (experimental)](#react-server-components-rsc)
 
-
-
-
-
-
-
-
-
-
-
 ### Next.js's Image component
 
 This framework allows you to use Next.js's [next/image](https://nextjs.org/docs/pages/api-reference/components/image) with no configuration.
@@ -420,7 +405,7 @@ const preview: Preview = {
 
 ### Sass/Scss
 
-[Global Sass/Scss stylesheets](https://nextjs.org/docs/pages/building-your-application/styling/sass) are supported without any additional configuration as well. Just import them into [the preview config file](../../configure/index.mdx#configure-story-rendering)
+[Global Sass/SCSS stylesheets](https://nextjs.org/docs/pages/building-your-application/styling/sass) are also supported without any additional configuration. Just import them into [the preview config file](../../configure/index.mdx#configure-story-rendering).
 
 {/* prettier-ignore-start */}
 
@@ -448,15 +433,15 @@ This will automatically include any of your [custom Sass configurations](https:/
 
 ### Styled JSX
 
-The built in CSS-in-JS solution for Next.js is [styled-jsx](https://nextjs.org/docs/pages/building-your-application/styling/css-in-js), and this framework supports that out of the box too, zero config.
+The built-in CSS-in-JS solution for Next.js is [styled-jsx](https://nextjs.org/docs/pages/building-your-application/styling/css-in-js), and this framework supports that out of the box, too, with zero config.
 
 {/* prettier-ignore-start */}
 
 <CodeSnippets path="nextjs-styling-styled-jsx-component.md" />
 
 {/* prettier-ignore-end */}
 
-You can use your own babel config too. This is an example of how you can customize styled-jsx.
+You can use your own Babel config, too. This is an example of how you can customize styled-jsx.
 
 ```jsonc
 // .babelrc (or whatever config file you use)
@@ -476,8 +461,7 @@ You can use your own babel config too. This is an example of how you can customi
 
 ### Tailwind
 
-Tailwind in Next.js [is supported via PostCSS](https://nextjs.org/docs/app/getting-started/css#tailwind-css). Storybook will automatically handle the PostCSS config for you, including any custom PostCSS configuration,
-so you can just import your global CSS directly into [the preview config file](../../configure/index.mdx#configure-story-rendering):
+Tailwind in Next.js [is supported via PostCSS](https://nextjs.org/docs/app/getting-started/css#tailwind-css). Storybook will automatically handle the PostCSS config for you, including any custom PostCSS configuration, so that you can import your global CSS directly into [the preview config file](../../configure/index.mdx#configure-story-rendering):
 
 {/* prettier-ignore-start */}
 
@@ -674,7 +658,7 @@ To enable this set the `experimentalRSC` feature flag in your `.storybook/main.j
 
 Setting this flag automatically wraps your story in a [Suspense](https://react.dev/reference/react/Suspense) wrapper, which is able to render asynchronous components in NextJS's version of React.
 
-If this wrapper causes problems in any of your existing stories, you can selectively disable it using the `react.rsc` [parameter](https://storybook.js.org/docs/writing-stories/parameters) at the global/component/story level:
+If this wrapper causes problems in any of your existing stories, you can selectively disable it using the `react.rsc` [parameter](../../writing-stories/parameters.mdx) at the global/component/story level:
 
 {/* prettier-ignore-start */}