storybook-color-picker

描述

一个 Storybook 插件。它允许你快速查找自定义调色板中的任何颜色，并将其设置到组件控件和/或复制到剪贴板。

添加一个或多个调色板，并全局设置主调色板，或者为组件或单个故事设置。

使用方法

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

在组件上

这将为组件的所有故事添加颜色选择器和调色板。

在 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

在故事上

这将为特定的故事添加颜色选择器和调色板。

在 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',
      },
    ],
  },
]

在组件或其故事上设置主调色板

在组件上

这将应用于组件的所有故事。

在 MyComponent.stories.js 中添加

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

在故事上

这将应用于特定的故事。

在 MyComponent.stories.js 中添加

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

primaryPalette 的特异性

以下列表按特异性递增排列。

1. 在 preview.js 的参数中设置的 primaryPalette
2. 在组件 parameters 中设置的 primaryPalette
3. 在故事 MyComponent.parameters 中设置的 primaryPalette

将选定的颜色应用于组件的控件

所有类型为 "color" 的控件将自动检测。你可以添加额外的控件，颜色可以应用于这些控件。只有类型为 "text" 的控件可以作为额外控件添加。

在组件上

为组件的所有故事添加额外控件列表。

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

在故事上

为选定的故事添加额外控件列表，以覆盖添加到组件（如上例所示的全局）的列表。

在 MyComponent.stories.js 中添加

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

默认调色板

禁用默认调色板

要禁用默认调色板，只需在全局、组件或故事参数中添加 disableDefaultPalettes: true。

主题

Storybook-color-picker 将自动适应 Storybook 中设置的主题。

要覆盖 Storybook 主题

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