父级:main.js|ts 配置
¥Parent: main.js|ts configuration
类型:
¥Type:
{ [ key : string ] :
| { title : string ; url : string ; expanded ?: boolean , sourceUrl ?: string }
| ( config : { title : string ; url : string ; expanded ? : boolean , sourceUrl : string }) => { title : string ; url : string ; expanded ?: boolean , sourceUrl ?: string }
| { disable : boolean }
}
配置 Storybook 组合 。
¥Configures Storybook composition .
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework' ;
const config : StorybookConfig = {
framework : '@storybook/your-framework' ,
stories : [ '../src/**/*.mdx' , '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)' ] ,
refs : {
'design-system' : {
title : 'Storybook Design System' ,
url : 'https://master--5ccbc373887ca40020446347.chromatic.com/' ,
expanded : false , // Optional, true by default,
sourceUrl : 'https://github.com/storybookjs/storybook' , // Optional
} ,
} ,
} ;
export default config ;
¥Using a function
你可以使用函数动态配置 refs:
¥You can use a function to dynamically configure refs:
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework' ;
const config : StorybookConfig = {
framework : '@storybook/your-framework' ,
stories : [ '../src/**/*.mdx' , '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)' ] ,
// 👇 Retrieve the current environment from the configType argument
refs : ( config , { configType } ) => {
if ( configType === 'DEVELOPMENT' ) {
return {
react : {
title : 'Composed React Storybook running in development mode' ,
url : 'http://localhost:7007' ,
} ,
angular : {
title : 'Composed Angular Storybook running in development mode' ,
url : 'http://localhost:7008' ,
} ,
} ;
}
return {
react : {
title : 'Composed React Storybook running in production' ,
url : 'https://your-production-react-storybook-url' ,
} ,
angular : {
title : 'Composed Angular Storybook running in production' ,
url : 'https://your-production-angular-storybook-url' ,
} ,
} ;
} ,
} ;
export default config ;
¥Disable a ref
一些软件包依赖会自动 在你的 Storybook 中编写他们的 Storybook 。你可以通过将包名称的 disable
设置为 true
来禁用此行为:
¥Some package dependencies automatically compose their Storybook in yours . You can disable this behavior by setting disable
to true
for the package name:
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework' ;
const config : StorybookConfig = {
framework : '@storybook/your-framework' ,
stories : [ '../src/**/*.mdx' , '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)' ] ,
refs : {
'package-name' : { disable : true } ,
} ,
} ;
export default config ;