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

package/src/components/Select/Select.stories.tsx

@@ -0,0 +1,569 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { ReactElement, useMemo, useState, Children, isValidElement } from 'react';
+import {
+  FormControl,
+  InputLabel,
+  MenuItem,
+  
+  Chip,
+  Avatar,
+  Box,
+  Typography,
+  OutlinedInput,
+  TextField,
+  ListSubheader,
+} from '@mui/material';
+import ClearIcon from '@mui/icons-material/Clear'; // Icono de cerrar
+
+// Importar las definiciones de las historias
+import {
+  SimpleSelectDefinition,
+  MultiSelectDefinition,
+  WithPlaceholderDefinition,
+  WithFilterDefinition,
+  WithGroupDefinition,
+  CustomRenderWithAvatarDefinition,
+  MultiSelectCustomChipRenderDefinition,
+  MultiSelectCustomChipRenderFullLabelDefinition,
+  ConstrainedHeightDefinition,
+  ConstrainedWidthDefinition,
+  AllFeaturesCombinedDefinition,
+  EmptyOptionsDefinition,
+  SelectWithManyOptionsDefinition,
+  AsyncSelectDefinition,
+} from "./Select.definitions";
+import Select, { SelectOption, Option } from './Select';
+
+// =============================================================================
+// Datos de ejemplo para las historias
+// =============================================================================
+const basicOptions: SelectOption[] = [
+    { value: '10', label: '10' },
+    { value: '25', label: '25' },
+    { value: '50', label: '50' },
+    { value: '100', label: '100' },
+];
+
+const groupedOptions: SelectOption[] = [
+    { value: 'gt', label: 'Guatemala', group: 'Centroamérica' },
+    { value: 'sv', label: 'El Salvador', group: 'Centroamérica' },
+    { value: 'mx', label: 'México', group: 'Norteamérica' },
+    { value: 'us', label: 'EE.UU.', group: 'Norteamérica' },
+    { value: 'ca', label: 'Canadá', group: 'Norteamérica' },
+    { value: 'br', label: 'Brasil', group: 'Sudamérica' },
+    { value: 'ar', label: 'Argentina', group: 'Sudamérica' },
+];
+
+const userOptions: SelectOption[] = [
+    { value: 'admin', label: 'Administrador', img: 'https://placehold.co/40x40?text=A' },
+    { value: 'user', label: 'Usuario', img: 'https://placehold.co/40x40?text=U' },
+    { value: 'moderator', label: 'Moderador', img: 'https://placehold.co/40x40?text=M' },
+    { value: 'guest', label: 'Invitado', img: 'https://placehold.co/40x40?text=G', disabled: true },
+];
+
+const transactionStatuses: SelectOption[] = [
+  { value: 'PENDING', label: 'Pendiente' },
+  { value: 'REJECTED', label: 'Rechazado' },
+  { value: 'CANCELED', label: 'Cancelado' },
+  { value: 'REFUNDED', label: 'Reembolsado' },
+  { value: 'COMPLETED', label: 'Completado' },
+  { value: 'EXPIRED', label: 'Expirado' },
+];
+
+// =============================================================================
+// Definición de las meta-propiedades para Storybook
+// =============================================================================
+const meta: Meta<typeof Select> = {
+    title: 'Components/Select',
+    component: Select,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: 'Componente select personalizado con soporte para múltiples variantes como agrupación, chips, filtros, y renderizado personalizado.',
+            },
+        },
+    },
+    argTypes: {
+      label: { control: 'text', description: 'Etiqueta para el campo de selección.' },
+      options: { control: 'object', description: 'Array de objetos `SelectOption` para las opciones del menú.' },
+      value: { control: 'object', description: 'Valor(es) seleccionado(s) del select.' },
+      defaultValue: { control: 'object', description: 'Valor(es) por defecto del select.' },
+      onChange: { action: 'changed', description: 'Función de callback que se llama cuando el valor del select cambia.' },
+      size: { control: 'radio', options: ['small', 'medium'], description: 'Define el tamaño del componente Select.' },
+      multiple: { control: 'boolean', description: 'Si es verdadero, permite la selección de múltiples opciones.' },
+      filterable: { control: 'boolean', description: 'Si es verdadero, añade un campo de búsqueda para filtrar las opciones.' },
+      placeholder: { control: 'text', description: 'Texto que se muestra cuando no hay nada seleccionado.' },
+      children: { control: false, description: 'Componente `Option` para un renderizado personalizado de las opciones del menú.' },
+      maxHeight: { control: 'number', description: 'Altura máxima del menú desplegable.' },
+      maxWidth: { control: 'text', description: 'Ancho máximo del menú desplegable.' },
+      maxChipsToShow: { control: 'number', description: 'Número máximo de chips a mostrar en selección múltiple antes de agrupar.', if: { arg: 'multiple', eq: true } },
+      renderChipLabel: { control: false, description: 'Función para personalizar el contenido del label de cada chip seleccionado (para múltiple) o del valor mostrado (para individual).', },
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof Select>;
+
+// =============================================================================
+// Historias existentes (proporcionadas por el usuario)
+// =============================================================================
+export const SimpleSelect: Story = {
+    render: () => {
+        const [value, setValue] = useState<string>('25');
+        return (
+            <Box sx={{ width: 200 }}>
+                <Select
+                    label="Registros por página"
+                    options={basicOptions}
+                    value={value}
+                    onChange={(val) => setValue(val as string)}
+                    maxWidth={150}
+                />
+                <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>
+            </Box>
+        );
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Select simple con opciones básicas y valor por defecto."
+            },
+            source: { code: SimpleSelectDefinition.trim() } // Referencia a la definición
+        }
+    }
+};
+
+export const MultiSelect: Story = {
+    render: () => {
+        const [value, setValue] = useState<string[]>([]);
+        return (
+            <Box sx={{ width: 400 }}>
+                <Select
+                    label="Seleccionar estados"
+                    multiple
+                    maxChipsToShow={2}
+                    options={[
+                        { value: 'pending', label: 'Pendiente' },
+                        { value: 'approved', label: 'Aprobado' },
+                        { value: 'rejected', label: 'Rechazado' },
+                        { value: 'canceled', label: 'Cancelado' },
+                        { value: 'completed', label: 'Completado' },
+                        { value: 'invoiced', label: 'Facturado' },
+                    ]}
+                    value={value}
+                    onChange={(val) => setValue(val as string[])}
+                />
+                <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>
+            </Box>
+        );
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Select múltiple que permite seleccionar varias opciones, limitando a 2 chips."
+            },
+            source: { code: MultiSelectDefinition.trim() } // Referencia a la definición
+        }
+    }
+};
+
+export const WithPlaceholder: Story = {
+    render: () => {
+        const [value, setValue] = useState('');
+        return (
+            <Box sx={{ width: 300 }}>
+                <Select
+                    label="Seleccione una opción"
+                    options={basicOptions}
+                    value={value}
+                    onChange={(val) => setValue(val as string)}
+                    placeholder="Ninguna opción seleccionada"
+                />
+                <Typography sx={{ mt: 2 }}>Valor seleccionado: {value || 'Ninguno'}</Typography>
+            </Box>
+        );
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Select con placeholder sin valor inicial seleccionado."
+            },
+            source: { code: WithPlaceholderDefinition.trim() } // Referencia a la definición
+        }
+    }
+};
+
+export const WithFilter: Story = {
+    render: () => {
+        const [value, setValue] = useState('');
+        return (
+            <Box sx={{ width: 300 }}>
+                <Select
+                    label="Buscar país"
+                    filterable
+                    options={groupedOptions}
+                    value={value}
+                    onChange={(val) => setValue(val as string)}
+                />
+                <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>
+            </Box>
+        );
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Select con capacidad de filtrado de opciones."
+            },
+            source: { code: WithFilterDefinition.trim() } // Referencia a la definición
+        }
+    }
+};
+
+export const WithGroup: Story = {
+    render: () => {
+        const [value, setValue] = useState('');
+        return (
+            <Box sx={{ width: 300 }}>
+                <Select
+                    label="País por región"
+                    options={groupedOptions}
+                    value={value}
+                    onChange={(val) => setValue(val as string)}
+                />
+                <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>
+            </Box>
+        );
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Select con opciones agrupadas por categorías."
+            },
+            source: { code: WithGroupDefinition.trim() } // Referencia a la definición
+        }
+    }
+};
+
+export const CustomRenderWithAvatar: Story = {
+    render: () => {
+        const [value, setValue] = useState<string[]>([]);
+        return (
+            <Box sx={{ width: 300 }}>
+                <Select
+                    options={userOptions}
+                    multiple
+                    value={value}
+                    onChange={(val) => setValue(val as string[])}
+                    label="Usuarios"
+                    placeholder="Selecciona usuarios"
+                >
+                    <Option>
+                        {({ img, label }) => (
+                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                                <Avatar src={img} sx={{ width: 24, height: 24 }} />
+                                <Typography variant="body2">{label}</Typography>
+                            </Box>
+                        )}
+                    </Option>
+                </Select>
+                <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>
+            </Box>
+        );
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Select con renderizado personalizado de opciones usando avatares."
+            },
+            source: { code: CustomRenderWithAvatarDefinition.trim() } // Referencia a la definición
+        }
+    }
+};
+
+
+// =============================================================================
+// Nuevas historias (para cubrir más posibilidades)
+// =============================================================================
+
+export const MultiSelectCustomChipRender: Story = {
+    render: () => {
+        const [value, setValue] = useState<string[]>(['pending', 'approved', 'rejected', 'canceled']);
+        return (
+            <Box sx={{ width: 400 }}>
+                <Select
+                    label="Estados de Transacción"
+                    multiple
+                    maxChipsToShow={3} // Muestra 3 chips, luego (+X más)
+                    options={transactionStatuses}
+                    value={value}
+                    onChange={(val) => setValue(val as string[])}
+                    placeholder="Selecciona estados"
+                    renderChipLabel={(item) => ( // Renderizado personalizado para el chip
+                      <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
+                        {item.label.charAt(0).toUpperCase()} {/* Solo la inicial */}
+                      </Typography>
+                    )}
+                />
+                <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>
+            </Box>
+        );
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Select múltiple con un número limitado de chips visibles y un renderizado personalizado para el label de cada chip (solo la inicial)."
+            },
+            source: { code: MultiSelectCustomChipRenderDefinition.trim() } // Referencia a la definición
+        }
+    }
+};
+
+export const MultiSelectCustomChipRenderFullLabel: Story = {
+  render: () => {
+      const [value, setValue] = useState<string[]>(['gt', 'mx', 'us', 'ca', 'br']);
+      return (
+          <Box sx={{ width: 400 }}>
+              <Select
+                  label="Países seleccionados"
+                  multiple
+                  maxChipsToShow={3} // Muestra 3 chips, luego (+X más)
+                  options={groupedOptions}
+                  value={value}
+                  onChange={(val) => setValue(val as string[])}
+                  placeholder="Selecciona países"
+                  renderChipLabel={(item) => ( // Renderizado personalizado para el chip
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                      {item.img && <Avatar src={item.img} sx={{ width: 18, height: 18 }} />} {/* Opcional: avatar en el chip */}
+                      <Typography variant="caption" sx={{ fontWeight: 'medium' }}>
+                        {item.label}
+                      </Typography>
+                    </Box>
+                  )}
+              />
+              <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>
+          </Box>
+      );
+  },
+  parameters: {
+      docs: {
+          story: "Select múltiple con renderizado personalizado completo de los chips, incluyendo avatar y texto completo, y limitando el número de chips visibles."
+      },
+      source: { code: MultiSelectCustomChipRenderFullLabelDefinition.trim() } // Referencia a la definición
+  }
+};
+
+
+export const ConstrainedHeight: Story = {
+    render: () => {
+        const [value, setValue] = useState('');
+        return (
+            <Box sx={{ width: 300 }}>
+                <Select
+                    label="Opciones (Altura Limitada)"
+                    options={groupedOptions.concat(userOptions).concat(transactionStatuses)} // Muchas opciones
+                    value={value}
+                    onChange={(val) => setValue(val as string)}
+                    maxHeight={150} // Altura máxima del menú
+                />
+                <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>
+            </Box>
+        );
+    },
+    parameters: {
+        docs: {
+            story: "Select con altura máxima limitada para el menú desplegable, mostrando scroll si es necesario."
+        },
+        source: { code: ConstrainedHeightDefinition.trim() } // Referencia a la definición
+    }
+};
+
+export const ConstrainedWidth: Story = {
+    render: () => {
+        const [value, setValue] = useState('');
+        return (
+            <Box sx={{ width: 200 }}> {/* El Select en sí es más angosto */}
+                <Select
+                    label="Opciones (Ancho Limitado)"
+                    options={basicOptions.concat(groupedOptions)}
+                    value={value}
+                    onChange={(val) => setValue(val as string)}
+                    maxWidth={100} // Ancho máximo del menú
+                />
+                <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>
+            </Box>
+        );
+    },
+    parameters: {
+        docs: {
+            story: "Select con ancho máximo limitado para el menú desplegable."
+        },
+        source: { code: ConstrainedWidthDefinition.trim() } // Referencia a la definición
+    }
+};
+
+export const AllFeaturesCombined: Story = {
+    render: () => {
+        const [value, setValue] = useState<string[]>(['gt', 'admin', 'PENDING', 'ca', 'user', 'COMPLETED']);
+        return (
+            <Box sx={{ width: 500 }}>
+                <Select
+                    label="Selección Completa"
+                    multiple
+                    filterable
+                    maxChipsToShow={3}
+                    maxHeight={250}
+                    maxWidth="400px"
+                    options={groupedOptions.concat(userOptions).concat(transactionStatuses)}
+                    value={value}
+                    onChange={(val) => setValue(val as string[])}
+                    placeholder="Busca y selecciona todo tipo de elementos"
+                    renderChipLabel={(item) => (
+                      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                        {item.img && <Avatar src={item.img} sx={{ width: 16, height: 16 }} />}
+                        <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
+                          {item.label.length > 10 ? item.label.substring(0, 7) + '...' : item.label}
+                        </Typography>
+                      </Box>
+                    )}
+                >
+                    <Option>
+                        {(item) => (
+                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, my: 0.5 }}>
+                                {item.img && <Avatar src={item.img} sx={{ width: 28, height: 28 }} />}
+                                <Box>
+                                    <Typography variant="body2" fontWeight="medium">{item.label}</Typography>
+                                    {item.group && (
+                                        <Typography variant="caption" color="text.secondary">
+                                            Grupo: {item.group}
+                                        </Typography>
+                                    )}
+                                    {item.disabled && <Chip label="No disponible" size="small" color="warning" sx={{ ml: 1 }} />}
+                                </Box>
+                            </Box>
+                        )}
+                    </Option>
+                </Select>
+                <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>
+            </Box>
+        );
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Un `Select` que demuestra una combinación de todas las características: selección múltiple, filtrado, opciones agrupadas, renderizado personalizado de opciones y chips, y límites de altura/ancho."
+            },
+            source: { code: AllFeaturesCombinedDefinition.trim() } // Referencia a la definición
+        }
+    }
+};
+
+export const EmptyOptions: Story = {
+    args: {
+        label: 'Seleccionar (Vacío)',
+        options: [],
+        value: undefined,
+        placeholder: 'No hay opciones disponibles',
+    },
+    render: (args) => {
+      const [value, setValue] = useState(args.value);
+      return (
+        <Box sx={{ width: 300 }}>
+            <Select {...args} value={value ?? ''} onChange={setValue} />
+            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value || 'Ninguno'}</Typography>
+        </Box>
+      );
+    },
+    parameters: {
+        docs: {
+            story: "Select que se muestra cuando no hay opciones disponibles."
+        },
+        source: { code: EmptyOptionsDefinition.trim() } // Referencia a la definición
+    }
+};
+
+export const SelectWithManyOptions: Story = {
+  render: () => {
+      const manyOptions = Array.from({ length: 50 }, (_, i) => ({
+          value: `option-${i}`,
+          label: `Opción ${i + 1}`,
+          group: i < 25 ? 'Grupo A' : 'Grupo B',
+      }));
+      const [value, setValue] = useState('');
+      return (
+          <Box sx={{ width: 300 }}>
+              <Select
+                  label="Muchas Opciones"
+                  options={manyOptions}
+                  value={value}
+                  onChange={(val) => setValue(val as string)}
+                  filterable
+                  maxHeight={200}
+              />
+              <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>
+          </Box>
+      );
+  },
+  parameters: {
+      docs: {
+          story: "Select con un gran número de opciones para demostrar el scroll y el filtrado eficiente."
+      },
+      source: { code: SelectWithManyOptionsDefinition.trim() } // Referencia a la definición
+  }
+};
+
+export const AsyncSelect: Story = {
+    render: () => {
+        const [value, setValue] = useState('');
+
+        const mockAsyncOptions = [
+            { value: 'apple', label: 'Apple' },
+            { value: 'banana', label: 'Banana' },
+            { value: 'orange', label: 'Orange' },
+            { value: 'grape', label: 'Grape' },
+            { value: 'strawberry', label: 'Strawberry' },
+            { value: 'blueberry', label: 'Blueberry' },
+            { value: 'pineapple', label: 'Pineapple' },
+            { value: 'watermelon', label: 'Watermelon' },
+            { value: 'kiwi', label: 'Kiwi' },
+            { value: 'lemon', label: 'Lemon' },
+        ];
+
+        // Simulate an API call
+        const simulatedLoadOptions = (inputValue: string): Promise<SelectOption[]> => {
+            return new Promise((resolve) => {
+                setTimeout(() => {
+                    const filtered = mockAsyncOptions.filter(option =>
+                        option.label.toLowerCase().includes(inputValue.toLowerCase())
+                    );
+                    resolve(filtered);
+                }, 800); // Simulate network delay
+            });
+        };
+
+        return (
+            <Box sx={{ width: 300 }}>
+                <Select
+                    
+                    loadOptions={simulatedLoadOptions}
+                    value={value}
+                    onChange={(val) => setValue(val as string)}
+                    placeholder="Escribe para buscar..."
+                    loadingMessage="Buscando frutas..."
+                    noOptionsMessage="No se encontraron frutas."
+                    debounceTimeout={500} // tiempo que tardara el input en buscar despues de haber escrito la ultima letra
+                />
+                <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>
+            </Box>
+        );
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Un `Select` que carga opciones de forma asíncrona a medida que el usuario escribe, con un retraso simulado."
+            },
+            source: { code: AsyncSelectDefinition.trim() }
+        }
+    }
+};