CLI: Use `ink` in CLI #30202

ndelangen · 2025-01-07T10:04:28Z

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	77.9 MB	77.9 MB	0 B	1.73	0%
initSize	131 MB	132 MB	812 kB	54.05	0.6%
diffSize	52.9 MB	53.7 MB	812 kB	90.57	1.5%
buildSize	7.19 MB	7.19 MB	-33 B	0.66	0%
buildSbAddonsSize	1.85 MB	1.85 MB	0 B	-1.22	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.87 MB	1.87 MB	-61 B	-0.37	0%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.91 MB	3.91 MB	-61 B	-1.35	0%
buildPreviewSize	3.28 MB	3.28 MB	28 B	9.01	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	6.5s	11.4s	4.9s	-0.18	43.1%
generateTime	19.4s	20.7s	1.2s	-0.04	6%
initTime	12.7s	15s	2.2s	0.54	15%
buildTime	8.6s	7.9s	-704ms	-1.54	🔰-8.8%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	4.7s	4.8s	72ms	-0.44	1.5%
devManagerResponsive	3.4s	3.5s	66ms	-0.5	1.9%
devManagerHeaderVisible	641ms	579ms	-62ms	-0.63	-10.7%
devManagerIndexVisible	676ms	604ms	-72ms	-0.72	-11.9%
devStoryVisibleUncached	1.8s	2s	213ms	0.54	10.5%
devStoryVisible	675ms	606ms	-69ms	-0.74	-11.4%
devAutodocsVisible	569ms	539ms	-30ms	-0.25	-5.6%
devMDXVisible	573ms	480ms	-93ms	-0.9	-19.4%
buildManagerHeaderVisible	555ms	546ms	-9ms	-0.55	-1.6%
buildManagerIndexVisible	641ms	645ms	4ms	-0.35	0.6%
buildStoryVisible	536ms	533ms	-3ms	-0.54	-0.6%
buildAutodocsVisible	495ms	464ms	-31ms	-0.28	-6.7%
buildMDXVisible	450ms	422ms	-28ms	-0.91	-6.6%

nx-cloud · 2025-01-07T10:07:32Z

View your CI Pipeline Execution ↗ for commit bbdae44.

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

☁️ Nx Cloud last updated this comment at 2025-01-15 07:58:29 UTC

storybook-pr-benchmarking · 2025-01-07T10:18:38Z

Package Benchmarks

^{Commit: bbdae44, ran on 15 January 2025 at 08:03:50 UTC}

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

`@storybook/experimental-addon-test`

	Before	After	Difference
Dependency count	60	60	0
Self size	762 KB	776 KB	🚨 +14 KB 🚨
Dependency size	14.15 MB	14.15 MB	🚨 +49 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/core`

	Before	After	Difference
Dependency count	53	54	🚨 +1 🚨
Self size	19.08 MB	19.60 MB	🚨 +519 KB 🚨
Dependency size	14.43 MB	14.72 MB	🚨 +291 KB 🚨
Bundle Size Analyzer	Link	Link

`storybook`

	Before	After	Difference
Dependency count	54	55	🚨 +1 🚨
Self size	22 KB	24 KB	🚨 +2 KB 🚨
Dependency size	33.51 MB	34.32 MB	🚨 +809 KB 🚨
Bundle Size Analyzer	Link	Link

`sb`

	Before	After	Difference
Dependency count	55	56	🚨 +1 🚨
Self size	1 KB	1 KB	🎉 -2 B 🎉
Dependency size	33.54 MB	34.35 MB	🚨 +811 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	398	399	🚨 +1 🚨
Self size	504 KB	248 KB	🎉 -256 KB 🎉
Dependency size	75.55 MB	76.92 MB	🚨 +1.37 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	276	277	🚨 +1 🚨
Self size	612 KB	612 KB	🎉 -8 B 🎉
Dependency size	65.36 MB	66.17 MB	🚨 +809 KB 🚨
Bundle Size Analyzer	Link	Link

`create-storybook`

	Before	After	Difference
Dependency count	112	113	🚨 +1 🚨
Self size	1.11 MB	1.67 MB	🚨 +556 KB 🚨
Dependency size	42.65 MB	43.46 MB	🚨 +811 KB 🚨
Bundle Size Analyzer	Link	Link

…t reproduce locally

…/storybook into norbert/cli-with-ink

…used CLI-flags

ghengeveld

Can you avoid the dependency between modernProgram and legacyProgram somehow? Seems a bit convoluted and confusing.

ghengeveld · 2025-01-13T18:34:00Z

code/lib/create-storybook/src/bin/index.ts

-  .name('Initialize Storybook into your project.')
+const createStorybookProgram = program.name('Initialize Storybook into your project.');
+
+const modernProgram = Object.entries(modernInputs.shape).reduce((acc, [key, schema]) => {


It's not immediately obvious what this reduce is for. Could you add a comment?

This converts the zod runtime interface to a program.options()-chain for commander.
I added a comment higher up in the file.

ghengeveld · 2025-01-13T18:37:15Z

code/lib/create-storybook/src/bin/index.ts

+  if (typeName.match('String')) {
+    acc.option(`--${flag} <option>`, description, value);
+  } else if (typeName.match('Enum')) {
+    acc.option(`--${flag} <option>`, description, value);
+  } else if (typeName.match('Boolean')) {
+    acc.option(`--${flag}`, description, value);
+    if (value === true) {
+      acc.option(`--no-${flag}`, `inverted --${flag}`);
+    }
+  }


Can't we extend modernInputs to include the legacy formats, so we don't have to map them here?

This makes it easier to remove the legacy options, keeping them separate.

The legacy options don't use zod, and use the shorthand flags, which I'm not supporting here, since I don't deem it necessary.

I'm open to not using zod though, but this ensures we don't have any flags that do not result in state, as well as verify the user is passing valid options.

code/lib/create-storybook/src/bin/index.ts

wip

ndelangen added 3 commits January 7, 2025 09:51

ink in core and esm in create-storybook

bde2134

ink in init

7e4592d

Merge branch 'next' into norbert/cli-with-ink

9f88950

ndelangen added the ci:normal label Jan 7, 2025

ndelangen added 20 commits January 7, 2025 11:55

fix

59d7c63

keep other package dist bundling unchanged

6462b7b

fix

3a19d00

Merge branch 'next' into norbert/cli-with-ink

71df9d9

support ink types

b5f7b2e

use esm of CLI

25d7e76

fixes for check to support for moduleresolution=bundler

760ce6d

add cjs

c44aca3

undo shim change in prepare script

321de92

Merge branch 'next' into norbert/cli-with-ink

9683316

disable parallelism as it's not letting me see the issue, and i canno…

20844fc

…t reproduce locally

rendering with ink embedded in vite

57bc122

add node condition for chalk

0eec9b0

fix

e84572d

unit test pass?

0f42062

Discard changes to .circleci/config.yml

b843a68

fix linting

199b5bf

Merge branch 'norbert/cli-with-ink' of https://github.com/storybookjs…

5da8301

…/storybook into norbert/cli-with-ink

fix linting

0fccec9

add first demo story of an ink component

fb51e3b

ndelangen self-assigned this Jan 8, 2025

ndelangen added 3 commits January 8, 2025 16:13

Discard changes to code/lib/cli-storybook/test/default/cli.test.cjs

1a5fe81

cleanup

7440621

Merge branch 'next' into norbert/cli-with-ink

21c04b7

ndelangen added feature request cli labels Jan 9, 2025

ndelangen and others added 20 commits January 9, 2025 16:10

fix dev actually

35505ec

centered

f02c1a7

fix firefox Intl.Segmenter in chromatic

211318f

try to fix

580cf60

alt solution

234c8da

add debug

6555742

debug

fe1e4c7

Merge changes from POC

098a52e

conditional ink stories, do not add when running vitest

02cffc8

Merge branch 'norbert/cli-with-ink' of https://github.com/storybookjs…

c97f554

…/storybook into norbert/cli-with-ink

fix windows compilation problem with pathing

2cbdd8e

remove story I added fro debugging purposes

e821aae

trying to fix the include pattern

660aa3c

again

18b4f8d

Merge branch 'next' into norbert/cli-with-ink

82851be

cleanup

f6975ff

Merge branch 'next' into norbert/cli-with-ink

ec64802

split the create-storybook CLI into a modern & legacy part, based on …

1cdcb1a

…used CLI-flags

add comments

8c9d6af

render the app

b5d1593

ghengeveld reviewed Jan 13, 2025

View reviewed changes

ghengeveld and others added 7 commits January 14, 2025 11:18

wip

6423249

Merge pull request #30256 from storybookjs/gert/cli-with-ink

cfd010a

wip

version accurate

b6e2afe

scaffold reducer state

b530642

adding more input

cf905a2

cleanup

4b9f6cf

add more steps details

bbdae44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CLI: Use `ink` in CLI #30202

CLI: Use `ink` in CLI #30202

ndelangen commented Jan 7, 2025 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Jan 7, 2025 •

edited

Loading

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

edited

Loading

ghengeveld left a comment

ghengeveld Jan 13, 2025

ndelangen Jan 13, 2025 •

edited

Loading

ghengeveld Jan 13, 2025

ndelangen Jan 13, 2025

CLI: Use ink in CLI #30202

Are you sure you want to change the base?

CLI: Use ink in CLI #30202

Conversation

ndelangen commented Jan 7, 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

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

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

Package Benchmarks

@storybook/experimental-addon-test

@storybook/core

storybook

sb

@storybook/cli

@storybook/codemod

create-storybook

ghengeveld left a comment

Choose a reason for hiding this comment

ghengeveld Jan 13, 2025

Choose a reason for hiding this comment

ndelangen Jan 13, 2025 • edited Loading

Choose a reason for hiding this comment

ghengeveld Jan 13, 2025

Choose a reason for hiding this comment

ndelangen Jan 13, 2025

Choose a reason for hiding this comment

CLI: Use `ink` in CLI #30202

CLI: Use `ink` in CLI #30202

ndelangen commented Jan 7, 2025 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Jan 7, 2025 •

edited

Loading

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

edited

Loading

`@storybook/experimental-addon-test`

`@storybook/core`

`storybook`

`sb`

`@storybook/cli`

`@storybook/codemod`

`create-storybook`

ndelangen Jan 13, 2025 •

edited

Loading