@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-breadcrumb/WakaBreadcrumb.stories.tsx

@@ -0,0 +1,237 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaBreadcrumb } from './index'
+import type { BreadcrumbItem } from './index'
+import * as React from 'react'
+import { Home, Settings, User, FileText, Folder } from 'lucide-react'
+
+const meta: Meta<typeof WakaBreadcrumb> = {
+  title: 'Components/Display/WakaBreadcrumb',
+  component: WakaBreadcrumb,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A breadcrumb navigation component for showing the current page location within a hierarchy.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the breadcrumb',
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'ghost', 'outline'],
+      description: 'Visual variant',
+    },
+    showHomeIcon: {
+      control: 'boolean',
+      description: 'Show home icon for first item',
+    },
+    maxItems: {
+      control: 'number',
+      description: 'Maximum visible items',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaBreadcrumb>
+
+const basicItems: BreadcrumbItem[] = [
+  { label: 'Home', href: '/' },
+  { label: 'Products', href: '/products' },
+  { label: 'Electronics', href: '/products/electronics' },
+  { label: 'Smartphones' },
+]
+
+export const Default: Story = {
+  args: {
+    items: basicItems,
+  },
+}
+
+export const WithHomeIcon: Story = {
+  args: {
+    items: basicItems,
+    showHomeIcon: true,
+  },
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Small</p>
+        <WakaBreadcrumb items={basicItems} size="sm" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Medium (Default)</p>
+        <WakaBreadcrumb items={basicItems} size="md" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Large</p>
+        <WakaBreadcrumb items={basicItems} size="lg" />
+      </div>
+    </div>
+  ),
+}
+
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Default</p>
+        <WakaBreadcrumb items={basicItems} variant="default" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Ghost</p>
+        <WakaBreadcrumb items={basicItems} variant="ghost" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Outline</p>
+        <WakaBreadcrumb items={basicItems} variant="outline" />
+      </div>
+    </div>
+  ),
+}
+
+export const WithIcons: Story = {
+  render: () => {
+    const itemsWithIcons: BreadcrumbItem[] = [
+      { label: 'Home', href: '/', icon: <Home className="h-4 w-4" /> },
+      { label: 'Settings', href: '/settings', icon: <Settings className="h-4 w-4" /> },
+      { label: 'Profile', href: '/settings/profile', icon: <User className="h-4 w-4" /> },
+      { label: 'Edit', icon: <FileText className="h-4 w-4" /> },
+    ]
+
+    return <WakaBreadcrumb items={itemsWithIcons} />
+  },
+}
+
+export const Collapsed: Story = {
+  render: () => {
+    const longPath: BreadcrumbItem[] = [
+      { label: 'Home', href: '/' },
+      { label: 'Documents', href: '/documents' },
+      { label: 'Work', href: '/documents/work' },
+      { label: 'Projects', href: '/documents/work/projects' },
+      { label: '2024', href: '/documents/work/projects/2024' },
+      { label: 'Q1', href: '/documents/work/projects/2024/q1' },
+      { label: 'Reports' },
+    ]
+
+    return (
+      <div className="space-y-6">
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">Max 4 items (collapsed)</p>
+          <WakaBreadcrumb items={longPath} maxItems={4} />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">All items visible</p>
+          <WakaBreadcrumb items={longPath} />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const CustomSeparator: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Slash separator</p>
+        <WakaBreadcrumb
+          items={basicItems}
+          separator={<span className="text-muted-foreground mx-2">/</span>}
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Arrow separator</p>
+        <WakaBreadcrumb
+          items={basicItems}
+          separator={<span className="text-muted-foreground mx-2">→</span>}
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Dot separator</p>
+        <WakaBreadcrumb
+          items={basicItems}
+          separator={<span className="text-muted-foreground mx-2">•</span>}
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const WithClickHandler: Story = {
+  render: () => {
+    const handleClick = (item: BreadcrumbItem, index: number) => {
+      alert(`Clicked: ${item.label} at index ${index}`)
+    }
+
+    return (
+      <WakaBreadcrumb
+        items={basicItems}
+        onItemClick={handleClick}
+      />
+    )
+  },
+}
+
+export const DisabledItems: Story = {
+  render: () => {
+    const itemsWithDisabled: BreadcrumbItem[] = [
+      { label: 'Home', href: '/' },
+      { label: 'Products', href: '/products' },
+      { label: 'Archived', href: '/products/archived', disabled: true },
+      { label: 'Item' },
+    ]
+
+    return <WakaBreadcrumb items={itemsWithDisabled} />
+  },
+}
+
+export const FileExplorer: Story = {
+  render: () => {
+    const filePath: BreadcrumbItem[] = [
+      { label: 'Root', href: '/', icon: <Folder className="h-4 w-4" /> },
+      { label: 'Users', href: '/users', icon: <Folder className="h-4 w-4" /> },
+      { label: 'john', href: '/users/john', icon: <Folder className="h-4 w-4" /> },
+      { label: 'Documents', href: '/users/john/documents', icon: <Folder className="h-4 w-4" /> },
+      { label: 'report.pdf', icon: <FileText className="h-4 w-4" /> },
+    ]
+
+    return (
+      <div className="border rounded-lg p-4 w-[500px]">
+        <div className="bg-muted/50 rounded p-2">
+          <WakaBreadcrumb items={filePath} showHomeIcon={false} size="sm" />
+        </div>
+        <div className="mt-4 text-sm text-muted-foreground">
+          Current location: /users/john/documents/report.pdf
+        </div>
+      </div>
+    )
+  },
+}
+
+export const DashboardHeader: Story = {
+  render: () => {
+    const dashboardPath: BreadcrumbItem[] = [
+      { label: 'Dashboard', href: '/dashboard' },
+      { label: 'Analytics', href: '/dashboard/analytics' },
+      { label: 'User Metrics' },
+    ]
+
+    return (
+      <div className="border-b pb-4 w-[600px]">
+        <WakaBreadcrumb items={dashboardPath} showHomeIcon />
+        <h1 className="text-2xl font-bold mt-4">User Metrics</h1>
+        <p className="text-muted-foreground">View detailed user engagement metrics</p>
+      </div>
+    )
+  },
+}

package/src/components/waka-build-matrix/WakaBuildMatrix.stories.tsx

@@ -0,0 +1,328 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaBuildMatrix, defaultBuildMatrixColumns, defaultBuildMatrixRows } from './index'
+import type { BuildMatrixRow, BuildCell, BuildStatus } from './index'
+import * as React from 'react'
+
+const allPassingRows: BuildMatrixRow[] = [
+  {
+    label: 'Node.js 20',
+    description: 'LTS version',
+    cells: [
+      { id: '1', status: 'success', duration: 125 },
+      { id: '2', status: 'success', duration: 142 },
+      { id: '3', status: 'success', duration: 98 },
+      { id: '4', status: 'success', duration: 156 },
+    ],
+  },
+  {
+    label: 'Node.js 18',
+    description: 'Previous LTS',
+    cells: [
+      { id: '5', status: 'success', duration: 118 },
+      { id: '6', status: 'success', duration: 135 },
+      { id: '7', status: 'success', duration: 102 },
+      { id: '8', status: 'success', duration: 162 },
+    ],
+  },
+]
+
+const allFailingRows: BuildMatrixRow[] = [
+  {
+    label: 'Node.js 20',
+    cells: [
+      { id: '1', status: 'failed', duration: 45 },
+      { id: '2', status: 'failed', duration: 52 },
+      { id: '3', status: 'failed', duration: 38 },
+      { id: '4', status: 'failed', duration: 67 },
+    ],
+  },
+  {
+    label: 'Node.js 18',
+    cells: [
+      { id: '5', status: 'failed', duration: 41 },
+      { id: '6', status: 'failed', duration: 55 },
+      { id: '7', status: 'failed', duration: 48 },
+      { id: '8', status: 'failed', duration: 72 },
+    ],
+  },
+]
+
+const runningRows: BuildMatrixRow[] = [
+  {
+    label: 'Node.js 20',
+    cells: [
+      { id: '1', status: 'success', duration: 125 },
+      { id: '2', status: 'running', startedAt: new Date(Date.now() - 60000) },
+      { id: '3', status: 'pending' },
+      { id: '4', status: 'pending' },
+    ],
+  },
+  {
+    label: 'Node.js 18',
+    cells: [
+      { id: '5', status: 'running', startedAt: new Date(Date.now() - 45000) },
+      { id: '6', status: 'pending' },
+      { id: '7', status: 'pending' },
+      { id: '8', status: 'pending' },
+    ],
+  },
+]
+
+const largeMatrix: BuildMatrixRow[] = [
+  'Chrome', 'Firefox', 'Safari', 'Edge', 'Node.js 20', 'Node.js 18', 'Deno'
+].map((label, i) => ({
+  label,
+  description: i < 4 ? 'Browser' : 'Runtime',
+  cells: ['Ubuntu 22.04', 'Ubuntu 20.04', 'macOS 13', 'macOS 12', 'Windows 2022', 'Windows 2019'].map((_, j) => ({
+    id: `cell-${i}-${j}`,
+    status: Math.random() > 0.15 ? 'success' : Math.random() > 0.5 ? 'failed' : 'skipped' as BuildStatus,
+    duration: Math.floor(Math.random() * 200) + 50,
+  })),
+}))
+
+const meta: Meta<typeof WakaBuildMatrix> = {
+  title: 'Components/DevOps/WakaBuildMatrix',
+  component: WakaBuildMatrix,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A build matrix visualization for CI/CD with status indicators, expandable details, pass rates, and retry functionality.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    showDuration: {
+      control: 'boolean',
+      description: 'Show duration in cells',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaBuildMatrix>
+
+export const Default: Story = {
+  args: {
+    columns: defaultBuildMatrixColumns,
+    rows: defaultBuildMatrixRows,
+  },
+  render: (args) => (
+    <div className="w-[700px]">
+      <WakaBuildMatrix
+        {...args}
+        onCellClick={(row, col, cell) => console.log('Click:', row, col, cell)}
+        onRetry={(row, col) => console.log('Retry:', row, col)}
+      />
+    </div>
+  ),
+}
+
+export const AllPassing: Story = {
+  render: () => (
+    <div className="w-[700px]">
+      <WakaBuildMatrix
+        columns={defaultBuildMatrixColumns}
+        rows={allPassingRows}
+        title="All Tests Passing"
+      />
+    </div>
+  ),
+}
+
+export const AllFailing: Story = {
+  render: () => (
+    <div className="w-[700px]">
+      <WakaBuildMatrix
+        columns={defaultBuildMatrixColumns}
+        rows={allFailingRows}
+        title="Build Failures"
+        onRetry={(row, col) => console.log('Retry:', row, col)}
+      />
+    </div>
+  ),
+}
+
+export const Running: Story = {
+  render: () => (
+    <div className="w-[700px]">
+      <WakaBuildMatrix
+        columns={defaultBuildMatrixColumns}
+        rows={runningRows}
+        title="Build In Progress"
+      />
+    </div>
+  ),
+}
+
+export const LargeMatrix: Story = {
+  render: () => (
+    <div className="w-[900px]">
+      <WakaBuildMatrix
+        columns={['Ubuntu 22.04', 'Ubuntu 20.04', 'macOS 13', 'macOS 12', 'Windows 2022', 'Windows 2019']}
+        rows={largeMatrix}
+        title="Cross-Platform Test Matrix"
+        onCellClick={(row, col, cell) => console.log('Click:', row, col, cell)}
+        onRetry={(row, col) => console.log('Retry:', row, col)}
+      />
+    </div>
+  ),
+}
+
+export const NoDuration: Story = {
+  render: () => (
+    <div className="w-[700px]">
+      <WakaBuildMatrix
+        columns={defaultBuildMatrixColumns}
+        rows={defaultBuildMatrixRows}
+        showDuration={false}
+      />
+    </div>
+  ),
+}
+
+export const WithRetry: Story = {
+  render: () => {
+    const [rows, setRows] = React.useState(defaultBuildMatrixRows)
+
+    const handleRetry = (rowIndex: number, colIndex: number) => {
+      setRows(prev => {
+        const newRows = [...prev]
+        newRows[rowIndex] = {
+          ...newRows[rowIndex],
+          cells: newRows[rowIndex].cells.map((cell, i) =>
+            i === colIndex
+              ? { ...cell, status: 'running' as BuildStatus, startedAt: new Date() }
+              : cell
+          ),
+        }
+        return newRows
+      })
+
+      // Simulate completion
+      setTimeout(() => {
+        setRows(prev => {
+          const newRows = [...prev]
+          newRows[rowIndex] = {
+            ...newRows[rowIndex],
+            cells: newRows[rowIndex].cells.map((cell, i) =>
+              i === colIndex
+                ? { ...cell, status: Math.random() > 0.3 ? 'success' : 'failed' as BuildStatus, duration: Math.floor(Math.random() * 100) + 50 }
+                : cell
+            ),
+          }
+          return newRows
+        })
+      }, 2000)
+    }
+
+    return (
+      <div className="w-[700px]">
+        <WakaBuildMatrix
+          columns={defaultBuildMatrixColumns}
+          rows={rows}
+          title="Interactive Build Matrix"
+          onRetry={handleRetry}
+        />
+      </div>
+    )
+  },
+}
+
+export const AllStatuses: Story = {
+  render: () => {
+    const statusRows: BuildMatrixRow[] = [
+      {
+        label: 'Status Demo',
+        cells: [
+          { id: '1', status: 'success', duration: 100 },
+          { id: '2', status: 'failed', duration: 45 },
+          { id: '3', status: 'running', startedAt: new Date() },
+          { id: '4', status: 'pending' },
+          { id: '5', status: 'skipped' },
+          { id: '6', status: 'cancelled' },
+        ],
+      },
+    ]
+
+    return (
+      <div className="w-[800px]">
+        <WakaBuildMatrix
+          columns={['Success', 'Failed', 'Running', 'Pending', 'Skipped', 'Cancelled']}
+          rows={statusRows}
+          title="All Build Statuses"
+        />
+      </div>
+    )
+  },
+}
+
+export const GitHubActions: Story = {
+  render: () => {
+    const ghRows: BuildMatrixRow[] = [
+      {
+        label: 'lint',
+        cells: [
+          { id: '1', status: 'success', duration: 23 },
+          { id: '2', status: 'success', duration: 25 },
+          { id: '3', status: 'success', duration: 21 },
+        ],
+      },
+      {
+        label: 'test',
+        cells: [
+          { id: '4', status: 'success', duration: 156 },
+          { id: '5', status: 'success', duration: 178 },
+          { id: '6', status: 'failed', duration: 89 },
+        ],
+      },
+      {
+        label: 'build',
+        cells: [
+          { id: '7', status: 'success', duration: 45 },
+          { id: '8', status: 'running', startedAt: new Date() },
+          { id: '9', status: 'skipped' },
+        ],
+      },
+      {
+        label: 'deploy',
+        cells: [
+          { id: '10', status: 'pending' },
+          { id: '11', status: 'pending' },
+          { id: '12', status: 'pending' },
+        ],
+      },
+    ]
+
+    return (
+      <div className="w-[600px] p-6 rounded-xl border bg-card">
+        <div className="flex items-center gap-2 mb-4">
+          <div className="w-2 h-2 rounded-full bg-yellow-500 animate-pulse" />
+          <span className="font-medium">CI Pipeline Running</span>
+          <span className="text-sm text-muted-foreground ml-auto">
+            Workflow: main.yml
+          </span>
+        </div>
+        <WakaBuildMatrix
+          columns={['Node 20', 'Node 18', 'Node 16']}
+          rows={ghRows}
+          title="Build Jobs"
+          onRetry={(row, col) => console.log('Retry:', row, col)}
+        />
+      </div>
+    )
+  },
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div className="w-[700px]">
+      <WakaBuildMatrix
+        columns={defaultBuildMatrixColumns}
+        rows={[]}
+        title="No Builds"
+      />
+    </div>
+  ),
+}