Reusable UI components library with PrimeReact, Tailwind CSS and React Hook Form
npm install @sltf/ui-kitLibrería centralizada de componentes UI reutilizables y rebandeables para React, construida con PrimeReact, React Hook Form y SCSS.
``bash`
pnpm install @sltf/ui-kit
`tsx
import { InputText, Button } from "@sltf/ui-kit";
function MyForm() {
return (
$3
`tsx
import { DatePicker } from '@sltf/ui-kit';
import { useState } from 'react';function MyForm() {
const [date, setDate] = useState(new Date());
return (
value={date}
onChange={setDate}
placeholder="Selecciona fecha"
dateFormat="dd/MM/yyyy"
showCustomHeader={true} // Header con selectores de mes/año
enableKeyboardNavigation={true} // Navegación por teclado
minDate={new Date(2020, 0, 1)}
maxDate={new Date()}
/>
);
}
`Características mejoradas:
- ✅ Header personalizado con selectores de mes y año
- ✅ Navegación rápida entre años y meses
- ✅ Navegación por teclado (flechas, Enter, Escape)
- ✅ Accesibilidad mejorada con labels y ARIA
- ✅ Rangos de fecha configurables
- ✅ Formatos personalizables
📚 Arquitectura
$3
1. Inputs (
src/components/inputs/): Componentes base usando PrimeReact
2. Fields (src/components/fields/): Inputs integrados con React Hook Form
3. Containers (src/components/containers/): Wrappers de layout$3
- SCSS modular: Estilos organizados por componente en
src/styles/components/
- CSS Variables: Para temas y rebranding
- PrimeReact passthrough: Sistema pt para aplicar estilos personalizados🛠️ Desarrollo
$3
`bash
pnpm dev # Servidor de desarrollo Next.js
pnpm storybook # Storybook en localhost:6006
pnpm build:lib # Build de la librería (tsup)
pnpm lint # ESLint
pnpm test # Ejecutar tests
`$3
#### 1. Componente de Input
`tsx
// src/components/inputs/MyInput.tsx
import { InputText as PrimeInputText } from "primereact/inputtext";
import { cn } from "../../utils/cn";interface MyInputProps {
className?: string;
size?: "small" | "normal" | "large";
state?: "default" | "error" | "success";
disabled?: boolean;
}
export const MyInput = ({
className,
size = "normal",
state = "default",
disabled = false,
...props
}: MyInputProps) => {
const inputClasses = cn(
"my-input",
my-input--${size},
my-input--${state},
{ "my-input--disabled": disabled },
className,
); return (
{...props}
disabled={disabled}
pt={{
root: { className: inputClasses },
}}
/>
);
};
`#### 2. Campo de formulario
`tsx
// src/components/fields/MyField.tsx
import { useController, Control } from "react-hook-form";
import { MyInput } from "../inputs/MyInput";interface MyFieldProps {
name: string;
control: Control;
rules?: object;
// ... otros props
}
export const MyField = ({ name, control, rules, ...props }: MyFieldProps) => {
const {
field,
fieldState: { error },
} = useController({ name, control, rules });
return (
);
};
`#### 3. Estilos SCSS
`scss
// src/styles/components/_my-input.scss
.my-input {
// Estilos base
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
padding: var(--spacing-sm) var(--spacing-md); // Estados
&--error {
border-color: var(--color-error);
}
&--success {
border-color: var(--color-success);
}
// Tamaños
&--small {
padding: var(--spacing-xs) var(--spacing-sm);
}
&--large {
padding: var(--spacing-md) var(--spacing-lg);
}
// Estados interactivos
&:focus {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
&--disabled {
opacity: 0.6;
cursor: not-allowed;
}
}
`🎨 Temas y personalización
El UI Kit usa CSS Custom Properties para permitir rebranding completo:
`css
:root {
--color-primary: #007bff;
--color-border: #dee2e6;
--color-error: #dc3545;
--color-success: #28a745;
--border-radius: 4px;
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
}
`📖 Storybook
Documentación interactiva disponible en localhost:6006 después de ejecutar
pnpm storybook.🤝 Contribución
1. Seguir las directrices de creación de componentes
2. Crear Storybook stories para nuevos componentes
3. Mantener estilos modulares en
src/styles/components/`Este proyecto está bajo la Licencia MIT.