feat: release design system engine, studio and component contracts

scripts/preview-design-systems.ts

@@ -0,0 +1,46 @@
+import { catalogFixtureDocument } from "../packages/ui/test/design-system-catalog-fixture.ts";
+import { CORE_DESIGN_SYSTEMS } from "../packages/design-system/src/index.ts";
+import { resolveThemeConfig, renderThemeCss } from "../packages/styles/src/theme.ts";
+import { designFixtureDocument } from "../packages/ui/test/design-system-fixture.ts";
+import { getComponentControllerRuntime } from "../packages/csr/src/index.ts";
+
+const server = Bun.serve({
+  hostname: "127.0.0.1",
+  port: Number(process.env.DESIGN_PREVIEW_PORT ?? 4318),
+  async fetch(request) {
+    const url = new URL(request.url);
+    if (url.pathname === "/__wrnexus/controllers.js")
+      return new Response(getComponentControllerRuntime(), {
+        headers: { "content-type": "text/javascript" },
+      });
+    const name = url.searchParams.get("system") ?? "square";
+    const system = Object.hasOwn(CORE_DESIGN_SYSTEMS, name)
+      ? CORE_DESIGN_SYSTEMS[name as keyof typeof CORE_DESIGN_SYSTEMS]
+      : undefined;
+    if (!system) return new Response("Unknown design system", { status: 404 });
+    if (url.pathname === "/theme.css")
+      return new Response(renderThemeCss(resolveThemeConfig({ designSystem: { system } })), {
+        headers: { "content-type": "text/css" },
+      });
+    if (url.pathname === "/catalog")
+      return new Response(
+        await catalogFixtureDocument(
+          system,
+          url.searchParams.get("mode") === "dark" ? "dark" : "light",
+          Math.max(0, Math.min(6, Number(url.searchParams.get("page")) || 0)),
+        ),
+        { headers: { "content-type": "text/html; charset=utf-8" } },
+      );
+    if (url.pathname !== "/") return new Response("Not found", { status: 404 });
+    const mode = url.searchParams.get("mode") === "dark" ? "dark" : "light";
+    return new Response(
+      await designFixtureDocument(
+        system,
+        mode,
+        url.searchParams.get("delivery") === "linked" ? "linked" : "inline",
+      ),
+      { headers: { "content-type": "text/html; charset=utf-8" } },
+    );
+  },
+});
+console.log(`Design-system preview: ${server.url}`);