Merge branch 'main' into rn-vs-rnw-redirect

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,

apps/frontpage/components/docs/mdx/code-snippets/code-snippets.tsx

@@ -2,6 +2,7 @@
 'use client';
 
 import { useEffect, useState, type FC } from 'react';
+import { usePathname } from 'next/navigation';
 import { type CodeSnippetsProps } from '@repo/utils';
 import { CodeSnippetsWrapper } from '@repo/ui';
 import { InfoIcon } from '@storybook/icons';
@@ -31,18 +32,44 @@ const Error = () => {
   );
 };
 
+/**
+ * For the framework docs pages, we coerce the active renderer to the relevant one for that framework.
+ * We do this _without_ affecting the actual activeRenderer value.
+ */
+const getActiveRenderer = (activeRendererIn: string | null, pathname: string) => {
+  // eslint-disable-next-line prefer-named-capture-group -- TODO: Enable via TS config changes
+  const matches = /\/docs\/get-started\/frameworks\/(.*)/.exec(pathname);
+
+  if (!matches) return activeRendererIn;
+
+  const framework = matches[1];
+  const frameworkOrRendererPortion = framework.replace(/-(?:vite|webpack5)/, '') as keyof typeof map;
+
+  const map = {
+    'nextjs': 'react',
+    'react-native-web': 'react',
+    'sveltekit': 'svelte',
+    'vue3': 'vue',
+  };
+
+  return  map[frameworkOrRendererPortion] ?? frameworkOrRendererPortion;
+}
+
 export const CodeSnippetsClient: FC<CodeSnippetsClientProps> = ({
   content,
 }) => {
   const {
-    activeRenderer,
+    activeRenderer: activeRendererIn,
     activeLanguage,
     activePackageManager,
     setLanguage,
     setPackageManager,
   } = useDocs();
   const [activeTab, setActiveTab] = useState<Tab['id'] | null>(null);
 
+  const pathname = usePathname();
+  const activeRenderer = getActiveRenderer(activeRendererIn, pathname);
+
   // Get filters - If preformatted text, we don't need filters
   const filters = getFilters({ content: content ?? [], activeRenderer });
 

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
       <CopyIcon />
       <AnimatePresence>
         {state ? (

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
 ```
 
 </Callout>

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
 ```
 
 </Callout>

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
 ```
 
 </Callout>

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
 ```
 
 </Callout>
@@ -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.

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
 ```
 
 </Callout>

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
 ```
 
 </Callout>

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
 ```
 
 </Callout>

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
 ```
 
 </Callout>
@@ -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

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
 ```
 
 </Callout>

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
 ```
 
 </Callout>

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
 ```
 
 </Callout>

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
 ```
 
 </Callout>

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
 ```
 
 </Callout>

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.

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,
   },