lib-pixelbuild 0.2.3 → 0.3.1

package/dist/builders/PageBuilder.js

@@ -5,8 +5,8 @@ import { BlockRenderer } from '../renderers/BlockRenderer.js';
 import { buildResponsiveCssForStyles } from '../utils/responsiveStyles.js';
 import { buildFontFamily } from '../utils/fonts.js';
 function mergeStyles(websiteStyles, pageStyles) {
-    const merged = Object.assign({}, websiteStyles);
-    for (const key of Object.keys(pageStyles)) {
+    const merged = Object.assign({}, (websiteStyles || {}));
+    for (const key of Object.keys(pageStyles || {})) {
         const val = pageStyles[key];
         if (val !== '' && val !== null && val !== undefined) {
             ;
@@ -21,7 +21,7 @@ function toCssValue(val) {
     return undefined;
 }
 const PageBuilder = memo(function PageBuilder({ website, page, editionMode }) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const mergedStyles = useMemo(() => mergeStyles(website.styles, page.styles), [website.styles, page.styles]);
     const designSystem = website.designSystem;
     const pageStyle = useMemo(() => {
@@ -60,6 +60,6 @@ const PageBuilder = memo(function PageBuilder({ website, page, editionMode }) {
         (_d = designSystem === null || designSystem === void 0 ? void 0 : designSystem.typography) === null || _d === void 0 ? void 0 : _d.fontSizeBase,
         mergedStyles
     ]);
-    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, "data-pb-page": true, children: [_jsx("style", { children: buildResponsiveCssForStyles('[data-pb-page]', page.styles) }), _jsx(BlockRenderer, { blocks: page.blocks, editionMode: editionMode, componentDefaults: website.componentDefaults }), page.blocks.length === 0 && editionMode && (_jsx("div", { style: { padding: '40px', textAlign: 'center', color: '#94a3b8' }, children: "Nenhum conte\u00FAdo adicionado." }))] })] }));
+    return (_jsxs(Suspense, { fallback: _jsx("div", { children: ((_e = website.properties) === null || _e === void 0 ? void 0 : _e.loadingMessage) || 'Carregando...' }), 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, "data-pb-page": true, children: [_jsx("style", { children: buildResponsiveCssForStyles('[data-pb-page]', page.styles) }), _jsx(BlockRenderer, { blocks: page.blocks, editionMode: editionMode, componentDefaults: website.componentDefaults }), (page.blocks || []).length === 0 && editionMode && (_jsx("div", { style: { padding: '40px', textAlign: 'center', color: '#94a3b8' }, children: "Nenhum conte\u00FAdo adicionado." }))] })] }));
 });
 export { PageBuilder };

package/dist/components/VideoComponent.d.ts

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

package/dist/components/VideoComponent.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { getBoolean } from '../utils/propertyUtils.js';
+function toEmbed(src) {
+    const value = src.trim();
+    if (!value)
+        return null;
+    const youtube = value.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([A-Za-z0-9_-]{6,})/);
+    if (youtube)
+        return { kind: 'iframe', src: `https://www.youtube.com/embed/${youtube[1]}` };
+    const vimeo = value.match(/vimeo\.com\/(?:video\/)?(\d+)/);
+    if (vimeo)
+        return { kind: 'iframe', src: `https://player.vimeo.com/video/${vimeo[1]}` };
+    return { kind: 'native', src: value };
+}
+export function VideoComponent({ component }) {
+    const { src = '', height = '400px', placeholderBackgroundColor = '#e0e0e0', placeholderTextColor = '#666' } = component.properties;
+    const fullBleed = getBoolean(component.properties, 'fullBleed', false);
+    const video = useMemo(() => toEmbed(src), [src]);
+    const content = (video === null || video === void 0 ? void 0 : video.kind) === 'iframe' ? (_jsx("iframe", { title: "V\u00EDdeo", src: video.src, width: "100%", height: height, style: { border: 0, borderRadius: '4px' }, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, loading: "lazy" })) : (video === null || video === void 0 ? void 0 : video.kind) === 'native' ? (_jsx("video", { controls: true, src: video.src, style: { width: '100%', height, borderRadius: '4px', display: 'block' } })) : (_jsx("div", { style: {
+            width: '100%',
+            height,
+            backgroundColor: placeholderBackgroundColor,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: '4px',
+            color: placeholderTextColor
+        }, children: "V\u00EDdeo n\u00E3o configurado" }));
+    if (fullBleed) {
+        return (_jsx("div", { "data-pb-component": component.id, style: Object.assign(Object.assign({}, component.styles), { width: 'calc(100% + var(--pb-gutter, 1.5rem))', marginLeft: 'calc(var(--pb-gutter, 1.5rem) * -0.5)', marginRight: 'calc(var(--pb-gutter, 1.5rem) * -0.5)' }), children: content }));
+    }
+    return (_jsx("div", { "data-pb-component": component.id, style: component.styles, children: content }));
+}

package/dist/factories/ComponentFactory.js

@@ -9,6 +9,7 @@ import { CardComponent } from '../components/CardComponent.js';
 import { MapComponent } from '../components/MapComponent.js';
 import { ButtonsComponent } from '../components/ButtonsComponent.js';
 import { IconComponent } from '../components/IconComponent.js';
+import { VideoComponent } from '../components/VideoComponent.js';
 /**
  * Aplica os estilos padrão do design system (`componentDefaults`) antes dos
  * estilos da instância — o override da instância prevalece.
@@ -46,6 +47,8 @@ export class ComponentFactory {
                 return _jsx(ButtonsComponent, { component: resolved }, resolved.id);
             case ComponentTypeEnum.Icon:
                 return _jsx(IconComponent, { component: resolved }, resolved.id);
+            case ComponentTypeEnum.Video:
+                return _jsx(VideoComponent, { component: resolved }, resolved.id);
             default:
                 throw new Error('Invalid component type: ' + resolved.componentType);
         }

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export { SiteLayout, type EmailApiConfig } from './layouts/SiteLayout.js';
 export { PageBuilder } from './builders/PageBuilder.js';
 export { BlockRenderer } from './renderers/BlockRenderer.js';
 export { IconComponent } from './components/IconComponent.js';
+export { VideoComponent } from './components/VideoComponent.js';
 export { LoadingComponent } from './components/LoadingComponent.js';
 export { ComponentFactory } from './factories/ComponentFactory.js';
 export { ElementFactory } from './factories/ElementFactory.js';

package/dist/index.js

@@ -4,6 +4,7 @@ export { SiteLayout } from './layouts/SiteLayout.js';
 export { PageBuilder } from './builders/PageBuilder.js';
 export { BlockRenderer } from './renderers/BlockRenderer.js';
 export { IconComponent } from './components/IconComponent.js';
+export { VideoComponent } from './components/VideoComponent.js';
 export { LoadingComponent } from './components/LoadingComponent.js';
 export { ComponentFactory } from './factories/ComponentFactory.js';
 export { ElementFactory } from './factories/ElementFactory.js';

package/dist/layouts/Footer.js

@@ -5,10 +5,10 @@ import { PbRow } from '../ui/PbRow.js';
 import { PbCol } from '../ui/PbCol.js';
 import { SocialIconsComponent } from '../components/SocialIconsComponent.js';
 export function Footer({ website }) {
-    var _a;
+    var _a, _b, _c, _d, _e, _f;
     const social = (_a = website.properties) === null || _a === void 0 ? void 0 : _a.social;
-    const footer = website.footer.properties;
-    const styles = website.footer.styles;
+    const footerProps = ((_b = website.footer) === null || _b === void 0 ? void 0 : _b.properties) || {};
+    const styles = ((_c = website.footer) === null || _c === void 0 ? void 0 : _c.styles) || {};
     const fluid = styles.fluid || undefined;
     const baseStyle = Object.assign({}, styles);
     delete baseStyle.fluid;
@@ -18,5 +18,5 @@ export function Footer({ website }) {
         flexDirection: 'column',
         alignItems: 'center'
     };
-    return (_jsx(PbContainer, { fluid: fluid || undefined, children: _jsx("footer", { id: "footer", className: "pb-footer", style: { backgroundColor: styles.backgroundColor }, children: _jsxs(PbRow, { children: [_jsx(PbCol, { width: { xs: 12 }, style: { marginBottom: '30px' }, children: social && _jsx(SocialIconsComponent, { social: social, color: styles.socialIconColor || styles.color }) }), _jsx(PbCol, { width: { xs: 12 }, style: textStyle, children: _jsx("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text1) } }) }), _jsx(PbCol, { width: { xs: 12 }, style: textStyle, children: _jsx("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text2) } }) }), _jsx(PbCol, { width: { xs: 12 }, style: { display: 'flex', justifyContent: 'center' }, children: _jsx("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text3) } }) }), _jsxs(PbCol, { width: { xs: 12 }, children: [_jsx("hr", { className: "pb-footer-divider" }), _jsxs("p", { className: "pb-text-center pb-mb-0", style: baseStyle, children: ["\u00A9 ", new Date().getFullYear(), " ", website.name] })] })] }) }) }));
+    return (_jsx(PbContainer, { fluid: fluid || undefined, children: _jsx("footer", { id: "footer", className: "pb-footer", style: { backgroundColor: styles.backgroundColor }, children: _jsxs(PbRow, { children: [_jsx(PbCol, { width: { xs: 12 }, style: { marginBottom: '30px' }, children: social && _jsx(SocialIconsComponent, { social: social, color: styles.socialIconColor || styles.color }) }), _jsx(PbCol, { width: { xs: 12 }, style: textStyle, children: _jsx("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize((_d = footerProps.text1) !== null && _d !== void 0 ? _d : '') } }) }), _jsx(PbCol, { width: { xs: 12 }, style: textStyle, children: _jsx("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize((_e = footerProps.text2) !== null && _e !== void 0 ? _e : '') } }) }), _jsx(PbCol, { width: { xs: 12 }, style: { display: 'flex', justifyContent: 'center' }, children: _jsx("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize((_f = footerProps.text3) !== null && _f !== void 0 ? _f : '') } }) }), _jsxs(PbCol, { width: { xs: 12 }, children: [_jsx("hr", { className: "pb-footer-divider" }), _jsxs("p", { className: "pb-text-center pb-mb-0", style: baseStyle, children: ["\u00A9 ", new Date().getFullYear(), " ", website.name] })] })] }) }) }));
 }

package/dist/layouts/Header.js

@@ -3,8 +3,9 @@ import { useMemo, useCallback, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { PbContainer } from '../ui/PbContainer.js';
 export function Header({ website, imageBaseUrl }) {
-    const headerProperties = website.header.properties;
-    const headerStyles = website.header.styles;
+    var _a, _b;
+    const headerProperties = ((_a = website.header) === null || _a === void 0 ? void 0 : _a.properties) || {};
+    const headerStyles = ((_b = website.header) === null || _b === void 0 ? void 0 : _b.styles) || {};
     const location = useLocation();
     const [menuOpen, setMenuOpen] = useState(false);
     const menuPages = useMemo(() => (website.pages || []).filter((p) => p.menu === true).sort((a, b) => (a.menuOrder || 0) - (b.menuOrder || 0)), [website.pages]);

package/dist/layouts/SiteLayout.js

@@ -8,7 +8,7 @@ import { ThemeStyle } from '../designSystem/theme.js';
 import { buildFontFamily, buildGoogleFontsHref } from '../utils/fonts.js';
 import { buttonActionFactory } from '../factories/ButtonActionFactory.js';
 export function SiteLayout({ website, imageBaseUrl, emailApi }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const fontFamily = buildFontFamily((_a = website.styles) === null || _a === void 0 ? void 0 : _a.fontFamily);
     const fontHref = buildGoogleFontsHref((_b = website.styles) === null || _b === void 0 ? void 0 : _b.fontFamily);
     useEffect(() => {
@@ -36,5 +36,5 @@ export function SiteLayout({ website, imageBaseUrl, emailApi }) {
         (_f = (_e = website.properties) === null || _e === void 0 ? void 0 : _e.email) === null || _f === void 0 ? void 0 : _f.recipientName,
         (_h = (_g = website.properties) === null || _g === void 0 ? void 0 : _g.email) === null || _h === void 0 ? void 0 : _h.subject
     ]);
-    return (_jsxs(_Fragment, { children: [_jsx(ThemeStyle, { designSystem: website.designSystem }), fontHref && (_jsxs(Helmet, { children: [_jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "" }), _jsx("link", { href: fontHref, rel: "stylesheet" })] })), _jsxs("div", { id: "site-layout", className: "pb-root", style: { backgroundColor: website.styles.backgroundColor, color: website.styles.color, fontFamily }, children: [_jsx(Header, { website: website, imageBaseUrl: imageBaseUrl }), _jsx(Outlet, {}), _jsx(Footer, { website: website })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(ThemeStyle, { designSystem: website.designSystem }), fontHref && (_jsxs(Helmet, { children: [_jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "" }), _jsx("link", { href: fontHref, rel: "stylesheet" })] })), _jsxs("div", { id: "site-layout", className: "pb-root", style: { backgroundColor: (_j = website.styles) === null || _j === void 0 ? void 0 : _j.backgroundColor, color: (_k = website.styles) === null || _k === void 0 ? void 0 : _k.color, fontFamily }, children: [_jsx(Header, { website: website, imageBaseUrl: imageBaseUrl }), _jsx(Outlet, {}), _jsx(Footer, { website: website })] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lib-pixelbuild",
-  "version": "0.2.3",
+  "version": "0.3.1",
   "engines": {
     "node": "^24.0.0",
     "npm": ">=10"