feat: release design system engine, studio and component contracts

packages/design-system/test/recipes.test.ts

@@ -0,0 +1,99 @@
+import { test, expect } from "bun:test";
+import {
+  CORE_DESIGN_SYSTEMS,
+  compileDesignSystem,
+  validateDesignSystem,
+  resolveDesignSystem,
+  type DesignSystem,
+} from "../src/index.ts";
+
+const sample = (): DesignSystem => ({
+  schemaVersion: 1,
+  id: "recipe",
+  name: "Recipe",
+  version: "1",
+  tokens: { radius: { type: "dimension", value: "3px" } },
+  recipes: {
+    Button: { contractVersion: 1, base: { control: { borderRadius: { ref: "radius" } } } },
+  },
+});
+test("three presets compile deterministically in both modes", () => {
+  for (const system of Object.values(CORE_DESIGN_SYSTEMS)) {
+    expect(validateDesignSystem(system)).toEqual([]);
+    for (const mode of ["light", "dark"])
+      expect(compileDesignSystem(system, { mode }).recipeCss).toBe(
+        compileDesignSystem(structuredClone(system), { mode }).recipeCss,
+      );
+  }
+});
+test("contracts reject unknown components, parts, axes, states, versions and executable style values", () => {
+  for (const recipes of [
+    { Unknown: { contractVersion: 1 } },
+    { Button: { contractVersion: 2 } },
+    { Button: { contractVersion: 1, base: { missing: { color: "#fff" } } } },
+    { Button: { contractVersion: 1, base: { control: { position: "fixed" } } } },
+    { Button: { contractVersion: 1, base: { control: { color: "red;}body{display:none" } } } },
+    {
+      Button: {
+        contractVersion: 1,
+        variants: [{ when: { variant: "invented" }, parts: { control: { color: "#fff" } } }],
+      },
+    },
+    {
+      Button: {
+        contractVersion: 1,
+        states: [{ state: "checked", parts: { control: { color: "#fff" } } }],
+      },
+    },
+    { Modal: { contractVersion: 1, base: { panel: { rotate: "2deg" } } } },
+  ])
+    expect(validateDesignSystem({ ...sample(), recipes })[0]?.code).toBe("WRN-DS-RECIPE");
+});
+test("recipe token references are checked against property types and missing tokens", () => {
+  const system = sample();
+  system.recipes!.Button!.base!.control!.borderRadius = { ref: "missing" };
+  expect(validateDesignSystem(system)[0]?.code).toBe("WRN-DS-REFERENCE-MISSING");
+  system.tokens.radius = { type: "color", value: "#fff" };
+  system.recipes!.Button!.base!.control!.borderRadius = { ref: "radius" };
+  expect(validateDesignSystem(system)[0]?.code).toBe("WRN-DS-REFERENCE-TYPE");
+});
+test("inheritance merges base properties and preserves ordered compound/state rules", () => {
+  const parent = sample();
+  parent.id = "parent";
+  const child: DesignSystem = {
+    ...sample(),
+    extends: ["parent"],
+    recipes: {
+      Button: {
+        contractVersion: 1,
+        base: { control: { fontWeight: 700 } },
+        variants: [
+          { when: { variant: "outline", size: "sm" }, parts: { control: { borderWidth: "2px" } } },
+        ],
+        states: [{ state: "disabled", parts: { control: { opacity: 0.5 } } }],
+      },
+    },
+  };
+  const resolved = resolveDesignSystem(child, { registry: { parent } });
+  expect(resolved.recipes.Button?.base?.control).toEqual({
+    borderRadius: { ref: "radius" },
+    fontWeight: 700,
+  });
+  const css = compileDesignSystem(child, { registry: { parent } }).recipeCss;
+  expect(css.indexOf("font-weight:700")).toBeLessThan(css.indexOf("border-width:2px"));
+  expect(css.indexOf("border-width:2px")).toBeLessThan(css.indexOf("opacity:0.5"));
+  expect(css).not.toContain("!important");
+});
+
+test("mode-dependent recipe values retain mode rules while identical values are deduplicated", () => {
+  const system = sample();
+  system.modes = {
+    light: { radius: { type: "dimension", value: "3px" } },
+    dark: { radius: { type: "dimension", value: "9px" } },
+  };
+  system.defaultMode = "light";
+  const css = compileDesignSystem(system).recipeCss;
+  expect(css).toContain('[data-theme="dark"]');
+  expect(css).toContain("9px");
+  expect(css).not.toContain('[data-theme="light"]');
+});