Package Exports

storybook-color-picker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (storybook-color-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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"
        }
      ]
    }
  ]