@woodylab/payload 0.0.86 → 0.0.88

package/dist/fields/style/fieldColor.js

@@ -0,0 +1,21 @@
+export const fieldThemeColor = (override) => ({
+    name: override?.name || 'color',
+    label: override?.label || 'Colore',
+    type: 'select',
+    required: override?.required ?? false,
+    options: [
+        { label: 'Default', value: '' },
+        { label: 'Foreground', value: 'foreground' },
+        { label: 'Primary', value: 'primary' },
+        { label: 'Secondary', value: 'secondary' },
+        { label: 'Accent', value: 'accent' },
+        { label: 'Dark', value: 'dark' },
+        { label: 'Light', value: 'light' },
+        { label: 'White', value: 'white' },
+        { label: 'Black', value: 'black' },
+    ],
+    admin: {
+        ...override?.admin,
+    },
+});
+export default fieldThemeColor;

package/dist/fields/style/fieldContainerWidths.js

@@ -0,0 +1,17 @@
+import { TailwindContainerWidths } from '../../tailwind';
+import fieldSelect from '../fieldSelect';
+/**
+ * Genera un campo per la selezione delle larghezze del container
+ * @returns Field - Campo di tipo `select` per PayloadCMS
+ */
+const fieldContainerWidths = () => {
+    return fieldSelect({
+        name: 'container',
+        label: 'Larghezza del container',
+        options: [{ value: '', label: '(Nessuno)' }, ...TailwindContainerWidths],
+        admin: {
+            description: 'Seleziona una larghezza massima per il container. Usa "None" per una larghezza a schermo intero.',
+        },
+    });
+};
+export default fieldContainerWidths;

package/dist/fields/style/fieldCss.js

@@ -0,0 +1,68 @@
+import fieldText from '../fieldText';
+import fieldMargins from './fieldMargins';
+import fieldPaddings from './fieldPaddings';
+import fieldHeights from './fieldHeights';
+/*
+const concatCssFields: FieldHook = (args) => {
+  const { value, siblingData, operation } = args
+  console.log(value)
+  console.log(siblingData)
+  console.log(operation)
+  const classes: string[] = []
+  if (operation === 'create' || operation === 'update') {
+    Object.entries(siblingData).forEach(([key, val]) => {
+      if (key !== 'className' && val !== null && val !== undefined) {
+        classes.push(`${key}${val}`)
+      }
+    })
+  }
+  return classes.join(' ') || null
+}
+*/
+const concatCssFields = (args) => {
+    const { value, siblingData, operation } = args;
+    console.log('value', value);
+    console.log('siblingData', siblingData);
+    console.log('operation', operation);
+    if (operation === 'create' || operation === 'update') {
+        const classes = [];
+        Object.entries(siblingData || {}).forEach(([key, val]) => {
+            if (key !== 'className' && val !== null && val !== undefined) {
+                classes.push(`${key}${val}`);
+            }
+        });
+        console.log(classes.join(' '));
+        return classes.join(' ');
+    }
+};
+const fieldCss = () => {
+    return {
+        name: 'css',
+        type: 'group',
+        label: 'Regole di stile',
+        fields: [
+            fieldText({
+                name: 'className',
+                label: 'className',
+                required: false,
+                admin: {
+                    readOnly: true,
+                },
+                hooks: {
+                    beforeValidate: [concatCssFields],
+                },
+            }),
+            fieldHeights(),
+            {
+                type: 'tabs',
+                tabs: [
+                    {
+                        label: 'Spacing',
+                        fields: [fieldMargins(), fieldPaddings()],
+                    },
+                ],
+            },
+        ],
+    };
+};
+export default fieldCss;

package/dist/fields/style/fieldFontSizes.js

@@ -0,0 +1,14 @@
+import { TailwindTextSizes } from '../../tailwind';
+import fieldSelect from '../fieldSelect';
+const fieldFontSizes = () => {
+    return fieldSelect({
+        name: 'fs',
+        label: 'Dimensione del testo',
+        options: TailwindTextSizes,
+        defaultValue: 'text-base',
+        admin: {
+            description: 'Seleziona una dimensione per il testo (es. Small, Base, Large, ecc.).',
+        },
+    });
+};
+export default fieldFontSizes;

package/dist/fields/style/fieldHeights.js

@@ -0,0 +1,23 @@
+import { TailwindHeights, TailwindViewportHeights } from '../../tailwind';
+import fieldSelect from '../fieldSelect';
+/**
+ * Genera un campo per la selezione delle altezze
+ * @returns Field - Campo di tipo `select` per PayloadCMS
+ */
+const fieldHeights = () => {
+    return fieldSelect({
+        name: 'h-',
+        label: 'Altezza',
+        type: 'select',
+        defaultValue: 'full',
+        options: [
+            { value: '', label: '(Nessuno)' },
+            ...TailwindViewportHeights.map((h) => ({ value: `${h}`, label: h })),
+            ...TailwindHeights.map((h) => ({ value: `${h}`, label: h })),
+        ],
+        admin: {
+            description: 'Definisce l’altezza dell’elemento.',
+        },
+    });
+};
+export default fieldHeights;

package/dist/fields/style/fieldMargins.js

@@ -0,0 +1,138 @@
+import fieldNumber from '../fieldNumber';
+import { getNumberValueFromClassNameString } from '../../hooks';
+const concatMarginFields = (args) => {
+    const { value, siblingData, operation } = args;
+    if (operation === 'create' || operation === 'update') {
+        const margins = siblingData || {};
+        const { all, x, y, t, r, b, l } = margins;
+        const classes = [];
+        if (all)
+            classes.push(`m-${all}`);
+        if (x)
+            classes.push(`mx-${x}`);
+        if (y)
+            classes.push(`my-${y}`);
+        if (t)
+            classes.push(`mt-${t}`);
+        if (r)
+            classes.push(`mr-${r}`);
+        if (b)
+            classes.push(`mb-${b}`);
+        if (l)
+            classes.push(`ml-${l}`);
+        return classes.join(' ');
+    }
+    return value;
+};
+/**
+ * Genera un campo per la selezione dinamica dei margini
+ * @returns Field - Campo di tipo `group` per PayloadCMS
+ */
+const fieldMargins = () => {
+    return {
+        label: 'Margini',
+        type: 'collapsible',
+        admin: {
+            initCollapsed: true,
+        },
+        fields: [
+            {
+                type: 'row',
+                fields: [
+                    fieldNumber({
+                        name: 'm-',
+                        label: 'Tutti i lati',
+                        virtual: true,
+                        min: 0,
+                        max: 96,
+                        admin: {
+                            width: '25%',
+                        },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString],
+                        },
+                    }),
+                    fieldNumber({
+                        name: 'mx-',
+                        label: 'Orizzontale',
+                        virtual: true,
+                        min: 0,
+                        max: 96,
+                        admin: {
+                            width: '25%',
+                        },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString],
+                        },
+                    }),
+                    fieldNumber({
+                        name: 'my-',
+                        label: 'Verticale',
+                        virtual: true,
+                        min: 0,
+                        max: 96,
+                        admin: {
+                            width: '25%',
+                        },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString],
+                        },
+                    }),
+                    fieldNumber({
+                        name: 'mt-',
+                        label: 'Top',
+                        virtual: true,
+                        min: 0,
+                        max: 96,
+                        admin: {
+                            width: '25%',
+                        },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString],
+                        },
+                    }),
+                    fieldNumber({
+                        name: 'mr-',
+                        label: 'Right',
+                        virtual: true,
+                        min: 0,
+                        max: 96,
+                        admin: {
+                            width: '25%',
+                        },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString],
+                        },
+                    }),
+                    fieldNumber({
+                        name: 'mb-',
+                        label: 'Bottom',
+                        virtual: true,
+                        min: 0,
+                        max: 96,
+                        admin: {
+                            width: '25%',
+                        },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString],
+                        },
+                    }),
+                    fieldNumber({
+                        name: 'ml-',
+                        label: 'Left',
+                        virtual: true,
+                        min: 0,
+                        max: 96,
+                        admin: {
+                            width: '25%',
+                        },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString],
+                        },
+                    }),
+                ],
+            },
+        ],
+    };
+};
+export default fieldMargins;

package/dist/fields/style/fieldPaddings.js

@@ -0,0 +1,114 @@
+import fieldNumber from '../fieldNumber';
+import { getNumberValueFromClassNameString } from '../../hooks';
+/**
+ * Genera un campo per la selezione dinamica dei margini
+ * @returns Field - Campo di tipo `group` per PayloadCMS
+ */
+const fieldPaddings = () => {
+    return {
+        label: 'Paddings',
+        type: 'collapsible',
+        admin: {
+            initCollapsed: true,
+        },
+        fields: [
+            {
+                type: 'row',
+                fields: [
+                    fieldNumber({
+                        name: 'p-',
+                        label: 'Tutti i lati',
+                        virtual: true,
+                        min: 0,
+                        max: 96,
+                        admin: {
+                            width: '25%',
+                        },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString],
+                        },
+                    }),
+                    fieldNumber({
+                        name: 'px-',
+                        label: 'Orizzontale',
+                        virtual: true,
+                        min: 0,
+                        max: 96,
+                        admin: {
+                            width: '25%',
+                        },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString],
+                        },
+                    }),
+                    fieldNumber({
+                        name: 'py-',
+                        label: 'Verticale',
+                        virtual: true,
+                        min: 0,
+                        max: 96,
+                        admin: {
+                            width: '25%',
+                        },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString],
+                        },
+                    }),
+                    fieldNumber({
+                        name: 'pt-',
+                        label: 'Top',
+                        virtual: true,
+                        min: 0,
+                        max: 96,
+                        admin: {
+                            width: '25%',
+                        },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString],
+                        },
+                    }),
+                    fieldNumber({
+                        name: 'pr-',
+                        label: 'Right',
+                        virtual: true,
+                        min: 0,
+                        max: 96,
+                        admin: {
+                            width: '25%',
+                        },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString],
+                        },
+                    }),
+                    fieldNumber({
+                        name: 'pb-',
+                        label: 'Bottom',
+                        virtual: true,
+                        min: 0,
+                        max: 96,
+                        admin: {
+                            width: '25%',
+                        },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString],
+                        },
+                    }),
+                    fieldNumber({
+                        name: 'pl-',
+                        label: 'Left',
+                        virtual: true,
+                        min: 0,
+                        max: 96,
+                        admin: {
+                            width: '25%',
+                        },
+                        hooks: {
+                            afterRead: [getNumberValueFromClassNameString],
+                        },
+                    }),
+                ],
+            },
+        ],
+    };
+};
+export default fieldPaddings;

package/dist/fields/style/fieldViewportHeights.js

@@ -0,0 +1,22 @@
+import { TailwindViewportHeights } from '../../tailwind';
+import fieldSelect from '../fieldSelect';
+/**
+ * Genera un campo per la selezione delle altezze
+ * @returns Field - Campo di tipo `select` per PayloadCMS
+ */
+const fieldViewportHeights = () => {
+    return fieldSelect({
+        name: 'h-',
+        label: 'Altezza viewport',
+        type: 'select',
+        options: [
+            { value: '', label: '(Nessuno)' },
+            ...TailwindViewportHeights.map((h) => ({ value: `${h}`, label: h })),
+        ],
+        admin: {
+            description: 'Definisce l’altezza dell’elemento.',
+            width: '50%',
+        },
+    });
+};
+export default fieldViewportHeights;

package/dist/fields/utils/fieldRoles.js

@@ -0,0 +1,26 @@
+import userRoles from '../../enums/userRoles';
+const fieldRoles = (override) => ({
+    name: override?.name || 'roles',
+    label: override?.label || 'Ruoli',
+    type: 'select',
+    required: override?.required ?? true,
+    hasMany: override?.hasMany ?? true,
+    options: [
+        ...Object.values(userRoles).map((role) => ({
+            label: role.charAt(0).toUpperCase() + role.slice(1).toLowerCase(),
+            value: role,
+        })),
+        ...(override?.options || []),
+    ],
+    access: {
+        create: () => true,
+        update: () => true,
+        read: () => true,
+        ...override?.access,
+    },
+    admin: {
+        description: 'Seleziona uno o più ruoli utente.',
+        ...override?.admin,
+    },
+});
+export default fieldRoles;

package/dist/generateCssVars.js

@@ -0,0 +1,71 @@
+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 '';
+        }
+    };
+    // Genera variabili solo per i colori forniti
+    const primaryVars = generateOpacityVariants(settings.primaryColor, "primary");
+    const secondaryVars = generateOpacityVariants(settings.secondaryColor, "secondary");
+    const accentVars = generateOpacityVariants(settings.accentColor, "accent");
+    const darkVars = generateOpacityVariants(settings.darkColor, "dark");
+    const lightVars = generateOpacityVariants(settings.lightColor, "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;

package/dist/generatePreviewPath.d.ts

@@ -1,4 +1,4 @@
-import { CollectionSlug, PayloadRequest } from 'payload';
+import type { CollectionSlug, PayloadRequest } from 'payload';
 declare const collectionPrefixMap: Partial<Record<CollectionSlug, string>>;
 type Props = {
     collection: keyof typeof collectionPrefixMap;

package/dist/generatePreviewPath.js

@@ -0,0 +1,14 @@
+const collectionPrefixMap = {
+    pages: '',
+};
+const generatePreviewPath = ({ collection, slug }) => {
+    const encodedParams = new URLSearchParams({
+        slug,
+        collection,
+        path: `${collectionPrefixMap[collection]}/${slug}`,
+        previewSecret: process.env.PREVIEW_SECRET || '',
+    });
+    const url = `/next/preview?${encodedParams.toString()}`;
+    return url;
+};
+export default generatePreviewPath;

package/dist/getButtonClasses.js

@@ -0,0 +1,135 @@
+function getButtonClasses(config) {
+    const { buttonStyle = 'solid', buttonColor = 'primary', buttonSize = 'default', buttonRounded = 'default', iconPosition = 'left', textColor, // Aggiungiamo il colore del testo
+    additionalEffects = [], } = config;
+    const classes = [
+        'inline-flex',
+        'items-center',
+        'justify-center',
+        'font-medium',
+        'focus:outline-none',
+        'focus-visible:ring-2',
+        'focus-visible:ring-offset-2',
+    ];
+    // Stile base
+    switch (buttonStyle) {
+        case 'solid':
+            classes.push(`bg-${buttonColor}`);
+            // Usa textColor se specificato, altrimenti usa il colore predefinito basato sul buttonColor
+            if (textColor) {
+                classes.push(`text-${textColor}`);
+            }
+            else {
+                classes.push(buttonColor === 'light' ? 'text-dark' : 'text-white');
+            }
+            classes.push(`hover:bg-${buttonColor}/90`);
+            break;
+        case 'outline':
+            classes.push(`border`);
+            classes.push(`border-${buttonColor}`);
+            // Usa textColor se specificato, altrimenti usa il colore del bottone
+            if (textColor) {
+                classes.push(`text-${textColor}`);
+                // Mantieni lo stesso colore di testo per l'hover, a meno che non sia specificato diversamente
+                classes.push(`hover:text-${textColor}`);
+            }
+            else {
+                classes.push(`text-${buttonColor}`);
+                classes.push(`hover:text-${buttonColor === 'light' ? 'dark' : 'white'}`);
+            }
+            classes.push(`hover:bg-${buttonColor}`);
+            break;
+        case 'ghost':
+            // Usa textColor se specificato, altrimenti usa il colore del bottone
+            if (textColor) {
+                classes.push(`text-${textColor}`);
+            }
+            else {
+                classes.push(`text-${buttonColor}`);
+            }
+            classes.push(`hover:bg-${buttonColor}/10`);
+            break;
+        case 'link':
+            // Usa textColor se specificato, altrimenti usa il colore del bottone
+            if (textColor) {
+                classes.push(`text-${textColor}`);
+            }
+            else {
+                classes.push(`text-${buttonColor}`);
+            }
+            classes.push('hover:underline');
+            break;
+    }
+    // Dimensione
+    switch (buttonSize) {
+        case 'small':
+            classes.push('text-xs px-2.5 py-1.5');
+            break;
+        case 'default':
+            classes.push('text-sm px-4 py-2');
+            break;
+        case 'medium':
+            classes.push('text-base px-5 py-2.5');
+            break;
+        case 'large':
+            classes.push('text-lg px-6 py-3');
+            break;
+        case 'xl':
+            classes.push('text-xl px-8 py-4');
+            break;
+    }
+    // Se è solo icona, aggiusta il padding per renderlo quadrato/rotondo
+    if (config.useIcon && iconPosition === 'only') {
+        classes.push('p-0');
+        switch (buttonSize) {
+            case 'small':
+                classes.push('w-7 h-7');
+                break;
+            case 'default':
+                classes.push('w-9 h-9');
+                break;
+            case 'medium':
+                classes.push('w-10 h-10');
+                break;
+            case 'large':
+                classes.push('w-12 h-12');
+                break;
+            case 'xl':
+                classes.push('w-14 h-14');
+                break;
+        }
+    }
+    // Arrotondamento
+    switch (buttonRounded) {
+        case 'none':
+            classes.push('rounded-none');
+            break;
+        case 'sm':
+            classes.push('rounded-sm');
+            break;
+        case 'default':
+            classes.push('rounded');
+            break;
+        case 'lg':
+            classes.push('rounded-lg');
+            break;
+        case 'full':
+            classes.push('rounded-full');
+            break;
+    }
+    // Effetti aggiuntivi
+    if (additionalEffects) {
+        if (additionalEffects.includes('shadow')) {
+            classes.push('shadow-md hover:shadow-lg');
+        }
+        if (additionalEffects.includes('transition')) {
+            classes.push('transition-all duration-200');
+        }
+        if (additionalEffects.includes('scale')) {
+            classes.push('transform hover:scale-105');
+        }
+    }
+    // Aggiungi la classe focus-ring per il colore appropriato
+    classes.push(`focus-visible:ring-${buttonColor}/50`);
+    return classes.join(' ');
+}
+export default getButtonClasses;