lib-pixelbuild 0.1.0

package/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2025 Lucas da Silva
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,176 @@
+# lib-pixelbuild
+
+> **Para IA:** leia [docs/AI_CONTEXT.md](docs/AI_CONTEXT.md) antes de alterar esta biblioteca.
+
+> **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.
+
+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.
+
+---
+
+## ✨ 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
+
+```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
+
+```
+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
+```
+
+---
+
+## 🧩 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
+
+Para desenvolver a biblioteca e ver as alterações automaticamente no projeto consumidor, use o fluxo abaixo.
+
+### 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
+```
+
+- `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`.
+
+### 2) No projeto consumidor
+
+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
+```
+
+Quando você salvar mudanças na lib, o `dist/` será atualizado e o projeto consumidor refletirá as alterações.
+
+> 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.
+
+> 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.
+
+### 3) (Opcional) Limpeza do link
+
+Na lib:
+
+```bash
+npm run unlink:global
+```
+
+No consumidor:
+
+```bash
+npm unlink lib-pixelbuild
+npm install
+```
+
+---
+
+## 🏷️ Scripts
+
+- `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`).
+
+---
+
+## 📦 Publicação
+
+```bash
+npm run build
+
+npm publish --access public
+```
+
+---
+
+## 📚 Tipos Exportados
+
+A biblioteca exporta todos os tipos necessários para tipar dados, componentes e elementos dinamicamente.
+
+---
+
+## 📋 Dependências Principais
+
+- React
+- React Bootstrap
+- Zustand
+- dompurify
+- react-icons
+- react-input-mask
+- react-helmet-async
+
+---
+
+## 📝 Exemplo de Estrutura de Dados
+
+Veja o tipo `RawWebsiteType` em `src/types/RawWebsiteType.ts` para um exemplo completo de como estruturar o JSON do site.
+
+---

package/dist/builders/PageBuilder.d.ts

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

package/dist/builders/PageBuilder.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense } 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];
+        if (val !== '' && val !== null && val !== undefined) {
+            mergedStyles[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 }), 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." }))] })] }));
+}

package/dist/components/CardComponent.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from '../types/ComponentType.js';
+export declare function CardComponent({ component }: {
+    readonly component: ComponentType;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/CardComponent.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Row, Container } from 'react-bootstrap';
+import { ElementFactory } from '../factories/ElementFactory.js';
+export function CardComponent({ component }) {
+    const elementFactory = new ElementFactory();
+    return (_jsx(Container, { style: component.styles, children: _jsx(Row, { id: "element-row", children: component.elements
+                .sort((a, b) => a.sort - b.sort)
+                .map((element) => {
+                const e = elementFactory.build(element);
+                return React.cloneElement(e, { key: element.id });
+            }) }) }));
+}

package/dist/components/CarouselComponent.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from '../types/ComponentType.js';
+export declare function CarouselComponent({ component }: {
+    readonly component: ComponentType;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/CarouselComponent.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Row, Col, Carousel } from 'react-bootstrap';
+export function CarouselComponent({ component }) {
+    return (_jsx(Row, { children: _jsx(Col, { children: _jsx(Carousel, { indicators: false, className: "slider", children: component.elements
+                    .sort((a, b) => a.sort - b.sort)
+                    .map((element, index) => (_jsx(Carousel.Item, { children: _jsx("img", { src: String(element.properties.name || element.properties.src || ''), alt: String(element.properties.title || element.properties.alt || ''), style: { width: '100%', height: 'auto', objectFit: 'cover' } }) }, element.id || index))) }) }) }));
+}

package/dist/components/FormComponent.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from '../types/ComponentType.js';
+export declare function FormComponent({ component }: {
+    readonly component: ComponentType;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/FormComponent.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect } from 'react';
+import { Form, Row } from 'react-bootstrap';
+import { UseFormStore } from '../stores/UseFormStore.js';
+import { ElementFactory } from '../factories/ElementFactory.js';
+export function FormComponent({ component }) {
+    const elementFactory = new ElementFactory();
+    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);
+        }
+    };
+    return (_jsx(Form, { noValidate: true, onSubmit: handleSubmit, style: { textAlign: 'left' }, children: _jsx(Row, { style: { padding: '50px' }, children: component.elements
+                .sort((a, b) => a.sort - b.sort)
+                .map((element) => {
+                const e = elementFactory.build(element);
+                return React.cloneElement(e, { key: element.id });
+            }) }) }));
+}

package/dist/components/ListComponent.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from '../types/ComponentType.js';
+export declare function ListComponent({ component }: {
+    readonly component: ComponentType;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/ListComponent.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Col } from 'react-bootstrap';
+import { ElementFactory } from '../factories/ElementFactory.js';
+import { ElementTypeEnum } from '../constants/ElementEnum.js';
+export function ListComponent({ component }) {
+    const elementFactory = new ElementFactory();
+    const elements = component.elements.sort((a, b) => a.sort - b.sort);
+    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 });
+            }
+        }
+    }
+    return (_jsx(Col, { style: component.styles, children: _jsx("ul", { style: { listStyle: 'none', padding: 0, margin: 0 }, 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))) }) }));
+}

package/dist/components/LoadingComponent.d.ts

@@ -0,0 +1 @@
+export declare function LoadingComponent(): import("react/jsx-runtime").JSX.Element;

package/dist/components/LoadingComponent.js

@@ -0,0 +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" })] }));
+}

package/dist/components/MapComponent.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from '../types/ComponentType.js';
+export declare function MapComponent({ component }: {
+    readonly component: ComponentType;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/MapComponent.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Row, Col } from 'react-bootstrap';
+export function MapComponent({ component }) {
+    const { lat, lng, zoom = 15, height = '400px' } = component.properties;
+    const src = lat && lng
+        ? `https://maps.google.com/maps?q=${lat},${lng}&z=${zoom}&output=embed`
+        : null;
+    return (_jsx(Col, { style: component.styles, children: _jsx(Row, { children: _jsx(Col, { style: { padding: 0 }, children: src ? (_jsx("iframe", { title: "Localiza\u00E7\u00E3o", src: src, width: "100%", height: height, style: { border: 0, borderRadius: '4px' }, allowFullScreen: true, loading: "lazy", referrerPolicy: "no-referrer-when-downgrade" })) : (_jsx("div", { style: {
+                        width: '100%',
+                        height,
+                        backgroundColor: '#e0e0e0',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        borderRadius: '4px',
+                        color: '#666',
+                    }, children: "Mapa n\u00E3o configurado" })) }) }) }));
+}

package/dist/components/SliderComponent.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentType } from '../types/ComponentType.js';
+import 'keen-slider/keen-slider.min.css';
+export declare function SliderComponent({ component }: {
+    readonly component: ComponentType;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/SliderComponent.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Row, Col } from 'react-bootstrap';
+import { useKeenSlider } from 'keen-slider/react.js';
+import { ElementFactory } from '../factories/ElementFactory.js';
+import 'keen-slider/keen-slider.min.css';
+export function SliderComponent({ component }) {
+    const elementFactory = new ElementFactory();
+    const [ref] = useKeenSlider({
+        loop: true,
+        mode: 'snap',
+        slides: { perView: 1, spacing: 10 },
+    });
+    return (_jsx(Col, { style: component.styles, children: _jsx(Row, { id: "element-row", children: _jsx(Col, { children: _jsx("div", { ref: ref, className: "keen-slider", children: component.elements
+                        .sort((a, b) => a.sort - b.sort)
+                        .map((element) => (_jsx("div", { className: "keen-slider__slide", children: elementFactory.build(element) }, element.id))) }) }) }) }));
+}

package/dist/components/SocialIconsComponent.d.ts

@@ -0,0 +1,4 @@
+import type { SocialPropertiesType } from '../types/SocialPropertiesType.js';
+export declare function SocialIconsComponent({ social }: {
+    readonly social: SocialPropertiesType;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/SocialIconsComponent.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Row, Col } from 'react-bootstrap';
+import { FaFacebookF, FaInstagram, FaLink } from 'react-icons/fa';
+export function SocialIconsComponent({ social }) {
+    var _a, _b, _c;
+    const all = [];
+    if ((_a = social.facebook) === null || _a === void 0 ? void 0 : _a.path) {
+        all.push({ id: 'facebook', url: social.facebook.path, icon: FaFacebookF, description: 'Logo do Facebook' });
+    }
+    if ((_b = social.instagram) === null || _b === void 0 ? void 0 : _b.path) {
+        all.push({ id: 'instagram', url: social.instagram.path, icon: FaInstagram, description: 'Logo do Instagram' });
+    }
+    if ((_c = social.linktree) === null || _c === void 0 ? void 0 : _c.path) {
+        all.push({ id: 'linktree', url: social.linktree.path, icon: FaLink, description: 'Logo do Linktree' });
+    }
+    if (all.length === 0)
+        return null;
+    return (_jsx(Row, { children: all.map((element) => (_jsx(Col, { className: "text-center social-icons", style: { color: '#FFCC00' }, children: _jsx("a", { href: element.url, target: "_blank", rel: "noreferrer", "aria-label": element.description, children: _jsx(element.icon, {}) }) }, element.id))) }));
+}

package/dist/components/TextComponent.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from '../types/ComponentType.js';
+export declare function TextComponent({ component }: {
+    readonly component: ComponentType;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/TextComponent.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Row, Container } from 'react-bootstrap';
+import { ElementFactory } from '../factories/ElementFactory.js';
+export function TextComponent({ component }) {
+    const elementFactory = new ElementFactory();
+    return (_jsx(Container, { style: component.styles, children: _jsx(Row, { id: "element-row", children: component.elements
+                .sort((a, b) => a.sort - b.sort)
+                .map((element) => {
+                const e = elementFactory.build(element);
+                return React.cloneElement(e, { key: element.id });
+            }) }) }));
+}

package/dist/constants/ButtonActionEnum.d.ts

@@ -0,0 +1,4 @@
+declare const ButtonActionEnum: {
+    readonly SendMail: 1;
+};
+export { ButtonActionEnum };

package/dist/constants/ButtonActionEnum.js

@@ -0,0 +1,5 @@
+const ButtonActionEnum = {
+    SendMail: 1,
+};
+Object.freeze(ButtonActionEnum);
+export { ButtonActionEnum };

package/dist/constants/ComponentEnum.d.ts

@@ -0,0 +1,17 @@
+export declare const ComponentTypeEnum: {
+    readonly TextWithImage: "text-with-image";
+    readonly Form: "form";
+    readonly Slider: "slider";
+    readonly Card: "card";
+    readonly Text: "text";
+    readonly Image: "image";
+    readonly Video: "video";
+    readonly Gallery: "gallery";
+    readonly Testimonials: "testimonials";
+    readonly Faq: "faq";
+    readonly HeroBanner: "hero-banner";
+    readonly SocialIcons: "social-icons";
+    readonly Map: "map";
+    readonly List: "list";
+};
+export type ComponentTypeSlug = (typeof ComponentTypeEnum)[keyof typeof ComponentTypeEnum];

package/dist/constants/ComponentEnum.js

@@ -0,0 +1,16 @@
+export const ComponentTypeEnum = {
+    TextWithImage: 'text-with-image',
+    Form: 'form',
+    Slider: 'slider',
+    Card: 'card',
+    Text: 'text',
+    Image: 'image',
+    Video: 'video',
+    Gallery: 'gallery',
+    Testimonials: 'testimonials',
+    Faq: 'faq',
+    HeroBanner: 'hero-banner',
+    SocialIcons: 'social-icons',
+    Map: 'map',
+    List: 'list',
+};

package/dist/constants/ElementEnum.d.ts

@@ -0,0 +1,18 @@
+export declare const ElementTypeEnum: {
+    readonly Input: "input";
+    readonly Textarea: "textarea";
+    readonly Select: "select";
+    readonly Button: "button";
+    readonly Image: "image";
+    readonly Icon: "icon";
+    readonly Title: "title";
+    readonly Text: "text";
+    readonly Link: "link";
+    readonly File: "file";
+    readonly Alert: "alert";
+    readonly Video: "video";
+    readonly Checkbox: "checkbox";
+    readonly Radio: "radio";
+    readonly Divider: "divider";
+};
+export type ElementTypeSlug = (typeof ElementTypeEnum)[keyof typeof ElementTypeEnum];

package/dist/constants/ElementEnum.js

@@ -0,0 +1,17 @@
+export const ElementTypeEnum = {
+    Input: 'input',
+    Textarea: 'textarea',
+    Select: 'select',
+    Button: 'button',
+    Image: 'image',
+    Icon: 'icon',
+    Title: 'title',
+    Text: 'text',
+    Link: 'link',
+    File: 'file',
+    Alert: 'alert',
+    Video: 'video',
+    Checkbox: 'checkbox',
+    Radio: 'radio',
+    Divider: 'divider',
+};

package/dist/constants/InputValidateEnum.d.ts

@@ -0,0 +1,8 @@
+declare const InputValidateEnum: {
+    readonly Name: 1;
+    readonly BirthDate: 2;
+    readonly Cpf: 3;
+    readonly Email: 4;
+    readonly Phone: 5;
+};
+export { InputValidateEnum };

package/dist/constants/InputValidateEnum.js

@@ -0,0 +1,9 @@
+const InputValidateEnum = {
+    Name: 1,
+    BirthDate: 2,
+    Cpf: 3,
+    Email: 4,
+    Phone: 5,
+};
+Object.freeze(InputValidateEnum);
+export { InputValidateEnum };

package/dist/elements/AlertElement.d.ts

@@ -0,0 +1,4 @@
+import type { ElementType } from '../types/ElementType.js';
+export declare function AlertElement({ element }: {
+    readonly element: ElementType;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/elements/AlertElement.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Alert } from 'react-bootstrap';
+import { UseFormStore } from '../stores/UseFormStore.js';
+import { ElementColWrapper } from './ElementColWrapper.js';
+export function AlertElement({ element }) {
+    const properties = element.properties;
+    const hidden = UseFormStore((state) => { var _a; return (_a = state.elements[element.id]) === null || _a === void 0 ? void 0 : _a.hidden; });
+    const registerElement = UseFormStore((state) => state.registerElement);
+    useEffect(() => {
+        registerElement(element.id, element.properties.componentId, {
+            type: 'alert',
+            hidden: Boolean(properties.startHidden)
+        });
+    }, [element.id, properties.startHidden, registerElement]);
+    if (hidden)
+        return null;
+    return (_jsx(ElementColWrapper, { element: element, children: _jsxs(Alert, { hidden: hidden, variant: String(properties.type || 'info'), style: element.styles, children: [_jsx(Alert.Heading, { children: String(properties.title || '') }), _jsx("p", { className: "mb-0", children: String(properties.message || '') })] }) }));
+}

package/dist/elements/ButtonElement.d.ts

@@ -0,0 +1,4 @@
+import type { ElementType } from '../types/ElementType.js';
+export declare function ButtonElement({ element }: {
+    readonly element: ElementType;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/elements/ButtonElement.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Button, Spinner } from 'react-bootstrap';
+import { ElementColWrapper } from './ElementColWrapper.js';
+import { UseFormStore } from '../stores/UseFormStore.js';
+import { ButtonActionFactory } from '../factories/ButtonActionFactory.js';
+export function ButtonElement({ element }) {
+    var _a;
+    const properties = element.properties;
+    const hidden = UseFormStore((state) => { var _a; return (_a = state.elements[element.id]) === null || _a === void 0 ? void 0 : _a.hidden; });
+    const loading = UseFormStore((state) => { var _a; return (_a = state.elements[element.id]) === null || _a === void 0 ? void 0 : _a.loading; });
+    const showElement = UseFormStore((state) => state.showElement);
+    const hideElement = UseFormStore((state) => state.hideElement);
+    const registerElement = UseFormStore((state) => state.registerElement);
+    useEffect(() => {
+        registerElement(element.id, properties.componentId, {
+            type: 'button',
+            hidden: Boolean(properties.startHidden)
+        });
+    }, [element.id, properties.startHidden, registerElement]);
+    async function handleClick(event) {
+        var _a;
+        if (!properties.path) {
+            event.preventDefault();
+            UseFormStore.getState().validateAllFields(properties.componentId);
+            const formData = UseFormStore.getState().getElementsByForm(properties.componentId);
+            const hasErrors = formData.some((e) => e.error);
+            if (hasErrors)
+                return false;
+            UseFormStore.getState().setElementState(element.id, { loading: true });
+            if (properties.actionId) {
+                const buttonActionFactory = new ButtonActionFactory();
+                await buttonActionFactory.build(properties.actionId, formData);
+            }
+            setTimeout(() => {
+                if (properties.hideOnClick)
+                    hideElement(element.id);
+                if (properties.successMessageId)
+                    showElement(properties.successMessageId);
+                if (properties.successActionId)
+                    showElement(properties.successActionId);
+                UseFormStore.getState().setElementState(element.id, { loading: false });
+            }, (_a = properties.loadingTime) !== null && _a !== void 0 ? _a : 0);
+        }
+    }
+    if (hidden)
+        return null;
+    return (_jsx(ElementColWrapper, { element: element, children: _jsx(Button, { as: properties.path ? 'a' : 'button', type: properties.type === 'button' || properties.type === 'submit' || properties.type === 'reset'
+                ? properties.type : undefined, variant: String(properties.type || 'primary'), href: String(properties.path || ''), target: properties.path ? '_blank' : undefined, rel: properties.path ? 'noopener noreferrer' : undefined, disabled: loading, onClick: handleClick, style: element.styles, children: loading ? (_jsxs(_Fragment, { children: [_jsx("output", { "aria-busy": "true", children: _jsx(Spinner, { as: "span", animation: "border", size: "sm", "aria-hidden": "true" }) }), ' ' + (String((_a = properties.message) !== null && _a !== void 0 ? _a : ''))] })) : (String(properties.title || '')) }) }));
+}