@woodylab/payload 0.0.121 → 0.0.123

package/dist/config/react/Card.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+type CardProps = {
+    children?: ReactNode;
+};
+export declare const Card: ({ children }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/config/react/Card.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Card = ({ children }) => {
+    return _jsx("div", { children: children ?? 'Card works' });
+};

package/dist/config/react/ComponentRenderer.d.ts

@@ -0,0 +1 @@
+export declare function ComponentRenderer({ type, view, data }: any): import("react/jsx-runtime").JSX.Element | null;

package/dist/config/react/ComponentRenderer.js

@@ -0,0 +1,29 @@
+// components/ComponentRenderer.tsx
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { componentRegistry } from './registry';
+function getValueByPath(obj, path) {
+    return path.split('.').reduce((acc, key) => acc?.[key], obj);
+}
+export function ComponentRenderer({ type, view, data }) {
+    if (type !== 'view')
+        return null;
+    const rows = data[view.dataSet];
+    const Container = componentRegistry[view.component.componentName];
+    const Row = componentRegistry[view.rowComponent.componentName];
+    if (!Container || !Row)
+        return null;
+    const containerClassNames = Array.isArray(view.viewMode)
+        ? view.viewMode.map((mode) => mode?.className || '').join(' ')
+        : '';
+    return (_jsx(Container, { className: containerClassNames, children: rows.map((item, i) => {
+            const props = {};
+            for (const [k, v] of Object.entries(view.rowPropsMapping ?? {})) {
+                props[k] = getValueByPath(item, v);
+            }
+            const rowClassNames = Array.isArray(view.rowViewMode)
+                ? view.rowViewMode.map((mode) => mode?.className || '').join(' ')
+                : '';
+            return _jsx(Row, { ...props, className: rowClassNames }, i);
+        }) }));
+}

package/dist/config/react/PageRenderer.d.ts

@@ -0,0 +1,4 @@
+export declare function PageRenderer({ layout, serverData, }: {
+    layout: any[];
+    serverData: Record<number, any[]>;
+}): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/config/react/PageRenderer.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+// #TODO Gestire doppio caricamento dati:
+// 1 lato payload usando come già fatto api interne di payload mappando i campi in un blocco di tipo view dedicato
+import { resolveInlineComponent } from '../utils/resolveInlineComponent';
+import { ViewBlock } from './ViewBlock';
+// 2 recupero dati sempre lato server chiamando un EP in maniera asincrona e gestendo il corretto binding
+export async function PageRenderer({ layout, serverData, }) {
+    const resolvedLayout = layout.map((block, index) => {
+        if (block.blockType !== 'view')
+            return block;
+        console.log(block);
+        console.log(serverData);
+        return {
+            blockType: block.blockType,
+            component: block.component,
+            viewMode: block.viewMode,
+            containerProps: block.containerProps,
+            rowComponent: block.rowComponent,
+            rowViewMode: block.rowViewMode,
+            rowPropsMapping: block.rowPropsMapping,
+            rowChildren: block.rowChildren,
+            _resolvedData: serverData[index] ?? [],
+            _resolvedOk: true,
+        };
+    });
+    return (_jsx(_Fragment, { children: resolvedLayout.map((block, i) => {
+            if (block.blockType === 'view') {
+                return _jsx(ViewBlock, { ...block }, i);
+            }
+            const resolved = resolveInlineComponent(block);
+            if (!resolved)
+                return null;
+            const { Component, props } = resolved;
+            return _jsx(Component, { ...props }, i);
+        }) }));
+}

package/dist/config/react/ViewBlock.d.ts

@@ -0,0 +1 @@
+export declare function ViewBlock(block: any): import("react/jsx-runtime").JSX.Element | null;

package/dist/config/react/ViewBlock.js

@@ -0,0 +1,62 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { componentRegistry } from './registry';
+function resolveClassName(viewMode) {
+    if (Array.isArray(viewMode) && viewMode.length > 0) {
+        return viewMode
+            .map((vm) => vm?.css.className)
+            .filter(Boolean)
+            .join(' ');
+    }
+    return viewMode?.css.className ?? '';
+}
+export function ViewBlock(block) {
+    const { component, viewMode, rowComponent, rowViewMode, containerProps = {}, rowPropsMapping = {}, rowChildren = [], _resolvedData = [], _resolvedOk = true, } = block;
+    const Container = componentRegistry[component.componentName];
+    const Row = componentRegistry[rowComponent.componentName];
+    if (!Container || !Row)
+        return null;
+    if (!_resolvedOk) {
+        return (_jsx(Container, { className: resolveClassName(viewMode), children: _jsx("div", { className: "text-red-600", children: "Impossibile caricare i dati" }) }));
+    }
+    //#TODO gestire rendering di molteplici rowChildren al mometno stampa solo il primo elemento dell'array
+    // --- helper per render figli di riga (con sourceProps mapping) ---
+    const renderRowChildren = (children, item) => {
+        return children.map((child, idx) => {
+            const ChildComp = componentRegistry[child.definition?.componentName];
+            if (!ChildComp)
+                return null;
+            const childVM = Array.isArray(child.viewMode) ? child.viewMode[0] : child.viewMode;
+            const hasSourceProps = child.sourceProps &&
+                typeof child.sourceProps === 'object' &&
+                Object.keys(child.sourceProps).length > 0;
+            let finalProps = {};
+            if (hasSourceProps) {
+                for (const [key, path] of Object.entries(child.sourceProps)) {
+                    // @ts-ignore
+                    finalProps[key] = path
+                        .toString()
+                        .split('.')
+                        .reduce((acc, k) => acc?.[k], item);
+                }
+            }
+            else {
+                // fallback ai props statici
+                finalProps = child.staticProps || {};
+            }
+            return _jsx(ChildComp, { ...finalProps, className: resolveClassName(childVM) }, idx);
+        });
+    };
+    return (_jsx(Container, { className: resolveClassName(viewMode), ...containerProps, children: _resolvedData.map((item, i) => {
+            const props = {};
+            // mapping valori verso props della card
+            for (const [key, path] of Object.entries(rowPropsMapping)) {
+                // @ts-ignore
+                props[key] = path
+                    .toString()
+                    .split('.')
+                    .reduce((acc, k) => acc?.[k], item);
+            }
+            return (_jsx(Row, { ...props, className: resolveClassName(rowViewMode), children: rowChildren?.length > 0 ? renderRowChildren(rowChildren, item) : null }, i));
+        }) }));
+}

package/dist/config/react/index.d.ts

@@ -0,0 +1,5 @@
+export { Card } from './Card';
+export { ViewBlock } from './ViewBlock';
+export { ComponentRenderer } from './ComponentRenderer';
+export { PageRenderer } from './PageRenderer';
+export * from './registry';

package/dist/config/react/index.js

@@ -0,0 +1,5 @@
+export { Card } from './Card';
+export { ViewBlock } from './ViewBlock';
+export { ComponentRenderer } from './ComponentRenderer';
+export { PageRenderer } from './PageRenderer';
+export * from './registry';

package/dist/config/react/registry.d.ts

@@ -0,0 +1 @@
+export declare const componentRegistry: Record<string, any>;

package/dist/config/react/registry.js

@@ -0,0 +1,5 @@
+// components/registry.ts
+import { Card } from './Card';
+export const componentRegistry = {
+    Card,
+};

package/dist/config/utils/resolveInlineComponent.d.ts

@@ -0,0 +1,4 @@
+export declare function resolveInlineComponent(block: any): {
+    Component: any;
+    props: any;
+} | null;

package/dist/config/utils/resolveInlineComponent.js

@@ -0,0 +1,35 @@
+// uims/resolveInlineComponent.ts
+import { componentRegistry } from '../react';
+export function resolveInlineComponent(block) {
+    const { definition, viewMode } = block;
+    if (!definition)
+        return null;
+    const Component = componentRegistry[definition.componentName];
+    if (!Component)
+        return null;
+    /* Caso CTA (inline typed) */
+    if (block.blockType === 'cta-block') {
+        return {
+            Component,
+            props: {
+                title: block.title,
+                description: block.description,
+                action: block.actionLabel
+                    ? {
+                        label: block.actionLabel,
+                        href: block.actionHref,
+                    }
+                    : undefined,
+                className: viewMode?.css.className ?? definition.defaultStyle,
+            },
+        };
+    }
+    /* Caso component-instance generico */
+    return {
+        Component,
+        props: {
+            ...(block.props ?? {}),
+            className: viewMode?.css.className ?? definition.defaultStyle,
+        },
+    };
+}

package/dist/config/utils/resolveViewRow.d.ts

@@ -0,0 +1,4 @@
+export declare function resolveViewRow({ item, rowComponent, rowViewMode, rowPropsMapping }: any): {
+    Row: any;
+    props: Record<string, any>;
+} | null;

package/dist/config/utils/resolveViewRow.js

@@ -0,0 +1,15 @@
+// uims/resolveViewRow.ts
+import { componentRegistry } from '../react';
+export function resolveViewRow({ item, rowComponent, rowViewMode, rowPropsMapping }) {
+    const Row = componentRegistry[rowComponent.componentName];
+    console.log(rowComponent);
+    if (!Row)
+        return null;
+    const props = {};
+    for (const prop in rowPropsMapping) {
+        const path = rowPropsMapping[prop];
+        props[prop] = path.split('.').reduce((acc, key) => acc?.[key], item);
+    }
+    props.className = rowViewMode?.css.className ?? rowComponent.defaultStyle;
+    return { Row, props };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woodylab/payload",
-  "version": "0.0.121",
+  "version": "0.0.123",
   "type": "module",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",

package/dist/generateCssVars.d.ts

@@ -1,11 +0,0 @@
-declare function generateCssVars(settings: {
-    headingFont?: string;
-    textFont?: string;
-    foregroundColor?: string;
-    primaryColor?: string;
-    secondaryColor?: string;
-    accentColor?: string;
-    darkColor?: string;
-    lightColor?: string;
-}): string;
-export default generateCssVars;

package/dist/generateCssVars.js

@@ -1,110 +0,0 @@
-import hexToRgb from './hexToRgb';
-function generateCssVars(settings) {
-    // Gestione robusta dei font
-    const fontWeights = [300, 400, 500, 600, 700, 800];
-    const fontsToImport = [settings.headingFont, settings.textFont]
-        .filter(Boolean)
-        .map((f) => {
-        if (!f)
-            return '';
-        // Aggiungiamo il parametro wght per specificare i pesi da caricare
-        return `@import url('https://fonts.googleapis.com/css2?family=${f.replace(/ /g, '+')}:wght@${fontWeights.join(';')}&display=swap');`;
-    })
-        .join('\n');
-    const generateOpacityVariants = (color, name) => {
-        if (!color) {
-            return '';
-        }
-        try {
-            const rgbValue = hexToRgb(color);
-            if (!rgbValue ||
-                typeof rgbValue.r !== 'number' ||
-                typeof rgbValue.g !== 'number' ||
-                typeof rgbValue.b !== 'number') {
-                console.warn(`Impossibile convertire il colore ${name}: ${color}`);
-                return '';
-            }
-            const { r, g, b } = rgbValue;
-            const opacityVars = Array.from({ length: 9 }, (_, i) => {
-                const opacity = (i + 1) * 10;
-                return `--color-${name}-${opacity}: rgba(${r}, ${g}, ${b}, ${opacity / 100});`;
-            }).join('\n');
-            return `
-        --color-${name}: rgb(${r}, ${g}, ${b}); /* Default (opacità 1) */
-        ${opacityVars}
-      `;
-        }
-        catch (error) {
-            console.warn(`Errore nella generazione delle varianti di opacità per ${name}: ${error}`);
-            return '';
-        }
-    };
-    const generateBrightnessVariants = (color, name) => {
-        if (!color) {
-            return '';
-        }
-        try {
-            const rgbValue = hexToRgb(color);
-            if (!rgbValue ||
-                typeof rgbValue.r !== 'number' ||
-                typeof rgbValue.g !== 'number' ||
-                typeof rgbValue.b !== 'number') {
-                console.warn(`Impossibile convertire il colore ${name}: ${color}`);
-                return '';
-            }
-            const { r, g, b } = rgbValue;
-            const clamp = (value) => Math.max(0, Math.min(255, Math.round(value)));
-            const mixWith = (target, amount) => clamp(r + (target - r) * amount) +
-                ',' +
-                clamp(g + (target - g) * amount) +
-                ',' +
-                clamp(b + (target - b) * amount);
-            const lighter = Array.from({ length: 4 }, (_, i) => {
-                const step = (i + 1) / 5;
-                return `--color-${name}-light-${i + 1}: rgb(${mixWith(255, step)});`;
-            }).join('\n');
-            const darker = Array.from({ length: 4 }, (_, i) => {
-                const step = (i + 1) / 5;
-                return `--color-${name}-dark-${i + 1}: rgb(${mixWith(0, step)});`;
-            }).join('\n');
-            return `--color-${name}: rgb(${r}, ${g}, ${b});
-        ${lighter}
-        ${darker}
-        `;
-        }
-        catch (error) {
-            console.warn(`Errore nella generazione delle varianti di brightness per ${name}: ${error}`);
-            return '';
-        }
-    };
-    // Genera variabili solo per i colori forniti
-    const primaryVars = `${generateOpacityVariants(settings.primaryColor, 'primary')} ${generateBrightnessVariants(settings.primaryColor, 'primary')}`;
-    const secondaryVars = `${generateOpacityVariants(settings.secondaryColor, 'secondary')} ${generateBrightnessVariants(settings.secondaryColor, 'secondary')}`;
-    const accentVars = `${generateOpacityVariants(settings.secondaryColor, 'accent')} ${generateBrightnessVariants(settings.secondaryColor, 'accent')}`;
-    const darkVars = `${generateOpacityVariants(settings.secondaryColor, 'dark')} ${generateBrightnessVariants(settings.secondaryColor, 'dark')}`;
-    const lightVars = `${generateOpacityVariants(settings.secondaryColor, 'light')} ${generateBrightnessVariants(settings.secondaryColor, 'light')}`;
-    // Genera i valori dei font in modo sicuro
-    const headingFontValue = settings.headingFont
-        ? `'${settings.headingFont}', sans-serif`
-        : 'system-layout, sans-serif';
-    const textFontValue = settings.textFont
-        ? `'${settings.textFont}', sans-serif`
-        : 'system-layout, sans-serif';
-    return `
-    ${fontsToImport}
-
-    :root {
-      --font-heading: ${headingFontValue};
-      --font-text: ${textFontValue};
-      --color-white: #ffffff;
-      --color-black: #000000;
-      --color-foreground: ${settings.foregroundColor || '#FFFFFF'};
-      ${primaryVars}
-      ${secondaryVars}
-      ${accentVars}
-      ${darkVars}
-      ${lightVars}
-    }
-  `;
-}
-export default generateCssVars;