blocks-dusted 0.1.0

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

@@ -0,0 +1,399 @@
+import type { Block } from 'payload'
+
+export const DDStackCards: Block = {
+  slug: 'DD-StackCards',
+  interfaceName: 'DDStackCards',
+  labels: {
+    singular: 'Studio Stack Cards',
+    plural: 'Studio Stack Cards Sections'
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Cards',
+          fields: [
+            {
+              name: 'cards',
+              type: 'array',
+              label: 'Cards',
+              minRows: 1,
+              admin: {
+                description:
+                  'Each card stacks on top of the previous as the user scrolls. Cards are pinned progressively.'
+              },
+              fields: [
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'iconName',
+                      type: 'text',
+                      label: 'Lucide Icon Name',
+                      required: true,
+                      admin: {
+                        width: '50%',
+                        description:
+                          'e.g. Layout, Code2, Database, Gauge, SearchCheck, GitBranch, Layers'
+                      }
+                    },
+                    {
+                      name: 'number',
+                      type: 'text',
+                      label: 'Card Number',
+                      admin: {
+                        width: '50%',
+                        description: 'e.g. 01, 02 — displayed as the index label'
+                      }
+                    }
+                  ]
+                },
+                {
+                  name: 'title',
+                  type: 'text',
+                  label: 'Title',
+                  required: true
+                },
+                {
+                  name: 'content',
+                  type: 'richText',
+                  label: 'Description'
+                },
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'statValue',
+                      type: 'text',
+                      label: 'Stat Value',
+                      admin: {
+                        width: '50%',
+                        description: 'e.g. 3.2×, 0.8s, 98+, +180%'
+                      }
+                    },
+                    {
+                      name: 'statLabel',
+                      type: 'text',
+                      label: 'Stat Label',
+                      admin: {
+                        width: '50%',
+                        description: 'e.g. avg. conversion lift'
+                      }
+                    }
+                  ]
+                },
+                {
+                  name: 'tags',
+                  type: 'array',
+                  label: 'Tags',
+                  fields: [
+                    {
+                      name: 'tag',
+                      type: 'text',
+                      label: 'Tag',
+                      required: true
+                    }
+                  ]
+                },
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'ctaLabel',
+                      type: 'text',
+                      label: 'CTA Label',
+                      defaultValue: 'Learn more',
+                      admin: { width: '50%' }
+                    },
+                    {
+                      name: 'ctaHref',
+                      type: 'text',
+                      label: 'CTA Link',
+                      defaultValue: '#',
+                      admin: { width: '50%' }
+                    }
+                  ]
+                },
+                {
+                  name: 'accentVariant',
+                  type: 'select',
+                  label: 'Accent Color',
+                  defaultValue: 'lime',
+                  options: [
+                    { label: 'Lime', value: 'lime' },
+                    { label: 'Purple', value: 'purple' }
+                  ]
+                },
+                {
+                  name: 'image',
+                  type: 'upload',
+                  label: 'Card Image (Right Panel)',
+                  relationTo: 'media',
+                  admin: {
+                    description:
+                      'Optional image displayed in the right panel. If not provided, a large icon watermark is shown instead.'
+                  }
+                }
+              ],
+              defaultValue: [
+                {
+                  iconName: 'Layout',
+                  number: '01',
+                  title: 'UX / UI Design',
+                  statValue: '3.2×',
+                  statLabel: 'avg. conversion lift',
+                  tags: [
+                    { tag: 'User Research' },
+                    { tag: 'Wireframing' },
+                    { tag: 'Design Systems' }
+                  ],
+                  ctaLabel: 'Learn more',
+                  ctaHref: '#',
+                  accentVariant: 'lime'
+                },
+                {
+                  iconName: 'Code2',
+                  number: '02',
+                  title: 'Web Development',
+                  statValue: '0.8s',
+                  statLabel: 'avg. load time',
+                  tags: [{ tag: 'React / Next.js' }, { tag: 'TypeScript' }, { tag: 'Edge CDN' }],
+                  ctaLabel: 'Learn more',
+                  ctaHref: '#',
+                  accentVariant: 'purple'
+                },
+                {
+                  iconName: 'Database',
+                  number: '03',
+                  title: 'CMS Systems',
+                  statValue: '100%',
+                  statLabel: 'content ownership',
+                  tags: [{ tag: 'Headless CMS' }, { tag: 'Payload' }, { tag: 'Contentful' }],
+                  ctaLabel: 'Learn more',
+                  ctaHref: '#',
+                  accentVariant: 'lime'
+                },
+                {
+                  iconName: 'Gauge',
+                  number: '04',
+                  title: 'Performance Optimisation',
+                  statValue: '98+',
+                  statLabel: 'lighthouse score',
+                  tags: [{ tag: 'Core Web Vitals' }, { tag: 'Lighthouse' }, { tag: 'CDN Tuning' }],
+                  ctaLabel: 'Learn more',
+                  ctaHref: '#',
+                  accentVariant: 'purple'
+                },
+                {
+                  iconName: 'SearchCheck',
+                  number: '05',
+                  title: 'SEO & Analytics',
+                  statValue: '+180%',
+                  statLabel: 'avg. organic growth',
+                  tags: [{ tag: 'Technical SEO' }, { tag: 'GA4' }, { tag: 'Schema Markup' }],
+                  ctaLabel: 'Learn more',
+                  ctaHref: '#',
+                  accentVariant: 'lime'
+                },
+                {
+                  iconName: 'GitBranch',
+                  number: '06',
+                  title: 'Scalable Systems',
+                  statValue: '∞',
+                  statLabel: 'scalable by design',
+                  tags: [{ tag: 'CI/CD' }, { tag: 'Microservices' }, { tag: 'Cloud Infra' }],
+                  ctaLabel: 'Learn more',
+                  ctaHref: '#',
+                  accentVariant: 'purple'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          label: 'Layout',
+          fields: [
+            {
+              type: 'collapsible',
+              label: 'Desktop',
+              admin: {
+                initCollapsed: false
+              },
+              fields: [
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'cardOffset',
+                      type: 'number',
+                      label: 'Desktop Card Peek Offset (px)',
+                      defaultValue: 14,
+                      admin: {
+                        width: '50%',
+                        description: 'How many px each card peeks above the previous stacked card.'
+                      }
+                    },
+                    {
+                      name: 'initialStickyTop',
+                      type: 'number',
+                      label: 'Desktop Initial Sticky Top (px)',
+                      defaultValue: 0,
+                      admin: {
+                        width: '50%',
+                        description: 'Top offset in px for the first card when pinned.'
+                      }
+                    }
+                  ]
+                },
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'depthZ',
+                      type: 'number',
+                      label: 'Desktop Depth Z (px)',
+                      defaultValue: 40,
+                      admin: {
+                        width: '50%',
+                        description: 'How far each card recedes in 3D space per stacked level.'
+                      }
+                    },
+                    {
+                      name: 'scaleStep',
+                      type: 'number',
+                      label: 'Desktop Scale Step per Level',
+                      defaultValue: 0.18,
+                      admin: {
+                        width: '50%',
+                        description: 'Scale reduction per stacked level.'
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              type: 'collapsible',
+              label: 'Tablet',
+              admin: {
+                initCollapsed: true
+              },
+              fields: [
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'cardOffsetTablet',
+                      type: 'number',
+                      label: 'Tablet Card Peek Offset (px)',
+                      defaultValue: 10,
+                      admin: {
+                        width: '50%'
+                      }
+                    },
+                    {
+                      name: 'initialStickyTopTablet',
+                      type: 'number',
+                      label: 'Tablet Initial Sticky Top (px)',
+                      defaultValue: 0,
+                      admin: {
+                        width: '50%'
+                      }
+                    }
+                  ]
+                },
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'depthZTablet',
+                      type: 'number',
+                      label: 'Tablet Depth Z (px)',
+                      defaultValue: 24,
+                      admin: {
+                        width: '50%'
+                      }
+                    },
+                    {
+                      name: 'scaleStepTablet',
+                      type: 'number',
+                      label: 'Tablet Scale Step per Level',
+                      defaultValue: 0.08,
+                      admin: {
+                        width: '50%'
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              type: 'collapsible',
+              label: 'Mobile',
+              admin: {
+                initCollapsed: true
+              },
+              fields: [
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'cardOffsetMobile',
+                      type: 'number',
+                      label: 'Mobile Card Peek Offset (px)',
+                      defaultValue: 7,
+                      admin: {
+                        width: '50%'
+                      }
+                    },
+                    {
+                      name: 'initialStickyTopMobile',
+                      type: 'number',
+                      label: 'Mobile Initial Sticky Top (px)',
+                      defaultValue: 0,
+                      admin: {
+                        width: '50%'
+                      }
+                    }
+                  ]
+                },
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'depthZMobile',
+                      type: 'number',
+                      label: 'Mobile Depth Z (px)',
+                      defaultValue: 12,
+                      admin: {
+                        width: '50%'
+                      }
+                    },
+                    {
+                      name: 'scaleStepMobile',
+                      type: 'number',
+                      label: 'Mobile Scale Step per Level',
+                      defaultValue: 0.045,
+                      admin: {
+                        width: '50%'
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      name: 'sectionId',
+      type: 'text',
+      label: 'Section ID',
+      admin: {
+        description: 'HTML id attribute for anchor linking, e.g. "engine"'
+      }
+    }
+  ]
+}

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

@@ -0,0 +1,87 @@
+{
+  "type": "block",
+  "name": "DD-StackCards",
+  "label": "Studio Stack Cards",
+  "sourceName": "StudioStackCards",
+  "portableName": "DD-StackCards",
+  "slug": "DD-StackCards",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/StudioStackCards",
+    "originalSlug": "studioStackCards",
+    "originalConfigExport": "StudioStackCards",
+    "originalComponentExport": "StudioStackCards",
+    "originalInterfaceName": "StudioStackCards"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-StackCards/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-StackCards/config.ts"
+    }
+  ],
+  "dependencies": [
+    {
+      "name": "gsap"
+    },
+    {
+      "name": "lucide-react"
+    }
+  ],
+  "sharedFiles": [],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "RichText rendering was replaced with fallback markup; reconnect the target project RichText renderer manually if needed.",
+    "defaultLexical was removed from config; re-add project-specific Lexical features manually if needed.",
+    "Register DDStackCards in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-StackCards in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "manualSteps": [
+    "RichText rendering was replaced with fallback markup; reconnect the target project RichText renderer manually if needed.",
+    "defaultLexical was removed from config; re-add project-specific Lexical features manually if needed.",
+    "Register DDStackCards in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-StackCards 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 { DDStackCards } from '@/blocks/DD-StackCards/config' and add DDStackCards to clear Pages/Posts blocks arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-StackCards in src/blocks/**/RenderBlocks.tsx when the blockComponents map is clear."
+    }
+  },
+  "notes": [
+    "Converted from DesignsDustedv3 StudioStackCards.",
+    "Generated Payload type imports are replaced with portable fallback types when needed.",
+    "Installer must not overwrite existing target files.",
+    "Project-specific RichText/defaultLexical setup is intentionally not bundled."
+  ],
+  "exportName": "DDStackCards",
+  "interfaceName": "DDStackCards"
+}