feat(tree): add flat and lazy modes for tree data handling

* 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.

.storybook/preview.ts

@@ -4,6 +4,23 @@ import { PreviewDecorator } from './previewDecorator';
 
 const preview: Preview = {
   decorators: [PreviewDecorator],
+  globalTypes: {
+    colorScheme: {
+      description: 'Mantine color scheme',
+      toolbar: {
+        dynamicTitle: true,
+        icon: 'paintbrush',
+        items: [
+          { icon: 'sun', title: 'Light', value: 'light' },
+          { icon: 'moon', title: 'Dark', value: 'dark' },
+        ],
+        title: 'Color Scheme',
+      },
+    },
+  },
+  initialGlobals: {
+    colorScheme: 'light',
+  },
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {

.storybook/previewDecorator.tsx

@@ -8,7 +8,8 @@ import { ModalsProvider } from '@mantine/modals';
 import { GlobalStateStoreProvider } from '../src/GlobalStateStore';
 
 export const PreviewDecorator: Decorator = (Story, context) => {
-  const { parameters } = 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;
@@ -21,7 +22,7 @@ export const PreviewDecorator: Decorator = (Story, context) => {
   };
 
   return (
-    <MantineProvider>
+    <MantineProvider forceColorScheme={colorScheme}>
       
       <ModalsProvider>
         {useGlobalStore ? (