
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
storybook-addon-theme-playground
Advanced tools
Yet another theme addon for storybook. It provides a panel where you can tweek the theme values directly.
storybook-addon-theme-playground
is a theme addon for storybook. It provides a panel where theme values can be tweeked directly.
npm install -D storybook-addon-theme-playground
yarn add -D storybook-addon-theme-playground
Add to .storybook/addons.js
import 'storybook-addon-theme-playground/register';
Add to .storybook/config.js
.
import { addDecorator } from '@storybook/react';
import { ThemeProvider } from 'styled-components';
import { withThemePlayground } from 'storybook-addon-theme-playground';
import theme from 'path/to/theme';
const options = {
theme,
provider: ThemeProvider
};
addDecorator(withThemePlayground(options));
... or to particular story
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { withThemePlayground } from 'storybook-addon-theme-playground';
import Button from './Button';
import theme from 'path/to/theme';
const options = {
theme,
provider: ThemeProvider
};
export default {
title: 'Button with theme',
decorators: [withThemePlayground(options)]
};
export const Primary = () => <Button>Primary Button</Button>;
theme
object
| Array<{ name: string, theme: object }>
| required
The theme object
or multiple themes as an array
of objects
. Look at the Multiple Themes section for an example.
provider
any
| required
Any provider component which will accept a theme object prop and children.
overrides
object
| optional
Optional override components of default components. Look at the Overrides section for detailed documentation.
config
object
| optional
An additional config object can be added. Look at the Config section for detailed documentation.
config.labelFormat
"path" || "startCase" || (path: string[]) => string
| default: "startCase"
config.debounce
boolean
| default: true
Set to false
updating the theme values will not be debounced.
config.showCode
boolean
| default: true
Set to false
no code component will be rendered.
To add multiple themes, add an Array
to the theme
key. Each theme must have a name
and a theme
key.
import { ThemeProvider } from 'styled-components';
import defaultTheme from 'path/to/default/theme';
import anotherTheme from 'path/to/another/theme';
const options = {
theme: [
{ name: 'Theme', theme: defaultTheme },
{ name: 'Another Theme', theme: anotherTheme }
],
provider: ThemeProvider
};
addDecorator(withThemePlayground(options));
Example
import { ThemeProvider } from 'styled-components';
addDecorator(
withThemePlayground({
theme: { button: { color: '#000' } },
provider: ThemeProvider,
config: {
// One of "path"
labelFormat: 'path', // "button.color"
// or "startCase"
labelFormat: 'startCase', // "Button Color"
// or a custom function
labelFormat: path => {
// path is equal to ["button", "color"]
return path.join('-'); // "button-color"
},
debounce: true || false,
showConfig: true || false
}
})
);
storybook-addon-theme-playground
will render a default component based on the theme value. If you want to customize them, you can override the default components by adding an overrides
object to the decorator.
As a key use the theme object path, e.g 'button.spacing'
Example
import { addDecorator } from '@storybook/react';
import { ThemeProvider } from 'styled-components';
import { withThemePlayground } from 'storybook-addon-theme-playground';
import theme from 'path/to/theme';
const overrides = {
'button.spacing': {
type: 'counter',
label: 'Button Spacing',
description: 'Spacing for all buttons',
min: 1,
max: 20,
steps: 1,
suffix: 'rem'
},
'button.color.primary': {
type: 'color',
label: 'Button Primary Color'
}
};
addDecorator(
withThemePlayground({ theme, overrides, provider: ThemeProvider })
);
'theme.path': {
type: 'color',
label: String | 'Theme Path',
description: String | null
}
'theme.path': {
type: 'counter',
label: String | 'Theme Path',
description: String | null,
min: Number | 0,
max: Number | 100,
steps: Number | 1,
suffix: String | null
}
'theme.path': {
type: 'select',
label: String | 'Theme Path',
description: String | null
options: [
{
value: String,
label: String
}
]
}
'theme.path': {
type: 'shorthand',
label: String | 'Theme Path',
description: String | null
}
'theme.path': {
type: 'switch',
label: String | 'Theme Path',
description: String | null
}
'theme.path': {
type: 'range',
label: String | 'Theme Path',
description: String | null,
min: Number | 0,
max: Number | 100,
steps: Number | 1,
suffix: String | null
}
storybook-addon-theme-playground
will render the following components based on the value.
Switch
boolean
Counter
number
Input
string
Textarea
string
&&string.length >= 40
Range
string
&&string.endsWith("px" || "rem" || "em" || "%")
Color
string
&&string.startsWith("#" || "rgba" || "rgba")
||label.includes("color")
Shorthand
object
&&Object.keys(object).length === 4
&&Object.keys(object).includes("top" && "right" && "bottom" && "left")
1.1.0 (2020-01-05)
Select
with RadioGroup
component for theme selectionSettingsItem
Code
component copy button stylingFAQs
Select between themes and tweak them directly in a panel.
The npm package storybook-addon-theme-playground receives a total of 210 weekly downloads. As such, storybook-addon-theme-playground popularity was classified as not popular.
We found that storybook-addon-theme-playground demonstrated a not healthy version release cadence and project activity because the last version was released 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
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.