Bug: fix !autodocs stories showing in primary preview #32712
Conversation
- add usePrimaryStory hook to centralize primary story selection - refactor Primary, Controls to use the hook instead of stories[0] - ensure !autodocs stories are correctly hidden in all doc blocks
📝 WalkthroughWalkthroughRefactors Controls and Primary to resolve the current story via a new usePrimaryStory hook instead of context.resolveOf or props. Adds usePrimaryStory to select the first autodocs-tagged story from DocsContext.componentStories(). Components early-return null when no story is found. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant DocsPage
participant Primary
participant Controls
participant usePrimaryStory as usePrimaryStory()
participant DocsContext
User->>DocsPage: open docs
DocsPage->>Primary: render
DocsPage->>Controls: render
rect rgba(230,245,255,0.5)
Primary->>usePrimaryStory: request primary story
Controls->>usePrimaryStory: request primary story
usePrimaryStory->>DocsContext: componentStories()
DocsContext-->>usePrimaryStory: [stories]
usePrimaryStory-->>Primary: PreparedStory | undefined
usePrimaryStory-->>Controls: PreparedStory | undefined
end
alt Story found
Primary->>DocsPage: render DocsStory(primary)
Controls->>DocsPage: render controls(primary)
else No story
Primary-->>DocsPage: return null
Controls-->>DocsPage: return null
end
note right of usePrimaryStory: selects first story with tag "autodocs"
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes ✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
code/addons/docs/src/blocks/blocks/usePrimaryStory.ts (1)
7-10: Consider clarifying the doc comment.The comment states "filters out stories with the '!autodocs' tag", which is technically correct but could be more direct. Consider rephrasing to explicitly state what the hook returns.
Apply this diff to clarify the documentation:
/** - * A hook to get the primary story for the current component It filters out stories with the - * '!autodocs' tag. + * A hook to get the primary story for the current component. Returns the first story + * that includes the 'autodocs' tag (excluding stories tagged with '!autodocs'). */
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
code/addons/docs/src/blocks/blocks/Controls.tsx(2 hunks)code/addons/docs/src/blocks/blocks/Primary.tsx(1 hunks)code/addons/docs/src/blocks/blocks/usePrimaryStory.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Adhere to ESLint and Prettier rules across all JS/TS source files
Files:
code/addons/docs/src/blocks/blocks/Controls.tsxcode/addons/docs/src/blocks/blocks/Primary.tsxcode/addons/docs/src/blocks/blocks/usePrimaryStory.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Fix type errors and prefer precise typings instead of using any or suppressions, consistent with strict mode
Files:
code/addons/docs/src/blocks/blocks/Controls.tsxcode/addons/docs/src/blocks/blocks/Primary.tsxcode/addons/docs/src/blocks/blocks/usePrimaryStory.ts
🧬 Code graph analysis (3)
code/addons/docs/src/blocks/blocks/Controls.tsx (1)
code/addons/docs/src/blocks/blocks/usePrimaryStory.ts (1)
usePrimaryStory(11-15)
code/addons/docs/src/blocks/blocks/Primary.tsx (1)
code/addons/docs/src/blocks/blocks/usePrimaryStory.ts (1)
usePrimaryStory(11-15)
code/addons/docs/src/blocks/blocks/usePrimaryStory.ts (1)
code/core/src/types/modules/story.ts (1)
PreparedStory(100-116)
🔇 Additional comments (2)
code/addons/docs/src/blocks/blocks/Primary.tsx (1)
7-13: LGTM! Clean refactor that centralizes story resolution.The component simplification looks good:
- Removes props-based complexity
- Delegates story selection to
usePrimaryStoryhook- Properly handles the case when no autodocs-tagged story exists
- Maintains the same rendering behavior for the primary story
This change aligns with the PR objective of fixing the !autodocs tag behavior for the first story.
code/addons/docs/src/blocks/blocks/Controls.tsx (1)
43-50: Approve Controls fallback logic
- Uses
usePrimaryStorywhenofprop is omitted (ensuring<Controls />in DocsPage and MDX renders correctly).- Gracefully returns
nullwhen no story is available.- Aligns with the Primary component’s approach and resolves the autodocs visibility issue.
| export const usePrimaryStory = (): PreparedStory | undefined => { | ||
| const context = useContext(DocsContext); | ||
| const stories = context.componentStories(); | ||
| return stories.find((story) => story.tags.includes('autodocs')); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
🧩 Analysis chain
LGTM! The hook logic correctly addresses the bug.
The implementation correctly selects the first story with the 'autodocs' tag, which excludes stories marked with '!autodocs'. This should fix the issue where stories tagged with '!autodocs' were appearing as the primary preview when positioned first.
Verify the fix resolves the reported issue by testing against the reproduction case:
🏁 Script executed:
#!/bin/bash
# Description: Search for test files or stories that might cover the !autodocs tag behavior
# Look for existing tests related to autodocs tags
rg -n --type=ts --type=tsx -C3 '\!autodocs|autodocs.*tag'
# Find stories or test files that might need verification
fd -e story -e test.ts -e test.tsx | head -20Length of output: 1067
Add unit tests for '!autodocs' exclusion
No existing tests cover scenarios where a story is tagged !autodocs. Add tests (e.g., code/addons/docs/src/blocks/blocks/usePrimaryStory.test.ts) to verify that:
- Stories with the
'autodocs'tag are selected. - Stories with the
'!autodocs'tag are excluded.
Sidnioulz
changed the title
|
View your CI Pipeline Execution ↗ for commit ef59364
☁️ Nx Cloud last updated this comment at |
|
After pull from upstream and rebase, I ran |
3 participants
Closes #32683
What I did
Added usePrimaryStory hook to centralize primary story selection.
Refactored Primary.tsx to use usePrimaryStory instead of selecting stories[0].
Refactored Controls.tsx to call usePrimaryStory when no specific story is provided via of.
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
Translation:
Before modification:
Write a sample sandbox:
From the logs, we can see that the handling of
tagsincode/core/src/preview-api/modules/store/csf/prepareStory.tsis correct.The issue lies in
code/addons/docs/src/blocks/blocks/Primary.tsx,where
const primaryStory = context.componentStoriesFromCSFFile(csfFile)[0];always selects the first story directly.
After modification:
Primary.tsxandControls.tsxnow correctly retrieve the stories with theautodocstag.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
Bug Fixes
Refactor