@soyfri/shared-library 1.5.0-beta.4 → 1.5.0

package/src/components/Select/Select.tsx

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

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

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

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

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

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