0ec6cad6d1
fix rebass types to work with storybook
78 lines
1.6 KiB
TypeScript
78 lines
1.6 KiB
TypeScript
import { ThemeProvider as SCThemeProvider } from 'styled-components'
|
|
import { Story } from '@storybook/react/types-6-0'
|
|
import React from 'react'
|
|
import { FixedGlobalStyle, theme, ThemedGlobalStyle } from '../src/theme'
|
|
import * as storybookThemes from './theme'
|
|
|
|
export const parameters = {
|
|
actions: { argTypesRegex: '^on[A-Z].*' },
|
|
dependencies: {
|
|
withStoriesOnly: true,
|
|
hideEmpty: true
|
|
},
|
|
docs: {
|
|
theme: storybookThemes.light
|
|
},
|
|
viewport: {
|
|
viewports: {
|
|
mobile: {
|
|
name: 'iPhone X',
|
|
styles: {
|
|
width: '375px',
|
|
height: '812px'
|
|
}
|
|
},
|
|
tablet: {
|
|
name: 'iPad',
|
|
styles: {
|
|
width: '768px',
|
|
height: '1024px'
|
|
}
|
|
},
|
|
laptop: {
|
|
name: 'Laptop',
|
|
styles: {
|
|
width: '1024px',
|
|
height: '768px'
|
|
}
|
|
},
|
|
desktop: {
|
|
name: 'Desktop',
|
|
styles: {
|
|
width: '1440px',
|
|
height: '1024px'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
export const globalTypes = {
|
|
theme: {
|
|
name: 'Theme',
|
|
description: 'Global theme for components',
|
|
defaultValue: 'light',
|
|
toolbar: {
|
|
icon: 'circlehollow',
|
|
items: ['light', 'dark']
|
|
}
|
|
}
|
|
}
|
|
|
|
const withProviders = (Component: Story, context: Record<string, any>) => {
|
|
const THEME = theme(context.globals.theme === 'dark')
|
|
return (
|
|
<>
|
|
<FixedGlobalStyle />
|
|
<SCThemeProvider theme={THEME}>
|
|
<ThemedGlobalStyle />
|
|
<main>
|
|
<Component />
|
|
</main>
|
|
</SCThemeProvider>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export const decorators = [withProviders]
|