@m4l/components 9.4.27 → 9.4.28-BE20260210-1

package/components/DynamicForm/DynamicForm.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { DynamicFormProps, DynamicFormRef } from './types';
+/**
+ * Componente DynamicForm que renderiza y edita formularios dinámicos
+ * a partir del JSON real enviado por la API, usando React Hook Form.
+ *
+ * Este componente interpreta el contrato API y renderiza los campos
+ * según las especificaciones del backend, incluyendo:
+ * - Validaciones dinámicas
+ * - Reglas condicionales
+ * - Valores iniciales
+ * - Tipos de campos diversos
+ *
+ * ### Dependencias:
+ * - **`useDynamicForm:`** Hook que gestiona la lógica del formulario dinámico.
+ * - **`resolveFieldComponent:`** Helper que resuelve el componente RHF correspondiente.
+ * @param {DynamicFormProps} props - Propiedades del componente.
+ * @returns {JSX.Element} Elemento renderizado.
+ * @example
+ * ```tsx
+ * <DynamicForm
+ *   data={formData}
+ *   onSubmit={(data) => console.log(data)}
+ *   size="medium"
+ * />
+ * ```
+ */
+export declare const DynamicForm: React.ForwardRefExoticComponent<DynamicFormProps & React.RefAttributes<DynamicFormRef>>;

package/components/DynamicForm/DynamicForm.js

@@ -0,0 +1,126 @@
+import { jsx } from "react/jsx-runtime";
+import React, { forwardRef, useMemo, useImperativeHandle } from "react";
+import clsx from "clsx";
+import { useModuleSkeleton } from "@m4l/core";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock.js";
+import { L as LinearProgress } from "../extended/mui/LinearProgress/index.js";
+import { D as DynamicFormRootStyled, a as DynamicFormFormProviderStyled } from "./slots/DynamicFormSlots.js";
+import { D as DYNAMIC_FORM_CLASSES, E as EMPTY_DATA } from "./constants.js";
+import { u as useDynamicForm } from "./hooks/useDynamicForm/useDynamicForm.js";
+import { u as useDynamicFormData } from "./hooks/useDynamicFormData/useDynamicFormData.js";
+import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
+import { D as DynamicFormCoupled } from "./subcomponents/DynamicFormCoupled/DynamicFormCoupled.js";
+import { D as DynamicFormContent } from "./subcomponents/DynamicFormContent/DynamicFormContent.js";
+const DynamicForm = forwardRef((props, ref) => {
+  const {
+    idForm,
+    idFormInstance,
+    inputEndpoint,
+    outputEndpoint,
+    data,
+    formatInputData,
+    formatOutputData,
+    onSubmit,
+    onSubmitError,
+    size,
+    className,
+    dataTestId,
+    fieldWrapperClassName,
+    coupled = false,
+    name,
+    actionFormIntroProps,
+    renderActions,
+    ...others
+  } = props;
+  const { currentSize } = useComponentSize(size);
+  const isSkeleton = useModuleSkeleton();
+  const {
+    formData,
+    statusLoad,
+    handleSubmit
+  } = useDynamicFormData({
+    idForm,
+    idFormInstance,
+    inputEndpoint,
+    outputEndpoint,
+    initialData: data,
+    formatInputData,
+    formatOutputData,
+    onSubmit
+  });
+  const formDataToUse = formData || data;
+  const { initialValues, validationSchema } = useDynamicForm(formDataToUse || EMPTY_DATA);
+  const ownerState = useMemo(() => ({
+    size: currentSize
+  }), [currentSize]);
+  const formRef = React.useRef(null);
+  useImperativeHandle(ref, () => {
+    return formRef.current;
+  }, []);
+  if (!formDataToUse) {
+    return null;
+  }
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(
+      DynamicFormRootStyled,
+      {
+        ownerState,
+        className: clsx(className, DYNAMIC_FORM_CLASSES.root),
+        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: dataTestId } : {},
+        ...others,
+        children: /* @__PURE__ */ jsx(LinearProgress, {})
+      }
+    );
+  }
+  if (coupled) {
+    if (!name) {
+      console.warn('DynamicForm: La prop "name" es requerida cuando el formulario está acoplado (coupled=true)');
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      DynamicFormCoupled,
+      {
+        name,
+        value: formDataToUse,
+        initialValues,
+        validationSchema,
+        ownerState,
+        currentSize,
+        fieldWrapperClassName,
+        dataTestId,
+        className,
+        ...others
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    DynamicFormFormProviderStyled,
+    {
+      ref: formRef,
+      values: initialValues,
+      validationSchema,
+      onSubmit: outputEndpoint ? handleSubmit : onSubmit,
+      onSubmitError,
+      statusLoad,
+      mode: "onChange",
+      className: clsx(className, DYNAMIC_FORM_CLASSES.root, DYNAMIC_FORM_CLASSES.formProvider),
+      children: formDataToUse && /* @__PURE__ */ jsx(
+        DynamicFormContent,
+        {
+          data: formDataToUse,
+          ownerState,
+          currentSize,
+          fieldWrapperClassName,
+          dataTestId,
+          coupled,
+          actionFormIntroProps,
+          renderActions
+        }
+      )
+    }
+  );
+});
+DynamicForm.displayName = "DynamicForm";
+export {
+  DynamicForm as D
+};

package/components/DynamicForm/DynamicForm.styles.d.ts

@@ -0,0 +1,2 @@
+import { DynamicFormStyles } from './types';
+export declare const componentStyles: DynamicFormStyles;

package/components/DynamicForm/DynamicForm.styles.js

@@ -0,0 +1,93 @@
+const componentStyles = {
+  /**
+   * Estilos para el elemento raíz del formulario dinámico.
+   */
+  root: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp2,
+    width: "100%",
+    "& .MuiLinearProgress-root": {
+      backgroundColor: theme.vars.palette.primary.opacity
+    }
+  }),
+  /**
+   * Estilos para el wrapper del RHFormProvider.
+   */
+  formProvider: () => ({
+    width: "100%"
+  }),
+  /**
+   * Estilos para el contenedor del contenido del formulario (div interno).
+   */
+  contentRoot: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp2,
+    width: "100%",
+    padding: theme.vars.size.baseSpacings.sp2,
+    border: `1px solid ${theme.vars.palette.border.default}`,
+    borderRadius: theme.vars.size.borderRadius.r1
+  }),
+  /**
+   * Estilos para el wrapper de cada campo del formulario.
+   */
+  fieldWrapper: ({ theme, ownerState }) => {
+    const ownerStateTyped = ownerState;
+    return {
+      display: "flex",
+      flexDirection: "column",
+      gap: theme.vars.size.baseSpacings.sp1,
+      width: "100%",
+      ...ownerStateTyped?.readOnly && {
+        opacity: 0.7
+      },
+      ...ownerStateTyped?.disabled && {
+        pointerEvents: "none",
+        opacity: 0.5
+      }
+    };
+  },
+  /**
+   * Estilos para el label de cada campo.
+   */
+  label: () => ({
+    width: "100%"
+  }),
+  /**
+   * Estilos para el control (input) de cada campo.
+   */
+  control: () => ({
+    width: "100%"
+  }),
+  /**
+   * Estilos para el helper text de cada campo.
+   */
+  helperText: () => ({
+    width: "100%"
+  }),
+  /**
+   * Estilos para el divisor de sección (si se necesita en el futuro).
+   */
+  sectionDivider: ({ theme }) => ({
+    width: "100%",
+    height: theme.vars.size.borderStroke.container,
+    backgroundColor: theme.vars.palette.border.main,
+    marginTop: theme.vars.size.baseSpacings.sp2,
+    marginBottom: theme.vars.size.baseSpacings.sp2
+  }),
+  /**
+   * Estilos para el wrapper del CheckableList que proporciona altura definida.
+   */
+  checkableListWrapper: () => ({
+    width: "100%",
+    height: "400px",
+    // Altura fija para que el CheckableList pueda calcular su contenedor
+    minHeight: "400px",
+    display: "flex",
+    flexDirection: "column"
+  })
+};
+export {
+  componentStyles as c
+};

package/components/DynamicForm/constants.d.ts

@@ -0,0 +1,14 @@
+import { DynamicFormApiResponse } from './types';
+/**
+ * Clave de identificación del componente dentro del sistema.
+ *
+ * Esta constante se utiliza como identificador único para asociar y personalizar estilos
+ * y configuraciones relacionadas con el componente dentro del sistema de temas y estilos.
+ * @default 'M4LDynamicForm'
+ */
+export declare const DYNAMIC_FORM_KEY_COMPONENT = "M4LDynamicForm";
+/**
+ * Inventario de clases CSS para el componente
+ */
+export declare const DYNAMIC_FORM_CLASSES: Record<"label" | "root" | "control" | "helperText" | "formProvider" | "contentRoot" | "fieldWrapper" | "sectionDivider" | "checkableListWrapper", string>;
+export declare const EMPTY_DATA: DynamicFormApiResponse;

package/components/DynamicForm/constants.js

@@ -0,0 +1,18 @@
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { D as DynamicFormSlots } from "./slots/DynamicFormEnum.js";
+const DYNAMIC_FORM_KEY_COMPONENT = "M4LDynamicForm";
+const DYNAMIC_FORM_CLASSES = getComponentClasses(
+  DYNAMIC_FORM_KEY_COMPONENT,
+  DynamicFormSlots
+);
+const EMPTY_DATA = {
+  form: { id: 0, name: "", version: 0, nameDictionaryId: 0, descriptionDictionaryId: 0 },
+  fields: [],
+  instance: { id: 0, name: null, createdAt: "", updatedAt: "", resourceTypeId: "", resourceSerialId: "" },
+  conditionalRules: []
+};
+export {
+  DYNAMIC_FORM_CLASSES as D,
+  EMPTY_DATA as E,
+  DYNAMIC_FORM_KEY_COMPONENT as a
+};

package/components/DynamicForm/helpers/normalizeValidations.d.ts

@@ -0,0 +1,15 @@
+import { Field, FieldValidation } from '../types';
+import * as Yup from 'yup';
+/**
+ * Normaliza una validación para soportar tanto `validationType` como `type`.
+ * El JSON puede venir inconsistente, por lo que este helper unifica el formato.
+ * @param validation - Validación del campo
+ * @returns Validación normalizada con `validationType` siempre presente
+ */
+export declare function normalizeValidation(validation: FieldValidation): FieldValidation;
+/**
+ * Crea las reglas de validación de Yup para un campo específico.
+ * @param field - Campo del formulario
+ * @returns Schema de Yup para el campo o undefined si no hay validaciones ni es requerido
+ */
+export declare function createFieldValidationSchema(field: Field): Yup.StringSchema | Yup.NumberSchema | Yup.BooleanSchema | Yup.ArraySchema<any, any, any, any> | undefined;

package/components/DynamicForm/helpers/normalizeValidations.js

@@ -0,0 +1,192 @@
+import * as Yup from "yup";
+function normalizeValidation(validation) {
+  if (validation.validationType) {
+    return validation;
+  }
+  if (validation.type) {
+    return {
+      ...validation,
+      validationType: validation.type
+    };
+  }
+  return validation;
+}
+function createFieldValidationSchema(field) {
+  if ((!field.validations || field.validations.length === 0) && !field.isRequired) {
+    return void 0;
+  }
+  let baseSchema;
+  const fieldType = field.fieldType.id;
+  const rhfComponent = field.fieldType.rhfComponent;
+  if (rhfComponent === "RHFCheckableList" || rhfComponent === "RHFDaysOfWeekPicker") {
+    baseSchema = Yup.array().of(Yup.mixed());
+  } else if (fieldType === "fft_number" || fieldType === "fft_integer" || fieldType === "fft_double") {
+    baseSchema = Yup.number();
+  } else if (fieldType === "fft_boolean" || fieldType === "fft_checkbox") {
+    baseSchema = Yup.boolean();
+  } else {
+    baseSchema = Yup.string();
+  }
+  const activeValidations = field.validations ? field.validations.filter((v) => v.isActive).map(normalizeValidation).sort((a, b) => a.displayOrder - b.displayOrder) : [];
+  let schema = baseSchema;
+  activeValidations.forEach((validation) => {
+    const validationType = validation.validationType || validation.type;
+    if (!validationType) {
+      return;
+    }
+    switch (validationType.id) {
+      case "fvl_required":
+        if (field.isRequired) {
+          if (baseSchema instanceof Yup.StringSchema) {
+            schema = schema.nullable().required(validation.errorMessage || "Este campo es requerido");
+          } else if (baseSchema instanceof Yup.NumberSchema) {
+            schema = schema.required(validation.errorMessage || "Este campo es requerido");
+          } else if (baseSchema instanceof Yup.ArraySchema) {
+            schema = schema.min(1, validation.errorMessage || "Este campo es requerido");
+          } else {
+            schema = schema.required(validation.errorMessage || "Este campo es requerido");
+          }
+        }
+        break;
+      /**
+       * Validación de longitud máxima.
+       */
+      case "fvl_max_length":
+        if (validationType.requiresValue && validation.value && baseSchema instanceof Yup.StringSchema) {
+          const maxLength = parseInt(validation.value, 10);
+          if (!isNaN(maxLength)) {
+            schema = schema.max(maxLength, validation.errorMessage || `Máximo ${maxLength} caracteres`);
+          }
+        }
+        break;
+      case "fvl_min_length":
+        if (validationType.requiresValue && validation.value && baseSchema instanceof Yup.StringSchema) {
+          const minLength = parseInt(validation.value, 10);
+          if (!isNaN(minLength)) {
+            schema = schema.min(minLength, validation.errorMessage || `Mínimo ${minLength} caracteres`);
+          }
+        }
+        break;
+      case "fvl_max":
+        if (validationType.requiresValue && validation.value && baseSchema instanceof Yup.NumberSchema) {
+          const maxValue = parseFloat(validation.value);
+          if (!isNaN(maxValue)) {
+            schema = schema.max(maxValue, validation.errorMessage || `El valor máximo es ${maxValue}`);
+          }
+        }
+        break;
+      case "fvl_min":
+        if (validationType.requiresValue && validation.value && baseSchema instanceof Yup.NumberSchema) {
+          const minValue = parseFloat(validation.value);
+          if (!isNaN(minValue)) {
+            schema = schema.min(minValue, validation.errorMessage || `El valor mínimo es ${minValue}`);
+          }
+        }
+        break;
+      case "fvl_email":
+        if (baseSchema instanceof Yup.StringSchema) {
+          schema = schema.email(validation.errorMessage || "Debe ser un email válido");
+        }
+        break;
+      case "fvl_url":
+        if (baseSchema instanceof Yup.StringSchema) {
+          schema = schema.url(validation.errorMessage || "Debe ser una URL válida");
+        }
+        break;
+      case "fvl_pattern":
+        if (validationType.requiresValue && validation.value && baseSchema instanceof Yup.StringSchema) {
+          try {
+            const regex = new RegExp(validation.value);
+            schema = schema.matches(regex, validation.errorMessage || "El formato no es válido");
+          } catch (e) {
+            console.warn(`Patrón regex inválido: ${validation.value}`, e);
+          }
+        }
+        break;
+      /**
+       * Validación personalizada (custom).
+       * Permite implementar validaciones específicas usando una función de test.
+       * El valor de la validación puede contener:
+       * - Una expresión regular para validar strings
+       * - Un valor de comparación para números
+       * - Una función de validación personalizada (si se extiende el sistema)
+       */
+      case "fvl_custom":
+        if (validationType.requiresValue && validation.value) {
+          if (baseSchema instanceof Yup.StringSchema) {
+            schema = schema.test(
+              "custom",
+              validation.errorMessage || "El valor no cumple con la validación personalizada",
+              (value) => {
+                if (!value) {
+                  return true;
+                }
+                try {
+                  const regex = new RegExp(validation.value);
+                  return regex.test(value);
+                } catch {
+                  return value === validation.value;
+                }
+              }
+            );
+          } else if (baseSchema instanceof Yup.NumberSchema) {
+            schema = schema.test(
+              "custom",
+              validation.errorMessage || "El valor no cumple con la validación personalizada",
+              (value) => {
+                if (value === void 0 || value === null) {
+                  return true;
+                }
+                const customValue = parseFloat(validation.value);
+                if (!isNaN(customValue)) {
+                  return value === customValue;
+                }
+                return true;
+              }
+            );
+          }
+        } else {
+          if (baseSchema instanceof Yup.StringSchema) {
+            schema = schema.test(
+              "custom",
+              validation.errorMessage || "El valor no cumple con la validación personalizada",
+              (value) => {
+                if (!value) {
+                  return true;
+                }
+                return true;
+              }
+            );
+          }
+        }
+        break;
+      default:
+        console.warn(`Tipo de validación no soportado: ${validationType.id}`);
+    }
+  });
+  if (field.isRequired && !activeValidations.some((v) => {
+    const vt = v.validationType || v.type;
+    return vt?.id === "fvl_required";
+  })) {
+    if (baseSchema instanceof Yup.StringSchema) {
+      schema = schema.nullable().required("Este campo es requerido");
+    } else if (baseSchema instanceof Yup.NumberSchema) {
+      schema = schema.required("Este campo es requerido");
+    } else if (baseSchema instanceof Yup.ArraySchema) {
+      schema = schema.min(1, "Este campo es requerido");
+    } else {
+      schema = schema.required("Este campo es requerido");
+    }
+  }
+  if (!field.isRequired) {
+    if (baseSchema instanceof Yup.ArraySchema) {
+      schema = schema.default([]);
+    } else {
+      schema = schema.nullable();
+    }
+  }
+  return schema;
+}
+export {
+  createFieldValidationSchema as c
+};

package/components/DynamicForm/helpers/resolveFieldComponent.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement } from 'react';
+import { Field } from '../types';
+/**
+ * Resuelve el componente RHF correspondiente según el tipo de campo.
+ * @param field - Campo del formulario dinámico
+ * @param props - Props adicionales para el componente (size, disabled, etc.)
+ * @returns Componente RHF renderizado o null si no se encuentra el componente
+ */
+export declare function resolveFieldComponent(field: Field, props: {
+    name: string;
+    size?: 'small' | 'medium';
+    disabled?: boolean;
+    readOnly?: boolean;
+    placeholder?: string | null;
+    rhfComponentProps?: Record<string, unknown>;
+}): ReactElement | null;

package/components/DynamicForm/helpers/resolveFieldComponent.js

@@ -0,0 +1,118 @@
+import { jsx } from "react/jsx-runtime";
+import { R as RHFDaysOfWeekPicker } from "../../hook-form/RHFDaysOfWeekPicker/RHFDaysOfWeekPicker.js";
+import { b as DynamicFormCheckableListWrapperStyled } from "../slots/DynamicFormSlots.js";
+import { R as RHFCheckableList } from "../../hook-form/RHFCheckableList/RHFCheckableList.js";
+import { R as RHFCheckbox } from "../../hook-form/RHFCheckbox/RHFCheckbox.js";
+import { R as RHFSelect } from "../../hook-form/RHFSelect/RHFSelect.js";
+import { R as RHFNumberInput } from "../../hook-form/RHFNumberInput/RHFNumberInput.js";
+import { R as RHFTextField } from "../../hook-form/RHFTextField/RHFTextField.js";
+function resolveFieldComponent(field, props) {
+  const { name, size = "medium", disabled, readOnly, placeholder, rhfComponentProps = {} } = props;
+  const componentName = field.fieldType.rhfComponent;
+  const selectOptions = field.options.map((option) => ({
+    id: option.value,
+    label: option.name || option.value
+  }));
+  const checkableListItems = field.options.map((option) => ({
+    id: option.id,
+    label: option.name || option.value,
+    value: option.value
+  }));
+  switch (componentName) {
+    case "RHFTextField":
+      return /* @__PURE__ */ jsx(
+        RHFTextField,
+        {
+          name,
+          size,
+          label: field.name,
+          mandatory: field.isRequired,
+          helperMessage: field.helperText || "",
+          disabled: disabled || readOnly,
+          placeholder: placeholder || void 0,
+          ...rhfComponentProps
+        }
+      );
+    case "RHFSelect":
+      return /* @__PURE__ */ jsx(
+        RHFSelect,
+        {
+          name,
+          size,
+          label: field.name,
+          mandatory: field.isRequired,
+          options: selectOptions,
+          helperMessage: field.helperText || "",
+          disabled: disabled || readOnly,
+          placeholder: placeholder || void 0,
+          ...rhfComponentProps
+        }
+      );
+    case "RHFNumberInput":
+      return /* @__PURE__ */ jsx(
+        RHFNumberInput,
+        {
+          name,
+          size,
+          label: field.name,
+          mandatory: field.isRequired,
+          helperMessage: field.helperText || "",
+          disabled: disabled || readOnly,
+          ...rhfComponentProps
+        }
+      );
+    case "RHFCheckbox":
+      return /* @__PURE__ */ jsx(
+        RHFCheckbox,
+        {
+          name,
+          size,
+          label: field.name,
+          mandatory: field.isRequired,
+          helperMessage: field.helperText || "",
+          disabled: disabled || readOnly,
+          ...rhfComponentProps
+        }
+      );
+    case "RHFCheckableList":
+      const hasGroups = rhfComponentProps?.groups !== void 0 && Array.isArray(rhfComponentProps.groups) && rhfComponentProps.groups.length > 0;
+      const { groups: groupsFromProps, searchable: searchableFromProps, ...otherRHFProps } = rhfComponentProps || {};
+      const searchable = searchableFromProps !== void 0 && searchableFromProps !== null ? Boolean(searchableFromProps) : hasGroups;
+      return /* @__PURE__ */ jsx(DynamicFormCheckableListWrapperStyled, { children: /* @__PURE__ */ jsx(
+        RHFCheckableList,
+        {
+          name,
+          size,
+          label: field.name,
+          mandatory: field.isRequired,
+          items: hasGroups ? void 0 : checkableListItems,
+          groups: hasGroups ? groupsFromProps : void 0,
+          helperMessage: field.helperText || "",
+          disabled: disabled || readOnly,
+          searchable,
+          ...otherRHFProps
+        }
+      ) });
+    case "RHFDaysOfWeekPicker":
+      return (
+        // @ts-expect-error - value es proporcionado automáticamente por withRHFController
+        /* @__PURE__ */ jsx(
+          RHFDaysOfWeekPicker,
+          {
+            name,
+            size,
+            label: field.name,
+            mandatory: field.isRequired,
+            helperMessage: field.helperText || "",
+            disabled: disabled || readOnly,
+            ...rhfComponentProps
+          }
+        )
+      );
+    default:
+      return null;
+  }
+}
+export {
+  resolveFieldComponent as r
+};

package/components/DynamicForm/helpers/resolveInitialValue.d.ts

@@ -0,0 +1,14 @@
+import { Field } from '../types';
+/**
+ * Resuelve el valor inicial de un campo a partir de current_value o default_value.
+ *
+ * El componente debe resolver dinámicamente el valor según:
+ * - value_string
+ * - value_integer
+ * - value_double
+ * - value_boolean
+ * - value_timestamp
+ * @param field - Campo del formulario
+ * @returns Valor inicial resuelto o undefined (puede ser array para RHFCheckableList)
+ */
+export declare function resolveInitialValue(field: Field): string | number | boolean | (string | number)[] | null | undefined;