blocks-dusted 0.1.0

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

@@ -0,0 +1,231 @@
+import type { Block } from 'payload'
+
+export const DDHorizontalScroll: Block = {
+  slug: 'DD-HorizontalScroll',
+  dbName: 'shs',
+  interfaceName: 'DDHorizontalScroll',
+  labels: {
+    singular: 'Studio Horizontal Scroll',
+    plural: 'Studio Horizontal Scrolls'
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Content',
+          fields: [
+            {
+              name: 'sectionLabel',
+              type: 'text',
+              label: 'Section Label',
+              defaultValue: 'The Process',
+              admin: {
+                description: 'Eyebrow label shown in the top-left corner of the section.'
+              }
+            },
+            {
+              name: 'slides',
+              type: 'array',
+              label: 'Slides',
+              minRows: 1,
+              maxRows: 8,
+              admin: {
+                description:
+                  'Each slide renders as one full-width horizontal panel. Drag to reorder.',
+                initCollapsed: true
+              },
+              fields: [
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'watermark',
+                      type: 'text',
+                      label: 'Phase Label',
+                      defaultValue: '01',
+                      admin: { width: '50%' }
+                    },
+                    {
+                      name: 'phase',
+                      type: 'text',
+                      label: 'Phase Label',
+                      defaultValue: 'Phase 01',
+                      admin: { width: '50%' }
+                    },
+                    {
+                      name: 'accent',
+                      type: 'select',
+                      label: 'Accent Colour',
+                      defaultValue: 'lime',
+                      options: [
+                        { label: 'Lime (#84cc16)', value: 'lime' },
+                        { label: 'Purple (#9803e2)', value: 'purple' }
+                      ],
+                      admin: { width: '50%' }
+                    },
+                    {
+                      name: 'icon',
+                      type: 'select',
+                      label: 'Icon',
+                      defaultValue: 'penRuler',
+                      options: [
+                        { label: 'Pencil Ruler (Design)', value: 'penRuler' },
+                        { label: 'Code (Development)', value: 'code2' },
+                        { label: 'Rocket (Launch)', value: 'rocket' },
+                        { label: 'Trending Up (Growth)', value: 'trendingUp' },
+                        { label: 'Settings (Automation)', value: 'settings' },
+                        { label: 'Bar Chart (Analytics)', value: 'barChart2' },
+                        { label: 'Users (Team)', value: 'users' },
+                        { label: 'Globe (Web)', value: 'globe' },
+                        { label: 'Zap (Performance)', value: 'zap' },
+                        { label: 'Layers (Stack)', value: 'layers' },
+                        { label: 'Shield Check (Security)', value: 'shieldCheck' },
+                        { label: 'Lightbulb (Ideas)', value: 'lightbulb' },
+                        { label: 'Puzzle (Integration)', value: 'puzzle' },
+                        { label: 'Star (Premium)', value: 'star' }
+                      ],
+                      admin: { width: '50%' }
+                    }
+                  ]
+                },
+                {
+                  name: 'headline',
+                  type: 'text',
+                  label: 'Headline',
+                  defaultValue: 'Phase Title',
+                  admin: {
+                    description: 'Use \\n for a line break e.g. "UX & UI\\nDesign".'
+                  }
+                },
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'sub',
+                      type: 'text',
+                      label: 'Sub Headline',
+                      defaultValue: 'Short punchy line.',
+                      admin: { width: '60%' }
+                    },
+                    {
+                      name: 'visualType',
+                      type: 'select',
+                      label: 'Visual Panel',
+                      defaultValue: 'wireframe',
+                      options: [
+                        { label: 'Wireframe / UI Mockup', value: 'wireframe' },
+                        { label: 'Code Editor', value: 'codeEditor' },
+                        { label: 'Deploy Pipeline', value: 'pipeline' },
+                        { label: 'Marketing Funnel', value: 'funnel' },
+                        { label: 'Automation Flow', value: 'automation' }
+                      ],
+                      admin: { width: '40%' }
+                    }
+                  ]
+                },
+                {
+                  type: 'collapsible',
+                  label: 'Custom Media (Optional)',
+                  admin: {
+                    description:
+                      'Upload custom media to replace the default visual. If set, overrides the Visual Panel setting above.'
+                  },
+                  fields: [
+                    {
+                      name: 'customMediaType',
+                      type: 'select',
+                      label: 'Media Type',
+                      options: [
+                        { label: 'Image', value: 'image' },
+                        { label: 'Video', value: 'video' },
+                        { label: 'Lottie Animation', value: 'lottie' }
+                      ],
+                      admin: {
+                        description: 'Select the type of media you want to upload.'
+                      }
+                    },
+                    {
+                      name: 'customMedia',
+                      type: 'upload',
+                      label: 'Media File',
+                      relationTo: 'media',
+                      admin: {
+                        condition: (_, siblingData) => Boolean(siblingData?.customMediaType),
+                        description:
+                          'Upload your custom image, video, or Lottie file. Will display at full size with object-contain.'
+                      }
+                    }
+                  ]
+                },
+                {
+                  name: 'body',
+                  type: 'textarea',
+                  label: 'Body Text',
+                  defaultValue: 'Describe this phase in detail.'
+                },
+                {
+                  name: 'tags',
+                  type: 'array',
+                  label: 'Tags',
+                  maxRows: 8,
+                  admin: {
+                    description: 'Chip labels shown below the body text.'
+                  },
+                  fields: [
+                    {
+                      name: 'tag',
+                      type: 'text',
+                      label: 'Tag',
+                      required: true
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          label: 'Settings',
+          fields: [
+            {
+              name: 'sectionId',
+              type: 'text',
+              label: 'Section ID',
+              admin: {
+                description: 'HTML id for anchor links (e.g. "process"). No # needed.'
+              }
+            },
+            {
+              name: 'sticky',
+              type: 'checkbox',
+              label: 'Sticky (required for scroll)',
+              defaultValue: true,
+              admin: {
+                description:
+                  'Keeps the section pinned to the top so GSAP can drive the horizontal scroll. Must stay enabled.'
+              }
+            },
+            {
+              name: 'enableCustomCSS',
+              type: 'checkbox',
+              label: 'Enable Custom CSS',
+              defaultValue: false
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: {
+                language: 'css',
+                condition: (_, siblingData) => Boolean(siblingData?.enableCustomCSS),
+                description:
+                  'Scoped via #sectionId or .shs-wrapper. Use :host as a shorthand for the wrapper selector.'
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,85 @@
+{
+  "type": "block",
+  "name": "DD-HorizontalScroll",
+  "label": "Studio Horizontal Scroll",
+  "sourceName": "StudioHorizontalScroll",
+  "portableName": "DD-HorizontalScroll",
+  "slug": "DD-HorizontalScroll",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/StudioHorizontalScroll",
+    "originalSlug": "studioHorizontalScroll",
+    "originalConfigExport": "StudioHorizontalScroll",
+    "originalComponentExport": "StudioHorizontalScroll",
+    "originalInterfaceName": "StudioHorizontalScrollBlock"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-HorizontalScroll/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-HorizontalScroll/config.ts"
+    }
+  ],
+  "dependencies": [
+    {
+      "name": "@lottiefiles/dotlottie-react"
+    },
+    {
+      "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": [
+    "Register DDHorizontalScroll in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-HorizontalScroll in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "manualSteps": [
+    "Register DDHorizontalScroll in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-HorizontalScroll 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 { DDHorizontalScroll } from '@/blocks/DD-HorizontalScroll/config' and add DDHorizontalScroll to clear Pages/Posts blocks arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-HorizontalScroll in src/blocks/**/RenderBlocks.tsx when the blockComponents map is clear."
+    }
+  },
+  "notes": [
+    "Converted from DesignsDustedv3 StudioHorizontalScroll.",
+    "Generated Payload type imports are replaced with portable fallback types when needed.",
+    "Installer must not overwrite existing target files."
+  ],
+  "exportName": "DDHorizontalScroll",
+  "interfaceName": "DDHorizontalScroll"
+}