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

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

@ -1,11 +1,10 @@
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 = {
parameters: {
...storybookThemes.parameters, ...storybookThemes.parameters,
actions: { argTypesRegex: '^on[A-Z].*' }, actions: { argTypesRegex: '^on[A-Z].*' },
controls: { controls: {
@ -33,11 +32,9 @@ export const parameters: Parameters = {
), ),
}, },
}, },
} },
decorators: [withTheme],
export const decorators: DecoratorFunction[] = [withTheme] argTypes: {
export const argTypes: ArgTypes = {
genericFontFamily: { genericFontFamily: {
type: { type: {
name: 'enum', name: 'enum',
@ -45,8 +42,10 @@ export const argTypes: ArgTypes = {
}, },
defaultValue: 'inherit', defaultValue: 'inherit',
}, },
},
globalTypes: {
...storybookThemes.globalTypes,
},
} }
export const globalTypes: GlobalTypes = { export default preview
...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)