@soyfri/shared-library 2.0.0-beta.3 → 2.0.0-beta.4

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

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

@@ -0,0 +1,71 @@
+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;
+};