nandi.uk
This repository has no description
chore: storybook themeing
author
pdelfan
date
(Apr 29, 2026, 2:54 PM -0700)
commit
14455275
14455275775133ccb4026e808119bde8509669be
parent
361bf687
361bf6870731f2286eb50054e4df1fe1b1469563
+44
-12
+44
-12
src/webapp/.storybook/preview.tsx
+44
-12
src/webapp/.storybook/preview.tsx
···
13
13
},
14
14
});
15
15
16
+
// Mantine's default body background colors
17
+
const MANTINE_LIGHT_BG = '#ffffff';
18
+
const MANTINE_DARK_BG = '#1A1B1E';
19
+
16
20
const preview: Preview = {
21
+
globalTypes: {
22
+
colorScheme: {
23
+
description: 'Mantine color scheme',
24
+
toolbar: {
25
+
title: 'Color Scheme',
26
+
icon: 'circlehollow',
27
+
items: [
28
+
{ value: 'light', title: 'Light', icon: 'sun' },
29
+
{ value: 'dark', title: 'Dark', icon: 'moon' },
30
+
],
31
+
dynamicTitle: true,
32
+
},
33
+
},
34
+
},
35
+
36
+
initialGlobals: {
37
+
colorScheme: 'light',
38
+
backgrounds: { value: MANTINE_LIGHT_BG },
39
+
},
40
+
17
41
parameters: {
18
42
nextjs: {
19
43
appDirectory: true,
···
24
48
date: /Date$/i,
25
49
},
26
50
},
27
-
51
+
backgrounds: {
52
+
options: {
53
+
light: { name: 'Light', value: MANTINE_LIGHT_BG },
54
+
dark: { name: 'Dark', value: MANTINE_DARK_BG },
55
+
},
56
+
},
28
57
a11y: {
29
58
// 'todo' - show a11y violations in the test UI only
30
59
// 'error' - fail CI on a11y violations
···
34
63
},
35
64
36
65
decorators: [
37
-
(Story) => (
38
-
<QueryClientProvider client={queryClient}>
39
-
<MantineProvider
40
-
theme={theme}
41
-
cssVariablesResolver={v8CssVariablesResolver}
42
-
defaultColorScheme="light"
43
-
>
44
-
<Story />
45
-
</MantineProvider>
46
-
</QueryClientProvider>
47
-
),
66
+
(Story, context) => {
67
+
const colorScheme = (context.globals.colorScheme as 'light' | 'dark') ?? 'light';
68
+
return (
69
+
<QueryClientProvider client={queryClient}>
70
+
<MantineProvider
71
+
theme={theme}
72
+
cssVariablesResolver={v8CssVariablesResolver}
73
+
forceColorScheme={colorScheme}
74
+
>
75
+
<Story />
76
+
</MantineProvider>
77
+
</QueryClientProvider>
78
+
);
79
+
},
48
80
],
49
81
};
50
82