@soyfri/shared-library 2.0.0-beta.1 → 2.0.0-beta.3

package/src/components/DateRangePicker/DateRangePicker.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DateRangePicker as MuiDateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
-import { TextField } from '@mui/material';
-import { Dayjs } from 'dayjs';
-
-// Define las props para el DateRangePicker
-export interface DateRangePickerProps {
-    label?: string;
-    startDate: Dayjs | null;
-    endDate: Dayjs | null;
-    onDateRangeChange: (start: Dayjs | null, end: Dayjs | null) => void;
-    minDate?: Dayjs;
-    maxDate?: Dayjs;
-    disabled?: boolean;
-    readOnly?: boolean;
-    slotProps?: any; // Para pasar slotProps a MuiDateRangePicker
-  }
-  
-  export const DateRangePicker: React.FC<DateRangePickerProps> = ({
-    label,
-    startDate,
-    endDate,
-    onDateRangeChange,
-    minDate,
-    maxDate,
-    disabled,
-    readOnly,
-    slotProps,
-    ...rest
-  }) => {
-    const value: [Dayjs | null, Dayjs | null] = [startDate, endDate];
-  
-    const handleChange = (newValue: [Dayjs | null, Dayjs | null]) => {
-      onDateRangeChange(newValue[0], newValue[1]);
-    };
-  
-    return (
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <MuiDateRangePicker
-          localeText={{ start: 'Fecha de Inicio', end: 'Fecha de Fin' }}
-          value={value}
-          onChange={handleChange}
-          minDate={minDate}
-          maxDate={maxDate}
-          disabled={disabled}
-          readOnly={readOnly}
-          slotProps={slotProps} // Pasa los slotProps directamente
-          {...rest}
-        />
-      </LocalizationProvider>
-    );
-  };
-
-export default DateRangePicker

package/src/components/DateRangePicker/index.ts

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

package/src/components/DateTimePicker/DateTimePicker.definitions.ts

@@ -1,256 +0,0 @@
-// DateTimePicker.definitions.ts
-
-export const BasicDateTimePickerDefinition = `
-import React, { useState } from 'react';
-import { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario
-import dayjs from 'dayjs';
-import { Box, Typography } from '@mui/material';
-
-export const BasicDateTimePickerExample = () => {
-  const [selectedDateTime, setSelectedDateTime] = useState(dayjs());
-  return (
-    <Box sx={{ width: 300 }}>
-      <DateTimePicker
-        label="Seleccionar Fecha y Hora"
-        selectedDateTime={selectedDateTime}
-        onDateTimeChange={setSelectedDateTime}
-      />
-      <Typography sx={{ mt: 2 }}>
-        Seleccionado: \${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
-      </Typography>
-    </Box>
-  );
-};
-`;
-
-export const DateTimePickerWithMinMaxDefinition = `
-import React, { useState } from 'react';
-import { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario
-import dayjs from 'dayjs';
-import { Box, Typography } from '@mui/material';
-
-export const DateTimePickerWithMinMaxExample = () => {
-  const [selectedDateTime, setSelectedDateTime] = useState(dayjs('2023-06-15T10:00'));
-  const minDateTime = dayjs('2023-06-01T09:00');
-  const maxDateTime = dayjs('2023-06-30T17:00');
-  return (
-    <Box sx={{ width: 300 }}>
-      <DateTimePicker
-        label="Fecha y Hora en Junio"
-        selectedDateTime={selectedDateTime}
-        onDateTimeChange={setSelectedDateTime}
-        minDateTime={minDateTime}
-        maxDateTime={maxDateTime}
-      />
-      <Typography sx={{ mt: 2 }}>
-        Seleccionado: \${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
-      </Typography>
-      <Typography variant="caption" color="text.secondary">
-        (Rango: \${minDateTime.format('YYYY-MM-DD HH:mm')} a \${maxDateTime.format('YYYY-MM-DD HH:mm')})
-      </Typography>
-    </Box>
-  );
-};
-`;
-
-export const DateTimePickerDisabledDefinition = `
-import React, { useState } => from 'react';
-import { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario
-import dayjs from 'dayjs';
-import { Box, Typography } from '@mui/material';
-
-export const DateTimePickerDisabledExample = () => {
-  const [selectedDateTime, setSelectedDateTime] = useState(dayjs());
-  return (
-    <Box sx={{ width: 300 }}>
-      <DateTimePicker
-        label="Fecha y Hora (Deshabilitado)"
-        selectedDateTime={selectedDateTime}
-        onDateTimeChange={setSelectedDateTime}
-        disabled
-      />
-      <Typography sx={{ mt: 2 }}>
-        Seleccionado: \${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
-      </Typography>
-    </Box>
-  );
-};
-`;
-
-export const DateTimePickerReadOnlyDefinition = `
-import React, { useState } from 'react';
-import { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario
-import dayjs from 'dayjs';
-import { Box, Typography } from '@mui/material';
-
-export const DateTimePickerReadOnlyExample = () => {
-  const [selectedDateTime, setSelectedDateTime] = useState(dayjs('2024-07-24T14:30'));
-  return (
-    <Box sx={{ width: 300 }}>
-      <DateTimePicker
-        label="Fecha y Hora (Solo Lectura)"
-        selectedDateTime={selectedDateTime}
-        onDateTimeChange={() => {}} // No permite cambios
-        readOnly
-      />
-      <Typography sx={{ mt: 2 }}>
-        Seleccionado: \${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
-      </Typography>
-    </Box>
-  );
-};
-`;
-
-export const DateTimePickerWithInitialNullDefinition = `
-import React, { useState } from 'react';
-import { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario
-import dayjs from 'dayjs';
-import { Box, Typography } from '@mui/material';
-
-export const DateTimePickerWithInitialNullExample = () => {
-  const [selectedDateTime, setSelectedDateTime] = useState(null);
-  return (
-    <Box sx={{ width: 300 }}>
-      <DateTimePicker
-        label="Fecha y Hora (Sin Selección Inicial)"
-        selectedDateTime={selectedDateTime}
-        onDateTimeChange={setSelectedDateTime}
-      />
-      <Typography sx={{ mt: 2 }}>
-        Seleccionado: \${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
-      </Typography>
-    </Box>
-  );
-};
-`;
-
-export const DateTimePickerSmallSizeDefinition = `
-import React, { useState } from 'react';
-import { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario
-import dayjs from 'dayjs';
-import { Box, Typography } from '@mui/material';
-
-export const DateTimePickerSmallSizeExample = () => {
-  const [selectedDateTime, setSelectedDateTime] = useState(dayjs());
-  return (
-    <Box sx={{ width: 250 }}>
-      <DateTimePicker
-        label="Fecha y Hora (Pequeño)"
-        selectedDateTime={selectedDateTime}
-        onDateTimeChange={setSelectedDateTime}
-        slotProps={{ textField: { size: 'small' } }}
-      />
-      <Typography sx={{ mt: 2 }}>
-        Seleccionado: \${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
-      </Typography>
-    </Box>
-  );
-};
-`;
-
-export const DateTimePickerWithButtonsDefinition = `
-import React, { useState } => from 'react';
-import { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario
-import dayjs from 'dayjs';
-import { Box, Typography } from '@mui/material';
-
-export const DateTimePickerWithButtonsExample = () => {
-  const [selectedDateTime, setSelectedDateTime] = useState(dayjs());
-  return (
-    <Box sx={{ width: 300 }}>
-      <DateTimePicker
-        label="Fecha y Hora (Con Botones por Defecto)"
-        selectedDateTime={selectedDateTime}
-        onDateTimeChange={setSelectedDateTime}
-        slotProps={{
-          actionBar: {
-            actions: ['clear', 'cancel', 'accept'],
-          },
-        }}
-      />
-      <Typography sx={{ mt: 2 }}>
-        Seleccionado: \${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
-      </Typography>
-    </Box>
-  );
-};
-`;
-
-export const DateTimePickerWithCustomButtonTextDefinition = `
-import React, { useState } from 'react';
-import { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario
-import dayjs from 'dayjs';
-import { Box, Typography } from '@mui/material';
-
-export const DateTimePickerWithCustomButtonTextExample = () => {
-  const [selectedDateTime, setSelectedDateTime] = useState(dayjs());
-  return (
-    <Box sx={{ width: 300 }}>
-      <DateTimePicker
-        label="Fecha y Hora (Botones Personalizados)"
-        selectedDateTime={selectedDateTime}
-        onDateTimeChange={setSelectedDateTime}
-        clearButtonText="Limpiar Todo"
-        cancelButtonText="Descartar"
-        acceptButtonText="Confirmar Selección"
-        slotProps={{
-          actionBar: {
-            actions: ['clear', 'cancel', 'accept'],
-          },
-        }}
-      />
-      <Typography sx={{ mt: 2 }}>
-        Seleccionado: \${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
-      </Typography>
-    </Box>
-  );
-};
-`;
-
-export const DateTimePickerEmptyWithMaskDefinition = `
-import React, { useState } from 'react';
-import { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario
-import { Dayjs } from 'dayjs';
-import { Box, Typography } from '@mui/material';
-
-export const DateTimePickerEmptyWithMaskExample = () => {
-  const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(null);
-  return (
-    <Box sx={{ width: 300 }}>
-      <DateTimePicker
-        label="Fecha y Hora"
-        selectedDateTime={selectedDateTime}
-        onDateTimeChange={setSelectedDateTime}
-        inputFormat="DD/MM/YY HH:mm"
-      />
-      <Typography sx={{ mt: 2 }} variant="caption" color="text.secondary">
-        Al estar vacío, el campo muestra la máscara del formato (DD/MM/AA HH:MM).
-      </Typography>
-    </Box>
-  );
-};
-`;
-
-export const DateTimePickerWithCustomInputFormatDefinition = `
-import React, { useState } from 'react';
-import { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario
-import dayjs from 'dayjs';
-import { Box, Typography } from '@mui/material';
-
-export const DateTimePickerWithCustomInputFormatExample = () => {
-  const [selectedDateTime, setSelectedDateTime] = useState(dayjs());
-  return (
-    <Box sx={{ width: 300 }}>
-      <DateTimePicker
-        label="Fecha y Hora (Formato dd/MM/YYYY)"
-        selectedDateTime={selectedDateTime}
-        onDateTimeChange={setSelectedDateTime}
-        inputFormat="DD/MM/YYYY HH:mm" // Formato de fecha personalizado
-      />
-      <Typography sx={{ mt: 2 }}>
-        Seleccionado: \${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
-      </Typography>
-    </Box>
-  );
-};
-`;

package/src/components/DateTimePicker/DateTimePicker.helpers.ts

@@ -1,38 +0,0 @@
-import type { DateValidationError } from '@mui/x-date-pickers/models';
-
-/**
- * Traduce el error del DateTimePicker a un mensaje en español. Se usa
- * internamente para poblar `helperText` cuando hay error de validación.
- */
-export const getDateTimeValidationMessage = (
-  error: DateValidationError | null,
-): string => {
-  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 '';
-  }
-};
-
-/**
- * Construye el `localeText` que MUI acepta para overridear los labels de los
- * botones del popover (Cancel / OK / Clear).
- */
-export const buildLocaleText = (
-  clearButtonText?: string,
-  cancelButtonText?: string,
-  acceptButtonText?: string,
-): Record<string, string> => {
-  const text: Record<string, string> = {};
-  if (clearButtonText) text.clearButtonLabel = clearButtonText;
-  if (cancelButtonText) text.cancelButtonLabel = cancelButtonText;
-  if (acceptButtonText) text.okButtonLabel = acceptButtonText;
-  return text;
-};