@wakastellar/ui 2.3.5 → 3.0.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-kpi-dashboard/WakaKpiDashboard.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaKPIDashboard, type KPIData } from "./index"
+
+const meta: Meta<typeof WakaKPIDashboard> = {
+  title: "DevOps/WakaKpiDashboard",
+  component: WakaKPIDashboard,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+  argTypes: {
+    columns: { control: { type: "number", min: 1, max: 6 }, description: "Nombre de colonnes" },
+    showSparklines: { control: "boolean", description: "Afficher les sparklines" },
+    draggable: { control: "boolean", description: "KPIs réorganisables" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaKPIDashboard>
+
+const kpis: KPIData[] = [
+  { id: "revenue", title: "Revenu", value: "€45,231", trend: "up", trendValue: "+12.5%", sparkline: [30, 40, 35, 50, 49, 60, 70] },
+  { id: "users", title: "Utilisateurs actifs", value: "2,350", trend: "up", trendValue: "+5.2%", sparkline: [100, 120, 110, 130, 140, 145, 150] },
+  { id: "conversion", title: "Taux de conversion", value: "3.2%", previousValue: "2.8%", trend: "up", trendValue: "+0.4%" },
+  { id: "bounce", title: "Taux de rebond", value: "42%", trend: "down", trendValue: "-3.1%", sparkline: [50, 48, 46, 45, 44, 43, 42] },
+  { id: "latency", title: "Latence moyenne", value: "45ms", trend: "down", trendValue: "-15ms" },
+  { id: "uptime", title: "Uptime", value: "99.98%", trend: "stable", trendValue: "0%" },
+]
+
+export const Default: Story = {
+  args: { kpis, columns: 3, showSparklines: true },
+  render: (args) => <WakaKPIDashboard {...args} />,
+}
+
+export const TwoColumns: Story = {
+  args: { kpis: kpis.slice(0, 4), columns: 2, showSparklines: true },
+  render: (args) => <WakaKPIDashboard {...args} />,
+}
+
+export const Draggable: Story = {
+  args: { kpis, columns: 3, showSparklines: true, draggable: true },
+  render: (args) => <WakaKPIDashboard {...args} />,
+}
+
+export const NoSparklines: Story = {
+  args: { kpis, columns: 4, showSparklines: false },
+  render: (args) => <WakaKPIDashboard {...args} />,
+}