Custom control components

[scriptcoded]

Is your feature request related to a problem? Please describe.

We use Storybook for documenting bespoke components that are used for very niche products at IKEA, and these components usually take very specific input data. We'd like to make it to mock this data in Storybook, and would therefore like to be able to build custom controls for these. Unfortunately there is no way to hook into the args table in Storybook.

Describe the solution you'd like

Extend the ArgControl component to also allow a React component to be passed in as control type, and render that instead. I believe this could be done right here in code, with some changes to the types as well, of course:

storybook/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx

Line 88 in 5111c16

const Control = Controls[control.type] || NoControl;

- const Control = Controls[control.type] || NoControl;
+ const Control = typeof control.type === 'function'
+   ? control.type
+   : (Controls[control.type] || NoControl);

If you believe this is a resonable approach, I have some time left over in the coming weeks that I could probably use to implement this feature.

Describe alternatives you've considered

We could also implement a global way of registering components and using them, but it sounds like that would add a lot of extra complexity.

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

No response