Storybook + JSDoc + Typescript

Button.jsx

import React from 'react';
import './button.css';

/**
 * @param { import('./types').ButtonProps} props
 */
export const Button = (props) => {
  const { backgroundColor = '', primary = false, size = 'medium', label, ...restProps } = props;
  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
  return (
    <button
      type="button"
      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
      style={{ backgroundColor }}
      {...restProps}
    >
      {label}
    </button>
  );
};

Button.stories.tsx

import React from 'react';
import { Story, Meta } from '@storybook/react';

import { ButtonProps } from './types';
import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  parameters: {
    docs: {
      description: {
        component: 'Primary UI component for user interaction',
      },
    },
    controls: { sort: 'requiredFirst' },
  },
  argTypes: {
    backgroundColor: {
      description: 'Background color of button',
      control: 'color',
      table: {
        type: {},
      },
    },
    primary: {
      description: 'Is it primary or not',
      table: {
        defaultValue: { summary: false },
      },
      control: {
        type: 'boolean',
      },
    },
    size: {
      description: 'Size of Button',
      options: ['small', 'medium', 'large'],
      table: {
        type: {},
        defaultValue: { summary: 'medium' },
      },
      control: {
        type: 'inline-radio',
      },
    },
    label: {
      description: 'Content of button',
      type: {
        required: true,
      },
      control: {
        type: 'text',
      },
    },
  },
} as Meta;

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

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

types.d.ts

export type ButtonProps = {
  backgroundColor?: string;
  primary?: boolean;
  size?: 'small' | 'medium' | 'large';
  label: string;
};