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

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

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

@@ -0,0 +1,390 @@
+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() }
+      }
+    }
+  };