@tipp/ui 2.3.12 → 2.3.14
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 +1 -1
- package/dist/app/index.cjs.map +1 -1
- package/dist/app/index.js +21 -21
- package/dist/app/platform/edit-coaching-time.cjs +1 -1
- package/dist/app/platform/edit-coaching-time.cjs.map +1 -1
- package/dist/app/platform/edit-coaching-time.js +17 -17
- package/dist/app/platform/edit-service-type.cjs +1 -1
- package/dist/app/platform/edit-service-type.cjs.map +1 -1
- package/dist/app/platform/edit-service-type.js +17 -17
- package/dist/app/platform/goal-manage-card-edit.cjs +1 -1
- package/dist/app/platform/goal-manage-card-edit.cjs.map +1 -1
- package/dist/app/platform/goal-manage-card-edit.js +17 -17
- package/dist/app/platform/on-offline-radio-card.cjs +1 -1
- package/dist/app/platform/on-offline-radio-card.cjs.map +1 -1
- package/dist/app/platform/on-offline-radio-card.js +17 -17
- package/dist/app/platform/reservation-card.cjs +1 -1
- package/dist/app/platform/reservation-card.cjs.map +1 -1
- package/dist/app/platform/reservation-card.js +17 -17
- package/dist/app/platform/session-card.cjs +1 -1
- package/dist/app/platform/session-card.cjs.map +1 -1
- package/dist/app/platform/session-card.js +17 -17
- package/dist/app/platform/userInfos/coaching-customer-info/index.js +4 -4
- package/dist/chunk-3RTIQ36S.js +222 -0
- package/dist/chunk-3RTIQ36S.js.map +1 -0
- package/dist/chunk-4CAKGS6P.js +196 -0
- package/dist/chunk-4CAKGS6P.js.map +1 -0
- package/dist/chunk-6IMCKSQD.js +69 -0
- package/dist/chunk-6IMCKSQD.js.map +1 -0
- package/dist/chunk-6MQMVYEP.js +30 -0
- package/dist/chunk-6MQMVYEP.js.map +1 -0
- package/dist/chunk-BN24NIPU.js +64 -0
- package/dist/chunk-BN24NIPU.js.map +1 -0
- package/dist/chunk-BXD634IB.js +196 -0
- package/dist/chunk-BXD634IB.js.map +1 -0
- package/dist/chunk-EEJ2JXHV.js +139 -0
- package/dist/chunk-EEJ2JXHV.js.map +1 -0
- package/dist/chunk-EVZDBCE5.js +196 -0
- package/dist/chunk-EVZDBCE5.js.map +1 -0
- package/dist/chunk-GAXILFF4.js +63 -0
- package/dist/chunk-GAXILFF4.js.map +1 -0
- package/dist/chunk-GWJU4LIN.js +222 -0
- package/dist/chunk-GWJU4LIN.js.map +1 -0
- package/dist/chunk-GZTKJMEK.js +218 -0
- package/dist/chunk-GZTKJMEK.js.map +1 -0
- package/dist/chunk-JMYWVT4X.js +98 -0
- package/dist/chunk-JMYWVT4X.js.map +1 -0
- package/dist/chunk-LVZSTDXB.js +64 -0
- package/dist/chunk-LVZSTDXB.js.map +1 -0
- package/dist/chunk-NCSMSA3X.js +50 -0
- package/dist/chunk-NCSMSA3X.js.map +1 -0
- package/dist/chunk-NJMRRUNJ.js +218 -0
- package/dist/chunk-NJMRRUNJ.js.map +1 -0
- package/dist/chunk-PSDF4NMN.js +89 -0
- package/dist/chunk-PSDF4NMN.js.map +1 -0
- package/dist/chunk-T4XIMI4Y.js +64 -0
- package/dist/chunk-T4XIMI4Y.js.map +1 -0
- package/dist/chunk-TXMVRPAL.js +139 -0
- package/dist/chunk-TXMVRPAL.js.map +1 -0
- package/dist/chunk-U7MPO7V5.js +64 -0
- package/dist/chunk-U7MPO7V5.js.map +1 -0
- package/dist/chunk-USNFN36O.js +89 -0
- package/dist/chunk-USNFN36O.js.map +1 -0
- package/dist/chunk-YIDE5VOF.js +196 -0
- package/dist/chunk-YIDE5VOF.js.map +1 -0
- package/dist/context/dynamic-form-context.cjs +3 -2
- package/dist/context/dynamic-form-context.cjs.map +1 -1
- package/dist/context/dynamic-form-context.d.cts +2 -1
- package/dist/context/dynamic-form-context.d.ts +2 -1
- package/dist/context/dynamic-form-context.js +1 -1
- package/dist/context/index.cjs +3 -2
- package/dist/context/index.cjs.map +1 -1
- package/dist/context/index.js +1 -1
- package/dist/index.cjs +7 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.js +30 -30
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/index.js +2 -2
- package/dist/molecules/curriculumV2/CurriculumContents/curriculum-review.js +3 -3
- package/dist/molecules/curriculumV2/CurriculumContents/index.js +5 -5
- package/dist/molecules/curriculumV2/index.js +13 -13
- package/dist/molecules/dynamic-field.cjs.map +1 -1
- package/dist/molecules/dynamic-field.js +2 -2
- package/dist/molecules/dynamic-form.cjs +6 -4
- package/dist/molecules/dynamic-form.cjs.map +1 -1
- package/dist/molecules/dynamic-form.d.cts +2 -1
- package/dist/molecules/dynamic-form.d.ts +2 -1
- package/dist/molecules/dynamic-form.js +3 -3
- package/dist/molecules/expand-table/index.cjs +1 -1
- package/dist/molecules/expand-table/index.cjs.map +1 -1
- package/dist/molecules/expand-table/index.js +1 -1
- package/dist/molecules/index.cjs +7 -5
- package/dist/molecules/index.cjs.map +1 -1
- package/dist/molecules/index.js +23 -23
- package/package.json +1 -1
- package/src/context/dynamic-form-context.tsx +3 -1
- package/src/molecules/dynamic-form.tsx +3 -1
- package/src/molecules/expand-table/index.tsx +1 -1
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import {
|
|
2
|
+
start_review_default
|
|
3
|
+
} from "./chunk-GNTZY4DG.js";
|
|
4
|
+
import {
|
|
5
|
+
ReviewQuestion_default
|
|
6
|
+
} from "./chunk-GAXILFF4.js";
|
|
7
|
+
import {
|
|
8
|
+
complete_review_default
|
|
9
|
+
} from "./chunk-W747CDDK.js";
|
|
10
|
+
import {
|
|
11
|
+
CurriculumReviewProvider,
|
|
12
|
+
useCurriculumReviewContext
|
|
13
|
+
} from "./chunk-GMKRNFH5.js";
|
|
14
|
+
|
|
15
|
+
// src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/index.tsx
|
|
16
|
+
import { jsx } from "react/jsx-runtime";
|
|
17
|
+
function CurriculumReviewStepsInner() {
|
|
18
|
+
const {
|
|
19
|
+
formik,
|
|
20
|
+
step,
|
|
21
|
+
handleStart,
|
|
22
|
+
handleNext,
|
|
23
|
+
handlePrev,
|
|
24
|
+
onClickReviewMyAnswer,
|
|
25
|
+
handleSubmit,
|
|
26
|
+
currentQuestion,
|
|
27
|
+
currentAnswer,
|
|
28
|
+
currentError,
|
|
29
|
+
reviewContents,
|
|
30
|
+
handleAnswerChange
|
|
31
|
+
} = useCurriculumReviewContext();
|
|
32
|
+
const { questions } = reviewContents;
|
|
33
|
+
if (step === 0) {
|
|
34
|
+
return /* @__PURE__ */ jsx(start_review_default, { onStart: handleStart });
|
|
35
|
+
}
|
|
36
|
+
if (step > 0 && step <= questions.length && currentQuestion) {
|
|
37
|
+
return /* @__PURE__ */ jsx(
|
|
38
|
+
ReviewQuestion_default,
|
|
39
|
+
{
|
|
40
|
+
answer: currentAnswer,
|
|
41
|
+
error: currentError,
|
|
42
|
+
index: step - 1,
|
|
43
|
+
isLast: step === questions.length,
|
|
44
|
+
isLoading: formik.isSubmitting,
|
|
45
|
+
isNextDisabled: currentError !== void 0,
|
|
46
|
+
onChange: handleAnswerChange,
|
|
47
|
+
onNext: handleNext,
|
|
48
|
+
onPrev: handlePrev,
|
|
49
|
+
onSubmit: handleSubmit,
|
|
50
|
+
question: currentQuestion,
|
|
51
|
+
total: questions.length
|
|
52
|
+
}
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
return /* @__PURE__ */ jsx(complete_review_default, { onClickReviewMyAnswer });
|
|
56
|
+
}
|
|
57
|
+
function CurriculumReviewSteps({
|
|
58
|
+
contents,
|
|
59
|
+
title,
|
|
60
|
+
onClickEndReview,
|
|
61
|
+
onSubmit,
|
|
62
|
+
defaultValues,
|
|
63
|
+
curriculum,
|
|
64
|
+
onReviewValueChange,
|
|
65
|
+
mode,
|
|
66
|
+
done
|
|
67
|
+
}) {
|
|
68
|
+
return /* @__PURE__ */ jsx(
|
|
69
|
+
CurriculumReviewProvider,
|
|
70
|
+
{
|
|
71
|
+
curriculum,
|
|
72
|
+
defaultValues,
|
|
73
|
+
done,
|
|
74
|
+
mode,
|
|
75
|
+
onClickEndReview,
|
|
76
|
+
onReviewValueChange,
|
|
77
|
+
onSubmit,
|
|
78
|
+
reviewContents: contents,
|
|
79
|
+
sectionTitle: title,
|
|
80
|
+
children: /* @__PURE__ */ jsx(CurriculumReviewStepsInner, {})
|
|
81
|
+
}
|
|
82
|
+
);
|
|
83
|
+
}
|
|
84
|
+
var CurriculumReviewSteps_default = CurriculumReviewSteps;
|
|
85
|
+
|
|
86
|
+
export {
|
|
87
|
+
CurriculumReviewSteps_default
|
|
88
|
+
};
|
|
89
|
+
//# sourceMappingURL=chunk-USNFN36O.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/index.tsx"],"sourcesContent":["import React from 'react';\nimport { type CurriculumReviewContents } from '@/types/curriculumContents.type';\nimport type { Curriculum } from '@/types'; \nimport {\n CurriculumReviewProvider,\n useCurriculumReviewContext,\n} from './curriculum-review-context';\nimport StartReview from './start-review';\nimport CompleteReview from './complete-review';\nimport ReviewQuestion from './ReviewQuestion';\n \nfunction CurriculumReviewStepsInner(): React.ReactNode {\n const {\n formik,\n step,\n handleStart,\n handleNext,\n handlePrev,\n onClickReviewMyAnswer,\n handleSubmit,\n currentQuestion,\n currentAnswer,\n currentError,\n reviewContents,\n handleAnswerChange,\n } = useCurriculumReviewContext();\n const { questions } = reviewContents;\n\n if (step === 0) {\n return <StartReview onStart={handleStart} />;\n }\n if (step > 0 && step <= questions.length && currentQuestion) {\n return (\n <ReviewQuestion\n answer={currentAnswer}\n error={currentError}\n index={step - 1}\n isLast={step === questions.length}\n isLoading={formik.isSubmitting}\n isNextDisabled={currentError !== undefined}\n onChange={handleAnswerChange}\n onNext={handleNext}\n onPrev={handlePrev}\n onSubmit={handleSubmit}\n question={currentQuestion}\n total={questions.length}\n />\n );\n }\n return <CompleteReview onClickReviewMyAnswer={onClickReviewMyAnswer} />;\n}\n\ninterface CurriculumReviewStepsProps {\n contents: CurriculumReviewContents;\n title: string | undefined;\n onClickEndReview: () => void;\n onSubmit: (values: Record<string, string>) => Promise<boolean>;\n defaultValues?: Record<string, string>;\n curriculum: Curriculum;\n onReviewValueChange: ({\n reviewId,\n answer,\n }: {\n reviewId: string;\n answer: Record<string, string>;\n }) => void;\n mode: 'edit' | 'create';\n done: boolean; \n}\n\nfunction CurriculumReviewSteps({\n contents,\n title,\n onClickEndReview,\n onSubmit,\n defaultValues,\n curriculum,\n onReviewValueChange,\n mode,\n done,\n}: CurriculumReviewStepsProps): React.ReactNode { \n\n return (\n <CurriculumReviewProvider\n curriculum={curriculum}\n defaultValues={defaultValues}\n done={done}\n mode={mode}\n onClickEndReview={onClickEndReview}\n onReviewValueChange={onReviewValueChange}\n onSubmit={onSubmit}\n reviewContents={contents}\n sectionTitle={title}\n >\n <CurriculumReviewStepsInner />\n </CurriculumReviewProvider>\n );\n}\n\nexport default CurriculumReviewSteps;\n"],"mappings":";;;;;;;;;;;;;;;AA6BW;AAlBX,SAAS,6BAA8C;AACrD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,2BAA2B;AAC/B,QAAM,EAAE,UAAU,IAAI;AAEtB,MAAI,SAAS,GAAG;AACd,WAAO,oBAAC,wBAAY,SAAS,aAAa;AAAA,EAC5C;AACA,MAAI,OAAO,KAAK,QAAQ,UAAU,UAAU,iBAAiB;AAC3D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,OAAO,OAAO;AAAA,QACd,QAAQ,SAAS,UAAU;AAAA,QAC3B,WAAW,OAAO;AAAA,QAClB,gBAAgB,iBAAiB;AAAA,QACjC,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,UAAU;AAAA,QACV,OAAO,UAAU;AAAA;AAAA,IACnB;AAAA,EAEJ;AACA,SAAO,oBAAC,2BAAe,uBAA8C;AACvE;AAoBA,SAAS,sBAAsB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgD;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB,cAAc;AAAA,MAEd,8BAAC,8BAA2B;AAAA;AAAA,EAC9B;AAEJ;AAEA,IAAO,gCAAQ;","names":[]}
|
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
import {
|
|
2
|
+
CurriculumReviewSteps_default
|
|
3
|
+
} from "./chunk-OX3N37YY.js";
|
|
4
|
+
import {
|
|
5
|
+
useCurriculumContext
|
|
6
|
+
} from "./chunk-ZFWZAZPG.js";
|
|
7
|
+
import {
|
|
8
|
+
Dialog
|
|
9
|
+
} from "./chunk-JQ7VQ5SB.js";
|
|
10
|
+
import {
|
|
11
|
+
IconButton
|
|
12
|
+
} from "./chunk-XK6VEVOK.js";
|
|
13
|
+
import {
|
|
14
|
+
Flex
|
|
15
|
+
} from "./chunk-25HMMI7R.js";
|
|
16
|
+
import {
|
|
17
|
+
Button
|
|
18
|
+
} from "./chunk-ZVDAEY5Q.js";
|
|
19
|
+
import {
|
|
20
|
+
Box
|
|
21
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
22
|
+
import {
|
|
23
|
+
Typo
|
|
24
|
+
} from "./chunk-PMJIFLDT.js";
|
|
25
|
+
import {
|
|
26
|
+
__spreadValues
|
|
27
|
+
} from "./chunk-CRTRMMJ7.js";
|
|
28
|
+
|
|
29
|
+
// src/molecules/curriculumV2/CurriculumContents/curriculum-review.tsx
|
|
30
|
+
import { useCallback, useMemo, useState } from "react";
|
|
31
|
+
import { Cross1Icon } from "@radix-ui/react-icons";
|
|
32
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
33
|
+
function CurriculumReview(props) {
|
|
34
|
+
const { item, sectionTitle } = props;
|
|
35
|
+
const { description, buttonTitle } = item;
|
|
36
|
+
const {
|
|
37
|
+
curriculum,
|
|
38
|
+
onReviewSubmit: _onReviewSubmit,
|
|
39
|
+
onReviewValueChange: _onReviewValueChange,
|
|
40
|
+
curriculumReviewAnswers,
|
|
41
|
+
tempCurriculumReviewAnswers,
|
|
42
|
+
curriculumCompleteMap
|
|
43
|
+
} = useCurriculumContext();
|
|
44
|
+
const [open, setOpen] = useState(false);
|
|
45
|
+
const [isChanged, setIsChanged] = useState(false);
|
|
46
|
+
const [closeDialogOpen, setCloseDialogOpen] = useState(false);
|
|
47
|
+
const onReviewValueChange = useCallback(
|
|
48
|
+
({
|
|
49
|
+
reviewId,
|
|
50
|
+
answer
|
|
51
|
+
}) => {
|
|
52
|
+
if (curriculumReviewAnswers[reviewId] === answer[reviewId]) {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
setIsChanged(true);
|
|
56
|
+
_onReviewValueChange({ reviewId, answer });
|
|
57
|
+
},
|
|
58
|
+
[_onReviewValueChange, curriculumReviewAnswers]
|
|
59
|
+
);
|
|
60
|
+
const onReviewSubmit = useCallback(
|
|
61
|
+
(values) => {
|
|
62
|
+
return _onReviewSubmit({ reviewId: item.uuid, answer: values }).then(
|
|
63
|
+
(result) => {
|
|
64
|
+
setIsChanged(false);
|
|
65
|
+
return result;
|
|
66
|
+
}
|
|
67
|
+
);
|
|
68
|
+
},
|
|
69
|
+
[item.uuid, _onReviewSubmit]
|
|
70
|
+
);
|
|
71
|
+
const onClickEndReview = useCallback(() => {
|
|
72
|
+
setOpen(false);
|
|
73
|
+
}, []);
|
|
74
|
+
const onClickCloseDrawer = useCallback(() => {
|
|
75
|
+
if (isChanged) {
|
|
76
|
+
setCloseDialogOpen(true);
|
|
77
|
+
} else {
|
|
78
|
+
setOpen(false);
|
|
79
|
+
}
|
|
80
|
+
}, [isChanged]);
|
|
81
|
+
const mode = useMemo(() => {
|
|
82
|
+
return item.questions.every(
|
|
83
|
+
(question) => curriculumReviewAnswers[question.uuid] && curriculumReviewAnswers[question.uuid] !== ""
|
|
84
|
+
) ? "edit" : "create";
|
|
85
|
+
}, [curriculumReviewAnswers, item.questions]);
|
|
86
|
+
const defaultValues = useMemo(() => {
|
|
87
|
+
const allAnswers = __spreadValues(__spreadValues({}, tempCurriculumReviewAnswers), curriculumReviewAnswers);
|
|
88
|
+
return item.questions.reduce((acc, question) => {
|
|
89
|
+
acc[question.uuid] = allAnswers[question.uuid] || "";
|
|
90
|
+
return acc;
|
|
91
|
+
}, {});
|
|
92
|
+
}, [curriculumReviewAnswers, item.questions, tempCurriculumReviewAnswers]);
|
|
93
|
+
const done = useMemo(() => {
|
|
94
|
+
return Boolean(curriculumCompleteMap[item.uuid]);
|
|
95
|
+
}, [curriculumCompleteMap, item.uuid]);
|
|
96
|
+
const bgColor = done ? "var(--color-panel-solid)" : void 0;
|
|
97
|
+
return /* @__PURE__ */ jsxs(Dialog.Root, { onOpenChange: setOpen, open, children: [
|
|
98
|
+
/* @__PURE__ */ jsxs(
|
|
99
|
+
Flex,
|
|
100
|
+
{
|
|
101
|
+
align: "center",
|
|
102
|
+
direction: "column",
|
|
103
|
+
height: "100%",
|
|
104
|
+
justify: "center",
|
|
105
|
+
px: "3",
|
|
106
|
+
py: "3",
|
|
107
|
+
style: {
|
|
108
|
+
backgroundImage: `url(https://tipp-coaching-live.s3.ap-northeast-2.amazonaws.com/images/curriculum_review_bg.png)`,
|
|
109
|
+
backgroundPosition: "center",
|
|
110
|
+
backgroundSize: "cover",
|
|
111
|
+
backgroundRepeat: "no-repeat"
|
|
112
|
+
},
|
|
113
|
+
width: "100%",
|
|
114
|
+
children: [
|
|
115
|
+
/* @__PURE__ */ jsx(Typo, { color: "gray", weight: "bold", children: curriculum.title }),
|
|
116
|
+
/* @__PURE__ */ jsx(Typo, { align: "center", as: "p", color: "gray", children: description }),
|
|
117
|
+
/* @__PURE__ */ jsx(Dialog.Trigger, { children: /* @__PURE__ */ jsx(
|
|
118
|
+
Button,
|
|
119
|
+
{
|
|
120
|
+
mt: "3",
|
|
121
|
+
style: { minWidth: 232, backgroundColor: bgColor },
|
|
122
|
+
variant: done ? "outline" : "solid",
|
|
123
|
+
children: /* @__PURE__ */ jsx(Typo, { truncate: true, children: done ? "\uB098\uC758 \uC751\uB2F5 \uB2E4\uC2DC\uBCF4\uAE30" : buttonTitle })
|
|
124
|
+
}
|
|
125
|
+
) })
|
|
126
|
+
]
|
|
127
|
+
}
|
|
128
|
+
),
|
|
129
|
+
/* @__PURE__ */ jsx(
|
|
130
|
+
Dialog.Content,
|
|
131
|
+
{
|
|
132
|
+
height: "100%",
|
|
133
|
+
hideCloseButton: true,
|
|
134
|
+
style: { borderRadius: 0, padding: 0 },
|
|
135
|
+
title: "",
|
|
136
|
+
width: "100%",
|
|
137
|
+
children: /* @__PURE__ */ jsxs(
|
|
138
|
+
Flex,
|
|
139
|
+
{
|
|
140
|
+
align: "center",
|
|
141
|
+
height: "100%",
|
|
142
|
+
justify: "center",
|
|
143
|
+
pb: "3",
|
|
144
|
+
position: "relative",
|
|
145
|
+
width: "100%",
|
|
146
|
+
children: [
|
|
147
|
+
/* @__PURE__ */ jsx(
|
|
148
|
+
CurriculumReviewSteps_default,
|
|
149
|
+
{
|
|
150
|
+
contents: item,
|
|
151
|
+
curriculum,
|
|
152
|
+
defaultValues,
|
|
153
|
+
done,
|
|
154
|
+
mode,
|
|
155
|
+
onClickEndReview,
|
|
156
|
+
onReviewValueChange,
|
|
157
|
+
onSubmit: onReviewSubmit,
|
|
158
|
+
title: sectionTitle
|
|
159
|
+
}
|
|
160
|
+
),
|
|
161
|
+
/* @__PURE__ */ jsx(Box, { position: "absolute", right: "16px", top: "16px", children: /* @__PURE__ */ jsxs(
|
|
162
|
+
IconButton,
|
|
163
|
+
{
|
|
164
|
+
color: "gray",
|
|
165
|
+
onClick: onClickCloseDrawer,
|
|
166
|
+
variant: "ghost",
|
|
167
|
+
children: [
|
|
168
|
+
/* @__PURE__ */ jsx(Box, { display: { initial: "none", md: "block" }, children: /* @__PURE__ */ jsx(Cross1Icon, { height: 20, width: 20 }) }),
|
|
169
|
+
/* @__PURE__ */ jsx(Box, { display: { initial: "block", md: "none" }, children: /* @__PURE__ */ jsx(Cross1Icon, { height: 16, width: 16 }) })
|
|
170
|
+
]
|
|
171
|
+
}
|
|
172
|
+
) }),
|
|
173
|
+
/* @__PURE__ */ jsx(Dialog.Root, { onOpenChange: setCloseDialogOpen, open: closeDialogOpen, children: /* @__PURE__ */ jsx(
|
|
174
|
+
Dialog.Content,
|
|
175
|
+
{
|
|
176
|
+
buttons: /* @__PURE__ */ jsxs(Flex, { gap: "3", justify: "end", children: [
|
|
177
|
+
/* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { color: "gray", variant: "outline", children: "\uB3CC\uC544\uAC00\uAE30" }) }),
|
|
178
|
+
/* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { color: "red", onClick: onClickEndReview, children: "\uB098\uAC00\uAE30" }) })
|
|
179
|
+
] }),
|
|
180
|
+
title: "\uC791\uC131\uC744 \uC911\uB2E8\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?",
|
|
181
|
+
children: /* @__PURE__ */ jsx(Typo, { children: "\uD398\uC774\uC9C0\uC5D0\uC11C \uBC97\uC5B4\uB098\uBA74 \uC791\uC131\uD55C \uB0B4\uC6A9\uC774 \uC800\uC7A5\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4." })
|
|
182
|
+
}
|
|
183
|
+
) })
|
|
184
|
+
]
|
|
185
|
+
}
|
|
186
|
+
)
|
|
187
|
+
}
|
|
188
|
+
)
|
|
189
|
+
] });
|
|
190
|
+
}
|
|
191
|
+
var curriculum_review_default = CurriculumReview;
|
|
192
|
+
|
|
193
|
+
export {
|
|
194
|
+
curriculum_review_default
|
|
195
|
+
};
|
|
196
|
+
//# sourceMappingURL=chunk-YIDE5VOF.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumContents/curriculum-review.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from 'react';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { Box } from '@/atoms/box';\nimport { Button } from '@/atoms/button';\nimport { Dialog } from '@/atoms/dialog';\nimport { Flex } from '@/atoms/flex';\nimport { IconButton } from '@/atoms/icon-button';\nimport { Typo } from '@/atoms/typo';\nimport { type CurriculumReviewContents } from '@/types/curriculumContents.type';\nimport { useCurriculumContext } from '../curriculum-context';\nimport CurriculumReviewSteps from './CurriculumReviewSteps';\n\ninterface CurriculumReviewProps {\n item: CurriculumReviewContents;\n sectionTitle: string | undefined;\n}\n\nfunction CurriculumReview(props: CurriculumReviewProps): React.ReactNode {\n const { item, sectionTitle } = props;\n const { description, buttonTitle } = item;\n const {\n curriculum,\n onReviewSubmit: _onReviewSubmit,\n onReviewValueChange: _onReviewValueChange,\n curriculumReviewAnswers,\n tempCurriculumReviewAnswers,\n curriculumCompleteMap,\n } = useCurriculumContext();\n const [open, setOpen] = useState(false);\n const [isChanged, setIsChanged] = useState(false);\n const [closeDialogOpen, setCloseDialogOpen] = useState(false);\n\n const onReviewValueChange = useCallback(\n ({\n reviewId,\n answer,\n }: {\n reviewId: string;\n answer: Record<string, string>;\n }) => {\n if (curriculumReviewAnswers[reviewId] === answer[reviewId]) {\n return;\n }\n\n setIsChanged(true);\n _onReviewValueChange({ reviewId, answer });\n },\n [_onReviewValueChange, curriculumReviewAnswers]\n );\n\n const onReviewSubmit = useCallback(\n (values: Record<string, string>) => {\n return _onReviewSubmit({ reviewId: item.uuid, answer: values }).then(\n (result) => {\n setIsChanged(false);\n return result;\n }\n );\n },\n [item.uuid, _onReviewSubmit]\n );\n\n const onClickEndReview = useCallback(() => {\n setOpen(false);\n }, []);\n\n const onClickCloseDrawer = useCallback(() => {\n if (isChanged) {\n setCloseDialogOpen(true);\n } else {\n setOpen(false);\n }\n }, [isChanged]);\n\n const mode = useMemo(() => {\n return item.questions.every(\n (question) =>\n curriculumReviewAnswers[question.uuid] &&\n curriculumReviewAnswers[question.uuid] !== ''\n )\n ? 'edit'\n : 'create';\n }, [curriculumReviewAnswers, item.questions]);\n\n const defaultValues = useMemo(() => {\n const allAnswers = {\n ...tempCurriculumReviewAnswers,\n ...curriculumReviewAnswers,\n };\n\n return item.questions.reduce<Record<string, string>>((acc, question) => {\n acc[question.uuid] = allAnswers[question.uuid] || '';\n return acc;\n }, {});\n }, [curriculumReviewAnswers, item.questions, tempCurriculumReviewAnswers]);\n\n const done = useMemo(() => {\n return Boolean(curriculumCompleteMap[item.uuid]);\n }, [curriculumCompleteMap, item.uuid]);\n\n const bgColor = done ? 'var(--color-panel-solid)' : undefined;\n\n return (\n <Dialog.Root onOpenChange={setOpen} open={open}>\n <Flex\n align=\"center\"\n direction=\"column\"\n height=\"100%\"\n justify=\"center\"\n px=\"3\"\n py=\"3\"\n style={{\n backgroundImage: `url(https://tipp-coaching-live.s3.ap-northeast-2.amazonaws.com/images/curriculum_review_bg.png)`,\n backgroundPosition: 'center',\n backgroundSize: 'cover',\n backgroundRepeat: 'no-repeat',\n }}\n width=\"100%\"\n >\n <Typo color=\"gray\" weight=\"bold\">\n {curriculum.title}\n </Typo>\n <Typo align=\"center\" as=\"p\" color=\"gray\">\n {description}\n </Typo>\n\n <Dialog.Trigger>\n <Button\n mt=\"3\"\n style={{ minWidth: 232, backgroundColor: bgColor }}\n variant={done ? 'outline' : 'solid'}\n >\n <Typo truncate>{done ? '나의 응답 다시보기' : buttonTitle}</Typo>\n </Button>\n </Dialog.Trigger>\n </Flex>\n <Dialog.Content\n height=\"100%\"\n hideCloseButton\n style={{ borderRadius: 0, padding: 0 }}\n title=\"\"\n width=\"100%\"\n >\n <Flex\n align=\"center\"\n height=\"100%\"\n justify=\"center\"\n pb=\"3\"\n position=\"relative\"\n width=\"100%\"\n >\n <CurriculumReviewSteps\n contents={item}\n curriculum={curriculum}\n defaultValues={defaultValues}\n done={done}\n mode={mode}\n onClickEndReview={onClickEndReview}\n onReviewValueChange={onReviewValueChange}\n onSubmit={onReviewSubmit}\n title={sectionTitle}\n />\n {/* 닫기 버튼 */}\n <Box position=\"absolute\" right=\"16px\" top=\"16px\">\n <IconButton\n color=\"gray\"\n onClick={onClickCloseDrawer}\n variant=\"ghost\"\n >\n <Box display={{ initial: 'none', md: 'block' }}>\n <Cross1Icon height={20} width={20} />\n </Box>\n <Box display={{ initial: 'block', md: 'none' }}>\n <Cross1Icon height={16} width={16} />\n </Box>\n </IconButton>\n </Box>\n\n {/* 진짜 닫겠습니까 모달 */}\n <Dialog.Root onOpenChange={setCloseDialogOpen} open={closeDialogOpen}>\n <Dialog.Content\n buttons={\n <Flex gap=\"3\" justify=\"end\">\n <Dialog.Close asChild>\n <Button color=\"gray\" variant=\"outline\">\n 돌아가기\n </Button>\n </Dialog.Close>\n <Dialog.Close>\n <Button color=\"red\" onClick={onClickEndReview}>\n 나가기\n </Button>\n </Dialog.Close>\n </Flex>\n }\n title=\"작성을 중단하시겠습니까?\"\n >\n <Typo>페이지에서 벗어나면 작성한 내용이 저장되지 않습니다.</Typo>\n </Dialog.Content>\n </Dialog.Root>\n </Flex>\n </Dialog.Content>\n </Dialog.Root>\n );\n}\n\nexport default CurriculumReview;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,aAAa,SAAS,gBAAgB;AACtD,SAAS,kBAAkB;AAuGrB,SAeE,KAfF;AAvFN,SAAS,iBAAiB,OAA+C;AACvE,QAAM,EAAE,MAAM,aAAa,IAAI;AAC/B,QAAM,EAAE,aAAa,YAAY,IAAI;AACrC,QAAM;AAAA,IACJ;AAAA,IACA,gBAAgB;AAAA,IAChB,qBAAqB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,qBAAqB;AACzB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAE5D,QAAM,sBAAsB;AAAA,IAC1B,CAAC;AAAA,MACC;AAAA,MACA;AAAA,IACF,MAGM;AACJ,UAAI,wBAAwB,QAAQ,MAAM,OAAO,QAAQ,GAAG;AAC1D;AAAA,MACF;AAEA,mBAAa,IAAI;AACjB,2BAAqB,EAAE,UAAU,OAAO,CAAC;AAAA,IAC3C;AAAA,IACA,CAAC,sBAAsB,uBAAuB;AAAA,EAChD;AAEA,QAAM,iBAAiB;AAAA,IACrB,CAAC,WAAmC;AAClC,aAAO,gBAAgB,EAAE,UAAU,KAAK,MAAM,QAAQ,OAAO,CAAC,EAAE;AAAA,QAC9D,CAAC,WAAW;AACV,uBAAa,KAAK;AAClB,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,KAAK,MAAM,eAAe;AAAA,EAC7B;AAEA,QAAM,mBAAmB,YAAY,MAAM;AACzC,YAAQ,KAAK;AAAA,EACf,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,WAAW;AACb,yBAAmB,IAAI;AAAA,IACzB,OAAO;AACL,cAAQ,KAAK;AAAA,IACf;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,OAAO,QAAQ,MAAM;AACzB,WAAO,KAAK,UAAU;AAAA,MACpB,CAAC,aACC,wBAAwB,SAAS,IAAI,KACrC,wBAAwB,SAAS,IAAI,MAAM;AAAA,IAC/C,IACI,SACA;AAAA,EACN,GAAG,CAAC,yBAAyB,KAAK,SAAS,CAAC;AAE5C,QAAM,gBAAgB,QAAQ,MAAM;AAClC,UAAM,aAAa,kCACd,8BACA;AAGL,WAAO,KAAK,UAAU,OAA+B,CAAC,KAAK,aAAa;AACtE,UAAI,SAAS,IAAI,IAAI,WAAW,SAAS,IAAI,KAAK;AAClD,aAAO;AAAA,IACT,GAAG,CAAC,CAAC;AAAA,EACP,GAAG,CAAC,yBAAyB,KAAK,WAAW,2BAA2B,CAAC;AAEzE,QAAM,OAAO,QAAQ,MAAM;AACzB,WAAO,QAAQ,sBAAsB,KAAK,IAAI,CAAC;AAAA,EACjD,GAAG,CAAC,uBAAuB,KAAK,IAAI,CAAC;AAErC,QAAM,UAAU,OAAO,6BAA6B;AAEpD,SACE,qBAAC,OAAO,MAAP,EAAY,cAAc,SAAS,MAClC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,WAAU;AAAA,QACV,QAAO;AAAA,QACP,SAAQ;AAAA,QACR,IAAG;AAAA,QACH,IAAG;AAAA,QACH,OAAO;AAAA,UACL,iBAAiB;AAAA,UACjB,oBAAoB;AAAA,UACpB,gBAAgB;AAAA,UAChB,kBAAkB;AAAA,QACpB;AAAA,QACA,OAAM;AAAA,QAEN;AAAA,8BAAC,QAAK,OAAM,QAAO,QAAO,QACvB,qBAAW,OACd;AAAA,UACA,oBAAC,QAAK,OAAM,UAAS,IAAG,KAAI,OAAM,QAC/B,uBACH;AAAA,UAEA,oBAAC,OAAO,SAAP,EACC;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,OAAO,EAAE,UAAU,KAAK,iBAAiB,QAAQ;AAAA,cACjD,SAAS,OAAO,YAAY;AAAA,cAE5B,8BAAC,QAAK,UAAQ,MAAE,iBAAO,uDAAe,aAAY;AAAA;AAAA,UACpD,GACF;AAAA;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC,QAAO;AAAA,QACP,iBAAe;AAAA,QACf,OAAO,EAAE,cAAc,GAAG,SAAS,EAAE;AAAA,QACrC,OAAM;AAAA,QACN,OAAM;AAAA,QAEN;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,QAAO;AAAA,YACP,SAAQ;AAAA,YACR,IAAG;AAAA,YACH,UAAS;AAAA,YACT,OAAM;AAAA,YAEN;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAU;AAAA,kBACV;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,UAAU;AAAA,kBACV,OAAO;AAAA;AAAA,cACT;AAAA,cAEA,oBAAC,OAAI,UAAS,YAAW,OAAM,QAAO,KAAI,QACxC;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAM;AAAA,kBACN,SAAS;AAAA,kBACT,SAAQ;AAAA,kBAER;AAAA,wCAAC,OAAI,SAAS,EAAE,SAAS,QAAQ,IAAI,QAAQ,GAC3C,8BAAC,cAAW,QAAQ,IAAI,OAAO,IAAI,GACrC;AAAA,oBACA,oBAAC,OAAI,SAAS,EAAE,SAAS,SAAS,IAAI,OAAO,GAC3C,8BAAC,cAAW,QAAQ,IAAI,OAAO,IAAI,GACrC;AAAA;AAAA;AAAA,cACF,GACF;AAAA,cAGA,oBAAC,OAAO,MAAP,EAAY,cAAc,oBAAoB,MAAM,iBACnD;AAAA,gBAAC,OAAO;AAAA,gBAAP;AAAA,kBACC,SACE,qBAAC,QAAK,KAAI,KAAI,SAAQ,OACpB;AAAA,wCAAC,OAAO,OAAP,EAAa,SAAO,MACnB,8BAAC,UAAO,OAAM,QAAO,SAAQ,WAAU,sCAEvC,GACF;AAAA,oBACA,oBAAC,OAAO,OAAP,EACC,8BAAC,UAAO,OAAM,OAAM,SAAS,kBAAkB,gCAE/C,GACF;AAAA,qBACF;AAAA,kBAEF,OAAM;AAAA,kBAEN,8BAAC,QAAK,8JAA6B;AAAA;AAAA,cACrC,GACF;AAAA;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEA,IAAO,4BAAQ;","names":[]}
|
|
@@ -305,7 +305,8 @@ function DynamicFormProvider({
|
|
|
305
305
|
children,
|
|
306
306
|
fields,
|
|
307
307
|
formik,
|
|
308
|
-
readonly = false
|
|
308
|
+
readonly = false,
|
|
309
|
+
formStyle
|
|
309
310
|
}) {
|
|
310
311
|
const contextValue = {
|
|
311
312
|
formik,
|
|
@@ -324,7 +325,7 @@ function DynamicFormProvider({
|
|
|
324
325
|
handleChange: formik.handleChange,
|
|
325
326
|
handleBlur: formik.handleBlur
|
|
326
327
|
};
|
|
327
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DynamicFormContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Form.Root, { onSubmit: formik.handleSubmit, children }) });
|
|
328
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DynamicFormContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Form.Root, { onSubmit: formik.handleSubmit, style: formStyle, children }) });
|
|
328
329
|
}
|
|
329
330
|
function useDynamicForm() {
|
|
330
331
|
const context = (0, import_react4.useContext)(DynamicFormContext);
|
|
@@ -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}\n\nexport function DynamicFormProvider({\n children,\n fields,\n formik,\n readonly = false,\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}>{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\" {...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"]}
|
|
@@ -18,8 +18,9 @@ interface DynamicFormProviderProps {
|
|
|
18
18
|
fields: DynamicFormFieldSchema[];
|
|
19
19
|
formik: FormikProps<Record<string, unknown>>;
|
|
20
20
|
readonly?: boolean;
|
|
21
|
+
formStyle?: React__default.CSSProperties;
|
|
21
22
|
}
|
|
22
|
-
declare function DynamicFormProvider({ children, fields, formik, readonly, }: DynamicFormProviderProps): React__default.ReactElement;
|
|
23
|
+
declare function DynamicFormProvider({ children, fields, formik, readonly, formStyle, }: DynamicFormProviderProps): React__default.ReactElement;
|
|
23
24
|
declare function useDynamicForm(): DynamicFormContextValue;
|
|
24
25
|
|
|
25
26
|
export { type DynamicFormContextValue, DynamicFormProvider, useDynamicForm };
|
|
@@ -18,8 +18,9 @@ interface DynamicFormProviderProps {
|
|
|
18
18
|
fields: DynamicFormFieldSchema[];
|
|
19
19
|
formik: FormikProps<Record<string, unknown>>;
|
|
20
20
|
readonly?: boolean;
|
|
21
|
+
formStyle?: React__default.CSSProperties;
|
|
21
22
|
}
|
|
22
|
-
declare function DynamicFormProvider({ children, fields, formik, readonly, }: DynamicFormProviderProps): React__default.ReactElement;
|
|
23
|
+
declare function DynamicFormProvider({ children, fields, formik, readonly, formStyle, }: DynamicFormProviderProps): React__default.ReactElement;
|
|
23
24
|
declare function useDynamicForm(): DynamicFormContextValue;
|
|
24
25
|
|
|
25
26
|
export { type DynamicFormContextValue, DynamicFormProvider, useDynamicForm };
|
package/dist/context/index.cjs
CHANGED
|
@@ -310,7 +310,8 @@ function DynamicFormProvider({
|
|
|
310
310
|
children,
|
|
311
311
|
fields,
|
|
312
312
|
formik,
|
|
313
|
-
readonly = false
|
|
313
|
+
readonly = false,
|
|
314
|
+
formStyle
|
|
314
315
|
}) {
|
|
315
316
|
const contextValue = {
|
|
316
317
|
formik,
|
|
@@ -329,7 +330,7 @@ function DynamicFormProvider({
|
|
|
329
330
|
handleChange: formik.handleChange,
|
|
330
331
|
handleBlur: formik.handleBlur
|
|
331
332
|
};
|
|
332
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DynamicFormContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Form.Root, { onSubmit: formik.handleSubmit, children }) });
|
|
333
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DynamicFormContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Form.Root, { onSubmit: formik.handleSubmit, style: formStyle, children }) });
|
|
333
334
|
}
|
|
334
335
|
function useDynamicForm() {
|
|
335
336
|
const context = (0, import_react4.useContext)(DynamicFormContext);
|
|
@@ -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}\n\nexport function DynamicFormProvider({\n children,\n fields,\n formik,\n readonly = false,\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}>{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\" {...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"]}
|
package/dist/context/index.js
CHANGED
package/dist/index.cjs
CHANGED
|
@@ -2229,6 +2229,7 @@ var List = {
|
|
|
2229
2229
|
// src/molecules/expand-table/index.tsx
|
|
2230
2230
|
var import_react_table2 = require("@tanstack/react-table");
|
|
2231
2231
|
var import_react26 = require("react");
|
|
2232
|
+
var import_themes52 = require("@radix-ui/themes");
|
|
2232
2233
|
|
|
2233
2234
|
// src/molecules/expand-table/row.tsx
|
|
2234
2235
|
var import_react_table = require("@tanstack/react-table");
|
|
@@ -2298,7 +2299,6 @@ function Row(props) {
|
|
|
2298
2299
|
}
|
|
2299
2300
|
|
|
2300
2301
|
// src/molecules/expand-table/index.tsx
|
|
2301
|
-
var import_themes52 = require("@radix-ui/themes");
|
|
2302
2302
|
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
2303
2303
|
var sortButtonColorMapper = {
|
|
2304
2304
|
card: {
|
|
@@ -5432,7 +5432,8 @@ function DynamicFormProvider({
|
|
|
5432
5432
|
children,
|
|
5433
5433
|
fields,
|
|
5434
5434
|
formik,
|
|
5435
|
-
readonly = false
|
|
5435
|
+
readonly = false,
|
|
5436
|
+
formStyle
|
|
5436
5437
|
}) {
|
|
5437
5438
|
const contextValue = {
|
|
5438
5439
|
formik,
|
|
@@ -5451,7 +5452,7 @@ function DynamicFormProvider({
|
|
|
5451
5452
|
handleChange: formik.handleChange,
|
|
5452
5453
|
handleBlur: formik.handleBlur
|
|
5453
5454
|
};
|
|
5454
|
-
return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(DynamicFormContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Form.Root, { onSubmit: formik.handleSubmit, children }) });
|
|
5455
|
+
return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(DynamicFormContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Form.Root, { onSubmit: formik.handleSubmit, style: formStyle, children }) });
|
|
5455
5456
|
}
|
|
5456
5457
|
function useDynamicForm() {
|
|
5457
5458
|
const context = (0, import_react42.useContext)(DynamicFormContext);
|
|
@@ -5594,7 +5595,8 @@ function DynamicFormRoot({
|
|
|
5594
5595
|
initialValues: initialValues2 = {},
|
|
5595
5596
|
onSubmit,
|
|
5596
5597
|
children,
|
|
5597
|
-
readonly = false
|
|
5598
|
+
readonly = false,
|
|
5599
|
+
formStyle
|
|
5598
5600
|
}) {
|
|
5599
5601
|
const validationSchema = (0, import_react43.useMemo)(() => {
|
|
5600
5602
|
const schema = {};
|
|
@@ -5647,7 +5649,7 @@ function DynamicFormRoot({
|
|
|
5647
5649
|
};
|
|
5648
5650
|
}
|
|
5649
5651
|
}, [formik.submitCount, formik.errors, fields]);
|
|
5650
|
-
return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(DynamicFormProvider, { fields, formik, readonly, children });
|
|
5652
|
+
return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(DynamicFormProvider, { fields, formStyle, formik, readonly, children });
|
|
5651
5653
|
}
|
|
5652
5654
|
function DynamicFormFieldList({
|
|
5653
5655
|
fields: fieldsProp,
|