Core: Rename preview.ts to preview.tsx in generated projects#34396
Merged
Conversation
|
View your CI Pipeline Execution ↗ for commit 15374c9
☁️ Nx Cloud last updated this comment at |
Contributor
There was a problem hiding this comment.
Pull request overview
Updates Storybook’s project scaffolding/docs to use preview.tsx/preview.jsx (instead of preview.ts/preview.js) so generated projects can safely contain JSX in preview decorators without rename churn.
Changes:
- Switch
create-storybook’s generated preview config filename to.storybook/preview.tsx/.storybook/preview.jsx. - Update documentation pages and snippet metadata to reference the new preview filename(s).
- Adjust a small set of tests/docs that referenced
preview.ts.
Reviewed changes
Copilot reviewed 103 out of 103 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| docs/writing-tests/interaction-testing.mdx | Updates references to the preview config filename in testing docs. |
| docs/writing-tests/integrations/stories-in-unit-tests.mdx | Updates preview filename reference in unit-test integration docs. |
| docs/writing-tests/accessibility-testing.mdx | Updates preview filename references for a11y configuration examples. |
| docs/writing-stories/tags.mdx | Updates preview filename references for applying tags at project level. |
| docs/writing-stories/parameters.mdx | Updates preview filename reference for global parameters. |
| docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx | Updates preview filename references for automocking guidance. |
| docs/writing-stories/decorators.mdx | Updates preview filename reference for global decorators. |
| docs/writing-stories/args.mdx | Updates preview filename reference for global args. |
| docs/writing-docs/code-panel.mdx | Updates preview filename reference for enabling Code panel. |
| docs/writing-docs/autodocs.mdx | Updates preview filename references in autodocs configuration guidance. |
| docs/get-started/setup.mdx | Updates preview filename reference in initial setup guidance. |
| docs/get-started/frameworks/vue3-vite.mdx | Updates preview filename references in Vue 3 + Vite setup docs. |
| docs/get-started/frameworks/nextjs.mdx | Updates preview filename references in Next.js setup docs. |
| docs/get-started/frameworks/nextjs-vite.mdx | Updates preview filename references in Next.js (Vite) setup docs. |
| docs/get-started/frameworks/angular.mdx | Updates preview filename references in Angular setup docs. |
| docs/essentials/viewport.mdx | Updates preview filename reference for viewport configuration. |
| docs/essentials/toolbars-and-globals.mdx | Updates preview filename references for globals/globalTypes guidance. |
| docs/essentials/controls.mdx | Updates preview filename references across Controls configuration docs. |
| docs/essentials/backgrounds.mdx | Updates preview filename reference for backgrounds configuration. |
| docs/contribute/documentation/new-snippets.mdx | Updates snippet contribution example filename to preview.tsx. |
| docs/configure/styling-and-css.mdx | Updates preview filename references for global styling instructions. |
| docs/configure/story-rendering.mdx | Updates preview filename reference in “running code for every story”. |
| docs/api/portable-stories/portable-stories-vitest.mdx | Updates preview filename references in Vitest portable stories docs. |
| docs/api/portable-stories/portable-stories-playwright.mdx | Updates preview filename references in Playwright portable stories docs. |
| docs/api/portable-stories/portable-stories-jest.mdx | Updates preview filename references in Jest portable stories docs. |
| docs/api/parameters.mdx | Updates preview filename references for project-level parameters. |
| docs/api/csf/csf-next.mdx | Updates preview filename references in CSF Next docs. |
| docs/api/arg-types.mdx | Updates preview filename references for global argTypes. |
| docs/_snippets/tags-in-preview.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/tags-autodocs-in-preview.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-with-styled-components-decorator.md | Updates snippet filenames to preview.tsx/preview.jsx across renderers. |
| docs/_snippets/storybook-preview-with-ordered-pages.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-with-ordered-pages-and-wildcard.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-with-library-decorator.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-use-global-type.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-sort-function.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-register-language-globally.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-parameters-color-swatches.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-optout-inline.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-matching-argtypes.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-locales-globaltype.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-layout-param.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-import-global-styles.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-global-parameters.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-global-loader.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-global-decorator.md | Updates snippet filenames to preview.tsx/preview.jsx in some sections. |
| docs/_snippets/storybook-preview-expanded-controls.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-enable-toc.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-empty-sort-object.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-docs-dark-theme.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-doc-blocks-controls-exclude-prop.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-custom-toc.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-custom-params.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-custom-elements-config.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-custom-code-renderer.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-custom-canvas.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-configure-globaltypes.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-compodoc-config.md | Updates Angular snippet filename to preview.tsx. |
| docs/_snippets/storybook-preview-auto-docs-override-theme.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-auto-docs-override-mdx-container.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-auto-docs-custom-template-function.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-preview-auto-docs-custom-mdx-template.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-addons-preset-preview.md | Updates addon preview snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-addon-themes-data-attribute-decorator.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-addon-themes-classname-decorator.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/storybook-addon-controls-custom-matchers.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/shadow-dom-testing-library-in-preview.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/parameters-in-preview.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/parameters-docs-source-transform-in-preview.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/nextjs-styling-tailwind.md | Updates Next.js styling snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/nextjs-styling-sass-preview.md | Updates Next.js styling snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/nextjs-router-override-in-preview.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/nextjs-navigation-override-in-preview.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/nextjs-app-directory-in-preview.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/msw-addon-initialize.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/mock-context-container-global.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/initialize-library-in-preview.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/decorator-with-updateArgs.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/decorator-with-reactive-globals.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/decorator-parameterized-in-preview.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/code-panel-enable-in-preview.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/before-each-in-preview.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/before-all-in-preview.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/automock-register-spy.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/automock-register-mock-file.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/automock-register-full.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/args-in-preview.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/arg-types-in-preview.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/angular-add-compodoc.md | Updates Angular snippet filename to preview.tsx. |
| docs/_snippets/addon-viewport-options-in-preview.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/addon-viewport-add-viewport-in-preview.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/addon-backgrounds-options-in-preview.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/addon-a11y-parameter-error-in-preview.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/addon-a11y-config-rulesets-in-preview.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/addon-a11y-config-in-preview.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/actions-spyon-basic-example.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| docs/_snippets/actions-filtering-example.md | Updates snippet filenames to preview.tsx/preview.jsx. |
| code/lib/create-storybook/src/generators/configure.ts | Changes generated preview config filename to .tsx/.jsx. |
| code/frameworks/angular/src/client/preview.ts | Updates embedded example comment to reference preview.tsx. |
| code/e2e-tests/storybook-hooks.spec.ts | Updates e2e test path to preview.tsx. |
| code/core/src/core-server/utils/get-new-story-file.test.ts | Updates test fixture preview path to preview.tsx. |
| AGENTS.md | Updates agent-facing architecture note to reference preview.tsx. |
Comments suppressed due to low confidence (1)
code/lib/create-storybook/src/generators/configure.ts:118
configurePreview()now always targetspreview.tsx/preview.jsxand only checks for an existing file at that exact path. This can create a duplicate preview file when a template or existing project already haspreview.ts/preview.js(whichfindConfigFile()will prefer, since it searchests/jsbeforetsx/jsx). Consider detecting an existing preview config across all supported extensions (ts/js/tsx/jsx/mjs/cjs) and reusing that path, or only switching to tsx/jsx when generating a new file. Also ensure any templates/tsconfigs that explicitly include./preview.tsare updated to match the generated filename.
const previewConfigPath = `./${options.storybookConfigFolder}/preview.${isTypescript ? 'tsx' : 'jsx'}`;
// If the framework template included a preview then we have nothing to do
if (await pathExists(previewConfigPath)) {
return { previewConfigPath };
}
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughUpdated Storybook preview entrypoint extensions across repo: generator now emits Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
code/lib/create-storybook/src/generators/configure.ts (1)
113-118:⚠️ Potential issue | 🟠 MajorPrevent duplicate preview configs when legacy
preview.ts/jsalready exists.Line 113 + Line 116 now only check
preview.tsx/preview.jsx. In existing projects withpreview.tsorpreview.js, this will generate a second preview file instead of reusing the existing one, and resolution can still prefer the legacy file.Proposed fix
- const previewConfigPath = `./${options.storybookConfigFolder}/preview.${isTypescript ? 'tsx' : 'jsx'}`; - - // If the framework template included a preview then we have nothing to do - if (await pathExists(previewConfigPath)) { - return { previewConfigPath }; - } + const previewBasePath = `./${options.storybookConfigFolder}/preview`; + const preferredPreviewConfigPath = `${previewBasePath}.${isTypescript ? 'tsx' : 'jsx'}`; + const fallbackPreviewConfigPath = `${previewBasePath}.${isTypescript ? 'ts' : 'js'}`; + + // If a preview file already exists (new or legacy extension), keep using it + if (await pathExists(preferredPreviewConfigPath)) { + return { previewConfigPath: preferredPreviewConfigPath }; + } + if (await pathExists(fallbackPreviewConfigPath)) { + return { previewConfigPath: fallbackPreviewConfigPath }; + }- await writeFile(previewConfigPath, preview, { encoding: 'utf8' }); - - return { previewConfigPath }; + await writeFile(preferredPreviewConfigPath, preview, { encoding: 'utf8' }); + + return { previewConfigPath: preferredPreviewConfigPath };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@code/lib/create-storybook/src/generators/configure.ts` around lines 113 - 118, The current check only looks for preview.tsx/preview.jsx and can create duplicates when a legacy preview.ts or preview.js already exists; update the existence check in the configure generator to also look for legacy preview files (preview.ts and preview.js) inside options.storybookConfigFolder and prefer an existing legacy file by returning its path instead of creating a new previewConfigPath; use the existing pathExists utility and the isTypescript flag to build and check all four candidate filenames (preview.tsx, preview.jsx, preview.ts, preview.js) and return the first one that exists (or keep previewConfigPath if none exist).docs/_snippets/nextjs-router-override-in-preview.md (1)
23-30:⚠️ Potential issue | 🟠 MajorJS snippet contains TypeScript-only syntax.
The code fence is marked
language="js"andfilename=".storybook/preview.jsx"but includesimport type(line 25) and type annotationconst preview: Preview(line 30), which are TypeScript-only. Users copying this into a.jsxfile will encounter syntax errors.Fix
```js filename=".storybook/preview.jsx" renderer="react" language="js" tabTitle="CSF 3" // Replace your-framework with nextjs or nextjs-vite -import type { Preview } from '@storybook/your-framework'; - // 👇 Must include the `.mock` portion of filename to have mocks typed correctly import { getRouter } from "@storybook/your-framework/router.mock"; -const preview: Preview = { +const preview = { parameters: {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/_snippets/nextjs-router-override-in-preview.md` around lines 23 - 30, The snippet mixes TypeScript-only syntax into a JS example: remove the TypeScript-specific import "import type { Preview } from '@storybook/your-framework';" and drop the type annotation on the preview variable ("const preview: Preview") so it becomes a plain JS declaration ("const preview"). Keep the getRouter import ("import { getRouter } from \"@storybook/your-framework/router.mock\"") and leave the code fence as JS/.jsx so users can copy it into a .jsx file without syntax errors.docs/_snippets/tags-autodocs-in-preview.md (1)
20-25:⚠️ Potential issue | 🟡 MinorRemove duplicated
addonDocsimport in the TS snippet.This snippet currently redeclares
addonDocs, which breaks TypeScript parsing for users copy/pasting it.✂️ Proposed fix
import { definePreview } from '@storybook/your-framework'; import addonDocs from '@storybook/addon-docs'; -import addonDocs from '@storybook/addon-docs';🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/_snippets/tags-autodocs-in-preview.md` around lines 20 - 25, The snippet contains a duplicated import of addonDocs which breaks TypeScript parsing; remove the second duplicate import so addonDocs is only imported once in the preview snippet (the lines importing addonDocs in the .storybook preview example), leaving the other imports (e.g., definePreview) intact and ensuring there is a single import statement for addonDocs.docs/_snippets/nextjs-navigation-override-in-preview.md (1)
23-47:⚠️ Potential issue | 🟠 MajorJS snippet uses TypeScript-only syntax and will fail as JavaScript.
In this
language="js"block,import typeandconst preview: Previeware invalid JS. Please convert this block to plain JavaScript.🛠️ Proposed fix
```js filename=".storybook/preview.jsx" renderer="react" language="js" tabTitle="CSF 3" // Replace your-framework with nextjs or nextjs-vite -import type { Preview } from '@storybook/your-framework'; - // 👇 Must include the `.mock` portion of filename to have mocks typed correctly import { getRouter } from "@storybook/your-framework/navigation.mock"; -const preview: Preview = { +const preview = { parameters: { nextjs: { // 👇 Override the default navigation properties🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/_snippets/nextjs-navigation-override-in-preview.md` around lines 23 - 47, The JS snippet contains TypeScript-only syntax; remove the type-only import and the type annotation on the preview constant: delete "import type { Preview } from '@storybook/your-framework';" and change "const preview: Preview = {" to "const preview = {" while keeping the existing getRouter import from "@storybook/your-framework/navigation.mock" and all parameter/navigation and beforeEach code intact so the mocked router usage (getRouter().push.mockImplementation) still works.
🧹 Nitpick comments (3)
docs/configure/styling-and-css.mdx (1)
19-19: Consider using the flexible extension pattern for consistency.This line uses
.storybook/preview.tsxwhile other documentation pages in this PR use.storybook/preview.jsx|tsxto accommodate both JavaScript and TypeScript projects. Consider updating to maintain consistency across the docs.🔧 Suggested change for consistency
- All Storybooks are pre-configured to recognize imports for CSS files. To add global CSS for all your stories, import it in [`.storybook/preview.tsx`](./index.mdx#configure-story-rendering). These files will be subject to HMR, so you can see your changes without restarting your Storybook server. + All Storybooks are pre-configured to recognize imports for CSS files. To add global CSS for all your stories, import it in [`.storybook/preview.jsx|tsx`](./index.mdx#configure-story-rendering). These files will be subject to HMR, so you can see your changes without restarting your Storybook server.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/configure/styling-and-css.mdx` at line 19, Update the documentation text that currently references ".storybook/preview.tsx" to use the flexible extension pattern ".storybook/preview.jsx|tsx" for consistency with other docs; locate the occurrence of the literal string ".storybook/preview.tsx" in the "styling-and-css.mdx" content and replace it with ".storybook/preview.jsx|tsx" so the guidance covers both JavaScript and TypeScript projects.docs/_snippets/parameters-in-preview.md (1)
1-1: Align JS snippet fence types with declared language.Line 1 and Line 50 declare
language="js"but use atsfence. Usingjsfences here would keep rendering behavior consistent with the other JS snippets in this file.Suggested doc-fence cleanup
-```ts filename=".storybook/preview.tsx" renderer="common" language="js" tabTitle="CSF 3" +```js filename=".storybook/preview.jsx" renderer="common" language="js" tabTitle="CSF 3"-```ts filename=".storybook/preview.tsx" renderer="react" language="js" tabTitle="CSF Next 🧪" +```js filename=".storybook/preview.jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"Also applies to: 50-50
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/_snippets/parameters-in-preview.md` at line 1, Update the mismatched code-fence metadata: change the opening triple-backtick fences that currently use "ts filename='.storybook/preview.tsx' ... language='js' ..." to use a JS fence and matching filename (e.g., "```js filename='.storybook/preview.jsx' renderer='common' language='js' tabTitle='CSF 3'") and likewise for the second block (replace the "ts" fence with "js" and .tsx filename with .jsx for the CSF Next block). Ensure both occurrences (the CSF 3 and CSF Next blocks) have the fence language set to js and the filename updated to .preview.jsx so the fence type aligns with language="js".docs/_snippets/storybook-preview-with-styled-components-decorator.md (1)
326-340: Duplicate CSF Next web-components TypeScript snippet appears twice.This block duplicates the one at Line 310–324 with the same renderer, language, and content. Consider removing one copy to avoid duplicate docs output.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/_snippets/storybook-preview-with-styled-components-decorator.md` around lines 326 - 340, Remove the duplicated CSF Next web-components TypeScript snippet by keeping a single instance of the definePreview snippet (the block that imports html from 'lit' and calls definePreview with decorators that use story and globals to wrap story() in <theme-provider theme=${theme}>). Delete the redundant identical code fence so only one snippet defining the decorators/theme-provider behavior remains in the docs.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@code/frameworks/angular/src/client/preview.ts`:
- Line 36: Update the example comment to use the .ts extension and include the
missing default export: change the file reference to ".storybook/preview.ts",
keep the use of definePreview and the named export preview, and add an export
default preview; so that the module exports both the named const preview and a
default export (preview) to match consumers that import projectAnnotations as
the default; locate the example around the preview constant/definePreview usage.
In `@docs/api/portable-stories/portable-stories-jest.mdx`:
- Line 221: Update the project-level preview annotation reference to be
extension-agnostic by replacing the hardcoded `.storybook/preview.jsx` text with
`.storybook/preview.jsx|tsx` in the sentence that explains where project-level
annotations are defined (the sentence mentioning project-level annotations
coming from your .storybook preview file and addons); ensure this matches the
wording used earlier (around the examples on Line 205) so the docs cover both
JSX and TSX setups consistently.
In `@docs/api/portable-stories/portable-stories-playwright.mdx`:
- Line 168: The documentation line that currently mentions only
".storybook/preview.jsx" should be updated to consistently reference
".storybook/preview.jsx|tsx" to match earlier mentions; find the string
".storybook/preview.jsx" in portable-stories-playwright.mdx (the sentence about
project-level annotations) and replace it with ".storybook/preview.jsx|tsx" so
TypeScript projects are covered consistently alongside the other occurrences.
In `@docs/api/portable-stories/portable-stories-vitest.mdx`:
- Line 233: Update the documentation sentence that references the preview
filename so it reflects mixed JS/TS support: replace the lone
`.storybook/preview.jsx` mention with `.storybook/preview.jsx|tsx` so it matches
the rest of the page's convention and avoids implying JavaScript-only
configuration; edit the paragraph containing "project-level annotations are
those defined in your `.storybook/preview.jsx` file" to use the new
`.storybook/preview.jsx|tsx` text.
---
Outside diff comments:
In `@code/lib/create-storybook/src/generators/configure.ts`:
- Around line 113-118: The current check only looks for preview.tsx/preview.jsx
and can create duplicates when a legacy preview.ts or preview.js already exists;
update the existence check in the configure generator to also look for legacy
preview files (preview.ts and preview.js) inside options.storybookConfigFolder
and prefer an existing legacy file by returning its path instead of creating a
new previewConfigPath; use the existing pathExists utility and the isTypescript
flag to build and check all four candidate filenames (preview.tsx, preview.jsx,
preview.ts, preview.js) and return the first one that exists (or keep
previewConfigPath if none exist).
In `@docs/_snippets/nextjs-navigation-override-in-preview.md`:
- Around line 23-47: The JS snippet contains TypeScript-only syntax; remove the
type-only import and the type annotation on the preview constant: delete "import
type { Preview } from '@storybook/your-framework';" and change "const preview:
Preview = {" to "const preview = {" while keeping the existing getRouter import
from "@storybook/your-framework/navigation.mock" and all parameter/navigation
and beforeEach code intact so the mocked router usage
(getRouter().push.mockImplementation) still works.
In `@docs/_snippets/nextjs-router-override-in-preview.md`:
- Around line 23-30: The snippet mixes TypeScript-only syntax into a JS example:
remove the TypeScript-specific import "import type { Preview } from
'@storybook/your-framework';" and drop the type annotation on the preview
variable ("const preview: Preview") so it becomes a plain JS declaration ("const
preview"). Keep the getRouter import ("import { getRouter } from
\"@storybook/your-framework/router.mock\"") and leave the code fence as JS/.jsx
so users can copy it into a .jsx file without syntax errors.
In `@docs/_snippets/tags-autodocs-in-preview.md`:
- Around line 20-25: The snippet contains a duplicated import of addonDocs which
breaks TypeScript parsing; remove the second duplicate import so addonDocs is
only imported once in the preview snippet (the lines importing addonDocs in the
.storybook preview example), leaving the other imports (e.g., definePreview)
intact and ensuring there is a single import statement for addonDocs.
---
Nitpick comments:
In `@docs/_snippets/parameters-in-preview.md`:
- Line 1: Update the mismatched code-fence metadata: change the opening
triple-backtick fences that currently use "ts filename='.storybook/preview.tsx'
... language='js' ..." to use a JS fence and matching filename (e.g., "```js
filename='.storybook/preview.jsx' renderer='common' language='js' tabTitle='CSF
3'") and likewise for the second block (replace the "ts" fence with "js" and
.tsx filename with .jsx for the CSF Next block). Ensure both occurrences (the
CSF 3 and CSF Next blocks) have the fence language set to js and the filename
updated to .preview.jsx so the fence type aligns with language="js".
In `@docs/_snippets/storybook-preview-with-styled-components-decorator.md`:
- Around line 326-340: Remove the duplicated CSF Next web-components TypeScript
snippet by keeping a single instance of the definePreview snippet (the block
that imports html from 'lit' and calls definePreview with decorators that use
story and globals to wrap story() in <theme-provider theme=${theme}>). Delete
the redundant identical code fence so only one snippet defining the
decorators/theme-provider behavior remains in the docs.
In `@docs/configure/styling-and-css.mdx`:
- Line 19: Update the documentation text that currently references
".storybook/preview.tsx" to use the flexible extension pattern
".storybook/preview.jsx|tsx" for consistency with other docs; locate the
occurrence of the literal string ".storybook/preview.tsx" in the
"styling-and-css.mdx" content and replace it with ".storybook/preview.jsx|tsx"
so the guidance covers both JavaScript and TypeScript projects.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: b16cc2d1-8672-4827-91b5-6e69056425a0
📒 Files selected for processing (103)
AGENTS.mdcode/core/src/core-server/utils/get-new-story-file.test.tscode/e2e-tests/storybook-hooks.spec.tscode/frameworks/angular/src/client/preview.tscode/lib/create-storybook/src/generators/configure.tsdocs/_snippets/actions-filtering-example.mddocs/_snippets/actions-spyon-basic-example.mddocs/_snippets/addon-a11y-config-in-preview.mddocs/_snippets/addon-a11y-config-rulesets-in-preview.mddocs/_snippets/addon-a11y-parameter-error-in-preview.mddocs/_snippets/addon-backgrounds-options-in-preview.mddocs/_snippets/addon-viewport-add-viewport-in-preview.mddocs/_snippets/addon-viewport-options-in-preview.mddocs/_snippets/angular-add-compodoc.mddocs/_snippets/arg-types-in-preview.mddocs/_snippets/args-in-preview.mddocs/_snippets/automock-register-full.mddocs/_snippets/automock-register-mock-file.mddocs/_snippets/automock-register-spy.mddocs/_snippets/before-all-in-preview.mddocs/_snippets/before-each-in-preview.mddocs/_snippets/code-panel-enable-in-preview.mddocs/_snippets/decorator-parameterized-in-preview.mddocs/_snippets/decorator-with-reactive-globals.mddocs/_snippets/decorator-with-updateArgs.mddocs/_snippets/initialize-library-in-preview.mddocs/_snippets/mock-context-container-global.mddocs/_snippets/msw-addon-initialize.mddocs/_snippets/nextjs-app-directory-in-preview.mddocs/_snippets/nextjs-navigation-override-in-preview.mddocs/_snippets/nextjs-router-override-in-preview.mddocs/_snippets/nextjs-styling-sass-preview.mddocs/_snippets/nextjs-styling-tailwind.mddocs/_snippets/parameters-docs-source-transform-in-preview.mddocs/_snippets/parameters-in-preview.mddocs/_snippets/shadow-dom-testing-library-in-preview.mddocs/_snippets/storybook-addon-controls-custom-matchers.mddocs/_snippets/storybook-addon-themes-classname-decorator.mddocs/_snippets/storybook-addon-themes-data-attribute-decorator.mddocs/_snippets/storybook-addon-themes-jsx-provider-decorator.mddocs/_snippets/storybook-addons-preset-preview.mddocs/_snippets/storybook-preview-auto-docs-custom-mdx-template.mddocs/_snippets/storybook-preview-auto-docs-custom-template-function.mddocs/_snippets/storybook-preview-auto-docs-override-mdx-container.mddocs/_snippets/storybook-preview-auto-docs-override-theme.mddocs/_snippets/storybook-preview-compodoc-config.mddocs/_snippets/storybook-preview-configure-globaltypes.mddocs/_snippets/storybook-preview-custom-canvas.mddocs/_snippets/storybook-preview-custom-code-renderer.mddocs/_snippets/storybook-preview-custom-elements-config.mddocs/_snippets/storybook-preview-custom-params.mddocs/_snippets/storybook-preview-custom-toc.mddocs/_snippets/storybook-preview-doc-blocks-controls-exclude-prop.mddocs/_snippets/storybook-preview-docs-dark-theme.mddocs/_snippets/storybook-preview-empty-sort-object.mddocs/_snippets/storybook-preview-enable-toc.mddocs/_snippets/storybook-preview-expanded-controls.mddocs/_snippets/storybook-preview-global-decorator.mddocs/_snippets/storybook-preview-global-loader.mddocs/_snippets/storybook-preview-global-parameters.mddocs/_snippets/storybook-preview-import-global-styles.mddocs/_snippets/storybook-preview-layout-param.mddocs/_snippets/storybook-preview-locales-globaltype.mddocs/_snippets/storybook-preview-matching-argtypes.mddocs/_snippets/storybook-preview-optout-inline.mddocs/_snippets/storybook-preview-parameters-color-swatches.mddocs/_snippets/storybook-preview-register-language-globally.mddocs/_snippets/storybook-preview-sort-function.mddocs/_snippets/storybook-preview-use-global-type.mddocs/_snippets/storybook-preview-with-library-decorator.mddocs/_snippets/storybook-preview-with-ordered-pages-and-wildcard.mddocs/_snippets/storybook-preview-with-ordered-pages.mddocs/_snippets/storybook-preview-with-styled-components-decorator.mddocs/_snippets/tags-autodocs-in-preview.mddocs/_snippets/tags-in-preview.mddocs/api/arg-types.mdxdocs/api/csf/csf-next.mdxdocs/api/parameters.mdxdocs/api/portable-stories/portable-stories-jest.mdxdocs/api/portable-stories/portable-stories-playwright.mdxdocs/api/portable-stories/portable-stories-vitest.mdxdocs/configure/story-rendering.mdxdocs/configure/styling-and-css.mdxdocs/contribute/documentation/new-snippets.mdxdocs/essentials/backgrounds.mdxdocs/essentials/controls.mdxdocs/essentials/toolbars-and-globals.mdxdocs/essentials/viewport.mdxdocs/get-started/frameworks/angular.mdxdocs/get-started/frameworks/nextjs-vite.mdxdocs/get-started/frameworks/nextjs.mdxdocs/get-started/frameworks/vue3-vite.mdxdocs/get-started/setup.mdxdocs/writing-docs/autodocs.mdxdocs/writing-docs/code-panel.mdxdocs/writing-stories/args.mdxdocs/writing-stories/decorators.mdxdocs/writing-stories/mocking-data-and-modules/mocking-modules.mdxdocs/writing-stories/parameters.mdxdocs/writing-stories/tags.mdxdocs/writing-tests/accessibility-testing.mdxdocs/writing-tests/integrations/stories-in-unit-tests.mdxdocs/writing-tests/interaction-testing.mdx
yannbf
approved these changes
Mar 30, 2026
Member
yannbf
left a comment
yannbf
left a comment
There was a problem hiding this comment.
LGTM but I'd recommend making a canary and trying this out on an Angular project
Sidnioulz
force-pushed
the
agentic/rename-preview-to-tsx
branch
from
2d8df40 to
3f711d0
Compare
Sidnioulz
commented
Mar 31, 2026
kylegach
reviewed
Apr 2, 2026
kylegach
reviewed
Apr 2, 2026
kylegach
reviewed
Apr 2, 2026
kylegach
reviewed
Apr 2, 2026
Sidnioulz
commented
Apr 3, 2026
Sidnioulz
commented
Apr 3, 2026
Sidnioulz
commented
Apr 3, 2026
Sidnioulz
commented
Apr 3, 2026
Package BenchmarksCommit: No significant changes detected, all good. 👏 |
Sidnioulz
force-pushed
the
agentic/rename-preview-to-tsx
branch
from
1ecec6c to
787bd14
Compare
Sidnioulz
added
ci:normal
and removed
ci:daily
This was referenced Apr 3, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What I did
Switched
preview.tstopreview.tsxin new projects to help agents write JSX decorators without having to iterate over the file name or syntax errors when writing JSX into a JS file.Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
preview.tsxDocumentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This pull request has been released as version
0.0.0-pr-34396-sha-69743144. Try it out in a new sandbox by runningnpx storybook@0.0.0-pr-34396-sha-69743144 sandboxor in an existing project withnpx storybook@0.0.0-pr-34396-sha-69743144 upgrade.More information
0.0.0-pr-34396-sha-69743144agentic/rename-preview-to-tsx697431441774867070)To request a new release of this pull request, mention the
@storybookjs/coreteam.core team members can create a new canary release here or locally with
gh workflow run --repo storybookjs/storybook publish.yml --field pr=34396Summary by CodeRabbit
Documentation
Tests
Chores