@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-service-graph/WakaServiceGraph.stories.tsx

@@ -0,0 +1,262 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaServiceGraph, defaultServices, defaultConnections } from './index'
+import type { ServiceNode, ServiceConnection, ServiceHealth, ServiceType } from './index'
+import * as React from 'react'
+
+const degradedServices: ServiceNode[] = [
+  { id: 'gateway', name: 'API Gateway', type: 'gateway', health: 'healthy', requestsPerSec: 1200, errorRate: 0.002 },
+  { id: 'auth', name: 'Auth Service', type: 'api', health: 'healthy', requestsPerSec: 400 },
+  { id: 'users', name: 'User Service', type: 'api', health: 'degraded', requestsPerSec: 280, errorRate: 0.08 },
+  { id: 'orders', name: 'Order Service', type: 'api', health: 'unhealthy', requestsPerSec: 50, errorRate: 0.25 },
+  { id: 'postgres', name: 'PostgreSQL', type: 'database', health: 'degraded' },
+  { id: 'redis', name: 'Redis', type: 'cache', health: 'healthy' },
+]
+
+const degradedConnections: ServiceConnection[] = [
+  { source: 'gateway', target: 'auth', requestsPerSec: 400 },
+  { source: 'gateway', target: 'users', requestsPerSec: 280, errorRate: 0.05 },
+  { source: 'gateway', target: 'orders', requestsPerSec: 50, errorRate: 0.15 },
+  { source: 'auth', target: 'redis', requestsPerSec: 800 },
+  { source: 'users', target: 'postgres', requestsPerSec: 150, errorRate: 0.03 },
+  { source: 'orders', target: 'postgres', requestsPerSec: 30, errorRate: 0.1 },
+]
+
+const simpleServices: ServiceNode[] = [
+  { id: 'frontend', name: 'Frontend', type: 'gateway', health: 'healthy' },
+  { id: 'backend', name: 'Backend API', type: 'api', health: 'healthy' },
+  { id: 'database', name: 'Database', type: 'database', health: 'healthy' },
+]
+
+const simpleConnections: ServiceConnection[] = [
+  { source: 'frontend', target: 'backend' },
+  { source: 'backend', target: 'database' },
+]
+
+const complexServices: ServiceNode[] = [
+  { id: 'gateway', name: 'Gateway', type: 'gateway', health: 'healthy', namespace: 'ingress', version: 'v2.0', replicas: 3, requestsPerSec: 5000, latencyP50: 12, latencyP99: 45 },
+  { id: 'auth', name: 'Auth', type: 'api', health: 'healthy', namespace: 'auth', replicas: 2, requestsPerSec: 1200 },
+  { id: 'users', name: 'Users', type: 'api', health: 'healthy', namespace: 'users', replicas: 3, requestsPerSec: 800 },
+  { id: 'orders', name: 'Orders', type: 'api', health: 'healthy', namespace: 'orders', replicas: 4, requestsPerSec: 600 },
+  { id: 'inventory', name: 'Inventory', type: 'api', health: 'healthy', namespace: 'inventory', replicas: 2, requestsPerSec: 400 },
+  { id: 'payments', name: 'Payments', type: 'api', health: 'healthy', namespace: 'payments', replicas: 2, requestsPerSec: 300 },
+  { id: 'notifications', name: 'Notifications', type: 'api', health: 'healthy', namespace: 'notifications', replicas: 1, requestsPerSec: 150 },
+  { id: 'postgres', name: 'PostgreSQL', type: 'database', health: 'healthy' },
+  { id: 'redis', name: 'Redis', type: 'cache', health: 'healthy' },
+  { id: 'rabbitmq', name: 'RabbitMQ', type: 'queue', health: 'healthy' },
+  { id: 'stripe', name: 'Stripe', type: 'external', health: 'healthy' },
+  { id: 'sendgrid', name: 'SendGrid', type: 'external', health: 'healthy' },
+]
+
+const complexConnections: ServiceConnection[] = [
+  { source: 'gateway', target: 'auth', requestsPerSec: 1200 },
+  { source: 'gateway', target: 'users', requestsPerSec: 800 },
+  { source: 'gateway', target: 'orders', requestsPerSec: 600 },
+  { source: 'gateway', target: 'inventory', requestsPerSec: 400 },
+  { source: 'auth', target: 'postgres', requestsPerSec: 500 },
+  { source: 'auth', target: 'redis', requestsPerSec: 2000 },
+  { source: 'users', target: 'postgres', requestsPerSec: 350 },
+  { source: 'orders', target: 'postgres', requestsPerSec: 280 },
+  { source: 'orders', target: 'payments', requestsPerSec: 200 },
+  { source: 'orders', target: 'inventory', requestsPerSec: 400 },
+  { source: 'orders', target: 'rabbitmq', requestsPerSec: 150 },
+  { source: 'inventory', target: 'postgres', requestsPerSec: 180 },
+  { source: 'payments', target: 'stripe', requestsPerSec: 100 },
+  { source: 'payments', target: 'postgres', requestsPerSec: 150 },
+  { source: 'notifications', target: 'sendgrid', requestsPerSec: 50 },
+  { source: 'rabbitmq', target: 'notifications', requestsPerSec: 150 },
+]
+
+const meta: Meta<typeof WakaServiceGraph> = {
+  title: 'Components/DevOps/WakaServiceGraph',
+  component: WakaServiceGraph,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A service mesh graph visualization with health indicators, connection metrics, zoom controls, and service type legend.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    showMetrics: {
+      control: 'boolean',
+      description: 'Show metrics on service nodes',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaServiceGraph>
+
+export const Default: Story = {
+  args: {
+    services: defaultServices,
+    connections: defaultConnections,
+  },
+  render: (args) => (
+    <div className="w-[700px] h-[500px]">
+      <WakaServiceGraph
+        {...args}
+        onServiceClick={(service) => console.log('Service click:', service)}
+        onConnectionClick={(connection) => console.log('Connection click:', connection)}
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const DegradedServices: Story = {
+  render: () => (
+    <div className="w-[700px] h-[500px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Service mesh with degraded and unhealthy services
+      </p>
+      <WakaServiceGraph
+        services={degradedServices}
+        connections={degradedConnections}
+        onServiceClick={(service) => console.log('Service click:', service)}
+      />
+    </div>
+  ),
+}
+
+export const SimpleGraph: Story = {
+  render: () => (
+    <div className="w-[600px] h-[400px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Simple 3-service architecture
+      </p>
+      <WakaServiceGraph
+        services={simpleServices}
+        connections={simpleConnections}
+      />
+    </div>
+  ),
+}
+
+export const ComplexMicroservices: Story = {
+  render: () => (
+    <div className="w-[800px] h-[600px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Complex microservices architecture
+      </p>
+      <WakaServiceGraph
+        services={complexServices}
+        connections={complexConnections}
+        onServiceClick={(service) => console.log('Service click:', service)}
+        onConnectionClick={(connection) => console.log('Connection click:', connection)}
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const NoMetrics: Story = {
+  render: () => (
+    <div className="w-[700px] h-[500px]">
+      <WakaServiceGraph
+        services={defaultServices}
+        connections={defaultConnections}
+        showMetrics={false}
+      />
+    </div>
+  ),
+}
+
+export const WithSelection: Story = {
+  render: () => {
+    const [selectedService, setSelectedService] = React.useState<string | undefined>('gateway')
+
+    return (
+      <div className="w-[700px] h-[500px]">
+        <p className="text-sm text-muted-foreground mb-4">
+          Selected: {selectedService || 'None'}
+        </p>
+        <WakaServiceGraph
+          services={defaultServices}
+          connections={defaultConnections}
+          selectedService={selectedService}
+          onServiceClick={(service) => setSelectedService(service.id)}
+        />
+      </div>
+    )
+  },
+}
+
+export const AllServiceTypes: Story = {
+  render: () => {
+    const typeServices: ServiceNode[] = [
+      { id: 'gateway', name: 'Gateway', type: 'gateway', health: 'healthy' },
+      { id: 'api', name: 'API Service', type: 'api', health: 'healthy' },
+      { id: 'database', name: 'Database', type: 'database', health: 'healthy' },
+      { id: 'cache', name: 'Cache', type: 'cache', health: 'healthy' },
+      { id: 'queue', name: 'Queue', type: 'queue', health: 'healthy' },
+      { id: 'external', name: 'External', type: 'external', health: 'healthy' },
+    ]
+
+    const typeConnections: ServiceConnection[] = [
+      { source: 'gateway', target: 'api' },
+      { source: 'api', target: 'database' },
+      { source: 'api', target: 'cache' },
+      { source: 'api', target: 'queue' },
+      { source: 'api', target: 'external' },
+    ]
+
+    return (
+      <div className="w-[700px] h-[500px]">
+        <p className="text-sm text-muted-foreground mb-4">
+          All service types demonstrated
+        </p>
+        <WakaServiceGraph
+          services={typeServices}
+          connections={typeConnections}
+        />
+      </div>
+    )
+  },
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div className="w-[600px] h-[400px]">
+      <WakaServiceGraph
+        services={[]}
+        connections={[]}
+      />
+    </div>
+  ),
+}
+
+export const ObservabilityDashboard: 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">Service Mesh Topology</h2>
+          <p className="text-sm text-muted-foreground">Production Environment</p>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="text-sm">
+            <span className="text-muted-foreground">Total RPS: </span>
+            <span className="font-medium">5,280</span>
+          </div>
+          <div className="text-sm">
+            <span className="text-muted-foreground">Error Rate: </span>
+            <span className="font-medium text-green-500">0.12%</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="w-[750px]">
+        <WakaServiceGraph
+          services={defaultServices}
+          connections={defaultConnections}
+          onServiceClick={(service) => console.log('Service click:', service)}
+          onConnectionClick={(connection) => console.log('Connection click:', connection)}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    </div>
+  ),
+}

package/src/components/waka-skeleton-wave/WakaSkeletonWave.stories.tsx

@@ -0,0 +1,321 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaSkeletonWave, WakaSkeletonText, WakaSkeletonAvatar, WakaSkeletonCard, WakaSkeletonList, WakaSkeletonGrid } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaSkeletonWave> = {
+  title: 'Components/Effects/WakaSkeletonWave',
+  component: WakaSkeletonWave,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A loading skeleton component with wave animation and various presets for common UI patterns.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    preset: {
+      control: 'select',
+      options: ['text', 'avatar', 'card', 'list', 'thumbnail', 'button'],
+      description: 'Preset shape configuration',
+    },
+    rounded: {
+      control: 'select',
+      options: ['none', 'sm', 'md', 'lg', 'xl', 'full'],
+      description: 'Border radius',
+    },
+    speed: {
+      control: { type: 'range', min: 0.5, max: 3, step: 0.1 },
+      description: 'Animation speed in seconds',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable wave animation',
+    },
+    width: {
+      control: 'text',
+      description: 'Width (CSS value or number for px)',
+    },
+    height: {
+      control: 'text',
+      description: 'Height (CSS value or number for px)',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaSkeletonWave>
+
+export const Default: Story = {
+  args: {
+    width: '100%',
+    height: 20,
+  },
+  render: (args) => (
+    <div className="space-y-4 w-[300px]">
+      <WakaSkeletonWave {...args} />
+      <WakaSkeletonWave {...args} width="80%" />
+      <WakaSkeletonWave {...args} width="60%" />
+    </div>
+  ),
+}
+
+export const Presets: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4">
+        <span className="w-20 text-sm text-muted-foreground">Text:</span>
+        <WakaSkeletonWave preset="text" className="w-[200px]" />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="w-20 text-sm text-muted-foreground">Avatar:</span>
+        <WakaSkeletonWave preset="avatar" />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="w-20 text-sm text-muted-foreground">Button:</span>
+        <WakaSkeletonWave preset="button" />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="w-20 text-sm text-muted-foreground">Thumbnail:</span>
+        <WakaSkeletonWave preset="thumbnail" />
+      </div>
+    </div>
+  ),
+}
+
+export const TextLines: Story = {
+  render: () => (
+    <div className="w-[400px]">
+      <WakaSkeletonText lines={4} />
+    </div>
+  ),
+}
+
+export const AvatarSizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <div className="text-center">
+        <WakaSkeletonAvatar size="sm" />
+        <p className="text-xs text-muted-foreground mt-2">sm</p>
+      </div>
+      <div className="text-center">
+        <WakaSkeletonAvatar size="md" />
+        <p className="text-xs text-muted-foreground mt-2">md</p>
+      </div>
+      <div className="text-center">
+        <WakaSkeletonAvatar size="lg" />
+        <p className="text-xs text-muted-foreground mt-2">lg</p>
+      </div>
+      <div className="text-center">
+        <WakaSkeletonAvatar size="xl" />
+        <p className="text-xs text-muted-foreground mt-2">xl</p>
+      </div>
+    </div>
+  ),
+}
+
+export const CardSkeleton: Story = {
+  render: () => (
+    <div className="w-[350px]">
+      <WakaSkeletonCard />
+    </div>
+  ),
+}
+
+export const CardVariations: Story = {
+  render: () => (
+    <div className="flex gap-6">
+      <div className="w-[280px]">
+        <p className="text-sm text-muted-foreground mb-2">With image</p>
+        <WakaSkeletonCard showImage showHeader />
+      </div>
+      <div className="w-[280px]">
+        <p className="text-sm text-muted-foreground mb-2">Without image</p>
+        <WakaSkeletonCard showImage={false} showHeader contentLines={4} />
+      </div>
+      <div className="w-[280px]">
+        <p className="text-sm text-muted-foreground mb-2">Minimal</p>
+        <WakaSkeletonCard showImage={false} showHeader={false} contentLines={3} />
+      </div>
+    </div>
+  ),
+}
+
+export const ListSkeleton: Story = {
+  render: () => (
+    <div className="w-[400px] border rounded-lg p-4">
+      <WakaSkeletonList items={5} />
+    </div>
+  ),
+}
+
+export const ListVariations: Story = {
+  render: () => (
+    <div className="flex gap-6">
+      <div className="w-[300px] border rounded-lg p-4">
+        <p className="text-sm text-muted-foreground mb-4">With actions</p>
+        <WakaSkeletonList items={3} showAction />
+      </div>
+      <div className="w-[300px] border rounded-lg p-4">
+        <p className="text-sm text-muted-foreground mb-4">Without avatar</p>
+        <WakaSkeletonList items={3} showAvatar={false} />
+      </div>
+    </div>
+  ),
+}
+
+export const GridSkeleton: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaSkeletonGrid items={6} columns={3} />
+    </div>
+  ),
+}
+
+export const GridAspectRatios: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Square (1:1)</p>
+        <WakaSkeletonGrid items={4} columns={4} aspectRatio={1} className="w-[400px]" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Landscape (16:9)</p>
+        <WakaSkeletonGrid items={3} columns={3} aspectRatio={16 / 9} className="w-[500px]" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Portrait (3:4)</p>
+        <WakaSkeletonGrid items={4} columns={4} aspectRatio={3 / 4} className="w-[400px]" />
+      </div>
+    </div>
+  ),
+}
+
+export const AnimationSpeeds: Story = {
+  render: () => (
+    <div className="space-y-6 w-[300px]">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Slow (2.5s)</p>
+        <WakaSkeletonWave width="100%" height={20} speed={2.5} />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Normal (1.5s)</p>
+        <WakaSkeletonWave width="100%" height={20} speed={1.5} />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Fast (0.8s)</p>
+        <WakaSkeletonWave width="100%" height={20} speed={0.8} />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">No animation</p>
+        <WakaSkeletonWave width="100%" height={20} animated={false} />
+      </div>
+    </div>
+  ),
+}
+
+export const RoundedVariants: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      {(['none', 'sm', 'md', 'lg', 'xl', 'full'] as const).map((r) => (
+        <div key={r} className="text-center">
+          <WakaSkeletonWave width={80} height={80} rounded={r} />
+          <p className="text-xs text-muted-foreground mt-2">{r}</p>
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+export const CustomColors: Story = {
+  render: () => (
+    <div className="space-y-6 w-[300px]">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Default</p>
+        <WakaSkeletonWave width="100%" height={20} />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Blue theme</p>
+        <WakaSkeletonWave
+          width="100%"
+          height={20}
+          baseColor="hsl(210 100% 95%)"
+          highlightColor="hsl(210 100% 80%)"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Purple theme</p>
+        <WakaSkeletonWave
+          width="100%"
+          height={20}
+          baseColor="hsl(270 80% 95%)"
+          highlightColor="hsl(270 80% 75%)"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const ProfilePageSkeleton: Story = {
+  render: () => (
+    <div className="w-[400px] border rounded-lg p-6 space-y-6">
+      <div className="flex items-center gap-4">
+        <WakaSkeletonAvatar size="xl" />
+        <div className="flex-1 space-y-2">
+          <WakaSkeletonWave width="60%" height={24} />
+          <WakaSkeletonWave width="40%" height={16} />
+        </div>
+      </div>
+      <WakaSkeletonText lines={3} />
+      <div className="flex gap-4">
+        <WakaSkeletonWave width={100} height={36} rounded="md" />
+        <WakaSkeletonWave width={100} height={36} rounded="md" />
+      </div>
+    </div>
+  ),
+}
+
+export const CommentsSkeleton: Story = {
+  render: () => (
+    <div className="w-[500px] space-y-4">
+      {[1, 2, 3].map((i) => (
+        <div key={i} className="flex gap-3">
+          <WakaSkeletonAvatar size="md" />
+          <div className="flex-1 space-y-2">
+            <div className="flex items-center gap-2">
+              <WakaSkeletonWave width={120} height={14} />
+              <WakaSkeletonWave width={60} height={12} />
+            </div>
+            <WakaSkeletonText lines={2} randomWidths />
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+export const TableSkeleton: Story = {
+  render: () => (
+    <div className="w-[600px] border rounded-lg overflow-hidden">
+      {/* Header */}
+      <div className="grid grid-cols-4 gap-4 p-4 bg-muted/50 border-b">
+        {[1, 2, 3, 4].map((i) => (
+          <WakaSkeletonWave key={i} width="80%" height={16} />
+        ))}
+      </div>
+      {/* Rows */}
+      {[1, 2, 3, 4, 5].map((row) => (
+        <div key={row} className="grid grid-cols-4 gap-4 p-4 border-b last:border-0">
+          {[1, 2, 3, 4].map((col) => (
+            <WakaSkeletonWave
+              key={col}
+              width={`${60 + Math.random() * 30}%`}
+              height={14}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  ),
+}