From 89bd3673be7e4359ffe90ba471b33a1d856d6102 Mon Sep 17 00:00:00 2001 From: MohammadHossein Jahanbakhsh Date: Mon, 17 Aug 2026 02:15:45 +0330 Subject: [PATCH] Scaffold React TypeScript stories as .stories.tsx Using .ts for React story files leads to misleading Vite errors when users later add JSX (render functions, decorators, inline templates). Rename CLI templates for React frameworks to .stories.tsx and document the preference. Closes #21306 --- code/e2e-sandbox/addon-mcp.spec.ts | 2 +- .../cli/ts/{Button.stories.ts => Button.stories.tsx} | 0 .../cli/ts/{Header.stories.ts => Header.stories.tsx} | 0 .../cli/ts/{Page.stories.ts => Page.stories.tsx} | 0 .../cli/ts/{Button.stories.ts => Button.stories.tsx} | 0 .../cli/ts/{Header.stories.ts => Header.stories.tsx} | 0 .../cli/ts/{Page.stories.ts => Page.stories.tsx} | 0 .../cli/ts/{Button.stories.ts => Button.stories.tsx} | 0 .../cli/ts/{Header.stories.ts => Header.stories.tsx} | 0 .../cli/ts/{Page.stories.ts => Page.stories.tsx} | 0 .../cli/ts/{Button.stories.ts => Button.stories.tsx} | 0 .../cli/ts/{Header.stories.ts => Header.stories.tsx} | 0 .../cli/ts/{Page.stories.ts => Page.stories.tsx} | 0 .../cli/ts/{Button.stories.ts => Button.stories.tsx} | 0 .../cli/ts/{Header.stories.ts => Header.stories.tsx} | 0 .../cli/ts/{Page.stories.ts => Page.stories.tsx} | 0 docs/get-started/setup.mdx | 2 +- docs/writing-stories/typescript.mdx | 10 ++++++++++ 18 files changed, 12 insertions(+), 2 deletions(-) rename code/frameworks/nextjs-vite/template/cli/ts/{Button.stories.ts => Button.stories.tsx} (100%) rename code/frameworks/nextjs-vite/template/cli/ts/{Header.stories.ts => Header.stories.tsx} (100%) rename code/frameworks/nextjs-vite/template/cli/ts/{Page.stories.ts => Page.stories.tsx} (100%) rename code/frameworks/nextjs/template/cli/ts/{Button.stories.ts => Button.stories.tsx} (100%) rename code/frameworks/nextjs/template/cli/ts/{Header.stories.ts => Header.stories.tsx} (100%) rename code/frameworks/nextjs/template/cli/ts/{Page.stories.ts => Page.stories.tsx} (100%) rename code/frameworks/react-vite/template/cli/ts/{Button.stories.ts => Button.stories.tsx} (100%) rename code/frameworks/react-vite/template/cli/ts/{Header.stories.ts => Header.stories.tsx} (100%) rename code/frameworks/react-vite/template/cli/ts/{Page.stories.ts => Page.stories.tsx} (100%) rename code/frameworks/react-webpack5/template/cli/ts/{Button.stories.ts => Button.stories.tsx} (100%) rename code/frameworks/react-webpack5/template/cli/ts/{Header.stories.ts => Header.stories.tsx} (100%) rename code/frameworks/react-webpack5/template/cli/ts/{Page.stories.ts => Page.stories.tsx} (100%) rename code/frameworks/tanstack-react/template/cli/ts/{Button.stories.ts => Button.stories.tsx} (100%) rename code/frameworks/tanstack-react/template/cli/ts/{Header.stories.ts => Header.stories.tsx} (100%) rename code/frameworks/tanstack-react/template/cli/ts/{Page.stories.ts => Page.stories.tsx} (100%) diff --git a/code/e2e-sandbox/addon-mcp.spec.ts b/code/e2e-sandbox/addon-mcp.spec.ts index 4a084b64ccbb..280f2fc63b0b 100644 --- a/code/e2e-sandbox/addon-mcp.spec.ts +++ b/code/e2e-sandbox/addon-mcp.spec.ts @@ -209,7 +209,7 @@ test.describe('addon-mcp', () => { stories: [ { exportName: storyName, - absoluteStoryPath: path.join(sandboxDir, 'src', 'stories', 'Button.stories.ts'), + absoluteStoryPath: path.join(sandboxDir, 'src', 'stories', 'Button.stories.tsx'), }, ], }, diff --git a/code/frameworks/nextjs-vite/template/cli/ts/Button.stories.ts b/code/frameworks/nextjs-vite/template/cli/ts/Button.stories.tsx similarity index 100% rename from code/frameworks/nextjs-vite/template/cli/ts/Button.stories.ts rename to code/frameworks/nextjs-vite/template/cli/ts/Button.stories.tsx diff --git a/code/frameworks/nextjs-vite/template/cli/ts/Header.stories.ts b/code/frameworks/nextjs-vite/template/cli/ts/Header.stories.tsx similarity index 100% rename from code/frameworks/nextjs-vite/template/cli/ts/Header.stories.ts rename to code/frameworks/nextjs-vite/template/cli/ts/Header.stories.tsx diff --git a/code/frameworks/nextjs-vite/template/cli/ts/Page.stories.ts b/code/frameworks/nextjs-vite/template/cli/ts/Page.stories.tsx similarity index 100% rename from code/frameworks/nextjs-vite/template/cli/ts/Page.stories.ts rename to code/frameworks/nextjs-vite/template/cli/ts/Page.stories.tsx diff --git a/code/frameworks/nextjs/template/cli/ts/Button.stories.ts b/code/frameworks/nextjs/template/cli/ts/Button.stories.tsx similarity index 100% rename from code/frameworks/nextjs/template/cli/ts/Button.stories.ts rename to code/frameworks/nextjs/template/cli/ts/Button.stories.tsx diff --git a/code/frameworks/nextjs/template/cli/ts/Header.stories.ts b/code/frameworks/nextjs/template/cli/ts/Header.stories.tsx similarity index 100% rename from code/frameworks/nextjs/template/cli/ts/Header.stories.ts rename to code/frameworks/nextjs/template/cli/ts/Header.stories.tsx diff --git a/code/frameworks/nextjs/template/cli/ts/Page.stories.ts b/code/frameworks/nextjs/template/cli/ts/Page.stories.tsx similarity index 100% rename from code/frameworks/nextjs/template/cli/ts/Page.stories.ts rename to code/frameworks/nextjs/template/cli/ts/Page.stories.tsx diff --git a/code/frameworks/react-vite/template/cli/ts/Button.stories.ts b/code/frameworks/react-vite/template/cli/ts/Button.stories.tsx similarity index 100% rename from code/frameworks/react-vite/template/cli/ts/Button.stories.ts rename to code/frameworks/react-vite/template/cli/ts/Button.stories.tsx diff --git a/code/frameworks/react-vite/template/cli/ts/Header.stories.ts b/code/frameworks/react-vite/template/cli/ts/Header.stories.tsx similarity index 100% rename from code/frameworks/react-vite/template/cli/ts/Header.stories.ts rename to code/frameworks/react-vite/template/cli/ts/Header.stories.tsx diff --git a/code/frameworks/react-vite/template/cli/ts/Page.stories.ts b/code/frameworks/react-vite/template/cli/ts/Page.stories.tsx similarity index 100% rename from code/frameworks/react-vite/template/cli/ts/Page.stories.ts rename to code/frameworks/react-vite/template/cli/ts/Page.stories.tsx diff --git a/code/frameworks/react-webpack5/template/cli/ts/Button.stories.ts b/code/frameworks/react-webpack5/template/cli/ts/Button.stories.tsx similarity index 100% rename from code/frameworks/react-webpack5/template/cli/ts/Button.stories.ts rename to code/frameworks/react-webpack5/template/cli/ts/Button.stories.tsx diff --git a/code/frameworks/react-webpack5/template/cli/ts/Header.stories.ts b/code/frameworks/react-webpack5/template/cli/ts/Header.stories.tsx similarity index 100% rename from code/frameworks/react-webpack5/template/cli/ts/Header.stories.ts rename to code/frameworks/react-webpack5/template/cli/ts/Header.stories.tsx diff --git a/code/frameworks/react-webpack5/template/cli/ts/Page.stories.ts b/code/frameworks/react-webpack5/template/cli/ts/Page.stories.tsx similarity index 100% rename from code/frameworks/react-webpack5/template/cli/ts/Page.stories.ts rename to code/frameworks/react-webpack5/template/cli/ts/Page.stories.tsx diff --git a/code/frameworks/tanstack-react/template/cli/ts/Button.stories.ts b/code/frameworks/tanstack-react/template/cli/ts/Button.stories.tsx similarity index 100% rename from code/frameworks/tanstack-react/template/cli/ts/Button.stories.ts rename to code/frameworks/tanstack-react/template/cli/ts/Button.stories.tsx diff --git a/code/frameworks/tanstack-react/template/cli/ts/Header.stories.ts b/code/frameworks/tanstack-react/template/cli/ts/Header.stories.tsx similarity index 100% rename from code/frameworks/tanstack-react/template/cli/ts/Header.stories.ts rename to code/frameworks/tanstack-react/template/cli/ts/Header.stories.tsx diff --git a/code/frameworks/tanstack-react/template/cli/ts/Page.stories.ts b/code/frameworks/tanstack-react/template/cli/ts/Page.stories.tsx similarity index 100% rename from code/frameworks/tanstack-react/template/cli/ts/Page.stories.ts rename to code/frameworks/tanstack-react/template/cli/ts/Page.stories.tsx diff --git a/docs/get-started/setup.mdx b/docs/get-started/setup.mdx index 90c25fbde4a0..bea36e64abb6 100644 --- a/docs/get-started/setup.mdx +++ b/docs/get-started/setup.mdx @@ -7,7 +7,7 @@ sidebar: Now that you’ve learned what stories are and how to browse them, let’s demo working on one of your components. -Pick a simple component from your project, like a Button, and write a `.stories.js`, `.stories.ts`, or `.stories.svelte` file to go along with it. It might look something like this: +Pick a simple component from your project, like a Button, and write a `.stories.js`, `.stories.ts`, `.stories.tsx`, or `.stories.svelte` file to go along with it. It might look something like this: diff --git a/docs/writing-stories/typescript.mdx b/docs/writing-stories/typescript.mdx index 8552cc24aefb..4ca3ce352fda 100644 --- a/docs/writing-stories/typescript.mdx +++ b/docs/writing-stories/typescript.mdx @@ -6,6 +6,16 @@ Writing your stories in [TypeScript](https://www.typescriptlang.org/) makes you Storybook has built-in TypeScript support, so you can get started with zero configuration required. + + + + +For React projects, prefer the `.stories.tsx` extension (the CLI scaffolds TypeScript examples this way). Using `.tsx` avoids confusing Vite errors if you later add JSX—for example in a custom `render`, decorator, or inline template—inside the story file. + + + + +