@tipp/ui 2.3.5 → 2.3.7
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.map +1 -1
- package/dist/app/index.js +83 -83
- package/dist/app/platform/coach-question-list.cjs.map +1 -1
- package/dist/app/platform/coach-question-list.js +30 -30
- package/dist/app/platform/contents-card.cjs.map +1 -1
- package/dist/app/platform/contents-card.js +30 -30
- package/dist/app/platform/curriculum-card.js +6 -6
- package/dist/app/platform/edit-coaching-time.cjs.map +1 -1
- package/dist/app/platform/edit-coaching-time.js +67 -67
- package/dist/app/platform/edit-service-type.cjs.map +1 -1
- package/dist/app/platform/edit-service-type.js +68 -68
- package/dist/app/platform/goal-manage-card-edit.cjs.map +1 -1
- package/dist/app/platform/goal-manage-card-edit.js +67 -67
- package/dist/app/platform/goal-manage-card-read.cjs.map +1 -1
- package/dist/app/platform/goal-manage-card-read.js +30 -30
- package/dist/app/platform/on-offline-radio-card.cjs.map +1 -1
- package/dist/app/platform/on-offline-radio-card.js +67 -67
- package/dist/app/platform/report-card.cjs.map +1 -1
- package/dist/app/platform/report-card.js +30 -30
- package/dist/app/platform/reservation-card.cjs.map +1 -1
- package/dist/app/platform/reservation-card.js +68 -68
- package/dist/app/platform/session-card.cjs.map +1 -1
- package/dist/app/platform/session-card.js +70 -70
- package/dist/app/platform/session-review-simple-read.cjs.map +1 -1
- package/dist/app/platform/session-review-simple-read.js +30 -30
- package/dist/app/platform/userInfos/coaching-customer-info/index.cjs.map +1 -1
- package/dist/app/platform/userInfos/coaching-customer-info/index.js +33 -33
- package/dist/app/platform/userInfos/coaching-customer-info/large.cjs.map +1 -1
- package/dist/app/platform/userInfos/coaching-customer-info/large.js +30 -30
- package/dist/app/platform/userInfos/coaching-customer-info/medium.cjs.map +1 -1
- package/dist/app/platform/userInfos/coaching-customer-info/medium.js +30 -30
- package/dist/app/platform/userInfos/coaching-customer-info/small.cjs.map +1 -1
- package/dist/app/platform/userInfos/coaching-customer-info/small.js +30 -30
- package/dist/app/platform/userInfos/session-user-info-detail.cjs.map +1 -1
- package/dist/app/platform/userInfos/session-user-info-detail.js +30 -30
- package/dist/app/platform/userInfos/utils.cjs.map +1 -1
- package/dist/app/platform/userInfos/utils.js +29 -29
- package/dist/atoms/bullet-text.js +2 -2
- package/dist/atoms/dialog.js +2 -2
- package/dist/atoms/drawer.cjs +2 -3
- package/dist/atoms/drawer.cjs.map +1 -1
- package/dist/atoms/drawer.js +1 -1
- package/dist/atoms/field-error-wrapper.js +2 -2
- package/dist/atoms/index.cjs +2 -3
- package/dist/atoms/index.cjs.map +1 -1
- package/dist/atoms/index.js +63 -63
- package/dist/atoms/list.js +2 -2
- package/dist/atoms/pagination.js +3 -3
- package/dist/chunk-2LRQWOIG.js +63 -0
- package/dist/chunk-2LRQWOIG.js.map +1 -0
- package/dist/chunk-2USHC4PH.js +63 -0
- package/dist/chunk-2USHC4PH.js.map +1 -0
- package/dist/chunk-3APHALEN.js +64 -0
- package/dist/chunk-3APHALEN.js.map +1 -0
- package/dist/chunk-3KH45IO4.js +89 -0
- package/dist/chunk-3KH45IO4.js.map +1 -0
- package/dist/chunk-3SCBKVQQ.js +51 -0
- package/dist/chunk-3SCBKVQQ.js.map +1 -0
- package/dist/chunk-4ETFHDG5.js +174 -0
- package/dist/chunk-4ETFHDG5.js.map +1 -0
- package/dist/chunk-4HDV26QV.js +51 -0
- package/dist/chunk-4HDV26QV.js.map +1 -0
- package/dist/chunk-5ZBSW4UW.js +64 -0
- package/dist/chunk-5ZBSW4UW.js.map +1 -0
- package/dist/chunk-62HSZXVT.js +74 -0
- package/dist/chunk-62HSZXVT.js.map +1 -0
- package/dist/chunk-64XYTE54.js +64 -0
- package/dist/chunk-64XYTE54.js.map +1 -0
- package/dist/chunk-6DR4EIVU.js +196 -0
- package/dist/chunk-6DR4EIVU.js.map +1 -0
- package/dist/chunk-7ADTM2PV.js +87 -0
- package/dist/chunk-7ADTM2PV.js.map +1 -0
- package/dist/chunk-7FRK5KLV.js +89 -0
- package/dist/chunk-7FRK5KLV.js.map +1 -0
- package/dist/chunk-ABUC6VII.js +144 -0
- package/dist/chunk-ABUC6VII.js.map +1 -0
- package/dist/chunk-AHXS2MBK.js +57 -0
- package/dist/chunk-AHXS2MBK.js.map +1 -0
- package/dist/chunk-C2EZQALX.js +363 -0
- package/dist/chunk-C2EZQALX.js.map +1 -0
- package/dist/chunk-C6ZC7TXX.js +30 -0
- package/dist/chunk-C6ZC7TXX.js.map +1 -0
- package/dist/chunk-CTZQFO5H.js +196 -0
- package/dist/chunk-CTZQFO5H.js.map +1 -0
- package/dist/chunk-DDFCVUO2.js +196 -0
- package/dist/chunk-DDFCVUO2.js.map +1 -0
- package/dist/chunk-DSWR2Z7U.js +89 -0
- package/dist/chunk-DSWR2Z7U.js.map +1 -0
- package/dist/chunk-E72OTAC6.js +89 -0
- package/dist/chunk-E72OTAC6.js.map +1 -0
- package/dist/chunk-EEAHZCIK.js +94 -0
- package/dist/chunk-EEAHZCIK.js.map +1 -0
- package/dist/chunk-EGT45N6F.js +30 -0
- package/dist/chunk-EGT45N6F.js.map +1 -0
- package/dist/chunk-FV4BQOCL.js +61 -0
- package/dist/chunk-FV4BQOCL.js.map +1 -0
- package/dist/chunk-GNTZY4DG.js +151 -0
- package/dist/chunk-GNTZY4DG.js.map +1 -0
- package/dist/chunk-GOPYUYXS.js +99 -0
- package/dist/chunk-GOPYUYXS.js.map +1 -0
- package/dist/chunk-IAIOO5Z2.js +174 -0
- package/dist/chunk-IAIOO5Z2.js.map +1 -0
- package/dist/chunk-IB7IFIYY.js +165 -0
- package/dist/chunk-IB7IFIYY.js.map +1 -0
- package/dist/chunk-IH6VDQ6C.js +61 -0
- package/dist/chunk-IH6VDQ6C.js.map +1 -0
- package/dist/chunk-IUUORJE5.js +68 -0
- package/dist/chunk-IUUORJE5.js.map +1 -0
- package/dist/chunk-K3Q4XLCN.js +65 -0
- package/dist/chunk-K3Q4XLCN.js.map +1 -0
- package/dist/chunk-KD6EXWP7.js +74 -0
- package/dist/chunk-KD6EXWP7.js.map +1 -0
- package/dist/chunk-KTUCYAG7.js +51 -0
- package/dist/chunk-KTUCYAG7.js.map +1 -0
- package/dist/chunk-KXCFAFL3.js +151 -0
- package/dist/chunk-KXCFAFL3.js.map +1 -0
- package/dist/chunk-L6FMK2ZK.js +64 -0
- package/dist/chunk-L6FMK2ZK.js.map +1 -0
- package/dist/chunk-LMALEQCE.js +228 -0
- package/dist/chunk-LMALEQCE.js.map +1 -0
- package/dist/chunk-M6ZYONSH.js +169 -0
- package/dist/chunk-M6ZYONSH.js.map +1 -0
- package/dist/chunk-N45T3WWG.js +139 -0
- package/dist/chunk-N45T3WWG.js.map +1 -0
- package/dist/chunk-P6DHFQXU.js +30 -0
- package/dist/chunk-P6DHFQXU.js.map +1 -0
- package/dist/chunk-PB4O3U6O.js +49 -0
- package/dist/chunk-PB4O3U6O.js.map +1 -0
- package/dist/chunk-PBWH6CMJ.js +217 -0
- package/dist/chunk-PBWH6CMJ.js.map +1 -0
- package/dist/chunk-PHGGXL3R.js +196 -0
- package/dist/chunk-PHGGXL3R.js.map +1 -0
- package/dist/chunk-QIXJ27DM.js +99 -0
- package/dist/chunk-QIXJ27DM.js.map +1 -0
- package/dist/chunk-RAKVKAXI.js +144 -0
- package/dist/chunk-RAKVKAXI.js.map +1 -0
- package/dist/chunk-RFXVHZAN.js +64 -0
- package/dist/chunk-RFXVHZAN.js.map +1 -0
- package/dist/chunk-T4HTYL5M.js +139 -0
- package/dist/chunk-T4HTYL5M.js.map +1 -0
- package/dist/chunk-TVZB6XRW.js +165 -0
- package/dist/chunk-TVZB6XRW.js.map +1 -0
- package/dist/chunk-TYBX7Q7B.js +64 -0
- package/dist/chunk-TYBX7Q7B.js.map +1 -0
- package/dist/chunk-UAXYYUVG.js +69 -0
- package/dist/chunk-UAXYYUVG.js.map +1 -0
- package/dist/chunk-UMBRV35P.js +217 -0
- package/dist/chunk-UMBRV35P.js.map +1 -0
- package/dist/chunk-UZZXVLBJ.js +145 -0
- package/dist/chunk-UZZXVLBJ.js.map +1 -0
- package/dist/chunk-VK6INFSB.js +69 -0
- package/dist/chunk-VK6INFSB.js.map +1 -0
- package/dist/chunk-Y724ZBAT.js +61 -0
- package/dist/chunk-Y724ZBAT.js.map +1 -0
- package/dist/chunk-YLSOXSUS.js +117 -0
- package/dist/chunk-YLSOXSUS.js.map +1 -0
- package/dist/context/dynamic-form-context.cjs +3 -1
- package/dist/context/dynamic-form-context.cjs.map +1 -1
- package/dist/context/dynamic-form-context.d.cts +3 -1
- package/dist/context/dynamic-form-context.d.ts +3 -1
- package/dist/context/dynamic-form-context.js +1 -1
- package/dist/context/index.cjs +3 -1
- package/dist/context/index.cjs.map +1 -1
- package/dist/context/index.js +5 -5
- package/dist/index.cjs +25 -17
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +0 -1
- package/dist/index.js +138 -138
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/index.js +16 -16
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-comp.js +4 -4
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-body.js +9 -9
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-footer.js +2 -2
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-header.js +3 -3
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-layout.js +2 -2
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-radio.js +5 -5
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-satisfaction-option.js +5 -5
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-satisfaction-text.js +5 -5
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-text.js +5 -5
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/complete-review.js +4 -4
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/index.js +20 -20
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/start-review.js +6 -6
- package/dist/molecules/curriculumV2/CurriculumContents/curriculum-ai-traning.js +3 -3
- package/dist/molecules/curriculumV2/CurriculumContents/curriculum-review.js +22 -22
- package/dist/molecules/curriculumV2/CurriculumContents/index.js +25 -25
- package/dist/molecules/curriculumV2/CurriculumSidebar/Items/curriculum-item-title.js +2 -2
- package/dist/molecules/curriculumV2/CurriculumSidebar/Items/section-item.js +4 -4
- package/dist/molecules/curriculumV2/CurriculumSidebar/index.js +8 -8
- package/dist/molecules/curriculumV2/CurriculumSidebar/sidebar-item.js +5 -5
- package/dist/molecules/curriculumV2/curriculum-sub-nav.js +4 -4
- package/dist/molecules/curriculumV2/curriculum-v2-layout.js +2 -2
- package/dist/molecules/curriculumV2/index.js +32 -32
- package/dist/molecules/date-picker/date-picker-button.js +6 -6
- package/dist/molecules/date-picker/index.js +5 -5
- package/dist/molecules/download-card.js +2 -2
- package/dist/molecules/dynamic-field.cjs +15 -9
- package/dist/molecules/dynamic-field.cjs.map +1 -1
- package/dist/molecules/dynamic-field.js +4 -4
- package/dist/molecules/dynamic-form.cjs +23 -14
- 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 +5 -5
- package/dist/molecules/expand-table/index.js +4 -4
- package/dist/molecules/force-refresh.js +2 -2
- package/dist/molecules/ghost-post.js +4 -4
- package/dist/molecules/index.cjs +23 -14
- package/dist/molecules/index.cjs.map +1 -1
- package/dist/molecules/index.js +61 -61
- package/dist/molecules/learning-post.js +5 -5
- package/dist/molecules/navigation.js +3 -3
- package/dist/molecules/one-on-one-guide-list.js +3 -3
- package/dist/molecules/stepper.js +4 -4
- package/dist/molecules/tag-selector.js +5 -5
- package/package.json +1 -1
- package/src/atoms/drawer.tsx +2 -3
- package/src/context/dynamic-form-context.tsx +4 -0
- package/src/molecules/dynamic-field.tsx +12 -6
- package/src/molecules/dynamic-form.tsx +5 -3
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Skeleton
|
|
3
|
+
} from "./chunk-5H3YPCZK.js";
|
|
4
|
+
import {
|
|
5
|
+
Grid
|
|
6
|
+
} from "./chunk-EGEQY3KT.js";
|
|
7
|
+
import {
|
|
8
|
+
Inset
|
|
9
|
+
} from "./chunk-XQOL7UBI.js";
|
|
10
|
+
import {
|
|
11
|
+
Heading
|
|
12
|
+
} from "./chunk-BESTU2AY.js";
|
|
13
|
+
import {
|
|
14
|
+
DropdownMenu
|
|
15
|
+
} from "./chunk-D4U2MCJG.js";
|
|
16
|
+
import {
|
|
17
|
+
Card
|
|
18
|
+
} from "./chunk-RP2RGCAW.js";
|
|
19
|
+
import {
|
|
20
|
+
Box
|
|
21
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
22
|
+
import {
|
|
23
|
+
Typo
|
|
24
|
+
} from "./chunk-PMJIFLDT.js";
|
|
25
|
+
import {
|
|
26
|
+
Flex
|
|
27
|
+
} from "./chunk-25HMMI7R.js";
|
|
28
|
+
import {
|
|
29
|
+
Button
|
|
30
|
+
} from "./chunk-ZVDAEY5Q.js";
|
|
31
|
+
import {
|
|
32
|
+
DotsVerticalIcon
|
|
33
|
+
} from "./chunk-R7IT4TCD.js";
|
|
34
|
+
|
|
35
|
+
// src/app/platform/contents-card.tsx
|
|
36
|
+
import { forwardRef } from "react";
|
|
37
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
38
|
+
var ContentsCard = forwardRef(
|
|
39
|
+
({
|
|
40
|
+
title,
|
|
41
|
+
description,
|
|
42
|
+
imageSrc,
|
|
43
|
+
footer,
|
|
44
|
+
dropdownItems,
|
|
45
|
+
onClickCard,
|
|
46
|
+
isLoading = false
|
|
47
|
+
}, ref) => {
|
|
48
|
+
return /* @__PURE__ */ jsxs(
|
|
49
|
+
Card,
|
|
50
|
+
{
|
|
51
|
+
onClick: onClickCard,
|
|
52
|
+
ref,
|
|
53
|
+
style: {
|
|
54
|
+
height: "100%",
|
|
55
|
+
width: "100%",
|
|
56
|
+
display: "grid",
|
|
57
|
+
cursor: "pointer",
|
|
58
|
+
maxHeight: "450px"
|
|
59
|
+
},
|
|
60
|
+
children: [
|
|
61
|
+
/* @__PURE__ */ jsx(Inset, { clip: "padding-box", pb: "0", side: "top", children: /* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(
|
|
62
|
+
Box,
|
|
63
|
+
{
|
|
64
|
+
height: "210px",
|
|
65
|
+
style: {
|
|
66
|
+
backgroundImage: `url(${imageSrc})`,
|
|
67
|
+
backgroundSize: "cover",
|
|
68
|
+
backgroundPosition: "center"
|
|
69
|
+
},
|
|
70
|
+
width: "100%"
|
|
71
|
+
}
|
|
72
|
+
) }) }),
|
|
73
|
+
/* @__PURE__ */ jsxs(Flex, { direction: "column", p: "4", pb: "3", children: [
|
|
74
|
+
/* @__PURE__ */ jsxs(Box, { children: [
|
|
75
|
+
/* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(Heading, { mb: "3", variant: "heading5", children: title }) }),
|
|
76
|
+
/* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(Typo, { as: "p", variant: "caption", children: description }) })
|
|
77
|
+
] }),
|
|
78
|
+
/* @__PURE__ */ jsxs(
|
|
79
|
+
Grid,
|
|
80
|
+
{
|
|
81
|
+
align: "center",
|
|
82
|
+
columns: "1fr auto",
|
|
83
|
+
justify: "between",
|
|
84
|
+
pt: "2",
|
|
85
|
+
style: { marginTop: "auto" },
|
|
86
|
+
width: "100%",
|
|
87
|
+
children: [
|
|
88
|
+
/* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(Flex, { gap: "3", overflow: "hidden", children: footer }) }),
|
|
89
|
+
Boolean(dropdownItems == null ? void 0 : dropdownItems.length) && /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
|
|
90
|
+
/* @__PURE__ */ jsx(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsx(Button, { size: "large", variant: "transparent", children: /* @__PURE__ */ jsx(DotsVerticalIcon, { color: "gray", height: "20px", width: "20px" }) }) }),
|
|
91
|
+
/* @__PURE__ */ jsx(DropdownMenu.Content, { children: dropdownItems == null ? void 0 : dropdownItems.map((item) => /* @__PURE__ */ jsx(
|
|
92
|
+
DropdownMenu.Item,
|
|
93
|
+
{
|
|
94
|
+
onClick: (e) => {
|
|
95
|
+
e.stopPropagation();
|
|
96
|
+
item.onClick();
|
|
97
|
+
},
|
|
98
|
+
children: item.label
|
|
99
|
+
},
|
|
100
|
+
item.label
|
|
101
|
+
)) })
|
|
102
|
+
] })
|
|
103
|
+
]
|
|
104
|
+
}
|
|
105
|
+
)
|
|
106
|
+
] })
|
|
107
|
+
]
|
|
108
|
+
}
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
);
|
|
112
|
+
ContentsCard.displayName = "ContentsCard";
|
|
113
|
+
|
|
114
|
+
export {
|
|
115
|
+
ContentsCard
|
|
116
|
+
};
|
|
117
|
+
//# sourceMappingURL=chunk-YLSOXSUS.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/app/platform/contents-card.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Heading } from '@/atoms/heading';\nimport { Button } from '@/atoms/button';\nimport { DropdownMenu } from '@/atoms/dropdown-menu';\nimport { Box } from '@/atoms/box';\nimport { Flex } from '@/atoms/flex';\nimport { Grid } from '@/atoms/grid';\nimport { Skeleton } from '@/atoms/skeleton';\nimport { Typo } from '@/atoms/typo';\nimport { DotsVerticalIcon } from '@/icon';\nimport { Card, Inset } from '@/atoms';\n\nexport interface ContentsCardProps {\n title?: React.ReactNode;\n description?: string;\n id?: string;\n imageSrc?: string | null;\n imageAlt?: string;\n footer?: React.ReactNode;\n dropdownItems?: {\n label: string;\n onClick: () => void;\n }[];\n onClickCard?: () => void;\n isLoading?: boolean;\n}\n\nexport const ContentsCard = forwardRef<HTMLDivElement, ContentsCardProps>(\n (\n {\n title,\n description,\n imageSrc,\n footer,\n dropdownItems,\n onClickCard,\n isLoading = false,\n },\n ref\n ): React.ReactNode => {\n return (\n <Card\n onClick={onClickCard}\n ref={ref}\n style={{\n height: '100%',\n width: '100%',\n display: 'grid',\n cursor: 'pointer',\n maxHeight: '450px',\n }}\n >\n {/* 섬네일 */}\n <Inset clip=\"padding-box\" pb=\"0\" side=\"top\">\n <Skeleton loading={isLoading}>\n <Box\n height=\"210px\"\n style={{\n backgroundImage: `url(${imageSrc})`,\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n }}\n width=\"100%\"\n />\n </Skeleton>\n </Inset>\n {/* 제목, 설명 */}\n <Flex direction=\"column\" p=\"4\" pb=\"3\">\n <Box>\n <Skeleton loading={isLoading}>\n <Heading mb=\"3\" variant=\"heading5\">\n {title}\n </Heading>\n </Skeleton>\n <Skeleton loading={isLoading}>\n <Typo as=\"p\" variant=\"caption\">\n {description}\n </Typo>\n </Skeleton>\n </Box>\n <Grid\n align=\"center\"\n columns=\"1fr auto\"\n justify=\"between\"\n pt=\"2\"\n style={{ marginTop: 'auto' }}\n width=\"100%\"\n >\n <Skeleton loading={isLoading}>\n <Flex gap=\"3\" overflow=\"hidden\">\n {footer}\n </Flex>\n </Skeleton>\n {Boolean(dropdownItems?.length) && (\n <DropdownMenu.Root>\n <DropdownMenu.Trigger>\n <Button size=\"large\" variant=\"transparent\">\n <DotsVerticalIcon color=\"gray\" height=\"20px\" width=\"20px\" />\n </Button>\n </DropdownMenu.Trigger>\n <DropdownMenu.Content>\n {dropdownItems?.map((item) => (\n <DropdownMenu.Item\n key={item.label}\n onClick={(e) => {\n e.stopPropagation();\n item.onClick();\n }}\n >\n {item.label}\n </DropdownMenu.Item>\n ))}\n </DropdownMenu.Content>\n </DropdownMenu.Root>\n )}\n </Grid>\n </Flex>\n </Card>\n );\n }\n);\nContentsCard.displayName = 'ContentsCard';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,kBAAkB;AAuDtB,cAaF,YAbE;AA5BL,IAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,GACA,QACoB;AACpB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT;AAAA,QACA,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,SAAS;AAAA,UACT,QAAQ;AAAA,UACR,WAAW;AAAA,QACb;AAAA,QAGA;AAAA,8BAAC,SAAM,MAAK,eAAc,IAAG,KAAI,MAAK,OACpC,8BAAC,YAAS,SAAS,WACjB;AAAA,YAAC;AAAA;AAAA,cACC,QAAO;AAAA,cACP,OAAO;AAAA,gBACL,iBAAiB,OAAO,QAAQ;AAAA,gBAChC,gBAAgB;AAAA,gBAChB,oBAAoB;AAAA,cACtB;AAAA,cACA,OAAM;AAAA;AAAA,UACR,GACF,GACF;AAAA,UAEA,qBAAC,QAAK,WAAU,UAAS,GAAE,KAAI,IAAG,KAChC;AAAA,iCAAC,OACC;AAAA,kCAAC,YAAS,SAAS,WACjB,8BAAC,WAAQ,IAAG,KAAI,SAAQ,YACrB,iBACH,GACF;AAAA,cACA,oBAAC,YAAS,SAAS,WACjB,8BAAC,QAAK,IAAG,KAAI,SAAQ,WAClB,uBACH,GACF;AAAA,eACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,SAAQ;AAAA,gBACR,IAAG;AAAA,gBACH,OAAO,EAAE,WAAW,OAAO;AAAA,gBAC3B,OAAM;AAAA,gBAEN;AAAA,sCAAC,YAAS,SAAS,WACjB,8BAAC,QAAK,KAAI,KAAI,UAAS,UACpB,kBACH,GACF;AAAA,kBACC,QAAQ,+CAAe,MAAM,KAC5B,qBAAC,aAAa,MAAb,EACC;AAAA,wCAAC,aAAa,SAAb,EACC,8BAAC,UAAO,MAAK,SAAQ,SAAQ,eAC3B,8BAAC,oBAAiB,OAAM,QAAO,QAAO,QAAO,OAAM,QAAO,GAC5D,GACF;AAAA,oBACA,oBAAC,aAAa,SAAb,EACE,yDAAe,IAAI,CAAC,SACnB;AAAA,sBAAC,aAAa;AAAA,sBAAb;AAAA,wBAEC,SAAS,CAAC,MAAM;AACd,4BAAE,gBAAgB;AAClB,+BAAK,QAAQ;AAAA,wBACf;AAAA,wBAEC,eAAK;AAAA;AAAA,sBAND,KAAK;AAAA,oBAOZ,IAEJ;AAAA,qBACF;AAAA;AAAA;AAAA,YAEJ;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;","names":[]}
|
|
@@ -304,11 +304,13 @@ var DynamicFormContext = (0, import_react4.createContext)(null);
|
|
|
304
304
|
function DynamicFormProvider({
|
|
305
305
|
children,
|
|
306
306
|
fields,
|
|
307
|
-
formik
|
|
307
|
+
formik,
|
|
308
|
+
readonly = false
|
|
308
309
|
}) {
|
|
309
310
|
const contextValue = {
|
|
310
311
|
formik,
|
|
311
312
|
fields,
|
|
313
|
+
readonly,
|
|
312
314
|
getFieldValue: (name) => formik.values[name],
|
|
313
315
|
getFieldError: (name) => {
|
|
314
316
|
const error = formik.errors[name];
|
|
@@ -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 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}\n\nexport function DynamicFormProvider({\n children,\n fields,\n formik,\n}: DynamicFormProviderProps): React.ReactElement {\n const contextValue: DynamicFormContextValue = {\n formik,\n fields,\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}\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"]}
|
|
@@ -5,6 +5,7 @@ import { DynamicFormFieldSchema } from '../types/dynamic-form-schema-generated.c
|
|
|
5
5
|
interface DynamicFormContextValue {
|
|
6
6
|
formik: FormikProps<Record<string, unknown>>;
|
|
7
7
|
fields: DynamicFormFieldSchema[];
|
|
8
|
+
readonly: boolean;
|
|
8
9
|
getFieldValue: (name: string) => unknown;
|
|
9
10
|
getFieldError: (name: string) => string | undefined;
|
|
10
11
|
getFieldTouched: (name: string) => boolean;
|
|
@@ -16,8 +17,9 @@ interface DynamicFormProviderProps {
|
|
|
16
17
|
children: React__default.ReactNode;
|
|
17
18
|
fields: DynamicFormFieldSchema[];
|
|
18
19
|
formik: FormikProps<Record<string, unknown>>;
|
|
20
|
+
readonly?: boolean;
|
|
19
21
|
}
|
|
20
|
-
declare function DynamicFormProvider({ children, fields, formik, }: DynamicFormProviderProps): React__default.ReactElement;
|
|
22
|
+
declare function DynamicFormProvider({ children, fields, formik, readonly, }: DynamicFormProviderProps): React__default.ReactElement;
|
|
21
23
|
declare function useDynamicForm(): DynamicFormContextValue;
|
|
22
24
|
|
|
23
25
|
export { type DynamicFormContextValue, DynamicFormProvider, useDynamicForm };
|
|
@@ -5,6 +5,7 @@ import { DynamicFormFieldSchema } from '../types/dynamic-form-schema-generated.j
|
|
|
5
5
|
interface DynamicFormContextValue {
|
|
6
6
|
formik: FormikProps<Record<string, unknown>>;
|
|
7
7
|
fields: DynamicFormFieldSchema[];
|
|
8
|
+
readonly: boolean;
|
|
8
9
|
getFieldValue: (name: string) => unknown;
|
|
9
10
|
getFieldError: (name: string) => string | undefined;
|
|
10
11
|
getFieldTouched: (name: string) => boolean;
|
|
@@ -16,8 +17,9 @@ interface DynamicFormProviderProps {
|
|
|
16
17
|
children: React__default.ReactNode;
|
|
17
18
|
fields: DynamicFormFieldSchema[];
|
|
18
19
|
formik: FormikProps<Record<string, unknown>>;
|
|
20
|
+
readonly?: boolean;
|
|
19
21
|
}
|
|
20
|
-
declare function DynamicFormProvider({ children, fields, formik, }: DynamicFormProviderProps): React__default.ReactElement;
|
|
22
|
+
declare function DynamicFormProvider({ children, fields, formik, readonly, }: DynamicFormProviderProps): React__default.ReactElement;
|
|
21
23
|
declare function useDynamicForm(): DynamicFormContextValue;
|
|
22
24
|
|
|
23
25
|
export { type DynamicFormContextValue, DynamicFormProvider, useDynamicForm };
|
package/dist/context/index.cjs
CHANGED
|
@@ -309,11 +309,13 @@ var DynamicFormContext = (0, import_react4.createContext)(null);
|
|
|
309
309
|
function DynamicFormProvider({
|
|
310
310
|
children,
|
|
311
311
|
fields,
|
|
312
|
-
formik
|
|
312
|
+
formik,
|
|
313
|
+
readonly = false
|
|
313
314
|
}) {
|
|
314
315
|
const contextValue = {
|
|
315
316
|
formik,
|
|
316
317
|
fields,
|
|
318
|
+
readonly,
|
|
317
319
|
getFieldValue: (name) => formik.values[name],
|
|
318
320
|
getFieldError: (name) => {
|
|
319
321
|
const error = formik.errors[name];
|
|
@@ -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 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}\n\nexport function DynamicFormProvider({\n children,\n fields,\n formik,\n}: DynamicFormProviderProps): React.ReactElement {\n const contextValue: DynamicFormContextValue = {\n formik,\n fields,\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}\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"]}
|
package/dist/context/index.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import "../chunk-P5EMTC35.js";
|
|
2
|
+
import {
|
|
3
|
+
DynamicFormProvider,
|
|
4
|
+
useDynamicForm
|
|
5
|
+
} from "../chunk-PB4O3U6O.js";
|
|
6
|
+
import "../chunk-2OMSNCRH.js";
|
|
2
7
|
import {
|
|
3
8
|
UIStateContext,
|
|
4
9
|
UIStateProvider,
|
|
5
10
|
useUIState
|
|
6
11
|
} from "../chunk-PT57HCAI.js";
|
|
7
|
-
import {
|
|
8
|
-
DynamicFormProvider,
|
|
9
|
-
useDynamicForm
|
|
10
|
-
} from "../chunk-O2S7S5B4.js";
|
|
11
|
-
import "../chunk-2OMSNCRH.js";
|
|
12
12
|
import "../chunk-BESTU2AY.js";
|
|
13
13
|
import "../chunk-PMJIFLDT.js";
|
|
14
14
|
import "../chunk-LDBWASUA.js";
|
package/dist/index.cjs
CHANGED
|
@@ -1839,7 +1839,6 @@ function Content6(props) {
|
|
|
1839
1839
|
]);
|
|
1840
1840
|
const mobileHeaderSize = 48;
|
|
1841
1841
|
const desktopHeaderSize = 64;
|
|
1842
|
-
const separatorSize = 1;
|
|
1843
1842
|
const { drawerContainerRef } = usePortalContainer();
|
|
1844
1843
|
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Dialog2.Portal, { container: drawerContainerRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_themes50.Theme, { children: [
|
|
1845
1844
|
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Dialog2.Overlay, { className: "DrawerOverlay" }),
|
|
@@ -1855,8 +1854,8 @@ function Content6(props) {
|
|
|
1855
1854
|
height: "100%",
|
|
1856
1855
|
overflow: "hidden",
|
|
1857
1856
|
rows: hideHeader ? "1" : {
|
|
1858
|
-
initial: `${mobileHeaderSize}px
|
|
1859
|
-
sm: `${desktopHeaderSize}px
|
|
1857
|
+
initial: `${mobileHeaderSize}px calc(100% - ${mobileHeaderSize}px)`,
|
|
1858
|
+
sm: `${desktopHeaderSize}px calc(100% - ${desktopHeaderSize}px)`
|
|
1860
1859
|
},
|
|
1861
1860
|
children: [
|
|
1862
1861
|
!hideHeader && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_themes22.Flex, { align: "center", gap: "3", px: { initial: "4", md: "6" }, children: [
|
|
@@ -5354,11 +5353,13 @@ var DynamicFormContext = (0, import_react41.createContext)(null);
|
|
|
5354
5353
|
function DynamicFormProvider({
|
|
5355
5354
|
children,
|
|
5356
5355
|
fields,
|
|
5357
|
-
formik
|
|
5356
|
+
formik,
|
|
5357
|
+
readonly = false
|
|
5358
5358
|
}) {
|
|
5359
5359
|
const contextValue = {
|
|
5360
5360
|
formik,
|
|
5361
5361
|
fields,
|
|
5362
|
+
readonly,
|
|
5362
5363
|
getFieldValue: (name) => formik.values[name],
|
|
5363
5364
|
getFieldError: (name) => {
|
|
5364
5365
|
const error = formik.errors[name];
|
|
@@ -5393,7 +5394,8 @@ function DynamicFormField({
|
|
|
5393
5394
|
getFieldTouched,
|
|
5394
5395
|
setFieldValue,
|
|
5395
5396
|
handleChange,
|
|
5396
|
-
handleBlur
|
|
5397
|
+
handleBlur,
|
|
5398
|
+
readonly
|
|
5397
5399
|
} = useDynamicForm();
|
|
5398
5400
|
const { name, type } = field;
|
|
5399
5401
|
const value = getFieldValue(name);
|
|
@@ -5403,9 +5405,10 @@ function DynamicFormField({
|
|
|
5403
5405
|
const commonProps = {
|
|
5404
5406
|
name,
|
|
5405
5407
|
value: String(value || ""),
|
|
5406
|
-
onChange: handleChange,
|
|
5407
|
-
onBlur: handleBlur,
|
|
5408
|
-
error: hasError
|
|
5408
|
+
onChange: readonly ? void 0 : handleChange,
|
|
5409
|
+
onBlur: readonly ? void 0 : handleBlur,
|
|
5410
|
+
error: hasError,
|
|
5411
|
+
disabled: readonly
|
|
5409
5412
|
};
|
|
5410
5413
|
switch (type) {
|
|
5411
5414
|
case "short_text":
|
|
@@ -5433,10 +5436,11 @@ function DynamicFormField({
|
|
|
5433
5436
|
return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
|
|
5434
5437
|
Select.Root,
|
|
5435
5438
|
{
|
|
5436
|
-
onValueChange: (newValue) => {
|
|
5439
|
+
onValueChange: readonly ? void 0 : (newValue) => {
|
|
5437
5440
|
void setFieldValue(name, newValue);
|
|
5438
5441
|
},
|
|
5439
5442
|
value,
|
|
5443
|
+
disabled: readonly,
|
|
5440
5444
|
children: [
|
|
5441
5445
|
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Select.Trigger, { placeholder: field.placeholder }),
|
|
5442
5446
|
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Select.Content, { children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Select.Item, { value: String(option.value), children: option.label }, option.value)) })
|
|
@@ -5447,11 +5451,12 @@ function DynamicFormField({
|
|
|
5447
5451
|
return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
|
|
5448
5452
|
import_themes34.RadioGroup.Root,
|
|
5449
5453
|
{
|
|
5450
|
-
onValueChange: (newValue) => {
|
|
5454
|
+
onValueChange: readonly ? void 0 : (newValue) => {
|
|
5451
5455
|
void setFieldValue(name, newValue);
|
|
5452
5456
|
},
|
|
5453
5457
|
orientation: field.orientation,
|
|
5454
5458
|
value: String(value || ""),
|
|
5459
|
+
disabled: readonly,
|
|
5455
5460
|
children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_themes34.RadioGroup.Item, { value: String(option.value), children: option.label }, option.value))
|
|
5456
5461
|
}
|
|
5457
5462
|
);
|
|
@@ -5459,11 +5464,12 @@ function DynamicFormField({
|
|
|
5459
5464
|
return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
|
|
5460
5465
|
CheckboxGroup.Root,
|
|
5461
5466
|
{
|
|
5462
|
-
onValueChange: (newValue) => {
|
|
5467
|
+
onValueChange: readonly ? void 0 : (newValue) => {
|
|
5463
5468
|
void setFieldValue(name, newValue);
|
|
5464
5469
|
},
|
|
5465
5470
|
orientation: field.orientation,
|
|
5466
5471
|
value: Array.isArray(value) ? value.map(String) : [],
|
|
5472
|
+
disabled: readonly,
|
|
5467
5473
|
children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(CheckboxGroup.Item, { value: String(option.value), children: option.label }, option.value))
|
|
5468
5474
|
}
|
|
5469
5475
|
);
|
|
@@ -5473,9 +5479,10 @@ function DynamicFormField({
|
|
|
5473
5479
|
Checkbox,
|
|
5474
5480
|
{
|
|
5475
5481
|
checked: Boolean(value),
|
|
5476
|
-
onCheckedChange: (checked) => {
|
|
5482
|
+
onCheckedChange: readonly ? void 0 : (checked) => {
|
|
5477
5483
|
void setFieldValue(name, checked);
|
|
5478
|
-
}
|
|
5484
|
+
},
|
|
5485
|
+
disabled: readonly
|
|
5479
5486
|
}
|
|
5480
5487
|
),
|
|
5481
5488
|
field.description ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { style: { fontSize: "14px", color: "#666", lineHeight: "1.4" }, children: field.description }) : null
|
|
@@ -5508,7 +5515,8 @@ function DynamicFormRoot({
|
|
|
5508
5515
|
fields,
|
|
5509
5516
|
initialValues: initialValues2 = {},
|
|
5510
5517
|
onSubmit,
|
|
5511
|
-
children
|
|
5518
|
+
children,
|
|
5519
|
+
readonly = false
|
|
5512
5520
|
}) {
|
|
5513
5521
|
const validationSchema = (0, import_react42.useMemo)(() => {
|
|
5514
5522
|
const schema = {};
|
|
@@ -5561,16 +5569,16 @@ function DynamicFormRoot({
|
|
|
5561
5569
|
};
|
|
5562
5570
|
}
|
|
5563
5571
|
}, [formik.submitCount, formik.errors, fields]);
|
|
5564
|
-
return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(DynamicFormProvider, { fields, formik, children });
|
|
5572
|
+
return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(DynamicFormProvider, { fields, formik, readonly, children });
|
|
5565
5573
|
}
|
|
5566
5574
|
function DynamicFormFieldList({
|
|
5567
5575
|
fields: fieldsProp,
|
|
5568
5576
|
labelVariant
|
|
5569
5577
|
}) {
|
|
5570
|
-
const { formik, fields: fieldsFromContext } = useDynamicForm();
|
|
5578
|
+
const { formik, fields: fieldsFromContext, readonly } = useDynamicForm();
|
|
5571
5579
|
const fields = fieldsProp || fieldsFromContext;
|
|
5572
5580
|
return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_jsx_runtime87.Fragment, { children: fields.map((field) => {
|
|
5573
|
-
const errorMessage = formik.touched[field.name] && formik.errors[field.name] ? String(formik.errors[field.name]) : void 0;
|
|
5581
|
+
const errorMessage = !readonly && formik.touched[field.name] && formik.errors[field.name] ? String(formik.errors[field.name]) : void 0;
|
|
5574
5582
|
return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
|
|
5575
5583
|
import_themes54.Box,
|
|
5576
5584
|
{
|