@soyfri/shared-library 2.0.0-beta.16 → 2.0.0-beta.18

package/src/components/Select/Select.tsx

@@ -0,0 +1,328 @@
+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 = [
+    buildSelectSx(borderRadius, labelPosition, !!presetSx),
+    ...(presetSx ? [presetSx] : []),
+    ...(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

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

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

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

@@ -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) : 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

@@ -0,0 +1,2 @@
+export { Stat, default } from './Stat';
+export type { StatProps, StatChip } from './Stat';