@storybook/preset-typescript
TypeScript icon, indicating that this package has built-in type declarations

3.0.0 • Public • Published

Storybook TypeScript preset

One-line TypeScript configuration for Storybook.

Installation

First, install this preset to your project.

npm install -D @storybook/preset-typescript ts-loader fork-ts-checker-webpack-plugin # or yarn

Once installed, add this preset to the appropriate file:

  • ./.storybook/main.js (for Storybook 5.3.0 and newer)

    module.exports = {
      addons: ['@storybook/preset-typescript'],
    };
  • ./.storybook/presets.js (for all Storybook versions)

    module.exports = ['@storybook/preset-typescript'];

Advanced usage

You can also pass extra configuration options to configure the preset. For example:

// ./storybook/main.js
const path = require('path');

module.exports = {
  addons: [
    {
      name: '@storybook/preset-typescript',
      options: {
        tsLoaderOptions: {
          configFile: path.resolve(__dirname, './tsconfig.json'),
        },
        forkTsCheckerWebpackPluginOptions: {
          colors: false, // disables built-in colors in logger messages
        },
        include: [path.resolve(__dirname, '../src')],
        transpileManager: true,
      },
    },
  ],
};

All available options are described in the Options section below.

Options

forkTsCheckerWebpackPluginOptions

Type: Object

Default value
undefined;

fork-ts-checker-webpack-plugin options. transpileOnly flag needs to be set to true in tsLoaderOptions to be able to set options for this webpack plugin.

include

Type: Rule condition

Default value
undefined;

include rule for /\.tsx?$/.

transpileManager

Type: Boolean

Default value
false;

Toggles TypeScript transpilation on manager side.

Readme

Keywords

none

Package Sidebar

Install

npm i @storybook/preset-typescript

Weekly Downloads

45,292

Version

3.0.0

License

MIT

Unpacked Size

16.4 kB

Total Files

15

Last publish

Collaborators

  • domyen
  • kasperpeulen
  • valentinpalkovic
  • jreinhold
  • kylegach
  • ndelangen
  • shilman
  • tmeasday
  • ghengeveld
  • winkervsbecks
  • yannbf