import React from 'react'; import '../styles.css'; import './storybook.css'; import type { Preview } from "@storybook/react"; import ShadeProvider from '../src/providers/ShadeProvider'; import shadeTheme from './shade-theme'; // import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'; const customViewports = { sm: { name: 'sm', styles: { width: '480px', height: '801px', }, }, md: { name: 'md', styles: { width: '640px', height: '801px', }, }, lg: { name: 'lg', styles: { width: '1024px', height: '801px', }, }, xl: { name: 'xl', styles: { width: '1320px', height: '801px', }, }, tablet: { name: 'tablet', styles: { width: '860px', height: '801px', }, }, }; const preview: Preview = { parameters: { actions: { argTypesRegex: "^on[A-Z].*" }, controls: { matchers: { color: /(background|color)$/i, date: /Date$/, }, }, options: { storySort: { method: 'alphabetical', order: ['Welcome', 'Adding components', 'Component usage', 'Conventions', 'Icons', 'Components', 'Meta', 'Experimental'], }, }, docs: { theme: shadeTheme, }, viewport: { viewports: { ...customViewports, }, }, }, decorators: [ (Story, context) => { let {scheme} = context.globals; return (