@soyfri/shared-library 1.5.0-beta.4 → 1.5.0

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

@@ -0,0 +1,205 @@
+// 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>
+      );
+};
+`;

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

@@ -0,0 +1,282 @@
+
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState, useMemo } from 'react';
+import {
+  Box,
+  Typography,
+  TextField,
+} from '@mui/material';
+
+// Importar las definiciones de las historias
+import {
+    BasicDatePickerDefinition,
+    DatePickerWithMinMaxDefinition,
+    DateRangePickerDefinition,
+    DatePickerWithErrorDefinition,
+    DatePickerSmallSizeDefinition,
+    DatePickerDisabledDefinition,
+    DatePickerReadOnlyDefinition,
+    
+  } 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 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.tsx

@@ -0,0 +1,165 @@
+import React, { useMemo } from 'react';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';
+import { DateValidationError } from '@mui/x-date-pickers/models';
+import { Dayjs } from 'dayjs';
+import { styled } from '@mui/system';
+import { Box, TextField } from '@mui/material';
+import 'dayjs/locale/en-gb';
+
+// Define las props para el CustomDatePicker
+interface DatePickerProps {
+  label: string;
+  selectedDate: Dayjs | null;
+  onDateChange: (date: Dayjs | null) => void;
+  minDate?: Dayjs;
+  maxDate?: Dayjs;
+  disabled?: boolean;
+  readOnly?: boolean;
+  slotProps?: any;
+}
+
+// 1. Reutilizar el componente estilizado del Input
+// El DatePicker renderiza un TextField por dentro, así que podemos usar el mismo componente estilizado.
+const StyledTextField = styled(TextField)(({ theme }) => ({
+  '& .MuiInputBase-root': {
+    maxHeight: '34px',
+    padding: '8px 10px',
+    borderRadius: '10px',
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: '14px',
+  },
+  '& .MuiInputBase-input': {
+    padding: '0 !important',
+    height: '18px',
+    display: 'flex',
+    alignItems: 'center',
+    marginTop: '-4px'
+  },
+  '& .MuiInputLabel-root': {
+    top: '50%',
+    transform: 'translate(14px, -50%)',
+    '&.MuiInputLabel-shrink': {
+      transform: 'translate(1px, -200%) scale(0.75)',
+      fontSize: '16px !important',
+      '> legend': {
+        display: 'none',
+      }
+    },
+  },
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: '0.7px solid',
+    borderColor: '#e0e0e0',
+  },
+}));
+
+/**
+ * Componente de DatePicker personalizado de Material UI.
+ * Permite seleccionar una fecha y actualiza un estado Dayjs.
+ */
+export const DatePicker: React.FC<DatePickerProps> = ({
+  label,
+  selectedDate,
+  onDateChange,
+  minDate,
+  maxDate,
+  disabled,
+  readOnly,
+  slotProps,
+  ...rest
+}) => {
+  const [error, setError] = React.useState<DateValidationError | null>(null);
+
+  const errorMessage = useMemo(() => {
+    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 '';
+      }
+    }
+  }, [error]);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="en-gb">
+      <Box
+          sx={{
+              width: '100%',
+              display: 'grid',
+              marginBottom: '10px',
+              marginTop: '10px'
+          }}
+
+      >
+        <MuiDatePicker
+          label={label}
+          value={selectedDate}
+          onChange={onDateChange}
+          minDate={minDate}
+          maxDate={maxDate}
+          onError={(newError) => setError(newError)}
+          disabled={disabled}
+          readOnly={readOnly}
+          className='date-picker-custom'
+          sx={{
+            
+            
+            '& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root': {
+              maxHeight: '28px',
+              borderRadius: '10px'
+            },
+
+            // 3. Sobreescribir el label para que esté centrado verticalmente
+            '& .MuiInputLabel-root': {
+              // El label se alinea con el padding del input base.
+              top: '50%',
+              transform: 'translate(14px, -50%)',
+              
+              // Estilo para el label "encogido" cuando el input está lleno o en foco
+              '&.MuiInputLabel-shrink': {
+                transform: 'translate(1px, -200%) scale(0.75)', // Ajustar la posición para que se vea por encima del input
+                fontSize: '16px !important',
+                '> legend': {
+                  display: 'none', // Ocultar el legend del outline
+                }
+              },
+            },
+            '& .MuiPickersInputBase-root > fieldset > legend':{
+              display: 'none', // Ocultar el legend del outline
+            },
+
+          }}
+          // 2. Usar 'slotProps' para pasar el componente estilizado al TextField
+          slotProps={{
+            ...slotProps,
+            textField: {
+              ...slotProps?.textField,
+              helperText: errorMessage || slotProps?.textField?.helperText,
+              error: !!errorMessage || slotProps?.textField?.error,
+              InputProps: {
+                ...slotProps?.textField?.InputProps,
+                inputComponent: StyledTextField,
+              },
+            },
+          }}
+          {...rest}
+        />
+      </Box>
+    </LocalizationProvider>
+  );
+};
+
+export default DatePicker;

package/src/components/DatePicker/index.ts

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