Type 'boolean' is not assignable to type 'StoryFnReactReturnType' React Storybook in Typescript

Viewed 792

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' 

More Context

Am I missing some sort of configuration?

1 Answers

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.

Related