@wakastellar/ui 3.2.0 → 3.3.2

package/src/components/waka-credit-meter/WakaCreditMeter.stories.tsx

@@ -0,0 +1,418 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaCreditMeter } from "./index"
+
+const meta: Meta<typeof WakaCreditMeter> = {
+  title: "Components/Credit/WakaCreditMeter",
+  component: WakaCreditMeter,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A visual gauge showing credit consumption (used vs total). Supports ring, gauge, and bar variants with threshold-based color changes.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["ring", "gauge", "bar"],
+      description: "Visual variant",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      description: "Component size",
+    },
+    used: {
+      control: { type: "number", min: 0 },
+      description: "Credits used",
+    },
+    total: {
+      control: { type: "number", min: 0 },
+      description: "Total credits available",
+    },
+    showLabel: {
+      control: "boolean",
+      description: "Show label",
+    },
+    showValue: {
+      control: "boolean",
+      description: "Show value display",
+    },
+    animated: {
+      control: "boolean",
+      description: "Enable animation",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCreditMeter>
+
+// ============================================================================
+// Default
+// ============================================================================
+
+export const Default: Story = {
+  args: {
+    used: 350,
+    total: 1000,
+    label: "Credits",
+  },
+  render: (args) => <WakaCreditMeter {...args} />,
+}
+
+// ============================================================================
+// Ring
+// ============================================================================
+
+export const Ring: Story = {
+  render: () => (
+    <WakaCreditMeter
+      used={650}
+      total={1000}
+      variant="ring"
+      label="Monthly Credits"
+    />
+  ),
+}
+
+// ============================================================================
+// Gauge
+// ============================================================================
+
+export const Gauge: Story = {
+  render: () => (
+    <WakaCreditMeter
+      used={420}
+      total={1000}
+      variant="gauge"
+      label="API Calls"
+    />
+  ),
+}
+
+// ============================================================================
+// Bar
+// ============================================================================
+
+export const Bar: Story = {
+  render: () => (
+    <div className="w-[400px]">
+      <WakaCreditMeter
+        used={600}
+        total={1000}
+        variant="bar"
+        label="Storage Credits"
+      />
+    </div>
+  ),
+}
+
+// ============================================================================
+// Sizes
+// ============================================================================
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <h4 className="text-sm font-medium mb-4">Ring Variant</h4>
+        <div className="flex items-end gap-8">
+          <WakaCreditMeter
+            used={500}
+            total={1000}
+            variant="ring"
+            size="sm"
+            label="Small"
+          />
+          <WakaCreditMeter
+            used={500}
+            total={1000}
+            variant="ring"
+            size="md"
+            label="Medium"
+          />
+          <WakaCreditMeter
+            used={500}
+            total={1000}
+            variant="ring"
+            size="lg"
+            label="Large"
+          />
+        </div>
+      </div>
+      <div>
+        <h4 className="text-sm font-medium mb-4">Gauge Variant</h4>
+        <div className="flex items-end gap-8">
+          <WakaCreditMeter
+            used={500}
+            total={1000}
+            variant="gauge"
+            size="sm"
+            label="Small"
+          />
+          <WakaCreditMeter
+            used={500}
+            total={1000}
+            variant="gauge"
+            size="md"
+            label="Medium"
+          />
+          <WakaCreditMeter
+            used={500}
+            total={1000}
+            variant="gauge"
+            size="lg"
+            label="Large"
+          />
+        </div>
+      </div>
+      <div>
+        <h4 className="text-sm font-medium mb-4">Bar Variant</h4>
+        <div className="w-[400px] space-y-4">
+          <WakaCreditMeter
+            used={500}
+            total={1000}
+            variant="bar"
+            size="sm"
+            label="Small"
+          />
+          <WakaCreditMeter
+            used={500}
+            total={1000}
+            variant="bar"
+            size="md"
+            label="Medium"
+          />
+          <WakaCreditMeter
+            used={500}
+            total={1000}
+            variant="bar"
+            size="lg"
+            label="Large"
+          />
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+// ============================================================================
+// ThresholdColors
+// ============================================================================
+
+export const ThresholdColors: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <h4 className="text-sm font-medium mb-4">Color Zones (ring)</h4>
+        <div className="flex items-end gap-8">
+          <WakaCreditMeter
+            used={400}
+            total={1000}
+            variant="ring"
+            label="Normal (40%)"
+            thresholds={{ warning: 70, critical: 90 }}
+          />
+          <WakaCreditMeter
+            used={750}
+            total={1000}
+            variant="ring"
+            label="Warning (75%)"
+            thresholds={{ warning: 70, critical: 90 }}
+          />
+          <WakaCreditMeter
+            used={950}
+            total={1000}
+            variant="ring"
+            label="Critical (95%)"
+            thresholds={{ warning: 70, critical: 90 }}
+          />
+        </div>
+      </div>
+      <div>
+        <h4 className="text-sm font-medium mb-4">Color Zones (bar)</h4>
+        <div className="w-[400px] space-y-4">
+          <WakaCreditMeter
+            used={400}
+            total={1000}
+            variant="bar"
+            label="Normal (40%)"
+            thresholds={{ warning: 70, critical: 90 }}
+          />
+          <WakaCreditMeter
+            used={750}
+            total={1000}
+            variant="bar"
+            label="Warning (75%)"
+            thresholds={{ warning: 70, critical: 90 }}
+          />
+          <WakaCreditMeter
+            used={950}
+            total={1000}
+            variant="bar"
+            label="Critical (95%)"
+            thresholds={{ warning: 70, critical: 90 }}
+          />
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+// ============================================================================
+// Animated
+// ============================================================================
+
+export const Animated: Story = {
+  render: () => {
+    return (
+      <div className="space-y-6">
+        <p className="text-sm text-muted-foreground text-center">
+          Animation plays on mount. Toggle animated prop to compare.
+        </p>
+        <div className="flex items-end gap-8">
+          <WakaCreditMeter
+            used={780}
+            total={1000}
+            variant="ring"
+            animated={true}
+            label="Animated"
+          />
+          <WakaCreditMeter
+            used={780}
+            total={1000}
+            variant="ring"
+            animated={false}
+            label="No Animation"
+          />
+        </div>
+        <div className="flex items-end gap-8">
+          <WakaCreditMeter
+            used={780}
+            total={1000}
+            variant="gauge"
+            animated={true}
+            label="Animated"
+          />
+          <WakaCreditMeter
+            used={780}
+            total={1000}
+            variant="gauge"
+            animated={false}
+            label="No Animation"
+          />
+        </div>
+        <div className="w-[400px] space-y-4">
+          <WakaCreditMeter
+            used={780}
+            total={1000}
+            variant="bar"
+            animated={true}
+            label="Animated"
+          />
+          <WakaCreditMeter
+            used={780}
+            total={1000}
+            variant="bar"
+            animated={false}
+            label="No Animation"
+          />
+        </div>
+      </div>
+    )
+  },
+}
+
+// ============================================================================
+// HighUsage
+// ============================================================================
+
+export const HighUsage: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <h4 className="text-sm font-medium mb-4">Near Depletion</h4>
+        <div className="flex items-end gap-8">
+          <WakaCreditMeter
+            used={980}
+            total={1000}
+            variant="ring"
+            label="98% Used"
+            thresholds={{ warning: 70, critical: 90 }}
+          />
+          <WakaCreditMeter
+            used={980}
+            total={1000}
+            variant="gauge"
+            label="98% Used"
+            thresholds={{ warning: 70, critical: 90 }}
+          />
+        </div>
+      </div>
+      <div className="w-[400px]">
+        <WakaCreditMeter
+          used={980}
+          total={1000}
+          variant="bar"
+          label="98% Used"
+          thresholds={{ warning: 70, critical: 90 }}
+        />
+      </div>
+      <div>
+        <h4 className="text-sm font-medium mb-4">Fully Consumed</h4>
+        <div className="flex items-end gap-8">
+          <WakaCreditMeter
+            used={1000}
+            total={1000}
+            variant="ring"
+            label="100% Used"
+            thresholds={{ warning: 70, critical: 90 }}
+          />
+          <WakaCreditMeter
+            used={1000}
+            total={1000}
+            variant="gauge"
+            label="100% Used"
+            thresholds={{ warning: 70, critical: 90 }}
+          />
+        </div>
+      </div>
+      <div className="w-[400px]">
+        <WakaCreditMeter
+          used={1000}
+          total={1000}
+          variant="bar"
+          label="100% Used"
+          thresholds={{ warning: 70, critical: 90 }}
+        />
+      </div>
+      <div>
+        <h4 className="text-sm font-medium mb-4">Custom Formatter</h4>
+        <div className="flex items-end gap-8">
+          <WakaCreditMeter
+            used={8500}
+            total={10000}
+            variant="ring"
+            label="Compute Hours"
+            formatValue={(v) =>
+              v >= 1000 ? `${(v / 1000).toFixed(1)}K` : `${v}`
+            }
+          />
+          <WakaCreditMeter
+            used={8500}
+            total={10000}
+            variant="gauge"
+            label="Compute Hours"
+            formatValue={(v) =>
+              v >= 1000 ? `${(v / 1000).toFixed(1)}K` : `${v}`
+            }
+          />
+        </div>
+      </div>
+    </div>
+  ),
+}