chore: scaffold phase 0 workspace

2026-03-19 13:42:43 +08:00
parent a099912dac
commit 937855362b
24 changed files with 4908 additions and 0 deletions
@@ -0,0 +1,79 @@
+import { cn, motionDurations } from "@ai-ui/ui";
+import { themeNames } from "@ai-ui/tokens";
+import type { Meta, StoryObj } from "@storybook/react";
+
+function FoundationShowcase() {
+  return (
+    <div className="min-h-screen bg-[var(--color-background)] px-6 py-10 text-[var(--color-foreground)] sm:px-10">
+      <div className="mx-auto flex w-full max-w-5xl flex-col gap-6">
+        <div className="max-w-3xl space-y-3">
+          <p className="text-sm uppercase tracking-[0.28em] text-[var(--color-muted-foreground)]">
+            AI UI / Phase 0
+          </p>
+          <h1 className="text-4xl font-semibold tracking-tight sm:text-5xl">
+            Monorepo scaffolding for a source-owned component system.
+          </h1>
+          <p className="max-w-2xl text-base leading-7 text-[var(--color-muted-foreground)] sm:text-lg">
+            The repo now has workspace packages for tokens, UI utilities, and docs.
+            The next phase can focus on component contracts instead of repo setup.
+          </p>
+        </div>
+
+        <div className="grid gap-4 md:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
+          <section className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] p-6 shadow-[var(--shadow-sm)]">
+            <div className="space-y-4">
+              <div className="flex items-center justify-between gap-4">
+                <h2 className="text-xl font-semibold">Workspace packages</h2>
+                <span className="rounded-full bg-[var(--color-primary)] px-3 py-1 text-xs font-medium text-[var(--color-primary-foreground)]">
+                  ready
+                </span>
+              </div>
+              <div className="grid gap-3 sm:grid-cols-3">
+                {["packages/tokens", "packages/ui", "apps/docs"].map((item) => (
+                  <div
+                    key={item}
+                    className={cn(
+                      "rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] px-4 py-3 text-sm",
+                      "transition-transform duration-200 ease-[var(--ease-standard)] hover:-translate-y-[2px]"
+                    )}
+                  >
+                    {item}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </section>
+
+          <aside className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] p-6 shadow-[var(--shadow-xs)]">
+            <div className="space-y-3">
+              <h2 className="text-xl font-semibold">Theme baseline</h2>
+              <ul className="space-y-2 text-sm text-[var(--color-muted-foreground)]">
+                {themeNames.map((themeName) => (
+                  <li key={themeName} className="flex items-center justify-between gap-4">
+                    <span>{themeName}</span>
+                    <span className="font-medium text-[var(--color-foreground)]">enabled</span>
+                  </li>
+                ))}
+              </ul>
+              <div className="rounded-[var(--radius-md)] bg-[var(--color-background)] px-4 py-3 text-xs text-[var(--color-muted-foreground)]">
+                <span className="font-medium text-[var(--color-foreground)]">Motion base:</span>{" "}
+                {motionDurations.base}
+              </div>
+            </div>
+          </aside>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const meta = {
+  title: "Foundation/Phase 0",
+  component: FoundationShowcase
+} satisfies Meta<typeof FoundationShowcase>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
@@ -0,0 +1,7 @@
+@import "tailwindcss";
+@import "@ai-ui/tokens/styles.css";
+
+:root {
+  background: var(--color-background);
+}
+