Docs: Add Vue, Angular, and Web Components CSF Next snippets & guidance#33542
Conversation
kylegach
added
documentation
ci:docs
kylegach
force-pushed
the
docs-csf-next-snippets-vue-angular-wc
branch
from
a930d54 to
1c15eb1
Compare
kylegach
changed the title
📝 WalkthroughWalkthroughAdded many CSF Next examples and tabTitle annotations across docs snippets, introducing preview.meta / definePreview and meta.story patterns for multiple frameworks, wiring addonA11y() into preview snippets, plus numerous documentation-only edits (import-path casing, story export renames). Changes
Sequence Diagram(s)(Skipped.) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
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: 19
Note
Due to the large number of review comments, Critical, Major severity comments were prioritized as inline comments.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (8)
docs/_snippets/csf-3-example-render.md (1)
95-97: Inconsistent component name between JS and TS examples.The TypeScript example uses
custom-button(line 96), while the JavaScript example usesdemo-button(line 88). For consistency and to avoid confusing developers, both examples should use the same component name. All other framework pairs in this file maintain consistent component names across their JS and TS variants.🔧 Suggested fix
export const Default: Story = { - render: (args) => html`<custom-button label="Hello" `@click`=${action('clicked')}></custom-button>`, + render: (args) => html`<demo-button label="Hello" `@click`=${action('clicked')}></demo-button>`, };docs/_snippets/document-screen-fetch.md (3)
32-44: Critical bug in Angular example: incorrect property assignment.Line 38 references
this.documents.data.subdocumentsbut there's nodocumentsproperty defined in the class. This statement also doesn't assign the value anywhere, making it ineffective.🐛 Proposed fix
next: (data) => { this.loading = false; this.user = data.user; this.document = data.document; - this.documents.data.subdocuments; + this.subdocuments = data.subdocuments; },
429-446: Critical bug in Web Components example: missing return statement.Line 437 calls
response.json()but doesn't return it, breaking the promise chain. The next.then()block won't receive the parsed data, causingthis._datato be undefined.🐛 Proposed fix
.then((response) => { if (!response.ok) { throw new Error('Network response was not ok'); } - response.json(); + return response.json(); })
372-378: Naming inconsistency between Vue JS and TS examples.The Vue TypeScript example uses component name "SampleRestComponent" (line 373) while the JavaScript version uses "DocumentScreen" (line 325). For consistency with other framework examples and the JS variant, consider using "DocumentScreen" here as well.
📝 Proposed fix for consistency
export default defineComponent({ - name: 'SampleRestComponent', + name: 'DocumentScreen', components: { PageLayout, DocumentHeader, DocumentList, },docs/_snippets/checkbox-story-grouped.md (1)
1-16: Fix component name case mismatch.The import on line 4 uses
Checkbox(lowercase 'b'), but line 12 referencesCheckBox(uppercase 'B'). This inconsistency will cause a reference error.🐛 Proposed fix
-import { Checkbox } from './checkbox.component'; +import { CheckBox } from './checkbox.component';Or alternatively, if the component is actually named
Checkbox:- component: CheckBox, + component: Checkbox,docs/_snippets/addon-a11y-config-rulesets-in-preview.md (1)
64-82: Missing import causes ReferenceError.The React JavaScript CSF Next snippet references
addonA11y()on line 69 but doesn't import it. Compare with the TypeScript version (lines 40-59) which correctly imports it on line 43.🐛 Add missing import
// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite) import { definePreview } from '@storybook/your-framework'; +import addonA11y from '@storybook/addon-a11y'; export default definePreview({ addons: [addonA11y()],docs/_snippets/list-story-with-subcomponents.md (2)
331-339: Fix syntax error: missing comma after setup() block.The object literal is missing a comma after the
setup()method and before thetemplateproperty. This will cause a JavaScript syntax error.🐛 Proposed fix
render: (args) => ({ components: { List, ListItem }, setup() { - return { args } + return { args }; - } + }, template: '<List v-bind="args"><ListItem /></List>', }),
363-371: Fix syntax error: missing comma after setup() block.The object literal is missing a comma after the
setup()method and before thetemplateproperty. This will cause a JavaScript syntax error.🐛 Proposed fix
render: (args) => ({ components: { List, ListItem }, setup() { - return { args } + return { args }; - } + }, template: '<List v-bind="args"><ListItem /></List>', }),
🤖 Fix all issues with AI agents
In `@docs/_snippets/angular-add-framework.md`:
- Around line 12-19: Update the import for defineMain in the Storybook config
snippet so it imports from the node entry point; replace the current import of
defineMain from '@storybook/angular' with an import from
'@storybook/angular/node' in the .storybook main configuration where defineMain
is used.
In `@docs/_snippets/automocked-modules-in-story.md`:
- Around line 437-455: Add a type-safe mock wrapper using mocked() from
'storybook/test' and use those wrappers in the beforeEach: import mocked from
'storybook/test', create const mockedUuidv4 = mocked(uuidv4) and const
mockedGetUserFromSession = mocked(getUserFromSession), then replace
uuidv4.mockReturnValue(...) and getUserFromSession.mockReturnValue(...) with
mockedUuidv4.mockReturnValue(...) and
mockedGetUserFromSession.mockReturnValue(...); keep the beforeEach block and
existing mock return values unchanged.
In `@docs/_snippets/button-group-story.md`:
- Around line 56-61: The Pair story currently builds its buttons array by
accessing ButtonStories.Primary.args and ButtonStories.Secondary.args which is
incorrect for CSF Next; update the Pair story definition so the buttons array
uses ButtonStories.Primary.input.args and ButtonStories.Secondary.input.args
instead (i.e., replace occurrences of .args on those story references with
.input.args inside the Pair story's args/buttons).
In `@docs/_snippets/button-story-onclick-action-spy.md`:
- Around line 17-29: The snippets define preview.meta(...) and set args: {
onClick: fn() } but omit creating story exports, so update each CSF Next snippet
(e.g., the Angular snippet using preview.meta, component Button, and fn()) to
add an explicit story creation call using meta.story() and export it (for
example export const Primary = meta.story()) so the snippet demonstrates a
runnable CSF Next story; apply the same change to the React, Vue, and Web
Components snippets that use preview.meta to ensure every example includes an
exported story created via meta.story().
In `@docs/_snippets/button-story-primary-composition.md`:
- Around line 28-50: The Angular and Web Components CSF Next story compositions
use the wrong property; replace references to Primary.args with
Primary.input.args so stories use the CSF Next API. Locate the story definitions
(e.g., the Primary and Secondary exports in the Button story where Secondary
spreads Primary.args) and change the spread to use ...Primary.input.args, and
any other occurrences of .args in CSF Next blocks to .input.args to match the
renderer tests and codemod behavior.
In `@docs/_snippets/button-story-primary-long-name.md`:
- Around line 44-49: The story uses the old CSF Next args access pattern; change
the spread to use the Primary story's input args instead of .args. Update the
PrimaryLongName definition (meta.story call) to spread Primary.input.args rather
than Primary.args so it matches the React/Vue pattern and ensures the correct
args are inherited.
- Around line 283-288: The story uses the old CSF args access pattern; update
PrimaryLongName (the meta.story call) to spread from Primary.input.args instead
of Primary.args so it follows CSF Next conventions — replace the reference to
Primary.args with Primary.input.args in the args object for PrimaryLongName.
- Around line 261-266: The CSF Next story is incorrectly referencing args from
another story; update PrimaryLongName (the meta.story call) to spread args from
Primary.input.args instead of Primary.args by replacing "...Primary.args" with
"...Primary.input.args" so the story correctly inherits the source story's args.
In `@docs/_snippets/checkbox-story-grouped.md`:
- Around line 147-154: The CSF Next story snippet defines the meta object
(variable name "meta") but omits the required Storybook export; add the missing
export statement "export default meta;" after the meta declaration so Storybook
can load the story configuration and use the meta for the 'demo-checkbox'
component.
- Around line 156-163: The Storybook CSF Next snippet is missing the required
export of the story metadata; add an export default of the meta object (i.e.,
export default meta;) after the meta constant definition so Storybook can load
the story configuration for the 'meta' constant and the 'demo-checkbox'
component.
- Around line 214-227: The snippet defining the Storybook CSF Next meta constant
(meta) is missing the required export; add an export default meta; statement
after the const meta = preview.meta(...) declaration so Storybook can load the
story configuration (update the Checkbox.stories.js snippet that defines meta to
include export default meta;).
- Around line 197-210: The Storybook CSF Next snippet is missing the required
export of the meta object; add an export default meta; statement after the meta
constant declaration so Storybook can load the story configuration (refer to the
meta constant defined as meta and ensure you add the line exporting it: export
default meta;).
- Around line 18-31: The story config is missing the required export and has a
component name case mismatch: change the component reference in the meta object
from CheckBox to the imported Checkbox and add the required export default meta;
statement (i.e., ensure the imported symbol Checkbox from './checkbox.component'
is used as component: Checkbox and append export default meta; after the meta
definition).
In `@docs/_snippets/component-story-conditional-controls-toggle.md`:
- Around line 185-215: The JS and TS CSF Next story blocks define a const meta
but do not export it, so Storybook won't discover stories; add an export default
meta; statement after the meta declaration in both the JavaScript block that
defines const meta and the TypeScript block that defines the same const meta to
match the CSF3 examples and ensure the meta is exported for Storybook discovery.
- Around line 255-291: The CSF Next Vue story snippets define the metadata
object "meta" but do not export it, so Storybook cannot discover the stories;
fix both the TypeScript and JavaScript blocks by adding an export of the
metadata object (export default meta) after the meta declaration in each snippet
(the blocks that declare const meta = preview.meta({...})), ensuring the file
exports the meta object for Storybook discovery.
- Around line 21-37: The CSF Next story blocks using preview.meta(...) define
const meta but omit the required export; add an explicit "export default meta;"
after each const meta = preview.meta({...}) in every CSF Next block (Angular,
Web Components, Vue) so Storybook can discover the stories; locate the meta
constant created via preview.meta and append the export default meta; statement
immediately after it.
In `@docs/_snippets/component-story-sort-controls.md`:
- Line 2: The import line contains a duplicate "from" keyword causing a syntax
error; fix the import by removing the extra "from" so the declaration for Meta
imports correctly (i.e., ensure the statement reads an import of Meta from
'@storybook/angular' without the double "from").
In `@docs/_snippets/list-story-with-subcomponents.md`:
- Around line 423-431: The object literal for the story export "OneItem" has a
syntax error: there's a missing comma after the setup() method before the
template property; add a comma between the setup() block and the template
property in the render return object (the object containing components, setup,
template) so the properties are properly separated and the file parses
correctly.
- Around line 392-400: The object passed to meta.story for OneItem has a syntax
error: the object returned by render contains a setup() method but is missing a
comma before the template property; update the render return object in OneItem
(the object with components { List, ListItem }, setup() and template) to insert
a comma after the setup() block so the template property is a valid sibling of
setup().
♻️ Duplicate comments (2)
docs/_snippets/component-story-disable-controls-regex.md (1)
38-70: Verify CSF Next meta.story() pattern.This file demonstrates the CSF Next pattern with
meta.story()for defining individual stories. Combined with the missingexport defaultfrom the meta definition, please confirm this is the complete and correct CSF Next API pattern for defining stories.Storybook CSF Next meta.story() API pattern documentationdocs/_snippets/button-story-baseline.md (1)
21-36: Verify CSF Next API: Missing default export (same pattern across files)Similar to the a11y configuration file, these CSF Next blocks don't include
export default meta. This pattern is consistent across all CSF Next examples in this file.This is the same concern as raised in addon-a11y-config-in-meta-and-story.md. The verification query above applies to all CSF Next blocks in this PR.
Also applies to: 76-89, 108-123
🟡 Minor comments (20)
docs/_snippets/main-config-core-cross-origin-isolated.md-81-91 (1)
81-91: Add missing JavaScript variant for Angular CSF Next.The Angular CSF Next block only includes a TypeScript variant, while React, Vue, and Web Components all provide both TypeScript and JavaScript variants. For consistency and completeness, please add a JavaScript version for Angular users.
📝 Suggested Angular JS snippet
Add after line 91:
+ +<!-- JS snippets still needed while providing both CSF 3 & Next --> + +```js filename=".storybook/main.js" renderer="angular" language="js" tabTitle="CSF Next 🧪" +import { defineMain } from '@storybook/angular/node'; + +export default defineMain({ + framework: '@storybook/angular', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + core: { + crossOriginIsolated: true, + }, +}); +```docs/_snippets/component-story-figma-integration.md-252-292 (1)
252-292: Update or remove "default export" comments in Vue CSF Next snippets.Similar to the Angular snippets, the comments on lines 257 and 279 reference "default export," which doesn't apply to the CSF Next API pattern using
preview.meta()andmeta.story(). These comments should be updated or removed for clarity.📝 Suggested fix for both blocks
For the TypeScript block:
-// More on default export: https://storybook.js.org/docs/writing-stories/#default-export -const meta = preview.meta({ +const meta = preview.meta({For the JavaScript block:
-// More on default export: https://storybook.js.org/docs/writing-stories/#default-export -const meta = preview.meta({ +const meta = preview.meta({docs/_snippets/component-story-figma-integration.md-24-42 (1)
24-42: Update or remove the "default export" comment for CSF Next.The comment on line 29 references "default export," but CSF Next uses
preview.meta()instead of the traditional default export pattern. This comment is misleading in the CSF Next context and should be updated to reference the new API or removed entirely.📝 Suggested fix
-// More on default export: https://storybook.js.org/docs/writing-stories/#default-export -const meta = preview.meta({ +const meta = preview.meta({docs/_snippets/interaction-test-simple.md-214-214 (1)
214-214: Unused import:fnis not used in these Web Components snippets.Similar to the Angular snippet, the
fnimport is not used in these Web Components CSF Next examples.🧹 Proposed fix
Apply to both JS (line 214) and TS (line 233) snippets:
-import { fn, expect } from 'storybook/test'; +import { expect } from 'storybook/test';Also applies to: 233-233
docs/_snippets/interaction-test-simple.md-296-296 (1)
296-296: Unused import:fnis not used in these Vue snippets.The Vue CSF Next snippets (both TS and JS) import
fnwithout using it.🧹 Proposed fix
Apply to both TS (line 296) and JS (line 319) snippets:
-import { fn, expect } from 'storybook/test'; +import { expect } from 'storybook/test';Also applies to: 319-319
docs/_snippets/interaction-test-simple.md-25-25 (1)
25-25: Unused import:fnis not used in this snippet.The
fnimport fromstorybook/testis not utilized in this CSF Next snippet. In the context of interaction tests that simply assert DOM behavior without mocking functions, this import is unnecessary and may confuse readers learning from these examples.🧹 Proposed fix
-import { fn, expect } from 'storybook/test'; +import { expect } from 'storybook/test';docs/_snippets/login-form-with-play-function.md-209-209 (1)
209-209: Unused import:withinis not used in these Svelte snippets.The
withinutility fromstorybook/testis imported but never used in these examples. The play functions usecanvasdirectly for querying elements. This unused import may confuse readers learning from these documentation examples.🧹 Proposed fix
Apply to all four Svelte snippets (lines 209, 246, 280, 320):
- import { expect, within } from 'storybook/test'; + import { expect } from 'storybook/test';Also applies to: 246-246, 280-280, 320-320
docs/_snippets/interaction-test-simple.md-252-252 (1)
252-252: Unused import:fnis not used in these React snippets.The React CSF Next snippets also import
fnwithout using it.🧹 Proposed fix
Apply to both TS (line 252) and JS (line 275) snippets:
-import { fn, expect } from 'storybook/test'; +import { expect } from 'storybook/test';Also applies to: 275-275
docs/_snippets/component-test-with-testing-library.md-4-6 (1)
4-6: Inconsistent story file naming in Angular example.The component import was correctly updated to kebab-case (
login-form.component), but the Angular snippet imports from./Form.stories, while all other framework examples (Preact, React, Svelte, Vue) import from./LoginForm.stories. Additionally, the Angular story file name doesn't match its component file (login-formvsForm).Align the Angular snippet to use
./LoginForm.storiesto match other framework examples and maintain consistent naming with the component.docs/_snippets/component-story-static-asset-with-import.md-323-350 (1)
323-350: Fix grammatical error in comment.Line 344 contains the same typo as line 315: "create" should be "created".
📝 Proposed fix
- //👇 Returns the content of the image object create above. + //👇 Returns the content of the image object created above.docs/_snippets/component-story-static-asset-with-import.md-296-321 (1)
296-321: Fix grammatical error in comment.Line 315 contains a typo: "create" should be "created".
📝 Proposed fix
- //👇 Returns the content of the image object create above. + //👇 Returns the content of the image object created above.docs/_snippets/loader-story.md-465-507 (1)
465-507: Add missing TodoItem import to Web Components code snippets.The Web Components CSF 3 and CSF Next examples (lines 428–507) reference
TodoItemin the render function but don't import it. This contrasts with Angular and React examples in the same file, which all includeimport { TodoItem } from './TodoItem';.Add the import statement to all four Web Components code blocks:
import { TodoItem } from './TodoItem';docs/_snippets/component-story-custom-args-complex.md-48-50 (1)
48-50: Use primitivestringtype instead of boxedStringtype.TypeScript best practice is to use lowercase
string(primitive type) instead ofString(boxed object type).📝 Proposed fix
-const someFunction = (valuePropertyA: String, valuePropertyB: String) => { +const someFunction = (valuePropertyA: string, valuePropertyB: string) => { // Do some logic here };docs/_snippets/addon-actions-action-function.md-137-137 (1)
137-137: Fix code fence language to match filename.The code fence uses
tssyntax highlighting, but the filename isButton.stories.jsand the language attribute isjs. These should be consistent.📝 Proposed fix
-```ts filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3" +```js filename="Button.stories.js" renderer="web-components" language="js" tabTitle="CSF 3"docs/_snippets/addon-actions-action-function.md-19-33 (1)
19-33: CSF Next examples show incomplete code patterns without story definitions.The CSF Next examples define the
metaobject usingpreview.meta({...})but don't show how to create stories from that meta object. While CSF Next correctly does not requireexport default meta(unlike CSF 3), these snippets are missing the criticalexport const StoryName = meta.story({...})pattern needed to define actual stories. Other CSF Next examples in the codebase demonstrate this pattern (e.g., addon-a11y-config-context-in-story.md), showing that the meta object is only the first step. Users following these examples would only see how to configure the meta and wouldn't understand how to define stories in CSF Next.Applies to: lines 19-33, 165-191, 193-225, 227-259
docs/_snippets/button-story-matching-argtypes.md-15-15 (1)
15-15: Add a note clarifying that the relative import path may need adjustment based on story file location.The CSF Next snippets use
import preview from '../.storybook/preview';, which assumes stories are at the project root level. This will require adjustment for nested story files (e.g.,src/components/Button/Button.stories.tswould need../../.storybook/preview).Consider adding a brief note or cross-reference to the CSF Next documentation's section on using absolute imports via subpath imports or path aliases as an alternative to relative imports.
Also applies to: 116-116, 125-125, 158-158, 171-171
docs/_snippets/component-story-custom-args-mapping.md-249-299 (1)
249-299: Inconsistent arrow naming convention across frameworks.The Web Components examples use arrow keys
Up,Down,Left,Right(lines 252-257, 278-283) and omit thelabelsconfiguration from the control, while Angular (lines 8, 18-24), React (lines 360, 370-376), and Vue (lines 422, 432-438) examples useArrowUp,ArrowDown,ArrowLeft,ArrowRightwith explicit labels.This inconsistency may confuse users. Consider standardizing the naming convention across all frameworks, or add a comment explaining the different convention for Web Components.
♻️ Proposed fix to align with other frameworks
const arrows = { - Up: html`<icon-arrow-up></icon-arrow-up>`, - Down: html`<icon-arrow-down></icon-arrow-down>`, - Left: html`<icon-arrow-left></icon-arrow-left>`, - Right: html`<icon-arrow-right></icon-arrow-right>`, + ArrowUp: html`<icon-arrow-up></icon-arrow-up>`, + ArrowDown: html`<icon-arrow-down></icon-arrow-down>`, + ArrowLeft: html`<icon-arrow-left></icon-arrow-left>`, + ArrowRight: html`<icon-arrow-right></icon-arrow-right>`, }; export default { component: 'demo-button', argTypes: { arrow: { options: Object.keys(arrows), // An array of serializable values mapping: arrows, // Maps serializable option values to complex arg values control: { type: 'select', // Type 'select' is automatically inferred when 'options' is defined + labels: { + ArrowUp: 'Up', + ArrowDown: 'Down', + ArrowLeft: 'Left', + ArrowRight: 'Right', + }, }, }, }, };Apply similar changes to the TypeScript variant (lines 273-299) and both CSF Next variants (lines 301-351).
docs/_snippets/button-story-click-handler-simplificated.md-254-258 (1)
254-258: Component name 'custom-button' is intentionally used for the simplified click handler examplesThe consistent use of
'custom-button'across all Web Components examples in this file (instead of the standard'demo-button'used elsewhere) is intentional. However, since other documentation snippets uniformly use'demo-button', consider adding an inline comment to clarify why this example uses a different component name. This would help developers understand the distinction and avoid confusion when comparing against other Web Components examples.Affected locations
Lines 221, 236, 254, 269
docs/_snippets/api-doc-block-argtypes-parameter.md-140-140 (1)
140-140: Fix incorrect filename.The filename should be
"Button.stories.ts"instead of"Button.ts"to match the story file naming convention used throughout the documentation.📝 Proposed fix
-```ts filename="Button.ts" renderer="web-components" language="ts" tabTitle="CSF 3" +```ts filename="Button.stories.ts" renderer="web-components" language="ts" tabTitle="CSF 3"docs/_snippets/api-doc-block-argtypes-parameter.md-10-10 (1)
10-10: Fix incorrect filename on line 140.Line 140 has
filename="Button.ts"but should befilename="Button.stories.ts"to match the naming convention of other TypeScript story files in the document.The parameter structure
docs: { argTypes: { exclude: ['style'] } }is correct and requires no changes.
🧹 Nitpick comments (14)
docs/_snippets/button-story-hypothetical-example.md (1)
64-81: Remove extra blank line for consistency.The JavaScript CSF Next example has an extra blank line (line 66) between the
previewimport and theButtonimport, while the TypeScript version (lines 44-46) does not. For consistency between examples, remove the blank line.♻️ Proposed fix
```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="CSF Next 🧪" import preview from '../.storybook/preview'; - import { Button } from './Button';docs/_snippets/component-story-conditional-controls-mutual-exclusion.md (1)
297-339: Consider adding Vue CSF 3 snippets for consistency.The Vue CSF Next snippets are correctly implemented. However, Angular and Web Components both provide CSF 3 and CSF Next variants, while Vue only has CSF Next snippets. The Common renderer snippets cannot substitute for Vue CSF 3 because they use a different import pattern (
import { Button } from './Button'vsimport Button from './Button.vue').For consistency and completeness, consider adding Vue CSF 3 snippets similar to how Angular and Web Components are documented.
📝 Example Vue CSF 3 snippets to add
Add before the Vue CSF Next snippets:
// TypeScript variant ```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3" import type { Meta } from '@storybook/vue3-vite'; import Button from './Button.vue'; const meta: Meta<typeof Button> = { component: Button, argTypes: { // Button can be passed a label or an image, not both label: { control: 'text', if: { arg: 'image', truthy: false }, }, image: { control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] }, if: { arg: 'label', truthy: false }, }, }, }; export default meta;// JavaScript variant ```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF 3" import Button from './Button.vue'; export default { component: Button, argTypes: { // Button can be passed a label or an image, not both label: { control: 'text', if: { arg: 'image', truthy: false }, }, image: { control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] }, if: { arg: 'label', truthy: false }, }, }, };docs/_snippets/main-config-babel.md (1)
117-133: Consider adding JavaScript snippet for Angular.The Vue and Web Components sections include both TypeScript and JavaScript CSF Next snippets, but Angular only has TypeScript. While Angular is TypeScript-first, adding a JavaScript version would maintain consistency with the established pattern and help users in mixed environments.
📝 Proposed JavaScript snippet for Angular
Add after line 133:
+ +```js filename=".storybook/main.js" renderer="angular" language="js" tabTitle="CSF Next 🧪" +import { defineMain } from '@storybook/angular/node'; + +export default defineMain({ + framework: '@storybook/angular', + stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + async babel(config, { configType }) { + if (configType === 'DEVELOPMENT') { + // Your development configuration goes here + } + if (configType === 'PRODUCTION') { + // Your production configuration goes here. + } + return config; + }, +}); +```docs/_snippets/args-in-preview.md (1)
20-89: Consider consistency in import patterns across frameworks.There's an inconsistency in how framework imports are documented:
- React (lines 20-40): Uses placeholder
@storybook/your-frameworkwith explanatory comment- Vue, Angular, Web Components (lines 42-89): Use specific package names (
@storybook/vue3-vite,@storybook/angular,@storybook/web-components-vite)Consider standardizing the approach across all frameworks for consistency. Options:
- Use specific package names for all frameworks (including React-specific packages)
- Use placeholders with explanatory comments for all frameworks
The current mixed approach may cause confusion about which pattern to follow.
docs/_snippets/gizmo-story-controls-customization.md (1)
61-61: Consider documenting the import path assumption.All CSF Next snippets use
import preview from '../.storybook/preview', which assumes stories are one directory level below the project root. For projects with nested story locations, users would need to adjust the relative path depth.While this is reasonable for documentation examples, consider adding a brief comment in one of the early snippets noting that users should adjust the path based on their project structure.
Also applies to: 576-576, 631-631, 802-802, 861-861
docs/_snippets/highlight-remove.md (1)
1-508: Ensure Prettier formatting is applied.As per coding guidelines, this file should be formatted with Prettier. Run the formatter to ensure consistent spacing and formatting across all code blocks.
#!/bin/bash # Format the file with Prettier yarn prettier --write docs/_snippets/highlight-remove.mddocs/_snippets/before-each-in-preview.md (1)
54-90: Consider adding framework replacement comments for consistency.The React snippets include a comment to "Replace your-framework with the framework you are using," but the Vue, Angular, and Web Components snippets use hard-coded package names (
@storybook/vue3-vite,@storybook/angular,@storybook/web-components-vite) without explanation. Consider adding comments to clarify whether these should be adjusted for different build tools (e.g., Webpack vs Vite) or if these are the canonical imports.📝 Suggested clarification
For example, for Vue:
```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪" +// For Vue 3 with Vite. Adjust the package name for your build tool if needed. import { definePreview } from '@storybook/vue3-vite';docs/_snippets/addon-actions-action-function.md (1)
1-259: Ensure the file is formatted with Prettier.Per the coding guidelines, files matching
**/*.mdshould be formatted using Prettier.#!/bin/bash # Check if the file is properly formatted with Prettier yarn prettier --check docs/_snippets/addon-actions-action-function.mddocs/_snippets/highlight-custom-style.md (1)
441-520: Consider unifying animation names across Web Components JS and TS versions.The Web Components JavaScript examples use
pulseas the animation name (lines 458, 467, 541, 550), while the TypeScript examples usesb-highlight-pulse(lines 501, 510, 581, 590). While both are technically correct (the animation names match their corresponding keyframes), this inconsistency may confuse users.Consider standardizing on one animation name across both languages for consistency.
docs/_snippets/main-config-core-disable-project-json.md (1)
81-91: Consider adding JavaScript variant for consistency.The Angular CSF Next snippet is correct, but unlike Vue, React, and Web Components examples, it only includes a TypeScript variant. While Angular is TypeScript-first and this may be intentional, adding a JavaScript variant would maintain consistency across all framework examples in this file.
docs/_snippets/button-story-grouped.md (1)
18-31: LGTM! CSF Next pattern correctly implemented.The Angular CSF Next block properly demonstrates the
preview.meta()pattern alongside the existing CSF 3 example. The structure and imports are correct.As per coding guidelines, ensure this file is formatted with Prettier:
yarn prettier --write docs/_snippets/button-story-grouped.mddocs/_snippets/button-story-hoisted.md (3)
81-81: Clarify the intentional component name variation in Web Components examples.The Web Components snippets use different component names:
- JS examples (lines 81, 108):
'demo-button'- TS examples (lines 93, 120):
'demo-component'For clearer documentation, consider using consistent component names across all Web Components examples (e.g., always
'demo-button') unless the variation serves a specific instructional purpose.♻️ Proposed alignment
const meta: Meta = { title: 'Design System/Atoms/Button', - component: 'demo-component', + component: 'demo-button', };Also applies to: 93-93, 108-108, 120-120
165-201: Consider adding Vue CSF 3 examples for consistency.The documentation includes both CSF 3 and CSF Next examples for Angular and Web Components but only shows CSF Next variants for Vue. For consistency and to help users migrating from CSF 3 to CSF Next, consider adding Vue CSF 3 snippets alongside the CSF Next versions.
37-37: Standardizemeta.story()call syntax across all framework examples.Both
meta.story()andmeta.story({})are valid, but the examples mix them inconsistently: Angular and Web Components usemeta.story({})while React and Vue usemeta.story(). According to the framework documentation,meta.story()without arguments is the idiomatic pattern when no configuration is provided. Standardize all examples to usemeta.story()for consistency.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@docs/_snippets/component-story-sort-controls.md`:
- Around line 14-23: The CSF Next snippet creates a local meta via
preview.meta(...) but doesn't show how to create and export stories, which
confuses users; update the YourComponent.stories.ts example to include at least
one exported story using meta.story() (e.g., const Default = meta.story({ name:
'Default', args: { /* ... */ } }); export { Default };) or add a short comment
after the meta declaration explaining that stories are created and exported with
meta.story() (not by exporting the meta) and demonstrate using YourComponent in
the story args so consumers can copy a working file.
♻️ Duplicate comments (1)
docs/_snippets/automocked-modules-in-story.md (1)
437-466: Past review comment is outdated—code is already correct.The Vue TypeScript CSF Next block already imports and uses
mocked()correctly (line 438 imports it, lines 452-453 use it). The implementation follows the same type-safe mocking pattern as Angular and Web Components TypeScript examples.
🧹 Nitpick comments (1)
docs/_snippets/list-story-with-subcomponents.md (1)
447-447: Consider consistent Empty story syntax across frameworks.React CSF Next examples use
meta.story()without arguments for the Empty story, while other frameworks (Angular, Web Components, Vue) usemeta.story({})with an empty object. For documentation consistency, consider using the same pattern across all frameworks unless there's a framework-specific reason for the difference.♻️ Suggested consistency update
-export const Empty = meta.story(); +export const Empty = meta.story({});Also applies to: 473-473
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
docs/_snippets/angular-add-framework.mddocs/_snippets/automocked-modules-in-story.mddocs/_snippets/button-group-story.mddocs/_snippets/button-story-primary-composition.mddocs/_snippets/button-story-primary-long-name.mddocs/_snippets/component-story-sort-controls.mddocs/_snippets/list-story-with-subcomponents.mddocs/_snippets/msw-addon-initialize.md
🚧 Files skipped from review as they are similar to previous changes (1)
- docs/_snippets/angular-add-framework.md
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{js,jsx,ts,tsx,json,md,html,css,scss}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Format code using Prettier with
yarn prettier --write <file>
Files:
docs/_snippets/component-story-sort-controls.mddocs/_snippets/button-story-primary-composition.mddocs/_snippets/button-story-primary-long-name.mddocs/_snippets/button-group-story.mddocs/_snippets/automocked-modules-in-story.mddocs/_snippets/list-story-with-subcomponents.md
🧠 Learnings (19)
📓 Common learnings
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-22T22:03:40.123Z
Learning: Applies to {code/addons,code/frameworks}/**/README.md : Update README files for significant changes and include code examples in addon/framework documentation
📚 Learning: 2025-11-05T09:38:47.712Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.
Applied to files:
docs/_snippets/component-story-sort-controls.mddocs/_snippets/button-story-primary-composition.mddocs/_snippets/button-story-primary-long-name.mddocs/_snippets/button-group-story.mddocs/_snippets/automocked-modules-in-story.mddocs/_snippets/list-story-with-subcomponents.md
📚 Learning: 2025-11-05T09:37:25.920Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.920Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.
Applied to files:
docs/_snippets/component-story-sort-controls.mddocs/_snippets/button-story-primary-composition.mddocs/_snippets/button-story-primary-long-name.mddocs/_snippets/button-group-story.mddocs/_snippets/automocked-modules-in-story.mddocs/_snippets/list-story-with-subcomponents.md
📚 Learning: 2025-12-22T22:03:40.123Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-22T22:03:40.123Z
Learning: Applies to code/{renderers}/**/*.{ts,tsx,js,jsx} : Use `logger` from `storybook/internal/client-logger` for client-side logging in browser code
Applied to files:
docs/_snippets/component-story-sort-controls.mddocs/_snippets/button-story-primary-composition.mddocs/_snippets/button-story-primary-long-name.mddocs/_snippets/button-group-story.mddocs/_snippets/automocked-modules-in-story.mddocs/_snippets/list-story-with-subcomponents.md
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors in Vitest tests
Applied to files:
docs/_snippets/component-story-sort-controls.mddocs/_snippets/automocked-modules-in-story.md
📚 Learning: 2025-09-24T09:39:39.233Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.
Applied to files:
docs/_snippets/component-story-sort-controls.mddocs/_snippets/button-story-primary-composition.mddocs/_snippets/button-story-primary-long-name.mddocs/_snippets/button-group-story.mddocs/_snippets/automocked-modules-in-story.mddocs/_snippets/list-story-with-subcomponents.md
📚 Learning: 2025-11-05T09:36:55.944Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227
Timestamp: 2025-11-05T09:36:55.944Z
Learning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.
Applied to files:
docs/_snippets/button-story-primary-composition.mddocs/_snippets/button-story-primary-long-name.mddocs/_snippets/button-group-story.mddocs/_snippets/automocked-modules-in-story.md
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together in Vitest tests
Applied to files:
docs/_snippets/button-group-story.mddocs/_snippets/automocked-modules-in-story.md
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Implement mock behaviors in `beforeEach` blocks in Vitest tests
Applied to files:
docs/_snippets/automocked-modules-in-story.md
📚 Learning: 2025-11-24T17:49:31.838Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-24T17:49:31.838Z
Learning: Applies to **/*.{test,spec}.{ts,tsx} : Follow the spy mocking rules defined in `.cursor/rules/spy-mocking.mdc` for consistent mocking patterns with Vitest
Applied to files:
docs/_snippets/automocked-modules-in-story.md
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use type-safe mocking with `vi.mocked()` in Vitest tests
Applied to files:
docs/_snippets/automocked-modules-in-story.md
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mock implementations outside of `beforeEach` blocks in Vitest tests
Applied to files:
docs/_snippets/automocked-modules-in-story.md
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid direct function mocking without `vi.mocked()` in Vitest tests
Applied to files:
docs/_snippets/automocked-modules-in-story.md
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use `vi.mocked()` to type and access the mocked functions in Vitest tests
Applied to files:
docs/_snippets/automocked-modules-in-story.md
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking without the `spy: true` option in Vitest tests
Applied to files:
docs/_snippets/automocked-modules-in-story.md
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases in Vitest tests
Applied to files:
docs/_snippets/automocked-modules-in-story.md
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies in Vitest tests
Applied to files:
docs/_snippets/automocked-modules-in-story.md
📚 Learning: 2025-11-24T17:49:59.279Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject uses in Vitest tests
Applied to files:
docs/_snippets/automocked-modules-in-story.md
📚 Learning: 2025-12-22T22:03:40.123Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-22T22:03:40.123Z
Learning: Applies to **/*.{test,spec}.{ts,tsx,js,jsx} : Use `vi.mock()` to mock file system, loggers, and other external dependencies in tests
Applied to files:
docs/_snippets/automocked-modules-in-story.md
🔇 Additional comments (24)
docs/_snippets/button-story-primary-composition.md (5)
28-50: LGTM! Angular CSF Next implementation is correct.The Angular CSF Next block correctly uses
...Primary.input.argsfor story composition, which aligns with the CSF Next API requirements.
239-281: LGTM! Web Components CSF Next implementations are correct.Both the JavaScript and TypeScript Web Components CSF Next blocks correctly use
...Primary.input.argsfor story composition, consistent with the CSF Next API requirements and other framework examples.
283-331: LGTM! React CSF Next implementations are correct.Both TypeScript and JavaScript React CSF Next blocks correctly use
...Primary.input.argsfor story composition. The editorial comment explaining the inclusion of both JS and TS variants is helpful for maintainers.
333-381: LGTM! Vue CSF Next implementations are correct.Both TypeScript and JavaScript Vue CSF Next blocks correctly use
...Primary.input.argsfor story composition, maintaining consistency with the other framework implementations in this file.
1-381: Excellent consistency across all framework examples.The CSF Next additions demonstrate strong consistency:
- All frameworks use the same API pattern (
preview.meta(),meta.story())- TabTitle metadata clearly distinguishes "CSF 3" from "CSF Next 🧪" examples
- All story compositions correctly use
...Primary.input.args- Import statements are consistent across all blocks
The documentation provides clear, parallel examples that will help users understand CSF Next patterns regardless of their framework choice.
docs/_snippets/button-group-story.md (6)
56-61: Property access pattern now correct in Angular CSF Next example.The Angular CSF Next example correctly uses
.input.argsto access story args (line 58), which is the proper API for stories defined withmeta.story(). This resolves the issue flagged in the previous review.
424-463: React CSF Next examples are correct.Both JavaScript and TypeScript React CSF Next examples correctly use
.input.argsto access story properties (lines 438, 459). The pattern is consistent and follows the CSF Next API properly.
106-145: Solid examples are correct.The Solid framework examples correctly use direct
.argsaccess for CSF 3 (lines 118, 141), which is the appropriate pattern.
147-233: Svelte examples are correct.The Svelte examples properly use direct
.argsaccess (lines 164, 182, 205, 229) for their respective CSF formats, which is correct for CSF 3.
368-422: Vue CSF Next examples are correct.Both TypeScript and JavaScript Vue CSF Next examples correctly use
.input.argsto access story properties (lines 389, 418). The pattern is consistent with the CSF Next API and properly demonstrates the Vue-specific render function pattern.
332-366: Web Components CSF Next examples are correct.Both JavaScript and TypeScript Web Components CSF Next examples correctly use
.input.argsto access story properties (lines 344, 362). The implementation properly uses the CSF Next API withpreview.meta()andmeta.story().docs/_snippets/button-story-primary-long-name.md (8)
1-1: LGTM!The addition of
tabTitle="CSF 3"metadata appropriately labels this code block for documentation purposes.
28-50: Excellent! Past issue resolved.The Angular CSF Next block correctly uses
Primary.input.argson line 46, which properly accesses args from another CSF Next story. The implementation follows the correct CSF Next pattern.
202-202: LGTM!Consistent tabTitle metadata added for Web Components CSF 3 example.
222-222: LGTM!Appropriate tabTitle metadata for TypeScript variant.
247-267: Excellent! Past issue resolved.The Web Components JS CSF Next block correctly implements the
Primary.input.argspattern on line 263, matching the correct CSF Next API for accessing args from another story.
269-289: Excellent! Past issue resolved.The TypeScript variant correctly uses
Primary.input.argson line 285, consistent with CSF Next conventions and the JavaScript variant.
341-363: LGTM!The Vue TypeScript CSF Next block correctly implements the CSF Next pattern with
Primary.input.argsfor story composition. The implementation is consistent with Angular and Web Components variants.
367-389: LGTM!The Vue JavaScript CSF Next block properly uses
Primary.input.argsfor story composition, maintaining consistency with all other CSF Next examples in this file.docs/_snippets/automocked-modules-in-story.md (4)
1-63: LGTM! CSF Next block and import path normalization look good.The Angular blocks correctly demonstrate both CSF 3 and CSF Next patterns with proper type-safe mocking using
mocked(). The import path change to./auth-button.componentaligns with Angular's kebab-case file naming conventions.
315-371: LGTM! Web Components CSF Next examples are consistent and correct.Both TypeScript and JavaScript CSF Next blocks correctly demonstrate the new API patterns. The TypeScript version appropriately uses
mocked()for type safety (lines 328-329), while the JavaScript version correctly uses direct mock methods (lines 357-358).
470-499: LGTM! Vue JavaScript CSF Next example is correct.The JavaScript version correctly uses direct mock methods without
mocked()(lines 485-486), which is appropriate for JavaScript. The CSF Next patterns withpreview.meta()andmeta.story()are properly demonstrated.
373-435: LGTM! React CSF Next examples maintain correct patterns.Both TypeScript and JavaScript blocks correctly demonstrate CSF Next with appropriate mocking patterns. The TypeScript version uses
mocked()for type safety (lines 388-389), and the JavaScript version uses direct mock methods (lines 421-422).docs/_snippets/component-story-sort-controls.md (1)
2-2: Past issue resolved.The duplicate "from" keyword syntax error flagged in previous reviews has been fixed. The import statement is now correct.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@docs/_snippets/addon-a11y-config-rulesets-in-preview.md`:
- Around line 86-105: The docs hardcode framework-specific package names in the
preview example (import { definePreview } from '@storybook/vue3-vite') which
reduces applicability for users with different builders; change these imports
and any similar Web Components examples (the imports referencing
'@storybook/web-components-vite') to use the placeholder pattern used in the
React example (e.g., '@storybook/<framework>-<builder>') and update the
surrounding text to instruct users to replace <framework> and <builder> with
their chosen framework and builder so the snippet (and references in the later
Web Components examples) apply to both vite and webpack5 setups.
♻️ Duplicate comments (7)
docs/_snippets/checkbox-story-grouped.md (7)
18-31: Add missing export statement.The CSF Next snippet is missing the
export default meta;statement required for Storybook to load the story configuration.🐛 Proposed fix
const meta = preview.meta({ /* 👇 The title prop is optional. * See https://storybook.js.org/docs/configure/#configure-story-loading * to learn how to generate automatic titles */ title: 'Design System/Atoms/Checkbox', component: Checkbox, }); + +export default meta;
147-154: Add missing export statement.The CSF Next snippet is missing the
export default meta;statement required for Storybook to load the story configuration.🐛 Proposed fix
const meta = preview.meta({ title: 'Design System/Atoms/Checkbox', component: 'demo-checkbox', }); + +export default meta;
156-163: Add missing export statement.The CSF Next snippet is missing the
export default meta;statement required for Storybook to load the story configuration.🐛 Proposed fix
const meta = preview.meta({ title: 'Design System/Atoms/Checkbox', component: 'demo-checkbox', }); + +export default meta;
165-178: Add missing export statement.The CSF Next snippet is missing the
export default meta;statement required for Storybook to load the story configuration.🐛 Proposed fix
const meta = preview.meta({ /* 👇 The title prop is optional. * See https://storybook.js.org/docs/configure/#configure-story-loading * to learn how to generate automatic titles */ title: 'Design System/Atoms/Checkbox', component: Checkbox, }); + +export default meta;
182-195: Add missing export statement.The CSF Next snippet is missing the
export default meta;statement required for Storybook to load the story configuration.🐛 Proposed fix
const meta = preview.meta({ /* 👇 The title prop is optional. * See https://storybook.js.org/docs/configure/#configure-story-loading * to learn how to generate automatic titles */ title: 'Design System/Atoms/Checkbox', component: Checkbox, }); + +export default meta;
197-210: Add missing export statement.The CSF Next snippet is missing the
export default meta;statement required for Storybook to load the story configuration.🐛 Proposed fix
const meta = preview.meta({ /* 👇 The title prop is optional. * See https://storybook.js.org/docs/configure/#configure-story-loading * to learn how to generate automatic titles */ title: 'Design System/Atoms/Checkbox', component: Checkbox, }); + +export default meta;
214-227: Add missing export statement.The CSF Next snippet is missing the
export default meta;statement required for Storybook to load the story configuration.🐛 Proposed fix
const meta = preview.meta({ /* 👇 The title prop is optional. * See https://storybook.js.org/docs/configure/#configure-story-loading * to learn how to generate automatic titles */ title: 'Design System/Atoms/Checkbox', component: Checkbox, }); + +export default meta;
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
docs/_snippets/addon-a11y-config-rulesets-in-preview.mddocs/_snippets/checkbox-story-csf.mddocs/_snippets/checkbox-story-grouped.mddocs/_snippets/csf-3-example-render.mddocs/_snippets/document-screen-fetch.md
🚧 Files skipped from review as they are similar to previous changes (1)
- docs/_snippets/document-screen-fetch.md
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{js,jsx,ts,tsx,json,md,html,css,scss}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Format code using Prettier with
yarn prettier --write <file>
Files:
docs/_snippets/checkbox-story-grouped.mddocs/_snippets/addon-a11y-config-rulesets-in-preview.mddocs/_snippets/checkbox-story-csf.mddocs/_snippets/csf-3-example-render.md
🧠 Learnings (9)
📓 Common learnings
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-22T22:03:40.123Z
Learning: Applies to {code/addons,code/frameworks}/**/README.md : Update README files for significant changes and include code examples in addon/framework documentation
📚 Learning: 2025-11-05T09:38:47.712Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.
Applied to files:
docs/_snippets/checkbox-story-grouped.mddocs/_snippets/addon-a11y-config-rulesets-in-preview.mddocs/_snippets/checkbox-story-csf.mddocs/_snippets/csf-3-example-render.md
📚 Learning: 2025-11-05T09:36:55.944Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227
Timestamp: 2025-11-05T09:36:55.944Z
Learning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.
Applied to files:
docs/_snippets/checkbox-story-grouped.mddocs/_snippets/addon-a11y-config-rulesets-in-preview.mddocs/_snippets/checkbox-story-csf.mddocs/_snippets/csf-3-example-render.md
📚 Learning: 2025-11-05T09:37:25.920Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.920Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.
Applied to files:
docs/_snippets/checkbox-story-grouped.mddocs/_snippets/addon-a11y-config-rulesets-in-preview.mddocs/_snippets/checkbox-story-csf.mddocs/_snippets/csf-3-example-render.md
📚 Learning: 2025-09-24T09:39:39.233Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.
Applied to files:
docs/_snippets/checkbox-story-grouped.mddocs/_snippets/addon-a11y-config-rulesets-in-preview.mddocs/_snippets/checkbox-story-csf.md
📚 Learning: 2025-12-22T22:03:40.123Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-22T22:03:40.123Z
Learning: Applies to {code/addons,code/frameworks}/**/README.md : Update README files for significant changes and include code examples in addon/framework documentation
Applied to files:
docs/_snippets/addon-a11y-config-rulesets-in-preview.mddocs/_snippets/checkbox-story-csf.md
📚 Learning: 2025-12-22T22:03:40.123Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-22T22:03:40.123Z
Learning: Applies to code/{renderers}/**/*.{ts,tsx,js,jsx} : Use `logger` from `storybook/internal/client-logger` for client-side logging in browser code
Applied to files:
docs/_snippets/checkbox-story-csf.mddocs/_snippets/csf-3-example-render.md
📚 Learning: 2025-09-18T20:51:06.618Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/viewport/components/Tool.tsx:38-39
Timestamp: 2025-09-18T20:51:06.618Z
Learning: In viewport tool code, when using the `useGlobals` hook from storybook/manager-api, the third returned value `storyGlobals` is guaranteed by TypeScript to be defined (not undefined/null), making the `in` operator safe to use without additional null checks.
Applied to files:
docs/_snippets/checkbox-story-csf.md
📚 Learning: 2025-11-25T11:09:33.798Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 33140
File: code/core/src/manager/components/sidebar/TagsFilter.tsx:247-259
Timestamp: 2025-11-25T11:09:33.798Z
Learning: In the storybookjs/storybook repository, PopoverProvider creates popovers with a dialog role, so using aria-haspopup="dialog" on buttons that trigger PopoverProvider is semantically correct.
Applied to files:
docs/_snippets/csf-3-example-render.md
🔇 Additional comments (7)
docs/_snippets/csf-3-example-render.md (1)
92-96: LGTM! Documentation consistency improvements.The changes correctly update the TypeScript example for web-components:
- Language identifier properly changed from
jstots- Component name
demo-buttonnow matches the JavaScript example, improving consistency across the documentationdocs/_snippets/checkbox-story-csf.md (4)
20-34: LGTM! Angular CSF Next example is well-structured.The snippet correctly demonstrates the CSF Next pattern for Angular, using
preview.meta()andmeta.story(). The structure is consistent with other CSF Next examples in the file.
142-142: LGTM! tabTitle annotations improve documentation clarity.The addition of
tabTitle="CSF 3"to existing Web Components examples helps users distinguish between CSF 3 and CSF Next variants in the documentation interface.Also applies to: 155-155
172-199: LGTM! Web Components CSF Next examples maintain parity with CSF 3 versions.Both JavaScript and TypeScript variants correctly demonstrate the CSF Next pattern. The differences between them (title inclusion, component identifier) appropriately mirror their CSF 3 counterparts, ensuring consistent documentation.
235-267: LGTM! Vue CSF Next examples complete the framework coverage.The TypeScript and JavaScript variants correctly demonstrate the CSF Next pattern for Vue. The explanatory comment clarifies why both variants are provided during the CSF 3 → CSF Next transition period.
docs/_snippets/addon-a11y-config-rulesets-in-preview.md (2)
40-59: LGTM! Well-structured CSF Next example.The React TypeScript example demonstrates the CSF Next pattern clearly with helpful placeholder guidance for framework selection.
40-193: No changes needed. The CSF Next addon registration pattern usingdefinePreview({ addons: [addonA11y()], ... })is correct and matches the official Storybook documentation.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
jonniebigodes
left a comment
jonniebigodes
left a comment
There was a problem hiding this comment.
Thanks for taking the time to adjust the examples. Appreciate it 🙏 !
I left some items for you to look into when you can. Also, it comes to mind that we have examples in the documentation that are inline (e.g., the Angular framework page, and other places) that will require conversion to proper snippet files to include both CSF 3 and CSF Next. When you're able, can you take a pass at the documentation and adjust it accordingly so that we don't end up with missing examples.
Additionally, there are two items that will need attention before this is merged as I've mentioned and provided videos for. Those being the:
- The incorrect imports
- The duplicated tabs
Let me know and we'll go from there
| }); | ||
| ``` | ||
|
|
||
| <!-- JS snippets still needed while providing both CSF 3 & Next --> |
There was a problem hiding this comment.
Minor thing, we can remove this duplicated comment and apply it to the rest of the examples so that we align them correctly. Later on, the JS variants can be moved into a single place in the file. It will make it easier to parse and maintain.
Same here as already mentioned, check the CSF next import orders and spacing
There was a problem hiding this comment.
I disagree. That comment makes for an easy target for eventual removal. You cannot just search for "```js" or language="js" because you will get non-CSF snippets that should remain.
| }); | ||
| ``` | ||
|
|
||
| ```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪" |
There was a problem hiding this comment.
When you're able, create the Vue CSF 3 examples not only for this example but for the rest of the examples. When previewing the documentation, this will lead to component imports being incorrect between CSF3 and CSF Next variants. This is due to the renderer="common" taking precedence and rendering the incorrect examples as shown in the following video
Vue-incorrect-component-import.mp4
This was manageable when CSF Next was only applied to React, but now this poses a bit of an issue as we're expanding it to other frameworks
There was a problem hiding this comment.
This should be fixed here: storybookjs/web#372
| @@ -1,4 +1,4 @@ | |||
| ```ts filename="Button.stories.ts" renderer="angular" language="ts" | |||
| ```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3" | |||
There was a problem hiding this comment.
When you're able, check this example and the rest of the examples, as there's an issue when they are shown in the documentation. When previewing the documentation, the examples will generate duplicated tabs for Angular, Web Components, and Svelte. This is because the renderer="common" and tabTitle attributes used in the example files will generally take precedence over the framework specific ones and cause the examples to be rendered incorrectly.
This is especially problematic and can be observed in the following recording:
CSF-Next-duplicated-tabs-new-frameworks.mp4
Additionally, this pattern is already present in the live documentation when choosing Svelte as a framework.
There was a problem hiding this comment.
This should be fixed here: storybookjs/web#372
- Prevents displaying a `common` CSF 3 and a `svelte` CSF tab simultaneously
There was a problem hiding this comment.
Actionable comments posted: 9
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (6)
docs/_snippets/component-story-static-asset-cdn.md (1)
165-177: Fix missingStoryObjimport in Svelte TS snippet.
StoryObjis referenced but not imported, which will break the TypeScript example.🐛 Suggested fix
-// Replace your-framework with svelte-vite or sveltekit -import type { Meta } from '@storybook/your-framework'; +// Replace your-framework with svelte-vite or sveltekit +import type { Meta, StoryObj } from '@storybook/your-framework';docs/_snippets/component-story-static-asset-without-import.md (1)
183-214: Normalize Vue image paths to absolute/image.png.These snippets say the asset is in
public, but the Vue templates use a relative path. That can break on nested routes and is inconsistent with other snippets.✅ Suggested fix
- template: '<img src="image.png" alt="my image" />', + template: '<img src="/image.png" alt="my image" />',- template: '<img src="image.png" alt="my image" />', + template: '<img src="/image.png" alt="my image" />',- template: '<img src="image.png" alt="my image" />', + template: '<img src="/image.png" alt="my image" />',- template: '<img src="image.png" alt="my image" />', + template: '<img src="/image.png" alt="my image" />',Also applies to: 217-250
docs/_snippets/component-story-conditional-controls-toggle.md (1)
217-253: Export CSF Next meta in React snippets.Both TS and JS CSF Next blocks define
metabut don’t export it, so Storybook won’t discover the stories.🔧 Proposed fix (apply to both TS and JS blocks)
const meta = preview.meta({ component: Button, argTypes: { label: { control: 'text' }, // Always shows the control advanced: { control: 'boolean' }, // Only enabled if advanced is true margin: { control: 'number', if: { arg: 'advanced' } }, padding: { control: 'number', if: { arg: 'advanced' } }, cornerRadius: { control: 'number', if: { arg: 'advanced' } }, }, }); + +export default meta;docs/_snippets/arg-types-if.md (1)
8-34: DuplicateargTypeskey overwrites the earlier example.
parentExistsis declared twice in the same object (arg-based and global-based variants), so the latter overwrites the former. Rename one of the keys (and mirror across snippets) to keep both examples visible.🛠️ Suggested fix (apply similarly to other snippets)
- parentExists: { if: { arg: 'parent', exists: true } }, + parentExists: { if: { arg: 'parent', exists: true } }, ... - parentExists: { if: { global: 'theme', exists: true } }, + themeExists: { if: { global: 'theme', exists: true } },docs/_snippets/component-story-custom-args-complex.md (1)
23-24: Use TypeScript primitivestringinstead ofString.
Stringis the boxed object type and is discouraged in TS docs; preferstringfor clarity and correctness.✅ Suggested tweak
-const someFunction = (valuePropertyA: String, valuePropertyB: String) => { +const someFunction = (valuePropertyA: string, valuePropertyB: string) => { // Do some logic here };Also applies to: 48-50
docs/_snippets/button-story-controls-primary-variant.md (1)
137-141: Fix inconsistent story export names in Web Components blocks.The Web Components JavaScript blocks export
Successwhile the TypeScript blocks exportPrimaryfor the same story. This inconsistency can confuse readers.Standardize to use the same export name across both languages.
📝 Suggested fix: Standardize to `Primary`
For the JS CSF 3 block (lines 137-141):
-export const Success = { +export const Primary = { args: { variant: 'primary', }, };For the JS CSF Next block (lines 168-172):
-export const Success = meta.story({ +export const Primary = meta.story({ args: { variant: 'primary', }, });Also applies to: 154-158, 168-172, 182-186
🤖 Fix all issues with AI agents
In `@docs/_snippets/api-doc-block-argtypes-parameter.md`:
- Line 140: Update the code fence that currently reads ```ts
filename="Button.ts" renderer="web-components" language="ts" tabTitle="CSF 3" to
use the correct stories filename; change the filename attribute to
Button.stories.ts so it becomes filename="Button.stories.ts" (keep the same
renderer, language, and tabTitle and ensure the fenced block closes normally).
In `@docs/_snippets/arg-types-in-meta.md`:
- Around line 56-58: The Svelte CSF 3 snippet currently uses a named import
"import { Button } from './Button';" which is incorrect for Svelte components;
change the import to a default import from the actual Svelte file (e.g., import
Button from './Button.svelte') so the snippet matches the other Svelte examples
and correctly imports the component used in the story.
In `@docs/_snippets/button-story-default-export.md`:
- Around line 18-31: The CSF Next snippets define const meta =
preview.meta({...}) but stop short of showing how to export or use it; update
each snippet (Angular/Web Components/Vue) to include the complete CSF Next usage
by exporting the meta and at least one story — e.g., add an export of the meta
(export default meta) if desired or, preferably for CSF Next, show exporting a
named story using meta.story (e.g., export const Primary = meta.story({ args:
{...} })). Ensure the snippet references the existing preview.meta(...) call and
uses the same component symbol (Button or the appropriate component) so readers
see the full pattern: meta creation plus either export default meta or export
const StoryName = meta.story({...}).
In `@docs/_snippets/button-story-with-emojis.md`:
- Line 47: Replace the relative preview import in
docs/_snippets/button-story-with-emojis.md (the import preview statement) with
an absolute/subpath import (e.g., use the '#.storybook/preview' subpath) so
story files won’t break when moved; update all occurrences mentioned in the
review and ensure you have the corresponding subpath mapping configured in
package.json or tsconfig (Node subpath imports) before changing the import.
In `@docs/_snippets/code-panel-in-meta-and-story.md`:
- Around line 485-488: Replace the inconsistent web-components component name
used in the CSF 3 export default block: change the component property value from
'my-component' to 'demo-button' (the same identifier used by other
web-components examples) so the export default { component: 'demo-button',
parameters: { ... } } block is consistent with the rest of the snippets.
In `@docs/_snippets/component-story-custom-args-complex.md`:
- Around line 704-721: The Vue story's render signature is wrong — change the
parameter from a destructured object to receive args directly: replace render:
({ args }) with render: (args) for ExampleStory (and the other occurrence), then
update the function body to use args directly (e.g., const { propertyA,
propertyB } = args; keep using someFunction(propertyA, propertyB) and return the
same components/setup/template using args and someProperty). Ensure you only
change the render parameter and any references that assumed a nested args object
so ExampleStory, render, YourComponent, someFunction, someProperty, propertyA
and propertyB work as intended.
In `@docs/_snippets/component-story-static-asset-with-import.md`:
- Around line 315-316: Update the typo in the Vue CSF Next inline comment that
reads "Returns the content of the image object create above." Change "create" to
"created" in both occurrences associated with the return statement "return {
image };" (the comment immediately above that return) so the comment reads
"Returns the content of the image object created above."
In `@docs/_snippets/interaction-test-complex.md`:
- Around line 76-77: The test uses getByRole('button', { text: 'Plan event' })
which is incorrect; replace the option key "text" with "name" for all
occurrences (e.g., update the getByRole call that assigns submitButton and the
other 15 similar calls) so they read getByRole('button', { name: 'Plan event' })
before calling userEvent.click(submitButton); leave the rest of the interaction
(userEvent.click) unchanged.
In `@docs/_snippets/interaction-test-simple.md`:
- Around line 35-40: The getByRole queries in the Opens story's play function
use an incorrect option key; replace the invalid `{ text: 'Open Modal' }` with
the correct `{ name: 'Open Modal' }` so that canvas.getByRole correctly matches
the accessible name; update all occurrences in the file (e.g., the button lookup
in the Opens meta.story play block and any other canvas.getByRole calls) to use
`{ name: ... }` instead of `{ text: ... }`.
♻️ Duplicate comments (11)
docs/_snippets/component-story-conditional-controls-toggle.md (3)
21-37: Export CSF Next meta for Storybook discovery.
const meta = preview.meta(...)isn’t exported, so Storybook won’t discover the stories. Addexport default meta;after the meta declaration.🔧 Proposed fix
const meta = preview.meta({ component: Button, argTypes: { label: { control: 'text' }, // Always shows the control advanced: { control: 'boolean' }, // Only enabled if advanced is true margin: { control: 'number', if: { arg: 'advanced' } }, padding: { control: 'number', if: { arg: 'advanced' } }, cornerRadius: { control: 'number', if: { arg: 'advanced' } }, }, }); + +export default meta;
185-215: Export CSF Next meta in Web Components snippets.Both JS and TS CSF Next blocks define
metabut don’t export it, so stories won’t be discovered.🔧 Proposed fix (apply to both JS and TS blocks)
const meta = preview.meta({ component: 'demo-button', argTypes: { label: { control: 'text' }, // Always shows the control advanced: { control: 'boolean' }, // Only enabled if advanced is true margin: { control: 'number', if: { arg: 'advanced' } }, padding: { control: 'number', if: { arg: 'advanced' } }, cornerRadius: { control: 'number', if: { arg: 'advanced' } }, }, }); + +export default meta;
255-291: Export CSF Next meta in Vue snippets.Both TS and JS CSF Next blocks define
metabut don’t export it, so stories won’t be discovered.🔧 Proposed fix (apply to both TS and JS blocks)
const meta = preview.meta({ component: Button, argTypes: { label: { control: 'text' }, // Always shows the control advanced: { control: 'boolean' }, // Only enabled if advanced is true margin: { control: 'number', if: { arg: 'advanced' } }, padding: { control: 'number', if: { arg: 'advanced' } }, cornerRadius: { control: 'number', if: { arg: 'advanced' } }, }, }); + +export default meta;docs/_snippets/button-story-onclick-action-spy.md (1)
17-29: Add a CSF Next story export (meta.story) to make snippets runnable.
These CSF Next blocks only definepreview.meta(...)but don’t show an exported story, so readers can’t copy a complete example.✅ Example fix (apply to each CSF Next block)
const meta = preview.meta({ component: Button, // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked args: { onClick: fn() }, }); + +export const Primary = meta.story();Also applies to: 121-133, 137-149, 151-163, 167-179, 205-215, 217-227
docs/_snippets/button-story-hoisted.md (1)
37-37: Verify meta.story() vs meta.story({}) standardization.All CSF Next blocks in this file use
meta.story()(no arguments) since these are minimal stories with no configuration. This is consistent within this file and semantically correct for stories without args/decorators/render.However, verify this matches the pattern established across all CSF Next documentation snippets in the PR.
#!/bin/bash # Search for meta.story usage patterns across all snippet files to verify consistency rg -n "meta\.story\(" docs/_snippets/ -A1 -B1 | head -100Also applies to: 112-112, 124-124, 142-142, 162-162, 180-180, 200-200
docs/_snippets/api-doc-block-source-parameter.md (1)
189-216: Align docs source language with the snippet language.The CSF Next web-components snippets are labeled as
language="js"/language="ts"in the fence, butdocs.source.languageis set totsx, which is misleading for this renderer. Please set it tojs/tsto match the snippet.🔧 Suggested fix
export const Basic = meta.story({ parameters: { docs: { - source: { language: 'tsx' }, + source: { language: 'js' }, }, }, });export const Basic = meta.story({ parameters: { docs: { - source: { language: 'tsx' }, + source: { language: 'ts' }, }, }, });docs/_snippets/checkbox-story-grouped.md (4)
147-154: Addexport default meta;to the Web Components CSF Next JS snippet.
Required for Storybook to load the meta.🐛 Proposed fix
const meta = preview.meta({ title: 'Design System/Atoms/Checkbox', component: 'demo-checkbox', }); +export default meta;
156-163: Addexport default meta;to the Web Components CSF Next TS snippet.
Required for Storybook to load the meta.🐛 Proposed fix
const meta = preview.meta({ title: 'Design System/Atoms/Checkbox', component: 'demo-checkbox', }); +export default meta;
197-210: Addexport default meta;to the Vue CSF Next TS snippet.All story files in the documentation follow the pattern of exporting the meta object. This snippet is missing the required export statement at the end.
Proposed fix
const meta = preview.meta({ /* 👇 The title prop is optional. * See https://storybook.js.org/docs/configure/#configure-story-loading * to learn how to generate automatic titles */ title: 'Design System/Atoms/Checkbox', component: Checkbox, }); +export default meta;
214-227: Addexport default meta;to complete the Vue CSF Next snippet.The snippet shows only the meta definition without any exported stories, making it an incomplete module. The TypeScript variant in the same file includes
export default meta;after the meta definition.Proposed fix
const meta = preview.meta({ /* 👇 The title prop is optional. * See https://storybook.js.org/docs/configure/#configure-story-loading * to learn how to generate automatic titles */ title: 'Design System/Atoms/Checkbox', component: Checkbox, }); +export default meta;docs/_snippets/button-story-primary-composition.md (1)
28-50: This issue has already been resolved.The Angular CSF Next block now correctly uses
...Primary.input.argson line 46. The same fix has been applied to Web Components blocks at lines 255 and 277.
🧹 Nitpick comments (5)
docs/_snippets/configure-mock-provider-with-story-parameter.md (1)
65-68: Remove extra blank line for consistency.The CSF Next JS snippet has two blank lines between imports (lines 66-67), while the CSF Next TS snippet (lines 43-46) has only one. This creates an inconsistency in the documentation formatting.
♻️ Proposed fix
```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪" import preview from '../.storybook/preview'; - import { Button } from './Button';docs/_snippets/highlight-remove.md (1)
123-123: Optional: Minor whitespace additions.Lines 123 and 179 appear to have blank lines added in Svelte CSF blocks. While harmless, these might be unintentional formatting artifacts.
Also applies to: 179-179
docs/_snippets/button-story-primary-composition.md (2)
1-381: Verify Prettier formatting.Per coding guidelines, Markdown files should be formatted with Prettier. Please run
yarn prettier --write docs/_snippets/button-story-primary-composition.mdto ensure consistent formatting.Based on coding guidelines.
28-50: Consider documenting optional type safety in CSF Next TypeScript examples.While CSF Next TypeScript snippets intentionally omit explicit type annotations (unlike CSF 3), the API supports optional typing via
.type<{ args: ComponentProps }>().meta(). The current examples simplify the pattern, but adding a note explaining this design choice—or an optional example showing typed variants—would help users understand when and how to add type safety if needed. This applies to all CSF Next TypeScript snippets across frameworks.docs/_snippets/button-story-with-emojis.md (1)
594-594: Consider removing or rewording the internal comment.The comment
<!-- JS snippets still needed while providing both CSF 3 & Next -->appears to be an internal development note. While it's in an HTML comment and won't be visible to end users, consider either:
- Removing it if it's no longer needed for maintainers
- Rewording it to provide context for maintainers (e.g., "")
| ```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪" | ||
| import preview from '../.storybook/preview'; | ||
|
|
||
| import { Button } from './button.component'; | ||
|
|
||
| const meta = preview.meta({ | ||
| /* 👇 The title prop is optional. | ||
| * See https://storybook.js.org/docs/configure/#configure-story-loading | ||
| * to learn how to generate automatic titles | ||
| */ | ||
| title: 'Button', | ||
| component: Button, | ||
| }); | ||
| ``` |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's examine the file to see the actual content
cat -n docs/_snippets/button-story-default-export.md | head -50Repository: storybookjs/storybook
Length of output: 1846
🏁 Script executed:
# Check lines 18-31 (Angular CSF Next block)
sed -n '18,31p' docs/_snippets/button-story-default-export.mdRepository: storybookjs/storybook
Length of output: 488
🏁 Script executed:
# Check lines 175-199 (Web Components CSF Next blocks)
sed -n '175,199p' docs/_snippets/button-story-default-export.mdRepository: storybookjs/storybook
Length of output: 847
🏁 Script executed:
# Check lines 233-263 (Vue CSF Next blocks)
sed -n '233,263p' docs/_snippets/button-story-default-export.mdRepository: storybookjs/storybook
Length of output: 952
🏁 Script executed:
# Search for other CSF Next examples in the docs that might show the complete pattern
rg -n "preview\.meta\(" --type=md -g 'docs/**/*.md' -A 15 | head -100Repository: storybookjs/storybook
Length of output: 7587
🏁 Script executed:
# Also search for CSF Next documentation or examples
rg -n "CSF Next" --type=md docs/_snippets/ -B 2 -A 5Repository: storybookjs/storybook
Length of output: 50381
CSF Next blocks are incomplete—missing story definition or export.
The newly added CSF Next blocks for Angular (lines 18-31), Web Components (lines 175-199), and Vue (lines 233-263) define const meta = preview.meta({...}) but don't show how to export or use it. In contrast, CSF 3 blocks include export default meta;, and other CSF Next examples in the docs demonstrate the pattern export const StoryName = meta.story({...}).
Since this file focuses on default exports and CSF 3 examples are complete, these CSF Next snippets should show the full usage pattern.
🤖 Prompt for AI Agents
In `@docs/_snippets/button-story-default-export.md` around lines 18 - 31, The CSF
Next snippets define const meta = preview.meta({...}) but stop short of showing
how to export or use it; update each snippet (Angular/Web Components/Vue) to
include the complete CSF Next usage by exporting the meta and at least one story
— e.g., add an export of the meta (export default meta) if desired or,
preferably for CSF Next, show exporting a named story using meta.story (e.g.,
export const Primary = meta.story({ args: {...} })). Ensure the snippet
references the existing preview.meta(...) call and uses the same component
symbol (Button or the appropriate component) so readers see the full pattern:
meta creation plus either export default meta or export const StoryName =
meta.story({...}).
| ``` | ||
|
|
||
| ```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪" | ||
| import preview from '../.storybook/preview'; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Search for CSF Next preview setup documentation and patterns
# Look for preview-related documentation in docs
echo "=== Searching for preview setup documentation ==="
rg -n "definePreview|preview.*meta|CSF Next" --type=md -g 'docs/**' | head -50
# Search for preview import patterns across docs
echo ""
echo "=== Searching for preview import patterns in docs ==="
rg -n "import preview from.*preview" --type=md -g 'docs/**'
# Check if .storybook/preview exists and its structure
echo ""
echo "=== Checking .storybook directory ==="
find . -path './.git' -prune -o -type f -name 'preview.*' -print 2>/dev/null
# Search for CSF Next documentation
echo ""
echo "=== Searching for CSF Next documentation ==="
rg -n "CSF Next" --type=md -g 'docs/**' | head -20Repository: storybookjs/storybook
Length of output: 50378
🏁 Script executed:
#!/bin/bash
# Check the specific file and context around line 47
echo "=== Checking button-story-with-emojis.md around line 47 ==="
sed -n '40,55p' docs/_snippets/button-story-with-emojis.md
# Look at the CSF Next documentation to see how preview is set up
echo ""
echo "=== Checking CSF Next definePreview setup documentation ==="
sed -n '46,90p' docs/api/csf/csf-next.mdx
# Check if there's documentation about directory structures
echo ""
echo "=== Searching for directory structure guidance in CSF Next docs ==="
sed -n '100,110p' docs/api/csf/csf-next.mdx
# Look at the upgrade section which discusses different setups
echo ""
echo "=== Checking upgrade and setup guidance ==="
sed -n '306,380p' docs/api/csf/csf-next.mdx | head -60Repository: storybookjs/storybook
Length of output: 4759
🏁 Script executed:
#!/bin/bash
# Check if prettier would make changes to the file
echo "=== Checking Prettier formatting on button-story-with-emojis.md ==="
cd docs/_snippets
# First, show the current state around line 47
echo "Current state around line 47:"
sed -n '45,50p' button-story-with-emojis.md
# Check what prettier would suggest (without modifying)
echo ""
echo "Checking Prettier formatting needs..."
prettier --check button-story-with-emojis.md 2>&1 || echo "Prettier would make changes"Repository: storybookjs/storybook
Length of output: 463
Use absolute imports for the preview configuration to prevent breaking changes when moving story files.
The CSF Next documentation explicitly warns that relative imports like import preview from '../.storybook/preview' can break if you move story files around. The recommended approach is to use subpath imports:
import preview from '#.storybook/preview';This requires configuring subpath imports in your package.json or tsconfig.json (Node.js standard), which prevents import paths from breaking during file reorganization. See the CSF Next documentation for setup details.
This applies to lines 47, 507, 534, 559, and 597.
🤖 Prompt for AI Agents
In `@docs/_snippets/button-story-with-emojis.md` at line 47, Replace the relative
preview import in docs/_snippets/button-story-with-emojis.md (the import preview
statement) with an absolute/subpath import (e.g., use the '#.storybook/preview'
subpath) so story files won’t break when moved; update all occurrences mentioned
in the review and ensure you have the corresponding subpath mapping configured
in package.json or tsconfig (Node subpath imports) before changing the import.
| export const ExampleStory = meta.story({ | ||
| render: ({ args }) => { | ||
| const { propertyA, propertyB } = args; | ||
| //👇 Assigns the function result to a variable | ||
| const functionResult = someFunction(propertyA, propertyB); | ||
| return { | ||
| components: { YourComponent }, | ||
| setup() { | ||
| return { | ||
| ...args, | ||
| //👇 Replaces arg variable with the override (without the need of mutation) | ||
| someProperty: functionResult, | ||
| }; | ||
| }, | ||
| template: | ||
| '<YourComponent :propertyA="propertyA" :propertyB="propertyB" :someProperty="someProperty"/>', | ||
| }; | ||
| }, |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Search for CSF Next Vue render examples in the docs
find docs -type f -name "*.md" | xargs grep -l "render.*args.*Vue" | head -5Repository: storybookjs/storybook
Length of output: 47
🏁 Script executed:
# Look for Vue story examples in the repository
fd -e ts -e tsx -e js -e jsx --path "*/vue/*" --path "*example*" | grep -i story | head -10Repository: storybookjs/storybook
Length of output: 298
🏁 Script executed:
# Search for the render function signature in Vue-related files
rg "render.*\{.*args" --type md --type ts --type tsx -A 3 | head -50Repository: storybookjs/storybook
Length of output: 92
🏁 Script executed:
# Check the file in question to see the full context
cat -n docs/_snippets/component-story-custom-args-complex.md | sed -n '700,730p'Repository: storybookjs/storybook
Length of output: 1128
🏁 Script executed:
# Also check lines 754-771
cat -n docs/_snippets/component-story-custom-args-complex.md | sed -n '750,775p'Repository: storybookjs/storybook
Length of output: 1013
🏁 Script executed:
# Search for type definitions of render function
rg "render.*\(" --type ts -A 2 | grep -i "vue\|args" | head -20Repository: storybookjs/storybook
Length of output: 2414
🏁 Script executed:
# Look for CSF Next documentation files
fd -e md . docs | xargs grep -l "CSF.*Next\|render.*function" | head -10Repository: storybookjs/storybook
Length of output: 609
🏁 Script executed:
# Search for render function signature in framework files
fd -e ts -e js . code | xargs grep -l "render.*args" | grep -i vue | head -5Repository: storybookjs/storybook
Length of output: 289
🏁 Script executed:
# Search for official examples with Vue framework
rg "framework.*vue\|vue.*framework" --type md -A 5 -B 5 | grep -A 10 "render" | head -40Repository: storybookjs/storybook
Length of output: 47
🏁 Script executed:
# Check for other Vue story examples in the docs
rg "export const.*Story.*render" --type md -A 3 -B 1 | grep -A 5 "Vue\|vue" | head -50Repository: storybookjs/storybook
Length of output: 47
🏁 Script executed:
# Look at Vue3 public types to understand render signature
cat -n code/renderers/vue3/src/public-types.test.ts | head -100Repository: storybookjs/storybook
Length of output: 4167
🏁 Script executed:
# Check the Vue3 test stories for render examples
cat -n code/renderers/vue3/src/__tests__/composeStories/Button.stories.ts | head -150Repository: storybookjs/storybook
Length of output: 4701
🏁 Script executed:
# Search for RenderFunction or StoryFn type definitions in Vue
rg "RenderFunction\|StoryFn" code/renderers/vue3 -A 3 | head -50Repository: storybookjs/storybook
Length of output: 47
🏁 Script executed:
# Look for CSF Next Vue examples in the entire codebase
rg "meta\.story.*render" --type ts --type md -A 3 -B 1 | grep -A 5 "vue\|Vue" | head -80Repository: storybookjs/storybook
Length of output: 47
🏁 Script executed:
# Check the Vue3 render.ts file for how it processes render functions
head -100 code/renderers/vue3/src/render.tsRepository: storybookjs/storybook
Length of output: 3841
Fix render function signature in Vue examples.
The render function should receive args directly, not destructured. Update both occurrences (lines 704-721 and 754-771):
Change `render: ({ args })` to `render: (args)`
-export const ExampleStory = meta.story({
- render: ({ args }) => {
+export const ExampleStory = meta.story({
+ render: (args) => {
const { propertyA, propertyB } = args;
//👇 Assigns the function result to a variable
const functionResult = someFunction(propertyA, propertyB);
return {
components: { YourComponent },
setup() {
return {
...args,
//👇 Replaces arg variable with the override (without the need of mutation)
someProperty: functionResult,
};
},
template:
'<YourComponent :propertyA="propertyA" :propertyB="propertyB" :someProperty="someProperty"/>',
};
},
args: {
propertyA: 'Item One',
propertyB: 'Another Item One',
},
});🤖 Prompt for AI Agents
In `@docs/_snippets/component-story-custom-args-complex.md` around lines 704 -
721, The Vue story's render signature is wrong — change the parameter from a
destructured object to receive args directly: replace render: ({ args }) with
render: (args) for ExampleStory (and the other occurrence), then update the
function body to use args directly (e.g., const { propertyA, propertyB } = args;
keep using someFunction(propertyA, propertyB) and return the same
components/setup/template using args and someProperty). Ensure you only change
the render parameter and any references that assumed a nested args object so
ExampleStory, render, YourComponent, someFunction, someProperty, propertyA and
propertyB work as intended.
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@docs/_snippets/angular-application-providers-in-meta-and-story.md`:
- Around line 56-62: The providers array snippet has missing commas and an
unclear intent about alternatives: add the missing commas between array elements
in the providers array and either clarify that
importProvidersFrom(BrowserAnimationsModule) and provideAnimations() are
mutually exclusive alternatives (pick one and document as "or"), or explicitly
show both as coexisting providers separated by commas if both are intended;
update the text to state whether importProvidersFrom(BrowserAnimationsModule)
and provideAnimations() are alternative approaches or can be used together, and
ensure the symbols importProvidersFrom, BrowserAnimationsModule,
provideAnimations, and the providers array are correctly punctuated so the
snippet is valid.
- Around line 15-21: The providers array snippet has syntax errors and ambiguous
intent: add missing commas between array elements and clarify whether
importProvidersFrom(BrowserAnimationsModule) and provideAnimations() are
alternatives or intended to coexist; specifically, in the providers array
(symbol: providers) either show two separate example snippets (one using
importProvidersFrom with BrowserAnimationsModule and one using
provideAnimations) or, if both should be present, insert commas between items so
the array is valid (references: importProvidersFrom, BrowserAnimationsModule,
provideAnimations).
| providers: [ | ||
| ... | ||
| // Import application-wide providers from a module | ||
| importProvidersFrom(BrowserAnimationsModule) | ||
| // Or use provide-style functions if available instead, e.g. | ||
| provideAnimations() | ||
| ], |
There was a problem hiding this comment.
Fix array syntax or clarify alternative approaches.
The providers array has syntax issues:
- Missing commas between array elements (after line 16, after line 18)
- The comment "Or use provide-style functions if available instead" (line 19) suggests
importProvidersFrom()andprovideAnimations()are alternatives, but the syntax shows them both in the same array
If they are alternatives, consider restructuring the snippet to show them separately or add a comment clarifying only one approach should be used. If both can coexist, add the missing commas.
💚 Example fix if both providers can coexist
providers: [
...
// Import application-wide providers from a module
- importProvidersFrom(BrowserAnimationsModule)
+ importProvidersFrom(BrowserAnimationsModule),
// Or use provide-style functions if available instead, e.g.
provideAnimations()
],📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| providers: [ | |
| ... | |
| // Import application-wide providers from a module | |
| importProvidersFrom(BrowserAnimationsModule) | |
| // Or use provide-style functions if available instead, e.g. | |
| provideAnimations() | |
| ], | |
| providers: [ | |
| ..., | |
| // Import application-wide providers from a module | |
| importProvidersFrom(BrowserAnimationsModule), | |
| // Or use provide-style functions if available instead, e.g. | |
| provideAnimations() | |
| ], |
🤖 Prompt for AI Agents
In `@docs/_snippets/angular-application-providers-in-meta-and-story.md` around
lines 15 - 21, The providers array snippet has syntax errors and ambiguous
intent: add missing commas between array elements and clarify whether
importProvidersFrom(BrowserAnimationsModule) and provideAnimations() are
alternatives or intended to coexist; specifically, in the providers array
(symbol: providers) either show two separate example snippets (one using
importProvidersFrom with BrowserAnimationsModule and one using
provideAnimations) or, if both should be present, insert commas between items so
the array is valid (references: importProvidersFrom, BrowserAnimationsModule,
provideAnimations).
| providers: [ | ||
| ... | ||
| // Import application-wide providers from a module | ||
| importProvidersFrom(BrowserAnimationsModule) | ||
| // Or use provide-style functions if available instead, e.g. | ||
| provideAnimations() | ||
| ], |
There was a problem hiding this comment.
Fix array syntax or clarify alternative approaches.
Same issue as in the CSF 3 block above: the providers array has syntax issues with missing commas between array elements and ambiguous documentation about whether importProvidersFrom() and provideAnimations() are alternatives or both should be included.
💚 Example fix if both providers can coexist
providers: [
...
// Import application-wide providers from a module
- importProvidersFrom(BrowserAnimationsModule)
+ importProvidersFrom(BrowserAnimationsModule),
// Or use provide-style functions if available instead, e.g.
provideAnimations()
],📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| providers: [ | |
| ... | |
| // Import application-wide providers from a module | |
| importProvidersFrom(BrowserAnimationsModule) | |
| // Or use provide-style functions if available instead, e.g. | |
| provideAnimations() | |
| ], | |
| providers: [ | |
| ... | |
| // Import application-wide providers from a module | |
| importProvidersFrom(BrowserAnimationsModule), | |
| // Or use provide-style functions if available instead, e.g. | |
| provideAnimations() | |
| ], |
🤖 Prompt for AI Agents
In `@docs/_snippets/angular-application-providers-in-meta-and-story.md` around
lines 56 - 62, The providers array snippet has missing commas and an unclear
intent about alternatives: add the missing commas between array elements in the
providers array and either clarify that
importProvidersFrom(BrowserAnimationsModule) and provideAnimations() are
mutually exclusive alternatives (pick one and document as "or"), or explicitly
show both as coexisting providers separated by commas if both are intended;
update the text to state whether importProvidersFrom(BrowserAnimationsModule)
and provideAnimations() are alternative approaches or can be used together, and
ensure the symbols importProvidersFrom, BrowserAnimationsModule,
provideAnimations, and the providers array are correctly punctuated so the
snippet is valid.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@docs/_snippets/button-story-using-args.md`:
- Around line 706-760: The story args use backgroundColor in
Primary/Secondary/Tertiary but the TS CSF Next snippet uses background, causing
inconsistent arg names; update the args objects in the meta.story definitions
(Primary.args, Secondary.args, Tertiary.args) to use the same prop name as the
TS example (replace backgroundColor with background) so all stories reference
the same arg key across JS and TS; ensure any spreads (e.g.,
...Primary.input.args) also align to the renamed key.
| ```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪" | ||
| import preview from '../.storybook/preview'; | ||
|
|
||
| import Button from './Button.vue'; | ||
|
|
||
| const meta = preview.meta({ | ||
| component: Button, | ||
| }); | ||
|
|
||
| /* | ||
| *👇 Render functions are a framework specific feature to allow you control on how the component renders. | ||
| * See https://storybook.js.org/docs/api/csf | ||
| * to learn how to use render functions. | ||
| */ | ||
| export const Primary = meta.story({ | ||
| render: (args) => ({ | ||
| components: { Button }, | ||
| setup() { | ||
| return { args }; | ||
| }, | ||
| template: '<Button v-bind="args" />', | ||
| }), | ||
| args: { | ||
| backgroundColor: '#ff0', | ||
| label: 'Button', | ||
| }, | ||
| }); | ||
|
|
||
| export const Secondary = meta.story({ | ||
| render: (args) => ({ | ||
| components: { Button }, | ||
| setup() { | ||
| return { args }; | ||
| }, | ||
| template: '<Button v-bind="args" />', | ||
| }), | ||
| args: { | ||
| ...Primary.input.args, | ||
| label: '😄👍😍💯', | ||
| }, | ||
| }); | ||
|
|
||
| export const Tertiary = meta.story({ | ||
| render: (args) => ({ | ||
| components: { Button }, | ||
| setup() { | ||
| return { args }; | ||
| }, | ||
| template: '<Button v-bind="args" />', | ||
| }), | ||
| args: { | ||
| ...Primary.input.args, | ||
| label: '📚📕📈🤓', | ||
| }, | ||
| }); |
There was a problem hiding this comment.
Align Vue CSF Next JS arg name with TS snippet.
JS uses backgroundColor while the TS CSF Next snippet uses background. This mismatch can confuse readers and suggests different arg names for the same component.
🔧 Suggested fix
- args: {
- backgroundColor: '#ff0',
- label: 'Button',
- },
+ args: {
+ background: '#ff0',
+ label: 'Button',
+ },🤖 Prompt for AI Agents
In `@docs/_snippets/button-story-using-args.md` around lines 706 - 760, The story
args use backgroundColor in Primary/Secondary/Tertiary but the TS CSF Next
snippet uses background, causing inconsistent arg names; update the args objects
in the meta.story definitions (Primary.args, Secondary.args, Tertiary.args) to
use the same prop name as the TS example (replace backgroundColor with
background) so all stories reference the same arg key across JS and TS; ensure
any spreads (e.g., ...Primary.input.args) also align to the renamed key.
jonniebigodes
left a comment
jonniebigodes
left a comment
There was a problem hiding this comment.
Appreciate you addressing the feedback so promptly 🙏 ! I pushed a commit with some minor items that I found to unblock this. It looks good to me
4 participants
What I did
Done
default exportwhen referring to the "meta"Checklist for Contributors
Testing
Manual testing
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.Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.