@wakastellar/ui 2.3.5 → 3.0.0

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',
+        })}`
+      }
+    />
+  ),
+}

package/src/components/waka-cost-breakdown/WakaCostBreakdown.stories.tsx

@@ -0,0 +1,348 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaCostBreakdown, useCostBreakdown } from './index'
+import type { CostItem } from './index'
+import * as React from 'react'
+
+const cloudCostData: CostItem[] = [
+  {
+    id: 'compute',
+    name: 'Compute',
+    value: 0,
+    change: 12.5,
+    children: [
+      { id: 'ec2', name: 'EC2 Instances', value: 4500, change: 8.2 },
+      { id: 'lambda', name: 'Lambda', value: 1200, change: 25.0 },
+      { id: 'ecs', name: 'ECS/Fargate', value: 2300, change: -5.0 },
+    ],
+  },
+  {
+    id: 'storage',
+    name: 'Storage',
+    value: 0,
+    change: -3.2,
+    children: [
+      { id: 's3', name: 'S3', value: 2000, change: 2.0 },
+      { id: 'ebs', name: 'EBS Volumes', value: 1500, change: -8.0 },
+      { id: 'glacier', name: 'Glacier', value: 300, change: 0 },
+    ],
+  },
+  {
+    id: 'database',
+    name: 'Database',
+    value: 0,
+    change: 5.8,
+    children: [
+      { id: 'rds', name: 'RDS', value: 3200, change: 10.0 },
+      { id: 'dynamodb', name: 'DynamoDB', value: 800, change: -2.0 },
+      { id: 'elasticache', name: 'ElastiCache', value: 600, change: 15.0 },
+    ],
+  },
+  {
+    id: 'network',
+    name: 'Network',
+    value: 0,
+    change: 18.0,
+    children: [
+      { id: 'data-transfer', name: 'Data Transfer', value: 1800, change: 20.0 },
+      { id: 'cloudfront', name: 'CloudFront', value: 900, change: 15.0 },
+      { id: 'route53', name: 'Route 53', value: 100, change: 0 },
+    ],
+  },
+  { id: 'other', name: 'Other Services', value: 1200, change: 5.0 },
+]
+
+const departmentBudgetData: CostItem[] = [
+  {
+    id: 'engineering',
+    name: 'Engineering',
+    value: 0,
+    color: '#3b82f6',
+    children: [
+      { id: 'salaries-eng', name: 'Salaries', value: 450000 },
+      { id: 'tools-eng', name: 'Tools & Licenses', value: 35000 },
+      { id: 'infra', name: 'Infrastructure', value: 80000 },
+    ],
+  },
+  {
+    id: 'marketing',
+    name: 'Marketing',
+    value: 0,
+    color: '#22c55e',
+    children: [
+      { id: 'salaries-mkt', name: 'Salaries', value: 180000 },
+      { id: 'ads', name: 'Advertising', value: 120000 },
+      { id: 'events', name: 'Events', value: 50000 },
+    ],
+  },
+  {
+    id: 'sales',
+    name: 'Sales',
+    value: 0,
+    color: '#f59e0b',
+    children: [
+      { id: 'salaries-sales', name: 'Salaries', value: 320000 },
+      { id: 'commissions', name: 'Commissions', value: 95000 },
+      { id: 'travel', name: 'Travel', value: 45000 },
+    ],
+  },
+  {
+    id: 'operations',
+    name: 'Operations',
+    value: 0,
+    color: '#8b5cf6',
+    children: [
+      { id: 'salaries-ops', name: 'Salaries', value: 150000 },
+      { id: 'facilities', name: 'Facilities', value: 80000 },
+      { id: 'legal', name: 'Legal & Compliance', value: 40000 },
+    ],
+  },
+]
+
+const simpleData: CostItem[] = [
+  { id: 'rent', name: 'Rent', value: 2500 },
+  { id: 'utilities', name: 'Utilities', value: 350 },
+  { id: 'groceries', name: 'Groceries', value: 600 },
+  { id: 'transport', name: 'Transport', value: 400 },
+  { id: 'entertainment', name: 'Entertainment', value: 250 },
+  { id: 'savings', name: 'Savings', value: 800 },
+]
+
+const meta: Meta<typeof WakaCostBreakdown> = {
+  title: 'Components/Charts/WakaCostBreakdown',
+  component: WakaCostBreakdown,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A cost breakdown visualization with treemap and sunburst variants, drill-down navigation, and comparison indicators.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['treemap', 'sunburst'],
+      description: 'Visualization variant',
+    },
+    currency: {
+      control: 'text',
+      description: 'Currency symbol',
+    },
+    showLegend: {
+      control: 'boolean',
+      description: 'Show legend sidebar',
+    },
+    showComparison: {
+      control: 'boolean',
+      description: 'Show comparison indicators',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animations',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCostBreakdown>
+
+export const Default: Story = {
+  args: {
+    data: cloudCostData,
+    currency: '$',
+  },
+  render: (args) => <WakaCostBreakdown {...args} />,
+}
+
+export const TreemapVariant: Story = {
+  render: () => (
+    <WakaCostBreakdown
+      data={departmentBudgetData}
+      variant="treemap"
+      currency="$"
+    />
+  ),
+}
+
+export const SunburstVariant: Story = {
+  render: () => (
+    <WakaCostBreakdown
+      data={departmentBudgetData}
+      variant="sunburst"
+      currency="$"
+    />
+  ),
+}
+
+export const WithComparison: Story = {
+  render: () => (
+    <WakaCostBreakdown
+      data={cloudCostData}
+      showComparison
+      currency="$"
+    />
+  ),
+}
+
+export const SimpleData: Story = {
+  render: () => (
+    <WakaCostBreakdown
+      data={simpleData}
+      currency="$"
+      showComparison={false}
+    />
+  ),
+}
+
+export const NoLegend: Story = {
+  render: () => (
+    <WakaCostBreakdown
+      data={cloudCostData}
+      showLegend={false}
+      currency="$"
+    />
+  ),
+}
+
+export const DrillDownExample: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground text-center">
+        Click on a category to drill down into its subcategories
+      </p>
+      <WakaCostBreakdown
+        data={cloudCostData}
+        currency="$"
+        showComparison
+        onItemClick={(id, path) => console.log('Clicked:', id, 'Path:', path)}
+      />
+    </div>
+  ),
+}
+
+export const CustomFormatter: Story = {
+  render: () => (
+    <WakaCostBreakdown
+      data={cloudCostData}
+      currency=""
+      formatValue={(value) => {
+        if (value >= 1000) {
+          return `${(value / 1000).toFixed(1)}K USD`
+        }
+        return `${value} USD`
+      }}
+    />
+  ),
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const { path, drillDown, drillUp, reset, getCurrentData } = useCostBreakdown({
+      data: cloudCostData,
+      onDrillDown: (path) => console.log('Drill down:', path),
+    })
+
+    const currentData = getCurrentData()
+
+    return (
+      <div className="space-y-4">
+        <div className="flex gap-2 items-center">
+          <button
+            onClick={drillUp}
+            disabled={path.length === 0}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted disabled:opacity-50"
+          >
+            Back
+          </button>
+          <button
+            onClick={reset}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted"
+          >
+            Reset
+          </button>
+          <span className="text-sm text-muted-foreground">
+            Path: {path.length === 0 ? 'Root' : path.join(' / ')}
+          </span>
+        </div>
+        <WakaCostBreakdown
+          data={cloudCostData}
+          currency="$"
+        />
+      </div>
+    )
+  },
+}
+
+export const CloudCostDashboard: Story = {
+  render: () => (
+    <div className="w-[750px] p-6 border rounded-lg">
+      <div className="flex justify-between items-start mb-6">
+        <div>
+          <h3 className="text-xl font-semibold">Cloud Cost Analysis</h3>
+          <p className="text-sm text-muted-foreground">December 2024</p>
+        </div>
+        <div className="text-right">
+          <p className="text-sm text-muted-foreground">Month-over-Month</p>
+          <p className="text-lg font-semibold text-red-600">+8.5%</p>
+        </div>
+      </div>
+      <WakaCostBreakdown
+        data={cloudCostData}
+        currency="$"
+        showComparison
+      />
+    </div>
+  ),
+}
+
+export const DepartmentBudgetDashboard: Story = {
+  render: () => (
+    <div className="w-[750px] p-6 border rounded-lg">
+      <div className="mb-6">
+        <h3 className="text-xl font-semibold">Department Budget Allocation</h3>
+        <p className="text-sm text-muted-foreground">Fiscal Year 2024</p>
+      </div>
+      <WakaCostBreakdown
+        data={departmentBudgetData}
+        variant="sunburst"
+        currency="$"
+      />
+    </div>
+  ),
+}
+
+export const ComparisonVariants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <h4 className="text-sm font-medium mb-2">Treemap View</h4>
+        <WakaCostBreakdown
+          data={simpleData}
+          variant="treemap"
+          currency="$"
+          showLegend={false}
+        />
+      </div>
+      <div>
+        <h4 className="text-sm font-medium mb-2">Sunburst View</h4>
+        <WakaCostBreakdown
+          data={simpleData}
+          variant="sunburst"
+          currency="$"
+          showLegend={false}
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const NoAnimation: Story = {
+  render: () => (
+    <WakaCostBreakdown
+      data={cloudCostData}
+      animated={false}
+      currency="$"
+    />
+  ),
+}