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

package/src/components/Chip/index.ts

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

package/src/components/Column/Column.tsx

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

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

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

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

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

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