* Implement flat mode to transform flat data with parentId to nested structure. * Introduce lazy mode for on-demand loading of children. * Update tree rendering logic to accommodate new modes. * Enhance tree cell expansion logic to support lazy loading. * Add dark mode styles for improved UI experience. * Create comprehensive end-to-end tests for tree functionality.
43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import '@mantine/core/styles.css';
|
|
|
|
import type { Decorator } from '@storybook/react-vite';
|
|
|
|
import { MantineProvider } from '@mantine/core';
|
|
import { ModalsProvider } from '@mantine/modals';
|
|
|
|
import { GlobalStateStoreProvider } from '../src/GlobalStateStore';
|
|
|
|
export const PreviewDecorator: Decorator = (Story, context) => {
|
|
const { parameters, globals } = context;
|
|
const colorScheme = globals.colorScheme as 'light' | 'dark';
|
|
|
|
// Allow stories to opt-out of GlobalStateStore provider
|
|
const useGlobalStore = parameters.globalStore !== false;
|
|
|
|
// Use 100% for fullscreen layout, 100vh otherwise
|
|
const isFullscreen = parameters.layout === 'fullscreen';
|
|
const containerStyle = {
|
|
height: isFullscreen ? '100%' : '100vh',
|
|
width: isFullscreen ? '100%' : '100vw',
|
|
};
|
|
|
|
return (
|
|
<MantineProvider forceColorScheme={colorScheme}>
|
|
|
|
<ModalsProvider>
|
|
{useGlobalStore ? (
|
|
<GlobalStateStoreProvider fetchOnMount={false}>
|
|
<div style={containerStyle}>
|
|
<Story />
|
|
</div>
|
|
</GlobalStateStoreProvider>
|
|
) : (
|
|
<div style={containerStyle}>
|
|
<Story />
|
|
</div>
|
|
)}
|
|
</ModalsProvider>
|
|
</MantineProvider>
|
|
);
|
|
};
|