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

package/src/components/DateRangePicker/DateRangePicker.definitions.ts

@@ -0,0 +1,191 @@
+export const BasicDateRangePickerDefinition = `
+import React, { useState } from 'react';
+import { DateRangePicker } from './DateRangePicker'; // Ajusta la ruta si es necesario
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const BasicDateRangePickerExample = () => {
+  const [startDate, setStartDate] = useState(dayjs('2023-01-01'));
+  const [endDate, setEndDate] = useState(dayjs('2023-01-31'));
+
+  const handleDateRangeChange = (start, end) => {
+    setStartDate(start);
+    setEndDate(end);
+  };
+
+  return (
+    <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
+      <DateRangePicker
+        label="Seleccionar Rango"
+        startDate={startDate}
+        endDate={endDate}
+        onDateRangeChange={handleDateRangeChange}
+      />
+      <Typography sx={{ mt: 2 }}>
+        Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+        Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+      </Typography>
+    </Box>
+  );
+};
+`;
+
+export const DateRangePickerWithMinMaxDefinition = `
+import React, { useState } from 'react';
+import { DateRangePicker } from './DateRangePicker'; // Ajusta la ruta si es necesario
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DateRangePickerWithMinMaxExample = () => {
+  const [startDate, setStartDate] = useState(dayjs('2023-06-10'));
+  const [endDate, setEndDate] = useState(dayjs('2023-06-20'));
+  const minDate = dayjs('2023-06-01');
+  const maxDate = dayjs('2023-06-30');
+
+  const handleDateRangeChange = (start, end) => {
+    setStartDate(start);
+    setEndDate(end);
+  };
+
+  return (
+    <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
+      <DateRangePicker
+        label="Rango de Junio"
+        startDate={startDate}
+        endDate={endDate}
+        onDateRangeChange={handleDateRangeChange}
+        minDate={minDate}
+        maxDate={maxDate}
+      />
+      <Typography sx={{ mt: 2 }}>
+        Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+        Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+      </Typography>
+      <Typography variant="caption" color="text.secondary">
+        (Rango permitido: \${minDate.format('YYYY-MM-DD')} a \${maxDate.format('YYYY-MM-DD')})
+      </Typography>
+    </Box>
+  );
+};
+`;
+
+export const DateRangePickerDisabledDefinition = `
+import React, { useState } from 'react';
+import { DateRangePicker } from './DateRangePicker'; // Ajusta la ruta si es necesario
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DateRangePickerDisabledExample = () => {
+  const [startDate, setStartDate] = useState(dayjs('2023-01-01'));
+  const [endDate, setEndDate] = useState(dayjs('2023-01-31'));
+
+  return (
+    <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
+      <DateRangePicker
+        label="Rango Deshabilitado"
+        startDate={startDate}
+        endDate={endDate}
+        onDateRangeChange={() => {}}
+        disabled
+      />
+      <Typography sx={{ mt: 2 }}>
+        Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+        Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+      </Typography>
+    </Box>
+  );
+};
+`;
+
+export const DateRangePickerReadOnlyDefinition = `
+import React, { useState } from 'react';
+import { DateRangePicker } from './DateRangePicker'; // Ajusta la ruta si es necesario
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DateRangePickerReadOnlyExample = () => {
+  const [startDate, setStartDate] = useState(dayjs('2024-07-01'));
+  const [endDate, setEndDate] = useState(dayjs('2024-07-15'));
+
+  return (
+    <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
+      <DateRangePicker
+        label="Rango Solo Lectura"
+        startDate={startDate}
+        endDate={endDate}
+        onDateRangeChange={() => {}}
+        readOnly
+      />
+      <Typography sx={{ mt: 2 }}>
+        Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+        Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+      </Typography>
+    </Box>
+  );
+};
+`;
+
+export const DateRangePickerWithInitialNullDefinition = `
+import React, { useState } from 'react';
+import { DateRangePicker } from './DateRangePicker'; // Ajusta la ruta si es necesario
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DateRangePickerWithInitialNullExample = () => {
+  const [startDate, setStartDate] = useState(null);
+  const [endDate, setEndDate] = useState(null);
+
+  const handleDateRangeChange = (start, end) => {
+    setStartDate(start);
+    setEndDate(end);
+  };
+
+  return (
+    <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
+      <DateRangePicker
+        label="Rango Sin Selección Inicial"
+        startDate={startDate}
+        endDate={endDate}
+        onDateRangeChange={handleDateRangeChange}
+      />
+      <Typography sx={{ mt: 2 }}>
+        Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+        Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+      </Typography>
+    </Box>
+  );
+};
+`;
+
+export const DateRangePickerWithSizeDefinition = `
+import React, { useState } from 'react';
+import { DateRangePicker } from './DateRangePicker'; // Adjust path if necessary
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DateRangePickerWithSizeExample = () => {
+  const [startDate, setStartDate] = useState(dayjs('2023-01-01'));
+  const [endDate, setEndDate] = useState(dayjs('2023-01-31'));
+
+  const handleDateRangeChange = (start, end) => {
+    setStartDate(start);
+    setEndDate(end);
+  };
+
+  return (
+    <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
+      <DateRangePicker
+        label="Rango de Fechas (Tamaño Pequeño)"
+        startDate={startDate}
+        endDate={endDate}
+        onDateRangeChange={handleDateRangeChange}
+        slotProps={{ textField: { size: 'small' } }}
+      />
+      <Typography sx={{ mt: 2 }}>
+        Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+        Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+      </Typography>
+    </Box>
+  );
+};
+`;

package/src/components/DateRangePicker/DateRangePicker.stories.tsx

@@ -0,0 +1,252 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { Box, Typography } from '@mui/material';
+import { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+
+import DateRangePicker from "./DateRangePicker";
+import { BasicDateRangePickerDefinition, DateRangePickerWithMinMaxDefinition, DateRangePickerDisabledDefinition, DateRangePickerReadOnlyDefinition, DateRangePickerWithInitialNullDefinition, DateRangePickerWithSizeDefinition } from './DateRangePicker.definitions';
+
+// =============================================================================
+const meta: Meta<typeof DateRangePicker> = {
+    title: 'Components/DateRangePicker',
+    component: DateRangePicker,
+    tags: ['autodocs'],
+    parameters: {
+      layout: 'centered',
+      docs: {
+        description: {
+          component: 'Un componente `DateRangePicker` personalizado que permite seleccionar un rango de fechas con un solo campo de entrada (visualmente dos inputs interconectados) y gestiona las fechas de inicio y fin.',
+        },
+      },
+    },
+    argTypes: {
+      label: { control: 'text', description: 'Etiqueta para el campo de entrada del rango de fechas.' },
+      startDate: { control: 'object', description: 'La fecha de inicio del rango.', type: { name: 'object', required: false, value: {} } },
+      endDate: { control: 'object', description: 'La fecha de fin del rango.', type: { name: 'object', required: false, value: {} } },
+      onDateRangeChange: { action: 'dateRangeChanged', description: 'Callback que se dispara cuando el rango de fechas cambia.' },
+      minDate: { control: 'object', description: 'La fecha mínima permitida para cualquier fecha en el rango.' },
+      maxDate: { control: 'object', description: 'La fecha máxima permitida para cualquier fecha en el rango.' },
+      disabled: { control: 'boolean', description: 'Si es verdadero, el selector de rango estará deshabilitado.' },
+      readOnly: { control: 'boolean', description: 'Si es verdadero, el selector de rango estará en modo de solo lectura.' },
+      slotProps: { control: 'object', description: 'Propiedades pasadas a los slots internos del DateRangePicker (e.g., `textField`).' },
+    },
+  };
+  
+  export default meta;
+  type Story = StoryObj<typeof DateRangePicker>;
+  
+  // =============================================================================
+  // Historias
+  // =============================================================================
+  
+  export const BasicDateRangePicker: Story = {
+    render: () => {
+      const [startDate, setStartDate] = useState<Dayjs | null>(dayjs('2023-01-01'));
+      const [endDate, setEndDate] = useState<Dayjs | null>(dayjs('2023-01-31'));
+  
+      const handleDateRangeChange = (start: Dayjs | null, end: Dayjs | null) => {
+        setStartDate(start);
+        setEndDate(end);
+      };
+  
+      return (
+        <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <DateRangePicker
+            label="Seleccionar Rango"
+            startDate={startDate}
+            endDate={endDate}
+            onDateRangeChange={handleDateRangeChange}
+          />
+          <Typography sx={{ mt: 2 }}>
+            Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+            Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Un `DateRangePicker` básico que permite seleccionar un rango de fechas."
+        },
+        source: { code: BasicDateRangePickerDefinition.trim() }
+      }
+    }
+  };
+  
+  export const DateRangePickerWithMinMax: Story = {
+    render: () => {
+      const [startDate, setStartDate] = useState<Dayjs | null>(dayjs('2023-06-10'));
+      const [endDate, setEndDate] = useState<Dayjs | null>(dayjs('2023-06-20'));
+      const minDate = dayjs('2023-06-01');
+      const maxDate = dayjs('2023-06-30');
+  
+      const handleDateRangeChange = (start: Dayjs | null, end: Dayjs | null) => {
+        setStartDate(start);
+        setEndDate(end);
+      };
+  
+      return (
+        <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <DateRangePicker
+            label="Rango de Junio"
+            startDate={startDate}
+            endDate={endDate}
+            onDateRangeChange={handleDateRangeChange}
+            minDate={minDate}
+            maxDate={maxDate}
+          />
+          <Typography sx={{ mt: 2 }}>
+            Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+            Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+          </Typography>
+          <Typography variant="caption" color="text.secondary">
+            (Rango permitido: ${minDate.format('YYYY-MM-DD')} a ${maxDate.format('YYYY-MM-DD')})
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Muestra un `DateRangePicker` con fechas mínimas y máximas permitidas para el rango completo."
+        },
+        source: { code: DateRangePickerWithMinMaxDefinition.trim() }
+      }
+    }
+  };
+  
+  export const DateRangePickerDisabled: Story = {
+    render: () => {
+      const [startDate, setStartDate] = useState<Dayjs | null>(dayjs('2023-01-01'));
+      const [endDate, setEndDate] = useState<Dayjs | null>(dayjs('2023-01-31'));
+  
+      return (
+        <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <DateRangePicker
+            label="Rango Deshabilitado"
+            startDate={startDate}
+            endDate={endDate}
+            onDateRangeChange={() => {}}
+            disabled
+          />
+          <Typography sx={{ mt: 2 }}>
+            Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+            Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Demuestra un `DateRangePicker` en estado deshabilitado."
+        },
+        source: { code: DateRangePickerDisabledDefinition.trim() }
+      }
+    }
+  };
+  
+  export const DateRangePickerReadOnly: Story = {
+    render: () => {
+      const [startDate, setStartDate] = useState<Dayjs | null>(dayjs('2024-07-01'));
+      const [endDate, setEndDate] = useState<Dayjs | null>(dayjs('2024-07-15'));
+  
+      return (
+        <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <DateRangePicker
+            label="Rango Solo Lectura"
+            startDate={startDate}
+            endDate={endDate}
+            onDateRangeChange={() => {}}
+            readOnly
+          />
+          <Typography sx={{ mt: 2 }}>
+            Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+            Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Muestra el `DateRangePicker` en modo de solo lectura. El usuario puede ver el rango pero no modificarlo."
+        },
+        source: { code: DateRangePickerReadOnlyDefinition.trim() }
+      }
+    }
+  };
+  
+  export const DateRangePickerWithInitialNull: Story = {
+    render: () => {
+      const [startDate, setStartDate] = useState<Dayjs | null>(null);
+      const [endDate, setEndDate] = useState<Dayjs | null>(null);
+  
+      const handleDateRangeChange = (start: Dayjs | null, end: Dayjs | null) => {
+        setStartDate(start);
+        setEndDate(end);
+      };
+  
+      return (
+        <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <DateRangePicker
+            label="Rango Sin Selección Inicial"
+            startDate={startDate}
+            endDate={endDate}
+            onDateRangeChange={handleDateRangeChange}
+          />
+          <Typography sx={{ mt: 2 }}>
+            Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+            Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Muestra un `DateRangePicker` sin fechas de inicio o fin seleccionadas inicialmente."
+        },
+        source: { code: DateRangePickerWithInitialNullDefinition.trim() }
+      }
+    }
+  };
+  
+  export const DateRangePickerWithSize: Story = {
+    render: () => {
+      const [startDate, setStartDate] = useState<Dayjs | null>(dayjs('2023-01-01'));
+      const [endDate, setEndDate] = useState<Dayjs | null>(dayjs('2023-01-31'));
+  
+      const handleDateRangeChange = (start: Dayjs | null, end: Dayjs | null) => {
+        setStartDate(start);
+        setEndDate(end);
+      };
+  
+      return (
+        <Box sx={{ width: 400, display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <DateRangePicker
+            label="Rango de Fechas (Tamaño Pequeño)"
+            startDate={startDate}
+            endDate={endDate}
+            onDateRangeChange={handleDateRangeChange}
+            slotProps={{ textField: { size: 'small' } }} // Aplica el tamaño 'small' a los TextFields internos
+          />
+          <Typography sx={{ mt: 2 }}>
+            Inicio: {startDate ? startDate.format('YYYY-MM-DD') : 'N/A'} |
+            Fin: {endDate ? endDate.format('YYYY-MM-DD') : 'N/A'}
+          </Typography>
+        </Box>
+      );
+    },
+    parameters: {
+      docs: {
+        description: {
+          story: "Demuestra cómo aplicar diferentes tamaños (`small` o `medium`) a los campos de entrada del `DateRangePicker`."
+        },
+        source: { code: DateRangePickerWithSizeDefinition.trim() }
+      }
+    }
+  };
+  

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';