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

package/src/components/DateRangePicker/DateRangePicker.tsx

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

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

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

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

@@ -0,0 +1,38 @@
+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;
+};