Merge branch 'next' into docs-csf-factories-fixes

docs/_snippets/init-command-custom-package-manager.md → docs/_snippets/create-command-custom-package-manager.md

@@ -1,11 +1,11 @@
 ```shell renderer="common" language="js" packageManager="npm"
-npx storybook@latest init --package-manager=npm
+npm create storybook@latest --package-manager=npm
 ```
 
 ```shell renderer="common" language="js" packageManager="pnpm"
-pnpm dlx storybook@latest init --package-manager=npm
+pnpm create storybook@latest --package-manager=npm
 ```
 
 ```shell renderer="common" language="js" packageManager="yarn"
-yarn dlx storybook@latest init --package-manager=npm
+yarn create storybook@latest --package-manager=npm
 ```

docs/_snippets/init-command-manual-framework.md → docs/_snippets/create-command-custom-version.md

@@ -1,11 +1,11 @@
 ```shell renderer="common" language="js" packageManager="npm"
-npx storybook@latest init --type solid
+npm create storybook@8.3
 ```
 
 ```shell renderer="common" language="js" packageManager="pnpm"
-pnpm dlx storybook@latest init --type solid
+pnpm create storybook@8.3
 ```
 
 ```shell renderer="common" language="js" packageManager="yarn"
-yarn dlx storybook@latest init --type solid
+yarn create storybook@8.3
 ```

docs/_snippets/create-command-manual-framework.md

@@ -0,0 +1,11 @@
+```shell renderer="common" language="js" packageManager="npm"
+npm create storybook@latest --type solid
+```
+
+```shell renderer="common" language="js" packageManager="pnpm"
+pnpm create storybook@latest --type solid
+```
+
+```shell renderer="common" language="js" packageManager="yarn"
+yarn create storybook@latest --type solid
+```

docs/_snippets/create-command.md

@@ -0,0 +1,11 @@
+```shell renderer="common" language="js" packageManager="npm"
+npm create storybook@latest
+```
+
+```shell renderer="common" language="js" packageManager="pnpm"
+pnpm create storybook@latest
+```
+
+```shell renderer="common" language="js" packageManager="yarn"
+yarn create storybook@latest
+```

docs/_snippets/init-command-custom-version.md

@@ -0,0 +1,11 @@
+```shell renderer="common" language="js" packageManager="npm"
+npx storybook@8.2 init
+```
+
+```shell renderer="common" language="js" packageManager="pnpm"
+pnpm dlx storybook@8.2 init
+```
+
+```shell renderer="common" language="js" packageManager="yarn"
+yarn dlx storybook@8.2 init
+```

docs/faq.mdx

@@ -9,7 +9,7 @@ Here are some answers to frequently asked questions. If you have a question, you
 
 ## Error: No angular.json file found
 
-Storybook can be set up for both single-project and multi-project Angular workspaces. To set up Storybook for a project, run `npx storybook@latest init` at the root of the workspace where the `angular.json` file is located. During initialization, the `.storybook` folder will be created and the `angular.json` file will be edited to add the Storybook configuration for the selected project. It's important to run the command at the root level to ensure that Storybook detects all projects correctly.
+Storybook can be set up for both single-project and multi-project Angular workspaces. To set up Storybook for a project, run [the install command](./get-started/install) at the root of the workspace where the `angular.json` file is located. During initialization, the `.storybook` folder will be created and the `angular.json` file will be edited to add the Storybook configuration for the selected project. It's important to run the command at the root level to ensure that Storybook detects all projects correctly.
 
 ## How can I opt-out of Angular Ivy?
 
@@ -66,7 +66,7 @@ npm test -- --coverage --collectCoverageFrom='["src/**/*.{js,jsx}","!src/**/stor
 <Callout variant="info" icon="💡">
 
   If you're using [`Yarn`](https://yarnpkg.com/) as a package manager, you'll need to adjust the command accordingly.
-  
+
 </Callout>
 
 ## How do I setup Storybook to share Webpack configuration with Next.js?

docs/get-started/frameworks/angular.mdx

@@ -34,7 +34,7 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 
   {/* prettier-ignore-start */}
 
-  <CodeSnippets path="init-command.md" />
+  <CodeSnippets path="create-command.md" />
 
   {/* prettier-ignore-end */}
 
@@ -408,7 +408,7 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 
   Type: `Record<string, any>`
 
-  Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../../builders/webpack.mdx). 
+  Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../../builders/webpack.mdx).
 
   {/* End supported renderers */}
 </If>

docs/get-started/frameworks/nextjs.mdx

@@ -36,7 +36,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   {/* prettier-ignore-start */}
 
-  <CodeSnippets path="init-command.md" />
+  <CodeSnippets path="create-command.md" />
 
   {/* prettier-ignore-end */}
 

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

@@ -34,7 +34,7 @@ Storybook for Preact & Vite is a [framework](../../contribute/framework.mdx) tha
 
   {/* prettier-ignore-start */}
 
-  <CodeSnippets path="init-command.md" />
+  <CodeSnippets path="create-command.md" />
 
   {/* prettier-ignore-end */}
 
@@ -89,6 +89,6 @@ Storybook for Preact & Vite is a [framework](../../contribute/framework.mdx) tha
   Type: `Record<string, any>`
 
   Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../../builders/vite.mdx).
-  
+
   {/* End supported renderers */}
 </If>

docs/get-started/frameworks/react-native-web-vite.mdx

@@ -40,7 +40,7 @@ Storybook for React Native Web is a [framework](../../contribute/framework.mdx)
 
   {/* prettier-ignore-start */}
 
-  <CodeSnippets path="init-command.md" />
+  <CodeSnippets path="create-command.md" />
 
   {/* prettier-ignore-end */}
 
@@ -49,9 +49,9 @@ Storybook for React Native Web is a [framework](../../contribute/framework.mdx)
   ### In a project with Storybook `addon-react-native-web`
 
   The [React Native Web addon](https://github.com/storybookjs/addon-react-native-web) was a Webpack-based precursor to the React Native Web Vite framework (i.e., `@storybook/react-native-web-vite`). If you're using the addon, you should migrate to the framework, which is faster, more stable, maintained, and better documented. To do so, follow the steps below.
-  
+
   Run the following command to upgrade Storybook to the latest version:
-  
+
   {/* prettier-ignore-start */}
 
   <CodeSnippets path="storybook-upgrade.md" />
@@ -81,7 +81,7 @@ Storybook for React Native Web is a [framework](../../contribute/framework.mdx)
   Finally, remove the addon and similar packages (i.e., `@storybook/react-webpack5` and `@storybook/addon-react-native-web`) from your project.
 
   ### In a project with Storybook `react-native`
-  
+
   [Storybook for React Native](https://github.com/storybookjs/react-native) is a framework that runs in a simulator or on your mobile device. It's possible to run React Native Web alongside React Native, but we are still working on a seamless integration. In the meantime, we recommend running one or the other. If you need help figuring out what's right for you, read our [comparison](#react-native-vs-react-native-web).
 
   ## Run the Setup Wizard
@@ -102,7 +102,7 @@ Storybook for React Native Web is a [framework](../../contribute/framework.mdx)
   - **Web** - Displays your React Native components in the browser. It’s based on Storybook for Web, which is feature-rich and mature.
 
   {/* TODO: Don't forget about this image, otherwise remove it */}
-  
+
   {/* [Image: native + web] */}
 
   So, which option is right for you?
@@ -135,7 +135,7 @@ Storybook for React Native Web is a [framework](../../contribute/framework.mdx)
       name: '@storybook/react-native-web-vite',
       options: {
         // You should apply babel plugins and presets here for your project that you want to apply to your code
-        // for example put the reanimated preset here if you are using reanimated 
+        // for example put the reanimated preset here if you are using reanimated
         // or the nativewind jsxImportSource for example
         pluginReactOptions: {
           jsxRuntime: 'automatic' | 'classic', // default: 'automatic'
@@ -217,7 +217,6 @@ Storybook for React Native Web is a [framework](../../contribute/framework.mdx)
 
   Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../../builders/vite.mdx).
 
-  
+
   {/* End supported renderers */}
 </If>
-

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

@@ -34,7 +34,7 @@ Storybook for React & Vite is a [framework](../../contribute/framework.mdx) that
 
   {/* prettier-ignore-start */}
 
-  <CodeSnippets path="init-command.md" />
+  <CodeSnippets path="create-command.md" />
 
   {/* prettier-ignore-end */}
 
@@ -97,6 +97,6 @@ Storybook for React & Vite is a [framework](../../contribute/framework.mdx) that
   Type: `Record<string, any>`
 
   Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../../builders/vite.mdx).
-  
+
   {/* End supported renderers */}
 </If>

docs/get-started/frameworks/react-webpack5.mdx

@@ -30,7 +30,7 @@ Storybook for React & Webpack is a [framework](../../contribute/framework.mdx) t
 
   {/* prettier-ignore-start */}
 
-  <CodeSnippets path="init-command.md" />
+  <CodeSnippets path="create-command.md" />
 
   {/* prettier-ignore-end */}
 
@@ -116,7 +116,7 @@ Storybook for React & Webpack is a [framework](../../contribute/framework.mdx) t
 
   <CodeSnippets path="react-webpack5-framework-options.md" />
 
-  {/* prettier-ignore-end */}  
+  {/* prettier-ignore-end */}
 
   #### `builder`
 

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

@@ -30,7 +30,7 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
 
   {/* prettier-ignore-start */}
 
-  <CodeSnippets path="init-command.md" />
+  <CodeSnippets path="create-command.md" />
 
   {/* prettier-ignore-end */}
 
@@ -72,8 +72,8 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
 
   ## Writing native Svelte stories
 
-  Storybook provides a Svelte [addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf) maintained by the community, enabling you to write stories for your Svelte components using the template syntax. 
-  
+  Storybook provides a Svelte [addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf) maintained by the community, enabling you to write stories for your Svelte components using the template syntax.
+
   <Callout variant="info">
     The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see the [addon's documentation](https://github.com/storybookjs/addon-svelte-csf).
   </Callout>
@@ -91,21 +91,21 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
   {/* prettier-ignore-end */}
 
   <Callout variant="info">
-  
+
     The CLI's [`add`](../../api/cli-options.mdx#add) command automates the addon's installation and setup. To install it manually, see our [documentation](../addons/install-addons.mdx#manual-installation) on how to install addons.
-  
+
   </Callout>
 
   Update your Storybook configuration file (i.e., `.storybook/main.js|ts`) to enable support for this format.
-  
+
   {/* prettier-ignore-start */}
 
   <CodeSnippets path="main-config-svelte-csf-register.md" />
 
   {/* prettier-ignore-end */}
 
   ### Configure
- 
+
   By default, the Svelte [addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf) addon offers zero-config support for Storybook's Svelte framework. However, you can extend your Storybook configuration file (i.e., `.storybook/main.js|ts`) and provide additional addon options. Listed below are the available options and examples of how to use them.
 
   {/* prettier-ignore-start */}
@@ -117,31 +117,31 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
   | Options          | Description |
   | ---------------- | ------------------------------------------------------------------------------------------------------------------ |
   | `legacyTemplate` | Enables support for the `Template` component for backward compatibility. <br/> `options: { legacyTemplate: true }` |
-  
+
   <Callout variant="info">
 
     Enabling the `legacyTemplate` option can introduce a performance overhead and should be used cautiously. For more information, refer to the [addon's documentation](https://github.com/storybookjs/addon-svelte-csf/blob/next/README.md#legacy-api).
-  
+
   </Callout>
 
   ### Upgrade to Svelte CSF addon v5
 
   With the Svelte 5 release, Storybook's Svelte CSF addon has been updated to support the new features. This guide will help you migrate to the latest version of the addon. Below is an overview of the major changes in version 5.0 and the steps needed to upgrade your project.
 
   #### Simplified story API
-  
+
   If you are using the `Meta` component or the `meta` named export to define the story's metadata (e.g., [parameters](../../writing-stories/parameters.mdx)), you'll need to update your stories to use the new `defineMeta` function. This function returns an object with the required information, including a `Story` component that you must use to define your component stories.
-  
+
   {/* prettier-ignore-start */ }
 
   <CodeSnippets path="svelte-csf-story-migration.md" />
 
   {/* prettier-ignore-end */}
 
   #### Story templates
- 
+
   If you used the `Template` component to control how the component renders in the Storybook, this feature was replaced with built-in children support in the `Story` component, enabling you to compose components and define the UI structure directly in the story.
-  
+
   {/* prettier-ignore-start */ }
 
   <CodeSnippets path="svelte-csf-story-custom-children.md" />
@@ -151,17 +151,17 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
   <Callout variant="info">
 
     If you need support for the `Template` component, the addon provides a feature flag for backward compatibility. For more information, see the [configuration options](#configure).
-  
+
   </Callout>
 
   #### Story slots to snippets
-  
+
   With Svelte's slot deprecation and the introduction of reusable [`snippets`](https://svelte.dev/docs/svelte/v5-migration-guide#Snippets-instead-of-slots), the addon also introduced support for this feature allowing you to extend the `Story` component and provide a custom snippet to provide dynamic content to your stories. This feature extends the built-in `children` support in the `Story` component, allowing you to create dynamic stories without losing reactivity.
 
   ```svelte title="MyComponent.stories.svelte"
   <script>
     import { defineMeta } from '@storybook/addon-svelte-csf';
-    
+
     import MyComponent from './MyComponent.svelte';
 
     const { Story } = defineMeta({
@@ -179,7 +179,7 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
   #### Tags support
 
   If you enabled automatic documentation generation with the `autodocs` story property, you must replace it with [`tags`](../../writing-stories/tags.mdx). This property allows you to categorize and filter stories based on specific criteria and generate documentation based on the tags applied to the stories.
-  
+
   {/* prettier-ignore-start */ }
 
   <CodeSnippets path="svelte-csf-addon-tags.md" />

docs/get-started/frameworks/svelte-webpack5.mdx

@@ -30,7 +30,7 @@ Storybook for Svelte & Webpack is a [framework](../../contribute/framework.mdx)
 
   {/* prettier-ignore-start */}
 
-  <CodeSnippets path="init-command.md" />
+  <CodeSnippets path="create-command.md" />
 
   {/* prettier-ignore-end */}