@tipp/ui 2.3.21 → 2.3.23

package/dist/chunk-MIVH7X2Q.js

@@ -0,0 +1,245 @@
+import {
+  DynamicFormField
+} from "./chunk-G6UKOZPL.js";
+import {
+  DynamicFormProvider,
+  useDynamicForm
+} from "./chunk-4U6DFH7Z.js";
+import {
+  Form
+} from "./chunk-QDC3LFHS.js";
+import {
+  Typo
+} from "./chunk-PMJIFLDT.js";
+import {
+  __async
+} from "./chunk-CRTRMMJ7.js";
+
+// src/molecules/dynamic-form.tsx
+import { useMemo, useCallback, useEffect } from "react";
+import { useFormik } from "formik";
+import * as Yup from "yup";
+import { Box } from "@radix-ui/themes";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function scrollToFirstError(errors, _fields) {
+  const firstErrorFieldName = Object.keys(errors)[0];
+  if (!firstErrorFieldName) return;
+  let fieldElement = document.querySelector(`[name="${firstErrorFieldName}"]`);
+  if (!fieldElement) {
+    fieldElement = document.querySelector(
+      `[data-field-name="${firstErrorFieldName}"]`
+    );
+  }
+  if (!fieldElement) {
+    fieldElement = document.querySelector(
+      `[data-error-field="${firstErrorFieldName}"]`
+    );
+  }
+  if (fieldElement) {
+    fieldElement.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest"
+    });
+  }
+}
+function DynamicFormRoot({
+  fields,
+  initialValues = {},
+  onSubmit,
+  children,
+  readonly = false,
+  formStyle
+}) {
+  const validationSchema = useMemo(() => {
+    const schema = {};
+    fields.forEach((field) => {
+      if (field.validation) {
+        const validation = createYupValidation(field, field.validation);
+        if (validation) {
+          schema[field.name] = validation;
+        }
+      } else if (field.required) {
+        if (field.type === "choices") {
+          schema[field.name] = Yup.array().min(1, `${field.label}\uC744(\uB97C) \uD558\uB098 \uC774\uC0C1 \uC120\uD0DD\uD574\uC8FC\uC138\uC694`).required(`${field.label}\uC740(\uB294) \uD544\uC218\uC785\uB2C8\uB2E4`);
+        } else if (field.type === "yes_no") {
+          schema[field.name] = Yup.boolean().oneOf(
+            [true],
+            `${field.label}\uC5D0 \uB3D9\uC758\uD574\uC8FC\uC138\uC694`
+          );
+        } else {
+          schema[field.name] = Yup.string().required(
+            `${field.label}\uC740(\uB294) \uD544\uC218\uC785\uB2C8\uB2E4`
+          );
+        }
+      }
+    });
+    return Object.keys(schema).length > 0 ? Yup.object(schema) : void 0;
+  }, [fields]);
+  const handleSubmit = useCallback(
+    (values) => __async(null, null, function* () {
+      yield onSubmit(values);
+    }),
+    [onSubmit]
+  );
+  const formik = useFormik({
+    initialValues: fields.reduce((acc, field) => {
+      if (field.type === "choices") {
+        acc[field.name] = initialValues[field.name] || [];
+      } else if (field.type === "yes_no") {
+        acc[field.name] = initialValues[field.name] || false;
+      } else {
+        acc[field.name] = initialValues[field.name] || "";
+      }
+      return acc;
+    }, {}),
+    validationSchema,
+    validateOnBlur: true,
+    validateOnChange: true,
+    onSubmit: handleSubmit
+  });
+  useEffect(() => {
+    if (formik.submitCount > 0 && Object.keys(formik.errors).length > 0) {
+      const timeoutId = setTimeout(() => {
+        scrollToFirstError(formik.errors, fields);
+      }, 100);
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    }
+  }, [formik.submitCount, formik.errors, fields]);
+  return /* @__PURE__ */ jsx(
+    DynamicFormProvider,
+    {
+      fields,
+      formStyle,
+      formik,
+      readonly,
+      children
+    }
+  );
+}
+function DynamicFormFieldList({
+  fields: fieldsProp,
+  labelVariant
+}) {
+  const { formik, fields: fieldsFromContext, readonly } = useDynamicForm();
+  const fields = fieldsProp || fieldsFromContext;
+  return /* @__PURE__ */ jsx(Fragment, { children: fields.map((field) => {
+    const errorMessage = !readonly && formik.touched[field.name] && formik.errors[field.name] ? String(formik.errors[field.name]) : void 0;
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        "data-error-field": errorMessage ? field.name : void 0,
+        "data-field-name": field.name,
+        mb: "2",
+        children: /* @__PURE__ */ jsxs(
+          Form.FormItem,
+          {
+            errorMessage,
+            label: field.label,
+            labelVariant,
+            name: field.name,
+            required: field.required,
+            children: [
+              field.description && field.type !== "yes_no" ? /* @__PURE__ */ jsx(Typo, { variant: "caption", children: field.description }) : null,
+              /* @__PURE__ */ jsx(DynamicFormField, { field })
+            ]
+          }
+        )
+      },
+      field.name
+    );
+  }) });
+}
+var DynamicForm = {
+  Root: DynamicFormRoot,
+  FieldList: DynamicFormFieldList
+};
+function createYupValidation(field, validation) {
+  if (!validation) return void 0;
+  let schema;
+  if (field.type === "number") {
+    schema = Yup.number();
+  } else if (field.type === "email") {
+    schema = Yup.string().email(
+      validation.message || "\uC62C\uBC14\uB978 \uC774\uBA54\uC77C \uD615\uC2DD\uC774 \uC544\uB2D9\uB2C8\uB2E4"
+    );
+  } else if (field.type === "choices") {
+    schema = Yup.array();
+  } else if (field.type === "yes_no") {
+    schema = Yup.boolean();
+  } else {
+    schema = Yup.string();
+  }
+  if (validation.min !== void 0) {
+    if (field.type === "number") {
+      schema = schema.min(
+        validation.min,
+        validation.message || `\uCD5C\uC18C ${validation.min}\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4`
+      );
+    } else if (field.type === "choices") {
+      schema = schema.min(
+        validation.min,
+        validation.message || `\uCD5C\uC18C ${validation.min}\uAC1C \uC774\uC0C1 \uC120\uD0DD\uD574\uC8FC\uC138\uC694`
+      );
+    } else if (field.type === "yes_no") {
+    } else {
+      schema = schema.min(
+        validation.min,
+        validation.message || `\uCD5C\uC18C ${validation.min}\uC790 \uC774\uC0C1\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4`
+      );
+    }
+  }
+  if (validation.max !== void 0) {
+    if (field.type === "number") {
+      schema = schema.max(
+        validation.max,
+        validation.message || `\uCD5C\uB300 ${validation.max}\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4`
+      );
+    } else if (field.type === "choices") {
+      schema = schema.max(
+        validation.max,
+        validation.message || `\uCD5C\uB300 ${validation.max}\uAC1C\uAE4C\uC9C0 \uC120\uD0DD \uAC00\uB2A5\uD569\uB2C8\uB2E4`
+      );
+    } else if (field.type === "yes_no") {
+    } else {
+      schema = schema.max(
+        validation.max,
+        validation.message || `\uCD5C\uB300 ${validation.max}\uC790 \uC774\uD558\uC5EC\uC57C \uD569\uB2C8\uB2E4`
+      );
+    }
+  }
+  if (validation.pattern) {
+    if (field.type === "yes_no") {
+    } else {
+      schema = schema.matches(
+        new RegExp(validation.pattern),
+        validation.message || "\uC62C\uBC14\uB978 \uD615\uC2DD\uC774 \uC544\uB2D9\uB2C8\uB2E4"
+      );
+    }
+  }
+  if (field.required) {
+    if (field.type === "yes_no") {
+      schema = schema.oneOf(
+        [true],
+        validation.message || `${field.label}\uC5D0 \uB3D9\uC758\uD574\uC8FC\uC138\uC694`
+      );
+    } else if (field.type === "choices") {
+      schema = schema.min(
+        1,
+        validation.message || `${field.label}\uC744(\uB97C) \uD558\uB098 \uC774\uC0C1 \uC120\uD0DD\uD574\uC8FC\uC138\uC694`
+      );
+    } else {
+      schema = schema.required(
+        validation.message || `${field.label}\uC740(\uB294) \uD544\uC218\uC785\uB2C8\uB2E4`
+      );
+    }
+  }
+  return schema;
+}
+
+export {
+  DynamicForm,
+  createYupValidation
+};
+//# sourceMappingURL=chunk-MIVH7X2Q.js.map

package/dist/chunk-MIVH7X2Q.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/dynamic-form.tsx"],"sourcesContent":["import React, { useMemo, useCallback, useEffect } from 'react';\nimport { useFormik, type FormikProps } from 'formik';\nimport * as Yup from 'yup';\nimport { Box } from '@radix-ui/themes';\nimport { Typo } from '@/atoms/typo';\nimport {\n  DynamicFormProvider,\n  useDynamicForm,\n} from '@/context/dynamic-form-context';\nimport type {\n  DynamicFormFieldSchema,\n  ValidationRule,\n} from '@/types/dynamic-form-schema-generated';\nimport { Form } from './form/form';\nimport { DynamicFormField } from './dynamic-field';\n\nexport interface DynamicFormProps {\n  fields: DynamicFormFieldSchema[];\n  initialValues?: Record<string, unknown>;\n  onSubmit: (values: Record<string, unknown>) => void | Promise<void>;\n  children: React.ReactNode;\n  readonly?: boolean;\n  formStyle?: React.CSSProperties;\n}\n\n/**\n * 첫 번째 에러 필드로 스크롤하는 함수\n */\nfunction scrollToFirstError(\n  errors: Record<string, unknown>,\n  _fields: DynamicFormFieldSchema[]\n): void {\n  const firstErrorFieldName = Object.keys(errors)[0];\n  if (!firstErrorFieldName) return;\n\n  // 해당 필드의 DOM 요소를 찾기 (여러 선택자 시도)\n  let fieldElement = document.querySelector(`[name=\"${firstErrorFieldName}\"]`);\n\n  // input 요소를 찾지 못한 경우, 해당 필드의 컨테이너를 찾기\n  if (!fieldElement) {\n    fieldElement = document.querySelector(\n      `[data-field-name=\"${firstErrorFieldName}\"]`\n    );\n  }\n\n  // 여전히 찾지 못한 경우, FormItem의 에러 메시지 영역을 찾기\n  if (!fieldElement) {\n    fieldElement = document.querySelector(\n      `[data-error-field=\"${firstErrorFieldName}\"]`\n    );\n  }\n\n  if (fieldElement) {\n    fieldElement.scrollIntoView({\n      behavior: 'smooth',\n      block: 'nearest',\n    });\n  }\n}\n\nfunction DynamicFormRoot({\n  fields,\n  initialValues = {},\n  onSubmit,\n  children,\n  readonly = false,\n  formStyle,\n}: DynamicFormProps): React.ReactElement {\n  const validationSchema = useMemo(() => {\n    const schema: Record<string, Yup.Schema<unknown>> = {};\n    fields.forEach((field) => {\n      if (field.validation) {\n        const validation = createYupValidation(field, field.validation);\n        if (validation) {\n          schema[field.name] = validation;\n        }\n      } else if (field.required) {\n        // choices 타입은 배열 스키마로 처리\n        if (field.type === 'choices') {\n          schema[field.name] = Yup.array()\n            .min(1, `${field.label}을(를) 하나 이상 선택해주세요`)\n            .required(`${field.label}은(는) 필수입니다`);\n        } else if (field.type === 'yes_no') {\n          // yes_no 타입은 boolean 스키마로 처리\n          schema[field.name] = Yup.boolean().oneOf(\n            [true],\n            `${field.label}에 동의해주세요`\n          );\n        } else {\n          // choice, radio_cards, dropdown, short_text, long_text, number, email 타입은 문자열 스키마로 처리\n          schema[field.name] = Yup.string().required(\n            `${field.label}은(는) 필수입니다`\n          );\n        }\n      }\n    });\n    return Object.keys(schema).length > 0 ? Yup.object(schema) : undefined;\n  }, [fields]);\n\n  const handleSubmit = useCallback(\n    async (values: Record<string, unknown>) => {\n      await onSubmit(values);\n    },\n    [onSubmit]\n  );\n\n  const formik: FormikProps<Record<string, unknown>> = useFormik({\n    initialValues: fields.reduce<Record<string, unknown>>((acc, field) => {\n      if (field.type === 'choices') {\n        acc[field.name] = initialValues[field.name] || [];\n      } else if (field.type === 'yes_no') {\n        acc[field.name] = initialValues[field.name] || false;\n      } else {\n        acc[field.name] = initialValues[field.name] || '';\n      }\n      return acc;\n    }, {}),\n    validationSchema,\n    validateOnBlur: true,\n    validateOnChange: true,\n    onSubmit: handleSubmit,\n  });\n\n  // submit 시 validation 에러가 있으면 첫 번째 에러 필드로 스크롤\n  useEffect(() => {\n    if (formik.submitCount > 0 && Object.keys(formik.errors).length > 0) {\n      // 약간의 지연을 두어 DOM 업데이트 후 스크롤 실행\n      const timeoutId = setTimeout(() => {\n        scrollToFirstError(formik.errors, fields);\n      }, 100);\n\n      return () => {\n        clearTimeout(timeoutId);\n      };\n    }\n  }, [formik.submitCount, formik.errors, fields]);\n\n  return (\n    <DynamicFormProvider\n      fields={fields}\n      formStyle={formStyle}\n      formik={formik}\n      readonly={readonly}\n    >\n      {children}\n    </DynamicFormProvider>\n  );\n}\n\ninterface DynamicFormFieldListProps {\n  fields?: DynamicFormFieldSchema[];\n  labelVariant?: 'title' | 'body' | 'caption';\n}\nfunction DynamicFormFieldList({\n  fields: fieldsProp,\n  labelVariant,\n}: DynamicFormFieldListProps): React.ReactElement {\n  const { formik, fields: fieldsFromContext, readonly } = useDynamicForm();\n  const fields = fieldsProp || fieldsFromContext;\n\n  return (\n    <>\n      {fields.map((field) => {\n        const errorMessage =\n          !readonly && formik.touched[field.name] && formik.errors[field.name]\n            ? String(formik.errors[field.name])\n            : undefined;\n\n        return (\n          <Box\n            data-error-field={errorMessage ? field.name : undefined}\n            data-field-name={field.name}\n            key={field.name}\n            mb=\"2\"\n          >\n            <Form.FormItem\n              errorMessage={errorMessage}\n              label={field.label}\n              labelVariant={labelVariant}\n              name={field.name}\n              required={field.required}\n              \n            >\n              {field.description && field.type !== 'yes_no' ? (\n                <Typo variant=\"caption\">{field.description}</Typo>\n              ) : null}\n              <DynamicFormField field={field} />\n            </Form.FormItem>\n          </Box>\n        );\n      })}\n    </>\n  );\n}\n\nexport const DynamicForm = {\n  Root: DynamicFormRoot,\n  FieldList: DynamicFormFieldList,\n};\n\nexport function createYupValidation(\n  field: DynamicFormFieldSchema,\n  validation?: ValidationRule\n): Yup.Schema<unknown> | undefined {\n  if (!validation) return undefined;\n\n  let schema: Yup.Schema<unknown>;\n\n  // field.type을 기준으로 기본 스키마 생성\n  if (field.type === 'number') {\n    schema = Yup.number();\n  } else if (field.type === 'email') {\n    schema = Yup.string().email(\n      validation.message || '올바른 이메일 형식이 아닙니다'\n    );\n  } else if (field.type === 'choices') {\n    schema = Yup.array();\n  } else if (field.type === 'yes_no') {\n    schema = Yup.boolean();\n  } else {\n    // choice, dropdown, short_text, long_text 타입은 문자열 스키마로 처리\n    schema = Yup.string();\n  }\n\n  if (validation.min !== undefined) {\n    if (field.type === 'number') {\n      schema = (schema as Yup.NumberSchema).min(\n        validation.min,\n        validation.message || `최소 ${validation.min}이어야 합니다`\n      );\n    } else if (field.type === 'choices') {\n      schema = (schema as ReturnType<typeof Yup.array>).min(\n        validation.min,\n        validation.message || `최소 ${validation.min}개 이상 선택해주세요`\n      );\n    } else if (field.type === 'yes_no') {\n      // yes_no 타입은 boolean이므로 min/max 검증 불가\n      // 대신 required 검증만 적용\n    } else {\n      schema = (schema as Yup.StringSchema).min(\n        validation.min,\n        validation.message || `최소 ${validation.min}자 이상이어야 합니다`\n      );\n    }\n  }\n\n  if (validation.max !== undefined) {\n    if (field.type === 'number') {\n      schema = (schema as Yup.NumberSchema).max(\n        validation.max,\n        validation.message || `최대 ${validation.max}이어야 합니다`\n      );\n    } else if (field.type === 'choices') {\n      schema = (schema as ReturnType<typeof Yup.array>).max(\n        validation.max,\n        validation.message || `최대 ${validation.max}개까지 선택 가능합니다`\n      );\n    } else if (field.type === 'yes_no') {\n      // yes_no 타입은 boolean이므로 min/max 검증 불가\n      // 대신 required 검증만 적용\n    } else {\n      schema = (schema as Yup.StringSchema).max(\n        validation.max,\n        validation.message || `최대 ${validation.max}자 이하여야 합니다`\n      );\n    }\n  }\n\n  if (validation.pattern) {\n    if (field.type === 'yes_no') {\n      // yes_no 타입은 boolean이므로 pattern 검증 불가\n      // 대신 required 검증만 적용\n    } else {\n      schema = (schema as Yup.StringSchema).matches(\n        new RegExp(validation.pattern),\n        validation.message || '올바른 형식이 아닙니다'\n      );\n    }\n  }\n\n  // field.required가 true인 경우 required 검증 추가\n  if (field.required) {\n    if (field.type === 'yes_no') {\n      schema = (schema as Yup.BooleanSchema).oneOf(\n        [true],\n        validation.message || `${field.label}에 동의해주세요`\n      );\n    } else if (field.type === 'choices') {\n      schema = (schema as ReturnType<typeof Yup.array>).min(\n        1,\n        validation.message || `${field.label}을(를) 하나 이상 선택해주세요`\n      );\n    } else {\n      schema = (schema as Yup.StringSchema).required(\n        validation.message || `${field.label}은(는) 필수입니다`\n      );\n    }\n  }\n\n  return schema;\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-MPZJH3PI.js

@@ -0,0 +1,287 @@
+import {
+  useDynamicForm
+} from "./chunk-4U6DFH7Z.js";
+import {
+  TextArea
+} from "./chunk-5XYPLDI5.js";
+import {
+  TextField
+} from "./chunk-6NPTJBFE.js";
+import {
+  Select
+} from "./chunk-X2GMDZ7M.js";
+import {
+  RadioCards
+} from "./chunk-6IVCARWS.js";
+import {
+  RadioGroup
+} from "./chunk-6DJOIRMF.js";
+import {
+  Inset
+} from "./chunk-XQOL7UBI.js";
+import {
+  Grid
+} from "./chunk-EGEQY3KT.js";
+import {
+  CheckboxGroup
+} from "./chunk-W7X7KSJP.js";
+import {
+  Checkbox
+} from "./chunk-VYCYVN3L.js";
+import {
+  Typo
+} from "./chunk-PMJIFLDT.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CRTRMMJ7.js";
+
+// src/molecules/dynamic-field.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function isRecord(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function isFieldOption(value) {
+  if (!isRecord(value)) return false;
+  const label = value.label;
+  const optionValue = value.value;
+  return typeof label === "string" && (typeof optionValue === "string" || typeof optionValue === "number");
+}
+function isImageFieldOption(value) {
+  if (!isRecord(value)) return false;
+  if (!isFieldOption(value)) return false;
+  const imageSrc = value.imageSrc;
+  const alt = value.alt;
+  return typeof imageSrc === "string" && (alt === void 0 || typeof alt === "string");
+}
+function getStringProp(obj, key, fallback) {
+  if (!isRecord(obj)) return fallback;
+  const value = obj[key];
+  return typeof value === "string" ? value : fallback;
+}
+function getNumberProp(obj, key, fallback) {
+  if (!isRecord(obj)) return fallback;
+  const value = obj[key];
+  return typeof value === "number" ? value : fallback;
+}
+function getOptions(field) {
+  if (!isRecord(field)) return null;
+  const options = field.options;
+  if (!Array.isArray(options)) return null;
+  if (!options.every(isFieldOption)) return null;
+  return options;
+}
+function getImageOptions(field) {
+  if (!isRecord(field)) return null;
+  const options = field.options;
+  if (!Array.isArray(options)) return null;
+  if (!options.every(isImageFieldOption)) return null;
+  return options;
+}
+function DynamicFormField({
+  field
+}) {
+  const {
+    getFieldValue,
+    getFieldError,
+    getFieldTouched,
+    setFieldValue,
+    handleChange,
+    handleBlur,
+    readonly
+  } = useDynamicForm();
+  const name = field.name;
+  const value = getFieldValue(name);
+  const error = getFieldError(name);
+  const touched = getFieldTouched(name);
+  const hasError = Boolean(error && touched);
+  const commonProps = {
+    name,
+    value: String(value || ""),
+    onChange: readonly ? void 0 : handleChange,
+    onBlur: readonly ? void 0 : handleBlur,
+    error: hasError,
+    disabled: readonly
+  };
+  const selectedValue = typeof value === "string" || typeof value === "number" ? String(value) : "";
+  switch (field.type) {
+    case "short_text":
+      return /* @__PURE__ */ jsx(
+        TextField.Root,
+        __spreadProps(__spreadValues({}, commonProps), {
+          placeholder: field.placeholder,
+          type: "text"
+        })
+      );
+    case "email":
+      return /* @__PURE__ */ jsx(
+        TextField.Root,
+        __spreadProps(__spreadValues({}, commonProps), {
+          placeholder: field.placeholder,
+          type: "email"
+        })
+      );
+    case "number":
+      return /* @__PURE__ */ jsx(
+        TextField.Root,
+        __spreadProps(__spreadValues({}, commonProps), {
+          inputMode: "numeric",
+          pattern: "[0-9]*",
+          placeholder: field.placeholder,
+          type: "number"
+        })
+      );
+    case "long_text":
+      return /* @__PURE__ */ jsx(TextArea, __spreadProps(__spreadValues({ rows: 4 }, commonProps), { placeholder: field.placeholder }));
+    case "dropdown":
+      return /* @__PURE__ */ jsxs(
+        Select.Root,
+        {
+          disabled: readonly,
+          onValueChange: readonly ? void 0 : (newValue) => {
+            void setFieldValue(name, newValue);
+          },
+          value: selectedValue,
+          children: [
+            /* @__PURE__ */ jsx(
+              Select.Trigger,
+              {
+                placeholder: field.placeholder,
+                style: {
+                  alignSelf: "flex-start",
+                  width: "fit-content",
+                  minWidth: "180px",
+                  maxWidth: "100%"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(Select.Content, { children: field.options.map((option) => /* @__PURE__ */ jsx(Select.Item, { value: String(option.value), children: option.label }, option.value)) })
+          ]
+        }
+      );
+    case "choice":
+      return /* @__PURE__ */ jsx(
+        RadioGroup.Root,
+        {
+          disabled: readonly,
+          onValueChange: readonly ? void 0 : (newValue) => {
+            void setFieldValue(name, newValue);
+          },
+          orientation: field.orientation,
+          value: String(value || ""),
+          children: field.options.map((option) => /* @__PURE__ */ jsx(RadioGroup.Item, { value: String(option.value), children: option.label }, option.value))
+        }
+      );
+    case "radio_cards": {
+      const options = getOptions(field);
+      if (!options) return null;
+      return /* @__PURE__ */ jsx(
+        RadioCards.Root,
+        {
+          disabled: readonly,
+          onValueChange: readonly ? void 0 : (newValue) => {
+            void setFieldValue(name, newValue);
+          },
+          value: selectedValue,
+          children: options.map((option) => /* @__PURE__ */ jsx(RadioCards.Item, { value: String(option.value), children: /* @__PURE__ */ jsx(Typo, { children: option.label }) }, option.value))
+        }
+      );
+    }
+    case "choices":
+      return /* @__PURE__ */ jsx(
+        CheckboxGroup.Root,
+        {
+          disabled: readonly,
+          onValueChange: readonly ? void 0 : (newValue) => {
+            void setFieldValue(name, newValue);
+          },
+          orientation: field.orientation,
+          value: Array.isArray(value) ? value.map(String) : [],
+          children: field.options.map((option) => /* @__PURE__ */ jsx(CheckboxGroup.Item, { value: String(option.value), children: option.label }, option.value))
+        }
+      );
+    case "yes_no":
+      return /* @__PURE__ */ jsxs(Flex, { gap: "2", children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: Boolean(value),
+            disabled: readonly,
+            onCheckedChange: readonly ? void 0 : (checked) => {
+              void setFieldValue(name, checked);
+            }
+          }
+        ),
+        field.description ? /* @__PURE__ */ jsx(Typo, { color: "gray", variant: "caption", children: field.description }) : null
+      ] });
+    case "image_radio_card": {
+      const options = getImageOptions(field);
+      if (!options) return null;
+      const gridColumnsCount = Math.max(1, getNumberProp(field, "gridColumnsCount", 4));
+      const gridColumns = getStringProp(
+        field,
+        "gridColumns",
+        `repeat(${gridColumnsCount}, 1fr)`
+      );
+      const gridItemHeight = getStringProp(field, "gridItemHeight", "100px");
+      const gridRows = getStringProp(field, "gridRows", gridItemHeight);
+      const gridGap = getStringProp(field, "gridGap", "2");
+      const imageFitRaw = getStringProp(field, "imageFit", "cover");
+      const imageFit = imageFitRaw === "contain" ? "contain" : "cover";
+      const handleValueChange = (newValue) => {
+        if (readonly) return;
+        const selectedOption = options.find(
+          (option) => String(option.value) === newValue
+        );
+        if (!selectedOption) return;
+        void setFieldValue(name, selectedOption.value);
+      };
+      return /* @__PURE__ */ jsx(
+        RadioCards.Root,
+        {
+          disabled: readonly,
+          onValueChange: readonly ? void 0 : handleValueChange,
+          value: selectedValue,
+          children: /* @__PURE__ */ jsx(Grid, { columns: gridColumns, gap: gridGap, rows: gridRows, children: options.map((option) => {
+            const optionValue = String(option.value);
+            const altText = option.alt || option.label;
+            return /* @__PURE__ */ jsx(
+              RadioCards.Item,
+              {
+                style: {
+                  padding: 0
+                },
+                value: optionValue,
+                children: /* @__PURE__ */ jsx(Inset, { style: { width: "100%", height: "100%", padding: 0 }, children: /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    alt: altText,
+                    src: option.imageSrc,
+                    style: {
+                      width: "100%",
+                      height: "100%",
+                      display: "block",
+                      objectFit: imageFit,
+                      opacity: readonly ? 0.7 : 1
+                    }
+                  }
+                ) })
+              },
+              optionValue
+            );
+          }) })
+        }
+      );
+    }
+    default:
+      return null;
+  }
+}
+
+export {
+  DynamicFormField
+};
+//# sourceMappingURL=chunk-MPZJH3PI.js.map

package/dist/chunk-MPZJH3PI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/dynamic-field.tsx"],"sourcesContent":["\nimport { Flex } from '@/atoms/flex';\nimport { Typo } from '@/atoms/typo';\nimport { useDynamicForm } from '../context/dynamic-form-context';\nimport { TextField } from '../atoms/text-field';\nimport { TextArea } from '../atoms/text-area';\nimport { Select } from '../atoms/select';\nimport { CheckboxGroup } from '../atoms/check-box-group';\nimport { RadioGroup } from '../atoms/radio-group';\nimport { Checkbox } from '../atoms/check-box';\nimport { RadioCards } from '../atoms/radio-cards';\nimport { Grid } from '../atoms/grid';\nimport { Inset } from '../atoms/inset';\nimport type { DynamicFormFieldSchema } from '../types/dynamic-form-schema-generated';\n\ninterface FieldOption {\n  label: string;\n  value: string | number;\n}\n\ninterface ImageFieldOption extends FieldOption {\n  imageSrc: string;\n  alt?: string;\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return Boolean(value) && typeof value === 'object' && !Array.isArray(value);\n}\n\nfunction isFieldOption(value: unknown): value is FieldOption {\n  if (!isRecord(value)) return false;\n  const label = value.label;\n  const optionValue = value.value;\n  return (\n    typeof label === 'string' &&\n    (typeof optionValue === 'string' || typeof optionValue === 'number')\n  );\n}\n\nfunction isImageFieldOption(value: unknown): value is ImageFieldOption {\n  if (!isRecord(value)) return false;\n  if (!isFieldOption(value)) return false;\n  const imageSrc = value.imageSrc;\n  const alt = value.alt;\n  return (\n    typeof imageSrc === 'string' && (alt === undefined || typeof alt === 'string')\n  );\n}\n\nfunction getStringProp(obj: unknown, key: string, fallback: string): string {\n  if (!isRecord(obj)) return fallback;\n  const value = obj[key];\n  return typeof value === 'string' ? value : fallback;\n}\n\nfunction getNumberProp(obj: unknown, key: string, fallback: number): number {\n  if (!isRecord(obj)) return fallback;\n  const value = obj[key];\n  return typeof value === 'number' ? value : fallback;\n}\n\nfunction getOptions(field: unknown): FieldOption[] | null {\n  if (!isRecord(field)) return null;\n  const options = field.options;\n  if (!Array.isArray(options)) return null;\n  if (!options.every(isFieldOption)) return null;\n  return options;\n}\n\nfunction getImageOptions(field: unknown): ImageFieldOption[] | null {\n  if (!isRecord(field)) return null;\n  const options = field.options;\n  if (!Array.isArray(options)) return null;\n  if (!options.every(isImageFieldOption)) return null;\n  return options;\n}\n\ninterface DynamicFormFieldRendererProps {\n  field: DynamicFormFieldSchema;\n}\n\nexport function DynamicFormField({\n  field,\n}: DynamicFormFieldRendererProps): React.ReactElement | null {\n  const {\n    getFieldValue,\n    getFieldError,\n    getFieldTouched,\n    setFieldValue,\n    handleChange,\n    handleBlur,\n    readonly,\n  } = useDynamicForm();\n  const name = field.name;\n\n  const value = getFieldValue(name);\n  const error = getFieldError(name);\n  const touched = getFieldTouched(name);\n  const hasError = Boolean(error && touched);\n\n  const commonProps = {\n    name,\n    value: String(value || ''),\n    onChange: readonly ? undefined : handleChange,\n    onBlur: readonly ? undefined : handleBlur,\n    error: hasError,\n    disabled: readonly,\n  };\n\n  const selectedValue: string =\n    typeof value === 'string' || typeof value === 'number' ? String(value) : '';\n\n  switch (field.type) {\n    case 'short_text':\n      return (\n        <TextField.Root\n          {...commonProps}\n          placeholder={field.placeholder}\n          type=\"text\"\n        />\n      );\n    case 'email':\n      return (\n        <TextField.Root\n          {...commonProps}\n          placeholder={field.placeholder}\n          type=\"email\"\n        />\n      );\n    case 'number':\n      return (\n        <TextField.Root\n          {...commonProps}\n          inputMode=\"numeric\"\n          pattern=\"[0-9]*\"\n          placeholder={field.placeholder}\n          type=\"number\"\n        />\n      );\n    case 'long_text':\n      return <TextArea rows={4} {...commonProps} placeholder={field.placeholder}  />;\n\n    case 'dropdown':\n      return (\n        <Select.Root\n          disabled={readonly}\n          onValueChange={readonly ? undefined : (newValue: string) => {\n            void setFieldValue(name, newValue);\n          }}\n          value={selectedValue}\n        >\n          <Select.Trigger\n            placeholder={field.placeholder}\n            style={{\n              alignSelf: 'flex-start',\n              width: 'fit-content',\n              minWidth: '180px',\n              maxWidth: '100%',\n            }}\n          />\n          <Select.Content>\n            {field.options.map((option) => (\n              <Select.Item key={option.value} value={String(option.value)}>\n                {option.label}\n              </Select.Item>\n            ))}\n          </Select.Content>\n        </Select.Root>\n      );\n\n    case 'choice':\n      return (\n        <RadioGroup.Root\n          disabled={readonly}\n          onValueChange={readonly ? undefined : (newValue: string) => {\n            void setFieldValue(name, newValue);\n          }}\n          orientation={field.orientation}\n          value={String(value || '')}\n        >\n          {field.options.map((option) => (\n            <RadioGroup.Item key={option.value} value={String(option.value)}>\n              {option.label}\n            </RadioGroup.Item>\n          ))}\n        </RadioGroup.Root>\n      );\n\n    case 'radio_cards':\n      {\n        const options = getOptions(field);\n        if (!options) return null;\n\n        return (\n          <RadioCards.Root\n            disabled={readonly}\n            onValueChange={\n              readonly\n                ? undefined\n                : (newValue: string) => {\n                    void setFieldValue(name, newValue);\n                  }\n            }\n            value={selectedValue}\n          >\n            {options.map((option) => (\n              <RadioCards.Item key={option.value} value={String(option.value)}>\n                <Typo>{option.label}</Typo>\n              </RadioCards.Item>\n            ))}\n          </RadioCards.Root>\n        );\n      }\n\n    case 'choices':\n      return (\n        <CheckboxGroup.Root\n          disabled={readonly}\n          onValueChange={readonly ? undefined : (newValue: string[]) => {\n            void setFieldValue(name, newValue);\n          }}\n          orientation={field.orientation}\n          value={Array.isArray(value) ? value.map(String) : []}\n        >\n          {field.options.map((option) => (\n            <CheckboxGroup.Item key={option.value} value={String(option.value)}>\n              {option.label}\n            </CheckboxGroup.Item>\n          ))}\n        </CheckboxGroup.Root>\n      );\n\n    case 'yes_no':\n      return (\n        <Flex gap=\"2\">\n          <Checkbox\n            checked={Boolean(value)}\n            disabled={readonly}\n            onCheckedChange={readonly ? undefined : (checked: boolean) => {\n              void setFieldValue(name, checked);\n            }}\n          />\n          {field.description ? (\n            <Typo color=\"gray\" variant=\"caption\">\n              {field.description}\n            </Typo>\n          ) : null}\n        </Flex>\n      );\n\n    case 'image_radio_card': {\n      const options = getImageOptions(field);\n      if (!options) return null;\n\n      const gridColumnsCount = Math.max(1, getNumberProp(field, 'gridColumnsCount', 4));\n      const gridColumns = getStringProp(\n        field,\n        'gridColumns',\n        `repeat(${gridColumnsCount}, 1fr)`\n      );\n\n      const gridItemHeight = getStringProp(field, 'gridItemHeight', '100px');\n      const gridRows = getStringProp(field, 'gridRows', gridItemHeight);\n      const gridGap = getStringProp(field, 'gridGap', '2');\n      const imageFitRaw = getStringProp(field, 'imageFit', 'cover');\n      const imageFit: 'cover' | 'contain' =\n        imageFitRaw === 'contain' ? 'contain' : 'cover';\n\n      const handleValueChange = (newValue: string): void => {\n        if (readonly) return;\n        const selectedOption = options.find(\n          (option) => String(option.value) === newValue\n        );\n        if (!selectedOption) return;\n        void setFieldValue(name, selectedOption.value);\n      };\n\n      return (\n        <RadioCards.Root\n          disabled={readonly}\n          onValueChange={readonly ? undefined : handleValueChange}\n          value={selectedValue}\n        >\n          <Grid columns={gridColumns} gap={gridGap} rows={gridRows}>\n            {options.map((option) => {\n              const optionValue = String(option.value);\n              const altText: string = option.alt || option.label;\n\n              return (\n                <RadioCards.Item\n                  key={optionValue}\n                  style={{\n                    padding: 0,\n                  }}\n                  value={optionValue}\n                >\n                  <Inset style={{ width: '100%', height: '100%', padding: 0 }}>\n                    <img\n                      alt={altText}\n                      src={option.imageSrc}\n                      style={{\n                        width: '100%',\n                        height: '100%',\n                        display: 'block',\n                        objectFit: imageFit,\n                        opacity: readonly ? 0.7 : 1,\n                      }}\n                    />\n                  </Inset>\n                </RadioCards.Item>\n              );\n            })}\n          </Grid>\n        </RadioCards.Root>\n      );\n    }\n\n    default:\n      return null;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-MQ4ZZJXV.js

@@ -0,0 +1,51 @@
+import {
+  getCalloutIconComponent
+} from "./chunk-SFBPPATA.js";
+import {
+  List
+} from "./chunk-WV2HN6H4.js";
+import {
+  Callout
+} from "./chunk-B6XJN6EC.js";
+import {
+  Box
+} from "./chunk-4Y5BEXVN.js";
+import {
+  Typo
+} from "./chunk-PMJIFLDT.js";
+
+// src/molecules/description-json-render.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DescriptionJsonRender(props) {
+  const { value } = props;
+  return /* @__PURE__ */ jsx(Fragment, { children: value.values.map((block, index) => {
+    if (block.type === "bullet-list") {
+      return (
+        // eslint-disable-next-line react/no-array-index-key -- 블록 타입과 인덱스를 키로 사용
+        /* @__PURE__ */ jsx(Box, { mb: "2", pl: "4", children: /* @__PURE__ */ jsx(List.Root, { preSpace: "small", children: block.value.map((v, i) => (
+          // eslint-disable-next-line react/no-array-index-key -- 블록 타입과 인덱스를 키로 사용
+          /* @__PURE__ */ jsx(List.Item, { children: v }, `${index}-${i}`)
+        )) }) }, `${block.type}-${index}`)
+      );
+    }
+    if (block.type === "callout") {
+      const Icon = getCalloutIconComponent(block.icon);
+      return (
+        // eslint-disable-next-line react/no-array-index-key -- 블록 타입과 인덱스를 키로 사용
+        /* @__PURE__ */ jsx(Box, { mb: "2", children: /* @__PURE__ */ jsxs(Callout.Root, { children: [
+          /* @__PURE__ */ jsx(Callout.Icon, { children: /* @__PURE__ */ jsx(Icon, {}) }),
+          /* @__PURE__ */ jsx(Callout.Text, { children: block.value })
+        ] }) }, `${block.type}-${index}`)
+      );
+    }
+    return (
+      // eslint-disable-next-line react/no-array-index-key -- 블록 타입과 인덱스를 키로 사용
+      /* @__PURE__ */ jsx(Typo, { mb: "2", weight: "regular", children: block.value }, `${block.type}-${index}`)
+    );
+  }) });
+}
+
+export {
+  DescriptionJsonRender
+};
+//# sourceMappingURL=chunk-MQ4ZZJXV.js.map

package/dist/chunk-MQ4ZZJXV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/description-json-render.tsx"],"sourcesContent":["import React from 'react';\nimport { Box } from '@/atoms/box';\nimport { Callout } from '@/atoms/call-out';\nimport { List } from '@/atoms/list';\nimport { Typo } from '@/atoms/typo';\nimport { getCalloutIconComponent } from '@/utils/getCalloutIconComponent';\n\nexport type DescriptionBlockType = 'callout' | 'typo' | 'bullet-list';\n\nexport interface DescriptionCalloutBlock {\n  type: 'callout';\n  icon: string;\n  value: string;\n}\n\nexport interface DescriptionTypoBlock {\n  type: 'typo';\n  value: string;\n}\n\nexport interface DescriptionBulletListBlock {\n  type: 'bullet-list';\n  value: string[];\n}\n\nexport type DescriptionBlock =\n  | DescriptionCalloutBlock\n  | DescriptionTypoBlock\n  | DescriptionBulletListBlock;\n\nexport interface Description {\n  version: number;\n  values: DescriptionBlock[];\n}\n\nexport interface DescriptionJsonRenderProps {\n  value: Description;\n}\n\nexport function DescriptionJsonRender(\n  props: DescriptionJsonRenderProps\n): React.ReactElement {\n  const { value } = props;\n  return (\n    <>\n      {value.values.map((block, index) => {\n        if (block.type === 'bullet-list') {\n          return (\n            // eslint-disable-next-line react/no-array-index-key -- 블록 타입과 인덱스를 키로 사용\n            <Box key={`${block.type}-${index}`} mb=\"2\" pl=\"4\">\n              <List.Root preSpace=\"small\">\n                {block.value.map((v, i) => (\n                  // eslint-disable-next-line react/no-array-index-key -- 블록 타입과 인덱스를 키로 사용\n                  <List.Item key={`${index}-${i}`}>{v}</List.Item>\n                ))}\n              </List.Root>\n            </Box>\n          );\n        }\n\n        if (block.type === 'callout') {\n          const Icon = getCalloutIconComponent(block.icon);\n          return (\n            // eslint-disable-next-line react/no-array-index-key -- 블록 타입과 인덱스를 키로 사용\n            <Box key={`${block.type}-${index}`} mb=\"2\">\n              <Callout.Root>\n                <Callout.Icon>\n                  <Icon />\n                </Callout.Icon>\n                <Callout.Text>{block.value}</Callout.Text>\n              </Callout.Root>\n            </Box>\n          );\n        }\n\n        return (\n          // eslint-disable-next-line react/no-array-index-key -- 블록 타입과 인덱스를 키로 사용\n          <Typo key={`${block.type}-${index}`} mb=\"2\" weight=\"regular\">\n            {block.value}\n          </Typo>\n        );\n      })}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA4CI,mBASc,KAYJ,YArBV;AALG,SAAS,sBACd,OACoB;AACpB,QAAM,EAAE,MAAM,IAAI;AAClB,SACE,gCACG,gBAAM,OAAO,IAAI,CAAC,OAAO,UAAU;AAClC,QAAI,MAAM,SAAS,eAAe;AAChC;AAAA;AAAA,QAEE,oBAAC,OAAmC,IAAG,KAAI,IAAG,KAC5C,8BAAC,KAAK,MAAL,EAAU,UAAS,SACjB,gBAAM,MAAM,IAAI,CAAC,GAAG;AAAA;AAAA,UAEnB,oBAAC,KAAK,MAAL,EAAiC,eAAlB,GAAG,KAAK,IAAI,CAAC,EAAO;AAAA,SACrC,GACH,KANQ,GAAG,MAAM,IAAI,IAAI,KAAK,EAOhC;AAAA;AAAA,IAEJ;AAEA,QAAI,MAAM,SAAS,WAAW;AAC5B,YAAM,OAAO,wBAAwB,MAAM,IAAI;AAC/C;AAAA;AAAA,QAEE,oBAAC,OAAmC,IAAG,KACrC,+BAAC,QAAQ,MAAR,EACC;AAAA,8BAAC,QAAQ,MAAR,EACC,8BAAC,QAAK,GACR;AAAA,UACA,oBAAC,QAAQ,MAAR,EAAc,gBAAM,OAAM;AAAA,WAC7B,KANQ,GAAG,MAAM,IAAI,IAAI,KAAK,EAOhC;AAAA;AAAA,IAEJ;AAEA;AAAA;AAAA,MAEE,oBAAC,QAAoC,IAAG,KAAI,QAAO,WAChD,gBAAM,SADE,GAAG,MAAM,IAAI,IAAI,KAAK,EAEjC;AAAA;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}