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

如果您將 storybook 與 webpack 5 一起使用，則 markdown 檔案應該會自動設定為進行剖析。

如果由於某種原因無法運作，您可以透過以下方式將它們手動設定為來源資產

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

Webpack 4

如果您將 storybook 與 webpack 4 一起使用，則您會希望透過以下方式將 markdown 檔案設定為透過 raw-loader 剖析

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