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

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

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