lib-pixelbuild 0.1.1 → 0.1.2

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

@@ -5,7 +5,11 @@ 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 StaticSliderComponent({ component }) {
+    const firstSlide = orderBySort(component.elements)[0];
+    return (_jsx("div", { style: Object.assign({ position: 'relative', overflow: 'hidden' }, component.styles), children: firstSlide && elementFactory.build(firstSlide) }));
+}
+function InteractiveSliderComponent({ component }) {
     const properties = component.properties;
     const slides = orderBySort(component.elements);
     const [currentSlide, setCurrentSlide] = useState(0);
@@ -32,3 +36,8 @@ export function SliderComponent({ component }) {
     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))) }))] }));
 }
+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.2",
   "engines": {
     "node": "^24.18.0",
     "npm": ">=10"