Setting up Storybook for Preact with TypeScript

29 March 2020

Storybook is a useful tool for visualising what your app’s front-end components will look like across different scenarios.

This guide will cover how you can add Storybook to your TypeScript Preact app.

Creating a Preact app using TypeScript

If you don’t already have a Preact app using TypeScript, you can easily create one using the preact-cli tool:

npm install -g preact-cli
preact create typescript app-name-here

Remember to cd into your app’s folder after you’ve created it!

Installing and setting up Storybook

Install Storybook for Preact:

npm install @storybook/preact --save-dev

Then create a .storybook/main.js file, and add the following:

module.exports = {
    stories: ['../src/**/story.tsx'],
    webpackFinal: async config => {
        config.module.rules.push({
            test: /\.(ts|tsx)$/,
            use: [{
                loader: require.resolve('ts-loader'),
            }],
    });
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
    },
};

Note that you will have to modify the above code if you are not using ts-loader

Then you can add a new script to your package.json file:

"scripts": {
    "storybook": "start-storybook"
}

(Optional) delete the declaration.d.ts file

If you created your app using the preact-cli tool, I found that deleting the declaration.d.ts file in your src folder was required to get Storybook working. I’m not too sure why, but give it a go if things are breaking for you.

Write your first story

Create a file called story.tsx and import in one of your components:

import { h } from 'preact';
import Component from './index';
 
export default { title: 'Component' }
 
export const coolComponent = () => <Component/>;

Now if you run the command:

npm run storybook

You will be able to see your storybooks in action.

Happy coding!

References

Storybook for Preact