Auto generate Controls from Typescript types

[matthewwolfe]

Is your feature request related to a problem? Please describe. When using Typescript and args/argTypes it is very repetitive to specify the props as a Typescript type and then repeat the same structure again in the story file as args and argTypes.

Describe the solution you'd like The ability to auto generate Controls, ie:

interface Props {
  variant: 'primary' | 'secondary';
}

Props are translated into a select/radio with the options

Describe alternatives you've considered react-docgen

Additional context N/A

[matthewwolfe]

I did a little bit of discovery on the viability of this, and it looks like react-docgen can reliably generate values depending on how the props are typed in the stories file.

❌ Does not generate type information

const Card: Story<Props> = ({ label }) => <p>Label: {label}</p>;

✅ Generates type information

const Card: Story<Props> = ({ label }: Props) => <p>Label: {label}</p>;

Considerations

• react-docgen is not a heavy dependency, but it is also not super lightweight, optional flag to enable?
• Must work with hot reload
• Types that do not map cleanly to a control

@tajo do you have any opinion on if this is something that you'd like implemented? If so, could you provide a bit of direction on how you'd like this structured? Any info would be appreciated if you are interested in this, and I'd be happy to take a stab at an implementation.

[tajo]

It would nice to have this as an opt-in feature through config.mjs. I guess you don't want to automatically add control everywhere just because you use TypeScript, so users need to consent to it. This way we can make react-docgen dependency optional. It can be still in dependencies but should be used dynamically (or just make sure it doesn't get bundled by default) and added into optimizeDeps.

Also, I assume, when enabled and args/argTypes are defined at the same time, args/argTypes should take the precedence.

[d9k]

Found https://github.com/lukifer/ladlescoop enthusiast project for that:

Automatically generate Ladle stories from existing React components, extracting Props definitions and default values, and automatically creating controls from types.

[d9k]

Ladlescoop doesn't support generation controls from inherited props yet

Please consider controls autogeneration feature as top :top: priority.

:zap: Instant startup time is cool but syncing ladle controls manually on each component change is a boring :hot_face: tedious task which outweights :balance_scale: all developer's time saved by ladle optimisations. It breaks single-source-of-truth principle.

Because of this can't switch from Storybook to Ladle yet and can't advice switching to friends/colleagues :man_shrugging: