diff --git a/apps/frontpage/components/docs/mdx/code-snippets/code-snippets.stories.tsx b/apps/frontpage/components/docs/mdx/code-snippets/code-snippets.stories.tsx index 2cff1b60..698249d9 100644 --- a/apps/frontpage/components/docs/mdx/code-snippets/code-snippets.stories.tsx +++ b/apps/frontpage/components/docs/mdx/code-snippets/code-snippets.stories.tsx @@ -36,7 +36,7 @@ const meta = { }, activeLanguage: { control: 'radio', - options: ['js', 'ts', 'ts-4.9'], + options: ['js', 'ts', 'ts-4-9'], }, activePackageManager: { control: 'radio', @@ -194,6 +194,14 @@ export const MultipleTabsVue2And3Suffix: Story = { }, }; +export const CoerceTS49ToTS: Story = { + name: 'Coerce TS 4.9 language to TS snippet', + args: { + content: content2.filter((tab) => tab.language !== 'ts-4-9'), + activeLanguage: 'ts-4-9', + }, +} + export const NoRenderer: Story = { args: { content: content2, diff --git a/apps/frontpage/components/home/hero/init-command.tsx b/apps/frontpage/components/home/hero/init-command.tsx index b7eee989..464c1578 100644 --- a/apps/frontpage/components/home/hero/init-command.tsx +++ b/apps/frontpage/components/home/hero/init-command.tsx @@ -8,7 +8,7 @@ export const InitCommand: FC = () => { const [state, setState] = useState(false); const onClick = () => { - copy('npx storybook@latest init'); + copy('npm create storybook@latest'); setState(true); setTimeout(() => { setState(false); @@ -21,7 +21,7 @@ export const InitCommand: FC = () => { onClick={onClick} type="button" > - npx storybook@latest init + npm create storybook@latest {state ? ( diff --git a/apps/frontpage/content/recipes/@angular/material.mdx b/apps/frontpage/content/recipes/@angular/material.mdx index 63be1bfc..d46e5489 100644 --- a/apps/frontpage/content/recipes/@angular/material.mdx +++ b/apps/frontpage/content/recipes/@angular/material.mdx @@ -5,7 +5,7 @@ This recipe assumes that you already have an Angular app using `@angular/materia ```shell # Add Storybook: -npx storybook@latest init +npm create storybook@latest ``` diff --git a/apps/frontpage/content/recipes/@emotion/styled.mdx b/apps/frontpage/content/recipes/@emotion/styled.mdx index cfbf897e..23a41c5a 100644 --- a/apps/frontpage/content/recipes/@emotion/styled.mdx +++ b/apps/frontpage/content/recipes/@emotion/styled.mdx @@ -4,7 +4,7 @@ This recipe assumes that you have a React app using Emotion and have just set up ```shell # Add Storybook: -npx storybook@latest init +npm create storybook@latest ``` diff --git a/apps/frontpage/content/recipes/@mui/material.mdx b/apps/frontpage/content/recipes/@mui/material.mdx index 6746e434..06810263 100644 --- a/apps/frontpage/content/recipes/@mui/material.mdx +++ b/apps/frontpage/content/recipes/@mui/material.mdx @@ -4,7 +4,7 @@ This recipe assumes that you already have a React app using `@mui/material` and ```shell # Add Storybook: -npx storybook@latest init +npm create storybook@latest ``` diff --git a/apps/frontpage/content/recipes/@sveltejs/kit.mdx b/apps/frontpage/content/recipes/@sveltejs/kit.mdx index 22edc375..a29fb995 100644 --- a/apps/frontpage/content/recipes/@sveltejs/kit.mdx +++ b/apps/frontpage/content/recipes/@sveltejs/kit.mdx @@ -4,7 +4,7 @@ This recipe assumes that you already have a **SvelteKit >= 1.0** app and have ju ```shell # Add Storybook: -npx storybook@latest init +npm create storybook@latest ``` @@ -23,7 +23,7 @@ With our package, Storybook automatically mirrors the project settings of Svelte Run the following command in your SvelteKit project's root directory, and follow the prompts: ```shell -npx storybook@latest init +npm create storybook@latest ``` Storybook will automatically detect your SvelteKit project and install the necessary packages and configurations. diff --git a/apps/frontpage/content/recipes/@vanilla-extract/css.mdx b/apps/frontpage/content/recipes/@vanilla-extract/css.mdx index 889f18f0..19025489 100644 --- a/apps/frontpage/content/recipes/@vanilla-extract/css.mdx +++ b/apps/frontpage/content/recipes/@vanilla-extract/css.mdx @@ -4,7 +4,7 @@ This recipe assumes that you already have an app using Vanilla-extract and have ```shell # Add Storybook: -npx storybook@latest init +npm create storybook@latest ``` diff --git a/apps/frontpage/content/recipes/bootstrap.mdx b/apps/frontpage/content/recipes/bootstrap.mdx index 962b97cb..e1903c5d 100644 --- a/apps/frontpage/content/recipes/bootstrap.mdx +++ b/apps/frontpage/content/recipes/bootstrap.mdx @@ -4,7 +4,7 @@ This recipe assumes that you are using Storybook >=7.0 using the [getting starte ```shell # Add Storybook: -npx storybook@latest init +npm create storybook@latest ``` diff --git a/apps/frontpage/content/recipes/less.mdx b/apps/frontpage/content/recipes/less.mdx index f046a857..7c1483fb 100644 --- a/apps/frontpage/content/recipes/less.mdx +++ b/apps/frontpage/content/recipes/less.mdx @@ -4,7 +4,7 @@ This recipe assumes that you have an app using Less and have just set up **Story ```shell # Add Storybook: -npx storybook@latest init +npm create storybook@latest ``` diff --git a/apps/frontpage/content/recipes/next.mdx b/apps/frontpage/content/recipes/next.mdx index c6e3d8df..cdbf2aec 100644 --- a/apps/frontpage/content/recipes/next.mdx +++ b/apps/frontpage/content/recipes/next.mdx @@ -4,7 +4,7 @@ This recipe assumes that you have a Next >= 12 app. Don’t have this? Follow Ne ```shell # Add Storybook: -npx storybook@latest init +npm create storybook@latest ``` @@ -16,7 +16,7 @@ npx storybook@latest init Follow the prompts after running this command in your Next.js project's root directory: ```shell -npx storybook@latest init +npm create storybook@latest ``` ### In a project with Storybook diff --git a/apps/frontpage/content/recipes/pinia.mdx b/apps/frontpage/content/recipes/pinia.mdx index 7d618021..9b514e16 100644 --- a/apps/frontpage/content/recipes/pinia.mdx +++ b/apps/frontpage/content/recipes/pinia.mdx @@ -4,7 +4,7 @@ This recipe assumes that you have a Vue 3 app using Pinia and have just set up * ```shell # Add Storybook: -npx storybook@latest init +npm create storybook@latest ``` diff --git a/apps/frontpage/content/recipes/sass.mdx b/apps/frontpage/content/recipes/sass.mdx index d5310ffa..27bd44e1 100644 --- a/apps/frontpage/content/recipes/sass.mdx +++ b/apps/frontpage/content/recipes/sass.mdx @@ -4,7 +4,7 @@ This recipe assumes that you have an app using Sass and have just set up **Story ```shell # Add Storybook: -npx storybook@latest init +npm create storybook@latest ``` diff --git a/apps/frontpage/content/recipes/styled-components.mdx b/apps/frontpage/content/recipes/styled-components.mdx index 42a83111..c0d3d41d 100644 --- a/apps/frontpage/content/recipes/styled-components.mdx +++ b/apps/frontpage/content/recipes/styled-components.mdx @@ -4,7 +4,7 @@ This recipe assumes that you have a React app using styled-components and have j ```shell # Add Storybook: -npx storybook@latest init +npm create storybook@latest ``` diff --git a/apps/frontpage/content/recipes/tailwindcss.mdx b/apps/frontpage/content/recipes/tailwindcss.mdx index 747fae7f..737b99a6 100644 --- a/apps/frontpage/content/recipes/tailwindcss.mdx +++ b/apps/frontpage/content/recipes/tailwindcss.mdx @@ -4,7 +4,7 @@ This recipe assumes that you have a React app using Tailwind CSS and have just s ```shell # Add Storybook: -npx storybook@latest init +npm create storybook@latest ``` diff --git a/apps/frontpage/content/recipes/vuetify.mdx b/apps/frontpage/content/recipes/vuetify.mdx index 5c6a8c6d..e7068716 100644 --- a/apps/frontpage/content/recipes/vuetify.mdx +++ b/apps/frontpage/content/recipes/vuetify.mdx @@ -4,7 +4,7 @@ This recipe assumes that you have a Vue 3 app using Vuetify v3 and have just set ```shell # Add Storybook: -npx storybook@latest init +npm create storybook@latest ``` diff --git a/apps/frontpage/content/releases/8.6.md b/apps/frontpage/content/releases/8.6.md new file mode 100644 index 00000000..f588f222 --- /dev/null +++ b/apps/frontpage/content/releases/8.6.md @@ -0,0 +1,23 @@ +--- +title: 'Storybook 8.6 - February 2025' +--- + +The 8.6 release focuses on [Storybook Test](https://storybook.js.org/blog/storybook-test-sneak-peek/), which brings realtime component, accessibility, and visual UI tests to your favorite component workshop. + +Here’s what’s new: + +- 🎁 **Storybook Test installer** for out-of-the-box tests in new projects +- ♿️ **Accessibility “todo” workflow** to systematically fix a11y violations +- 🗜️ **80% smaller create-storybook** package for much faster installs +- 🧪 **Dozens of Test fixes** based on user feedback +- 📕 **Docs fixes** for table of contents, code snippets, and more +- 🚨 **Key security fixes** for Vite and ESbuild +- 💯 Hundreds more improvements + +Browse the [changelogs](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) for the full list of changes. + +--- + +There are no breaking changes, but you can refer to our +[Migration guide](https://storybook.js.org/docs/migration-guide) to upgrade from +pre-8.0 of Storybook. diff --git a/packages/utils/src/docs-versions.tsx b/packages/utils/src/docs-versions.tsx index bcaabac4..7de7cdf8 100644 --- a/packages/utils/src/docs-versions.tsx +++ b/packages/utils/src/docs-versions.tsx @@ -28,13 +28,13 @@ export interface DocsVersion { **/ export const docsVersions: DocsVersion[] = [ { - label: 'Version 8.5', - id: '8.5', + label: 'Version 8.6', + id: '8.6', branch: 'main', }, { - label: 'Version 8.6 (beta)', - id: '8.6', + label: 'Version 9.0 (alpha)', + id: '9.0', branch: 'next', preRelease: true, },