storybook-addon-package-shopping-cart

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

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

用法

安装方法

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

如果您使用 Storybook 配合 Webpack 5，Markdown 文件应该会自动设置为可解析。

如果由于某种原因无法正常工作，您可以使用以下配置手动将它们配置为源资源

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

Webpack 4

如果您使用 Storybook 配合 Webpack 4，您需要使用raw-loader配置 Markdown 文件以进行解析，配置如下

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

为 Story 禁用上下文解析

如果您想禁用 Story 的包上下文加载，可以将 parameters.packageContext=null 传递给您的组件 Story

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
        }
      }
    }
  ]
};