I'm trying to use TS and storybook children in args, https://storybook.js.org/docs/react/writing-stories/stories-for-multiple-components#using-children-as-an-arg
I have a Button.stories.tsx:
import { ComponentStory, ComponentMeta } from "@storybook/react"
import { Button } from "./Button"
export default {
title: "Example/Button",
component: Button,
argTypes: {
backgroundColor: { control: "color" },
},
} as ComponentMeta<typeof Button>
const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />
export const Primary = Template.bind({})
Primary.args = {
primary: true,
label: "Button",
}
and ButtonGroup.stories.tsx:
import { ComponentStory, ComponentMeta } from "@storybook/react"
import { ButtonGroup } from "./ButtonGroup"
import { Primary } from "../Button/Button.stories"
export default {
title: "Example/ButtonGroup",
component: ButtonGroup,
argTypes: {},
}
const Template: ComponentStory<typeof ButtonGroup> = (args) => <ButtonGroup {...args} />
export const PrimaryButtonGroup = Template.bind({})
PrimaryButtonGroup.args = {
children: (
<>
<Primary {...Primary.args} />
<Primary {...Primary.args} />
</>
),
}
There is a type error on the <Primary {...Primary.args} /> on PrimaryButtonGroup.args. The problem is the args is optional, so the primary and label from Primary.args could be undefined. So it cannot match the label type string.
How can I fix this issue?