@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/kanban-board/KanbanBoard.stories.tsx

@@ -0,0 +1,494 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaKanbanBoard, defaultKanbanColumns, defaultKanbanLabels } from './index'
+import type { KanbanColumn, KanbanCard, KanbanCardLabel, KanbanCardAssignee } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaKanbanBoard> = {
+  title: 'Blocks/KanbanBoard',
+  component: WakaKanbanBoard,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A Kanban board component with drag-and-drop support, card management, labels, assignees, priorities, and due dates.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    showAddCard: {
+      control: 'boolean',
+    },
+    showAddColumn: {
+      control: 'boolean',
+    },
+    showCardCount: {
+      control: 'boolean',
+    },
+    showAssignees: {
+      control: 'boolean',
+    },
+    showLabels: {
+      control: 'boolean',
+    },
+    showPriority: {
+      control: 'boolean',
+    },
+    showDueDate: {
+      control: 'boolean',
+    },
+    draggable: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaKanbanBoard>
+
+export const Default: Story = {
+  render: () => (
+    <WakaKanbanBoard
+      columns={defaultKanbanColumns}
+      availableLabels={defaultKanbanLabels}
+      onCardClick={(card) => console.log('Card clicked:', card)}
+      onCardAdd={(columnId, card) => console.log('Add card:', columnId, card)}
+      onCardDelete={(cardId, columnId) => console.log('Delete card:', cardId, columnId)}
+      onColumnAdd={(column) => console.log('Add column:', column)}
+      onColumnDelete={(columnId) => console.log('Delete column:', columnId)}
+    />
+  ),
+}
+
+export const SimpleBoard: Story = {
+  render: () => {
+    const simpleColumns: KanbanColumn[] = [
+      {
+        id: 'todo',
+        title: 'To Do',
+        cards: [
+          { id: '1', title: 'Task 1' },
+          { id: '2', title: 'Task 2' },
+          { id: '3', title: 'Task 3' },
+        ],
+      },
+      {
+        id: 'doing',
+        title: 'Doing',
+        cards: [
+          { id: '4', title: 'Task 4' },
+        ],
+      },
+      {
+        id: 'done',
+        title: 'Done',
+        cards: [],
+      },
+    ]
+
+    return (
+      <WakaKanbanBoard
+        columns={simpleColumns}
+        showLabels={false}
+        showAssignees={false}
+        showPriority={false}
+        showDueDate={false}
+      />
+    )
+  },
+}
+
+export const WithAllFeatures: Story = {
+  render: () => {
+    const richColumns: KanbanColumn[] = [
+      {
+        id: 'backlog',
+        title: 'Backlog',
+        color: '#6b7280',
+        cards: [
+          {
+            id: '1',
+            title: 'Design new landing page',
+            description: 'Create mockups for the new marketing landing page with A/B test variants',
+            priority: 'medium',
+            labels: [
+              { id: 'design', name: 'Design', color: '#8b5cf6' },
+            ],
+            assignees: [
+              { id: '1', name: 'Alice Johnson', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Alice' },
+            ],
+          },
+          {
+            id: '2',
+            title: 'Setup CI/CD pipeline',
+            description: 'Configure GitHub Actions for automated testing and deployment',
+            priority: 'high',
+            labels: [
+              { id: 'dev', name: 'Dev', color: '#3b82f6' },
+              { id: 'infra', name: 'Infra', color: '#f59e0b' },
+            ],
+            dueDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 3),
+          },
+        ],
+      },
+      {
+        id: 'in-progress',
+        title: 'In Progress',
+        color: '#3b82f6',
+        limit: 3,
+        cards: [
+          {
+            id: '3',
+            title: 'Implement authentication',
+            description: 'Add OAuth2 login with Google and GitHub providers',
+            priority: 'urgent',
+            labels: [
+              { id: 'dev', name: 'Dev', color: '#3b82f6' },
+              { id: 'security', name: 'Security', color: '#ef4444' },
+            ],
+            assignees: [
+              { id: '2', name: 'Bob Smith', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Bob' },
+              { id: '3', name: 'Carol Williams', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Carol' },
+            ],
+            dueDate: new Date(Date.now() + 1000 * 60 * 60 * 24),
+          },
+        ],
+      },
+      {
+        id: 'review',
+        title: 'In Review',
+        color: '#f59e0b',
+        cards: [
+          {
+            id: '4',
+            title: 'Update documentation',
+            priority: 'low',
+            labels: [
+              { id: 'docs', name: 'Docs', color: '#10b981' },
+            ],
+            assignees: [
+              { id: '1', name: 'Alice Johnson', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Alice' },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'done',
+        title: 'Done',
+        color: '#10b981',
+        cards: [
+          {
+            id: '5',
+            title: 'Project setup',
+            priority: 'medium',
+            labels: [
+              { id: 'dev', name: 'Dev', color: '#3b82f6' },
+            ],
+          },
+          {
+            id: '6',
+            title: 'Define requirements',
+            priority: 'high',
+          },
+        ],
+      },
+    ]
+
+    const labels: KanbanCardLabel[] = [
+      { id: 'dev', name: 'Dev', color: '#3b82f6' },
+      { id: 'design', name: 'Design', color: '#8b5cf6' },
+      { id: 'docs', name: 'Docs', color: '#10b981' },
+      { id: 'bug', name: 'Bug', color: '#ef4444' },
+      { id: 'feature', name: 'Feature', color: '#f59e0b' },
+    ]
+
+    const assignees: KanbanCardAssignee[] = [
+      { id: '1', name: 'Alice Johnson', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Alice' },
+      { id: '2', name: 'Bob Smith', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Bob' },
+      { id: '3', name: 'Carol Williams', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Carol' },
+    ]
+
+    return (
+      <WakaKanbanBoard
+        columns={richColumns}
+        availableLabels={labels}
+        availableAssignees={assignees}
+        onCardClick={(card, columnId) => console.log('Clicked:', card.title, 'in', columnId)}
+        onCardMove={(cardId, from, to) => console.log('Move:', cardId, 'from', from, 'to', to)}
+      />
+    )
+  },
+}
+
+export const WithColumnLimits: Story = {
+  render: () => {
+    const limitedColumns: KanbanColumn[] = [
+      {
+        id: 'todo',
+        title: 'To Do',
+        color: '#6b7280',
+        cards: [
+          { id: '1', title: 'Task 1' },
+          { id: '2', title: 'Task 2' },
+        ],
+      },
+      {
+        id: 'in-progress',
+        title: 'In Progress',
+        color: '#3b82f6',
+        limit: 2,
+        cards: [
+          { id: '3', title: 'Task 3' },
+          { id: '4', title: 'Task 4' },
+        ],
+      },
+      {
+        id: 'done',
+        title: 'Done',
+        color: '#10b981',
+        cards: [],
+      },
+    ]
+
+    return (
+      <WakaKanbanBoard
+        columns={limitedColumns}
+        showLabels={false}
+        showAssignees={false}
+      />
+    )
+  },
+}
+
+export const NoDragAndDrop: Story = {
+  render: () => (
+    <WakaKanbanBoard
+      columns={defaultKanbanColumns}
+      draggable={false}
+      onCardClick={(card) => console.log('View card:', card)}
+    />
+  ),
+}
+
+export const ReadOnly: Story = {
+  render: () => (
+    <WakaKanbanBoard
+      columns={defaultKanbanColumns}
+      showAddCard={false}
+      showAddColumn={false}
+      draggable={false}
+    />
+  ),
+}
+
+export const MinimalUI: Story = {
+  render: () => (
+    <WakaKanbanBoard
+      columns={defaultKanbanColumns}
+      showLabels={false}
+      showAssignees={false}
+      showPriority={false}
+      showDueDate={false}
+      showCardCount={false}
+    />
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [columns, setColumns] = React.useState<KanbanColumn[]>(defaultKanbanColumns)
+
+    const handleColumnsChange = (newColumns: KanbanColumn[]) => {
+      setColumns(newColumns)
+      console.log('Columns updated:', newColumns)
+    }
+
+    return (
+      <div>
+        <div className="p-4 bg-muted/50 border-b">
+          <p className="text-sm text-muted-foreground">
+            Try dragging cards between columns, adding new cards, or creating new columns.
+          </p>
+        </div>
+        <WakaKanbanBoard
+          columns={columns}
+          onColumnsChange={handleColumnsChange}
+          availableLabels={defaultKanbanLabels}
+          onCardClick={(card) => alert(`Clicked: ${card.title}`)}
+        />
+      </div>
+    )
+  },
+}
+
+export const ProjectManagement: Story = {
+  render: () => {
+    const projectColumns: KanbanColumn[] = [
+      {
+        id: 'backlog',
+        title: 'Backlog',
+        color: '#6b7280',
+        cards: [
+          {
+            id: '1',
+            title: 'User authentication',
+            description: 'Implement login/logout functionality',
+            priority: 'high',
+            labels: [{ id: 'feature', name: 'Feature', color: '#10b981' }],
+          },
+          {
+            id: '2',
+            title: 'Database optimization',
+            description: 'Improve query performance',
+            priority: 'medium',
+            labels: [{ id: 'improvement', name: 'Improvement', color: '#3b82f6' }],
+          },
+          {
+            id: '3',
+            title: 'Fix payment bug',
+            description: 'Checkout fails on mobile',
+            priority: 'urgent',
+            labels: [{ id: 'bug', name: 'Bug', color: '#ef4444' }],
+          },
+        ],
+      },
+      {
+        id: 'sprint',
+        title: 'Sprint Backlog',
+        color: '#8b5cf6',
+        cards: [
+          {
+            id: '4',
+            title: 'API documentation',
+            priority: 'medium',
+            labels: [{ id: 'docs', name: 'Docs', color: '#f59e0b' }],
+            assignees: [{ id: '1', name: 'Dev Team' }],
+          },
+        ],
+      },
+      {
+        id: 'progress',
+        title: 'In Progress',
+        color: '#3b82f6',
+        limit: 3,
+        cards: [
+          {
+            id: '5',
+            title: 'Dashboard redesign',
+            priority: 'high',
+            labels: [{ id: 'design', name: 'Design', color: '#8b5cf6' }],
+            assignees: [
+              { id: '2', name: 'Sarah', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Sarah' },
+            ],
+            dueDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 2),
+          },
+        ],
+      },
+      {
+        id: 'review',
+        title: 'Code Review',
+        color: '#f59e0b',
+        cards: [],
+      },
+      {
+        id: 'testing',
+        title: 'Testing',
+        color: '#ec4899',
+        cards: [
+          {
+            id: '6',
+            title: 'E2E test suite',
+            priority: 'medium',
+            labels: [{ id: 'test', name: 'Test', color: '#ec4899' }],
+          },
+        ],
+      },
+      {
+        id: 'done',
+        title: 'Done',
+        color: '#10b981',
+        cards: [
+          {
+            id: '7',
+            title: 'Project setup',
+            priority: 'low',
+          },
+        ],
+      },
+    ]
+
+    return (
+      <div className="min-h-screen bg-muted/30">
+        <header className="bg-background border-b px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="font-bold text-xl">Project Alpha</h1>
+              <p className="text-sm text-muted-foreground">Sprint 5 - Jan 15 to Jan 29</p>
+            </div>
+          </div>
+        </header>
+        <WakaKanbanBoard
+          columns={projectColumns}
+          onCardClick={(card) => console.log('Open card:', card)}
+        />
+      </div>
+    )
+  },
+}
+
+export const EmptyBoard: Story = {
+  render: () => {
+    const emptyColumns: KanbanColumn[] = [
+      { id: 'todo', title: 'To Do', cards: [] },
+      { id: 'doing', title: 'Doing', cards: [] },
+      { id: 'done', title: 'Done', cards: [] },
+    ]
+
+    return (
+      <WakaKanbanBoard
+        columns={emptyColumns}
+        onCardAdd={(columnId, card) => console.log('Add card:', columnId, card)}
+      />
+    )
+  },
+}
+
+export const ManyCards: Story = {
+  render: () => {
+    const manyCardsColumns: KanbanColumn[] = [
+      {
+        id: 'backlog',
+        title: 'Backlog',
+        cards: Array.from({ length: 15 }, (_, i) => ({
+          id: `card-${i + 1}`,
+          title: `Task ${i + 1}`,
+          description: `Description for task ${i + 1}`,
+          priority: (['low', 'medium', 'high', 'urgent'] as const)[i % 4],
+        })),
+      },
+      {
+        id: 'progress',
+        title: 'In Progress',
+        cards: Array.from({ length: 5 }, (_, i) => ({
+          id: `progress-${i + 1}`,
+          title: `Active Task ${i + 1}`,
+        })),
+      },
+      {
+        id: 'done',
+        title: 'Done',
+        cards: Array.from({ length: 10 }, (_, i) => ({
+          id: `done-${i + 1}`,
+          title: `Completed ${i + 1}`,
+        })),
+      },
+    ]
+
+    return (
+      <div className="h-[600px]">
+        <WakaKanbanBoard columns={manyCardsColumns} />
+      </div>
+    )
+  },
+}