From cb9862819760879ac459eff4da45013cbb089939 Mon Sep 17 00:00:00 2001
From: Richard Ward <JohnDoe6345789@gmail.com>
Date: Tue, 30 Dec 2025 20:48:25 +0000
Subject: [PATCH] config: storybook,vite,tsx (5 files)

---
 dbal/development/src/blob/index.ts | 20 ++++++++++++------
 storybook/.storybook/main.ts       | 34 ++++++++++++++++++++++++++++++
 storybook/.storybook/preview.tsx   | 32 ++++++++++++++++++++++++++++
 storybook/tsconfig.node.json       | 11 ++++++++++
 storybook/vite.config.ts           | 13 ++++++++++++
 5 files changed, 104 insertions(+), 6 deletions(-)
 create mode 100644 storybook/.storybook/main.ts
 create mode 100644 storybook/.storybook/preview.tsx
 create mode 100644 storybook/tsconfig.node.json
 create mode 100644 storybook/vite.config.ts

diff --git a/dbal/development/src/blob/index.ts b/dbal/development/src/blob/index.ts
index 3066bc9dc..a4376271b 100644
--- a/dbal/development/src/blob/index.ts
+++ b/dbal/development/src/blob/index.ts
@@ -1,13 +1,14 @@
 export * from './blob-storage'
 export { MemoryStorage } from './providers/memory-storage'
 export { S3Storage } from './providers/s3'
-export { FilesystemStorage } from './providers/filesystem'
+// FilesystemStorage requires Node.js fs module - only available on server
+// export { FilesystemStorage } from './providers/filesystem'
 export { TenantAwareBlobStorage } from './providers/tenant-aware-storage'
 
 import type { BlobStorage, BlobStorageConfig } from './blob-storage'
 import { MemoryStorage } from './providers/memory-storage'
 import { S3Storage } from './providers/s3'
-import { FilesystemStorage } from './providers/filesystem'
+// import { FilesystemStorage } from './providers/filesystem'
 
 /**
  * Factory function to create blob storage instances
@@ -16,13 +17,20 @@ export function createBlobStorage(config: BlobStorageConfig): BlobStorage {
   switch (config.type) {
     case 'memory':
       return new MemoryStorage()
-    
+
     case 's3':
       return new S3Storage(config)
-    
+
     case 'filesystem':
-      return new FilesystemStorage(config)
-    
+      // Dynamically import FilesystemStorage only on server (Node.js)
+      if (typeof window === 'undefined') {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const { FilesystemStorage } = require('./providers/filesystem')
+        return new FilesystemStorage(config)
+      } else {
+        throw new Error('FilesystemStorage is not available in browser environments')
+      }
+
     default:
       throw new Error(`Unknown blob storage type: ${(config as any).type}`)
   }
diff --git a/storybook/.storybook/main.ts b/storybook/.storybook/main.ts
new file mode 100644
index 000000000..63b455e54
--- /dev/null
+++ b/storybook/.storybook/main.ts
@@ -0,0 +1,34 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+import { mergeConfig } from 'vite'
+import path from 'path'
+
+const config: StorybookConfig = {
+  stories: [
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  staticDirs: [
+    // Serve Lua packages from root
+    { from: '../../packages', to: '/packages' },
+  ],
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '../src'),
+          '@packages': path.resolve(__dirname, '../../packages'),
+        },
+      },
+    })
+  },
+}
+
+export default config
diff --git a/storybook/.storybook/preview.tsx b/storybook/.storybook/preview.tsx
new file mode 100644
index 000000000..1e1afeae8
--- /dev/null
+++ b/storybook/.storybook/preview.tsx
@@ -0,0 +1,32 @@
+import type { Preview } from '@storybook/react'
+import React from 'react'
+
+import '../src/styles/globals.scss'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: '#ffffff' },
+        { name: 'dark', value: '#1a1a2e' },
+        { name: 'canvas', value: '#f5f5f5' },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '1rem' }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default preview
diff --git a/storybook/tsconfig.node.json b/storybook/tsconfig.node.json
new file mode 100644
index 000000000..b85058209
--- /dev/null
+++ b/storybook/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/storybook/vite.config.ts b/storybook/vite.config.ts
new file mode 100644
index 000000000..29b8a7dc6
--- /dev/null
+++ b/storybook/vite.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@packages': path.resolve(__dirname, '../packages'),
+    },
+  },
+})