@tipp/ui 2.3.20 → 2.3.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/app/index.cjs +5 -2
- package/dist/app/index.cjs.map +1 -1
- package/dist/app/index.js +7 -7
- package/dist/app/platform/coach-question-list.cjs +5 -2
- package/dist/app/platform/coach-question-list.cjs.map +1 -1
- package/dist/app/platform/coach-question-list.js +1 -1
- package/dist/app/platform/contents-card.cjs +5 -2
- package/dist/app/platform/contents-card.cjs.map +1 -1
- package/dist/app/platform/contents-card.js +1 -1
- package/dist/app/platform/edit-coaching-time.cjs +5 -2
- package/dist/app/platform/edit-coaching-time.cjs.map +1 -1
- package/dist/app/platform/edit-coaching-time.js +5 -5
- package/dist/app/platform/edit-service-type.cjs +5 -2
- package/dist/app/platform/edit-service-type.cjs.map +1 -1
- package/dist/app/platform/edit-service-type.js +4 -4
- package/dist/app/platform/goal-manage-card-edit.cjs +5 -2
- package/dist/app/platform/goal-manage-card-edit.cjs.map +1 -1
- package/dist/app/platform/goal-manage-card-edit.js +5 -5
- package/dist/app/platform/goal-manage-card-read.cjs +5 -2
- package/dist/app/platform/goal-manage-card-read.cjs.map +1 -1
- package/dist/app/platform/goal-manage-card-read.js +1 -1
- package/dist/app/platform/on-offline-radio-card.cjs +5 -2
- package/dist/app/platform/on-offline-radio-card.cjs.map +1 -1
- package/dist/app/platform/on-offline-radio-card.js +4 -4
- package/dist/app/platform/report-card.cjs +5 -2
- package/dist/app/platform/report-card.cjs.map +1 -1
- package/dist/app/platform/report-card.js +1 -1
- package/dist/app/platform/reservation-card.cjs +5 -2
- package/dist/app/platform/reservation-card.cjs.map +1 -1
- package/dist/app/platform/reservation-card.js +4 -4
- package/dist/app/platform/session-card.cjs +5 -2
- package/dist/app/platform/session-card.cjs.map +1 -1
- package/dist/app/platform/session-card.js +6 -6
- package/dist/app/platform/session-review-simple-read.cjs +5 -2
- package/dist/app/platform/session-review-simple-read.cjs.map +1 -1
- package/dist/app/platform/session-review-simple-read.js +1 -1
- package/dist/app/platform/userInfos/coaching-customer-info/index.cjs +5 -2
- package/dist/app/platform/userInfos/coaching-customer-info/index.cjs.map +1 -1
- package/dist/app/platform/userInfos/coaching-customer-info/index.js +1 -1
- package/dist/app/platform/userInfos/coaching-customer-info/large.cjs +5 -2
- package/dist/app/platform/userInfos/coaching-customer-info/large.cjs.map +1 -1
- package/dist/app/platform/userInfos/coaching-customer-info/large.js +1 -1
- package/dist/app/platform/userInfos/coaching-customer-info/medium.cjs +5 -2
- package/dist/app/platform/userInfos/coaching-customer-info/medium.cjs.map +1 -1
- package/dist/app/platform/userInfos/coaching-customer-info/medium.js +1 -1
- package/dist/app/platform/userInfos/coaching-customer-info/small.cjs +5 -2
- package/dist/app/platform/userInfos/coaching-customer-info/small.cjs.map +1 -1
- package/dist/app/platform/userInfos/coaching-customer-info/small.js +1 -1
- package/dist/app/platform/userInfos/session-user-info-detail.cjs +5 -2
- package/dist/app/platform/userInfos/session-user-info-detail.cjs.map +1 -1
- package/dist/app/platform/userInfos/session-user-info-detail.js +1 -1
- package/dist/app/platform/userInfos/utils.cjs +5 -2
- package/dist/app/platform/userInfos/utils.cjs.map +1 -1
- package/dist/app/platform/userInfos/utils.js +1 -1
- package/dist/atoms/index.cjs +5 -2
- package/dist/atoms/index.cjs.map +1 -1
- package/dist/atoms/index.js +1 -1
- package/dist/chunk-3C6HB5HA.js +144 -0
- package/dist/chunk-3C6HB5HA.js.map +1 -0
- package/dist/chunk-3CJZYFG3.js +174 -0
- package/dist/chunk-3CJZYFG3.js.map +1 -0
- package/dist/chunk-4U6DFH7Z.js +50 -0
- package/dist/chunk-4U6DFH7Z.js.map +1 -0
- package/dist/chunk-5IIGHOLB.js +196 -0
- package/dist/chunk-5IIGHOLB.js.map +1 -0
- package/dist/chunk-7TOQOZH7.js +245 -0
- package/dist/chunk-7TOQOZH7.js.map +1 -0
- package/dist/chunk-7ZH2GXUS.js +174 -0
- package/dist/chunk-7ZH2GXUS.js.map +1 -0
- package/dist/chunk-AC6MUU6D.js +146 -0
- package/dist/chunk-AC6MUU6D.js.map +1 -0
- package/dist/chunk-AGTBJUYD.js +50 -0
- package/dist/chunk-AGTBJUYD.js.map +1 -0
- package/dist/chunk-BSRPUECS.js +144 -0
- package/dist/chunk-BSRPUECS.js.map +1 -0
- package/dist/chunk-C24L6Z2K.js +69 -0
- package/dist/chunk-C24L6Z2K.js.map +1 -0
- package/dist/chunk-CAYZTABQ.js +144 -0
- package/dist/chunk-CAYZTABQ.js.map +1 -0
- package/dist/chunk-CKQYG7TZ.js +245 -0
- package/dist/chunk-CKQYG7TZ.js.map +1 -0
- package/dist/chunk-CLLBSWGX.js +145 -0
- package/dist/chunk-CLLBSWGX.js.map +1 -0
- package/dist/chunk-CNJT7KEY.js +218 -0
- package/dist/chunk-CNJT7KEY.js.map +1 -0
- package/dist/chunk-DNIPGDRU.js +145 -0
- package/dist/chunk-DNIPGDRU.js.map +1 -0
- package/dist/chunk-DPPRU4D3.js +174 -0
- package/dist/chunk-DPPRU4D3.js.map +1 -0
- package/dist/chunk-DZ6LWD2X.js +174 -0
- package/dist/chunk-DZ6LWD2X.js.map +1 -0
- package/dist/chunk-DZCLAKSB.js +218 -0
- package/dist/chunk-DZCLAKSB.js.map +1 -0
- package/dist/chunk-EDJIZYNL.js +89 -0
- package/dist/chunk-EDJIZYNL.js.map +1 -0
- package/dist/chunk-EE4HLQGV.js +145 -0
- package/dist/chunk-EE4HLQGV.js.map +1 -0
- package/dist/chunk-GJ4GPOIC.js +144 -0
- package/dist/chunk-GJ4GPOIC.js.map +1 -0
- package/dist/chunk-GLZ66EYJ.js +146 -0
- package/dist/chunk-GLZ66EYJ.js.map +1 -0
- package/dist/chunk-H7IE4ZJG.js +174 -0
- package/dist/chunk-H7IE4ZJG.js.map +1 -0
- package/dist/chunk-I7E2IWC4.js +149 -0
- package/dist/chunk-I7E2IWC4.js.map +1 -0
- package/dist/chunk-IDY6K633.js +145 -0
- package/dist/chunk-IDY6K633.js.map +1 -0
- package/dist/chunk-IKJLNJ64.js +145 -0
- package/dist/chunk-IKJLNJ64.js.map +1 -0
- package/dist/chunk-IW7G7LMH.js +245 -0
- package/dist/chunk-IW7G7LMH.js.map +1 -0
- package/dist/chunk-JFM62CXW.js +50 -0
- package/dist/chunk-JFM62CXW.js.map +1 -0
- package/dist/chunk-KC6AEXYR.js +174 -0
- package/dist/chunk-KC6AEXYR.js.map +1 -0
- package/dist/chunk-KOMV6H3L.js +144 -0
- package/dist/chunk-KOMV6H3L.js.map +1 -0
- package/dist/chunk-KVO5ZNRN.js +50 -0
- package/dist/chunk-KVO5ZNRN.js.map +1 -0
- package/dist/chunk-KZVNK5NO.js +145 -0
- package/dist/chunk-KZVNK5NO.js.map +1 -0
- package/dist/chunk-L7ATTNZ2.js +174 -0
- package/dist/chunk-L7ATTNZ2.js.map +1 -0
- package/dist/chunk-LTJELIXX.js +149 -0
- package/dist/chunk-LTJELIXX.js.map +1 -0
- package/dist/chunk-LWVP3RG6.js +212 -0
- package/dist/chunk-LWVP3RG6.js.map +1 -0
- package/dist/chunk-MG3MDWHJ.js +245 -0
- package/dist/chunk-MG3MDWHJ.js.map +1 -0
- package/dist/chunk-MQXF7JLT.js +145 -0
- package/dist/chunk-MQXF7JLT.js.map +1 -0
- package/dist/chunk-N5B7ANSJ.js +145 -0
- package/dist/chunk-N5B7ANSJ.js.map +1 -0
- package/dist/chunk-OSEENHZJ.js +50 -0
- package/dist/chunk-OSEENHZJ.js.map +1 -0
- package/dist/chunk-P4HTQBD6.js +245 -0
- package/dist/chunk-P4HTQBD6.js.map +1 -0
- package/dist/chunk-P74G3XSY.js +50 -0
- package/dist/chunk-P74G3XSY.js.map +1 -0
- package/dist/chunk-PTYFKWCC.js +145 -0
- package/dist/chunk-PTYFKWCC.js.map +1 -0
- package/dist/chunk-PYQQZYJL.js +145 -0
- package/dist/chunk-PYQQZYJL.js.map +1 -0
- package/dist/chunk-Q267B6E6.js +146 -0
- package/dist/chunk-Q267B6E6.js.map +1 -0
- package/dist/chunk-QDC3LFHS.js +149 -0
- package/dist/chunk-QDC3LFHS.js.map +1 -0
- package/dist/chunk-RCTE4E7R.js +144 -0
- package/dist/chunk-RCTE4E7R.js.map +1 -0
- package/dist/chunk-S5M6VXKE.js +144 -0
- package/dist/chunk-S5M6VXKE.js.map +1 -0
- package/dist/chunk-SB2VNB4J.js +145 -0
- package/dist/chunk-SB2VNB4J.js.map +1 -0
- package/dist/chunk-SJ7MGKPR.js +245 -0
- package/dist/chunk-SJ7MGKPR.js.map +1 -0
- package/dist/chunk-SM22LXE7.js +145 -0
- package/dist/chunk-SM22LXE7.js.map +1 -0
- package/dist/chunk-SP4QJ7QT.js +69 -0
- package/dist/chunk-SP4QJ7QT.js.map +1 -0
- package/dist/chunk-VGHBEX6O.js +145 -0
- package/dist/chunk-VGHBEX6O.js.map +1 -0
- package/dist/chunk-VJ7AGB7Y.js +245 -0
- package/dist/chunk-VJ7AGB7Y.js.map +1 -0
- package/dist/chunk-VNJ3VOSY.js +50 -0
- package/dist/chunk-VNJ3VOSY.js.map +1 -0
- package/dist/chunk-WZLD5ZHV.js +245 -0
- package/dist/chunk-WZLD5ZHV.js.map +1 -0
- package/dist/chunk-Z4NLUDDL.js +145 -0
- package/dist/chunk-Z4NLUDDL.js.map +1 -0
- package/dist/chunk-ZOMXQCLY.js +245 -0
- package/dist/chunk-ZOMXQCLY.js.map +1 -0
- package/dist/chunk-ZVWUCJMB.js +146 -0
- package/dist/chunk-ZVWUCJMB.js.map +1 -0
- package/dist/context/dynamic-form-context.cjs +5 -2
- package/dist/context/dynamic-form-context.cjs.map +1 -1
- package/dist/context/dynamic-form-context.js +2 -2
- package/dist/context/index.cjs +5 -2
- package/dist/context/index.cjs.map +1 -1
- package/dist/context/index.js +2 -2
- package/dist/index.cjs +44 -14
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +7 -7
- package/dist/molecules/dynamic-field.cjs +5 -2
- package/dist/molecules/dynamic-field.cjs.map +1 -1
- package/dist/molecules/dynamic-field.js +3 -3
- package/dist/molecules/dynamic-form.cjs +44 -14
- package/dist/molecules/dynamic-form.cjs.map +1 -1
- package/dist/molecules/dynamic-form.js +4 -4
- package/dist/molecules/form/form.cjs +5 -2
- package/dist/molecules/form/form.cjs.map +1 -1
- package/dist/molecules/form/form.js +1 -1
- package/dist/molecules/form/index.cjs +5 -2
- package/dist/molecules/form/index.cjs.map +1 -1
- package/dist/molecules/form/index.js +1 -1
- package/dist/molecules/index.cjs +44 -14
- package/dist/molecules/index.cjs.map +1 -1
- package/dist/molecules/index.js +4 -4
- package/package.json +1 -1
- package/src/molecules/dynamic-form.tsx +44 -15
- package/src/molecules/form/form.tsx +10 -2
|
@@ -0,0 +1 @@
|
|
|
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, 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 {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":[]}
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Heading
|
|
3
|
+
} from "./chunk-BESTU2AY.js";
|
|
4
|
+
import {
|
|
5
|
+
Typo
|
|
6
|
+
} from "./chunk-PMJIFLDT.js";
|
|
7
|
+
import {
|
|
8
|
+
__objRest,
|
|
9
|
+
__spreadProps,
|
|
10
|
+
__spreadValues
|
|
11
|
+
} from "./chunk-CRTRMMJ7.js";
|
|
12
|
+
|
|
13
|
+
// src/molecules/form/form.tsx
|
|
14
|
+
import * as RadixForm from "@radix-ui/react-form";
|
|
15
|
+
import { createContext, forwardRef, useContext, useMemo } from "react";
|
|
16
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
17
|
+
var Root2 = forwardRef(
|
|
18
|
+
(_a, ref) => {
|
|
19
|
+
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
20
|
+
return /* @__PURE__ */ jsx(
|
|
21
|
+
RadixForm.Root,
|
|
22
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
23
|
+
className: `FormRoot ${className || ""}`,
|
|
24
|
+
ref,
|
|
25
|
+
children
|
|
26
|
+
})
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
);
|
|
30
|
+
Root2.displayName = "FORM_ROOT";
|
|
31
|
+
var FieldContext = createContext({
|
|
32
|
+
name: ""
|
|
33
|
+
});
|
|
34
|
+
var Field2 = forwardRef(
|
|
35
|
+
(_a, ref) => {
|
|
36
|
+
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
37
|
+
return /* @__PURE__ */ jsx(
|
|
38
|
+
RadixForm.Field,
|
|
39
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
40
|
+
className: `FormField ${className || ""}`,
|
|
41
|
+
ref,
|
|
42
|
+
children: /* @__PURE__ */ jsx(FieldContext.Provider, { value: rest, children })
|
|
43
|
+
})
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
);
|
|
47
|
+
Field2.displayName = "FORM_FIELD";
|
|
48
|
+
function HeadingLabel(props) {
|
|
49
|
+
return /* @__PURE__ */ jsx(Heading, __spreadProps(__spreadValues({ variant: "heading5" }, props), { children: props.children }));
|
|
50
|
+
}
|
|
51
|
+
function CaptionLabel(props) {
|
|
52
|
+
return /* @__PURE__ */ jsx(Typo, __spreadProps(__spreadValues({ color: "gray", variant: "caption", weight: "bold" }, props), { children: props.children }));
|
|
53
|
+
}
|
|
54
|
+
var Label2 = forwardRef(
|
|
55
|
+
(_a, ref) => {
|
|
56
|
+
var _b = _a, { children, className, variant } = _b, rest = __objRest(_b, ["children", "className", "variant"]);
|
|
57
|
+
const Comp = useMemo(() => {
|
|
58
|
+
switch (variant) {
|
|
59
|
+
case "title":
|
|
60
|
+
return HeadingLabel;
|
|
61
|
+
case "caption":
|
|
62
|
+
return CaptionLabel;
|
|
63
|
+
case "body":
|
|
64
|
+
default:
|
|
65
|
+
return Typo;
|
|
66
|
+
}
|
|
67
|
+
}, [variant]);
|
|
68
|
+
const fieldProps = useContext(FieldContext);
|
|
69
|
+
return /* @__PURE__ */ jsx(
|
|
70
|
+
RadixForm.Label,
|
|
71
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
72
|
+
asChild: true,
|
|
73
|
+
className: `FormLabel ${className || ""}`,
|
|
74
|
+
ref,
|
|
75
|
+
children: /* @__PURE__ */ jsxs(Comp, { children: [
|
|
76
|
+
children,
|
|
77
|
+
fieldProps.required ? /* @__PURE__ */ jsx(Typo, { as: "span", color: "tomato", children: ` *` }) : null
|
|
78
|
+
] })
|
|
79
|
+
})
|
|
80
|
+
);
|
|
81
|
+
}
|
|
82
|
+
);
|
|
83
|
+
Label2.displayName = "FORM_Label";
|
|
84
|
+
var Message2 = forwardRef(
|
|
85
|
+
(_a, ref) => {
|
|
86
|
+
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
87
|
+
return /* @__PURE__ */ jsx(
|
|
88
|
+
RadixForm.Message,
|
|
89
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
90
|
+
asChild: true,
|
|
91
|
+
className: `FormMessage ${className || ""}`,
|
|
92
|
+
ref,
|
|
93
|
+
children: /* @__PURE__ */ jsx(Typo, { color: "red", children })
|
|
94
|
+
})
|
|
95
|
+
);
|
|
96
|
+
}
|
|
97
|
+
);
|
|
98
|
+
Message2.displayName = "FORM_Message";
|
|
99
|
+
var Control2 = forwardRef(
|
|
100
|
+
(_a, ref) => {
|
|
101
|
+
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
|
|
102
|
+
const fieldProps = useContext(FieldContext);
|
|
103
|
+
return /* @__PURE__ */ jsx(
|
|
104
|
+
RadixForm.Control,
|
|
105
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
106
|
+
className: `FormControl ${className || ""}`,
|
|
107
|
+
ref,
|
|
108
|
+
required: fieldProps.required
|
|
109
|
+
})
|
|
110
|
+
);
|
|
111
|
+
}
|
|
112
|
+
);
|
|
113
|
+
Control2.displayName = "FORM_Control";
|
|
114
|
+
function FormItem(_a) {
|
|
115
|
+
var _b = _a, {
|
|
116
|
+
label,
|
|
117
|
+
labelVariant,
|
|
118
|
+
children,
|
|
119
|
+
errorMessage
|
|
120
|
+
} = _b, fieldProps = __objRest(_b, [
|
|
121
|
+
"label",
|
|
122
|
+
"labelVariant",
|
|
123
|
+
"children",
|
|
124
|
+
"errorMessage"
|
|
125
|
+
]);
|
|
126
|
+
return /* @__PURE__ */ jsxs(Form.Field, __spreadProps(__spreadValues({}, fieldProps), { children: [
|
|
127
|
+
/* @__PURE__ */ jsx(Form.Label, { variant: labelVariant, children: /* @__PURE__ */ jsx(Typo, { weight: "bold", children: label }) }),
|
|
128
|
+
children,
|
|
129
|
+
/* @__PURE__ */ jsx(Form.Message, { forceMatch: Boolean(errorMessage), children: errorMessage })
|
|
130
|
+
] }));
|
|
131
|
+
}
|
|
132
|
+
var Form = {
|
|
133
|
+
Root: Root2,
|
|
134
|
+
Field: Field2,
|
|
135
|
+
Label: Label2,
|
|
136
|
+
Message: Message2,
|
|
137
|
+
Control: RadixForm.Control,
|
|
138
|
+
Submit: RadixForm.Submit,
|
|
139
|
+
FormItem
|
|
140
|
+
};
|
|
141
|
+
|
|
142
|
+
export {
|
|
143
|
+
FormItem,
|
|
144
|
+
Form
|
|
145
|
+
};
|
|
146
|
+
//# sourceMappingURL=chunk-ZVWUCJMB.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/form/form.tsx"],"sourcesContent":["import * as RadixForm from '@radix-ui/react-form';\nimport React, { createContext, forwardRef, useContext, useMemo } from 'react';\nimport type { HeadingProps } from '@radix-ui/themes';\nimport { Heading } from '../../atoms/heading';\nimport type { TypoProps } from '../../atoms/typo';\nimport { Typo } from '../../atoms/typo';\n\nconst Root = forwardRef<HTMLFormElement, RadixForm.FormProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Root\n {...rest}\n className={`FormRoot ${className || ''}`}\n ref={ref}\n >\n {children}\n </RadixForm.Root>\n );\n }\n);\n\nRoot.displayName = 'FORM_ROOT';\n\nexport type FormFieldProps = RadixForm.FormFieldProps & { required?: boolean };\n\nconst FieldContext = createContext<FormFieldProps>({\n name: '',\n});\n\nconst Field = forwardRef<HTMLDivElement, FormFieldProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Field\n {...rest}\n className={`FormField ${className || ''}`}\n ref={ref}\n >\n <FieldContext.Provider value={rest}>{children}</FieldContext.Provider>\n </RadixForm.Field>\n );\n }\n);\nField.displayName = 'FORM_FIELD';\n\nexport type FormLabelProps = RadixForm.FormLabelProps & {\n /** label의 타입을 지정 */\n variant?: 'title' | 'body' | 'caption';\n};\n\nfunction HeadingLabel(props: HeadingProps): React.ReactNode {\n return (\n <Heading variant=\"heading5\" {...props}>\n {props.children}\n </Heading>\n );\n}\n\nfunction CaptionLabel(props: TypoProps): React.ReactNode {\n return (\n <Typo color=\"gray\" variant=\"caption\" weight=\"bold\" {...props}>\n {props.children}\n </Typo>\n );\n}\n\nconst Label = forwardRef<HTMLLabelElement, FormLabelProps>(\n ({ children, className, variant, ...rest }, ref) => {\n const Comp = useMemo(() => {\n switch (variant) {\n case 'title':\n return HeadingLabel;\n case 'caption':\n return CaptionLabel;\n case 'body':\n default:\n return Typo;\n }\n }, [variant]);\n\n const fieldProps = useContext(FieldContext);\n return (\n <RadixForm.Label\n {...rest}\n asChild\n className={`FormLabel ${className || ''}`}\n ref={ref}\n >\n <Comp>\n {children}\n {fieldProps.required ? (\n <Typo as=\"span\" color=\"tomato\">\n {` *`}\n </Typo>\n ) : null}\n </Comp>\n </RadixForm.Label>\n );\n }\n);\nLabel.displayName = 'FORM_Label';\n\nconst Message = forwardRef<HTMLSpanElement, RadixForm.FormMessageProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Message\n {...rest}\n asChild\n className={`FormMessage ${className || ''}`}\n ref={ref}\n >\n <Typo color=\"red\">{children}</Typo>\n </RadixForm.Message>\n );\n }\n);\nMessage.displayName = 'FORM_Message';\n\ntype ControlProps = Omit<RadixForm.FormControlProps, 'required'>;\nconst Control = forwardRef<HTMLInputElement, ControlProps>(\n ({ className, ...rest }, ref) => {\n const fieldProps = useContext(FieldContext);\n return (\n <RadixForm.Control\n {...rest}\n className={`FormControl ${className || ''}`}\n ref={ref}\n required={fieldProps.required}\n />\n );\n }\n);\nControl.displayName = 'FORM_Control';\n\ninterface FormItemProps extends FormFieldProps {\n children: React.ReactNode;\n label: string;\n labelVariant?: FormLabelProps['variant'];\n errorMessage?: string;\n}\n\nexport function FormItem({\n label,\n labelVariant,\n children,\n errorMessage,\n ...fieldProps\n}: FormItemProps): React.ReactNode {\n return (\n <Form.Field {...fieldProps}>\n <Form.Label variant={labelVariant}>\n <Typo weight=\"bold\">{label}</Typo>\n </Form.Label>\n {children}\n <Form.Message forceMatch={Boolean(errorMessage)}>\n {errorMessage}\n </Form.Message>\n </Form.Field>\n );\n}\n\nexport const Form = {\n Root,\n Field,\n Label,\n Message,\n Control: RadixForm.Control,\n Submit: RadixForm.Submit,\n FormItem,\n};\n"],"mappings":"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","names":["Root","Field","Label","Message","Control"]}
|
|
@@ -208,7 +208,10 @@ function HeadingLabel(props) {
|
|
|
208
208
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Heading2, __spreadProps(__spreadValues({ variant: "heading5" }, props), { children: props.children }));
|
|
209
209
|
}
|
|
210
210
|
function CaptionLabel(props) {
|
|
211
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Typo, __spreadProps(__spreadValues({ color: "gray", variant: "caption" }, props), { children: props.children }));
|
|
211
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Typo, __spreadProps(__spreadValues({ color: "gray", variant: "caption", weight: "bold" }, props), { children: props.children }));
|
|
212
|
+
}
|
|
213
|
+
function BodyLabel(props) {
|
|
214
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Typo, __spreadProps(__spreadValues({ variant: "body", weight: "bold" }, props), { children: props.children }));
|
|
212
215
|
}
|
|
213
216
|
var Label2 = (0, import_react3.forwardRef)(
|
|
214
217
|
(_a, ref) => {
|
|
@@ -221,7 +224,7 @@ var Label2 = (0, import_react3.forwardRef)(
|
|
|
221
224
|
return CaptionLabel;
|
|
222
225
|
case "body":
|
|
223
226
|
default:
|
|
224
|
-
return
|
|
227
|
+
return BodyLabel;
|
|
225
228
|
}
|
|
226
229
|
}, [variant]);
|
|
227
230
|
const fieldProps = (0, import_react3.useContext)(FieldContext);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/context/dynamic-form-context.tsx","../../src/molecules/form/form.tsx","../../src/atoms/heading.tsx","../../src/utils/map-with-responsive.ts","../../src/atoms/typo.tsx"],"sourcesContent":["import React, { createContext, useContext } from 'react';\nimport type { FormikProps } from 'formik';\nimport { Form } from '@/molecules/form/form';\nimport type { DynamicFormFieldSchema } from '@/types/dynamic-form-schema-generated';\n\nexport interface DynamicFormContextValue {\n formik: FormikProps<Record<string, unknown>>;\n fields: DynamicFormFieldSchema[];\n readonly: boolean;\n getFieldValue: (name: string) => unknown;\n getFieldError: (name: string) => string | undefined;\n getFieldTouched: (name: string) => boolean;\n setFieldValue: (field: string, value: unknown) => Promise<void>;\n handleChange: (e: React.ChangeEvent<unknown>) => void;\n handleBlur: (e: React.FocusEvent<unknown>) => void;\n}\n\nconst DynamicFormContext = createContext<DynamicFormContextValue | null>(null);\n\ninterface DynamicFormProviderProps {\n children: React.ReactNode;\n fields: DynamicFormFieldSchema[];\n formik: FormikProps<Record<string, unknown>>;\n readonly?: boolean;\n formStyle?: React.CSSProperties;\n}\n\nexport function DynamicFormProvider({\n children,\n fields,\n formik,\n readonly = false,\n formStyle,\n}: DynamicFormProviderProps): React.ReactElement {\n const contextValue: DynamicFormContextValue = {\n formik,\n fields,\n readonly,\n getFieldValue: (name: string): unknown => formik.values[name],\n getFieldError: (name: string): string | undefined => {\n const error = formik.errors[name];\n const touched = formik.touched[name];\n return touched && error ? String(error) : undefined;\n },\n getFieldTouched: (name: string): boolean => Boolean(formik.touched[name]),\n setFieldValue: async (field: string, value: unknown): Promise<void> => {\n await formik.setFieldValue(field, value);\n },\n handleChange: formik.handleChange,\n handleBlur: formik.handleBlur, \n };\n\n return (\n <DynamicFormContext.Provider value={contextValue}>\n <Form.Root onSubmit={formik.handleSubmit} style={formStyle}>{children}</Form.Root>\n </DynamicFormContext.Provider>\n );\n}\n\nexport function useDynamicForm(): DynamicFormContextValue {\n const context = useContext(DynamicFormContext);\n\n if (!context) {\n throw new Error('useDynamicForm must be used within a DynamicFormProvider');\n }\n\n return context;\n}\n","import * as RadixForm from '@radix-ui/react-form';\nimport React, { createContext, forwardRef, useContext, useMemo } from 'react';\nimport type { HeadingProps } from '@radix-ui/themes';\nimport { Heading } from '../../atoms/heading';\nimport type { TypoProps } from '../../atoms/typo';\nimport { Typo } from '../../atoms/typo';\n\nconst Root = forwardRef<HTMLFormElement, RadixForm.FormProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Root\n {...rest}\n className={`FormRoot ${className || ''}`}\n ref={ref}\n >\n {children}\n </RadixForm.Root>\n );\n }\n);\n\nRoot.displayName = 'FORM_ROOT';\n\nexport type FormFieldProps = RadixForm.FormFieldProps & { required?: boolean };\n\nconst FieldContext = createContext<FormFieldProps>({\n name: '',\n});\n\nconst Field = forwardRef<HTMLDivElement, FormFieldProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Field\n {...rest}\n className={`FormField ${className || ''}`}\n ref={ref}\n >\n <FieldContext.Provider value={rest}>{children}</FieldContext.Provider>\n </RadixForm.Field>\n );\n }\n);\nField.displayName = 'FORM_FIELD';\n\nexport type FormLabelProps = RadixForm.FormLabelProps & {\n /** label의 타입을 지정 */\n variant?: 'title' | 'body' | 'caption';\n};\n\nfunction HeadingLabel(props: HeadingProps): React.ReactNode {\n return (\n <Heading variant=\"heading5\" {...props}>\n {props.children}\n </Heading>\n );\n}\n\nfunction CaptionLabel(props: TypoProps): React.ReactNode {\n return (\n <Typo color=\"gray\" variant=\"caption\" {...props}>\n {props.children}\n </Typo>\n );\n}\n\nconst Label = forwardRef<HTMLLabelElement, FormLabelProps>(\n ({ children, className, variant, ...rest }, ref) => {\n const Comp = useMemo(() => {\n switch (variant) {\n case 'title':\n return HeadingLabel;\n case 'caption':\n return CaptionLabel;\n case 'body':\n default:\n return Typo;\n }\n }, [variant]);\n\n const fieldProps = useContext(FieldContext);\n return (\n <RadixForm.Label\n {...rest}\n asChild\n className={`FormLabel ${className || ''}`}\n ref={ref}\n >\n <Comp>\n {children}\n {fieldProps.required ? (\n <Typo as=\"span\" color=\"tomato\">\n {` *`}\n </Typo>\n ) : null}\n </Comp>\n </RadixForm.Label>\n );\n }\n);\nLabel.displayName = 'FORM_Label';\n\nconst Message = forwardRef<HTMLSpanElement, RadixForm.FormMessageProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Message\n {...rest}\n asChild\n className={`FormMessage ${className || ''}`}\n ref={ref}\n >\n <Typo color=\"red\">{children}</Typo>\n </RadixForm.Message>\n );\n }\n);\nMessage.displayName = 'FORM_Message';\n\ntype ControlProps = Omit<RadixForm.FormControlProps, 'required'>;\nconst Control = forwardRef<HTMLInputElement, ControlProps>(\n ({ className, ...rest }, ref) => {\n const fieldProps = useContext(FieldContext);\n return (\n <RadixForm.Control\n {...rest}\n className={`FormControl ${className || ''}`}\n ref={ref}\n required={fieldProps.required}\n />\n );\n }\n);\nControl.displayName = 'FORM_Control';\n\ninterface FormItemProps extends FormFieldProps {\n children: React.ReactNode;\n label: string;\n labelVariant?: FormLabelProps['variant'];\n errorMessage?: string;\n}\n\nexport function FormItem({\n label,\n labelVariant,\n children,\n errorMessage,\n ...fieldProps\n}: FormItemProps): React.ReactNode {\n return (\n <Form.Field {...fieldProps}>\n <Form.Label variant={labelVariant}>{label}</Form.Label>\n {children}\n <Form.Message forceMatch={Boolean(errorMessage)}>\n {errorMessage}\n </Form.Message>\n </Form.Field>\n );\n}\n\nexport const Form = {\n Root,\n Field,\n Label,\n Message,\n Control: RadixForm.Control,\n Submit: RadixForm.Submit,\n FormItem,\n};\n","import {\n Heading as RadixHeading,\n type HeadingProps as RadixHeadingProps,\n} from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { useMemo } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\n\nexport { Heading as RadixHeading } from '@radix-ui/themes';\ntype HeadingVariant =\n | 'heading1'\n | 'heading2'\n | 'heading3'\n | 'heading4'\n | 'heading5';\nexport type HeadingProps = RadixHeadingProps & {\n variant?: Responsive<HeadingVariant>;\n};\n\ntype HeadingSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';\n\nconst mapVariant = (variant?: HeadingVariant): HeadingSize | undefined => {\n switch (variant) {\n case 'heading1':\n return '7';\n case 'heading2':\n return '6';\n case 'heading3':\n return '5';\n case 'heading4':\n return '4';\n case 'heading5':\n return '3';\n default:\n return undefined;\n }\n};\n\nexport function Heading(props: HeadingProps): React.ReactNode {\n const { size, children, variant, ...rest } = props;\n const radixSize = useMemo<RadixHeadingProps['size']>(() => {\n return variant\n ? mapWithResponsive({\n value: variant,\n mapFn: mapVariant,\n })\n : size;\n \n }, [size, variant]);\n\n return (\n <RadixHeading {...rest} size={radixSize}>\n {children}\n </RadixHeading>\n );\n}\n","import type { Breakpoint, Responsive } from \"@radix-ui/themes/props\";\n\nexport const mapWithResponsive = <T extends string,K extends string>(\n args: {value: Responsive<T>, mapFn: (value?:T)=>K |undefined}\n): Responsive<K> | undefined => {\n const {value, mapFn} = args;\n if(typeof value === 'string'){\n return mapFn(value);\n };\n \n if(typeof value === 'object'){\n const newObj: Partial<Record<Breakpoint, K>> = {};\n let key: Breakpoint;\n for(key in value){\n newObj[key] = mapFn(value[key]);\n }\n return newObj;\n }\n return value;\n};\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport React, { useMemo, forwardRef } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\n\nexport type TypoProps = RadixTextProps & {\n variant?: Responsive<'body' | 'caption' | 'subtitle'>;\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n (props: TypoProps, ref): React.ReactNode => {\n const { size, variant, children, ...rest } = props;\n\n const radixSize = useMemo<RadixTextProps['size']>(() => {\n if (size !== undefined) return size;\n\n if (variant === undefined) return '2';\n\n return mapWithResponsive({\n value: variant,\n mapFn: (variantValue?: 'body' | 'caption' | 'subtitle') => {\n switch (variantValue) {\n case 'caption':\n return '1';\n case 'subtitle':\n return '3';\n case 'body':\n default:\n return '2';\n }\n },\n });\n }, [size, variant]);\n\n return (\n <RadixText {...rest} ref={ref} size={radixSize}>\n {children}\n </RadixText>\n );\n }\n);\n\nTypo.displayName = 'Typo';\n"],"mappings":"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","names":["import_react","import_react","import_themes","Heading","RadixHeading","import_themes","import_react","import_jsx_runtime","RadixText","import_jsx_runtime","Root","Field","Heading","Label","Message","Control","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../src/context/dynamic-form-context.tsx","../../src/molecules/form/form.tsx","../../src/atoms/heading.tsx","../../src/utils/map-with-responsive.ts","../../src/atoms/typo.tsx"],"sourcesContent":["import React, { createContext, useContext } from 'react';\nimport type { FormikProps } from 'formik';\nimport { Form } from '@/molecules/form/form';\nimport type { DynamicFormFieldSchema } from '@/types/dynamic-form-schema-generated';\n\nexport interface DynamicFormContextValue {\n formik: FormikProps<Record<string, unknown>>;\n fields: DynamicFormFieldSchema[];\n readonly: boolean;\n getFieldValue: (name: string) => unknown;\n getFieldError: (name: string) => string | undefined;\n getFieldTouched: (name: string) => boolean;\n setFieldValue: (field: string, value: unknown) => Promise<void>;\n handleChange: (e: React.ChangeEvent<unknown>) => void;\n handleBlur: (e: React.FocusEvent<unknown>) => void;\n}\n\nconst DynamicFormContext = createContext<DynamicFormContextValue | null>(null);\n\ninterface DynamicFormProviderProps {\n children: React.ReactNode;\n fields: DynamicFormFieldSchema[];\n formik: FormikProps<Record<string, unknown>>;\n readonly?: boolean;\n formStyle?: React.CSSProperties;\n}\n\nexport function DynamicFormProvider({\n children,\n fields,\n formik,\n readonly = false,\n formStyle,\n}: DynamicFormProviderProps): React.ReactElement {\n const contextValue: DynamicFormContextValue = {\n formik,\n fields,\n readonly,\n getFieldValue: (name: string): unknown => formik.values[name],\n getFieldError: (name: string): string | undefined => {\n const error = formik.errors[name];\n const touched = formik.touched[name];\n return touched && error ? String(error) : undefined;\n },\n getFieldTouched: (name: string): boolean => Boolean(formik.touched[name]),\n setFieldValue: async (field: string, value: unknown): Promise<void> => {\n await formik.setFieldValue(field, value);\n },\n handleChange: formik.handleChange,\n handleBlur: formik.handleBlur, \n };\n\n return (\n <DynamicFormContext.Provider value={contextValue}>\n <Form.Root onSubmit={formik.handleSubmit} style={formStyle}>{children}</Form.Root>\n </DynamicFormContext.Provider>\n );\n}\n\nexport function useDynamicForm(): DynamicFormContextValue {\n const context = useContext(DynamicFormContext);\n\n if (!context) {\n throw new Error('useDynamicForm must be used within a DynamicFormProvider');\n }\n\n return context;\n}\n","import * as RadixForm from '@radix-ui/react-form';\nimport React, { createContext, forwardRef, useContext, useMemo } from 'react';\nimport type { HeadingProps } from '@radix-ui/themes';\nimport { Heading } from '../../atoms/heading';\nimport type { TypoProps } from '../../atoms/typo';\nimport { Typo } from '../../atoms/typo';\n\nconst Root = forwardRef<HTMLFormElement, RadixForm.FormProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Root\n {...rest}\n className={`FormRoot ${className || ''}`}\n ref={ref}\n >\n {children}\n </RadixForm.Root>\n );\n }\n);\n\nRoot.displayName = 'FORM_ROOT';\n\nexport type FormFieldProps = RadixForm.FormFieldProps & { required?: boolean };\n\nconst FieldContext = createContext<FormFieldProps>({\n name: '',\n});\n\nconst Field = forwardRef<HTMLDivElement, FormFieldProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Field\n {...rest}\n className={`FormField ${className || ''}`}\n ref={ref}\n >\n <FieldContext.Provider value={rest}>{children}</FieldContext.Provider>\n </RadixForm.Field>\n );\n }\n);\nField.displayName = 'FORM_FIELD';\n\nexport type FormLabelProps = RadixForm.FormLabelProps & {\n /** label의 타입을 지정 */\n variant?: 'title' | 'body' | 'caption';\n};\n\nfunction HeadingLabel(props: HeadingProps): React.ReactNode {\n return (\n <Heading variant=\"heading5\" {...props}>\n {props.children}\n </Heading>\n );\n}\n\nfunction CaptionLabel(props: TypoProps): React.ReactNode {\n return (\n <Typo color=\"gray\" variant=\"caption\" weight=\"bold\" {...props}>\n {props.children}\n </Typo>\n );\n}\n\nfunction BodyLabel(props: TypoProps): React.ReactNode {\n return (\n <Typo variant=\"body\" weight=\"bold\" {...props}>\n {props.children}\n </Typo>\n );\n}\n\nconst Label = forwardRef<HTMLLabelElement, FormLabelProps>(\n ({ children, className, variant, ...rest }, ref) => {\n const Comp = useMemo(() => {\n switch (variant) {\n case 'title':\n return HeadingLabel;\n case 'caption':\n return CaptionLabel;\n case 'body':\n default:\n return BodyLabel;\n }\n }, [variant]);\n\n const fieldProps = useContext(FieldContext);\n return (\n <RadixForm.Label\n {...rest}\n asChild\n className={`FormLabel ${className || ''}`}\n ref={ref}\n >\n <Comp>\n {children}\n {fieldProps.required ? (\n <Typo as=\"span\" color=\"tomato\">\n {` *`}\n </Typo>\n ) : null}\n </Comp>\n </RadixForm.Label>\n );\n }\n);\nLabel.displayName = 'FORM_Label';\n\nconst Message = forwardRef<HTMLSpanElement, RadixForm.FormMessageProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Message\n {...rest}\n asChild\n className={`FormMessage ${className || ''}`}\n ref={ref}\n >\n <Typo color=\"red\">{children}</Typo>\n </RadixForm.Message>\n );\n }\n);\nMessage.displayName = 'FORM_Message';\n\ntype ControlProps = Omit<RadixForm.FormControlProps, 'required'>;\nconst Control = forwardRef<HTMLInputElement, ControlProps>(\n ({ className, ...rest }, ref) => {\n const fieldProps = useContext(FieldContext);\n return (\n <RadixForm.Control\n {...rest}\n className={`FormControl ${className || ''}`}\n ref={ref}\n required={fieldProps.required}\n />\n );\n }\n);\nControl.displayName = 'FORM_Control';\n\ninterface FormItemProps extends FormFieldProps {\n children: React.ReactNode;\n label: string;\n labelVariant?: FormLabelProps['variant'];\n errorMessage?: string;\n}\n\nexport function FormItem({\n label,\n labelVariant,\n children,\n errorMessage,\n ...fieldProps\n}: FormItemProps): React.ReactNode {\n return (\n <Form.Field {...fieldProps}>\n <Form.Label variant={labelVariant}>{label}</Form.Label>\n {children}\n <Form.Message forceMatch={Boolean(errorMessage)}>\n {errorMessage}\n </Form.Message>\n </Form.Field>\n );\n}\n\nexport const Form = {\n Root,\n Field,\n Label,\n Message,\n Control: RadixForm.Control,\n Submit: RadixForm.Submit,\n FormItem,\n};\n","import {\n Heading as RadixHeading,\n type HeadingProps as RadixHeadingProps,\n} from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { useMemo } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\n\nexport { Heading as RadixHeading } from '@radix-ui/themes';\ntype HeadingVariant =\n | 'heading1'\n | 'heading2'\n | 'heading3'\n | 'heading4'\n | 'heading5';\nexport type HeadingProps = RadixHeadingProps & {\n variant?: Responsive<HeadingVariant>;\n};\n\ntype HeadingSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';\n\nconst mapVariant = (variant?: HeadingVariant): HeadingSize | undefined => {\n switch (variant) {\n case 'heading1':\n return '7';\n case 'heading2':\n return '6';\n case 'heading3':\n return '5';\n case 'heading4':\n return '4';\n case 'heading5':\n return '3';\n default:\n return undefined;\n }\n};\n\nexport function Heading(props: HeadingProps): React.ReactNode {\n const { size, children, variant, ...rest } = props;\n const radixSize = useMemo<RadixHeadingProps['size']>(() => {\n return variant\n ? mapWithResponsive({\n value: variant,\n mapFn: mapVariant,\n })\n : size;\n \n }, [size, variant]);\n\n return (\n <RadixHeading {...rest} size={radixSize}>\n {children}\n </RadixHeading>\n );\n}\n","import type { Breakpoint, Responsive } from \"@radix-ui/themes/props\";\n\nexport const mapWithResponsive = <T extends string,K extends string>(\n args: {value: Responsive<T>, mapFn: (value?:T)=>K |undefined}\n): Responsive<K> | undefined => {\n const {value, mapFn} = args;\n if(typeof value === 'string'){\n return mapFn(value);\n };\n \n if(typeof value === 'object'){\n const newObj: Partial<Record<Breakpoint, K>> = {};\n let key: Breakpoint;\n for(key in value){\n newObj[key] = mapFn(value[key]);\n }\n return newObj;\n }\n return value;\n};\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport React, { useMemo, forwardRef } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\n\nexport type TypoProps = RadixTextProps & {\n variant?: Responsive<'body' | 'caption' | 'subtitle'>;\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n (props: TypoProps, ref): React.ReactNode => {\n const { size, variant, children, ...rest } = props;\n\n const radixSize = useMemo<RadixTextProps['size']>(() => {\n if (size !== undefined) return size;\n\n if (variant === undefined) return '2';\n\n return mapWithResponsive({\n value: variant,\n mapFn: (variantValue?: 'body' | 'caption' | 'subtitle') => {\n switch (variantValue) {\n case 'caption':\n return '1';\n case 'subtitle':\n return '3';\n case 'body':\n default:\n return '2';\n }\n },\n });\n }, [size, variant]);\n\n return (\n <RadixText {...rest} ref={ref} size={radixSize}>\n {children}\n </RadixText>\n );\n }\n);\n\nTypo.displayName = 'Typo';\n"],"mappings":"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","names":["import_react","import_react","import_themes","Heading","RadixHeading","import_themes","import_react","import_jsx_runtime","RadixText","import_jsx_runtime","Root","Field","Heading","Label","Message","Control","import_jsx_runtime"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import {
|
|
2
2
|
DynamicFormProvider,
|
|
3
3
|
useDynamicForm
|
|
4
|
-
} from "../chunk-
|
|
5
|
-
import "../chunk-
|
|
4
|
+
} from "../chunk-4U6DFH7Z.js";
|
|
5
|
+
import "../chunk-QDC3LFHS.js";
|
|
6
6
|
import "../chunk-BESTU2AY.js";
|
|
7
7
|
import "../chunk-PMJIFLDT.js";
|
|
8
8
|
import "../chunk-LDBWASUA.js";
|
package/dist/context/index.cjs
CHANGED
|
@@ -213,7 +213,10 @@ function HeadingLabel(props) {
|
|
|
213
213
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Heading2, __spreadProps(__spreadValues({ variant: "heading5" }, props), { children: props.children }));
|
|
214
214
|
}
|
|
215
215
|
function CaptionLabel(props) {
|
|
216
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Typo, __spreadProps(__spreadValues({ color: "gray", variant: "caption" }, props), { children: props.children }));
|
|
216
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Typo, __spreadProps(__spreadValues({ color: "gray", variant: "caption", weight: "bold" }, props), { children: props.children }));
|
|
217
|
+
}
|
|
218
|
+
function BodyLabel(props) {
|
|
219
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Typo, __spreadProps(__spreadValues({ variant: "body", weight: "bold" }, props), { children: props.children }));
|
|
217
220
|
}
|
|
218
221
|
var Label2 = (0, import_react3.forwardRef)(
|
|
219
222
|
(_a, ref) => {
|
|
@@ -226,7 +229,7 @@ var Label2 = (0, import_react3.forwardRef)(
|
|
|
226
229
|
return CaptionLabel;
|
|
227
230
|
case "body":
|
|
228
231
|
default:
|
|
229
|
-
return
|
|
232
|
+
return BodyLabel;
|
|
230
233
|
}
|
|
231
234
|
}, [variant]);
|
|
232
235
|
const fieldProps = (0, import_react3.useContext)(FieldContext);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/context/index.ts","../../src/context/dynamic-form-context.tsx","../../src/molecules/form/form.tsx","../../src/atoms/heading.tsx","../../src/utils/map-with-responsive.ts","../../src/atoms/typo.tsx","../../src/context/ui-state-provider.tsx"],"sourcesContent":["export * from './dynamic-form-context';\nexport * from './ui-state-provider';","import React, { createContext, useContext } from 'react';\nimport type { FormikProps } from 'formik';\nimport { Form } from '@/molecules/form/form';\nimport type { DynamicFormFieldSchema } from '@/types/dynamic-form-schema-generated';\n\nexport interface DynamicFormContextValue {\n formik: FormikProps<Record<string, unknown>>;\n fields: DynamicFormFieldSchema[];\n readonly: boolean;\n getFieldValue: (name: string) => unknown;\n getFieldError: (name: string) => string | undefined;\n getFieldTouched: (name: string) => boolean;\n setFieldValue: (field: string, value: unknown) => Promise<void>;\n handleChange: (e: React.ChangeEvent<unknown>) => void;\n handleBlur: (e: React.FocusEvent<unknown>) => void;\n}\n\nconst DynamicFormContext = createContext<DynamicFormContextValue | null>(null);\n\ninterface DynamicFormProviderProps {\n children: React.ReactNode;\n fields: DynamicFormFieldSchema[];\n formik: FormikProps<Record<string, unknown>>;\n readonly?: boolean;\n formStyle?: React.CSSProperties;\n}\n\nexport function DynamicFormProvider({\n children,\n fields,\n formik,\n readonly = false,\n formStyle,\n}: DynamicFormProviderProps): React.ReactElement {\n const contextValue: DynamicFormContextValue = {\n formik,\n fields,\n readonly,\n getFieldValue: (name: string): unknown => formik.values[name],\n getFieldError: (name: string): string | undefined => {\n const error = formik.errors[name];\n const touched = formik.touched[name];\n return touched && error ? String(error) : undefined;\n },\n getFieldTouched: (name: string): boolean => Boolean(formik.touched[name]),\n setFieldValue: async (field: string, value: unknown): Promise<void> => {\n await formik.setFieldValue(field, value);\n },\n handleChange: formik.handleChange,\n handleBlur: formik.handleBlur, \n };\n\n return (\n <DynamicFormContext.Provider value={contextValue}>\n <Form.Root onSubmit={formik.handleSubmit} style={formStyle}>{children}</Form.Root>\n </DynamicFormContext.Provider>\n );\n}\n\nexport function useDynamicForm(): DynamicFormContextValue {\n const context = useContext(DynamicFormContext);\n\n if (!context) {\n throw new Error('useDynamicForm must be used within a DynamicFormProvider');\n }\n\n return context;\n}\n","import * as RadixForm from '@radix-ui/react-form';\nimport React, { createContext, forwardRef, useContext, useMemo } from 'react';\nimport type { HeadingProps } from '@radix-ui/themes';\nimport { Heading } from '../../atoms/heading';\nimport type { TypoProps } from '../../atoms/typo';\nimport { Typo } from '../../atoms/typo';\n\nconst Root = forwardRef<HTMLFormElement, RadixForm.FormProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Root\n {...rest}\n className={`FormRoot ${className || ''}`}\n ref={ref}\n >\n {children}\n </RadixForm.Root>\n );\n }\n);\n\nRoot.displayName = 'FORM_ROOT';\n\nexport type FormFieldProps = RadixForm.FormFieldProps & { required?: boolean };\n\nconst FieldContext = createContext<FormFieldProps>({\n name: '',\n});\n\nconst Field = forwardRef<HTMLDivElement, FormFieldProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Field\n {...rest}\n className={`FormField ${className || ''}`}\n ref={ref}\n >\n <FieldContext.Provider value={rest}>{children}</FieldContext.Provider>\n </RadixForm.Field>\n );\n }\n);\nField.displayName = 'FORM_FIELD';\n\nexport type FormLabelProps = RadixForm.FormLabelProps & {\n /** label의 타입을 지정 */\n variant?: 'title' | 'body' | 'caption';\n};\n\nfunction HeadingLabel(props: HeadingProps): React.ReactNode {\n return (\n <Heading variant=\"heading5\" {...props}>\n {props.children}\n </Heading>\n );\n}\n\nfunction CaptionLabel(props: TypoProps): React.ReactNode {\n return (\n <Typo color=\"gray\" variant=\"caption\" {...props}>\n {props.children}\n </Typo>\n );\n}\n\nconst Label = forwardRef<HTMLLabelElement, FormLabelProps>(\n ({ children, className, variant, ...rest }, ref) => {\n const Comp = useMemo(() => {\n switch (variant) {\n case 'title':\n return HeadingLabel;\n case 'caption':\n return CaptionLabel;\n case 'body':\n default:\n return Typo;\n }\n }, [variant]);\n\n const fieldProps = useContext(FieldContext);\n return (\n <RadixForm.Label\n {...rest}\n asChild\n className={`FormLabel ${className || ''}`}\n ref={ref}\n >\n <Comp>\n {children}\n {fieldProps.required ? (\n <Typo as=\"span\" color=\"tomato\">\n {` *`}\n </Typo>\n ) : null}\n </Comp>\n </RadixForm.Label>\n );\n }\n);\nLabel.displayName = 'FORM_Label';\n\nconst Message = forwardRef<HTMLSpanElement, RadixForm.FormMessageProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Message\n {...rest}\n asChild\n className={`FormMessage ${className || ''}`}\n ref={ref}\n >\n <Typo color=\"red\">{children}</Typo>\n </RadixForm.Message>\n );\n }\n);\nMessage.displayName = 'FORM_Message';\n\ntype ControlProps = Omit<RadixForm.FormControlProps, 'required'>;\nconst Control = forwardRef<HTMLInputElement, ControlProps>(\n ({ className, ...rest }, ref) => {\n const fieldProps = useContext(FieldContext);\n return (\n <RadixForm.Control\n {...rest}\n className={`FormControl ${className || ''}`}\n ref={ref}\n required={fieldProps.required}\n />\n );\n }\n);\nControl.displayName = 'FORM_Control';\n\ninterface FormItemProps extends FormFieldProps {\n children: React.ReactNode;\n label: string;\n labelVariant?: FormLabelProps['variant'];\n errorMessage?: string;\n}\n\nexport function FormItem({\n label,\n labelVariant,\n children,\n errorMessage,\n ...fieldProps\n}: FormItemProps): React.ReactNode {\n return (\n <Form.Field {...fieldProps}>\n <Form.Label variant={labelVariant}>{label}</Form.Label>\n {children}\n <Form.Message forceMatch={Boolean(errorMessage)}>\n {errorMessage}\n </Form.Message>\n </Form.Field>\n );\n}\n\nexport const Form = {\n Root,\n Field,\n Label,\n Message,\n Control: RadixForm.Control,\n Submit: RadixForm.Submit,\n FormItem,\n};\n","import {\n Heading as RadixHeading,\n type HeadingProps as RadixHeadingProps,\n} from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { useMemo } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\n\nexport { Heading as RadixHeading } from '@radix-ui/themes';\ntype HeadingVariant =\n | 'heading1'\n | 'heading2'\n | 'heading3'\n | 'heading4'\n | 'heading5';\nexport type HeadingProps = RadixHeadingProps & {\n variant?: Responsive<HeadingVariant>;\n};\n\ntype HeadingSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';\n\nconst mapVariant = (variant?: HeadingVariant): HeadingSize | undefined => {\n switch (variant) {\n case 'heading1':\n return '7';\n case 'heading2':\n return '6';\n case 'heading3':\n return '5';\n case 'heading4':\n return '4';\n case 'heading5':\n return '3';\n default:\n return undefined;\n }\n};\n\nexport function Heading(props: HeadingProps): React.ReactNode {\n const { size, children, variant, ...rest } = props;\n const radixSize = useMemo<RadixHeadingProps['size']>(() => {\n return variant\n ? mapWithResponsive({\n value: variant,\n mapFn: mapVariant,\n })\n : size;\n \n }, [size, variant]);\n\n return (\n <RadixHeading {...rest} size={radixSize}>\n {children}\n </RadixHeading>\n );\n}\n","import type { Breakpoint, Responsive } from \"@radix-ui/themes/props\";\n\nexport const mapWithResponsive = <T extends string,K extends string>(\n args: {value: Responsive<T>, mapFn: (value?:T)=>K |undefined}\n): Responsive<K> | undefined => {\n const {value, mapFn} = args;\n if(typeof value === 'string'){\n return mapFn(value);\n };\n \n if(typeof value === 'object'){\n const newObj: Partial<Record<Breakpoint, K>> = {};\n let key: Breakpoint;\n for(key in value){\n newObj[key] = mapFn(value[key]);\n }\n return newObj;\n }\n return value;\n};\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport React, { useMemo, forwardRef } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\n\nexport type TypoProps = RadixTextProps & {\n variant?: Responsive<'body' | 'caption' | 'subtitle'>;\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n (props: TypoProps, ref): React.ReactNode => {\n const { size, variant, children, ...rest } = props;\n\n const radixSize = useMemo<RadixTextProps['size']>(() => {\n if (size !== undefined) return size;\n\n if (variant === undefined) return '2';\n\n return mapWithResponsive({\n value: variant,\n mapFn: (variantValue?: 'body' | 'caption' | 'subtitle') => {\n switch (variantValue) {\n case 'caption':\n return '1';\n case 'subtitle':\n return '3';\n case 'body':\n default:\n return '2';\n }\n },\n });\n }, [size, variant]);\n\n return (\n <RadixText {...rest} ref={ref} size={radixSize}>\n {children}\n </RadixText>\n );\n }\n);\n\nTypo.displayName = 'Typo';\n","import { createContext, useContext } from 'react';\n\ninterface UIStateContextType {\n isMobile: boolean;\n}\n\nexport const UIStateContext = createContext<UIStateContextType>({\n isMobile: false,\n});\n\nexport type UiStateProviderProps = React.ReactNode;\n\nexport function UIStateProvider({\n children,\n isMobile,\n}: {\n children: UiStateProviderProps;\n isMobile: boolean;\n}): React.ReactElement {\n return (\n <UIStateContext.Provider value={{ isMobile }}>\n {children}\n </UIStateContext.Provider>\n );\n}\n\nexport const useUIState = (): UIStateContextType => {\n try {\n const state = useContext(UIStateContext);\n return state;\n } catch (error) {\n throw new Error('UIStateProvider not found');\n }\n};"],"mappings":"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","names":["import_react","import_react","import_themes","Heading","RadixHeading","import_themes","import_react","import_jsx_runtime","RadixText","import_jsx_runtime","Root","Field","Heading","Label","Message","Control","import_jsx_runtime","import_react","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../src/context/index.ts","../../src/context/dynamic-form-context.tsx","../../src/molecules/form/form.tsx","../../src/atoms/heading.tsx","../../src/utils/map-with-responsive.ts","../../src/atoms/typo.tsx","../../src/context/ui-state-provider.tsx"],"sourcesContent":["export * from './dynamic-form-context';\nexport * from './ui-state-provider';","import React, { createContext, useContext } from 'react';\nimport type { FormikProps } from 'formik';\nimport { Form } from '@/molecules/form/form';\nimport type { DynamicFormFieldSchema } from '@/types/dynamic-form-schema-generated';\n\nexport interface DynamicFormContextValue {\n formik: FormikProps<Record<string, unknown>>;\n fields: DynamicFormFieldSchema[];\n readonly: boolean;\n getFieldValue: (name: string) => unknown;\n getFieldError: (name: string) => string | undefined;\n getFieldTouched: (name: string) => boolean;\n setFieldValue: (field: string, value: unknown) => Promise<void>;\n handleChange: (e: React.ChangeEvent<unknown>) => void;\n handleBlur: (e: React.FocusEvent<unknown>) => void;\n}\n\nconst DynamicFormContext = createContext<DynamicFormContextValue | null>(null);\n\ninterface DynamicFormProviderProps {\n children: React.ReactNode;\n fields: DynamicFormFieldSchema[];\n formik: FormikProps<Record<string, unknown>>;\n readonly?: boolean;\n formStyle?: React.CSSProperties;\n}\n\nexport function DynamicFormProvider({\n children,\n fields,\n formik,\n readonly = false,\n formStyle,\n}: DynamicFormProviderProps): React.ReactElement {\n const contextValue: DynamicFormContextValue = {\n formik,\n fields,\n readonly,\n getFieldValue: (name: string): unknown => formik.values[name],\n getFieldError: (name: string): string | undefined => {\n const error = formik.errors[name];\n const touched = formik.touched[name];\n return touched && error ? String(error) : undefined;\n },\n getFieldTouched: (name: string): boolean => Boolean(formik.touched[name]),\n setFieldValue: async (field: string, value: unknown): Promise<void> => {\n await formik.setFieldValue(field, value);\n },\n handleChange: formik.handleChange,\n handleBlur: formik.handleBlur, \n };\n\n return (\n <DynamicFormContext.Provider value={contextValue}>\n <Form.Root onSubmit={formik.handleSubmit} style={formStyle}>{children}</Form.Root>\n </DynamicFormContext.Provider>\n );\n}\n\nexport function useDynamicForm(): DynamicFormContextValue {\n const context = useContext(DynamicFormContext);\n\n if (!context) {\n throw new Error('useDynamicForm must be used within a DynamicFormProvider');\n }\n\n return context;\n}\n","import * as RadixForm from '@radix-ui/react-form';\nimport React, { createContext, forwardRef, useContext, useMemo } from 'react';\nimport type { HeadingProps } from '@radix-ui/themes';\nimport { Heading } from '../../atoms/heading';\nimport type { TypoProps } from '../../atoms/typo';\nimport { Typo } from '../../atoms/typo';\n\nconst Root = forwardRef<HTMLFormElement, RadixForm.FormProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Root\n {...rest}\n className={`FormRoot ${className || ''}`}\n ref={ref}\n >\n {children}\n </RadixForm.Root>\n );\n }\n);\n\nRoot.displayName = 'FORM_ROOT';\n\nexport type FormFieldProps = RadixForm.FormFieldProps & { required?: boolean };\n\nconst FieldContext = createContext<FormFieldProps>({\n name: '',\n});\n\nconst Field = forwardRef<HTMLDivElement, FormFieldProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Field\n {...rest}\n className={`FormField ${className || ''}`}\n ref={ref}\n >\n <FieldContext.Provider value={rest}>{children}</FieldContext.Provider>\n </RadixForm.Field>\n );\n }\n);\nField.displayName = 'FORM_FIELD';\n\nexport type FormLabelProps = RadixForm.FormLabelProps & {\n /** label의 타입을 지정 */\n variant?: 'title' | 'body' | 'caption';\n};\n\nfunction HeadingLabel(props: HeadingProps): React.ReactNode {\n return (\n <Heading variant=\"heading5\" {...props}>\n {props.children}\n </Heading>\n );\n}\n\nfunction CaptionLabel(props: TypoProps): React.ReactNode {\n return (\n <Typo color=\"gray\" variant=\"caption\" weight=\"bold\" {...props}>\n {props.children}\n </Typo>\n );\n}\n\nfunction BodyLabel(props: TypoProps): React.ReactNode {\n return (\n <Typo variant=\"body\" weight=\"bold\" {...props}>\n {props.children}\n </Typo>\n );\n}\n\nconst Label = forwardRef<HTMLLabelElement, FormLabelProps>(\n ({ children, className, variant, ...rest }, ref) => {\n const Comp = useMemo(() => {\n switch (variant) {\n case 'title':\n return HeadingLabel;\n case 'caption':\n return CaptionLabel;\n case 'body':\n default:\n return BodyLabel;\n }\n }, [variant]);\n\n const fieldProps = useContext(FieldContext);\n return (\n <RadixForm.Label\n {...rest}\n asChild\n className={`FormLabel ${className || ''}`}\n ref={ref}\n >\n <Comp>\n {children}\n {fieldProps.required ? (\n <Typo as=\"span\" color=\"tomato\">\n {` *`}\n </Typo>\n ) : null}\n </Comp>\n </RadixForm.Label>\n );\n }\n);\nLabel.displayName = 'FORM_Label';\n\nconst Message = forwardRef<HTMLSpanElement, RadixForm.FormMessageProps>(\n ({ children, className, ...rest }, ref) => {\n return (\n <RadixForm.Message\n {...rest}\n asChild\n className={`FormMessage ${className || ''}`}\n ref={ref}\n >\n <Typo color=\"red\">{children}</Typo>\n </RadixForm.Message>\n );\n }\n);\nMessage.displayName = 'FORM_Message';\n\ntype ControlProps = Omit<RadixForm.FormControlProps, 'required'>;\nconst Control = forwardRef<HTMLInputElement, ControlProps>(\n ({ className, ...rest }, ref) => {\n const fieldProps = useContext(FieldContext);\n return (\n <RadixForm.Control\n {...rest}\n className={`FormControl ${className || ''}`}\n ref={ref}\n required={fieldProps.required}\n />\n );\n }\n);\nControl.displayName = 'FORM_Control';\n\ninterface FormItemProps extends FormFieldProps {\n children: React.ReactNode;\n label: string;\n labelVariant?: FormLabelProps['variant'];\n errorMessage?: string;\n}\n\nexport function FormItem({\n label,\n labelVariant,\n children,\n errorMessage,\n ...fieldProps\n}: FormItemProps): React.ReactNode {\n return (\n <Form.Field {...fieldProps}>\n <Form.Label variant={labelVariant}>{label}</Form.Label>\n {children}\n <Form.Message forceMatch={Boolean(errorMessage)}>\n {errorMessage}\n </Form.Message>\n </Form.Field>\n );\n}\n\nexport const Form = {\n Root,\n Field,\n Label,\n Message,\n Control: RadixForm.Control,\n Submit: RadixForm.Submit,\n FormItem,\n};\n","import {\n Heading as RadixHeading,\n type HeadingProps as RadixHeadingProps,\n} from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { useMemo } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\n\nexport { Heading as RadixHeading } from '@radix-ui/themes';\ntype HeadingVariant =\n | 'heading1'\n | 'heading2'\n | 'heading3'\n | 'heading4'\n | 'heading5';\nexport type HeadingProps = RadixHeadingProps & {\n variant?: Responsive<HeadingVariant>;\n};\n\ntype HeadingSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';\n\nconst mapVariant = (variant?: HeadingVariant): HeadingSize | undefined => {\n switch (variant) {\n case 'heading1':\n return '7';\n case 'heading2':\n return '6';\n case 'heading3':\n return '5';\n case 'heading4':\n return '4';\n case 'heading5':\n return '3';\n default:\n return undefined;\n }\n};\n\nexport function Heading(props: HeadingProps): React.ReactNode {\n const { size, children, variant, ...rest } = props;\n const radixSize = useMemo<RadixHeadingProps['size']>(() => {\n return variant\n ? mapWithResponsive({\n value: variant,\n mapFn: mapVariant,\n })\n : size;\n \n }, [size, variant]);\n\n return (\n <RadixHeading {...rest} size={radixSize}>\n {children}\n </RadixHeading>\n );\n}\n","import type { Breakpoint, Responsive } from \"@radix-ui/themes/props\";\n\nexport const mapWithResponsive = <T extends string,K extends string>(\n args: {value: Responsive<T>, mapFn: (value?:T)=>K |undefined}\n): Responsive<K> | undefined => {\n const {value, mapFn} = args;\n if(typeof value === 'string'){\n return mapFn(value);\n };\n \n if(typeof value === 'object'){\n const newObj: Partial<Record<Breakpoint, K>> = {};\n let key: Breakpoint;\n for(key in value){\n newObj[key] = mapFn(value[key]);\n }\n return newObj;\n }\n return value;\n};\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport React, { useMemo, forwardRef } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\n\nexport type TypoProps = RadixTextProps & {\n variant?: Responsive<'body' | 'caption' | 'subtitle'>;\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n (props: TypoProps, ref): React.ReactNode => {\n const { size, variant, children, ...rest } = props;\n\n const radixSize = useMemo<RadixTextProps['size']>(() => {\n if (size !== undefined) return size;\n\n if (variant === undefined) return '2';\n\n return mapWithResponsive({\n value: variant,\n mapFn: (variantValue?: 'body' | 'caption' | 'subtitle') => {\n switch (variantValue) {\n case 'caption':\n return '1';\n case 'subtitle':\n return '3';\n case 'body':\n default:\n return '2';\n }\n },\n });\n }, [size, variant]);\n\n return (\n <RadixText {...rest} ref={ref} size={radixSize}>\n {children}\n </RadixText>\n );\n }\n);\n\nTypo.displayName = 'Typo';\n","import { createContext, useContext } from 'react';\n\ninterface UIStateContextType {\n isMobile: boolean;\n}\n\nexport const UIStateContext = createContext<UIStateContextType>({\n isMobile: false,\n});\n\nexport type UiStateProviderProps = React.ReactNode;\n\nexport function UIStateProvider({\n children,\n isMobile,\n}: {\n children: UiStateProviderProps;\n isMobile: boolean;\n}): React.ReactElement {\n return (\n <UIStateContext.Provider value={{ isMobile }}>\n {children}\n </UIStateContext.Provider>\n );\n}\n\nexport const useUIState = (): UIStateContextType => {\n try {\n const state = useContext(UIStateContext);\n return state;\n } catch (error) {\n throw new Error('UIStateProvider not found');\n }\n};"],"mappings":"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","names":["import_react","import_react","import_themes","Heading","RadixHeading","import_themes","import_react","import_jsx_runtime","RadixText","import_jsx_runtime","Root","Field","Heading","Label","Message","Control","import_jsx_runtime","import_react","import_jsx_runtime"]}
|
package/dist/context/index.js
CHANGED
|
@@ -2,8 +2,8 @@ import "../chunk-P5EMTC35.js";
|
|
|
2
2
|
import {
|
|
3
3
|
DynamicFormProvider,
|
|
4
4
|
useDynamicForm
|
|
5
|
-
} from "../chunk-
|
|
6
|
-
import "../chunk-
|
|
5
|
+
} from "../chunk-4U6DFH7Z.js";
|
|
6
|
+
import "../chunk-QDC3LFHS.js";
|
|
7
7
|
import "../chunk-BESTU2AY.js";
|
|
8
8
|
import {
|
|
9
9
|
UIStateContext,
|
package/dist/index.cjs
CHANGED
|
@@ -1999,7 +1999,10 @@ function HeadingLabel(props) {
|
|
|
1999
1999
|
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Heading2, __spreadProps(__spreadValues({ variant: "heading5" }, props), { children: props.children }));
|
|
2000
2000
|
}
|
|
2001
2001
|
function CaptionLabel(props) {
|
|
2002
|
-
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Typo, __spreadProps(__spreadValues({ color: "gray", variant: "caption" }, props), { children: props.children }));
|
|
2002
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Typo, __spreadProps(__spreadValues({ color: "gray", variant: "caption", weight: "bold" }, props), { children: props.children }));
|
|
2003
|
+
}
|
|
2004
|
+
function BodyLabel(props) {
|
|
2005
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Typo, __spreadProps(__spreadValues({ variant: "body", weight: "bold" }, props), { children: props.children }));
|
|
2003
2006
|
}
|
|
2004
2007
|
var Label2 = (0, import_react22.forwardRef)(
|
|
2005
2008
|
(_a, ref) => {
|
|
@@ -2012,7 +2015,7 @@ var Label2 = (0, import_react22.forwardRef)(
|
|
|
2012
2015
|
return CaptionLabel;
|
|
2013
2016
|
case "body":
|
|
2014
2017
|
default:
|
|
2015
|
-
return
|
|
2018
|
+
return BodyLabel;
|
|
2016
2019
|
}
|
|
2017
2020
|
}, [variant]);
|
|
2018
2021
|
const fieldProps = (0, import_react22.useContext)(FieldContext);
|
|
@@ -5758,10 +5761,14 @@ function scrollToFirstError(errors, _fields) {
|
|
|
5758
5761
|
if (!firstErrorFieldName) return;
|
|
5759
5762
|
let fieldElement = document.querySelector(`[name="${firstErrorFieldName}"]`);
|
|
5760
5763
|
if (!fieldElement) {
|
|
5761
|
-
fieldElement = document.querySelector(
|
|
5764
|
+
fieldElement = document.querySelector(
|
|
5765
|
+
`[data-field-name="${firstErrorFieldName}"]`
|
|
5766
|
+
);
|
|
5762
5767
|
}
|
|
5763
5768
|
if (!fieldElement) {
|
|
5764
|
-
fieldElement = document.querySelector(
|
|
5769
|
+
fieldElement = document.querySelector(
|
|
5770
|
+
`[data-error-field="${firstErrorFieldName}"]`
|
|
5771
|
+
);
|
|
5765
5772
|
}
|
|
5766
5773
|
if (fieldElement) {
|
|
5767
5774
|
fieldElement.scrollIntoView({
|
|
@@ -5790,7 +5797,10 @@ function DynamicFormRoot({
|
|
|
5790
5797
|
if (field.type === "choices") {
|
|
5791
5798
|
schema[field.name] = Yup2.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`);
|
|
5792
5799
|
} else if (field.type === "yes_no") {
|
|
5793
|
-
schema[field.name] = Yup2.boolean().oneOf(
|
|
5800
|
+
schema[field.name] = Yup2.boolean().oneOf(
|
|
5801
|
+
[true],
|
|
5802
|
+
`${field.label}\uC5D0 \uB3D9\uC758\uD574\uC8FC\uC138\uC694`
|
|
5803
|
+
);
|
|
5794
5804
|
} else {
|
|
5795
5805
|
schema[field.name] = Yup2.string().required(
|
|
5796
5806
|
`${field.label}\uC740(\uB294) \uD544\uC218\uC785\uB2C8\uB2E4`
|
|
@@ -5800,9 +5810,12 @@ function DynamicFormRoot({
|
|
|
5800
5810
|
});
|
|
5801
5811
|
return Object.keys(schema).length > 0 ? Yup2.object(schema) : void 0;
|
|
5802
5812
|
}, [fields]);
|
|
5803
|
-
const handleSubmit = (0, import_react44.useCallback)(
|
|
5804
|
-
|
|
5805
|
-
|
|
5813
|
+
const handleSubmit = (0, import_react44.useCallback)(
|
|
5814
|
+
(values) => __async(null, null, function* () {
|
|
5815
|
+
yield onSubmit(values);
|
|
5816
|
+
}),
|
|
5817
|
+
[onSubmit]
|
|
5818
|
+
);
|
|
5806
5819
|
const formik = (0, import_formik2.useFormik)({
|
|
5807
5820
|
initialValues: fields.reduce((acc, field) => {
|
|
5808
5821
|
if (field.type === "choices") {
|
|
@@ -5829,7 +5842,16 @@ function DynamicFormRoot({
|
|
|
5829
5842
|
};
|
|
5830
5843
|
}
|
|
5831
5844
|
}, [formik.submitCount, formik.errors, fields]);
|
|
5832
|
-
return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
|
|
5845
|
+
return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
|
|
5846
|
+
DynamicFormProvider,
|
|
5847
|
+
{
|
|
5848
|
+
fields,
|
|
5849
|
+
formStyle,
|
|
5850
|
+
formik,
|
|
5851
|
+
readonly,
|
|
5852
|
+
children
|
|
5853
|
+
}
|
|
5854
|
+
);
|
|
5833
5855
|
}
|
|
5834
5856
|
function DynamicFormFieldList({
|
|
5835
5857
|
fields: fieldsProp,
|
|
@@ -5854,8 +5876,8 @@ function DynamicFormFieldList({
|
|
|
5854
5876
|
name: field.name,
|
|
5855
5877
|
required: field.required,
|
|
5856
5878
|
children: [
|
|
5857
|
-
/* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
|
|
5858
|
-
|
|
5879
|
+
field.description && field.type !== "yes_no" ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Typo, { variant: "caption", children: field.description }) : null,
|
|
5880
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsx)(DynamicFormField, { field })
|
|
5859
5881
|
]
|
|
5860
5882
|
}
|
|
5861
5883
|
)
|
|
@@ -5933,11 +5955,19 @@ function createYupValidation(field, validation) {
|
|
|
5933
5955
|
}
|
|
5934
5956
|
if (field.required) {
|
|
5935
5957
|
if (field.type === "yes_no") {
|
|
5936
|
-
schema = schema.oneOf(
|
|
5958
|
+
schema = schema.oneOf(
|
|
5959
|
+
[true],
|
|
5960
|
+
validation.message || `${field.label}\uC5D0 \uB3D9\uC758\uD574\uC8FC\uC138\uC694`
|
|
5961
|
+
);
|
|
5937
5962
|
} else if (field.type === "choices") {
|
|
5938
|
-
schema = schema.min(
|
|
5963
|
+
schema = schema.min(
|
|
5964
|
+
1,
|
|
5965
|
+
validation.message || `${field.label}\uC744(\uB97C) \uD558\uB098 \uC774\uC0C1 \uC120\uD0DD\uD574\uC8FC\uC138\uC694`
|
|
5966
|
+
);
|
|
5939
5967
|
} else {
|
|
5940
|
-
schema = schema.required(
|
|
5968
|
+
schema = schema.required(
|
|
5969
|
+
validation.message || `${field.label}\uC740(\uB294) \uD544\uC218\uC785\uB2C8\uB2E4`
|
|
5970
|
+
);
|
|
5941
5971
|
}
|
|
5942
5972
|
}
|
|
5943
5973
|
return schema;
|