blocks-dusted 0.1.9 → 0.1.11

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

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

@@ -0,0 +1,264 @@
+import type { Block } from 'payload'
+
+export const DDMagicBento: Block = {
+  slug: 'DD-MagicBento',
+  interfaceName: 'DDMagicBento',
+  labels: {
+    singular: 'Magic Bento Block',
+    plural: 'Magic Bento Blocks'
+  },
+  fields: [
+    // ── Cards ──────────────────────────────────────────────────────────────
+    {
+      name: 'cards',
+      type: 'array',
+      label: 'Cards',
+      minRows: 1,
+      maxRows: 12,
+      admin: {
+        description: 'Leave empty to use the built-in demo cards.',
+        initCollapsed: false
+      },
+      fields: [
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'title',
+              type: 'text',
+              label: 'Title',
+              admin: { width: '50%' }
+            },
+            {
+              name: 'label',
+              type: 'text',
+              label: 'Label (top-right)',
+              admin: { width: '50%' }
+            }
+          ]
+        },
+        {
+          name: 'description',
+          type: 'textarea',
+          label: 'Description'
+        },
+        {
+          name: 'color',
+          type: 'text',
+          label: 'Background Color',
+          defaultValue: '#120F17',
+          admin: {
+            description: 'CSS color value, e.g. #120F17 or rgba(18,15,23,1)'
+          }
+        },
+        {
+          name: 'media',
+          type: 'upload',
+          relationTo: 'media',
+          label: 'Background Media',
+          admin: {
+            description: 'Optional image revealed on hover with a vignette overlay'
+          }
+        },
+        {
+          name: 'link',
+          type: 'group',
+          label: 'Card Link',
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'type',
+                  type: 'radio',
+                  options: [
+                    { label: 'External URL', value: 'external' },
+                    { label: 'Internal Page', value: 'internal' }
+                  ],
+                  defaultValue: 'external',
+                  admin: { layout: 'horizontal', width: '50%' }
+                },
+                {
+                  name: 'newTab',
+                  type: 'checkbox',
+                  label: 'Open in new tab',
+                  defaultValue: false,
+                  admin: { width: '50%' }
+                }
+              ]
+            },
+            {
+              name: 'url',
+              type: 'text',
+              label: 'URL',
+              admin: {
+                condition: (_, siblingData) => siblingData?.type !== 'internal'
+              }
+            },
+            {
+              name: 'reference',
+              type: 'relationship',
+              label: 'Internal Page',
+              relationTo: 'pages',
+              admin: {
+                condition: (_, siblingData) => siblingData?.type === 'internal'
+              }
+            }
+          ]
+        }
+      ]
+    },
+
+    // ── Feature Flags ──────────────────────────────────────────────────────
+    {
+      type: 'collapsible',
+      label: 'Feature Flags',
+      admin: { initCollapsed: true },
+      fields: [
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'enableStars',
+              type: 'checkbox',
+              label: 'Enable Particle Stars',
+              defaultValue: true,
+              admin: { width: '33%' }
+            },
+            {
+              name: 'enableSpotlight',
+              type: 'checkbox',
+              label: 'Enable Spotlight',
+              defaultValue: true,
+              admin: { width: '33%' }
+            },
+            {
+              name: 'enableBorderGlow',
+              type: 'checkbox',
+              label: 'Enable Border Glow',
+              defaultValue: true,
+              admin: { width: '33%' }
+            }
+          ]
+        },
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'enableTilt',
+              type: 'checkbox',
+              label: 'Enable Tilt',
+              defaultValue: false,
+              admin: { width: '33%' }
+            },
+            {
+              name: 'clickEffect',
+              type: 'checkbox',
+              label: 'Enable Click Ripple',
+              defaultValue: true,
+              admin: { width: '33%' }
+            },
+            {
+              name: 'enableMagnetism',
+              type: 'checkbox',
+              label: 'Enable Magnetism',
+              defaultValue: true,
+              admin: { width: '33%' }
+            }
+          ]
+        },
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'textAutoHide',
+              type: 'checkbox',
+              label: 'Auto-hide Overflow Text',
+              defaultValue: true,
+              admin: { width: '50%' }
+            },
+            {
+              name: 'disableAnimations',
+              type: 'checkbox',
+              label: 'Disable All Animations',
+              defaultValue: false,
+              admin: {
+                width: '50%',
+                description: 'Animations are also auto-disabled on mobile.'
+              }
+            }
+          ]
+        }
+      ]
+    },
+
+    // ── Visual Config ──────────────────────────────────────────────────────
+    {
+      type: 'collapsible',
+      label: 'Visual Config',
+      admin: { initCollapsed: true },
+      fields: [
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'glowColor',
+              type: 'text',
+              label: 'Glow Color (RGB)',
+              defaultValue: '132, 0, 255',
+              admin: {
+                width: '50%',
+                description: 'Comma-separated RGB values, e.g. "132, 0, 255"'
+              }
+            },
+            {
+              name: 'spotlightRadius',
+              type: 'number',
+              label: 'Spotlight Radius (px)',
+              defaultValue: 300,
+              min: 50,
+              max: 1000,
+              admin: { width: '25%' }
+            },
+            {
+              name: 'particleCount',
+              type: 'number',
+              label: 'Particle Count',
+              defaultValue: 12,
+              min: 1,
+              max: 50,
+              admin: { width: '25%' }
+            }
+          ]
+        }
+      ]
+    },
+
+    // ── Settings ───────────────────────────────────────────────────────────
+    {
+      type: 'collapsible',
+      label: 'Settings',
+      admin: { initCollapsed: true },
+      fields: [
+        {
+          name: 'sectionId',
+          type: 'text',
+          label: 'Section ID',
+          admin: {
+            description: 'Unique ID for anchor links (e.g. "bento-features")'
+          }
+        },
+        {
+          name: 'customCSS',
+          type: 'code',
+          label: 'Custom CSS',
+          admin: {
+            language: 'css',
+            description:
+              'Scoped CSS for this block. Target .magic-bento-section, .magic-bento-card, etc.'
+          }
+        }
+      ]
+    }
+  ]
+}

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

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