I want to get this:
My stories.tsx code looks like this:
export default {
title: "Components/Switch",
argTypes: {
color: { control: "select", options: ["primary", "secondary"] },
},
};
However, the page just fails to render when I do that.
To reproduce:
Clone this repository: https://github.com/jauggy/storybook-args-error
npm i
npm run storybook
Select the Switch component on the left menu.
you should send an object to the control property. Like this:
export default {
title: "Components/Switch",
argTypes: {
color: { control: { type: "select", options: ["primary", "secondary"] },
},
};
Update after Storybook v7 control.options will be deprecated for more info go to: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-controloptions
You could also provide there an enum:
const SwitchTypeEnum {
PRIMARY = "primary",
SECONDARY = "secondary",
}
export default {
title: "Components/Switch",
argTypes: {
table: {
summary: "SwitchTypeEnum",
defaultValue: { summary: "SwitchTypeEnum.PRIMARY" },
},
color: { control: { type: "select", options: SwitchTypeEnum },
},
};