@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-quota-bar/WakaQuotaBar.stories.tsx

@@ -0,0 +1,435 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaQuotaBar, WakaMultiQuotaBar, useQuota } from './index'
+import type { QuotaResource } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaQuotaBar> = {
+  title: 'Components/Charts/WakaQuotaBar',
+  component: WakaQuotaBar,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A quota/usage bar for displaying resource consumption with soft/hard limits, overflow indicators, and animated progress.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    current: {
+      control: { type: 'range', min: 0, max: 150, step: 5 },
+      description: 'Current usage value',
+    },
+    softLimit: {
+      control: { type: 'range', min: 50, max: 90, step: 5 },
+      description: 'Soft limit threshold',
+    },
+    hardLimit: {
+      control: { type: 'range', min: 80, max: 150, step: 10 },
+      description: 'Hard limit (maximum)',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Bar size',
+    },
+    variant: {
+      control: 'select',
+      options: ['simple', 'detailed'],
+      description: 'Display variant',
+    },
+    showLabels: {
+      control: 'boolean',
+      description: 'Show value labels',
+    },
+    showMarkers: {
+      control: 'boolean',
+      description: 'Show limit markers',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animations',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaQuotaBar>
+
+export const Default: Story = {
+  args: {
+    current: 65,
+    softLimit: 80,
+    hardLimit: 100,
+    label: 'Storage',
+    unit: 'GB',
+  },
+  render: (args) => (
+    <div className="w-[500px]">
+      <WakaQuotaBar {...args} />
+    </div>
+  ),
+}
+
+export const UsageZones: Story = {
+  render: () => (
+    <div className="w-[500px] space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Normal usage (below soft limit)</p>
+        <WakaQuotaBar
+          current={45}
+          softLimit={70}
+          hardLimit={100}
+          label="Storage"
+          unit="GB"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Warning zone (approaching soft limit)</p>
+        <WakaQuotaBar
+          current={75}
+          softLimit={70}
+          hardLimit={100}
+          label="Storage"
+          unit="GB"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Danger zone (approaching hard limit)</p>
+        <WakaQuotaBar
+          current={92}
+          softLimit={70}
+          hardLimit={100}
+          label="Storage"
+          unit="GB"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Overflow (exceeded hard limit)</p>
+        <WakaQuotaBar
+          current={115}
+          softLimit={70}
+          hardLimit={100}
+          label="Storage"
+          unit="GB"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const Variants: Story = {
+  render: () => (
+    <div className="w-[500px] space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Simple Variant</p>
+        <WakaQuotaBar
+          current={72}
+          softLimit={70}
+          hardLimit={100}
+          label="API Calls"
+          unit="K"
+          variant="simple"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Detailed Variant</p>
+        <WakaQuotaBar
+          current={72}
+          softLimit={70}
+          hardLimit={100}
+          label="API Calls"
+          unit="K"
+          variant="detailed"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="w-[500px] space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Small</p>
+        <WakaQuotaBar
+          current={65}
+          softLimit={70}
+          hardLimit={100}
+          size="sm"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Medium (Default)</p>
+        <WakaQuotaBar
+          current={65}
+          softLimit={70}
+          hardLimit={100}
+          size="md"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">Large</p>
+        <WakaQuotaBar
+          current={65}
+          softLimit={70}
+          hardLimit={100}
+          size="lg"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const WithoutSoftLimit: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaQuotaBar
+        current={75}
+        hardLimit={100}
+        label="Bandwidth"
+        unit="GB"
+      />
+    </div>
+  ),
+}
+
+export const NoMarkers: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaQuotaBar
+        current={65}
+        softLimit={70}
+        hardLimit={100}
+        label="Storage"
+        unit="GB"
+        showMarkers={false}
+      />
+    </div>
+  ),
+}
+
+export const NoLabels: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaQuotaBar
+        current={65}
+        softLimit={70}
+        hardLimit={100}
+        label="Storage"
+        showLabels={false}
+      />
+    </div>
+  ),
+}
+
+export const CustomFormatter: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaQuotaBar
+        current={1536}
+        softLimit={2048}
+        hardLimit={3072}
+        label="Memory"
+        unit="MB"
+        formatValue={(value) => {
+          if (value >= 1024) {
+            return `${(value / 1024).toFixed(1)} GB`
+          }
+          return `${value} MB`
+        }}
+      />
+    </div>
+  ),
+}
+
+export const MultipleQuotas: Story = {
+  render: () => {
+    const resources: QuotaResource[] = [
+      { id: 'storage', label: 'Storage', current: 65, softLimit: 70, hardLimit: 100, unit: 'GB' },
+      { id: 'bandwidth', label: 'Bandwidth', current: 450, softLimit: 400, hardLimit: 500, unit: 'GB' },
+      { id: 'api', label: 'API Calls', current: 8500, softLimit: 8000, hardLimit: 10000 },
+      { id: 'users', label: 'Team Members', current: 8, hardLimit: 10 },
+    ]
+
+    return (
+      <div className="w-[600px]">
+        <WakaMultiQuotaBar resources={resources} />
+      </div>
+    )
+  },
+}
+
+export const CompactMultiQuota: Story = {
+  render: () => {
+    const resources: QuotaResource[] = [
+      { id: 'storage', label: 'Storage', current: 65, softLimit: 70, hardLimit: 100, unit: 'GB' },
+      { id: 'bandwidth', label: 'Bandwidth', current: 450, hardLimit: 500, unit: 'GB' },
+      { id: 'api', label: 'API Calls', current: 8500, hardLimit: 10000 },
+    ]
+
+    return (
+      <div className="w-[400px]">
+        <WakaMultiQuotaBar resources={resources} compact />
+      </div>
+    )
+  },
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const {
+      current,
+      usagePercentage,
+      remaining,
+      zone,
+      isOverflow,
+      add,
+      subtract,
+      reset,
+    } = useQuota({
+      initialValue: 50,
+      softLimit: 70,
+      hardLimit: 100,
+      onApproachingSoftLimit: (v) => console.log('Approaching soft limit:', v),
+      onApproachingHardLimit: (v) => console.log('Approaching hard limit:', v),
+      onOverflow: (v, o) => console.log('Overflow:', v, 'by', o),
+    })
+
+    return (
+      <div className="w-[500px] space-y-4">
+        <div className="flex gap-2 justify-center">
+          <button
+            onClick={() => subtract(10)}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted"
+          >
+            -10
+          </button>
+          <button
+            onClick={() => add(10)}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted"
+          >
+            +10
+          </button>
+          <button
+            onClick={reset}
+            className="px-3 py-1 text-sm border rounded hover:bg-muted"
+          >
+            Reset
+          </button>
+        </div>
+        <WakaQuotaBar
+          current={current}
+          softLimit={70}
+          hardLimit={100}
+          label="Interactive"
+          unit="units"
+        />
+        <div className="grid grid-cols-4 gap-4 text-center text-sm">
+          <div className="p-2 border rounded">
+            <p className="font-medium">{current}</p>
+            <p className="text-xs text-muted-foreground">Current</p>
+          </div>
+          <div className="p-2 border rounded">
+            <p className="font-medium">{usagePercentage.toFixed(1)}%</p>
+            <p className="text-xs text-muted-foreground">Usage</p>
+          </div>
+          <div className="p-2 border rounded">
+            <p className="font-medium">{remaining}</p>
+            <p className="text-xs text-muted-foreground">Remaining</p>
+          </div>
+          <div className="p-2 border rounded">
+            <p className={`font-medium ${zone === 'overflow' ? 'text-red-600' : zone === 'danger' ? 'text-orange-600' : zone === 'warning' ? 'text-yellow-600' : 'text-green-600'}`}>
+              {zone}
+            </p>
+            <p className="text-xs text-muted-foreground">Zone</p>
+          </div>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const PlanUsageDashboard: Story = {
+  render: () => {
+    const resources: QuotaResource[] = [
+      { id: 'storage', label: 'Storage', current: 8.2, softLimit: 8, hardLimit: 10, unit: 'GB' },
+      { id: 'bandwidth', label: 'Bandwidth', current: 45, softLimit: 40, hardLimit: 50, unit: 'GB/mo' },
+      { id: 'api', label: 'API Calls', current: 85000, softLimit: 80000, hardLimit: 100000 },
+      { id: 'projects', label: 'Projects', current: 5, hardLimit: 5 },
+    ]
+
+    return (
+      <div className="w-[650px] p-6 border rounded-lg">
+        <div className="flex justify-between items-start mb-6">
+          <div>
+            <h3 className="text-lg font-semibold">Plan Usage</h3>
+            <p className="text-sm text-muted-foreground">Pro Plan • Billing cycle ends in 12 days</p>
+          </div>
+          <button className="px-3 py-1 text-sm border rounded hover:bg-muted">
+            Upgrade Plan
+          </button>
+        </div>
+        <WakaMultiQuotaBar resources={resources} />
+      </div>
+    )
+  },
+}
+
+export const ServerResourceDashboard: Story = {
+  render: () => (
+    <div className="w-[550px] p-6 border rounded-lg">
+      <div className="flex justify-between items-start mb-4">
+        <div>
+          <h3 className="text-lg font-semibold">Server Resources</h3>
+          <p className="text-sm text-muted-foreground">web-prod-01.example.com</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-2 h-2 rounded-full bg-yellow-500" />
+          <span className="text-sm text-yellow-600">Warning</span>
+        </div>
+      </div>
+      <div className="space-y-4">
+        <WakaQuotaBar
+          current={78}
+          softLimit={70}
+          hardLimit={100}
+          label="CPU Usage"
+          unit="%"
+          variant="detailed"
+        />
+        <WakaQuotaBar
+          current={12.8}
+          softLimit={12}
+          hardLimit={16}
+          label="Memory"
+          unit="GB"
+          variant="detailed"
+        />
+        <WakaQuotaBar
+          current={420}
+          softLimit={400}
+          hardLimit={500}
+          label="Disk"
+          unit="GB"
+          variant="detailed"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const NoAnimation: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaQuotaBar
+        current={65}
+        softLimit={70}
+        hardLimit={100}
+        label="Storage"
+        unit="GB"
+        animated={false}
+      />
+    </div>
+  ),
+}