Libreria compartida del ecosistema FESA

Un solo paquete para todos los sistemas

Datatable server-first, formularios, primitivas UI, auth, storage, email y seguridad. Lo que antes se duplicaba en cada sistema, ahora vive en @fesa/components.

Ver la documentacion Tutorial del datatable

Un solo paquete para 7 sistemas

Espanol por defecto

Versiones que decidimos nosotros

products.client.tsx

1import { SmartDataTable } from '@fesa/components/datatable'
2import { PageHeader, StatCard } from '@fesa/components/ui'
3
4<SmartDataTable
5  columns={columns}
6  fetchFn={fetchProductsAction}
7  initialData={page.data}
8/>

1 fila = 1 render

celdas memoizadas

~40k lineas

duplicadas eliminadas

Modulos en un solo paquete

Sistemas FESA lo consumen

120+

Tests automatizados

~40k

Lineas duplicadas eliminadas

Todo lo que comparten los sistemas

Cada modulo se importa por separado; el bundle solo lleva lo que usas.

Datatable

Paginacion, filtros y orden en servidor, URL sincronizada, export y columnas fijadas.

Abrir

Forms

48 campos sobre react-hook-form + zod con errores visibles y en espanol.

Abrir

UI

Primitivas shadcn con touch targets FESA, PageHeader, StatCard, EmptyState y Sidebar.

Abrir

Auth

NextAuth v5 con lockout, 2FA, revocacion de sesiones y SSO entre sistemas.

Abrir

Storage

Cloudflare R2 con presigned PUT anti-spoofing y zona temporal.

Abrir

Email

Theme de correo de produccion sobre React Email y adapter de Resend.

Abrir

Security

WAF de 48 reglas, rate limiting y sanitizacion.

Abrir

Charts y utils

Graficos SVG sin dependencias, slugs, paginacion y helpers compartidos.

Abrir

Notifications

Toasts propios, sin sonner, con la misma API en toda la flota.

Abrir

Motion

AnimatedSection, StaggerChildren y useInView con ref callback de React 19.

Abrir

Adopcion

Como migrar un sistema modulo a modulo con shims sin churn en los callers.

Abrir

Troubleshooting

Los gotchas conocidos: peers del barrel, turbopack, cache de bun.

Abrir

4 pasos

Instalacion

De cero a un listado paginado en servidor en una tarde.

Instala desde GitHub

"@fesa/components": "git+ssh://[email protected]/AdanSerrano/components.fesa.com.pa.git#v0.27.0"

Transpila el paquete

transpilePackages: ["@fesa/components"]

Registra estilos y tokens

@import '@fesa/components/theme.css';
@source '../node_modules/@fesa/components/src';

Usa los modulos

import { SmartDataTable } from '@fesa/components/datatable'

¿Un listado nuevo? 15 lineas

Con useSmartTable y el fetch en servidor, el caso FESA es el default. Sigue el tutorial y compara.

Empezar el tutorial Por que una libreria propia