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

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

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

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

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