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

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

@@ -1,309 +0,0 @@
-
-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

@@ -1,33 +0,0 @@
-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

@@ -1,133 +0,0 @@
-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

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