braedongough / cra-typescript-storybook

Repo for How to add Storybook to a Typescript CRA project

How to add Storybook to a Typescript CRA project

1. Run npx create-react-app [project-name] --template typescript
2. Run npx -p @storybook/cli sb init
3. In .storybook/main.js update line 2 to look for .tsx files instead of .js. It should look like this:

module.exports = {
  stories: ['../src/**/*.stories.tsx'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions',
    '@storybook/addon-links',
  ],
};

4. Running yarn storybook should now show any *.stories.tsx files you've created!

Docs to reference

• Developing Components in Isolation - create-react-app.dev

• TypeScript Config - storybook.js.org

• Writing Stories - storybook.js.org