config: storybook,vite,tsx (5 files)

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}`)
   }

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

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

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"]
+}

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'),
+    },
+  },
+})