@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-container-list/WakaContainerList.stories.tsx

@@ -0,0 +1,315 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaContainerList, defaultContainers } from './index'
+import type { Container, ContainerStatus } from './index'
+import * as React from 'react'
+
+const manyContainers: Container[] = [
+  ...defaultContainers,
+  {
+    id: 'mno345pqr678',
+    name: 'nginx-proxy',
+    image: 'nginx:alpine',
+    status: 'running',
+    createdAt: new Date(Date.now() - 10 * 24 * 3600000),
+    startedAt: new Date(Date.now() - 5 * 24 * 3600000),
+    ports: [
+      { host: 80, container: 80, protocol: 'tcp' },
+      { host: 443, container: 443, protocol: 'tcp' },
+    ],
+    resources: {
+      cpu: 2.1,
+      memory: 32 * 1024 * 1024,
+      memoryLimit: 128 * 1024 * 1024,
+      networkRx: 1024 * 1024 * 100,
+      networkTx: 1024 * 1024 * 80,
+    },
+  },
+  {
+    id: 'pqr678stu901',
+    name: 'elasticsearch',
+    image: 'elasticsearch:8.10',
+    status: 'running',
+    createdAt: new Date(Date.now() - 20 * 24 * 3600000),
+    startedAt: new Date(Date.now() - 10 * 24 * 3600000),
+    ports: [
+      { host: 9200, container: 9200, protocol: 'tcp' },
+      { host: 9300, container: 9300, protocol: 'tcp' },
+    ],
+    resources: {
+      cpu: 45.8,
+      memory: 2048 * 1024 * 1024,
+      memoryLimit: 4096 * 1024 * 1024,
+      networkRx: 1024 * 1024 * 20,
+      networkTx: 1024 * 1024 * 15,
+    },
+  },
+  {
+    id: 'stu901vwx234',
+    name: 'grafana',
+    image: 'grafana/grafana:10.0',
+    status: 'running',
+    createdAt: new Date(Date.now() - 15 * 24 * 3600000),
+    startedAt: new Date(Date.now() - 15 * 24 * 3600000),
+    ports: [{ host: 3000, container: 3000, protocol: 'tcp' }],
+    resources: {
+      cpu: 8.3,
+      memory: 128 * 1024 * 1024,
+      memoryLimit: 256 * 1024 * 1024,
+      networkRx: 1024 * 1024 * 5,
+      networkTx: 1024 * 1024 * 10,
+    },
+  },
+  {
+    id: 'vwx234yza567',
+    name: 'prometheus',
+    image: 'prom/prometheus:v2.45',
+    status: 'stopped',
+    createdAt: new Date(Date.now() - 30 * 24 * 3600000),
+    exitCode: 0,
+  },
+  {
+    id: 'yza567bcd890',
+    name: 'alertmanager',
+    image: 'prom/alertmanager:v0.26',
+    status: 'exited',
+    createdAt: new Date(Date.now() - 5 * 24 * 3600000),
+    exitCode: 1,
+  },
+]
+
+const allStatuses: Container[] = [
+  { id: '1', name: 'running-container', image: 'nginx:latest', status: 'running', createdAt: new Date(), startedAt: new Date(Date.now() - 3600000), resources: { cpu: 15.5, memory: 64 * 1024 * 1024, memoryLimit: 128 * 1024 * 1024, networkRx: 1024 * 1024, networkTx: 512 * 1024 } },
+  { id: '2', name: 'stopped-container', image: 'redis:alpine', status: 'stopped', createdAt: new Date() },
+  { id: '3', name: 'paused-container', image: 'postgres:15', status: 'paused', createdAt: new Date() },
+  { id: '4', name: 'restarting-container', image: 'mysql:8', status: 'restarting', createdAt: new Date() },
+  { id: '5', name: 'exited-container', image: 'busybox', status: 'exited', createdAt: new Date(), exitCode: 137 },
+  { id: '6', name: 'created-container', image: 'alpine:latest', status: 'created', createdAt: new Date() },
+]
+
+const meta: Meta<typeof WakaContainerList> = {
+  title: 'Components/DevOps/WakaContainerList',
+  component: WakaContainerList,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A container list with status, resource metrics, port mappings, search, and lifecycle actions (start, stop, restart, remove).',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    isLoading: {
+      control: 'boolean',
+      description: 'Loading state for refresh button',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaContainerList>
+
+export const Default: Story = {
+  args: {
+    containers: defaultContainers,
+  },
+  render: (args) => (
+    <div className="w-[900px] h-[500px]">
+      <WakaContainerList
+        {...args}
+        onStart={(id) => console.log('Start:', id)}
+        onStop={(id) => console.log('Stop:', id)}
+        onRestart={(id) => console.log('Restart:', id)}
+        onRemove={(id) => console.log('Remove:', id)}
+        onViewLogs={(id) => console.log('View logs:', id)}
+        onExec={(id) => console.log('Exec:', id)}
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const AllStatuses: Story = {
+  render: () => (
+    <div className="w-[900px] h-[500px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Containers in all possible states
+      </p>
+      <WakaContainerList
+        containers={allStatuses}
+        onStart={(id) => console.log('Start:', id)}
+        onStop={(id) => console.log('Stop:', id)}
+        onRestart={(id) => console.log('Restart:', id)}
+        onRemove={(id) => console.log('Remove:', id)}
+        onViewLogs={(id) => console.log('View logs:', id)}
+        onExec={(id) => console.log('Exec:', id)}
+      />
+    </div>
+  ),
+}
+
+export const ManyContainers: Story = {
+  render: () => (
+    <div className="w-[900px] h-[600px]">
+      <WakaContainerList
+        containers={manyContainers}
+        title="Docker Containers"
+        onStart={(id) => console.log('Start:', id)}
+        onStop={(id) => console.log('Stop:', id)}
+        onRestart={(id) => console.log('Restart:', id)}
+        onRemove={(id) => console.log('Remove:', id)}
+        onViewLogs={(id) => console.log('View logs:', id)}
+        onExec={(id) => console.log('Exec:', id)}
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const Loading: Story = {
+  render: () => (
+    <div className="w-[900px] h-[400px]">
+      <WakaContainerList
+        containers={defaultContainers}
+        isLoading
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [containers, setContainers] = React.useState<Container[]>(defaultContainers)
+
+    const handleStart = (id: string) => {
+      setContainers((prev) =>
+        prev.map((c) =>
+          c.id === id
+            ? {
+                ...c,
+                status: 'running' as ContainerStatus,
+                startedAt: new Date(),
+                resources: {
+                  cpu: Math.random() * 30,
+                  memory: Math.random() * 256 * 1024 * 1024,
+                  memoryLimit: 512 * 1024 * 1024,
+                  networkRx: 0,
+                  networkTx: 0,
+                },
+              }
+            : c
+        )
+      )
+    }
+
+    const handleStop = (id: string) => {
+      setContainers((prev) =>
+        prev.map((c) =>
+          c.id === id
+            ? { ...c, status: 'stopped' as ContainerStatus, startedAt: undefined, resources: undefined }
+            : c
+        )
+      )
+    }
+
+    const handleRestart = (id: string) => {
+      setContainers((prev) =>
+        prev.map((c) =>
+          c.id === id ? { ...c, status: 'restarting' as ContainerStatus } : c
+        )
+      )
+
+      setTimeout(() => {
+        setContainers((prev) =>
+          prev.map((c) =>
+            c.id === id
+              ? {
+                  ...c,
+                  status: 'running' as ContainerStatus,
+                  startedAt: new Date(),
+                }
+              : c
+          )
+        )
+      }, 2000)
+    }
+
+    const handleRemove = (id: string) => {
+      setContainers((prev) => prev.filter((c) => c.id !== id))
+    }
+
+    return (
+      <div className="w-[900px] h-[500px]">
+        <p className="text-sm text-muted-foreground mb-4">
+          Interactive demo - try starting, stopping, and removing containers
+        </p>
+        <WakaContainerList
+          containers={containers}
+          title="Docker Containers"
+          onStart={handleStart}
+          onStop={handleStop}
+          onRestart={handleRestart}
+          onRemove={handleRemove}
+          onViewLogs={(id) => alert(`Viewing logs for container ${id}`)}
+          onExec={(id) => alert(`Opening terminal for container ${id}`)}
+        />
+      </div>
+    )
+  },
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div className="w-[900px] h-[400px]">
+      <WakaContainerList
+        containers={[]}
+        title="No Containers"
+      />
+    </div>
+  ),
+}
+
+export const ReadOnly: Story = {
+  render: () => (
+    <div className="w-[900px] h-[500px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        View-only mode (no action callbacks provided)
+      </p>
+      <WakaContainerList
+        containers={defaultContainers}
+        title="Container Status"
+      />
+    </div>
+  ),
+}
+
+export const DockerDashboard: 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">Docker Dashboard</h2>
+          <p className="text-sm text-muted-foreground">Host: localhost</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">Connected</span>
+        </div>
+      </div>
+
+      <div className="w-[850px]">
+        <WakaContainerList
+          containers={manyContainers}
+          onStart={(id) => console.log('Start:', id)}
+          onStop={(id) => console.log('Stop:', id)}
+          onRestart={(id) => console.log('Restart:', id)}
+          onRemove={(id) => console.log('Remove:', id)}
+          onViewLogs={(id) => console.log('View logs:', id)}
+          onExec={(id) => console.log('Exec:', id)}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    </div>
+  ),
+}

package/src/components/waka-contribution-graph/WakaContributionGraph.stories.tsx

@@ -0,0 +1,354 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaContributionGraph } from './index'
+import type { ContributionDay } from './index'
+import * as React from 'react'
+
+// Generate sample contribution data for the past year
+function generateContributionData(days: number = 365): ContributionDay[] {
+  const data: ContributionDay[] = []
+  const today = new Date()
+
+  for (let i = days - 1; i >= 0; i--) {
+    const date = new Date(today)
+    date.setDate(date.getDate() - i)
+
+    // Generate realistic pattern: more activity on weekdays, less on weekends
+    const dayOfWeek = date.getDay()
+    const isWeekend = dayOfWeek === 0 || dayOfWeek === 6
+    const baseChance = isWeekend ? 0.3 : 0.7
+
+    let count = 0
+    if (Math.random() < baseChance) {
+      // Generate contribution count with some variation
+      const max = isWeekend ? 5 : 15
+      count = Math.floor(Math.random() * max)
+    }
+
+    data.push({
+      date: date.toISOString().split('T')[0],
+      count,
+    })
+  }
+
+  return data
+}
+
+// High activity data
+function generateHighActivityData(): ContributionDay[] {
+  const data: ContributionDay[] = []
+  const today = new Date()
+
+  for (let i = 364; i >= 0; i--) {
+    const date = new Date(today)
+    date.setDate(date.getDate() - i)
+
+    data.push({
+      date: date.toISOString().split('T')[0],
+      count: Math.floor(Math.random() * 20) + 5,
+    })
+  }
+
+  return data
+}
+
+// Sparse data
+function generateSparseData(): ContributionDay[] {
+  const data: ContributionDay[] = []
+  const today = new Date()
+
+  for (let i = 364; i >= 0; i--) {
+    const date = new Date(today)
+    date.setDate(date.getDate() - i)
+
+    data.push({
+      date: date.toISOString().split('T')[0],
+      count: Math.random() < 0.2 ? Math.floor(Math.random() * 5) : 0,
+    })
+  }
+
+  return data
+}
+
+const defaultData = generateContributionData()
+const highActivityData = generateHighActivityData()
+const sparseData = generateSparseData()
+
+const meta: Meta<typeof WakaContributionGraph> = {
+  title: 'Components/Charts/WakaContributionGraph',
+  component: WakaContributionGraph,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A GitHub-style contribution graph showing activity over time with customizable colors and tooltips.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    colorScheme: {
+      control: 'select',
+      options: ['green', 'blue', 'purple', 'orange', 'pink'],
+      description: 'Color scheme for cells',
+    },
+    cellSize: {
+      control: { type: 'range', min: 8, max: 16, step: 1 },
+      description: 'Size of each cell',
+    },
+    cellGap: {
+      control: { type: 'range', min: 1, max: 4, step: 1 },
+      description: 'Gap between cells',
+    },
+    showMonthLabels: {
+      control: 'boolean',
+      description: 'Show month labels',
+    },
+    showDayLabels: {
+      control: 'boolean',
+      description: 'Show day of week labels',
+    },
+    showTooltip: {
+      control: 'boolean',
+      description: 'Show tooltip on hover',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaContributionGraph>
+
+export const Default: Story = {
+  args: {
+    data: defaultData,
+    colorScheme: 'green',
+    cellSize: 12,
+    cellGap: 2,
+    showMonthLabels: true,
+    showDayLabels: true,
+    showTooltip: true,
+  },
+  render: (args) => <WakaContributionGraph {...args} />,
+}
+
+export const ColorSchemes: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Green (Default)</p>
+        <WakaContributionGraph data={defaultData} colorScheme="green" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Blue</p>
+        <WakaContributionGraph data={defaultData} colorScheme="blue" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Purple</p>
+        <WakaContributionGraph data={defaultData} colorScheme="purple" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Orange</p>
+        <WakaContributionGraph data={defaultData} colorScheme="orange" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Pink</p>
+        <WakaContributionGraph data={defaultData} colorScheme="pink" />
+      </div>
+    </div>
+  ),
+}
+
+export const CellSizes: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Small (8px)</p>
+        <WakaContributionGraph data={defaultData} cellSize={8} cellGap={1} />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Medium (11px - Default)</p>
+        <WakaContributionGraph data={defaultData} cellSize={11} cellGap={2} />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Large (14px)</p>
+        <WakaContributionGraph data={defaultData} cellSize={14} cellGap={3} />
+      </div>
+    </div>
+  ),
+}
+
+export const HighActivity: Story = {
+  render: () => (
+    <div className="space-y-2">
+      <p className="text-sm text-muted-foreground">Highly active contributor</p>
+      <WakaContributionGraph data={highActivityData} />
+    </div>
+  ),
+}
+
+export const SparseActivity: Story = {
+  render: () => (
+    <div className="space-y-2">
+      <p className="text-sm text-muted-foreground">Occasional contributor</p>
+      <WakaContributionGraph data={sparseData} />
+    </div>
+  ),
+}
+
+export const WithoutLabels: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">No month labels</p>
+        <WakaContributionGraph data={defaultData} showMonthLabels={false} />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">No day labels</p>
+        <WakaContributionGraph data={defaultData} showDayLabels={false} />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">No labels</p>
+        <WakaContributionGraph data={defaultData} showMonthLabels={false} showDayLabels={false} />
+      </div>
+    </div>
+  ),
+}
+
+export const NoTooltip: Story = {
+  render: () => <WakaContributionGraph data={defaultData} showTooltip={false} />,
+}
+
+export const CustomColors: Story = {
+  render: () => (
+    <WakaContributionGraph
+      data={defaultData}
+      colors={['#fef3c7', '#fcd34d', '#f59e0b', '#d97706', '#92400e']}
+    />
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [selectedDay, setSelectedDay] = React.useState<ContributionDay | null>(null)
+
+    return (
+      <div className="space-y-4">
+        <WakaContributionGraph
+          data={defaultData}
+          onDayClick={(day) => setSelectedDay(day)}
+        />
+        {selectedDay && (
+          <div className="p-4 border rounded-lg bg-muted/50">
+            <p className="text-sm text-muted-foreground">{selectedDay.date}</p>
+            <p className="text-2xl font-bold">
+              {selectedDay.count} contribution{selectedDay.count !== 1 ? 's' : ''}
+            </p>
+          </div>
+        )}
+      </div>
+    )
+  },
+}
+
+export const GitHubProfile: Story = {
+  render: () => {
+    const stats = {
+      total: defaultData.reduce((sum, d) => sum + d.count, 0),
+      activeDays: defaultData.filter((d) => d.count > 0).length,
+    }
+
+    return (
+      <div className="w-[900px] p-6 border rounded-lg">
+        <div className="flex items-center gap-4 mb-6">
+          <div className="w-16 h-16 rounded-full bg-gradient-to-br from-violet-500 to-purple-600" />
+          <div>
+            <h3 className="text-xl font-bold">developer_jane</h3>
+            <p className="text-sm text-muted-foreground">
+              {stats.total} contributions in the last year
+            </p>
+          </div>
+        </div>
+        <WakaContributionGraph data={defaultData} />
+        <div className="flex items-center justify-end gap-2 mt-4 text-xs text-muted-foreground">
+          <span>Less</span>
+          <div className="flex gap-1">
+            {['#ebedf0', '#9be9a8', '#40c463', '#30a14e', '#216e39'].map((color) => (
+              <div
+                key={color}
+                className="w-3 h-3 rounded-sm"
+                style={{ backgroundColor: color }}
+              />
+            ))}
+          </div>
+          <span>More</span>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const CompactWidget: Story = {
+  render: () => {
+    // Last 3 months only
+    const recentData = defaultData.slice(-90)
+
+    return (
+      <div className="p-4 border rounded-lg w-fit">
+        <h4 className="text-sm font-medium mb-2">Recent Activity</h4>
+        <WakaContributionGraph
+          data={recentData}
+          cellSize={10}
+          cellGap={2}
+          showMonthLabels={false}
+          showDayLabels={false}
+        />
+      </div>
+    )
+  },
+}
+
+export const MultipleUsers: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <div className="flex items-center gap-2 mb-2">
+          <div className="w-6 h-6 rounded-full bg-blue-500" />
+          <span className="font-medium">alice</span>
+          <span className="text-sm text-muted-foreground">2,847 contributions</span>
+        </div>
+        <WakaContributionGraph data={highActivityData} colorScheme="blue" cellSize={9} />
+      </div>
+      <div>
+        <div className="flex items-center gap-2 mb-2">
+          <div className="w-6 h-6 rounded-full bg-green-500" />
+          <span className="font-medium">bob</span>
+          <span className="text-sm text-muted-foreground">1,234 contributions</span>
+        </div>
+        <WakaContributionGraph data={defaultData} colorScheme="green" cellSize={9} />
+      </div>
+      <div>
+        <div className="flex items-center gap-2 mb-2">
+          <div className="w-6 h-6 rounded-full bg-purple-500" />
+          <span className="font-medium">carol</span>
+          <span className="text-sm text-muted-foreground">342 contributions</span>
+        </div>
+        <WakaContributionGraph data={sparseData} colorScheme="purple" cellSize={9} />
+      </div>
+    </div>
+  ),
+}
+
+export const CustomTooltip: Story = {
+  render: () => (
+    <WakaContributionGraph
+      data={defaultData}
+      tooltipFormatter={(day) =>
+        `${day.count} commit${day.count !== 1 ? 's' : ''} on ${new Date(day.date).toLocaleDateString('en-US', {
+          weekday: 'long',
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+        })}`
+      }
+    />
+  ),
+}