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,77 @@
+import { Alert, AlertDescription, AlertTitle, Badge } from "@ai-ui/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+function SparkIcon() {
+  return (
+    <svg aria-hidden="true" className="size-4" fill="none" viewBox="0 0 16 16">
+      <path
+        d="M8 1.75L9.45 5.2L12.9 6.65L9.45 8.1L8 11.55L6.55 8.1L3.1 6.65L6.55 5.2L8 1.75Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+const meta = {
+  title: "Components/Alert",
+  component: Alert,
+  args: {
+    variant: "default"
+  },
+  argTypes: {
+    className: {
+      control: false
+    },
+    icon: {
+      control: false
+    },
+    variant: {
+      control: "radio",
+      options: ["default", "success", "warning", "destructive"]
+    }
+  },
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <Alert {...args} className="w-[460px]" icon={<SparkIcon />}>
+      <AlertTitle>Release status updated</AlertTitle>
+      <AlertDescription>
+        The approval chain changed. Review the new ownership before publishing.
+      </AlertDescription>
+    </Alert>
+  )
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="grid w-[760px] gap-4">
+      <Alert icon={<SparkIcon />}>
+        <AlertTitle>Informational callout</AlertTitle>
+        <AlertDescription>
+          Pair with a <Badge className="ml-1">live</Badge> badge when status can change in real time.
+        </AlertDescription>
+      </Alert>
+      <Alert icon={<SparkIcon />} variant="success">
+        <AlertTitle>Release approved</AlertTitle>
+        <AlertDescription>All reviewers signed off and rollout can begin.</AlertDescription>
+      </Alert>
+      <Alert icon={<SparkIcon />} variant="warning">
+        <AlertTitle>Missing follow-up</AlertTitle>
+        <AlertDescription>One checklist item is still unresolved for this launch.</AlertDescription>
+      </Alert>
+      <Alert icon={<SparkIcon />} variant="destructive">
+        <AlertTitle>Publishing blocked</AlertTitle>
+        <AlertDescription>Resolve validation issues before trying again.</AlertDescription>
+      </Alert>
+    </div>
+  )
+};