Storybook ADK

此套件中最初引入的一些功能已透過 Storybook API 提供。請先考慮 https://github.com/storybookjs/addon-kit，這是一個使用最新擴充功能 API 的簡單 Github 儲存庫範本。

此套件為 Storybook API 提供額外的中介軟體，可用於基於此建立擴充功能。

簡化擴充功能的建立。透過通道保持擴充功能的資料同步。提供智慧型區塊以建立擴充功能 UI。提供簡單的 API 以註冊擴充功能和建立裝飾器。它是快速建立您自訂的全新超讚擴充功能的基礎

功能

• 隱藏在底層，解決在切換故事時，透過通道進行通訊和資料同步的所有複雜問題。
• 透過 HOC 將您的擴充功能元件連接到您的擴充功能商店，並且僅在資料變更時更新它
• 將擴充功能商店資料分為全域和本機。追蹤故事瀏覽以同時在管理器和預覽端切換適當的本機資料
• 保留不可變的初始化資料和可透過動作變更的覆寫資料
• 提供類似 Redux 的方法，透過選取器和動作處理您的擴充功能商店（但別擔心，預設動作只會簡單地覆寫您的資料）
• 允許將任意數量的面板、按鈕和任何其他擴充功能類型連接到單一的擴充功能商店
• 提供 UI 容器，自動反映擴充功能面板的長寬比。對於建立可回應垂直和水平面板位置的擴充功能 UI 非常有用
• 包含 Typescript 定義

用法

npm i --save @storybook/addon-devkit

import {
  register,
  createDecorator,
  setParameters,
  setConfig,
  Layout,
  Block,
} from '@storybook/addon-devkit'

API

註冊管理器端擴充功能面板

HOC 用於註冊擴充功能 UI 並將其連接到擴充功能商店。

// in your addon `register.js`
import { register } from '@storybook/addon-devkit'

register(
  {
    ...selectors,
  },
  ({ global, local }) => ({
    ...globalActions,
    ...localActions,
  })
)(AddonPanelUI);

其中 selectors 是一個包含類似下列函式的物件

{
  deepData: store => store.path.to.deep.store.data,
}

而 actions 可以是「全域」和「本機」。全域動作會影響商店的全域部分，而本機動作只會影響與目前故事相關的資料。

({ global, local }) => ({
    // action to manipulate with common data
    increase: global(store => ({
      ...store,
      index: store.index + 1,
    })),
    // action to manipulate with current story data
    // usage: setBackground('#ff66cc')
    setBackground: local((store, color) => ({
      ...store,
      backgroundColor: color,
    })),
    // action to override data
    // usage: update({...newData})
    update: global(),
  })

AddonPanelUI - 是您的元件，當您選擇適當的標籤時，它會出現在擴充功能面板上

注意：HOC 會自動追蹤擴充功能的 active 狀態，並且僅在必要時顯示它

註冊 HOC 將會傳遞下列 props 給 AddonPanelUI 元件

<AddonPanelUI
  {...actions} // generated actions
  {...selectors} // selected pieces of store
  api={api} // storybook API object
  active={active} // you don't need to do anything with it
  store={store} // entire store. prefer to use selectors
  kind={kind} // current story kind
  story={story} // current story
  ADDON_ID={ADDON_ID}
  PANEL_ID={PANEL_ID}
  PANEL_Title={PANEL_Title} // Title on the addon panel
  rect={rect} // dimensions of panel area
/>

當您透過動作變更商店時，AddonPanelUI 和 storyDecorator 都會使用新資料重新渲染。

如果資料來自故事也一樣 - 它將會更新

初始化後，HOC 將會等待故事的初始化資料，並且只有在此之後才會渲染 UI

建立故事端裝飾器

HOC 用於建立裝飾器並將其連接到擴充功能商店。

// in your addon `decorator.js`
import { createDecorator } from '@storybook/addon-devkit'

export const withMyAddon = createDecorator({
    ...selectors,
  },
  ({ global, local }) => ({
    ...globalActions,
    ...localActions,
  })
)(DecoratorUI, { isGlobal });

因此您可以這樣使用您的裝飾器

// stories.js

import React from 'react';
import { storiesOf, addDecorator, addParameters } from '@storybook/react';
import { withMyAddon, myAddonParams } from 'my-addon';

// add decorator globally
addDecorator(withMyAddon({ ...initData }))
addParameters(myAddonParams({ ...globalParams }))

storiesOf('My UI Kit', module)
  // ...or add decorator locally
  .addDecorator(withMyAddon({ ...initData }))
  .add(
    'Awesome',
    () => <Button>Make Awesome</Button>,
    myAddonParams({ ...localParams })
  )

DecoratorUI 看起來可能像這樣

const DecoratorUI = ({ context, getStory, selectedData }) => (
  <div>
    <h1>Title: {selectedData}</h1>
    {getStory(context)}
  </div>
);

當 isGlobal = true 時，裝飾器會將所有傳遞的資料視為全域

注意：擴充功能參數將會與初始化資料合併，並且裝飾器和面板選取器都可用

將參數傳遞給擴充功能

建立將參數傳遞給您的擴充功能的函式

請參閱以上用法

import { setParameters } from '@storybook/addon-devkit'

export const myAddonParams = setParameters()

擴充功能設定

為了建立擴充功能，您需要指定一些唯一的參數，例如事件名稱、擴充功能標題、參數金鑰和其他。它們在管理器和預覽端都應該相同。如果您未指定它們，擴充功能開發套件將會使用預設值。若要指定您自己的參數，請使用 setConfig

import { setConfig } from '@storybook/addon-devkit';

setConfig({
  addId: 'dev_adk',
  panelTitle: 'ADK DEV'
});

您應該在使用 register、setParameters 和 createDecorator 之前執行它

注意：別忘了在管理器和預覽端都使用 setConfig，並使用相同的參數

擴充功能面板 UI 元件

元件可在面板位於底部位置時以列組織 UI，在面板位於右側時以欄組織 UI

import { Layout, Block, register } from '@storybook/addon-devkit';
import { styled } from '@storybook/theming';
import './config'

const LayoutBlock = styled(Layout)`
  ...styles
`

const AddonBlock = styled(Block)`
  ...styles
`

const AddonPanel = () => (
  <LayoutBlock>
    <AddonBlock size={200}>
      {UI1}
    </AddonBlock>
    <AddonBlock>
      {UI2}
    </AddonBlock>
    <AddonBlock>
      {UI3}
    </AddonBlock>
  </LayoutBlock>
)

register()(AddonPanel)

當位於底部時，<Layout> 具有 display: flex 和 flex-direction: row，當位於右側時則具有 flex-direction: column。

您可以指定 <Block> 的大小。在水平佈局的情況下，它將會是寬度，在垂直佈局的情況下，它將會是元素的高度。

否則它將具有 flex-grow: 1

貢獻者