blocks-dusted 0.1.10 → 0.1.11

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

@@ -0,0 +1,287 @@
+'use client'
+
+import React from 'react'
+import { motion } from 'framer-motion'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+import { cn } from '@/utilities/ui'
+import { Media } from '@/components/Media'
+import { smoothScrollTo, isAnchorLink } from '@/utilities/smoothScroll'
+
+export type IconItem = {
+  icon?: any
+  iconSize?: string
+  customIconSize?: string
+  iconClassName?: string
+  label?: string
+  labelClassName?: string
+  flexDirection?: 'flex-col' | 'flex-col-reverse' | 'flex-row' | 'flex-row-reverse'
+  flexGap?: string
+  link?: string
+  imgCustomStyle?: Record<string, any>
+}
+
+export type CustomIconBlockProps = {
+  blockName?: string
+  blockType?: 'customIconBlock'
+  icons?: IconItem[]
+  className?: string
+  iconGridClass?: string
+  imgCustomStyle?: React.CSSProperties
+  priority?: boolean
+}
+
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.15,
+      delayChildren: 0.1
+    }
+  }
+}
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 30, scale: 0.8 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: {
+      duration: 0.4,
+      ease: [0.4, 0, 0.2, 1] as const
+    }
+  }
+}
+
+export const DDIcon: React.FC<CustomIconBlockProps> = ({
+  blockName,
+  icons = [],
+  iconGridClass,
+  imgCustomStyle: blockImgStyle,
+  priority = false
+}) => {
+  const pathname = usePathname()
+  const hasCustomGridClass = iconGridClass && iconGridClass.trim().length > 0
+
+  if (!icons || !Array.isArray(icons) || icons.length === 0) {
+    return (
+      <div className="custom-icon-block-empty p-8 text-center">
+        <div className="text-sm text-gray-400">No icons to display</div>
+        {blockName && <div className="mt-1 text-xs text-gray-300">Block: {blockName}</div>}
+      </div>
+    )
+  }
+
+  const isExternalUrl = (url: string): boolean => {
+    return (
+      url.startsWith('http://') ||
+      url.startsWith('https://') ||
+      url.startsWith('mailto:') ||
+      url.startsWith('tel:')
+    )
+  }
+
+  const handleClick = (href: string, e: React.MouseEvent) => {
+    const hashIndex = href.indexOf('#')
+    const hasHash = hashIndex >= 0
+    const basePath = hasHash ? href.slice(0, hashIndex) : href
+    const hash = hasHash ? href.slice(hashIndex) : ''
+
+    const normalise = (p?: string) => (p ? p.replace(/\/$/, '') : '')
+
+    const isSamePageHash =
+      hasHash && (basePath === '' || normalise(basePath) === normalise(pathname))
+
+    if (isAnchorLink(href) || isSamePageHash) {
+      e.preventDefault()
+
+      const target = hash || href
+
+      smoothScrollTo(target, {
+        duration: 1,
+        offsetY: 80,
+        ease: 'power2.out'
+      })
+    }
+  }
+
+  const extractSizeFromClass = (sizeClass: string) => {
+    const widthMatch = sizeClass.match(/w-(\d+)/)
+    const heightMatch = sizeClass.match(/h-(\d+)/)
+
+    if (widthMatch && heightMatch) {
+      const width = parseInt(widthMatch[1], 10) * 4
+      const height = parseInt(heightMatch[1], 10) * 4
+
+      return {
+        width: `${width}px`,
+        height: `${height}px`,
+        maxWidth: `${width}px`,
+        maxHeight: `${height}px`
+      }
+    }
+
+    return {}
+  }
+
+  return (
+    <motion.div
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, amount: 0.2 }}
+      variants={containerVariants}
+      data-block-type="customIconBlock"
+      data-block-name={blockName}
+      className={cn(
+        'custom-icon-block',
+        !hasCustomGridClass && 'grid grid-cols-3 gap-6 text-center md:grid-cols-4 lg:grid-cols-5',
+        hasCustomGridClass && iconGridClass
+      )}
+    >
+      {icons.map((iconItem, index) => {
+        if (!iconItem) return null
+
+        const iconKey = `icon-${index}${iconItem.icon?.filename ? `-${iconItem.icon.filename}` : ''}`
+
+        if (!iconItem.icon) {
+          return (
+            <motion.div
+              key={iconKey}
+              variants={itemVariants}
+              className="flex flex-col items-center"
+            >
+              <div className="flex h-16 w-16 items-center justify-center border-2 border-gray-300 bg-gray-100 p-0 text-xs text-gray-400">
+                <span>No Icon</span>
+              </div>
+
+              {iconItem.label && (
+                <span className="custom-icon-label mt-2 text-center text-xs leading-tight text-gray-600">
+                  {iconItem.label}
+                </span>
+              )}
+            </motion.div>
+          )
+        }
+
+        const iconSizeClass =
+          iconItem.iconSize === 'custom'
+            ? iconItem.customIconSize || 'h-16 w-16'
+            : iconItem.iconSize || 'h-16 w-16'
+
+        const sizeStyles = extractSizeFromClass(iconSizeClass)
+
+        const mediaContent = (
+          <Media
+            priority={priority ?? false}
+            resource={iconItem.icon}
+            className={cn(
+              'custom-icon-media flex items-center justify-center p-0 transition-transform',
+              '[&>picture]:!mb-0 [&>picture]:!mt-0 [&>picture]:flex [&>picture]:h-full [&>picture]:w-full [&>picture]:items-center [&>picture]:justify-center',
+              '[&>picture>img]:block [&>picture>img]:h-full [&>picture>img]:w-full [&>picture>img]:object-contain',
+              '[&_img]:block [&_img]:h-full [&_img]:w-full [&_img]:object-contain',
+              iconSizeClass,
+              iconItem.iconClassName
+            )}
+            imgClassName={cn(
+              'block h-full w-full object-contain transition-all duration-300',
+              iconItem.iconClassName
+            )}
+          />
+        )
+
+        const wrapperFlexDirection = iconItem.flexDirection || 'flex-col'
+        const wrapperGap = iconItem.flexGap || 'gap-2'
+
+        const defaultLabelClass = 'mt-2 max-w-20 text-center text-xs leading-tight text-gray-700'
+
+        const labelContent = iconItem.label ? (
+          <span className={cn('custom-icon-label', iconItem.labelClassName || defaultLabelClass)}>
+            {iconItem.label}
+          </span>
+        ) : null
+
+        const iconContent = (
+          <>
+            {mediaContent}
+            {labelContent}
+          </>
+        )
+
+        return (
+          <motion.div
+            key={iconKey}
+            variants={itemVariants}
+            className={cn(
+              'custom-icon-item group flex items-center',
+              wrapperFlexDirection,
+              wrapperGap
+            )}
+          >
+            {iconItem.link && iconItem.link.trim() ? (
+              (() => {
+                const href = iconItem.link!.trim()
+                const hasHash = href.includes('#')
+                const base = hasHash ? href.split('#')[0] : href
+                const normalise = (p?: string) => (p ? p.replace(/\/$/, '') : '')
+
+                const onSamePage =
+                  hasHash && (base === '' || normalise(base) === normalise(pathname))
+
+                if (isAnchorLink(href) || onSamePage) {
+                  return (
+                    <a
+                      href={href}
+                      className={cn(
+                        'custom-icon-block-link custom-icon-link flex cursor-pointer items-center brightness-100 transition-all duration-300 ease-in-out hover:brightness-110',
+                        wrapperFlexDirection,
+                        wrapperGap
+                      )}
+                      onClick={(e) => handleClick(href, e)}
+                      aria-label={iconItem.label || 'Navigate to section'}
+                    >
+                      {iconContent}
+                    </a>
+                  )
+                }
+
+                const target = isExternalUrl(href) ? '_blank' : '_self'
+                const rel = isExternalUrl(href) ? 'noopener noreferrer' : undefined
+
+                return (
+                  <Link
+                    href={href}
+                    className={cn(
+                      'custom-icon-block-link custom-icon-link flex items-center brightness-100 transition-all duration-300 ease-in-out hover:brightness-110',
+                      wrapperFlexDirection,
+                      wrapperGap
+                    )}
+                    target={target}
+                    rel={rel}
+                    aria-label={iconItem.label || 'Navigate to link'}
+                  >
+                    {iconContent}
+                  </Link>
+                )
+              })()
+            ) : (
+              <div
+                className={cn(
+                  'custom-icon-wrapper flex items-center brightness-110 text-white/80 dark:text-stone-200/80',
+                  wrapperFlexDirection,
+                  wrapperGap
+                )}
+              >
+                {iconContent}
+              </div>
+            )}
+          </motion.div>
+        )
+      })}
+    </motion.div>
+  )
+}
+
+export default DDIcon

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

@@ -0,0 +1,4 @@
+# DD-Icon
+
+Portable first-pass conversion of `CustomIconBlock` 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-Icon/config.ts

@@ -0,0 +1,258 @@
+import { Block } from 'payload'
+
+export const DDIcon: Block = {
+  slug: 'DD-Icon',
+  interfaceName: 'DDIcon',
+  labels: {
+    singular: 'Icon Block',
+    plural: 'Icon Blocks'
+  },
+  fields: [
+    // Block Settings
+    {
+      admin: {
+        initCollapsed: true,
+        hidden: true,
+        className: 'block-settings-group'
+      },
+      type: 'collapsible',
+      label: 'Block Settings',
+      fields: [
+        {
+          name: 'blockName',
+          type: 'text',
+          label: 'Block Name',
+          admin: {
+            description: 'Optional name for easier identification in admin',
+            placeholder: 'e.g., "Social Media Icons", "Technology Stack"'
+          }
+        }
+      ]
+    },
+
+    // Layout Settings
+    {
+      admin: {
+        initCollapsed: true,
+        className: 'layout-settings-group'
+      },
+      type: 'collapsible',
+      label: 'Layout Settings',
+      fields: [
+        {
+          name: 'iconGridClass',
+          type: 'text',
+          label: 'Grid Layout Classes',
+          admin: {
+            description:
+              'Custom Tailwind grid classes. Default: grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6 text-center',
+            placeholder: 'grid grid-cols-2 md:grid-cols-3 gap-8'
+          }
+        }
+      ]
+    },
+
+    // Icons Collection
+    {
+      name: 'icons',
+      type: 'array',
+      label: 'Icons',
+      minRows: 1,
+      maxRows: 20,
+      labels: {
+        singular: 'Icon',
+        plural: 'Icons'
+      },
+      fields: [
+        {
+          type: 'row',
+          fields: [
+            // Icon Upload
+            {
+              name: 'icon',
+              type: 'upload',
+              relationTo: 'media',
+              required: true,
+              label: 'Icon Image',
+              admin: {
+                width: '60%',
+                description: 'Upload or select from media library'
+              },
+              filterOptions: {
+                mimeType: { contains: 'image' }
+              }
+            },
+            // NEW: Priority Checkbox
+            {
+              name: 'priority',
+              type: 'checkbox',
+              label: 'Priority',
+              defaultValue: false,
+              admin: {
+                className: 'custom-checkbox-mt',
+                width: '35%',
+                description: 'Icon is above-the-fold.'
+              }
+            },
+            // Icon Size
+            {
+              name: 'iconSize',
+              type: 'select',
+              label: 'Icon Size',
+              defaultValue: 'w-16 h-16',
+              options: [
+                { label: 'Small (48px)', value: 'w-12 h-12' },
+                { label: 'Medium (64px)', value: 'w-16 h-16' },
+                { label: 'Large (80px)', value: 'w-20 h-20' },
+                { label: 'Extra Large (96px)', value: 'w-24 h-24' },
+                { label: 'Custom Size', value: 'custom' }
+              ],
+              admin: {
+                width: '100%',
+                description: 'Pre-defined sizes or choose manual input'
+              }
+            }
+          ]
+        },
+        // Icon Label
+        {
+          name: 'label',
+          type: 'text',
+          label: 'Icon Label'
+          // admin: {
+          //   description: 'Text displayed below the icon'
+          // }
+        },
+
+        // Label & Layout Settings
+        {
+          admin: {
+            initCollapsed: true,
+            className: 'label-layout-group'
+          },
+          type: 'collapsible',
+          label: 'Label & Layout Settings (Optional)',
+          fields: [
+            {
+              name: 'labelClassName',
+              type: 'text',
+              label: 'Label CSS Classes',
+              admin: {
+                description:
+                  'Override default label classes: mt-2 text-xs text-center leading-tight max-w-20 text-gray-700',
+                placeholder: 'text-sm font-bold text-blue-500 mt-4'
+              }
+            },
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'flexDirection',
+                  type: 'select',
+                  label: 'Flex Direction',
+                  defaultValue: 'flex-col',
+                  options: [
+                    { label: 'Column (Icon → Label)', value: 'flex-col' },
+                    { label: 'Column Reverse (Label → Icon)', value: 'flex-col-reverse' },
+                    { label: 'Row (Icon | Label)', value: 'flex-row' },
+                    { label: 'Row Reverse (Label | Icon)', value: 'flex-row-reverse' }
+                  ],
+                  admin: {
+                    width: '50%',
+                    description: 'Direction of icon and label arrangement'
+                  }
+                },
+                {
+                  name: 'flexGap',
+                  type: 'select',
+                  label: 'Gap Distance',
+                  defaultValue: 'gap-2',
+                  options: [
+                    { label: '0px', value: 'gap-0' },
+                    { label: '4px', value: 'gap-1' },
+                    { label: '8px (Default)', value: 'gap-2' },
+                    { label: '12px', value: 'gap-3' },
+                    { label: '16px', value: 'gap-4' },
+                    { label: '20px', value: 'gap-5' },
+                    { label: '24px', value: 'gap-6' },
+                    { label: '32px', value: 'gap-8' }
+                  ],
+                  admin: {
+                    width: '50%',
+                    description: 'Space between icon and label'
+                  }
+                }
+              ]
+            }
+          ]
+        },
+
+        // Icon Link
+        {
+          name: 'link',
+          type: 'text',
+          label: 'Link URL (Optional)',
+          admin: {
+            description:
+              'Make this icon clickable. Supports internal (/about), external (https://example.com), and anchor (#section) links',
+            placeholder: '/services or https://example.com or #contact'
+          },
+          validate: (val: string | null | undefined) => {
+            if (!val) return true // Optional field
+
+            // Basic URL validation - allow internal paths, external URLs, and anchors
+            const urlPattern = /^(https?:\/\/|\/|#|mailto:|tel:)/
+            if (!urlPattern.test(val)) {
+              return 'Please enter a valid URL (starting with http://, https://, /, #, mailto:, or tel:)'
+            }
+            return true
+          }
+        },
+
+        // Icon Styling
+        {
+          admin: {
+            initCollapsed: true,
+            className: 'icon-styling-group'
+          },
+          type: 'collapsible',
+          label: 'Icon Styling (Optional)',
+          fields: [
+            {
+              name: 'customIconSize',
+              type: 'text',
+              label: 'Custom Size Classes',
+              admin: {
+                description: 'Custom Tailwind size classes (only when "Custom Size" is selected)',
+                placeholder: 'w-14 h-14 or w-32 h-32',
+                condition: (data, siblingData) => siblingData?.iconSize === 'custom'
+              }
+            },
+            {
+              name: 'iconClassName',
+              type: 'text',
+              label: 'Additional CSS Classes',
+              admin: {
+                description:
+                  'Extra Tailwind classes for styling. Other classes to override: custom-icon-wrapper  custom-icon-link ',
+                placeholder: 'rounded-full shadow-lg border-2 border-lime-500'
+              }
+            },
+            {
+              name: 'imgCustomStyle',
+              type: 'json',
+              label: 'Custom Inline Styles',
+              admin: {
+                description:
+                  'Advanced: Custom CSS as JSON object (e.g., { "filter": "drop-shadow(0 0 10px rgba(0,0,0,0.5))", "borderRadius": "50%" })',
+                className: 'json-field'
+              }
+            }
+          ]
+        }
+
+        // ✅ Removed the iconId field entirely - React will use array index for keys
+      ]
+    }
+  ]
+}

package/templates/blocks/DD-Icon/hooks/revalidateBlockIds.ts

@@ -0,0 +1,66 @@
+// NO LONGER NEEDED - Keeping for reference
+
+// import type { FieldHook } from 'payload'
+
+// /**
+//  * Hook to sanitize problematic blockId fields from CustomIconBlock components
+//  * This prevents conflicts with Payload's internal systems during save/publish
+//  * by regenerating safe blockId values without removing the fields
+//  */
+// export const cleanConflictingBlockIds: FieldHook = ({ value, operation }) => {
+//   if (operation === 'create' || operation === 'update') {
+//     if (value?.root?.children) {
+//       return {
+//         ...value,
+//         root: {
+//           ...value.root,
+//           children: cleanLexicalContent(value.root.children),
+//         },
+//       }
+//     }
+//   }
+
+//   return value
+// }
+
+// function cleanLexicalContent(children: any[]): any[] {
+//   if (!Array.isArray(children)) return children
+
+//   return children.map((child: any) => {
+//     // Handle CustomIconBlock in Lexical format
+//     if (child.type === 'block' && child.fields?.blockType === 'customIconBlock') {
+//       const fields = { ...child.fields }
+
+//       // Sanitize blockId if it exists and might cause conflicts
+//       if (fields.blockId) {
+//         fields.blockId = `custom-icon-${Math.random().toString(36).substr(2, 12)}`
+//       }
+
+//       // Sanitize icons array if present
+//       if (fields.icons?.length > 0) {
+//         fields.icons = fields.icons.map((icon: any, index: number) => {
+//           const cleanIcon = { ...icon }
+//           if (cleanIcon.iconId) {
+//             cleanIcon.iconId = `icon-${index}-${Math.random().toString(36).substr(2, 9)}`
+//           }
+//           return cleanIcon
+//         })
+//       }
+
+//       return {
+//         ...child,
+//         fields,
+//       }
+//     }
+
+//     // Process children only one level deep to avoid infinite recursion
+//     if (child.children && Array.isArray(child.children)) {
+//       return {
+//         ...child,
+//         children: cleanLexicalContent(child.children),
+//       }
+//     }
+
+//     return child
+//   })
+// }

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

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