@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-kanban/WakaKanban.stories.tsx

@@ -0,0 +1,399 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaKanban, useKanban } from './index'
+import type { KanbanColumn, KanbanCard } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaKanban> = {
+  title: 'Components/Display/WakaKanban',
+  component: WakaKanban,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'A drag-and-drop Kanban board component for task management and workflow visualization.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    allowAddCard: {
+      control: 'boolean',
+      description: 'Allow adding new cards',
+    },
+    allowAddColumn: {
+      control: 'boolean',
+      description: 'Allow adding new columns',
+    },
+    allowColumnDrag: {
+      control: 'boolean',
+      description: 'Allow dragging columns',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaKanban>
+
+const sampleColumns: KanbanColumn[] = [
+  {
+    id: 'todo',
+    title: 'To Do',
+    color: '#6B7280',
+    cards: [
+      {
+        id: 'card-1',
+        title: 'Design new landing page',
+        description: 'Create wireframes and mockups for the new marketing landing page',
+        labels: [
+          { id: 'l1', name: 'Design', color: '#8B5CF6' },
+        ],
+        priority: 'high',
+        assignee: { id: 'u1', name: 'John Doe' },
+      },
+      {
+        id: 'card-2',
+        title: 'Write API documentation',
+        description: 'Document all REST API endpoints',
+        labels: [
+          { id: 'l2', name: 'Docs', color: '#3B82F6' },
+        ],
+        priority: 'medium',
+      },
+    ],
+  },
+  {
+    id: 'in-progress',
+    title: 'In Progress',
+    color: '#3B82F6',
+    limit: 3,
+    cards: [
+      {
+        id: 'card-3',
+        title: 'Implement user authentication',
+        description: 'Add OAuth2 support for Google and GitHub login',
+        labels: [
+          { id: 'l3', name: 'Backend', color: '#10B981' },
+          { id: 'l4', name: 'Security', color: '#EF4444' },
+        ],
+        priority: 'urgent',
+        assignee: { id: 'u2', name: 'Jane Smith' },
+        dueDate: new Date('2024-01-25'),
+      },
+    ],
+  },
+  {
+    id: 'review',
+    title: 'In Review',
+    color: '#F59E0B',
+    cards: [
+      {
+        id: 'card-4',
+        title: 'Fix responsive issues',
+        description: 'Address mobile layout bugs reported by QA',
+        labels: [
+          { id: 'l5', name: 'Bug', color: '#EF4444' },
+        ],
+        priority: 'high',
+        assignee: { id: 'u1', name: 'John Doe' },
+      },
+    ],
+  },
+  {
+    id: 'done',
+    title: 'Done',
+    color: '#10B981',
+    cards: [
+      {
+        id: 'card-5',
+        title: 'Setup CI/CD pipeline',
+        description: 'Configure GitHub Actions for automated testing and deployment',
+        labels: [
+          { id: 'l6', name: 'DevOps', color: '#8B5CF6' },
+        ],
+        priority: 'medium',
+        assignee: { id: 'u3', name: 'Mike Johnson' },
+      },
+    ],
+  },
+]
+
+export const Default: Story = {
+  args: {},
+  render: (args) => {
+    const { columns, moveCard, addCard, deleteCard } = useKanban(sampleColumns)
+
+    return (
+      <div className="h-[600px] bg-muted/30">
+        <WakaKanban
+          {...args}
+          columns={columns}
+          onCardMove={moveCard}
+          onCardAdd={addCard}
+          onCardDelete={deleteCard}
+          onCardClick={(card) => console.log('Card clicked:', card)}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithColumnManagement: Story = {
+  render: () => {
+    const { columns, moveCard, addCard, deleteCard, addColumn, deleteColumn, moveColumn } = useKanban(sampleColumns)
+
+    return (
+      <div className="h-[600px] bg-muted/30">
+        <WakaKanban
+          columns={columns}
+          onCardMove={moveCard}
+          onCardAdd={addCard}
+          onCardDelete={deleteCard}
+          onColumnAdd={addColumn}
+          onColumnDelete={deleteColumn}
+          onColumnMove={moveColumn}
+          allowAddColumn
+          allowColumnDrag
+        />
+      </div>
+    )
+  },
+}
+
+export const ReadOnly: Story = {
+  args: {
+    columns: sampleColumns,
+    allowAddCard: false,
+    height: 600,
+  },
+}
+
+export const CustomCardRenderer: Story = {
+  render: () => {
+    const { columns, moveCard } = useKanban(sampleColumns)
+
+    const renderCard = (card: KanbanCard) => (
+      <div className="bg-gradient-to-br from-primary/5 to-primary/10 border border-primary/20 rounded-lg p-3">
+        <h4 className="font-semibold text-sm">{card.title}</h4>
+        {card.description && (
+          <p className="text-xs text-muted-foreground mt-1 line-clamp-2">
+            {card.description}
+          </p>
+        )}
+        {card.priority && (
+          <div className="mt-2">
+            <span className={`
+              text-[10px] font-medium px-2 py-0.5 rounded-full
+              ${card.priority === 'urgent' ? 'bg-red-100 text-red-700' : ''}
+              ${card.priority === 'high' ? 'bg-orange-100 text-orange-700' : ''}
+              ${card.priority === 'medium' ? 'bg-blue-100 text-blue-700' : ''}
+              ${card.priority === 'low' ? 'bg-gray-100 text-gray-700' : ''}
+            `}>
+              {card.priority}
+            </span>
+          </div>
+        )}
+      </div>
+    )
+
+    return (
+      <div className="h-[600px] bg-muted/30">
+        <WakaKanban
+          columns={columns}
+          onCardMove={moveCard}
+          renderCard={renderCard}
+          allowAddCard={false}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithWIPLimits: Story = {
+  render: () => {
+    const columnsWithLimits: KanbanColumn[] = [
+      {
+        id: 'backlog',
+        title: 'Backlog',
+        cards: sampleColumns[0].cards,
+      },
+      {
+        id: 'in-progress',
+        title: 'In Progress',
+        color: '#3B82F6',
+        limit: 2,
+        cards: sampleColumns[1].cards,
+      },
+      {
+        id: 'review',
+        title: 'Review',
+        color: '#F59E0B',
+        limit: 1,
+        cards: sampleColumns[2].cards,
+      },
+      {
+        id: 'done',
+        title: 'Done',
+        color: '#10B981',
+        cards: sampleColumns[3].cards,
+      },
+    ]
+
+    const { columns, moveCard, addCard } = useKanban(columnsWithLimits)
+
+    return (
+      <div className="h-[600px] bg-muted/30">
+        <WakaKanban
+          columns={columns}
+          onCardMove={moveCard}
+          onCardAdd={addCard}
+        />
+      </div>
+    )
+  },
+}
+
+export const SimpleBoard: Story = {
+  render: () => {
+    const simpleColumns: KanbanColumn[] = [
+      {
+        id: 'ideas',
+        title: 'Ideas',
+        cards: [
+          { id: '1', title: 'Mobile app redesign' },
+          { id: '2', title: 'Add dark mode' },
+          { id: '3', title: 'Performance optimization' },
+        ],
+      },
+      {
+        id: 'doing',
+        title: 'Doing',
+        cards: [
+          { id: '4', title: 'API refactoring' },
+        ],
+      },
+      {
+        id: 'done',
+        title: 'Done',
+        cards: [
+          { id: '5', title: 'Database migration' },
+          { id: '6', title: 'User feedback survey' },
+        ],
+      },
+    ]
+
+    const { columns, moveCard, addCard } = useKanban(simpleColumns)
+
+    return (
+      <div className="h-[500px] bg-muted/30">
+        <WakaKanban
+          columns={columns}
+          onCardMove={moveCard}
+          onCardAdd={addCard}
+        />
+      </div>
+    )
+  },
+}
+
+export const ProjectManagement: Story = {
+  render: () => {
+    const projectColumns: KanbanColumn[] = [
+      {
+        id: 'planning',
+        title: 'Planning',
+        color: '#6B7280',
+        cards: [
+          {
+            id: 'p1',
+            title: 'Q1 Roadmap Review',
+            description: 'Review and finalize Q1 product roadmap',
+            labels: [{ id: 'pm', name: 'PM', color: '#8B5CF6' }],
+            priority: 'high',
+            dueDate: new Date('2024-01-20'),
+          },
+        ],
+      },
+      {
+        id: 'design',
+        title: 'Design',
+        color: '#EC4899',
+        cards: [
+          {
+            id: 'd1',
+            title: 'Dashboard Wireframes',
+            description: 'Create wireframes for analytics dashboard',
+            labels: [{ id: 'design', name: 'Design', color: '#EC4899' }],
+            assignee: { id: 'designer', name: 'Sarah' },
+          },
+        ],
+      },
+      {
+        id: 'development',
+        title: 'Development',
+        color: '#3B82F6',
+        limit: 4,
+        cards: [
+          {
+            id: 'dev1',
+            title: 'User Settings API',
+            description: 'Implement user settings CRUD endpoints',
+            labels: [
+              { id: 'backend', name: 'Backend', color: '#10B981' },
+            ],
+            priority: 'urgent',
+            assignee: { id: 'dev1', name: 'Mike' },
+          },
+          {
+            id: 'dev2',
+            title: 'Payment Integration',
+            description: 'Integrate Stripe payment gateway',
+            labels: [
+              { id: 'backend', name: 'Backend', color: '#10B981' },
+              { id: 'security', name: 'Security', color: '#EF4444' },
+            ],
+            priority: 'high',
+            assignee: { id: 'dev2', name: 'Jane' },
+          },
+        ],
+      },
+      {
+        id: 'testing',
+        title: 'Testing',
+        color: '#F59E0B',
+        cards: [
+          {
+            id: 't1',
+            title: 'E2E Test Suite',
+            description: 'Write end-to-end tests for checkout flow',
+            labels: [{ id: 'qa', name: 'QA', color: '#F59E0B' }],
+            assignee: { id: 'qa1', name: 'Tom' },
+          },
+        ],
+      },
+      {
+        id: 'deployed',
+        title: 'Deployed',
+        color: '#10B981',
+        cards: [],
+      },
+    ]
+
+    const { columns, moveCard, addCard, deleteCard } = useKanban(projectColumns)
+
+    return (
+      <div className="h-[700px] bg-muted/30">
+        <div className="p-4 border-b bg-background">
+          <h2 className="text-xl font-semibold">Project Alpha - Sprint 3</h2>
+          <p className="text-sm text-muted-foreground">Jan 15 - Jan 28, 2024</p>
+        </div>
+        <WakaKanban
+          columns={columns}
+          onCardMove={moveCard}
+          onCardAdd={addCard}
+          onCardDelete={deleteCard}
+          height="calc(100% - 80px)"
+        />
+      </div>
+    )
+  },
+}

package/src/components/waka-kubernetes-overview/WakaKubernetesOverview.stories.tsx

@@ -0,0 +1,281 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  WakaKubernetesOverview,
+  defaultK8sNodes,
+  defaultK8sPods,
+  defaultK8sDeployments,
+  defaultK8sServices,
+  defaultK8sNamespaces,
+} from './index'
+import type { K8sNode, K8sPod, K8sDeployment, K8sService, K8sNamespace } from './index'
+import * as React from 'react'
+
+const unhealthyNodes: K8sNode[] = [
+  {
+    name: 'node-1',
+    status: 'Ready',
+    roles: ['control-plane'],
+    version: '1.28.2',
+    cpu: { used: 7.5, total: 8 },
+    memory: { used: 14 * 1024 * 1024 * 1024, total: 16 * 1024 * 1024 * 1024 },
+    pods: { running: 95, total: 110 },
+  },
+  {
+    name: 'node-2',
+    status: 'NotReady',
+    roles: ['worker'],
+    version: '1.28.2',
+    cpu: { used: 0, total: 8 },
+    memory: { used: 0, total: 32 * 1024 * 1024 * 1024 },
+    pods: { running: 0, total: 110 },
+  },
+  {
+    name: 'node-3',
+    status: 'Unknown',
+    roles: ['worker'],
+    version: '1.28.2',
+    cpu: { used: 4, total: 8 },
+    memory: { used: 16 * 1024 * 1024 * 1024, total: 32 * 1024 * 1024 * 1024 },
+    pods: { running: 20, total: 110 },
+  },
+]
+
+const manyPods: K8sPod[] = [
+  { name: 'api-server-7d8f9b6c4d-x2k9l', namespace: 'default', phase: 'Running', ready: '2/2', restarts: 0, age: '5d' },
+  { name: 'api-server-7d8f9b6c4d-y3l0m', namespace: 'default', phase: 'Running', ready: '2/2', restarts: 0, age: '5d' },
+  { name: 'api-server-7d8f9b6c4d-z4m1n', namespace: 'default', phase: 'Running', ready: '2/2', restarts: 1, age: '5d' },
+  { name: 'web-frontend-5c8d7e9f1b-a1b2c', namespace: 'default', phase: 'Running', ready: '1/1', restarts: 0, age: '3d' },
+  { name: 'web-frontend-5c8d7e9f1b-d3e4f', namespace: 'default', phase: 'Running', ready: '1/1', restarts: 2, age: '3d' },
+  { name: 'postgres-0', namespace: 'database', phase: 'Running', ready: '1/1', restarts: 0, age: '14d' },
+  { name: 'postgres-1', namespace: 'database', phase: 'Running', ready: '1/1', restarts: 0, age: '14d' },
+  { name: 'redis-master-0', namespace: 'cache', phase: 'Running', ready: '1/1', restarts: 0, age: '7d' },
+  { name: 'redis-replica-0', namespace: 'cache', phase: 'Running', ready: '1/1', restarts: 0, age: '7d' },
+  { name: 'redis-replica-1', namespace: 'cache', phase: 'Running', ready: '1/1', restarts: 0, age: '7d' },
+  { name: 'worker-6f7g8h9i0j-p5q6r', namespace: 'default', phase: 'Pending', ready: '0/1', restarts: 0, age: '2m' },
+  { name: 'worker-6f7g8h9i0j-s7t8u', namespace: 'default', phase: 'Failed', ready: '0/1', restarts: 5, age: '10m' },
+  { name: 'migration-job-abc123', namespace: 'database', phase: 'Succeeded', ready: '0/1', restarts: 0, age: '1h' },
+  { name: 'cronjob-cleanup-12345', namespace: 'kube-system', phase: 'Running', ready: '1/1', restarts: 0, age: '5m' },
+]
+
+const largeClusterNodes: K8sNode[] = [
+  ...defaultK8sNodes,
+  {
+    name: 'node-4',
+    status: 'Ready',
+    roles: ['worker'],
+    version: '1.28.2',
+    cpu: { used: 6.2, total: 16 },
+    memory: { used: 48 * 1024 * 1024 * 1024, total: 64 * 1024 * 1024 * 1024 },
+    pods: { running: 85, total: 250 },
+  },
+  {
+    name: 'node-5',
+    status: 'Ready',
+    roles: ['worker'],
+    version: '1.28.2',
+    cpu: { used: 4.8, total: 16 },
+    memory: { used: 32 * 1024 * 1024 * 1024, total: 64 * 1024 * 1024 * 1024 },
+    pods: { running: 62, total: 250 },
+  },
+  {
+    name: 'node-6',
+    status: 'Ready',
+    roles: ['worker', 'gpu'],
+    version: '1.28.2',
+    cpu: { used: 12.5, total: 32 },
+    memory: { used: 96 * 1024 * 1024 * 1024, total: 128 * 1024 * 1024 * 1024 },
+    pods: { running: 12, total: 50 },
+  },
+]
+
+const meta: Meta<typeof WakaKubernetesOverview> = {
+  title: 'Components/DevOps/WakaKubernetesOverview',
+  component: WakaKubernetesOverview,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A Kubernetes cluster overview with nodes, pods, deployments, and services tabs, namespace filtering, and resource metrics.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    isLoading: {
+      control: 'boolean',
+      description: 'Loading state',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaKubernetesOverview>
+
+export const Default: Story = {
+  args: {
+    clusterName: 'production-cluster',
+    nodes: defaultK8sNodes,
+    pods: defaultK8sPods,
+    deployments: defaultK8sDeployments,
+    services: defaultK8sServices,
+    namespaces: defaultK8sNamespaces,
+  },
+  render: (args) => (
+    <div className="w-[900px] h-[600px]">
+      <WakaKubernetesOverview
+        {...args}
+        onResourceClick={(type, name, ns) => console.log('Click:', type, name, ns)}
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const UnhealthyCluster: Story = {
+  render: () => (
+    <div className="w-[900px] h-[600px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Cluster with unhealthy nodes
+      </p>
+      <WakaKubernetesOverview
+        clusterName="staging-cluster"
+        nodes={unhealthyNodes}
+        pods={manyPods}
+        deployments={defaultK8sDeployments}
+        services={defaultK8sServices}
+        namespaces={defaultK8sNamespaces}
+        onResourceClick={(type, name, ns) => console.log('Click:', type, name, ns)}
+      />
+    </div>
+  ),
+}
+
+export const LargeCluster: Story = {
+  render: () => (
+    <div className="w-[900px] h-[600px]">
+      <WakaKubernetesOverview
+        clusterName="large-production"
+        nodes={largeClusterNodes}
+        pods={manyPods}
+        deployments={[
+          ...defaultK8sDeployments,
+          { name: 'ml-worker', namespace: 'ml', replicas: { ready: 4, desired: 4 }, status: 'Available', age: '10d' },
+          { name: 'inference-api', namespace: 'ml', replicas: { ready: 2, desired: 2 }, status: 'Available', age: '5d' },
+        ]}
+        services={[
+          ...defaultK8sServices,
+          { name: 'ml-inference', namespace: 'ml', type: 'LoadBalancer', clusterIP: '10.96.0.50', externalIP: '35.200.100.50', ports: [{ port: 8080, targetPort: 8080, protocol: 'TCP' }], age: '5d' },
+        ]}
+        namespaces={[
+          ...defaultK8sNamespaces,
+          { name: 'ml', status: 'Active', age: '30d' },
+          { name: 'monitoring', status: 'Active', age: '60d' },
+        ]}
+        onResourceClick={(type, name, ns) => console.log('Click:', type, name, ns)}
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const WithNamespaceFilter: Story = {
+  render: () => {
+    const [namespace, setNamespace] = React.useState<string>('default')
+
+    return (
+      <div className="w-[900px] h-[600px]">
+        <p className="text-sm text-muted-foreground mb-4">
+          Filtered by namespace: {namespace}
+        </p>
+        <WakaKubernetesOverview
+          clusterName="production-cluster"
+          nodes={defaultK8sNodes}
+          pods={manyPods}
+          deployments={defaultK8sDeployments}
+          services={defaultK8sServices}
+          namespaces={defaultK8sNamespaces}
+          selectedNamespace={namespace}
+          onNamespaceChange={setNamespace}
+          onResourceClick={(type, name, ns) => console.log('Click:', type, name, ns)}
+        />
+      </div>
+    )
+  },
+}
+
+export const Loading: Story = {
+  render: () => (
+    <div className="w-[900px] h-[600px]">
+      <WakaKubernetesOverview
+        clusterName="production-cluster"
+        nodes={defaultK8sNodes}
+        pods={defaultK8sPods}
+        deployments={defaultK8sDeployments}
+        services={defaultK8sServices}
+        namespaces={defaultK8sNamespaces}
+        isLoading
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const SingleNode: Story = {
+  render: () => (
+    <div className="w-[900px] h-[500px]">
+      <WakaKubernetesOverview
+        clusterName="minikube"
+        nodes={[defaultK8sNodes[0]]}
+        pods={defaultK8sPods.slice(0, 3)}
+        deployments={defaultK8sDeployments.slice(0, 2)}
+        services={defaultK8sServices.slice(0, 2)}
+        namespaces={[defaultK8sNamespaces[0]]}
+      />
+    </div>
+  ),
+}
+
+export const EmptyCluster: Story = {
+  render: () => (
+    <div className="w-[900px] h-[500px]">
+      <WakaKubernetesOverview
+        clusterName="new-cluster"
+        nodes={defaultK8sNodes}
+        pods={[]}
+        deployments={[]}
+        services={[]}
+        namespaces={[{ name: 'default', status: 'Active', age: '1m' }]}
+      />
+    </div>
+  ),
+}
+
+export const K8sDashboard: 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">Kubernetes Dashboard</h2>
+          <p className="text-sm text-muted-foreground">Cluster: production-east-1</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">All systems healthy</span>
+        </div>
+      </div>
+
+      <div className="w-[850px]">
+        <WakaKubernetesOverview
+          clusterName="production-east-1"
+          nodes={defaultK8sNodes}
+          pods={manyPods}
+          deployments={defaultK8sDeployments}
+          services={defaultK8sServices}
+          namespaces={defaultK8sNamespaces}
+          onResourceClick={(type, name, ns) => console.log('Click:', type, name, ns)}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    </div>
+  ),
+}