@soyfri/shared-library 2.0.0-beta.10 → 2.0.0-beta.12

package/src/components/Input/Input.stories.tsx

@@ -1,528 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
-import {
-  Box,
-  Typography,
-} from '@mui/material';
-
-// Importa el componente Input (asumiendo que está en el mismo directorio o ruta definida)
-import { Input } from './Input';
-
-// Importa las definiciones de las historias
-import {
-  BasicTextInputDefinition,
-  NumberInputDefinition,
-  EmailInputDefinition,
-  PasswordInputDefinition,
-  InputWithPlaceholderDefinition,
-  InputWithErrorDefinition,
-  DisabledInputDefinition,
-  ReadOnlyInputDefinition,
-  InputVariantsDefinition,
-  InputSizesDefinition,
-  FullWidthInputDefinition,
-  LabelPositionFloatingDefinition,
-  CustomBorderRadiusDefinition,
-  CustomStylingDefinition,
-  MultilineInputDefinition,
-} from './Input.definitions';
-
-// =============================================================================
-// Definición de las meta-propiedades para Storybook
-// =============================================================================
-const meta: Meta<typeof Input> = {
-  title: 'Components/Input',
-  component: Input,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'Un componente `Input` personalizado basado en `TextField` de Material UI, que soporta varios tipos de entrada HTML y propiedades de `TextField`.',
-      },
-    },
-  },
-  argTypes: {
-    label: { control: 'text', description: 'Etiqueta flotante para el campo de entrada.' },
-    value: { control: 'text', description: 'El valor actual del campo de entrada.', type: { name: 'string', required: true } },
-    onChange: { action: 'valueChanged', description: 'Callback que se dispara cuando el valor del campo de entrada cambia.' },
-    type: {
-      control: 'select',
-      options: ['text', 'number', 'email', 'password', 'tel', 'url', 'search', 'date', 'datetime-local', 'month', 'week', 'time', 'color'],
-      description: 'El tipo HTML del campo de entrada (controla el teclado en móviles, etc.).',
-      defaultValue: 'text',
-    },
-    placeholder: { control: 'text', description: 'Texto de marcador de posición cuando el campo está vacío.' },
-    disabled: { control: 'boolean', description: 'Si es verdadero, el campo de entrada estará deshabilitado.' },
-    // readOnly: { control: 'boolean', description: 'Si es verdadero, el campo de entrada estará en modo de solo lectura.' },
-    error: { control: 'boolean', description: 'Si es verdadero, el campo de entrada estará en estado de error.' },
-    helperText: { control: 'text', description: 'Texto auxiliar que se muestra debajo del campo de entrada.' },
-    variant: {
-      control: 'radio',
-      options: ['outlined', 'filled', 'standard'],
-      description: 'La variante de diseño del campo de entrada.',
-      defaultValue: 'outlined',
-    },
-    size: {
-      control: 'radio',
-      options: ['small', 'medium'],
-      description: 'El tamaño del campo de entrada.',
-      defaultValue: 'small',
-    },
-    labelPosition: {
-      control: 'radio',
-      options: ['outside', 'floating'],
-      description: '"outside" (default): label arriba del input. "floating": label clásico de MUI dentro del notched outline.',
-      defaultValue: 'outside',
-    },
-    borderRadius: {
-      control: { type: 'number' },
-      description: 'Border radius del input en px (o string CSS). Default: 10.',
-      defaultValue: 10,
-    },
-    fullWidth: { control: 'boolean', description: 'Si es verdadero, el campo de entrada ocupará todo el ancho disponible.', defaultValue: false },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Input>;
-
-// =============================================================================
-// Historias
-// =============================================================================
-
-export const BasicTextInput: Story = {
-  render: () => {
-    const [value, setValue] = useState('Texto de ejemplo');
-    return (
-      <Box sx={{ width: 300 }}>
-        <Input
-          label="Nombre"
-          value={value}
-          onChange={(value) => setValue(value.toString())}
-        />
-        <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Un campo de entrada de texto básico con una etiqueta."
-      },
-      source: { code: BasicTextInputDefinition.trim() }
-    }
-  }
-};
-
-export const NumberInput: Story = {
-  render: () => {
-    const [value, setValue] = useState(123);
-    return (
-      <Box sx={{ width: 300 }}>
-        <Input
-          label="Cantidad"
-          type="number"
-          value={value.toString()}
-          onChange={(value) => setValue(Number(value))}
-        />
-        <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Un campo de entrada numérico. Permite solo números y controla el teclado numérico en dispositivos móviles."
-      },
-      source: { code: NumberInputDefinition.trim() }
-    }
-  }
-};
-
-export const EmailInput: Story = {
-  render: () => {
-    const [value, setValue] = useState('ejemplo@dominio.com');
-    return (
-      <Box sx={{ width: 300 }}>
-        <Input
-          label="Correo Electrónico"
-          type="email"
-          value={value.toString()}
-          onChange={(value) => setValue(value.toString())}
-        />
-        <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Un campo de entrada para correo electrónico. Proporciona validación básica del navegador y sugiere correos electrónicos."
-      },
-      source: { code: EmailInputDefinition.trim() }
-    }
-  }
-};
-
-export const PasswordInput: Story = {
-  render: () => {
-    const [value, setValue] = useState('micontraseña');
-    return (
-      <Box sx={{ width: 300 }}>
-        <Input
-          label="Contraseña"
-          type="password"
-          value={value.toString()}
-          onChange={(value) => setValue(value.toString())}
-        />
-        <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Un campo de entrada de contraseña. Oculta los caracteres a medida que se escriben."
-      },
-      source: { code: PasswordInputDefinition.trim() }
-    }
-  }
-};
-
-export const InputWithPlaceholder: Story = {
-  render: () => {
-    const [value, setValue] = useState('');
-    return (
-      <Box sx={{ width: 300 }}>
-        <Input
-          label="Búsqueda"
-          placeholder="Escribe tu término de búsqueda..."
-          value={value.toString()}
-          onChange={(value) => setValue(value.toString())}
-        />
-        <Typography sx={{ mt: 2 }}>Valor actual: {value || 'Vacío'}</Typography>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Un campo de entrada con un texto de marcador de posición visible cuando el campo está vacío."
-      },
-      source: { code: InputWithPlaceholderDefinition.trim() }
-    }
-  }
-};
-
-export const InputWithError: Story = {
-  render: () => {
-    const [value, setValue] = useState('invalido');
-    // Lógica simple de error para la demostración
-    const hasError = value.length < 5 && value.length > 0;
-    return (
-      <Box sx={{ width: 300 }}>
-        <Input
-          label="Nombre de usuario"
-          value={value.toString()}
-          onChange={(value) => setValue(value.toString())}
-          error={hasError}
-          helperText={hasError ? 'Mínimo 5 caracteres' : ''}
-        />
-        <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Un campo de entrada que muestra un estado de error y un texto de ayuda cuando la validación falla."
-      },
-      source: { code: InputWithErrorDefinition.trim() }
-    }
-  }
-};
-
-export const DisabledInput: Story = {
-  render: () => {
-    const [value, setValue] = useState('Campo deshabilitado');
-    return (
-      <Box sx={{ width: 300 }}>
-        <Input
-          label="Estado"
-          value={value.toString()}
-          onChange={(value) => setValue(value.toString())}
-          disabled
-        />
-        <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      story: "Un campo de entrada deshabilitado, lo que impide la interacción del usuario."
-    },
-    source: { code: DisabledInputDefinition.trim() }
-  }
-};
-
-export const ReadOnlyInput: Story = {
-  render: () => {
-    const [value, setValue] = useState('Valor de solo lectura');
-    return (
-      <Box sx={{ width: 300 }}>
-        <Input
-          label="Información"
-          value={value.toString()}
-          onChange={(value) => setValue(value.toString())}
-          readOnly
-        />
-        <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      story: "Un campo de entrada de solo lectura, el usuario puede ver el valor pero no modificarlo."
-    },
-    source: { code: ReadOnlyInputDefinition.trim() }
-  }
-};
-
-export const InputVariants: Story = {
-  render: () => {
-    const [valueOutlined, setValueOutlined] = useState('Outlined');
-    const [valueFilled, setValueFilled] = useState('Filled');
-    const [valueStandard, setValueStandard] = useState('Standard');
-    return (
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>
-        <Input
-          label="Esquema Outlined"
-          value={valueOutlined.toString()}
-          onChange={(value) => setValueOutlined(value.toString())}
-          variant="outlined"
-        />
-        <Input
-          label="Esquema Filled"
-          value={valueFilled.toString()}
-          onChange={(value) => setValueFilled(value.toString())}
-          variant="filled"
-        />
-        <Input
-          label="Esquema Standard"
-          value={valueStandard.toString()}
-          onChange={(value) => setValueStandard(value.toString())}
-          variant="standard"
-        />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      story: "Demuestra las diferentes variantes de diseño: `outlined`, `filled` y `standard`."
-    },
-    source: { code: InputVariantsDefinition.trim() }
-  }
-};
-
-export const InputSizes: Story = {
-  render: () => {
-    const [valueMedium, setValueMedium] = useState('Tamaño Mediano');
-    const [valueSmall, setValueSmall] = useState('Tamaño Pequeño');
-    return (
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>
-        <Input
-          label="Input Mediano"
-          value={valueMedium.toString()}
-          onChange={(value) => setValueMedium(value.toString())}
-          size="medium"
-        />
-        <Input
-          label="Input Pequeño"
-          value={valueSmall.toString()}
-          onChange={(value) => setValueSmall(value.toString())}
-          size="small"
-        />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      story: "Demuestra los diferentes tamaños del campo de entrada: `medium` (por defecto) y `small`."
-    },
-    source: { code: InputSizesDefinition.trim() }
-  }
-};
-
-export const FullWidthInput: Story = {
-  render: () => {
-    const [value, setValue] = useState('Ocupa todo el ancho');
-    return (
-      <Box sx={{ width: '100%' }}>
-        <Input
-          label="Input de Ancho Completo"
-          value={value.toString()}
-          onChange={(value) => setValue(value.toString())}
-          fullWidth
-        />
-        <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      story: "Un campo de entrada que ocupa todo el ancho disponible de su contenedor."
-    },
-    source: { code: FullWidthInputDefinition.trim() }
-  }
-};
-
-export const StandardVariant: Story = {
-  render: () => {
-    const [value, setValue] = useState('Ocupa todo el ancho');
-    return (
-      <Box sx={{ width: '100%' }}>
-        <Input
-
-          value={value.toString()}
-          variant='standard'
-          onChange={(value) => setValue(value.toString())}
-          fullWidth
-        />
-        <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      story: "Un campo de entrada que ocupa todo el ancho disponible de su contenedor."
-    },
-
-  }
-};
-
-export const LabelPositionFloating: Story = {
-  render: () => {
-    const [valueOutside, setValueOutside] = useState('Outside (default)');
-    const [valueFloating, setValueFloating] = useState('Floating');
-    return (
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>
-        <Input
-          label="Label outside"
-          value={valueOutside.toString()}
-          onChange={(value) => setValueOutside(value.toString())}
-          labelPosition="outside"
-        />
-        <Input
-          label="Label floating (MUI clásico)"
-          value={valueFloating.toString()}
-          onChange={(value) => setValueFloating(value.toString())}
-          labelPosition="floating"
-        />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Compara `labelPosition='outside'` (default, label arriba del input) vs `labelPosition='floating'` (label flotante clásico de MUI dentro del notched outline)."
-      },
-      source: { code: LabelPositionFloatingDefinition.trim() }
-    }
-  }
-};
-
-export const CustomBorderRadius: Story = {
-  render: () => {
-    const [v0, setV0] = useState('Sin radius');
-    const [v4, setV4] = useState('Radius 4px');
-    const [v10, setV10] = useState('Radius 10px (default)');
-    const [v24, setV24] = useState('Radius 24px (pill)');
-    return (
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>
-        <Input label="borderRadius={0}" value={v0} onChange={(v) => setV0(v.toString())} borderRadius={0} />
-        <Input label="borderRadius={4}" value={v4} onChange={(v) => setV4(v.toString())} borderRadius={4} />
-        <Input label="borderRadius={10} (default)" value={v10} onChange={(v) => setV10(v.toString())} />
-        <Input label="borderRadius={24}" value={v24} onChange={(v) => setV24(v.toString())} borderRadius={24} />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "El prop `borderRadius` acepta un número (px) o un string CSS. Override directo del default `10`."
-      },
-      source: { code: CustomBorderRadiusDefinition.trim() }
-    }
-  }
-};
-
-export const MultilineInput: Story = {
-  render: () => {
-    const [value, setValue] = useState('Escribe un comentario en varias líneas...');
-    return (
-      <Box sx={{ width: 400 }}>
-        <Input
-          label="Comentario"
-          value={value}
-          onChange={(v) => setValue(v.toString())}
-          multiline
-          minRows={3}
-          maxRows={6}
-          fullWidth
-        />
-        <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Un campo de entrada multilínea (`multiline`) usando `minRows` y `maxRows` para auto-expandirse dentro de un rango. Útil para comentarios, descripciones o textos largos."
-      },
-      source: { code: MultilineInputDefinition.trim() }
-    }
-  }
-};
-
-export const CustomStyling: Story = {
-  render: () => {
-    const [bg, setBg] = useState('Fondo gris claro');
-    const [color, setColor] = useState('Borde rojo');
-    const [combined, setCombined] = useState('Custom completo');
-    return (
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>
-        <Input
-          label="Override de background"
-          value={bg}
-          onChange={(v) => setBg(v.toString())}
-          sx={{ '& .MuiOutlinedInput-root': { bgcolor: '#f5f5f5' } }}
-        />
-        <Input
-          label="Override de borderColor"
-          value={color}
-          onChange={(v) => setColor(v.toString())}
-          sx={{ '& .MuiOutlinedInput-notchedOutline': { borderColor: 'red' } }}
-        />
-        <Input
-          label="Combinado: bg + borderColor + label color"
-          value={combined}
-          onChange={(v) => setCombined(v.toString())}
-          sx={{
-            '& .MuiInputLabel-root': { color: 'primary.main' },
-            '& .MuiOutlinedInput-root': { bgcolor: '#fff7e6' },
-            '& .MuiOutlinedInput-notchedOutline': { borderColor: 'warning.main', borderWidth: 2 },
-          }}
-        />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Demuestra que el prop `sx` se mergea al final y siempre gana sobre los defaults internos. Antes esto no funcionaba por culpa del `styled()` interno."
-      },
-      source: { code: CustomStylingDefinition.trim() }
-    }
-  }
-};

package/src/components/Input/Input.sx.ts

@@ -1,42 +0,0 @@
-import type { TextFieldProps } from '@mui/material';
-
-import { buildFormFieldSx } from '../_shared/formField.sx';
-import { FIELD_INPUT_PADDING_Y } from '../../theme/tokens';
-import type { LabelPosition } from './Input';
-
-/**
- * Builder de sx para el Input. Usa el builder compartido
- * `buildFormFieldSx` y añade overrides específicos de TextField
- * (padding del input base, filled, standard).
- */
-export const buildInputSx = (
-  borderRadius: number | string,
-  labelPosition: LabelPosition,
-): TextFieldProps['sx'] => {
-  const radius = typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;
-
-  return buildFormFieldSx({
-    borderRadius,
-    labelPosition,
-    extraOutsideSx: {
-      '& .MuiInputBase-input': {
-        paddingTop: FIELD_INPUT_PADDING_Y,
-        paddingBottom: FIELD_INPUT_PADDING_Y,
-      },
-
-      // Filled: quitar el padding-top reservado para el label flotante dentro.
-      '& .MuiFilledInput-root': {
-        paddingTop: 0,
-        borderRadius: `${radius} ${radius} 0 0`,
-      },
-      '& .MuiFilledInput-input': {
-        paddingTop: FIELD_INPUT_PADDING_Y,
-      },
-
-      // Standard: quitar el margin-top reservado para el label flotante.
-      '& .MuiInput-root': {
-        marginTop: 0,
-      },
-    },
-  });
-};

package/src/components/Input/Input.tsx

@@ -1,141 +0,0 @@
-import { TextField, type TextFieldProps } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
-import { Controller, type Control, type RegisterOptions } from 'react-hook-form';
-
-import { parseValue, buildSlotProps } from './Input.helpers';
-import { buildInputSx } from './Input.sx';
-import { resolvePreset } from '../_shared/resolvePreset';
-
-// ── Tipos de dominio ─────────────────────────────────────────────────────
-export type InputType =
-  | 'text' | 'number' | 'email' | 'password' | 'tel'
-  | 'url' | 'search' | 'date' | 'datetime-local'
-  | 'month' | 'week' | 'time' | 'color';
-
-export type LabelPosition = 'outside' | 'floating';
-
-// ── Props base (todo lo común entre RHF y controlado) ────────────────────
-export interface BaseInputProps
-  extends Omit<TextFieldProps, 'value' | 'onChange' | 'type'> {
-  type?: InputType;
-  min?: number;
-  max?: number;
-  /** Border radius del input. Default: 10 */
-  borderRadius?: number | string;
-  /** "outside" = label arriba del campo (default). "floating" = label clásico MUI dentro del borde */
-  labelPosition?: LabelPosition;
-  readOnly?: boolean;
-  /**
-   * Nombre del preset de estilo registrado en `theme.styles.Input`.
-   * - `"default"` (o ausente) = estilo built-in del paquete.
-   * - Cualquier otro string = mergea el preset encima del estilo built-in.
-   */
-  preset?: string;
-}
-
-// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────
-export interface RHFInputProps extends BaseInputProps {
-  name: string;
-  control: Control<any>;
-  validation?: RegisterOptions;
-  value?: never;
-  onChange?: never;
-}
-
-export interface ControlledInputProps extends BaseInputProps {
-  name?: string;
-  control?: never;
-  validation?: never;
-  value: string | number;
-  onChange: (value: string | number) => void;
-}
-
-// ── API pública final ────────────────────────────────────────────────────
-export type InputProps = RHFInputProps | ControlledInputProps;
-
-export const Input: React.FC<InputProps> = (props) => {
-  const {
-    type = 'text',
-    variant = 'outlined',
-    size = 'small',
-    borderRadius = 10,
-    labelPosition = 'outside',
-    preset,
-    min,
-    max,
-    readOnly,
-    inputProps,
-    slotProps,
-    sx,
-    ...rest
-  } = props as ControlledInputProps & {
-    control?: Control<any>;
-    validation?: RegisterOptions;
-    readOnly?: boolean;
-    preset?: string;
-  };
-
-  const theme = useTheme();
-  const presetSx = resolvePreset('Input', preset, theme);
-
-  const finalSlotProps = buildSlotProps(
-    type,
-    min,
-    max,
-    slotProps,
-    inputProps,
-    labelPosition,
-    readOnly,
-  );
-  const mergedSx = [
-    buildInputSx(borderRadius, labelPosition),
-    ...(presetSx ? [presetSx] : []),
-    ...(Array.isArray(sx) ? sx : [sx]),
-  ];
-
-  if ('control' in props && props.control) {
-    const { name, control, validation } = props as RHFInputProps;
-    return (
-      <Controller
-        name={name}
-        control={control}
-        rules={validation}
-        render={({ field, fieldState: { error } }) => (
-          <TextField
-            fullWidth
-            {...rest}
-            name={field.name}
-            value={field.value ?? ''}
-            onChange={(e) => field.onChange(parseValue(e.target.value, type))}
-            onBlur={field.onBlur}
-            inputRef={field.ref}
-            type={type}
-            variant={variant}
-            size={size}
-            slotProps={finalSlotProps}
-            sx={mergedSx}
-            error={!!error || rest.error}
-            helperText={error?.message ?? rest.helperText}
-          />
-        )}
-      />
-    );
-  }
-
-  const { value, onChange } = props as ControlledInputProps;
-  return (
-    <TextField
-      fullWidth
-      {...rest}
-      value={value ?? ''}
-      onChange={(e) => onChange(parseValue(e.target.value, type))}
-      type={type}
-      variant={variant}
-      size={size}
-      slotProps={finalSlotProps}
-      sx={mergedSx}
-    />
-  );
-};
-
-export default Input;