@soyfri/shared-library 2.0.0-beta.20 → 2.0.0-beta.22

package/src/components/Select/Select.tsx

@@ -1,327 +0,0 @@
-import {
-  Children,
-  isValidElement,
-  useMemo,
-  useState,
-  type ReactElement,
-  type ReactNode,
-} from 'react';
-import {
-  FormControl,
-  FormHelperText,
-  InputLabel,
-  ListSubheader,
-  OutlinedInput,
-  Select as MuiSelect,
-  Typography,
-  type SelectChangeEvent,
-  type SelectProps as MuiSelectProps,
-} from '@mui/material';
-import { useTheme } from '@mui/material/styles';
-import { Controller, type Control, type RegisterOptions } from 'react-hook-form';
-
-import { buildSelectSx } from './Select.sx';
-import { resolvePreset } from '../_shared/resolvePreset';
-import {
-  groupOptions,
-  isSelectValueEmpty,
-  normalizeSelectValue,
-} from './Select.helpers';
-import { renderSelectMenuItem } from './_parts/SelectMenuItem';
-
-// ── Tipos de dominio ─────────────────────────────────────────────────────
-export interface SelectOption {
-  value: string | number;
-  label: string;
-  img?: string;
-  disabled?: boolean;
-  group?: string;
-  [key: string]: any;
-}
-
-export type LabelPosition = 'outside' | 'floating';
-export type SelectSize = 'small' | 'medium';
-
-// ── Render slots ─────────────────────────────────────────────────────────
-export type RenderOptionItem = (item: SelectOption) => ReactNode;
-
-// ── Sub-componente declarativo <Option> ──────────────────────────────────
-export interface OptionProps {
-  children: RenderOptionItem;
-}
-
-// ── Props base ───────────────────────────────────────────────────────────
-export interface BaseSelectProps<
-  TValue extends SelectOption['value'] = SelectOption['value'],
-> {
-  label?: string;
-  options?: SelectOption[];
-  defaultValue?: TValue;
-  size?: SelectSize;
-  placeholder?: string;
-  children?: ReactElement<{ children: RenderOptionItem }>;
-  maxHeight?: number | string;
-  maxWidth?: number | string;
-  disabled?: boolean;
-  error?: boolean;
-  helperText?: string;
-  /** Border radius del input (px o string CSS). Default: 10 */
-  borderRadius?: number | string;
-  /**
-   * Posición del label.
-   * - "outside" (default): label arriba del input, sin animación.
-   * - "floating": label clásico de MUI (flota dentro del notched outline).
-   */
-  labelPosition?: LabelPosition;
-  /**
-   * Nombre del preset de estilo registrado en `theme.styles.Select`.
-   * - `"default"` (o ausente) = estilo built-in del paquete.
-   * - Cualquier otro string = mergea el preset encima del estilo built-in.
-   */
-  preset?: string;
-  sx?: MuiSelectProps['sx'];
-  className?: string;
-}
-
-// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────
-export interface RHFSelectProps<
-  TValue extends SelectOption['value'] = SelectOption['value'],
-> extends BaseSelectProps<TValue> {
-  name: string;
-  // `any` plano (no `Control<any>`): RHF tipa `Control<T>` con generics en
-  // posiciones tanto contravariantes como covariantes (ej. `_subjects.state`).
-  // Cuando el componente tiene generics propios (como `TValue` acá), TS se
-  // confunde narroweando el discriminated union y `Control<any>` no logra
-  // absorber `Control<MyForm>` en la comparación estructural profunda.
-  // El `any` plano elimina ese ruido. RHF adentro sigue teniendo sus tipos
-  // fuertes — solo degradamos la superficie del prop del Select.
-  control: any;
-  validation?: RegisterOptions;
-  /**
-   * Side-effect que corre después de que RHF actualiza el form state.
-   * Útil para cascadas entre campos (ej. reset de municipio al cambiar
-   * departamento). NO reemplaza al handler de RHF.
-   */
-  onValueChange?: (value: TValue) => void;
-  value?: never;
-  onChange?: never;
-}
-
-export interface StandardSelectProps<
-  TValue extends SelectOption['value'] = SelectOption['value'],
-> extends BaseSelectProps<TValue> {
-  name?: string;
-  control?: never;
-  validation?: never;
-  value: TValue;
-  onChange: (val: TValue) => void;
-}
-
-// ── API pública final ────────────────────────────────────────────────────
-export type SelectProps<
-  TValue extends SelectOption['value'] = SelectOption['value'],
-> = RHFSelectProps<TValue> | StandardSelectProps<TValue>;
-
-// ── Sub-componente declarativo <Option> ──────────────────────────────────
-export function Option(_props: OptionProps) {
-  return null;
-}
-Option.displayName = 'Option';
-
-// ── Componente ───────────────────────────────────────────────────────────
-export function Select<
-  TValue extends SelectOption['value'] = SelectOption['value'],
->(props: SelectProps<TValue>) {
-  const {
-    label,
-    options = [],
-    defaultValue,
-    size = 'small',
-    placeholder,
-    children,
-    maxHeight = 300,
-    maxWidth,
-    disabled = false,
-    error = false,
-    helperText,
-    borderRadius = 10,
-    labelPosition = 'outside',
-    preset,
-    sx,
-    className,
-    // Separamos estos aunque no se usen directamente acá — evita que lleguen
-    // al DOM del MuiSelect via `{...rest}` y generen warnings de React.
-    name: _nameIgnored,
-    control: _controlIgnored,
-    validation: _validationIgnored,
-    value: _valueIgnored,
-    onChange: _onChangeIgnored,
-    ...rest
-  } = props as StandardSelectProps<TValue> & {
-    name?: string;
-    control?: Control<any>;
-    validation?: RegisterOptions;
-  };
-
-  const theme = useTheme();
-  const presetSx = resolvePreset('Select', preset, theme);
-
-  const isRHFMode = 'control' in props && (props as RHFSelectProps<TValue>).control !== undefined;
-
-  // Custom render opcional vía <Option>{item => ...}</Option>
-  const customRender: RenderOptionItem | null = useMemo(() => {
-    if (Children.count(children) === 1) {
-      const child = Children.only(children);
-      if (isValidElement(child) && (child.type as any)?.displayName === 'Option') {
-        return (child.props as OptionProps).children;
-      }
-    }
-    return null;
-  }, [children]);
-
-  // Focus/open tracking para el comportamiento del label "outside".
-  const [isOpen, setIsOpen] = useState(false);
-  const [isFocused, setIsFocused] = useState(false);
-
-  const groupedOptions = useMemo(() => groupOptions(options), [options]);
-
-  // Items del menú (grupos + opciones). Un solo memoizado — sin search/async.
-  const buildMenuItems = (currentValue: TValue | '') => {
-    const items: ReactNode[] = [];
-    Object.entries(groupedOptions).forEach(([group, opts]) => {
-      if (group !== '__default') {
-        items.push(
-          <ListSubheader key={group} disableSticky>
-            {group}
-          </ListSubheader>,
-        );
-      }
-      opts.forEach((opt) => {
-        const selected = currentValue === opt.value;
-        items.push(
-          renderSelectMenuItem({
-            option: opt,
-            selected,
-            customRender,
-          }),
-        );
-      });
-    });
-    return items;
-  };
-
-  const mergedSx = [
-    ...(presetSx ? [presetSx] : [buildSelectSx(borderRadius, labelPosition)]),
-    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
-  ];
-
-  // Render base (común a RHF y controlled)
-  const renderSelect = (
-    selectValue: TValue | null | undefined,
-    selectOnChange: (event: SelectChangeEvent<TValue>) => void,
-    onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void,
-    inputRef?: React.Ref<HTMLInputElement>,
-    rhfError?: boolean,
-    rhfHelperText?: string,
-  ) => {
-    const finalError = !!rhfError || !!error;
-    const finalHelperText = rhfHelperText ?? helperText;
-
-    const inputElement =
-      labelPosition === 'floating' ? (
-        <OutlinedInput label={label} />
-      ) : (
-        <OutlinedInput />
-      );
-
-    const normalizedValue = normalizeSelectValue(selectValue);
-    const isEmpty = isSelectValueEmpty(normalizedValue);
-
-    // Shrink cuando hay valor, foco, o dropdown abierto.
-    const shouldShrink = !isEmpty || isFocused || isOpen;
-    // Placeholder solo cuando el label ya subió.
-    const shouldDisplayPlaceholder =
-      isEmpty && (isFocused || isOpen) && !!placeholder;
-
-    return (
-      <FormControl
-        fullWidth
-        size={size}
-        error={finalError}
-        disabled={disabled}
-        className={className}
-        sx={mergedSx}
-      >
-        {label && <InputLabel shrink={shouldShrink}>{label}</InputLabel>}
-        <MuiSelect<TValue>
-          value={normalizedValue as TValue}
-          onChange={selectOnChange}
-          onBlur={(e) => {
-            setIsFocused(false);
-            onBlur?.(e);
-          }}
-          onFocus={() => setIsFocused(true)}
-          onOpen={() => setIsOpen(true)}
-          onClose={() => setIsOpen(false)}
-          renderValue={(selected) => {
-            if (isSelectValueEmpty(selected)) {
-              return (
-                <Typography sx={{ color: 'text.disabled' }}>
-                  {placeholder ?? ''}
-                </Typography>
-              );
-            }
-            const item = options.find((opt) => opt.value === selected);
-            return item?.label ?? String(selected);
-          }}
-          displayEmpty={shouldDisplayPlaceholder}
-          input={inputElement}
-          disabled={disabled}
-          MenuProps={{
-            PaperProps: {
-              style: { maxHeight, maxWidth },
-            },
-          }}
-          inputRef={inputRef}
-          {...(rest as any)}
-        >
-          {buildMenuItems(normalizedValue as TValue | '')}
-        </MuiSelect>
-        {finalHelperText && <FormHelperText>{finalHelperText}</FormHelperText>}
-      </FormControl>
-    );
-  };
-
-  // ── RHF mode ──────────────────────────────────────────────────────────
-  if (isRHFMode) {
-    const { name, control, validation, onValueChange } = props as RHFSelectProps<TValue>;
-    return (
-      <Controller
-        name={name}
-        control={control}
-        rules={validation}
-        defaultValue={defaultValue}
-        render={({ field, fieldState: { error: fieldError } }) =>
-          renderSelect(
-            field.value ?? null,
-            (e) => {
-              const next = e.target.value as TValue;
-              field.onChange(next);
-              onValueChange?.(next);
-            },
-            field.onBlur,
-            field.ref,
-            !!fieldError,
-            fieldError?.message,
-          )
-        }
-      />
-    );
-  }
-
-  // ── Controlled mode ───────────────────────────────────────────────────
-  const { value, onChange } = props as StandardSelectProps<TValue>;
-  return renderSelect(value, (e) => onChange(e.target.value as TValue));
-}
-
-export default Select;

package/src/components/Select/_parts/SelectMenuItem.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { ListItemIcon, MenuItem } from '@mui/material';
-import CheckIcon from '@mui/icons-material/Check';
-
-import type { SelectOption, RenderOptionItem } from '../Select';
-
-interface RenderSelectMenuItemArgs {
-  option: SelectOption;
-  selected: boolean;
-  customRender?: RenderOptionItem | null;
-}
-
-/**
- * Render helper (no componente) que devuelve un <MenuItem> listo para
- * colocarse como hijo directo del <MuiSelect>. Se implementa como función
- * y no como componente porque MUI Select inspecciona `props.value` de sus
- * children para resolver la selección, y envolverlo en un componente extra
- * rompe esa detección.
- *
- * Incluye el icono de check a la izquierda cuando `selected` es true. Si el
- * consumer pasó un `<Option>{(opt) => ...}</Option>`, usa ese render para el
- * contenido principal; de lo contrario muestra `option.label`.
- */
-export const renderSelectMenuItem = ({
-  option,
-  selected,
-  customRender,
-}: RenderSelectMenuItemArgs): React.ReactElement => (
-  <MenuItem
-    key={String(option.value)}
-    value={option.value}
-    disabled={option.disabled}
-    selected={selected}
-  >
-    <ListItemIcon sx={{ minWidth: 32 }}>
-      {selected && <CheckIcon color="success" fontSize="small" />}
-    </ListItemIcon>
-    {customRender ? customRender(option) : option.label}
-  </MenuItem>
-);

package/src/components/Select/_parts/SelectValue.tsx

@@ -1,95 +0,0 @@
-import { Avatar, Box, Chip, Typography } from '@mui/material';
-import ClearIcon from '@mui/icons-material/Clear';
-
-import type {
-  SelectOption,
-  RenderChipLabel,
-  ChipVariant,
-} from '../Select';
-
-interface SelectValueProps<TValue extends SelectOption['value']> {
-  selected: TValue | TValue[] | null | undefined;
-  options: SelectOption[];
-  multiple: boolean;
-  placeholder?: string;
-  maxChipsToShow: number;
-  chipVariant: ChipVariant;
-  renderChipLabel?: RenderChipLabel;
-  /** Solo relevante en modo multiple. Recibe el nuevo array de valores. */
-  onDeleteChip?: (nextValues: TValue[]) => void;
-  /** Array de valores actuales (para componer el nuevo array al borrar chips). */
-  currentValues?: TValue[];
-}
-
-/**
- * Render del valor seleccionado del Select.
- * - single:   texto (label) o lo que devuelva `renderChipLabel`.
- * - multiple: chips con delete. Trunca después de `maxChipsToShow` mostrando "+N más".
- * - empty:    placeholder en color disabled.
- */
-export function SelectValue<TValue extends SelectOption['value']>(
-  props: SelectValueProps<TValue>,
-) {
-  const {
-    selected,
-    options,
-    multiple,
-    placeholder,
-    maxChipsToShow,
-    chipVariant,
-    renderChipLabel,
-    onDeleteChip,
-    currentValues,
-  } = props;
-
-  const isEmpty =
-    !selected || (Array.isArray(selected) && selected.length === 0);
-
-  if (isEmpty) {
-    return (
-      <Typography sx={{ color: 'text.disabled' }}>{placeholder || ''}</Typography>
-    );
-  }
-
-  if (!multiple) {
-    const item = options.find((opt) => opt.value === selected);
-    if (renderChipLabel && item) return <>{renderChipLabel(item)}</>;
-    return <>{item?.label ?? String(selected)}</>;
-  }
-
-  const selectedValuesArray = selected as TValue[];
-  const displayedChips = selectedValuesArray.slice(0, maxChipsToShow);
-  const hiddenChipsCount = selectedValuesArray.length - maxChipsToShow;
-
-  const handleDelete = (chipValue: TValue) => {
-    if (!onDeleteChip || !currentValues) return;
-    onDeleteChip(currentValues.filter((v) => v !== chipValue));
-  };
-
-  return (
-    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
-      {displayedChips.map((val) => {
-        const item = options.find((o) => o.value === val);
-        if (!item) return null;
-
-        return (
-          <Chip
-            variant={chipVariant}
-            color="primary"
-            size="small"
-            key={String(val)}
-            label={renderChipLabel ? renderChipLabel(item) : item.label}
-            avatar={item.img ? <Avatar src={item.img} /> : undefined}
-            onDelete={() => handleDelete(val)}
-            deleteIcon={<ClearIcon fontSize="small" />}
-          />
-        );
-      })}
-      {hiddenChipsCount > 0 && (
-        <Chip size="small" variant={chipVariant} label={`+${hiddenChipsCount} más`} />
-      )}
-    </Box>
-  );
-}
-
-export default SelectValue;

package/src/components/Select/index.ts

@@ -1,12 +0,0 @@
-export { Select, Option, default } from './Select';
-export type {
-  SelectProps,
-  SelectOption,
-  OptionProps,
-  BaseSelectProps,
-  RHFSelectProps,
-  StandardSelectProps,
-  RenderOptionItem,
-  LabelPosition,
-  SelectSize,
-} 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) : stat;
-  };
-
-  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 variant="h6" 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 @@
-export { Stat, default } from './Stat';
-export type { StatProps, StatChip } from './Stat';