@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-metric-sparkline/WakaMetricSparkline.stories.tsx

@@ -0,0 +1,312 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaMetricSparkline, useSparklineData } from './index'
+import * as React from 'react'
+
+const sampleData = [45, 52, 38, 65, 72, 58, 80, 75, 90, 85, 95, 88]
+const trendingUpData = [20, 25, 30, 28, 35, 40, 38, 45, 50, 55, 60, 65]
+const trendingDownData = [80, 75, 78, 70, 65, 68, 60, 55, 50, 45, 40, 35]
+const volatileData = [50, 80, 30, 90, 40, 85, 25, 95, 35, 70, 45, 80]
+
+const meta: Meta<typeof WakaMetricSparkline> = {
+  title: 'Components/Charts/WakaMetricSparkline',
+  component: WakaMetricSparkline,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A compact inline sparkline chart for displaying metric trends with support for line, bar, and area variants.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['line', 'bar', 'area'],
+      description: 'Chart variant',
+    },
+    width: {
+      control: { type: 'range', min: 50, max: 200, step: 10 },
+      description: 'Width in pixels',
+    },
+    height: {
+      control: { type: 'range', min: 16, max: 48, step: 4 },
+      description: 'Height in pixels',
+    },
+    showValue: {
+      control: 'boolean',
+      description: 'Show current value',
+    },
+    showTrend: {
+      control: 'boolean',
+      description: 'Show trend indicator',
+    },
+    showMinMax: {
+      control: 'boolean',
+      description: 'Show min/max markers',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animations',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaMetricSparkline>
+
+export const Default: Story = {
+  args: {
+    data: sampleData,
+  },
+  render: (args) => <WakaMetricSparkline {...args} />,
+}
+
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex items-center gap-4">
+        <span className="w-20 text-sm text-muted-foreground">Line:</span>
+        <WakaMetricSparkline data={sampleData} variant="line" />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="w-20 text-sm text-muted-foreground">Area:</span>
+        <WakaMetricSparkline data={sampleData} variant="area" />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="w-20 text-sm text-muted-foreground">Bar:</span>
+        <WakaMetricSparkline data={sampleData} variant="bar" />
+      </div>
+    </div>
+  ),
+}
+
+export const TrendIndicators: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex items-center gap-4">
+        <span className="w-32 text-sm text-muted-foreground">Trending Up:</span>
+        <WakaMetricSparkline data={trendingUpData} />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="w-32 text-sm text-muted-foreground">Trending Down:</span>
+        <WakaMetricSparkline data={trendingDownData} />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="w-32 text-sm text-muted-foreground">Volatile:</span>
+        <WakaMetricSparkline data={volatileData} />
+      </div>
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex items-center gap-4">
+        <span className="w-24 text-sm text-muted-foreground">Small:</span>
+        <WakaMetricSparkline data={sampleData} width={60} height={16} />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="w-24 text-sm text-muted-foreground">Medium:</span>
+        <WakaMetricSparkline data={sampleData} width={80} height={24} />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="w-24 text-sm text-muted-foreground">Large:</span>
+        <WakaMetricSparkline data={sampleData} width={120} height={32} />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="w-24 text-sm text-muted-foreground">Extra Large:</span>
+        <WakaMetricSparkline data={sampleData} width={160} height={40} />
+      </div>
+    </div>
+  ),
+}
+
+export const WithMinMax: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <WakaMetricSparkline data={sampleData} showMinMax variant="line" width={120} height={32} />
+      <WakaMetricSparkline data={sampleData} showMinMax variant="area" width={120} height={32} />
+      <WakaMetricSparkline data={sampleData} showMinMax variant="bar" width={120} height={32} />
+    </div>
+  ),
+}
+
+export const CustomColors: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <WakaMetricSparkline data={trendingUpData} color="#8b5cf6" />
+      <WakaMetricSparkline data={sampleData} color="#f59e0b" />
+      <WakaMetricSparkline data={trendingDownData} color="#06b6d4" />
+    </div>
+  ),
+}
+
+export const NoValue: Story = {
+  render: () => <WakaMetricSparkline data={sampleData} showValue={false} />,
+}
+
+export const NoTrend: Story = {
+  render: () => <WakaMetricSparkline data={trendingUpData} showTrend={false} />,
+}
+
+export const CustomFormatter: Story = {
+  render: () => (
+    <WakaMetricSparkline
+      data={sampleData}
+      value={95}
+      formatValue={(v) => `${v}%`}
+    />
+  ),
+}
+
+export const CurrencyFormat: Story = {
+  render: () => (
+    <WakaMetricSparkline
+      data={[1200, 1350, 1180, 1450, 1520, 1380, 1600, 1550, 1720, 1650]}
+      value={1650}
+      formatValue={(v) => `$${v.toLocaleString()}`}
+    />
+  ),
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const { data, addPoint, reset, currentValue, previousValue } = useSparklineData({
+      initialData: [50, 55, 48, 60, 58],
+      maxPoints: 12,
+    })
+
+    const handleAdd = () => {
+      const newValue = Math.floor(Math.random() * 50) + 50
+      addPoint(newValue)
+    }
+
+    return (
+      <div className="space-y-4">
+        <div className="flex gap-2">
+          <button
+            onClick={handleAdd}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted"
+          >
+            Add Random Point
+          </button>
+          <button
+            onClick={reset}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted"
+          >
+            Reset
+          </button>
+        </div>
+        <WakaMetricSparkline
+          data={data}
+          value={currentValue}
+          previousValue={previousValue}
+          width={150}
+          height={32}
+        />
+      </div>
+    )
+  },
+}
+
+export const MetricsTable: Story = {
+  render: () => (
+    <div className="w-[500px] border rounded-lg overflow-hidden">
+      <table className="w-full text-sm">
+        <thead className="bg-muted">
+          <tr>
+            <th className="px-4 py-2 text-left font-medium">Metric</th>
+            <th className="px-4 py-2 text-right font-medium">Trend</th>
+          </tr>
+        </thead>
+        <tbody className="divide-y">
+          <tr>
+            <td className="px-4 py-3">Page Views</td>
+            <td className="px-4 py-3 text-right">
+              <WakaMetricSparkline
+                data={[1200, 1350, 1180, 1450, 1520, 1380, 1600]}
+                value={1600}
+                formatValue={(v) => `${(v / 1000).toFixed(1)}K`}
+              />
+            </td>
+          </tr>
+          <tr>
+            <td className="px-4 py-3">Conversion Rate</td>
+            <td className="px-4 py-3 text-right">
+              <WakaMetricSparkline
+                data={[2.1, 2.3, 2.0, 2.5, 2.8, 2.6, 3.1]}
+                value={3.1}
+                formatValue={(v) => `${v.toFixed(1)}%`}
+              />
+            </td>
+          </tr>
+          <tr>
+            <td className="px-4 py-3">Bounce Rate</td>
+            <td className="px-4 py-3 text-right">
+              <WakaMetricSparkline
+                data={[45, 42, 48, 40, 38, 41, 35]}
+                value={35}
+                formatValue={(v) => `${v}%`}
+              />
+            </td>
+          </tr>
+          <tr>
+            <td className="px-4 py-3">Avg Session</td>
+            <td className="px-4 py-3 text-right">
+              <WakaMetricSparkline
+                data={[180, 195, 170, 210, 225, 200, 240]}
+                value={240}
+                formatValue={(v) => `${Math.floor(v / 60)}:${(v % 60).toString().padStart(2, '0')}`}
+              />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  ),
+}
+
+export const KPICards: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <div className="p-4 border rounded-lg w-[180px]">
+        <p className="text-sm text-muted-foreground mb-1">Revenue</p>
+        <WakaMetricSparkline
+          data={[12000, 13500, 11800, 14500, 15200, 13800, 16000]}
+          value={16000}
+          formatValue={(v) => `$${(v / 1000).toFixed(0)}K`}
+          variant="area"
+          width={140}
+          height={28}
+        />
+      </div>
+      <div className="p-4 border rounded-lg w-[180px]">
+        <p className="text-sm text-muted-foreground mb-1">Users</p>
+        <WakaMetricSparkline
+          data={[850, 920, 880, 1050, 1120, 980, 1200]}
+          value={1200}
+          formatValue={(v) => v.toLocaleString()}
+          variant="line"
+          width={140}
+          height={28}
+        />
+      </div>
+      <div className="p-4 border rounded-lg w-[180px]">
+        <p className="text-sm text-muted-foreground mb-1">Orders</p>
+        <WakaMetricSparkline
+          data={[120, 145, 130, 165, 180, 155, 195]}
+          value={195}
+          variant="bar"
+          width={140}
+          height={28}
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const NoAnimation: Story = {
+  render: () => <WakaMetricSparkline data={sampleData} animated={false} />,
+}

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