uniswap-interface-uncensored/.storybook/preview.tsx
Jordan Frankfurt 0ec6cad6d1
Revert "fix(storybook): remove it for now" (#9)
fix rebass types to work with storybook
2021-02-16 17:33:55 -05:00

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]