@soyfri/shared-library 2.0.0-beta.2 → 2.0.0-beta.20

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,309 @@
+
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState, useMemo } from 'react';
+import {
+  Box,
+  Typography,
+} from '@mui/material';
+
+// Importar las definiciones de las historias
+import {
+    BasicDatePickerDefinition,
+    DatePickerWithMinMaxDefinition,
+    DateRangePickerDefinition,
+    DatePickerWithErrorDefinition,
+    DatePickerSmallSizeDefinition,
+    DatePickerDisabledDefinition,
+    DatePickerReadOnlyDefinition,
+    DatePickerEmptyWithMaskDefinition,
+  } from './DatePicker.definitions'; // Mantener el nombre del archivo de definiciones como está
+import DatePicker from './DatePicker';
+import dayjs, { Dayjs } from 'dayjs';
+
+// =============================================================================
+// Definición de las meta-propiedades para Storybook
+// =============================================================================
+const meta: Meta<typeof DatePicker> = { // Renombrado a DatePicker
+    title: 'Components/DatePicker', // Renombrado en el título del Storybook
+    component: DatePicker, // Renombrado a DatePicker
+    tags: ['autodocs'],
+    parameters: {
+      layout: 'centered',
+      docs: {
+        description: {
+          component: 'Un componente `DatePicker` personalizado de Material UI que gestiona el estado de fecha, rangos y validación de errores.',
+        },
+      },
+    },
+    argTypes: {
+      label: { control: 'text', description: 'Etiqueta para el selector de fecha.' },
+      selectedDate: { control: 'object', description: 'La fecha actualmente seleccionada.', type: { name: 'object', required: false, value: {} } },
+      onDateChange: { action: 'dateChanged', description: 'Callback que se dispara cuando la fecha cambia.' },
+      minDate: { control: 'object', description: 'La fecha mínima permitida.', type: { name: 'object', required: false, value: {} } },
+      maxDate: { control: 'object', description: 'La fecha máxima permitida.', type: { name: 'object', required: false, value: {} } },
+      disabled: { control: 'boolean', description: 'Si es verdadero, el selector de fecha estará deshabilitado.' },
+      readOnly: { control: 'boolean', description: 'Si es verdadero, el selector de fecha estará en modo de solo lectura.' },
+      slotProps: { control: 'object', description: 'Props pasadas a los slots internos del DatePicker, como `textField`.' },
+    },
+  };
+  
+  export default meta;
+  type Story = StoryObj<typeof DatePicker>; // Renombrado a DatePicker
+  
+  // =============================================================================
+  // Historias
+  // =============================================================================
+  
+  export const BasicDatePicker: Story = {
+    render: () => {
+      const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs());
+      return (
+        <Box sx={{ width: 300 }}>
+          <DatePicker // Renombrado
+            label="Seleccionar Fecha"
+            selectedDate={selectedDate}
+            onDateChange={setSelectedDate}
+          />
+          <Typography sx={{ mt: 2 }}>
+            Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Un `DatePicker` básico con selección de una única fecha."
+        },
+        source: { code: BasicDatePickerDefinition.trim() }
+      }
+    }
+  };
+  
+  export const DatePickerEmptyWithMask: Story = {
+    render: () => {
+      const [selectedDate, setSelectedDate] = useState<Dayjs | null>(null);
+      return (
+        <Box sx={{ width: 300 }}>
+          <DatePicker
+            label="Fecha"
+            selectedDate={selectedDate}
+            onDateChange={setSelectedDate}
+            format="DD/MM/YY"
+          />
+          <Typography sx={{ mt: 2 }} variant="caption" color="text.secondary">
+            Al estar vacío, el campo muestra la máscara del formato (DD/MM/AA).
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story:
+            "DatePicker vacío. Al no haber valor seleccionado, cada sección del campo muestra su placeholder según el `format` (por ejemplo `DD/MM/AA`), funcionando como máscara visual."
+        },
+        source: { code: DatePickerEmptyWithMaskDefinition.trim() }
+      }
+    }
+  };
+
+  export const DatePickerWithMinMax: Story = {
+    render: () => {
+      const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs('2023-06-15'));
+      const minDate = dayjs('2023-06-01');
+      const maxDate = dayjs('2023-06-30');
+      return (
+        <Box sx={{ width: 300 }}>
+          <DatePicker // Renombrado
+            label="Fecha en Junio (Rango)"
+            selectedDate={selectedDate}
+            onDateChange={setSelectedDate}
+            minDate={minDate}
+            maxDate={maxDate}
+          />
+          <Typography sx={{ mt: 2 }}>
+            Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+          </Typography>
+          <Typography variant="caption" color="text.secondary">
+            (Rango: ${minDate.format('YYYY-MM-DD')} a ${maxDate.format('YYYY-MM-DD')})
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Muestra un `DatePicker` con fechas mínimas y máximas permitidas."
+        },
+        source: { code: DatePickerWithMinMaxDefinition.trim() }
+      }
+    }
+  };
+  
+  export const DateRangePicker: Story = {
+    render: () => {
+      const [startDate, setStartDate] = useState<Dayjs | null>(dayjs('2023-01-01'));
+      const [endDate, setEndDate] = useState<Dayjs | null>(dayjs('2023-01-31'));
+  
+      const handleStartDateChange = (date: Dayjs | null) => {
+        setStartDate(date);
+        if (date && endDate && date.isAfter(endDate)) {
+          setEndDate(date);
+        }
+      };
+  
+      const handleEndDateChange = (date: Dayjs | null) => {
+        setEndDate(date);
+        if (date && startDate && date.isBefore(startDate)) {
+          setStartDate(date);
+        }
+      };
+  
+      return (
+        <Box sx={{ display: 'flex', gap: 3, flexDirection: 'column', width: 300 }}>
+          <DatePicker // Renombrado
+            label="Fecha de Inicio"
+            selectedDate={startDate}
+            onDateChange={handleStartDateChange}
+            maxDate={endDate || undefined}
+          />
+          <DatePicker // Renombrado
+            label="Fecha de Fin"
+            selectedDate={endDate}
+            onDateChange={handleEndDateChange}
+            minDate={startDate || undefined}
+          />
+          <Typography>
+            Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+            Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Dos `DatePicker`s que funcionan como un selector de rango de fechas, donde la fecha de inicio y fin se restringen mutuamente."
+        },
+        source: { code: DateRangePickerDefinition.trim() }
+      }
+    }
+  };
+  
+  export const DatePickerWithError: Story = {
+    render: () => {
+      const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs('2023-01-01'));
+      const minDate = dayjs('2023-01-05');
+      const maxDate = dayjs('2023-01-10');
+  
+      return (
+        <Box sx={{ width: 300 }}>
+          <DatePicker // Renombrado
+            label="Fecha (con error de rango)"
+            selectedDate={selectedDate}
+            onDateChange={setSelectedDate}
+            minDate={minDate}
+            maxDate={maxDate}
+          />
+          <Typography sx={{ mt: 2 }}>
+            Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+          </Typography>
+          <Typography variant="caption" color="error">
+            (Intenta seleccionar una fecha fuera de ${minDate.format('YYYY-MM-DD')} - ${maxDate.format('YYYY-MM-DD')})
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Demuestra cómo el `DatePicker` maneja los errores de validación, por ejemplo, al seleccionar una fecha fuera del rango permitido."
+        },
+        source: { code: DatePickerWithErrorDefinition.trim() }
+      }
+    }
+  };
+  
+  export const DatePickerSmallSize: Story = {
+    render: () => {
+      const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs());
+      return (
+        <Box sx={{ width: 250 }}>
+          <DatePicker // Renombrado
+            label="Fecha (Pequeño)"
+            selectedDate={selectedDate}
+            onDateChange={setSelectedDate}
+            slotProps={{ textField: { size: 'small' } }}
+          />
+          <Typography sx={{ mt: 2 }}>
+            Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Muestra el `DatePicker` en un tamaño más pequeño utilizando `slotProps.textField.size`."
+        },
+        source: { code: DatePickerSmallSizeDefinition.trim() }
+      }
+    }
+  };
+  
+  export const DatePickerDisabled: Story = {
+    render: () => {
+      const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs());
+      return (
+        <Box sx={{ width: 300 }}>
+          <DatePicker // Renombrado
+            label="Fecha (Deshabilitado)"
+            selectedDate={selectedDate}
+            onDateChange={setSelectedDate}
+            disabled
+          />
+          <Typography sx={{ mt: 2 }}>
+            Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Demuestra un `DatePicker` en estado deshabilitado, donde no se puede interactuar con él."
+        },
+        source: { code: DatePickerDisabledDefinition.trim() }
+      }
+    }
+  };
+  
+  export const DatePickerReadOnly: Story = {
+    render: () => {
+      const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs('2024-07-24'));
+      return (
+        <Box sx={{ width: 300 }}>
+          <DatePicker // Renombrado
+            label="Fecha (Solo Lectura)"
+            selectedDate={selectedDate}
+            onDateChange={() => {}} // No permite cambios
+            readOnly
+          />
+          <Typography sx={{ mt: 2 }}>
+            Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Muestra el `DatePicker` en modo de solo lectura. El usuario puede ver la fecha pero no modificarla."
+        },
+        source: {
+          code: DatePickerReadOnlyDefinition.trim() // Usar la definición importada
+        }
+      }
+    }
+  };

package/src/components/DatePicker/DatePicker.sx.ts

@@ -0,0 +1,33 @@
+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 './DatePicker';
+
+/**
+ * Builder de sx para el DatePicker. Reutiliza `buildFormFieldSx` con
+ * `includePickersApi: true` para cubrir tanto la API clásica (MuiInputBase /
+ * MuiOutlinedInput) como la nueva (MuiPickersInputBase / MuiPickersOutlinedInput)
+ * del DatePicker de MUI X v8.
+ */
+export const buildDatePickerSx = (
+  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,
+      },
+
+      // Secciones editables del PickersTextField (DD/MM/YYYY en API nueva).
+      '& .MuiPickersInputBase-sectionsContainer': {
+        paddingTop: FIELD_INPUT_PADDING_Y,
+        paddingBottom: FIELD_INPUT_PADDING_Y,
+      },
+    },
+  });

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,133 @@
+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,
+  type DatePickerProps as MuiDatePickerProps,
+} from '@mui/x-date-pickers/DatePicker';
+import { DateValidationError } from '@mui/x-date-pickers/models';
+import { Dayjs } from 'dayjs';
+import 'dayjs/locale/en-gb';
+
+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;
+  /** 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'];
+}
+
+// ── API pública ──────────────────────────────────────────────────────────
+export interface DatePickerProps extends BaseDatePickerProps {
+  selectedDate: Dayjs | null;
+  onDateChange: (date: Dayjs | null) => void;
+}
+
+export const DatePicker: React.FC<DatePickerProps> = ({
+  label,
+  selectedDate,
+  onDateChange,
+  minDate,
+  maxDate,
+  disabled,
+  readOnly,
+  borderRadius = 10,
+  labelPosition = 'outside',
+  size = 'small',
+  helperText,
+  error: errorProp,
+  sx,
+  className,
+  preset,
+  adapterLocale = 'en-gb',
+  textFieldProps,
+  slotProps: slotPropsProp,
+  ...rest
+}) => {
+  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 = [
+    ...(presetSx ? [presetSx] : [buildDatePickerSx(borderRadius, labelPosition)]),
+    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
+  ];
+
+  const finalError = !!validationErrorMessage || !!errorProp;
+  const finalHelperText = validationErrorMessage || helperText;
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={adapterLocale}>
+      <MuiDatePicker
+        label={label}
+        value={selectedDate}
+        onChange={onDateChange}
+        minDate={minDate}
+        maxDate={maxDate}
+        onError={setValidationError}
+        disabled={disabled}
+        readOnly={readOnly}
+        className={className}
+        sx={mergedSx}
+        slotProps={{
+          ...slotPropsProp,
+          textField: {
+            fullWidth: true,
+            size,
+            variant: 'outlined',
+            ...(slotPropsProp?.textField as Record<string, any> | undefined),
+            ...textFieldProps,
+            error: !!finalError,
+            helperText: finalHelperText,
+          } as any,
+        }}
+        {...rest}
+      />
+    </LocalizationProvider>
+  );
+};
+
+export default DatePicker;

package/src/components/DatePicker/index.ts

@@ -0,0 +1,7 @@
+export { DatePicker, default } from './DatePicker';
+export type {
+  DatePickerProps,
+  BaseDatePickerProps,
+  LabelPosition,
+  DatePickerSize,
+} from './DatePicker';