@m4l/components 9.3.12-BE270825-beta.2 → 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 (114) hide show
  1. package/@types/types.d.ts +207 -61
  2. package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.js +0 -2
  3. package/components/NumberInput/hooks/useNumberInput/useNumberInput.js +0 -2
  4. package/components/Stepper/Stepper.d.ts +8 -0
  5. package/components/Stepper/Stepper.js +69 -0
  6. package/components/Stepper/Stepper.styles.d.ts +2 -0
  7. package/components/Stepper/Stepper.styles.js +280 -0
  8. package/components/Stepper/constants.d.ts +2 -0
  9. package/components/Stepper/constants.js +6 -0
  10. package/components/Stepper/dictionary.d.ts +8 -0
  11. package/components/Stepper/dictionary.js +10 -0
  12. package/components/Stepper/helpers/evaluateVisibilityStepCondition/index.d.ts +9 -0
  13. package/components/Stepper/helpers/evaluateVisibilityStepCondition/index.js +17 -0
  14. package/components/Stepper/helpers/findNextVisibleValidStep/index.d.ts +10 -0
  15. package/components/Stepper/helpers/findNextVisibleValidStep/index.js +13 -0
  16. package/components/Stepper/helpers/findPrevVisibleValidStep/index.d.ts +10 -0
  17. package/components/Stepper/helpers/findPrevVisibleValidStep/index.js +13 -0
  18. package/components/Stepper/helpers/index.d.ts +4 -0
  19. package/components/Stepper/helpers/isLastVisibleValidStep/index.d.ts +10 -0
  20. package/components/Stepper/helpers/isLastVisibleValidStep/index.js +16 -0
  21. package/components/Stepper/hooks/useIsLastVisibleValidStep/index.d.ts +6 -0
  22. package/components/Stepper/hooks/useIsLastVisibleValidStep/index.js +16 -0
  23. package/components/Stepper/hooks/useStepper/index.d.ts +5 -0
  24. package/components/Stepper/hooks/useStepper/index.js +20 -0
  25. package/components/Stepper/hooks/useStepperActions/index.d.ts +1 -0
  26. package/components/Stepper/hooks/useStepperActions/index.js +1 -0
  27. package/components/Stepper/hooks/useStepperActions/useStepperActions.d.ts +8 -0
  28. package/components/Stepper/hooks/useStepperActions/useStepperActions.js +56 -0
  29. package/components/Stepper/icons.d.ts +9 -0
  30. package/components/Stepper/icons.js +12 -0
  31. package/components/Stepper/index.d.ts +13 -0
  32. package/components/Stepper/index.js +1 -0
  33. package/components/Stepper/slots/StepperEnum.d.ts +26 -0
  34. package/components/Stepper/slots/StepperEnum.js +36 -0
  35. package/components/Stepper/slots/StepperSlot.d.ts +57 -0
  36. package/components/Stepper/slots/StepperSlot.js +97 -0
  37. package/components/Stepper/store/StepperContext/index.d.ts +12 -0
  38. package/components/Stepper/store/StepperContext/index.js +103 -0
  39. package/components/Stepper/store/StepperStore/index.d.ts +16 -0
  40. package/components/Stepper/store/StepperStore/index.js +152 -0
  41. package/components/Stepper/store/types.d.ts +78 -0
  42. package/components/Stepper/subcomponents/ContentArea/index.d.ts +6 -0
  43. package/components/Stepper/subcomponents/ContentArea/index.js +24 -0
  44. package/components/Stepper/subcomponents/ContentArea/subcomponents/WrapperIcon/index.d.ts +4 -0
  45. package/components/Stepper/subcomponents/ContentArea/subcomponents/WrapperIcon/index.js +20 -0
  46. package/components/Stepper/subcomponents/ContentArea/subcomponents/WrapperTitle/index.d.ts +4 -0
  47. package/components/Stepper/subcomponents/ContentArea/subcomponents/WrapperTitle/index.js +23 -0
  48. package/components/Stepper/subcomponents/StepArea/index.d.ts +6 -0
  49. package/components/Stepper/subcomponents/StepArea/index.js +135 -0
  50. package/components/Stepper/subcomponents/StepArea/subcomponents/Inidicator/index.d.ts +5 -0
  51. package/components/Stepper/subcomponents/StepArea/subcomponents/Inidicator/index.js +85 -0
  52. package/components/Stepper/subcomponents/StepperButtons/StepperCancelButton/index.d.ts +4 -0
  53. package/components/Stepper/subcomponents/StepperButtons/StepperCancelButton/index.js +25 -0
  54. package/components/Stepper/subcomponents/StepperButtons/StepperNextButton/index.d.ts +4 -0
  55. package/components/Stepper/subcomponents/StepperButtons/StepperNextButton/index.js +46 -0
  56. package/components/Stepper/subcomponents/StepperButtons/StepperPrevButton/index.d.ts +4 -0
  57. package/components/Stepper/subcomponents/StepperButtons/StepperPrevButton/index.js +52 -0
  58. package/components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.d.ts +4 -0
  59. package/components/Stepper/subcomponents/StepperButtons/StepperSubmitButton/index.js +20 -0
  60. package/components/Stepper/subcomponents/StepperButtons/index.d.ts +4 -0
  61. package/components/Stepper/subcomponents/StepperButtons/index.js +1 -0
  62. package/components/Stepper/subcomponents/StepperContent/index.d.ts +7 -0
  63. package/components/Stepper/subcomponents/StepperContent/index.js +23 -0
  64. package/components/Stepper/subcomponents/StepperContent/subcomponents/Step/index.d.ts +6 -0
  65. package/components/Stepper/subcomponents/StepperContent/subcomponents/Step/index.js +42 -0
  66. package/components/Stepper/subcomponents/StepperFooter/index.d.ts +6 -0
  67. package/components/Stepper/subcomponents/StepperFooter/index.js +48 -0
  68. package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterLeftActions/index.d.ts +6 -0
  69. package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterLeftActions/index.js +9 -0
  70. package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterRightActions/index.d.ts +6 -0
  71. package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterRightActions/index.js +33 -0
  72. package/components/Stepper/types.d.ts +156 -0
  73. package/components/areas/contexts/AreasContext/store.js +2 -2
  74. package/components/hook-form/RHFAutocompleteAsync/reducer/RHFAutocompleteReducer.js +0 -5
  75. package/components/hook-form/RHFormContext/index.d.ts +1 -1
  76. package/components/hook-form/RHFormContext/index.js +5 -4
  77. package/components/hook-form/RHFormContext/types.d.ts +3 -1
  78. package/components/index.d.ts +1 -1
  79. package/components/mui_extended/Typography/Typography.js +1 -3
  80. package/components/mui_extended/Typography/types.d.ts +0 -5
  81. package/components/mui_extended/Typography/typography.styles.js +0 -1
  82. package/helpers/getStepsAndValidationSchema/getStepsAndValidationSchema.d.ts +11 -0
  83. package/helpers/getStepsAndValidationSchema/getStepsAndValidationSchema.js +44 -0
  84. package/helpers/getStepsAndValidationSchema/index.d.ts +2 -0
  85. package/helpers/getStepsAndValidationSchema/index.js +1 -0
  86. package/helpers/getStepsAndValidationSchema/types.d.ts +21 -0
  87. package/helpers/getStepsAndValidationSchema/types.js +1 -0
  88. package/helpers/index.d.ts +1 -0
  89. package/helpers/index.js +1 -0
  90. package/index.d.ts +1 -0
  91. package/index.js +92 -68
  92. package/package.json +1 -1
  93. package/storybook/components/Stepper/Stepper.stories.d.ts +28 -0
  94. package/storybook/components/Stepper/api/userApi.d.ts +6 -0
  95. package/storybook/components/Stepper/components/AdminPermissionsStep.d.ts +4 -0
  96. package/storybook/components/Stepper/components/CompanySocialMediaStep.d.ts +4 -0
  97. package/storybook/components/Stepper/components/CompanyStep.d.ts +4 -0
  98. package/storybook/components/Stepper/components/ContactStep.d.ts +4 -0
  99. package/storybook/components/Stepper/components/ExtraInformationStep.d.ts +4 -0
  100. package/storybook/components/Stepper/components/ModulePermissionsStep.d.ts +4 -0
  101. package/storybook/components/Stepper/components/PrivilegesStep.d.ts +4 -0
  102. package/storybook/components/Stepper/helpers/useSteps.d.ts +43 -0
  103. package/storybook/components/Stepper/subcomponents/StepperDecorator.d.ts +9 -0
  104. package/storybook/components/Stepper/validations/CompanyData.d.ts +18 -0
  105. package/storybook/components/Stepper/validations/ContactData.d.ts +11 -0
  106. package/storybook/components/Stepper/validations/ExtraInformationData.d.ts +9 -0
  107. package/storybook/components/Stepper/validations/PrivilegesData.d.ts +14 -0
  108. package/components/Card/Card.js +0 -49
  109. package/components/Card/Card.styles.js +0 -52
  110. package/components/Card/constants.js +0 -23
  111. package/components/Card/helpers/getSizeSpacing.js +0 -10
  112. package/components/Card/slots/CardEnum.js +0 -7
  113. package/components/Card/slots/CardSlots.js +0 -11
  114. /package/components/{Card → Stepper/helpers}/index.js +0 -0
@@ -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,2 @@
1
+ export declare const STEPPER_PREFIX_NAME = "M4LStepper";
2
+ export declare const STEPPER_STORE_ID = "M4LStepperStore";
@@ -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,8 @@
1
+ export declare const STEPPER_DICTIONARY_ID = "stepper";
2
+ export declare function getStepperComponentsDictionary(): string[];
3
+ export declare const DICTIONARY: {
4
+ LABEL_PREV_BUTTON: string;
5
+ LABEL_NEXT_BUTTON: string;
6
+ LABEL_CANCEL_BUTTON: string;
7
+ LABEL_SUBMIT_BUTTON: string;
8
+ };
@@ -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,9 @@
1
+ import { FormData, Step, VisibilityData } from '../../types';
2
+ /**
3
+ * evaluateVisibilityStepCondition - Función helper que evalúa si un step debe ser visible según su condition
4
+ * @param step - El step a evaluar
5
+ * @param formData - Datos del formulario actual para evaluar la condition
6
+ * @param visibilityData - Datos adicionales para evaluar la condition (ej: objectId)
7
+ * @returns boolean - Retorna true si el step debe ser visible, false en caso contrario
8
+ */
9
+ export declare const evaluateVisibilityStepCondition: (step: Step, formData?: FormData, visibilityData?: VisibilityData) => boolean;
@@ -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,10 @@
1
+ import { FormData, Step, VisibilityData } from '../../types';
2
+ /**
3
+ * findNextVisibleValidStep - Función helper que busca el siguiente step válido según su visibilityCondition.
4
+ * @param currentStepIndex - Índice del step actual
5
+ * @param steps - Lista de todos los steps del Stepper
6
+ * @param formData - Datos del formulario actual para evaluar las conditions
7
+ * @param visibilityData - Datos adicionales para evaluar las conditions (ej: objectId)
8
+ * @returns number - Retorna el índice del siguiente step válido, o steps.length si no hay más steps válidos
9
+ */
10
+ export declare const findNextVisibleValidStep: (currentStepIndex: number, steps: Step[], formData?: FormData, visibilityData?: VisibilityData) => number;
@@ -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,10 @@
1
+ import { FormData, Step, VisibilityData } from '../../types';
2
+ /**
3
+ * findPrevVisibleValidStep - Función helper que busca el paso anterior válido según su condition
4
+ * @param currentStepIndex - Índice del step actual
5
+ * @param steps - Lista de todos los steps del Stepper
6
+ * @param formData - Datos del formulario actual para evaluar las conditions
7
+ * @param visibilityData - Datos adicionales para evaluar las conditions (ej: objectId)
8
+ * @returns number - Retorna el índice del step anterior válido, o -1 si no hay steps anteriores válidos
9
+ */
10
+ export declare const findPrevVisibleValidStep: (currentStepIndex: number, steps: Step[], formData?: FormData, visibilityData?: VisibilityData) => number;
@@ -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,4 @@
1
+ export { evaluateVisibilityStepCondition } from './evaluateVisibilityStepCondition';
2
+ export { findNextVisibleValidStep } from './findNextVisibleValidStep';
3
+ export { findPrevVisibleValidStep } from './findPrevVisibleValidStep';
4
+ export { isLastVisibleValidStep } from './isLastVisibleValidStep';
@@ -0,0 +1,10 @@
1
+ import { FormData, Step, VisibilityData } from '../../types';
2
+ /**
3
+ * isLastVisibleValidStep - Función helper que determina si el paso actual es el último paso válido
4
+ * @param currentStepIndex - Índice del step actual
5
+ * @param steps - Lista de todos los steps del Stepper
6
+ * @param formData - Datos del formulario actual para evaluar las conditions
7
+ * @param visibilityData - Datos adicionales para evaluar las conditions (ej: objectId)
8
+ * @returns boolean - Retorna true si el paso actual es el último paso válido
9
+ */
10
+ export declare const isLastVisibleValidStep: (currentStepIndex: number, steps: Step[], formData?: FormData, visibilityData?: VisibilityData) => boolean;
@@ -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,6 @@
1
+ /**
2
+ * useIsLastVisibleValidStep - Hook que determina si el paso actual es el último paso válido
3
+ * considerando la "visibilityCondition" de cada step y los datos actuales del formulario
4
+ * @returns boolean - true si estamos en el último paso válido
5
+ */
6
+ export declare const useIsLastVisibleValidStep: () => boolean;
@@ -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,5 @@
1
+ import { StepperStateWithActions } from '../../store/types';
2
+ /**
3
+ * Hook que permite acceder al store de StepperStore
4
+ */
5
+ export declare function useStepper<T>(selector: (state: StepperStateWithActions) => T, equalityFn?: (left: T, right: T) => boolean): T;
@@ -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
+ export { useStepperActions } from './useStepperActions';
@@ -0,0 +1,8 @@
1
+ /**
2
+ * useActions - Hook/función que expone las acciones del Stepper para uso externo
3
+ */
4
+ export declare function useStepperActions(): {
5
+ prevStepAction: () => void;
6
+ nextStepAction: () => Promise<boolean>;
7
+ cancelAction: () => void;
8
+ };
@@ -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,9 @@
1
+ export declare const pathIcons: {
2
+ patronum: string;
3
+ arrowLeft: string;
4
+ arrowRight: string;
5
+ circleCheck: string;
6
+ circleError: string;
7
+ dotOutline: string;
8
+ dotSelected: string;
9
+ };
@@ -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
+ };
@@ -0,0 +1,13 @@
1
+ export { useStepper } from './hooks/useStepper/index';
2
+ export { Stepper } from './Stepper';
3
+ export { StepperContent } from './subcomponents/StepperContent';
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 } 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';
12
+ export { evaluateVisibilityStepCondition } from './helpers/evaluateVisibilityStepCondition';
13
+ export { type Step as TypeStep } from './types';
@@ -0,0 +1 @@
1
+
@@ -0,0 +1,26 @@
1
+ export declare enum StepperSlots {
2
+ stepperRoot = "stepperRoot"
3
+ }
4
+ export declare enum ContentSlots {
5
+ contentSection = "contentSection",
6
+ stepArea = "stepArea",
7
+ step = "step",
8
+ stepName = "stepName",
9
+ indicator = "indicator",
10
+ textNumber = "textNumber"
11
+ }
12
+ export declare enum ContentAreaSlots {
13
+ contentArea = "contentArea",
14
+ contentAreaHeader = "contentAreaHeader",
15
+ wrapperIcon = "wrapperIcon",
16
+ wrapperTitle = "wrapperTitle",
17
+ icon = "icon",
18
+ title = "title",
19
+ description = "description"
20
+ }
21
+ export declare enum StepperFooterSlots {
22
+ stepperFooterSection = "stepperFooterSection",
23
+ stepperFooterLeftActions = "stepperFooterLeftActions",
24
+ stepperFooterRightActions = "stepperFooterRightActions",
25
+ wrapperButtons = "wrapperButtons"
26
+ }
@@ -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
+ };