DEV Community

James
James

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

Where helper.tsx is:

import { ThemeType, theme } from '../DesignTokens'; export const Theme: (Theme: ThemeType) => void = () => {}; export const Breakpoints: (Breakpoints: typeof theme.Breakpoints) => void = () => {};
Enter fullscreen mode Exit fullscreen mode

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.

Screenshot of Storybook documentation showing properties and type information

Top comments (0)