lib-pixelbuild

React render engine for schema-driven PixelBuild websites.

Features

• Schema-driven rendering — pages, components, elements from JSON
• Dynamic component/element factories with lazy loading
• SEO via react-helmet-async
• Analytics via react-ga4
• Dynamic forms with validation (CPF, phone, email, etc.)
• Accessible image sliders (keen-slider)
• Email service with configurable credentials
• Zustand-powered dynamic form state management

Installation

npm install lib-pixelbuild

Peer dependencies — seu projeto precisa ter estas também:

react react-dom react-bootstrap bootstrap zustand react-router-dom
react-icons react-ga4 react-helmet-async react-imask dompurify keen-slider

Usage

import { SiteLayout, PageBuilder } from 'lib-pixelbuild'
import type { WebsiteType, PageType } from 'lib-pixelbuild'

function App({ website }: { website: WebsiteType }) {
  const page = website.pages[0]
  return (
    <SiteLayout website={website} imageBaseUrl="/images">
      <PageBuilder website={website} page={page} editionMode={false} />
    </SiteLayout>
  )
}

Development — hot-reload

Os consumidores (site-avalloneadvogados, app-pixelbuild) têm vite.config.js configurado com alias para o código-fonte TypeScript da lib em modo dev:

'lib-pixelbuild': path.resolve(__dirname, '../lib-pixelbuild/src/index.ts')

Isso significa que:

1. A lib NÃO precisa ser buildada durante o desenvolvimento
2. Alterações no src/ da lib refletem instantaneamente nos consumidores (hot-reload do Vite)
3. As peer dependencies (react, react-bootstrap, etc.) são resolvidas do node_modules do consumidor via aliases

Pré-requisito: o consumidor precisa ter todas as peer dependencies instaladas.

Fluxo de desenvolvimento

# Terminal 1: lib (não precisa rodar nada, só editar os arquivos)
cd lib-pixelbuild

# Terminal 2: consumidor
cd site-avalloneadvogados
npm run dev   # hot-reload reflete alterações na lib automaticamente

Build para produção

cd lib-pixelbuild
npm run build      # compila dist/

cd site-avalloneadvogados
npm run build      # usa o dist/ da lib (produção)

Em produção, os vite.config.js não usam o alias de source — resolvem pelo package.json da lib (file: → dist/index.js).

Publicação

# 1. Build + testes
npm run build && npm test && npm run lint

# 2. Publicar
npm publish --access public

O comando prepublishOnly já roda build, testes e lint automaticamente antes de publicar.

Scripts

| Script | Description | |--------|-------------| | npm run build | Compile to dist/ + ESM fix | | npm run build:watch | Watch mode | | npm run test | Run vitest | | npm run typecheck | tsc --noEmit | | npm run lint | ESLint | | npm run format | Prettier | | npm run prepare | Husky + lint-staged (auto-run on install) | | npm run lint:fix | ESLint auto-fix | | npm run link:global | npm link para consumo local | | npm run unlink:global | Remove o link global |

Project Structure

src/
  builders/      PageBuilder — assembles pages from schema
  components/    Card, Form, List, Map, Slider, Text, etc.
  constants/     Type enums
  elements/      Atomic elements — Button, Icon, Image, Input, Link, Text
  factories/     ComponentFactory, ElementFactory, ButtonActionFactory
  layouts/       SiteLayout, Header, Footer, Menu
  services/      EmailService (configurable)
  stores/        Zustand store for forms
  types/         RawWebsiteType and related types
  utils/         propertyUtils (type-safe accessors), InputValidators

Public API

// Components
Header  Footer  SiteLayout
PageBuilder  SectionRenderer  LoadingComponent

// Factories
ComponentFactory  ElementFactory
buttonActionFactory  →  configureEmail(config)

// Constants
ComponentTypeEnum  ElementTypeEnum
analyticsService

// Types
RawWebsiteType  WebsiteType  PageType  SectionType
SectionColumnType  ColumnWidthType  ComponentType
ElementType  PropertiesType  StylesType
EmailServiceConfig

Note

This library is under active development. Breaking changes expected until v1.0.