Skip to content

Enhance WithCustomArgs type helper and update Page stories to support…#33555

Open
guignol1981 wants to merge 3 commits into
storybookjs:nextfrom
guignol1981:with-custom-args-type-helper-vue-3
Open

Enhance WithCustomArgs type helper and update Page stories to support…#33555
guignol1981 wants to merge 3 commits into
storybookjs:nextfrom
guignol1981:with-custom-args-type-helper-vue-3

Conversation

@guignol1981
Copy link
Copy Markdown

@guignol1981 guignol1981 commented Jan 15, 2026 •
edited
Loading

What I did

Summary

This PR adds a new type helper WithCustomArgs<TComponent, TCustomArgs> for Vue 3 to better support custom args that don't map directly to component props. This is a commonly used pattern documented in the official Storybook docs but previously lacked proper TypeScript support.

Problem

When writing Vue 3 stories with custom args (args that control rendering logic but aren't component props), TypeScript would complain because the types didn't properly support this pattern:

// Page.vue has no 'footer' prop
import type { ComponentPropsAndSlots, Meta, StoryObj } from '@storybook/vue3-vite';
 
import Page from './Page.vue';
 
type PagePropsAndCustomArgs = ComponentPropsAndSlots<typeof Page> & { footer?: string };
 
const meta = {
  component: Page,
  render: (args) => ({
    components: { Page },
    setup() {
      return { args };
    },
    template: `
      <page v-bind="args">
        <template v-slot:footer>
          <footer v-if="args.footer" v-html="args.footer" />
        </template>
      </page>
    `,
  }),
} satisfies Meta<PagePropsAndCustomArgs>;
export default meta;
 
type Story = StoryObj<typeof meta>;
 
export const Primary = {
  args: {
    footer: 'Built with Storybook', ❌ TypeScript error here
  },
} satisfies Story;

Solution

Added a new exported type helper WithCustomArgs that explicitly supports this use case:

export type WithCustomArgs<
  TComponent,
  TCustomArgs extends Record<string, any> = Record<string, never>
> = ComponentPropsAndSlots<TComponent> & TCustomArgs;

Usage

type PageArgs = WithCustomArgs<typeof MyPage, { footer?: string }>;

const meta = {
  title: 'Example/Page',
  component: MyPage,
  render: (args) => ({
    components: { MyPage },
    setup() {
      return { args };
    },
    template: `
      <my-page v-bind="args">
        <template v-slot:footer>
          <footer v-if="args.footer" v-html="args.footer" />
        </template>
      </my-page>
    `,
  }),
} satisfies Meta<PageArgs>;

export default meta;
type Story = StoryObj<typeof meta>;

export const WithCustomFooter: Story = {
  args: {
    footer: 'Built with Storybook',
  },
};

Changes

Files Modified

  1. code/renderers/vue3/src/public-types.ts

    • Added WithCustomArgs type export with full JSDoc documentation
    • Includes comprehensive usage example in the JSDoc

  2. code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts

    • Updated template to demonstrate WithCustomArgs usage
    • Added WithCustomFooter story example showing custom args

  3. code/renderers/vue3/src/public-types.test.ts

    • Added comprehensive tests for WithCustomArgs:
      • Test with custom args (footer, theme)
      • Test with empty custom args
      • Test verifying proper type merging

Benefits

✅ Type Safety: Custom args are properly typed with full IntelliSense support
✅ Developer Experience: Clear, explicit API for a common pattern
✅ Documentation: JSDoc with complete example shows best practices
✅ Non-Breaking: Additive change, fully backward compatible
✅ Aligned with Docs: Supports officially documented pattern at https://storybook.js.org/docs/writing-stories/args#args-can-modify-any-aspect-of-your-component

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

  • stories
  • unit tests
  • integration tests
  • end-to-end tests

Manual testing

Caution

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

  • Add or update documentation reflecting your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Checklist for Maintainers

  • When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

  • Make sure this PR contains one of the labels below:

    Available labels
    • bug: Internal changes that fixes incorrect behavior.
    • maintenance: User-facing maintenance tasks.
    • dependencies: Upgrading (sometimes downgrading) dependencies.
    • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
    • cleanup: Minor cleanup style change. Will not show up in release changelog.
    • documentation: Documentation only changes. Will not show up in release changelog.
    • feature request: Introducing a new feature.
    • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
    • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

  • New Features

    • Support for custom story args that extend beyond component props.
    • Added a story demonstrating a custom footer argument.

  • Tests

    • New test suite validating custom-args behavior, empty custom args, and merging with component props.
    • Note: the test suite appears duplicated in the diff.

✏️ Tip: You can customize this high-level summary in your review settings.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jan 15, 2026 •
edited
Loading

📝 Walkthrough

Walkthrough

Adds a generic exported type WithCustomArgs to the Vue 3 renderer to allow stories to combine component props/slots with arbitrary custom args; updates public types, test coverage, and a template story demonstrating a footer custom arg with adjusted Meta and render typings.

Changes

Cohort / File(s) Summary
Type Definition
code/renderers/vue3/src/public-types.ts		 Adds exported WithCustomArgs<TComponent, TCustomArgs extends Record<string, any> = Record<string, never>> defined as ComponentPropsAndSlots<TComponent> & TCustomArgs with JSDoc examples for Vue 3 CSF usage.
Tests
code/renderers/vue3/src/public-types.test.ts		 Adds a describe('WithCustomArgs') suite with tests for custom args typing, empty custom args, and merging component props with custom args. Note: the new test suite appears duplicated in the diff.
Story Example
code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts		 Imports WithCustomArgs, defines type PageArgs = WithCustomArgs<typeof MyPage, { footer?: string }>, updates Meta to Meta<PageArgs>, changes render to accept args and bind v-bind="args", and adds WithCustomFooter story with footer arg.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

✨ Finishing touches
  • 📝 Generate docstrings
🧹 Recent nitpick comments
code/renderers/vue3/src/public-types.test.ts (2)

9-11: Consider consolidating the vue imports.

The imports from vue are split across two lines. Combining them improves readability.

♻️ Suggested refactor 
-import { h } from 'vue';
-import { defineComponent } from 'vue';
+import { defineComponent, h } from 'vue';

214-218: Reduce extra blank lines for consistency.

Four blank lines before the new describe block is more than the rest of the file uses. Reducing to one or two blank lines would match the existing style.

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f7802b8 and fa80d32.

📒 Files selected for processing (1)
  • code/renderers/vue3/src/public-types.test.ts
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{test,spec}.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{test,spec}.{ts,tsx}: Test files should follow the naming pattern *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx
Follow the spy mocking rules defined in .cursor/rules/spy-mocking.mdc for consistent mocking patterns with Vitest

Files:

  • code/renderers/vue3/src/public-types.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 the mocked functions in Vitest tests
Implement mock behaviors in beforeEach blocks in Vitest tests
Mock all required dependencies that the test subject uses
Each mock implementation should return a Promise for async functions in Vitest
Mock implementations should match the expected return type of the original function
Mock all required properties and methods that the test subject uses in Vitest tests
Avoid direct function mocking without vi.mocked() in Vitest tests
Avoid mock implementations outside of beforeEach blocks in Vitest tests
Avoid mocking without the spy: true option in Vitest tests
Avoid inline mock implementations within test cases in Vitest tests
Avoid mocking only a subset of required dependencies in Vitest tests
Mock at the highest level of abstraction needed in Vitest tests
Keep mock implementations simple and focused in Vitest tests
Use type-safe mocking with vi.mocked() in Vitest tests
Document complex mock behaviors in Vitest tests
Group related mocks together in Vitest tests

Files:

  • code/renderers/vue3/src/public-types.test.ts
**/*.{js,jsx,ts,tsx,json,md,html,css,scss}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Format code using Prettier with yarn prettier --write <file>

Files:

  • code/renderers/vue3/src/public-types.test.ts
**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Run ESLint checks using yarn lint:js:cmd <file> or the full command cross-env NODE_ENV=production eslint --cache --cache-location=../.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives to fix linting errors before committing

Files:

  • code/renderers/vue3/src/public-types.test.ts
**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Enable TypeScript strict mode across all packages

Files:

  • code/renderers/vue3/src/public-types.test.ts
**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx,js,jsx}: Export functions from modules if they need to be tested
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

  • code/renderers/vue3/src/public-types.test.ts
**/*.{test,spec}.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{test,spec}.{ts,tsx,js,jsx}: Write meaningful unit tests that actually import and call the functions being tested, not just verify syntax patterns
Achieve high test coverage of business logic, aiming for 75%+ coverage of statements/lines
Cover all branches, conditions, edge cases, error paths, and different input variations in unit tests
Use vi.mock() to mock file system, loggers, and other external dependencies in tests

Files:

  • code/renderers/vue3/src/public-types.test.ts
🧠 Learnings (16)
📓 Common learnings 
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.920Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227
Timestamp: 2025-11-05T09:36:55.944Z
Learning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-12-22T22:03:40.123Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-22T22:03:40.123Z
Learning: Applies to **/*.{test,spec}.{ts,tsx,js,jsx} : Write meaningful unit tests that actually import and call the functions being tested, not just verify syntax patterns

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mock implementations outside of `beforeEach` blocks in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Keep mock implementations simple and focused in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Implement mock behaviors in `beforeEach` blocks in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid direct function mocking without `vi.mocked()` in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject uses in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-09-24T09:39:39.233Z 
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-05T09:38:47.712Z 
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-05T09:36:55.944Z 
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227
Timestamp: 2025-11-05T09:36:55.944Z
Learning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock at the highest level of abstraction needed in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-05T09:37:25.920Z 
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.920Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
🧬 Code graph analysis (1)
code/renderers/vue3/src/public-types.test.ts (2)
code/renderers/vue3/src/public-types.ts (3)
  • WithCustomArgs (70-73)
  • Meta (80-83)
  • StoryObj (100-114)
code/core/src/csf/csf-factories.ts (1)
  • story (131-135)
🔇 Additional comments (3)
code/renderers/vue3/src/public-types.test.ts (3)

219-255: LGTM!

The test correctly validates that WithCustomArgs allows defining custom args (footer, theme) alongside component props (title, disabled). The type assertions properly verify all expected properties are typed on story.args.

257-282: Good test coverage for the default type parameter.

This test correctly validates that WithCustomArgs works when the second type parameter is omitted, defaulting to Record<string, never>. This ensures backward compatibility when no custom args are needed.

284-329: Thorough type validation.

This test provides comprehensive coverage by validating the complete merged type shape using toMatchTypeOf. The render function demonstrates a realistic usage pattern combining component props with custom args for layout control.

✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

coderabbitai[bot]
coderabbitai Bot reviewed Jan 15, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Fix all issues with AI agents 
In `@code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts`:
- Around line 7-8: The comment above the PageArgs type has an escaped apostrophe
("don''t"); update the comment to use a normal apostrophe ("don't") so the text
reads "Example of using custom args that don't map to component props" (locate
the comment near the type PageArgs and MyPage symbol in Page.stories.ts and
correct the stray doubled single-quote).

In `@code/renderers/vue3/src/public-types.test.ts`:
- Around line 212-222: Remove the duplicate imports and syntax errors: remove
the repeated imports of describe, it, and expectTypeOf from the lower block,
consolidate defineComponent into the top import group, change the import path to
'./public-types' and add WithCustomArgs to the existing import that already
brings in Meta and StoryObj, and fix the string literal "don''t" to "don't" (or
use proper escaping) in the test description so the file parses and the types
are imported from the correct module.
📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8486c72 and fc82162.

📒 Files selected for processing (3)
  • code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts
  • code/renderers/vue3/src/public-types.test.ts
  • code/renderers/vue3/src/public-types.ts
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{js,jsx,ts,tsx,json,md,html,css,scss}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Format code using Prettier with yarn prettier --write <file>

Files:

  • code/renderers/vue3/src/public-types.ts
  • code/renderers/vue3/src/public-types.test.ts
  • code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts
**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Run ESLint checks using yarn lint:js:cmd <file> or the full command cross-env NODE_ENV=production eslint --cache --cache-location=../.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives to fix linting errors before committing

Files:

  • code/renderers/vue3/src/public-types.ts
  • code/renderers/vue3/src/public-types.test.ts
  • code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts
**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Enable TypeScript strict mode across all packages

Files:

  • code/renderers/vue3/src/public-types.ts
  • code/renderers/vue3/src/public-types.test.ts
  • code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts
**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx,js,jsx}: Export functions from modules if they need to be tested
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

  • code/renderers/vue3/src/public-types.ts
  • code/renderers/vue3/src/public-types.test.ts
  • code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts
**/*.{test,spec}.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{test,spec}.{ts,tsx}: Test files should follow the naming pattern *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx
Follow the spy mocking rules defined in .cursor/rules/spy-mocking.mdc for consistent mocking patterns with Vitest

Files:

  • code/renderers/vue3/src/public-types.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 the mocked functions in Vitest tests
Implement mock behaviors in beforeEach blocks in Vitest tests
Mock all required dependencies that the test subject uses
Each mock implementation should return a Promise for async functions in Vitest
Mock implementations should match the expected return type of the original function
Mock all required properties and methods that the test subject uses in Vitest tests
Avoid direct function mocking without vi.mocked() in Vitest tests
Avoid mock implementations outside of beforeEach blocks in Vitest tests
Avoid mocking without the spy: true option in Vitest tests
Avoid inline mock implementations within test cases in Vitest tests
Avoid mocking only a subset of required dependencies in Vitest tests
Mock at the highest level of abstraction needed in Vitest tests
Keep mock implementations simple and focused in Vitest tests
Use type-safe mocking with vi.mocked() in Vitest tests
Document complex mock behaviors in Vitest tests
Group related mocks together in Vitest tests

Files:

  • code/renderers/vue3/src/public-types.test.ts
**/*.{test,spec}.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{test,spec}.{ts,tsx,js,jsx}: Write meaningful unit tests that actually import and call the functions being tested, not just verify syntax patterns
Achieve high test coverage of business logic, aiming for 75%+ coverage of statements/lines
Cover all branches, conditions, edge cases, error paths, and different input variations in unit tests
Use vi.mock() to mock file system, loggers, and other external dependencies in tests

Files:

  • code/renderers/vue3/src/public-types.test.ts
code/{core,lib,addons,builders,frameworks,presets}/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use logger from storybook/internal/node-logger for server-side logging in Node.js code

Files:

  • code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts
🧠 Learnings (14)
📓 Common learnings 
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227
Timestamp: 2025-11-05T09:36:55.944Z
Learning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.920Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.
📚 Learning: 2025-11-05T09:37:25.920Z 
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.920Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.

Applied to files:

  • code/renderers/vue3/src/public-types.ts
  • code/renderers/vue3/src/public-types.test.ts
  • code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
  • code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-12-22T22:03:40.123Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-22T22:03:40.123Z
Learning: Applies to **/*.{test,spec}.{ts,tsx,js,jsx} : Write meaningful unit tests that actually import and call the functions being tested, not just verify syntax patterns

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject uses in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Keep mock implementations simple and focused in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-09-24T09:39:39.233Z 
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Implement mock behaviors in `beforeEach` blocks in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock at the highest level of abstraction needed in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use type-safe mocking with `vi.mocked()` in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-05T09:38:47.712Z 
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.

Applied to files:

  • code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts
🧬 Code graph analysis (2)
code/renderers/vue3/src/public-types.test.ts (2)
code/renderers/vue3/src/public-types.ts (3)
  • WithCustomArgs (70-73)
  • Meta (80-83)
  • StoryObj (100-114)
code/core/src/csf/csf-factories.ts (1)
  • story (131-135)
code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts (1)
code/renderers/vue3/src/public-types.ts (3)
  • WithCustomArgs (70-73)
  • Meta (80-83)
  • StoryObj (100-114)
🪛 Biome (2.1.2)
code/renderers/vue3/src/public-types.test.ts

[error] 222-222: expected , but instead found 't map to component props'

Remove 't map to component props'

(parse)

[error] 215-215: Shouldn't redeclare 'describe'. Consider to delete it or rename it.

'describe' is defined here:

(lint/suspicious/noRedeclare)

[error] 215-215: Shouldn't redeclare 'it'. Consider to delete it or rename it.

'it' is defined here:

(lint/suspicious/noRedeclare)

[error] 216-216: Shouldn't redeclare 'expectTypeOf'. Consider to delete it or rename it.

'expectTypeOf' is defined here:

(lint/suspicious/noRedeclare)

[error] 219-219: Shouldn't redeclare 'Meta'. Consider to delete it or rename it.

'Meta' is defined here:

(lint/suspicious/noRedeclare)

[error] 219-219: Shouldn't redeclare 'StoryObj'. Consider to delete it or rename it.

'StoryObj' is defined here:

(lint/suspicious/noRedeclare)

🔇 Additional comments (4)
code/renderers/vue3/src/public-types.ts (1)

24-73: LGTM! Well-documented type helper.

The WithCustomArgs type is correctly implemented as an intersection of ComponentPropsAndSlots<TComponent> with TCustomArgs. The JSDoc documentation is comprehensive with a practical example, and the default Record<string, never> for empty custom args is appropriate.

code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts (1)

13-41: LGTM! Good demonstration of the WithCustomArgs pattern.

The render function correctly binds args via v-bind and uses the slot pattern for the custom footer arg. The WithCustomFooter story provides a clear example for users.

code/renderers/vue3/src/public-types.test.ts (2)

171-171: Verify the args values are intentionally empty strings.

The args values appear malformed. The previous version likely had decoratorArg: '' and decoratorArg2: '' as separate key-value pairs, but now they read as decoratorArg: ', decoratorArg2: ' which looks like a merge conflict or copy-paste error resulting in comma-separated empty strings as values.

🔍 Expected fix if values should be empty strings 
-      args: { decoratorArg: ', decoratorArg2: ', label: 'good' },
+      args: { decoratorArg: '', decoratorArg2: '', label: 'good' },

223-332: Test coverage is appropriate once structural issues are resolved.

The three test cases cover the key scenarios well:

  1. Custom args beyond component props (footer, theme)
  2. Empty custom args (default Record<string, never> behavior)
  3. Merging component props with custom args

Once the duplicate imports and syntax errors from the previous comment are fixed, these type tests will provide good coverage for the WithCustomArgs helper.

✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.

Comment thread code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts Outdated
Comment thread code/renderers/vue3/src/public-types.test.ts Outdated
coderabbitai[bot]
coderabbitai Bot reviewed Jan 15, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents 
In `@code/renderers/vue3/src/public-types.test.ts`:
- Around line 172-174: The args object for the StoryObj "Basic" is malformed: it
currently sets decoratorArg to the combined string "', decoratorArg2: " and
omits decoratorArg2, violating the Props type; update the Basic.args object
(associated with meta and the Props type) so it contains two separate
properties, decoratorArg and decoratorArg2, each with appropriate string values
(e.g., decoratorArg: '...', decoratorArg2: '...') to match the required Props
shape.
📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fc82162 and f7802b8.

📒 Files selected for processing (2)
  • code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts
  • code/renderers/vue3/src/public-types.test.ts
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{js,jsx,ts,tsx,json,md,html,css,scss}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Format code using Prettier with yarn prettier --write <file>

Files:

  • code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts
  • code/renderers/vue3/src/public-types.test.ts
**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Run ESLint checks using yarn lint:js:cmd <file> or the full command cross-env NODE_ENV=production eslint --cache --cache-location=../.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives to fix linting errors before committing

Files:

  • code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts
  • code/renderers/vue3/src/public-types.test.ts
**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Enable TypeScript strict mode across all packages

Files:

  • code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts
  • code/renderers/vue3/src/public-types.test.ts
**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx,js,jsx}: Export functions from modules if they need to be tested
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

  • code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts
  • code/renderers/vue3/src/public-types.test.ts
code/{core,lib,addons,builders,frameworks,presets}/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use logger from storybook/internal/node-logger for server-side logging in Node.js code

Files:

  • code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts
**/*.{test,spec}.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{test,spec}.{ts,tsx}: Test files should follow the naming pattern *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx
Follow the spy mocking rules defined in .cursor/rules/spy-mocking.mdc for consistent mocking patterns with Vitest

Files:

  • code/renderers/vue3/src/public-types.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 the mocked functions in Vitest tests
Implement mock behaviors in beforeEach blocks in Vitest tests
Mock all required dependencies that the test subject uses
Each mock implementation should return a Promise for async functions in Vitest
Mock implementations should match the expected return type of the original function
Mock all required properties and methods that the test subject uses in Vitest tests
Avoid direct function mocking without vi.mocked() in Vitest tests
Avoid mock implementations outside of beforeEach blocks in Vitest tests
Avoid mocking without the spy: true option in Vitest tests
Avoid inline mock implementations within test cases in Vitest tests
Avoid mocking only a subset of required dependencies in Vitest tests
Mock at the highest level of abstraction needed in Vitest tests
Keep mock implementations simple and focused in Vitest tests
Use type-safe mocking with vi.mocked() in Vitest tests
Document complex mock behaviors in Vitest tests
Group related mocks together in Vitest tests

Files:

  • code/renderers/vue3/src/public-types.test.ts
**/*.{test,spec}.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{test,spec}.{ts,tsx,js,jsx}: Write meaningful unit tests that actually import and call the functions being tested, not just verify syntax patterns
Achieve high test coverage of business logic, aiming for 75%+ coverage of statements/lines
Cover all branches, conditions, edge cases, error paths, and different input variations in unit tests
Use vi.mock() to mock file system, loggers, and other external dependencies in tests

Files:

  • code/renderers/vue3/src/public-types.test.ts
🧠 Learnings (15)
📓 Common learnings 
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.920Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.
📚 Learning: 2025-11-05T09:37:25.920Z 
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.920Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.

Applied to files:

  • code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts
  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-05T09:38:47.712Z 
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.

Applied to files:

  • code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors in Vitest tests

Applied to files:

  • code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts
  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-12-22T22:03:40.123Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-22T22:03:40.123Z
Learning: Applies to **/*.{test,spec}.{ts,tsx,js,jsx} : Write meaningful unit tests that actually import and call the functions being tested, not just verify syntax patterns

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mock implementations outside of `beforeEach` blocks in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Keep mock implementations simple and focused in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Implement mock behaviors in `beforeEach` blocks in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid direct function mocking without `vi.mocked()` in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject uses in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-11-24T17:49:59.279Z 
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock at the highest level of abstraction needed in Vitest tests

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
📚 Learning: 2025-09-24T09:39:39.233Z 
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.

Applied to files:

  • code/renderers/vue3/src/public-types.test.ts
🧬 Code graph analysis (2)
code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts (1)
code/renderers/vue3/src/public-types.ts (3)
  • WithCustomArgs (70-73)
  • Meta (80-83)
  • StoryObj (100-114)
code/renderers/vue3/src/public-types.test.ts (2)
code/renderers/vue3/src/public-types.ts (3)
  • WithCustomArgs (70-73)
  • Meta (80-83)
  • StoryObj (100-114)
code/core/src/csf/csf-factories.ts (1)
  • story (131-135)
🔇 Additional comments (7)
code/renderers/vue3/src/public-types.test.ts (4)

10-17: LGTM!

The imports are correctly organized. defineComponent is properly imported from Vue for use in the new tests, and WithCustomArgs is added to the existing public-types import.

218-255: LGTM!

Good test coverage for the primary use case of WithCustomArgs. The test properly verifies that both component props (title, disabled) and custom args (footer, theme) are correctly typed and accessible.

257-282: LGTM!

Good edge case test verifying that WithCustomArgs works correctly with its default type parameter (no additional custom args), maintaining backward compatibility.

284-329: LGTM!

Comprehensive test demonstrating the intended use case with a realistic render function setup. The type assertion at lines 324-328 effectively validates the merged type structure.

code/frameworks/vue3-vite/template/cli/ts/Page.stories.ts (3)

1-8: LGTM!

Clean demonstration of WithCustomArgs usage. The type alias pattern shown here is a good template for users to follow.

13-25: LGTM with a note on v-html.

The render function correctly demonstrates passing custom args to control rendering beyond component props. The v-html directive is appropriate here since the content is developer-controlled, but users adapting this template should be aware that v-html can introduce XSS vulnerabilities if used with untrusted content.

37-41: LGTM!

Clear, minimal example story demonstrating the custom footer arg in action.

✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.

Comment thread code/renderers/vue3/src/public-types.test.ts
@storybook-app-bot
Copy link
Copy Markdown

storybook-app-bot Bot commented Jan 26, 2026

Package Benchmarks

Commit: fa80d32, ran on 26 January 2026 at 14:55:49 UTC

The following packages have significant changes to their size or dependencies:

@storybook/addon-a11y

Before After Difference
Dependency count 0 2 🚨 +2 🚨
Self size 0 B 183 KB 🚨 +183 KB 🚨
Dependency size 0 B 2.98 MB 🚨 +2.98 MB 🚨
Bundle Size Analyzer Link Link

@storybook/addon-docs

Before After Difference
Dependency count 0 18 🚨 +18 🚨
Self size 0 B 1.64 MB 🚨 +1.64 MB 🚨
Dependency size 0 B 9.25 MB 🚨 +9.25 MB 🚨
Bundle Size Analyzer Link Link

@storybook/addon-links

Before After Difference
Dependency count 0 1 🚨 +1 🚨
Self size 0 B 14 KB 🚨 +14 KB 🚨
Dependency size 0 B 5 KB 🚨 +5 KB 🚨
Bundle Size Analyzer Link Link

@storybook/addon-onboarding

Before After Difference
Dependency count 0 0 0
Self size 0 B 331 KB 🚨 +331 KB 🚨
Dependency size 0 B 667 B 🚨 +667 B 🚨
Bundle Size Analyzer Link Link

storybook-addon-pseudo-states

Before After Difference
Dependency count 0 0 0
Self size 0 B 21 KB 🚨 +21 KB 🚨
Dependency size 0 B 686 B 🚨 +686 B 🚨
Bundle Size Analyzer Link Link

@storybook/addon-themes

Before After Difference
Dependency count 0 1 🚨 +1 🚨
Self size 0 B 18 KB 🚨 +18 KB 🚨
Dependency size 0 B 28 KB 🚨 +28 KB 🚨
Bundle Size Analyzer Link Link

@storybook/addon-vitest

Before After Difference
Dependency count 0 2 🚨 +2 🚨
Self size 0 B 379 KB 🚨 +379 KB 🚨
Dependency size 0 B 338 KB 🚨 +338 KB 🚨
Bundle Size Analyzer Link Link

@storybook/builder-vite

Before After Difference
Dependency count 0 17 🚨 +17 🚨
Self size 0 B 125 KB 🚨 +125 KB 🚨
Dependency size 0 B 2.00 MB 🚨 +2.00 MB 🚨
Bundle Size Analyzer Link Link

@storybook/builder-webpack5

Before After Difference
Dependency count 0 192 🚨 +192 🚨
Self size 0 B 75 KB 🚨 +75 KB 🚨
Dependency size 0 B 32.26 MB 🚨 +32.26 MB 🚨
Bundle Size Analyzer Link Link

storybook

Before After Difference
Dependency count 0 49 🚨 +49 🚨
Self size 0 B 20.30 MB 🚨 +20.30 MB 🚨
Dependency size 0 B 16.52 MB 🚨 +16.52 MB 🚨
Bundle Size Analyzer Link Link

@storybook/angular

Before After Difference
Dependency count 0 192 🚨 +192 🚨
Self size 0 B 139 KB 🚨 +139 KB 🚨
Dependency size 0 B 30.48 MB 🚨 +30.48 MB 🚨
Bundle Size Analyzer Link Link

@storybook/ember

Before After Difference
Dependency count 0 196 🚨 +196 🚨
Self size 0 B 15 KB 🚨 +15 KB 🚨
Dependency size 0 B 28.98 MB 🚨 +28.98 MB 🚨
Bundle Size Analyzer Link Link

@storybook/html-vite

Before After Difference
Dependency count 0 20 🚨 +20 🚨
Self size 0 B 22 KB 🚨 +22 KB 🚨
Dependency size 0 B 2.16 MB 🚨 +2.16 MB 🚨
Bundle Size Analyzer Link Link

@storybook/nextjs

Before After Difference
Dependency count 0 538 🚨 +538 🚨
Self size 0 B 646 KB 🚨 +646 KB 🚨
Dependency size 0 B 59.25 MB 🚨 +59.25 MB 🚨
Bundle Size Analyzer Link Link

@storybook/nextjs-vite

Before After Difference
Dependency count 0 127 🚨 +127 🚨
Self size 0 B 1.12 MB 🚨 +1.12 MB 🚨
Dependency size 0 B 21.83 MB 🚨 +21.83 MB 🚨
Bundle Size Analyzer Link Link

@storybook/preact-vite

Before After Difference
Dependency count 0 20 🚨 +20 🚨
Self size 0 B 13 KB 🚨 +13 KB 🚨
Dependency size 0 B 2.15 MB 🚨 +2.15 MB 🚨
Bundle Size Analyzer Link Link

@storybook/react-native-web-vite

Before After Difference
Dependency count 0 159 🚨 +159 🚨
Self size 0 B 30 KB 🚨 +30 KB 🚨
Dependency size 0 B 23.13 MB 🚨 +23.13 MB 🚨
Bundle Size Analyzer Link Link

@storybook/react-vite

Before After Difference
Dependency count 0 117 🚨 +117 🚨
Self size 0 B 35 KB 🚨 +35 KB 🚨
Dependency size 0 B 19.63 MB 🚨 +19.63 MB 🚨
Bundle Size Analyzer Link Link

@storybook/react-webpack5

Before After Difference
Dependency count 0 278 🚨 +278 🚨
Self size 0 B 24 KB 🚨 +24 KB 🚨
Dependency size 0 B 44.15 MB 🚨 +44.15 MB 🚨
Bundle Size Analyzer Link Link

@storybook/server-webpack5

Before After Difference
Dependency count 0 204 🚨 +204 🚨
Self size 0 B 16 KB 🚨 +16 KB 🚨
Dependency size 0 B 33.51 MB 🚨 +33.51 MB 🚨
Bundle Size Analyzer Link Link

@storybook/svelte-vite

Before After Difference
Dependency count 0 24 🚨 +24 🚨
Self size 0 B 55 KB 🚨 +55 KB 🚨
Dependency size 0 B 26.82 MB 🚨 +26.82 MB 🚨
Bundle Size Analyzer Link Link

@storybook/sveltekit

Before After Difference
Dependency count 0 25 🚨 +25 🚨
Self size 0 B 56 KB 🚨 +56 KB 🚨
Dependency size 0 B 26.88 MB 🚨 +26.88 MB 🚨
Bundle Size Analyzer Link Link

@storybook/vue3-vite

Before After Difference
Dependency count 0 114 🚨 +114 🚨
Self size 0 B 36 KB 🚨 +36 KB 🚨
Dependency size 0 B 43.97 MB 🚨 +43.97 MB 🚨
Bundle Size Analyzer Link Link

@storybook/web-components-vite

Before After Difference
Dependency count 0 21 🚨 +21 🚨
Self size 0 B 19 KB 🚨 +19 KB 🚨
Dependency size 0 B 2.21 MB 🚨 +2.21 MB 🚨
Bundle Size Analyzer Link Link

@storybook/cli

Before After Difference
Dependency count 0 183 🚨 +183 🚨
Self size 0 B 775 KB 🚨 +775 KB 🚨
Dependency size 0 B 67.46 MB 🚨 +67.46 MB 🚨
Bundle Size Analyzer Link Link

@storybook/codemod

Before After Difference
Dependency count 0 176 🚨 +176 🚨
Self size 0 B 30 KB 🚨 +30 KB 🚨
Dependency size 0 B 66.04 MB 🚨 +66.04 MB 🚨
Bundle Size Analyzer Link Link

@storybook/core-webpack

Before After Difference
Dependency count 0 1 🚨 +1 🚨
Self size 0 B 11 KB 🚨 +11 KB 🚨
Dependency size 0 B 28 KB 🚨 +28 KB 🚨
Bundle Size Analyzer Link Link

create-storybook

Before After Difference
Dependency count 0 50 🚨 +50 🚨
Self size 0 B 1000 KB 🚨 +1000 KB 🚨
Dependency size 0 B 36.82 MB 🚨 +36.82 MB 🚨
Bundle Size Analyzer node node

@storybook/csf-plugin

Before After Difference
Dependency count 0 9 🚨 +9 🚨
Self size 0 B 7 KB 🚨 +7 KB 🚨
Dependency size 0 B 1.26 MB 🚨 +1.26 MB 🚨
Bundle Size Analyzer Link Link

eslint-plugin-storybook

Before After Difference
Dependency count 0 20 🚨 +20 🚨
Self size 0 B 131 KB 🚨 +131 KB 🚨
Dependency size 0 B 2.82 MB 🚨 +2.82 MB 🚨
Bundle Size Analyzer Link Link

@storybook/react-dom-shim

Before After Difference
Dependency count 0 0 0
Self size 0 B 18 KB 🚨 +18 KB 🚨
Dependency size 0 B 785 B 🚨 +785 B 🚨
Bundle Size Analyzer Link Link

@storybook/preset-create-react-app

Before After Difference
Dependency count 0 68 🚨 +68 🚨
Self size 0 B 32 KB 🚨 +32 KB 🚨
Dependency size 0 B 5.98 MB 🚨 +5.98 MB 🚨
Bundle Size Analyzer Link Link

@storybook/preset-react-webpack

Before After Difference
Dependency count 0 170 🚨 +170 🚨
Self size 0 B 18 KB 🚨 +18 KB 🚨
Dependency size 0 B 31.29 MB 🚨 +31.29 MB 🚨
Bundle Size Analyzer Link Link

@storybook/preset-server-webpack

Before After Difference
Dependency count 0 10 🚨 +10 🚨
Self size 0 B 7 KB 🚨 +7 KB 🚨
Dependency size 0 B 1.20 MB 🚨 +1.20 MB 🚨
Bundle Size Analyzer Link Link

@storybook/html

Before After Difference
Dependency count 0 2 🚨 +2 🚨
Self size 0 B 29 KB 🚨 +29 KB 🚨
Dependency size 0 B 32 KB 🚨 +32 KB 🚨
Bundle Size Analyzer Link Link

@storybook/preact

Before After Difference
Dependency count 0 2 🚨 +2 🚨
Self size 0 B 16 KB 🚨 +16 KB 🚨
Dependency size 0 B 32 KB 🚨 +32 KB 🚨
Bundle Size Analyzer Link Link

@storybook/react

Before After Difference
Dependency count 0 57 🚨 +57 🚨
Self size 0 B 732 KB 🚨 +732 KB 🚨
Dependency size 0 B 12.95 MB 🚨 +12.95 MB 🚨
Bundle Size Analyzer Link Link

@storybook/server

Before After Difference
Dependency count 0 3 🚨 +3 🚨
Self size 0 B 8 KB 🚨 +8 KB 🚨
Dependency size 0 B 716 KB 🚨 +716 KB 🚨
Bundle Size Analyzer Link Link

@storybook/svelte

Before After Difference
Dependency count 0 2 🚨 +2 🚨
Self size 0 B 45 KB 🚨 +45 KB 🚨
Dependency size 0 B 230 KB 🚨 +230 KB 🚨
Bundle Size Analyzer Link Link

@storybook/vue3

Before After Difference
Dependency count 0 3 🚨 +3 🚨
Self size 0 B 65 KB 🚨 +65 KB 🚨
Dependency size 0 B 211 KB 🚨 +211 KB 🚨
Bundle Size Analyzer Link Link

@storybook/web-components

Before After Difference
Dependency count 0 3 🚨 +3 🚨
Self size 0 B 61 KB 🚨 +61 KB 🚨
Dependency size 0 B 47 KB 🚨 +47 KB 🚨
Bundle Size Analyzer Link Link

@github-actions github-actions Bot added the Stale label Feb 7, 2026
@valentinpalkovic valentinpalkovic moved this to Empathy Queue (prioritized) in Core Team Projects Mar 30, 2026
@github-actions github-actions Bot added the Stale label Apr 19, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@coderabbitai coderabbitai[bot] coderabbitai[bot] left review comments

At least 1 approving review is required to merge this pull request.

Assignees

@kasperpeulen kasperpeulen

Labels

bug ci:normal csf Stale

Projects

Core Team Projects
Status: Empathy Queue (prioritized)

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@guignol1981 @kasperpeulen @valentinpalkovic