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

package/src/components/Select/Select.types.ts

@@ -0,0 +1,15 @@
+// Re-export barrel para compatibilidad con imports antiguos.
+// Los tipos ahora viven dentro de Select.tsx.
+export type {
+  SelectOption,
+  LabelPosition,
+  ChipVariant,
+  SelectSize,
+  RenderOptionItem,
+  RenderChipLabel,
+  OptionProps,
+  BaseSelectProps,
+  RHFSelectProps,
+  StandardSelectProps,
+  SelectProps,
+} from './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/SelectSearchHeader.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { ListSubheader, TextField } from '@mui/material';
+
+interface SelectSearchHeaderProps {
+  value: string;
+  onChange: (next: string) => void;
+  placeholder?: string;
+  inputRef?: React.Ref<HTMLInputElement>;
+}
+
+/**
+ * Header sticky del menu del Select que contiene el input de búsqueda.
+ * Se usa cuando `filterable` es true o cuando el Select opera en modo async.
+ * Detiene la propagación de click/keydown para que el menu no se cierre ni
+ * intercepte las teclas al tipear.
+ */
+export const SelectSearchHeader: React.FC<SelectSearchHeaderProps> = ({
+  value,
+  onChange,
+  placeholder = 'Buscar...',
+  inputRef,
+}) => {
+  return (
+    <ListSubheader
+      sx={{
+        px: 2,
+        pt: 1,
+        pb: 1,
+        backgroundColor: 'background.paper',
+        zIndex: 1,
+        position: 'sticky',
+        top: 0,
+      }}
+    >
+      <TextField
+        inputRef={inputRef}
+        placeholder={placeholder}
+        variant="standard"
+        size="small"
+        fullWidth
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        slotProps={{ htmlInput: { autoFocus: true } }}
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={(e) => e.stopPropagation()}
+      />
+    </ListSubheader>
+  );
+};
+
+export default SelectSearchHeader;

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

@@ -0,0 +1,96 @@
+import React from 'react';
+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 +1,14 @@
-export { default as Select, Option } from './Select'
+export { Select, Option, default } from './Select';
+export type {
+  SelectProps,
+  SelectOption,
+  OptionProps,
+  BaseSelectProps,
+  RHFSelectProps,
+  StandardSelectProps,
+  RenderOptionItem,
+  RenderChipLabel,
+  LabelPosition,
+  ChipVariant,
+  SelectSize,
+} from './Select.types';

package/src/components/Stepper/Stepper.tsx

@@ -1,12 +1,18 @@
 import React, { ReactElement } from "react";
 import { Stepper as MuiStepper, Step as MuiStep, StepLabel as MuiStepLabel, Box } from "@mui/material";
 import { StepProps } from "./Step";
+import { useWizard } from "../../hooks/Wizard";
 
 interface MyStepperProps {
   children: ReactElement<StepProps>[];
   orientation?: "horizontal" | "vertical";
   sx?: object;
   alternateLabel?: boolean;
+  /**
+   * Índice 0-based del paso activo. Si no se provee, el Stepper intenta
+   * leerlo del `WizardContext` (si está dentro de un `<WizardProvider>`).
+   * Si tampoco hay provider, el default es 0.
+   */
   currentStep?: number;
 }
 
@@ -16,8 +22,18 @@ export const Stepper: React.FC<MyStepperProps> = ({
   alternateLabel = false,
 
   sx,
-  currentStep = 0,
+  currentStep: currentStepProp,
 }) => {
+  // Lee el paso desde el WizardContext cuando el consumer no lo pasa como prop.
+  // Si el Stepper NO está dentro de un WizardProvider, `useWizard()` devuelve
+  // el valor default (currentStep=0, totalSteps=0), así que no rompe nada.
+  const wizard = useWizard();
+  const currentStep =
+    currentStepProp !== undefined
+      ? currentStepProp
+      : wizard.totalSteps > 0
+        ? wizard.currentStep
+        : 0;
 
   return (
     <Box sx={sx}>

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,9 +1,21 @@
-import React from 'react';
+import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import Tooltip from './Tooltip'; // Asegúrate que la ruta sea correcta
 import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
 import Stack from '@mui/material/Stack';
+import { Input } from '../Input/Input';
+
+// Helper controlado para envolver nuestro Input propio con estado local
+const TooltipNameInput: React.FC = () => {
+  const [value, setValue] = useState<string | number>('');
+  return (
+    <Input
+      label="Nombre"
+      value={value}
+      onChange={(next) => setValue(next)}
+    />
+  );
+};
 
 // --- Metadatos de la Historia ---
 // Define la configuración global de tu componente en Storybook
@@ -61,7 +73,7 @@ export const AplicadoAElementoDeFormulario: Story = {
   args: {
     text: 'Introduce tu nombre completo y validado.',
     maxWidth: 300,
-    children: <TextField label="Nombre" variant="standard" />,
+    children: <TooltipNameInput />,
   },
 };
 

package/src/components/_shared/formField.sx.ts

@@ -0,0 +1,118 @@
+import type { SxProps, Theme } from '@mui/material/styles';
+
+import {
+  LABEL_COLOR_FILLED,
+  LABEL_COLOR_FOCUSED,
+  LABEL_COLOR_REST,
+  LABEL_FONT_WEIGHT_FILLED,
+  LABEL_MARGIN_TOP,
+  LABEL_SHRINK_TRANSFORM,
+  LABEL_TRANSFORM_ORIGIN,
+  LABEL_TRANSITION,
+} from '../../theme/tokens';
+
+export type LabelPosition = 'outside' | 'floating';
+
+export interface BuildFormFieldSxOptions {
+  borderRadius: number | string;
+  labelPosition: LabelPosition;
+  /**
+   * Si es `true`, los selectores incluyen también la API nueva de MUI X
+   * Pickers (v8): `MuiPickersInputBase-root`, `MuiPickersOutlinedInput-*`.
+   */
+  includePickersApi?: boolean;
+  /**
+   * Selectores/valores extra que se mergean SOLO cuando labelPosition === 'outside'.
+   * Usar para paddings específicos del componente (p.ej. MuiAutocomplete-input).
+   */
+  extraOutsideSx?: Record<string, any>;
+  /**
+   * Selectores/valores extra que se mergean SOLO cuando labelPosition === 'floating'.
+   */
+  extraFloatingSx?: Record<string, any>;
+}
+
+const toRadius = (borderRadius: number | string) =>
+  typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;
+
+/**
+ * Builder del sx compartido por todos los campos de formulario
+ * (Input/Select/Autocomplete/DatePicker/DateTimePicker).
+ *
+ * Produce:
+ * - en modo "floating": sólo el border-radius del outlined input;
+ * - en modo "outside": todo el pack (margen superior, label flotante afuera,
+ *   input base, notched outline oculto, helper text sin margen izquierdo).
+ *
+ * Componentes con paddings o selectores propios pueden inyectarlos vía
+ * `extraOutsideSx` / `extraFloatingSx`.
+ */
+export const buildFormFieldSx = ({
+  borderRadius,
+  labelPosition,
+  includePickersApi = false,
+  extraOutsideSx,
+  extraFloatingSx,
+}: BuildFormFieldSxOptions): SxProps<Theme> => {
+  const radius = toRadius(borderRadius);
+
+  // ── Selectores (alternan según la API de pickers) ────────────────────
+  const outlinedRootSelector = includePickersApi
+    ? '& .MuiOutlinedInput-root, & .MuiPickersOutlinedInput-root'
+    : '& .MuiOutlinedInput-root';
+
+  const inputBaseSelector = includePickersApi
+    ? '& .MuiInputBase-root, & .MuiPickersInputBase-root'
+    : '& .MuiInputBase-root';
+
+  const notchedOutlineSelector = includePickersApi
+    ? '& .MuiOutlinedInput-notchedOutline, & .MuiPickersOutlinedInput-notchedOutline'
+    : '& .MuiOutlinedInput-notchedOutline';
+
+  // ── Floating ─────────────────────────────────────────────────────────
+  if (labelPosition === 'floating') {
+    return {
+      [outlinedRootSelector]: { borderRadius: radius },
+      ...(extraFloatingSx ?? {}),
+    };
+  }
+
+  // ── Outside ──────────────────────────────────────────────────────────
+  return {
+    marginTop: LABEL_MARGIN_TOP,
+
+    '& .MuiInputLabel-root': {
+      color: LABEL_COLOR_REST,
+      transition: LABEL_TRANSITION,
+
+      // Estado shrunk (focused o con valor): flota ARRIBA del input.
+      '&.MuiInputLabel-shrink': {
+        transform: LABEL_SHRINK_TRANSFORM,
+        transformOrigin: LABEL_TRANSFORM_ORIGIN,
+        color: LABEL_COLOR_FILLED,
+        fontWeight: LABEL_FONT_WEIGHT_FILLED,
+      },
+
+      '&.Mui-focused': { color: LABEL_COLOR_FOCUSED },
+    },
+
+    // Input base — centra verticalmente (clásico y, si aplica, pickers).
+    [inputBaseSelector]: {
+      borderRadius: radius,
+      display: 'flex',
+      alignItems: 'center',
+    },
+
+    // El label flota afuera: ocultar legend del notch.
+    [notchedOutlineSelector]: {
+      top: 0,
+      '& legend': { display: 'none' },
+    },
+
+    '& .MuiFormHelperText-root': {
+      marginLeft: 0,
+    },
+
+    ...(extraOutsideSx ?? {}),
+  };
+};

package/src/components/_shared/resolvePreset.ts

@@ -0,0 +1,35 @@
+import type { SxProps, Theme } from '@mui/material/styles';
+
+import type { LibraryComponentName, PresetStyle } from '../../theme/componentStyles';
+
+/**
+ * Nombre del preset built-in del paquete. No se registra en el theme: si un
+ * componente recibe `preset="default"` (o no recibe preset), sólo aplica el
+ * estilo base de fábrica.
+ */
+export const DEFAULT_PRESET_NAME = 'default';
+
+/**
+ * Resuelve el sx de un preset registrado en `theme.styles[componentName]`.
+ *
+ * - Si `presetName` es `"default"` o `undefined`, devuelve `undefined`
+ *   (caller sólo aplicará el estilo base del paquete).
+ * - Si la entrada en el theme es una función `(theme) => sx`, se ejecuta.
+ * - Si la entrada no existe, devuelve `undefined` silenciosamente (no se
+ *   rompe el componente — la responsabilidad de registrarlo es del consumer).
+ */
+export function resolvePreset(
+  componentName: LibraryComponentName,
+  presetName: string | undefined,
+  theme: Theme,
+): SxProps<Theme> | undefined {
+  if (!presetName || presetName === DEFAULT_PRESET_NAME) return undefined;
+
+  const componentPresets = theme.styles?.[componentName];
+  if (!componentPresets) return undefined;
+
+  const entry: PresetStyle | undefined = componentPresets[presetName];
+  if (!entry) return undefined;
+
+  return typeof entry === 'function' ? entry(theme) : entry;
+}