@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-pod-card/WakaPodCard.stories.tsx

@@ -0,0 +1,435 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaPodCard, defaultPodDetails } from './index'
+import type { PodDetails, PodPhase, ContainerState } from './index'
+import * as React from 'react'
+
+const pendingPod: PodDetails = {
+  name: 'worker-deployment-7c8d9e0f1a-b2c3d',
+  namespace: 'default',
+  phase: 'Pending',
+  nodeName: 'node-3',
+  startTime: new Date(Date.now() - 5 * 60 * 1000),
+  containers: [
+    {
+      name: 'worker',
+      image: 'myapp/worker:v2.0.0',
+      state: 'waiting',
+      ready: false,
+      restartCount: 0,
+      reason: 'ImagePullBackOff',
+      message: 'Back-off pulling image "myapp/worker:v2.0.0"',
+    },
+  ],
+  events: [
+    {
+      type: 'Normal',
+      reason: 'Scheduled',
+      message: 'Successfully assigned default/worker-deployment-7c8d9e0f1a-b2c3d to node-3',
+      timestamp: new Date(Date.now() - 5 * 60 * 1000),
+    },
+    {
+      type: 'Normal',
+      reason: 'Pulling',
+      message: 'Pulling image "myapp/worker:v2.0.0"',
+      timestamp: new Date(Date.now() - 4 * 60 * 1000),
+    },
+    {
+      type: 'Warning',
+      reason: 'Failed',
+      message: 'Failed to pull image "myapp/worker:v2.0.0": rpc error: code = NotFound',
+      timestamp: new Date(Date.now() - 3 * 60 * 1000),
+    },
+    {
+      type: 'Warning',
+      reason: 'Failed',
+      message: 'Error: ImagePullBackOff',
+      timestamp: new Date(Date.now() - 1 * 60 * 1000),
+      count: 5,
+    },
+  ],
+  labels: {
+    app: 'worker',
+    version: 'v2.0.0',
+  },
+}
+
+const failedPod: PodDetails = {
+  name: 'migration-job-abc123',
+  namespace: 'database',
+  phase: 'Failed',
+  nodeName: 'node-2',
+  podIP: '10.244.2.45',
+  hostIP: '192.168.1.11',
+  startTime: new Date(Date.now() - 30 * 60 * 1000),
+  containers: [
+    {
+      name: 'migrate',
+      image: 'myapp/migrations:v1.5.0',
+      state: 'terminated',
+      ready: false,
+      restartCount: 3,
+      reason: 'Error',
+      message: 'Exit code 1: Migration failed - duplicate key constraint',
+    },
+  ],
+  events: [
+    {
+      type: 'Warning',
+      reason: 'BackOff',
+      message: 'Back-off restarting failed container',
+      timestamp: new Date(Date.now() - 5 * 60 * 1000),
+      count: 3,
+    },
+  ],
+  labels: {
+    'job-name': 'migration-job',
+  },
+}
+
+const multiContainerPod: PodDetails = {
+  name: 'web-app-5f6g7h8i9j-k0l1m',
+  namespace: 'production',
+  phase: 'Running',
+  nodeName: 'node-1',
+  podIP: '10.244.1.100',
+  hostIP: '192.168.1.10',
+  startTime: new Date(Date.now() - 7 * 24 * 3600000),
+  containers: [
+    {
+      name: 'nginx',
+      image: 'nginx:1.25-alpine',
+      state: 'running',
+      ready: true,
+      restartCount: 0,
+      startedAt: new Date(Date.now() - 7 * 24 * 3600000),
+      resources: {
+        cpu: { used: 25, limit: 100 },
+        memory: { used: 32 * 1024 * 1024, limit: 64 * 1024 * 1024 },
+      },
+      ports: [{ containerPort: 80, protocol: 'TCP' }],
+    },
+    {
+      name: 'app',
+      image: 'myapp/frontend:v3.2.1',
+      state: 'running',
+      ready: true,
+      restartCount: 1,
+      startedAt: new Date(Date.now() - 3 * 24 * 3600000),
+      resources: {
+        cpu: { used: 200, limit: 500 },
+        memory: { used: 384 * 1024 * 1024, limit: 512 * 1024 * 1024 },
+      },
+      ports: [
+        { containerPort: 3000, protocol: 'TCP' },
+        { containerPort: 9090, protocol: 'TCP' },
+      ],
+    },
+    {
+      name: 'envoy',
+      image: 'envoyproxy/envoy:v1.28.0',
+      state: 'running',
+      ready: true,
+      restartCount: 0,
+      startedAt: new Date(Date.now() - 7 * 24 * 3600000),
+      resources: {
+        cpu: { used: 75, limit: 200 },
+        memory: { used: 96 * 1024 * 1024, limit: 256 * 1024 * 1024 },
+      },
+      ports: [
+        { containerPort: 15000, protocol: 'TCP' },
+        { containerPort: 15001, protocol: 'TCP' },
+      ],
+    },
+  ],
+  labels: {
+    app: 'web-app',
+    version: 'v3.2.1',
+    environment: 'production',
+    team: 'frontend',
+    'istio-injection': 'enabled',
+    'prometheus.io/scrape': 'true',
+  },
+  annotations: {
+    'prometheus.io/port': '9090',
+    'prometheus.io/path': '/metrics',
+  },
+}
+
+const succeededPod: PodDetails = {
+  name: 'backup-cronjob-1234567890-abc',
+  namespace: 'database',
+  phase: 'Succeeded',
+  nodeName: 'node-2',
+  podIP: '10.244.2.88',
+  startTime: new Date(Date.now() - 2 * 3600000),
+  containers: [
+    {
+      name: 'backup',
+      image: 'myapp/backup:v1.0.0',
+      state: 'terminated',
+      ready: false,
+      restartCount: 0,
+      reason: 'Completed',
+      message: 'Container completed successfully',
+    },
+  ],
+  events: [
+    {
+      type: 'Normal',
+      reason: 'Completed',
+      message: 'Job completed successfully',
+      timestamp: new Date(Date.now() - 1 * 3600000),
+    },
+  ],
+  labels: {
+    'job-name': 'backup-cronjob',
+  },
+}
+
+const meta: Meta<typeof WakaPodCard> = {
+  title: 'Components/DevOps/WakaPodCard',
+  component: WakaPodCard,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A Kubernetes pod card with container details, resource metrics, events, logs/exec buttons, and lifecycle actions.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    showEvents: {
+      control: 'boolean',
+      description: 'Show events section',
+    },
+    compact: {
+      control: 'boolean',
+      description: 'Compact mode (hide labels)',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaPodCard>
+
+export const Default: Story = {
+  args: {
+    pod: defaultPodDetails,
+  },
+  render: (args) => (
+    <div className="w-[500px]">
+      <WakaPodCard
+        {...args}
+        onViewLogs={(name) => console.log('View logs:', name)}
+        onExec={(name) => console.log('Exec:', name)}
+        onDelete={() => console.log('Delete')}
+        onRestart={() => console.log('Restart')}
+      />
+    </div>
+  ),
+}
+
+export const AllPhases: Story = {
+  render: () => {
+    const phases: PodPhase[] = ['Running', 'Pending', 'Succeeded', 'Failed', 'Unknown']
+    const pods: PodDetails[] = phases.map((phase) => ({
+      name: `example-pod-${phase.toLowerCase()}`,
+      namespace: 'default',
+      phase,
+      containers: [
+        {
+          name: 'container',
+          image: 'nginx:latest',
+          state: phase === 'Running' ? 'running' : phase === 'Pending' ? 'waiting' : 'terminated',
+          ready: phase === 'Running',
+          restartCount: 0,
+        },
+      ],
+    }))
+
+    return (
+      <div className="grid grid-cols-1 gap-4 w-[500px]">
+        {pods.map((pod) => (
+          <WakaPodCard key={pod.phase} pod={pod} />
+        ))}
+      </div>
+    )
+  },
+}
+
+export const Pending: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaPodCard
+        pod={pendingPod}
+        onViewLogs={(name) => console.log('View logs:', name)}
+        onRestart={() => console.log('Restart')}
+        onDelete={() => console.log('Delete')}
+      />
+    </div>
+  ),
+}
+
+export const Failed: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaPodCard
+        pod={failedPod}
+        onViewLogs={(name) => console.log('View logs:', name)}
+        onDelete={() => console.log('Delete')}
+      />
+    </div>
+  ),
+}
+
+export const Succeeded: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaPodCard
+        pod={succeededPod}
+        onViewLogs={(name) => console.log('View logs:', name)}
+        onDelete={() => console.log('Delete')}
+      />
+    </div>
+  ),
+}
+
+export const MultipleContainers: Story = {
+  render: () => (
+    <div className="w-[550px]">
+      <WakaPodCard
+        pod={multiContainerPod}
+        onViewLogs={(name) => console.log('View logs:', name)}
+        onExec={(name) => console.log('Exec:', name)}
+        onDelete={() => console.log('Delete')}
+        onRestart={() => console.log('Restart')}
+      />
+    </div>
+  ),
+}
+
+export const NoEvents: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaPodCard
+        pod={defaultPodDetails}
+        showEvents={false}
+        onViewLogs={(name) => console.log('View logs:', name)}
+        onExec={(name) => console.log('Exec:', name)}
+      />
+    </div>
+  ),
+}
+
+export const Compact: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaPodCard
+        pod={multiContainerPod}
+        compact
+        onViewLogs={(name) => console.log('View logs:', name)}
+        onExec={(name) => console.log('Exec:', name)}
+      />
+    </div>
+  ),
+}
+
+export const NoActions: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Read-only view without action buttons
+      </p>
+      <WakaPodCard pod={defaultPodDetails} />
+    </div>
+  ),
+}
+
+export const HighResourceUsage: Story = {
+  render: () => {
+    const highUsagePod: PodDetails = {
+      name: 'memory-hungry-app-xyz123',
+      namespace: 'default',
+      phase: 'Running',
+      nodeName: 'node-1',
+      podIP: '10.244.1.50',
+      startTime: new Date(Date.now() - 1 * 3600000),
+      containers: [
+        {
+          name: 'app',
+          image: 'myapp/heavy:latest',
+          state: 'running',
+          ready: true,
+          restartCount: 2,
+          resources: {
+            cpu: { used: 950, limit: 1000 },
+            memory: { used: 1900 * 1024 * 1024, limit: 2048 * 1024 * 1024 },
+          },
+        },
+      ],
+      events: [
+        {
+          type: 'Warning',
+          reason: 'OOMKilled',
+          message: 'Container killed due to out of memory',
+          timestamp: new Date(Date.now() - 30 * 60 * 1000),
+          count: 2,
+        },
+      ],
+    }
+
+    return (
+      <div className="w-[500px]">
+        <p className="text-sm text-muted-foreground mb-4">
+          Pod with high resource utilization
+        </p>
+        <WakaPodCard
+          pod={highUsagePod}
+          onViewLogs={(name) => console.log('View logs:', name)}
+          onRestart={() => console.log('Restart')}
+        />
+      </div>
+    )
+  },
+}
+
+export const PodDetailsPanel: 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">Pod Details</h2>
+          <p className="text-sm text-muted-foreground">Namespace: production</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-2 h-2 rounded-full bg-green-500" />
+          <span className="text-sm text-green-500 font-medium">Healthy</span>
+        </div>
+      </div>
+
+      <div className="w-[500px]">
+        <WakaPodCard
+          pod={multiContainerPod}
+          onViewLogs={(name) => {
+            console.log('View logs:', name)
+            alert(`Opening logs for container: ${name}`)
+          }}
+          onExec={(name) => {
+            console.log('Exec:', name)
+            alert(`Opening terminal for container: ${name}`)
+          }}
+          onDelete={() => {
+            if (confirm('Are you sure you want to delete this pod?')) {
+              console.log('Delete confirmed')
+            }
+          }}
+          onRestart={() => {
+            console.log('Restart')
+            alert('Pod will be restarted')
+          }}
+        />
+      </div>
+    </div>
+  ),
+}

package/src/components/waka-qrcode/WakaQRCode.stories.tsx

@@ -0,0 +1,232 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaQRCode } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaQRCode> = {
+  title: 'Components/Display/WakaQRCode',
+  component: WakaQRCode,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A QR code generator component with customizable colors, logo support, and download/copy actions.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'range', min: 100, max: 400, step: 20 },
+      description: 'Size in pixels',
+    },
+    errorCorrectionLevel: {
+      control: 'select',
+      options: ['L', 'M', 'Q', 'H'],
+      description: 'Error correction level',
+    },
+    fgColor: {
+      control: 'color',
+      description: 'Foreground color',
+    },
+    bgColor: {
+      control: 'color',
+      description: 'Background color',
+    },
+    includeMargin: {
+      control: 'boolean',
+      description: 'Include margin around QR code',
+    },
+    showActions: {
+      control: 'boolean',
+      description: 'Show download and copy actions',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaQRCode>
+
+export const Default: Story = {
+  args: {
+    value: 'https://example.com',
+    size: 200,
+  },
+}
+
+export const WithActions: Story = {
+  args: {
+    value: 'https://example.com',
+    size: 200,
+    showActions: true,
+  },
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-end gap-8">
+      <div className="text-center">
+        <WakaQRCode value="https://example.com" size={100} />
+        <p className="text-xs text-muted-foreground mt-2">100px</p>
+      </div>
+      <div className="text-center">
+        <WakaQRCode value="https://example.com" size={150} />
+        <p className="text-xs text-muted-foreground mt-2">150px</p>
+      </div>
+      <div className="text-center">
+        <WakaQRCode value="https://example.com" size={200} />
+        <p className="text-xs text-muted-foreground mt-2">200px</p>
+      </div>
+      <div className="text-center">
+        <WakaQRCode value="https://example.com" size={250} />
+        <p className="text-xs text-muted-foreground mt-2">250px</p>
+      </div>
+    </div>
+  ),
+}
+
+export const CustomColors: Story = {
+  render: () => (
+    <div className="grid grid-cols-3 gap-8">
+      <div className="text-center">
+        <WakaQRCode value="https://example.com" size={150} fgColor="#000000" bgColor="#FFFFFF" />
+        <p className="text-xs text-muted-foreground mt-2">Default</p>
+      </div>
+      <div className="text-center">
+        <WakaQRCode value="https://example.com" size={150} fgColor="#1E40AF" bgColor="#DBEAFE" />
+        <p className="text-xs text-muted-foreground mt-2">Blue</p>
+      </div>
+      <div className="text-center">
+        <WakaQRCode value="https://example.com" size={150} fgColor="#15803D" bgColor="#DCFCE7" />
+        <p className="text-xs text-muted-foreground mt-2">Green</p>
+      </div>
+      <div className="text-center">
+        <WakaQRCode value="https://example.com" size={150} fgColor="#7C3AED" bgColor="#EDE9FE" />
+        <p className="text-xs text-muted-foreground mt-2">Purple</p>
+      </div>
+      <div className="text-center">
+        <WakaQRCode value="https://example.com" size={150} fgColor="#DC2626" bgColor="#FEE2E2" />
+        <p className="text-xs text-muted-foreground mt-2">Red</p>
+      </div>
+      <div className="text-center">
+        <WakaQRCode value="https://example.com" size={150} fgColor="#FFFFFF" bgColor="#1F2937" />
+        <p className="text-xs text-muted-foreground mt-2">Inverted</p>
+      </div>
+    </div>
+  ),
+}
+
+export const ErrorCorrectionLevels: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-8">
+      <div className="text-center">
+        <WakaQRCode value="https://example.com" size={150} errorCorrectionLevel="L" />
+        <p className="text-xs text-muted-foreground mt-2">Low (L) - 7%</p>
+      </div>
+      <div className="text-center">
+        <WakaQRCode value="https://example.com" size={150} errorCorrectionLevel="M" />
+        <p className="text-xs text-muted-foreground mt-2">Medium (M) - 15%</p>
+      </div>
+      <div className="text-center">
+        <WakaQRCode value="https://example.com" size={150} errorCorrectionLevel="Q" />
+        <p className="text-xs text-muted-foreground mt-2">Quartile (Q) - 25%</p>
+      </div>
+      <div className="text-center">
+        <WakaQRCode value="https://example.com" size={150} errorCorrectionLevel="H" />
+        <p className="text-xs text-muted-foreground mt-2">High (H) - 30%</p>
+      </div>
+    </div>
+  ),
+}
+
+export const WithLogo: Story = {
+  args: {
+    value: 'https://example.com',
+    size: 250,
+    logoUrl: 'https://via.placeholder.com/50',
+    logoSize: 0.2,
+  },
+}
+
+export const NoMargin: Story = {
+  render: () => (
+    <div className="flex gap-8 items-center">
+      <div className="text-center border p-2">
+        <WakaQRCode value="https://example.com" size={150} includeMargin={true} />
+        <p className="text-xs text-muted-foreground mt-2">With Margin</p>
+      </div>
+      <div className="text-center border p-2">
+        <WakaQRCode value="https://example.com" size={150} includeMargin={false} />
+        <p className="text-xs text-muted-foreground mt-2">No Margin</p>
+      </div>
+    </div>
+  ),
+}
+
+export const DifferentContent: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-8">
+      <div className="text-center">
+        <WakaQRCode value="https://github.com" size={150} />
+        <p className="text-xs text-muted-foreground mt-2">URL</p>
+      </div>
+      <div className="text-center">
+        <WakaQRCode value="tel:+1234567890" size={150} />
+        <p className="text-xs text-muted-foreground mt-2">Phone Number</p>
+      </div>
+      <div className="text-center">
+        <WakaQRCode value="mailto:contact@example.com" size={150} />
+        <p className="text-xs text-muted-foreground mt-2">Email</p>
+      </div>
+      <div className="text-center">
+        <WakaQRCode value="WIFI:S:MyNetwork;T:WPA;P:password123;;" size={150} />
+        <p className="text-xs text-muted-foreground mt-2">WiFi</p>
+      </div>
+    </div>
+  ),
+}
+
+export const ContactCard: Story = {
+  render: () => (
+    <div className="border rounded-lg p-6 w-[350px]">
+      <div className="flex items-start gap-4">
+        <WakaQRCode
+          value="BEGIN:VCARD
+VERSION:3.0
+N:Doe;John
+FN:John Doe
+ORG:Acme Inc
+TITLE:Developer
+TEL:+1-555-123-4567
+EMAIL:john@example.com
+END:VCARD"
+          size={120}
+        />
+        <div>
+          <h3 className="font-semibold">John Doe</h3>
+          <p className="text-sm text-muted-foreground">Developer at Acme Inc</p>
+          <p className="text-sm mt-2">+1-555-123-4567</p>
+          <p className="text-sm text-blue-600">john@example.com</p>
+        </div>
+      </div>
+      <p className="text-xs text-muted-foreground mt-4">Scan to save contact</p>
+    </div>
+  ),
+}
+
+export const TicketQRCode: Story = {
+  render: () => (
+    <div className="border rounded-lg overflow-hidden w-[300px]">
+      <div className="bg-primary p-4 text-primary-foreground">
+        <h3 className="font-semibold">Event Ticket</h3>
+        <p className="text-sm opacity-90">Tech Conference 2024</p>
+      </div>
+      <div className="p-4 flex flex-col items-center">
+        <WakaQRCode value="TICKET-2024-001-ABCD" size={180} showActions />
+        <div className="mt-4 text-center">
+          <p className="text-sm font-medium">Ticket #001-ABCD</p>
+          <p className="text-xs text-muted-foreground">Present this QR code at entry</p>
+        </div>
+      </div>
+    </div>
+  ),
+}