storybook-color-picker

描述

一個 Storybook 擴充套件。它允許您從自訂的顏色調色盤中快速找到任何顏色，並將其設定在元件的控制項上和/或複製到剪貼簿。

新增一個或多個顏色調色盤，並將主要調色盤全域設定，針對元件或單一 story 設定。

用法

$ npm i -D storybook-color-picker@latest

npm i -D storybook-color-picker@3

新增至您的 Storybook

在您的 .storybook 資料夾中找到 main.js 檔案，並如下所示新增此擴充套件。

module.exports = {
  addons: ['storybook-color-picker'],
}

新增調色盤

全域

這會在您的 Storybook 中的任何地方新增顏色選擇器和調色盤。

在您的 .storybook 資料夾中找到 preview.js 檔案，並如下所示將您的顏色調色盤新增至參數。向下捲動以了解您的顏色調色盤必須看起來像什麼。

import yourFirstColorPalette from './yourFirstColorPalette.json';
import yourSecondColorPalette from './yourSecondColorPalette.json';

export const parameters = {
  ...
  colorPicker: {
    primaryPalette: 'Your first palette name', // Name of primary palette for all components and its stories. Optional (fallback to first palette from the palettes array).
    palettes: [
      {
        name: 'Your first palette name', // string
        palette: yourFirstColorPalette, // Palette as an Object or an Array. See bellow.
      },
      {
        name: 'Your second palette name',
        palette: yourSecondColorPalette,
      },
    ]
  }
};

在元件上

這會將顏色選擇器和調色盤新增至所有元件的 stories。

在 MyComponent.stories.js 中新增

const meta = {
  ...
  parameters: {
    colorPicker: {
      primaryPalette: 'Your first palette name',
      palettes: [
        {
          name: 'Your first palette name',
          palette: yourFirstColorPalette,
        },
        {
          name: 'Your second palette name',
          palette: yourSecondColorPalette,
        },
      ]
    }
  }
}

export const PrimaryComponent = { args: {...} }

export default meta

在 story 上

這會將顏色選擇器和調色盤新增至特定的 story。

在 MyComponent.stories.js 中新增

export const SecondaryComponent = {
  ...
  parameters: {
    colorPicker: {
      primaryPalette: 'Colorful palette',
      applyColorTo: ['label'],
      disableDefaultPalettes: true,
      theme: 'dark',
    },
  }
}

調色盤

作為物件

type ColorPaletteAsObject = Record<string, Record<string, string> | string>

範例

  {
    white: "#fff", // valid hex, rgb, rgba, hsl, hsla
    black: "#000",
    light: {
      " 500": "#aaa",
      " 100": "rgba(238, 238, 238, .8)",
      " 200": "rgb(238, 238, 238)",
      " 300": "hsla(0, 0%, 73%, .8)",
      " 400": "hsl(0, 0%, 73%)"
    },
    dark: {
      "0100": "#888",
      "0500": "#000",
      "0400": "#222",
      "0200": "#666",
      "0300": "#444"
    }
  }

實用提示：在數值鍵之前新增空格或零，以防止自動排序

作為陣列

type ColorPaletteAsArray = {
  label: string
  values: [
    {
      label: string
      value: string
    },
  ]
}

範例

const myArrayPalette = [
  {
    label: 'light',
    values: [
      {
        label: '100',
        value: '#fff',
      },
      {
        label: '200',
        value: '#aaa',
      },
    ],
  },
  {
    label: 'dark',
    values: [
      {
        label: '100',
        value: '#222',
      },
      {
        label: '200',
        value: '#000000',
      },
    ],
  },
]

在元件或其 stories 上設定主要調色盤

在元件上

這將適用於所有元件的 stories。

在 MyComponent.stories.js 中新增

const meta = {
  ...
  parameters: {
    colorPicker: {
      primaryPalette: 'Your second palette name',
    }
  }
};

在 story 上

這將適用於特定的 story。

在 MyComponent.stories.js 中新增

export const SecondaryComponent = {
  ...
  parameters: {
    colorPicker: {
      primaryPalette: 'Your first palette name',
    }
  }
}

primaryPalette 特異性

以下列表會依特異性遞增。

1. 在 preview.js 中的參數上設定的 primaryPalette
2. 在元件 parameters 上設定的 primaryPalette
3. 在 story MyComponent.parameters 上設定的 primaryPalette

將選定的顏色套用至元件的控制項

所有類型為「color」的控制項都會自動偵測。您可以新增可能會套用顏色的額外控制項。只有類型為「text」的控制項可以新增為額外控制項。

在元件上

將額外控制項列表新增至所有元件的 stories。

在 MyComponent.stories.js 中新增

const meta = {
  ...
  argTypes: {
    backgroundColor: { control: 'color' }, // Color controls will be detected automatically
    label: { control: 'text' }, // Text controls may be added as extra
    text: { control: 'text' }, // Text controls may be added as extra
  },
  parameters: {
    colorPicker: {
      applyColorTo: ['label'] // Must match argType key
    }
  }
};

在 story 上

將額外控制項列表新增至選定的 story，以覆寫如上方範例中全域新增至元件的列表。

在 MyComponent.stories.js 中新增

export const SecondaryComponent = {
  ...
  parameters: {
    colorPicker: {
      applyColorTo: ['text'], // Pass empty array to clear extra controls
    }
  }
};

預設調色盤

停用預設調色盤

若要停用預設調色盤，只需將 disableDefaultPalettes: true 新增至全域、元件或 story 參數即可。

主題

Storybook-color-picker 會自動調整為 Storybook 上設定的主題。

若要覆寫 Storybook 主題

const meta = {
  ...
  parameters: {
    colorPicker: {
      theme: 'light' | 'dark' | 'auto' // Default 'auto'
    }
    ...
  }
};