[Documentation]: Documentation for `argTypes` is not correct

[todor-a]

Describe the problem

The docs say:

But the actual type is:

interface InputType {
    name?: string;
    description?: string;
    defaultValue?: any;
    type?: SBType | SBScalarType['name'];
    if?: Conditional;
    [key: string]: any;
}

I'm willing to work on this if it's indeed wrong.

Additional context

Edit: Taking another look at this - you can indeed pass options and control and it does work but it is not documented in the type.

[raphaelvdossantos]

I haven't checked the code for how they keep track of the internals for the control, but the interface you mentioned describes [key: string]: any. This allows for dynamic extension of the object.

In this case, we might want, as per the docs, to generate a specific control for an unknown property. By typing the interface InputType with [key: string]: any we allow the user to extend the object dynamically, adding new properties to be controlled/restricted.

This is most likely intended and it is indeed documented.

Ex.:

const myArgs : InputType = {
// key fontStyle is of type string with value any and is permitted by the interface
 fontStyle: {
    options: ["bold", "italic", "regular"]
    }
 }

[todor-a]

Yes. I think adding options and control as optional but typed fields to the interface will be benfitial.

[shilman]

@kasperpeulen do you have any suggestions here?

[kylegach]

@kasperpeulen will likely have a better technical explanation (possibly with workarounds), but the situation here is basically:

argType properties like options, and control are contributed by the Controls addon and not part of the core argTypes API. That's why they're not in the types.

We agree this isn't ideal, from an end-user standpoint, and have some future plans to improve this, both in the types and in the documentation.

[noahgregory-basis]

@kylegach could/does the Controls addon at least expose its own types so we can at least have type safety?

[kylegach]

That's a good question. The source is here, https://github.com/storybookjs/storybook/tree/next/code/addons/controls, but I didn't see anything when I glanced around just now. Kasper will be able to weigh in more.

[noahgregory-basis]

The types from here appear to likely be good candidates for use in this: https://github.com/storybookjs/storybook/blob/1013ca1/code/ui/blocks/src/controls/types.ts

Although they do appear to be only tangentially related to the Controls addon.

EDIT: it actually does appear they are used directly in the Controls addon.

https://github.com/storybookjs/storybook/blob/b22fd14/code/addons/controls/src/ControlsPanel.tsx

[michaelw85]

I think there might be some duplicate tickets on this topic see: https://github.com/storybookjs/storybook/issues/22196 I've added a basic typing example in this ticket.