@woodylab/payload 0.0.130 → 0.0.132

package/dist/config/collections/collectionViewModes.js

@@ -0,0 +1,106 @@
+import { resolveStyleFromRef } from '../hooks/fields/resolveStyleFromRef';
+import { resolveComponentFromRef } from '../hooks/fields/resolveComponentFromRef';
+export const collectionViewModes = {
+    slug: 'view-modes',
+    labels: {
+        plural: 'View Modes',
+        singular: 'View Mode',
+    },
+    admin: {
+        useAsTitle: 'name',
+        description: "Un View Mode è una delle tante visualizzazioni possibili per una sorgente dati. Definendo un View Mode si definisce e regola l'interazione tra JSON dati, Stili UI e Comportamento lato client." +
+            'Un View Mode infatti lega un elenco di stili, un componente e un mapper default (definito per utilizzo del View Mode con blocchi inline).',
+    },
+    fields: [
+        {
+            type: 'row',
+            fields: [
+                {
+                    name: 'name',
+                    type: 'text',
+                    required: true,
+                    unique: true,
+                    admin: {
+                        width: '50%',
+                        description: 'Nome del View Mode. Usato internamente per organizzare e visualizzare i View Mode a sistema',
+                    },
+                },
+                {
+                    name: 'component',
+                    type: 'text',
+                    hooks: {
+                        beforeChange: [resolveComponentFromRef('componentRef')],
+                    },
+                    admin: {
+                        width: '25%',
+                        description: 'Componente React incaricato della visualizzazione del View Mode in definizione',
+                    },
+                },
+                {
+                    name: 'componentRef',
+                    type: 'relationship',
+                    relationTo: ['component-definitions'],
+                    virtual: true,
+                    admin: {
+                        width: '25%',
+                        description: 'Componente React incaricato della visualizzazione del View Mode in definizione',
+                    },
+                },
+            ],
+        },
+        {
+            name: 'blockPropsMapping',
+            type: 'json',
+            label: 'Mapping da blocco inline a viewMode',
+            admin: {
+                width: '100%',
+                description: 'Mapping default in caso di utilizzo del View Mode come blocco inline. Garantisce il binding tra campi payload e slot react. Usare sintassi con stesse value dei campi payload ad esempio { "titleProps" : { "text": "titleProps.text"}}',
+            },
+        },
+        {
+            name: 'styles',
+            type: 'array',
+            admin: {
+                description: 'Associazione degli stili presenti a sistema con gli slot del componente react selezionato. Includere default slot "root" per applicare gli stili alla radice del componente',
+            },
+            fields: [
+                {
+                    type: 'row',
+                    fields: [
+                        {
+                            name: 'slot',
+                            type: 'text',
+                            required: true,
+                            admin: {
+                                width: '25%',
+                                description: 'Deve essere una delle proprietà definite a livello di propsSchema del nostro componente. Fa direttamente riferimento alla proprietà in input del componente react. Usa "root" per riferire all\'elemento radice del componente',
+                            },
+                        },
+                        {
+                            name: 'style',
+                            type: 'text',
+                            hooks: {
+                                beforeChange: [resolveStyleFromRef('styleRef')],
+                            },
+                            admin: {
+                                width: '30%',
+                                description: 'Recupera in automatico lo stile dagli stili selezionati nella select successiva e li usa inline',
+                            },
+                        },
+                        {
+                            name: 'styleRef',
+                            type: 'relationship',
+                            relationTo: ['styles'],
+                            hasMany: true,
+                            virtual: true,
+                            admin: {
+                                width: '40%',
+                                description: "Aggiungi uno o più stili per definire l'aspetto di questo slot",
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+    ],
+};

package/dist/config/fields/fieldCss.js

@@ -0,0 +1,537 @@
+//#TODO Il campo fieldCss e elementi annessi dovrebbero essere di dominio della parte react.
+//#TODO Eventualmente capire come creare una UI molto generica per l'associazione degli stili
+export const concatCssFields = (args) => {
+    const { siblingData, operation } = args;
+    if (operation !== 'create' && operation !== 'update') {
+        return;
+    }
+    const classes = [];
+    Object.entries(siblingData || {}).forEach(([key, val]) => {
+        if (key === 'className')
+            return;
+        if (val === null || val === undefined)
+            return;
+        if (typeof val === 'string' && val.trim() === '')
+            return;
+        classes.push(val);
+    });
+    return classes.join(' ');
+};
+export const fieldCss = (enableTabs = false) => {
+    return {
+        name: 'css',
+        type: 'group',
+        label: 'Regole di stile',
+        fields: [
+            {
+                type: 'text',
+                name: 'className',
+                label: 'className',
+                required: false,
+                hooks: {
+                //beforeValidate: [concatCssFields],
+                },
+            },
+            /*
+            {
+              type: 'tabs',
+              tabs: [],
+              enableTabs
+              ? [
+                  {
+                    label: 'Box',
+                    fields: [
+                      {
+                        type: 'tabs',
+                        tabs: tailwindSelectorVariants.map((bp) => {
+                          return {
+                            label: bp.label,
+                            fields: [
+                              {
+                                type: 'row',
+                                fields: [
+                                  tailwindField('width', bp.value),
+                                  tailwindField('minWidth', bp.value),
+                                  tailwindField('maxWidth', bp.value),
+                                  tailwindField('height', bp.value),
+                                  tailwindField('minHeight', bp.value),
+                                  tailwindField('maxHeight', bp.value),
+                                  tailwindField('aspectRatio', bp.value),
+                                  {
+                                    type: 'collapsible',
+                                    label: 'Margins',
+                                    admin: {
+                                      width: '50%',
+                                    },
+                                    fields: [
+                                      tailwindField('margin', bp.value),
+                                      tailwindField('marginX', bp.value),
+                                      tailwindField('marginY', bp.value),
+                                      tailwindField('marginTop', bp.value),
+                                      tailwindField('marginEnd', bp.value),
+                                      tailwindField('marginBottom', bp.value),
+                                      tailwindField('marginStart', bp.value),
+                                    ],
+                                  },
+                                  {
+                                    type: 'collapsible',
+                                    label: 'Paddings',
+                                    admin: {
+                                      width: '50%',
+                                    },
+                                    fields: [
+                                      tailwindField('padding', bp.value),
+                                      tailwindField('paddingX', bp.value),
+                                      tailwindField('paddingY', bp.value),
+                                      tailwindField('paddingTop', bp.value),
+                                      tailwindField('paddingEnd', bp.value),
+                                      tailwindField('paddingBottom', bp.value),
+                                      tailwindField('paddingStart', bp.value),
+                                    ],
+                                  },
+                                ],
+                              },
+                            ],
+                          }
+                        }),
+                      },
+                    ],
+                  },
+                  {
+                    label: 'Display',
+                    fields: [
+                      {
+                        type: 'tabs',
+                        tabs: tailwindSelectorVariants.map((bp) => {
+                          return {
+                            label: bp.label,
+                            fields: [
+                              {
+                                type: 'row',
+                                fields: [
+                                  // BASE DISPLAY
+                                  tailwindField('display', bp.value),
+                                  tailwindField('visibility', bp.value),
+                                  tailwindField('isolation', bp.value),
+      
+                                  // FLOW / OVERFLOW
+                                  tailwindField('overflow', bp.value),
+                                  tailwindField('overflowX', bp.value),
+                                  tailwindField('overflowY', bp.value),
+      
+                                  // FLOAT / CLEAR
+                                  tailwindField('float', bp.value),
+                                  tailwindField('clear', bp.value),
+      
+                                  // FLEX
+                                  tailwindField('flexWrap', bp.value),
+                                  tailwindField('justifyContent', bp.value),
+                                  tailwindField('alignItems', bp.value),
+                                  tailwindField('alignContent', bp.value),
+                                  tailwindField('alignSelf', bp.value),
+                                  tailwindField('flexGrow', bp.value),
+                                  tailwindField('flexShrink', bp.value),
+                                  tailwindField('flexBasis', bp.value),
+                                  tailwindField('order', bp.value),
+                                  tailwindField('gap', bp.value),
+                                  //tailwindField('rowGap', bp.value),
+                                  tailwindField('columnGap', bp.value),
+      
+                                  // GRID
+                                  tailwindField('gridTemplateColumns', bp.value),
+                                  tailwindField('gridTemplateRows', bp.value),
+                                  tailwindField('gridColumn', bp.value),
+                                  tailwindField('gridRow', bp.value),
+                                  tailwindField('gridAutoFlow', bp.value),
+                                  tailwindField('gridAutoColumns', bp.value),
+                                  tailwindField('gridAutoRows', bp.value),
+                                  tailwindField('justifyItems', bp.value),
+                                  tailwindField('justifySelf', bp.value),
+                                  tailwindField('placeItems', bp.value),
+                                  tailwindField('placeContent', bp.value),
+      
+                                  // TABLE
+                                  tailwindField('tableLayout', bp.value),
+                                  tailwindField('captionSide', bp.value),
+      
+                                  // OBJECT / MEDIA
+                                  tailwindField('objectFit', bp.value),
+                                  tailwindField('objectPosition', bp.value),
+      
+                                  // COLUMNS
+                                  tailwindField('columns', bp.value),
+                                  tailwindField('breakBefore', bp.value),
+                                  tailwindField('breakAfter', bp.value),
+                                  tailwindField('breakInside', bp.value),
+                                ],
+                              },
+                            ],
+                          }
+                        }),
+                      },
+                    ],
+                  },
+                  {
+                    label: 'Position',
+                    fields: [
+                      {
+                        type: 'tabs',
+                        tabs: tailwindSelectorVariants.map((bp) => {
+                          return {
+                            label: bp.label,
+                            fields: [
+                              {
+                                type: 'row',
+                                fields: [
+                                  tailwindField('position', bp.value),
+                                  // inset / offsets
+                                  //tailwindField('top', bp.value),
+                                  //tailwindField('right', bp.value),
+                                  //tailwindField('bottom', bp.value),
+                                  //tailwindField('left', bp.value),
+                                  //tailwindField('inset', bp.value),
+                                  //tailwindField('insetX', bp.value),
+                                  //tailwindField('insetY', bp.value),
+      
+                                  // z-index / stacking
+                                  tailwindField('zIndex', bp.value),
+      
+                                  // translate (layout-related movement)
+                                  //tailwindField('translateX', bp.value),
+                                  //tailwindField('translateY', bp.value),
+                                ],
+                              },
+                            ],
+                          }
+                        }),
+                      },
+                    ],
+                  },
+                  {
+                    label: 'Typography',
+                    fields: [
+                      {
+                        type: 'tabs',
+                        tabs: tailwindSelectorVariants.map((bp) => {
+                          return {
+                            label: bp.label,
+                            fields: [
+                              {
+                                type: 'row',
+                                fields: [
+                                  tailwindField('fontFamily', bp.value),
+                                  tailwindField('fontSize', bp.value),
+                                  tailwindField('fontWeight', bp.value),
+                                  tailwindField('fontStyle', bp.value),
+      
+                                  // text layout
+                                  tailwindField('lineHeight', bp.value),
+                                  tailwindField('letterSpacing', bp.value),
+                                  tailwindField('textAlign', bp.value),
+                                  tailwindField('verticalAlign', bp.value),
+      
+                                  // text transform & decoration
+                                  tailwindField('textTransform', bp.value),
+                                  tailwindField('textDecoration', bp.value),
+                                  tailwindField('textDecorationStyle', bp.value),
+                                  tailwindField('textDecorationThickness', bp.value),
+                                  tailwindField('textUnderlineOffset', bp.value),
+      
+                                  // text behavior
+                                  tailwindField('textOverflow', bp.value),
+                                  tailwindField('whiteSpace', bp.value),
+                                  tailwindField('wordBreak', bp.value),
+                                  tailwindField('hyphens', bp.value),
+      
+                                  // list
+                                  tailwindField('listStyleType', bp.value),
+                                  tailwindField('listStylePosition', bp.value),
+                                ],
+                              },
+                            ],
+                          }
+                        }),
+                      },
+                    ],
+                  },
+                  {
+                    label: 'Color',
+                    fields: [
+                      {
+                        type: 'tabs',
+                        tabs: tailwindSelectorVariants.map((bp) => {
+                          return {
+                            label: bp.label,
+                            fields: [
+                              {
+                                type: 'row',
+                                fields: [
+                                  tailwindField('textColor', bp.value),
+                                  //tailwindField('placeholderColor', bp.value),
+                                  tailwindField('caretColor', bp.value),
+      
+                                  // background
+                                  tailwindField('backgroundColor', bp.value),
+      
+                                  // border & divide
+                                  tailwindField('borderColor', bp.value),
+                                  tailwindField('divideColor', bp.value),
+      
+                                  // accents
+                                  tailwindField('accentColor', bp.value),
+                                ],
+                              },
+                            ],
+                          }
+                        }),
+                      },
+                    ],
+                  },
+                  {
+                    label: 'Background',
+                    fields: [
+                      {
+                        type: 'tabs',
+                        tabs: tailwindSelectorVariants.map((bp) => {
+                          return {
+                            label: bp.label,
+                            fields: [
+                              {
+                                type: 'row',
+                                fields: [
+                                  // background image & gradients
+                                  tailwindField('backgroundImage', bp.value),
+                                  //tailwindField('backgroundGradientFrom', bp.value),
+                                  //tailwindField('backgroundGradientVia', bp.value),
+                                  //tailwindField('backgroundGradientTo', bp.value),
+      
+                                  // background behavior
+                                  tailwindField('backgroundSize', bp.value),
+                                  tailwindField('backgroundPosition', bp.value),
+                                  tailwindField('backgroundRepeat', bp.value),
+                                  tailwindField('backgroundAttachment', bp.value),
+      
+                                  // clipping & origin
+                                  tailwindField('backgroundClip', bp.value),
+                                  tailwindField('backgroundOrigin', bp.value),
+                                ],
+                              },
+                            ],
+                          }
+                        }),
+                      },
+                    ],
+                  },
+                  {
+                    label: 'Border',
+                    fields: [
+                      {
+                        type: 'tabs',
+                        tabs: tailwindSelectorVariants.map((bp) => {
+                          return {
+                            label: bp.label,
+                            fields: [
+                              {
+                                type: 'row',
+                                fields: [
+                                  // border width
+                                  tailwindField('borderWidth', bp.value),
+                                  //tailwindField('borderWidthX', bp.value),
+                                  //tailwindField('borderWidthY', bp.value),
+                                  //tailwindField('borderWidthTop', bp.value),
+                                  //tailwindField('borderWidthRight', bp.value),
+                                  //tailwindField('borderWidthBottom', bp.value),
+                                  //tailwindField('borderWidthLeft', bp.value),
+      
+                                  // border style & radius
+                                  tailwindField('borderStyle', bp.value),
+                                  tailwindField('borderRadius', bp.value),
+                                  //tailwindField('borderRadiusTop', bp.value),
+                                  //tailwindField('borderRadiusRight', bp.value),
+                                  //tailwindField('borderRadiusBottom', bp.value),
+                                  //tailwindField('borderRadiusLeft', bp.value),
+      
+                                  // divide
+                                  tailwindField('divideWidth', bp.value),
+                                  tailwindField('divideStyle', bp.value),
+      
+                                  // outline & ring
+                                  tailwindField('outline', bp.value),
+                                  tailwindField('outlineOffset', bp.value),
+                                  tailwindField('ringWidth', bp.value),
+                                  tailwindField('ringOffsetWidth', bp.value),
+                                ],
+                              },
+                            ],
+                          }
+                        }),
+                      },
+                    ],
+                  },
+                  {
+                    label: 'Shadow',
+                    fields: [
+                      {
+                        type: 'tabs',
+                        tabs: tailwindSelectorVariants.map((bp) => {
+                          return {
+                            label: bp.label,
+                            fields: [
+                              {
+                                type: 'row',
+                                fields: [
+                                  tailwindField('boxShadow', bp.value),
+                                  //tailwindField('dropShadow', bp.value),
+                                ],
+                              },
+                            ],
+                          }
+                        }),
+                      },
+                    ],
+                  },
+                  {
+                    label: 'Effects',
+                    fields: [
+                      {
+                        type: 'tabs',
+                        tabs: tailwindSelectorVariants.map((bp) => {
+                          return {
+                            label: bp.label,
+                            fields: [
+                              {
+                                type: 'row',
+                                fields: [
+                                  // opacity & blending
+                                  tailwindField('opacity', bp.value),
+                                  tailwindField('mixBlendMode', bp.value),
+                                  //tailwindField('backgroundBlendMode', bp.value),
+      
+                                  // filters
+                                  //tailwindField('blur', bp.value),
+                                  //tailwindField('brightness', bp.value),
+                                  //tailwindField('contrast', bp.value),
+                                  //tailwindField('grayscale', bp.value),
+                                  //tailwindField('hueRotate', bp.value),
+                                  //tailwindField('invert', bp.value),
+                                  //tailwindField('saturate', bp.value),
+                                  //tailwindField('sepia', bp.value),
+      
+                                  // backdrop filters
+                                  tailwindField('backdropBlur', bp.value),
+                                  tailwindField('backdropBrightness', bp.value),
+                                  tailwindField('backdropContrast', bp.value),
+                                  tailwindField('backdropGrayscale', bp.value),
+                                  tailwindField('backdropHueRotate', bp.value),
+                                  tailwindField('backdropInvert', bp.value),
+                                  tailwindField('backdropOpacity', bp.value),
+                                  tailwindField('backdropSaturate', bp.value),
+                                  tailwindField('backdropSepia', bp.value),
+                                ],
+                              },
+                            ],
+                          }
+                        }),
+                      },
+                    ],
+                  },
+                  {
+                    label: 'Transform',
+                    fields: [
+                      {
+                        type: 'tabs',
+                        tabs: tailwindSelectorVariants.map((bp) => {
+                          return {
+                            label: bp.label,
+                            fields: [
+                              {
+                                type: 'row',
+                                fields: [
+                                  tailwindField('scale', bp.value),
+                                  //tailwindField('scaleX', bp.value),
+                                  //tailwindField('scaleY', bp.value),
+      
+                                  tailwindField('rotate', bp.value),
+      
+                                  //tailwindField('translateX', bp.value),
+                                  //tailwindField('translateY', bp.value),
+      
+                                  //tailwindField('skewX', bp.value),
+                                  //tailwindField('skewY', bp.value),
+      
+                                  tailwindField('transformOrigin', bp.value),
+                                ],
+                              },
+                            ],
+                          }
+                        }),
+                      },
+                    ],
+                  },
+                  {
+                    label: 'Animation',
+                    fields: [
+                      {
+                        type: 'tabs',
+                        tabs: tailwindSelectorVariants.map((bp) => {
+                          return {
+                            label: bp.label,
+                            fields: [
+                              {
+                                type: 'row',
+                                fields: [
+                                  // transition
+                                  tailwindField('transitionProperty', bp.value),
+                                  tailwindField('transitionDuration', bp.value),
+                                  tailwindField('transitionTimingFunction', bp.value),
+                                  tailwindField('transitionDelay', bp.value),
+      
+                                  // animation
+                                  tailwindField('animation', bp.value),
+                                ],
+                              },
+                            ],
+                          }
+                        }),
+                      },
+                    ],
+                  },
+                  {
+                    label: 'Interaction',
+                    fields: [
+                      {
+                        type: 'tabs',
+                        tabs: tailwindSelectorVariants.map((bp) => {
+                          return {
+                            label: bp.label,
+                            fields: [
+                              {
+                                type: 'row',
+                                fields: [
+                                  tailwindField('cursor', bp.value),
+                                  tailwindField('pointerEvents', bp.value),
+                                  tailwindField('userSelect', bp.value),
+      
+                                  tailwindField('resize', bp.value),
+      
+                                  tailwindField('scrollBehavior', bp.value),
+                                  tailwindField('scrollMargin', bp.value),
+                                  tailwindField('scrollPadding', bp.value),
+                                  tailwindField('scrollSnapType', bp.value),
+                                  tailwindField('scrollSnapAlign', bp.value),
+                                  tailwindField('scrollSnapStop', bp.value),
+                                ],
+                              },
+                            ],
+                          }
+                        }),
+                      },
+                    ],
+                  },
+                ]
+              : [],
+            },
+          */
+        ],
+    };
+};

package/dist/config/fields/fieldRoles.d.ts

@@ -0,0 +1,2 @@
+import { Field } from 'payload';
+export declare const fieldRoles: Field;

package/dist/{fields/utils → config/fields}/fieldRoles.js

@@ -1,26 +1,22 @@
-import userRoles from '../../enums/userRoles';
-const fieldRoles = (override) => ({
-    name: override?.name || 'roles',
-    label: override?.label || 'Ruoli',
+import { userRoles } from '../enums';
+export const fieldRoles = {
+    name: 'roles',
+    label: 'Ruoli',
     type: 'select',
-    required: override?.required ?? true,
-    hasMany: override?.hasMany ?? true,
+    required: true,
+    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;
+};