Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clarify main.ts typescript instructions #18101

Merged
merged 6 commits into from
Jul 6, 2022
Merged

Clarify main.ts typescript instructions #18101

Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b52a4ea
Clarify main.ts typescript instructions
IanVS Apr 29, 2022
0b7bb97
Clarify what "API" means here
IanVS Apr 29, 2022
6e9fd65
Add `viteFinal` docs
IanVS Apr 29, 2022
d75cade
Point to vite builder typescript docs
IanVS Apr 29, 2022
5d27ec9
Update docs/configure/overview.md
IanVS Apr 30, 2022
a5eace1
Merge branch 'next' into typescript-config
ndelangen Jul 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 22 additions & 17 deletions docs/configure/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,9 +145,7 @@ This feature is experimental, and it has some limitations on what you can and ca

## Configure your project with TypeScript

If you need, you can also configure your Storybook using TypeScript. To get started, add a `.babelrc` file inside your project and include the following Babel presets:

Rename your `.storybook/main.js` to `.storybook/main.ts` and restart your Storybook.
If you would like, you can also write your Storybook configuration using TypeScript. To get started, add a `.babelrc` file inside your project and include the following Babel presets:

<!-- prettier-ignore-start -->

Expand All @@ -159,9 +157,13 @@ Rename your `.storybook/main.js` to `.storybook/main.ts` and restart your Storyb

<!-- prettier-ignore-end -->

### Using Storybook API
This babel config will only be used to process files in the `.storybook/` directory, and will not effect your stories.
IanVS marked this conversation as resolved.
Show resolved Hide resolved

Rename your `.storybook/main.js` to `.storybook/main.ts` and restart your Storybook.

### Using Storybook Types in Your Configuration

You can also use Storybook's API to configure your project with TypeScript. Under the hood, it mirrors the exact configuration you get by default. Below is an abridged Storybook configuration with TypeScript and additional information about each configuration element.
You can also use Storybook's TypeScript types to ensure you are using valid options and get autocompletion in your editor. Below is an abridged Storybook configuration with TypeScript types and additional information about each configuration element.

<!-- prettier-ignore-start -->

Expand All @@ -171,20 +173,23 @@ You can also use Storybook's API to configure your project with TypeScript. Unde
]}
/>

See the vite builder [TypeScript documentation](https://github.com/storybookjs/builder-vite#typescript) if using `@storybook/builder-vite`.

<!-- prettier-ignore-end -->

| 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 <br/> `staticDirs:['../public']` |
| `addons` | Sets the list of [addons](/addons) loaded by Storybook <br/> `addons:['@storybook/addon-essentials']` |
| `typescript` | Configures how Storybook handles [TypeScript files](./typescript.md) <br/> `typescript: { check: false, checkOptions: {} }` |
| `framework` | Configures Storybook based on a set of framework-specific settings <br/> `framework:'@storybook/svelte'` |
| `core` | Sets Storybook's Webpack configuration <br/> `core:{ builder: 'webpack5'}` |
| `features` | Enables Storybook's additional features <br/>. See table below for a list of available features `features: { storyStoreV7: true }` |
| `refs` | Configures [Storybook composition](../sharing/storybook-composition.md) <br/> `refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` |
| `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging <br/> `logLevel: 'debug'` |
| `webpackFinal` | Customize Storybook's [Webpack](./webpack.md) setup <br/> `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 <br/> `staticDirs:['../public']` |
| `addons` | Sets the list of [addons](/addons) loaded by Storybook <br/> `addons:['@storybook/addon-essentials']` |
| `typescript` | Configures how Storybook handles [TypeScript files](./typescript.md) <br/> `typescript: { check: false, checkOptions: {} }` |
| `framework` | Configures Storybook based on a set of framework-specific settings <br/> `framework:'@storybook/svelte'` |
| `core` | Sets Storybook's Webpack configuration <br/> `core:{ builder: 'webpack5'}` |
| `features` | Enables Storybook's additional features <br/>. See table below for a list of available features `features: { storyStoreV7: true }` |
| `refs` | Configures [Storybook composition](../sharing/storybook-composition.md) <br/> `refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` |
| `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging <br/> `logLevel: 'debug'` |
| `webpackFinal` | Customize Storybook's [Webpack](./webpack.md) setup <br/> `webpackFinal: async (config:any) => { return config; }` |
| `viteFinal` | Customize Storybook's Vite setup when using the [vite builder](https://github.com/storybookjs/builder-vite) <br/> `viteFinal: async (config: Vite.InlineConfig, options: Options) => { return config; }` |

## Configure story rendering

Expand Down