Ecosistema de Paquetes: Publicados en npm
@tyconsa/bizuit-form-sdk (v2.1.1+)
npm install @tyconsa/bizuit-form-sdkCaracterísticas Principales
- 🔐 Autenticación: Gestión completa de tokens JWT con refresh automático
- 📤 Procesos: Initialize y RaiseEvent con parámetros XML/JSON
- 🔒 Locking: Prevención de concurrencia con withLock pattern
- 🌐 HTTP Client: Axios con interceptores personalizados
- 📄 XML Handling: Clase XmlParameter para objetos XML mutables
- ✅ Validación: Zod schemas integrados para type safety
Testing: 97 tests unitarios con 100% de éxito garantizando confiabilidad en producción.
Ejemplo de Uso
import { useBizuitSDK } from '@tyconsa/bizuit-form-sdk'
const { auth, process } = useBizuitSDK()
// Autenticar
await auth.login({ username, password })
// Iniciar proceso
const result = await process.initialize({
processName: 'MiProceso',
userName: 'usuario'
})
@tyconsa/bizuit-ui-components (v1.7.0+)
npm install @tyconsa/bizuit-ui-componentsComponentes Disponibles
- BizuitDataGrid - TanStack Table v8 con sorting/filtering avanzado
- BizuitCombo - Select searchable con multi-select
- BizuitDateTimePicker - Date/time/datetime picker con validación
- BizuitSlider - Slider con marcas y labels personalizadas
- BizuitFileUpload - Drag & drop con preview de archivos
- DynamicFormField - Auto-generación de campos desde metadata
Testing: 41 tests unitarios con 100% de éxito garantizando componentes estables y confiables.
Características de los Componentes
- 100% customizable con Tailwind CSS para adaptar a tu branding
- Soporte dark mode integrado y listo para usar
- Accesibilidad (WCAG 2.1) via Radix UI primitivos
- TypeScript completo con tipos exportados
Ejemplo de Uso
import { BizuitDataGrid } from '@tyconsa/bizuit-ui-components'
Developer Experience: Tu Primer Form en 10 Minutos
Setup Ultrarrápido
Clonar el template y preparar el entorno:
git clone https://github.com/TYCON-SA/bizuit-custom-form-sample.git
cd bizuit-custom-form-sample/form-template
npm install # Instala SDK + UI components
Configurar Credenciales
Una sola vez, configurar acceso:
cp dev-credentials.example.js dev-credentials.js
# Editar con tu usuario/password de Dashboard
Testing Instantáneo
Probar con Fat Bundle sin backend:
npm run build # Compila en < 1 segundo
python3 -m http.server 8080 -d dist
# Abrir: http://localhost:8080/dev.html
Template Production-Ready
El form-template viene completamente configurado y listo para extender, incluyendo SDK integrado con autenticación automática, BizuitDataGrid funcionando con sorting y filtering, dark mode completo implementado, manejo de errores y loading states, TypeScript con tipos completos, y fat bundle para testing rápido sin dependencias de backend.
Componentes Pre-Built Listos
Importar y usar sin configuración adicional:
import {
BizuitDataGrid, // TanStack Table v8
BizuitCombo, // Multi-select con search
BizuitDateTimePicker,
BizuitFileUpload, // Drag & drop
BizuitCard,
Button // UI base
} from '@tyconsa/bizuit-ui-components'
Desarrollo Lightning-Fast
Terminal 1: Watch mode
nodemon --watch src
--ext tsx
--exec "npm run build"
Terminal 2: HTTP Server
python3 -m http.server 8080 -d dist
- Editá src/index.tsx
- Guardá → Rebuild automático (< 1s)
- Refresh browser
- Ver cambios inmediatamente
De Código a Producción en 5 Pasos
Paso 1: Crear tu Form desde el Template
cd bizuit-custom-form-sample
cp -r form-template mi-nuevo-form
cd mi-nuevo-form
npm install
# Actualizar package.json
{
"name": "@tyconsa/bizuit-form-mi-nuevo-form",
"version": "1.0.0",
"description": "Descripción de tu form"
}
# Configurar credenciales (una sola vez)
cp dev-credentials.example.js dev-credentials.js
Paso 2: Escribir el Código
Opción A - Manual: Editar src/index.tsx con tus componentes
Opción B - Con IA (10x más rápido): Describir en lenguaje natural: "Crear form de solicitud de vacaciones con DatePicker, Combo para tipo, Textarea para motivo, Submit a proceso 'SolicitudVacaciones'" → Claude/ChatGPT genera el código completo funcional
Paso 3: Testing Local con Fat Bundle
npm run build # Compila < 1 segundo
cd dist
python3 -m http.server 8080
# Abrir: http://localhost:8080/dev.html
# Hot reload opcional:
nodemon --watch src --ext tsx --exec "npm run build"
Testeas SDK real con autenticación, llamadas a proceso BIZUIT, UI con datos reales, todo sin backend necesario.
Paso 4: Commit y Push
git add .
git commit -m "feat: agregar form de solicitud de vacaciones"
git push origin main
GitHub Actions automáticamente: detecta cambios, compila con esbuild, incrementa versión (1.0.0 → 1.0.1), crea ZIP deployment, sube artifact, commitea ZIP al repo, y crea git tag.
Paso 5: Deploy a Entorno
- Ir a GitHub → Actions → Download artifact
- Login a admin panel
- Upload ZIP
- Activar versión
- ¡Listo! Form disponible en segundos
Rollback instantáneo: Admin panel → Ver versiones → Activar versión anterior. 0 segundos de downtime.