@flextudio/scenario 0.1.0

package/contract-data/schema/v1/design-system/tests/move-step.test.mjs

@@ -0,0 +1,119 @@
+// design-system/tests/move-step.test.mjs
+// 실행: node --test meta-contract/schema/v1/design-system/tests/move-step.test.mjs
+//
+// button / input-action 의 moveStep prop — 클릭 시 단순 Step 이동 (Label.UseMove).
+// 출력 shape + strict 검증 통과(label.schema.json patternProperties 보정 포함) 검증.
+
+import { test } from "node:test";
+import assert from "node:assert/strict";
+
+import { materializeFragment } from "../../patterns/_base.materialize.mjs";
+import { makeMoveSteps } from "../../patterns/_base.controls.mjs";
+import { buildAjv, buildKnownProps } from "../../../../core/schemas.mjs";
+
+const { ajvStrict, schemaCache, schemaIndex } = buildAjv();
+const knownProps = buildKnownProps(schemaCache);
+const keyOf = (suf) => schemaIndex.find((s) => s.key?.endsWith(suf))?.key;
+
+// 노드를 ControlType 별 schema 로 strict 검증 → 미정의 필드(denoise 후) 없으면 clean.
+function realUnknown(node, schemaSuffix) {
+  const v = ajvStrict.getSchema(keyOf(schemaSuffix));
+  v(node);
+  return (v.errors || [])
+    .filter((e) =>
+      ["unevaluatedProperties", "additionalProperties"].includes(e.keyword),
+    )
+    .map((e) => e.params?.unevaluatedProperty ?? e.params?.additionalProperty)
+    .filter((p) => p && !knownProps.has(p));
+}
+
+// ────────────────────────────────────────────────────────────────────────────
+// helper
+// ────────────────────────────────────────────────────────────────────────────
+
+test("makeMoveSteps: 단일 Step 으로 MoveStepOrder + 슬롯 생성", () => {
+  assert.deepEqual(makeMoveSteps("Step3"), {
+    MoveStepOrder: ["Step3"],
+    Step3: { MoveTo: "Next", Direction: "toRight" },
+  });
+});
+
+test("makeMoveSteps: 잘못된 stepId → throw", () => {
+  assert.throws(() => makeMoveSteps("Step0"), /Step<N>/);
+  assert.throws(() => makeMoveSteps("foo"), /Step<N>/);
+});
+
+// ────────────────────────────────────────────────────────────────────────────
+// button
+// ────────────────────────────────────────────────────────────────────────────
+
+test("button: moveStep → UseMove + MoveSteps, label.schema strict clean", async () => {
+  const r = await materializeFragment({
+    button: { label: "다음", variant: "primary", width: "full", moveStep: "Step3" },
+  });
+  assert.deepEqual(r.errors, []);
+  assert.equal(r.fragment.UseMove, true);
+  assert.deepEqual(r.fragment.MoveSteps, {
+    MoveStepOrder: ["Step3"],
+    Step3: { MoveTo: "Next", Direction: "toRight" },
+  });
+  // ★ 동적 Step3 키까지 strict 검증 통과 (label.schema patternProperties 보정).
+  assert.deepEqual(realUnknown(r.fragment, "label.schema.json"), []);
+});
+
+test("button: moveStep 미지정 → UseMove 흔적 없음 (회귀)", async () => {
+  const r = await materializeFragment({
+    button: { label: "x", variant: "primary", width: "full" },
+  });
+  assert.equal(r.fragment.UseMove, undefined);
+  assert.equal(r.fragment.MoveSteps, undefined);
+});
+
+test("button: moveStep + onClick 공존 — 둘 다 emit", async () => {
+  const r = await materializeFragment({
+    button: { label: "x", variant: "primary", width: "full", moveStep: "Step2", onClick: "h" },
+  });
+  assert.deepEqual(r.errors, []);
+  assert.equal(r.fragment.UseMove, true);
+  assert.equal(r.fragment.UseClickEvent, true);
+  assert.equal(r.fragment.Events.Click, "h");
+});
+
+// ────────────────────────────────────────────────────────────────────────────
+// input-action — moveStep 은 트레일링 아이콘 버튼(Label)에 적용
+// ────────────────────────────────────────────────────────────────────────────
+
+test("input-action: moveStep → iconButton 에 UseMove + MoveSteps, strict clean", async () => {
+  const r = await materializeFragment({
+    "input-action": {
+      inputType: "inputText",
+      icon: "chevron-right",
+      moveStep: "Step3",
+    },
+  });
+  assert.deepEqual(r.errors, []);
+  // 트리: root Group > [input, innerGroup > [iconButton]]
+  const iconBtn = r.fragment.Contents[1].Contents[0];
+  assert.equal(iconBtn.UseMove, true);
+  assert.deepEqual(iconBtn.MoveSteps, {
+    MoveStepOrder: ["Step3"],
+    Step3: { MoveTo: "Next", Direction: "toRight" },
+  });
+  assert.deepEqual(realUnknown(iconBtn, "label.schema.json"), []);
+});
+
+test("input-action: moveStep + buttonEvent 공존 — iconButton 에 둘 다", async () => {
+  const r = await materializeFragment({
+    "input-action": {
+      inputType: "inputText",
+      icon: "search",
+      buttonEvent: "doSearch",
+      moveStep: "Step2",
+    },
+  });
+  assert.deepEqual(r.errors, []);
+  const iconBtn = r.fragment.Contents[1].Contents[0];
+  assert.equal(iconBtn.UseMove, true);
+  assert.equal(iconBtn.UseClickEvent, true);
+  assert.equal(iconBtn.Events.Click, "doSearch");
+});

package/contract-data/schema/v1/design-system/tests/override.integration.test.mjs

@@ -0,0 +1,116 @@
+// design-system/tests/override.integration.test.mjs
+// 실행: node --test meta-contract/schema/v1/design-system/tests/override.integration.test.mjs
+//
+// L1 named-anchor override 가 dispatcher (materializeFragment) 경로에서
+// 패턴별로 올바르게 동작하는지 e2e 검증. 헬퍼 단위 테스트는
+// _base.additional-meta.test.mjs 가 커버.
+
+import { test } from "node:test";
+import assert from "node:assert/strict";
+
+import { materializeFragment } from "../../patterns/_base.materialize.mjs";
+
+// ────────────────────────────────────────────────────────────────────────────
+// Atom — root anchor
+// ────────────────────────────────────────────────────────────────────────────
+
+test("atom button: override.root → 결과 노드에 raw 필드 주입", async () => {
+  const r = await materializeFragment({
+    button: {
+      label: "이동",
+      variant: "primary",
+      width: "full",
+      override: {
+        root: {
+          UseMove: true,
+          MoveSteps: {
+            MoveStepOrder: ["Step2"],
+            Step2: { Condition: "", MoveTo: "Next", Direction: "toRight" },
+          },
+        },
+      },
+    },
+  });
+  assert.deepEqual(r.errors, []);
+  assert.equal(r.fragment.UseMove, true);
+  assert.equal(r.fragment.MoveSteps.Step2.MoveTo, "Next");
+  // 기존 materialize 결과는 보존.
+  assert.equal(r.fragment.labeltext, "이동");
+  assert.equal(r.fragment.ControlType, "Label");
+});
+
+test("atom: override 없으면 출력에 주입 흔적 없음 (회귀)", async () => {
+  const r = await materializeFragment({
+    badge: { label: "신규", color: "red", size: "md" },
+  });
+  assert.deepEqual(r.errors, []);
+  assert.equal(r.fragment.UseMove, undefined);
+});
+
+test("atom: 알 수 없는 anchor → materialize 에러 (fail-fast)", async () => {
+  const r = await materializeFragment({
+    checkbox: { label: "동의", override: { toot: { X: 1 } } },
+  });
+  assert.equal(r.errors.length, 1);
+  assert.match(r.errors[0].message, /알 수 없는 anchor 'toot'/);
+});
+
+// ────────────────────────────────────────────────────────────────────────────
+// Molecule — semantic anchors
+// ────────────────────────────────────────────────────────────────────────────
+
+test("molecule input-action: input / badge anchor 각각 주입", async () => {
+  const r = await materializeFragment({
+    "input-action": {
+      inputType: "inputText",
+      icon: "search",
+      badge: { label: "2", color: "red" },
+      override: {
+        input: { UseDataConnection: true },
+        badge: { SomeFlag: true },
+      },
+    },
+  });
+  assert.deepEqual(r.errors, []);
+  const input = r.fragment.Contents[0];
+  const badge = r.fragment.Contents[1].Contents[1];
+  assert.equal(input.UseDataConnection, true);
+  assert.equal(badge.SomeFlag, true);
+  assert.equal(badge.labeltext, "2"); // 기존 결과 보존
+});
+
+test("molecule input-action: badge prop 없이 badge override → 미생성 노드 에러", async () => {
+  const r = await materializeFragment({
+    "input-action": {
+      inputType: "inputText",
+      icon: "search",
+      override: { badge: { X: 1 } },
+    },
+  });
+  assert.equal(r.errors.length, 1);
+  assert.match(r.errors[0].message, /'badge' 는 이 invocation 에서 생성되지 않은 노드/);
+});
+
+test("molecule input-button: button anchor 주입", async () => {
+  const r = await materializeFragment({
+    "input-button": {
+      inputType: "inputText",
+      buttonLabel: "검색",
+      override: { button: { UseMove: true } },
+    },
+  });
+  assert.deepEqual(r.errors, []);
+  assert.equal(r.fragment.Contents[1].UseMove, true);
+});
+
+test("molecule input-pair: left anchor 주입", async () => {
+  const r = await materializeFragment({
+    "input-pair": {
+      inputOptions: [{ inputType: "inputDate" }, { inputType: "inputDate" }],
+      override: { left: { UseDataConnection: true } },
+    },
+  });
+  assert.deepEqual(r.errors, []);
+  assert.equal(r.fragment.Contents[0].UseDataConnection, true);
+  assert.equal(r.fragment.Contents[1].UseDataConnection, undefined);
+});

package/contract-data/schema/v1/design-system/tokens.json

@@ -0,0 +1,76 @@
+{
+  "$comment": "디자인 토큰 SSOT. 두 영역으로 나뉜다. (A) 외부 노출(public) — typography / color / elevation / surface: design 키 어휘이자 외부 프롬프트에 그대로 보이는 slot. design.schema.json enum 과 3-way sync (design.schema.test.mjs 검증), 변경 시 DESIGN.md 도 동기화. (B) 내부 전용(internal) — spacing / palette: 패턴 팩토리(_base.style.mjs)와 materializer 만 사용. design.schema.json 에 노출하지 않으며 외부 프롬프트에도 보이지 않는다. 모든 raw 엔진 값(var(--colorXxx) / px)은 반드시 이 파일을 거친다 — 코드에 직접 하드코딩 금지.",
+
+  "typography": {
+    "display-large":  { "FontSize": "28", "FontWeight": "SemiBold" },
+    "display-medium": { "FontSize": "24", "FontWeight": "SemiBold" },
+    "display-small":  { "FontSize": "20", "FontWeight": "SemiBold" },
+    "title-large":    { "FontSize": "18", "FontWeight": "SemiBold" },
+    "title-medium":   { "FontSize": "16", "FontWeight": "SemiBold" },
+    "body-large":     { "FontSize": "16", "FontWeight": "Regular" },
+    "body-medium":    { "FontSize": "14", "FontWeight": "Regular" },
+    "body-small":     { "FontSize": "13", "FontWeight": "Regular" },
+    "caption":        { "FontSize": "12", "FontWeight": "Regular" },
+    "micro":          { "FontSize": "11", "FontWeight": "Medium" }
+  },
+
+  "color": {
+    "main":            "var(--colorMain)",
+    "main-light":      "var(--colorMainLight)",
+    "sub":             "var(--colorSub0)",
+    "sub-light":       "var(--colorSub0Light)",
+
+    "canvas":          "var(--colorWhite)",
+    "card":            "var(--colorWhite)",
+    "subtle":          "var(--colorGray9)",
+    "surface-strong":  "var(--colorGray10)",
+    "dark":            "var(--colorBlack)",
+
+    "hairline":        "var(--colorGray5)",
+    "hairline-soft":   "var(--colorGray9)",
+    "hairline-strong": "var(--colorGray4)",
+
+    "ink":             "var(--colorBlack)",
+    "body":            "var(--colorGray1)",
+    "body-soft":       "var(--colorGray3)",
+    "muted":           "var(--colorGray4)",
+    "on-brand":        "var(--colorWhite)",
+
+    "warning":         "var(--colorSub4)",
+    "preview":         "var(--colorSub3)",
+    "success":         "var(--colorSub1)",
+    "error":           "var(--colorSub2)"
+  },
+
+  "elevation": {
+    "rect-shadow":   "styleRectangleShadow",
+    "radius-shadow": "styleRadiusShadow"
+  },
+
+  "surface": {
+    "flat":     { "bg": "card", "radius": "16" },
+    "outlined": { "bg": "card", "border": "hairline", "radius": "16" },
+    "elevated": { "bg": "card", "radius": "16", "elevation": "radius-shadow" }
+  },
+
+  "$comment_internal": "── 여기서부터 내부 전용 (B). design.schema.json 에 노출하지 않는다. ──",
+
+  "spacing": {
+    "none": "0",
+    "xs":   "4",
+    "sm":   "8",
+    "md":   "12",
+    "lg":   "16",
+    "xl":   "20",
+    "xxl":  "24"
+  },
+
+  "palette": {
+    "blue":  "var(--colorBlue)",
+    "pink":  "var(--colorPink)",
+    "sub7":  "var(--colorSub7)",
+    "sub9":  "var(--colorSub9)",
+    "sub10": "var(--colorSub10)",
+    "gray2": "var(--colorGray2)"
+  }
+}