import * as React from 'react'

import { ChakraProvider, extendTheme } from '@chakra-ui/react'
import type { Preview, StoryFn } from '@storybook/react'
import theme from 'config/chakra.config'

const extendedTheme = extendTheme(theme)

/** @see {@link https://storybook.js.org/docs/7/essentials/toolbars-and-globals#create-a-decorator | Create a decorator} */
const withChakra = (Story: StoryFn) => (
  <ChakraProvider theme={extendedTheme}>
    <Story />
  </ChakraProvider>
)

const preview: Preview = {
  decorators: [withChakra]
}

export default preview