[Bug]: V7 ArgTypes not working with polymorphic component type in Typescript #24108
Description
Describe the bug
Hi everyone,
I created a polymorphic component named Typographie which adapt props type from as attribute. For instance, when I define as="p" the component will have all p attributes. This is the function signature (for the example purpose, I removed all irrevelant code) :
const Typographie : TypographieComponent = React.forwardRef(function Typographie <C extends React.ElementType = 'p'> (props : TypographieProps<C>, ref: PolymorphicRef<C>) {
// Implementation ...
}) as TypographieComponent;
export default Typographie;Composant's types are defined in a Typographie.types.tsx in the same folder as my component source code :
export interface TypographieOwnProps {
// Props defined
}
export type TypographieProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<C, TypographieOwnProps>;
export type TypographieComponent = <C extends React.ElementType = 'p'>(
props: TypographieProps<C>
) => React.ReactNode | null;PolymorphicComponentPropWithRef is defined in a another folder (named types) :
type AsProp<C extends React.ElementType> = {
as ?: C;
}
type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
export type PolymorphicComponentProp<
C extends React.ElementType,
Props = {}
> = React.PropsWithChildren<Props & AsProp<C>> &
DistributiveOmit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
export type PolymorphicComponentPropWithRef<
C extends React.ElementType,
Props = {}
> = PolymorphicComponentProp<C, Props> & { ref?: PolymorphicRef<C> };
export type PolymorphicRef<C extends React.ElementType> =
React.ComponentPropsWithRef<C>['ref'];I wanted to show the props list in my Overview.mdx doc page. For that, I used this :
<ArgTypes of={Typographie} />But I doesn't work. I got this :
It's only working when I don't use my Polymorphic type. I don't know if it's a bug or if I doing something wrong.
To Reproduce
I made a reproduce here : https://stackblitz.com/edit/github-8upnv6-yoreb4?file=src%2Fstories%2FTypographie.tsx
System
Environment Info:
System:
OS: macOS 11.7.6
CPU: (4) x64 Intel(R) Core(TM) i5-5575R CPU @ 2.80GHz
Binaries:
Node: 18.14.2 - /usr/local/opt/node@18/bin/node
Yarn: 1.22.17 - /usr/local/bin/yarn
npm: 9.5.0 - /usr/local/opt/node@18/bin/npm
Browsers:
Chrome: 116.0.5845.179
Safari: 15.6
npmPackages:
@storybook/addon-docs: ^7.4.0 => 7.4.0
@storybook/addon-essentials: ^7.4.0 => 7.4.0
@storybook/addon-interactions: ^7.4.0 => 7.4.0
@storybook/addon-links: ^7.4.0 => 7.4.0
@storybook/addon-onboarding: ^1.0.8 => 1.0.8
@storybook/blocks: ^7.4.0 => 7.4.0
@storybook/react: ^7.4.0 => 7.4.0
@storybook/react-vite: ^7.4.0 => 7.4.0
@storybook/testing-library: ^0.2.0 => 0.2.0 Additional context
This is my Storybook settings :
import remarkGfm from 'remark-gfm';
import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
logLevel: 'debug',
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-onboarding",
"@storybook/addon-interactions",
{
name: '@storybook/addon-docs',
options: {
mdxPluginOptions: {
mdxCompileOptions: {
remarkPlugins: [remarkGfm],
},
},
},
},
],
framework: {
name: "@storybook/react-vite",
options: {},
},
docs: {
autodocs: "tag",
},
typescript: {
reactDocgen: 'react-docgen-typescript',
reactDocgenTypescriptOptions: {
shouldExtractLiteralValuesFromEnum: true,
shouldRemoveUndefinedFromOptional: true,
skipChildrenPropWithoutDoc: false,
tsconfigPath: '../tsconfig.json',
}
}
};
export default config;