Issue
I'm trying to get a simple Button component working with Storybook in typescript. I'm following The Docs and this example.
My Component and story is as follows:
components/Button.tsx:
import {FC} from 'react';
export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
children: React.ReactNode;
variant: "primary" | "danger";
shape?: "rounded";
}
export const Button: FC<ButtonProps> = ({
children,
variant,
shape,
...props
}) => {
const classNames = `btn btn-${variant} btn-${shape}`;
return (
<button className={classNames} {...props}>
{children}
</button>
);
};
stories/Button.stories.ts
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Button, ButtonProps } from '../components/Button';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as ComponentMeta<typeof Button>;
//👇 We create a “template” of how args map to rendering
const Template: ComponentStory<typeof Button> = (args) => <Button { ...args } />;
export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: 'Button',
};
This line:
const Template: ComponentStory<typeof Button> = (args) => <Button { ...args } />;
Throws the following error:
Type 'boolean' is not assignable to type 'StoryFnReactReturnType'
Am I missing some sort of configuration?
Solution
First thing seems like you'll need to change the Button.stories.ts
file to .tsx
, regular typescript thinks the inside of the <> should be a type. After that, the Primary.args
will need to match the ButtonProps you defined.
Answered By - chadamo
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.