import type { Preview } from '@storybook/react';

import { withThemeByClassName } from '@storybook/addon-styling';
import { withThemeByDataAttribute } from '@storybook/addon-styling';

import './../src/app/globals.css';

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/
      }
    }
  }
};

export const decorators = [
  withThemeByDataAttribute({
    themes: {
      light: 'light',
      dark: 'dark'
    },
    defaultTheme: 'light',
    attributeName: 'data-mode'
  })
];

export default preview;