feat: add badge card avatar alert and progress

2026-03-19 17:24:22 +08:00
parent 063179933c
commit cb15b46b0c
23 changed files with 1342 additions and 0 deletions
@@ -0,0 +1,79 @@
+import { Progress } from "@ai-ui/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Progress",
+  component: Progress,
+  args: {
+    size: "md",
+    value: 64,
+    variant: "default"
+  },
+  argTypes: {
+    className: {
+      control: false
+    },
+    size: {
+      control: "radio",
+      options: ["sm", "md", "lg"]
+    },
+    tone: {
+      control: "radio",
+      options: ["default", "subtle"]
+    },
+    value: {
+      control: {
+        type: "range",
+        min: 0,
+        max: 100,
+        step: 1
+      }
+    },
+    variant: {
+      control: "radio",
+      options: ["default", "success", "warning", "destructive"]
+    }
+  },
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof Progress>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => <Progress aria-label="Upload progress" className="w-[320px]" {...args} />
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="grid w-[360px] gap-4">
+      <Progress aria-label="Primary progress" value={42} variant="default" />
+      <Progress aria-label="Success progress" value={74} variant="success" />
+      <Progress aria-label="Warning progress" value={58} variant="warning" />
+      <Progress aria-label="Destructive progress" value={86} variant="destructive" />
+    </div>
+  )
+};
+
+export const States: Story = {
+  render: () => (
+    <div className="grid w-[360px] gap-4">
+      <div className="space-y-2">
+        <p className="text-sm font-medium">Determinate</p>
+        <Progress aria-label="Determinate progress" value={68} />
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm font-medium">Indeterminate</p>
+        <Progress aria-label="Indeterminate progress" value={null} variant="success" />
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm font-medium">Complete</p>
+        <Progress aria-label="Complete progress" value={100} variant="success" />
+      </div>
+    </div>
+  )
+};