nandi.uk
This repository has no description
2.1 kB
85 lines
1import type { Preview } from '@storybook/nextjs-vite';
2import '@mantine/core/styles.css';
3import '@mantine-bites/lightbox/styles.css';
4import { MantineProvider, v8CssVariablesResolver } from '@mantine/core';
5import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
6import { theme } from '../styles/theme';
7
8const queryClient = new QueryClient({
9 defaultOptions: {
10 queries: {
11 retry: false,
12 staleTime: Infinity,
13 },
14 },
15});
16
17// Mantine's default body background colors
18const MANTINE_LIGHT_BG = '#ffffff';
19const MANTINE_DARK_BG = '#1A1B1E';
20
21const preview: Preview = {
22 globalTypes: {
23 colorScheme: {
24 description: 'Mantine color scheme',
25 toolbar: {
26 title: 'Color Scheme',
27 icon: 'circlehollow',
28 items: [
29 { value: 'light', title: 'Light', icon: 'sun' },
30 { value: 'dark', title: 'Dark', icon: 'moon' },
31 ],
32 dynamicTitle: true,
33 },
34 },
35 },
36
37 initialGlobals: {
38 colorScheme: 'light',
39 backgrounds: { value: MANTINE_LIGHT_BG },
40 },
41
42 parameters: {
43 nextjs: {
44 appDirectory: true,
45 },
46 controls: {
47 matchers: {
48 color: /(background|color)$/i,
49 date: /Date$/i,
50 },
51 },
52 backgrounds: {
53 options: {
54 light: { name: 'Light', value: MANTINE_LIGHT_BG },
55 dark: { name: 'Dark', value: MANTINE_DARK_BG },
56 },
57 },
58 a11y: {
59 // 'todo' - show a11y violations in the test UI only
60 // 'error' - fail CI on a11y violations
61 // 'off' - skip a11y checks entirely
62 test: 'todo',
63 },
64 },
65
66 decorators: [
67 (Story, context) => {
68 const colorScheme =
69 (context.globals.colorScheme as 'light' | 'dark') ?? 'light';
70 return (
71 <QueryClientProvider client={queryClient}>
72 <MantineProvider
73 theme={theme}
74 cssVariablesResolver={v8CssVariablesResolver}
75 forceColorScheme={colorScheme}
76 >
77 <Story />
78 </MantineProvider>
79 </QueryClientProvider>
80 );
81 },
82 ],
83};
84
85export default preview;