Typescript design token docs in Storybook

#typescript #webdev #design #storybook

Storybook is great for documenting UI components but what about data structures such as a themes and design tokens? Here's a super quick way to add design token documentation into your Storybook.

Using MDX and ArgsTable

In designtoken.stories.mdx:

import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
import { Theme, Breakpoints } from './helpers';

<Meta title="Design Tokens/Theme" />

### Theme

<ArgsTable of={Theme} />

#### Breakpoint Device Types

<ArgsTable of={Breakpoints} />

<Canvas>
  <Story name="Theme">
    <span>See Docs tab</span>
  </Story>
</Canvas>

Where helper.tsx is:

import { ThemeType, theme } from '../DesignTokens';

export const Theme: (Theme: ThemeType) => void = () => {};

export const Breakpoints: (Breakpoints: typeof theme.Breakpoints) => void = () => {};

This super simple approach allows us describe important contracts throughout our design system implementation, without the need to manually write and maintain that documentation. Below is a screenshot of how that might look.