Storybook config in typescript

Question

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.

Gebhart

Answer 1

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.

Gebhart

Please clarify "Configs directory should be added to include option of typescript preset and tsconfig.json". What did you change exactly and where? – Quentin

Update: this works for me, including main.ts in the latest [email protected]. – Dubitation

@Quentin He meant there is a include option inside tsconfig.json – Cadi

Answer 2

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.

Brinker

Good one on tsconfig-paths and TS_NODE_PROJECT. – Hamza

You can also add ``` "tsnode":{ compilerOptions: { module: 'commonjs', }, } ``` to your tsconfig.json, and then it should work without setting TS_NODE_PROJECT (telling storybook which tsconfig.json to use manually). – Baryta

Answer 3

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;

Tswana

for builder vite you import like this: import type {StorybookViteConfig} from "@storybook/builder-vite"; – Nisbet

Turns out you can just rename your files to preview.ts and main.ts, and they'll continue to work fine. – Romeo

Answer 4

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.

Wrongly