fbredius/storybook

import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
import { DocgenButton } from '../../components/DocgenButton';
import { ButtonGroup, SubGroup } from '../../components/ButtonGroup';
import { ForwardRefButton } from '../../components/ForwardRefButton';
import { MemoButton } from '../../components/MemoButton';
import { OptionalButton } from '../../components/OptionalButton';

<Meta
  title="Addons/Docs/props"
  component={ButtonGroup}
  subcomponents={{ SubGroup }}
  parameters={{ controls: { expanded: false } }}
/>

export const Template = (args) => (
  <table>
    <tbody>
      {Object.entries(args).map(([key, val]) => (
        <tr key={key}>
          <td>{key}</td>
          <td>{val && val.toString()}</td>
        </tr>
      ))}
    </tbody>
  </table>
);

## ArgTypes

<Canvas>
  <Story
    name="ArgTypes"
    args={{
      boolArg: true,
      stringArg: 'overwritten',
      arrayArg: ['a', 'b'],
    }}
    argTypes={{
      boolArg: {
        name: 'boolArg',
        type: { name: 'boolean' },
        description: 'bool description',
        control: 'boolean',
      },
      stringArg: {
        name: 'stringArg',
        type: { name: 'string' },
        description: 'bar description',
        defaultValue: 'bar default',
        table: {
          defaultValue: {
            summary: 'bar def',
            detail: 'some long bar default',
          },
        },
        control: 'text',
      },
      arrayArg: {
        name: 'arrayArg',
        type: { name: 'array', value: { name: 'string' } },
        description: 'baz description',
        control: 'array',
      },
      selectArg: {
        name: 'selectArg',
        type: { name: 'enum' },
        defaultValue: 2,
        control: {
          type: 'select',
          options: {
            a: 1,
            b: 2,
            c: 3,
          },
        },
      },
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="ArgTypes" />

## ArgTypes w/ Component

<ArgsTable story="ArgTypes" showComponent />

## Args

<Canvas>
  <Story
    name="Args"
    args={{
      foo: false,
      bar: '',
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Args" />

## Component Story

<Canvas>
  <Story
    name="Component"
    argTypes={{
      background: { control: { type: 'color' } },
    }}
  >
    {({ background, children }) => {
      const contents =
        children && children.length > 0 ? children : [<DocgenButton key="child" label="child" />];
      return <ButtonGroup background={background}>{contents}</ButtonGroup>;
    }}
  </Story>
</Canvas>

<ArgsTable story="Component" />

## Controls Story

<Canvas>
  <Story
    name="Controls"
    args={{
      background: '#ff0',
      label: 'apple',
      count: 5,
    }}
    argTypes={{
      count: { control: { type: 'range', min: 0, max: 10 } },
      label: {
        control: { type: 'select', options: ['apple', 'banana', 'cherry'] },
      },
      background: { control: { type: 'color' } },
    }}
  >
    {({ background, label, count }) => {
      return (
        <ButtonGroup background={background}>
          {Array.from({ length: count }, (_, i) => (
            <DocgenButton key={i} label={`${label} ${i}`} />
          ))}
        </ButtonGroup>
      );
    }}
  </Story>
</Canvas>

<ArgsTable story="Controls" />

## Components

<ArgsTable components={{ ButtonGroup, SubGroup }} />

## Component

<ArgsTable of={DocgenButton} />

## OptionalButton

<ArgsTable of={OptionalButton} />