React: Improve automatic component, automatic imports, support barrel files and enhance story filtering #32939
Conversation
|
View your CI Pipeline Execution ↗ for commit 6f87e22
☁️ Nx Cloud last updated this comment at |
📝 WalkthroughWalkthroughRefactors React component-manifest generation, adding import/component extraction, cached IO and resolve utilities, cross-file react-docgen resolution, expanded manifest typings and rendering, extensive tests, and a rewritten Vitest setup; also minor core-server, logger, and config tweaks. Changes
Sequence Diagram(s)sequenceDiagram
participant Test
participant Gen as componentManifestGenerator
participant Comp as getComponentData
participant Doc as getReactDocgen
participant Cache as cached utilities
Test->>Gen: invoke(indexJson, options?)
Gen->>Cache: invalidateCache()
Gen->>Cache: cachedFindUp(package.json near component)
Cache-->>Gen: packageName?
Gen->>Comp: getComponentData(csf, packageName, storyFilePath)
Comp->>Comp: getComponents (extract JSX/meta + resolve bindings)
Comp->>Comp: getImports (merge/transform imports)
Comp-->>Gen: { components[], imports[] }
loop per-story/component
Gen->>Doc: getReactDocgen(path, component) (cached)
Doc->>Doc: gatherDocgensForPath -> parseWithReactDocgen
Doc-->>Gen: reactDocgen result (success | error)
end
Gen->>Gen: assemble manifest entry (id,name,path,import,stories,reactDocgen)
Gen-->>Test: { v:0, components: { ... } }
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Areas to focus review on:
Possibly related PRs
✨ Finishing touches
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: 3
🧹 Nitpick comments (3)
code/renderers/react/src/componentManifest/reactDocgen.ts (3)
35-55: Consider simplifying the matching logic.The nested conditionals make the matching logic difficult to follow. Consider extracting helper predicates to improve readability.
Example refactor:
export function getMatchingDocgen(docgens: DocObj[], component: ComponentRef) { if (docgens.length === 1) { return docgens[0]; } + const componentNames = [component.importName, component.localImportName, component.componentName]; + const matchesExportName = (d: DocObj) => componentNames.slice(0, 2).includes(d.exportName); + const matchesDisplayOrActualName = (d: DocObj) => + componentNames.includes(d.displayName) || componentNames.includes(d.actualName); + - const matchingDocgen = - docgens.find((docgen) => - [component.importName, component.localImportName].includes(docgen.exportName) - ) ?? - docgens.find( - (docgen) => - [component.importName, component.localImportName, component.componentName].includes( - docgen.displayName - ) || - [component.importName, component.localImportName, component.componentName].includes( - docgen.actualName - ) - ); + const matchingDocgen = docgens.find(matchesExportName) ?? docgens.find(matchesDisplayOrActualName); return matchingDocgen ?? docgens[0]; }
127-165: Consider making recursion depth configurable.The hardcoded depth limit of 5 at line 132 prevents infinite recursion but may be too restrictive or too permissive for different codebases.
Consider extracting as a constant:
+const MAX_REEXPORT_DEPTH = 5; + const gatherDocgensForPath = cached( ( filePath: string, depth: number ): { docgens: DocObj[]; analyzed: { path: string; code: string }[] } => { - if (depth > 5 || filePath.includes('node_modules')) { + if (depth > MAX_REEXPORT_DEPTH || filePath.includes('node_modules')) { return { docgens: [], analyzed: [] }; }
213-238: Optimize file extension check order.The extension check at lines 227-229 occurs after
existsSyncat line 226. Checking the extension first would avoid an unnecessary file system call when the extension is invalid.Apply this diff:
if (result.includes(`${sep}react-native${sep}index.js`)) { const replaced = result.replace( `${sep}react-native${sep}index.js`, `${sep}react-native-web${sep}dist${sep}index.js` ); - if (existsSync(replaced)) { - if (supportedExtensions.find((ext) => result.endsWith(ext))) { + if (supportedExtensions.find((ext) => replaced.endsWith(ext))) { + if (existsSync(replaced)) { return replaced; } } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
code/yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (17)
code/addons/vitest/tsconfig.json(1 hunks)code/core/src/core-server/build-static.ts(1 hunks)code/core/src/core-server/dev-server.ts(3 hunks)code/core/src/core-server/manifest.ts(4 hunks)code/core/src/types/modules/core-common.ts(1 hunks)code/renderers/react/package.json(1 hunks)code/renderers/react/src/componentManifest/generator.test.ts(14 hunks)code/renderers/react/src/componentManifest/generator.ts(2 hunks)code/renderers/react/src/componentManifest/getComponentImports.test.ts(1 hunks)code/renderers/react/src/componentManifest/getComponentImports.ts(1 hunks)code/renderers/react/src/componentManifest/reactDocgen.test.ts(1 hunks)code/renderers/react/src/componentManifest/reactDocgen.ts(3 hunks)code/renderers/react/src/componentManifest/test-utils.ts(1 hunks)code/renderers/react/src/componentManifest/utils.test.ts(1 hunks)code/renderers/react/src/componentManifest/utils.ts(2 hunks)code/renderers/react/vitest.setup.ts(1 hunks)code/vitest-setup.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (useyarn lint:js:cmd <file>)
Files:
code/renderers/react/vitest.setup.tscode/core/src/types/modules/core-common.tscode/renderers/react/src/componentManifest/test-utils.tscode/renderers/react/src/componentManifest/utils.test.tscode/renderers/react/src/componentManifest/generator.tscode/renderers/react/package.jsoncode/renderers/react/src/componentManifest/getComponentImports.tscode/core/src/core-server/dev-server.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/src/componentManifest/generator.test.tscode/core/src/core-server/build-static.tscode/addons/vitest/tsconfig.jsoncode/renderers/react/src/componentManifest/reactDocgen.test.tscode/vitest-setup.tscode/renderers/react/src/componentManifest/utils.tscode/core/src/core-server/manifest.tscode/renderers/react/src/componentManifest/reactDocgen.ts
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions from modules when they need to be unit-tested
Files:
code/renderers/react/vitest.setup.tscode/core/src/types/modules/core-common.tscode/renderers/react/src/componentManifest/test-utils.tscode/renderers/react/src/componentManifest/utils.test.tscode/renderers/react/src/componentManifest/generator.tscode/renderers/react/src/componentManifest/getComponentImports.tscode/core/src/core-server/dev-server.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/src/componentManifest/generator.test.tscode/core/src/core-server/build-static.tscode/renderers/react/src/componentManifest/reactDocgen.test.tscode/vitest-setup.tscode/renderers/react/src/componentManifest/utils.tscode/core/src/core-server/manifest.tscode/renderers/react/src/componentManifest/reactDocgen.ts
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In application code, use Storybook loggers instead of
console.*(client code:storybook/internal/client-logger; server code:storybook/internal/node-logger)
Files:
code/renderers/react/vitest.setup.tscode/core/src/types/modules/core-common.tscode/renderers/react/src/componentManifest/test-utils.tscode/renderers/react/src/componentManifest/utils.test.tscode/renderers/react/src/componentManifest/generator.tscode/renderers/react/src/componentManifest/getComponentImports.tscode/core/src/core-server/dev-server.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/src/componentManifest/generator.test.tscode/core/src/core-server/build-static.tscode/renderers/react/src/componentManifest/reactDocgen.test.tscode/vitest-setup.tscode/renderers/react/src/componentManifest/utils.tscode/core/src/core-server/manifest.tscode/renderers/react/src/componentManifest/reactDocgen.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/renderers/react/vitest.setup.tscode/core/src/types/modules/core-common.tscode/renderers/react/src/componentManifest/test-utils.tscode/renderers/react/src/componentManifest/utils.test.tscode/renderers/react/src/componentManifest/generator.tscode/renderers/react/src/componentManifest/getComponentImports.tscode/core/src/core-server/dev-server.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/src/componentManifest/generator.test.tscode/core/src/core-server/build-static.tscode/renderers/react/src/componentManifest/reactDocgen.test.tscode/vitest-setup.tscode/renderers/react/src/componentManifest/utils.tscode/core/src/core-server/manifest.tscode/renderers/react/src/componentManifest/reactDocgen.ts
code/**/*.{test,spec}.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
code/**/*.{test,spec}.{ts,tsx}: Place all test files under the code/ directory
Name test files as *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx
Files:
code/renderers/react/src/componentManifest/utils.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/src/componentManifest/generator.test.tscode/renderers/react/src/componentManifest/reactDocgen.test.ts
**/*.test.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/spy-mocking.mdc)
**/*.test.{ts,tsx,js,jsx}: Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Place all mocks at the top of the test file before any test cases
Use vi.mocked() to type and access mocked functions
Implement mock behaviors in beforeEach blocks
Mock all required dependencies that the test subject uses
Mock implementations should be placed in beforeEach blocks
Each mock implementation should return a Promise for async functions
Mock implementations should match the expected return type of the original function
Use vi.mocked() to access and implement mock behaviors
Mock all required properties and methods that the test subject uses
Avoid direct function mocking without vi.mocked()
Avoid mock implementations outside of beforeEach blocks
Avoid mocking without the spy: true option
Avoid inline mock implementations within test cases
Avoid mocking only a subset of required dependencies
Mock at the highest level of abstraction needed
Keep mock implementations simple and focused
Use type-safe mocking with vi.mocked()
Document complex mock behaviors
Group related mocks together
Files:
code/renderers/react/src/componentManifest/utils.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/src/componentManifest/generator.test.tscode/renderers/react/src/componentManifest/reactDocgen.test.ts
**/*.@(test|spec).{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.@(test|spec).{ts,tsx,js,jsx}: Unit tests should import and execute the functions under test rather than only asserting on syntax patterns
Mock external dependencies in tests usingvi.mock()(e.g., filesystem, loggers)
Files:
code/renderers/react/src/componentManifest/utils.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/src/componentManifest/generator.test.tscode/renderers/react/src/componentManifest/reactDocgen.test.ts
**/tsconfig*.json
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Keep TypeScript strict mode enabled in tsconfig (e.g.,
"strict": true)
Files:
code/addons/vitest/tsconfig.json
🧠 Learnings (26)
📓 Common learnings
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/.storybook/** : Place internal UI Storybook configuration in `code/.storybook/` and maintain it there
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mock implementations outside of beforeEach blocks
Applied to files:
code/renderers/react/vitest.setup.tscode/renderers/react/src/componentManifest/test-utils.tscode/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Implement mock behaviors in beforeEach blocks
Applied to files:
code/renderers/react/vitest.setup.tscode/renderers/react/src/componentManifest/test-utils.tscode/renderers/react/src/componentManifest/utils.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/src/componentManifest/generator.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases
Applied to files:
code/renderers/react/vitest.setup.tscode/renderers/react/src/componentManifest/test-utils.tscode/renderers/react/src/componentManifest/utils.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/src/componentManifest/generator.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock implementations should be placed in beforeEach blocks
Applied to files:
code/renderers/react/vitest.setup.tscode/renderers/react/src/componentManifest/generator.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies
Applied to files:
code/renderers/react/vitest.setup.tscode/renderers/react/src/componentManifest/test-utils.tscode/renderers/react/src/componentManifest/utils.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/src/componentManifest/generator.test.tscode/vitest-setup.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies in tests using `vi.mock()` (e.g., filesystem, loggers)
Applied to files:
code/renderers/react/vitest.setup.tscode/renderers/react/src/componentManifest/test-utils.tscode/renderers/react/src/componentManifest/utils.test.tscode/renderers/react/src/componentManifest/generator.test.tscode/vitest-setup.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid direct function mocking without vi.mocked()
Applied to files:
code/renderers/react/vitest.setup.tscode/renderers/react/src/componentManifest/utils.test.tscode/vitest-setup.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Keep mock implementations simple and focused
Applied to files:
code/renderers/react/vitest.setup.tscode/renderers/react/src/componentManifest/test-utils.tscode/renderers/react/src/componentManifest/utils.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/src/componentManifest/generator.test.tscode/vitest-setup.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Unit tests should import and execute the functions under test rather than only asserting on syntax patterns
Applied to files:
code/renderers/react/vitest.setup.tscode/renderers/react/src/componentManifest/utils.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Applied to files:
code/renderers/react/vitest.setup.tscode/addons/vitest/tsconfig.jsoncode/vitest-setup.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to access and implement mock behaviors
Applied to files:
code/renderers/react/vitest.setup.tscode/renderers/react/src/componentManifest/generator.test.tscode/vitest-setup.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to type and access mocked functions
Applied to files:
code/renderers/react/vitest.setup.tscode/vitest-setup.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use type-safe mocking with vi.mocked()
Applied to files:
code/renderers/react/vitest.setup.tscode/vitest-setup.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together
Applied to files:
code/renderers/react/src/componentManifest/test-utils.tscode/renderers/react/src/componentManifest/utils.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/src/componentManifest/generator.test.tscode/vitest-setup.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors
Applied to files:
code/renderers/react/src/componentManifest/test-utils.tscode/renderers/react/src/componentManifest/utils.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/src/componentManifest/generator.test.tscode/vitest-setup.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required dependencies that the test subject uses
Applied to files:
code/renderers/react/src/componentManifest/test-utils.tscode/renderers/react/src/componentManifest/utils.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/src/componentManifest/generator.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject uses
Applied to files:
code/renderers/react/src/componentManifest/test-utils.tscode/renderers/react/src/componentManifest/utils.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/src/componentManifest/generator.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock at the highest level of abstraction needed
Applied to files:
code/renderers/react/src/componentManifest/test-utils.tscode/renderers/react/src/componentManifest/generator.test.ts
📚 Learning: 2025-10-01T15:24:01.060Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/src/componentManifest/generator.test.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{ts,tsx,js,jsx,mjs} : Export functions from modules when they need to be unit-tested
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/src/componentManifest/reactDocgen.test.tscode/renderers/react/src/componentManifest/reactDocgen.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios
Applied to files:
code/renderers/react/src/componentManifest/generator.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock implementations should match the expected return type of the original function
Applied to files:
code/renderers/react/src/componentManifest/generator.test.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/.storybook/** : Place internal UI Storybook configuration in `code/.storybook/` and maintain it there
Applied to files:
code/renderers/react/src/componentManifest/generator.test.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/tsconfig*.json : Keep TypeScript strict mode enabled in tsconfig (e.g., `"strict": true`)
Applied to files:
code/addons/vitest/tsconfig.json
📚 Learning: 2025-09-17T08:11:04.287Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursorrules:0-0
Timestamp: 2025-09-17T08:11:04.287Z
Learning: Applies to code/**/*.{test,spec}.{ts,tsx} : Name test files as *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx
Applied to files:
code/addons/vitest/tsconfig.json
🧬 Code graph analysis (11)
code/renderers/react/vitest.setup.ts (1)
code/renderers/react/src/componentManifest/utils.ts (1)
invalidateCache(118-122)
code/renderers/react/src/componentManifest/utils.test.ts (1)
code/renderers/react/src/componentManifest/utils.ts (4)
groupBy(9-21)invariant(24-32)cached(45-116)invalidateCache(118-122)
code/renderers/react/src/componentManifest/generator.ts (6)
code/core/src/types/modules/core-common.ts (2)
ComponentManifest(348-364)PresetPropertyFn(656-661)code/renderers/react/src/componentManifest/reactDocgen.ts (2)
DocObj(24-28)getReactDocgen(167-211)code/renderers/react/src/componentManifest/utils.ts (3)
invalidateCache(118-122)cachedReadFileSync(124-124)cachedFindUp(126-126)code/renderers/react/src/componentManifest/getComponentImports.ts (1)
getComponentImports(438-466)code/core/src/csf-tools/enrichCsf.ts (1)
extractDescription(158-178)code/renderers/react/src/componentManifest/jsdocTags.ts (1)
extractJSDocInfo(5-21)
code/renderers/react/src/componentManifest/getComponentImports.ts (3)
code/core/src/csf-tools/CsfFile.ts (1)
CsfFile(281-1042)code/renderers/react/src/componentManifest/utils.ts (1)
cachedResolveImport(128-128)code/renderers/react/src/componentManifest/reactDocgen.ts (3)
matchPath(57-69)getReactDocgen(167-211)getImportTag(240-244)
code/core/src/core-server/dev-server.ts (3)
code/renderers/react/src/componentManifest/generator.ts (1)
componentManifestGenerator(22-186)code/renderers/react/src/preset.ts (1)
componentManifestGenerator(11-11)code/renderers/react/src/componentManifest/utils.ts (1)
invariant(24-32)
code/renderers/react/src/componentManifest/getComponentImports.test.ts (3)
code/renderers/react/src/componentManifest/test-utils.ts (1)
fsMocks(3-112)code/renderers/react/src/componentManifest/getComponentImports.ts (2)
getImports(186-436)getComponentImports(438-466)code/core/src/csf-tools/CsfFile.ts (1)
loadCsf(1060-1064)
code/renderers/react/src/componentManifest/generator.test.ts (2)
code/renderers/react/src/componentManifest/test-utils.ts (1)
fsMocks(3-112)code/renderers/react/src/componentManifest/generator.ts (1)
componentManifestGenerator(22-186)
code/core/src/core-server/build-static.ts (2)
code/renderers/react/src/componentManifest/generator.ts (1)
componentManifestGenerator(22-186)code/renderers/react/src/preset.ts (1)
componentManifestGenerator(11-11)
code/renderers/react/src/componentManifest/reactDocgen.test.ts (1)
code/renderers/react/src/componentManifest/reactDocgen.ts (1)
parseWithReactDocgen(79-89)
code/renderers/react/src/componentManifest/utils.ts (1)
code/core/src/common/utils/interpret-files.ts (1)
resolveImport(25-58)
code/renderers/react/src/componentManifest/reactDocgen.ts (5)
code/renderers/react/src/componentManifest/getComponentImports.ts (1)
ComponentRef(11-19)code/core/src/common/utils/interpret-files.ts (1)
supportedExtensions(6-17)code/renderers/react/src/componentManifest/utils.ts (3)
cached(45-116)cachedResolveImport(128-128)cachedReadFileSync(124-124)code/core/src/common/utils/paths.ts (1)
getProjectRoot(11-57)code/renderers/react/src/componentManifest/jsdocTags.ts (1)
extractJSDocInfo(5-21)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Danger JS
- GitHub Check: normal
- GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (29)
code/addons/vitest/tsconfig.json (1)
6-6: Configuration meets TypeScript strict mode requirement.The tsconfig correctly maintains
"strict": true(line 6) as required. The change on line 8 appears to be a no-op (identical value substitution per the AI summary), so there's nothing to address here.Also applies to: 8-8
code/renderers/react/package.json (1)
70-70: [email protected] is verified as legitimate and secure.[email protected] is a published Node.js utility package with ~43K weekly downloads, and no known vulnerabilities or malware have been reported. The dependency has been added correctly with proper alphabetical ordering and appropriate version pinning.
code/vitest-setup.ts (1)
93-93: LGTM!The addition of
verbose: vi.fn()to the logger mock is consistent with other logger methods and supports the verbose logging introduced in the component manifest generation flow.code/renderers/react/vitest.setup.ts (1)
3-9: LGTM!Proper test isolation by invalidating the module-level cache after each test. The placement after
vi.restoreAllMocks()is correct, ensuring cached state is cleared between test runs.code/core/src/core-server/dev-server.ts (3)
147-148: LGTM!Removing the explicit type annotation is acceptable as TypeScript can infer the type from
presets.apply().
172-173: LGTM!Consistent with the change on Line 147; type inference handles this correctly.
194-195: LGTM!The
invariantassertion ensures type safety, and including bothtoString()andstackprovides better debugging information for manifest generation errors.code/renderers/react/src/componentManifest/reactDocgen.test.ts (1)
7-9: LGTM!The test helper correctly updated to match the new
parseWithReactDocgen(code, filename)signature, moving from a single options object to two separate parameters.code/renderers/react/src/componentManifest/utils.test.ts (1)
1-131: LGTM!Comprehensive test coverage for utility functions including
groupBy,invariant,cached, andinvalidateCache. Tests are well-structured, follow Vitest best practices, and verify both positive and edge cases.code/core/src/core-server/build-static.ts (1)
170-171: LGTM!Consistent with the dev-server.ts changes; TypeScript type inference handles this correctly.
code/core/src/types/modules/core-common.ts (1)
355-361: LGTM!The addition of optional
descriptionandsummaryfields to theComponentManifest.storiestype is backward compatible and aligns with the PR's goal to support richer story metadata for filtering and display.code/renderers/react/src/componentManifest/test-utils.ts (1)
1-112: LGTM!Well-structured test fixtures providing deterministic in-memory file system mocks for component manifest tests. The fixtures include realistic React/TypeScript code with JSDoc annotations, supporting comprehensive testing of import resolution and manifest generation.
code/renderers/react/src/componentManifest/generator.ts (10)
1-16: LGTM: Imports are well-organized.The new imports support the refactored implementation with proper caching, logging, and type support.
22-24: LGTM: Preset-driven signature enhances integration.The new
PresetPropertyFnsignature properly integrates with Storybook's preset system.
26-26: LGTM: Cache invalidation ensures fresh data.Invalidating the cache at the start of each generation is the correct approach for deterministic builds.
28-30: LGTM: Performance instrumentation aids debugging.The timing instrumentation provides valuable metrics for manifest generation performance.
Also applies to: 32-32, 175-175
75-86: LGTM: Comprehensive component matching logic.The matching logic correctly handles both explicit component names and title-based inference.
48-50: LGTM: Proper manifest tag filtering.The filtering at both component and story levels provides appropriate granular control over manifest inclusion.
Also applies to: 97-99
100-117: LGTM: Robust error handling with helpful messages.The error handling properly catches exceptions, narrows types with
invariant, and provides actionable error messages for debugging.Also applies to: 130-148
101-103: LGTM: JSDoc extraction enriches manifest data.Extracting descriptions and summaries from JSDoc comments provides valuable metadata for documentation generation.
Also applies to: 158-162
57-63: LGTM: Package inference supports import generation.Finding the nearest package.json enables generation of proper import statements with package names.
150-156: LGTM: React docgen integration provides rich metadata.The integration with
getReactDocgenenriches the manifest with component documentation and properly handles errors.Also applies to: 169-171
code/renderers/react/src/componentManifest/reactDocgen.ts (7)
1-28: LGTM: Well-structured imports and type definitions.The
DocObjtype appropriately extendsDocumentationwithdefinedInFileand optionalexportNamefor cross-file traceability.
57-69: LGTM: Proper TypeScript path mapping resolution.The function correctly uses
tsconfig-pathsto resolve module paths according to TypeScript configuration.
71-77: LGTM: Cached tsconfig loading improves performance.Caching the TypeScript configuration loading prevents redundant file I/O.
79-89: Verify cache invalidation strategy for file changes.The cache key uses only the
pathparameter, ignoringcode. This means if a file's content changes but the path stays the same, the cached result will be stale. Ensure thatinvalidateCache()is called appropriately when files change during development.
91-125: LGTM: Graceful failure handling in export path resolution.The function appropriately catches parse and resolution errors, returning empty arrays for unparseable files or unresolvable imports, which prevents cascade failures during re-export traversal.
167-211: LGTM: Robust docgen retrieval with excellent error messages.The function properly handles node_modules rejection, provides actionable error messages with analyzed file info, and uses appropriate cache granularity.
240-244: LGTM: Simple and effective import tag extraction.The function cleanly extracts import tags from docgen JSDoc comments.
Package BenchmarksCommit: The following packages have significant changes to their size or dependencies:
|
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 533 | 533 | 0 |
| Self size | 749 KB | 749 KB | 0 B |
| Dependency size | 58.93 MB | 58.95 MB | 🚨 +17 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/nextjs-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 124 | 124 | 0 |
| Self size | 3.83 MB | 3.83 MB | 0 B |
| Dependency size | 21.76 MB | 21.78 MB | 🚨 +17 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-native-web-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 157 | 157 | 0 |
| Self size | 31 KB | 31 KB | 🎉 -24 B 🎉 |
| Dependency size | 23.11 MB | 23.13 MB | 🚨 +17 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 114 | 114 | 0 |
| Self size | 37 KB | 37 KB | 0 B |
| Dependency size | 19.67 MB | 19.69 MB | 🚨 +17 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 273 | 273 | 0 |
| Self size | 25 KB | 25 KB | 🚨 +18 B 🚨 |
| Dependency size | 43.89 MB | 43.90 MB | 🚨 +17 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 57 | 57 | 0 |
| Self size | 812 KB | 829 KB | 🚨 +16 KB 🚨 |
| Dependency size | 12.94 MB | 12.94 MB | 🚨 +214 B 🚨 |
| Bundle Size Analyzer | Link | Link |
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
code/renderers/react/src/enrichCsf.test.ts (2)
11-13: Addspy: trueoption to vi.mock.Per coding guidelines, all
vi.mock()calls should include thespy: trueoption.As per coding guidelines.
-vi.mock('my-preset', () => ({ +vi.mock('my-preset', { spy: true }, () => ({ default: { experimental_enrichCsf: enrichCsf, features: { experimentalCodeExamples: true } }, }));
71-75: Move mock implementation to beforeEach block.The inline
mockImplementationwithin the test case violates coding guidelines. Mock implementations should be placed inbeforeEachblocks for consistency and maintainability.As per coding guidelines.
Consider restructuring to use a beforeEach hook or extracting to a test-specific setup function if this mock only applies to one test.
🧹 Nitpick comments (1)
code/renderers/react/src/extractArgTypes.test.ts (1)
62-64: Consider moving fs import to beforeEach for consistency.While the current top-level
await vi.importActualworks, the coding guidelines emphasize placing mock-related setup inbeforeEachblocks. This would also align with the patterns used in other test files in this PR (e.g.,vitest.setup.ts).As per coding guidelines.
-const fs = await vi.importActual<typeof import('node:fs')>('node:fs'); - -describe('react component properties', async () => { +describe('react component properties', () => { + let fs: typeof import('node:fs'); + + beforeEach(async () => { + fs = await vi.importActual<typeof import('node:fs')>('node:fs'); + });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
code/renderers/react/src/componentManifest/fixtures.ts(1 hunks)code/renderers/react/src/componentManifest/generator.test.ts(13 hunks)code/renderers/react/src/componentManifest/getComponentImports.test.ts(1 hunks)code/renderers/react/src/enrichCsf.test.ts(1 hunks)code/renderers/react/src/extractArgTypes.test.ts(2 hunks)code/renderers/react/vitest.setup.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (7)
code/**/*.{test,spec}.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
code/**/*.{test,spec}.{ts,tsx}: Place all test files under the code/ directory
Name test files as *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx
Files:
code/renderers/react/src/extractArgTypes.test.tscode/renderers/react/src/enrichCsf.test.tscode/renderers/react/src/componentManifest/generator.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.ts
**/*.test.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/spy-mocking.mdc)
**/*.test.{ts,tsx,js,jsx}: Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Place all mocks at the top of the test file before any test cases
Use vi.mocked() to type and access mocked functions
Implement mock behaviors in beforeEach blocks
Mock all required dependencies that the test subject uses
Mock implementations should be placed in beforeEach blocks
Each mock implementation should return a Promise for async functions
Mock implementations should match the expected return type of the original function
Use vi.mocked() to access and implement mock behaviors
Mock all required properties and methods that the test subject uses
Avoid direct function mocking without vi.mocked()
Avoid mock implementations outside of beforeEach blocks
Avoid mocking without the spy: true option
Avoid inline mock implementations within test cases
Avoid mocking only a subset of required dependencies
Mock at the highest level of abstraction needed
Keep mock implementations simple and focused
Use type-safe mocking with vi.mocked()
Document complex mock behaviors
Group related mocks together
Files:
code/renderers/react/src/extractArgTypes.test.tscode/renderers/react/src/enrichCsf.test.tscode/renderers/react/src/componentManifest/generator.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.ts
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (useyarn lint:js:cmd <file>)
Files:
code/renderers/react/src/extractArgTypes.test.tscode/renderers/react/src/enrichCsf.test.tscode/renderers/react/src/componentManifest/fixtures.tscode/renderers/react/src/componentManifest/generator.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/vitest.setup.ts
**/*.@(test|spec).{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.@(test|spec).{ts,tsx,js,jsx}: Unit tests should import and execute the functions under test rather than only asserting on syntax patterns
Mock external dependencies in tests usingvi.mock()(e.g., filesystem, loggers)
Files:
code/renderers/react/src/extractArgTypes.test.tscode/renderers/react/src/enrichCsf.test.tscode/renderers/react/src/componentManifest/generator.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.ts
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions from modules when they need to be unit-tested
Files:
code/renderers/react/src/extractArgTypes.test.tscode/renderers/react/src/enrichCsf.test.tscode/renderers/react/src/componentManifest/fixtures.tscode/renderers/react/src/componentManifest/generator.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/vitest.setup.ts
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In application code, use Storybook loggers instead of
console.*(client code:storybook/internal/client-logger; server code:storybook/internal/node-logger)
Files:
code/renderers/react/src/extractArgTypes.test.tscode/renderers/react/src/enrichCsf.test.tscode/renderers/react/src/componentManifest/fixtures.tscode/renderers/react/src/componentManifest/generator.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/vitest.setup.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/renderers/react/src/extractArgTypes.test.tscode/renderers/react/src/enrichCsf.test.tscode/renderers/react/src/componentManifest/fixtures.tscode/renderers/react/src/componentManifest/generator.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/vitest.setup.ts
🧠 Learnings (28)
📓 Common learnings
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies in tests using `vi.mock()` (e.g., filesystem, loggers)
Applied to files:
code/renderers/react/src/extractArgTypes.test.tscode/renderers/react/src/enrichCsf.test.tscode/renderers/react/src/componentManifest/fixtures.tscode/renderers/react/src/componentManifest/generator.test.tscode/renderers/react/vitest.setup.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Unit tests should import and execute the functions under test rather than only asserting on syntax patterns
Applied to files:
code/renderers/react/src/extractArgTypes.test.tscode/renderers/react/src/enrichCsf.test.tscode/renderers/react/src/componentManifest/generator.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to type and access mocked functions
Applied to files:
code/renderers/react/src/extractArgTypes.test.tscode/renderers/react/src/enrichCsf.test.tscode/renderers/react/vitest.setup.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use type-safe mocking with vi.mocked()
Applied to files:
code/renderers/react/src/extractArgTypes.test.tscode/renderers/react/src/enrichCsf.test.tscode/renderers/react/vitest.setup.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Applied to files:
code/renderers/react/src/extractArgTypes.test.tscode/renderers/react/src/enrichCsf.test.tscode/renderers/react/vitest.setup.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid direct function mocking without vi.mocked()
Applied to files:
code/renderers/react/src/extractArgTypes.test.tscode/renderers/react/src/enrichCsf.test.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{ts,tsx,js,jsx,mjs} : Export functions from modules when they need to be unit-tested
Applied to files:
code/renderers/react/src/extractArgTypes.test.tscode/renderers/react/src/enrichCsf.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases
Applied to files:
code/renderers/react/src/extractArgTypes.test.tscode/renderers/react/src/enrichCsf.test.tscode/renderers/react/src/componentManifest/fixtures.tscode/renderers/react/src/componentManifest/generator.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/vitest.setup.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies
Applied to files:
code/renderers/react/src/extractArgTypes.test.tscode/renderers/react/src/enrichCsf.test.tscode/renderers/react/src/componentManifest/fixtures.tscode/renderers/react/src/componentManifest/generator.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use vi.mocked() to access and implement mock behaviors
Applied to files:
code/renderers/react/src/extractArgTypes.test.tscode/renderers/react/src/enrichCsf.test.tscode/renderers/react/src/componentManifest/fixtures.tscode/renderers/react/vitest.setup.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios
Applied to files:
code/renderers/react/src/extractArgTypes.test.tscode/renderers/react/src/enrichCsf.test.tscode/renderers/react/src/componentManifest/generator.test.ts
📚 Learning: 2025-09-17T08:11:04.287Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursorrules:0-0
Timestamp: 2025-09-17T08:11:04.287Z
Learning: Use Vitest as the test runner for this repository
Applied to files:
code/renderers/react/src/extractArgTypes.test.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors
Applied to files:
code/renderers/react/src/extractArgTypes.test.tscode/renderers/react/src/enrichCsf.test.tscode/renderers/react/src/componentManifest/fixtures.tscode/renderers/react/src/componentManifest/generator.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/vitest.setup.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject uses
Applied to files:
code/renderers/react/src/extractArgTypes.test.tscode/renderers/react/src/componentManifest/fixtures.tscode/renderers/react/src/componentManifest/generator.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Implement mock behaviors in beforeEach blocks
Applied to files:
code/renderers/react/src/extractArgTypes.test.tscode/renderers/react/src/enrichCsf.test.tscode/renderers/react/src/componentManifest/fixtures.tscode/renderers/react/vitest.setup.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together
Applied to files:
code/renderers/react/src/extractArgTypes.test.tscode/renderers/react/src/componentManifest/fixtures.tscode/renderers/react/src/componentManifest/generator.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/vitest.setup.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mock implementations outside of beforeEach blocks
Applied to files:
code/renderers/react/src/extractArgTypes.test.tscode/renderers/react/src/enrichCsf.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/vitest.setup.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Keep mock implementations simple and focused
Applied to files:
code/renderers/react/src/extractArgTypes.test.tscode/renderers/react/src/enrichCsf.test.tscode/renderers/react/src/componentManifest/fixtures.tscode/renderers/react/src/componentManifest/generator.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/vitest.setup.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to scripts/**/*.{ts,js,mjs} : In Node.js scripts, use `storybook/internal/node-logger` instead of `console.*`
Applied to files:
code/renderers/react/src/enrichCsf.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock implementations should be placed in beforeEach blocks
Applied to files:
code/renderers/react/src/enrichCsf.test.tscode/renderers/react/src/componentManifest/generator.test.tscode/renderers/react/vitest.setup.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking without the spy: true option
Applied to files:
code/renderers/react/src/enrichCsf.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required dependencies that the test subject uses
Applied to files:
code/renderers/react/src/componentManifest/fixtures.tscode/renderers/react/src/componentManifest/generator.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/vitest.setup.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock at the highest level of abstraction needed
Applied to files:
code/renderers/react/src/componentManifest/fixtures.tscode/renderers/react/src/componentManifest/generator.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Each mock implementation should return a Promise for async functions
Applied to files:
code/renderers/react/src/componentManifest/generator.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock implementations should match the expected return type of the original function
Applied to files:
code/renderers/react/src/componentManifest/generator.test.ts
📚 Learning: 2025-10-01T15:24:01.060Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.
Applied to files:
code/renderers/react/src/componentManifest/generator.test.tscode/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/.storybook/** : Place internal UI Storybook configuration in `code/.storybook/` and maintain it there
Applied to files:
code/renderers/react/src/componentManifest/generator.test.ts
🧬 Code graph analysis (5)
code/renderers/react/src/extractArgTypes.test.ts (1)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/pre-e2e.js (1)
fs(3-3)
code/renderers/react/src/componentManifest/fixtures.ts (1)
scripts/utils/tools.ts (1)
dedent(118-118)
code/renderers/react/src/componentManifest/generator.test.ts (2)
code/renderers/react/src/componentManifest/fixtures.ts (1)
fsMocks(3-112)code/renderers/react/src/componentManifest/generator.ts (1)
componentManifestGenerator(22-186)
code/renderers/react/src/componentManifest/getComponentImports.test.ts (3)
code/renderers/react/src/componentManifest/fixtures.ts (1)
fsMocks(3-112)code/renderers/react/src/componentManifest/getComponentImports.ts (2)
getImports(186-436)getComponentImports(438-466)code/core/src/csf-tools/CsfFile.ts (1)
loadCsf(1060-1064)
code/renderers/react/vitest.setup.ts (2)
code/renderers/react/src/componentManifest/utils.ts (3)
invalidateCache(118-122)cachedFindUp(126-126)cachedResolveImport(128-128)code/core/src/common/js-package-manager/JsPackageManagerFactory.ts (1)
JsPackageManagerFactory(29-195)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: normal
- GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (4)
code/renderers/react/src/componentManifest/fixtures.ts (1)
1-193: LGTM!The test fixtures are well-structured and provide comprehensive mock data for filesystem and index scenarios. The use of
dedentfor readable multi-line strings and the detailed component metadata inindexJsonwill support robust testing.code/renderers/react/vitest.setup.ts (1)
1-48: LGTM! Excellent test setup following best practices.This test setup file exemplifies proper mock configuration:
- All
vi.mock()calls includespy: trueoption- Mock implementations are placed in
beforeEach- Uses
vi.mocked()for type-safe mocking- Provides comprehensive reset and initialization logic
- Mock behaviors are simple and focused
As per coding guidelines.
code/renderers/react/src/componentManifest/generator.test.ts (1)
1-467: LGTM! Tests properly leverage fixtures and updated API.The test updates correctly:
- Use centralized fixtures from
fixtures.ts- Properly initialize memfs with
vol.fromJSON- Updated generator invocation to include
configDirparameter- Comprehensive inline snapshots validate the new behavior
- Follows test setup patterns established in
vitest.setup.tscode/renderers/react/src/componentManifest/getComponentImports.test.ts (1)
1-1055: LGTM! Excellent comprehensive test coverage.This test file demonstrates best practices:
- Proper beforeEach setup using memfs fixtures
- Helper function (
getImports) reduces duplication while maintaining clarity- Comprehensive coverage of edge cases: namespace imports, aliases, type imports, relative/absolute paths, merging, and override behaviors
- Tests execute actual functions rather than just asserting syntax patterns
- Detailed inline snapshots validate complex transformation logic
- Well-organized test cases with clear descriptions
As per coding guidelines.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
code/renderers/react/src/componentManifest/reactDocgen.ts (2)
164-164: Minor naming inconsistency in cache name.The cache name is
'gatherDocgensWithTrace'but the function is namedgatherDocgensForPath. Consider aligning these for consistency.Apply this diff:
- { name: 'gatherDocgensWithTrace', key: (filePath) => filePath } + { name: 'gatherDocgensForPath', key: (filePath) => filePath }
91-125: Consider exporting internal functions for unit testing.The
getExportPathsandgatherDocgensForPathfunctions contain complex logic (AST parsing, recursion, depth limits) that would benefit from direct unit testing. Consider exporting them to enable thorough test coverage of edge cases.Apply this diff:
-const getExportPaths = cached( +export const getExportPaths = cached( (code: string, filePath: string) => {-const gatherDocgensForPath = cached( +export const gatherDocgensForPath = cached(Based on learnings
Also applies to: 127-165
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
code/renderers/react/src/componentManifest/getComponentImports.test.ts(1 hunks)code/renderers/react/src/componentManifest/reactDocgen.ts(3 hunks)
🧰 Additional context used
📓 Path-based instructions (7)
code/**/*.{test,spec}.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
code/**/*.{test,spec}.{ts,tsx}: Place all test files under the code/ directory
Name test files as *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx
Files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
**/*.test.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/spy-mocking.mdc)
**/*.test.{ts,tsx,js,jsx}: Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Place all mocks at the top of the test file before any test cases
Use vi.mocked() to type and access mocked functions
Implement mock behaviors in beforeEach blocks
Mock all required dependencies that the test subject uses
Mock implementations should be placed in beforeEach blocks
Each mock implementation should return a Promise for async functions
Mock implementations should match the expected return type of the original function
Use vi.mocked() to access and implement mock behaviors
Mock all required properties and methods that the test subject uses
Avoid direct function mocking without vi.mocked()
Avoid mock implementations outside of beforeEach blocks
Avoid mocking without the spy: true option
Avoid inline mock implementations within test cases
Avoid mocking only a subset of required dependencies
Mock at the highest level of abstraction needed
Keep mock implementations simple and focused
Use type-safe mocking with vi.mocked()
Document complex mock behaviors
Group related mocks together
Files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (useyarn lint:js:cmd <file>)
Files:
code/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/src/componentManifest/reactDocgen.ts
**/*.@(test|spec).{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.@(test|spec).{ts,tsx,js,jsx}: Unit tests should import and execute the functions under test rather than only asserting on syntax patterns
Mock external dependencies in tests usingvi.mock()(e.g., filesystem, loggers)
Files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions from modules when they need to be unit-tested
Files:
code/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/src/componentManifest/reactDocgen.ts
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In application code, use Storybook loggers instead of
console.*(client code:storybook/internal/client-logger; server code:storybook/internal/node-logger)
Files:
code/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/src/componentManifest/reactDocgen.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/src/componentManifest/reactDocgen.ts
🧠 Learnings (12)
📓 Common learnings
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Unit tests should import and execute the functions under test rather than only asserting on syntax patterns
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required dependencies that the test subject uses
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{ts,tsx,js,jsx,mjs} : Export functions from modules when they need to be unit-tested
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/src/componentManifest/reactDocgen.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject uses
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Keep mock implementations simple and focused
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mock implementations outside of beforeEach blocks
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-10-01T15:24:01.060Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
🧬 Code graph analysis (2)
code/renderers/react/src/componentManifest/getComponentImports.test.ts (3)
code/renderers/react/src/componentManifest/fixtures.ts (1)
fsMocks(3-112)code/renderers/react/src/componentManifest/getComponentImports.ts (2)
getImports(186-436)getComponentImports(438-466)code/core/src/csf-tools/CsfFile.ts (1)
loadCsf(1060-1064)
code/renderers/react/src/componentManifest/reactDocgen.ts (5)
code/renderers/react/src/componentManifest/getComponentImports.ts (1)
ComponentRef(11-19)code/core/src/common/utils/interpret-files.ts (1)
supportedExtensions(6-17)code/renderers/react/src/componentManifest/utils.ts (3)
cached(45-116)cachedResolveImport(128-128)cachedReadFileSync(124-124)code/core/src/common/utils/paths.ts (1)
getProjectRoot(11-57)code/renderers/react/src/componentManifest/jsdocTags.ts (1)
extractJSDocInfo(5-21)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: normal
- GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (3)
code/renderers/react/src/componentManifest/getComponentImports.test.ts (3)
16-21: LGTM!The helper function appropriately encapsulates the CSF parsing and component import extraction logic, reducing test boilerplate while maintaining clarity.
23-1055: Comprehensive test coverage with appropriate use of snapshots.The test suite thoroughly covers various import scenarios including namespace imports, default imports, named imports, aliases, merging behavior, and packageName transformations. The use of inline snapshots is appropriate for validating the complex output structures containing both component metadata and import statements.
11-14: The review comment is incorrect. This file follows the coding guidelines correctly.The filesystem mocking guideline requirement to use
vi.mock()withspy: trueis already satisfied at the project level incode/renderers/react/vitest.setup.ts. That file properly mocksnode:fsandnode:fs/promisesglobally, with memfs configured as the underlying implementation. The test file inherits this setup and correctly usesvol.fromJSON()to populate the virtual filesystem for test data—this is the intended usage pattern and requires no changes.Likely an incorrect or invalid review comment.
code/renderers/react/src/componentManifest/getComponentImports.test.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
code/core/src/node-logger/index.ts (1)
63-74: Good type broadening, with minor redundancies.The change to accept
unknownimproves flexibility and the implementation correctly handles all input types.Two minor redundancies that could be cleaned up:
- Line 67-68:
message.toString()is unnecessary since the type guard confirmsmessageis already a string. Simplify tomsg = message;- Line 66:
message.stack.toString()is redundant asError.stackis already typed asstring. Remove.toString()call.Apply this diff to eliminate redundancies:
if (message instanceof Error && message.stack) { - msg = message.stack.toString().replace(message.toString(), colors.red(message.toString())); + msg = message.stack.replace(message.toString(), colors.red(message.toString())); } else if (typeof message === 'string') { - msg = message.toString(); + msg = message; } else {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
code/core/src/node-logger/index.ts(1 hunks)code/renderers/react/src/componentManifest/getComponentImports.test.ts(1 hunks)code/renderers/react/src/componentManifest/getComponentImports.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (7)
code/**/*.{test,spec}.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
code/**/*.{test,spec}.{ts,tsx}: Place all test files under the code/ directory
Name test files as *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx
Files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
**/*.test.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/spy-mocking.mdc)
**/*.test.{ts,tsx,js,jsx}: Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Place all mocks at the top of the test file before any test cases
Use vi.mocked() to type and access mocked functions
Implement mock behaviors in beforeEach blocks
Mock all required dependencies that the test subject uses
Mock implementations should be placed in beforeEach blocks
Each mock implementation should return a Promise for async functions
Mock implementations should match the expected return type of the original function
Use vi.mocked() to access and implement mock behaviors
Mock all required properties and methods that the test subject uses
Avoid direct function mocking without vi.mocked()
Avoid mock implementations outside of beforeEach blocks
Avoid mocking without the spy: true option
Avoid inline mock implementations within test cases
Avoid mocking only a subset of required dependencies
Mock at the highest level of abstraction needed
Keep mock implementations simple and focused
Use type-safe mocking with vi.mocked()
Document complex mock behaviors
Group related mocks together
Files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (useyarn lint:js:cmd <file>)
Files:
code/renderers/react/src/componentManifest/getComponentImports.test.tscode/core/src/node-logger/index.tscode/renderers/react/src/componentManifest/getComponentImports.ts
**/*.@(test|spec).{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.@(test|spec).{ts,tsx,js,jsx}: Unit tests should import and execute the functions under test rather than only asserting on syntax patterns
Mock external dependencies in tests usingvi.mock()(e.g., filesystem, loggers)
Files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions from modules when they need to be unit-tested
Files:
code/renderers/react/src/componentManifest/getComponentImports.test.tscode/core/src/node-logger/index.tscode/renderers/react/src/componentManifest/getComponentImports.ts
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In application code, use Storybook loggers instead of
console.*(client code:storybook/internal/client-logger; server code:storybook/internal/node-logger)
Files:
code/renderers/react/src/componentManifest/getComponentImports.test.tscode/core/src/node-logger/index.tscode/renderers/react/src/componentManifest/getComponentImports.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/renderers/react/src/componentManifest/getComponentImports.test.tscode/core/src/node-logger/index.tscode/renderers/react/src/componentManifest/getComponentImports.ts
🧠 Learnings (17)
📓 Common learnings
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.@(test|spec).{ts,tsx,js,jsx} : Unit tests should import and execute the functions under test rather than only asserting on syntax patterns
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required dependencies that the test subject uses
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject uses
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{ts,tsx,js,jsx,mjs} : Export functions from modules when they need to be unit-tested
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-09-17T08:11:47.197Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.197Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Keep mock implementations simple and focused
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mock implementations outside of beforeEach blocks
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-10-01T15:24:01.060Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.test.tscode/renderers/react/src/componentManifest/getComponentImports.ts
📚 Learning: 2025-09-17T08:11:47.196Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-09-17T08:11:47.196Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock implementations should match the expected return type of the original function
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.test.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to {code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs} : Do not use `console.log`, `console.warn`, or `console.error` directly unless in isolated files where importing loggers would significantly increase bundle size
Applied to files:
code/core/src/node-logger/index.tscode/renderers/react/src/componentManifest/getComponentImports.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/**/*.{ts,tsx,js,jsx,mjs} : In application code, use Storybook loggers instead of `console.*` (client code: `storybook/internal/client-logger`; server code: `storybook/internal/node-logger`)
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to scripts/**/*.{ts,js,mjs} : In Node.js scripts, use `storybook/internal/node-logger` instead of `console.*`
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.ts
🧬 Code graph analysis (2)
code/renderers/react/src/componentManifest/getComponentImports.test.ts (3)
code/renderers/react/src/componentManifest/fixtures.ts (1)
fsMocks(3-112)code/renderers/react/src/componentManifest/getComponentImports.ts (2)
getImports(187-437)getComponentImports(439-467)code/core/src/csf-tools/CsfFile.ts (1)
loadCsf(1060-1064)
code/renderers/react/src/componentManifest/getComponentImports.ts (4)
code/core/src/csf-tools/CsfFile.ts (1)
CsfFile(281-1042)code/renderers/react/src/componentManifest/utils.ts (1)
cachedResolveImport(128-128)code/renderers/react/src/componentManifest/reactDocgen.ts (3)
matchPath(57-69)getReactDocgen(167-211)getImportTag(240-244)code/core/src/node-logger/index.ts (1)
logger(49-75)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: normal
- GitHub Check: Core Unit Tests, windows-latest
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
code/core/src/core-server/dev-server.ts(3 hunks)code/renderers/react/src/componentManifest/reactDocgen.ts(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- code/core/src/core-server/dev-server.ts
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (useyarn lint:js:cmd <file>)
Files:
code/renderers/react/src/componentManifest/reactDocgen.ts
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions from modules when they need to be unit-tested
Files:
code/renderers/react/src/componentManifest/reactDocgen.ts
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In application code, use Storybook loggers instead of
console.*(client code:storybook/internal/client-logger; server code:storybook/internal/node-logger)
Files:
code/renderers/react/src/componentManifest/reactDocgen.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/renderers/react/src/componentManifest/reactDocgen.ts
🧠 Learnings (3)
📓 Common learnings
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios
📚 Learning: 2025-10-01T15:24:01.060Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.
Applied to files:
code/renderers/react/src/componentManifest/reactDocgen.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{ts,tsx,js,jsx,mjs} : Export functions from modules when they need to be unit-tested
Applied to files:
code/renderers/react/src/componentManifest/reactDocgen.ts
🧬 Code graph analysis (1)
code/renderers/react/src/componentManifest/reactDocgen.ts (5)
code/renderers/react/src/componentManifest/getComponentImports.ts (1)
ComponentRef(12-20)code/core/src/common/utils/interpret-files.ts (1)
supportedExtensions(6-17)code/renderers/react/src/componentManifest/utils.ts (3)
cached(45-116)cachedResolveImport(128-128)cachedReadFileSync(124-124)code/core/src/common/utils/paths.ts (1)
getProjectRoot(11-57)code/renderers/react/src/componentManifest/jsdocTags.ts (1)
extractJSDocInfo(5-21)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: normal
- GitHub Check: Core Unit Tests, windows-latest
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
code/renderers/react/src/componentManifest/generator.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (useyarn lint:js:cmd <file>)
Files:
code/renderers/react/src/componentManifest/generator.ts
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions from modules when they need to be unit-tested
Files:
code/renderers/react/src/componentManifest/generator.ts
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In application code, use Storybook loggers instead of
console.*(client code:storybook/internal/client-logger; server code:storybook/internal/node-logger)
Files:
code/renderers/react/src/componentManifest/generator.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/renderers/react/src/componentManifest/generator.ts
🧬 Code graph analysis (1)
code/renderers/react/src/componentManifest/generator.ts (7)
code/core/src/types/modules/core-common.ts (2)
ComponentManifest(348-364)PresetPropertyFn(656-661)code/renderers/react/src/componentManifest/reactDocgen.ts (1)
DocObj(24-28)code/renderers/react/src/componentManifest/utils.ts (4)
invalidateCache(118-122)cachedReadFileSync(124-124)cachedFindUp(126-126)invariant(24-32)code/renderers/react/src/componentManifest/getComponentImports.ts (2)
getComponents(37-195)getImports(197-447)code/core/src/csf-tools/enrichCsf.ts (1)
extractDescription(158-178)code/renderers/react/src/componentManifest/jsdocTags.ts (1)
extractJSDocInfo(5-21)code/renderers/react/src/componentManifest/generateCodeSnippet.ts (1)
getCodeSnippet(6-227)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: normal
- GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (7)
code/renderers/react/src/componentManifest/generator.ts (7)
1-20: LGTM!The imports are well-organized and the interface extension is clean. Logger usage correctly follows the coding guidelines by using
storybook/internal/node-loggerinstead ofconsole.*.
22-32: LGTM!The function signature correctly uses
PresetPropertyFntype, cache invalidation ensures fresh data, and performance timing provides good observability.
34-42: LGTM!The grouping logic correctly deduplicates stories to one representative entry per component.
65-76: Component matching logic is reasonable.The matching strategy prioritizes exact name matching when
componentNameis specified, falling back to substring matching against the title when not. While the substring approach (e.g., line 73) could theoretically produce false positives (e.g., "Button" matching "ButtonGroup"), this is an acceptable heuristic for fuzzy matching when explicit component metadata is unavailable.
78-103: LGTM!The story processing loop has robust error handling and correctly filters out stories tagged with
!manifest. The try-catch block ensures that individual story errors don't crash the entire generation process.
105-156: LGTM!The imports generation correctly uses the
||operator (addressing the previous review feedback), and the error handling provides clear, actionable messages with code frames when available. The logic correctly distinguishes between missing components and missing docgen data.
158-169: LGTM!Performance logging provides good observability, and the final return structure correctly filters out undefined entries and conforms to the expected manifest format.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
code/renderers/react/package.json(1 hunks)code/renderers/react/src/componentManifest/getComponentImports.ts(1 hunks)code/renderers/react/src/componentManifest/reactDocgen.ts(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- code/renderers/react/package.json
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (useyarn lint:js:cmd <file>)
Files:
code/renderers/react/src/componentManifest/reactDocgen.tscode/renderers/react/src/componentManifest/getComponentImports.ts
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions from modules when they need to be unit-tested
Files:
code/renderers/react/src/componentManifest/reactDocgen.tscode/renderers/react/src/componentManifest/getComponentImports.ts
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In application code, use Storybook loggers instead of
console.*(client code:storybook/internal/client-logger; server code:storybook/internal/node-logger)
Files:
code/renderers/react/src/componentManifest/reactDocgen.tscode/renderers/react/src/componentManifest/getComponentImports.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/renderers/react/src/componentManifest/reactDocgen.tscode/renderers/react/src/componentManifest/getComponentImports.ts
🧠 Learnings (5)
📚 Learning: 2025-10-01T15:24:01.060Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.
Applied to files:
code/renderers/react/src/componentManifest/reactDocgen.tscode/renderers/react/src/componentManifest/getComponentImports.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to **/*.{ts,tsx,js,jsx,mjs} : Export functions from modules when they need to be unit-tested
Applied to files:
code/renderers/react/src/componentManifest/reactDocgen.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/**/*.{ts,tsx,js,jsx,mjs} : In application code, use Storybook loggers instead of `console.*` (client code: `storybook/internal/client-logger`; server code: `storybook/internal/node-logger`)
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to scripts/**/*.{ts,js,mjs} : In Node.js scripts, use `storybook/internal/node-logger` instead of `console.*`
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to {code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs} : Do not use `console.log`, `console.warn`, or `console.error` directly unless in isolated files where importing loggers would significantly increase bundle size
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.ts
🧬 Code graph analysis (2)
code/renderers/react/src/componentManifest/reactDocgen.ts (5)
code/renderers/react/src/componentManifest/getComponentImports.ts (1)
ComponentRef(11-20)code/core/src/common/utils/interpret-files.ts (1)
supportedExtensions(6-17)code/renderers/react/src/componentManifest/utils.ts (3)
cached(45-116)cachedResolveImport(128-128)cachedReadFileSync(124-124)code/core/src/common/utils/paths.ts (1)
getProjectRoot(11-57)code/renderers/react/src/componentManifest/jsdocTags.ts (1)
extractJSDocInfo(5-21)
code/renderers/react/src/componentManifest/getComponentImports.ts (3)
code/renderers/react/src/componentManifest/reactDocgen.ts (3)
getReactDocgen(167-211)matchPath(57-70)getImportTag(240-244)code/renderers/react/src/componentManifest/utils.ts (1)
cachedResolveImport(128-128)code/core/src/node-logger/index.ts (1)
logger(49-75)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: normal
- GitHub Check: Core Unit Tests, windows-latest
code/renderers/react/src/componentManifest/getComponentImports.test.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (2)
code/renderers/react/src/componentManifest/getComponentImports.ts (1)
382-402: Prevent namespace rewrite from crashing on nested members.When
c.importNamecontains nested accessors (e.g.,"Arrow.Right"fromIcons.Arrow.Right), line 390 callst.identifier()with a string containing a dot, which throws because dots are invalid in JavaScript identifiers. This crashes manifest generation when such stories are processed withpackageNamerewriting.Apply this diff to keep the namespace import when the member is not a valid identifier:
if (c.namespace) { // Real namespace import usage (only present for `* as` imports) if (rewritten) { // Convert to named members actually used; require a concrete member name if (!c.importName) { continue; } + // Keep namespace import if member name contains invalid identifier chars (e.g., "Arrow.Right") + if (!/^[A-Za-z_$][\w$]*$/.test(c.importName)) { + const ns = t.identifier(c.namespace); + addUniqueBy(b.namespaces, ns, (n) => n.name === ns.name); + continue; + } const member = c.importName; const id = t.identifier(member); addUniqueBy( b.named, t.importSpecifier(id, id), (n) => n.local.name === member && importedName(n.imported) === member ); } else { // Keep namespace import by base identifier once const ns = t.identifier(c.namespace); addUniqueBy(b.namespaces, ns, (n) => n.name === ns.name); } continue; }code/core/src/core-server/manifest.ts (1)
796-805: Escape manifest imports before rendering.
c.importis inserted directly into HTML at line 802, creating an XSS vulnerability. A malicious@importtag (e.g.,<script>alert(1)</script>) from docgen data would execute in the browser.Apply this diff to escape the imports:
${ c.import ? `<div class="note ok"> <div class="row"> <span class="ex-name">Imports</span> </div> - <pre><code>${c.import}</code></pre> + <pre><code>${esc(c.import)}</code></pre> </div>` : '' }
🧹 Nitpick comments (1)
code/renderers/react/src/componentManifest/getComponentImports.ts (1)
145-145: Remove duplicate comment.The comment appears twice on the same line, which looks like a copy-paste error.
Apply this diff:
- } // missing binding -> keep (will become null import) // missing binding -> keep (will become null import) + } // missing binding -> keep (will become null import)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
code/.storybook/main.ts(0 hunks)code/core/src/core-server/manifest.ts(26 hunks)code/renderers/react/src/componentManifest/getComponentImports.ts(1 hunks)
💤 Files with no reviewable changes (1)
- code/.storybook/main.ts
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (useyarn lint:js:cmd <file>)
Files:
code/core/src/core-server/manifest.tscode/renderers/react/src/componentManifest/getComponentImports.ts
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions from modules when they need to be unit-tested
Files:
code/core/src/core-server/manifest.tscode/renderers/react/src/componentManifest/getComponentImports.ts
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In application code, use Storybook loggers instead of
console.*(client code:storybook/internal/client-logger; server code:storybook/internal/node-logger)
Files:
code/core/src/core-server/manifest.tscode/renderers/react/src/componentManifest/getComponentImports.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/core/src/core-server/manifest.tscode/renderers/react/src/componentManifest/getComponentImports.ts
🧠 Learnings (4)
📚 Learning: 2025-10-01T15:24:01.060Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.
Applied to files:
code/core/src/core-server/manifest.tscode/renderers/react/src/componentManifest/getComponentImports.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to {code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs} : Do not use `console.log`, `console.warn`, or `console.error` directly unless in isolated files where importing loggers would significantly increase bundle size
Applied to files:
code/core/src/core-server/manifest.tscode/renderers/react/src/componentManifest/getComponentImports.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/**/*.{ts,tsx,js,jsx,mjs} : In application code, use Storybook loggers instead of `console.*` (client code: `storybook/internal/client-logger`; server code: `storybook/internal/node-logger`)
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to scripts/**/*.{ts,js,mjs} : In Node.js scripts, use `storybook/internal/node-logger` instead of `console.*`
Applied to files:
code/renderers/react/src/componentManifest/getComponentImports.ts
🧬 Code graph analysis (2)
code/core/src/core-server/manifest.ts (1)
code/frameworks/react-vite/src/plugins/react-docgen.ts (1)
reactDocgen(40-98)
code/renderers/react/src/componentManifest/getComponentImports.ts (4)
code/renderers/react/src/componentManifest/reactDocgen.ts (3)
getReactDocgen(167-211)matchPath(57-70)getImportTag(240-244)code/core/src/csf-tools/CsfFile.ts (1)
CsfFile(281-1042)code/renderers/react/src/componentManifest/utils.ts (1)
cachedResolveImport(93-93)code/core/src/node-logger/index.ts (1)
logger(49-75)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: normal
- GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (6)
code/renderers/react/src/componentManifest/getComponentImports.ts (2)
1-35: LGTM: Imports and type definitions are well-structured.The imports follow Storybook conventions, and the logger is correctly imported from
storybook/internal/node-logger. TheComponentReftype and helper functions provide a solid foundation for the module.
513-528: LGTM: Clean convenience wrapper.The
getComponentDatafunction provides a simple, well-documented convenience API that combines the two main operations.code/core/src/core-server/manifest.ts (4)
18-18: LGTM: Consistent terminology refactor from warnings to infos.The systematic rename from "warnings" to "infos" throughout the UI, CSS, and logic is well-executed and semantically appropriate. Component metadata like missing descriptions are informational rather than warnings.
Also applies to: 29-31, 81-84, 160-164, 192-192, 201-201, 297-300, 313-313, 334-337, 361-365, 496-498, 523-525, 574-574, 663-665, 717-717, 726-726, 738-738, 754-756
550-567: LGTM: Code block wrapping improvements.The new CSS rules provide sensible wrapping behavior for code blocks with a ~120 character soft limit, while preserving monospace rendering and providing fallback overflow handling.
693-696: LGTM: Multi-line JSDoc rendering for prop descriptions.The enhanced formatting for prop descriptions follows JSDoc conventions and improves readability when descriptions span multiple lines.
612-614: LGTM: Enhanced documentation and metadata display.The additions improve documentation quality and visibility:
- Warning for missing component descriptions encourages better documentation
- Component file/export display provides useful metadata
- Story summaries and descriptions enhance context for both error and OK stories
- Proper escaping is applied throughout these additions
Also applies to: 768-770, 787-788, 815-816
Closes #
What I did
react-docgen.Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This pull request has been released as version
0.0.0-pr-32939-sha-8829d716. Try it out in a new sandbox by runningnpx [email protected] sandboxor in an existing project withnpx [email protected] upgrade.More information
0.0.0-pr-32939-sha-8829d716kasper/manifest-auto-component-import-barrel8829d7161762256860)To request a new release of this pull request, mention the
@storybookjs/coreteam.core team members can create a new canary release here or locally with
gh workflow run --repo storybookjs/storybook publish.yml --field pr=32939Summary by CodeRabbit
New Features
Improvements
Chores