Core: Move CSF to monorepo #30488

kasperpeulen · 2025-02-06T12:48:44Z

Closes #

What I did

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

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

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 PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

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

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	80.4 MB	80.4 MB	319 B	2.34	0%
initSize	80.4 MB	80.4 MB	319 B	-1.31	0%
diffSize	97 B	97 B	0 B	-1.36	0%
buildSize	7.25 MB	7.24 MB	-3.81 kB	1.56	-0.1%
buildSbAddonsSize	1.87 MB	1.87 MB	-1.18 kB	0.95	-0.1%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.88 MB	1.88 MB	-2.93 kB	0.69	-0.2%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.94 MB	3.94 MB	-4.11 kB	0.85	-0.1%
buildPreviewSize	3.3 MB	3.3 MB	296 B	2.29	0%
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	22s	27.8s	5.8s	0.85	20.9%
generateTime	19s	17.2s	-1s -808ms	-1.43	🔰-10.5%
initTime	4.7s	4.1s	-616ms	-1.4	🔰-14.9%
buildTime	8.3s	7.6s	-611ms	-1.33	🔰-7.9%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	6s	5.2s	-869ms	-0.4	-16.7%
devManagerResponsive	4.4s	3.7s	-661ms	-0.68	-17.5%
devManagerHeaderVisible	966ms	682ms	-284ms	-1.08	-41.6%
devManagerIndexVisible	1s	689ms	-311ms	-1.4	🔰-45.1%
devStoryVisibleUncached	4.4s	4.1s	-206ms	0.52	-4.9%
devStoryVisible	1s	771ms	-229ms	-0.74	-29.7%
devAutodocsVisible	924ms	817ms	-107ms	0.5	-13.1%
devMDXVisible	879ms	730ms	-149ms	-0.13	-20.4%
buildManagerHeaderVisible	791ms	743ms	-48ms	-0.34	-6.5%
buildManagerIndexVisible	955ms	764ms	-191ms	-0.49	-25%
buildStoryVisible	768ms	730ms	-38ms	-0.29	-5.2%
buildAutodocsVisible	727ms	617ms	-110ms	-0.26	-17.8%
buildMDXVisible	710ms	665ms	-45ms	-0.02	-6.8%

Greptile Summary

Moving CSF (Component Story Format) to a monorepo structure with significant changes across the codebase to consolidate and standardize CSF functionality.

Added new /csf directory in core package with key files like SBType.ts, story.ts, and includeConditionalArg.ts for type definitions and core functionality
Updated import paths across codebase from @storybook/csf to @storybook/core/csf or @storybook/internal/csf
Added new CSF exports in package.json files with proper type definitions and module formats
Added comprehensive test coverage for CSF functionality including story composition, type validation, and conditional arguments
Introduced new utility functions and types while maintaining backward compatibility with existing CSF implementations

types of csf properties

This reverts commit 3fd17a7, reversing changes made to 045f8e18202097b5508a15fdbd2d16ef6f3f9472.

Co-Authored-By: Michael Shilman <shilman@users.noreply.github.com>

nx-cloud · 2025-02-06T12:53:24Z

View your CI Pipeline Execution ↗ for commit 43f0399.

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

☁️ Nx Cloud last updated this comment at 2025-02-07 15:07:56 UTC

greptile-apps

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

greptile-apps · 2025-02-06T12:52:49Z

code/core/src/csf/SBType.ts

+interface SBBaseType {
+  required?: boolean;
+  raw?: string;
+}


style: SBBaseType interface should be exported since it's used by other exported types

Suggested change

interface SBBaseType {

required?: boolean;

raw?: string;

}

export interface SBBaseType {

required?: boolean;

raw?: string;

}

code/core/src/csf/includeConditionalArg.test.ts

greptile-apps · 2025-02-06T12:53:14Z

code/core/src/csf/includeConditionalArg.test.ts

+      ['object true', { eq: { x: 1 } }, { x: 1 }, true],
+      ['object true', { eq: { x: 1 } }, { x: 2 }, false],


style: Duplicate test case name 'object true' may cause confusion when debugging failures

greptile-apps · 2025-02-06T12:53:17Z

code/core/src/csf/includeConditionalArg.ts

+const count = (vals: any[]) => vals.map((v) => typeof v !== 'undefined').filter(Boolean).length;
+
+export const testValue = (cond: Omit<Conditional, 'arg' | 'global'>, value: any) => {
+  const { exists, eq, neq, truthy } = cond as any;


style: casting to 'any' loses type safety - consider using a more specific type for destructured values

greptile-apps · 2025-02-06T12:54:14Z

code/core/src/csf/story.test.ts

+  expectTypeOf<ArgsFromMeta<XRenderer, typeof meta>>().toEqualTypeOf<{
+    theme: string;
+    decoratorArg: string;
+    decoratorArg2: string;
+    loaderArg: number;
+    loaderArg2: number;
+  }>();


logic: ArgsFromMeta type test doesn't verify that the 'disabled' property from meta.args is included in the inferred type

greptile-apps · 2025-02-06T12:54:16Z

code/core/src/csf/story.ts

+  /** @deprecated Project `globals` renamed to `initiaGlobals` */
+  globals?: Globals;
+  initialGlobals?: Globals;


syntax: typo in deprecation message - 'initiaGlobals' should be 'initialGlobals'

Suggested change

/** @deprecated Project `globals` renamed to `initiaGlobals` */

globals?: Globals;

initialGlobals?: Globals;

/** @deprecated Project `globals` renamed to `initialGlobals` */

globals?: Globals;

initialGlobals?: Globals;

greptile-apps · 2025-02-06T12:54:17Z

code/core/src/csf/index.ts

+    .toLowerCase()
+
+    .replace(/[ ’–—―′¿'`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '-')
+    .replace(/-+/g, '-')


style: regex pattern includes redundant escape characters for characters that don't need escaping in character class

greptile-apps · 2025-02-06T12:59:33Z

code/lib/blocks/src/blocks/useGlobals.ts

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { GLOBALS_UPDATED } from 'storybook/internal/core-events';
 import type { DocsContextProps, PreparedStory } from 'storybook/internal/types';

-import type { Globals } from '@storybook/csf';
+import type { Globals } from '@storybook/internal/csf';

 export const useGlobals = (story: PreparedStory, context: DocsContextProps): [Globals] => {


style: Consider adding return type documentation since this hook returns a tuple with a single element. The type signature could be clearer as [Globals, void] or just Globals.

greptile-apps · 2025-02-06T13:00:32Z

code/lib/cli/core/csf/index.d.ts

@@ -0,0 +1,2 @@
+export * from '@storybook/core/csf';
+export type * from '@storybook/core/csf';


syntax: The export type * syntax is incorrect. TypeScript uses export type { ... } with explicit type names. Consider using export * as type or listing specific types to export.

Suggested change

export type * from '@storybook/core/csf';

export * as type from '@storybook/core/csf';

storybook-pr-benchmarking · 2025-02-06T15:13:07Z

Package Benchmarks

^{Commit: 43f0399, ran on 7 February 2025 at 15:15:27 UTC}

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

`@storybook/addon-a11y`

	Before	After	Difference
Dependency count	56	54	🎉 -2 🎉
Self size	332 KB	332 KB	0 B
Dependency size	12.71 MB	12.46 MB	🎉 -252 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/addon-docs`

	Before	After	Difference
Dependency count	15	13	🎉 -2 🎉
Self size	2.26 MB	2.26 MB	0 B
Dependency size	9.66 MB	9.41 MB	🎉 -252 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/addon-essentials`

	Before	After	Difference
Dependency count	34	32	🎉 -2 🎉
Self size	12 KB	12 KB	0 B
Dependency size	15.68 MB	15.43 MB	🎉 -255 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/addon-interactions`

	Before	After	Difference
Dependency count	56	54	🎉 -2 🎉
Self size	128 KB	128 KB	0 B
Dependency size	12.74 MB	12.48 MB	🎉 -252 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/addon-links`

	Before	After	Difference
Dependency count	4	2	🎉 -2 🎉
Self size	19 KB	19 KB	🚨 +8 B 🚨
Dependency size	284 KB	32 KB	🎉 -252 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/addon-storysource`

	Before	After	Difference
Dependency count	7	5	🎉 -2 🎉
Self size	1.89 MB	1.89 MB	0 B
Dependency size	10.80 MB	10.55 MB	🎉 -252 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/experimental-addon-test`

	Before	After	Difference
Dependency count	60	58	🎉 -2 🎉
Self size	831 KB	831 KB	🎉 -32 B 🎉
Dependency size	14.19 MB	13.94 MB	🎉 -252 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/core`

	Before	After	Difference
Dependency count	54	52	🎉 -2 🎉
Self size	19.22 MB	19.26 MB	🚨 +40 KB 🚨
Dependency size	14.44 MB	14.19 MB	🎉 -253 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/experimental-nextjs-vite`

	Before	After	Difference
Dependency count	188	186	🎉 -2 🎉
Self size	232 KB	232 KB	0 B
Dependency size	48.25 MB	47.99 MB	🎉 -252 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/nextjs`

	Before	After	Difference
Dependency count	592	591	🎉 -1 🎉
Self size	472 KB	472 KB	0 B
Dependency size	83.46 MB	83.41 MB	🎉 -50 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/server-webpack5`

	Before	After	Difference
Dependency count	255	253	🎉 -2 🎉
Self size	14 KB	14 KB	0 B
Dependency size	32.69 MB	32.44 MB	🎉 -252 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/svelte-vite`

	Before	After	Difference
Dependency count	134	135	🚨 +1 🚨
Self size	22 KB	22 KB	0 B
Dependency size	36.38 MB	36.43 MB	🚨 +50 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/svelte-webpack5`

	Before	After	Difference
Dependency count	310	311	🚨 +1 🚨
Self size	6 KB	6 KB	0 B
Dependency size	39.28 MB	39.33 MB	🚨 +50 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/sveltekit`

	Before	After	Difference
Dependency count	142	143	🚨 +1 🚨
Self size	47 KB	47 KB	0 B
Dependency size	39.68 MB	39.73 MB	🚨 +50 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/blocks`

	Before	After	Difference
Dependency count	4	2	🎉 -2 🎉
Self size	607 KB	607 KB	🎉 -8 B 🎉
Dependency size	1.53 MB	1.28 MB	🎉 -252 KB 🎉
Bundle Size Analyzer	Link	Link

`storybook`

	Before	After	Difference
Dependency count	55	53	🎉 -2 🎉
Self size	22 KB	23 KB	🚨 +380 B 🚨
Dependency size	33.66 MB	33.45 MB	🎉 -213 KB 🎉
Bundle Size Analyzer	Link	Link

`sb`

	Before	After	Difference
Dependency count	56	54	🎉 -2 🎉
Self size	1 KB	1 KB	0 B
Dependency size	33.68 MB	33.47 MB	🎉 -213 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	388	386	🎉 -2 🎉
Self size	503 KB	503 KB	0 B
Dependency size	75.54 MB	75.33 MB	🎉 -213 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	277	275	🎉 -2 🎉
Self size	617 KB	617 KB	🚨 +130 B 🚨
Dependency size	65.62 MB	65.41 MB	🎉 -213 KB 🎉
Bundle Size Analyzer	Link	Link

`create-storybook`

	Before	After	Difference
Dependency count	113	111	🎉 -2 🎉
Self size	1.11 MB	1.11 MB	0 B
Dependency size	42.79 MB	42.58 MB	🎉 -213 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/source-loader`

	Before	After	Difference
Dependency count	5	3	🎉 -2 🎉
Self size	41 KB	41 KB	0 B
Dependency size	10.75 MB	10.49 MB	🎉 -252 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/test`

	Before	After	Difference
Dependency count	53	51	🎉 -2 🎉
Self size	1.82 MB	1.82 MB	🎉 -27 B 🎉
Dependency size	8.09 MB	7.84 MB	🎉 -252 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/preset-server-webpack`

	Before	After	Difference
Dependency count	18	16	🎉 -2 🎉
Self size	10 KB	10 KB	0 B
Dependency size	1.48 MB	1.23 MB	🎉 -252 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/server`

	Before	After	Difference
Dependency count	9	7	🎉 -2 🎉
Self size	13 KB	13 KB	🎉 -32 B 🎉
Dependency size	974 KB	722 KB	🎉 -252 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/svelte`

	Before	After	Difference
Dependency count	106	107	🚨 +1 🚨
Self size	96 KB	96 KB	🚨 +32 B 🚨
Dependency size	10.59 MB	10.64 MB	🚨 +50 KB 🚨
Bundle Size Analyzer	Link	Link

code/core/src/csf/includeConditionalArg.test.ts

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

shilman

Looks good!

…thout listing it as dep

shilman and others added 30 commits December 9, 2019 14:41

Port from monorepo

4757376

types of csf properties

168ddc6

add parameters to CSFStory

17ddd7f

field types as enum

a2dc364

updated interfaces

1ca8a10

move placeholder to text variable

13aedba

rename defaultValue to value

76c7352

renamed StoryMetadata

09c659a

remove unused

7885f22

removed array type, sb specific

b0e456e

added Array field type

11fd0f9

date field

c0d96f2

remove storyvalues

72ce652

fixed typos

e2be313

typo

1db0d6f

datePicker, timePicker

b8d9224

added maxRows to text type

5c5a97e

added order fied

d1f13a8

apply @BeInLife 's comment about generic type for StoryPropertyOptions

7bcb7f1

types of csf properties (#3)

3fd17a7

types of csf properties

Revert "types of csf properties (#3)"

a153358

This reverts commit 3fd17a7, reversing changes made to 045f8e18202097b5508a15fdbd2d16ef6f3f9472.

add first proposal types for kind/story meta

aae5e7e

add right type for subcomponents field

e9640be

Co-Authored-By: Michael Shilman <shilman@users.noreply.github.com>

improve parameters typings

8c78ed4

add exports, revert parameters to be less strict

3dc8b62

rewrite types without tricky infer part

2156f57

add tests for story meta types

d40d389

return generic for parameters type

bd014a0

update babel to support optional chaining syntax

7857919

add more kinds/stories to test typings

44e440d

kasperpeulen added 3 commits February 6, 2025 13:46

Move CSF package to monorepo

edff9f0

Change usage in core package

57a8edd

Change usage outside of core package

d5bd041

kasperpeulen added the ci:normal label Feb 6, 2025

kasperpeulen requested review from ndelangen and JReinhold February 6, 2025 12:49

kasperpeulen added build Internal-facing build tooling & test updates maintenance User-facing maintenance tasks and removed build Internal-facing build tooling & test updates labels Feb 6, 2025

Eslint

b1850a7

greptile-apps bot reviewed Feb 6, 2025

View reviewed changes

Fix build

0c3c48a

kasperpeulen changed the title ~~Move CSF to monorepo~~ Core: Move CSF to monorepo Feb 6, 2025

kasperpeulen added 3 commits February 6, 2025 15:43

Fix tests

cfc2b59

Fix tests

6a325db

Fix build

a1b216d

Fix eslint

0dc0d0c

shilman reviewed Feb 6, 2025

View reviewed changes

code/core/src/csf/includeConditionalArg.test.ts Outdated Show resolved Hide resolved

Apply suggestions from code review

68f742a

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

shilman approved these changes Feb 6, 2025

View reviewed changes

kasperpeulen added 4 commits February 6, 2025 16:48

Fix test

329d5b6

Remove @storybook/csf from package.json

c71d283

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

1d5017f

Add csf back to svelte, workaround for addon-svelte-csf needing it wi…

43f0399

…thout listing it as dep

kasperpeulen force-pushed the kasper/csf-in-monorepo branch from efc364c to 43f0399 Compare February 7, 2025 15:01

kasperpeulen merged commit 856aeb4 into next Feb 7, 2025
57 of 58 checks passed

kasperpeulen deleted the kasper/csf-in-monorepo branch February 7, 2025 15:43

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

Release: Prerelease 8.6.0-alpha.5 #30466

Merged

11 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Core: Move CSF to monorepo #30488

Core: Move CSF to monorepo #30488

kasperpeulen commented Feb 6, 2025 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Feb 6, 2025 •

edited

Loading

greptile-apps bot left a comment

greptile-apps bot Feb 6, 2025

greptile-apps bot Feb 6, 2025

greptile-apps bot Feb 6, 2025

greptile-apps bot Feb 6, 2025

greptile-apps bot Feb 6, 2025

greptile-apps bot Feb 6, 2025

greptile-apps bot Feb 6, 2025

greptile-apps bot Feb 6, 2025

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

edited

Loading

shilman left a comment

		['object true', { eq: { x: 1 } }, { x: 1 }, true],
		['object true', { eq: { x: 1 } }, { x: 2 }, false],

		@@ -0,0 +1,2 @@
		export * from '@storybook/core/csf';
		export type * from '@storybook/core/csf';

	export type * from '@storybook/core/csf';
	export * as type from '@storybook/core/csf';

Core: Move CSF to monorepo #30488

Core: Move CSF to monorepo #30488

Conversation

kasperpeulen commented Feb 6, 2025 • edited by storybook-pr-benchmarking bot Loading

What I did

Checklist for Contributors

Testing

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

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Greptile Summary

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

greptile-apps bot left a comment

Choose a reason for hiding this comment

greptile-apps bot Feb 6, 2025

Choose a reason for hiding this comment

greptile-apps bot Feb 6, 2025

Choose a reason for hiding this comment

greptile-apps bot Feb 6, 2025

Choose a reason for hiding this comment

greptile-apps bot Feb 6, 2025

Choose a reason for hiding this comment

greptile-apps bot Feb 6, 2025

Choose a reason for hiding this comment

greptile-apps bot Feb 6, 2025

Choose a reason for hiding this comment

greptile-apps bot Feb 6, 2025

Choose a reason for hiding this comment

greptile-apps bot Feb 6, 2025

Choose a reason for hiding this comment

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

Package Benchmarks

@storybook/addon-a11y

@storybook/addon-docs

@storybook/addon-essentials

@storybook/addon-interactions

@storybook/addon-links

@storybook/addon-storysource

@storybook/experimental-addon-test

@storybook/core

@storybook/experimental-nextjs-vite

@storybook/nextjs

@storybook/server-webpack5

@storybook/svelte-vite

@storybook/svelte-webpack5

@storybook/sveltekit

@storybook/blocks

storybook

sb

@storybook/cli

@storybook/codemod

create-storybook

@storybook/source-loader

@storybook/test

@storybook/preset-server-webpack

@storybook/server

@storybook/svelte

shilman left a comment

Choose a reason for hiding this comment

kasperpeulen commented Feb 6, 2025 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Feb 6, 2025 •

edited

Loading

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

edited

Loading

`@storybook/addon-a11y`

`@storybook/addon-docs`

`@storybook/addon-essentials`

`@storybook/addon-interactions`

`@storybook/addon-links`

`@storybook/addon-storysource`

`@storybook/experimental-addon-test`

`@storybook/core`

`@storybook/experimental-nextjs-vite`

`@storybook/nextjs`

`@storybook/server-webpack5`

`@storybook/svelte-vite`

`@storybook/svelte-webpack5`

`@storybook/sveltekit`

`@storybook/blocks`

`storybook`

`sb`

`@storybook/cli`

`@storybook/codemod`

`create-storybook`

`@storybook/source-loader`

`@storybook/test`

`@storybook/preset-server-webpack`

`@storybook/server`

`@storybook/svelte`