mirror of https://github.com/acid-info/lsd.git
82 lines
1.9 KiB
TypeScript
82 lines
1.9 KiB
TypeScript
import {
|
|
Canvas,
|
|
Controls,
|
|
Description,
|
|
Subtitle,
|
|
Title,
|
|
useOf,
|
|
} from '@storybook/blocks'
|
|
import type { Preview } from '@storybook/react'
|
|
import React from 'react'
|
|
import { THEME_TYPOGRAPHY_FONT_CATEGORIES } from '../src/components/Theme/constants'
|
|
import { docTheme, storybookThemes } from './themes'
|
|
import { withTheme } from './withTheme.decorator'
|
|
|
|
const preview: Preview = {
|
|
parameters: {
|
|
...storybookThemes.parameters,
|
|
actions: { argTypesRegex: '^on[A-Z].*' },
|
|
controls: {
|
|
matchers: {
|
|
color: /(background|color)$/i,
|
|
date: /Date$/,
|
|
},
|
|
},
|
|
viewport: {
|
|
viewports: {
|
|
...Object.fromEntries(
|
|
Object.entries(storybookThemes.defaultTheme.breakpoints).map(
|
|
([key, { width }]) => [
|
|
key,
|
|
{
|
|
name: key,
|
|
styles: {
|
|
width: (width > 0 ? width : 360) + 'px',
|
|
height: 'auto',
|
|
minHeight: 400,
|
|
},
|
|
},
|
|
],
|
|
),
|
|
),
|
|
},
|
|
},
|
|
docs: {
|
|
theme: docTheme,
|
|
page: () => {
|
|
const resolvedOf = useOf('meta', ['meta'])
|
|
const { stories, meta, moduleExports } = resolvedOf.csfFile
|
|
|
|
const controls =
|
|
typeof meta?.parameters?.docs?.controls === 'undefined' ||
|
|
meta?.parameters?.docs?.controls === true
|
|
|
|
return (
|
|
<>
|
|
<Title />
|
|
<Subtitle />
|
|
<Description />
|
|
<Canvas sourceState="shown" />
|
|
{controls && <Controls />}
|
|
</>
|
|
)
|
|
},
|
|
},
|
|
},
|
|
decorators: [withTheme],
|
|
argTypes: {
|
|
genericFontFamily: {
|
|
type: {
|
|
name: 'enum',
|
|
value: THEME_TYPOGRAPHY_FONT_CATEGORIES,
|
|
},
|
|
defaultValue: 'inherit',
|
|
},
|
|
},
|
|
globalTypes: {
|
|
...storybookThemes.globalTypes,
|
|
},
|
|
}
|
|
|
|
export default preview
|