ui-opera-pd

Libreria de componentes visuales para Opera PD. La idea es que admin-opera-pd y site-opera-pd usen exactamente los mismos componentes:

• site-opera-pd los renderiza como web publica.
• admin-opera-pd los renderiza dentro del editor/preview.
• ui-opera-pd concentra el catalogo, los temas y el renderer.

Desarrollo local

npm install
npm run showcase

El showcase corre con Next y permite revisar los componentes de la libreria sin entrar a admin o site.

Para compilar la libreria:

npm run build

El build genera dist/index.mjs, dist/index.js y dist/index.d.ts.

Uso en admin y site

import { ThemeProvider, SectionRenderer } from 'ui-opera-pd';

<ThemeProvider theme={site.theme}>
  {layout.map((section) => (
    <SectionRenderer
      key={section.id}
      type={section.type}
      theme={section.theme}
      props={{ ...section.props, config: site, products }}
    />
  ))}
</ThemeProvider>

En Next, mantener esto en next.config.ts:

const nextConfig = {
  transpilePackages: ['ui-opera-pd'],
};

Y en src/app/globals.css de cada app que consume la libreria:

@import "tailwindcss";
@source "../../node_modules/ui-opera-pd";

Para mantener Turbopack rapido y estable, admin-opera-pd y site-opera-pd deben consumir la libreria desde node_modules, no desde un alias local a ../ui-opera-pd/src. Cuando cambies la libreria localmente, compila/empaca la libreria y reinstala el paquete en la app consumidora.

cd ui-opera-pd
npm run pack:local

cd ../admin-opera-pd
npm_config_cache=../.npm-cache npm install --no-save ../.packages/ui-opera-pd-1.0.1.tgz

cd ../site-opera-pd
npm_config_cache=../.npm-cache npm install --no-save ../.packages/ui-opera-pd-1.0.1.tgz

Esto evita que Turbopack tenga que resolver codigo fuente fuera de la app. Para produccion, usa siempre un paquete publicado en un registry.

Publicacion recomendada

Para produccion, no uses git+ssh. Publica la libreria en npm y consume una version normal:

"ui-opera-pd": "^1.0.1"

Para publicar necesitas estar logueado en npm:

npm login
npm whoami

Publicar una nueva version:

cd ui-opera-pd
npm version patch
npm publish --access public

Instalar/actualizar en las apps:

cd ../admin-opera-pd
npm install ui-opera-pd@latest

cd ../site-opera-pd
npm install ui-opera-pd@latest

En deploy, si el paquete es publico no necesitas llave SSH ni token para instalarlo.

Contrato de componentes

La unidad que viaja entre API, admin y site es una seccion:

type PageSection = {
  id: string;
  type: 'NAVIGATION' | 'HERO' | 'BRANDS_BAR' | 'PRODUCTS_GRID' | 'CONFIGURATOR' | 'FOOTER';
  theme?: 'automotive' | 'minimal';
  props?: Record<string, unknown>;
};

COMPONENTS_CATALOG define que puede agregar el editor. SectionRenderer decide que componente renderizar segun type y theme.