shilman/storybook-controls-typescript-walkthrough.md

## storybook-controls-typescript-walkthrough.md

      
    Raw
  

              storybook-controls-typescript-walkthrough.md
            
          
    Storybook Controls w/ CRA & TypeScript

This is a quick-and-dirty walkthrough to set up a fresh project with Storybook Controls. It's also an introduction to Storybook Args, which is a major update to Storybook's Component Story Format (CSF): a more portable and ergonomic way to write stories.
This walkthrough gives you:

Auto-generated controls in the addons panel
Auto-generated controls in your Docs
Auto-generated actions for event logging
An introduction to the future of CSF

The purpose of this walkthrough is to get people started with Args/Controls. There are countless permutations and variables which can influence the setup, and we plan to support all common use cases by the time the feature is released. Args is currently in RC and it's pretty stable. We need testing and feedback to get it into final release state!
This document is based on the popular Storybook Docs w/ CRA & TypeScript walkthrough. If you want a full tutorial on addon-docs, please see Design Systems for Developers, which goes into much more depth but is based on JS and was written before Args existed.
What you'll make

This is a simple Storybook that has automatically-generated actions for component event handlers and interactive controls in the component's prop table:

  
Step 1: Initialize CRA w/ TS

yarn create react-app cra-controls --template typescript
Step 2: Initialize Storybook w/ TS

cd cra-controls
npx sb@next init --story-format=csf-ts
Step 3: Verify Installation

yarn storybook
Then edit the button label in ./src/stories/1-Button.stories.tsx and verify that the story updates in Storybook.
Verify that the addons panel is working at the bottom of the screen:

That clicking the button logs an action in the Actions tab.
That there's a Controls tab in the addons panel, and that editing the button label updates story.

Also verify that there's a Docs tab, and that it shows something reasonable-ish. We'll make it better in the next step.
Step 4: Test MDX

Finally, test that MDX is working. You already registered *.stories.mdx in Step 3, so just create ./src/stories/Test.stories.mdx:
import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
import { Button } from "./Button";

<Meta title="Test" component={Button} />

# Testing Button

Here's some _markdown_!

export const Template = (args) => <Button {...args} />;

<Preview>
  <Story name="button" args={{ children: "hiya" }}>
    {Template.bind({})}
  </Story>
</Preview>

# Props

<Props story="button" />
You should see a new entry in your Storybook's navigation, a story, and the documentation you wrote in the Docs tab. The Props block still supports the previous 5.x configuration, e.g. <Props of={Button} />. The difference is that the story version generates controls for the given story.
Step 9: More info & Feedback

This document gives a basic setup to get you started. For more information on:

Args. See the Args RFC and the CSF documentation.
Controls. See the Controls documentation
Props. There is separate documentation for the props table.

If you run into any problems or have any suggestions, please file an issue in the Storybook Github Repo. We're doing our best to provide full support for JS/TS and all the frameworks that Storybook supports. Thank you for your help improving Storybook Args!