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,53 @@
+import { Label, RadioGroup, RadioGroupItem } from "@ai-ui/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+function RadioGroupExamples() {
+  return (
+    <div className="grid w-[720px] gap-6">
+      <RadioGroup defaultValue="startup">
+        <div className="flex items-center gap-3">
+          <RadioGroupItem id="mode-startup" value="startup" />
+          <Label htmlFor="mode-startup">Startup review</Label>
+        </div>
+        <div className="flex items-center gap-3">
+          <RadioGroupItem id="mode-scale" value="scale" />
+          <Label htmlFor="mode-scale">Scale review</Label>
+        </div>
+        <div className="flex items-center gap-3">
+          <RadioGroupItem id="mode-enterprise" value="enterprise" />
+          <Label htmlFor="mode-enterprise">Enterprise review</Label>
+        </div>
+      </RadioGroup>
+
+      <RadioGroup defaultValue="email" orientation="horizontal">
+        <div className="flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] p-4">
+          <RadioGroupItem id="channel-email" value="email" />
+          <Label htmlFor="channel-email">Email</Label>
+        </div>
+        <div className="flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] p-4">
+          <RadioGroupItem id="channel-slack" value="slack" />
+          <Label htmlFor="channel-slack">Slack</Label>
+        </div>
+        <div className="flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] p-4">
+          <RadioGroupItem id="channel-push" value="push" />
+          <Label htmlFor="channel-push">Push</Label>
+        </div>
+      </RadioGroup>
+    </div>
+  );
+}
+
+const meta = {
+  title: "Components/RadioGroup",
+  component: RadioGroupExamples,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof RadioGroupExamples>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const States: Story = {};