lib-pixelbuild 0.1.3 → 0.2.0

package/dist/renderers/SectionRenderer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
+import { memo, useMemo } from 'react';
 import { Container, Row, Col } from 'react-bootstrap';
 import { ComponentFactory } from '../factories/ComponentFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
@@ -12,30 +12,44 @@ function colWidthValue(width, offset) {
     }
     return width;
 }
-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)))] }));
-}
+const ColumnContent = memo(function ColumnContent({ column, editionMode }) {
+    const components = useMemo(() => orderBySort(column.components.filter((c) => c.enabled)), [column.components]);
+    const childSections = useMemo(() => orderBySort(column.childSections), [column.childSections]);
+    return (_jsxs(_Fragment, { children: [components.map((component) => componentFactory.build(component, editionMode)), childSections.map((childSection) => (_jsx(SectionContent, { section: childSection, editionMode: editionMode }, childSection.id)))] }));
+});
 function gridClass(id) {
     return `pixelbuild-grid-${String(id).replace(/[^a-zA-Z0-9_-]/g, '_')}`;
 }
-function renderGrid(section, editionMode) {
+const GridRenderer = memo(function GridRenderer({ 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)) }));
+    const columns = useMemo(() => section.columns.filter((col) => col.components.some((c) => c.enabled) || col.childSections.length > 0), [section.columns]);
+    const css = useMemo(() => {
+        const rules = 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('');
+        }).join('');
+        return `.${grid}{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem}${rules}`;
+    }, [grid, columns]);
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: 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: _jsx(ColumnContent, { column: column, editionMode: editionMode }) }, column.id))) })] }));
+});
+const SectionContent = memo(function SectionContent({ section, editionMode }) {
+    const usesGrid = useMemo(() => 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; }), [section.columns]);
+    const content = useMemo(() => {
+        if (usesGrid) {
+            return _jsx(GridRenderer, { section: section, editionMode: editionMode });
+        }
+        return (_jsx(Row, { id: `section-${section.id}`, style: section.sectionType === 'row' ? section.styles : undefined, children: section.columns.map((column) => (_jsx(ColumnRenderer, { column: column, editionMode: editionMode }, column.id))) }));
+    }, [usesGrid, section, editionMode]);
     if (section.sectionType === 'container-fluid') {
         return _jsx(Container, { fluid: true, style: section.styles, children: content });
     }
@@ -43,13 +57,15 @@ function renderSection(section, editionMode) {
         return _jsx(Container, { style: section.styles, children: content });
     }
     return _jsx(Container, { fluid: true, children: content });
-}
-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, editionMode = false }) {
-    if (!sections || sections.length === 0) {
+});
+const ColumnRenderer = memo(function ColumnRenderer({ 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: _jsx(ColumnContent, { column: column, editionMode: editionMode }) }, column.id));
+});
+const SectionRenderer = memo(function SectionRenderer({ sections, editionMode = false }) {
+    const sorted = useMemo(() => orderBySort(sections || []), [sections]);
+    if (sorted.length === 0) {
         return null;
     }
-    return (_jsx(_Fragment, { children: orderBySort(sections).map((section) => (_jsx(React.Fragment, { children: renderSection(section, editionMode) }, section.id))) }));
-}
+    return (_jsx(_Fragment, { children: sorted.map((section) => (_jsx(SectionContent, { section: section, editionMode: editionMode }, section.id))) }));
+});
+export { SectionRenderer };

package/dist/services/EmailService.d.ts

@@ -1,8 +1,16 @@
 import type { FormFieldsType } from '../types/FormFieldsType.js';
 import type { MailBodyType } from '../types/MailBodyType.js';
+export interface EmailServiceConfig {
+    apiUrl: string;
+    authToken: string;
+    senderName: string;
+    sender: string;
+    recipientName: string;
+    recipient: string;
+}
 declare class EmailService {
-    private readonly urlApi;
-    constructor(urlApi: string);
+    private readonly config;
+    constructor(config: EmailServiceConfig);
     sendMail(params: FormFieldsType[]): Promise<boolean>;
     createBody(params: FormFieldsType[]): MailBodyType;
 }

package/dist/services/EmailService.js

@@ -1,27 +1,21 @@
 class EmailService {
-    constructor(urlApi) {
-        this.urlApi = urlApi;
+    constructor(config) {
+        this.config = config;
     }
     async sendMail(params) {
-        try {
-            const body = this.createBody(params);
-            const response = await fetch(`${this.urlApi}/send-mail`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    Authorization: `Bearer TOKEN`
-                },
-                body: JSON.stringify(body)
-            });
-            if (!response.ok) {
-                throw new Error(response.status.toString());
-            }
-            return true;
-        }
-        catch (error) {
-            console.error('Erro ao buscar dados da API:', error);
-            throw new Error(error instanceof Error ? error.message : JSON.stringify(error));
+        const body = this.createBody(params);
+        const response = await fetch(`${this.config.apiUrl}/send-mail`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                Authorization: `Bearer ${this.config.authToken}`
+            },
+            body: JSON.stringify(body)
+        });
+        if (!response.ok) {
+            throw new Error(`Email send failed: ${response.status}`);
         }
+        return true;
     }
     createBody(params) {
         var _a, _b, _c, _d, _e, _f;
@@ -32,12 +26,18 @@ class EmailService {
         const email = params.find((e) => e.name === 'emailField');
         const phone = params.find((e) => e.name === 'phoneField');
         return {
-            senderName: '[Site] CT Clean Foods',
-            sender: 'contato@nois.dev.br',
-            recipientName: 'CT Clean Foods',
-            recipient: 'lucas.2601@gmail.com',
+            senderName: this.config.senderName,
+            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 : ''}\nData de Nascimento: ${(_c = birthDate === null || birthDate === void 0 ? void 0 : birthDate.value) !== null && _c !== void 0 ? _c : ''}\nCPF: ${(_d = document === null || document === void 0 ? void 0 : document.value) !== null && _d !== void 0 ? _d : ''}\nE-mail: ${(_e = email === null || email === void 0 ? void 0 : email.value) !== null && _e !== void 0 ? _e : ''}\nCelular: ${(_f = phone === null || phone === void 0 ? void 0 : phone.value) !== null && _f !== void 0 ? _f : ''}`
+            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')
         };
     }
 }

package/dist/types/RawWebsiteType.d.ts

@@ -1,3 +1,4 @@
+import type { StylesType } from './StylesType.js';
 export type RawWebsiteType = {
     id: number;
     name: string;
@@ -9,32 +10,7 @@ export type RawWebsiteType = {
             logoAlign: 'left' | 'right' | 'center';
             showLogo: boolean;
         };
-        styles: {
-            alignItems?: string;
-            backgroundColor?: string;
-            borderColor?: string;
-            borderRadius?: string;
-            borderStyle?: string;
-            borderWidth?: string;
-            color?: string;
-            display?: string;
-            float?: 'left' | 'right' | 'none' | 'inline-start' | 'inline-end';
-            fluid?: boolean;
-            fontSize?: string;
-            fontWeight?: string;
-            height?: string;
-            marginTop?: string;
-            marginLeft?: string;
-            marginRight?: string;
-            marginBottom?: string;
-            objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
-            paddingTop?: string;
-            paddingLeft?: string;
-            paddingRight?: string;
-            paddingBottom?: string;
-            textAlign?: 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
-            width?: string;
-        };
+        styles: StylesType;
     };
     footer: {
         properties: {
@@ -42,32 +18,7 @@ export type RawWebsiteType = {
             text2: string;
             text3: string;
         };
-        styles: {
-            alignItems?: string;
-            backgroundColor?: string;
-            borderColor?: string;
-            borderRadius?: string;
-            borderStyle?: string;
-            borderWidth?: string;
-            color?: string;
-            display?: string;
-            float?: 'left' | 'right' | 'none' | 'inline-start' | 'inline-end';
-            fluid?: boolean;
-            fontSize?: string;
-            fontWeight?: string;
-            height?: string;
-            marginTop?: string;
-            marginLeft?: string;
-            marginRight?: string;
-            marginBottom?: string;
-            objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
-            paddingTop?: string;
-            paddingLeft?: string;
-            paddingRight?: string;
-            paddingBottom?: string;
-            textAlign?: 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
-            width?: string;
-        };
+        styles: StylesType;
     };
     properties: {
         loadingMessage: string;
@@ -83,36 +34,7 @@ export type RawWebsiteType = {
             };
         };
     };
-    styles: {
-        alignItems?: string;
-        backgroundColor?: string;
-        backgroundImage?: string;
-        backgroundGradientColorStart?: string;
-        backgroundGradientColorEnd?: string;
-        backgroundPosition?: string;
-        backgroundSize?: string;
-        borderColor?: string;
-        borderRadius?: string;
-        borderStyle?: string;
-        borderWidth?: string;
-        color?: string;
-        display?: string;
-        float?: 'left' | 'right' | 'none' | 'inline-start' | 'inline-end';
-        fontSize?: string;
-        fontWeight?: string;
-        height?: string;
-        marginTop?: string;
-        marginLeft?: string;
-        marginRight?: string;
-        marginBottom?: string;
-        objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
-        paddingTop?: string;
-        paddingLeft?: string;
-        paddingRight?: string;
-        paddingBottom?: string;
-        textAlign?: 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
-        width?: string;
-    };
+    styles: StylesType;
     enabled: boolean;
     publishedAt: string | null;
     createdAt: string;
@@ -132,32 +54,7 @@ export type RawWebsiteType = {
             section: string;
             name: string;
             order: number;
-            styles: {
-                alignItems?: string;
-                backgroundColor?: string;
-                borderColor?: string;
-                borderRadius?: string;
-                borderStyle?: string;
-                borderWidth?: string;
-                color?: string;
-                display?: string;
-                float?: 'left' | 'right' | 'none' | 'inline-start' | 'inline-end';
-                fluid?: boolean;
-                fontSize?: string;
-                fontWeight?: string;
-                height?: string;
-                marginTop?: string;
-                marginLeft?: string;
-                marginRight?: string;
-                marginBottom?: string;
-                objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
-                paddingTop?: string;
-                paddingLeft?: string;
-                paddingRight?: string;
-                paddingBottom?: string;
-                textAlign?: 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
-                width?: string;
-            };
+            styles: StylesType;
         }>;
         enabled: boolean;
         properties: {
@@ -180,32 +77,7 @@ export type RawWebsiteType = {
                 };
             };
         };
-        styles: {
-            alignItems?: string;
-            backgroundColor?: string;
-            borderColor?: string;
-            borderRadius?: string;
-            borderStyle?: string;
-            borderWidth?: string;
-            color?: string;
-            display?: string;
-            float?: 'left' | 'right' | 'none' | 'inline-start' | 'inline-end';
-            fluid?: boolean;
-            fontSize?: string;
-            fontWeight?: string;
-            height?: string;
-            marginTop?: string;
-            marginLeft?: string;
-            marginRight?: string;
-            marginBottom?: string;
-            objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
-            paddingTop?: string;
-            paddingLeft?: string;
-            paddingRight?: string;
-            paddingBottom?: string;
-            textAlign?: 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
-            width?: string;
-        };
+        styles: StylesType;
         createdAt: string;
         updatedAt: string;
         deletedAt: string | null;
@@ -234,31 +106,7 @@ export type RawWebsiteType = {
                     };
                 };
             };
-            styles: {
-                alignItems?: string;
-                backgroundColor?: string;
-                borderColor?: string;
-                borderRadius?: string;
-                borderStyle?: string;
-                borderWidth?: string;
-                color?: string;
-                display?: string;
-                float?: 'left' | 'right' | 'none' | 'inline-start' | 'inline-end';
-                fontSize?: string;
-                fontWeight?: string;
-                height?: string;
-                marginTop?: string;
-                marginLeft?: string;
-                marginRight?: string;
-                marginBottom?: string;
-                objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
-                paddingTop?: string;
-                paddingLeft?: string;
-                paddingRight?: string;
-                paddingBottom?: string;
-                textAlign?: 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
-                width?: string;
-            };
+            styles: StylesType;
             sort: number;
             enabled: boolean;
             createdAt: string;
@@ -310,31 +158,7 @@ export type RawWebsiteType = {
                             successMessageId?: number;
                             errorMessageId?: number;
                         };
-                        styles: {
-                            alignItems?: string;
-                            backgroundColor?: string;
-                            borderColor?: string;
-                            borderRadius?: string;
-                            borderStyle?: string;
-                            borderWidth?: string;
-                            color?: string;
-                            display?: string;
-                            float?: 'left' | 'right' | 'none' | 'inline-start' | 'inline-end';
-                            fontSize?: string;
-                            fontWeight?: string;
-                            height?: string;
-                            marginTop?: string;
-                            marginLeft?: string;
-                            marginRight?: string;
-                            marginBottom?: string;
-                            objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
-                            paddingTop?: string;
-                            paddingLeft?: string;
-                            paddingRight?: string;
-                            paddingBottom?: string;
-                            textAlign?: 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
-                            width?: string;
-                        };
+                        styles: StylesType;
                         createdAt: string;
                         updatedAt: string;
                         deletedAt: string | null;

package/dist/utils/InputValidators.js

@@ -1,21 +1,21 @@
 export function nameValidation(name) {
     if (!name || name.length === 0) {
-        return { success: false, message: 'Campo obrigatório' };
+        return { success: false, message: 'Required field' };
     }
     if (name.length < 3) {
-        return { success: false, message: 'Nome muito curto' };
+        return { success: false, message: 'Name too short' };
     }
     if (name.length > 50) {
-        return { success: false, message: 'Nome muito longo' };
+        return { success: false, message: 'Name too long' };
     }
     return { success: true };
 }
 export function birthDateValidation(birthDate) {
     if (!birthDate || birthDate.length === 0) {
-        return { success: false, message: 'Campo obrigatório' };
+        return { success: false, message: 'Required field' };
     }
     if (!dateValidate(birthDate)) {
-        return { success: false, message: 'Data inválida' };
+        return { success: false, message: 'Invalid date' };
     }
     return { success: true };
 }
@@ -29,12 +29,12 @@ export function dateValidate(data) {
 }
 export function emailValidation(email) {
     if (!email || email.length === 0) {
-        return { success: false, message: 'Campo obrigatório' };
+        return { success: false, message: 'Required field' };
     }
     if (emailValidate(email)) {
         return { success: true };
     }
-    return { success: false, message: 'Email inválido' };
+    return { success: false, message: 'Invalid email' };
 }
 export function emailValidate(email) {
     return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
@@ -42,13 +42,13 @@ export function emailValidate(email) {
 export function cpfValidation(cpf) {
     const onlyDigits = cpf === null || cpf === void 0 ? void 0 : cpf.replaceAll(/\D/g, '');
     if (!cpf || onlyDigits.length === 0) {
-        return { success: false, message: 'Campo obrigatório' };
+        return { success: false, message: 'Required field' };
     }
     else if (cpfValidate(onlyDigits)) {
         return { success: true };
     }
     else {
-        return { success: false, message: 'CPF inválido' };
+        return { success: false, message: 'Invalid CPF' };
     }
 }
 export function cpfValidate(cpf) {
@@ -74,13 +74,13 @@ export function cpfValidate(cpf) {
 export function phoneValidation(phone) {
     const onlyDigits = phone === null || phone === void 0 ? void 0 : phone.replaceAll(/\D/g, '');
     if (!onlyDigits || onlyDigits.length === 0) {
-        return { success: false, message: 'Campo obrigatório' };
+        return { success: false, message: 'Required field' };
     }
     else if (phoneValidate(phone)) {
         return { success: true };
     }
     else {
-        return { success: false, message: 'Celular inválido' };
+        return { success: false, message: 'Invalid phone' };
     }
 }
 export function phoneValidate(cel) {

package/dist/utils/propertyUtils.d.ts

@@ -0,0 +1,3 @@
+export declare function getString(props: Record<string, unknown>, key: string, fallback?: string): string;
+export declare function getNumber(props: Record<string, unknown>, key: string, fallback?: number): number | undefined;
+export declare function getBoolean(props: Record<string, unknown>, key: string, fallback?: boolean): boolean;

package/dist/utils/propertyUtils.js

@@ -0,0 +1,28 @@
+export function getString(props, key, fallback = '') {
+    const val = props[key];
+    if (typeof val === 'string')
+        return val;
+    if (typeof val === 'number' || typeof val === 'boolean')
+        return String(val);
+    return fallback;
+}
+export function getNumber(props, key, fallback) {
+    const val = props[key];
+    if (typeof val === 'number')
+        return val;
+    if (typeof val === 'string') {
+        const n = Number(val);
+        return Number.isNaN(n) ? fallback : n;
+    }
+    return fallback;
+}
+export function getBoolean(props, key, fallback = false) {
+    const val = props[key];
+    if (typeof val === 'boolean')
+        return val;
+    if (typeof val === 'string')
+        return val === 'true' || val === '1';
+    if (typeof val === 'number')
+        return val !== 0;
+    return fallback;
+}

package/package.json

@@ -1,17 +1,18 @@
 {
   "name": "lib-pixelbuild",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "engines": {
     "node": "^24.18.0",
     "npm": ">=10"
   },
   "type": "module",
   "main": "./dist/index.js",
-  "module": "./dist/index.d.js",
+  "module": "./dist/index.js",
   "exports": {
     ".": {
       "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     }
   },
   "files": [
@@ -21,9 +22,13 @@
     "*.css"
   ],
   "scripts": {
-    "prepublishOnly": "npm run build",
-    "build": "tsc && tsc-esm-fix dist",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "prebuild": "rm -rf dist",
+    "prepare": "husky || true",
+    "prepublishOnly": "npm run build && npm test && npm run lint",
+    "build": "tsc -p tsconfig.build.json && tsc-esm-fix dist",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
     "lint": "eslint . --ext .ts,.tsx",
     "lint:fix": "eslint . --ext .ts,.tsx --fix",
     "format": "prettier --write .",
@@ -55,24 +60,28 @@
   "homepage": "https://github.com/Lucas-SCCP/lib-pixelbuild#readme",
   "devDependencies": {
     "@eslint/js": "^9.29.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^7.0.0",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^24.0.13",
     "@types/react": "^18.3.3",
     "@types/react-bootstrap": "^1.0.1",
     "@types/react-dom": "^18.3.0",
-    "@types/react-slick": "^0.23.13",
     "@typescript-eslint/eslint-plugin": "^8.35.0",
     "@typescript-eslint/parser": "^8.35.0",
+    "@vitejs/plugin-react": "^6.0.4",
     "bootstrap": "^5.3.7",
+    "dompurify": "^3.2.6",
     "eslint": "^10.8.0",
-    "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-prettier": "^5.5.1",
-    "eslint-plugin-react": "^7.22.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "prettier": "^3.6.2",
-    "tsc-esm-fix": "^3.1.2",
-    "dompurify": "^3.2.6",
+    "globals": "^17.8.0",
+    "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",
     "react-dom": "^18.2.0",
@@ -81,12 +90,18 @@
     "react-icons": "^5.3.0",
     "react-imask": "^7.6.1",
     "react-router-dom": "^6.28.0",
-    "react-slick": "^0.30.3",
-    "slick-carousel": "^1.8.1",
+    "tsc-esm-fix": "^3.1.2",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.34.1",
+    "vitest": "^4.1.10",
     "zustand": "^5.0.5"
   },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
   "peerDependencies": {
     "bootstrap": "^5.0.0",
     "dompurify": "^3.2.6",
@@ -97,10 +112,8 @@
     "react-ga4": "^2.1.0",
     "react-helmet-async": "^2.0.5",
     "react-icons": "^5.3.0",
-    "react-router-dom": "^6.28.0 || ^7.0.0",
-    "react-slick": "^0.30.3",
-    "slick-carousel": "^1.8.1",
     "react-imask": "^7.6.1",
+    "react-router-dom": "^6.28.0 || ^7.0.0",
     "zustand": "^5.0.5"
   }
 }

package/dist/elements/FileElement.d.ts

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

package/dist/elements/FileElement.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import DOMPurify from 'dompurify';
-import { ElementColWrapper } from './ElementColWrapper.js';
-export function FileElement({ element }) {
-    return (_jsx(ElementColWrapper, { element: element, children: _jsx("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(String(element.id)) } }) }));
-}