lib-pixelbuild 0.2.0 → 0.2.2

package/dist/services/EmailService.d.ts

@@ -3,15 +3,24 @@ import type { MailBodyType } from '../types/MailBodyType.js';
 export interface EmailServiceConfig {
     apiUrl: string;
     authToken: string;
-    senderName: string;
+    websiteId: number | string;
     sender: string;
-    recipientName: string;
-    recipient: string;
+    senderName?: string;
+    defaultRecipient?: string;
+    defaultRecipientName?: string;
+    defaultSubject?: string;
+}
+export interface EmailSendOptions {
+    recipient?: string;
+    recipientName?: string;
+    subject?: string;
+    formId?: number | string;
+    websiteName?: string;
 }
 declare class EmailService {
     private readonly config;
     constructor(config: EmailServiceConfig);
-    sendMail(params: FormFieldsType[]): Promise<boolean>;
-    createBody(params: FormFieldsType[]): MailBodyType;
+    sendMail(params: FormFieldsType[], options?: EmailSendOptions): Promise<boolean>;
+    createBody(params: FormFieldsType[], options?: EmailSendOptions): MailBodyType;
 }
 export { EmailService };

package/dist/services/EmailService.js

@@ -1,14 +1,18 @@
+import { buildFormEmailHtml } from '../utils/emailTemplate.js';
+const DEFAULT_SUBJECT = 'Mensagem enviada pelo formulário do site';
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 class EmailService {
     constructor(config) {
         this.config = config;
     }
-    async sendMail(params) {
-        const body = this.createBody(params);
+    async sendMail(params, options = {}) {
+        const body = this.createBody(params, options);
         const response = await fetch(`${this.config.apiUrl}/send-mail`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
-                Authorization: `Bearer ${this.config.authToken}`
+                Authorization: `Bearer ${this.config.authToken}`,
+                'X-Website-Id': String(this.config.websiteId)
             },
             body: JSON.stringify(body)
         });
@@ -17,27 +21,22 @@ class EmailService {
         }
         return true;
     }
-    createBody(params) {
-        var _a, _b, _c, _d, _e, _f;
-        const firstName = params.find((e) => e.name === 'firstNameInput');
-        const lastName = params.find((e) => e.name === 'lastNameInput');
-        const birthDate = params.find((e) => e.name === 'birthDateField');
-        const document = params.find((e) => e.name === 'documentField');
-        const email = params.find((e) => e.name === 'emailField');
-        const phone = params.find((e) => e.name === 'phoneField');
+    createBody(params, options = {}) {
+        var _a;
+        const rows = params
+            .filter((field) => { var _a; return field.name && String((_a = field.value) !== null && _a !== void 0 ? _a : '').trim() !== ''; })
+            .map((field) => { var _a; return ({ label: field.name, value: String((_a = field.value) !== null && _a !== void 0 ? _a : '') }); });
+        const emailField = params.find((field) => { var _a; return /email/i.test(field.name) || EMAIL_REGEX.test(String((_a = field.value) !== null && _a !== void 0 ? _a : '')); });
+        const subject = options.subject || this.config.defaultSubject || DEFAULT_SUBJECT;
         return {
-            senderName: this.config.senderName,
+            senderName: this.config.senderName || options.websiteName || 'PixelBuild',
             sender: this.config.sender,
-            recipientName: this.config.recipientName,
-            recipient: this.config.recipient,
-            title: 'Mensagem enviada pelo formulário do site',
-            message: [
-                `Nome: ${(_a = firstName === null || firstName === void 0 ? void 0 : firstName.value) !== null && _a !== void 0 ? _a : ''} ${(_b = lastName === null || lastName === void 0 ? void 0 : lastName.value) !== null && _b !== void 0 ? _b : ''}`,
-                `Data de Nascimento: ${(_c = birthDate === null || birthDate === void 0 ? void 0 : birthDate.value) !== null && _c !== void 0 ? _c : ''}`,
-                `CPF: ${(_d = document === null || document === void 0 ? void 0 : document.value) !== null && _d !== void 0 ? _d : ''}`,
-                `E-mail: ${(_e = email === null || email === void 0 ? void 0 : email.value) !== null && _e !== void 0 ? _e : ''}`,
-                `Celular: ${(_f = phone === null || phone === void 0 ? void 0 : phone.value) !== null && _f !== void 0 ? _f : ''}`
-            ].filter(Boolean).join('\n')
+            recipientName: options.recipientName || this.config.defaultRecipientName || 'Site',
+            recipient: options.recipient || this.config.defaultRecipient || '',
+            title: subject,
+            message: buildFormEmailHtml(subject, rows),
+            isHtml: true,
+            lead: Object.assign(Object.assign({ formId: (_a = options.formId) !== null && _a !== void 0 ? _a : null }, Object.fromEntries(rows.map((row) => [row.label, row.value]))), (emailField ? { email: emailField.value } : {}))
         };
     }
 }

package/dist/stores/UseFormStore.d.ts

@@ -11,14 +11,19 @@ export interface FormElement {
     inputValidateId: number | null;
     [key: string]: string | number | boolean | null;
 }
+export interface FormEmailConfig {
+    recipient?: string;
+    subject?: string;
+}
 export interface FormEntry {
     elements: string[];
-    [key: string]: string[] | null;
+    email?: FormEmailConfig;
+    [key: string]: string[] | FormEmailConfig | null | undefined;
 }
 export interface FormStoreState {
     forms: Record<string, FormEntry>;
     elements: Record<string, FormElement>;
-    registerForm: (formId: number) => void;
+    registerForm: (formId: number, emailConfig?: FormEmailConfig) => void;
     registerElement: (elementId: number, formId?: number | null, initialState?: Partial<FormElement>) => void;
     unregisterElement: (elementId: number) => void;
     validateFormData: (inputValidateId: number, elementId: number, value: string) => void;

package/dist/stores/UseFormStore.js

@@ -3,9 +3,14 @@ import { InputValidateFactory } from '../factories/InputValidateFactory.js';
 const UseFormStore = create((set, get) => ({
     forms: {},
     elements: {},
-    registerForm: (formId) => set((state) => ({
-        forms: Object.assign(Object.assign({}, state.forms), { [formId]: state.forms[formId] || { elements: [] } })
-    })),
+    registerForm: (formId, emailConfig) => set((state) => {
+        const existing = state.forms[formId];
+        const nextForm = existing
+            ? Object.assign(Object.assign({}, existing), (emailConfig ? { email: emailConfig } : {})) : Object.assign({ elements: [] }, (emailConfig ? { email: emailConfig } : {}));
+        return {
+            forms: Object.assign(Object.assign({}, state.forms), { [formId]: nextForm })
+        };
+    }),
     registerElement: (elementId, formId = null, initialState = {}) => set((state) => {
         var _a, _b;
         const existingElement = state.elements[elementId];

package/dist/types/ElementType.d.ts

@@ -8,4 +8,5 @@ export interface ElementType {
     styles: StylesType;
     width: ColumnWidthType;
     offset: ColumnWidthType;
+    fullBleed?: boolean;
 }

package/dist/types/EmailSettingsType.d.ts

@@ -0,0 +1,5 @@
+export interface EmailSettingsType {
+    recipient?: string;
+    recipientName?: string;
+    subject?: string;
+}

package/dist/types/EmailSettingsType.js

@@ -0,0 +1 @@
+export {};

package/dist/types/HeaderPropertiesType.d.ts

@@ -1,5 +1,6 @@
 export interface HeaderPropertiesType {
     logoAlign: 'left' | 'right' | 'center';
+    logoWidth?: string | number;
     showLogo: boolean;
     showMenu: boolean;
 }

package/dist/types/MailBodyType.d.ts

@@ -5,4 +5,6 @@ export interface MailBodyType {
     recipient: string;
     title: string;
     message: string;
+    isHtml?: boolean;
+    lead?: Record<string, unknown>;
 }

package/dist/types/SocialPropertiesType.d.ts

@@ -1,11 +1,3 @@
-export interface SocialPropertiesType {
-    instagram: {
-        path: string;
-    };
-    facebook: {
-        path: string;
-    };
-    linktree: {
-        path: string;
-    };
-}
+export type SocialPropertiesType = Record<string, {
+    path?: string;
+} | undefined>;

package/dist/types/StylesType.d.ts

@@ -2,7 +2,12 @@ export type Float = 'left' | 'right' | 'none' | 'inline-start' | 'inline-end';
 export type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
 export type ObjectFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 export type FontWeight = 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+export type BreakpointKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ResponsiveStylesType = {
+    [key in BreakpointKey]?: Partial<Omit<StylesType, 'responsive'>>;
+};
 export interface StylesType {
+    responsive?: ResponsiveStylesType;
     alignItems?: string;
     backgroundColor?: string;
     backgroundGradientColorStart?: string;
@@ -18,6 +23,7 @@ export interface StylesType {
     display?: string;
     float?: Float;
     fluid?: boolean;
+    fontFamily?: string;
     fontSize?: string;
     fontWeight?: FontWeight;
     height?: string;
@@ -25,6 +31,12 @@ export interface StylesType {
     marginLeft?: string;
     marginRight?: string;
     marginBottom?: string;
+    menuLinkColor?: string;
+    menuActiveLinkColor?: string;
+    menuFontSize?: string;
+    menuLetterSpacing?: string;
+    menuTextTransform?: string;
+    socialIconColor?: string;
     objectFit?: ObjectFit;
     paddingTop?: string;
     paddingLeft?: string;

package/dist/types/WebsitePropertiesType.d.ts

@@ -1,5 +1,7 @@
 import type { SocialPropertiesType } from './SocialPropertiesType.js';
+import type { EmailSettingsType } from './EmailSettingsType.js';
 export interface WebsitePropertiesType {
     loadingMessage: string;
     social: SocialPropertiesType;
+    email?: EmailSettingsType;
 }

package/dist/types/WebsiteType.d.ts

@@ -14,6 +14,7 @@ export interface WebsiteType {
     properties: WebsitePropertiesType;
     styles: StylesType;
     enabled: boolean;
+    maintenance?: boolean;
     publishedAt: string | null;
     createdAt: string;
     updatedAt: string;

package/dist/utils/emailTemplate.d.ts

@@ -0,0 +1,7 @@
+export interface EmailTemplateRow {
+    label: string;
+    value: string;
+}
+declare function escapeHtml(value: unknown): string;
+export declare function buildFormEmailHtml(title: string, rows: EmailTemplateRow[]): string;
+export { escapeHtml };

package/dist/utils/emailTemplate.js

@@ -0,0 +1,66 @@
+function escapeHtml(value) {
+    return String(value !== null && value !== void 0 ? value : '')
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+export function buildFormEmailHtml(title, rows) {
+    const safeTitle = escapeHtml(title);
+    const rowsHtml = rows
+        .filter((row) => String(row.value).trim() !== '')
+        .map((row) => `
+          <tr>
+            <td style="padding:12px 0;border-bottom:1px solid #e5e7eb;font-size:13px;color:#6b7280;width:40%;vertical-align:top;">${escapeHtml(row.label)}</td>
+            <td style="padding:12px 0;border-bottom:1px solid #e5e7eb;font-size:14px;color:#172033;vertical-align:top;white-space:pre-wrap;word-break:break-word;">${escapeHtml(row.value)}</td>
+          </tr>`)
+        .join('');
+    return `<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${safeTitle}</title>
+</head>
+<body style="margin:0;padding:0;background-color:#eef2f7;font-family:Arial,Helvetica,sans-serif;color:#172033;">
+  <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#eef2f7;margin:0;padding:24px 0;width:100%;">
+    <tr>
+      <td align="center">
+        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;width:100%;margin:0 auto;">
+          <tr>
+            <td style="padding:0 16px;">
+              <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#111933;border-radius:20px 20px 0 0;width:100%;">
+                <tr>
+                  <td align="center" style="padding:32px 24px 24px 24px;">
+                    <div style="font-size:12px;line-height:12px;letter-spacing:1.6px;text-transform:uppercase;color:#98a2c3;margin-bottom:12px;">PixelBuild</div>
+                    <div style="font-size:24px;line-height:30px;font-weight:700;color:#ffffff;">${safeTitle}</div>
+                  </td>
+                </tr>
+              </table>
+              <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff;border-radius:0 0 20px 20px;width:100%;">
+                <tr>
+                  <td style="padding:16px 32px 32px 32px;">
+                    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
+                      ${rowsHtml || '<tr><td style="padding:12px 0;font-size:14px;color:#6b7280;">Nenhuma informação enviada.</td></tr>'}
+                    </table>
+                  </td>
+                </tr>
+              </table>
+              <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="width:100%;">
+                <tr>
+                  <td align="center" style="padding:20px 24px 0 24px;font-size:12px;line-height:18px;color:#8a94a6;text-align:center;">
+                    Este e-mail foi enviado automaticamente pelo formulário do site.
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`;
+}
+export { escapeHtml };

package/dist/utils/fonts.d.ts

@@ -0,0 +1,2 @@
+export declare function buildFontFamily(fontFamily?: string): string | undefined;
+export declare function buildGoogleFontsHref(fontFamily?: string): string | undefined;

package/dist/utils/fonts.js

@@ -0,0 +1,10 @@
+export function buildFontFamily(fontFamily) {
+    if (!fontFamily)
+        return undefined;
+    return `"${fontFamily}", sans-serif`;
+}
+export function buildGoogleFontsHref(fontFamily) {
+    if (!fontFamily)
+        return undefined;
+    return `https://fonts.googleapis.com/css2?family=${fontFamily.replaceAll(' ', '+')}&display=swap`;
+}

package/dist/utils/imageCustomization.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentType } from '../types/ComponentType.js';
+import type { ElementType } from '../types/ElementType.js';
+export declare function resolveImageElement(component: ComponentType, element: ElementType): ElementType;

package/dist/utils/imageCustomization.js

@@ -0,0 +1,11 @@
+export function resolveImageElement(component, element) {
+    if (element.elementType !== 'image' && element.elementType !== 'video') {
+        return element;
+    }
+    const properties = component.properties || {};
+    const useShared = properties.imageCustomization !== 'separate';
+    const imageStyles = useShared
+        ? properties.imageStyles || {}
+        : element.styles;
+    return Object.assign(Object.assign({}, element), { styles: Object.assign({ width: '100%' }, imageStyles) });
+}

package/dist/utils/responsiveProperties.d.ts

@@ -0,0 +1,2 @@
+export declare function resolveResponsiveProperties(properties: Record<string, unknown>, breakpoint: string): Record<string, unknown>;
+export declare function breakpointFromWidth(width: number): string;

package/dist/utils/responsiveProperties.js

@@ -0,0 +1,28 @@
+const BREAKPOINT_ORDER = ['xs', 'sm', 'md', 'lg', 'xl'];
+export function resolveResponsiveProperties(properties, breakpoint) {
+    const responsive = properties === null || properties === void 0 ? void 0 : properties.responsive;
+    const resolved = Object.assign({}, properties);
+    delete resolved.responsive;
+    if (!responsive)
+        return resolved;
+    const idx = BREAKPOINT_ORDER.indexOf(breakpoint);
+    if (idx < 0)
+        return resolved;
+    for (let i = 0; i <= idx; i++) {
+        const overrides = responsive[BREAKPOINT_ORDER[i]];
+        if (overrides)
+            Object.assign(resolved, overrides);
+    }
+    return resolved;
+}
+export function breakpointFromWidth(width) {
+    if (width >= 1200)
+        return 'xl';
+    if (width >= 992)
+        return 'lg';
+    if (width >= 768)
+        return 'md';
+    if (width >= 576)
+        return 'sm';
+    return 'xs';
+}

package/dist/utils/responsiveStyles.d.ts

@@ -0,0 +1,6 @@
+import type { SectionType } from '../types/SectionType.js';
+import type { StylesType } from '../types/StylesType.js';
+declare const BREAKPOINT_MIN_WIDTHS: Record<string, number>;
+export declare function buildResponsiveCssForStyles(selector: string, styles: StylesType | undefined): string;
+export declare function buildResponsiveCss(sections: SectionType[]): string;
+export { BREAKPOINT_MIN_WIDTHS };

package/dist/utils/responsiveStyles.js

@@ -0,0 +1,82 @@
+const BREAKPOINT_MIN_WIDTHS = {
+    sm: 576,
+    md: 768,
+    lg: 992,
+    xl: 1200,
+};
+const SKIP_KEYS = new Set([
+    'responsive',
+    'customCss',
+    'fluid',
+    'backgroundGradientColorStart',
+    'backgroundGradientColorEnd',
+]);
+function kebabCase(key) {
+    return key.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
+function cssValue(key, value) {
+    if (value === undefined || value === null || value === '')
+        return null;
+    const stringValue = String(value);
+    if (key === 'backgroundImage')
+        return `url(${stringValue})`;
+    return stringValue;
+}
+function declarationFor(key, value) {
+    const css = cssValue(key, value);
+    if (!css)
+        return null;
+    return `${kebabCase(key)}:${css}!important`;
+}
+function styleDeclarations(styles) {
+    if (!styles)
+        return '';
+    const declarations = [];
+    for (const [key, value] of Object.entries(styles)) {
+        if (SKIP_KEYS.has(key))
+            continue;
+        const declaration = declarationFor(key, value);
+        if (declaration)
+            declarations.push(declaration);
+    }
+    return declarations.join(';');
+}
+function buildRules(selector, responsive) {
+    if (!responsive)
+        return [];
+    const rules = [];
+    for (const [breakpoint, minWidth] of Object.entries(BREAKPOINT_MIN_WIDTHS)) {
+        const declarations = styleDeclarations(responsive[breakpoint]);
+        if (!declarations)
+            continue;
+        rules.push(`@media (min-width:${minWidth}px){${selector}{${declarations}}}`);
+    }
+    return rules;
+}
+export function buildResponsiveCssForStyles(selector, styles) {
+    return buildRules(selector, styles === null || styles === void 0 ? void 0 : styles.responsive).join('');
+}
+export function buildResponsiveCss(sections) {
+    const rules = [];
+    const visitSection = (section) => {
+        var _a, _b, _c, _d;
+        rules.push(...buildRules(`#section-${section.id}`, (_a = section.styles) === null || _a === void 0 ? void 0 : _a.responsive));
+        for (const column of section.columns) {
+            rules.push(...buildRules(`#column-${column.id}`, (_b = column.styles) === null || _b === void 0 ? void 0 : _b.responsive));
+            for (const component of column.components) {
+                rules.push(...buildRules(`[data-pb-component="${component.id}"]`, (_c = component.styles) === null || _c === void 0 ? void 0 : _c.responsive));
+                for (const element of component.elements) {
+                    rules.push(...buildRules(`[data-pb-element="${element.id}"]`, (_d = element.styles) === null || _d === void 0 ? void 0 : _d.responsive));
+                }
+            }
+            for (const childSection of column.childSections) {
+                visitSection(childSection);
+            }
+        }
+    };
+    for (const section of sections) {
+        visitSection(section);
+    }
+    return rules.join('');
+}
+export { BREAKPOINT_MIN_WIDTHS };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "lib-pixelbuild",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "engines": {
-    "node": "^24.18.0",
+    "node": "^24.0.0",
     "npm": ">=10"
   },
   "type": "module",
@@ -80,7 +80,6 @@
     "husky": "^9.1.7",
     "jsdom": "^30.0.0",
     "lint-staged": "^15.5.2",
-    "keen-slider": "^6.8.6",
     "prettier": "^3.6.2",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.10",
@@ -105,7 +104,6 @@
   "peerDependencies": {
     "bootstrap": "^5.0.0",
     "dompurify": "^3.2.6",
-    "keen-slider": "^6.8.6",
     "react": "^18.0.0",
     "react-bootstrap": "^2.10.10",
     "react-dom": "^18.0.0",

package/dist/components/CarouselComponent.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Row, Col, Carousel } from 'react-bootstrap';
-import { orderBySort } from '../utils/orderBySort.js';
-export function CarouselComponent({ component }) {
-    return (_jsx(Row, { children: _jsx(Col, { children: _jsx(Carousel, { indicators: false, className: "slider", children: orderBySort(component.elements).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/layouts/Menu.d.ts

@@ -1,5 +0,0 @@
-import type { PageType } from '../types/PageType.js';
-export declare function Menu({ page, websitePages }: {
-    readonly page?: PageType;
-    readonly websitePages?: PageType[];
-}): import("react").JSX.Element;

package/dist/layouts/Menu.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Navbar, Nav, Container } from 'react-bootstrap';
-export function Menu({ page, websitePages }) {
-    if (!websitePages || websitePages.length === 0) {
-        return null;
-    }
-    const menuPages = websitePages
-        .filter((p) => p.menu === true)
-        .sort((a, b) => a.menuOrder - b.menuOrder);
-    if (menuPages.length === 0) {
-        return null;
-    }
-    const currentPath = (page === null || page === void 0 ? void 0 : page.path) || '';
-    const isActive = (path) => {
-        if (!currentPath)
-            return false;
-        if (path === '/')
-            return currentPath === '/' || currentPath === '';
-        return currentPath === path || currentPath.startsWith(path + '/');
-    };
-    return (_jsx(Navbar, { expand: "lg", className: "py-3", children: _jsxs(Container, { children: [_jsx(Navbar.Toggle, { "aria-controls": "basic-navbar-nav", className: "menu" }), _jsx(Navbar.Collapse, { id: "basic-navbar-nav", children: _jsx(Nav, { className: "me-auto", children: menuPages.map((p) => {
-                            const active = isActive(p.path);
-                            return (_jsx(Nav.Link, { href: p.path, style: {
-                                    color: active ? '#c0ad5b' : '#a4a4a4',
-                                    fontSize: '0.9rem',
-                                    letterSpacing: '0.05em',
-                                    textTransform: 'uppercase',
-                                    margin: '0 12px',
-                                    paddingBottom: '4px',
-                                    borderBottom: active ? '2px solid #c0ad5b' : '2px solid transparent',
-                                    transition: 'color 0.3s, border-color 0.3s',
-                                }, children: p.title }, p.id));
-                        }) }) })] }) }));
-}