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({