storybook-addon-package-shopping-cart

一个 Storybook 插件，用于协助安装多包项目。

注意：此插件与 Microsoft 或 Fluent UI 没有任何关联。下面演示中选择了 Fluent UI，因为它是一个成熟的单仓，包含单独打包的组件，因此可以很好地展示此插件的功能。

用法

使用以下命令安装

npm install -D storybook-addon-package-shopping-cart

将以下内容添加到你的 .storybook/main.js 文件中

module.exports = {
  ...,
  addons: [
    ...,
    "storybook-addon-package-shopping-cart"
  ]
};

包上下文确定

此插件通过目录结构确定当前包。最近的父级 package.json 用于当前活动的包。

任何没有版本字段或具有 private: true 的包都将被此插件忽略。

主题配置

默认情况下，此插件中的组件使用内置的 Storybook 主题颜色值，但你也可以通过提供自定义 Storybook 主题来自定义它们。

// .storybook/manager.js
import { addons } from '@storybook/addons';
import { create } from '@storybook/theming';

const theme = create({
    base: 'dark',
    appContentBg: 'white',
    brandTitle: 'mono-repo-tools',
    packageShoppingCart: {
      tooltip: {
        /* Default: props.theme.background.app */
        backgroundColor: 'blue',
        /* Default: props.theme.color.defaultText */
        textColor: 'green'
      }
      shoppingCart: {
        badge: {
          /* Default: props.theme.color.primary */
          bgColor: 'blue',
          /* Default: props.theme.color.defaultText */
          textColor: 'red'
        },
        addButton: {
          /* Default: props.theme.color.positive */
          bgColor: 'blue',
          /* Default: props.theme.color.defaultText */
          textColor: 'green'
        },
        removeButton: {
          /* Default: props.theme.color.negative */
          bgColor: 'green',
          /* Default: props.theme.color.defaultText */
          textColor: 'blue'
        },
        disabledButton: {
          /* Default: props.theme.color.tertiary */
          bgColor: 'green',
          /* Default: props.theme.color.inverseText */
          textColor: 'blue'
        }
      },
      quickAddButton: {
        /* Default: props.theme.color.positive */
        addIconColor: 'blue',
        /* Default: props.theme.color.negative */
        removeIconColor: 'green'
      }
    }
})

addons.setConfig({
  theme
});

配置安装脚本

默认情况下，购物车将配置为安装最新版本的包。你可以通过配置全局 Storybook 参数来配置安装的版本。请参阅以下安装精确版本的示例。

// .storybook/preview.js
export const parameters = {
  packageShoppingCart: {
      determineVersionToInstall: (pkg) => {
        return `${pkg.name}@${pkg.version}`
      }
    }
};

解析 .md 文件

Webpack 5

如果你使用带有 Webpack 5 的 Storybook，则应自动设置 markdown 文件以进行解析。

如果由于某种原因不起作用，你可以按照以下步骤手动将它们配置为源资产。

  webpackFinal: (config) => {
    ...
    config.module.rules.push({
      test: /\.md$/,
      type: 'asset/source',
    })
    return config;
  },

Webpack 4

如果你使用带有 Webpack 4 的 Storybook，则需要通过raw-loader配置 markdown 文件进行解析，如下所示。

  webpackFinal: (config) => {
    ...
    config.module.rules.push({
      test: /\.md$/,
      use: 'raw-loader'
    })
    return config;
  },

禁用故事的上下文解析

如果你想为某个故事禁用包上下文加载，可以将 parameters.packageContext=null 传递给组件的故事。

export default: {
  parameters: {
    packageContext: null
  }
}

storybook-package-context-loader 选项

此插件使用storybook-package-context-loader来确定包上下文。默认情况下，enableReadme 和 enableChangelog 被禁用以最大程度地减少构建大小。如果你想启用它们，可以通过将以下内容添加到你的包中，将选项传递给插件。

module.exports = {
  ...,
  addons: [
    ...,
    {
      name: "storybook-addon-package-shopping-cart",
      options: {
        packageContextLoaderOptions: {
          enableReadme: true,
          enableChangelog: true
        }
      }
    }
  ]
};