From 90c59ed5fea8b5717b5e4639f805d46f6f88dda0 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Wed, 6 Jul 2022 22:20:56 -0400 Subject: [PATCH 1/4] Clarify use of .babelrc --- docs/configure/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/configure/overview.md b/docs/configure/overview.md index 7ee09e53ec92..77b757ccb082 100644 --- a/docs/configure/overview.md +++ b/docs/configure/overview.md @@ -158,7 +158,7 @@ If you would like, you can also write your Storybook configuration using TypeScr -This babel config will only be used to process files in the `.storybook/` directory, and will not affect your stories. +This babel config will be used to process your stories, as well as your config files. Rename your `.storybook/main.js` to `.storybook/main.ts` and restart your Storybook. From 3f2690f15c922f7c07151dce113021ad3ce41a3c Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Wed, 6 Jul 2022 22:21:14 -0400 Subject: [PATCH 2/4] Mention ts-node --- docs/configure/overview.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/configure/overview.md b/docs/configure/overview.md index 77b757ccb082..cc9bfc999aac 100644 --- a/docs/configure/overview.md +++ b/docs/configure/overview.md @@ -160,6 +160,8 @@ If you would like, you can also write your Storybook configuration using TypeScr This babel config will be used to process your stories, as well as your config files. +Alternatively, you can install [`ts-node`](https://typestrong.org/ts-node/) in your project, which will be used to process your config files without the need for a `.babelrc`. + Rename your `.storybook/main.js` to `.storybook/main.ts` and restart your Storybook. ### Using Storybook Types in Your Configuration From 673dd69f03afdaa100e7509ab75b63e4207b0b93 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Wed, 6 Jul 2022 22:21:31 -0400 Subject: [PATCH 3/4] Format file with prettier --- docs/configure/overview.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/configure/overview.md b/docs/configure/overview.md index cc9bfc999aac..699c50803e55 100644 --- a/docs/configure/overview.md +++ b/docs/configure/overview.md @@ -180,20 +180,20 @@ See the vite builder [TypeScript documentation](https://github.com/storybookjs/b -| Configuration element | Description | -| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `stories` | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.ts` | -| `staticDirs` | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook
`staticDirs:['../public']` | -| `addons` | Sets the list of [addons](https://storybook.js.org/addons/) loaded by Storybook
`addons:['@storybook/addon-essentials']` | -| `typescript` | Configures how Storybook handles [TypeScript files](./typescript.md)
`typescript: { check: false, checkOptions: {} }` | -| `framework` | Configures Storybook based on a set of framework-specific settings
`framework:'@storybook/svelte'` | -| `core` | Configures Storybook's internal features.
`core: { builder: 'webpack5' }` | -| `features` | Enables Storybook's additional features.
See table below for a list of available features `features: { storyStoreV7: true }` | -| `refs` | Configures [Storybook composition](../sharing/storybook-composition.md)
`refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` | -| `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging
`logLevel: 'debug'` | -| `webpackFinal` | Customize Storybook's [Webpack](../builders/webpack.md) setup
`webpackFinal: async (config:any) => { return config; }` | +| Configuration element | Description | +| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `stories` | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.ts` | +| `staticDirs` | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook
`staticDirs:['../public']` | +| `addons` | Sets the list of [addons](https://storybook.js.org/addons/) loaded by Storybook
`addons:['@storybook/addon-essentials']` | +| `typescript` | Configures how Storybook handles [TypeScript files](./typescript.md)
`typescript: { check: false, checkOptions: {} }` | +| `framework` | Configures Storybook based on a set of framework-specific settings
`framework:'@storybook/svelte'` | +| `core` | Configures Storybook's internal features.
`core: { builder: 'webpack5' }` | +| `features` | Enables Storybook's additional features.
See table below for a list of available features `features: { storyStoreV7: true }` | +| `refs` | Configures [Storybook composition](../sharing/storybook-composition.md)
`refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` | +| `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging
`logLevel: 'debug'` | +| `webpackFinal` | Customize Storybook's [Webpack](../builders/webpack.md) setup
`webpackFinal: async (config:any) => { return config; }` | | `viteFinal` | Customize Storybook's Vite setup when using the [vite builder](https://github.com/storybookjs/builder-vite)
`viteFinal: async (config: Vite.InlineConfig, options: Options) => { return config; }` | -| `env` | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration).
`env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` | +| `env` | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration).
`env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` | ## Configure story rendering From dd5f380648290af37ec560771836d0a28537e737 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Wed, 6 Jul 2022 22:21:50 -0400 Subject: [PATCH 4/4] Remove @babel/preset-env from example --- docs/snippets/common/storybook-ts-config-babelrc.js.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/snippets/common/storybook-ts-config-babelrc.js.mdx b/docs/snippets/common/storybook-ts-config-babelrc.js.mdx index 2fbafc24bc57..8f69b981507b 100644 --- a/docs/snippets/common/storybook-ts-config-babelrc.js.mdx +++ b/docs/snippets/common/storybook-ts-config-babelrc.js.mdx @@ -3,7 +3,6 @@ { "presets": [ - "@babel/preset-env", "@babel/preset-typescript" ] }