@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.
Files changed (46) hide show
  1. package/components/Stepper/Stepper.js +69 -0
  2. package/components/Stepper/Stepper.styles.js +280 -0
  3. package/components/Stepper/constants.js +6 -0
  4. package/components/Stepper/dictionary.js +10 -0
  5. package/components/Stepper/helpers/evaluateVisibilityStepCondition/index.js +17 -0
  6. package/components/Stepper/helpers/findNextVisibleValidStep/index.js +13 -0
  7. package/components/Stepper/helpers/findPrevVisibleValidStep/index.js +13 -0
  8. package/components/Stepper/helpers/index.js +1 -0
  9. package/components/Stepper/helpers/isLastVisibleValidStep/index.js +16 -0
  10. package/components/Stepper/hooks/useIsLastVisibleValidStep/index.js +16 -0
  11. package/components/Stepper/hooks/useStepper/index.js +20 -0
  12. package/components/Stepper/hooks/useStepperActions/index.js +1 -0
  13. package/components/Stepper/hooks/useStepperActions/useStepperActions.js +56 -0
  14. package/components/Stepper/icons.js +12 -0
  15. package/components/Stepper/index.d.ts +8 -4
  16. package/components/Stepper/index.js +1 -0
  17. package/components/Stepper/slots/StepperEnum.js +36 -0
  18. package/components/Stepper/slots/StepperSlot.js +97 -0
  19. package/components/Stepper/store/StepperContext/index.js +103 -0
  20. package/components/Stepper/store/StepperStore/index.js +152 -0
  21. package/components/Stepper/subcomponents/ContentArea/index.js +24 -0
  22. package/components/Stepper/subcomponents/ContentArea/subcomponents/WrapperIcon/index.js +20 -0
  23. package/components/Stepper/subcomponents/ContentArea/subcomponents/WrapperTitle/index.js +23 -0
  24. package/components/Stepper/subcomponents/StepArea/index.js +135 -0
  25. package/components/Stepper/subcomponents/StepArea/subcomponents/Inidicator/index.js +85 -0
  26. package/components/Stepper/subcomponents/StepperButtons/StepperCancelButton/index.js +25 -0
  27. package/components/Stepper/subcomponents/StepperButtons/StepperNextButton/index.js +46 -0
  28. package/components/Stepper/subcomponents/StepperButtons/StepperPrevButton/index.js +52 -0
  29. package/components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.js +20 -0
  30. package/components/Stepper/subcomponents/StepperButtons/index.js +1 -0
  31. package/components/Stepper/subcomponents/StepperContent/index.js +23 -0
  32. package/components/Stepper/subcomponents/StepperContent/subcomponents/Step/index.js +42 -0
  33. package/components/Stepper/subcomponents/StepperFooter/index.js +48 -0
  34. package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterLeftActions/index.js +9 -0
  35. package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterRightActions/index.js +33 -0
  36. package/components/index.d.ts +1 -0
  37. package/helpers/getStepsAndValidationSchema/getStepsAndValidationSchema.js +44 -0
  38. package/helpers/getStepsAndValidationSchema/index.d.ts +1 -0
  39. package/helpers/getStepsAndValidationSchema/index.js +1 -0
  40. package/helpers/getStepsAndValidationSchema/types.js +1 -0
  41. package/helpers/index.d.ts +1 -0
  42. package/helpers/index.js +1 -0
  43. package/index.d.ts +1 -0
  44. package/index.js +58 -32
  45. package/package.json +1 -1
  46. 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,6 @@
1
+ const STEPPER_PREFIX_NAME = "M4LStepper";
2
+ const STEPPER_STORE_ID = "M4LStepperStore";
3
+ export {
4
+ STEPPER_PREFIX_NAME as S,
5
+ STEPPER_STORE_ID as a
6
+ };
@@ -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,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,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, } from './subcomponents/StepperFooter';
6
- export { StepperFooterLeftActions, } from './subcomponents/StepperFooter/subcomponents/StepperFooterLeftActions';
7
- export { StepperFooterRightActions, } from './subcomponents/StepperFooter/subcomponents/StepperFooterRightActions';
8
- export { StepperNextButton, StepperPrevButton, StepperCancelButton, StepperSubmitButton, } from './subcomponents/StepperButtons';
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
+ };