diff --git a/docs/_snippets/ghp-github-action.md b/docs/_snippets/ghp-github-action.md index 8898f02b3f8b..1f93b2c5a112 100644 --- a/docs/_snippets/ghp-github-action.md +++ b/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 diff --git a/docs/_snippets/nextjs-styling-sass-config.md b/docs/_snippets/nextjs-styling-sass-config.md index 0c8ec47ac6b6..90b636fd9494 100644 --- a/docs/_snippets/nextjs-styling-sass-config.md +++ b/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: { diff --git a/docs/_snippets/nextjs-styling-sass-preview.md b/docs/_snippets/nextjs-styling-sass-preview.md index aa6900d46f3d..f4f29374d43b 100644 --- a/docs/_snippets/nextjs-styling-sass-preview.md +++ b/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'; -``` \ No newline at end of file +``` diff --git a/docs/_snippets/nextjs-styling-styled-jsx-component.md b/docs/_snippets/nextjs-styling-styled-jsx-component.md index bedbb5a7d858..672625479c2c 100644 --- a/docs/_snippets/nextjs-styling-styled-jsx-component.md +++ b/docs/_snippets/nextjs-styling-styled-jsx-component.md @@ -60,4 +60,4 @@ function HelloWorld() { } export default HelloWorld; -``` \ No newline at end of file +``` diff --git a/docs/_snippets/nextjs-styling-tailwind.md b/docs/_snippets/nextjs-styling-tailwind.md index 8da3519c8b54..fead37d5ca49 100644 --- a/docs/_snippets/nextjs-styling-tailwind.md +++ b/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'; -``` \ No newline at end of file +``` diff --git a/docs/_snippets/react-native-web-vite-add-framework.md b/docs/_snippets/react-native-web-vite-add-framework.md index 764fa47df059..e3946dc1f8d8 100644 --- a/docs/_snippets/react-native-web-vite-add-framework.md +++ b/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 = { diff --git a/docs/_snippets/react-native-web-vite-install.md b/docs/_snippets/react-native-web-vite-install.md index 719993c04e77..76927ec1956f 100644 --- a/docs/_snippets/react-native-web-vite-install.md +++ b/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 ``` diff --git a/docs/get-started/frameworks/angular.mdx b/docs/get-started/frameworks/angular.mdx index 7804057956e4..2493f964c5b5 100644 --- a/docs/get-started/frameworks/angular.mdx +++ b/docs/get-started/frameworks/angular.mdx @@ -14,7 +14,7 @@ To install Storybook in an existing Angular project, run this command in your pr -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? diff --git a/docs/get-started/frameworks/nextjs-vite.mdx b/docs/get-started/frameworks/nextjs-vite.mdx index 47dce128fc5e..b39271a09c8e 100644 --- a/docs/get-started/frameworks/nextjs-vite.mdx +++ b/docs/get-started/frameworks/nextjs-vite.mdx @@ -6,7 +6,7 @@ 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 @@ -14,8 +14,7 @@ To install Storybook in an existing Next.js project, run this command in your pr -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'; + -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 */} + + + +{/* 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 ( - - ); -} -``` + + +{/* 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 */} + + + +{/* 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 */} + + + +{/* 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: -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. @@ -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). diff --git a/docs/get-started/frameworks/nextjs.mdx b/docs/get-started/frameworks/nextjs.mdx index 2f85cfa5f7b0..c1d62f0c4f0c 100644 --- a/docs/get-started/frameworks/nextjs.mdx +++ b/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/). - **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,7 +433,7 @@ 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 */} @@ -456,7 +441,7 @@ The built in CSS-in-JS solution for Next.js is [styled-jsx](https://nextjs.org/d {/* 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 */} diff --git a/docs/get-started/frameworks/preact-vite.mdx b/docs/get-started/frameworks/preact-vite.mdx index c21d619800d0..a316186defd2 100644 --- a/docs/get-started/frameworks/preact-vite.mdx +++ b/docs/get-started/frameworks/preact-vite.mdx @@ -14,7 +14,7 @@ To install Storybook in an existing Preact project, run this command in your pro -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 @@ -41,7 +41,6 @@ To build Storybook, run: You will find the output in the configured `outputDir` (default is `storybook-static`). - ## FAQ ### How do I manually install the Preact framework? diff --git a/docs/get-started/frameworks/react-native-web-vite.mdx b/docs/get-started/frameworks/react-native-web-vite.mdx index 55ce40124f3f..9806207aff08 100644 --- a/docs/get-started/frameworks/react-native-web-vite.mdx +++ b/docs/get-started/frameworks/react-native-web-vite.mdx @@ -12,18 +12,13 @@ Storybook for React Native Web is a [framework](../../contribute/framework.mdx) In addition to React Native Web, Storybook supports on-device [React Native](https://github.com/storybookjs/react-native) development. If you're unsure what's right for you, read our [comparison](#react-native-vs-react-native-web). - - - - ## Install To install Storybook in an existing React Native project, run this command in your project's root directory: -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 @@ -41,7 +36,6 @@ You can then get started [writing stories](/docs/get-started/whats-a-story/), [r icon: '/images/logos/builders/vite.svg' }]} /> - ## Run Storybook To run Storybook for a particular project, run the following: @@ -54,8 +48,6 @@ To build Storybook, run: You will find the output in the configured `outputDir` (default is `storybook-static`). - - ## React Native vs React Native Web If you’re building React Native (RN) components, Storybook has two options: Native and Web. @@ -87,7 +79,6 @@ So, which option is right for you? **Both.** It’s also possible to use both options together. This increases Storybook’s install footprint but is a good option if you want native fidelity in addition to all of the web features. Learn more below. - ### Using both React Native and React Native Web The easiest way to use React Native and React Native Web is to select the **"Both"** option when installing Storybook. This will install and create configurations for both environments, allowing you to run Storybook for both in the same project. @@ -103,7 +94,6 @@ After installation, you'll see instructions for both environments: However, you can install them separately if one version is installed. You can add a React Native Web Storybook alongside an existing React Native Storybook by running the install command and selecting "React Native Web" in the setup wizard, and vice versa. - ## FAQ ### How do I migrate from the React Native Web addon? @@ -140,7 +130,6 @@ Update your `.storybook/main.js|ts` to change the framework property and remove Finally, remove the addon and similar packages (i.e., `@storybook/react-webpack5` and `@storybook/addon-react-native-web`) from your project. - ## API ### Options @@ -180,7 +169,7 @@ export default config; #### Example configuration for reanimated ```ts title=".storybook/main.ts" -const main: StorybookConfig = { +const config: StorybookConfig = { // ... rest of config framework: { @@ -205,7 +194,7 @@ const main: StorybookConfig = { ```ts title=".storybook/main.ts" -const main: StorybookConfig = { +const config: StorybookConfig = { // ... rest of config framework: { @@ -225,7 +214,7 @@ Let's say you need to transpile a library called `my-library` that is not transp You can add it to the `modulesToTranspile` option. ```ts title=".storybook/main.ts" -const main: StorybookConfig = { +const config: StorybookConfig = { // ... rest of config framework: { diff --git a/docs/get-started/frameworks/react-vite.mdx b/docs/get-started/frameworks/react-vite.mdx index 6269b5ddd7d8..c04f4e4ffcba 100644 --- a/docs/get-started/frameworks/react-vite.mdx +++ b/docs/get-started/frameworks/react-vite.mdx @@ -14,8 +14,7 @@ To install Storybook in an existing React project, run this command in your proj -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 @@ -29,7 +28,6 @@ You can then get started [writing stories](/docs/get-started/whats-a-story/), [r icon: '/images/logos/builders/vite.svg' }]} /> - ## Run Storybook To run Storybook for a particular project, run the following: @@ -42,7 +40,6 @@ To build Storybook, run: You will find the output in the configured `outputDir` (default is `storybook-static`). - ## FAQ ### How do I migrate from the React Webpack framework? @@ -74,7 +71,6 @@ Then, update your `.storybook/main.js|ts` to change the framework property: {/* prettier-ignore-end */} - ## API ### Options diff --git a/docs/get-started/frameworks/react-webpack5.mdx b/docs/get-started/frameworks/react-webpack5.mdx index 64dd18c8ac53..c37cf6bdec7f 100644 --- a/docs/get-started/frameworks/react-webpack5.mdx +++ b/docs/get-started/frameworks/react-webpack5.mdx @@ -21,7 +21,7 @@ To install Storybook in an existing React project, run this command in your proj -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 @@ -35,7 +35,6 @@ You can then get started [writing stories](/docs/get-started/whats-a-story/), [r icon: '/images/logos/builders/webpack.svg' }]} /> - ## Run Storybook To run Storybook for a particular project, run the following: @@ -48,7 +47,6 @@ To build Storybook, run: You will find the output in the configured `outputDir` (default is `storybook-static`). - ## Configure ### Create React App (CRA) @@ -61,7 +59,6 @@ This preset enables support for all CRA features, including Sass/SCSS and TypeSc If you're working on an app that was initialized manually (i.e., without the use of CRA), ensure that your app has [react-dom](https://www.npmjs.com/package/react-dom) included as a dependency. Failing to do so can lead to unforeseen issues with Storybook and your project. - ## FAQ ### How do I manually install the React Webpack framework? diff --git a/docs/get-started/frameworks/svelte-vite.mdx b/docs/get-started/frameworks/svelte-vite.mdx index a3a87498cf43..f5d8408e815c 100644 --- a/docs/get-started/frameworks/svelte-vite.mdx +++ b/docs/get-started/frameworks/svelte-vite.mdx @@ -8,14 +8,13 @@ sidebar: Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for applications using [Svelte](https://svelte.dev/) built with [Vite](https://vitejs.dev/). - ## Install To install Storybook in an existing Svelte project, run this command in your project's root directory: -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 @@ -29,7 +28,6 @@ You can then get started [writing stories](/docs/get-started/whats-a-story/), [r icon: '/images/logos/builders/vite.svg' }]} /> - ## Run Storybook To run Storybook for a particular project, run the following: @@ -42,7 +40,6 @@ To build Storybook, run: You will find the output in the configured `outputDir` (default is `storybook-static`). - ## 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. @@ -65,7 +62,7 @@ Run the following command to install the addon. - 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. + 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. @@ -159,7 +156,6 @@ If you enabled automatic documentation generation with the `autodocs` story prop {/* prettier-ignore-end */} - ## FAQ ### How do I manually install the Svelte framework? @@ -179,7 +175,6 @@ Then, update your `.storybook/main.js|ts` to change the framework property: {/* prettier-ignore-end */} - ## API ### Options diff --git a/docs/get-started/frameworks/sveltekit.mdx b/docs/get-started/frameworks/sveltekit.mdx index 78e1bf196d0b..ff46962f7051 100644 --- a/docs/get-started/frameworks/sveltekit.mdx +++ b/docs/get-started/frameworks/sveltekit.mdx @@ -14,7 +14,7 @@ To install Storybook in an existing SvelteKit project, run this command in your -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 @@ -28,7 +28,6 @@ You can then get started [writing stories](/docs/get-started/whats-a-story/), [r icon: '/images/logos/builders/vite.svg' }]} /> - ## Run Storybook To run Storybook for a particular project, run the following: @@ -41,7 +40,6 @@ To build Storybook, run: You will find the output in the configured `outputDir` (default is `storybook-static`). - ## Configure This section covers SvelteKit support and configuration options. @@ -115,7 +113,7 @@ Run the following command to install the addon. - 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. + 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. @@ -235,7 +233,6 @@ Finally, these packages are now either obsolete or part of `@storybook/sveltekit * `storybook-builder-vite` * `@storybook/builder-vite` - ## API ### Parameters diff --git a/docs/get-started/frameworks/vue3-vite.mdx b/docs/get-started/frameworks/vue3-vite.mdx index 32db1034f25d..a62dd6eb1421 100644 --- a/docs/get-started/frameworks/vue3-vite.mdx +++ b/docs/get-started/frameworks/vue3-vite.mdx @@ -14,7 +14,7 @@ To install Storybook in an existing Vue project, run this command in your projec -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 @@ -40,16 +40,6 @@ To build Storybook, run: You will find the output in the configured `outputDir` (default is `storybook-static`). - - - - - - - - - - ## Configure Storybook for Vue 3 with Vite is designed to work out of the box with minimal configuration. This section covers configuration options for the framework. @@ -246,8 +236,6 @@ export default config; Otherwise, you might face missing component types/descriptions or unresolvable import aliases like `@/some/import`. - - ## FAQ ### How do I manually install the Vue framework? @@ -278,9 +266,6 @@ Then, update your `.storybook/main.js|ts` to change the framework property: {/* prettier-ignore-end */} - - - ## API ### Options diff --git a/docs/get-started/frameworks/web-components-vite.mdx b/docs/get-started/frameworks/web-components-vite.mdx index bba67d69de30..a7717aa7bc65 100644 --- a/docs/get-started/frameworks/web-components-vite.mdx +++ b/docs/get-started/frameworks/web-components-vite.mdx @@ -8,14 +8,13 @@ sidebar: Storybook for Web components & Vite is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for applications using [Web components](https://www.webcomponents.org/introduction) built with [Vite](https://vitejs.dev/). - ## Install To install Storybook in an existing project, run this command in your project's root directory: -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 @@ -25,7 +24,6 @@ You can then get started [writing stories](/docs/get-started/whats-a-story/), [r icon: '/images/logos/builders/vite.svg' }]} /> - ## Run Storybook To run Storybook for a particular project, run the following: @@ -38,7 +36,6 @@ To build Storybook, run: You will find the output in the configured `outputDir` (default is `storybook-static`). - ## FAQ ### How do I manually install the Web Components framework?