Why do we need ComponentStory, ComponentMeta in styorybook/react

user_10774102 0
Viewed 802
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';

import Button, { Props } from 'components/Button';

export default {
  title: 'UI/Button',
  component: Button,
  argTypes: {},
} as ComponentMeta<typeof Button>;

const Template: ComponentStory<typeof Button> = ({
  onClick,
  children,
}: Props) => <Button onClick={onClick}>{children}</Button>;

export const Primary = Template.bind({});

Primary.args = {
  children: 'Button',
};

I don't really understand what ComponentMeta<typeof Button> really add , and also ComponentStory<typeof Button> , when you don't add it typescript just highlight that .args doesn't exist on Template . And also , typeof Button it just a function . Can it be written better or easier , or can I skip it, it looks strange , like boilerplate ?

storybook reactjs
1 Answers

These types not only give you type safety and autocompletion for Meta and Story attributes, but they also automatically infer the props of components passed into the generics and reflect those types in the args property.

This is great because this way you don't need to export the type of props of your component just to satisfy Storybook.

Note the difference between type casting and no type casting when using Intellisense (auto-completion): type casting

no type casting

user_5727470
Related