Add Storybook

Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It is an organized and efficient way to build stunning UIs.

This recipe adds support for JavaScript and TypeScript components.

This recipe:

---

Installs TypesScript + babel plugins and presets as well as the Storybook React NPM packages and addons.

<NPMPackage name="typescript" /> <NPMPackage name="babel-loader" dependencyType="development" /> <NPMPackage name="@babel/preset-react" dependencyType="development" /> <NPMPackage name="@babel/preset-env" dependencyType="development" /> <NPMPackage name="@babel/preset-typescript" dependencyType="development" /> <NPMPackage name="@babel/plugin-proposal-class-properties" dependencyType="development" /> <NPMPackage name="babel-plugin-remove-graphql-queries" dependencyType="development" /> <NPMPackage name="react-docgen-typescript-loader" dependencyType="development" /> <NPMPackage name="@storybook/react" dependencyType="development" /> <NPMPackage name="@storybook/addon-actions" dependencyType="development" /> <NPMPackage name="@storybook/addon-docs" dependencyType="development" />

---

Creates custom Storybook webpack config (main.js).

<File path="./.storybook/main.js" content="https://raw.githubusercontent.com/PaulieScanlon/gatsby-recipe-storybook-ts/master/recipe/main.js" />

---

Configures Storybook / Gatsby Link settings (preview.js).

<File path="./.storybook/preview.js" content="https://raw.githubusercontent.com/PaulieScanlon/gatsby-recipe-storybook-ts/master/recipe/preview.js" />

---

Creates example Link stories.

<File path="./src/components/Link.stories.tsx" content="https://raw.githubusercontent.com/PaulieScanlon/gatsby-recipe-storybook-ts/master/recipe/Link.stories.tsx" />

---

Adds Storybook npm scripts.

<NPMScript name="storybook" command="NODE_ENV=production start-storybook -s ./public -p 6006 --ci" /> <NPMScript name="build-storybook" command="NODE_ENV=production build-storybook" />

---

After installing this recipe and before you run Storybook, make sure you run gatsby develop or gatsby build. This ensures that Gatsby's GraphQL data is available in Storybook.