This repository was archived by the owner on Jan 5, 2023. It is now read-only.
Repository navigation
This repository was archived by the owner on Jan 5, 2023. It is now read-only.
Does not support select knobs on TypeScript string unions #72
Description
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).
Activity
dantman commentedon Feb 9, 2020
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 commentedon Feb 11, 2020
@dantman I'd take a PR adding this escape hatch for sure!
dantman commentedon Feb 13, 2020
Ok, apparently
react-docgen-typescript-loaderhas ashouldExtractLiteralValuesFromEnumoption built-in to support smart-knobs.strothj/react-docgen-typescript-loader#87 (comment)
Perhaps smart-knobs should mention that option where it recommends use of
react-docgen-typescript-loader.Benwick91 commentedon Apr 9, 2020
I have the same problem. I use the
shouldExtractLiteralValuesFromEnumand 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 wrongdehypnosis commentedon Jul 17, 2020
I found that optional props seems to not be recognized.. eg.
{ theme?: "dark"|"light" }or{ theme: "dark"|"light"|undefined }