coreeb

Libreria interna de componentes UI: 38+ componentes (shadcn + Radix + custom como FloatingInput, FloatingSelect, RichTextEditor, ChipSelector, DateRangePicker, DateRangePill, Spinner) + tokens de tema, fuente corporativa Glancyr y utilidades CSS.

Disponible en npm: npmjs.com/package/coreeb

Instalacion

pnpm add coreeb

Version actual: 1.2.1 — ajustes de tamaños en componentes y mejoras al date range

Uso de componentes

import { Button, FloatingInput, Spinner, cn } from "coreeb";

export function Demo() {
  return (
    <div className={cn("p-6 space-y-4")}>
      <FloatingInput
        id="nombre"
        label="Nombre"
        value={value}
        onChange={setValue}
      />
      <Button>Guardar</Button>
      <Spinner message="Cargando..." />
    </div>
  );
}

Estilos

En el CSS principal del consumidor (ej. app/globals.css para Next.js + Tailwind v4):

@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));

@import "coreeb/styles.css";

/* Estilos propios del proyecto van aqui debajo */

coreeb/styles.css trae todo de una. Si solo se quiere parte:

| Import | Que trae | | ----------------------- | ----------------------------------------------------------------------------------- | | coreeb/styles.css | Todo (recomendado) | | coreeb/tokens.css | Solo paleta light/dark + radios + fuente Glancyr | | coreeb/base.css | Solo resets globales | | coreeb/components.css | Solo .bento-card, .glass-panel, scrollbar, code-block, material-symbols, tiptap | | coreeb/spinner.css | Solo lo del Spinner |

Componentes incluidos

Formularios

FloatingInput, FloatingSelect, FloatingTextarea, FloatingDatePicker, FloatingFileInput, Checkbox, RadioGroup, Select, Switch, Form, Label, RichTextEditor, Textarea, ChipSelector, FileDropzone, DateRangePicker, DateRangePill

Layout

Card, Collapsible, ScrollArea, Tabs, Separator

Overlay

Dialog, Popover, DropdownMenu, Sheet, Command, Tooltip

Feedback

Sonner (toaster), Spinner, Skeleton

Display

Avatar, Badge, Button, Calendar, Table, VisuallyHidden

Personalizar el tema

Sobreescribir cualquier token en el :root del consumidor:

:root {
  --primary: #6366f1; /* Indigo en vez del teal default */
  --chart-1: #6366f1;
}

Desarrollo de la libreria

pnpm install        # primera vez
pnpm dev            # showcase Next.js (http://localhost:3000)
pnpm build:lib      # genera dist/

Sacar nueva version

# 1. Actualizar version en package.json
pnpm version patch   # 1.0.0 -> 1.0.1  (bug fix)
pnpm version minor   # 1.0.0 -> 1.1.0  (nueva feature)
pnpm version major   # 1.0.0 -> 2.0.0  (breaking change)

# 2. Build y publicar
pnpm build:lib
pnpm publish

# 3. Tag en GitHub
git push origin main --tags

Despliegue bajo un subpath (ej. /plantilla)

Para servir el showcase bajo un path en vez de un subdominio (varios proyectos en un mismo dominio), se usa basePath de Next leido de NEXT_PUBLIC_BASE_PATH.

Solo hay 2 reglas, valgan donde valgan:

1. NEXT_PUBLIC_BASE_PATH debe estar presente en el BUILD (no en runtime). basePath se hornea dentro del HTML y las URLs de los assets durante pnpm build. Si no esta en el build, los assets salen en /_next/... (sin prefijo) → 404 de CSS/JS.
2. El reverse proxy debe reenviar el path INTACTO (sin strip del prefijo). Next ya sirve todo bajo /plantilla, incluido /plantilla/_next/static/....

Cambiar el path siempre requiere rebuild, no basta reiniciar. Sin la variable, basePath queda en "" → app en la raiz (comportamiento normal en local).

Como pasar el build-arg segun el metodo

Docker a mano

docker build --build-arg NEXT_PUBLIC_BASE_PATH=/plantilla -t plantilla .
docker run -p 3004:3004 plantilla

docker compose (usa el docker-compose.yml del repo + un .env al lado)

# .env
NEXT_PUBLIC_BASE_PATH=/plantilla

docker compose build && docker compose up -d

CI/CD (GitHub Actions, etc.)

- run: docker build --build-arg NEXT_PUBLIC_BASE_PATH=/plantilla -t registry/plantilla .

Node directo (sin Docker) — la variable debe existir antes del build

export NEXT_PUBLIC_BASE_PATH=/plantilla
pnpm build
pnpm start

Dokploy (app tipo Application / Dockerfile)

• Poner la variable en Environment → "Build Time Arguments" (NO en el Environment de runtime): NEXT_PUBLIC_BASE_PATH=/plantilla
• Desactivar el Strip Path del dominio (Traefik debe reenviar /plantilla intacto).
• Rebuild.

Proxy sin strip del prefijo (ejemplo Nginx)

location /plantilla/ {
    proxy_pass http://127.0.0.1:3004;   # sin barra final → NO recorta el prefijo
    proxy_set_header Host $host;
}

Error clasico: proxy_pass http://127.0.0.1:3004/; (con / final) recorta /plantilla y reaparece el 404 de assets.