CLI: Add "intents" question & auto-install test addon & improve test-addon compatibility #30202
Conversation
|
View your CI Pipeline Execution ↗ for commit 0063c5e.
☁️ Nx Cloud last updated this comment at |
Package BenchmarksCommit: The following packages have significant changes to their size or dependencies:
|
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 54 | 54 | 0 |
| Self size | 19.05 MB | 18.98 MB | 🎉 -74 KB 🎉 |
| Dependency size | 14.44 MB | 14.44 MB | 0 B |
| Bundle Size Analyzer | Link | Link |
storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 55 | 55 | 0 |
| Self size | 22 KB | 24 KB | 🚨 +1 KB 🚨 |
| Dependency size | 33.49 MB | 33.42 MB | 🎉 -74 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
sb
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 56 | 56 | 0 |
| Self size | 1 KB | 1 KB | 0 B |
| Dependency size | 33.52 MB | 33.44 MB | 🎉 -73 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/cli
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 388 | 359 | 🎉 -29 🎉 |
| Self size | 503 KB | 248 KB | 🎉 -255 KB 🎉 |
| Dependency size | 75.35 MB | 74.90 MB | 🎉 -451 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/codemod
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 277 | 277 | 0 |
| Self size | 617 KB | 617 KB | 0 B |
| Dependency size | 65.43 MB | 65.36 MB | 🎉 -74 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
create-storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 113 | 55 | 🎉 -58 🎉 |
| Self size | 1.11 MB | 1.34 MB | 🚨 +234 KB 🚨 |
| Dependency size | 42.63 MB | 33.42 MB | 🎉 -9.21 MB 🎉 |
| Bundle Size Analyzer | Link | Link |
…t reproduce locally
…/storybook into norbert/cli-with-ink
ndelangen
changed the title
ink in CLI![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
48 file(s) reviewed, 31 comment(s)
Edit PR Review Bot Settings | Greptile
| files: [ | ||
| '*.js', | ||
| '*.jsx', | ||
| '*.json', | ||
| '*.html', | ||
| '**/.storybook/*.ts', | ||
| '**/.storybook/*.tsx', | ||
| '**/.storybook/**/*.ts', | ||
| '**/.storybook/**/*.tsx', | ||
| ], |
There was a problem hiding this comment.
style: Consider using a more concise glob pattern like '/.storybook//*.{ts,tsx}' instead of separate patterns
| if (['dev', 'build'].includes(args[0])) { | ||
| require('@storybook/core/cli/bin'); | ||
| import('@storybook/core/cli/bin').catch((e) => { | ||
| console.error('Failed to load @storybook/core/cli/bin', e); | ||
| process.exit(1); | ||
| }); |
There was a problem hiding this comment.
style: consider adding await to ensure the import completes before any other code runs
| @@ -23,4 +23,7 @@ process.once('uncaughtException', (error) => { | |||
| throw error; | |||
| }); | |||
|
|
|||
| require('../dist/bin/index.cjs'); | |||
| import('../dist/bin/index.js').catch((error) => { | |||
There was a problem hiding this comment.
logic: Using dynamic import() with .js extension may cause issues if the file is actually .cjs - verify the correct extension is being used
|
|
||
| createStorybookProgram | ||
| .action(async (options) => { | ||
| // const d = modernInputs.safeParse(options); |
There was a problem hiding this comment.
style: Commented-out code should be removed before merging
| options.debug = options.debug ?? false; | ||
| options.dev = options.dev ?? (IS_NON_CI && IS_NON_STORYBOOK_SANDBOX); | ||
|
|
||
| await initiate(options as CommandOptions).catch(() => process.exit(1)); |
There was a problem hiding this comment.
logic: Type assertion to CommandOptions could be unsafe - consider validating options shape before assertion
| @@ -0,0 +1 @@ | |||
| declare var CLI_APP_INSTANCE: ReturnType<typeof render> | undefined; | |||
There was a problem hiding this comment.
logic: The render function type is used but not imported or defined in this file, which could cause TypeScript compilation errors if the type is not available in the global scope
| @@ -0,0 +1 @@ | |||
| declare var CLI_APP_INSTANCE: ReturnType<typeof render> | undefined; | |||
There was a problem hiding this comment.
style: Consider adding JSDoc comments to document the purpose and usage of this global variable
| const reactAct = | ||
| // @ts-expect-error act might not be available in some versions of React | ||
| typeof clonedReact.act === 'function' ? clonedReact.act : DeprecatedReactTestUtils.act; |
There was a problem hiding this comment.
style: Consider adding a type assertion here to explicitly handle the case where act might not exist on clonedReact
| function getTSDiagnostics(program: ts.Program, cwd: string, host: ts.CompilerHost): any { | ||
| return ts.formatDiagnosticsWithColorAndContext( | ||
| ts.getPreEmitDiagnostics(program).filter((d) => d.file.fileName.startsWith(cwd)), | ||
| ts.getPreEmitDiagnostics(program).filter((d) => d.file && d.file.fileName.startsWith(cwd)), | ||
| host | ||
| ); | ||
| } |
There was a problem hiding this comment.
style: consider adding a return type annotation instead of using 'any'
| function getTSDiagnostics(program: ts.Program, cwd: string, host: ts.CompilerHost): any { | |
| return ts.formatDiagnosticsWithColorAndContext( | |
| ts.getPreEmitDiagnostics(program).filter((d) => d.file.fileName.startsWith(cwd)), | |
| ts.getPreEmitDiagnostics(program).filter((d) => d.file && d.file.fileName.startsWith(cwd)), | |
| host | |
| ); | |
| } | |
| function getTSDiagnostics(program: ts.Program, cwd: string, host: ts.CompilerHost): string { | |
| return ts.formatDiagnosticsWithColorAndContext( | |
| ts.getPreEmitDiagnostics(program).filter((d) => d.file && d.file.fileName.startsWith(cwd)), | |
| host | |
| ); | |
| } |
Closes #
What I did
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
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-30202-sha-0063c5e6. Try it out in a new sandbox by runningnpx [email protected] sandboxor in an existing project withnpx [email protected] upgrade.More information
0.0.0-pr-30202-sha-0063c5e6norbert/cli-with-ink0063c5e61738340438)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 canary-release-pr.yml --field pr=30202Greptile Summary
This PR significantly enhances the Storybook CLI with new features for test addon integration and improved framework compatibility checks.
code/lib/create-storybook/src/initiate.tscode/lib/create-storybook/src/ink/steps/checks/frameworkTest.tsxcode/lib/create-storybook/src/ink/steps/checks/vitestConfigFiles.tsxcode/lib/create-storybook/src/bin/modernInputs.tsThe changes look comprehensive but the commented-out render functions in several new files suggest some UI components may not be fully implemented yet.