CODEWITHSUNDEEP
typescriptconfigstorybook
Yaroslav Kishchenko
Yaroslav Kishchenko

Reputation: 483

Storybook config in typescript

I would like to write storybook decorator. Is there any way to write it and preview.js in typescript?

I already succeeded in writing stories itself in TS, and now would like to write storybook config in TS.

Upvotes: 17

Views: 21193

Answers (4)

Alvis
Alvis

Reputation: 590

Since storybook 6.3, you can write main.ts and preview.ts in typescript. See the example in the 6.3.0 release here.

Note: If you use a newer version than 6.3.0, change the tag filter in the repository link above to match and locate a similar example in case the syntax has changed.

However, the caveat here is that you cannot use {"target": "ESNext"} in your typical tsconfig.json because node doesn't support ES module natively, yet.

If you want ESNext, for example using storybook alongside rollup, a workaround is needed. My approach is to configure storybook to use another tsconfig.json via the environment variable TS_NODE_PROJECT. For example

.storybook/tsconfig.json

{
  "extends": "..",
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES2017"
  }
}

Then run cross-env TS_NODE_PROJECT=.storybook/tsconfig.json start-storybook.

The reason it works because storybook uses webpack which in turn using tsconfig-paths to resolve the path for tsconfig.json.

Upvotes: 23

tim-phillips
tim-phillips

Reputation: 1087

To use TypeScript for your config files, change them to main.ts and preview.ts and then create .storybook/.babelrc and add the following:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

https://storybook.js.org/docs/react/configure/overview#configure-your-project-with-typescript

Note: there is a bug that breaks npm run storybook if the ts-node package exists anywhere in your dependency tree.

Upvotes: 2

Filip Seman
Filip Seman

Reputation: 1734

Since v6.5 simply import the type and create a configuration object.

// .storybook/main.ts

import type { StorybookConfig } from '@storybook/react/types';

const config: StorybookConfig = {
    ...
}

module.exports = config;

Upvotes: 4

Yaroslav Kishchenko
Yaroslav Kishchenko

Reputation: 483

I finally manage to make it works.

  • Configs directory should be added to include option of typescript preset and tsconfig.json
  • Set module resolution to "node", because for some reasons it got set to "classic" for config folder

Also, main.js should stay JS file, because only after parsing main.js config, storybook able to use TS preset.

Upvotes: 7

Related Questions