feat: add core UI components and baseline tests

2026-03-19 16:56:27 +08:00
parent 12642e0a92
commit 063179933c
73 changed files with 5756 additions and 2 deletions
@@ -0,0 +1,81 @@
+import { Separator } from "@ai-ui/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Separator",
+  component: Separator,
+  args: {
+    orientation: "horizontal",
+    tone: "subtle"
+  },
+  argTypes: {
+    className: {
+      control: false
+    },
+    decorative: {
+      control: "boolean"
+    },
+    orientation: {
+      control: "radio",
+      options: ["horizontal", "vertical"]
+    },
+    tone: {
+      control: "radio",
+      options: ["subtle", "strong"]
+    }
+  },
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <div className="w-80">
+      <Separator {...args} />
+    </div>
+  )
+};
+
+export const InCard: Story = {
+  render: () => (
+    <div className="w-[420px] rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] p-5 shadow-[var(--shadow-sm)]">
+      <div className="space-y-3">
+        <div>
+          <h3 className="m-0 text-base font-semibold">Workspace</h3>
+          <p className="m-0 text-sm text-[var(--color-muted-foreground)]">
+            Project status and recent activity
+          </p>
+        </div>
+        <Separator />
+        <div className="grid gap-2 text-sm text-[var(--color-muted-foreground)]">
+          <div className="flex items-center justify-between">
+            <span>Tokens</span>
+            <span className="text-[var(--color-foreground)]">Stable</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span>Components</span>
+            <span className="text-[var(--color-foreground)]">In progress</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <div className="flex h-16 items-center gap-4 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] px-5 shadow-[var(--shadow-xs)]">
+      <span className="text-sm text-[var(--color-muted-foreground)]">Overview</span>
+      <Separator className="h-8" orientation="vertical" />
+      <span className="text-sm text-[var(--color-muted-foreground)]">Metrics</span>
+      <Separator className="h-8" orientation="vertical" tone="strong" />
+      <span className="text-sm text-[var(--color-muted-foreground)]">Activity</span>
+    </div>
+  )
+};