@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-status-matrix/WakaStatusMatrix.stories.tsx

@@ -0,0 +1,331 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaStatusMatrix } from './index'
+import type { StatusMatrixDataPoint, StatusType } from './index'
+import * as React from 'react'
+
+// Generate contribution-style data
+function generateContributionData(days: number = 365): StatusMatrixDataPoint[] {
+  const data: StatusMatrixDataPoint[] = []
+  const today = new Date()
+
+  for (let i = days - 1; i >= 0; i--) {
+    const date = new Date(today)
+    date.setDate(date.getDate() - i)
+
+    const dayOfWeek = date.getDay()
+    const isWeekend = dayOfWeek === 0 || dayOfWeek === 6
+    const baseChance = isWeekend ? 0.3 : 0.7
+
+    let value = 0
+    if (Math.random() < baseChance) {
+      const max = isWeekend ? 5 : 15
+      value = Math.floor(Math.random() * max)
+    }
+
+    data.push({
+      date: date.toISOString().split('T')[0],
+      value,
+    })
+  }
+
+  return data
+}
+
+// Generate uptime status data
+function generateUptimeData(days: number = 90): StatusMatrixDataPoint[] {
+  const data: StatusMatrixDataPoint[] = []
+  const today = new Date()
+  const statuses: StatusType[] = ['up', 'up', 'up', 'up', 'up', 'degraded', 'down', 'maintenance']
+
+  for (let i = days - 1; i >= 0; i--) {
+    const date = new Date(today)
+    date.setDate(date.getDate() - i)
+
+    // Mostly up, occasionally issues
+    const randomIndex = Math.random() < 0.85 ? 0 : Math.floor(Math.random() * statuses.length)
+    const status = statuses[randomIndex]
+
+    data.push({
+      date: date.toISOString().split('T')[0],
+      value: status === 'up' ? 100 : status === 'degraded' ? 50 : 0,
+      status,
+    })
+  }
+
+  return data
+}
+
+const contributionData = generateContributionData()
+const uptimeData = generateUptimeData()
+
+const meta: Meta<typeof WakaStatusMatrix> = {
+  title: 'Components/Charts/WakaStatusMatrix',
+  component: WakaStatusMatrix,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A status matrix/heatmap for visualizing time-series data like contributions, uptime status, or activity levels over time.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    view: {
+      control: 'select',
+      options: ['year', 'quarter', 'month', 'week'],
+      description: 'Time view range',
+    },
+    colorScheme: {
+      control: 'select',
+      options: ['green', 'blue', 'purple', 'orange', 'status'],
+      description: 'Color scheme',
+    },
+    cellSize: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Cell size',
+    },
+    showLabels: {
+      control: 'boolean',
+      description: 'Show month/day labels',
+    },
+    showLegend: {
+      control: 'boolean',
+      description: 'Show legend',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaStatusMatrix>
+
+export const Default: Story = {
+  args: {
+    data: contributionData,
+  },
+  render: (args) => <WakaStatusMatrix {...args} />,
+}
+
+export const ColorSchemes: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Green (Default)</p>
+        <WakaStatusMatrix data={contributionData} colorScheme="green" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Blue</p>
+        <WakaStatusMatrix data={contributionData} colorScheme="blue" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Purple</p>
+        <WakaStatusMatrix data={contributionData} colorScheme="purple" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Orange</p>
+        <WakaStatusMatrix data={contributionData} colorScheme="orange" />
+      </div>
+    </div>
+  ),
+}
+
+export const UptimeStatus: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">Service uptime over the last 90 days</p>
+      <WakaStatusMatrix
+        data={uptimeData}
+        colorScheme="status"
+        view="quarter"
+      />
+    </div>
+  ),
+}
+
+export const ViewRanges: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Year View</p>
+        <WakaStatusMatrix data={contributionData} view="year" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Quarter View</p>
+        <WakaStatusMatrix data={contributionData} view="quarter" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Month View</p>
+        <WakaStatusMatrix data={contributionData} view="month" />
+      </div>
+    </div>
+  ),
+}
+
+export const CellSizes: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Small</p>
+        <WakaStatusMatrix data={contributionData} cellSize="sm" view="quarter" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Medium (Default)</p>
+        <WakaStatusMatrix data={contributionData} cellSize="md" view="quarter" />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Large</p>
+        <WakaStatusMatrix data={contributionData} cellSize="lg" view="quarter" />
+      </div>
+    </div>
+  ),
+}
+
+export const NoLabels: Story = {
+  render: () => (
+    <WakaStatusMatrix data={contributionData} showLabels={false} view="quarter" />
+  ),
+}
+
+export const NoLegend: Story = {
+  render: () => (
+    <WakaStatusMatrix data={contributionData} showLegend={false} view="quarter" />
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [selectedDate, setSelectedDate] = React.useState<{ date: Date; value: number } | null>(null)
+
+    return (
+      <div className="space-y-4">
+        <WakaStatusMatrix
+          data={contributionData}
+          view="quarter"
+          onCellClick={(date, value) => setSelectedDate({ date, value })}
+        />
+        {selectedDate && (
+          <div className="p-4 border rounded-lg bg-muted/50">
+            <p className="text-sm text-muted-foreground">
+              {selectedDate.date.toLocaleDateString('en-US', {
+                weekday: 'long',
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+              })}
+            </p>
+            <p className="text-2xl font-bold">
+              {selectedDate.value} contribution{selectedDate.value !== 1 ? 's' : ''}
+            </p>
+          </div>
+        )}
+      </div>
+    )
+  },
+}
+
+export const CustomDateRange: Story = {
+  render: () => {
+    const endDate = new Date()
+    const startDate = new Date()
+    startDate.setDate(startDate.getDate() - 180) // Last 6 months
+
+    return (
+      <WakaStatusMatrix
+        data={contributionData}
+        startDate={startDate}
+        endDate={endDate}
+      />
+    )
+  },
+}
+
+export const ContributionProfile: Story = {
+  render: () => {
+    const totalContributions = contributionData.reduce((sum, d) => sum + d.value, 0)
+    const activeDays = contributionData.filter((d) => d.value > 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-green-500 to-emerald-600" />
+          <div>
+            <h3 className="text-xl font-bold">developer_jane</h3>
+            <p className="text-sm text-muted-foreground">
+              {totalContributions.toLocaleString()} contributions in the last year
+            </p>
+          </div>
+        </div>
+        <WakaStatusMatrix data={contributionData} />
+        <div className="mt-4 grid grid-cols-4 gap-4 text-center">
+          <div className="p-3 border rounded-lg">
+            <p className="text-2xl font-bold">{totalContributions.toLocaleString()}</p>
+            <p className="text-xs text-muted-foreground">Total</p>
+          </div>
+          <div className="p-3 border rounded-lg">
+            <p className="text-2xl font-bold">{activeDays}</p>
+            <p className="text-xs text-muted-foreground">Active Days</p>
+          </div>
+          <div className="p-3 border rounded-lg">
+            <p className="text-2xl font-bold">
+              {Math.round((activeDays / 365) * 100)}%
+            </p>
+            <p className="text-xs text-muted-foreground">Activity Rate</p>
+          </div>
+          <div className="p-3 border rounded-lg">
+            <p className="text-2xl font-bold">
+              {Math.max(...contributionData.map((d) => d.value))}
+            </p>
+            <p className="text-xs text-muted-foreground">Best Day</p>
+          </div>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const UptimeDashboard: Story = {
+  render: () => {
+    const upCount = uptimeData.filter((d) => d.status === 'up').length
+    const uptimePercentage = ((upCount / uptimeData.length) * 100).toFixed(2)
+
+    return (
+      <div className="w-[600px] p-6 border rounded-lg">
+        <div className="flex justify-between items-start mb-4">
+          <div>
+            <h3 className="text-lg font-semibold">API Service Uptime</h3>
+            <p className="text-sm text-muted-foreground">Last 90 days</p>
+          </div>
+          <div className="text-right">
+            <p className="text-2xl font-bold text-green-600">{uptimePercentage}%</p>
+            <p className="text-xs text-muted-foreground">Uptime</p>
+          </div>
+        </div>
+        <WakaStatusMatrix
+          data={uptimeData}
+          colorScheme="status"
+          view="quarter"
+        />
+      </div>
+    )
+  },
+}
+
+export const CompactWidget: Story = {
+  render: () => {
+    const recentData = contributionData.slice(-30)
+
+    return (
+      <div className="p-4 border rounded-lg w-fit">
+        <h4 className="text-sm font-medium mb-2">Recent Activity</h4>
+        <WakaStatusMatrix
+          data={recentData}
+          cellSize="sm"
+          showLabels={false}
+          showLegend={false}
+          view="month"
+        />
+      </div>
+    )
+  },
+}