lib-pixelbuild 0.1.0

package/dist/types/RawWebsiteType.d.ts

@@ -0,0 +1,346 @@
+export type RawWebsiteType = {
+    id: number;
+    name: string;
+    domain: string;
+    domainStage: string;
+    logo: string;
+    header: {
+        properties: {
+            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;
+        };
+    };
+    footer: {
+        properties: {
+            text1: string;
+            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;
+        };
+    };
+    properties: {
+        loadingMessage: string;
+        social: {
+            facebook: {
+                path: string;
+            };
+            linktree: {
+                path: string;
+            };
+            instagram: {
+                path: string;
+            };
+        };
+    };
+    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;
+    };
+    enabled: boolean;
+    publishedAt: string | null;
+    createdAt: string;
+    updatedAt: string;
+    deletedAt: string | null;
+    planId: number;
+    pages: Array<{
+        id: number;
+        websiteId: number;
+        title: string;
+        name: string;
+        path: string;
+        menu: number;
+        menuOrder: number;
+        menuType: 'link' | 'dropdown' | 'sections';
+        menuSections?: Array<{
+            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;
+            };
+        }>;
+        enabled: boolean;
+        properties: {
+            size: {
+                xs: {
+                    span: number;
+                    offset?: number;
+                };
+                sm: {
+                    span: number;
+                    offset?: number;
+                };
+                md: {
+                    span: number;
+                    offset?: number;
+                };
+                lg: {
+                    span: number;
+                    offset?: 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;
+        };
+        createdAt: string;
+        updatedAt: string;
+        deletedAt: string | null;
+        components: Array<{
+            id: number;
+            pageId: number;
+            componentTypeId: number;
+            name: string;
+            properties: {
+                size: {
+                    xs: {
+                        span: number;
+                        offset?: number;
+                    };
+                    sm: {
+                        span: number;
+                        offset?: number;
+                    };
+                    md: {
+                        span: number;
+                        offset?: number;
+                    };
+                    lg: {
+                        span: number;
+                        offset?: 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;
+            };
+            sort: number;
+            enabled: boolean;
+            createdAt: string;
+            updatedAt: string;
+            deletedAt: string | null;
+            elements: {
+                line: number;
+                content: [
+                    {
+                        id: number;
+                        componentId: number;
+                        elementTypeId: number;
+                        componentParent: number | null;
+                        sort: number;
+                        properties: {
+                            name: string;
+                            title: string;
+                            message: string;
+                            type: string;
+                            startHidden: boolean;
+                            size: {
+                                xs: {
+                                    span: number;
+                                    offset?: number;
+                                };
+                                sm: {
+                                    span: number;
+                                    offset?: number;
+                                };
+                                md: {
+                                    span: number;
+                                    offset?: number;
+                                };
+                                lg: {
+                                    span: number;
+                                    offset?: number;
+                                };
+                            };
+                            path?: string;
+                            mask?: string;
+                            placeholder?: string;
+                            required?: boolean;
+                            inputValidateId?: number;
+                            loadingTime?: number;
+                            hideOnClick?: boolean;
+                            actionId?: number;
+                            successActionId?: number;
+                            errorActionId?: number;
+                            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;
+                        };
+                        createdAt: string;
+                        updatedAt: string;
+                        deletedAt: string | null;
+                    }
+                ];
+            };
+        }>;
+    }>;
+};

package/dist/types/RawWebsiteType.js

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

package/dist/types/SectionColumnType.d.ts

@@ -0,0 +1,14 @@
+import type { StylesType } from './StylesType.js';
+import type { ColumnWidthType } from './ColumnWidthType.js';
+import type { ComponentType } from './ComponentType.js';
+import type { SectionType } from './SectionType.js';
+export interface SectionColumnType {
+    id: number;
+    width: ColumnWidthType;
+    offset: ColumnWidthType;
+    sort: number;
+    properties: Record<string, unknown>;
+    styles: StylesType;
+    components: ComponentType[];
+    childSections: SectionType[];
+}

package/dist/types/SectionColumnType.js

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

package/dist/types/SectionType.d.ts

@@ -0,0 +1,10 @@
+import type { StylesType } from './StylesType.js';
+import type { SectionColumnType } from './SectionColumnType.js';
+export interface SectionType {
+    id: number;
+    sectionType: 'container' | 'container-fluid' | 'row';
+    sort: number;
+    properties: Record<string, unknown>;
+    styles: StylesType;
+    columns: SectionColumnType[];
+}

package/dist/types/SectionType.js

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

package/dist/types/SocialPropertiesType.d.ts

@@ -0,0 +1,11 @@
+export interface SocialPropertiesType {
+    instagram: {
+        path: string;
+    };
+    facebook: {
+        path: string;
+    };
+    linktree: {
+        path: string;
+    };
+}

package/dist/types/SocialPropertiesType.js

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

package/dist/types/StylesType.d.ts

@@ -0,0 +1,35 @@
+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 interface StylesType {
+    alignItems?: string;
+    backgroundColor?: string;
+    backgroundGradientColorStart?: string;
+    backgroundGradientColorEnd?: string;
+    backgroundImage?: string;
+    backgroundSize?: string;
+    backgroundPosition?: string;
+    borderColor?: string;
+    borderRadius?: string;
+    borderStyle?: string;
+    borderWidth?: string;
+    color?: string;
+    display?: string;
+    float?: Float;
+    fluid?: boolean;
+    fontSize?: string;
+    fontWeight?: FontWeight;
+    height?: string;
+    marginTop?: string;
+    marginLeft?: string;
+    marginRight?: string;
+    marginBottom?: string;
+    objectFit?: ObjectFit;
+    paddingTop?: string;
+    paddingLeft?: string;
+    paddingRight?: string;
+    paddingBottom?: string;
+    textAlign?: TextAlign;
+    width?: string;
+}

package/dist/types/StylesType.js

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

package/dist/types/UserType.d.ts

@@ -0,0 +1,10 @@
+export interface UserType {
+    id: number;
+    email: string;
+    password: string;
+    defaultWebsiteId: number;
+    token: string;
+    accessLevel: {
+        id: number;
+    };
+}

package/dist/types/UserType.js

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

package/dist/types/WebsitePropertiesType.d.ts

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

package/dist/types/WebsitePropertiesType.js

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

package/dist/types/WebsiteType.d.ts

@@ -0,0 +1,23 @@
+import type { PageType } from './PageType.js';
+import type { StylesType } from './StylesType.js';
+import type { HeaderType } from './HeaderType.js';
+import type { FooterType } from './FooterType.js';
+import type { WebsitePropertiesType } from './WebsitePropertiesType.js';
+export interface WebsiteType {
+    id: number;
+    name: string;
+    domain: string;
+    domainStage: string;
+    logo: string;
+    header: HeaderType;
+    footer: FooterType;
+    properties: WebsitePropertiesType;
+    styles: StylesType;
+    enabled: boolean;
+    publishedAt: string | null;
+    createdAt: string;
+    updatedAt: string;
+    deletedAt: string | null;
+    planId: number;
+    pages: PageType[];
+}

package/dist/types/WebsiteType.js

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

package/dist/utils/InputValidators.d.ts

@@ -0,0 +1,14 @@
+export interface ValidationResult {
+    success: boolean;
+    message?: string;
+    [key: string]: boolean | string | undefined;
+}
+export declare function nameValidation(name: string): ValidationResult;
+export declare function birthDateValidation(birthDate: string): ValidationResult;
+export declare function dateValidate(data: string): boolean;
+export declare function emailValidation(email: string): ValidationResult;
+export declare function emailValidate(email: string): boolean;
+export declare function cpfValidation(cpf: string): ValidationResult;
+export declare function cpfValidate(cpf: string): boolean;
+export declare function phoneValidation(phone: string): ValidationResult;
+export declare function phoneValidate(cel: string): boolean;

package/dist/utils/InputValidators.js

@@ -0,0 +1,88 @@
+export function nameValidation(name) {
+    if (!name || name.length === 0) {
+        return { success: false, message: 'Campo obrigatório' };
+    }
+    if (name.length < 3) {
+        return { success: false, message: 'Nome muito curto' };
+    }
+    if (name.length > 50) {
+        return { success: false, message: 'Nome muito longo' };
+    }
+    return { success: true };
+}
+export function birthDateValidation(birthDate) {
+    if (!birthDate || birthDate.length === 0) {
+        return { success: false, message: 'Campo obrigatório' };
+    }
+    if (!dateValidate(birthDate)) {
+        return { success: false, message: 'Data inválida' };
+    }
+    return { success: true };
+}
+export function dateValidate(data) {
+    const [dia, mes, ano] = data.split('/');
+    if (!dia || !mes || !ano)
+        return false;
+    const d = new Date(`${ano}-${mes}-${dia}`);
+    const hoje = new Date();
+    return /^\d{2}\/\d{2}\/\d{4}$/.test(data) && !Number.isNaN(d.getTime()) && d <= hoje;
+}
+export function emailValidation(email) {
+    if (!email || email.length === 0) {
+        return { success: false, message: 'Campo obrigatório' };
+    }
+    if (emailValidate(email)) {
+        return { success: true };
+    }
+    return { success: false, message: 'Email inválido' };
+}
+export function emailValidate(email) {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(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' };
+    }
+    else if (cpfValidate(onlyDigits)) {
+        return { success: true };
+    }
+    else {
+        return { success: false, message: 'CPF inválido' };
+    }
+}
+export function cpfValidate(cpf) {
+    cpf = cpf.replaceAll(/[^\d]+/g, '');
+    if (cpf.length !== 11 || /^(\d)\1+$/.test(cpf))
+        return false;
+    let soma = 0;
+    for (let i = 0; i < 9; i++)
+        soma += Number.parseInt(cpf.charAt(i)) * (10 - i);
+    let resto = 11 - (soma % 11);
+    if (resto === 10 || resto === 11)
+        resto = 0;
+    if (resto !== Number.parseInt(cpf.charAt(9)))
+        return false;
+    soma = 0;
+    for (let i = 0; i < 10; i++)
+        soma += Number.parseInt(cpf.charAt(i)) * (11 - i);
+    resto = 11 - (soma % 11);
+    if (resto === 10 || resto === 11)
+        resto = 0;
+    return resto === Number.parseInt(cpf.charAt(10));
+}
+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' };
+    }
+    else if (phoneValidate(phone)) {
+        return { success: true };
+    }
+    else {
+        return { success: false, message: 'Celular inválido' };
+    }
+}
+export function phoneValidate(cel) {
+    return /^\(\d{2}\) \d{5}-\d{4}$/.test(cel);
+}

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "lib-pixelbuild",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.d.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "prepublishOnly": "npm run build",
+    "build": "tsc && tsc-esm-fix dist",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "format": "prettier --write .",
+    "build:watch": "node scripts/build-watch.mjs",
+    "link:global": "npm link",
+    "unlink:global": "npm unlink --no-save",
+    "link:consumer-peers": "node scripts/link-consumer-peers.mjs"
+  },
+  "keywords": [
+    "pixelbuild",
+    "react",
+    "render-engine",
+    "schema-driven",
+    "website-builder"
+  ],
+  "author": {
+    "name": "Lucas da Silva",
+    "email": "lucas.2601@gmail.com"
+  },
+  "license": "ISC",
+  "description": "React render engine for schema-driven PixelBuild websites",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Lucas-SCCP/lib-pixelbuild.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Lucas-SCCP/lib-pixelbuild/issues"
+  },
+  "homepage": "https://github.com/Lucas-SCCP/lib-pixelbuild#readme",
+  "devDependencies": {
+    "@eslint/js": "^9.29.0",
+    "@types/node": "^24.0.13",
+    "@types/react": "^18.3.3",
+    "@types/react-bootstrap": "^1.0.1",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-input-mask": "^3.0.6",
+    "@types/react-slick": "^0.23.13",
+    "@typescript-eslint/eslint-plugin": "^8.35.0",
+    "@typescript-eslint/parser": "^8.35.0",
+    "bootstrap": "^5.3.7",
+    "eslint": "^9.31.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-prettier": "^5.5.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "prettier": "^3.6.2",
+    "tsc-esm-fix": "^3.1.2",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.34.1"
+  },
+  "peerDependencies": {
+    "bootstrap": "^5.0.0",
+    "dompurify": "^3.2.6",
+    "react": "^18.0.0",
+    "react-bootstrap": "^2.10.10",
+    "react-dom": "^18.0.0",
+    "react-ga4": "^2.1.0",
+    "react-helmet-async": "^2.0.5",
+    "react-icons": "^5.3.0",
+    "react-input-mask": "^2.0.4",
+    "react-router-dom": "^6.28.0 || ^7.0.0",
+    "react-slick": "^0.30.3",
+    "slick-carousel": "^1.8.1",
+    "zustand": "^5.0.5",
+    "keen-slider": "^6.8.6"
+  }
+}