How to document typescript type in storybook?

@wilmer.lemke 

To document TypeScript types in Storybook, you can use the props table documentation feature in Storybook to describe the types of props that a component expects.

Here's an example of how you can document TypeScript types in Storybook:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

import React from 'react';
import { Story, Meta } from '@storybook/react/types-6-0';
import { Button, ButtonProps } from './Button';

export default {
  title: 'Button',
  component: Button,
  argTypes: {
    onClick: {
      action: 'clicked',
    },
  },
  parameters: {
    docs: {
      description: {
        component: 'A simple button component',
      },
    },
  },
} as Meta;

const Template: Story<ButtonProps> = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Primary Button',
};

export const Secondary = Template.bind({});
Secondary.args = {
  primary: false,
  label: 'Secondary Button',
};

In the above example, we have defined a Button component and its props using TypeScript types. We then create a Template function that takes ButtonProps as its argument and renders the Button component with those props.

The Primary and Secondary stories are created using the Template function and setting the props accordingly. This setup allows us to generate a props table in the Storybook UI that documents the types of props that the Button component expects.

By following this pattern, you can effectively document TypeScript types in Storybook and provide clear documentation for your components.