nandi.uk
This repository has no description
2.0 kB
83 lines
1import type { Preview } from '@storybook/nextjs-vite';
2import '@mantine/core/styles.css';
3import { MantineProvider, v8CssVariablesResolver } from '@mantine/core';
4import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
5import { theme } from '../styles/theme';
6
7const queryClient = new QueryClient({
8 defaultOptions: {
9 queries: {
10 retry: false,
11 staleTime: Infinity,
12 },
13 },
14});
15
16// Mantine's default body background colors
17const MANTINE_LIGHT_BG = '#ffffff';
18const MANTINE_DARK_BG = '#1A1B1E';
19
20const 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
41 parameters: {
42 nextjs: {
43 appDirectory: true,
44 },
45 controls: {
46 matchers: {
47 color: /(background|color)$/i,
48 date: /Date$/i,
49 },
50 },
51 backgrounds: {
52 options: {
53 light: { name: 'Light', value: MANTINE_LIGHT_BG },
54 dark: { name: 'Dark', value: MANTINE_DARK_BG },
55 },
56 },
57 a11y: {
58 // 'todo' - show a11y violations in the test UI only
59 // 'error' - fail CI on a11y violations
60 // 'off' - skip a11y checks entirely
61 test: 'todo',
62 },
63 },
64
65 decorators: [
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 },
80 ],
81};
82
83export default preview;