[Bug]: Vue-Typescript generic component not working in CSF3

[maxicasa]

Describe the bug

I am trying to use a generic component with the story but it fails because the inferred type is wrong. For example:

<script setup lang="ts" generic="TValue extends Array<number> = Array<number>">

export interface AreaChartProps<TValue extends Array<number> = Array<number>> {
  lineColor?: string;
  values: Array<TValue>;
...
}

And the story:

import { AreaChart } from "@libs/charts/src";

import type { Meta, StoryObj } from "@storybook/vue3";

import type { ComponentProps } from "vue-component-type-helpers";

type ComponentType = ComponentProps<typeof AreaChart>;
type Story = StoryObj<ComponentType>;

const meta: Meta<ComponentType> = {
  component: AreaChart // <-- Error is here
};

export default meta;

The typescript error:

Type '<TValue extends number[] = number[]>(__VLS_props: AreaChartProps<TValue> & VNodeProps & AllowedComponentProps & ComponentCustomProps, __VLS_ctx?: Pick<...> | undefined, __VLS_expose?: ((exposed: {}) => void) | undefined, __VLS_setup?: Promise<...>) => VNode<...> & { ...; }' has no properties in common with type 'Omit<ConcreteComponent<AreaChartProps<number[]> & VNodeProps & AllowedComponentProps & ComponentCustomProps>, "props">'.

I tried to change the signature of the story with this, but the problem remains:

type ComponentType = typeof AreaChart;
type Story = StoryObj<ComponentType>;

const meta: Meta<ComponentType> = {
  component: AreaChart,
};

export default meta;

The only workaround I've found is to use a simple cast of the meta, but I lose the type check for the meta object:

const meta = {
  component: AreaChart,
};

export default meta as Meta<ComponentType>;

Is it possibile to use generic component with story?

To Reproduce

The issue is visible if you download the project and open it from vscode: https://stackblitz.com/edit/github-sgrypj?file=src%2Fstories%2FButton.stories.tsx

System

Environment Info:

  System:
    OS: macOS 13.5.2
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
  Browsers:
    Chrome: 117.0.5938.88
    Edge: 114.0.1823.51
    Safari: 16.6
  npmPackages:
    @storybook/addon-a11y: ~7.4.2 => 7.4.2 
    @storybook/addon-actions: ~7.4.2 => 7.4.2 
    @storybook/addon-backgrounds: ~7.4.2 => 7.4.2 
    @storybook/addon-docs: ~7.4.2 => 7.4.2 
    @storybook/addon-essentials: ~7.4.2 => 7.4.2 
    @storybook/addon-interactions: ~7.4.2 => 7.4.2 
    @storybook/addon-links: ~7.4.2 => 7.4.2 
    @storybook/addon-measure: ~7.4.2 => 7.4.2 
    @storybook/addon-outline: ~7.4.2 => 7.4.2 
    @storybook/addons: ~7.4.2 => 7.4.2 
    @storybook/api: ~7.4.2 => 7.4.2 
    @storybook/channel-postmessage: ~7.4.2 => 7.4.2 
    @storybook/channel-websocket: ~7.4.2 => 7.4.2 
    @storybook/client-api: ~7.4.2 => 7.4.2 
    @storybook/components: ~7.4.2 => 7.4.2 
    @storybook/core-events: ~7.4.2 => 7.4.2 
    @storybook/manager-api: ~7.4.2 => 7.4.2 
    @storybook/preview-web: ~7.4.2 => 7.4.2 
    @storybook/testing-library: ~0.2.1 => 0.2.1 
    @storybook/theming: ~7.4.2 => 7.4.2 
    @storybook/vue3: ~7.4.2 => 7.4.2 
    @storybook/vue3-vite: ~7.4.2 => 7.4.2

Additional context

No response

[Gumper-x]

I also encountered the problem of supporting components with generics, it would be nice to get a solution on what to do in such cases

[Gumper-x]

How temp solution, i use this way

[longshihui]

same problem, this error also occurs in normal component

[valentinpalkovic]

@kasperpeulen, any idea why the issue occurs?

[asvishnyakov]

Hey guys, just got the same issue. Does anybody found acceptable workaround?

[mmondou]

Same problem with React!

With this type

Temporary workaround by adding | string line 12 but acts like as a any...

[gyohza]

How temp solution, i use this way

Thanks, @Gumper-x. This worked for me. I was able to adjust it to make it stricter (and remove the unknown conversion):

const meta = {
  title: 'MyComponent',
  component: MyComponent as Record<keyof typeof MyComponent, unknown>,
  // ...
} satisfies Meta<typeof MyComponent>;

[l4dybird]

I am using the following.

type GenericMeta<C> = Omit<Meta<C>, "component"> & {
  component: Record<keyof C, unknown>
}

const meta = {
  title: "MyComponent",
  component: MyComponent,
  args: {
    "modelValue": "string",
  },
  // ...
} satisfies GenericMeta<typeof MyComponent<string>>;