UI Next Library

Biblioteca de componentes React para proyectos Next.js con Tailwind CSS.

Instalación

npm install ui-next-library

Componentes disponibles

Text

Componente de entrada de texto simple con soporte para iconos.

import { Text } from 'ui-next-library';
import { FaUser } from 'react-icons/fa';

function MyComponent() {
  const [value, setValue] = useState('');
  
  return (
    <Text
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Ingresa texto"
      Icon={FaUser}
      iconPosition="left" // o "right"
    />
  );
}

Props

| Prop | Tipo | Default | Descripción | |------|------|---------|-------------| | value | string | - | Valor del input | | placeholder | string | "" | Texto de placeholder | | type | string | "text" | Tipo de input (text, password, etc.) | | disabled | boolean | false | Deshabilita el input | | readOnly | boolean | false | Hace el input de solo lectura | | required | boolean | false | Marca el input como requerido | | id | string | "" | ID del input | | name | string | "" | Nombre del input | | Icon | Component | null | Componente de icono (react-icons) | | iconPosition | string | "left" | Posición del icono ("left" o "right") | | iconClassName | string | "" | Clases adicionales para el icono | | className | string | "" | Clases adicionales para el input | | onChange | function | null | Función que se ejecuta al cambiar el valor | | onBlur | function | null | Función que se ejecuta al perder el foco | | onFocus | function | null | Función que se ejecuta al obtener el foco | | onKeyDown | function | null | Función que se ejecuta al presionar una tecla |

Email

Componente de entrada de correo electrónico con validación.

import { Email } from 'ui-next-library';

function MyComponent() {
  const [email, setEmail] = useState('');
  
  return (
    <Email
      value={email}
      onChange={(e) => setEmail(e.target.value)}
      placeholder="[email protected]"
    />
  );
}

Props

Hereda todas las props de Text y añade:

| Prop | Tipo | Default | Descripción | |------|------|---------|-------------| | Icon | Component | FaEnvelope | Icono por defecto | | placeholder | string | "[email protected]" | Placeholder por defecto |

Password

Componente de entrada de contraseña con soporte para mostrar/ocultar la contraseña.

import { Password } from 'ui-next-library';

function MyComponent() {
  const [password, setPassword] = useState('');
  
  return (
    <Password
      value={password}
      onChange={(e) => setPassword(e.target.value)}
      placeholder="Contraseña"
      requireValidation={true} // Activar validación interna
    />
  );
}

Props

Hereda todas las props de Text y añade:

| Prop | Tipo | Default | Descripción | |------|------|---------|-------------| | Icon | Component | FaLock | Icono por defecto | | showPasswordIcon | boolean | true | Muestra/oculta el icono para ver la contraseña | | placeholder | string | "Contraseña" | Placeholder por defecto | | requireValidation | boolean | false | Activa la validación interna (mayúsculas y números) | | customValidationMessage | string | "Debe incluir mayúsculas, números y caracteres especiales" | Mensaje de validación personalizado |

Submit

Botón de envío para formularios con soporte para estados de carga.

import { Submit } from 'ui-next-library';

function MyComponent() {
  const [isLoading, setIsLoading] = useState(false);
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    // Lógica de envío
    await submitData();
    setIsLoading(false);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      {/* Campos del formulario */}
      <Submit 
        isLoading={isLoading}
        fullWidth
        color="blue"
        height="2.5rem" // Control de altura personalizada
      >
        Enviar formulario
      </Submit>
    </form>
  );
}

Props

| Prop | Tipo | Default | Descripción | |------|------|---------|-------------| | children | ReactNode | "Enviar" | Contenido del botón | | type | string | "submit" | Tipo de botón | | disabled | boolean | false | Deshabilita el botón | | isLoading | boolean | false | Muestra estado de carga | | loadingText | string | "Procesando..." | Texto durante la carga | | showLoadingIcon | boolean | true | Muestra el icono de carga | | loadingIcon | Component | null | Componente personalizado para el icono de carga | | color | string | "blue" | Color del botón (blue, green, red, gray) | | size | string | "md" | Tamaño del botón (sm, md, lg) | | height | string | null | Altura personalizada (ejemplo: "2rem", "40px") | | fullWidth | boolean | false | Usar ancho completo | | className | string | "" | Clases adicionales | | onClick | function | null | Función que se ejecuta al hacer clic |

Desarrollo

# Instalar dependencias
npm install

# Iniciar servidor de desarrollo
npm run dev

# Construir la biblioteca
npm run build

# Publicar una nueva versión
npm run release:patch # o release:minor, release:major

Licencia

MIT