UI Components

Biblioteca de componentes UI reutilizables con React, Tailwind CSS y SweetAlert2.

Características

- 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

Instalación

$3

Si estás usando workspaces con npm/bun:

``bash


En tu proyecto principal


bun add @mi-empresa/ui-components@workspace:*
`

$3

`bash


En la carpeta ui-components

bun link

En tu proyecto

bun link @mi-empresa/ui-components
`

$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 (


label="Nombre"
placeholder="Tu nombre"
value={nombre}
onChange={(e) => setNombre(e.target.value)}
/>

label="País"
options={[
{ value: 'mx', label: 'México' },
{ value: 'ar', label: 'Argentina' }
]}
/>

Enviar

);
}

`

$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 (

Eliminar

);
}
`

$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 (



);
}
`

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

Guardar

`

$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={
modalRef.current?.handleClose()}>
Cerrar

}
>


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');
``

Licencia

MIT