Biblioteca de componentes UI reutilizables con React, Tailwind y SweetAlert
npm install neogestify-ui-componentsBiblioteca de componentes UI reutilizables con React, Tailwind CSS y SweetAlert2.
- Componentes HTML preestilizados (Button, Input, Form, Select, Table, Modal)
- Colección de iconos SVG
- Alertas preconfiguradas con SweetAlert2
- Soporte para modo claro/oscuro
- TypeScript incluido
- Compatible con Tailwind CSS 4.1
Si estás usando workspaces con npm/bun:
``bash`En tu proyecto principal
bun add @mi-empresa/ui-components@workspace:*
`bashEn la carpeta ui-components
bun link
$3
`json
{
"dependencies": {
"@mi-empresa/ui-components": "git+https://github.com/tu-usuario/ui-components.git"
}
}
`Configuración
$3
`bash
bun add -D tailwindcss@4.1.0
`Tu proyecto debe tener Tailwind configurado ya que los componentes solo usan clases de Tailwind (no incluyen CSS compilado).
$3
⚠️ IMPORTANTE: Esta librería requiere que configures Tailwind para escanear sus archivos fuente.
Para Tailwind CSS v4:
En tu archivo CSS principal (por ejemplo
src/index.css):`css
@import "tailwindcss";@source "../node_modules/neogestify-ui-components/src";
`Alternativa con tailwind.config.js:
`js
// tailwind.config.js
export default {
content: [
"./src/*/.{js,jsx,ts,tsx}",
"./node_modules/neogestify-ui-components/src/*/.{ts,tsx}"
],
darkMode: 'class',
}
`> 📖 Para más detalles sobre la configuración de Tailwind v4, incluyendo monorepos y troubleshooting, consulta TAILWIND_V4_SETUP.md
$3
`bash
bun add react react-dom sweetalert2 sweetalert2-react-content
`Uso
La biblioteca está organizada en módulos independientes:
$3
`tsx
import { Button, Input, Form, Select, Table, Modal } from '@mi-empresa/ui-components/html';function MiComponente() {
return (
);
}
`$3
`tsx
import {
HomeIcon,
SaveIcon,
DeleteIcon,
EditIcon
} from '@mi-empresa/ui-components/icons';function MiComponente() {
return (
);
}
`$3
`tsx
import {
AlertaExito,
AlertaError,
AlertaAdvertencia,
AlertaConfirmacion,
AlertaToast
} from '@mi-empresa/ui-components/alerts';function MiComponente() {
const handleGuardar = async () => {
try {
await guardarDatos();
AlertaExito('¡Guardado!', 'Los datos se guardaron correctamente');
} catch (error) {
AlertaError('Error', 'No se pudieron guardar los datos');
}
};
const handleEliminar = () => {
AlertaAdvertencia(
'¿Estás seguro?',
'Esta acción no se puede deshacer',
async () => {
await eliminarDatos();
AlertaToast('Eliminado', 'Registro eliminado', 'success');
}
);
};
return (
);
}
`$3
El sistema de tema incluye un Context Provider y un componente toggle listo para usar.
#### 1. Configurar el ThemeProvider
Envuelve tu aplicación con el
ThemeProvider:`tsx
// main.tsx o App.tsx
import { ThemeProvider } from '@mi-empresa/ui-components/context/theme';function Main() {
return (
);
}
`#### 2. Usar el ThemeToggle
`tsx
import { ThemeToggle } from '@mi-empresa/ui-components/theme';function Header() {
return (
);
}
`#### 3. Usar el hook useTheme
`tsx
import { useTheme } from '@mi-empresa/ui-components/context/theme';function MiComponente() {
const { theme, toggleTheme, setTheme } = useTheme();
return (
Tema actual: {theme}
);
}
`El tema se guarda automáticamente en
localStorage y se aplica al cargar la página.Componentes Disponibles
$3
Variantes:
primary, secondary, danger, success, warning, outline, icon, nav, link, toggle`tsx
`$3
Soporta tipos:
text, email, password, number, checkbox, etc.`tsx
label="Email"
type="email"
error="Email inválido"
helperText="Ingresa tu correo electrónico"
/>
`$3
`tsx
label="Categoría"
placeholder="Selecciona..."
options={categorias}
variant="default"
/>
`$3
`tsx
headers={['ID', 'Nombre', 'Email']}
rows={[
['1', 'Juan', 'juan@ejemplo.com'],
['2', 'María', 'maria@ejemplo.com']
]}
/>
`$3
`tsx
const modalRef = useRef(null); ref={modalRef}
title="Mi Modal"
onClose={() => setShowModal(false)}
footer={
}
>
Contenido del modal
`Showcase / Demo
Para ver todos los componentes en acción:
`bash
cd showcase
bun install
bun dev
`Abre http://localhost:5173 en tu navegador.
Desarrollo
$3
`bash
bun install
bun run build
`$3
`
ui-components/
├── src/
│ ├── components/
│ │ ├── html/ # Componentes HTML
│ │ ├── icons/ # Iconos SVG
│ │ └── alerts/ # Alertas SweetAlert2
│ └── types/ # Tipos TypeScript
├── showcase/ # Demo/Showcase
└── dist/ # Build output
`Modo Oscuro
Los componentes soportan modo oscuro automáticamente usando las clases
dark: de Tailwind. Asegúrate de configurar el modo oscuro en tu proyecto:`js
// tailwind.config.js
export default {
darkMode: 'class', // o 'media'
// ...
}
`Para activar el modo oscuro:
`tsx
// Agregar/quitar la clase 'dark' en el html
document.documentElement.classList.add('dark');
``MIT