lib-pixelbuild 0.1.4 → 0.2.1

package/README.md

@@ -1,176 +1,151 @@
 # lib-pixelbuild
 
-> **Para IA:** leia [docs/AI_CONTEXT.md](docs/AI_CONTEXT.md) antes de alterar esta biblioteca.
+React render engine for schema-driven PixelBuild websites.
 
-> **Status:** em construção — refatoração para novo padrão; mudanças grandes esperadas. O endpoint legado `/website/{id}/structure` foi removido da API; um novo contrato será definido.
+## Features
 
-Biblioteca React para construção dinâmica de sites a partir de estruturas e padrões pré-definidos. Ideal para reutilização, manutenção centralizada e rápida evolução de múltiplos projetos frontend.
+- 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
 
----
-
-## ✨ Visão Geral
-
-- **lib-pixelbuild** permite criar sites completos a partir de um modelo de dados padronizado, compondo páginas, componentes e elementos de forma dinâmica.
-- Foco em **reutilização**, **manutenção centralizada** e **distribuição fácil** de novas funcionalidades para múltiplos projetos.
-- Utiliza React, TypeScript e padrões modernos de desenvolvimento.
-
----
-
-## 🚀 Instalação
+## Installation
 
 ```bash
 npm install lib-pixelbuild
 ```
 
-> **Peer dependencies**: Certifique-se de instalar também as dependências peer listadas no `package.json` (React, React Bootstrap, dompurify, zustand, etc).
-
----
-
-## 🏗️ Estrutura do Projeto
+**Peer dependencies** — seu projeto precisa ter estas também:
 
 ```
-src/
-  components/    # Componentes (Layout, Header, Footer, Form, etc)
-  elements/      # Elementos (Text, Image, Input, Button, etc)
-  constants/     # Enums e constantes de tipos
-  factories/     # Fábricas para instanciar componentes/elementos dinamicamente
-  services/      # Serviços utilitários (API, Cache, Email, Analytics, etc)
-  stores/        # Gerenciamento de estado
-  types/         # Tipos para todo o modelo de dados
-  utils/         # Funções utilitárias e validadores
-index.ts         # Exporta tudo que é público na lib
+react react-dom react-bootstrap bootstrap zustand react-router-dom
+react-icons react-ga4 react-helmet-async react-imask dompurify keen-slider
 ```
 
----
-
-## 🧩 Como Funciona
-
-- **Estrutura de Dados**: O site é definido por um objeto JSON (ver `RawWebsiteType`), contendo páginas, componentes e elementos.
-- **Factories**: Fábricas constroem dinamicamente componentes e elementos a partir do JSON.
-- **Componentes**: Renderizam partes do site (textos, listas, formulários, carrosséis, etc).
-- **Elementos**: Unidades atômicas (input, botão, imagem, texto, etc).
-- **Serviços**: Abstraem chamadas de API, cache local, envio de e-mail, validação, etc.
-- **Gerenciamento de Estado**: Utiliza Zustand para formulários dinâmicos.
-
----
-
-## 🛠️ Uso Básico
-
-1. **Importe o que precisa:**
-   ```ts
-   import { MainLayout, PageRenderer, ConstructorService } from 'lib-pixelbuild'
-   ```
-
-2. **Busque a estrutura do site:**
-   ```ts
-   const constructorService = new ConstructorService()
-   const websiteData = await constructorService.fetchWebsiteFromApi(websiteId, apiUrl)
-   ```
-
-3. **Renderize:**
-   ```tsx
-   <MainLayout website={websiteData}>
-     <PageRenderer ga4="GA_TRACKING_ID" title="Título" components={websiteData.pages[0].components} />
-   </MainLayout>
-   ```
-
----
-
-## 🧪 Teste Local
+## Usage
 
-Para desenvolver a biblioteca e ver as alterações automaticamente no projeto consumidor, use o fluxo abaixo.
+```tsx
+import { SiteLayout, PageBuilder } from 'lib-pixelbuild'
+import type { WebsiteType, PageType } from 'lib-pixelbuild'
 
-### 1) Na biblioteca (`lib-pixelbuild`)
-
-```bash
-npm install
-npm run build
-npm link
-npm run link:consumer-peers -- /caminho/para/site
-npm run build:watch
+function App({ website }: { website: WebsiteType }) {
+  const page = website.pages[0]
+  return (
+    <SiteLayout website={website} imageBaseUrl="/images">
+      <PageBuilder website={website} page={page} editionMode={false} />
+    </SiteLayout>
+  )
+}
 ```
 
-- `npm link` registra a lib globalmente na sua máquina.
-- `npm run link:consumer-peers` força a lib linkada a usar as **mesmas cópias das peer dependencies** do projeto consumidor (ex.: `react`, `react-dom`, `react-router-dom`), evitando conflitos de contexto e `Invalid hook call`.
-- `npm run build:watch` recompila automaticamente sempre que você alterar algo em `src/`.
-- Antes de rodar o link, garanta que o consumidor já executou `npm install`.
+## Development — hot-reload
 
-### 2) No projeto consumidor
+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:
 
-Rodar apenas o install, fazer todo o processo na lib e depois rodar o link e npm start
-
-```bash
-npm install
-npm link lib-pixelbuild
-npm start
+```js
+'lib-pixelbuild': path.resolve(__dirname, '../lib-pixelbuild/src/index.ts')
 ```
 
-Quando você salvar mudanças na lib, o `dist/` será atualizado e o projeto consumidor refletirá as alterações.
+Isso significa que:
 
-> Se o `MainLayout` renderiza mas o `PageRenderer` não entra no `<Outlet />`, também pode ser duplicidade de `react-router-dom` no `npm link`. O comando `npm run link:consumer-peers -- /caminho/para/site` corrige isso ao alinhar peers da lib com o consumidor.
+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
 
-> Se o comando retornar `Nenhuma peer dependency encontrada no consumidor para linkar`, normalmente o caminho do projeto consumidor está incorreto ou as dependências ainda não foram instaladas nesse projeto.
+**Pré-requisito:** o consumidor precisa ter todas as peer dependencies instaladas.
 
-### 3) (Opcional) Limpeza do link
-
-Na lib:
+### Fluxo de desenvolvimento
 
 ```bash
-npm run unlink:global
-```
+# Terminal 1: lib (não precisa rodar nada, só editar os arquivos)
+cd lib-pixelbuild
 
-No consumidor:
-
-```bash
-npm unlink lib-pixelbuild
-npm install
+# Terminal 2: consumidor
+cd site-avalloneadvogados
+npm run dev   # hot-reload reflete alterações na lib automaticamente
 ```
 
----
+### Build para produção
 
-## 🏷️ Scripts
+```bash
+cd lib-pixelbuild
+npm run build      # compila dist/
 
-- `npm run build` — Compila a biblioteca para produção.
-- `npm run build:watch` — Compila em modo watch e aplica o ajuste ESM automaticamente em `dist`.
-- `npm run lint` — Lint nos arquivos.
-- `npm run lint:fix` — Corrige problemas de lint automaticamente.
-- `npm run format` — Formata o código com Prettier.
-- `npm run link:global` — Atalho para `npm link`.
-- `npm run unlink:global` — Remove o link global local da lib.
-- `npm run link:consumer-peers -- /caminho/consumidor` — Linka as `peerDependencies` do consumidor na lib (incluindo `react`, `react-dom` e `react-router-dom`).
+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
+## Publicação
 
 ```bash
-npm run build
+# 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 |
 
-## 📚 Tipos Exportados
+## Project Structure
 
-A biblioteca exporta todos os tipos necessários para tipar dados, componentes e elementos dinamicamente.
+```
+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
 
-## 📋 Dependências Principais
+```ts
+// Components
+Header  Footer  SiteLayout
+PageBuilder  SectionRenderer  LoadingComponent
 
-- React
-- React Bootstrap
-- Zustand
-- dompurify
-- react-icons
-- react-input-mask
-- react-helmet-async
+// Factories
+ComponentFactory  ElementFactory
+buttonActionFactory  →  configureEmail(config)
 
----
+// Constants
+ComponentTypeEnum  ElementTypeEnum
+analyticsService
 
-## 📝 Exemplo de Estrutura de Dados
+// Types
+RawWebsiteType  WebsiteType  PageType  SectionType
+SectionColumnType  ColumnWidthType  ComponentType
+ElementType  PropertiesType  StylesType
+EmailServiceConfig
+```
 
-Veja o tipo `RawWebsiteType` em `src/types/RawWebsiteType.ts` para um exemplo completo de como estruturar o JSON do site.
+## Note
 
----
+This library is under active development. Breaking changes expected until v1.0.

package/dist/builders/PageBuilder.d.ts

@@ -1,7 +1,8 @@
 import type { WebsiteType } from '../types/WebsiteType.js';
 import type { PageType } from '../types/PageType.js';
-export declare function PageBuilder({ website, page, editionMode }: {
+declare const PageBuilder: import("react").NamedExoticComponent<{
     readonly website: WebsiteType;
     readonly page: PageType;
     readonly editionMode: boolean;
-}): import("react").JSX.Element;
+}>;
+export { PageBuilder };

package/dist/builders/PageBuilder.js

@@ -1,40 +1,49 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense } from 'react';
+import { Suspense, memo, useMemo } from 'react';
 import { Helmet } from 'react-helmet-async';
-import { Menu } from '../layouts/Menu.js';
 import { SectionRenderer } from '../renderers/SectionRenderer.js';
-export function PageBuilder({ website, page, editionMode }) {
-    const wStyles = Object.assign({}, (website.styles || {}));
-    const pStyles = Object.assign({}, (page.styles || {}));
-    const mergedStyles = Object.assign({}, wStyles);
-    for (const key of Object.keys(pStyles)) {
-        const val = pStyles[key];
+function mergeStyles(websiteStyles, pageStyles) {
+    const merged = Object.assign({}, websiteStyles);
+    for (const key of Object.keys(pageStyles)) {
+        const val = pageStyles[key];
         if (val !== '' && val !== null && val !== undefined) {
-            mergedStyles[key] = val;
+            ;
+            merged[key] = val;
         }
     }
-    return (_jsxs(Suspense, { fallback: _jsx("div", { children: website.properties.loadingMessage }), children: [!editionMode && (_jsxs(Helmet, { children: [_jsx("title", { children: page.title }), _jsx("meta", { name: "description", content: page.title }), _jsx("meta", { property: "og:title", content: page.title }), _jsx("meta", { property: "og:description", content: page.title }), _jsx("meta", { property: "og:image", content: page.title })] })), _jsx(Menu, { page: page, websitePages: website.pages }), _jsxs("div", { style: {
-                    backgroundColor: mergedStyles.backgroundColor,
-                    color: mergedStyles.color,
-                    backgroundImage: mergedStyles.backgroundGradientColorStart
-                        ? `linear-gradient(${mergedStyles.backgroundGradientColorStart}, ${mergedStyles.backgroundGradientColorEnd}), url(${mergedStyles.backgroundImage})`
-                        : mergedStyles.backgroundImage
-                            ? `url(${mergedStyles.backgroundImage})`
-                            : undefined,
-                    backgroundSize: mergedStyles.backgroundSize,
-                    backgroundPosition: mergedStyles.backgroundPosition,
-                    width: mergedStyles.width,
-                    height: mergedStyles.height,
-                    fontSize: mergedStyles.fontSize,
-                    fontWeight: mergedStyles.fontWeight,
-                    textAlign: mergedStyles.textAlign,
-                    paddingTop: mergedStyles.paddingTop,
-                    paddingBottom: mergedStyles.paddingBottom,
-                    paddingLeft: mergedStyles.paddingLeft,
-                    paddingRight: mergedStyles.paddingRight,
-                    marginTop: mergedStyles.marginTop,
-                    marginBottom: mergedStyles.marginBottom,
-                    borderRadius: mergedStyles.borderRadius,
-                    minHeight: page.sections.length === 0 ? '200px' : undefined,
-                }, children: [_jsx(SectionRenderer, { sections: page.sections, editionMode: editionMode }), page.sections.length === 0 && editionMode && (_jsx("div", { style: { padding: '40px', textAlign: 'center', color: '#94a3b8' }, children: "Nenhuma se\u00E7\u00E3o configurada. Use o editor de layout para adicionar conte\u00FAdo." }))] })] }));
+    return merged;
 }
+function toCssValue(val) {
+    if (typeof val === 'string' && val.length > 0)
+        return val;
+    return undefined;
+}
+const PageBuilder = memo(function PageBuilder({ website, page, editionMode }) {
+    const mergedStyles = useMemo(() => mergeStyles(website.styles, page.styles), [website.styles, page.styles]);
+    const pageStyle = useMemo(() => ({
+        backgroundColor: toCssValue(mergedStyles.backgroundColor),
+        color: toCssValue(mergedStyles.color),
+        backgroundImage: mergedStyles.backgroundGradientColorStart
+            ? `linear-gradient(${mergedStyles.backgroundGradientColorStart}, ${mergedStyles.backgroundGradientColorEnd}), url(${mergedStyles.backgroundImage})`
+            : mergedStyles.backgroundImage
+                ? `url(${mergedStyles.backgroundImage})`
+                : undefined,
+        backgroundSize: toCssValue(mergedStyles.backgroundSize),
+        backgroundPosition: toCssValue(mergedStyles.backgroundPosition),
+        width: toCssValue(mergedStyles.width),
+        height: toCssValue(mergedStyles.height),
+        fontSize: toCssValue(mergedStyles.fontSize),
+        fontWeight: toCssValue(mergedStyles.fontWeight),
+        textAlign: mergedStyles.textAlign,
+        paddingTop: toCssValue(mergedStyles.paddingTop),
+        paddingBottom: toCssValue(mergedStyles.paddingBottom),
+        paddingLeft: toCssValue(mergedStyles.paddingLeft),
+        paddingRight: toCssValue(mergedStyles.paddingRight),
+        marginTop: toCssValue(mergedStyles.marginTop),
+        marginBottom: toCssValue(mergedStyles.marginBottom),
+        borderRadius: toCssValue(mergedStyles.borderRadius),
+        minHeight: page.sections.length === 0 ? '200px' : undefined
+    }), [mergedStyles, page.sections.length]);
+    return (_jsxs(Suspense, { fallback: _jsx("div", { children: website.properties.loadingMessage }), children: [!editionMode && (_jsxs(Helmet, { children: [_jsx("title", { children: page.title }), _jsx("meta", { name: "description", content: page.title }), _jsx("meta", { property: "og:title", content: page.title }), _jsx("meta", { property: "og:description", content: page.title }), _jsx("meta", { property: "og:image", content: page.title })] })), _jsxs("div", { style: pageStyle, children: [_jsx(SectionRenderer, { sections: page.sections, editionMode: editionMode }), page.sections.length === 0 && editionMode && (_jsx("div", { style: { padding: '40px', textAlign: 'center', color: '#94a3b8' }, children: "No sections configured. Use the layout editor to add content." }))] })] }));
+});
+export { PageBuilder };

package/dist/components/CardComponent.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { ComponentType } from '../types/ComponentType.js';
-export declare function CardComponent({ component }: {
+declare const CardComponent: import("react").NamedExoticComponent<{
     readonly component: ComponentType;
-}): React.JSX.Element;
+}>;
+export { CardComponent };

package/dist/components/CardComponent.js

@@ -1,47 +1,77 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+import { memo, useMemo } from 'react';
 import { Row, Container } from 'react-bootstrap';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
 const elementFactory = new ElementFactory();
-export function CardComponent({ component }) {
-    const props = component.properties || {};
-    const cardOrder = [
-        props.cardElement1,
-        props.cardElement2,
-        props.cardElement3,
-        props.cardElement4,
-    ].filter(Boolean);
-    const orderedElements = cardOrder.length > 0
-        ? cardOrder
-            .map((type) => component.elements.find((el) => el.elementType === String(type)))
-            .filter(Boolean)
-        : orderBySort(component.elements);
-    const applyCardStyles = (element) => {
-        const overrides = {};
-        if (element.elementType === 'icon') {
-            if (props.cardIconColor)
-                overrides.color = props.cardIconColor;
-            if (props.cardIconSize)
-                overrides.fontSize = props.cardIconSize;
-        }
-        else if (element.elementType === 'title') {
-            if (props.cardTitleColor)
-                overrides.color = props.cardTitleColor;
-            if (props.cardTitleSize)
-                overrides.fontSize = props.cardTitleSize;
-        }
-        else if (element.elementType === 'text') {
-            if (props.cardTextColor)
-                overrides.color = props.cardTextColor;
-            if (props.cardTextSize)
-                overrides.fontSize = props.cardTextSize;
-        }
-        return Object.assign(Object.assign({}, element), { styles: Object.assign(Object.assign({}, element.styles), overrides) });
-    };
-    return (_jsx(Container, { style: component.styles, children: _jsx(Row, { id: "element-row", children: orderedElements.map((element) => {
-                const enhanced = applyCardStyles(element);
-                const e = elementFactory.build(enhanced);
-                return React.cloneElement(e, { key: element.id });
-            }) }) }));
+function applyCardStyles(element, props) {
+    const overrides = {};
+    if (element.elementType === 'icon') {
+        if (props.cardIconColor)
+            overrides.color = props.cardIconColor;
+        if (props.cardIconSize)
+            overrides.fontSize = props.cardIconSize;
+    }
+    else if (element.elementType === 'title') {
+        if (props.cardTitleColor)
+            overrides.color = props.cardTitleColor;
+        if (props.cardTitleSize)
+            overrides.fontSize = props.cardTitleSize;
+    }
+    else if (element.elementType === 'text') {
+        if (props.cardTextColor)
+            overrides.color = props.cardTextColor;
+        if (props.cardTextSize)
+            overrides.fontSize = props.cardTextSize;
+    }
+    return Object.assign(Object.assign({}, element), { styles: Object.assign(Object.assign({}, element.styles), overrides) });
 }
+const CardComponent = memo(function CardComponent({ component }) {
+    const { properties } = component;
+    const cardProps = useMemo(() => ({
+        cardElement1: properties === null || properties === void 0 ? void 0 : properties.cardElement1,
+        cardElement2: properties === null || properties === void 0 ? void 0 : properties.cardElement2,
+        cardElement3: properties === null || properties === void 0 ? void 0 : properties.cardElement3,
+        cardElement4: properties === null || properties === void 0 ? void 0 : properties.cardElement4,
+        cardIconColor: properties === null || properties === void 0 ? void 0 : properties.cardIconColor,
+        cardIconSize: properties === null || properties === void 0 ? void 0 : properties.cardIconSize,
+        cardTitleColor: properties === null || properties === void 0 ? void 0 : properties.cardTitleColor,
+        cardTitleSize: properties === null || properties === void 0 ? void 0 : properties.cardTitleSize,
+        cardTextColor: properties === null || properties === void 0 ? void 0 : properties.cardTextColor,
+        cardTextSize: properties === null || properties === void 0 ? void 0 : properties.cardTextSize
+    }), [
+        properties === null || properties === void 0 ? void 0 : properties.cardElement1,
+        properties === null || properties === void 0 ? void 0 : properties.cardElement2,
+        properties === null || properties === void 0 ? void 0 : properties.cardElement3,
+        properties === null || properties === void 0 ? void 0 : properties.cardElement4,
+        properties === null || properties === void 0 ? void 0 : properties.cardIconColor,
+        properties === null || properties === void 0 ? void 0 : properties.cardIconSize,
+        properties === null || properties === void 0 ? void 0 : properties.cardTitleColor,
+        properties === null || properties === void 0 ? void 0 : properties.cardTitleSize,
+        properties === null || properties === void 0 ? void 0 : properties.cardTextColor,
+        properties === null || properties === void 0 ? void 0 : properties.cardTextSize
+    ]);
+    const orderedElements = useMemo(() => {
+        const cardOrder = [
+            cardProps.cardElement1,
+            cardProps.cardElement2,
+            cardProps.cardElement3,
+            cardProps.cardElement4
+        ].filter((v) => typeof v === 'string' && v.length > 0);
+        if (cardOrder.length > 0) {
+            return cardOrder
+                .map((type) => component.elements.find((el) => el.elementType === type))
+                .filter((el) => el !== undefined);
+        }
+        return orderBySort(component.elements);
+    }, [
+        cardProps.cardElement1,
+        cardProps.cardElement2,
+        cardProps.cardElement3,
+        cardProps.cardElement4,
+        component.elements
+    ]);
+    const elements = useMemo(() => orderedElements.map((el) => applyCardStyles(el, cardProps)), [orderedElements, cardProps]);
+    return (_jsx(Container, { style: component.styles, children: _jsx(Row, { id: "element-row", children: elements.map((element) => elementFactory.build(element)) }) }));
+});
+export { CardComponent };

package/dist/components/FormComponent.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { ComponentType } from '../types/ComponentType.js';
-export declare function FormComponent({ component }: {
+declare const FormComponent: import("react").NamedExoticComponent<{
     readonly component: ComponentType;
-}): React.JSX.Element;
+}>;
+export { FormComponent };

package/dist/components/FormComponent.js

@@ -1,25 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useEffect } from 'react';
+import { memo, useEffect, useMemo } from 'react';
 import { Form, Row } from 'react-bootstrap';
 import { UseFormStore } from '../stores/UseFormStore.js';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
 const elementFactory = new ElementFactory();
-export function FormComponent({ component }) {
+const FormComponent = memo(function FormComponent({ component }) {
     const registerForm = UseFormStore((state) => state.registerForm);
     useEffect(() => {
         registerForm(component.id);
     }, [registerForm, component.id]);
-    const handleSubmit = async (event) => {
-        try {
-            event.preventDefault();
-        }
-        catch (error) {
-            console.error('Erro ao enviar o formulário:', error);
-        }
+    const elements = useMemo(() => orderBySort(component.elements), [component.elements]);
+    const handleSubmit = (event) => {
+        event.preventDefault();
     };
-    return (_jsx(Form, { onSubmit: handleSubmit, children: _jsx(Row, { children: orderBySort(component.elements).map((element) => {
-                const e = elementFactory.build(element, component.id);
-                return React.cloneElement(e, { key: element.id });
-            }) }) }));
-}
+    return (_jsx(Form, { onSubmit: handleSubmit, children: _jsx(Row, { children: elements.map((element) => elementFactory.build(element, component.id)) }) }));
+});
+export { FormComponent };

package/dist/components/ListComponent.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentType } from '../types/ComponentType.js';
-export declare function ListComponent({ component }: {
+declare const ListComponent: import("react").NamedExoticComponent<{
     readonly component: ComponentType;
-}): import("react").JSX.Element;
+}>;
+export { ListComponent };

package/dist/components/ListComponent.js

@@ -1,24 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
 import { Col } from 'react-bootstrap';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { ElementTypeEnum } from '../constants/ElementEnum.js';
 import { orderBySort } from '../utils/orderBySort.js';
 const elementFactory = new ElementFactory();
-export function ListComponent({ component }) {
-    const elements = orderBySort(component.elements);
-    const items = [];
-    for (let i = 0; i < elements.length; i++) {
-        const current = elements[i];
-        if (current.elementType === ElementTypeEnum.Icon) {
-            const next = elements[i + 1];
-            if ((next === null || next === void 0 ? void 0 : next.elementType) === ElementTypeEnum.Text || (next === null || next === void 0 ? void 0 : next.elementType) === ElementTypeEnum.Title) {
-                items.push({ icon: current, text: next, id: current.id });
-                i++;
-            }
-            else {
-                items.push({ icon: current, text: null, id: current.id });
+const ListComponent = memo(function ListComponent({ component }) {
+    const elements = useMemo(() => orderBySort(component.elements), [component.elements]);
+    const items = useMemo(() => {
+        const result = [];
+        for (let i = 0; i < elements.length; i++) {
+            const current = elements[i];
+            if (current.elementType === ElementTypeEnum.Icon) {
+                const next = elements[i + 1];
+                if ((next === null || next === void 0 ? void 0 : next.elementType) === ElementTypeEnum.Text || (next === null || next === void 0 ? void 0 : next.elementType) === ElementTypeEnum.Title) {
+                    result.push({ icon: current, text: next, id: current.id });
+                    i++;
+                }
+                else {
+                    result.push({ icon: current, text: null, id: current.id });
+                }
             }
         }
-    }
+        return result;
+    }, [elements]);
     return (_jsx(Col, { style: component.styles, children: _jsx("ul", { style: { listStyle: 'none' }, children: items.map(({ icon, text, id }) => (_jsxs("li", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '8px' }, children: [_jsx("span", { children: elementFactory.build(icon) }), _jsx("span", { style: { fontSize: '22px' }, children: text ? elementFactory.build(text) : null })] }, id))) }) }));
-}
+});
+export { ListComponent };

package/dist/components/LoadingComponent.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Container, Spinner } from 'react-bootstrap';
 export function LoadingComponent() {
-    return (_jsxs(Container, { className: "d-flex flex-column align-items-center justify-content-center", style: { minHeight: '100vh' }, children: [_jsx("output", { "aria-busy": "true", children: _jsx(Spinner, { animation: "border" }) }), _jsx("p", { className: "mt-3", children: "CARREGANDO" })] }));
+    return (_jsxs(Container, { className: "d-flex flex-column align-items-center justify-content-center", style: { minHeight: '100vh' }, children: [_jsx("output", { "aria-busy": "true", children: _jsx(Spinner, { animation: "border" }) }), _jsx("p", { className: "mt-3", children: "LOADING" })] }));
 }