@soyfri/shared-library 1.5.0 → 1.6.0-beta.0

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

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

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

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

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

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