import styled from '@emotion/styled' import React, { useRef } from 'react' import useResizeObserver from 'use-resize-observer' import { GlobalStyle } from '../src/shared/components' const Wrapper = styled.div` padding: 10px; height: calc(100vh - 20px); & > * + * { margin-left: 15px; } ` const StylesWrapperDecorator = (styleFn) => { const ref = useRef(null) const { width, height } = useResizeObserver({ ref }) return (
{width}px x {height}px
{styleFn()}
) } export const decorators = [StylesWrapperDecorator] export const parameters = { actions: { argTypesRegex: '^on[A-Z].*' }, backgrounds: { default: 'black', values: [ { name: 'black', value: '#000000', }, { name: 'gray', value: '#272D33', }, ], }, options: { storySort: (a, b) => (a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true })), }, }