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