storybook-color-picker

storybook-color-picker

Description

A Storybook addon. It allows you to quickly find and copy to clipboard any color from your custom color palette.

Technology

Created with TypeScript, React and Storybook.

Migrate from v1 to v2

To migrate from v1 to v2 adjust parameters in preview.js to match the pattern shown in Usage section below.

Usage

$ npm i storybook-color-picker

In your .storybook folder find main.js file and add this addon like below.

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

In your .storybook folder find preview.js file and add your color palette to parameters like below. Scroll down to find out how your corol palette must look like.

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

export const parameters = {
  ...
  colorPalettes: {
    default: 'First palette', // Name of palette. Fallback to first palette in array.
    palettes: [
      {
        name: 'First palette',
        palette: yourFirstColorPalette,
      },
      {
        name: 'Second palette',
        palette: yourSecondColorPalette,
      },
    ]
  }
}

Palette

as Object

type ColorPaletteAsObjecy = Record<string, Record<string, string> | string>;

Example:

  {
    "light": {
      " 500": "#aaa",
      " 100": "#eee",
      " 400": "#bbb",
      " 200": "#ddd",
      " 300": "#ccc"
    },
    "dark": {
      "0100": "#888",
      "0500": "#000",
      "0400": "#222",
      "0200": "#666",
      "0300": "#444"
    }
  }

Usefull tip: add white spaces or zeros before numerical keys to prevent auto sorting

as Array

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

Example:

  [
    {
      "label": "light",
      "values": [
        {
          "label": "100",
          "value": "#fff"
        },
        {
          "label": "200",
          "value": "#aaa"
        }
      ]
    },
    {
      "label": "dark",
      "values": [
        {
          "label": "100",
          "value": "#222"
        },
        {
          "label": "200",
          "value": "#000000"
        }
      ]
    }
  ]

Changelog

v2.0.0

28.06.2021.

Breaking changes

• Changed format of color palette passed to Storybook parameters.

Added

• Support for multiple color palettes.

---