feat: release design system engine, studio and component contracts

packages/ui/test/design-system-catalog.test.ts

@@ -0,0 +1,58 @@
+import { test, expect } from "bun:test";
+import { readFileSync } from "node:fs";
+import {
+  COMPONENT_CONTRACTS,
+  CATALOG_COMPONENT_CONTRACTS,
+  CORE_COMPONENT_CONTRACTS,
+  CORE_DESIGN_SYSTEMS,
+  compileDesignSystem,
+  validateDesignSystem,
+} from "../../design-system/src/index.ts";
+import { renderComponent } from "../../test/src/index.ts";
+
+test("all 104 component contracts have source hooks and preserve the core registry", () => {
+  expect(Object.keys(COMPONENT_CONTRACTS)).toHaveLength(104);
+  expect(Object.keys(CORE_COMPONENT_CONTRACTS)).toHaveLength(14);
+  expect(Object.keys(CATALOG_COMPONENT_CONTRACTS)).toHaveLength(90);
+  for (const [name, contract] of Object.entries(COMPONENT_CONTRACTS)) {
+    const source = readFileSync(contract.source, "utf8");
+    expect(source).toContain(`data-wrn-component="${name}"`);
+    for (const part of Object.keys(contract.parts))
+      expect(source).toContain(`data-wrn-part="${part}"`);
+  }
+});
+
+test("all three systems validate and compile recipes for the complete catalog", () => {
+  for (const system of Object.values(CORE_DESIGN_SYSTEMS)) {
+    expect(validateDesignSystem(system)).toEqual([]);
+    expect(Object.keys(system.recipes!)).toHaveLength(104);
+    for (const mode of ["light", "dark"]) {
+      const result = compileDesignSystem(system, { mode });
+      expect(result.recipeCss).not.toContain("undefined");
+      expect(result.recipeCss).not.toContain("NaN");
+      for (const [name, recipe] of Object.entries(system.recipes!)) {
+        if (Object.keys(recipe.base ?? {}).length)
+          expect(result.recipeCss).toContain(`data-wrn-owner="${name}"`);
+      }
+    }
+  }
+});
+
+test("catalog recipes respect provider, native and content ownership", () => {
+  for (const [name, contract] of Object.entries(CATALOG_COMPONENT_CONTRACTS)) {
+    for (const [part, descriptor] of Object.entries(contract.parts)) {
+      if (descriptor.ownership !== "framework" || descriptor.profile === "managed") {
+        for (const system of Object.values(CORE_DESIGN_SYSTEMS))
+          expect(system.recipes![name]!.base?.[part]).toBeUndefined();
+      }
+    }
+  }
+});
+
+test("all remaining components retain server rendering with additive ownership hooks", async () => {
+  for (const [name, contract] of Object.entries(CATALOG_COMPONENT_CONTRACTS)) {
+    const html = await renderComponent(readFileSync(contract.source, "utf8"), {});
+    expect(html).toContain(`data-wrn-component="${name}"`);
+    expect(html).not.toContain('data-wrn-owner="undefined"');
+  }
+});