acid-info
/
lsd
mirror of https://github.com/acid-info/lsd.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: fix storybook types

This commit is contained in:
Hossein Mehrabi 2023-10-06 18:56:08 +03:30
parent 5540ab53f8
commit f25b47522f
No known key found for this signature in database
GPG Key ID: 45C04964191AFAA1
4 changed files with 46 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
packages/lsd-react/.storybook/preview.tsx
View File

@ -1,52 +1,51 @@
import { DecoratorFunction, Parameters } from '@storybook/addons' import type { Preview } from '@storybook/react'
import { ArgTypes } from '@storybook/react'
import { THEME_TYPOGRAPHY_FONT_CATEGORIES } from '../src/components/Theme/constants' import { THEME_TYPOGRAPHY_FONT_CATEGORIES } from '../src/components/Theme/constants'
import { storybookThemes } from './themes' import { storybookThemes } from './themes'
import { GlobalTypes } from './types'
import { withTheme } from './withTheme.decorator' import { withTheme } from './withTheme.decorator'
export const parameters: Parameters = { const preview: Preview = {
...storybookThemes.parameters, parameters: {
actions: { argTypesRegex: '^on[A-Z].*' }, ...storybookThemes.parameters,
controls: { actions: { argTypesRegex: '^on[A-Z].*' },
matchers: { controls: {
color: /(background|color)$/i, matchers: {
date: /Date$/, color: /(background|color)$/i,
date: /Date$/,
},
}, },
}, viewport: {
viewport: { viewports: {
viewports: { ...Object.fromEntries(
...Object.fromEntries( Object.entries(storybookThemes.defaultTheme.breakpoints).map(
Object.entries(storybookThemes.defaultTheme.breakpoints).map( ([key, { width }]) => [
([key, { width }]) => [ key,
key, {
{ name: key,
name: key, styles: {
styles: { width: (width > 0 ? width : 360) + 'px',
width: (width > 0 ? width : 360) + 'px', height: 'auto',
height: 'auto', minHeight: 400,
minHeight: 400, },
}, },
}, ],
], ),
), ),
), },
}, },
}, },
decorators: [withTheme],
argTypes: {
genericFontFamily: {
type: {
name: 'enum',
value: THEME_TYPOGRAPHY_FONT_CATEGORIES,
},
defaultValue: 'inherit',
},
},
globalTypes: {
...storybookThemes.globalTypes,
},
} }
export const decorators: DecoratorFunction[] = [withTheme] export default preview
export const argTypes: ArgTypes = {
genericFontFamily: {
type: {
name: 'enum',
value: THEME_TYPOGRAPHY_FONT_CATEGORIES,
},
defaultValue: 'inherit',
},
}
export const globalTypes: GlobalTypes = {
...storybookThemes.globalTypes,
}

7
packages/lsd-react/.storybook/themes.ts
View File

@ -1,8 +1,7 @@
import { Parameters } from '@storybook/addons' import { Parameters, StoryContext } from '@storybook/react'
import { StoryContext } from '@storybook/react' import { GlobalTypes } from '@storybook/types'
import { createTheme, CreateThemeProps, defaultThemes } from '../src' import { CreateThemeProps, createTheme, defaultThemes } from '../src'
import { THEME_TYPOGRAPHY_FONT_CATEGORIES } from '../src/components/Theme/constants' import { THEME_TYPOGRAPHY_FONT_CATEGORIES } from '../src/components/Theme/constants'
import { GlobalTypes } from './types'
const themeProps: CreateThemeProps = { const themeProps: CreateThemeProps = {
typography: {}, typography: {},

4
packages/lsd-react/.storybook/types.ts
View File

@ -1,4 +0,0 @@
import { ToolbarArgType } from '@storybook/addon-toolbars/dist/ts3.9/types'
import { ArgTypes } from '@storybook/react'
export type GlobalTypes = ArgTypes<Partial<ToolbarArgType>>

5
packages/lsd-react/.storybook/withTheme.decorator.tsx
View File

@ -1,9 +1,10 @@
import { DecoratorFunction, useGlobals } from '@storybook/addons' import { useGlobals } from '@storybook/manager-api'
import { Decorator } from '@storybook/react'
import React, { useEffect } from 'react' import React, { useEffect } from 'react'
import { ThemeProvider } from '../src' import { ThemeProvider } from '../src'
import { storybookThemes } from './themes' import { storybookThemes } from './themes'
export const withTheme: DecoratorFunction = (Story, context) => { export const withTheme: Decorator = (Story, context) => {
const StoryComponent = Story as any as React.ComponentType const StoryComponent = Story as any as React.ComponentType
const theme = storybookThemes.getTheme(context) const theme = storybookThemes.getTheme(context)