34 lines
1.0 KiB
TypeScript
34 lines
1.0 KiB
TypeScript
import '@mantine/core/styles.css';
|
|
|
|
import React, { useEffect } from 'react';
|
|
import { addons } from '@storybook/preview-api';
|
|
import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
|
|
import { MantineProvider, useMantineColorScheme } from '@mantine/core';
|
|
import { theme } from '../src/theme';
|
|
|
|
const channel = addons.getChannel();
|
|
|
|
export const parameters = {
|
|
layout: 'fullscreen',
|
|
options: {
|
|
showPanel: false,
|
|
},
|
|
};
|
|
|
|
function ColorSchemeWrapper({ children }: { children: React.ReactNode }) {
|
|
const { setColorScheme } = useMantineColorScheme();
|
|
const handleColorScheme = (value: boolean) => setColorScheme(value ? 'dark' : 'light');
|
|
|
|
useEffect(() => {
|
|
channel.on(DARK_MODE_EVENT_NAME, handleColorScheme);
|
|
return () => channel.off(DARK_MODE_EVENT_NAME, handleColorScheme);
|
|
}, [channel]);
|
|
|
|
return children;
|
|
}
|
|
|
|
export const decorators = [
|
|
(renderStory: any) => <ColorSchemeWrapper>{renderStory()}</ColorSchemeWrapper>,
|
|
(renderStory: any) => <MantineProvider theme={theme}>{renderStory()}</MantineProvider>,
|
|
];
|