@soyfri/shared-library 1.5.0 → 2.0.0-beta.1

package/src/components/DatePicker/DatePicker.tsx

@@ -1,165 +1,189 @@
 import React, { useMemo } from 'react';
+import type { SxProps, Theme } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';
+import {
+  DatePicker as MuiDatePicker,
+  type DatePickerProps as MuiDatePickerProps,
+} from '@mui/x-date-pickers/DatePicker';
 import { DateValidationError } from '@mui/x-date-pickers/models';
 import { Dayjs } from 'dayjs';
-import { styled } from '@mui/system';
-import { Box, TextField } from '@mui/material';
+import { Controller, type Control, type RegisterOptions } from 'react-hook-form';
 import 'dayjs/locale/en-gb';
 
-// Define las props para el CustomDatePicker
-interface DatePickerProps {
-  label: string;
-  selectedDate: Dayjs | null;
-  onDateChange: (date: Dayjs | null) => void;
+import { buildDatePickerSx } from './DatePicker.sx';
+import { getDateValidationMessage } from './DatePicker.helpers';
+import { resolvePreset } from '../_shared/resolvePreset';
+
+// ── Tipos de dominio ─────────────────────────────────────────────────────
+export type LabelPosition = 'outside' | 'floating';
+export type DatePickerSize = 'small' | 'medium';
+
+// ── Props base ───────────────────────────────────────────────────────────
+export interface BaseDatePickerProps
+  extends Omit<MuiDatePickerProps, 'value' | 'onChange' | 'slotProps'> {
+  label?: string;
   minDate?: Dayjs;
   maxDate?: Dayjs;
   disabled?: boolean;
   readOnly?: boolean;
-  slotProps?: any;
+  /** Border radius del input. Default: 10 */
+  borderRadius?: number | string;
+  /** "outside" = label arriba del campo (default). "floating" = label clásico MUI dentro del borde */
+  labelPosition?: LabelPosition;
+  /** Tamaño del TextField renderizado. Default: 'small' */
+  size?: DatePickerSize;
+  /** helperText pasado al TextField (se sobrescribe por el error de validación si hay). */
+  helperText?: string;
+  /** Error external override. */
+  error?: boolean;
+  /** sx que se mergea al TextField interno del picker. */
+  sx?: SxProps<Theme>;
+  className?: string;
+  /**
+   * Nombre del preset de estilo registrado en `theme.styles.DatePicker`.
+   * - `"default"` (o ausente) = estilo built-in del paquete.
+   * - Cualquier otro string = mergea el preset encima del estilo built-in.
+   */
+  preset?: string;
+  /** Locale para el adaptador dayjs. Default: 'en-gb'. */
+  adapterLocale?: string;
+  /** Passthrough a slotProps.textField. */
+  textFieldProps?: Record<string, any>;
+  /** Passthrough completo a slotProps del MuiDatePicker. */
+  slotProps?: MuiDatePickerProps['slotProps'];
 }
 
-// 1. Reutilizar el componente estilizado del Input
-// El DatePicker renderiza un TextField por dentro, así que podemos usar el mismo componente estilizado.
-const StyledTextField = styled(TextField)(({ theme }) => ({
-  '& .MuiInputBase-root': {
-    maxHeight: '34px',
-    padding: '8px 10px',
-    borderRadius: '10px',
-    display: 'flex',
-    alignItems: 'center',
-    fontSize: '14px',
-  },
-  '& .MuiInputBase-input': {
-    padding: '0 !important',
-    height: '18px',
-    display: 'flex',
-    alignItems: 'center',
-    marginTop: '-4px'
-  },
-  '& .MuiInputLabel-root': {
-    top: '50%',
-    transform: 'translate(14px, -50%)',
-    '&.MuiInputLabel-shrink': {
-      transform: 'translate(1px, -200%) scale(0.75)',
-      fontSize: '16px !important',
-      '> legend': {
-        display: 'none',
-      }
-    },
-  },
-  '& .MuiOutlinedInput-notchedOutline': {
-    border: '0.7px solid',
-    borderColor: '#e0e0e0',
-  },
-}));
-
-/**
- * Componente de DatePicker personalizado de Material UI.
- * Permite seleccionar una fecha y actualiza un estado Dayjs.
- */
-export const DatePicker: React.FC<DatePickerProps> = ({
-  label,
-  selectedDate,
-  onDateChange,
-  minDate,
-  maxDate,
-  disabled,
-  readOnly,
-  slotProps,
-  ...rest
-}) => {
-  const [error, setError] = React.useState<DateValidationError | null>(null);
-
-  const errorMessage = useMemo(() => {
-    switch (error) {
-      case 'minDate':
-      case 'maxDate': {
-        return 'Fecha fuera del rango permitido';
-      }
-      case 'invalidDate': {
-        return 'Formato de fecha inválido';
-      }
-      case 'disableFuture': {
-        return 'No se permiten fechas futuras';
-      }
-      case 'disablePast': {
-        return 'No se permiten fechas pasadas';
-      }
-      default: {
-        return '';
-      }
-    }
-  }, [error]);
-
-  return (
-    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="en-gb">
-      <Box
-          sx={{
-              width: '100%',
-              display: 'grid',
-              marginBottom: '10px',
-              marginTop: '10px'
-          }}
+// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────
+export interface RHFDatePickerProps extends BaseDatePickerProps {
+  name: string;
+  control: Control<any>;
+  validation?: RegisterOptions;
+  selectedDate?: never;
+  onDateChange?: never;
+}
+
+export interface ControlledDatePickerProps extends BaseDatePickerProps {
+  name?: string;
+  control?: never;
+  validation?: never;
+  selectedDate: Dayjs | null;
+  onDateChange: (date: Dayjs | null) => void;
+}
+
+// ── API pública final ────────────────────────────────────────────────────
+export type DatePickerProps = RHFDatePickerProps | ControlledDatePickerProps;
+
+export const DatePicker: React.FC<DatePickerProps> = (props) => {
+  const {
+    label,
+    minDate,
+    maxDate,
+    disabled,
+    readOnly,
+    borderRadius = 10,
+    labelPosition = 'outside',
+    size = 'small',
+    helperText,
+    error: errorProp,
+    sx,
+    className,
+    preset,
+    adapterLocale = 'en-gb',
+    textFieldProps,
+    slotProps: slotPropsProp,
+    ...rest
+  } = props as ControlledDatePickerProps & {
+    control?: Control<any>;
+    validation?: RegisterOptions;
+  };
 
-      >
+  const [validationError, setValidationError] = React.useState<DateValidationError | null>(null);
+
+  const validationErrorMessage = useMemo(
+    () => getDateValidationMessage(validationError),
+    [validationError],
+  );
+
+  const theme = useTheme();
+  const presetSx = resolvePreset('DatePicker', preset, theme);
+
+  const mergedSx = [
+    buildDatePickerSx(borderRadius, labelPosition),
+    ...(presetSx ? [presetSx] : []),
+    ...(Array.isArray(sx) ? sx : [sx]),
+  ];
+
+  const renderPicker = (
+    value: Dayjs | null,
+    onChange: (date: Dayjs | null) => void,
+    onBlur?: () => void,
+    inputRef?: React.Ref<any>,
+    rhfError?: boolean,
+    rhfHelperText?: string,
+  ) => {
+    const finalError = rhfError || !!validationErrorMessage || !!errorProp;
+    const finalHelperText = rhfHelperText || validationErrorMessage || helperText;
+
+    return (
+      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={adapterLocale}>
         <MuiDatePicker
           label={label}
-          value={selectedDate}
-          onChange={onDateChange}
+          value={value}
+          onChange={onChange}
           minDate={minDate}
           maxDate={maxDate}
-          onError={(newError) => setError(newError)}
+          onError={setValidationError}
           disabled={disabled}
           readOnly={readOnly}
-          className='date-picker-custom'
-          sx={{
-            
-            
-            '& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root': {
-              maxHeight: '28px',
-              borderRadius: '10px'
-            },
-
-            // 3. Sobreescribir el label para que esté centrado verticalmente
-            '& .MuiInputLabel-root': {
-              // El label se alinea con el padding del input base.
-              top: '50%',
-              transform: 'translate(14px, -50%)',
-              
-              // Estilo para el label "encogido" cuando el input está lleno o en foco
-              '&.MuiInputLabel-shrink': {
-                transform: 'translate(1px, -200%) scale(0.75)', // Ajustar la posición para que se vea por encima del input
-                fontSize: '16px !important',
-                '> legend': {
-                  display: 'none', // Ocultar el legend del outline
-                }
-              },
-            },
-            '& .MuiPickersInputBase-root > fieldset > legend':{
-              display: 'none', // Ocultar el legend del outline
-            },
-
-          }}
-          // 2. Usar 'slotProps' para pasar el componente estilizado al TextField
+          className={className}
+          sx={mergedSx}
           slotProps={{
-            ...slotProps,
+            ...slotPropsProp,
             textField: {
-              ...slotProps?.textField,
-              helperText: errorMessage || slotProps?.textField?.helperText,
-              error: !!errorMessage || slotProps?.textField?.error,
-              InputProps: {
-                ...slotProps?.textField?.InputProps,
-                inputComponent: StyledTextField,
-              },
-            },
+              fullWidth: true,
+              size,
+              variant: 'outlined',
+              onBlur,
+              inputRef,
+              error: !!finalError,
+              helperText: finalHelperText,
+              ...(slotPropsProp?.textField as Record<string, any> | undefined),
+              ...textFieldProps,
+            } as any,
           }}
-          {...rest}
+          {...(rest as any)}
         />
-      </Box>
-    </LocalizationProvider>
-  );
+      </LocalizationProvider>
+    );
+  };
+
+  // --- RHF mode ---
+  if ('control' in props && props.control) {
+    const { name, control, validation } = props as RHFDatePickerProps;
+    return (
+      <Controller
+        name={name}
+        control={control}
+        rules={validation}
+        render={({ field, fieldState: { error: fieldError } }) =>
+          renderPicker(
+            field.value ?? null,
+            field.onChange,
+            field.onBlur,
+            field.ref,
+            !!fieldError,
+            fieldError?.message,
+          )
+        }
+      />
+    );
+  }
+
+  // --- Controlado ---
+  const { selectedDate, onDateChange } = props as ControlledDatePickerProps;
+  return renderPicker(selectedDate, onDateChange);
 };
 
-export default DatePicker;
+export default DatePicker;

package/src/components/DatePicker/DatePicker.types.ts

@@ -0,0 +1,10 @@
+// Re-export barrel para compatibilidad con imports antiguos.
+// Los tipos ahora viven dentro de DatePicker.tsx.
+export type {
+  LabelPosition,
+  DatePickerSize,
+  BaseDatePickerProps,
+  RHFDatePickerProps,
+  ControlledDatePickerProps,
+  DatePickerProps,
+} from './DatePicker';

package/src/components/DatePicker/index.ts

@@ -1 +1,9 @@
-export { default as DatePicker } from './DatePicker'
+export { DatePicker, default } from './DatePicker';
+export type {
+  DatePickerProps,
+  BaseDatePickerProps,
+  RHFDatePickerProps,
+  ControlledDatePickerProps,
+  LabelPosition,
+  DatePickerSize,
+} from './DatePicker.types';

package/src/components/DateTimePicker/DateTimePicker.definitions.ts

@@ -207,6 +207,30 @@ export const DateTimePickerWithCustomButtonTextExample = () => {
 };
 `;
 
+export const DateTimePickerEmptyWithMaskDefinition = `
+import React, { useState } from 'react';
+import { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario
+import { Dayjs } from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DateTimePickerEmptyWithMaskExample = () => {
+  const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(null);
+  return (
+    <Box sx={{ width: 300 }}>
+      <DateTimePicker
+        label="Fecha y Hora"
+        selectedDateTime={selectedDateTime}
+        onDateTimeChange={setSelectedDateTime}
+        inputFormat="DD/MM/YY HH:mm"
+      />
+      <Typography sx={{ mt: 2 }} variant="caption" color="text.secondary">
+        Al estar vacío, el campo muestra la máscara del formato (DD/MM/AA HH:MM).
+      </Typography>
+    </Box>
+  );
+};
+`;
+
 export const DateTimePickerWithCustomInputFormatDefinition = `
 import React, { useState } from 'react';
 import { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario

package/src/components/DateTimePicker/DateTimePicker.helpers.ts

@@ -0,0 +1,38 @@
+import type { DateValidationError } from '@mui/x-date-pickers/models';
+
+/**
+ * Traduce el error del DateTimePicker a un mensaje en español. Se usa
+ * internamente para poblar `helperText` cuando hay error de validación.
+ */
+export const getDateTimeValidationMessage = (
+  error: DateValidationError | null,
+): string => {
+  switch (error) {
+    case 'minDate':
+    case 'maxDate':
+    case 'invalidDate':
+      return 'Formato de fecha/hora inválido';
+    case 'disableFuture':
+      return 'No se permiten fechas/horas futuras';
+    case 'disablePast':
+      return 'No se permiten fechas/horas pasadas';
+    default:
+      return '';
+  }
+};
+
+/**
+ * Construye el `localeText` que MUI acepta para overridear los labels de los
+ * botones del popover (Cancel / OK / Clear).
+ */
+export const buildLocaleText = (
+  clearButtonText?: string,
+  cancelButtonText?: string,
+  acceptButtonText?: string,
+): Record<string, string> => {
+  const text: Record<string, string> = {};
+  if (clearButtonText) text.clearButtonLabel = clearButtonText;
+  if (cancelButtonText) text.cancelButtonLabel = cancelButtonText;
+  if (acceptButtonText) text.okButtonLabel = acceptButtonText;
+  return text;
+};

package/src/components/DateTimePicker/DateTimePicker.stories.tsx

@@ -3,7 +3,6 @@ import React, { useState, useMemo } from 'react';
 import {
   Box,
   Typography,
-  TextField, // Necesario para el renderizado del input
 } from '@mui/material';
 
 // Importaciones de @mui/x-date-pickers y dayjs
@@ -25,6 +24,7 @@ import {
   DateTimePickerWithCustomButtonTextDefinition,
   DateTimePickerWithButtonsDefinition,
   DateTimePickerWithCustomInputFormatDefinition,
+  DateTimePickerEmptyWithMaskDefinition,
 } from './DateTimePicker.definitions'; // Asegúrate de que esta ruta sea correcta
 import { DateTimePicker } from './DateTimePicker';
 
@@ -203,6 +203,34 @@ const meta: Meta<typeof DateTimePicker> = {
     }
   };
   
+  export const DateTimePickerEmptyWithMask: Story = {
+    render: () => {
+      const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(null);
+      return (
+        <Box sx={{ width: 300 }}>
+          <DateTimePicker
+            label="Fecha y Hora"
+            selectedDateTime={selectedDateTime}
+            onDateTimeChange={setSelectedDateTime}
+            inputFormat="DD/MM/YY HH:mm"
+          />
+          <Typography sx={{ mt: 2 }} variant="caption" color="text.secondary">
+            Al estar vacío, el campo muestra la máscara del formato (DD/MM/AA HH:MM).
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story:
+            "DateTimePicker vacío. Al no haber valor seleccionado, cada sección del campo muestra su placeholder según el `inputFormat` (por ejemplo `DD/MM/AA HH:MM`), funcionando como máscara visual."
+        },
+        source: { code: DateTimePickerEmptyWithMaskDefinition.trim() }
+      }
+    }
+  };
+
   export const DateTimePickerSmallSize: Story = {
     render: () => {
       const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(dayjs());

package/src/components/DateTimePicker/DateTimePicker.sx.ts

@@ -0,0 +1,30 @@
+import type { SxProps, Theme } from '@mui/material';
+
+import { buildFormFieldSx } from '../_shared/formField.sx';
+import { FIELD_INPUT_PADDING_Y } from '../../theme/tokens';
+import type { LabelPosition } from './DateTimePicker';
+
+/**
+ * Builder de sx para el DateTimePicker. Mismo patrón que DatePicker.
+ * Usa `includePickersApi: true` para soportar la API nueva de MUI X v8.
+ */
+export const buildDateTimePickerSx = (
+  borderRadius: number | string,
+  labelPosition: LabelPosition,
+): SxProps<Theme> =>
+  buildFormFieldSx({
+    borderRadius,
+    labelPosition,
+    includePickersApi: true,
+    extraOutsideSx: {
+      '& .MuiInputBase-input': {
+        paddingTop: FIELD_INPUT_PADDING_Y,
+        paddingBottom: FIELD_INPUT_PADDING_Y,
+      },
+
+      '& .MuiPickersInputBase-sectionsContainer': {
+        paddingTop: FIELD_INPUT_PADDING_Y,
+        paddingBottom: FIELD_INPUT_PADDING_Y,
+      },
+    },
+  });