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

package/src/components/Chip/index.ts

@@ -0,0 +1 @@
+export { default as Chip } from './Chip';

package/src/components/Column/Column.tsx

@@ -0,0 +1,29 @@
+// -----------------------------------------------------------------------------
+// Componente Column: Define la estructura de una columna en la tabla.
+// Este componente NO renderiza nada directamente, solo pasa sus props al componente Table.
+// -----------------------------------------------------------------------------
+// Tipo auxiliar para 'field'.
+// Define si 'field' es una sola clave (keyof T) o un array de claves (Array<keyof T>).
+type FieldName<T> = keyof T | Array<keyof T>;
+
+export interface ColumnProps<T> {
+  name: string; // Nombre a mostrar en el encabezado de la columna
+  field: FieldName<T>; // Define el campo o campos a usar de los datos
+  // La prop 'children' ahora recibe 'Partial<T>'.
+  // Esto permite a TypeScript inferir los tipos de las propiedades desestructuradas
+  // como 'avatar', 'nombre', etc., basándose en la interfaz genérica 'T' de tu data.
+  width?: string; 
+  children: (fieldData: Partial<T>) => React.ReactNode;
+}
+
+// El componente Column no renderiza nada directamente en el DOM.
+// Su propósito es actuar como un contenedor de configuración para el componente Table.
+export function Column<T>(props: ColumnProps<T>): React.ReactNode {
+  return null;
+}
+
+// Esto es crucial para que el componente Table pueda identificar a nuestros componentes Column
+// entre sus hijos, utilizando (child.type as any).displayName === 'Column'.
+Column.displayName = 'Column';
+
+export default Column;

package/src/components/Column/index.ts

@@ -0,0 +1 @@
+export { default as Column } from './Column'

package/src/components/DatePicker/DatePicker.definitions.ts

@@ -0,0 +1,228 @@
+// DatePicker.definitions.ts
+
+export const BasicDatePickerDefinition = `
+import React, { useState } from 'react';
+import { DatePicker } from '@soyfri/shared-library/DatePicker';
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const BasicDatePickerExample = () => {
+  const [selectedDate, setSelectedDate] = useState(dayjs());
+  return (
+    <Box sx={{ width: 300 }}>
+      <DatePicker
+        label="Seleccionar Fecha"
+        selectedDate={selectedDate}
+        onDateChange={setSelectedDate}
+      />
+      <Typography sx={{ mt: 2 }}>
+        Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+      </Typography>
+    </Box>
+  );
+};
+`;
+
+export const DatePickerWithMinMaxDefinition = `
+import React, { useState } from 'react';
+import { DatePicker } from '@soyfri/shared-library/DatePicker';
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DatePickerWithMinMaxExample = () => {
+  const [selectedDate, setSelectedDate] = useState(dayjs('2023-06-15'));
+  const minDate = dayjs('2023-06-01');
+  const maxDate = dayjs('2023-06-30');
+  return (
+    <Box sx={{ width: 300 }}>
+      <DatePicker
+        label="Fecha en Junio"
+        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>
+  );
+};
+`;
+
+export const DateRangePickerDefinition = `
+import React, { useState } from 'react';
+import { DatePicker } from '@soyfri/shared-library/DatePicker';
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DateRangePickerExample = () => {
+  const [startDate, setStartDate] = useState(dayjs('2023-01-01'));
+  const [endDate, setEndDate] = useState(dayjs('2023-01-31'));
+
+  const handleStartDateChange = (date) => {
+    setStartDate(date);
+    if (date && endDate && date.isAfter(endDate)) {
+      setEndDate(date);
+    }
+  };
+
+  const handleEndDateChange = (date) => {
+    setEndDate(date);
+    if (date && startDate && date.isBefore(startDate)) {
+      setStartDate(date);
+    }
+  };
+
+  return (
+    <Box sx={{ display: 'flex', gap: 3, flexDirection: 'column' }}>
+      <DatePicker
+        label="Fecha de Inicio"
+        selectedDate={startDate}
+        onDateChange={handleStartDateChange}
+        maxDate={endDate || undefined}
+      />
+      <DatePicker
+        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>
+  );
+};
+`;
+
+export const DatePickerWithErrorDefinition = `
+import React, { useState } from 'react';
+import { DatePicker } from '@soyfri/shared-library/DatePicker';
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DatePickerWithErrorExample = () => {
+  const [selectedDate, setSelectedDate] = useState(dayjs('2023-01-01'));
+  // Intentamos establecer una fecha fuera de un rango muy restringido para forzar un error
+  const minDate = dayjs('2023-01-05');
+  const maxDate = dayjs('2023-01-10');
+
+  return (
+    <Box sx={{ width: 300 }}>
+      <DatePicker
+        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>
+  );
+};
+`;
+
+export const DatePickerSmallSizeDefinition = `
+import React, { useState } from 'react';
+import { DatePicker } from '@soyfri/shared-library/DatePicker';
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DatePickerSmallSizeExample = () => {
+  const [selectedDate, setSelectedDate] = useState(dayjs());
+  return (
+    <Box sx={{ width: 250 }}>
+      <DatePicker
+        label="Fecha (Pequeño)"
+        selectedDate={selectedDate}
+        onDateChange={setSelectedDate}
+        slotProps={{ textField: { size: 'small' } }} // Prop para hacer el TextField pequeño
+      />
+      <Typography sx={{ mt: 2 }}>
+        Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+      </Typography>
+    </Box>
+  );
+};
+`;
+
+export const DatePickerDisabledDefinition = `
+import React, { useState } from 'react';
+import { DatePicker } from '@soyfri/shared-library/DatePicker';
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DatePickerDisabledExample = () => {
+  const [selectedDate, setSelectedDate] = useState(dayjs());
+  return (
+    <Box sx={{ width: 300 }}>
+      <DatePicker
+        label="Fecha (Deshabilitado)"
+        selectedDate={selectedDate}
+        onDateChange={setSelectedDate}
+        disabled
+      />
+      <Typography sx={{ mt: 2 }}>
+        Fecha seleccionada: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'Ninguna'}
+      </Typography>
+    </Box>
+  );
+};
+`;
+
+export const DatePickerReadOnlyDefinition = `
+    import React, { useState } from 'react';
+    import { DatePicker } from '@soyfri/shared-library/DatePicker';
+    import dayjs from 'dayjs';
+    import { Box, Typography } from '@mui/material';
+
+    export const DatePickerReadOnlyDefinition = () => {
+    const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs('2024-07-24'));
+      return (
+        <Box sx={{ width: 300 }}>
+          <DatePicker
+            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>
+      );
+};
+`;
+export const DatePickerEmptyWithMaskDefinition = `
+import React, { useState } from 'react';
+import { DatePicker } from '@soyfri/shared-library/DatePicker';
+import { Dayjs } from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DatePickerEmptyWithMaskExample = () => {
+  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>
+  );
+};
+`;

package/src/components/DatePicker/DatePicker.helpers.ts

@@ -0,0 +1,24 @@
+import type { DateValidationError } from '@mui/x-date-pickers/models';
+
+/**
+ * Traduce el código de error del DatePicker de MUI X a un mensaje en español.
+ * Se usa internamente para poblar `helperText` cuando hay error de validación
+ * y el consumer no pasó un mensaje propio.
+ */
+export const getDateValidationMessage = (
+  error: DateValidationError | null,
+): string => {
+  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 '';
+  }
+};

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,
+      },
+    },
+  });