Add Stories block support for of and docs.stories options#34775
Open
kalinco-glitch wants to merge 3 commits into
Open
Add Stories block support for of and docs.stories options#34775kalinco-glitch wants to merge 3 commits into
kalinco-glitch wants to merge 3 commits into
Conversation
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (4)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThe Stories docs block gains an ChangesStories Block Module Resolution and Configuration
Sequence Diagram(s)sequenceDiagram
participant DocsPage
participant StoriesBlock
participant useOf
participant PreparedMeta
participant DocsStory
DocsPage->>StoriesBlock: render Stories block (props: of, includePrimaryStory, forceInitialArgs)
StoriesBlock->>useOf: resolve `of` module
useOf->>PreparedMeta: return prepared meta / stories
StoriesBlock->>DocsStory: render each story with __forceInitialArgs and showPrimaryStory decision
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 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: 3
🧹 Nitpick comments (4)
code/addons/docs/src/blocks/examples/StoriesBlockParameters.stories.tsx (1)
1-27: ⚡ Quick winRun the linter on the new file.
Please run the linter to ensure the new file follows all linting rules:
cd code && yarn lint:js:cmd addons/docs/src/blocks/examples/StoriesBlockParameters.stories.tsx --fixAs per coding guidelines: "Lint with
yarn --cwd code lint:js:cmd <file-relative-to-code-folder> --fixafter changing files".🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@code/addons/docs/src/blocks/examples/StoriesBlockParameters.stories.tsx` around lines 1 - 27, Run the project linter on the new story file and apply fixes: execute yarn --cwd code lint:js:cmd addons/docs/src/blocks/examples/StoriesBlockParameters.stories.tsx --fix, then commit any changes; ensure the exported consts (Primary, Secondary, Tertiary), the meta constant (meta) and the import of EmptyExample follow the repo lint rules (formatting, ordering, and unused/import rules) and that the file satisfies Meta<typeof EmptyExample> typing without lint errors.code/addons/docs/src/types.ts (1)
36-36: ⚡ Quick winUse proper Storybook types instead of
anyfor the filter function.The
filterfunction signature usesanyfor bothstoryandcontextparameters, which degrades type safety. Storybook's type system includes proper types for stories and story contexts that should be used here (e.g., fromstorybook/internal/types).♻️ Suggested improvement
Consider using proper types like
PreparedStoryandStoryContextor similar types from Storybook's internal type system:type StoriesBlockParameters = { /** Filter which stories are rendered by the Stories block */ - filter?: (story: any, context: any) => boolean; + filter?: (story: PreparedStory, context: StoryContext) => boolean; /** When rendering stories, whether the first story should be included */ includePrimaryStory?: boolean;🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@code/addons/docs/src/types.ts` at line 36, The filter property in types.ts currently uses broad any types; update the signature of filter (the exported type/interface that defines filter) to use Storybook's specific story and context types (e.g., PreparedStory and StoryContext or the equivalent types from Storybook's type package) and add the appropriate import from Storybook (e.g., import { PreparedStory, StoryContext } from the Storybook types module). Ensure the filter signature becomes (story: PreparedStory, context: StoryContext) => boolean (or the exact names provided by the Storybook version in use) so the types align with the rest of the codebase.code/addons/docs/src/blocks/blocks/Stories.tsx (1)
43-115: ⚡ Quick winRun the linter after making changes.
The coding guidelines require running the linter on changed TypeScript files. Please run the following command to ensure the code follows all linting rules:
cd code && yarn lint:js:cmd addons/docs/src/blocks/blocks/Stories.tsx --fixAs per coding guidelines: "Lint with
yarn --cwd code lint:js:cmd <file-relative-to-code-folder> --fixorcd code && yarn lint:js:cmd <file-relative-to-code-folder>after changing files".🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@code/addons/docs/src/blocks/blocks/Stories.tsx` around lines 43 - 115, The linter must be run to fix styling/TS issues introduced in the StoriesImpl component; run the project's lint command targeting the changed file (e.g. from the repo root run the equivalent of cd code && yarn lint:js:cmd addons/docs/src/blocks/blocks/Stories.tsx --fix) and re-run tests, then commit the autofixed changes that affect the StoriesImpl component (and any other files modified by the fixer) before pushing.code/addons/docs/src/blocks/blocks/Stories.stories.tsx (1)
1-70: ⚡ Quick winRun the linter after making changes.
Please run the linter to ensure the code follows all linting rules:
cd code && yarn lint:js:cmd addons/docs/src/blocks/blocks/Stories.stories.tsx --fixAs per coding guidelines: "Lint with
yarn --cwd code lint:js:cmd <file-relative-to-code-folder> --fixafter changing files".🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@code/addons/docs/src/blocks/blocks/Stories.stories.tsx` around lines 1 - 70, Run the JS linter with autofix on the Stories.stories.tsx changes: from the repo root execute the provided lint command to fix style/format issues in the Stories component and its exports (meta, Default, WithoutPrimary, WithoutPrimaryStory, OfCSFFile, WithDocsStoriesParameters, DifferentToolbars, NoAutodocs, SomeAutodocs); specifically run: yarn --cwd code lint:js:cmd addons/docs/src/blocks/blocks/Stories.stories.tsx --fix, then commit any formatting/lint fixes.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@code/addons/docs/src/blocks/blocks/Stories.tsx`:
- Around line 57-64: The current catch in the Stories component relies on
matching an error.message string from useOf, which is brittle; change the flow
to use a dedicated error class or code instead: update the implementation that
throws in useOf to throw a specific class (e.g., MissingMetaError) or attach a
distinct error.code like 'MISSING_META', then in the Stories.tsx catch block
check error instanceof MissingMetaError or error.code === 'MISSING_META'
(instead of message.includes(...)) and only suppress/recover for that
class/code; any other errors should continue to be re-thrown as they are now.
- Around line 13-14: The imports for the Of type and useOf hook in Stories.tsx
lack explicit file extensions; update both import statements (the named type Of
and the useOf import) to reference the actual file extension (e.g., change
'./useOf' to './useOf.ts' or './useOf.tsx' depending on the module) so the
imports read './useOf.ts' (or './useOf.tsx') for both the type import and the
hook import.
In `@code/addons/docs/src/blocks/examples/StoriesBlockParameters.stories.tsx`:
- Line 3: Update the relative import of EmptyExample in
StoriesBlockParameters.stories.tsx to include an explicit file extension; change
the import that references ./EmptyExample to point to the actual module file
(e.g., ./EmptyExample.tsx) so the EmptyExample symbol is resolved with a
concrete TSX/TS extension per repo guidelines.
---
Nitpick comments:
In `@code/addons/docs/src/blocks/blocks/Stories.stories.tsx`:
- Around line 1-70: Run the JS linter with autofix on the Stories.stories.tsx
changes: from the repo root execute the provided lint command to fix
style/format issues in the Stories component and its exports (meta, Default,
WithoutPrimary, WithoutPrimaryStory, OfCSFFile, WithDocsStoriesParameters,
DifferentToolbars, NoAutodocs, SomeAutodocs); specifically run: yarn --cwd code
lint:js:cmd addons/docs/src/blocks/blocks/Stories.stories.tsx --fix, then commit
any formatting/lint fixes.
In `@code/addons/docs/src/blocks/blocks/Stories.tsx`:
- Around line 43-115: The linter must be run to fix styling/TS issues introduced
in the StoriesImpl component; run the project's lint command targeting the
changed file (e.g. from the repo root run the equivalent of cd code && yarn
lint:js:cmd addons/docs/src/blocks/blocks/Stories.tsx --fix) and re-run tests,
then commit the autofixed changes that affect the StoriesImpl component (and any
other files modified by the fixer) before pushing.
In `@code/addons/docs/src/blocks/examples/StoriesBlockParameters.stories.tsx`:
- Around line 1-27: Run the project linter on the new story file and apply
fixes: execute yarn --cwd code lint:js:cmd
addons/docs/src/blocks/examples/StoriesBlockParameters.stories.tsx --fix, then
commit any changes; ensure the exported consts (Primary, Secondary, Tertiary),
the meta constant (meta) and the import of EmptyExample follow the repo lint
rules (formatting, ordering, and unused/import rules) and that the file
satisfies Meta<typeof EmptyExample> typing without lint errors.
In `@code/addons/docs/src/types.ts`:
- Line 36: The filter property in types.ts currently uses broad any types;
update the signature of filter (the exported type/interface that defines filter)
to use Storybook's specific story and context types (e.g., PreparedStory and
StoryContext or the equivalent types from Storybook's type package) and add the
appropriate import from Storybook (e.g., import { PreparedStory, StoryContext }
from the Storybook types module). Ensure the filter signature becomes (story:
PreparedStory, context: StoryContext) => boolean (or the exact names provided by
the Storybook version in use) so the types align with the rest of the codebase.
🪄 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: 250472f4-063f-43c4-87d9-75a40fad8939
📒 Files selected for processing (4)
code/addons/docs/src/blocks/blocks/Stories.stories.tsxcode/addons/docs/src/blocks/blocks/Stories.tsxcode/addons/docs/src/blocks/examples/StoriesBlockParameters.stories.tsxcode/addons/docs/src/types.ts
valentinpalkovic
moved this from Empathy Queue (prioritized)
to On Hold
in Core Team Projects
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
3 participants
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.
Closes #22490
What I did
Added v7-style API support to the
Storiesdocs block.ofsupport soStoriescan render stories from a specified CSF fileincludePrimaryStory, while preserving the legacyincludePrimarypropforceInitialArgssupport instead of always forcing initial argstitle,includePrimaryStory, andforceInitialArgsfromparameters.docs.storiesdocs.storiestyping, including the existingfilteroptionStoriesblock behaviorChecklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
Validated locally with:
git diff --checkoxfmt --check code/addons/docs/src/blocks/blocks/Stories.tsx code/addons/docs/src/blocks/blocks/Stories.stories.tsx code/addons/docs/src/blocks/examples/StoriesBlockParameters.stories.tsx code/addons/docs/src/types.tsI was not able to run the full local ESLint suite because this checkout requires built Storybook core output for the internal
eslint-plugin-storybookworkspace package.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 PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the
@storybookjs/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>Summary by CodeRabbit
New Features
ofprop and now supports options to include/exclude the primary story, filter which stories show, set a title, and force initial args.Documentation
Bug Fixes