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

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

@@ -1,232 +0,0 @@
-// 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 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.stories.tsx

@@ -1,390 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React, { useState, useMemo } from 'react';
-import {
-  Box,
-  Typography,
-  TextField, // Necesario para el renderizado del input
-} from '@mui/material';
-
-// Importaciones de @mui/x-date-pickers y dayjs
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DateTimePicker as MuiDateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
-import { DateValidationError } from '@mui/x-date-pickers/models';
-import dayjs, { Dayjs } from 'dayjs';
-import { renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers';
-
-// Importar las definiciones de las historias
-import {
-  BasicDateTimePickerDefinition,
-  DateTimePickerWithMinMaxDefinition,
-  DateTimePickerDisabledDefinition,
-  DateTimePickerReadOnlyDefinition,
-  DateTimePickerWithInitialNullDefinition,
-  DateTimePickerSmallSizeDefinition,
-  DateTimePickerWithCustomButtonTextDefinition,
-  DateTimePickerWithButtonsDefinition,
-  DateTimePickerWithCustomInputFormatDefinition,
-} from './DateTimePicker.definitions'; // Asegúrate de que esta ruta sea correcta
-import { DateTimePicker } from './DateTimePicker';
-
-
-const meta: Meta<typeof DateTimePicker> = {
-    title: 'Components/DateTimePicker',
-    component: DateTimePicker,
-    tags: ['autodocs'],
-    parameters: {
-      layout: 'centered',
-      docs: {
-        description: {
-          component: 'Un componente `DateTimePicker` personalizado de Material UI que permite seleccionar tanto la fecha como la hora.',
-        },
-      },
-    },
-    argTypes: {
-      label: { control: 'text', description: 'Etiqueta para el selector de fecha y hora.' },
-      selectedDateTime: { control: 'object', description: 'La fecha y hora actualmente seleccionada.', type: { name: 'object', required: false, value: {} } },
-      onDateTimeChange: { action: 'dateTimeChanged', description: 'Callback que se dispara cuando la fecha y hora cambian.' },
-      minDateTime: { control: 'object', description: 'La fecha y hora mínima permitida.' },
-      maxDateTime: { control: 'object', description: 'La fecha y hora máxima permitida.' },
-      disabled: { control: 'boolean', description: 'Si es verdadero, el selector estará deshabilitado.' },
-      readOnly: { control: 'boolean', description: 'Si es verdadero, el selector estará en modo de solo lectura.' },
-      inputFormat: { control: 'text', description: 'Formato de la fecha y hora en el campo de entrada (ej. "DD/MM/YYYY HH:mm").' }, // Nuevo argType
-      slotProps: { control: 'object', description: 'Propiedades pasadas a los slots internos del DateTimePicker (e.g., `textField`, `actionBar`).' },
-      clearButtonText: { control: 'text', description: 'Texto personalizado para el botón "Limpiar".', if: { arg: 'slotProps.actionBar.actions', eq: 'clear' } },
-      cancelButtonText: { control: 'text', description: 'Texto personalizado para el botón "Cancelar".', if: { arg: 'slotProps.actionBar.actions', eq: 'cancel' } },
-      acceptButtonText: { control: 'text', description: 'Texto personalizado para el botón "Aceptar".', if: { arg: 'slotProps.actionBar.actions', eq: 'accept' } },
-    },
-  };
-  
-  export default meta;
-  type Story = StoryObj<typeof DateTimePicker>;
-  
-  // =============================================================================
-  // Historias
-  // =============================================================================
-  
-  export const BasicDateTimePicker: Story = {
-    render: () => {
-      const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(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>
-      );
-    },
-    parameters: {
-      docs: {
-        description: {
-          story: "Un `DateTimePicker` básico con selección de fecha y hora actual."
-        },
-        source: { code: BasicDateTimePickerDefinition.trim() }
-      }
-    }
-  };
-  
-  export const DateTimePickerWithMinMax: Story = {
-    render: () => {
-      const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(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 (Rango)"
-            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>
-      );
-    },
-    parameters: {
-      docs: {
-        description: {
-          story: "Muestra un `DateTimePicker` con límites de fecha y hora mínimos y máximos."
-        },
-        source: { code: DateTimePickerWithMinMaxDefinition.trim() }
-      }
-    }
-  };
-  
-  export const DateTimePickerDisabled: Story = {
-    render: () => {
-      const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(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>
-      );
-    },
-    parameters: {
-      docs: {
-        description: {
-          story: "Demuestra un `DateTimePicker` en estado deshabilitado."
-        },
-        source: { code: DateTimePickerDisabledDefinition.trim() }
-      }
-    }
-  };
-  
-  export const DateTimePickerReadOnly: Story = {
-    render: () => {
-      const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(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>
-      );
-    },
-    parameters: {
-      docs: {
-        description: {
-          story: "Muestra el `DateTimePicker` en modo de solo lectura."
-        },
-        source: { code: DateTimePickerReadOnlyDefinition.trim() }
-      }
-    }
-  };
-  
-  export const DateTimePickerWithInitialNull: Story = {
-    render: () => {
-      const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(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>
-      );
-    },
-    parameters: {
-      docs: {
-        description: {
-          story: "Muestra un `DateTimePicker` sin fecha y hora seleccionadas inicialmente."
-        },
-        source: { code: DateTimePickerWithInitialNullDefinition.trim() }
-      }
-    }
-  };
-  
-  export const DateTimePickerSmallSize: Story = {
-    render: () => {
-      const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(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>
-      );
-    },
-    parameters: {
-      docs: {
-        description: {
-          story: "Demuestra cómo aplicar un tamaño más pequeño al `DateTimePicker`."
-        },
-        source: { code: DateTimePickerSmallSizeDefinition.trim() }
-      }
-    }
-  };
-  
-  export const DateTimePickerWithButtons: Story = {
-    render: () => {
-      const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(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>
-      );
-    },
-    parameters: {
-      docs: {
-        description: {
-          story: "Muestra el `DateTimePicker` con botones de acción ('Limpiar', 'Cancelar', 'Aceptar') en el pie del selector."
-        },
-        source: { code: DateTimePickerWithButtonsDefinition.trim() }
-      }
-    }
-  };
-  
-  export const DateTimePickerWithCustomButtonText: Story = {
-    render: () => {
-      const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(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>
-      );
-    },
-    parameters: {
-      docs: {
-        description: {
-          story: "Demuestra cómo personalizar el texto de los botones de acción ('Limpiar', 'Cancelar', 'Aceptar') en el `DateTimePicker`."
-        },
-        source: { code: DateTimePickerWithCustomButtonTextDefinition.trim() }
-      }
-    }
-  };
-  
-  export const DateTimePickerWithCustomInputFormat: Story = {
-    render: () => {
-      const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(dayjs());
-      return (
-        <Box sx={{ width: 300 }}>
-          <DateTimePicker
-            label="Fecha y Hora (Formato dd/MM/YYYY HH:mm)"
-            selectedDateTime={selectedDateTime}
-            onDateTimeChange={setSelectedDateTime}
-            inputFormat="DD/MM/YYYY HH:mm" // Custom date format
-          />
-          <Typography sx={{ mt: 2 }}>
-            Seleccionado: {selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
-          </Typography>
-        </Box>
-      );
-    },
-    parameters: {
-      docs: {
-        description: {
-          story: "Muestra el `DateTimePicker` con un formato de fecha y hora personalizado en el campo de entrada, por ejemplo `DD/MM/YYYY HH:mm`."
-        },
-        source: { code: DateTimePickerWithCustomInputFormatDefinition.trim() }
-      }
-    }
-  };
-
-  export const DateTimePickerWithAllMinutes: Story = {
-    render: () => {
-      const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(dayjs('2023-06-15T10:00'));
-     
-      return (
-        <Box sx={{ width: 300 }}>
-          <DateTimePicker
-            label="Fecha y Hora en Junio (Rango)"
-            selectedDateTime={selectedDateTime}
-            onDateTimeChange={setSelectedDateTime}
-             viewRenderers={{
-              hours: renderMultiSectionDigitalClockTimeView,
-              minutes: renderMultiSectionDigitalClockTimeView,
-            }}
-            minutesStep={1}
-            timeSteps={{ minutes: 1 }} // <-- clave en varias versiones 
-          />
-          <Typography sx={{ mt: 2 }}>
-            Seleccionado: {selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
-          </Typography>
-        </Box>
-      );
-    },
-    parameters: {
-      docs: {
-        description: {
-          story: "Muestra un `DateTimePicker` con todos los minutos habiles."
-        },
-        source: { code: DateTimePickerWithMinMaxDefinition.trim() }
-      }
-    }
-  };
-
-   export const DateTimePicker24h: Story = {
-    render: () => {
-      const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(dayjs('2023-06-15T10:00'));
-     
-      return (
-        <Box sx={{ width: 300 }}>
-          <DateTimePicker
-            label="Fecha y Hora en Junio (Rango)"
-            selectedDateTime={selectedDateTime}
-            onDateTimeChange={setSelectedDateTime}
-             viewRenderers={{
-              hours: renderMultiSectionDigitalClockTimeView,
-              minutes: renderMultiSectionDigitalClockTimeView,
-            }}
-            minutesStep={1}
-            timeSteps={{ minutes: 1 }} // <-- clave en varias versiones 
-            ampm={true}
-          />
-          <Typography sx={{ mt: 2 }}>
-            Seleccionado: {selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
-          </Typography>
-        </Box>
-      );
-    },
-    parameters: {
-      docs: {
-        description: {
-          story: "Muestra un `DateTimePicker` con formato de 24 horas."
-        },
-        source: { code: DateTimePickerWithMinMaxDefinition.trim() }
-      }
-    }
-  };