@flextudio/scenario 0.1.0

package/contract-data/schema/v1/patterns/molecule/input-button.materialize.mjs

@@ -0,0 +1,183 @@
+// input-button.materialize.mjs
+// pattern.molecule.input-button — 단말 입력 + atom/button (fit) 가로 페어.
+//
+// 메타 구조 (development.md §6 spread+override):
+// - 외부 Group (horizontal flex, Width 100%, Height auto, columnGap 4px, vertical-align Bottom)
+//   └─ 입력 0 (InputText / InputNumber / InputMask)
+//        · Width 100%
+//        · Height 70 (caption 있음) / 44 (없음)
+//        · Caption + CaptionStyle (SemiBold 13 left, 항상 emit)
+//        · Border 1px Gray4 8r, font 14 Regular, bg surface
+//        · readOnly=true 면 ControlKey:'ReadOnly'
+//   └─ 버튼 1 (atom/button materializer 직접 호출 — primary + fit)
+//        · 색/높이/타이포는 atom 표준 (Main bg, 48 height, 16 SemiBold)
+//        · 이 molecule 은 onClick 을 노출하지 않는다 (시각 + 라벨만)
+//
+// development.md §11 "Returning materialized metadata to the LLM" 금지 — molecule 이
+// atom 의 materializer 를 직접 호출하는 것은 OK (LLM 에 노출되지 않음, 내부 합성).
+
+import {
+  makeGroup,
+  makeInputText,
+  makeInputNumber,
+  makeInputMask,
+} from "../_base.controls.mjs";
+import { generateId } from "../_base.id.mjs";
+import { font, border, bg } from "../_base.style.mjs";
+import buttonMaterialize from "../atom/button.materialize.mjs";
+import { makeOverride } from "../_base.additional-meta.mjs";
+
+// override anchor 목록 — schema 의 override.propertyNames 와 일치.
+const ANCHORS = ["root", "input", "button"];
+
+// ─────────────────────────────────────────────────────────────────────────────
+// 디자인 결정 (상수)
+// ─────────────────────────────────────────────────────────────────────────────
+
+const W_FULL = Object.freeze({
+  MatchText: false,
+  SizeValue: "100",
+  SizeUnit: "%",
+});
+const H_NO_CAPTION = Object.freeze({
+  MatchText: false,
+  SizeValue: "44",
+  SizeUnit: "px",
+});
+const H_WITH_CAPTION = Object.freeze({
+  MatchText: false,
+  SizeValue: "70",
+  SizeUnit: "px",
+});
+const H_AUTO = Object.freeze({
+  MatchText: true,
+  SizeValue: "",
+  SizeUnit: "text",
+});
+
+// 라벨 영역 — Caption 유무와 무관하게 emit (예시 메타 정합).
+const CAPTION_STYLE_FIXED = Object.freeze({
+  UseDesign: true,
+  FontWeight: "SemiBold",
+  CaptionPosition: "",
+  FontSize: "13",
+  FontAlign: "flex-start",
+});
+
+// Wrapper flex — columnGap 4px (예시 메타), bottom align 으로 caption 있는
+// 입력과 짧은 버튼이 바닥선 정렬.
+const WRAPPER_DISPLAY = Object.freeze({
+  UseDisplay: true,
+  DisplayType: "Flex",
+  FlexDirection: "row",
+  DisplayAlign: "Left",
+  DisplayVerticalAlign: "Bottom",
+  flexBoxType: "align",
+  columnGapValue: "4",
+  columnGapUnit: "px",
+});
+
+const DEFAULT_NAME_BY_TYPE = Object.freeze({
+  inputText: "FieldText",
+  inputNumber: "FieldNumber",
+  inputMask: "FieldMask",
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// 입력 본체 빌더
+// ─────────────────────────────────────────────────────────────────────────────
+
+function buildInput(inputType, opts, ctx) {
+  const name = opts.name || DEFAULT_NAME_BY_TYPE[inputType];
+  let body;
+  switch (inputType) {
+    case "inputText":
+      body = makeInputText({
+        name,
+        inputType: opts.textInputType || "text",
+      });
+      break;
+    case "inputNumber":
+      body = makeInputNumber({
+        name,
+        inputType: opts.numberInputType || "decimal",
+      });
+      if (opts.format != null && opts.format !== "") {
+        body.Format = String(opts.format);
+      }
+      break;
+    case "inputMask":
+      if (!opts.maskInputType) {
+        throw new Error(
+          "input-button.materialize: inputType=inputMask 일 때 inputOptions.maskInputType 필수 (schema if/then 후검증)",
+        );
+      }
+      body = makeInputMask({ name, inputType: opts.maskInputType });
+      break;
+    default:
+      throw new Error(
+        `input-button.materialize: unsupported inputType '${inputType}'`,
+      );
+  }
+
+  const hasCaption =
+    typeof opts.caption === "string" && opts.caption.length > 0;
+  const placeholder =
+    typeof opts.placeholder === "string" ? opts.placeholder : "";
+
+  const out = {
+    ...body,
+    Id: generateId(ctx),
+    Caption: hasCaption ? opts.caption : "",
+    Placeholder: placeholder,
+    Width: { ...W_FULL },
+    Height: hasCaption ? { ...H_WITH_CAPTION } : { ...H_NO_CAPTION },
+    BorderStyle: border({ radius: 8, color: "border.strong" }),
+    BgStyle: bg("surface"),
+    FontStyle: font({ size: 14, weight: "Regular" }),
+    CaptionStyle: { ...CAPTION_STYLE_FIXED },
+  };
+
+  if (opts.readOnly === true) {
+    out.ControlKey = "ReadOnly";
+  }
+  return out;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Public materialize
+// ─────────────────────────────────────────────────────────────────────────────
+
+export default function materialize(props, ctx) {
+  const { inputType, inputOptions = {}, buttonLabel } = props;
+
+  if (typeof buttonLabel !== "string" || buttonLabel.length === 0) {
+    throw new Error("input-button.materialize: buttonLabel (string) 필수");
+  }
+  const ov = makeOverride(props.override, "input-button");
+
+  const inputCtrl = ov.apply("input", buildInput(inputType, inputOptions, ctx));
+
+  // atom/button materializer 직접 호출 — primary + fit.
+  // ctx 를 공유해서 ID 카운터가 연속.
+  const button = ov.apply(
+    "button",
+    buttonMaterialize(
+      { label: buttonLabel, variant: "primary", width: "fit" },
+      ctx,
+    ),
+  );
+
+  const root = ov.apply("root", {
+    ...makeGroup({
+      name: "InputButton",
+      direction: "horizontal",
+      children: [inputCtrl, button],
+    }),
+    Id: generateId(ctx),
+    Height: { ...H_AUTO },
+    DisplayStyle: { ...WRAPPER_DISPLAY },
+  });
+  ov.finalize(ANCHORS);
+  return root;
+}

package/contract-data/schema/v1/patterns/molecule/input-button.schema.json

@@ -0,0 +1,141 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://flextudio.local/meta-contract/v1/patterns/molecule/input-button.schema.json",
+  "title": "pattern.molecule.input-button",
+  "description": "입력 컨트롤 + 짧은 액션 버튼 페어 (molecule). 왼쪽에 단말 입력 (InputText / InputNumber / InputMask), 오른쪽에 atom/button 표준 CTA 가 fit 너비로 붙는 가로 페어. 대표 use case: 주소 + '우편번호 검색', 휴대폰 + '인증', 쿠폰 코드 + '적용', 사번 + '직원 검색' — 버튼이 입력값을 외부 lookup 으로 채우거나 값에 대한 액션을 수행하는 패턴.\n\n입력은 Width 100% (남는 공간을 채우되 maxWidth 500px 로 캡, minWidth 는 content 만큼). Caption(라벨) 유무로 Height 자동 분기 — 있으면 70px, 없으면 44px. readOnly 옵션은 버튼이 값을 채우는 lookup 패턴에서 입력 직접 편집을 막을 때 사용 (ControlKey:'ReadOnly').\n\n버튼은 atom/button 의 primary variant + width=fit 을 그대로 호출하여 생성 — 색/높이/타이포는 atom 표준. molecule 은 wrapper(horizontal flex, columnGap 4px, vertical-align bottom) + 입력 디자인만 결정한다. 버튼에 이벤트가 필요하면 별도 후처리 또는 atom/button raw 사용을 권장 (이 molecule 은 시각 + 라벨만 제공).",
+  "x-tier": "molecule",
+  "x-tags": [
+    "input",
+    "button",
+    "lookup",
+    "address",
+    "verify",
+    "input-with-action"
+  ],
+  "x-related": ["molecule/input-pair", "atom/button"],
+  "type": "object",
+  "additionalProperties": false,
+  "required": ["inputType", "buttonLabel"],
+  "properties": {
+    "inputType": {
+      "type": "string",
+      "enum": ["inputText", "inputNumber", "inputMask"],
+      "description": "왼쪽 입력 컨트롤 종류. 단말 입력 3종만 허용 — Dialog 합성이 필요한 inputDate / inputSearch 는 이 molecule 대신 input-pair 사용."
+    },
+    "inputOptions": {
+      "type": "object",
+      "additionalProperties": false,
+      "description": "입력 컨트롤 옵션. 미지정 시 inputType 별 기본값. 모든 필드 optional.",
+      "properties": {
+        "caption": {
+          "type": "string",
+          "minLength": 1,
+          "maxLength": 30,
+          "description": "입력 위에 표시되는 라벨 텍스트. 지정 시 Height 70px(라벨 포함), 미지정 시 44px. CaptionStyle 은 고정 (SemiBold 13 left)."
+        },
+        "placeholder": {
+          "type": "string",
+          "maxLength": 80,
+          "description": "Placeholder 텍스트. 미지정 시 빈 문자열."
+        },
+        "name": {
+          "type": "string",
+          "minLength": 1,
+          "maxLength": 40,
+          "description": "ControlName / ControlName2 (스튜디오 explorer 식별자 + 데이터 키). 미지정 시 inputType 기반 기본값 (FieldText / FieldNumber / FieldMask)."
+        },
+        "readOnly": {
+          "type": "boolean",
+          "default": false,
+          "description": "true 면 ControlKey:'ReadOnly' 설정 — 사용자가 직접 입력 못 하고 버튼 액션 결과로만 채워지는 lookup 패턴 (예: 우편번호 검색에서 주소 입력)."
+        },
+        "textInputType": {
+          "type": "string",
+          "enum": ["text", "password", "number", "email", "tel"],
+          "description": "inputType=inputText 일 때만. 기본 'text'."
+        },
+        "numberInputType": {
+          "type": "string",
+          "enum": ["decimal", "integer", "number"],
+          "description": "inputType=inputNumber 일 때만. 기본 'decimal'."
+        },
+        "format": {
+          "type": "string",
+          "description": "inputType=inputNumber 의 표시 포맷 (예: '#,###', '#,###.##')."
+        },
+        "maskInputType": {
+          "type": "string",
+          "enum": ["hhmm", "money"],
+          "description": "inputType=inputMask 일 때 필수. hhmm=시간 / money=천단위 콤마."
+        }
+      }
+    },
+    "buttonLabel": {
+      "type": "string",
+      "minLength": 1,
+      "maxLength": 12,
+      "description": "버튼 표시 텍스트. 짧게 유지 (가로 페어에서 입력 옆에 붙는 액션이라 긴 라벨은 레이아웃 깨짐). 예: '검색', '인증', '적용', '확인', '우편번호 검색'. 다국어/바인딩 토큰 가능."
+    },
+    "override": {
+      "type": "object",
+      "propertyNames": { "enum": ["root", "input", "button"] },
+      "additionalProperties": { "type": "object" },
+      "description": "(L1 escape hatch) 패턴이 노출하지 않는 raw 엔진 메타데이터를 materialized 트리의 특정 노드에 deep-merge 로 주입한다. anchor 로 위치 지정 — root=외부 Group, input=입력 본체, button=우측 버튼. 값은 엔진 필드 패치 객체이며, 어떤 엔진 스키마에든 정의된 필드명만 검증을 통과한다(예: UseDataConnection, UseMove). 배열 필드는 deep-merge 가 아니라 통째 교체된다. 일반 케이스는 props 로 충분하므로 props 로 표현 못 하는 필드가 필요할 때만 사용.",
+      "examples": [
+        { "input": { "UseDataConnection": true } },
+        { "root": { "UseMove": true, "MoveSteps": { "MoveStepOrder": ["Step2"], "Step2": { "Condition": "", "MoveTo": "Next", "Direction": "toRight" } } } }
+      ]
+    }
+  },
+  "allOf": [
+    {
+      "$comment": "inputMask 는 maskInputType 필수.",
+      "if": {
+        "properties": { "inputType": { "const": "inputMask" } },
+        "required": ["inputType"]
+      },
+      "then": {
+        "required": ["inputOptions"],
+        "properties": { "inputOptions": { "required": ["maskInputType"] } }
+      }
+    }
+  ],
+  "examples": [
+    {
+      "inputType": "inputText",
+      "inputOptions": {
+        "caption": "주소",
+        "placeholder": "우편번호",
+        "name": "address",
+        "readOnly": true
+      },
+      "buttonLabel": "우편번호 검색"
+    },
+    {
+      "inputType": "inputText",
+      "inputOptions": {
+        "caption": "휴대폰",
+        "placeholder": "010-0000-0000",
+        "name": "phone",
+        "textInputType": "tel"
+      },
+      "buttonLabel": "인증"
+    },
+    {
+      "inputType": "inputText",
+      "inputOptions": { "placeholder": "쿠폰 코드", "name": "couponCode" },
+      "buttonLabel": "적용"
+    },
+    {
+      "inputType": "inputNumber",
+      "inputOptions": {
+        "caption": "주문 수량",
+        "placeholder": "0",
+        "name": "qty",
+        "numberInputType": "integer",
+        "format": "#,###"
+      },
+      "buttonLabel": "재고 확인"
+    }
+  ]
+}

package/contract-data/schema/v1/patterns/molecule/input-pair.materialize.mjs

@@ -0,0 +1,254 @@
+// input-pair.materialize.mjs
+// pattern.molecule.input-pair — 가로 50/50 두 입력 페어 (mixed types 허용).
+//
+// 메타 구조 (development.md §6 spread+override):
+// - 외부 Group (horizontal flex, Width 100%, align Left/Top)
+//     · bgColor 있음 → 'carded' 모드: bg(token) + Margin{y:20} + Padding{x:10,y:8} + columnGap 8px
+//     · bgColor 없음 → 'open'   모드: bg 없음 + Margin/Padding 없음 + columnGap 16px
+//   └─ 입력 0 (per-item inputType)
+//   └─ 입력 1 (per-item inputType)
+//
+// 입력 공통 디자인:
+//   Width  = 50% (고정)
+//   Height = 68 (caption 있음) / 44 (없음)  ← per-item 독립
+//   Bg     = surface (흰색)
+//   Font   = 14 Regular left
+//   CaptionStyle = SemiBold 13 left (항상 emit)
+//   Border :
+//     · carded 모드 (bgColor 있음) → border({ radius: 8 })            → radius-only, hairline 없음
+//     · open   모드 (bgColor 없음) → border({ radius: 8, color: 'border.strong' }) → 1px Gray4 hairline
+//
+// inputType 별 베이스:
+//   inputCombo  → makeCombo + Dialog(makeInnerComboList({ comboItems | comboDataSourceName, comboTitle }))
+//                 ComboList 에 UseFirstRow:true, UseEmptyRow:false, EmptyRowName:"" 명시.
+//   inputSearch → makeSearch + Dialog(makeInnerSearchList({ searchDataSourceName, searchTitle, searchSubTitle, searchKeywordCkey }))
+//   inputDate   → makeInputDate({ dateFormat }) + Dialog(makeInnerCalendar({ dayCalendar, dateSelectType }))
+
+import {
+  makeGroup,
+  makeCombo,
+  makeSearch,
+  makeInputDate,
+  makeInnerComboList,
+  makeInnerSearchList,
+  makeInnerCalendar,
+  wrapDialog,
+} from "../_base.controls.mjs";
+import { generateId } from "../_base.id.mjs";
+import { font, border, bg, padding, margin } from "../_base.style.mjs";
+import { makeOverride } from "../_base.additional-meta.mjs";
+
+// override anchor 목록 — schema 의 override.propertyNames 와 일치.
+const ANCHORS = ["root", "left", "right"];
+
+// ─────────────────────────────────────────────────────────────────────────────
+// 디자인 결정 (상수)
+// ─────────────────────────────────────────────────────────────────────────────
+
+const W_HALF = Object.freeze({
+  MatchText: false,
+  SizeValue: "50",
+  SizeUnit: "%",
+});
+const H_NO_CAPTION = Object.freeze({
+  MatchText: false,
+  SizeValue: "44",
+  SizeUnit: "px",
+});
+const H_WITH_CAPTION = Object.freeze({
+  MatchText: false,
+  SizeValue: "68",
+  SizeUnit: "px",
+});
+
+// Caption 영역 — Caption 유무와 무관하게 emit (예시 메타 정합).
+const CAPTION_STYLE_FIXED = Object.freeze({
+  UseDesign: true,
+  FontWeight: "SemiBold",
+  CaptionPosition: "",
+  FontSize: "13",
+  FontAlign: "flex-start",
+});
+
+// Wrapper Flex display — carded / open 모드의 columnGap 만 분기.
+function wrapperDisplay(columnGapPx) {
+  return {
+    UseDisplay: true,
+    DisplayType: "Flex",
+    FlexDirection: "row",
+    DisplayAlign: "Left",
+    DisplayVerticalAlign: "Top",
+    flexBoxType: "align",
+    columnGapValue: String(columnGapPx),
+    columnGapUnit: "px",
+  };
+}
+
+// 인덱스별 default name (사용자가 opts.name 미지정 시).
+const DEFAULT_NAME_BY_TYPE = Object.freeze({
+  inputCombo: ["ComboLeft", "ComboRight"],
+  inputSearch: ["SearchLeft", "SearchRight"],
+  inputDate: ["DateLeft", "DateRight"],
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// 입력 본체 빌더 — inputType 별 팩토리 분기
+// ─────────────────────────────────────────────────────────────────────────────
+
+function buildInputCombo(opts, name) {
+  let inner;
+  if (Array.isArray(opts.comboItems) && opts.comboItems.length > 0) {
+    inner = {
+      ...makeInnerComboList({
+        items: opts.comboItems.map((s) => ({ ItemName: s, ItemValue: s })),
+      }),
+      UseFirstRow: true,
+      UseEmptyRow: false,
+      EmptyRowName: "",
+    };
+  } else if (typeof opts.comboDataSourceName === "string") {
+    inner = {
+      ...makeInnerComboList({
+        dataSourceName: opts.comboDataSourceName,
+        title: opts.comboTitle,
+      }),
+      UseFirstRow: true,
+      UseEmptyRow: false,
+      EmptyRowName: "",
+    };
+  } else {
+    throw new Error(
+      `input-pair.materialize: inputCombo 입력은 inputOptions.comboItems 또는 inputOptions.comboDataSourceName 중 하나가 필요 (schema if/then 후검증)`,
+    );
+  }
+  return {
+    ...makeCombo({ name }),
+    Dialog: wrapDialog(inner),
+  };
+}
+
+function buildInputSearch(opts, name) {
+  if (
+    typeof opts.searchDataSourceName !== "string" ||
+    typeof opts.searchTitle !== "string"
+  ) {
+    throw new Error(
+      `input-pair.materialize: inputSearch 입력은 inputOptions.searchDataSourceName + searchTitle 필수 (schema if/then 후검증)`,
+    );
+  }
+  const useKw =
+    typeof opts.searchKeywordCkey === "string" &&
+    opts.searchKeywordCkey.length > 0;
+  return {
+    ...makeSearch({ name }),
+    Dialog: wrapDialog(
+      makeInnerSearchList({
+        dataSourceName: opts.searchDataSourceName,
+        title: opts.searchTitle,
+        subTitle: opts.searchSubTitle,
+        useKeywordSearch: useKw,
+        keywordSearchCkey: useKw ? opts.searchKeywordCkey : undefined,
+      }),
+    ),
+  };
+}
+
+function buildInputDate(opts, name) {
+  return {
+    ...makeInputDate({
+      name,
+      dateFormat: opts.dateFormat || "YYYY-MM-DD",
+    }),
+    Dialog: wrapDialog(
+      makeInnerCalendar({
+        calendarType: "dayCalendar",
+        selectType: opts.dateSelectType || "SingleDate",
+      }),
+    ),
+  };
+}
+
+function buildInput(opts, index, isCarded, ctx) {
+  const inputType = opts.inputType;
+  const name = opts.name || DEFAULT_NAME_BY_TYPE[inputType]?.[index];
+  let body;
+  switch (inputType) {
+    case "inputCombo":
+      body = buildInputCombo(opts, name);
+      break;
+    case "inputSearch":
+      body = buildInputSearch(opts, name);
+      break;
+    case "inputDate":
+      body = buildInputDate(opts, name);
+      break;
+    default:
+      throw new Error(
+        `input-pair.materialize: unsupported inputType '${inputType}' at index ${index} (allowed: inputCombo / inputSearch / inputDate)`,
+      );
+  }
+
+  const hasCaption =
+    typeof opts.caption === "string" && opts.caption.length > 0;
+  const placeholder =
+    typeof opts.placeholder === "string" ? opts.placeholder : "";
+
+  // border : carded → radius only / open → visible hairline.
+  const borderStyle = isCarded
+    ? border({ radius: 8 })
+    : border({ radius: 8, color: "border.strong" });
+
+  return {
+    ...body,
+    Id: generateId(ctx),
+    Caption: hasCaption ? opts.caption : "",
+    Placeholder: placeholder,
+    Width: { ...W_HALF },
+    Height: hasCaption ? { ...H_WITH_CAPTION } : { ...H_NO_CAPTION },
+    BorderStyle: borderStyle,
+    BgStyle: bg("surface"),
+    FontStyle: font({ size: 14, weight: "Regular", align: "flex-start" }),
+    CaptionStyle: { ...CAPTION_STYLE_FIXED },
+  };
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Public materialize
+// ─────────────────────────────────────────────────────────────────────────────
+
+export default function materialize(props, ctx) {
+  const { inputOptions, bgColor } = props;
+
+  if (!Array.isArray(inputOptions) || inputOptions.length !== 2) {
+    throw new Error(
+      `input-pair.materialize: inputOptions 는 정확히 2개의 객체 배열이어야 함`,
+    );
+  }
+
+  const ov = makeOverride(props.override, "input-pair");
+  const isCarded = typeof bgColor === "string" && bgColor.length > 0;
+  const columnGapPx = isCarded ? 8 : 16;
+
+  const left = ov.apply("left", buildInput(inputOptions[0] || {}, 0, isCarded, ctx));
+  const right = ov.apply("right", buildInput(inputOptions[1] || {}, 1, isCarded, ctx));
+
+  const wrapper = {
+    ...makeGroup({
+      name: "InputPair",
+      direction: "horizontal",
+      children: [left, right],
+    }),
+    Id: generateId(ctx),
+    DisplayStyle: wrapperDisplay(columnGapPx),
+  };
+
+  if (isCarded) {
+    wrapper.BgStyle = bg(bgColor);
+    wrapper.Padding = padding({ x: 10, y: 8 });
+    wrapper.Margin = margin({ y: 20 });
+  }
+
+  const root = ov.apply("root", wrapper);
+  ov.finalize(ANCHORS);
+  return root;
+}