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

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

@@ -1,387 +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,
-} 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

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

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

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

@@ -1,136 +0,0 @@
-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.'
-      }
-    }
-  }
-};