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

package/src/components/DateTimePicker/DateTimePicker.tsx

@@ -1,191 +1,225 @@
 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 { DateTimePicker as MuiDateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import {
+  DateTimePicker as MuiDateTimePicker,
+  type DateTimePickerProps as MuiDateTimePickerProps,
+} from '@mui/x-date-pickers/DateTimePicker';
 import { DateValidationError } from '@mui/x-date-pickers/models';
 import { Dayjs } from 'dayjs';
-import { styled } from '@mui/system';
-import { Box, TextField, TextFieldProps } from '@mui/material';
+import { Controller, type Control, type RegisterOptions } from 'react-hook-form';
 
-// Define las props para el DateTimePicker
-export interface DateTimePickerProps {
-  label: string;
-  selectedDateTime: Dayjs | null;
-  onDateTimeChange: (dateTime: Dayjs | null) => void;
+import { buildDateTimePickerSx } from './DateTimePicker.sx';
+import {
+  buildLocaleText,
+  getDateTimeValidationMessage,
+} from './DateTimePicker.helpers';
+import { resolvePreset } from '../_shared/resolvePreset';
+
+// ── Tipos de dominio ─────────────────────────────────────────────────────
+export type LabelPosition = 'outside' | 'floating';
+export type DateTimePickerSize = 'small' | 'medium';
+
+// ── Props base ───────────────────────────────────────────────────────────
+export interface BaseDateTimePickerProps
+  extends Omit<MuiDateTimePickerProps, 'value' | 'onChange' | 'slotProps' | 'format'> {
+  label?: string;
   minDateTime?: Dayjs;
   maxDateTime?: Dayjs;
   disabled?: boolean;
   readOnly?: boolean;
+  /** Formato de la fecha/hora. Default: 'DD/MM/YYYY HH:mm'. */
   inputFormat?: string;
-  slotProps?: any;
+  /** Border radius del input. Default: 10. */
+  borderRadius?: number | string;
+  /** "outside" (default) o "floating". */
+  labelPosition?: LabelPosition;
+  /** Tamaño del TextField. Default: 'small'. */
+  size?: DateTimePickerSize;
+  helperText?: string;
+  error?: boolean;
+  sx?: SxProps<Theme>;
+  className?: string;
+  /**
+   * Nombre del preset de estilo registrado en `theme.styles.DateTimePicker`.
+   * - `"default"` (o ausente) = estilo built-in del paquete.
+   * - Cualquier otro string = mergea el preset encima del estilo built-in.
+   */
+  preset?: string;
+  /** Locale del adaptador dayjs. */
+  adapterLocale?: string;
+  /** Textos de los botones del popover. */
   clearButtonText?: string;
   cancelButtonText?: string;
   acceptButtonText?: string;
   minutesStep?: number;
   minTime?: Dayjs;
   customClass?: string;
-  viewRenderers?: any
-  timeSteps?: any
+  viewRenderers?: any;
+  timeSteps?: any;
+  /** Si es true usa formato 12h, false = 24h. Default: false. */
   ampm?: boolean;
+  textFieldProps?: Record<string, any>;
+  /** Passthrough completo a slotProps del MuiDateTimePicker. */
+  slotProps?: MuiDateTimePickerProps['slotProps'];
 }
 
-// 1. Crear un componente estilizado para el TextField
-// Este componente tendrá los mismos estilos de altura, padding y label que tu Input.tsx
-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',
-  },
-}));
-
-/**
- * Custom Material UI DateTimePicker component.
- * Allows selecting a date and time, and updates a Dayjs state.
- */
-export const DateTimePicker: React.FC<DateTimePickerProps> = ({
-  label,
-  selectedDateTime,
-  onDateTimeChange,
-  minDateTime,
-  maxDateTime,
-  disabled,
-  readOnly,
-  customClass= '',
-  inputFormat,
-  slotProps,
-  clearButtonText,
-  cancelButtonText,
-  acceptButtonText,
-  minutesStep,
-  minTime,
-  viewRenderers,
-  timeSteps,
-  ampm,
-  ...rest
-}) => {
-  const [error, setError] = React.useState<DateValidationError | null>(null);
-
-  const errorMessage = useMemo(() => {
-    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 '';
-      }
-    }
-  }, [error]);
-
-  const customLocaleText = useMemo(() => {
-    const text: Record<string, string> = {};
-    if (clearButtonText) text.clearButtonLabel = clearButtonText;
-    if (cancelButtonText) text.cancelButtonLabel = cancelButtonText;
-    if (acceptButtonText) text.okButtonLabel = acceptButtonText;
-    return text;
-  }, [clearButtonText, cancelButtonText, acceptButtonText]);
-
-  return (
-    <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <Box
-          sx={{
-              width: '100%',
-              display: 'grid',
-              marginBottom: '10px',
-              marginTop: '10px'
-          }}
+// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────
+export interface RHFDateTimePickerProps extends BaseDateTimePickerProps {
+  name: string;
+  control: Control<any>;
+  validation?: RegisterOptions;
+  selectedDateTime?: never;
+  onDateTimeChange?: never;
+}
+
+export interface ControlledDateTimePickerProps extends BaseDateTimePickerProps {
+  name?: string;
+  control?: never;
+  validation?: never;
+  selectedDateTime: Dayjs | null;
+  onDateTimeChange: (dateTime: Dayjs | null) => void;
+}
+
+// ── API pública final ────────────────────────────────────────────────────
+export type DateTimePickerProps =
+  | RHFDateTimePickerProps
+  | ControlledDateTimePickerProps;
+
+export const DateTimePicker: React.FC<DateTimePickerProps> = (props) => {
+  const {
+    label,
+    minDateTime,
+    maxDateTime,
+    disabled,
+    readOnly,
+    inputFormat,
+    borderRadius = 10,
+    labelPosition = 'outside',
+    size = 'small',
+    helperText,
+    error: errorProp,
+    sx,
+    className,
+    preset,
+    adapterLocale,
+    clearButtonText,
+    cancelButtonText,
+    acceptButtonText,
+    minutesStep,
+    minTime,
+    customClass,
+    viewRenderers,
+    timeSteps,
+    ampm = false,
+    textFieldProps,
+    slotProps: slotPropsProp,
+    ...rest
+  } = props as ControlledDateTimePickerProps & {
+    control?: Control<any>;
+    validation?: RegisterOptions;
+  };
 
+  const [validationError, setValidationError] = React.useState<DateValidationError | null>(null);
+
+  const validationErrorMessage = useMemo(
+    () => getDateTimeValidationMessage(validationError),
+    [validationError],
+  );
+
+  const customLocaleText = useMemo(
+    () => buildLocaleText(clearButtonText, cancelButtonText, acceptButtonText),
+    [clearButtonText, cancelButtonText, acceptButtonText],
+  );
+
+  const theme = useTheme();
+  const presetSx = resolvePreset('DateTimePicker', preset, theme);
+
+  const mergedSx = [
+    buildDateTimePickerSx(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 } : {})}
       >
-      <MuiDateTimePicker
-        className={customClass}
-        label={label}
-        value={selectedDateTime}
-        onChange={onDateTimeChange}
-        minDateTime={minDateTime}
-        maxDateTime={maxDateTime}
-        minutesStep={minutesStep}
-        disabled={disabled}
-        readOnly={readOnly}
-        minTime={minTime}
-        format={inputFormat ? inputFormat: 'DD/MM/YYYY HH:mm'}
-        viewRenderers={viewRenderers}
-        timeSteps={timeSteps}
-        sx={{
-          '& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root': {
-            maxHeight: '28px',
-            borderRadius: '10px',
-          },
-          '& .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
-          },
-        }}
-        slotProps={{
-          ...slotProps,
-          // 2. Usar 'slotProps' para pasar el componente estilizado al TextField
-          textField: {
-            ...slotProps?.textField,
-            helperText: errorMessage || slotProps?.textField?.helperText,
-            error: !!errorMessage || slotProps?.textField?.error,
-            InputProps: {
-              ...slotProps?.textField?.InputProps,
-              inputComponent: StyledTextField,
-            },
-          },
-        }}
-        localeText={{ ...customLocaleText }}
-        ampm={false}
-        {...rest}
+        <MuiDateTimePicker
+          className={customClass || className}
+          label={label}
+          value={value}
+          onChange={onChange}
+          onError={setValidationError}
+          minDateTime={minDateTime}
+          maxDateTime={maxDateTime}
+          minutesStep={minutesStep}
+          disabled={disabled}
+          readOnly={readOnly}
+          minTime={minTime}
+          format={inputFormat ?? 'DD/MM/YYYY HH:mm'}
+          viewRenderers={viewRenderers}
+          timeSteps={timeSteps}
+          ampm={ampm}
+          sx={mergedSx}
+          slotProps={{
+            ...slotPropsProp,
+            textField: {
+              fullWidth: true,
+              size,
+              variant: 'outlined',
+              onBlur,
+              inputRef,
+              error: !!finalError,
+              helperText: finalHelperText,
+              ...(slotPropsProp?.textField as Record<string, any> | undefined),
+              ...textFieldProps,
+            } as any,
+          }}
+          localeText={customLocaleText}
+          {...(rest as any)}
+        />
+      </LocalizationProvider>
+    );
+  };
+
+  if ('control' in props && props.control) {
+    const { name, control, validation } = props as RHFDateTimePickerProps;
+    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,
+          )
+        }
       />
-      </Box>
-    </LocalizationProvider>
-  );
+    );
+  }
+
+  const { selectedDateTime, onDateTimeChange } = props as ControlledDateTimePickerProps;
+  return renderPicker(selectedDateTime, onDateTimeChange);
 };
 
-export default DateTimePicker;
+export default DateTimePicker;

package/src/components/DateTimePicker/DateTimePicker.types.ts

@@ -0,0 +1,10 @@
+// Re-export barrel para compatibilidad con imports antiguos.
+// Los tipos ahora viven dentro de DateTimePicker.tsx.
+export type {
+  LabelPosition,
+  DateTimePickerSize,
+  BaseDateTimePickerProps,
+  RHFDateTimePickerProps,
+  ControlledDateTimePickerProps,
+  DateTimePickerProps,
+} from './DateTimePicker';

package/src/components/DateTimePicker/index.ts

@@ -1 +1,9 @@
-export { default as DateTimePicker } from './DateTimePicker';
+export { DateTimePicker, default } from './DateTimePicker';
+export type {
+  DateTimePickerProps,
+  BaseDateTimePickerProps,
+  RHFDateTimePickerProps,
+  ControlledDateTimePickerProps,
+  LabelPosition,
+  DateTimePickerSize,
+} from './DateTimePicker.types';