mirror of https://github.com/acid-info/lsd.git
62 lines
1.4 KiB
TypeScript
62 lines
1.4 KiB
TypeScript
import { DecoratorFunction, Parameters } from '@storybook/addons'
|
|
import {
|
|
storybookDefaultTheme,
|
|
storybookDefaultThemeKey,
|
|
themes,
|
|
} from './themes'
|
|
import { withTheme } from './withTheme.decorator'
|
|
|
|
export const parameters: Parameters = {
|
|
actions: { argTypesRegex: '^on[A-Z].*' },
|
|
controls: {
|
|
matchers: {
|
|
color: /(background|color)$/i,
|
|
date: /Date$/,
|
|
},
|
|
},
|
|
backgrounds: {
|
|
default: 'light',
|
|
values: Object.entries(themes).map(([name, theme]) => ({
|
|
name,
|
|
value: `rgb(${theme.palette.secondary})`,
|
|
})),
|
|
},
|
|
viewport: {
|
|
viewports: {
|
|
...Object.fromEntries(
|
|
Object.entries(storybookDefaultTheme.breakpoints).map(
|
|
([key, { width }]) => [
|
|
key,
|
|
{
|
|
name: key,
|
|
styles: {
|
|
width: (width > 0 ? width : 360) + 'px',
|
|
height: 'auto',
|
|
minHeight: 400,
|
|
},
|
|
},
|
|
],
|
|
),
|
|
),
|
|
},
|
|
},
|
|
}
|
|
|
|
export const decorators: DecoratorFunction[] = [withTheme]
|
|
|
|
export const globalTypes = {
|
|
theme: {
|
|
name: 'Theme',
|
|
description: 'Theme',
|
|
defaultValue: storybookDefaultThemeKey,
|
|
toolbar: {
|
|
icon: 'circlehollow',
|
|
items: Object.entries(themes).map(([name, theme]) => ({
|
|
value: name,
|
|
icon: name.startsWith('Light') ? 'circlehollow' : 'circle',
|
|
title: name,
|
|
})),
|
|
},
|
|
},
|
|
}
|