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

package/src/components/Select/Select.tsx

@@ -1,468 +0,0 @@
-import React, { ReactElement, useMemo, useState, Children, isValidElement, useEffect, useRef } from 'react';
-import {
-    FormControl,
-    InputLabel,
-    MenuItem,
-    Select as MuiSelect,
-    Chip,
-    Avatar,
-    Box,
-    Typography,
-    OutlinedInput,
-    TextField,
-    ListSubheader,
-    CircularProgress,
-    ListItemIcon,
-    SelectChangeEvent,
-} from '@mui/material';
-import { styled } from '@mui/system';
-import ClearIcon from '@mui/icons-material/Clear';
-import CheckIcon from '@mui/icons-material/Check';
-import { Controller, Control, RegisterOptions } from 'react-hook-form';
-
-export interface SelectOption {
-    value: string | number;
-    label: string;
-    img?: string;
-    disabled?: boolean;
-    group?: string;
-    [key: string]: any;
-}
-
-type RenderOptionItem = (item: SelectOption) => React.ReactNode;
-type RenderChipLabel = (item: SelectOption) => React.ReactNode;
-
-// --- Definición de Props con Union Type ---
-
-// Props comunes para ambos modos
-interface BaseSelectProps<TValue extends SelectOption['value'] = SelectOption['value']> {
-    label?: string;
-    options?: SelectOption[];
-    defaultValue?: TValue | TValue[];
-    size?: 'small' | 'medium';
-    multiple?: boolean;
-    filterable?: boolean;
-    placeholder?: string;
-    children?: ReactElement<{ children: RenderOptionItem }>;
-    maxHeight?: number | string;
-    maxWidth?: number | string;
-    maxChipsToShow?: number;
-    renderChipLabel?: RenderChipLabel;
-    chipVariant?: 'outlined' | 'filled';
-    loadOptions?: (inputValue: string) => Promise<SelectOption[]>;
-    loadingMessage?: React.ReactNode;
-    noOptionsMessage?: React.ReactNode;
-    debounceTimeout?: number;
-    disabled?: boolean;
-    error?: boolean;
-    helperText?: string;
-}
-
-// Props para el modo React Hook Form
-interface RHFSelectProps<TValue extends SelectOption['value'] = SelectOption['value']> extends BaseSelectProps<TValue> {
-    name: string;
-    control: Control<any>;
-    validation?: RegisterOptions;
-    value?: TValue | TValue[];
-    onChange?: (val: TValue | TValue[]) => void;
-}
-
-// Props para el modo controlado estándar
-interface StandardSelectProps<TValue extends SelectOption['value'] = SelectOption['value']> extends BaseSelectProps<TValue> {
-    name?: string;
-    control?: never;
-    validation?: never;
-    value: TValue | TValue[];
-    onChange: (val: TValue | TValue[]) => void;
-}
-
-export type SelectProps<TValue extends SelectOption['value'] = SelectOption['value']> = RHFSelectProps<TValue> | StandardSelectProps<TValue>;
-
-export interface OptionProps {
-    children: RenderOptionItem;
-}
-
-export function Option(_props: OptionProps) {
-    return null;
-}
-Option.displayName = 'Option';
-
-const StyledSelect = styled(MuiSelect)(({ theme }) => ({
-  '& .MuiInputBase-root': {
-    maxHeight: '4px',
-    padding: '8px 10px',
-    borderRadius: '10px',
-    display: 'flex',
-    alignItems: 'center',
-    fontSize: '14px',
-  },
-  '& .MuiSelect-select': {
-    padding: '0 !important',
-    height: '28px !important',
-    display: 'flex',
-    alignItems: 'center',
-    marginLeft: '8px'
-  },
-  '& .MuiOutlinedInput-notchedOutline': {
-    marginBottom: '-4px !important',
-    borderRadius: '10px',
-  },
-  '& .MuiSelect-icon': {
-    top: '50%',
-    transform: 'translateY(-50%)',
-  },
-  '& .MuiOutlinedInput-notchedOutline > legend':{
-    display: 'none',
-  },
-}));
-
-const StyledLabel = styled(InputLabel)(({theme}) =>({
-    '&.MuiInputLabel-root': {
-        top: '50%',
-        transform: 'translate(14px, -50%)',
-    },
-    '&.MuiInputLabel-shrink': {
-        transform: 'translate(1px, -200%) scale(0.75)',
-        fontSize: '16px',
-        '> legend': {
-            display: 'none',
-        }
-    },
-    '&.MuiInputLabel-animated': {
-      '&.MuiInputLabel-shrink': {
-          display: 'block'
-      }
-    }
-}));
-
-const StyledOutlinedInput = styled(OutlinedInput)(({ theme }) => ({
-    '& .MuiInputBase-root': {
-        maxHeight: '34px',
-        padding: '8px 10px',
-        borderRadius: '10px',
-        display: 'flex',
-        alignItems: 'center',
-        fontSize: '14px',
-        ' & > .MuiAvatar-img': {
-            width: '14px',
-            height: '14px',
-        }
-    },
-    '& .MuiInputBase-input': {
-        padding: '0 !important',
-        height: '18px',
-        display: 'flex',
-        alignItems: 'center',
-    },
-    '& .MuiOutlinedInput-notchedOutline': {
-        border: '0.7px solid',
-        borderColor: '#e0e0e0',
-    },
-}));
-
-export function Select<TValue extends SelectOption['value'] = SelectOption['value']>(props: SelectProps<TValue>) {
-    const {
-        label,
-        options = [],
-        value,
-        onChange,
-        defaultValue,
-        size = 'medium',
-        multiple = false,
-        filterable = false,
-        placeholder,
-        children,
-        maxHeight = 300,
-        maxWidth,
-        maxChipsToShow = 3,
-        renderChipLabel,
-        chipVariant = 'outlined',
-        loadOptions,
-        loadingMessage = 'Cargando opciones...',
-        noOptionsMessage = 'No hay opciones',
-        debounceTimeout = 300,
-        disabled = false,
-        error = false,
-        helperText,
-        ...rest
-    } = props;
-
-    const isRHFMode = 'control' in rest && rest.control !== undefined;
-
-    const customRender: RenderOptionItem | null = useMemo(() => {
-        if (React.Children.count(children) === 1) {
-            const child = React.Children.only(children);
-            if (isValidElement(child) && (child.type as any)?.displayName === 'Option') {
-                return (child.props as OptionProps).children;
-            }
-        }
-        return null;
-    }, [children]);
-
-    const [search, setSearch] = useState('');
-    const [asyncOptions, setAsyncOptions] = useState<SelectOption[]>([]);
-    const [loading, setLoading] = useState(false);
-    const debounceTimerRef = useRef<number | null>(null);
-
-    const searchInputRef = useRef<HTMLInputElement>(null);
-
-    const isAsync = typeof loadOptions === 'function';
-    const currentOptions = isAsync ? asyncOptions : options;
-
-    useEffect(() => {
-        if (isAsync) {
-            if (debounceTimerRef.current) {
-                clearTimeout(debounceTimerRef.current);
-            }
-
-            if (search) {
-                setLoading(true);
-                debounceTimerRef.current = window.setTimeout(() => {
-                    loadOptions(search)
-                        .then(loadedOpts => {
-                            setAsyncOptions(loadedOpts);
-                        })
-                        .finally(() => {
-                            setLoading(false);
-                            if (searchInputRef.current) {
-                                searchInputRef.current.focus();
-                            }
-                        });
-                }, debounceTimeout);
-            } else {
-                setAsyncOptions([]);
-                setLoading(false);
-                if (searchInputRef.current) {
-                    searchInputRef.current.focus();
-                }
-            }
-        }
-    }, [search, isAsync, loadOptions, debounceTimeout]);
-
-    const filteredOptions = useMemo(() => {
-        if (isAsync) {
-            return currentOptions;
-        }
-        if (!filterable || !search) return currentOptions;
-        return currentOptions.filter(opt =>
-            opt.label.toLowerCase().includes(search.toLowerCase())
-        );
-    }, [search, filterable, currentOptions, isAsync]);
-
-    const groupedOptions = useMemo(() => {
-        const groups: Record<string, SelectOption[]> = {};
-        filteredOptions.forEach(opt => {
-            const group = opt.group || '__default';
-            if (!groups[group]) groups[group] = [];
-            groups[group].push(opt);
-        });
-        return groups;
-    }, [filteredOptions]);
-
-    const renderValue = (selected: any) => {
-        if (!selected || (Array.isArray(selected) && selected.length === 0)) {
-            return <Typography sx={{ color: 'text.disabled' }}>{placeholder || ''}</Typography>;
-        }
-
-        if (!multiple) {
-            const item = currentOptions.find((opt) => opt.value === selected);
-            return renderChipLabel && item ? renderChipLabel(item) : (item?.label ?? String(selected));
-        }
-
-        const selectedValuesArray = selected as TValue[];
-        const displayedChips = selectedValuesArray.slice(0, maxChipsToShow);
-        const hiddenChipsCount = selectedValuesArray.length - maxChipsToShow;
-
-        return (
-            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
-                {displayedChips.map((val) => {
-                    const item = currentOptions.find((o) => o.value === val);
-                    if (!item) return null;
-
-                    const handleDelete = (chipValue: TValue) => {
-                        const newSelected = (value as TValue[]).filter(v => v !== chipValue);
-                        (onChange as (val: TValue | TValue[]) => void)?.(newSelected);
-                    };
-
-                    return (
-                        <Chip
-                            variant={chipVariant}
-                            color="primary"
-                            key={val}
-                            label={renderChipLabel ? renderChipLabel(item) : item.label}
-                            avatar={item.img ?
-                                <Avatar
-                                    sx={
-                                        {
-                                            '& > .MuiAvatar-root, .MuiChip-avatar': {
-                                                backgroundColor: 'red',
-                                            }
-                                        }
-                                    }
-                                    src={item.img}
-                                /> : undefined}
-                            onDelete={() => handleDelete(val)}
-                            deleteIcon={<ClearIcon sx={{ fontSize: '12px !important' }} />}
-                            sx={
-                                {
-                                    height: '27px',
-                                    marginTop: '1px',
-                                }
-                            }
-                        />
-                    );
-                })}
-                {hiddenChipsCount > 0 && (
-                    <Chip
-                        sx={{
-                            height: '27px',
-                            marginTop: '0px',
-                        }}
-                        label={`+${hiddenChipsCount} más`} variant={chipVariant} />
-                )}
-            </Box>
-        );
-    };
-
-    const menuItems = useMemo(() => {
-        const items: React.ReactNode[] = [];
-
-        if (filterable || isAsync) {
-            items.push(
-                <ListSubheader key="search-header" sx={{ px: 2, pt: 1, pb: 1, backgroundColor: 'background.paper', zIndex: 1, position: 'sticky', top: 0 }}>
-                    <TextField
-                        inputRef={searchInputRef}
-                        placeholder="Buscar..."
-                        variant="standard"
-                        size="small"
-                        fullWidth
-                        value={search}
-                        onChange={(e) => setSearch(e.target.value)}
-                        inputProps={{ autoFocus: true }}
-                        onClick={(e) => e.stopPropagation()}
-                        onKeyDown={(e) => e.stopPropagation()}
-                    />
-                </ListSubheader>
-            );
-        }
-
-        if (loading) {
-            items.push(
-                <MenuItem key="loading-message" disabled>
-                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                        <CircularProgress size={20} />
-                        <Typography>{loadingMessage}</Typography>
-                    </Box>
-                </MenuItem>
-            );
-        } else if (Object.keys(groupedOptions).length === 0 || (Object.keys(groupedOptions).length === 1 && groupedOptions['__default'] && groupedOptions['__default'].length === 0)) {
-            items.push(
-                <MenuItem key="no-options-message" disabled>
-                    <Typography>{noOptionsMessage}</Typography>
-                </MenuItem>
-            );
-        } else {
-            Object.entries(groupedOptions).forEach(([group, opts]) => {
-                if (group !== '__default') {
-                    items.push(
-                        <ListSubheader key={group} disableSticky>{group}</ListSubheader>
-                    );
-                }
-                opts.forEach((opt) => {
-                    const isSelected = multiple
-                        ? (value as TValue[] | undefined)?.includes(opt.value as TValue)
-                        : value === opt.value;
-
-                    items.push(
-                        <MenuItem key={opt.value} value={opt.value} disabled={opt.disabled} selected={isSelected}>
-                            <ListItemIcon sx={{ minWidth: 32 }}>
-                                {isSelected && (
-                                    <CheckIcon sx={{ color: 'green' }} />
-                                )}
-                            </ListItemIcon>
-                            {customRender ? customRender(opt) : opt.label}
-                        </MenuItem>
-                    );
-                });
-            });
-        }
-        return items;
-    }, [groupedOptions, customRender, filterable, isAsync, search, loading, loadingMessage, noOptionsMessage, multiple, value]);
-
-    const showLabel = label && !placeholder;
-
-    // Lógica para manejar el cambio de valor
-    const handleChangeInternal = (event: SelectChangeEvent<any>, rhfOnChange?: (...event: any[]) => void) => {
-        const newValue = event.target.value;
-        if (isRHFMode) {
-            rhfOnChange?.(newValue);
-        } else {
-            (onChange as (val: TValue | TValue[]) => void)?.(newValue);
-        }
-    };
-
-    // Renderizado condicional basado en el modo
-    const isRHFModeRender = 'control' in rest && rest.control !== undefined;
-
-    const renderSelect = (selectValue: any, selectOnChange: any, onBlur?: any, inputRef?: any) => (
-        <FormControl fullWidth size={size} error={error} disabled={disabled}>
-            {showLabel && <StyledLabel>{label}</StyledLabel>}
-            <Box
-                sx={{
-                    width: '100%',
-                    display: 'grid',
-                    marginBottom: '10px',
-                    marginTop: '10px'
-                }}>
-                <StyledSelect
-                    label={label}
-                    value={selectValue ?? (multiple ? [] : '')}
-                    defaultValue={defaultValue}
-                    multiple={multiple}
-                    onChange={selectOnChange}
-                    onBlur={onBlur}
-                    renderValue={renderValue}
-                    displayEmpty
-                    input={<StyledOutlinedInput label={label} />}
-                    disabled={disabled}
-                    MenuProps={{
-                        PaperProps: {
-                            style: {
-                                maxHeight: maxHeight,
-                                maxWidth: maxWidth,
-                            },
-                        },
-                    }}
-                    inputRef={inputRef}
-                    {...rest}
-                >
-                    {menuItems}
-                </StyledSelect>
-                {helperText && <Typography variant="caption" color="error" sx={{ mt: 1 }}>{helperText}</Typography>}
-            </Box>
-        </FormControl>
-    );
-
-    if (isRHFModeRender) {
-        const rhfProps = rest as RHFSelectProps<TValue>;
-        return (
-            <Controller
-                name={rhfProps.name}
-                control={rhfProps.control}
-                rules={rhfProps.validation}
-                render={({ field, fieldState: { error } }) => (
-                    renderSelect(
-                        field.value,
-                        (e: SelectChangeEvent<any>) => handleChangeInternal(e, field.onChange),
-                        field.onBlur,
-                        field.ref
-                    )
-                )}
-            />
-        );
-    } else {
-        return renderSelect(value, (e: SelectChangeEvent<any>) => handleChangeInternal(e));
-    }
-}
-
-export default Select;

package/src/components/Select/index.ts

@@ -1 +0,0 @@
-export { default as Select, Option } from './Select'

package/src/components/Stat/Stat.stories.tsx

@@ -1,85 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Stat, StatChip } from './Stat';
-import { Typography } from '@mui/material';
-import { expect, within } from 'storybook/test';
-
-const meta: Meta<typeof Stat> = {
-    title: 'Components/Stat',
-    component: Stat,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Stat>;
-
-export const Default: Story = {
-    args: {
-        stat: 100,
-        label: 'Total Sales',
-    },
-};
-
-export const Simple: Story = {
-    args: {
-        stat: 75,
-        stat2: 'Last Week',
-        label: 'Completed Orders',
-        simple: true,
-    },
-};
-
-export const Chip: Story = {
-    args: {
-        stat: 42,
-        label: 'New Users',
-        chip: true,
-        chipColor: '#673AB7',
-    },
-};
-
-export const ChipList: Story = {
-    args: {
-        label: 'Status',
-        chipList: true,
-        chips: [
-            { stat: 'Active', chipColor: '#4CAF50' },
-            { stat: 'Pending', chipColor: '#FFC107' },
-            { stat: 'Blocked', chipColor: '#F44336' },
-        ] as StatChip[],
-    },
-};
-
-export const WithCustomDisplay: Story = {
-    args: {
-        stat: 350,
-        label: 'Revenue',
-        chip: true,
-        chipColor: '#2E7D32',
-        statDisplay: (stat: any) => (
-            <Typography variant="h6" fontWeight="bold">
-                ${stat.toLocaleString()}
-            </Typography>
-        ),
-    },
-};
-
-export const aStat: Story = {
-    args: {
-        stat: 42,
-        label: 'New Users',
-        chip: true,
-        chipColor: '#673AB7',
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-
-        const stat = canvas.getByTestId('chip-template-option-outlet');
-        expect(stat).toBeInTheDocument();
-
-        expect(canvas.getByText('42')).toBeInTheDocument();
-
-    }
-}

package/src/components/Stat/Stat.tsx

@@ -1,117 +0,0 @@
-import React, { useMemo } from 'react';
-import { Chip, Stack, Typography, Box } from '@mui/material';
-
-export interface StatChip {
-  stat: any;
-  chipColor: string;
-}
-
-export interface StatProps {
-  stat: any; // Replace 'any' with the actual type of 'stat'
-  stat2?: any; // Replace 'any' with the actual type of'stat2'
-  label: string; // Replace 'any' with the actual type of'label'
-  color?: string;
-  chipColor?: string;
-  chips?: StatChip[]; // Replace 'any' with the actual type of'chips'
-  simple?: boolean;
-  chip?: boolean;
-  chipList?: boolean;
-  children?: React.ReactNode;
-  statDisplay?: (stat: any) => React.ReactNode;
-}
-
-export const Stat: React.FC<StatProps> = ({
-  stat,
-  stat2,
-  label,
-  color = '#1469B8',
-  chipColor = '#1469B8',
-  chips = [],
-  simple = false,
-  chip = false,
-  chipList = false,
-  children,
-  statDisplay,
-}) => {
-  const selectedTemplate = useMemo(() => {
-    if (simple) return 'simple';
-    if (chip) return 'chip';
-    if (chipList) return 'chipList';
-    return 'default';
-  }, [simple, chip, chipList]);
-
-  const renderStatDisplay = () => {
-    return statDisplay ? statDisplay(stat) : <Typography variant="h6">{stat}</Typography>;
-  };
-
-  return (
-    <>
-      {selectedTemplate === 'default' && (
-        <Box className="stat">
-          <Typography variant="h4" data-testid="selection-template-option-outlet">
-            {renderStatDisplay()}
-          </Typography>
-          <Box className="stat__label" display="flex" alignItems="center" gap={1}>
-            <Typography variant="body1">{label}</Typography>
-            <Box
-              width={40}
-              height={4}
-              bgcolor={color}
-              data-testid="stat-border"
-              borderRadius={2}
-            />
-          </Box>
-        </Box>
-      )}
-
-      {selectedTemplate === 'simple' && (
-        <Stack direction="row" spacing={2} alignItems="center">
-          <Typography variant="body1">{label}</Typography>
-          <Typography data-testid="selection-template-option-outlet">
-            {renderStatDisplay()}
-          </Typography>
-          {stat2 && <Typography>{stat2}</Typography>}
-        </Stack>
-      )}
-
-      {selectedTemplate === 'chip' && (
-        <Stack direction="row" spacing={2} alignItems="center">
-          <Typography variant="body1">{label}</Typography>
-          <Chip
-            data-testid="chip-template-option-outlet"
-            label={renderStatDisplay()}
-            sx={{
-              backgroundColor: chipColor,
-              color: '#fff',
-              fontWeight: 'bold',
-            }}
-          />
-        </Stack>
-      )}
-
-      {selectedTemplate === 'chipList' && (
-        <Stack direction="row" spacing={2} alignItems="center">
-          <Typography variant="body1">{label}</Typography>
-          <Stack direction="row" spacing={1}>
-            {chips.map((chip, i) => (
-              <Chip
-                key={i}
-                label={chip.stat}
-                sx={{
-                  backgroundColor: chip.chipColor,
-                  color: '#fff',
-                  fontWeight: 'bold',
-                }}
-              />
-            ))}
-          </Stack>
-        </Stack>
-      )}
-
-      {/* Content projection (similar to ng-content) */}
-      {children}
-    </>
-  );
-};
-
-export default Stat;

package/src/components/Stat/index.ts

@@ -1,2 +0,0 @@
-import '../../styles.css';
-export { default as Stat } from './Stat'