lib-pixelbuild 0.1.1 → 0.1.3

package/dist/builders/PageBuilder.js

@@ -36,5 +36,5 @@ export function PageBuilder({ website, page, editionMode }) {
                     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." }))] })] }));
+                }, 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." }))] })] }));
 }

package/dist/components/SliderComponent.d.ts

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

package/dist/components/SliderComponent.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { useKeenSlider } from 'keen-slider/react.js';
@@ -5,7 +16,20 @@ import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
 import 'keen-slider/keen-slider.min.css';
 const elementFactory = new ElementFactory();
-export function SliderComponent({ component }) {
+function cleanSlideStyles(element) {
+    const _b = element.styles, { height: _h, objectFit: _o } = _b, rest = __rest(_b, ["height", "objectFit"]);
+    return Object.assign(Object.assign({}, element), { styles: rest });
+}
+function cleanComponentStyles(styles) {
+    const { minHeight: _m, display: _d, alignItems: _a, justifyContent: _j, flexDirection: _f } = styles, rest = __rest(styles, ["minHeight", "display", "alignItems", "justifyContent", "flexDirection"]);
+    return rest;
+}
+function StaticSliderComponent({ component }) {
+    const firstSlide = orderBySort(component.elements)[0];
+    const slide = firstSlide ? cleanSlideStyles(firstSlide) : null;
+    return (_jsx("div", { style: Object.assign({ position: 'relative', overflow: 'hidden' }, cleanComponentStyles(component.styles)), children: slide && elementFactory.build(slide) }));
+}
+function InteractiveSliderComponent({ component }) {
     const properties = component.properties;
     const slides = orderBySort(component.elements);
     const [currentSlide, setCurrentSlide] = useState(0);
@@ -25,10 +49,25 @@ export function SliderComponent({ component }) {
         if (!properties.autoplay || slides.length < 2)
             return;
         const interval = Number(properties.interval) > 0 ? Number(properties.interval) : 5000;
-        const timer = window.setInterval(() => { var _a; return (_a = instanceRef.current) === null || _a === void 0 ? void 0 : _a.next(); }, interval);
+        const timer = window.setInterval(() => { var _b; return (_b = instanceRef.current) === null || _b === void 0 ? void 0 : _b.next(); }, interval);
         return () => window.clearInterval(timer);
     }, [instanceRef, properties.autoplay, properties.interval, slides.length]);
+    const fixedHeight = Number(properties.height) > 0 ? Number(properties.height) : 0;
     const showArrows = Boolean(properties.showArrows) && loaded && slides.length > 1;
     const showDots = Boolean(properties.showDots) && loaded && slides.length > 1;
-    return (_jsxs("div", { style: Object.assign({ position: 'relative' }, component.styles), children: [_jsx("div", { ref: ref, className: "keen-slider", children: slides.map((element) => (_jsx("div", { className: "keen-slider__slide", children: elementFactory.build(element) }, element.id))) }), showArrows && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": "Slide anterior", onClick: () => { var _a; return (_a = instanceRef.current) === null || _a === void 0 ? void 0 : _a.prev(); }, style: { position: 'absolute', left: 0, top: '50%', transform: 'translateY(-50%)' }, children: '<' }), _jsx("button", { type: "button", "aria-label": "Proximo slide", onClick: () => { var _a; return (_a = instanceRef.current) === null || _a === void 0 ? void 0 : _a.next(); }, style: { position: 'absolute', right: 0, top: '50%', transform: 'translateY(-50%)' }, children: '>' })] })), showDots && (_jsx("div", { "aria-label": "Navegacao do slider", style: { display: 'flex', justifyContent: 'center', gap: 4 }, children: slides.map((element, index) => (_jsx("button", { type: "button", "aria-label": `Ir para o slide ${index + 1}`, "aria-current": currentSlide === index ? 'true' : undefined, onClick: () => { var _a; return (_a = instanceRef.current) === null || _a === void 0 ? void 0 : _a.moveToIdx(index); }, children: index + 1 }, element.id))) }))] }));
+    const sliderStyle = fixedHeight
+        ? { height: fixedHeight }
+        : { alignItems: 'flex-start' };
+    const slideStyle = fixedHeight
+        ? { minHeight: '100%', height: '100%' }
+        : { minHeight: 'auto' };
+    return (_jsxs("div", { style: Object.assign({ position: 'relative' }, cleanComponentStyles(component.styles)), children: [_jsx("div", { ref: ref, className: "keen-slider", style: sliderStyle, children: slides.map((element) => {
+                    const sanitized = fixedHeight ? element : cleanSlideStyles(element);
+                    return (_jsx("div", { className: "keen-slider__slide", style: slideStyle, children: elementFactory.build(sanitized) }, element.id));
+                }) }), showArrows && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": "Slide anterior", onClick: () => { var _b; return (_b = instanceRef.current) === null || _b === void 0 ? void 0 : _b.prev(); }, style: { position: 'absolute', left: 0, top: '50%', transform: 'translateY(-50%)' }, children: '<' }), _jsx("button", { type: "button", "aria-label": "Proximo slide", onClick: () => { var _b; return (_b = instanceRef.current) === null || _b === void 0 ? void 0 : _b.next(); }, style: { position: 'absolute', right: 0, top: '50%', transform: 'translateY(-50%)' }, children: '>' })] })), showDots && (_jsx("div", { "aria-label": "Navegacao do slider", style: { display: 'flex', justifyContent: 'center', gap: 4 }, children: slides.map((element, index) => (_jsx("button", { type: "button", "aria-label": `Ir para o slide ${index + 1}`, "aria-current": currentSlide === index ? 'true' : undefined, onClick: () => { var _b; return (_b = instanceRef.current) === null || _b === void 0 ? void 0 : _b.moveToIdx(index); }, children: index + 1 }, element.id))) }))] }));
+}
+export function SliderComponent({ component, editionMode = false }) {
+    if (editionMode)
+        return _jsx(StaticSliderComponent, { component: component });
+    return _jsx(InteractiveSliderComponent, { component: component });
 }

package/dist/factories/ComponentFactory.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { ComponentType } from '../types/ComponentType.js';
 export declare class ComponentFactory {
-    build(component: ComponentType): React.ReactElement | null;
+    build(component: ComponentType, editionMode?: boolean): React.ReactElement | null;
 }

package/dist/factories/ComponentFactory.js

@@ -8,7 +8,7 @@ import { SliderComponent } from '../components/SliderComponent.js';
 import { CardComponent } from '../components/CardComponent.js';
 import { MapComponent } from '../components/MapComponent.js';
 export class ComponentFactory {
-    build(component) {
+    build(component, editionMode = false) {
         switch (component.componentType) {
             case ComponentTypeEnum.Text:
             case ComponentTypeEnum.TextWithImage:
@@ -19,7 +19,7 @@ export class ComponentFactory {
             case ComponentTypeEnum.Slider:
             case ComponentTypeEnum.Gallery:
             case ComponentTypeEnum.Testimonials:
-                return _jsx(SliderComponent, { component: component }, component.id);
+                return _jsx(SliderComponent, { component: component, editionMode: editionMode }, component.id);
             case ComponentTypeEnum.Form:
                 return _jsx(FormComponent, { component: component }, component.id);
             case ComponentTypeEnum.Card:

package/dist/renderers/SectionRenderer.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { SectionType } from '../types/SectionType.js';
-export declare function SectionRenderer({ sections }: {
+export declare function SectionRenderer({ sections, editionMode }: {
     readonly sections: SectionType[];
+    readonly editionMode?: boolean;
 }): React.JSX.Element;

package/dist/renderers/SectionRenderer.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Container, Row, Col } from 'react-bootstrap';
 import { ComponentFactory } from '../factories/ComponentFactory.js';
@@ -12,8 +12,30 @@ function colWidthValue(width, offset) {
     }
     return width;
 }
-function renderSection(section) {
-    const content = (_jsx(Row, { id: `section-${section.id}`, style: section.sectionType === 'row' ? section.styles : undefined, children: section.columns.map(renderColumn) }));
+function columnContent(column, editionMode) {
+    return (_jsxs(_Fragment, { children: [orderBySort(column.components.filter((component) => component.enabled)).map((component) => componentFactory.build(component, editionMode)), orderBySort(column.childSections).map((childSection) => (_jsx(React.Fragment, { children: renderSection(childSection, editionMode) }, childSection.id)))] }));
+}
+function gridClass(id) {
+    return `pixelbuild-grid-${String(id).replace(/[^a-zA-Z0-9_-]/g, '_')}`;
+}
+function renderGrid(section, editionMode) {
+    const grid = gridClass(section.id);
+    const columns = section.columns.filter((column) => column.components.some((component) => component.enabled) || column.childSections.length > 0);
+    const css = columns.map((column) => {
+        const properties = column.properties || {};
+        const row = Math.max(0, Number(properties.row) || 0);
+        const rowSpan = Math.max(1, Number(properties.rowSpan) || 1);
+        const xs = column.width.xs || 12;
+        const sm = column.width.sm || xs;
+        const md = column.width.md || sm;
+        const columnClass = gridClass(column.id);
+        return `.${grid} .${columnClass}{grid-column:span ${xs};grid-row:auto;min-width:0}@media (min-width:576px){.${grid} .${columnClass}{grid-column:span ${sm}}}@media (min-width:768px){.${grid} .${columnClass}{grid-column:span ${md};grid-row:${row + 1}/span ${rowSpan}}}`;
+    }).join('');
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `.${grid}{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem}${css}` }), _jsx("div", { id: `section-${section.id}`, className: grid, style: section.sectionType === 'row' ? section.styles : undefined, children: columns.map((column) => (_jsx("div", { id: `column-${column.id}`, className: gridClass(column.id), style: column.styles, children: columnContent(column, editionMode) }, column.id))) })] }));
+}
+function renderSection(section, editionMode) {
+    const usesGrid = section.columns.some((column) => { var _a, _b; return ((_a = column.properties) === null || _a === void 0 ? void 0 : _a.row) !== undefined || Number((_b = column.properties) === null || _b === void 0 ? void 0 : _b.rowSpan) > 1; });
+    const content = usesGrid ? renderGrid(section, editionMode) : (_jsx(Row, { id: `section-${section.id}`, style: section.sectionType === 'row' ? section.styles : undefined, children: section.columns.map((column) => renderColumn(column, editionMode)) }));
     if (section.sectionType === 'container-fluid') {
         return _jsx(Container, { fluid: true, style: section.styles, children: content });
     }
@@ -22,12 +44,12 @@ function renderSection(section) {
     }
     return _jsx(Container, { fluid: true, children: content });
 }
-function renderColumn(column) {
-    return (_jsxs(Col, { id: `column-${column.id}`, xs: colWidthValue(column.width.xs, column.offset.xs), sm: colWidthValue(column.width.sm, column.offset.sm), md: colWidthValue(column.width.md, column.offset.md), lg: colWidthValue(column.width.lg, column.offset.lg), xl: colWidthValue(column.width.xl, column.offset.xl), style: column.styles, children: [orderBySort(column.components.filter((component) => component.enabled)).map((component) => componentFactory.build(component)), orderBySort(column.childSections).map((childSection) => (_jsx(React.Fragment, { children: renderSection(childSection) }, childSection.id)))] }, column.id));
+function renderColumn(column, editionMode) {
+    return (_jsx(Col, { id: `column-${column.id}`, xs: colWidthValue(column.width.xs, column.offset.xs), sm: colWidthValue(column.width.sm, column.offset.sm), md: colWidthValue(column.width.md, column.offset.md), lg: colWidthValue(column.width.lg, column.offset.lg), xl: colWidthValue(column.width.xl, column.offset.xl), style: column.styles, children: columnContent(column, editionMode) }, column.id));
 }
-export function SectionRenderer({ sections }) {
+export function SectionRenderer({ sections, editionMode = false }) {
     if (!sections || sections.length === 0) {
         return null;
     }
-    return (_jsx(_Fragment, { children: orderBySort(sections).map((section) => (_jsx(React.Fragment, { children: renderSection(section) }, section.id))) }));
+    return (_jsx(_Fragment, { children: orderBySort(sections).map((section) => (_jsx(React.Fragment, { children: renderSection(section, editionMode) }, section.id))) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lib-pixelbuild",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "engines": {
     "node": "^24.18.0",
     "npm": ">=10"