CSF: Add support for CSF factories #30197

kasperpeulen · 2025-01-06T13:50:07Z

Closes #30166

What I did

This PR introduces a new way of writing stories using the CSF factories format, based on the RFC.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

DISCLAIMER:
This feature currently is only supported on react based frameworks (all of them).

VERY IMPORTANT to test: Monorepos, projects with multiple Storybooks which therefore would end up having multiple preview files.

The CSF Factory work involves many pieces:

The docs

There are explanations and instructions about the format in the docs. Please go through the documentation and see if it feels right: https://storybook.js.org/docs/api/csf/csf-factories (to be available once #30343 is merged and published)

Storybook itself

Storybook should work with CSF factories and with CSF123.
You are allowed to have a preview file using definePreview and have a story file not importing it, just using CSF3.
If you are importing preview and creating a meta from it, you cannot mix story formats in that same file.

Storybook should also sync preview.js and main.js files when either running storybook dev or running storybook add.

say you have a main.js file like so:

export default {
  addons: [
    '@storybook/addon-essentials',
    '@storybook/experimental-addon-test',
    '@chromatic-com/storybook',
    '@storybook/addon-a11y',
    '@storybook/addon-designs',
  ],
}

it should add the following things to preview.js:

import addonA11y from "@storybook/addon-a11y";
import experimentalAddonTest from "@storybook/experimental-addon-test";
import addonEssentials from "@storybook/addon-essentials";
import { definePreview } from "@storybook/react-vite";

export default definePreview({
  //...
  addons: [addonEssentials(), experimentalAddonTest(), addonA11y()]
});

The codemods

The new format warrants many changes, in preview.js, main.js and story files. All of them are accounted for in the codemod. To run it, first upgrate Storybook to the most recent canary:

npx storybook@<canary-version> upgrade

Then execute the codemod:

npx storybook automigrate csf-factories

This should:
1 - Update your main.js file to use defineMain
2 - Update your preview.js file to use definePreview
3 - Ask about subpath imports
3.1 - If you say yes, it should update your package.json with the imports map
3.2 - If you say no, it should just continue
4 - Ask about stories glob and apply the codemod to all stories.

The codemod should migrate CSF 1, 2 and 3 to CSF Factories.
The codemod should remove deprecated and unused types
The codemod does not account for unusual story formats documented here.

You are able to run the codemod multiple times. If you run it and select to use subpath imports, you can later rerun it to update all imports to relative if you prefer. Subpath imports will not work if the tsconfig file does not support it (you have to define module resolution to bundler).

Vitest integration

This PR adjusts the Vitest plugin transformation to support all CSF formats. It should work normally in codebases that have all formats.

Test-runner

The test-runner should behave correctly with CSF factories. All stories should be identified as tests.

Type safety

Typesafety for args should have feature parity with today. For example, required args might be passed both in meta and the story. And should warn if they are not present:

const meta = preview.meta({
  component: Button,
  args: { label: 'good' },
});
const Basic = meta.story({
  args: { disabled: false },
});

const meta = preview.meta({ component: Button });
const Basic = meta.story({
  // @ts-expect-error disabled not provided ❌
  args: { label: 'good' },
});

const meta = preview.meta({
  component: Button,
  args: { label: 'good' },
});
// @ts-expect-error disabled not provided ❌
const Basic = meta.story({});

const meta = preview.meta({ component: Button });
const Basic = meta.story({
  // @ts-expect-error disabled not provided ❌
  args: { label: 'good' },
});

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts
Make 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-30197-sha-de13df08. Try it out in a new sandbox by running npx [email protected] sandbox or in an existing project with npx [email protected] upgrade.

More information


Published version	`0.0.0-pr-30197-sha-de13df08`
Triggered by	@yannbf
Repository	storybookjs/storybook
Branch	`kasper/csf-factories`
Commit	`de13df08`
Datetime	Thu Feb 6 09:14:51 UTC 2025 (`1738833291`)
Workflow run	13175478609

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=30197

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	80.5 MB	80.5 MB	0 B	0.6	0%
initSize	80.5 MB	80.5 MB	0 B	-0.19	0%
diffSize	97 B	97 B	0 B	-0.23	0%
buildSize	7.28 MB	7.3 MB	26.4 kB	4.5	0.4%
buildSbAddonsSize	1.89 MB	1.89 MB	-1.08 kB	4.04	-0.1%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.88 MB	1.88 MB	-201 B	-0.73	0%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.96 MB	3.96 MB	-1.28 kB	3.6	0%
buildPreviewSize	3.31 MB	3.34 MB	27.6 kB	3.31	0.8%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	51.2s	6.8s	-44s -360ms	-0.99	-647.4%
generateTime	21.8s	17.7s	-4s -79ms	-1.44	🔰-23%
initTime	4.9s	4.2s	-768ms	-0.54	-18.3%
buildTime	10.1s	8.4s	-1s -620ms	-0.81	-19.1%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	7.9s	5.7s	-2s -212ms	0.24	-38.4%
devManagerResponsive	5.7s	4.3s	-1s -381ms	0.37	-31.7%
devManagerHeaderVisible	1.1s	983ms	-178ms	1.28	🔰-18.1%
devManagerIndexVisible	1.1s	1s	-120ms	1.49	🔰-11.4%
devStoryVisibleUncached	3.9s	4.4s	506ms	1.4	🔺11.3%
devStoryVisible	1.2s	1s	-194ms	1.13	-18.5%
devAutodocsVisible	1s	940ms	-122ms	1.4	🔰-13%
devMDXVisible	1.1s	914ms	-223ms	1.27	🔰-24.4%
buildManagerHeaderVisible	1.1s	956ms	-238ms	-0.03	-24.9%
buildManagerIndexVisible	1.2s	1s	-233ms	-0.1	-22.8%
buildStoryVisible	1.1s	930ms	-188ms	0.1	-20.2%
buildAutodocsVisible	972ms	743ms	-229ms	-0.2	-30.8%
buildMDXVisible	807ms	703ms	-104ms	0.29	-14.8%

Greptile Summary

Based on the extensive changes in this PR, here's a concise summary of the CSF factories implementation:

Introduces CSF (Component Story Format) factories to provide type-safe story definitions and configuration in Storybook.

Added definePreview and defineMain functions in /code/core/src/csf/csf-factories.ts for type-safe configuration
Added meta.story() pattern in /code/renderers/react/src/preview.tsx for strongly-typed story definitions
Added automigration codemod in /code/lib/cli-storybook/src/codemod/csf-factories.ts to convert existing stories
Added support for per-CSF-file project annotations in /code/core/src/preview-api/modules/store/StoryStore.ts
Added Vitest transformer support in /code/core/src/csf-tools/vitest-plugin/transformer.test.ts for testing CSF factories

The implementation provides comprehensive type safety while maintaining backward compatibility with existing CSF formats. The changes are well-tested but require careful review around project annotation overrides and factory pattern adoption.

…ries' into kasper/csf-factories

…r/csf-factories

greptile-apps

_{20 file(s) reviewed, 19 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-01-06T13:50:52Z

code/builders/builder-vite/src/codegen-modern-iframe-script.ts

+  const [previewFileUrl, ...previewAnnotationURLs] = [...previewAnnotations, previewOrConfigFile]
    .filter(Boolean)
    .map((path) => processPreviewAnnotation(path, projectRoot));


logic: Destructuring could fail if previewAnnotations and previewOrConfigFile are both empty arrays after filtering. Add a check to handle this case.

greptile-apps · 2025-01-06T13:50:52Z

code/builders/builder-vite/src/codegen-modern-iframe-script.ts

+    const preview = await import('${previewFileUrl}');
+    const csfFactoryPreview = Object.values(preview).find(module => {
+      return 'isCSFFactoryPreview' in module
+    });


logic: Object.values() and find() could return undefined. Need type checking and error handling for when no CSF factory preview is found.

greptile-apps · 2025-01-06T13:50:53Z

code/builders/builder-vite/src/codegen-modern-iframe-script.ts

    const configs = await Promise.all([${previewAnnotationURLs
      .map(
        (previewAnnotation, index) =>
          // Prefer the updated module from an HMR update, otherwise import the original module
          `hmrPreviewAnnotationModules[${index}] ?? import('${previewAnnotation}')`
      )
      .join(',\n')}])
-    return composeConfigs(configs);
+    return composeConfigs([...configs, preview]);


logic: preview is used in composeConfigs even when csfFactoryPreview is found, which could cause conflicts. Should only include preview in non-factory case.

greptile-apps · 2025-01-06T13:50:53Z

code/addons/test/src/vitest-plugin/test-utils.ts

@@ -27,11 +27,12 @@ export const testStory = (
  return async (context: TestContext & TaskContext & { story: ComposedStoryFn }) => {
    const composedStory = composeStory(
      story,
-      meta,
+      'isCSFFactory' in story ? (meta as any).annotations : meta,


style: Type casting to 'any' should be avoided. Consider creating proper type definitions for CSF factories to maintain type safety.

greptile-apps · 2025-01-06T13:50:53Z

code/addons/test/src/vitest-plugin/test-utils.ts

      { initialGlobals: (await getInitialGlobals?.()) ?? {} },
      undefined,
      exportName
    );
+
    if (composedStory === undefined || skipTags?.some((tag) => composedStory.tags.includes(tag))) {


logic: Optional chaining on skipTags is unnecessary since it's a required parameter

greptile-apps · 2025-01-06T13:53:23Z

code/renderers/react/src/__test__/portable-stories-factory.test.tsx

+    const div = document.createElement('div');
+    document.body.appendChild(div);
+
+    await CSF3InputFieldFilled.run({ canvasElement: div });
+
+    const input = screen.getByTestId('input') as HTMLInputElement;
+    expect(input.value).toEqual('Hello world!');
+
+    document.body.removeChild(div);


style: Test cleanup could fail if test errors before removeChild. Consider using try/finally

greptile-apps · 2025-01-06T13:53:33Z

code/renderers/react/src/__test__/Button.csf4.stories.tsx

+import { Button } from './Button';
+
+// eslint-disable-next-line storybook/default-exports
+const config = defineConfig({ args: { children: 'TODO: THIS IS NOT WORKING YET' } });


logic: TODO comment indicates unfinished/broken functionality. This should be resolved before merging.

greptile-apps · 2025-01-06T13:53:34Z

code/renderers/react/src/__test__/Button.csf4.stories.tsx

+});
+
+export const CSF2StoryWithParamsAndDecorator = meta.story({
+  render: (args: any) => {


style: Using any type here loses type safety. Consider using proper Button component prop types.

greptile-apps · 2025-01-06T13:53:40Z

code/renderers/react/src/preview.tsx

+  readonly meta = <TComponent extends ComponentType<any>, TMetaArgs extends Args>(
+    meta: ComponentAnnotations<TRenderer, any> & { component: TComponent; args: TMetaArgs }
+  ) => {


logic: The meta method accepts any for TRenderer annotations but then casts to TMetaArgs. This could lead to type safety issues. Consider constraining the any type.

greptile-apps · 2025-01-06T13:53:41Z

code/renderers/react/src/preview.tsx

+    public meta: Meta<TRenderer, TArgs>,
+    public config: PreviewConfig<TRenderer>
+  ) {
+    Object.assign(this, annotations);


style: Using Object.assign to copy all properties from annotations could lead to property collisions with the class's own methods/properties. Consider explicit property copying instead.

nx-cloud · 2025-01-06T13:54:41Z

View your CI Pipeline Execution ↗ for commit a73f656.

Command	Status	Duration	Result
`nx run-many -t build --parallel=3`	✅ Succeeded	2m 1s	View ↗

☁️ Nx Cloud last updated this comment at 2025-02-12 14:09:11 UTC

storybook-pr-benchmarking · 2025-01-06T14:04:20Z

Package Benchmarks

^{Commit: a73f656, ran on 12 February 2025 at 14:16:31 UTC}

The following packages have significant changes to their size or dependencies:

`@storybook/addon-a11y`

	Before	After	Difference
Dependency count	54	54	0
Self size	332 KB	444 KB	🚨 +112 KB 🚨
Dependency size	12.46 MB	12.46 MB	🚨 +3 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-actions`

	Before	After	Difference
Dependency count	7	7	0
Self size	59 KB	65 KB	🚨 +6 KB 🚨
Dependency size	3.22 MB	3.22 MB	0 B
Bundle Size Analyzer	Link	Link

`@storybook/addon-backgrounds`

	Before	After	Difference
Dependency count	4	4	0
Self size	27 KB	45 KB	🚨 +18 KB 🚨
Dependency size	99 KB	99 KB	0 B
Bundle Size Analyzer	Link	Link

`@storybook/addon-essentials`

	Before	After	Difference
Dependency count	32	32	0
Self size	12 KB	18 KB	🚨 +6 KB 🚨
Dependency size	15.44 MB	15.53 MB	🚨 +88 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-highlight`

	Before	After	Difference
Dependency count	1	1	0
Self size	9 KB	12 KB	🚨 +3 KB 🚨
Dependency size	5 KB	5 KB	0 B
Bundle Size Analyzer	Link	Link

`@storybook/addon-measure`

	Before	After	Difference
Dependency count	2	2	0
Self size	32 KB	60 KB	🚨 +28 KB 🚨
Dependency size	20 KB	20 KB	0 B
Bundle Size Analyzer	Link	Link

`@storybook/addon-outline`

	Before	After	Difference
Dependency count	2	2	0
Self size	23 KB	42 KB	🚨 +19 KB 🚨
Dependency size	32 KB	32 KB	0 B
Bundle Size Analyzer	Link	Link

`@storybook/addon-viewport`

	Before	After	Difference
Dependency count	2	2	0
Self size	27 KB	30 KB	🚨 +4 KB 🚨
Dependency size	67 KB	67 KB	0 B
Bundle Size Analyzer	Link	Link

`@storybook/core`

	Before	After	Difference
Dependency count	52	52	0
Self size	19.20 MB	19.24 MB	🚨 +39 KB 🚨
Dependency size	14.19 MB	14.19 MB	0 B
Bundle Size Analyzer	Link	Link

`@storybook/experimental-nextjs-vite`

	Before	After	Difference
Dependency count	187	187	0
Self size	232 KB	235 KB	🚨 +3 KB 🚨
Dependency size	48.02 MB	48.83 MB	🚨 +805 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/html-vite`

	Before	After	Difference
Dependency count	15	15	0
Self size	5 KB	6 KB	🚨 +1 KB 🚨
Dependency size	1.91 MB	1.91 MB	🚨 +604 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/html-webpack5`

	Before	After	Difference
Dependency count	247	247	0
Self size	6 KB	8 KB	🚨 +1 KB 🚨
Dependency size	31.72 MB	31.72 MB	🚨 +320 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/nextjs`

	Before	After	Difference
Dependency count	593	593	0
Self size	472 KB	475 KB	🚨 +3 KB 🚨
Dependency size	83.66 MB	84.47 MB	🚨 +803 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preact-webpack5`

	Before	After	Difference
Dependency count	245	245	0
Self size	6 KB	8 KB	🚨 +1 KB 🚨
Dependency size	31.30 MB	31.30 MB	🚨 +320 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-native-web-vite`

	Before	After	Difference
Dependency count	177	177	0
Self size	43 KB	44 KB	🚨 +1 KB 🚨
Dependency size	23.49 MB	24.29 MB	🚨 +805 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-vite`

	Before	After	Difference
Dependency count	129	129	0
Self size	13 KB	15 KB	🚨 +2 KB 🚨
Dependency size	19.67 MB	20.47 MB	🚨 +803 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-webpack5`

	Before	After	Difference
Dependency count	324	324	0
Self size	6 KB	8 KB	🚨 +2 KB 🚨
Dependency size	42.54 MB	43.34 MB	🚨 +803 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/server-webpack5`

	Before	After	Difference
Dependency count	253	253	0
Self size	14 KB	15 KB	🚨 +1 KB 🚨
Dependency size	32.45 MB	32.45 MB	🚨 +320 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/svelte-webpack5`

	Before	After	Difference
Dependency count	311	311	0
Self size	6 KB	7 KB	🚨 +1 KB 🚨
Dependency size	39.34 MB	39.34 MB	🚨 +320 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/vue3-webpack5`

	Before	After	Difference
Dependency count	496	496	0
Self size	6 KB	7 KB	🚨 +1 KB 🚨
Dependency size	55.73 MB	55.73 MB	🚨 +320 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/web-components-vite`

	Before	After	Difference
Dependency count	16	16	0
Self size	5 KB	6 KB	🚨 +1 KB 🚨
Dependency size	1.94 MB	1.94 MB	🚨 +604 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/web-components-webpack5`

	Before	After	Difference
Dependency count	245	245	0
Self size	5 KB	7 KB	🚨 +1 KB 🚨
Dependency size	31.35 MB	31.35 MB	🚨 +320 B 🚨
Bundle Size Analyzer	Link	Link

`storybook`

	Before	After	Difference
Dependency count	53	53	0
Self size	23 KB	24 KB	🚨 +710 B 🚨
Dependency size	33.39 MB	33.43 MB	🚨 +39 KB 🚨
Bundle Size Analyzer	Link	Link

`sb`

	Before	After	Difference
Dependency count	54	54	0
Self size	1 KB	1 KB	0 B
Dependency size	33.41 MB	33.45 MB	🚨 +40 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	358	360	🚨 +2 🚨
Self size	261 KB	278 KB	🚨 +17 KB 🚨
Dependency size	83.85 MB	83.91 MB	🚨 +63 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	276	276	0
Self size	612 KB	612 KB	0 B
Dependency size	65.45 MB	65.49 MB	🚨 +39 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preset-react-webpack`

	Before	After	Difference
Dependency count	192	192	0
Self size	24 KB	24 KB	0 B
Dependency size	33.60 MB	34.40 MB	🚨 +802 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react`

	Before	After	Difference
Dependency count	6	6	0
Self size	932 KB	1.73 MB	🚨 +802 KB 🚨
Dependency size	24 KB	24 KB	0 B
Bundle Size Analyzer	Link	Link

Co-authored-by: Kyle Gach <[email protected]>

Codemod: Add option to have relative path in csf factories codemod

dannyhw · 2025-02-09T14:05:22Z

Would love to get ahead of this for react native and try it out. Is this in a good place for me to try a canary version?

shilman · 2025-02-10T09:51:52Z

Canary on this PR should be a good start! Lmk if you'd like to discuss

greptile-apps

_{213 file(s) reviewed, 94 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-02-12T13:01:31Z

code/addons/a11y/src/index.ts

@@ -1,2 +1,9 @@
+import { definePreview } from 'storybook/internal/preview-api';


style: Consider using a more specific import path rather than 'storybook/internal/preview-api' to avoid relying on internal APIs

greptile-apps · 2025-02-12T13:01:51Z

code/addons/a11y/src/types.ts

+    config?: Spec;
+
+    /**
+     * Options for the accessibility checks To learn more about the available options,


syntax: missing period after 'options' in comment

greptile-apps · 2025-02-12T13:01:51Z

code/addons/a11y/src/types.ts

+   *
+   * @see https://storybook.js.org/docs/writing-tests/accessibility-testing
+   */
+  a11y: {


logic: a11y property should be optional since it's a global configuration

Suggested change

a11y: {

a11y?: {

greptile-apps · 2025-02-12T13:02:58Z

code/addons/backgrounds/src/index.ts

@@ -1,2 +1,7 @@
-// make it work with --isolatedModules
-export default {};
+import { definePreview } from 'storybook/internal/preview-api';


style: importing from 'storybook/internal/preview-api' suggests this is using an internal API - consider using a public import path instead

greptile-apps · 2025-02-12T13:02:59Z

code/addons/backgrounds/src/index.ts

+
+import * as addonAnnotations from './preview';
+
+export default () => definePreview(addonAnnotations);


style: wrapping definePreview in a function call adds unnecessary indirection - consider exporting definePreview(addonAnnotations) directly

Suggested change

export default () => definePreview(addonAnnotations);

export default definePreview(addonAnnotations);

greptile-apps · 2025-02-12T13:40:12Z

code/renderers/react/src/csf-factories.test.tsx

+      Decorator: {args.decoratorArg}
+      <Story args={{ decoratorArg: 0 }} />


logic: Decorator modifies args but doesn't preserve original args when passing to Story component

Suggested change

Decorator: {args.decoratorArg}

<Story args={{ decoratorArg: 0 }} />

Decorator: {args.decoratorArg}

<Story args={{ ...args, decoratorArg: 0 }} />

greptile-apps · 2025-02-12T13:40:17Z

code/renderers/react/src/index.ts


 // optimization: stop HMR propagation in webpack


style: Duplicate comment line about HMR optimization

Suggested change

// optimization: stop HMR propagation in webpack

greptile-apps · 2025-02-12T15:41:09Z

code/renderers/react/template/stories/csf4.stories.tsx

+  // @ts-expect-error fix globalThis.Components type not existing later
+  component: globalThis.Components.Button,


logic: globalThis.Components.Button needs proper TypeScript type definitions. This should be defined in a global.d.ts file or similar.

greptile-apps · 2025-02-12T15:41:13Z

code/renderers/react/src/preview.tsx

+export function definePreview(preview: ReactPreview['input']) {
+  return definePreviewBase({
+    ...preview,
+    addons: [reactAnnotations, reactDocsAnnotations, ...(preview.addons ?? [])],


style: Spreading preview.addons after the default addons means user addons could potentially override core functionality. Consider documenting this behavior.

greptile-apps · 2025-02-12T15:41:14Z

code/renderers/react/src/preview.tsx

+      args: Simplify<
+        TArgs & Simplify<RemoveIndexSignature<DecoratorsArgs<ReactRenderer, Decorators>>>
+      >;


style: Complex nested type transformations may impact type inference performance in large files. Consider splitting into intermediate types.

kasperpeulen and others added 13 commits January 3, 2025 11:15

Make a start on defineConfig, meta and story factory

9415e47

CsfFile: Support CSF factories

66c8234

Try it out in Button.stories.tsx

9fc6fbe

Ignore eslint

cdda2b5

Rename Docs, fix later

5d05b3c

Merge remote-tracking branch 'origin/shilman/csf-tools-typesafe-facto…

628e657

…ries' into kasper/csf-factories

Get POC working!!

79107a5

ConfigFile: Handle defineConfig typesafe factory

60c6f26

Merge remote-tracking branch 'origin/shilman/csf-tools-typesafe-facto…

c2988dc

…ries' into kasper/csf-factories

take CSF factories into account in portable stories

6b0abf0

take CSF factories into account in the vitest plugin

b4e6e25

Handle project annotations

c370fec

Merge remote-tracking branch 'origin/kasper/csf-factories' into kaspe…

1d2ee2f

…r/csf-factories

kasperpeulen added the ci:normal label Jan 6, 2025

kasperpeulen changed the title ~~CSF factories~~ WIP: CSF factories Jan 6, 2025

kasperpeulen marked this pull request as draft January 6, 2025 13:50

greptile-apps bot reviewed Jan 6, 2025

View reviewed changes

kasperpeulen and others added 7 commits January 6, 2025 15:23

Fix runtime

d04b258

Fix loaders

410f988

ConfigFile: Fix tag parsing issue

25e9575

CsfFile: Add CSF factories telemetry

c061e82

CsfFile: Fix bad meta definition

3466750

Build: Add CSF4 story in react-vite framework

84f2ae6

CsfFile: Improve meta error handling and fix failing test

3753cde

yannbf added the feature request label Jan 6, 2025

kasperpeulen and others added 3 commits January 7, 2025 11:56

Add addons array

5f7c6af

Csf Tools: Allow ConfigFile to create new import types

3eead18

fix sandbox annotations for react-vite

5efce1e

yannbf and others added 15 commits February 4, 2025 16:30

fix codemod

359ec9c

Update code/lib/cli-storybook/src/codemod/csf-factories.ts

9760a3e

Co-authored-by: Kyle Gach <[email protected]>

Merge branch 'next' into kasper/csf-factories

1f39998

improve codemod to be able to run it multiple times

04a004b

fix type issues

eab4926

Merge branch 'kasper/csf-factories' into yann/imports-map-options

8def9e0

clarify message

4820815

Merge pull request #30463 from storybookjs/yann/imports-map-options

7b4f819

Codemod: Add option to have relative path in csf factories codemod

Merge branch 'next' into kasper/csf-factories

e9c4ae8

fix lint

2e92d97

increase resource of knip step

8babc1d

remove logs

08bb053

fix sandbox command

e21a07b

Merge branch 'next' into kasper/csf-factories

39deab4

fix vite types issue

de13df0

kasperpeulen added 2 commits February 10, 2025 14:27

Merge remote-tracking branch 'origin/next' into kasper/csf-factories2

8746a9a

Merge conflicts

c7beffe

kasperpeulen changed the title ~~WIP: CSF factories~~ CSF: Add support for CSF factories Feb 12, 2025

kasperpeulen removed the ci: do not merge label Feb 12, 2025

kasperpeulen marked this pull request as ready for review February 12, 2025 12:57

kasperpeulen added 2 commits February 12, 2025 14:36

Merge remote-tracking branch 'origin/next' into kasper/csf-factories

a3e07f6

Fix type checks

a73f656

kasperpeulen merged commit 7da4abd into next Feb 12, 2025
66 of 72 checks passed

kasperpeulen deleted the kasper/csf-factories branch February 12, 2025 14:25

github-actions bot mentioned this pull request Feb 12, 2025

Release: Prerelease beta 8.6.0-beta.0 #30512

Merged

13 tasks

dannyhw mentioned this pull request Feb 12, 2025

feat: wip csf factories storybookjs/react-native#685

Closed

greptile-apps bot reviewed Feb 12, 2025

View reviewed changes

lifeiscontent mentioned this pull request Feb 18, 2025

Provide type extension to make apolloClient parameter type-safe lifeiscontent/storybook-addon-apollo-client#120

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSF: Add support for CSF factories #30197

CSF: Add support for CSF factories #30197

kasperpeulen commented Jan 6, 2025 •

edited by greptile-apps bot

Loading

greptile-apps bot left a comment

greptile-apps bot Jan 6, 2025

greptile-apps bot Jan 6, 2025

greptile-apps bot Jan 6, 2025

greptile-apps bot Jan 6, 2025

greptile-apps bot Jan 6, 2025

greptile-apps bot Jan 6, 2025

greptile-apps bot Jan 6, 2025

greptile-apps bot Jan 6, 2025

greptile-apps bot Jan 6, 2025

greptile-apps bot Jan 6, 2025

nx-cloud bot commented Jan 6, 2025 •

edited

Loading

storybook-pr-benchmarking bot commented Jan 6, 2025 •

edited

Loading

dannyhw commented Feb 9, 2025 •

edited

Loading

shilman commented Feb 10, 2025

greptile-apps bot left a comment

greptile-apps bot Feb 12, 2025

greptile-apps bot Feb 12, 2025

greptile-apps bot Feb 12, 2025

greptile-apps bot Feb 12, 2025

greptile-apps bot Feb 12, 2025

greptile-apps bot Feb 12, 2025

greptile-apps bot Feb 12, 2025

greptile-apps bot Feb 12, 2025

greptile-apps bot Feb 12, 2025

greptile-apps bot Feb 12, 2025

		@@ -1,2 +1,9 @@
		import { definePreview } from 'storybook/internal/preview-api';


		import * as addonAnnotations from './preview';

		export default () => definePreview(addonAnnotations);

	export default () => definePreview(addonAnnotations);
	export default definePreview(addonAnnotations);

		Decorator: {args.decoratorArg}
		<Story args={{ decoratorArg: 0 }} />

		// @ts-expect-error fix globalThis.Components type not existing later
		component: globalThis.Components.Button,

CSF: Add support for CSF factories #30197

CSF: Add support for CSF factories #30197

Conversation

kasperpeulen commented Jan 6, 2025 • edited by greptile-apps bot Loading

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

The docs

Storybook itself

The codemods

Vitest integration

Test-runner

Type safety

Documentation

Checklist for Maintainers

🦋 Canary release

Greptile Summary

greptile-apps bot left a comment

Choose a reason for hiding this comment

greptile-apps bot Jan 6, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 6, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 6, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 6, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 6, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 6, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 6, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 6, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 6, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 6, 2025

Choose a reason for hiding this comment

nx-cloud bot commented Jan 6, 2025 • edited Loading

storybook-pr-benchmarking bot commented Jan 6, 2025 • edited Loading

Package Benchmarks

@storybook/addon-a11y

@storybook/addon-actions

@storybook/addon-backgrounds

@storybook/addon-essentials

@storybook/addon-highlight

@storybook/addon-measure

@storybook/addon-outline

@storybook/addon-viewport

@storybook/core

@storybook/experimental-nextjs-vite

@storybook/html-vite

@storybook/html-webpack5

@storybook/nextjs

@storybook/preact-webpack5

@storybook/react-native-web-vite

@storybook/react-vite

@storybook/react-webpack5

@storybook/server-webpack5

@storybook/svelte-webpack5

@storybook/vue3-webpack5

@storybook/web-components-vite

@storybook/web-components-webpack5

storybook

sb

@storybook/cli

@storybook/codemod

@storybook/preset-react-webpack

@storybook/react

dannyhw commented Feb 9, 2025 • edited Loading

shilman commented Feb 10, 2025

greptile-apps bot left a comment

Choose a reason for hiding this comment

greptile-apps bot Feb 12, 2025

Choose a reason for hiding this comment

greptile-apps bot Feb 12, 2025

Choose a reason for hiding this comment

kasperpeulen commented Jan 6, 2025 •

edited by greptile-apps bot

Loading

nx-cloud bot commented Jan 6, 2025 •

edited

Loading

storybook-pr-benchmarking bot commented Jan 6, 2025 •

edited

Loading

`@storybook/addon-a11y`

`@storybook/addon-actions`

`@storybook/addon-backgrounds`

`@storybook/addon-essentials`

`@storybook/addon-highlight`

`@storybook/addon-measure`

`@storybook/addon-outline`

`@storybook/addon-viewport`

`@storybook/core`

`@storybook/experimental-nextjs-vite`

`@storybook/html-vite`

`@storybook/html-webpack5`

`@storybook/nextjs`

`@storybook/preact-webpack5`

`@storybook/react-native-web-vite`

`@storybook/react-vite`

`@storybook/react-webpack5`

`@storybook/server-webpack5`

`@storybook/svelte-webpack5`

`@storybook/vue3-webpack5`

`@storybook/web-components-vite`

`@storybook/web-components-webpack5`

`storybook`

`sb`

`@storybook/cli`

`@storybook/codemod`

`@storybook/preset-react-webpack`

`@storybook/react`

dannyhw commented Feb 9, 2025 •

edited

Loading