diff --git a/clients/web/.storybook/main.ts b/clients/web/.storybook/main.ts index c152c560..78cf7b39 100644 --- a/clients/web/.storybook/main.ts +++ b/clients/web/.storybook/main.ts @@ -7,7 +7,6 @@ const config: StorybookConfig = { ], "addons": [ "@chromatic-com/storybook", - "@storybook/addon-actions", "@storybook/addon-vitest", "@storybook/addon-a11y", "@storybook/addon-docs", diff --git a/clients/web/.storybook/preview.tsx b/clients/web/.storybook/preview.tsx index 26fa9dcd..5a6be884 100644 --- a/clients/web/.storybook/preview.tsx +++ b/clients/web/.storybook/preview.tsx @@ -1,17 +1,53 @@ import type { Preview } from '@storybook/react-vite' -import { MantineProvider } from '@mantine/core' +import { MantineProvider, useMantineColorScheme } from '@mantine/core' import { Notifications } from '@mantine/notifications' import '@mantine/core/styles.css' import '@mantine/notifications/styles.css' import '../src/App.css' import { theme } from '../src/theme/theme' +import { useEffect } from 'react' + +function ColorSchemeWrapper({ + colorScheme, + children, +}: { + colorScheme: 'light' | 'dark' + children: React.ReactNode +}) { + const { setColorScheme } = useMantineColorScheme() + + useEffect(() => { + setColorScheme(colorScheme) + }, [colorScheme, setColorScheme]) + + return <>{children} +} const preview: Preview = { + globalTypes: { + colorScheme: { + description: 'Mantine color scheme', + toolbar: { + title: 'Color Scheme', + icon: 'mirror', + items: [ + { value: 'light', title: 'Light', icon: 'sun' }, + { value: 'dark', title: 'Dark', icon: 'moon' }, + ], + dynamicTitle: true, + }, + }, + }, + initialGlobals: { + colorScheme: 'light', + }, decorators: [ - (Story) => ( + (Story, context) => ( - - + + + + ), ], diff --git a/clients/web/package-lock.json b/clients/web/package-lock.json index e3ef6d3a..087803b8 100644 --- a/clients/web/package-lock.json +++ b/clients/web/package-lock.json @@ -20,7 +20,6 @@ "@chromatic-com/storybook": "^5.0.1", "@eslint/js": "^9.39.4", "@storybook/addon-a11y": "^10.2.19", - "@storybook/addon-actions": "^9.0.8", "@storybook/addon-docs": "^10.2.19", "@storybook/addon-onboarding": "^10.2.19", "@storybook/addon-vitest": "^10.2.19", @@ -1696,17 +1695,6 @@ "storybook": "^10.2.19" } }, - "node_modules/@storybook/addon-actions": { - "version": "9.0.8", - "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-9.0.8.tgz", - "integrity": "sha512-LFePu7PPnWN0Il/uoUpmA5T0J0C7d6haJIbg0pXrjxW2MQVSYXE4S4LSUz8fOImltBDV3xAl6tLPYHFj6VcrOA==", - "dev": true, - "license": "MIT", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - } - }, "node_modules/@storybook/addon-docs": { "version": "10.2.19", "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-10.2.19.tgz", diff --git a/clients/web/package.json b/clients/web/package.json index 2927c5ba..74a6a58b 100644 --- a/clients/web/package.json +++ b/clients/web/package.json @@ -26,7 +26,6 @@ "@chromatic-com/storybook": "^5.0.1", "@eslint/js": "^9.39.4", "@storybook/addon-a11y": "^10.2.19", - "@storybook/addon-actions": "^9.0.8", "@storybook/addon-docs": "^10.2.19", "@storybook/addon-onboarding": "^10.2.19", "@storybook/addon-vitest": "^10.2.19", diff --git a/clients/web/src/components/atoms/InlineError/InlineError.tsx b/clients/web/src/components/atoms/InlineError/InlineError.tsx index c4be1732..f4569f2b 100644 --- a/clients/web/src/components/atoms/InlineError/InlineError.tsx +++ b/clients/web/src/components/atoms/InlineError/InlineError.tsx @@ -38,7 +38,7 @@ export function InlineError({ - diff --git a/clients/web/tsconfig.storybook.json b/clients/web/tsconfig.storybook.json index 2d90c8da..0749d4fb 100644 --- a/clients/web/tsconfig.storybook.json +++ b/clients/web/tsconfig.storybook.json @@ -3,6 +3,6 @@ "compilerOptions": { "types": ["vite/client"] }, - "include": ["src/**/*.stories.ts", "src/**/*.stories.tsx"], + "include": ["src/**/*.stories.ts", "src/**/*.stories.tsx", ".storybook/**/*.ts", ".storybook/**/*.tsx"], "exclude": [] }