@wakastellar/ui 2.3.5 → 3.0.0

package/src/components/waka-migration-list/WakaMigrationList.stories.tsx

@@ -0,0 +1,289 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaMigrationList, defaultMigrations } from './index'
+import type { Migration, MigrationStatus } from './index'
+import * as React from 'react'
+
+const allAppliedMigrations: Migration[] = [
+  {
+    id: '1',
+    version: '20240101_001',
+    name: 'create_users_table',
+    status: 'applied',
+    appliedAt: new Date(Date.now() - 30 * 24 * 3600000),
+    duration: 125,
+    author: 'john.doe',
+  },
+  {
+    id: '2',
+    version: '20240115_001',
+    name: 'add_users_email_index',
+    status: 'applied',
+    appliedAt: new Date(Date.now() - 20 * 24 * 3600000),
+    duration: 45,
+    author: 'jane.smith',
+  },
+  {
+    id: '3',
+    version: '20240201_001',
+    name: 'create_posts_table',
+    status: 'applied',
+    appliedAt: new Date(Date.now() - 10 * 24 * 3600000),
+    duration: 230,
+    author: 'john.doe',
+  },
+]
+
+const pendingMigrations: Migration[] = [
+  {
+    id: '1',
+    version: '20240301_001',
+    name: 'add_analytics_tracking',
+    description: 'Add analytics tracking columns to users',
+    status: 'pending',
+    author: 'data-team',
+    upScript: `ALTER TABLE users ADD COLUMN last_seen_at TIMESTAMP;
+ALTER TABLE users ADD COLUMN session_count INTEGER DEFAULT 0;`,
+    downScript: `ALTER TABLE users DROP COLUMN session_count;
+ALTER TABLE users DROP COLUMN last_seen_at;`,
+  },
+  {
+    id: '2',
+    version: '20240305_001',
+    name: 'create_notifications_table',
+    description: 'Create notifications table for in-app notifications',
+    status: 'pending',
+    author: 'jane.smith',
+    upScript: `CREATE TABLE notifications (
+  id SERIAL PRIMARY KEY,
+  user_id INTEGER REFERENCES users(id),
+  type VARCHAR(50) NOT NULL,
+  title VARCHAR(255),
+  body TEXT,
+  read_at TIMESTAMP,
+  created_at TIMESTAMP DEFAULT NOW()
+);
+CREATE INDEX idx_notifications_user ON notifications(user_id);`,
+    downScript: `DROP INDEX idx_notifications_user;
+DROP TABLE notifications;`,
+  },
+]
+
+const runningMigration: Migration[] = [
+  {
+    id: '1',
+    version: '20240220_001',
+    name: 'add_large_data_migration',
+    description: 'Migrating 10M rows - this may take a while',
+    status: 'running',
+    author: 'dba-team',
+  },
+]
+
+const meta: Meta<typeof WakaMigrationList> = {
+  title: 'Components/DevOps/WakaMigrationList',
+  component: WakaMigrationList,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A database migration list with status filters, apply/rollback actions, script previews, and error display.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    showScripts: {
+      control: 'boolean',
+      description: 'Show migration scripts',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaMigrationList>
+
+export const Default: Story = {
+  args: {
+    migrations: defaultMigrations,
+    currentVersion: '20240125_001',
+  },
+  render: (args) => (
+    <div className="w-[800px] h-[600px]">
+      <WakaMigrationList
+        {...args}
+        onApply={(m) => console.log('Apply:', m.version)}
+        onRollback={(m) => console.log('Rollback:', m.version)}
+        onViewDetails={(m) => console.log('View:', m.version)}
+      />
+    </div>
+  ),
+}
+
+export const WithScripts: Story = {
+  render: () => (
+    <div className="w-[800px] h-[700px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Click the chevron to expand and view migration scripts
+      </p>
+      <WakaMigrationList
+        migrations={defaultMigrations}
+        currentVersion="20240125_001"
+        showScripts
+        onApply={(m) => console.log('Apply:', m.version)}
+        onRollback={(m) => console.log('Rollback:', m.version)}
+      />
+    </div>
+  ),
+}
+
+export const AllApplied: Story = {
+  render: () => (
+    <div className="w-[800px] h-[500px]">
+      <WakaMigrationList
+        migrations={allAppliedMigrations}
+        currentVersion="20240201_001"
+        title="All Migrations Applied"
+        onRollback={(m) => console.log('Rollback:', m.version)}
+      />
+    </div>
+  ),
+}
+
+export const PendingOnly: Story = {
+  render: () => (
+    <div className="w-[800px] h-[500px]">
+      <WakaMigrationList
+        migrations={pendingMigrations}
+        showScripts
+        title="Pending Migrations"
+        onApply={(m) => console.log('Apply:', m.version)}
+      />
+    </div>
+  ),
+}
+
+export const WithRunning: Story = {
+  render: () => (
+    <div className="w-[800px] h-[400px]">
+      <WakaMigrationList
+        migrations={[...runningMigration, ...allAppliedMigrations]}
+        currentVersion="20240201_001"
+        title="Migration In Progress"
+      />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [migrations, setMigrations] = React.useState<Migration[]>(defaultMigrations)
+    const [currentVersion, setCurrentVersion] = React.useState('20240125_001')
+
+    const handleApply = (migration: Migration) => {
+      setMigrations((prev) =>
+        prev.map((m) =>
+          m.id === migration.id
+            ? { ...m, status: 'running' as MigrationStatus }
+            : m
+        )
+      )
+
+      setTimeout(() => {
+        setMigrations((prev) =>
+          prev.map((m) =>
+            m.id === migration.id
+              ? {
+                  ...m,
+                  status: 'applied' as MigrationStatus,
+                  appliedAt: new Date(),
+                  duration: Math.floor(Math.random() * 500) + 50,
+                }
+              : m
+          )
+        )
+        setCurrentVersion(migration.version)
+      }, 2000)
+    }
+
+    const handleRollback = (migration: Migration) => {
+      setMigrations((prev) =>
+        prev.map((m) =>
+          m.id === migration.id
+            ? {
+                ...m,
+                status: 'rolled_back' as MigrationStatus,
+                rolledBackAt: new Date(),
+              }
+            : m
+        )
+      )
+
+      const appliedMigrations = migrations
+        .filter((m) => m.status === 'applied' && m.version < migration.version)
+        .sort((a, b) => b.version.localeCompare(a.version))
+
+      if (appliedMigrations.length > 0) {
+        setCurrentVersion(appliedMigrations[0].version)
+      }
+    }
+
+    return (
+      <div className="w-[800px] h-[600px]">
+        <p className="text-sm text-muted-foreground mb-4">
+          Interactive demo - try applying and rolling back migrations
+        </p>
+        <WakaMigrationList
+          migrations={migrations}
+          currentVersion={currentVersion}
+          showScripts
+          onApply={handleApply}
+          onRollback={handleRollback}
+          onViewDetails={(m) => alert(`Migration: ${m.name}\n\n${m.description || 'No description'}`)}
+        />
+      </div>
+    )
+  },
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div className="w-[800px] h-[400px]">
+      <WakaMigrationList
+        migrations={[]}
+        title="No Migrations"
+      />
+    </div>
+  ),
+}
+
+export const DatabaseMigrationPanel: Story = {
+  render: () => (
+    <div className="p-6 rounded-xl border bg-card">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="text-xl font-bold">Database Migrations</h2>
+          <p className="text-sm text-muted-foreground">
+            production-db • PostgreSQL 15.4
+          </p>
+        </div>
+        <div className="flex items-center gap-2 text-sm">
+          <span className="text-muted-foreground">Current version:</span>
+          <code className="bg-muted px-2 py-0.5 rounded text-xs font-mono">
+            20240125_001
+          </code>
+        </div>
+      </div>
+
+      <div className="w-[750px]">
+        <WakaMigrationList
+          migrations={defaultMigrations}
+          currentVersion="20240125_001"
+          showScripts
+          onApply={(m) => console.log('Apply:', m.version)}
+          onRollback={(m) => console.log('Rollback:', m.version)}
+          onViewDetails={(m) => console.log('View:', m.version)}
+        />
+      </div>
+    </div>
+  ),
+}

package/src/components/waka-milestone-road/WakaMilestoneRoad.stories.tsx

@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaMilestoneRoad, Milestone } from "./index"
+
+const sampleMilestones: Milestone[] = [
+  {
+    id: "m1",
+    name: "Start",
+    description: "Begin your journey",
+    completed: true,
+    rewards: [{ type: "xp", value: 100 }],
+  },
+  {
+    id: "m2",
+    name: "First Steps",
+    description: "Complete 5 tasks",
+    completed: true,
+    rewards: [{ type: "xp", value: 200 }, { type: "badge", value: "Beginner" }],
+  },
+  {
+    id: "m3",
+    name: "Rising Star",
+    description: "Reach level 10",
+    completed: true,
+    isCurrent: false,
+    rewards: [{ type: "xp", value: 500 }],
+  },
+  {
+    id: "m4",
+    name: "Champion",
+    description: "Win 10 challenges",
+    completed: false,
+    isCurrent: true,
+    rewards: [{ type: "xp", value: 1000 }, { type: "item", value: "Gold Sword" }],
+  },
+  {
+    id: "m5",
+    name: "Master",
+    description: "Complete all achievements",
+    completed: false,
+    rewards: [{ type: "badge", value: "Master" }, { type: "currency", value: 5000 }],
+  },
+]
+
+const meta: Meta<typeof WakaMilestoneRoad> = {
+  title: "Components/Gamification/WakaMilestoneRoad",
+  component: WakaMilestoneRoad,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["horizontal", "vertical", "winding"],
+      description: "Display variant",
+    },
+    theme: {
+      control: "select",
+      options: ["default", "gold", "purple", "green", "blue"],
+      description: "Color theme",
+    },
+    animated: {
+      control: "boolean",
+      description: "Enable animations",
+    },
+    showCharacter: {
+      control: "boolean",
+      description: "Show character on road",
+    },
+    showProgressLabel: {
+      control: "boolean",
+      description: "Show progress percentage",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaMilestoneRoad>
+
+export const Winding: Story = {
+  args: {
+    milestones: sampleMilestones,
+    progress: 65,
+    variant: "winding",
+    theme: "default",
+    animated: true,
+    showCharacter: true,
+    showProgressLabel: true,
+  },
+  render: (args) => (
+    <div className="h-[600px] p-4">
+      <WakaMilestoneRoad {...args} />
+    </div>
+  ),
+}
+
+export const Horizontal: Story = {
+  args: {
+    milestones: sampleMilestones,
+    progress: 65,
+    variant: "horizontal",
+    theme: "gold",
+    animated: true,
+    showCharacter: true,
+  },
+  render: (args) => (
+    <div className="h-[300px] p-4">
+      <WakaMilestoneRoad {...args} />
+    </div>
+  ),
+}
+
+export const Vertical: Story = {
+  args: {
+    milestones: sampleMilestones,
+    progress: 65,
+    variant: "vertical",
+    theme: "purple",
+    animated: true,
+    showCharacter: true,
+  },
+  render: (args) => (
+    <div className="h-[600px] w-[300px] p-4">
+      <WakaMilestoneRoad {...args} />
+    </div>
+  ),
+}
+
+export const GreenTheme: Story = {
+  args: {
+    milestones: sampleMilestones,
+    progress: 40,
+    variant: "winding",
+    theme: "green",
+    animated: true,
+  },
+  render: (args) => (
+    <div className="h-[600px] p-4">
+      <WakaMilestoneRoad {...args} />
+    </div>
+  ),
+}
+