Storybook, React, and TypeScript

Note: I originally posted this on Medium.

I already had a ReactJS and TypeScript “starter” repo, but I wanted to add Storybook. Storybook doesn’t come setup with TypeScript by default, so here is how I got it working. I was sloppy this time around and didn’t save the links to the couple of repos/articles I used to troubleshoot this online, so please forgive the lack of references. Here are the instructions:

Install dependencies:

yarn add @storybook/react babel-core ts-loader @types/storybook__react @types/storybook__addon-options @types/storybook__addon-actions @types/storybook__addon-links --dev

Install storybook-cli globally so we can use it to init storybook in our project:

yarn global add @storybook/cli
getstorybook

Convert storybook index file to a tsx file:

mv ./stories/index.js ./stories/index.tsx

Update imports in ./stories/index.ts:

import React from ‘react’ becomes…

import * as React from 'react'

Now we can remove the demo code and write some simple TypeScript to prove it works in the Storybook app (this is in ./stories/index.tsx)

import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
type Foo = (props:FooProps) => JSX.Element
interface FooProps {
  children?: any
}
const Foo:Foo = ({children}) => <div>{children}</div>
storiesOf('Welcome', module).add('to Storybook', () => <Foo children="Hello, World!" />)

Run yarn run storybook and navigate to http://localhost:6006 to see the working storybook app in the browser!

Here is the the working code: https://github.com/miketmoore/react-webpack-typescript-boilerplate