blocks-dusted 0.1.0

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

@@ -0,0 +1,390 @@
+import type { Block } from 'payload'
+
+export const DDMasonaryMedia: Block = {
+  slug: 'DD-MasonaryMedia',
+  dbName: 'studio_masonry',
+  interfaceName: 'DDMasonaryMedia',
+  labels: {
+    singular: 'Studio Masonary Media',
+    plural: 'Studio Masonary Media'
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Header',
+          fields: [
+            {
+              name: 'eyebrow',
+              type: 'text',
+              label: 'Eyebrow Label',
+              defaultValue: 'Featured systems'
+            },
+            {
+              name: 'headlineMain',
+              type: 'text',
+              label: 'Headline Main',
+              defaultValue: 'Components, blocks, and templates'
+            },
+            {
+              name: 'headlineAccent',
+              type: 'text',
+              label: 'Headline Accent',
+              defaultValue: 'built to feel alive'
+            },
+            {
+              name: 'subtext',
+              type: 'textarea',
+              label: 'Subtext',
+              defaultValue:
+                'A curated showcase of production-ready interface pieces, with static previews and motion demos on hover.'
+            }
+          ]
+        },
+        {
+          label: 'Cards',
+          fields: [
+            {
+              name: 'items',
+              type: 'array',
+              label: 'Showcase Cards',
+              minRows: 1,
+              defaultValue: [
+                {
+                  title: 'Premium UI Blocks',
+                  category: 'Components',
+                  framework: 'Next.js / Payload',
+                  description:
+                    'Reusable interface sections for modern product, agency, and commerce experiences.',
+                  href: '/products/components',
+                  linkLabel: 'Browse components',
+                  free: false,
+                  priceLabel: 'From AUD $29',
+                  aspectRatio: '16/9'
+                },
+                {
+                  title: 'Website Templates',
+                  category: 'Templates',
+                  framework: 'Next.js / Payload',
+                  description:
+                    'Full-page systems and starter kits designed to ship faster without looking templated.',
+                  href: '/products/templates',
+                  linkLabel: 'View templates',
+                  free: false,
+                  priceLabel: 'From AUD $89',
+                  aspectRatio: '16/9'
+                }
+              ],
+              fields: [
+                {
+                  name: 'title',
+                  type: 'text',
+                  label: 'Title',
+                  required: true
+                },
+                {
+                  name: 'category',
+                  type: 'text',
+                  label: 'Category',
+                  defaultValue: 'Component'
+                },
+                {
+                  name: 'framework',
+                  type: 'text',
+                  label: 'Framework / Stack',
+                  defaultValue: 'Next.js / Payload'
+                },
+                {
+                  name: 'description',
+                  type: 'textarea',
+                  label: 'Description'
+                },
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'href',
+                      type: 'text',
+                      label: 'Link URL',
+                      defaultValue: '/products/components',
+                      admin: { width: '50%' }
+                    },
+                    {
+                      name: 'linkLabel',
+                      type: 'text',
+                      label: 'Link Label',
+                      defaultValue: 'View item',
+                      admin: { width: '50%' }
+                    }
+                  ]
+                },
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'free',
+                      type: 'checkbox',
+                      label: 'Free Item',
+                      defaultValue: false,
+                      admin: { width: '33.33%' }
+                    },
+                    {
+                      name: 'priceLabel',
+                      type: 'text',
+                      label: 'Price Label',
+                      defaultValue: 'From AUD $29',
+                      admin: { width: '33.33%' }
+                    },
+                    {
+                      name: 'aspectRatio',
+                      type: 'select',
+                      label: 'Media Aspect Ratio',
+                      defaultValue: '16/9',
+                      admin: { width: '33.33%' },
+                      options: [
+                        { label: 'Wide (16:9)', value: '16/9' },
+                        { label: 'Landscape (3:2)', value: '3/2' },
+                        { label: 'Square (1:1)', value: '1/1' },
+                        { label: 'Portrait (2:3)', value: '2/3' }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  name: 'image',
+                  type: 'upload',
+                  relationTo: 'media',
+                  label: 'Static Preview Image',
+                  required: false,
+                  admin: {
+                    description:
+                      'Optional static image shown by default before hover. Use the fallback URL below for clean installs without media records.'
+                  }
+                },
+                {
+                  name: 'hoverVideo',
+                  type: 'upload',
+                  relationTo: 'media',
+                  label: 'Hover Video',
+                  required: false,
+                  admin: {
+                    description:
+                      'Muted video that plays on hover. Recommended: small .webm or .mp4.'
+                  }
+                },
+                {
+                  name: 'posterFallbackUrl',
+                  type: 'text',
+                  label: 'Image Fallback URL',
+                  admin: {
+                    placeholder: '/assets/placeholder/preview.webp',
+                    description: 'Used if the uploaded static image has no URL.'
+                  }
+                },
+                {
+                  name: 'videoFallbackUrl',
+                  type: 'text',
+                  label: 'Video Fallback URL',
+                  admin: {
+                    placeholder: '/assets/video/preview.webm',
+                    description: 'Used if the uploaded hover video has no URL.'
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          label: 'Layout',
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'columnsDesktop',
+                  type: 'number',
+                  label: 'Desktop Columns',
+                  defaultValue: 3,
+                  min: 1,
+                  max: 12,
+                  admin: { width: '25%', description: 'min:1, max:12' }
+                },
+                {
+                  name: 'columnsTablet',
+                  type: 'number',
+                  label: 'Tablet Columns',
+                  defaultValue: 2,
+                  min: 1,
+                  max: 3,
+                  admin: { width: '25%', description: 'min:1, max:6' }
+                },
+                {
+                  name: 'gapClass',
+                  type: 'text',
+                  label: 'Grid Gap Class',
+                  defaultValue: 'gap-5',
+                  admin: { width: '25%' }
+                },
+                {
+                  name: 'containerClassName',
+                  type: 'text',
+                  label: 'Container Class',
+                  defaultValue: 'max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6',
+                  admin: { width: '25%' }
+                }
+              ]
+            },
+            {
+              name: 'sectionClassName',
+              type: 'text',
+              label: 'Section Class',
+              defaultValue: 'py-24'
+            }
+          ]
+        },
+        {
+          label: 'Settings',
+          fields: [
+            {
+              name: 'sectionId',
+              type: 'text',
+              label: 'Section ID',
+              defaultValue: 'studio-masonary-media'
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: { language: 'css' }
+            }
+          ]
+        },
+        {
+          label: 'CTA Button',
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'showCta',
+                  type: 'checkbox',
+                  label: 'Show Button',
+                  defaultValue: false
+                },
+                {
+                  name: 'ctaAlign',
+                  type: 'select',
+                  label: 'Button Alignment',
+                  defaultValue: 'center',
+                  admin: {
+                    width: '50%',
+                    condition: (_, siblingData) => siblingData?.showCta
+                  },
+                  options: [
+                    { label: 'Left', value: 'left' },
+                    { label: 'Center', value: 'center' },
+                    { label: 'Right', value: 'right' }
+                  ]
+                }
+              ]
+            },
+            {
+              type: 'row',
+              admin: { condition: (_, siblingData) => siblingData?.showCta },
+              fields: [
+                {
+                  name: 'ctaDisplayMode',
+                  type: 'select',
+                  label: 'Display Mode',
+                  defaultValue: 'iconWithLabel',
+                  admin: { width: '50%' },
+                  options: [
+                    { label: 'Icon with Label', value: 'iconWithLabel' },
+                    { label: 'Icon Only', value: 'iconOnly' },
+                    { label: 'Label Only', value: 'labelOnly' }
+                  ]
+                },
+                {
+                  name: 'ctaIconPosition',
+                  type: 'select',
+                  label: 'Icon Position',
+                  defaultValue: 'before',
+                  admin: {
+                    width: '50%',
+                    condition: (_, siblingData) => siblingData?.ctaDisplayMode === 'iconWithLabel'
+                  },
+                  options: [
+                    { label: 'Before Label', value: 'before' },
+                    { label: 'After Label', value: 'after' }
+                  ]
+                }
+              ]
+            },
+            {
+              name: 'ctaButtonText',
+              type: 'text',
+              label: 'Button Text',
+
+              admin: {
+                condition: (_, siblingData) =>
+                  siblingData?.showCta && siblingData?.ctaDisplayMode !== 'iconOnly'
+              }
+            },
+            {
+              type: 'row',
+              admin: { condition: (_, siblingData) => siblingData?.showCta },
+              fields: [
+                {
+                  name: 'ctaButtonStyle',
+                  type: 'select',
+                  label: 'Button Style',
+                  defaultValue: 'primary',
+
+                  admin: { width: '50%' },
+                  options: [
+                    { label: 'Primary', value: 'primary' },
+                    { label: 'Secondary', value: 'secondary' },
+                    { label: 'Outline', value: 'outline' },
+                    { label: 'Text', value: 'ghost' },
+                    { label: 'Call-to-Action', value: 'destructive' },
+                    { label: 'Retro Border', value: 'v1' },
+                    { label: 'Gradient Shine', value: 'v2' },
+                    { label: 'Ring Hover', value: 'v3' },
+                    { label: '3D Press', value: 'v4' },
+                    { label: 'Invert Slide', value: 'v5' },
+                    { label: 'Scale Morph', value: 'v6' },
+                    { label: 'Underline', value: 'v7' },
+                    { label: 'Embossed', value: 'v8' }
+                  ]
+                },
+                {
+                  name: 'ctaSize',
+                  type: 'select',
+                  label: 'Button Size',
+                  defaultValue: 'medium',
+
+                  admin: { width: '50%' },
+                  options: [
+                    { label: 'Small', value: 'small' },
+                    { label: 'Medium', value: 'medium' },
+                    { label: 'Large', value: 'large' }
+                  ]
+                }
+              ]
+            },
+            {
+              name: 'ctaContainerClass',
+              type: 'text',
+              label: 'Extra Container Class',
+              admin: {
+                condition: (_, siblingData) => siblingData?.showCta,
+                description: 'Additional classes on the button wrapper (e.g. mt-4)'
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,101 @@
+{
+  "type": "block",
+  "name": "DD-MasonaryMedia",
+  "label": "Studio Masonary Media",
+  "sourceName": "StudioMasonaryMedia",
+  "portableName": "DD-MasonaryMedia",
+  "slug": "DD-MasonaryMedia",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/StudioMasonaryMedia",
+    "originalSlug": "studioMasonaryMedia",
+    "originalConfigExport": "StudioMasonaryMedia",
+    "originalComponentExport": "StudioMasonaryMedia",
+    "originalInterfaceName": "StudioMasonaryMedia"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-MasonaryMedia/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-MasonaryMedia/config.ts"
+    },
+    {
+      "from": "vendor.d.ts",
+      "to": "src/blocks/DD-MasonaryMedia/vendor.d.ts"
+    }
+  ],
+  "dependencies": [
+    {
+      "name": "framer-motion"
+    },
+    {
+      "name": "isotope-layout"
+    },
+    {
+      "name": "imagesloaded"
+    }
+  ],
+  "sharedFiles": [],
+  "requiredProjectFiles": [
+    {
+      "path": "src/utilities/ui.ts",
+      "reason": "Block uses cn from @/utilities/ui."
+    }
+  ],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Replaced ButtonWithIcon with portable fallback link markup; reconnect project ButtonWithIcon manually if desired.",
+    "Replaced custom link/iconPicker field helpers with native Payload fields for portability.",
+    "Static preview uploads are optional so placeholder/default content can save in clean projects without existing media records.",
+    "Register DDMasonaryMedia in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-MasonaryMedia in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "manualSteps": [
+    "Replaced ButtonWithIcon with portable fallback link markup; reconnect project ButtonWithIcon manually if desired.",
+    "Replaced custom link/iconPicker field helpers with native Payload fields for portability.",
+    "Static preview uploads are optional so placeholder/default content can save in clean projects without existing media records.",
+    "Register DDMasonaryMedia in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-MasonaryMedia in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDMasonaryMedia } from '@/blocks/DD-MasonaryMedia/config' and add DDMasonaryMedia to clear Pages/Posts blocks arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-MasonaryMedia in src/blocks/**/RenderBlocks.tsx when the blockComponents map is clear."
+    }
+  },
+  "notes": [
+    "Converted from DesignsDustedv3 StudioMasonaryMedia.",
+    "Generated Payload type imports are replaced with portable fallback types when needed.",
+    "Installer must not overwrite existing target files.",
+    "Project-specific ButtonWithIcon, link field helper, and icon picker field helper are intentionally not bundled for this block."
+  ],
+  "exportName": "DDMasonaryMedia",
+  "interfaceName": "DDMasonaryMedia"
+}

package/templates/blocks/DD-MasonaryMedia/vendor.d.ts

@@ -0,0 +1,2 @@
+declare module 'isotope-layout'
+declare module 'imagesloaded'