@soyfri/shared-library 2.0.0-beta.10 → 2.0.0-beta.11

package/src/components/Select/Select.definitions.ts

@@ -1,602 +0,0 @@
-export const SimpleSelectDefinition = `
-import React, { useState } from 'react';
-import { Select } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
-import { Box, Typography } from '@mui/material';
-
-const basicOptions = [
-    { value: '10', label: '10' },
-    { value: '25', label: '25' },
-    { value: '50', label: '50' },
-    { value: '100', label: '100' },
-];
-
-export const SimpleSelectExample = () => {
-    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>
-    );
-};
-`;
-
-export const MultiSelectDefinition = `
-import React, { useState } from 'react';
-import { Select } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
-import { Box, Typography } from '@mui/material';
-
-export const MultiSelectExample = () => {
-    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>
-    );
-};
-`;
-
-export const WithPlaceholderDefinition = `
-import React, { useState } from 'react';
-import { Select } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
-import { Box, Typography } from '@mui/material';
-
-const basicOptions = [
-    { value: '10', label: '10' },
-    { value: '25', label: '25' },
-    { value: '50', label: '50' },
-    { value: '100', label: '100' },
-];
-
-export const WithPlaceholderExample = () => {
-    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>
-    );
-};
-`;
-
-export const WithFilterDefinition = `
-import React, { useState } from 'react';
-import { Select } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
-import { Box, Typography } from '@mui/material';
-
-const groupedOptions = [
-    { 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' },
-];
-
-export const WithFilterExample = () => {
-    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>
-    );
-};
-`;
-
-export const WithGroupDefinition = `
-import React, { useState } from 'react';
-import { Select } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
-import { Box, Typography } from '@mui/material';
-
-const groupedOptions = [
-    { 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' },
-];
-
-export const WithGroupExample = () => {
-    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>
-    );
-};
-`;
-
-export const CustomRenderWithAvatarDefinition = `
-import React, { useState } from 'react';
-import { Select, Option } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
-import { Avatar, Box, Typography } from '@mui/material';
-
-const userOptions = [
-    { value: 'admin', label: 'Administrador', img: 'https://placehold.co/40x40?text=A' },
-    { value: 'user', label: 'Usuario', img: 'https://placehold.co/40x40?text=U' },
-];
-
-export const CustomRenderWithAvatarExample = () => {
-    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>
-    );
-};
-`;
-
-export const MultiSelectCustomChipRenderDefinition = `
-import React, { useState } from 'react';
-import { Select } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
-import { Box, Typography, Chip } from '@mui/material';
-
-const transactionStatuses = [
-    { value: 'PENDING', label: 'Pendiente' },
-    { value: 'REJECTED', label: 'Rechazado' },
-    { value: 'CANCELED', label: 'Cancelado' },
-    { value: 'REFUNDED', label: 'Reembolsado' },
-    { value: 'COMPLETED', label: 'Completado' },
-    { value: 'EXPIRED', label: 'Expirado' },
-];
-
-export const MultiSelectCustomChipRenderExample = () => {
-    const [value, setValue] = useState<string[]>(['pending', 'approved', 'rejected', 'canceled']);
-    return (
-        <Box sx={{ width: 400 }}>
-            <Select
-                label="Estados de Transacción"
-                multiple
-                maxChipsToShow={3}
-                options={transactionStatuses}
-                value={value}
-                onChange={(val) => setValue(val as string[])}
-                placeholder="Selecciona estados"
-                renderChipLabel={(item) => (
-                  <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
-                    {item.label.charAt(0).toUpperCase()}
-                  </Typography>
-                )}
-            />
-            <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>
-        </Box>
-    );
-};
-`;
-
-export const MultiSelectCustomChipRenderFullLabelDefinition = `
-import React, { useState } from 'react';
-import { Select } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
-import { Avatar, Box, Typography } from '@mui/material';
-
-const groupedOptions = [
-    { 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' },
-];
-
-export const MultiSelectCustomChipRenderFullLabelExample = () => {
-    const [value, setValue] = useState<string[]>(['gt', 'mx', 'us', 'ca', 'br']);
-    return (
-        <Box sx={{ width: 400 }}>
-            <Select
-                label="Países seleccionados"
-                multiple
-                maxChipsToShow={3}
-                options={groupedOptions}
-                value={value}
-                onChange={(val) => setValue(val as string[])}
-                placeholder="Selecciona países"
-                renderChipLabel={(item) => (
-                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-                        {item.img && <Avatar src={item.img} sx={{ width: 18, height: 18 }} />}
-                        <Typography variant="caption" sx={{ fontWeight: 'medium' }}>
-                            {item.label}
-                        </Typography>
-                    </Box>
-                )}
-            />
-            <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>
-        </Box>
-    );
-};
-`;
-
-export const ConstrainedHeightDefinition = `
-import React, { useState } from 'react';
-import { Select } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
-import { Box, Typography } from '@mui/material';
-
-const optionsWithManyItems = [
-  { value: 'gt', label: 'Guatemala' }, { value: 'sv', label: 'El Salvador' },
-  { value: 'mx', label: 'México' }, { value: 'us', label: 'EE.UU.' },
-  { value: 'ca', label: 'Canadá' }, { value: 'br', label: 'Brasil' },
-  { value: 'ar', label: 'Argentina' }, { value: 'cl', label: 'Chile' },
-  { value: 'co', label: 'Colombia' }, { value: 'pe', label: 'Perú' },
-  { value: 'ec', label: 'Ecuador' }, { value: 've', label: 'Venezuela' },
-  { value: 'py', label: 'Paraguay' }, { value: 'uy', label: 'Uruguay' },
-  { value: 'bo', label: 'Bolivia' }, { value: 'cr', label: 'Costa Rica' },
-  { value: 'pa', label: 'Panamá' }, { value: 'hn', label: 'Honduras' },
-  { value: 'ni', label: 'Nicaragua' }, { value: 'do', label: 'Rep. Dominicana' },
-  { value: 'cu', label: 'Cuba' }, { value: 'pr', label: 'Puerto Rico' },
-  { value: 'es', label: 'España' }, { value: 'fr', label: 'Francia' },
-  { value: 'de', label: 'Alemania' }, { value: 'it', label: 'Italia' },
-];
-
-export const ConstrainedHeightExample = () => {
-    const [value, setValue] = useState('');
-    return (
-        <Box sx={{ width: 300 }}>
-            <Select
-                label="Opciones (Altura Limitada)"
-                options={optionsWithManyItems}
-                value={value}
-                onChange={(val) => setValue(val as string)}
-                maxHeight={150}
-            />
-            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>
-        </Box>
-    );
-};
-`;
-
-export const ConstrainedWidthDefinition = `
-import React, { useState } from 'react';
-import { Select } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
-import { Box, Typography } from '@mui/material';
-
-const basicOptions = [
-    { value: '10', label: '10' },
-    { value: '25', label: '25' },
-];
-const groupedOptions = [
-    { value: 'gt', label: 'Guatemala', group: 'Centroamérica' },
-    { value: 'sv', label: 'El Salvador', group: 'Centroamérica' },
-];
-
-export const ConstrainedWidthExample = () => {
-    const [value, setValue] = useState('');
-    return (
-        <Box sx={{ width: 200 }}>
-            <Select
-                label="Opciones (Ancho Limitado)"
-                options={basicOptions.concat(groupedOptions)}
-                value={value}
-                onChange={(val) => setValue(val as string)}
-                maxWidth={100}
-            />
-            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>
-        </Box>
-    );
-};
-`;
-
-export const AllFeaturesCombinedDefinition = `
-import React, { useState } from 'react';
-import { Select, Option } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
-import { Avatar, Box, Typography, Chip } from '@mui/material';
-
-const allOptions = [
-    { value: 'gt', label: 'Guatemala', group: 'Centroamérica' },
-    { value: 'admin', label: 'Administrador', img: 'https://placehold.co/40x40?text=A' },
-    { value: 'PENDING', label: 'Pendiente' },
-    { value: 'ca', label: 'Canadá', group: 'Norteamérica' },
-    { value: 'user', label: 'Usuario', img: 'https://placehold.co/40x40?text=U' },
-    { value: 'COMPLETED', label: 'Completado' },
-];
-
-export const AllFeaturesCombinedExample = () => {
-    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={allOptions}
-                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>
-    );
-};
-`;
-
-export const EmptyOptionsDefinition = `
-import React, { useState } from 'react';
-import { Select } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
-import { Box, Typography } from '@mui/material';
-
-export const EmptyOptionsExample = () => {
-    const [value, setValue] = useState(null);
-    return (
-        <Box sx={{ width: 300 }}>
-            <Select
-                label="Seleccionar (Vacío)"
-                options={[]}
-                value={value}
-                onChange={setValue}
-                placeholder="No hay opciones disponibles"
-            />
-            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value || 'Ninguno'}</Typography>
-        </Box>
-    );
-};
-`;
-
-export const SelectWithManyOptionsDefinition = `
-import React, { useState } from 'react';
-import { Select } from './Select'; // Asumiendo que Select.tsx está en el mismo directorio
-import { Box, Typography } from '@mui/material';
-
-const manyOptions = Array.from({ length: 50 }, (_, i) => ({
-    value: \`option-\${i}\`,
-    label: \`Opción \${i + 1}\`,
-    group: i < 25 ? 'Grupo A' : 'Grupo B',
-}));
-
-export const SelectWithManyOptionsExample = () => {
-    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>
-    );
-};
-`;
-
-export const LabelPositionFloatingDefinition = `
-import React, { useState } from 'react';
-import { Select } from './Select';
-import { Box, Typography } from '@mui/material';
-
-const basicOptions = [
-    { value: '10', label: '10' },
-    { value: '25', label: '25' },
-    { value: '50', label: '50' },
-    { value: '100', label: '100' },
-];
-
-export const LabelPositionFloatingExample = () => {
-    const [value, setValue] = useState('');
-    return (
-        <Box sx={{ width: 300 }}>
-            <Select
-                label="Label flotante (MUI nativo)"
-                options={basicOptions}
-                value={value}
-                onChange={(val) => setValue(val as string)}
-                labelPosition="floating"
-            />
-            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value || 'Ninguno'}</Typography>
-        </Box>
-    );
-};
-`;
-
-export const CustomBorderRadiusDefinition = `
-import React, { useState } from 'react';
-import { Select } from './Select';
-import { Box } from '@mui/material';
-
-const basicOptions = [
-    { value: '10', label: '10' },
-    { value: '25', label: '25' },
-    { value: '50', label: '50' },
-    { value: '100', label: '100' },
-];
-
-export const CustomBorderRadiusExample = () => {
-    const [valueA, setValueA] = useState('25');
-    const [valueB, setValueB] = useState('25');
-    const [valueC, setValueC] = useState('25');
-    return (
-        <Box sx={{ width: 300, display: 'flex', flexDirection: 'column', gap: 2 }}>
-            <Select
-                label="Sin border radius"
-                options={basicOptions}
-                value={valueA}
-                onChange={(val) => setValueA(val as string)}
-                borderRadius={0}
-            />
-            <Select
-                label="Border radius estándar"
-                options={basicOptions}
-                value={valueB}
-                onChange={(val) => setValueB(val as string)}
-                borderRadius={10}
-            />
-            <Select
-                label="Pill-shaped"
-                options={basicOptions}
-                value={valueC}
-                onChange={(val) => setValueC(val as string)}
-                borderRadius={999}
-            />
-        </Box>
-    );
-};
-`;
-
-export const CustomStylingDefinition = `
-import React, { useState } from 'react';
-import { Select } from './Select';
-import { Box, Typography } from '@mui/material';
-
-const userOptions = [
-    { 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' },
-];
-
-export const CustomStylingExample = () => {
-    const [value, setValue] = useState<string[]>(['admin']);
-    return (
-        <Box sx={{ width: 360 }}>
-            <Select
-                label="Select con estilos personalizados"
-                options={userOptions}
-                multiple
-                value={value}
-                onChange={(val) => setValue(val as string[])}
-                placeholder="Selecciona usuarios"
-                sx={{
-                    '& .MuiInputBase-root': {
-                        backgroundColor: 'action.hover',
-                    },
-                    '& .MuiOutlinedInput-notchedOutline': {
-                        borderColor: 'primary.main',
-                        borderWidth: '2px',
-                    },
-                    '&:hover .MuiOutlinedInput-notchedOutline': {
-                        borderColor: 'primary.dark',
-                    },
-                }}
-            />
-            <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>
-        </Box>
-    );
-};
-`;
-
-export const AsyncSelectDefinition = `
-import React, { useState } from 'react';
-import { Select } from './Select';
-import { Box, Typography } from '@mui/material';
-
-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' },
-];
-
-// Simulate an API call
-const simulatedLoadOptions = (inputValue: string): Promise<any[]> => {
-    return new Promise((resolve) => {
-        setTimeout(() => {
-            const filtered = mockAsyncOptions.filter(option =>
-                option.label.toLowerCase().includes(inputValue.toLowerCase())
-            );
-            resolve(filtered);
-        }, 800); // Simulate network delay
-    });
-};
-
-export const AsyncSelectExample = () => {
-    const [value, setValue] = useState('');
-    return (
-        <Box sx={{ width: 300 }}>
-            <Select
-                label="Buscar Frutas"
-                loadOptions={simulatedLoadOptions}
-                value={value}
-                onChange={(val) => setValue(val as string)}
-                placeholder="Escribe para buscar..."
-                loadingMessage="Buscando frutas..."
-                noOptionsMessage="No se encontraron frutas."
-            />
-            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>
-        </Box>
-    );
-};
-`;

package/src/components/Select/Select.helpers.ts

@@ -1,71 +0,0 @@
-import type { SelectOption } from './Select';
-
-/**
- * Filtra opciones por `label` (case-insensitive). Si `search` es vacío,
- * devuelve el array completo. Solo se usa en modo no-async.
- */
-export const filterOptionsByLabel = (
-  options: SelectOption[],
-  search: string,
-): SelectOption[] => {
-  if (!search) return options;
-  const needle = search.toLowerCase();
-  return options.filter((opt) => opt.label.toLowerCase().includes(needle));
-};
-
-/**
- * Agrupa opciones por la propiedad `group`. Las opciones sin group caen
- * bajo la key especial `__default`. Devuelve un Record para iterar en orden
- * de inserción con Object.entries.
- */
-export const groupOptions = (
-  options: SelectOption[],
-): Record<string, SelectOption[]> => {
-  const groups: Record<string, SelectOption[]> = {};
-  options.forEach((opt) => {
-    const group = opt.group || '__default';
-    if (!groups[group]) groups[group] = [];
-    groups[group].push(opt);
-  });
-  return groups;
-};
-
-/**
- * Determina si un conjunto de grupos está efectivamente vacío
- * (no hay grupos o solo existe `__default` sin items).
- */
-export const isGroupedOptionsEmpty = (
-  groups: Record<string, SelectOption[]>,
-): boolean => {
-  const keys = Object.keys(groups);
-  if (keys.length === 0) return true;
-  if (keys.length === 1 && groups['__default'] && groups['__default'].length === 0) {
-    return true;
-  }
-  return false;
-};
-
-/**
- * Normaliza el valor actual al shape que espera el MUI Select:
- * - multiple: siempre array (aunque esté vacío).
- * - single:   string vacío si null/undefined.
- */
-export const normalizeSelectValue = <T>(
-  value: T | T[] | null | undefined,
-  multiple: boolean,
-): T | T[] | '' => {
-  if (multiple) return (value ?? []) as T[];
-  return (value ?? '') as T | '';
-};
-
-/**
- * Evalúa si el valor actual está vacío (para decidir shrink del label
- * y visibilidad del placeholder).
- */
-export const isSelectValueEmpty = (
-  normalizedValue: unknown,
-  multiple: boolean,
-): boolean => {
-  if (multiple) return Array.isArray(normalizedValue) && normalizedValue.length === 0;
-  return normalizedValue === '' || normalizedValue === null || normalizedValue === undefined;
-};