blocks-dusted 0.1.10 → 0.1.12

package/templates/blocks/DD-LogoMarq/config.ts

@@ -0,0 +1,264 @@
+import type { Block } from 'payload'
+import { DDCustomCSS } from '@/blocks/DD-CustomCSS/config'
+
+export const DDLogoMarq: Block = {
+  slug: 'DD-LogoMarq',
+  interfaceName: 'DDLogoMarq',
+  labels: {
+    singular: 'Image Marquee',
+    plural: 'Image Marquee'
+  },
+
+  fields: [
+    {
+      admin: {
+        initCollapsed: true,
+        className: 'custom-css-class'
+      },
+      type: 'collapsible',
+      label: 'Block Settings',
+      fields: [
+        // Custom container class
+        {
+          admin: {
+            initCollapsed: true,
+            className: 'custom-css-class'
+          },
+          type: 'collapsible',
+          label: 'Container Class',
+          fields: [
+            {
+              name: 'containerClass',
+              label: false,
+              type: 'text',
+              required: false,
+              admin: {
+                description:
+                  'Overide the default container class. Default: `overflow-hidden py-8 bg-gray-100`'
+              }
+            }
+          ]
+        },
+        // Marquee settings
+        {
+          admin: {
+            initCollapsed: true,
+            className: 'custom-group-class'
+          },
+          type: 'collapsible',
+          label: 'Marquee Settings',
+          fields: [
+            {
+              type: 'row', // Forces items to align in a row
+              fields: [
+                {
+                  name: 'speed',
+                  type: 'number',
+                  label: 'Scroll Speed (seconds)',
+                  defaultValue: 10,
+                  required: true,
+                  admin: {
+                    description: 'Speed of the marquee in seconds.',
+                    width: '50%' // Now properly takes half width
+                  }
+                },
+                {
+                  name: 'spacing',
+                  type: 'number',
+                  label: 'Spacing between images (px)',
+                  defaultValue: 32,
+                  required: true,
+                  admin: {
+                    description: 'Space between images in pixels.',
+                    width: '50%' //  Now properly takes half width
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        // Priority loading for above-the-fold logos
+        {
+          name: 'priority',
+          type: 'checkbox',
+          label: 'High Priority Loading',
+          defaultValue: false,
+          admin: {
+            description:
+              'Enable for above-the-fold logos only. Improves LCP but should only be used when this marquee appears at the top of the page.'
+          }
+        },
+        // Divider
+        {
+          admin: {
+            initCollapsed: true,
+            className: 'custom-group-class'
+          },
+          type: 'collapsible',
+          label: 'Dividers',
+          fields: [
+            {
+              name: 'showTopDivider',
+              type: 'checkbox',
+              label: 'Show Top Divider',
+              admin: {
+                description: 'Enable divider at the top of the marquee.'
+              }
+            },
+            {
+              name: 'showBottomDivider',
+              type: 'checkbox',
+              label: 'Show Bottom Divider',
+              admin: {
+                description: 'Enable divider at the bottom of the marquee.'
+              }
+            }
+          ]
+        }
+      ]
+    },
+    // Logos array
+
+    {
+      name: 'logoImages',
+      type: 'upload',
+      relationTo: 'media',
+      hasMany: true,
+      required: false,
+      filterOptions: {
+        mimeType: { contains: 'image' }
+      },
+      admin: {
+        description:
+          'Bulk add images to the marquee. Selecting images here will append rows into `Images` (logos[]) with defaults, then clear this field.'
+      },
+      hooks: {
+        beforeChange: [
+          ({ value, siblingData }) => {
+            if (!Array.isArray(value) || value.length === 0) return value
+
+            const existingLogos = Array.isArray((siblingData as any)?.logos)
+              ? ((siblingData as any).logos as Array<any>)
+              : []
+
+            const normalizeImageId = (imageValue: unknown): number | string | undefined => {
+              if (typeof imageValue === 'number' || typeof imageValue === 'string')
+                return imageValue
+              if (imageValue && typeof imageValue === 'object' && 'id' in (imageValue as any)) {
+                const maybeId = (imageValue as any).id
+                if (typeof maybeId === 'number' || typeof maybeId === 'string') return maybeId
+              }
+              return undefined
+            }
+
+            const existingIds = new Set(
+              existingLogos
+                .map((row) => normalizeImageId(row?.image))
+                .filter((id): id is number | string => id !== undefined)
+            )
+
+            const newRows = value
+              .map((id) => normalizeImageId(id))
+              .filter((id): id is number | string => id !== undefined)
+              .filter((id) => !existingIds.has(id))
+              .map((id) => ({
+                image: id,
+                imageAltClass: 'hidden',
+                imageClass: ''
+              }))
+
+            ;(siblingData as any).logos = [...existingLogos, ...newRows]
+
+            // Clear helper field after applying
+            return []
+          }
+        ]
+      }
+    },
+
+    {
+      name: 'logos',
+      type: 'array',
+      labels: {
+        singular: 'Image',
+        plural: 'Images'
+      },
+      label: 'Images',
+      fields: [
+        {
+          name: 'image',
+          type: 'upload',
+          relationTo: 'media',
+          required: false,
+          filterOptions: {
+            mimeType: { contains: 'image' }
+          }
+        },
+        // Custom class for alt text
+        {
+          admin: {
+            initCollapsed: true,
+            className: 'custom-css-class'
+          },
+          type: 'collapsible',
+          label: 'Alt Text Class',
+          fields: [
+            {
+              name: 'imageAltClass',
+              label: false,
+              type: 'text',
+              required: false,
+              defaultValue: 'hidden',
+              admin: {
+                description:
+                  'Overide the default class for the image alt text. Set `hidden` to hide.'
+              }
+            }
+          ]
+        },
+        // Custom class for image
+        {
+          admin: {
+            initCollapsed: true,
+            className: 'custom-css-class'
+          },
+          type: 'collapsible',
+          label: 'Image Class',
+          fields: [
+            {
+              name: 'imageClass',
+              label: false,
+              type: 'text',
+              required: false,
+              admin: {
+                description: 'Overide the default class for the image.'
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      name: 'enableCustomCSS',
+      type: 'checkbox',
+      hidden: false,
+      label: 'Inject Custom CSS',
+      defaultValue: false
+    },
+    {
+      name: 'customCSS',
+      type: 'blocks',
+      label: 'Custom CSS',
+      blocks: [DDCustomCSS],
+      maxRows: 1,
+      required: false,
+      admin: {
+        initCollapsed: true,
+        className: 'for-devs-class custom-css-class',
+        description:
+          'Add dynamic class in your component and inject or overide existing styles here.',
+        condition: (_, siblingData) => Boolean(siblingData.enableCustomCSS)
+      }
+    }
+  ]
+}

package/templates/blocks/DD-LogoMarq/manifest.json

@@ -0,0 +1,82 @@
+{
+  "type": "block",
+  "name": "DD-LogoMarq",
+  "label": "Logo Marquee",
+  "sourceName": "LogoMarquee",
+  "portableName": "DD-LogoMarq",
+  "slug": "DD-LogoMarq",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/ROUND-TWO-CONVERSION/LogoMarquee",
+    "originalSlug": "logoMarquee",
+    "originalConfigExport": "LogoMarquee",
+    "originalComponentExport": "LogoMarquee",
+    "originalInterfaceName": "DDLogoMarq"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-LogoMarq/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-LogoMarq/config.ts"
+    }
+  ],
+  "dependencies": [
+    "framer-motion"
+  ],
+  "sharedFiles": [
+    {
+      "from": "templates/shared/src/components/ui/separator.tsx",
+      "to": "src/components/ui/separator.tsx",
+      "required": true,
+      "safeToCopy": true
+    }
+  ],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDLogoMarq in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-LogoMarq in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "manualSteps": [
+    "Register DDLogoMarq in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-LogoMarq in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDLogoMarq } from '@/blocks/DD-LogoMarq/config' and add DDLogoMarq to clear Pages/Posts block arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-LogoMarq in RenderBlocks."
+    }
+  },
+  "notes": [
+    "Converted from ROUND-TWO-CONVERSION as a portable Dusted template.",
+    "Project-specific imports were replaced with local, dependency-light rendering where required.",
+    "Manifest includes shared local support files required by original DesignsDusted source imports."
+  ],
+  "exportName": "DDLogoMarq",
+  "interfaceName": "DDLogoMarq"
+}