mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 21:21:05 +08:00
Additional fixes to docs and snippets
This commit is contained in:
jonniebigodes
parent
c4546985ed
commit
99c5d14402
25
docs/_snippets/react-vite-framework-options.md
Normal file
25
docs/_snippets/react-vite-framework-options.md
Normal file
@ -0,0 +1,25 @@
|
||||
```js filename=".storybook/main.js" renderer="react" language="js"
|
||||
export default {
|
||||
framework: {
|
||||
name: '@storybook/react-vite',
|
||||
options: {
|
||||
// ...
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
```ts filename=".storybook/main.ts" renderer="react" language="ts"
|
||||
import type { StorybookConfig } from '@storybook/react-vite';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
framework: {
|
||||
name: '@storybook/react-vite',
|
||||
options: {
|
||||
// ...
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
```
|
||||
25
docs/_snippets/react-webpack5-framework-options.md
Normal file
25
docs/_snippets/react-webpack5-framework-options.md
Normal file
@ -0,0 +1,25 @@
|
||||
```js filename=".storybook/main.js" renderer="react" language="js"
|
||||
export default {
|
||||
framework: {
|
||||
name: '@storybook/react-webpack5',
|
||||
options: {
|
||||
// ...
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
```ts filename=".storybook/main.ts" renderer="react" language="ts"
|
||||
import type { StorybookConfig } from '@storybook/react-webpack5';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
framework: {
|
||||
name: '@storybook/react-webpack5',
|
||||
options: {
|
||||
// ...
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
```
|
||||
@ -7,7 +7,7 @@ export default {
|
||||
```
|
||||
|
||||
```ts filename=".storybook/main.ts" renderer="svelte" language="ts"
|
||||
import { StorybookConfig } from '@storybook/nextjs';
|
||||
import { StorybookConfig } from '@storybook/sveltekit';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
// ...
|
||||
|
||||
@ -299,8 +299,8 @@ export const Combo: Story = {
|
||||
|
||||
<!-- 👇 This story should not be tested, but will appear in the sidebar and docs page -->
|
||||
<Story name="Combo" tags={['!test']}>
|
||||
<Button variant={1}>
|
||||
<Button variant={2}>
|
||||
<Button variant={1} />
|
||||
<Button variant={2} />
|
||||
</Story>
|
||||
```
|
||||
|
||||
@ -330,8 +330,8 @@ export const Combo: Story = {
|
||||
|
||||
<!-- 👇 This story should not be tested, but will appear in the sidebar and docs page -->
|
||||
<Story name="Combo" tags={['!test']}>
|
||||
<Button variant={1}>
|
||||
<Button variant={2}>
|
||||
<Button variant={1} />
|
||||
<Button variant={2} />
|
||||
</Story>
|
||||
```
|
||||
|
||||
|
||||
25
docs/_snippets/vue-vite-framework-options.md
Normal file
25
docs/_snippets/vue-vite-framework-options.md
Normal file
@ -0,0 +1,25 @@
|
||||
```js filename=".storybook/main.js" renderer="react" language="js"
|
||||
export default {
|
||||
framework: {
|
||||
name: '@storybook/vue3-vite',
|
||||
options: {
|
||||
docgen: 'vue-component-meta',
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
```ts filename=".storybook/main.jsts" renderer="vue" language="ts"
|
||||
import type { StorybookConfig } from '@storybook/vue3-vite';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
framework: {
|
||||
name: '@storybook/vue3-vite',
|
||||
options: {
|
||||
docgen: 'vue-component-meta',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
```
|
||||
25
docs/_snippets/vue-webpack5-framework-options.md
Normal file
25
docs/_snippets/vue-webpack5-framework-options.md
Normal file
@ -0,0 +1,25 @@
|
||||
```js filename=".storybook/main.js" renderer="vue" language="js"
|
||||
export default {
|
||||
framework: {
|
||||
name: '@storybook/vue-webpack5',
|
||||
options: {
|
||||
// ...
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
```ts filename=".storybook/main.ts" renderer="vue" language="ts"
|
||||
import type { StorybookConfig } from '@storybook/vue-webpack5';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
framework: {
|
||||
name: '@storybook/vue-webpack5',
|
||||
options: {
|
||||
// ...
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
```
|
||||
25
docs/_snippets/web-components-vite-framework-options.md
Normal file
25
docs/_snippets/web-components-vite-framework-options.md
Normal file
@ -0,0 +1,25 @@
|
||||
```js filename=".storybook/main.js" renderer="web-components" language="js"
|
||||
export default {
|
||||
framework: {
|
||||
name: '@storybook/web-components-vite',
|
||||
options: {
|
||||
// ...
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
```ts filename=".storybook/main.ts" renderer="web-components" language="ts"
|
||||
import type { StorybookConfig } from '@storybook/web-components-vite';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
framework: {
|
||||
name: '@storybook/web-components-vite',
|
||||
options: {
|
||||
// ...
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
```
|
||||
@ -1,8 +1,7 @@
|
||||
```js filename=".storybook/main.js" renderer="web-components" language="js"
|
||||
export default {
|
||||
// ...
|
||||
// framework: '@storybook/react-webpack5', 👈 Remove this
|
||||
framework: '@storybook/nextjs', // 👈 Add this
|
||||
framework: '@storybook/web-components-webpack5', // 👈 Add this
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
26
docs/_snippets/web-components-webpack5-framework-options.md
Normal file
26
docs/_snippets/web-components-webpack5-framework-options.md
Normal file
@ -0,0 +1,26 @@
|
||||
```js filename=".storybook/main.js" renderer="web-components" language="js"
|
||||
export default {
|
||||
// ...
|
||||
framework: {
|
||||
name: '@storybook/web-components-webpack5',
|
||||
options: {
|
||||
// ...
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
```ts filename=".storybook/main.ts" renderer="web-components" language="ts"
|
||||
import type { StorybookConfig } from '@storybook/web-components-webpack5';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
framework: {
|
||||
name: '@storybook/web-components-webpack5',
|
||||
options: {
|
||||
// ...
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
```
|
||||
33
docs/_snippets/web-components-webpack5-transpilation.md
Normal file
33
docs/_snippets/web-components-webpack5-transpilation.md
Normal file
@ -0,0 +1,33 @@
|
||||
```js filename=".storybook/main.js" renderer="web-components" language="js"
|
||||
export default {
|
||||
webpackFinal: async (config) => {
|
||||
// Find web-components rule for extra transpilation
|
||||
const webComponentsRule = config.module.rules.find(
|
||||
(rule) => rule.use && rule.use.options && rule.use.options.babelrc === false
|
||||
);
|
||||
// Add your own `my-library`
|
||||
webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`));
|
||||
|
||||
return config;
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
```ts filename=".storybook/main.ts" renderer="web-components" language="ts"
|
||||
import type { StorybookConfig } from '@storybook/web-components-webpack5';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
webpackFinal: async (config) => {
|
||||
// Find web-components rule for extra transpilation
|
||||
const webComponentsRule = config.module.rules.find(
|
||||
(rule) => rule.use && rule.use.options && rule.use.options.babelrc === false
|
||||
);
|
||||
// Add your own `my-library`
|
||||
webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`));
|
||||
|
||||
return config;
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
```
|
||||
@ -448,14 +448,18 @@ It may also contain at most one of the following operators:
|
||||
|
||||
If no operator is provided, that is equivalent to `{ truthy: true }`.
|
||||
|
||||
<IfRenderer renderer={[ 'angular', 'ember', 'web-components' ]}>
|
||||
## Troubleshooting
|
||||
## Troubleshooting
|
||||
|
||||
<IfRenderer renderer={['angular', 'ember', 'web-components']}>
|
||||
### Controls are not automatically generated for my component
|
||||
|
||||
If you're working with Angular, Ember, or Web Components, automatic argTypes and controls inference will not work out of the box and requires you to provide [additional configuration](#choosing-the-control-type) to allow Storybook to retrieve the necessary metadata and generate the needed argTypes and controls for your stories. However, if you need additional customization, you can always [define them manually](#fully-custom-args).
|
||||
</IfRenderer>
|
||||
|
||||
### The controls are not updating the story within the auto-generated documentation
|
||||
|
||||
If you turned off inline rendering for your stories via the [`inline`](../api/doc-blocks/doc-block-story.mdx#inline) configuration option, you would run into a situation where the associated controls are not updating the story within the documentation page. This is a known limitation of the current implementation and will be addressed in a future release.
|
||||
|
||||
## API
|
||||
|
||||
### Parameters
|
||||
|
||||
@ -11,7 +11,7 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
|
||||
* 🎛️ Compodoc integration
|
||||
* 💫 and more!
|
||||
|
||||
<If notRenderer={'angular'}>
|
||||
<If notRenderer="angular">
|
||||
<Callout variant="info">
|
||||
Storybook for Angular is only supported in [Angular](?renderer=angular) projects.
|
||||
</Callout>
|
||||
@ -19,10 +19,10 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
|
||||
{/* End non-supported renderers */}
|
||||
</If>
|
||||
|
||||
<If renderer={'angular'}>
|
||||
<If renderer="angular">
|
||||
## Requirements
|
||||
|
||||
* Angular ≥ 15.0 \< 19.0
|
||||
* Angular ≥ 15.0 \< 20.0
|
||||
* Webpack ≥ 5.0
|
||||
* Storybook ≥ 8.0
|
||||
|
||||
@ -110,7 +110,7 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
|
||||
|
||||
## Run Storybook
|
||||
|
||||
To run Storybook for a particular project, please run:
|
||||
To run Storybook for a particular project, please run the following:
|
||||
|
||||
```sh
|
||||
ng run <your-project>:storybook
|
||||
@ -126,11 +126,11 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
|
||||
|
||||
## Setup Compodoc
|
||||
|
||||
You can include JSDoc comments above components, directives, and other parts of your Angular code to include documentation for those elements. Compodoc uses these comments to [generate documentation](../../writing-docs/autodocs.mdx) for your application. In Storybook, it is useful to add explanatory comments above `@Inputs` and `@Outputs`, since these are the main elements that Storybook displays in its user interface. The `@Inputs` and `@Outputs` are the elements that you can interact with in Storybook, such as [controls](../../essentials/controls.mdx).
|
||||
You can include JSDoc comments above components, directives, and other parts of your Angular code to include documentation for those elements. Compodoc uses these comments to [generate documentation](../../writing-docs/autodocs.mdx) for your application. In Storybook, it is useful to add explanatory comments above `@Inputs` and `@Outputs`, since these are the main elements that Storybook displays in its user interface. The `@Inputs` and `@Outputs` are elements you can interact with in Storybook, such as [controls](../../essentials/controls.mdx).
|
||||
|
||||
### Automatic setup
|
||||
|
||||
When installing Storybook via `npx storybook@latest init`, you will be given the option to set up Compodoc automatically.
|
||||
When installing Storybook via `npx storybook@latest init`, you can set up Compodoc automatically.
|
||||
|
||||
### Manual setup
|
||||
|
||||
@ -182,24 +182,27 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
|
||||
}
|
||||
```
|
||||
|
||||
Go to your `.storybook/preview.js` and add the following:
|
||||
Go to your `.storybook/preview.ts` and add the following:
|
||||
|
||||
```ts title=".storybook/preview.ts"
|
||||
import type { Preview } from '@storybook/angular';
|
||||
|
||||
```js
|
||||
// .storybook/preview.js
|
||||
// 👇 Add these
|
||||
import { setCompodocJson } from '@storybook/addon-docs/angular';
|
||||
import docJson from '../documentation.json';
|
||||
setCompodocJson(docJson);
|
||||
|
||||
// ... rest of file
|
||||
const preview: Preview = {};
|
||||
export default preview;
|
||||
```
|
||||
|
||||
## `applicationConfig` decorator
|
||||
|
||||
If your component relies on application-wide providers, like the ones defined by BrowserAnimationsModule or any other modules which use the forRoot pattern to provide a ModuleWithProviders, you can apply the `applicationConfig` [decorator](../../writing-stories/decorators.mdx) to all stories for that component. This will provide them to the [bootstrapApplication function](https://angular.io/guide/standalone-components#configuring-dependency-injection), which is used to bootstrap the component in Storybook.
|
||||
If your component relies on application-wide providers, like the ones defined by [`BrowserAnimationsModule`](https://angular.dev/api/platform-browser/animations/BrowserAnimationsModule) or any other modules that use the forRoot pattern to provide a [`ModuleWithProviders`](https://angular.dev/api/core/ModuleWithProviders), you can apply the `applicationConfig` [decorator](../../writing-stories/decorators.mdx) to all stories for that component. This will provide them with the [bootstrapApplication function](https://angular.io/guide/standalone-components#configuring-dependency-injection), used to bootstrap the component in Storybook.
|
||||
|
||||
```ts title="ChipsModule.stories.ts"
|
||||
import { Meta, applicationConfig, StoryObj } from '@storybook/angular';
|
||||
|
||||
import { BrowserAnimationsModule, provideAnimations } from '@angular/platform-browser/animations';
|
||||
import { importProvidersFrom } from '@angular/core';
|
||||
|
||||
@ -223,14 +226,13 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<ChipsModule>;
|
||||
|
||||
export const WithCustomApplicationProvider: Story = {
|
||||
render: () => ({
|
||||
// Apply application config to a specific story
|
||||
applicationConfig: {
|
||||
// The providers will be merged with the ones defined in the applicationConfig decorators providers array of the global meta object
|
||||
// The providers will be merged with the ones defined in the applicationConfig decorator's providers array of the global meta object
|
||||
providers: [...],
|
||||
}
|
||||
})
|
||||
@ -261,7 +263,6 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
|
||||
],
|
||||
};
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<YourComponent>;
|
||||
|
||||
export const Base: Story = {};
|
||||
@ -284,11 +285,11 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
|
||||
|
||||
The Storybook [Angular builder](https://angular.io/guide/glossary#builder) is a way to run Storybook in an Angular workspace. It is a drop-in replacement for running `storybook dev` and `storybook build` directly.
|
||||
|
||||
You can run `npx storybook@next automigrate` to try let Storybook detect and automatically fix your configuration. Otherwise, you can follow the next steps to manually adjust your configuration.
|
||||
You can run `npx storybook@next automigrate` to try letting Storybook detect and automatically fix your configuration. Otherwise, you can follow the next steps to adjust your configuration manually.
|
||||
|
||||
#### Do you have only one Angular project in your workspace?
|
||||
|
||||
First, go to your `angular.json` and add `storybook` and `build-storybook` entries in `architect` section of your project like shown above.
|
||||
First, go to your `angular.json` and add `storybook` and `build-storybook` entries in your project's `architect` section, as shown [above](#manual-setup).
|
||||
|
||||
Second, adjust your `package.json` script section. Usually, it will look like this:
|
||||
|
||||
@ -312,7 +313,7 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
|
||||
}
|
||||
```
|
||||
|
||||
Also compodoc is now built-in in `@storybook/angular` and you don't have to call it explicitly. If were running compodoc in your `package.json` scripts like this:
|
||||
Also, `compodoc` is now built into `@storybook/angular`; you don't have to call it explicitly. If we're running `compodoc` in your `package.json` scripts like this:
|
||||
|
||||
```json title="package.json"
|
||||
{
|
||||
@ -337,11 +338,11 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
|
||||
|
||||
#### I have multiple projects in my Angular workspace
|
||||
|
||||
In this case you have to adjust your `angular.json` and `package.json` as described above for each project in which you want to use Storybook. Please note, that each project should have a dedicated `.storybook` folder, which should be placed in the root of the project.
|
||||
In this case, you have to adjust your `angular.json` and `package.json` as described above for each project you want to use Storybook. Please note that each project should have a dedicated `.storybook` folder placed at the project's root.
|
||||
|
||||
You can run `npx storybook@latest init` sequentially for each project to setup Storybook for each of them to automatically create the `.storybook` folder and create the necessary configuration in your `angular.json`.
|
||||
You can run `npx storybook@latest init` sequentially for each project to set up Storybook for each of them to automatically create the `.storybook` folder and create the necessary configuration in your `angular.json`.
|
||||
|
||||
You can then use [Storybook composition](https://storybook.js.org/docs/angular/sharing/storybook-composition) to composite multiple Storybooks into one.
|
||||
You can then combine multiple Storybooks with [Storybook composition](../../sharing/storybook-composition.mdx).
|
||||
|
||||
### How do I configure Angular's builder for Storybook?
|
||||
|
||||
@ -350,7 +351,9 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
|
||||
| Configuration element | Description |
|
||||
| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `"browserTarget"` | Build target to be served using the following format. <br /> `"example-project:builder:config"` |
|
||||
| `"tsConfig"` | Location of the TypeScript configuration file, relative to the current workspace. <br /> `"tsConfig": "./tsconfig.json"`. |
|
||||
| `"debugWebpack"` | Debug the Webpack configuration <br /> `"debugWebpack": true` |
|
||||
| `"tsConfig"` | Location of the TypeScript configuration file relative to the current workspace. <br /> `"tsConfig": "./tsconfig.json"`. |
|
||||
| `"preserveSymlinks"` | Do not use the real path when resolving modules. If true, symlinks are resolved to their real path; otherwise, they are resolved to their symlinked path. <br /> `"preserveSymlinks": true` |
|
||||
| `"port"` | Port used by Storybook. <br /> `"port": 6006` |
|
||||
| `"host"` | Set up a custom host for Storybook. <br /> `"host": "http://my-custom-host"` |
|
||||
| `"configDir"` | Storybook configuration directory location. <br /> `"configDir": ".storybook"` |
|
||||
@ -360,10 +363,20 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
|
||||
| `"sslKey"` | Provides an SSL key to serve Storybook. <br /> `"sslKey": "your-ssl-key"` |
|
||||
| `"smokeTest"` | Exit Storybook after successful start. <br /> `"smokeTest": true` |
|
||||
| `"ci"` | Starts Storybook in CI mode (skips interactive prompts and will not open browser window). <br /> `"ci": true` |
|
||||
| `"open"` | Whether to open Storybook automatically in the browser. <br /> `"open": true` |
|
||||
| `"quiet"` | Filters Storybook verbose build output. <br /> `"quiet": true` |
|
||||
| `"enableProdMode"` | Disable Angular's development mode, which turns off assertions and other checks within the framework. <br /> `"enableProdMode": true` |
|
||||
| `"docs"` | Starts Storybook in [documentation mode](../../writing-docs/build-documentation.mdx#preview-storybooks-documentation). <br /> `"docs": true` |
|
||||
| `"styles"` | Provide the location of the [application's styles](../../configure/styling-and-css.mdx#importing-css-files) to be used with Storybook. <br /> `"styles": ["src/styles.css", "src/styles.scss"]` |
|
||||
| `"compodoc"` | Execute compodoc before. <br /> `"compodoc": true` |
|
||||
| `"compodocArgs"` | Compodoc [options](https://compodoc.app/guides/options.html). Options `-p` with tsconfig path and `-d` with workspace root is always given. <br /> `"compodocArgs": ["-e", "json"]` |
|
||||
| `"styles"` | Provide the location of the [application's styles](../../configure/styling-and-css.mdx#global-styles) to be used with Storybook. <br /> `"styles": ["src/styles.css", "src/styles.scss"]` |
|
||||
| `"stylePreprocessorOptions"` | Provides further customization for style preprocessors resolved to the workspace root. <br /> `"stylePreprocessorOptions": { "includePaths": ["src/styles"] }` |
|
||||
| `"assets"` | List of static application assets. <br /> `"assets": ["src/assets"]` |
|
||||
| `"initialPath"` | URL path to be appended when visiting Storybook for the first time. <br /> `"initialPath": "docs/configure-your-project--docs"` |
|
||||
| `"webpackStatsJson"` | Write Webpack Stats JSON to disk. <br /> `"webpackStatsJson": true` |
|
||||
| `"previewUrl"` | Disables the default storybook preview and lets you use your own. <br /> `"previewUrl": "iframe.html"` |
|
||||
| `"loglevel"` | Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent]. <br /> `"loglevel": "info"` |
|
||||
| `"sourceMap"` | Configure [sourcemaps](https://angular.io/guide/workspace-config#source-map-configuration.). <br /> `"sourceMap": true` |
|
||||
|
||||
The full list of options can be found in the Angular builder schemas:
|
||||
|
||||
@ -376,9 +389,10 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
|
||||
|
||||
You can pass an options object for additional configuration if needed:
|
||||
|
||||
```js title=".storybook/main.js"
|
||||
export default {
|
||||
// ...
|
||||
```js title=".storybook/main.ts"
|
||||
import type { StorybookConfig } from '@storybook/angular';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
framework: {
|
||||
name: '@storybook/angular',
|
||||
options: {
|
||||
@ -394,7 +408,7 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
|
||||
|
||||
Type: `Record<string, any>`
|
||||
|
||||
Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For Angular, , available options can be found in the [Webpack builder docs](../../builders/webpack.mdx).
|
||||
Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../../builders/webpack.mdx).
|
||||
|
||||
{/* End supported renderers */}
|
||||
</If>
|
||||
|
||||
@ -11,7 +11,7 @@ Storybook for React & Vite is a [framework](../../contribute/framework.mdx) that
|
||||
* 🪄 Zero config
|
||||
* 💫 and more!
|
||||
|
||||
<If notRenderer={'react'}>
|
||||
<If notRenderer="react">
|
||||
<Callout variant="info">
|
||||
Storybook for React & Vite is only supported in [React](?renderer=react) projects.
|
||||
</Callout>
|
||||
@ -19,7 +19,7 @@ Storybook for React & Vite is a [framework](../../contribute/framework.mdx) that
|
||||
{/* End non-supported renderers */}
|
||||
</If>
|
||||
|
||||
<If renderer={'react'}>
|
||||
<If renderer="react">
|
||||
## Requirements
|
||||
|
||||
* React ≥ 16.8
|
||||
@ -86,27 +86,17 @@ Storybook for React & Vite is a [framework](../../contribute/framework.mdx) that
|
||||
|
||||
You can pass an options object for additional configuration if needed:
|
||||
|
||||
```ts
|
||||
// .storybook/main.ts
|
||||
import type { StorybookConfig } from '@storybook/react-vite';
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
const config: StorybookConfig = {
|
||||
framework: {
|
||||
name: '@storybook/react-vite',
|
||||
options: {
|
||||
// ...
|
||||
},
|
||||
},
|
||||
};
|
||||
<CodeSnippets path="react-vite-framework-options.md" />
|
||||
|
||||
export default config;
|
||||
```
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
#### `builder`
|
||||
|
||||
Type: `Record<string, any>`
|
||||
|
||||
Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../../builders/vite.mdx).
|
||||
|
||||
|
||||
{/* End supported renderers */}
|
||||
</If>
|
||||
|
||||
@ -7,7 +7,7 @@ sidebar:
|
||||
|
||||
Storybook for React & Webpack is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for [React](https://react.dev/) applications built with [Webpack](https://webpack.js.org/).
|
||||
|
||||
<If notRenderer={'react'}>
|
||||
<If notRenderer="react">
|
||||
<Callout variant="info">
|
||||
Storybook for React & Webpack is only supported in [React](?renderer=react) projects.
|
||||
</Callout>
|
||||
@ -15,7 +15,7 @@ Storybook for React & Webpack is a [framework](../../contribute/framework.mdx) t
|
||||
{/* End non-supported renderers */}
|
||||
</If>
|
||||
|
||||
<If renderer={'react'}>
|
||||
<If renderer="react">
|
||||
## Requirements
|
||||
|
||||
* React ≥ 16.8
|
||||
@ -112,21 +112,11 @@ Storybook for React & Webpack is a [framework](../../contribute/framework.mdx) t
|
||||
|
||||
You can pass an options object for additional configuration if needed:
|
||||
|
||||
```ts
|
||||
// .storybook/main.ts
|
||||
import type { StorybookConfig } from '@storybook/react-webpack5';
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
const config: StorybookConfig = {
|
||||
framework: {
|
||||
name: '@storybook/react-webpack5',
|
||||
options: {
|
||||
// ...
|
||||
},
|
||||
},
|
||||
};
|
||||
<CodeSnippets path="react-webpack5-framework-options.md" />
|
||||
|
||||
export default config;
|
||||
```
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
#### `builder`
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
|
||||
* 🧠 Comprehensive docgen
|
||||
* 💫 and more!
|
||||
|
||||
<If notRenderer={'vue'}>
|
||||
<If notRenderer="vue">
|
||||
<Callout variant="info">
|
||||
Storybook for Vue & Vite is only supported in [Vue](?renderer=vue) projects.
|
||||
</Callout>
|
||||
@ -20,7 +20,7 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
|
||||
{/* End non-supported renderers */}
|
||||
</If>
|
||||
|
||||
<If renderer={'vue'}>
|
||||
<If renderer="vue">
|
||||
## Requirements
|
||||
|
||||
* Vue ≥ 3
|
||||
@ -75,28 +75,26 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
|
||||
|
||||
## Extending the Vue application
|
||||
|
||||
Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview. When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file.
|
||||
Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview. When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js|ts` file.
|
||||
|
||||
Therefore, Storybook provides you with a `setup` function exported from this package, which receives as a callback your Storybook instance, which you can interact with and add your custom configuration.
|
||||
Therefore, Storybook provides you with a `setup` function exported from this package. This function receives your Storybook instance as a callback, which you can interact with and add your custom configuration.
|
||||
|
||||
```js title=".storybook/preview.js"
|
||||
```js title=".storybook/preview.js|ts"
|
||||
import { setup } from '@storybook/vue3';
|
||||
|
||||
setup((app) => {
|
||||
app.use(MyPlugin);
|
||||
app.component('my-component', MyComponent);
|
||||
app.mixin({
|
||||
/* My mixin */
|
||||
// My mixin
|
||||
});
|
||||
});
|
||||
|
||||
// Rest of the file...
|
||||
```
|
||||
|
||||
## Using `vue-component-meta`
|
||||
|
||||
<Callout variant="info">
|
||||
`vue-component-meta` is only available in Storybook ≥ 8. It is currently opt-in, but will become the default in a future version of Storybook.
|
||||
`vue-component-meta` is only available in Storybook ≥ 8. It is currently an opt-in, but it will become the default in a future version of Storybook.
|
||||
</Callout>
|
||||
|
||||
[`vue-component-meta`](https://github.com/vuejs/language-tools/tree/master/packages/component-meta) is a tool maintained by the Vue team that extracts metadata from Vue components. Storybook can use it to generate the [controls](../../essentials/controls.mdx) for your stories and documentation. It's a more full-featured alternative to `vue-docgen-api` and is recommended for most projects.
|
||||
@ -122,13 +120,13 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
|
||||
|
||||
### Support for multiple component types
|
||||
|
||||
`vue-component-meta` supports all types of Vue components (including SFC, functional, composition / options API components) from `.vue`, `.ts`, `.tsx`, `.js`, and `.jsx` files.
|
||||
`vue-component-meta` supports all types of Vue components (including SFC, functional, composition/options API components) from `.vue`, `.ts`, `.tsx`, `.js`, and `.jsx` files.
|
||||
|
||||
It also supports both default and named component exports.
|
||||
|
||||
### Prop description and JSDoc tag annotations
|
||||
|
||||
To provide a description for a prop, including tags, you can use JSDoc comments in your component's props definition:
|
||||
To describe a prop, including tags, you can use JSDoc comments in your component's props definition:
|
||||
|
||||
```html title="YourComponent.vue"
|
||||
<script setup lang="ts">
|
||||
@ -196,7 +194,7 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
|
||||
<script setup lang="ts"></script>
|
||||
```
|
||||
|
||||
If you use `defineSlots`, you can provide a description for each slot using JSDoc comments in your component's slots definition:
|
||||
If you use `defineSlots`, you can describe each slot using JSDoc comments in your component's slots definition:
|
||||
|
||||
```ts
|
||||
defineSlots<{
|
||||
@ -217,7 +215,7 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
|
||||
|
||||
### Exposed properties and methods
|
||||
|
||||
The properties and methods exposed by your component are automatically extracted and displayed in the controls panel.
|
||||
The properties and methods exposed by your component are automatically extracted and displayed in the [Controls](../../essentials/controls.mdx) panel.
|
||||
|
||||
```html title="YourComponent.vue"
|
||||
<script setup lang="ts">
|
||||
@ -241,7 +239,7 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
|
||||
|
||||
### Override the default configuration
|
||||
|
||||
If you're working with a project that relies on [`tsconfig references`](https://www.typescriptlang.org/docs/handbook/project-references.html) to link to other existing configuration files (e.g. `tsconfig.app.json`, `tsconfig.node.json`), we recommend that you update your [`.storybook/main.js|ts`](../../configure/index.mdx) configuration file and add the following:
|
||||
If you're working with a project that relies on [`tsconfig references`](https://www.typescriptlang.org/docs/handbook/project-references.html) to link to other existing configuration files (e.g., `tsconfig.app.json`, `tsconfig.node.json`), we recommend that you update your [`.storybook/main.js|ts`](../../configure/index.mdx) configuration file and add the following:
|
||||
|
||||
```ts title=".storybook/main.ts"
|
||||
import type { StorybookConfig } from '@storybook/vue3-vite';
|
||||
@ -262,7 +260,7 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
|
||||
```
|
||||
|
||||
<Callout variant="info">
|
||||
This is not a limitation of Storybook, but instead how `vue-component-meta` works. For more information, refer to the appropriate [GitHub issue](https://github.com/vuejs/language-tools/issues/3896).
|
||||
This is not a limitation of Storybook, but how `vue-component-meta` works. For more information, refer to the appropriate [GitHub issue](https://github.com/vuejs/language-tools/issues/3896).
|
||||
</Callout>
|
||||
|
||||
Otherwise, you might face missing component types/descriptions or unresolvable import aliases like `@/some/import`.
|
||||
@ -285,20 +283,11 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
|
||||
|
||||
You can pass an options object for additional configuration if needed:
|
||||
|
||||
```ts title=".storybook/main.ts"
|
||||
import type { StorybookConfig } from '@storybook/vue3-vite';
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
const config: StorybookConfig = {
|
||||
framework: {
|
||||
name: '@storybook/vue3-vite',
|
||||
options: {
|
||||
docgen: 'vue-component-meta',
|
||||
},
|
||||
},
|
||||
};
|
||||
<CodeSnippets path="vue-vite-framework-options.md" />
|
||||
|
||||
export default config;
|
||||
```
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
#### `builder`
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ sidebar:
|
||||
|
||||
Storybook for Vue & Webpack is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for [Vue](https://vuejs.org/) applications built with [Webpack](https://webpack.js.org/).
|
||||
|
||||
<If notRenderer={'vue'}>
|
||||
<If notRenderer="vue">
|
||||
<Callout variant="info">
|
||||
Storybook for Vue & Webpack is only supported in [Vue](?renderer=vue) projects.
|
||||
</Callout>
|
||||
@ -15,7 +15,7 @@ Storybook for Vue & Webpack is a [framework](../../contribute/framework.mdx) tha
|
||||
{/* End non-supported renderers */}
|
||||
</If>
|
||||
|
||||
<If renderer={'vue'}>
|
||||
<If renderer="vue">
|
||||
## Requirements
|
||||
|
||||
* Vue ≥ 3.0
|
||||
@ -88,20 +88,18 @@ Storybook for Vue & Webpack is a [framework](../../contribute/framework.mdx) tha
|
||||
|
||||
## Extending the Vue application
|
||||
|
||||
Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview. When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file.
|
||||
Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview. When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js|ts` file.
|
||||
|
||||
Therefore, Storybook provides you with a `setup` function exported from this package, which receives as a callback your Storybook instance, which you can interact with and add your custom configuration.
|
||||
|
||||
```js
|
||||
// .storybook/preview.js
|
||||
Therefore, Storybook provides you with a `setup` function exported from this package. This function receives your Storybook instance as a callback, which you can interact with and add your custom configuration.
|
||||
|
||||
```js title=".storybook/preview.js|ts"
|
||||
import { setup } from '@storybook/vue3';
|
||||
|
||||
setup((app) => {
|
||||
app.use(MyPlugin);
|
||||
app.component('my-component', MyComponent);
|
||||
app.mixin({
|
||||
/* My mixin */
|
||||
// My mixin
|
||||
});
|
||||
});
|
||||
```
|
||||
@ -124,21 +122,11 @@ Storybook for Vue & Webpack is a [framework](../../contribute/framework.mdx) tha
|
||||
|
||||
You can pass an options object for additional configuration if needed:
|
||||
|
||||
```ts
|
||||
// .storybook/main.ts
|
||||
import type { StorybookConfig } from '@storybook/vue-webpack5';
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
const config: StorybookConfig = {
|
||||
framework: {
|
||||
name: '@storybook/vue-webpack5',
|
||||
options: {
|
||||
// ...
|
||||
},
|
||||
},
|
||||
};
|
||||
<CodeSnippets path="vue-webpack5-framework-options.md" />
|
||||
|
||||
export default config;
|
||||
```
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
#### `builder`
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ sidebar:
|
||||
|
||||
Storybook for Web components & Vite is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for applications using [Web components](https://www.webcomponents.org/introduction) built with [Vite](https://vitejs.dev/).
|
||||
|
||||
<If notRenderer={'web-components'}>
|
||||
<If notRenderer="web-components">
|
||||
<Callout variant="info">
|
||||
Storybook for Web components & Vite is only supported in [Web components](?renderer=web-components) projects.
|
||||
</Callout>
|
||||
@ -15,7 +15,7 @@ Storybook for Web components & Vite is a [framework](../../contribute/framework.
|
||||
{/* End non-supported renderers */}
|
||||
</If>
|
||||
|
||||
<If renderer={'web-components'}>
|
||||
<If renderer="web-components">
|
||||
## Requirements
|
||||
|
||||
* Vite ≥ 4.0
|
||||
@ -73,20 +73,11 @@ Storybook for Web components & Vite is a [framework](../../contribute/framework.
|
||||
|
||||
You can pass an options object for additional configuration if needed:
|
||||
|
||||
```js
|
||||
// .storybook/main.js
|
||||
import * as path from 'path';
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
export default {
|
||||
// ...
|
||||
framework: {
|
||||
name: '@storybook/web-components-vite',
|
||||
options: {
|
||||
// ...
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
<CodeSnippets path="web-components-vite-framework-options.md" />
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
The available options are:
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ sidebar:
|
||||
|
||||
Storybook for Web components & Webpack is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for applications using [Web components](https://www.webcomponents.org/introduction) built with [Webpack](https://webpack.js.org/).
|
||||
|
||||
<If notRenderer={'web-components'}>
|
||||
<If notRenderer="web-components">
|
||||
<Callout variant="info">
|
||||
Storybook for Web components & Webpack is only supported in [Web components](?renderer=web-components) projects.
|
||||
</Callout>
|
||||
@ -15,7 +15,7 @@ Storybook for Web components & Webpack is a [framework](../../contribute/framewo
|
||||
{/* End non-supported renderers */}
|
||||
</If>
|
||||
|
||||
<If renderer={'web-components'}>
|
||||
<If renderer="web-components">
|
||||
## Requirements
|
||||
|
||||
* Webpack ≥ 5.0
|
||||
@ -87,30 +87,19 @@ Storybook for Web components & Webpack is a [framework](../../contribute/framewo
|
||||
|
||||
## Hot Module Reloading (HMR)
|
||||
|
||||
Web components are registered on global registry, which only accepts a given name/class once. That can lead to errors when using classical HMR. While there are ideas on how to achieve HMR with a static registry, there is no proven solution yet. Therefore, the best approach for now is to do full page reloads while developing. You can ensure those page reloads happen quickly by defining your stories as specific states of components (which we would recommend regardless).
|
||||
Web components are registered on a global registry, which only accepts a given name/class once. That can lead to errors when using classical HMR. While there are ideas for achieving HMR with a static registry, there has yet to be a proven solution. Therefore, the best approach, for now, is to do full-page reloads while developing. You can ensure that page reloads happen quickly by defining your stories as specific states of components (which we recommend regardless).
|
||||
|
||||
## Set up es6/7 dependencies
|
||||
## Set up ES6/7 dependencies
|
||||
|
||||
By default, Storybook only works with precompiled ES5 code. Because most web components themselves and their libs are distributed as ES2017, you will need to manually mark those packages as "needs transpilation".
|
||||
By default, Storybook only works with precompiled ES5 code. Because most Web Components and their libs are distributed as ES2017, you must mark those packages as "needs transpilation" manually.
|
||||
|
||||
For example, if you have a library called `my-library` which is in ES2017, then you can configure your project like so:
|
||||
|
||||
```js
|
||||
// .storybook/main.js
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
export default {
|
||||
webpackFinal: async (config) => {
|
||||
// Find web-components rule for extra transpilation
|
||||
const webComponentsRule = config.module.rules.find(
|
||||
(rule) => rule.use && rule.use.options && rule.use.options.babelrc === false
|
||||
);
|
||||
// Add your own `my-library`
|
||||
webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`));
|
||||
<CodeSnippets path="web-components-webpack5-transpilation.md" />
|
||||
|
||||
return config;
|
||||
},
|
||||
};
|
||||
```
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
By default, the following folders are transpiled:
|
||||
|
||||
@ -123,9 +112,9 @@ Storybook for Web components & Webpack is a [framework](../../contribute/framewo
|
||||
* `node_modules/@vaadin/*.js`
|
||||
|
||||
<Callout variant="info">
|
||||
Note that the `src` folder is also included. This provides some extra configuration to allow for `import.meta` and some other features.
|
||||
Note that the `src` folder is also included. This provides extra configuration for `import.meta` and other features.
|
||||
|
||||
If you use a folder for your components/stories other than `src`, you will need to use the configuration example above to have it properly transpiled.
|
||||
If you use a folder for your components/stories other than `src`, you must use the configuration example above to have it correctly transpiled.
|
||||
</Callout>
|
||||
|
||||
## API
|
||||
@ -134,20 +123,11 @@ Storybook for Web components & Webpack is a [framework](../../contribute/framewo
|
||||
|
||||
You can pass an options object for additional configuration if needed:
|
||||
|
||||
```js
|
||||
// .storybook/main.js
|
||||
import * as path from 'path';
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
export default {
|
||||
// ...
|
||||
framework: {
|
||||
name: '@storybook/web-components-webpack5',
|
||||
options: {
|
||||
// ...
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
<CodeSnippets path="web-components-webpack5-framework-options.md" />
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
The available options are:
|
||||
|
||||
@ -167,7 +147,7 @@ Storybook for Web components & Webpack is a [framework](../../contribute/framewo
|
||||
Failed to execute 'define' on 'CustomElementRegistry': the name "..." has already been used with this registry
|
||||
```
|
||||
|
||||
This error occurs because the component is already registered in the global registry. See the [limitations of HMR with web components](#hot-module-reloading-hmr) for more information.
|
||||
This error occurs because the component is already registered in the global registry. For more information, see the [limitations of HMR with web components](#hot-module-reloading-hmr).
|
||||
|
||||
{/* End supported renderers */}
|
||||
</If>
|
||||
|
||||
@ -119,28 +119,18 @@ There are some noteworthy items here:
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
<If notRenderer="angular">
|
||||
|
||||
#### Storybook doesn't work with an empty directory
|
||||
|
||||
By default, Storybook is configured to detect whether you're initializing it on an empty directory or an existing project. However, if you attempt to initialize Storybook, select a Vite-based framework (e.g., [React](./frameworks/react-vite.mdx)) in a directory that only contains a `package.json` file, you may run into issues with [Yarn Modern](https://yarnpkg.com/getting-started). This is due to how Yarn handles peer dependencies and how Storybook is set up to work with Vite-based frameworks, as it requires the [Vite](https://vitejs.dev/) package to be installed. To solve this issue, you must install Vite manually and initialize Storybook.
|
||||
|
||||
</If>
|
||||
|
||||
<IfRenderer renderer="angular">
|
||||
#### Storybook doesn't work with my Angular project using the Angular CLI
|
||||
|
||||
Out of the box, adding Storybook to an Angular project using the Angular CLI requires you to run the installation command from the root of the project or, if you're working with a monorepo environment, from the directory where the Angular configuration file (i.e., `angular.json`) is located as it will be used to set up the builder configuration necessary to run Storybook. However, if you need, you can extend the builder configuration to customize Storybook's behavior. Listed below are the supported options:
|
||||
|
||||
| Configuration element | Description |
|
||||
| ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `"browserTarget"` | Build target to be served using the following format. <br /> `"example-project:builder:config"` |
|
||||
| `"tsConfig"` | Location of the TypeScript configuration file, relative to the current workspace. <br /> `"tsConfig": "./tsconfig.json"`. |
|
||||
| `"port"` | Port used by Storybook. <br /> `"port": 6006` |
|
||||
| `"host"` | Set up a custom host for Storybook. <br /> `"host": "http://my-custom-host"` |
|
||||
| `"configDir"` | Storybook configuration directory location. <br /> `"configDir": ".storybook"` |
|
||||
| `"https"` | Starts Storybook with HTTPS enabled. <br /> `"https": true` <br /> Requires custom certificate information. |
|
||||
| `"sslCa"` | Provides an SSL certificate authority. <br /> `"sslCa": "your-custom-certificate-authority"` <br /> Optional usage with `"https"` |
|
||||
| `"sslCert"` | Provides an SSL certificate. <br /> `"sslCert": "your-custom-certificate"` <br /> Required for `https` |
|
||||
| `"sslKey"` | Provides an SSL key to serve Storybook. <br /> `"sslKey": "your-ssl-key"` |
|
||||
| `"smokeTest"` | Exit Storybook after successful start. <br /> `"smokeTest": true` |
|
||||
| `"ci"` | Starts Storybook in CI mode (skips interactive prompts and will not open browser window). <br /> `"ci": true` |
|
||||
| `"quiet"` | Filters Storybook verbose build output. <br /> `"quiet": true` |
|
||||
| `"docs"` | Starts Storybook in [documentation mode](../writing-docs/build-documentation.mdx#preview-storybooks-documentation). <br /> `"docs": true` |
|
||||
| `"styles"` | Provide the location of the [application's styles](../configure/styling-and-css.mdx#importing-css-files) to be used with Storybook. <br /> `"styles": ["src/styles.css", "src/styles.scss"]` <br /> |
|
||||
| `"stylePreprocessorOptions"` | Provides further customization for style preprocessors resolved to the workspace root. <br /> `"stylePreprocessorOptions": { "includePaths": ["src/styles"] }` |
|
||||
Out of the box, adding Storybook to an Angular project using the Angular CLI requires you to run the installation command from the root of the project or, if you're working with a monorepo environment, from the directory where the Angular configuration file (i.e., `angular.json`) is located as it will be used to set up the builder configuration necessary to run Storybook. However, if you need, you can extend the builder configuration to customize Storybook's behavior. To learn more about the available options, see the [Angular framework documentation](./frameworks/angular.mdx#how-do-i-configure-angulars-builder-for-storybook).
|
||||
</IfRenderer>
|
||||
|
||||
<IfRenderer renderer="ember">
|
||||
|
||||
@ -41,8 +41,7 @@ Component library authors can expand adoption by composing their components in t
|
||||
|
||||
Add a `storybook` property in your published `package.json`that contains an object with a `url` field. Point the URL field to a published Storybook at the version you want.
|
||||
|
||||
```json
|
||||
// Your component library’s package.json
|
||||
```json title="package.json"
|
||||
{
|
||||
"storybook": {
|
||||
"url": "https://host.com/your-storybook-for-this-version"
|
||||
@ -54,7 +53,7 @@ Add a `storybook` property in your published `package.json`that contains an obje
|
||||
|
||||
If you're using [Chromatic](./publish-storybook.mdx#publish-storybook-with-chromatic), you can provide a single URL for your Storybook in the `storybook.url` field. You do not need to change the URL each time you publish a new version. Storybook will automatically find the correct URL for your package. For example:
|
||||
|
||||
```json
|
||||
```json title="package.json"
|
||||
{
|
||||
"storybook": {
|
||||
"url": "https://master--xyz123.chromatic.com"
|
||||
|
||||
@ -142,7 +142,7 @@ To deploy Storybook on GitHub Pages, use the community-built [Deploy Storybook t
|
||||
</Callout>
|
||||
|
||||
<details>
|
||||
<summary><h2>Component Publishing Protocol (CPP)</h2></summary>
|
||||
<summary><h3>Component Publishing Protocol (CPP)</h3></summary>
|
||||
|
||||
Storybook can communicate with services that host built Storybooks online. This enables features such as [Composition](./storybook-composition.mdx). We categorize services via compliance with the "Component Publishing Protocol" (CPP) with various levels of support in Storybook.
|
||||
|
||||
|
||||
@ -141,4 +141,4 @@ All decorators relevant to a story will run in the following order once the stor
|
||||
|
||||
* Global decorators, in the order they are defined
|
||||
* Component decorators, in the order they are defined
|
||||
* Story decorators, in the order they are defined
|
||||
* Story decorators, in the order they are defined, starting from the innermost decorator and working outwards and up the hierarchy in the same order
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user