@m4l/components 9.3.12-JT270825.beta.1 → 9.3.12-JT270825.beta.2
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/components/Stepper/Stepper.js +69 -0
- package/components/Stepper/Stepper.styles.js +280 -0
- package/components/Stepper/constants.js +6 -0
- package/components/Stepper/dictionary.js +10 -0
- package/components/Stepper/helpers/evaluateVisibilityStepCondition/index.js +17 -0
- package/components/Stepper/helpers/findNextVisibleValidStep/index.js +13 -0
- package/components/Stepper/helpers/findPrevVisibleValidStep/index.js +13 -0
- package/components/Stepper/helpers/index.js +1 -0
- package/components/Stepper/helpers/isLastVisibleValidStep/index.js +16 -0
- package/components/Stepper/hooks/useIsLastVisibleValidStep/index.js +16 -0
- package/components/Stepper/hooks/useStepper/index.js +20 -0
- package/components/Stepper/hooks/useStepperActions/index.js +1 -0
- package/components/Stepper/hooks/useStepperActions/useStepperActions.js +56 -0
- package/components/Stepper/icons.js +12 -0
- package/components/Stepper/index.d.ts +8 -4
- package/components/Stepper/index.js +1 -0
- package/components/Stepper/slots/StepperEnum.js +36 -0
- package/components/Stepper/slots/StepperSlot.js +97 -0
- package/components/Stepper/store/StepperContext/index.js +103 -0
- package/components/Stepper/store/StepperStore/index.js +152 -0
- package/components/Stepper/subcomponents/ContentArea/index.js +24 -0
- package/components/Stepper/subcomponents/ContentArea/subcomponents/WrapperIcon/index.js +20 -0
- package/components/Stepper/subcomponents/ContentArea/subcomponents/WrapperTitle/index.js +23 -0
- package/components/Stepper/subcomponents/StepArea/index.js +135 -0
- package/components/Stepper/subcomponents/StepArea/subcomponents/Inidicator/index.js +85 -0
- package/components/Stepper/subcomponents/StepperButtons/StepperCancelButton/index.js +25 -0
- package/components/Stepper/subcomponents/StepperButtons/StepperNextButton/index.js +46 -0
- package/components/Stepper/subcomponents/StepperButtons/StepperPrevButton/index.js +52 -0
- package/components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.js +20 -0
- package/components/Stepper/subcomponents/StepperButtons/index.js +1 -0
- package/components/Stepper/subcomponents/StepperContent/index.js +23 -0
- package/components/Stepper/subcomponents/StepperContent/subcomponents/Step/index.js +42 -0
- package/components/Stepper/subcomponents/StepperFooter/index.js +48 -0
- package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterLeftActions/index.js +9 -0
- package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterRightActions/index.js +33 -0
- package/components/index.d.ts +1 -0
- package/helpers/getStepsAndValidationSchema/getStepsAndValidationSchema.js +44 -0
- package/helpers/getStepsAndValidationSchema/index.d.ts +1 -0
- package/helpers/getStepsAndValidationSchema/index.js +1 -0
- package/helpers/getStepsAndValidationSchema/types.js +1 -0
- package/helpers/index.d.ts +1 -0
- package/helpers/index.js +1 -0
- package/index.d.ts +1 -0
- package/index.js +58 -32
- package/package.json +1 -1
- package/storybook/components/Stepper/helpers/useSteps.d.ts +1 -1
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo, Children, isValidElement } from "react";
|
|
3
|
+
import { useFlagsPresent, CommonFlags } from "@m4l/core";
|
|
4
|
+
import { S as StepperRootStyled, C as ContentSectionStyled } from "./slots/StepperSlot.js";
|
|
5
|
+
import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
|
|
6
|
+
import { S as STEPPER_PREFIX_NAME } from "./constants.js";
|
|
7
|
+
import { S as StepArea } from "./subcomponents/StepArea/index.js";
|
|
8
|
+
import { C as ContentArea } from "./subcomponents/ContentArea/index.js";
|
|
9
|
+
import { S as StepperProvider } from "./store/StepperContext/index.js";
|
|
10
|
+
import { S as StepperFooter } from "./subcomponents/StepperFooter/index.js";
|
|
11
|
+
import { S as StepperContent } from "./subcomponents/StepperContent/index.js";
|
|
12
|
+
import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
|
|
13
|
+
function Stepper(props) {
|
|
14
|
+
const { orientation, size, children } = props;
|
|
15
|
+
const { currentSize } = useComponentSize(size);
|
|
16
|
+
const ownerState = {
|
|
17
|
+
size: currentSize,
|
|
18
|
+
orientation
|
|
19
|
+
};
|
|
20
|
+
const classRoot = getComponentSlotRoot(STEPPER_PREFIX_NAME);
|
|
21
|
+
const { stepperFooter, stepperContent } = useMemo(() => {
|
|
22
|
+
let footer = null;
|
|
23
|
+
let content = null;
|
|
24
|
+
let footerCount = 0;
|
|
25
|
+
let contentCount = 0;
|
|
26
|
+
if (children) {
|
|
27
|
+
Children.forEach(children, (child) => {
|
|
28
|
+
if (isValidElement(child)) {
|
|
29
|
+
if (child.type === StepperFooter) {
|
|
30
|
+
footerCount++;
|
|
31
|
+
if (footerCount > 1) {
|
|
32
|
+
throw new Error(
|
|
33
|
+
"Stepper: Solo se permite un componente StepperFooter. Se encontraron múltiples StepperFooter."
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
footer = child;
|
|
37
|
+
} else if (child.type === StepperContent) {
|
|
38
|
+
contentCount++;
|
|
39
|
+
if (contentCount > 1) {
|
|
40
|
+
throw new Error(
|
|
41
|
+
"Stepper: Solo se permite un componente StepperContent. Se encontraron múltiples StepperContent."
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
content = child;
|
|
45
|
+
} else {
|
|
46
|
+
throw new Error(
|
|
47
|
+
"Stepper: Solo se permiten componentes StepperContent y StepperFooter como hijos."
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
return { stepperFooter: footer, stepperContent: content };
|
|
54
|
+
}, [children]);
|
|
55
|
+
const hasPresentFlags = useFlagsPresent([CommonFlags.FLAG_DICTIONARY_LOADED]);
|
|
56
|
+
if (!hasPresentFlags) {
|
|
57
|
+
return null;
|
|
58
|
+
}
|
|
59
|
+
return /* @__PURE__ */ jsx(StepperProvider, { ...props, children: /* @__PURE__ */ jsxs(StepperRootStyled, { className: classRoot, children: [
|
|
60
|
+
/* @__PURE__ */ jsxs(ContentSectionStyled, { ownerState, children: [
|
|
61
|
+
/* @__PURE__ */ jsx(StepArea, {}),
|
|
62
|
+
/* @__PURE__ */ jsx(ContentArea, { children: stepperContent })
|
|
63
|
+
] }),
|
|
64
|
+
stepperFooter
|
|
65
|
+
] }) });
|
|
66
|
+
}
|
|
67
|
+
export {
|
|
68
|
+
Stepper as S
|
|
69
|
+
};
|
|
@@ -0,0 +1,280 @@
|
|
|
1
|
+
import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
|
|
2
|
+
const stepperStyles = {
|
|
3
|
+
/**
|
|
4
|
+
*
|
|
5
|
+
* Estilos para el contenedor principal del Stepper.
|
|
6
|
+
*/
|
|
7
|
+
stepperRoot: ({ theme }) => ({
|
|
8
|
+
display: "flex",
|
|
9
|
+
flexDirection: "column",
|
|
10
|
+
background: theme.vars.palette.background.default,
|
|
11
|
+
width: "100%",
|
|
12
|
+
borderRadius: theme.vars.size.borderRadius.r1
|
|
13
|
+
}),
|
|
14
|
+
/**
|
|
15
|
+
* Estilos para la sección que contiene los pasos del Stepper.
|
|
16
|
+
*/
|
|
17
|
+
contentSection: ({ theme, ownerState }) => ({
|
|
18
|
+
display: "flex",
|
|
19
|
+
flexDirection: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "column" : "row",
|
|
20
|
+
gap: theme.vars.size.baseSpacings.sp8
|
|
21
|
+
}),
|
|
22
|
+
/**
|
|
23
|
+
* Estilos para la sección que contiene los botones de acción del Stepper.
|
|
24
|
+
*/
|
|
25
|
+
stepArea: ({ theme, ownerState }) => ({
|
|
26
|
+
...ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? {
|
|
27
|
+
display: "flex",
|
|
28
|
+
alignItems: "start",
|
|
29
|
+
width: "100%",
|
|
30
|
+
minWidth: "350px",
|
|
31
|
+
overflowX: "auto"
|
|
32
|
+
} : {
|
|
33
|
+
maxWidth: "116px"
|
|
34
|
+
}
|
|
35
|
+
}),
|
|
36
|
+
/**
|
|
37
|
+
* Estilos para el área de contenido del Stepper.
|
|
38
|
+
*/
|
|
39
|
+
contentArea: ({ theme, ownerState }) => ({
|
|
40
|
+
flex: 1,
|
|
41
|
+
display: "flex",
|
|
42
|
+
flexDirection: "column",
|
|
43
|
+
gap: theme.vars.size.baseSpacings.sp6,
|
|
44
|
+
...ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? {
|
|
45
|
+
borderTop: "1px solid",
|
|
46
|
+
paddingTop: theme.vars.size.baseSpacings.sp8
|
|
47
|
+
} : {
|
|
48
|
+
borderLeft: "1px solid",
|
|
49
|
+
paddingLeft: theme.vars.size.baseSpacings.sp8
|
|
50
|
+
},
|
|
51
|
+
borderColor: theme.vars.palette?.border.disabled
|
|
52
|
+
}),
|
|
53
|
+
/**
|
|
54
|
+
* Estilos para cada paso del Stepper.
|
|
55
|
+
*/
|
|
56
|
+
step: ({ theme, ownerState }) => {
|
|
57
|
+
const currentStep = ownerState?.currentStep ?? 0;
|
|
58
|
+
const step = ownerState?.step ?? 0;
|
|
59
|
+
const totalSteps = ownerState?.totalSteps ?? 0;
|
|
60
|
+
const isCompleted = currentStep > step;
|
|
61
|
+
const isLastStep = step === totalSteps - 1;
|
|
62
|
+
return {
|
|
63
|
+
cursor: "pointer",
|
|
64
|
+
display: "flex",
|
|
65
|
+
flexDirection: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "column" : "row",
|
|
66
|
+
alignItems: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "center" : "start",
|
|
67
|
+
justifyContent: ownerState?.visibleTitle ? "space-between" : "center",
|
|
68
|
+
gap: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? theme.vars.size.baseSpacings.sp1 : theme.vars.size.baseSpacings.sp4,
|
|
69
|
+
width: "100%",
|
|
70
|
+
...(ownerState?.orientation === "vertical" || theme.generalSettings.isMobile) && {
|
|
71
|
+
minWidth: theme.vars.size.baseSpacings.sp10
|
|
72
|
+
},
|
|
73
|
+
height: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "auto" : theme.vars.size.baseSpacings.sp13,
|
|
74
|
+
position: "relative",
|
|
75
|
+
...!isLastStep && (ownerState?.orientation === "vertical" || theme.generalSettings.isMobile) && {
|
|
76
|
+
"&::after": {
|
|
77
|
+
content: '""',
|
|
78
|
+
position: "absolute",
|
|
79
|
+
top: ownerState?.orientation === "horizontal" && theme.generalSettings.isMobile ? "16px" : "10px",
|
|
80
|
+
// Ajustado para coincidir con el centro del indicador cuando alignItems es start
|
|
81
|
+
height: "1px",
|
|
82
|
+
borderTop: `1px ${isCompleted ? "solid" : "dashed"} ${isCompleted ? theme.vars.palette.primary.enabled : theme.vars.palette.border.default}`,
|
|
83
|
+
left: "50%",
|
|
84
|
+
width: "100%"
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
},
|
|
89
|
+
/**
|
|
90
|
+
* Estilos para el nombre del paso dentro del Stepper.
|
|
91
|
+
*/
|
|
92
|
+
stepName: ({ theme, ownerState }) => ({
|
|
93
|
+
...ownerState?.orientation === "horizontal" && {
|
|
94
|
+
height: theme.generalSettings.isMobile ? theme.vars.size.mobile.medium.action : theme.vars.size.desktop.large.action
|
|
95
|
+
},
|
|
96
|
+
...(ownerState?.orientation === "vertical" || theme.generalSettings.isMobile) && {
|
|
97
|
+
maxWidth: "120px",
|
|
98
|
+
width: "100%",
|
|
99
|
+
lineHeight: "1.2",
|
|
100
|
+
marginTop: theme.vars.size.baseSpacings.sp1
|
|
101
|
+
},
|
|
102
|
+
alignContent: "center",
|
|
103
|
+
cursor: "pointer",
|
|
104
|
+
overflow: "hidden",
|
|
105
|
+
...theme.generalSettings.isMobile ? {
|
|
106
|
+
display: "none"
|
|
107
|
+
} : {
|
|
108
|
+
display: ownerState?.visibleTitle ? "-webkit-box" : "none"
|
|
109
|
+
},
|
|
110
|
+
WebkitBoxOrient: "vertical",
|
|
111
|
+
WebkitLineClamp: 2,
|
|
112
|
+
textOverflow: "ellipsis",
|
|
113
|
+
flex: 1,
|
|
114
|
+
minWidth: 0,
|
|
115
|
+
whiteSpace: "normal",
|
|
116
|
+
order: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? 1 : 0,
|
|
117
|
+
"&.M4LTypography-root": {
|
|
118
|
+
color: (ownerState?.currentStep ?? 0) > (ownerState?.step ?? 0) ? theme.vars.palette.primary.semanticText : (ownerState?.currentStep ?? 0) === (ownerState?.step ?? 0) ? theme.vars.palette.text.primary : theme.vars.palette.text.secondary,
|
|
119
|
+
textAlign: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? "center" : "right"
|
|
120
|
+
}
|
|
121
|
+
}),
|
|
122
|
+
/**
|
|
123
|
+
* Estilos para el indicador numérico de cada paso del Stepper.
|
|
124
|
+
*/
|
|
125
|
+
indicator: ({ theme, ownerState }) => {
|
|
126
|
+
const currentStep = ownerState?.currentStep ?? 0;
|
|
127
|
+
const step = ownerState?.step ?? 0;
|
|
128
|
+
const totalSteps = ownerState?.totalSteps ?? 0;
|
|
129
|
+
const isCompleted = currentStep > step;
|
|
130
|
+
const isCurrent = currentStep === step;
|
|
131
|
+
const isLastStep = step === totalSteps - 1;
|
|
132
|
+
const isValidStep = ownerState?.stepValidationStatus?.[step] ?? true;
|
|
133
|
+
return {
|
|
134
|
+
...ownerState?.orientation === "horizontal" && {
|
|
135
|
+
marginTop: theme.generalSettings.isMobile ? "6px" : theme.vars.size.baseSpacings.sp1
|
|
136
|
+
},
|
|
137
|
+
display: "flex",
|
|
138
|
+
alignItems: "center",
|
|
139
|
+
justifyContent: "center",
|
|
140
|
+
order: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? 0 : 1,
|
|
141
|
+
...getSizeStyles(theme, ownerState?.size || "medium", "case", (size) => {
|
|
142
|
+
return {
|
|
143
|
+
width: size,
|
|
144
|
+
height: size
|
|
145
|
+
};
|
|
146
|
+
}),
|
|
147
|
+
background: isCompleted ? ownerState?.indicatorType === "dot" || theme.generalSettings.isMobile ? theme.vars.palette.background.default : theme.vars.palette.primary.toneOpacity : !isValidStep ? theme.vars.palette.error.enabled : ownerState?.indicatorType === "dot" || theme.generalSettings.isMobile ? theme.vars.palette.background.default : isCurrent ? theme.vars.palette.primary.enabled : theme.vars.palette.default.enabled,
|
|
148
|
+
borderRadius: theme.vars.size.borderRadius.r2,
|
|
149
|
+
...ownerState?.indicatorType === "number" && !theme.generalSettings.isMobile && {
|
|
150
|
+
boxShadow: isCurrent ? "0 2px 8px 0 rgb(0, 100, 255, 0.16)" : "none"
|
|
151
|
+
},
|
|
152
|
+
position: "relative",
|
|
153
|
+
zIndex: 1,
|
|
154
|
+
textAlign: "center",
|
|
155
|
+
"& > div": {
|
|
156
|
+
position: "absolute",
|
|
157
|
+
top: "50%",
|
|
158
|
+
left: "50%",
|
|
159
|
+
transform: "translate(-50%, -50%)"
|
|
160
|
+
},
|
|
161
|
+
...!isLastStep && ownerState?.orientation === "horizontal" && !theme.generalSettings.isMobile && {
|
|
162
|
+
"&::after": {
|
|
163
|
+
content: '""',
|
|
164
|
+
position: "absolute",
|
|
165
|
+
top: "100%",
|
|
166
|
+
left: "50%",
|
|
167
|
+
transform: "translateX(-50%)",
|
|
168
|
+
width: "1px",
|
|
169
|
+
height: theme.vars.size.baseSpacings.sp12,
|
|
170
|
+
borderLeft: `1px ${isCompleted ? "solid" : "dashed"} ${isCompleted ? theme.vars.palette.primary.enabled : theme.vars.palette.border.default}`
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
};
|
|
174
|
+
},
|
|
175
|
+
/**
|
|
176
|
+
* Estilos para el número de texto dentro del indicador numérico del Stepper.
|
|
177
|
+
*/
|
|
178
|
+
textNumber: ({ theme, ownerState }) => {
|
|
179
|
+
const currentStep = ownerState?.currentStep ?? 0;
|
|
180
|
+
const step = ownerState?.step ?? 0;
|
|
181
|
+
const isCompleted = currentStep > step;
|
|
182
|
+
const isCurrent = currentStep === step;
|
|
183
|
+
return {
|
|
184
|
+
"&.M4LTypography-root": {
|
|
185
|
+
color: isCompleted || isCurrent ? theme.vars.palette.primary.contrastText : theme.vars.palette.text.primary
|
|
186
|
+
}
|
|
187
|
+
};
|
|
188
|
+
},
|
|
189
|
+
/**
|
|
190
|
+
* Estilos para el área de contenido del Stepper.
|
|
191
|
+
*/
|
|
192
|
+
contentAreaHeader: ({ theme }) => ({
|
|
193
|
+
display: "flex",
|
|
194
|
+
alignItems: "center",
|
|
195
|
+
gap: theme.size.baseSpacings.sp3
|
|
196
|
+
}),
|
|
197
|
+
/**
|
|
198
|
+
* Estilos para el contenedor del icono del titulo del Stepper.
|
|
199
|
+
*/
|
|
200
|
+
wrapperIcon: ({ theme, ownerState }) => ({
|
|
201
|
+
...getSizeStyles(theme, ownerState?.size || "medium", "box", (size) => {
|
|
202
|
+
return {
|
|
203
|
+
width: size,
|
|
204
|
+
height: size
|
|
205
|
+
};
|
|
206
|
+
}),
|
|
207
|
+
display: "flex",
|
|
208
|
+
alignItems: "center",
|
|
209
|
+
justifyContent: "center",
|
|
210
|
+
background: theme.vars.palette.primary.enabledOpacity,
|
|
211
|
+
borderRadius: theme.vars.size.borderRadius["r1-5"]
|
|
212
|
+
}),
|
|
213
|
+
/**
|
|
214
|
+
* Estilos para el título del Stepper.
|
|
215
|
+
*/
|
|
216
|
+
wrapperTitle: ({ theme }) => ({
|
|
217
|
+
color: theme.vars.palette.text.primary,
|
|
218
|
+
display: "flex",
|
|
219
|
+
flexDirection: "column",
|
|
220
|
+
gap: theme.vars.size.baseSpacings["sp0-5"]
|
|
221
|
+
}),
|
|
222
|
+
/**
|
|
223
|
+
* Estilos para el icono del Stepper.
|
|
224
|
+
*/
|
|
225
|
+
icon: ({ theme, ownerState }) => ({
|
|
226
|
+
...getSizeStyles(theme, ownerState?.size || "medium", "case", (size) => {
|
|
227
|
+
return {
|
|
228
|
+
width: size,
|
|
229
|
+
height: size
|
|
230
|
+
};
|
|
231
|
+
})
|
|
232
|
+
}),
|
|
233
|
+
/**
|
|
234
|
+
* Estilos para el título del Stepper.
|
|
235
|
+
*/
|
|
236
|
+
title: () => ({}),
|
|
237
|
+
/**
|
|
238
|
+
* Estilos para la descripción del Stepper.
|
|
239
|
+
*/
|
|
240
|
+
description: ({ theme }) => ({
|
|
241
|
+
"&.M4LTypography-root": {
|
|
242
|
+
color: theme.vars.palette.text.secondary
|
|
243
|
+
}
|
|
244
|
+
}),
|
|
245
|
+
/**
|
|
246
|
+
* Estilos para la sección de botones de acción del Stepper.
|
|
247
|
+
*/
|
|
248
|
+
stepperFooterSection: ({ theme }) => ({
|
|
249
|
+
display: "flex",
|
|
250
|
+
alignItems: "center",
|
|
251
|
+
justifyContent: "space-between",
|
|
252
|
+
paddingTop: theme.vars.size.baseSpacings.sp4
|
|
253
|
+
}),
|
|
254
|
+
/**
|
|
255
|
+
* Estilos para las acciones del lado izquierdo del StepperFooter.
|
|
256
|
+
*/
|
|
257
|
+
stepperFooterLeftActions: ({ theme }) => ({
|
|
258
|
+
display: "flex",
|
|
259
|
+
alignItems: "center",
|
|
260
|
+
gap: theme.vars.size.baseSpacings.sp3
|
|
261
|
+
}),
|
|
262
|
+
/**
|
|
263
|
+
* Estilos para las acciones del lado derecho del StepperFooter.
|
|
264
|
+
*/
|
|
265
|
+
stepperFooterRightActions: ({ theme }) => ({
|
|
266
|
+
display: "flex",
|
|
267
|
+
alignItems: "center",
|
|
268
|
+
gap: theme.vars.size.baseSpacings.sp3
|
|
269
|
+
}),
|
|
270
|
+
/**
|
|
271
|
+
* Estilos para el contenedor de los botones del Stepper.
|
|
272
|
+
*/
|
|
273
|
+
wrapperButtons: ({ theme }) => ({
|
|
274
|
+
display: "flex",
|
|
275
|
+
gap: theme.size.baseSpacings.sp3
|
|
276
|
+
})
|
|
277
|
+
};
|
|
278
|
+
export {
|
|
279
|
+
stepperStyles as s
|
|
280
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
const STEPPER_DICTIONARY_ID = "stepper";
|
|
2
|
+
const DICTIONARY = {
|
|
3
|
+
LABEL_PREV_BUTTON: `${STEPPER_DICTIONARY_ID}.label_prev_button`,
|
|
4
|
+
LABEL_NEXT_BUTTON: `${STEPPER_DICTIONARY_ID}.label_next_button`,
|
|
5
|
+
LABEL_CANCEL_BUTTON: `${STEPPER_DICTIONARY_ID}.label_cancel_button`,
|
|
6
|
+
LABEL_SUBMIT_BUTTON: `${STEPPER_DICTIONARY_ID}.label_submit_button`
|
|
7
|
+
};
|
|
8
|
+
export {
|
|
9
|
+
DICTIONARY as D
|
|
10
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
const evaluateVisibilityStepCondition = (step, formData, visibilityData) => {
|
|
2
|
+
if (!step.visibilityCondition) {
|
|
3
|
+
return true;
|
|
4
|
+
}
|
|
5
|
+
try {
|
|
6
|
+
return step.visibilityCondition(formData || {}, visibilityData);
|
|
7
|
+
} catch (error) {
|
|
8
|
+
console.error(
|
|
9
|
+
`Error evualuando la condición del step "${step.key}":`,
|
|
10
|
+
error
|
|
11
|
+
);
|
|
12
|
+
return false;
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
export {
|
|
16
|
+
evaluateVisibilityStepCondition as e
|
|
17
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { e as evaluateVisibilityStepCondition } from "../evaluateVisibilityStepCondition/index.js";
|
|
2
|
+
const findNextVisibleValidStep = (currentStepIndex, steps, formData, visibilityData) => {
|
|
3
|
+
for (let i = currentStepIndex + 1; i < steps.length; i++) {
|
|
4
|
+
const step = steps[i];
|
|
5
|
+
if (evaluateVisibilityStepCondition(step, formData || {}, visibilityData)) {
|
|
6
|
+
return i;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
return steps.length;
|
|
10
|
+
};
|
|
11
|
+
export {
|
|
12
|
+
findNextVisibleValidStep as f
|
|
13
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { e as evaluateVisibilityStepCondition } from "../evaluateVisibilityStepCondition/index.js";
|
|
2
|
+
const findPrevVisibleValidStep = (currentStepIndex, steps, formData, visibilityData) => {
|
|
3
|
+
for (let i = currentStepIndex - 1; i >= 0; i--) {
|
|
4
|
+
const step = steps[i];
|
|
5
|
+
if (evaluateVisibilityStepCondition(step, formData || {}, visibilityData)) {
|
|
6
|
+
return i;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
return -1;
|
|
10
|
+
};
|
|
11
|
+
export {
|
|
12
|
+
findPrevVisibleValidStep as f
|
|
13
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { e as evaluateVisibilityStepCondition } from "../evaluateVisibilityStepCondition/index.js";
|
|
2
|
+
const isLastVisibleValidStep = (currentStepIndex, steps, formData, visibilityData) => {
|
|
3
|
+
if (!steps || currentStepIndex >= steps.length || currentStepIndex < 0) {
|
|
4
|
+
return false;
|
|
5
|
+
}
|
|
6
|
+
for (let i = currentStepIndex + 1; i < steps.length; i++) {
|
|
7
|
+
const step = steps[i];
|
|
8
|
+
if (evaluateVisibilityStepCondition(step, formData || {}, visibilityData)) {
|
|
9
|
+
return false;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
return true;
|
|
13
|
+
};
|
|
14
|
+
export {
|
|
15
|
+
isLastVisibleValidStep as i
|
|
16
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { useFormContext } from "react-hook-form";
|
|
2
|
+
import { u as useStepper } from "../useStepper/index.js";
|
|
3
|
+
import { i as isLastVisibleValidStep } from "../../helpers/isLastVisibleValidStep/index.js";
|
|
4
|
+
const useIsLastVisibleValidStep = () => {
|
|
5
|
+
const { getValues } = useFormContext();
|
|
6
|
+
const { currentStep, steps, visibilityData } = useStepper((state) => ({
|
|
7
|
+
currentStep: state.currentStep,
|
|
8
|
+
steps: state.steps,
|
|
9
|
+
visibilityData: state.visibilityData
|
|
10
|
+
}));
|
|
11
|
+
const formData = getValues();
|
|
12
|
+
return isLastVisibleValidStep(currentStep, steps || [], formData, visibilityData);
|
|
13
|
+
};
|
|
14
|
+
export {
|
|
15
|
+
useIsLastVisibleValidStep as u
|
|
16
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { useContext } from "react";
|
|
2
|
+
import { useStore } from "zustand";
|
|
3
|
+
import { shallow } from "zustand/shallow";
|
|
4
|
+
import { a as StepperContext } from "../../store/StepperContext/index.js";
|
|
5
|
+
function useStepper(selector, equalityFn) {
|
|
6
|
+
const context = useContext(StepperContext);
|
|
7
|
+
if (!context) {
|
|
8
|
+
throw new Error(
|
|
9
|
+
"useStepperStore context must be use inside StepperContext"
|
|
10
|
+
);
|
|
11
|
+
}
|
|
12
|
+
const { store } = context;
|
|
13
|
+
const storeData = useStore(store, selector, equalityFn ?? shallow);
|
|
14
|
+
return {
|
|
15
|
+
...storeData
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
export {
|
|
19
|
+
useStepper as u
|
|
20
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { u as useStepper } from "../useStepper/index.js";
|
|
2
|
+
import { useFormContext } from "react-hook-form";
|
|
3
|
+
function useStepperActions() {
|
|
4
|
+
const { trigger, clearErrors, getValues, reset } = useFormContext();
|
|
5
|
+
const { nextStep, prevStep, currentStep, steps, setStepValidationStatus, resetStepper } = useStepper((state) => ({
|
|
6
|
+
nextStep: state.actions.nextStep,
|
|
7
|
+
prevStep: state.actions.prevStep,
|
|
8
|
+
currentStep: state.currentStep,
|
|
9
|
+
steps: state.steps,
|
|
10
|
+
setStepValidationStatus: state.actions.setStepValidationStatus,
|
|
11
|
+
resetStepper: state.actions.resetStepper
|
|
12
|
+
}));
|
|
13
|
+
const prevStepAction = () => {
|
|
14
|
+
const formData = getValues();
|
|
15
|
+
prevStep(formData);
|
|
16
|
+
};
|
|
17
|
+
const nextStepAction = async () => {
|
|
18
|
+
const formData = getValues();
|
|
19
|
+
const futureSteps = steps.slice(currentStep + 1);
|
|
20
|
+
const futureFields = [];
|
|
21
|
+
futureSteps.forEach((step) => {
|
|
22
|
+
if (step.validationFields) {
|
|
23
|
+
futureFields.push(...step.validationFields);
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
const validateFn = async () => {
|
|
27
|
+
const currentStepData = steps[currentStep];
|
|
28
|
+
const fieldsToValidate = currentStepData?.validationFields || [];
|
|
29
|
+
if (fieldsToValidate.length === 0) {
|
|
30
|
+
return await trigger();
|
|
31
|
+
}
|
|
32
|
+
return await trigger(fieldsToValidate);
|
|
33
|
+
};
|
|
34
|
+
const success = await nextStep(validateFn, formData);
|
|
35
|
+
if (success && futureFields.length > 0) {
|
|
36
|
+
clearErrors(futureFields);
|
|
37
|
+
setTimeout(() => {
|
|
38
|
+
clearErrors(futureFields);
|
|
39
|
+
futureSteps.forEach((_, index) => {
|
|
40
|
+
const stepIndex = currentStep + 1 + index;
|
|
41
|
+
setStepValidationStatus(stepIndex, true);
|
|
42
|
+
});
|
|
43
|
+
}, 100);
|
|
44
|
+
}
|
|
45
|
+
return success;
|
|
46
|
+
};
|
|
47
|
+
const cancelAction = () => {
|
|
48
|
+
reset();
|
|
49
|
+
clearErrors();
|
|
50
|
+
resetStepper();
|
|
51
|
+
};
|
|
52
|
+
return { prevStepAction, nextStepAction, cancelAction };
|
|
53
|
+
}
|
|
54
|
+
export {
|
|
55
|
+
useStepperActions as u
|
|
56
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
const pathIcons = {
|
|
2
|
+
patronum: "frontend/components/step/assets/icons/patronum_fill.svg",
|
|
3
|
+
arrowLeft: "frontend/components/step/assets/icons/arrow_left.svg",
|
|
4
|
+
arrowRight: "frontend/components/step/assets/icons/arrow_right.svg",
|
|
5
|
+
circleCheck: "frontend/components/step/assets/icons/circle_check.svg",
|
|
6
|
+
circleError: "frontend/components/step/assets/icons/circle_error.svg",
|
|
7
|
+
dotOutline: "frontend/components/step/assets/icons/dot_outline.svg",
|
|
8
|
+
dotSelected: "frontend/components/step/assets/icons/dot_selected.svg"
|
|
9
|
+
};
|
|
10
|
+
export {
|
|
11
|
+
pathIcons as p
|
|
12
|
+
};
|
|
@@ -2,8 +2,12 @@ export { useStepper } from './hooks/useStepper/index';
|
|
|
2
2
|
export { Stepper } from './Stepper';
|
|
3
3
|
export { StepperContent } from './subcomponents/StepperContent';
|
|
4
4
|
export { Step } from './subcomponents/StepperContent/subcomponents/Step';
|
|
5
|
-
export { StepperFooter
|
|
6
|
-
export { StepperFooterLeftActions
|
|
7
|
-
export { StepperFooterRightActions
|
|
8
|
-
export { StepperNextButton
|
|
5
|
+
export { StepperFooter } from './subcomponents/StepperFooter';
|
|
6
|
+
export { StepperFooterLeftActions } from './subcomponents/StepperFooter/subcomponents/StepperFooterLeftActions';
|
|
7
|
+
export { StepperFooterRightActions } from './subcomponents/StepperFooter/subcomponents/StepperFooterRightActions';
|
|
8
|
+
export { StepperNextButton } from './subcomponents/StepperButtons/StepperNextButton';
|
|
9
|
+
export { StepperPrevButton } from './subcomponents/StepperButtons/StepperPrevButton';
|
|
10
|
+
export { StepperCancelButton } from './subcomponents/StepperButtons/StepperCancelButton';
|
|
11
|
+
export { StepperSubmitButton } from './subcomponents/StepperButtons/StepperSubmitButton';
|
|
9
12
|
export { evaluateVisibilityStepCondition } from './helpers/evaluateVisibilityStepCondition';
|
|
13
|
+
export { type Step as TypeStep } from './types';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
var StepperSlots = /* @__PURE__ */ ((StepperSlots2) => {
|
|
2
|
+
StepperSlots2["stepperRoot"] = "stepperRoot";
|
|
3
|
+
return StepperSlots2;
|
|
4
|
+
})(StepperSlots || {});
|
|
5
|
+
var ContentSlots = /* @__PURE__ */ ((ContentSlots2) => {
|
|
6
|
+
ContentSlots2["contentSection"] = "contentSection";
|
|
7
|
+
ContentSlots2["stepArea"] = "stepArea";
|
|
8
|
+
ContentSlots2["step"] = "step";
|
|
9
|
+
ContentSlots2["stepName"] = "stepName";
|
|
10
|
+
ContentSlots2["indicator"] = "indicator";
|
|
11
|
+
ContentSlots2["textNumber"] = "textNumber";
|
|
12
|
+
return ContentSlots2;
|
|
13
|
+
})(ContentSlots || {});
|
|
14
|
+
var ContentAreaSlots = /* @__PURE__ */ ((ContentAreaSlots2) => {
|
|
15
|
+
ContentAreaSlots2["contentArea"] = "contentArea";
|
|
16
|
+
ContentAreaSlots2["contentAreaHeader"] = "contentAreaHeader";
|
|
17
|
+
ContentAreaSlots2["wrapperIcon"] = "wrapperIcon";
|
|
18
|
+
ContentAreaSlots2["wrapperTitle"] = "wrapperTitle";
|
|
19
|
+
ContentAreaSlots2["icon"] = "icon";
|
|
20
|
+
ContentAreaSlots2["title"] = "title";
|
|
21
|
+
ContentAreaSlots2["description"] = "description";
|
|
22
|
+
return ContentAreaSlots2;
|
|
23
|
+
})(ContentAreaSlots || {});
|
|
24
|
+
var StepperFooterSlots = /* @__PURE__ */ ((StepperFooterSlots2) => {
|
|
25
|
+
StepperFooterSlots2["stepperFooterSection"] = "stepperFooterSection";
|
|
26
|
+
StepperFooterSlots2["stepperFooterLeftActions"] = "stepperFooterLeftActions";
|
|
27
|
+
StepperFooterSlots2["stepperFooterRightActions"] = "stepperFooterRightActions";
|
|
28
|
+
StepperFooterSlots2["wrapperButtons"] = "wrapperButtons";
|
|
29
|
+
return StepperFooterSlots2;
|
|
30
|
+
})(StepperFooterSlots || {});
|
|
31
|
+
export {
|
|
32
|
+
ContentSlots as C,
|
|
33
|
+
StepperSlots as S,
|
|
34
|
+
StepperFooterSlots as a,
|
|
35
|
+
ContentAreaSlots as b
|
|
36
|
+
};
|