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'
    }
    ...
  }
};