@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/theme-creator-block/ThemeCreatorBlock.stories.tsx

@@ -0,0 +1,370 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  WakaThemeCreatorBlock,
+  defaultThemes,
+} from './index'
+import type { ThemeCreatorBlockTheme, ThemeBlockColors, ThemeBlockAssets } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaThemeCreatorBlock> = {
+  title: 'Blocks/ThemeCreatorBlock',
+  component: WakaThemeCreatorBlock,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A visual theme creator for shadcn/ui with live preview, color pickers for all theme tokens (primary, secondary, accent, etc.), light/dark mode editing, asset uploads, and CSS export.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof WakaThemeCreatorBlock>
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-4 h-screen">
+      <WakaThemeCreatorBlock
+        themes={defaultThemes}
+        initialTheme={defaultThemes[0]}
+        onThemeChange={(theme) => console.log('Theme changed:', theme)}
+        onSave={async (theme) => {
+          console.log('Save theme:', theme)
+          await new Promise((resolve) => setTimeout(resolve, 1000))
+        }}
+      />
+    </div>
+  ),
+}
+
+export const OceanTheme: Story = {
+  render: () => (
+    <div className="p-4 h-screen">
+      <WakaThemeCreatorBlock
+        themes={defaultThemes}
+        initialTheme={defaultThemes.find((t) => t.id === 'ocean') || defaultThemes[1]}
+        onThemeChange={(theme) => console.log('Theme changed:', theme)}
+      />
+    </div>
+  ),
+}
+
+export const CustomThemes: Story = {
+  render: () => {
+    const customThemes: ThemeCreatorBlockTheme[] = [
+      ...defaultThemes,
+      {
+        id: 'sunset',
+        name: 'Sunset',
+        description: 'Warm sunset colors',
+        lightColors: {
+          background: '#fffbf5',
+          foreground: '#4a2c2a',
+          card: '#ffffff',
+          cardForeground: '#4a2c2a',
+          popover: '#ffffff',
+          popoverForeground: '#4a2c2a',
+          primary: '#e85d04',
+          primaryForeground: '#ffffff',
+          secondary: '#ffedd8',
+          secondaryForeground: '#4a2c2a',
+          muted: '#ffedd8',
+          mutedForeground: '#9d4a2c',
+          accent: '#f48c06',
+          accentForeground: '#ffffff',
+          destructive: '#dc2626',
+          destructiveForeground: '#ffffff',
+          border: '#ffd4a5',
+          input: '#ffd4a5',
+          ring: '#e85d04',
+          chart1: '#e85d04',
+          chart2: '#f48c06',
+          chart3: '#ffaa00',
+          chart4: '#dc6a2c',
+          chart5: '#9d4a2c',
+        },
+        darkColors: {
+          background: '#1a0f0a',
+          foreground: '#ffedd8',
+          card: '#2d1810',
+          cardForeground: '#ffedd8',
+          popover: '#2d1810',
+          popoverForeground: '#ffedd8',
+          primary: '#f48c06',
+          primaryForeground: '#1a0f0a',
+          secondary: '#3d2015',
+          secondaryForeground: '#ffedd8',
+          muted: '#3d2015',
+          mutedForeground: '#d4a574',
+          accent: '#e85d04',
+          accentForeground: '#ffffff',
+          destructive: '#b91c1c',
+          destructiveForeground: '#ffffff',
+          border: '#3d2015',
+          input: '#3d2015',
+          ring: '#f48c06',
+          chart1: '#f48c06',
+          chart2: '#ffaa00',
+          chart3: '#e85d04',
+          chart4: '#dc6a2c',
+          chart5: '#ffd4a5',
+        },
+        radius: '0.75rem',
+      },
+      {
+        id: 'forest',
+        name: 'Forest',
+        description: 'Natural green tones',
+        lightColors: {
+          background: '#f0fdf4',
+          foreground: '#14532d',
+          card: '#ffffff',
+          cardForeground: '#14532d',
+          popover: '#ffffff',
+          popoverForeground: '#14532d',
+          primary: '#16a34a',
+          primaryForeground: '#ffffff',
+          secondary: '#dcfce7',
+          secondaryForeground: '#14532d',
+          muted: '#dcfce7',
+          mutedForeground: '#4ade80',
+          accent: '#22c55e',
+          accentForeground: '#ffffff',
+          destructive: '#dc2626',
+          destructiveForeground: '#ffffff',
+          border: '#86efac',
+          input: '#86efac',
+          ring: '#16a34a',
+          chart1: '#16a34a',
+          chart2: '#22c55e',
+          chart3: '#4ade80',
+          chart4: '#166534',
+          chart5: '#15803d',
+        },
+        darkColors: {
+          background: '#052e16',
+          foreground: '#dcfce7',
+          card: '#14532d',
+          cardForeground: '#dcfce7',
+          popover: '#14532d',
+          popoverForeground: '#dcfce7',
+          primary: '#22c55e',
+          primaryForeground: '#052e16',
+          secondary: '#166534',
+          secondaryForeground: '#dcfce7',
+          muted: '#166534',
+          mutedForeground: '#4ade80',
+          accent: '#16a34a',
+          accentForeground: '#ffffff',
+          destructive: '#b91c1c',
+          destructiveForeground: '#ffffff',
+          border: '#166534',
+          input: '#166534',
+          ring: '#22c55e',
+          chart1: '#22c55e',
+          chart2: '#4ade80',
+          chart3: '#16a34a',
+          chart4: '#86efac',
+          chart5: '#15803d',
+        },
+        radius: '0.5rem',
+      },
+    ]
+
+    return (
+      <div className="p-4 h-screen">
+        <WakaThemeCreatorBlock
+          themes={customThemes}
+          initialTheme={customThemes[2]}
+          onThemeChange={(theme) => console.log('Theme changed:', theme)}
+        />
+      </div>
+    )
+  },
+}
+
+export const LoginPreviewOnly: Story = {
+  render: () => (
+    <div className="p-4 h-screen">
+      <WakaThemeCreatorBlock
+        themes={defaultThemes}
+        previewTabs={['login']}
+        onThemeChange={(theme) => console.log('Theme changed:', theme)}
+      />
+    </div>
+  ),
+}
+
+export const DashboardPreviewOnly: Story = {
+  render: () => (
+    <div className="p-4 h-screen">
+      <WakaThemeCreatorBlock
+        themes={defaultThemes}
+        previewTabs={['dashboard']}
+        onThemeChange={(theme) => console.log('Theme changed:', theme)}
+      />
+    </div>
+  ),
+}
+
+export const ChatPreviewOnly: Story = {
+  render: () => (
+    <div className="p-4 h-screen">
+      <WakaThemeCreatorBlock
+        themes={defaultThemes}
+        previewTabs={['chat']}
+        onThemeChange={(theme) => console.log('Theme changed:', theme)}
+      />
+    </div>
+  ),
+}
+
+export const WithAssetUpload: Story = {
+  render: () => (
+    <div className="p-4 h-screen">
+      <WakaThemeCreatorBlock
+        themes={defaultThemes}
+        onThemeChange={(theme) => console.log('Theme changed:', theme)}
+        onUploadAsset={async (file, assetType) => {
+          console.log('Upload asset:', file.name, assetType)
+          await new Promise((resolve) => setTimeout(resolve, 1500))
+          // Return a placeholder URL
+          return `https://placehold.co/400x200?text=${encodeURIComponent(assetType)}`
+        }}
+        onSave={async (theme) => {
+          console.log('Save theme with assets:', theme)
+          await new Promise((resolve) => setTimeout(resolve, 1000))
+        }}
+      />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [savedTheme, setSavedTheme] = React.useState<ThemeCreatorBlockTheme | null>(null)
+
+    const handleSave = async (theme: ThemeCreatorBlockTheme) => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      setSavedTheme(theme)
+      alert(`Theme "${theme.name}" saved successfully!`)
+    }
+
+    return (
+      <div className="h-screen flex flex-col">
+        {savedTheme && (
+          <div className="bg-green-500/10 border-b border-green-500/20 p-2 text-sm text-green-600">
+            Last saved: {savedTheme.name} (Primary: {savedTheme.lightColors.primary})
+          </div>
+        )}
+        <div className="flex-1 p-4">
+          <WakaThemeCreatorBlock
+            themes={defaultThemes}
+            onThemeChange={(theme) => console.log('Theme changed:', theme.name)}
+            onSave={handleSave}
+          />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const BrandingEditor: Story = {
+  render: () => {
+    const brandTheme: ThemeCreatorBlockTheme = {
+      id: 'brand',
+      name: 'Company Brand',
+      description: 'Official company theme',
+      lightColors: {
+        background: '#ffffff',
+        foreground: '#1f2937',
+        card: '#ffffff',
+        cardForeground: '#1f2937',
+        popover: '#ffffff',
+        popoverForeground: '#1f2937',
+        primary: '#4f46e5',
+        primaryForeground: '#ffffff',
+        secondary: '#e0e7ff',
+        secondaryForeground: '#1f2937',
+        muted: '#f3f4f6',
+        mutedForeground: '#6b7280',
+        accent: '#818cf8',
+        accentForeground: '#ffffff',
+        destructive: '#ef4444',
+        destructiveForeground: '#ffffff',
+        border: '#e5e7eb',
+        input: '#e5e7eb',
+        ring: '#4f46e5',
+        chart1: '#4f46e5',
+        chart2: '#818cf8',
+        chart3: '#06b6d4',
+        chart4: '#10b981',
+        chart5: '#f59e0b',
+      },
+      darkColors: {
+        background: '#111827',
+        foreground: '#f9fafb',
+        card: '#1f2937',
+        cardForeground: '#f9fafb',
+        popover: '#1f2937',
+        popoverForeground: '#f9fafb',
+        primary: '#818cf8',
+        primaryForeground: '#111827',
+        secondary: '#374151',
+        secondaryForeground: '#f9fafb',
+        muted: '#374151',
+        mutedForeground: '#9ca3af',
+        accent: '#4f46e5',
+        accentForeground: '#ffffff',
+        destructive: '#dc2626',
+        destructiveForeground: '#ffffff',
+        border: '#374151',
+        input: '#374151',
+        ring: '#818cf8',
+        chart1: '#818cf8',
+        chart2: '#a5b4fc',
+        chart3: '#22d3ee',
+        chart4: '#34d399',
+        chart5: '#fbbf24',
+      },
+      radius: '0.5rem',
+    }
+
+    return (
+      <div className="min-h-screen bg-muted/30">
+        <header className="bg-background border-b px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="font-bold text-xl">Brand Theme Editor</h1>
+              <p className="text-sm text-muted-foreground">Customize your application theme</p>
+            </div>
+            <nav className="flex gap-4 text-sm">
+              <a href="#" className="text-foreground font-medium">Theme</a>
+              <a href="#" className="text-muted-foreground hover:text-foreground">Typography</a>
+              <a href="#" className="text-muted-foreground hover:text-foreground">Components</a>
+            </nav>
+          </div>
+        </header>
+        <main className="p-4 h-[calc(100vh-73px)]">
+          <WakaThemeCreatorBlock
+            themes={[brandTheme, ...defaultThemes]}
+            initialTheme={brandTheme}
+            onThemeChange={(theme) => console.log('Theme changed:', theme)}
+            onSave={async (theme) => {
+              console.log('Save brand theme:', theme)
+              await new Promise((resolve) => setTimeout(resolve, 1000))
+            }}
+            onUploadAsset={async (file, assetType) => {
+              console.log('Upload:', file.name, assetType)
+              await new Promise((resolve) => setTimeout(resolve, 1000))
+              return URL.createObjectURL(file)
+            }}
+          />
+        </main>
+      </div>
+    )
+  },
+}