blocks-dusted 0.1.10 → 0.1.12

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

@@ -0,0 +1,475 @@
+import type { Block } from 'payload'
+
+// Lexical integration
+export const MasonryMediaBlockFeature = {
+  type: 'masonryMediaBlock',
+  fields: [
+    // MasonryMediaBlock fields will be used
+  ]
+}
+
+export const DDMasonry: Block = {
+  slug: 'DD-Masonry',
+  interfaceName: 'DDMasonry',
+  labels: {
+    singular: 'Masonry Media Block',
+    plural: 'Masonry Media Blocks'
+  },
+  fields: [
+    {
+      name: 'mediaFiles',
+      type: 'upload',
+      relationTo: 'media',
+      hasMany: true,
+      required: false,
+      label: 'Bulk Add Media',
+      admin: {
+        description:
+          'Select many media files at once. On save, each selected file will be appended into the "items" list with default settings. Existing items are never removed.'
+      },
+      filterOptions: () => {
+        return {} // Return all media, ignore folders
+      },
+      hooks: {
+        beforeChange: [
+          ({ value, siblingData }) => {
+            const selected = Array.isArray(value) ? value : value ? [value] : []
+
+            const currentItems = Array.isArray(siblingData?.items) ? siblingData.items : []
+
+            const existingMediaIds = new Set(
+              currentItems
+                .map((item: any) => {
+                  const mediaValue = item?.media
+
+                  if (typeof mediaValue === 'number' || typeof mediaValue === 'string') {
+                    return mediaValue
+                  }
+
+                  if (mediaValue && typeof mediaValue === 'object' && 'id' in mediaValue) {
+                    return (mediaValue as any).id
+                  }
+
+                  return undefined
+                })
+                .filter((v: any) => v !== undefined)
+            )
+
+            const newItems = selected
+              .filter((mediaId) => mediaId !== null && mediaId !== undefined)
+              .filter((mediaId) => !existingMediaIds.has(mediaId as any))
+              .map((mediaId) => {
+                existingMediaIds.add(mediaId as any)
+
+                return {
+                  // Leave `id` empty so the existing row-level hook auto-generates it
+                  media: mediaId as any,
+                  linkType: 'none',
+                  newTab: false,
+                  aspectRatio: '1/1',
+                  showTextOverlay: false
+                }
+              })
+
+            if (newItems.length > 0) {
+              siblingData.items = [...currentItems, ...newItems]
+            }
+
+            // Treat this field as a "bulk add" input — clear it after processing
+            return []
+          }
+        ]
+      }
+    },
+    {
+      name: 'items',
+      type: 'array',
+      label: 'Media Items',
+      minRows: 1,
+      fields: [
+        {
+          name: 'media',
+          type: 'upload',
+          relationTo: 'media',
+          required: true,
+          filterOptions: () => {
+            return {} // Return all media, ignore folders
+          }
+        },
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'linkType',
+              type: 'radio',
+              admin: { layout: 'horizontal', width: '50%' },
+              defaultValue: 'none',
+              options: [
+                { label: 'No Link', value: 'none' },
+                { label: 'Internal link', value: 'reference' },
+                { label: 'Custom URL', value: 'custom' }
+              ]
+            },
+            {
+              name: 'newTab',
+              type: 'checkbox',
+              admin: {
+                style: { alignSelf: 'flex-end' },
+                width: '50%',
+                condition: (_, siblingData) => siblingData?.linkType !== 'none'
+              },
+              label: 'Open in new tab',
+              defaultValue: false
+            }
+          ]
+        },
+        {
+          name: 'reference',
+          type: 'relationship',
+          admin: {
+            condition: (_, siblingData) => siblingData?.linkType === 'reference',
+            width: '100%'
+          },
+          label: 'Document to link to',
+          relationTo: ['pages', 'posts']
+        },
+        {
+          name: 'url',
+          type: 'text',
+          admin: {
+            condition: (_, siblingData) => siblingData?.linkType === 'custom',
+            width: '100%'
+          },
+          label: 'Custom URL'
+        },
+        {
+          name: 'aspectRatio',
+          type: 'select',
+          defaultValue: '1/1',
+          admin: { width: '50%' },
+          options: [
+            { label: 'Square (1:1)', value: '1/1' },
+            { label: 'Portrait (2:3)', value: '2/3' },
+            { label: 'Landscape (3:2)', value: '3/2' },
+            { label: 'Wide (16:9)', value: '16/9' }
+          ]
+        },
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'showTextOverlay',
+              type: 'checkbox',
+              label: 'Show Text Overlay',
+              defaultValue: false,
+              admin: { width: '50%' }
+            },
+            {
+              name: 'textOverlay',
+              type: 'text',
+              label: 'Overlay Text',
+              admin: {
+                width: '50%',
+                condition: (data: any, siblingData: any) => siblingData?.showTextOverlay
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      admin: {
+        initCollapsed: true,
+        className: 'custom-css-class'
+      },
+      type: 'collapsible',
+      label: 'Layout Settings',
+      fields: [
+        {
+          type: 'group',
+          name: 'layout',
+          label: false,
+          fields: [
+            {
+              name: 'columns',
+              type: 'group',
+              label: 'Column Configuration',
+              fields: [
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'desktop',
+                      type: 'number',
+                      label: 'Desktop (≥1500px)',
+                      defaultValue: 5,
+                      min: 1,
+                      max: 8,
+                      admin: { width: '25%' }
+                    },
+                    {
+                      name: 'laptop',
+                      type: 'number',
+                      label: 'Laptop (≥1000px)',
+                      defaultValue: 4,
+                      min: 1,
+                      max: 6,
+                      admin: { width: '25%' }
+                    },
+                    {
+                      name: 'tablet',
+                      type: 'number',
+                      label: 'Tablet (≥600px)',
+                      defaultValue: 3,
+                      min: 1,
+                      max: 4,
+                      admin: { width: '25%' }
+                    },
+                    {
+                      name: 'mobile',
+                      type: 'number',
+                      label: 'Mobile (≥400px)',
+                      defaultValue: 2,
+                      min: 1,
+                      max: 3,
+                      admin: { width: '25%' }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              name: 'gap',
+              type: 'number',
+              label: 'Gap between items (px)',
+              defaultValue: 16
+            }
+          ]
+        },
+        {
+          type: 'group',
+          name: 'animation',
+          label: 'Animation Settings',
+          fields: [
+            {
+              name: 'enableAnimation',
+              type: 'checkbox',
+              label: 'Enable Animation',
+              defaultValue: true,
+              admin: {
+                description:
+                  'Toggle animations on/off. When disabled, items appear instantly without any entrance animation.'
+              }
+            },
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'animateFrom',
+                  type: 'select',
+                  label: 'Animate From',
+                  defaultValue: 'bottom',
+                  admin: {
+                    width: '33%',
+                    condition: (_, siblingData) => siblingData?.enableAnimation !== false
+                  },
+                  options: [
+                    { label: 'Bottom', value: 'bottom' },
+                    { label: 'Top', value: 'top' },
+                    { label: 'Left', value: 'left' },
+                    { label: 'Right', value: 'right' },
+                    { label: 'Center', value: 'center' },
+                    { label: 'Random', value: 'random' }
+                  ],
+                  dbName: 'animation_from'
+                },
+                {
+                  name: 'ease',
+                  type: 'select',
+                  label: 'Easing',
+                  defaultValue: 'power3.out',
+                  admin: {
+                    width: '33%',
+                    condition: (_, siblingData) => siblingData?.enableAnimation !== false
+                  },
+                  options: [
+                    { label: 'Power3 Out', value: 'power3.out' },
+                    { label: 'Power2 Out', value: 'power2.out' },
+                    { label: 'Power4 Out', value: 'power4.out' },
+                    { label: 'Back Out', value: 'back.out' },
+                    { label: 'Elastic Out', value: 'elastic.out' },
+                    { label: 'Bounce Out', value: 'bounce.out' }
+                  ],
+                  dbName: 'animation_ease'
+                },
+                {
+                  name: 'repeatOnScroll',
+                  type: 'checkbox',
+                  label: 'Repeat on Scroll',
+                  defaultValue: false,
+                  admin: {
+                    width: '34%',
+                    style: { alignSelf: 'flex-end' },
+                    condition: (_, siblingData) => siblingData?.enableAnimation !== false
+                  }
+                }
+              ]
+            },
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'duration',
+                  type: 'number',
+                  label: 'Duration (seconds)',
+                  defaultValue: 0.6,
+                  min: 0.1,
+                  max: 2,
+                  admin: {
+                    width: '50%',
+                    condition: (_, siblingData) => siblingData?.enableAnimation !== false
+                  }
+                },
+                {
+                  name: 'stagger',
+                  type: 'number',
+                  label: 'Stagger Delay (seconds)',
+                  defaultValue: 0.05,
+                  min: 0,
+                  max: 0.5,
+                  admin: {
+                    width: '50%',
+                    condition: (_, siblingData) => siblingData?.enableAnimation !== false
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          type: 'group',
+          name: 'interaction',
+          label: 'Interaction Settings',
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'scaleOnHover',
+                  type: 'checkbox',
+                  label: 'Scale on Hover',
+                  defaultValue: true,
+                  admin: { width: '33%' }
+                },
+                {
+                  name: 'blurToFocus',
+                  type: 'checkbox',
+                  label: 'Blur to Focus Effect',
+                  defaultValue: true,
+                  admin: { width: '33%' }
+                },
+                {
+                  name: 'colorShiftOnHover',
+                  type: 'checkbox',
+                  label: 'Color Shift on Hover',
+                  defaultValue: false,
+                  admin: { width: '34%' }
+                }
+              ]
+            },
+            {
+              name: 'hoverScale',
+              type: 'number',
+              label: 'Hover Scale Amount',
+              defaultValue: 0.95,
+              min: 0.5,
+              max: 1.5,
+              admin: {
+                width: '50%',
+                condition: (data: any, siblingData: any) => siblingData?.scaleOnHover
+              }
+            },
+            {
+              name: 'customHoverColors',
+              type: 'group',
+              label: 'Custom Hover Colors',
+              admin: {
+                condition: (data: any, siblingData: any) => siblingData?.colorShiftOnHover
+              },
+              fields: [
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'fromColor',
+                      type: 'text',
+                      label: 'From Color',
+                      defaultValue: 'rgba(236, 72, 153, 0.5)',
+                      admin: { width: '50%' }
+                    },
+                    {
+                      name: 'toColor',
+                      type: 'text',
+                      label: 'To Color',
+                      defaultValue: 'rgba(14, 165, 233, 0.5)',
+                      admin: { width: '50%' }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          type: 'group',
+          name: 'advanced',
+          label: 'Advanced Settings',
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'sectionId',
+                  type: 'text',
+                  label: 'Section ID',
+                  admin: { width: '50%' }
+                },
+                {
+                  name: 'customClassName',
+                  type: 'text',
+                  label: 'Custom Class Name',
+                  defaultValue: 'min-h-[50vh] mt-16',
+                  admin: { width: '50%' }
+                }
+              ]
+            },
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'enableParallax',
+                  type: 'checkbox',
+                  label: 'Enable Parallax',
+                  defaultValue: false,
+                  admin: { width: '50%' }
+                },
+                {
+                  name: 'parallaxSpeed',
+                  type: 'number',
+                  label: 'Parallax Speed',
+                  defaultValue: 0.5,
+                  min: -2,
+                  max: 2,
+                  admin: {
+                    width: '50%',
+                    condition: (data: any, siblingData: any) => siblingData?.enableParallax
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

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

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

@@ -150,19 +150,16 @@ export function DDPricing({
             {eyebrow}
           </p>
         )}
-
         {heading && (
           <h2 className="mx-auto mb-4 max-w-3xl text-4xl font-black tracking-tight text-stone-700 dark:text-stone-50 md:text-5xl">
             {heading}
           </h2>
         )}
-
         {description && (
           <p className="mx-auto mb-10 max-w-2xl text-sm leading-relaxed text-stone-500 md:text-base">
             {description}
           </p>
         )}
-
         <div className="inline-flex items-center gap-1 rounded-xl border border-stone-100 dark:border-stone-800 bg-stone-200 dark:bg-stone-900 p-1">
           <button
             type="button"
@@ -186,7 +183,7 @@ export function DDPricing({
             {annualLabel}
             {annualDiscountLabel && (
               <span
-                className={`rounded-full px-1.5 py-0.5 text-[10px] font-bold ${
+                className={`rounded-full px-1.5 py-0.5 text-xs font-bold ${
                   billing === 'annual'
                     ? 'bg-lime-500 text-stone-50'
                     : 'bg-lime-900/60 text-lime-400'
@@ -221,7 +218,7 @@ export function DDPricing({
               >
                 {tier.badge && (
                   <div className="absolute -top-3 left-1/2 -translate-x-1/2">
-                    <span className="whitespace-nowrap rounded-full border border-indigo-400 bg-indigo-900/90 px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-stone-300 shadow-md">
+                    <span className="whitespace-nowrap rounded-full border border-indigo-400 bg-indigo-900/90 px-3 py-1 text-xs font-bold uppercase tracking-widest text-stone-300 shadow-md">
                       {tier.badge}
                     </span>
                   </div>

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

@@ -116,7 +116,7 @@ export const DDProcess: React.FC<DDProcessProps> = ({
                         name={step.iconName}
                         size={24}
                       />
-                      <span className="absolute -top-1 -right-1 w-6 h-6 flex items-center justify-center rounded-full bg-stone-200 dark:bg-stone-900 border border-indigo-700 text-[10px] font-mono text-indigo-700 dark:text-indigo-400">
+                      <span className="absolute -top-1 -right-1 w-6 h-6 flex items-center justify-center rounded-full bg-stone-200 dark:bg-stone-900 border border-indigo-700 text-xs font-mono text-indigo-700 dark:text-indigo-400">
                         {i + 1}
                       </span>
                     </div>
@@ -125,9 +125,7 @@ export const DDProcess: React.FC<DDProcessProps> = ({
                     {step.duration && (
                       <div className="inline-flex items-center gap-1 bg-7 bg-stone-800 border border-stone-700 rounded-full px-2.5 py-0.5 mb-3 group-hover:bg-indigo-800 group-hover:border-indigo-600 dark:group-hover:border-lime-500">
                         <LucideIcons.Clock size={10} className="text-stone-300" />
-                        <span className="text-[10px] text-stone-300 font-medium">
-                          {step.duration}
-                        </span>
+                        <span className="text-xs text-stone-300 font-medium">{step.duration}</span>
                       </div>
                     )}