blocks-dusted 0.1.10 → 0.1.12

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

@@ -0,0 +1,224 @@
+import type { Block } from 'payload'
+
+export const DDThanks: Block = {
+  slug: 'DD-Thanks',
+  interfaceName: 'DDThanks',
+  labels: {
+    singular: 'Thanks Confetti',
+    plural: 'Thanks Confetti Blocks'
+  },
+  fields: [
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'headline',
+          type: 'text',
+          label: 'Headline',
+          defaultValue: 'Thank you! 🎉',
+          admin: {
+            width: '50%'
+          }
+        },
+        {
+          name: 'brandLabel',
+          type: 'text',
+          label: 'Brand Label',
+          defaultValue: 'DesignsDusted',
+          admin: {
+            width: '50%'
+          }
+        }
+      ]
+    },
+    {
+      name: 'description',
+      type: 'textarea',
+      label: 'Description',
+      defaultValue: 'Your order has been confirmed and is on its way.'
+    },
+    {
+      name: 'subDescription',
+      type: 'textarea',
+      label: 'Sub Description',
+      defaultValue:
+        "We've sent a confirmation email with your download links and license keys. Check your inbox — and maybe your spam folder too."
+    },
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'showBrandLabel',
+          type: 'checkbox',
+          label: 'Show Brand Label',
+          defaultValue: true,
+          admin: {
+            width: '25%'
+          }
+        },
+        {
+          name: 'showReplayButton',
+          type: 'checkbox',
+          label: 'Show Replay Button',
+          defaultValue: true,
+          admin: {
+            width: '25%'
+          }
+        },
+        {
+          name: 'autoPlayConfetti',
+          type: 'checkbox',
+          label: 'Auto Play Confetti',
+          defaultValue: true,
+          admin: {
+            width: '25%'
+          }
+        },
+        {
+          name: 'confettiDuration',
+          type: 'number',
+          label: 'Confetti Duration (ms)',
+          defaultValue: 3000,
+          min: 1000,
+          max: 8000,
+          admin: {
+            width: '25%'
+          }
+        }
+      ]
+    },
+    {
+      name: 'infoPills',
+      type: 'array',
+      label: 'Info Pills',
+      fields: [
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'label',
+              type: 'text',
+              required: true,
+              admin: {
+                width: '70%'
+              }
+            },
+            {
+              name: 'icon',
+              type: 'select',
+              defaultValue: 'mail',
+              options: [
+                {
+                  label: 'Mail',
+                  value: 'mail'
+                },
+                {
+                  label: 'Download',
+                  value: 'download'
+                },
+                {
+                  label: 'Shield',
+                  value: 'shield'
+                }
+              ],
+              admin: {
+                width: '30%'
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      name: 'ctaLinks',
+      type: 'array',
+      label: 'CTA Links',
+      maxRows: 2,
+      fields: [
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'label',
+              type: 'text',
+              required: true,
+              admin: {
+                width: '35%'
+              }
+            },
+            {
+              name: 'href',
+              type: 'text',
+              required: true,
+              admin: {
+                width: '35%'
+              }
+            },
+            {
+              name: 'variant',
+              type: 'select',
+              defaultValue: 'primary',
+              options: [
+                {
+                  label: 'Primary',
+                  value: 'primary'
+                },
+                {
+                  label: 'Secondary',
+                  value: 'secondary'
+                }
+              ],
+              admin: {
+                width: '15%'
+              }
+            },
+            {
+              name: 'icon',
+              type: 'select',
+              defaultValue: 'home',
+              options: [
+                {
+                  label: 'Home',
+                  value: 'home'
+                },
+                {
+                  label: 'Grid',
+                  value: 'grid'
+                },
+                {
+                  label: 'Download',
+                  value: 'download'
+                }
+              ],
+              admin: {
+                width: '15%'
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      type: 'collapsible',
+      label: 'Settings',
+      admin: {
+        initCollapsed: true
+      },
+      fields: [
+        {
+          name: 'sectionId',
+          type: 'text',
+          label: 'Section ID'
+        },
+        {
+          name: 'customCSS',
+          type: 'code',
+          label: 'Custom CSS',
+          admin: {
+            language: 'css'
+          }
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,72 @@
+{
+  "type": "block",
+  "name": "DD-Thanks",
+  "label": "Thanks Confetti",
+  "sourceName": "ThanksConfetti",
+  "portableName": "DD-Thanks",
+  "slug": "DD-Thanks",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/ROUND-TWO-CONVERSION/ThanksConfetti",
+    "originalSlug": "thanksConfetti",
+    "originalConfigExport": "ThanksConfetti",
+    "originalComponentExport": "ThanksConfetti",
+    "originalInterfaceName": "DDThanks"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-Thanks/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-Thanks/config.ts"
+    }
+  ],
+  "dependencies": [],
+  "sharedFiles": [],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDThanks in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Thanks in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "manualSteps": [
+    "Register DDThanks in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Thanks in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDThanks } from '@/blocks/DD-Thanks/config' and add DDThanks to clear Pages/Posts block arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-Thanks 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."
+  ],
+  "exportName": "DDThanks",
+  "interfaceName": "DDThanks"
+}

package/templates/blocks/DD-VertMarq/Component.tsx

@@ -0,0 +1,154 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+
+import React, { useState } from 'react'
+import { motion } from 'framer-motion'
+import Image from 'next/image'
+import { cn } from '@/utilities/ui'
+
+const placeholderBlur =
+  'data:image/svg+xml;base64,' +
+  btoa(`<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" style="opacity:0">
+    <defs>
+      <radialGradient id="grad1" cx="0%" cy="0%" r="0%" fx="0%" fy="0%">
+        <stop offset="0%" style="stop-color:transparent; stop-opacity:0" />
+        <stop offset="0%" style="stop-color:transparent; stop-opacity:0" />
+      </radialGradient>
+    </defs>
+    <rect width="100%" height="100%" fill="url(#grad1)">
+      <animate attributeName="opacity" values="0.6;1;0.6" dur="1.5s" repeatCount="indefinite" />
+    </rect>
+  </svg>`)
+
+export type LogoVertMarqueeProps = {
+  logos: {
+    image?: {
+      url?: string
+      alt?: string
+    } | null
+    imageClass?: string
+    imageStyle?: React.CSSProperties
+    imageAltClass?: string
+  }[]
+  speed?: number
+  spacing?: number
+  containerClass?: string
+  itemHeight?: number
+  customCSS?: string
+}
+
+const LogoImage: React.FC<{
+  src: string
+  alt?: string
+  customClass?: string
+  imageStyle?: React.CSSProperties
+}> = ({ src, alt, customClass, imageStyle }) => {
+  const [imageError, setImageError] = useState(false)
+
+  const imageSrc = !src || imageError ? placeholderBlur : src
+  const displayAlt = alt || 'Logo'
+
+  return (
+    <Image
+      src={imageSrc}
+      alt={displayAlt}
+      width={800}
+      height={800}
+      priority
+      sizes="100vw"
+      quality={100}
+      className={cn('h-auto w-full', customClass)}
+      style={{
+        objectFit: 'contain',
+        ...(imageStyle && typeof imageStyle === 'object' ? imageStyle : {})
+      }}
+      onError={() => setImageError(true)}
+      placeholder="blur"
+      blurDataURL={placeholderBlur}
+    />
+  )
+}
+
+export const DDVertMarq: React.FC<LogoVertMarqueeProps> = ({
+  logos,
+  speed = 10,
+  spacing = 32,
+  containerClass = 'overflow-hidden px-8 bg-transparent',
+  customCSS
+}) => {
+  const validLogos = logos || []
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const [scrollHeight, setScrollHeight] = React.useState(0)
+
+  React.useEffect(() => {
+    if (containerRef.current) {
+      const container = containerRef.current
+      const firstSet = container.firstElementChild
+
+      if (firstSet) {
+        setScrollHeight(firstSet.scrollHeight)
+      }
+    }
+  }, [validLogos])
+
+  if (validLogos.length === 0) {
+    return null
+  }
+
+  return (
+    <div className="logo-vert-marquee-block relative m-auto flex h-screen items-center">
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <motion.div
+        ref={containerRef}
+        className={cn(containerClass, 'flex flex-col px-4')}
+        animate={scrollHeight > 0 ? { y: [0, -scrollHeight] } : {}}
+        transition={{ repeat: Infinity, duration: speed, ease: 'linear' }}
+      >
+        <div className="flex flex-col">
+          {validLogos.map((logo, index) => (
+            <div
+              key={`logo-${index}`}
+              className="marque-image-container flex shrink-0 flex-col items-center justify-center"
+              style={{
+                marginBottom: `${spacing}px`
+              }}
+            >
+              <LogoImage
+                src={logo.image?.url || placeholderBlur}
+                alt={logo.image?.alt}
+                customClass={logo.imageClass}
+                imageStyle={logo.imageStyle}
+              />
+              <p className={cn('text-center text-base', logo.imageAltClass)}>
+                {logo.image?.alt || null}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        <div className="flex flex-col">
+          {validLogos.map((logo, index) => (
+            <div
+              key={`logo-${index}-duplicate`}
+              className="marque-image-container flex shrink-0 flex-col items-center justify-center"
+              style={{
+                marginBottom: `${spacing}px`
+              }}
+            >
+              <LogoImage
+                src={logo.image?.url || placeholderBlur}
+                alt={logo.image?.alt}
+                customClass={logo.imageClass}
+                imageStyle={logo.imageStyle}
+              />
+              <p className={cn('text-center text-base', logo.imageAltClass)}>
+                {logo.image?.alt || null}
+              </p>
+            </div>
+          ))}
+        </div>
+      </motion.div>
+    </div>
+  )
+}

package/templates/blocks/DD-VertMarq/README.md

@@ -0,0 +1,4 @@
+# DD-VertMarq
+
+Portable first-pass conversion of `LogoVertMarquee` from ROUND-TWO-CONVERSION. Project-specific roots and nested unconverted block dependencies were intentionally replaced with local rendering so the template can install into a clean Payload project.
+

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

@@ -0,0 +1,236 @@
+import type { Block } from 'payload'
+import { DDCustomCSS } from '@/blocks/DD-CustomCSS/config'
+
+export const DDVertMarq: Block = {
+  slug: 'DD-VertMarq',
+  interfaceName: 'DDVertMarq',
+  labels: {
+    singular: 'Vertical Image Marquee',
+    plural: 'Vertical 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:
+                  'Override the default container class. Default: `overflow-hidden px-8 bg-transparent`'
+              }
+            }
+          ]
+        },
+        // Marquee settings
+        {
+          admin: {
+            initCollapsed: true,
+            className: 'custom-group-class'
+          },
+          type: 'collapsible',
+          label: 'Marquee Settings',
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'speed',
+                  type: 'number',
+                  label: 'Scroll Speed (seconds)',
+                  defaultValue: 10,
+                  required: true,
+                  admin: {
+                    description: 'Speed of the vertical marquee in seconds.',
+                    width: '50%'
+                  }
+                },
+                {
+                  name: 'spacing',
+                  type: 'number',
+                  label: 'Spacing between images (px)',
+                  defaultValue: 32,
+                  required: true,
+                  admin: {
+                    description: 'Vertical space between images in pixels.',
+                    width: '50%'
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        // 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.'
+          }
+        }
+      ]
+    },
+
+    {
+      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:
+                  'Override 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: 'Override 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 override existing styles here.',
+        condition: (_, siblingData) => Boolean(siblingData.enableCustomCSS)
+      }
+    }
+  ]
+}

package/templates/blocks/DD-VertMarq/dist/index.css

@@ -0,0 +1,6 @@
+.logo-vert-marquee-block {
+  margin: auto;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+}

package/templates/blocks/DD-VertMarq/dist/index.min.css

@@ -0,0 +1 @@
+.logo-vert-marquee-block{margin:auto;height:100vh;display:flex;align-items:center}