Does not support select knobs on TypeScript string unions

[dantman]

I'm using smart-knobs with TypeScript components using react-docgen-typescript-loader.

However I do not get any knobs on a component that just uses string union props like these. String props are fine so this is specific to the type handling.

export interface StatusIndicatorProps {
  status: 'completed' | 'incomplete' | 'overdue';
}

const StatusIndicator: FC<StatusIndicatorProps> = props => {
  // ...
}

The resulting __docgenInfo output by react-docgen-typescript-loader contains the following props:

props: {
  status: {
    defaultValue: null,
    description: "",
    name: "status",
    required: true,
    type: {name: '"completed" | "incomplete" | "overdue"'}
  }
}

It would be nice if smart-props could support the string union types for at least simple unions that can properly be represented as a select or radio (e.g. a union of primitives like numbers, strings, undefined/null, and/or booleans).

[dantman]

As a related topic. I can appreciate that sometimes types will be too complex for smart-knobs to do automatically.

It would be really appreciated if there was an escape hatch for that type of scenario. i.e. Some way to give smart-knobs a function that will return a knob for the prop on a component that is too complex for it to handle automatically. This will at least allow stories to be written without including the knobs into the story itself (which will result in the knob being included in doc page examples).

[ndelangen]

@dantman I'd take a PR adding this escape hatch for sure!

[dantman]

Ok, apparently react-docgen-typescript-loader has a shouldExtractLiteralValuesFromEnum option built-in to support smart-knobs.

https://github.com/strothj/react-docgen-typescript-loader/issues/87#issuecomment-583818469

Perhaps smart-knobs should mention that option where it recommends use of react-docgen-typescript-loader.

[Benwick91]

I have the same problem. I use the shouldExtractLiteralValuesFromEnum and it worked, but not on every component. Some components works fine with select and all other props. Some props show only one prop and there are missing select knobs and other knobs. I don't get what I do wrong

[dehypnosis]

I found that optional props seems to not be recognized.. eg. { theme?: "dark"|"light" } or { theme: "dark"|"light"|undefined }