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

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

@@ -21,6 +21,9 @@ import {
   InputVariantsDefinition,
   InputSizesDefinition,
   FullWidthInputDefinition,
+  LabelPositionFloatingDefinition,
+  CustomBorderRadiusDefinition,
+  CustomStylingDefinition,
 } from './Input.definitions';
 
 // =============================================================================
@@ -63,7 +66,18 @@ const meta: Meta<typeof Input> = {
       control: 'radio',
       options: ['small', 'medium'],
       description: 'El tamaño del campo de entrada.',
-      defaultValue: 'medium',
+      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 },
   },
@@ -362,13 +376,13 @@ export const FullWidthInput: Story = {
   }
 };
 
-export const StandardVariant : Story = {
+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())}
@@ -382,6 +396,104 @@ export const StandardVariant : Story = {
     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 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

@@ -0,0 +1,42 @@
+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,186 +1,141 @@
-import React, { forwardRef } from 'react';
-import { TextField, TextFieldProps } from '@mui/material';
-import { styled } from '@mui/system';
-import { Controller, Control, RegisterOptions } from 'react-hook-form';
-
-
-
-
-interface BaseInputProps extends Omit<TextFieldProps, 'value' | 'onChange' | 'variant' | 'type' | 'inputProps' | 'slotProps' | 'error' | 'helperText'> {
-  type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'month' | 'week' | 'time' | 'color';
-  variant?: 'outlined' | 'filled' | 'standard';
+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;
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>; 
-  slotProps?: TextFieldProps['slotProps']; 
-  disabled?: boolean;
+  /** 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;
-  error?: boolean;
-  helperText?: string;
+  /**
+   * 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;
 }
 
-interface RHFInputProps extends BaseInputProps {
+// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────
+export interface RHFInputProps extends BaseInputProps {
   name: string;
   control: Control<any>;
   validation?: RegisterOptions;
-  value?: string | number;
-  onChange?: (value: string | number) => void;
+  value?: never;
+  onChange?: never;
 }
 
-interface StandardInputPropsWithOptionalName extends BaseInputProps {
-  name?: string; 
+export interface ControlledInputProps extends BaseInputProps {
+  name?: string;
   control?: never;
   validation?: never;
   value: string | number;
   onChange: (value: string | number) => void;
 }
 
-export type InputProps = RHFInputProps | StandardInputPropsWithOptionalName;
-
-
-const StyledTextField = styled(TextField)(({ theme }) => ({
-  '& .MuiInputBase-root': {
-    maxHeight: '34px',
-    padding: '8px 10px',
-    borderRadius: '10px',
-    display: 'flex',
-    alignItems: 'center',
-    fontSize: '14px',
-  },
-  '& .MuiInputBase-input': {
-    padding: '0 !important',
-    height: '18px',
-    display: 'flex',
-    alignItems: 'center',
-    marginTop: '-4px'
-  },
-  '& .MuiInputLabel-root': {
-    top: '50%',
-    transform: 'translate(14px, -50%)',
-    '&.MuiInputLabel-shrink': {
-      transform: 'translate(1px, -200%) scale(0.75)',
-      fontSize: '16px !important',
-      '> legend': {
-        display: 'none',
-      }
-    }
-  },
-  '& .MuiInputLabel-root.Mui-error': {
-    top: '25%'
-    
-  },
-  '& .MuiInputBase-root > fieldset > legend':{
-    display: 'none',
-  },
-  '& .MuiOutlinedInput-notchedOutline': {
-    border: '0.7px solid',
-    borderColor: '#e0e0e0',
-  },
-}));
-
-
-export const Input = forwardRef<HTMLInputElement, InputProps>(({
-  type = 'text',
-  variant = 'outlined',
-  min,
-  max,
-  inputProps: customInputProps, 
-  slotProps: customSlotProps, 
-  
-  value, 
-  onChange,
-  ...rest 
-}, ref) => {
-  const isRHFMode = 'control' in rest && rest.control !== undefined;
-
-  
-  const htmlInputProps: React.InputHTMLAttributes<HTMLInputElement> = {
-    ...customInputProps, 
-  };
-
-  if (type === 'number') {
-    htmlInputProps.min = min !== undefined ? min : Number.NEGATIVE_INFINITY;
-    if (max !== undefined) {
-      htmlInputProps.max = max;
-    }
-  }
-
-  
-  const finalSlotProps: TextFieldProps['slotProps'] = {
-    ...customSlotProps,
-    htmlInput: {
-      ...customSlotProps?.htmlInput,
-      ...htmlInputProps,
-    },
-  };
-
-  
-  const handleChangeInternal = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, rhfOnChange?: (...event: any[]) => void) => {
-    const rawValue = event.target.value;
-    let newValue: string | number;
-
-    if (type === 'number') {
-      newValue = rawValue === '' || rawValue === '-' ? rawValue : parseFloat(rawValue);
-      
-      if (isNaN(newValue as number) && rawValue !== '' && rawValue !== '-') newValue = rawValue;
-    } else {
-      newValue = rawValue;
-    }
-
-    if (isRHFMode) {
-      rhfOnChange?.(newValue); 
-    } else {
-      
-      (onChange as (value: string | number) => void)?.(newValue); 
-    }
+// ── 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;
   };
 
-  
-  if (isRHFMode) {
-    const rhfProps = rest as RHFInputProps;
+  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={rhfProps.name}
-        control={rhfProps.control}
-        rules={rhfProps.validation}
-        render={({ field, fieldState: { error } }) => {
-          return (
-            <StyledTextField
-              fullWidth={true}
-              value={field.value ?? ''}
-              onChange={(e) => handleChangeInternal(e, field.onChange)} 
-              onBlur={field.onBlur}
-              type={type}
-              variant={variant}
-              slotProps={finalSlotProps} 
-              inputRef={field.ref}
-              error={!!error}
-              helperText={error?.message}
-              {...rest}
-            />
-          );
-        }}
-      />
-    );
-  } else {
-    
-    const standardProps = rest as StandardInputPropsWithOptionalName;
-    return (
-      <StyledTextField
-        fullWidth={true}
-        name={standardProps.name} 
-        value={value ?? ''} 
-        onChange={(e) => handleChangeInternal(e)} 
-        type={type}
-        variant={variant}
-        slotProps={finalSlotProps} 
-        inputRef={ref} 
-        error={standardProps.error}
-        helperText={standardProps.helperText}
-        {...rest} 
+        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}
+          />
+        )}
       />
     );
   }
-});
 
-export default Input;
+  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;

package/src/components/Input/Input.types.ts

@@ -0,0 +1,10 @@
+// Re-export barrel para compatibilidad con imports antiguos.
+// Los tipos ahora viven dentro de Input.tsx.
+export type {
+  InputType,
+  LabelPosition,
+  BaseInputProps,
+  RHFInputProps,
+  ControlledInputProps,
+  InputProps,
+} from './Input';

package/src/components/Input/index.ts

@@ -1 +1,9 @@
-export { default as Input } from './Input';
+export { Input, default } from './Input';
+export type {
+  InputProps,
+  BaseInputProps,
+  RHFInputProps,
+  ControlledInputProps,
+  InputType,
+  LabelPosition,
+} from './Input.types';

package/src/components/InputGroup/InputGroup.definitions.ts

@@ -0,0 +1,158 @@
+export const BasicInputGroupDefinition = `
+import { useState } from 'react';
+import { Box, Typography } from '@mui/material';
+import InputGroup from './InputGroup';
+import { Input } from '../Input';
+import { Button } from '../Button';
+
+export const BasicInputGroupExample = () => {
+    const [text, setText] = useState('');
+    return (
+        <Box>
+            <Typography variant="h6" sx={{ mb: 2 }}>
+                Grupo de entrada básico
+            </Typography>
+            <InputGroup>
+                <Input label="Buscar" value={text} onChange={(val) => setText(val as string)} />
+                <Button variant="outlined">Buscar</Button>
+            </InputGroup>
+        </Box>
+    );
+};
+`;
+
+export const CombinedInputGroupDefinition = `
+import { useState } from 'react';
+import { Box, Typography } from '@mui/material';
+import InputGroup from './InputGroup';
+import { Input } from '../Input';
+import Select, { SelectOption } from '../Select/Select';
+import { Button } from '../Button';
+
+const basicOptions: SelectOption[] = [
+    { value: '10', label: '10' },
+    { value: '25', label: '25' },
+    { value: '50', label: '50' },
+    { value: '100', label: '100' },
+];
+
+export const CombinedInputGroupExample = () => {
+    const [text, setText] = useState('');
+    const [selectValue, setSelectValue] = useState('25');
+
+    return (
+        <Box>
+            <Typography variant="h6" sx={{ mb: 2 }}>
+                Grupo de entrada combinado
+            </Typography>
+            <InputGroup>
+                <Select
+                    label="Registros"
+                    options={basicOptions}
+                    value={selectValue}
+                    onChange={(val) => setSelectValue(val as string)}
+                />
+                <Input
+                    label="Filtrar por nombre"
+                    value={text}
+                    onChange={(val) => setText(val as string)}
+                />
+                <Button variant="contained">Aplicar</Button>
+            </InputGroup>
+        </Box>
+    );
+};
+`;
+
+export const DatePickerInputGroupDefinition = `
+import { useState } from 'react';
+import { Box, Typography } from '@mui/material';
+import dayjs, { Dayjs } from 'dayjs';
+import InputGroup from './InputGroup';
+import { DatePicker } from '../DatePicker';
+import { Button } from '../Button';
+
+export const DatePickerInputGroupExample = () => {
+    const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs());
+
+    return (
+        <Box>
+            <Typography variant="h6" sx={{ mb: 2 }}>
+                Grupo de entrada con DatePicker
+            </Typography>
+            <InputGroup>
+                <DatePicker
+                    label="Fecha de inicio"
+                    selectedDate={selectedDate}
+                    onDateChange={(date) => setSelectedDate(date)}
+                />
+                <Button variant="contained">Ver calendario</Button>
+            </InputGroup>
+        </Box>
+    );
+};
+`;
+
+export const VerticalInputGroupDefinition = `
+import { useState } from 'react';
+import { Box } from '@mui/material';
+import InputGroup from './InputGroup';
+import { Input } from '../Input';
+
+export const VerticalInputGroupExample = () => {
+    const [nombre, setNombre] = useState('');
+    const [email, setEmail] = useState('');
+
+    return (
+        <Box sx={{ width: 320 }}>
+            <InputGroup orientation="vertical">
+                <Input label="Nombre" value={nombre} onChange={(val) => setNombre(val as string)} />
+                <Input label="Email" value={email} onChange={(val) => setEmail(val as string)} />
+            </InputGroup>
+        </Box>
+    );
+};
+`;
+
+export const CustomStylingInputGroupDefinition = `
+import { useState } from 'react';
+import { Box } from '@mui/material';
+import InputGroup from './InputGroup';
+import { Input } from '../Input';
+import { Button } from '../Button';
+
+export const CustomStylingInputGroupExample = () => {
+    const [q, setQ] = useState('');
+
+    return (
+        <Box sx={{ width: 500 }}>
+            <InputGroup
+                borderRadius={999}
+                sx={{
+                    bgcolor: 'action.hover',
+                    borderColor: 'primary.main',
+                }}
+            >
+                <Input label="Búsqueda avanzada" value={q} onChange={(val) => setQ(val as string)} />
+                <Button variant="contained" color="primary">Buscar</Button>
+            </InputGroup>
+        </Box>
+    );
+};
+`;
+
+export const DisabledInputGroupDefinition = `
+import { Box } from '@mui/material';
+import InputGroup from './InputGroup';
+import { Input } from '../Input';
+import { Button } from '../Button';
+
+export const DisabledInputGroupExample = () => (
+    <Box sx={{ width: 400 }}>
+        <InputGroup disabled>
+            <Input label="Búsqueda" value="" onChange={() => {}} disabled />
+            <Button variant="outlined" disabled>Buscar</Button>
+        </InputGroup>
+    </Box>
+);
+`;