@soyfri/shared-library 1.5.0-beta.3 → 1.5.0

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

@@ -0,0 +1,387 @@
+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,
+} 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: 'medium',
+    },
+    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."
+    },
+    
+  }
+};

package/src/components/Input/Input.tsx

@@ -0,0 +1,186 @@
+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';
+  min?: number;
+  max?: number;
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>; 
+  slotProps?: TextFieldProps['slotProps']; 
+  disabled?: boolean;
+  readOnly?: boolean;
+  error?: boolean;
+  helperText?: string;
+}
+
+interface RHFInputProps extends BaseInputProps {
+  name: string;
+  control: Control<any>;
+  validation?: RegisterOptions;
+  value?: string | number;
+  onChange?: (value: string | number) => void;
+}
+
+interface StandardInputPropsWithOptionalName 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); 
+    }
+  };
+
+  
+  if (isRHFMode) {
+    const rhfProps = rest 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} 
+      />
+    );
+  }
+});
+
+export default Input;

package/src/components/Input/index.ts

@@ -0,0 +1 @@
+export { default as Input } from './Input';

package/src/components/InputGroup/InputGroup.stories.tsx

@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { Box, Typography } from '@mui/material';
+import InputGroup from './InputGroup'; // Asegúrate de tener este componente
+
+import dayjs, { Dayjs } from 'dayjs';
+import Select, { SelectOption } from '@soyfri/shared-library/components/Select/Select';
+import { Input } from '@soyfri/shared-library/components/Input';
+import { Button } from "@soyfri/shared-library/components/Button";
+import { DatePicker } from '@soyfri/shared-library/components/DatePicker';
+
+const meta: Meta<typeof InputGroup> = {
+  title: 'InputGroup',
+  component: InputGroup,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ width: 600, maxWidth: '100%' }}>
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof InputGroup>;
+
+const basicOptions: SelectOption[] = [
+  { value: '10', label: '10' },
+  { value: '25', label: '25' },
+  { value: '50', label: '50' },
+  { value: '100', label: '100' },
+];
+
+export const BasicInputGroup: Story = {
+  render: () => {
+    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>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Un grupo de entrada simple que combina un campo de texto y un botón.'
+      }
+    }
+  }
+};
+
+export const CombinedInputGroup: Story = {
+  render: () => {
+    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>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Un ejemplo más complejo que agrupa un `Select`, un `Input` y un `Button` en una sola fila.'
+      }
+    }
+  }
+};
+
+export const DatePickerInputGroup: Story = {
+  render: () => {
+    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>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Un grupo de entrada que combina un `DatePicker` con un botón de acción.'
+      }
+    }
+  }
+};