gatsby-recipe-storybook-ts

• Gatsby
• Gatsby Recipes
• Storybook
• TypeScript

In a recent post i introduced Gatsby recipes and talked about a new recipe i created that automates the Storybook setup process gatsby-recipe-storybook-js. You’ll notice that this recipe is called gatsby-recipe-storybook-js and focusses on the Webpack config for JavaScript projects.

In this post i’m going to introduce a TypeScript variant of the same recipe. The steps to the recipe are similar to the JavaScript version but with some extra dependencies and one small snag which i’ll explain shortly.

The recipe

The complete steps of my recipe are as follows:

• Install TypeScript
• Install babel plugins and presets
• Install react-docgen-typescript-loader
• Install Storybook React NPM packages and addons
• Create custom Storybook webpack config (main.js) for js|jsx and ts|tsx
• Configure Storybook / Gatsby Link settings (preview.js)
• Create example Link stories
• Add Storybook npm scripts to package.json

You can test out my recipe gatsby-recipe-storybook-ts by running the following in your CLI

gatsby recipes https://raw.githubusercontent.com/PaulieScanlon/gatsby-recipe-storybook-ts/master/gatsby-recipe-storybook-ts.mdx

🚨 Update:

This recipe is now part of the official Gatsby CLI 🎉 You can test it out by running the following in your CLI 👇

 gatsby recipes storybook-ts.mdx

One small snag

In the previous JavaScript recipe i talked about the Webpack config required for Storybook to transpile JavaScript code in to ES5 / CommonJs and when i initially wrote this recipe i removed the JavaScript part of the config and focussed on the config to transpile from TypeScript to ES5 / CommonJs… i later discovered i need both.

The reason is, whilst this new Webpack config will transpile your TypeScript code you’ll also need to continue to transpile any JavaScript ES6 code. (Gatsby is ES6)

In short if you’re using TypeScript a Webpack config is required to transpile both js|jsx and ts|tsx

The repo can be found here on GitHub and if you’re interested in the Webpack config you can find that here in main.js

Lemme know how you get on! @pauliescanlon