Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
storybook-color-picker
Advanced tools
Changelog
v4.0.0
3.9.2023.
Breaking changes
Dropped storybook v6 support.
Dependencies updated
Readme
A Storybook addon. It allows you to quickly find any color from your custom color palette and set it on component's controls and/or copy to clipboard.
Add one or multiple color palettes and set the primary palette globally, for component or single story.
$ npm i -D storybook-color-picker@latest
:information_source: Storybook support
storybook-color-picker
v4 doesn't supportstorybook
v6.
To usestorybook-color-picker
withstorybook
v6, installstorybook-color-picker
v3npm i -D storybook-color-picker@3
In your .storybook
folder find main.js
file and add this addon like below.
module.exports = {
addons: ['storybook-color-picker'],
}
This will add color picker and palettes everywhere in your storybook.
In your .storybook
folder find preview.js
file and add your color palette to parameters like below.
Scroll down to find out how your color palette must look like.
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,
},
]
}
};
This will add color picker and palettes to all component's stories.
In MyComponent.stories.js
add:
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
This will add color picker and palettes to specific story.
In MyComponent.stories.js
add:
export const SecondaryComponent = {
...
parameters: {
colorPicker: {
primaryPalette: 'Colorful palette',
applyColorTo: ['label'],
disableDefaultPalettes: true,
theme: 'dark',
},
}
}
type ColorPaletteAsObject = Record<string, Record<string, string> | string>
Example:
{
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"
}
}
Useful tip: add white spaces or zeros before numerical keys to prevent auto sorting
type ColorPaletteAsArray = {
label: string
values: [
{
label: string
value: string
},
]
}
Example:
const myArrayPalette = [
{
label: 'light',
values: [
{
label: '100',
value: '#fff',
},
{
label: '200',
value: '#aaa',
},
],
},
{
label: 'dark',
values: [
{
label: '100',
value: '#222',
},
{
label: '200',
value: '#000000',
},
],
},
]
This will apply for all component's stories.
In MyComponent.stories.js
add:
const meta = {
...
parameters: {
colorPicker: {
primaryPalette: 'Your second palette name',
}
}
};
This will apply for specific story.
In MyComponent.stories.js
add:
export const SecondaryComponent = {
...
parameters: {
colorPicker: {
primaryPalette: 'Your first palette name',
}
}
}
The following list increases by specificity.
primaryPalette
set on parameters in preview.js
primaryPalette
set on component parameters
primaryPalette
set on story MyComponent.parameters
All controls with type of "color" will be detected automatically. You can add extra controls to which color may be applied. Only controls of type "text" may be added as extra.
Add list of extra controls to all component's stories.
In MyComponent.stories.js
add:
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
}
}
};
Add list of extra controls to selected story to overwrite list added to component globally as in example above.
In MyComponent.stories.js
add:
export const SecondaryComponent = {
...
parameters: {
colorPicker: {
applyColorTo: ['text'], // Pass empty array to clear extra controls
}
}
};
To disable default palettes just add disableDefaultPalettes: true
to global, component or story parameters.
Storybook-color-picker will adjust automatically to the theme set on storybook.
To override the storybook theme:
const meta = {
...
parameters: {
colorPicker: {
theme: 'light' | 'dark' | 'auto' // Default 'auto'
}
...
}
};
FAQs
Choose a color from custom color palette and set it on component's control and/or copy it to clipboard.
The npm package storybook-color-picker receives a total of 2,708 weekly downloads. As such, storybook-color-picker popularity was classified as popular.
We found that storybook-color-picker demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.