diff --git a/CHANGELOG.md b/CHANGELOG.md index 6283eba4f47b..6777dfc83da6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## 10.1.10 + +- Core: Fix `.env`-file parsing - [#33383](https://github.com/storybookjs/storybook/pull/33383), thanks @JReinhold! +- Next.js: Handle v14 compatibility for draftMode import - [#33341](https://github.com/storybookjs/storybook/pull/33341), thanks @tanujbhaud! + ## 10.1.9 - Telemetry: Remove instance of check for sub-error handling - [#33356](https://github.com/storybookjs/storybook/pull/33356), thanks @valentinpalkovic! diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts index 0f28b883d413..ab35c51aece8 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -178,6 +178,7 @@ export default async ( }, }), new DefinePlugin({ + 'process.env': `(${JSON.stringify(envs)})`, ...stringifyProcessEnvs(envs), NODE_ENV: JSON.stringify( features?.developmentModeForBuild && isProd ? 'development' : process.env.NODE_ENV diff --git a/code/core/src/common/utils/envs.ts b/code/core/src/common/utils/envs.ts index e825bd6af2ae..d62eeb6048be 100644 --- a/code/core/src/common/utils/envs.ts +++ b/code/core/src/common/utils/envs.ts @@ -11,7 +11,7 @@ export async function loadEnvs(options: { production?: boolean } = {}): Promise< const { getEnvironment } = await import('lazy-universal-dotenv'); const defaultNodeEnv = options.production ? 'production' : 'development'; - const env: Record = { + const baseEnv: Record = { // eslint-disable-next-line @typescript-eslint/dot-notation NODE_ENV: process.env['NODE_ENV'] || defaultNodeEnv, NODE_PATH: process.env['NODE_PATH'] || '', @@ -23,27 +23,23 @@ export async function loadEnvs(options: { production?: boolean } = {}): Promise< PUBLIC_URL: options.production ? '.' : '', }; - Object.keys(process.env) - .filter((name) => /^STORYBOOK_/.test(name)) - .forEach((name) => { - env[name] = process.env[name]; - }); + const dotenv = getEnvironment({ nodeEnv: baseEnv['NODE_ENV'] }); - const base = Object.entries(env).reduce( - (acc, [k, v]) => Object.assign(acc, { [k]: JSON.stringify(v) }), - {} as Record + const envEntries = Object.fromEntries( + Object.entries({ + // TODO: it seems wrong that dotenv overrides process.env, but that's how it has always worked + ...process.env, + ...dotenv.raw, + }).filter(([name]) => /^STORYBOOK_/.test(name)) ); - const { stringified, raw } = getEnvironment({ nodeEnv: env['NODE_ENV'] }); + const raw: Record = { ...baseEnv, ...envEntries }; + (raw as any).NODE_PATH = nodePathsToArray((raw.NODE_PATH as string) || ''); - const fullRaw = { ...env, ...raw }; - - fullRaw.NODE_PATH = nodePathsToArray(fullRaw.NODE_PATH || ''); - - return { - stringified: { ...base, ...stringified }, - raw: fullRaw, - }; + const stringified = Object.fromEntries( + Object.entries(raw).map(([key, value]) => [key, JSON.stringify(value)]) + ); + return { raw, stringified }; } export const stringifyEnvs = (raw: Record): Record => @@ -57,13 +53,6 @@ export const stringifyProcessEnvs = (raw: Record): Record -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 8ad200257846..e03fdaf08731 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 [`.storybook/preview.js|ts`](../../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). ```js title=".storybook/preview.js|ts" import '../styles/globals.scss'; @@ -461,7 +446,7 @@ export function Button() { #### 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. ```jsx title="src/components/HelloWorld.jsx" // This will work in Storybook @@ -495,7 +480,7 @@ function HelloWorld() { export default HelloWorld; ``` -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) @@ -513,7 +498,17 @@ You can use your own babel config too. This is an example of how you can customi } ``` -#### PostCSS +### 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 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. @@ -704,7 +699,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? diff --git a/docs/versions/latest.json b/docs/versions/latest.json index 1b1e4a906e8a..6a4b69835c9b 100644 --- a/docs/versions/latest.json +++ b/docs/versions/latest.json @@ -1 +1 @@ -{"version":"10.1.9","info":{"plain":"- Telemetry: Remove instance of check for sub-error handling - [#33356](https://github.com/storybookjs/storybook/pull/33356), thanks @valentinpalkovic!"}} \ No newline at end of file +{"version":"10.1.10","info":{"plain":"- Core: Fix `.env`-file parsing - [#33383](https://github.com/storybookjs/storybook/pull/33383), thanks @JReinhold!\n- Next.js: Handle v14 compatibility for draftMode import - [#33341](https://github.com/storybookjs/storybook/pull/33341), thanks @tanujbhaud!"}} \ No newline at end of file