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

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

@@ -1,488 +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 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>
-    );
-};
-`;