blocks-dusted 0.1.0

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

@@ -0,0 +1,239 @@
+import type { Block } from 'payload'
+
+export const DDBookCall: Block = {
+  slug: 'DD-BookCall',
+  interfaceName: 'DDBookCall',
+  labels: {
+    singular: 'Studio Book Call',
+    plural: 'Studio Book Call Sections'
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Info',
+          fields: [
+            {
+              name: 'eyebrow',
+              type: 'text',
+              label: 'Eyebrow Label',
+              defaultValue: 'Schedule a Call'
+            },
+            {
+              name: 'headlineMain',
+              type: 'text',
+              label: 'Headline (Main)',
+              required: true,
+              defaultValue: 'Book a call with'
+            },
+            {
+              name: 'headlineAccent',
+              type: 'text',
+              label: 'Headline (Accent)',
+              defaultValue: 'our team'
+            },
+            {
+              name: 'description',
+              type: 'textarea',
+              label: 'Description',
+              defaultValue:
+                "Pick a time that works for you. We'll send a calendar invite with everything you need."
+            },
+            {
+              name: 'callTypes',
+              type: 'array',
+              label: 'Call Types',
+              minRows: 1,
+              maxRows: 6,
+              admin: {
+                description: 'Session types the user can pick from in the left sidebar.'
+              },
+              fields: [
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'value',
+                      type: 'text',
+                      label: 'Value (slug)',
+                      required: true,
+                      admin: {
+                        width: '33%',
+                        description: 'Internal key, e.g. discovery'
+                      }
+                    },
+                    {
+                      name: 'label',
+                      type: 'text',
+                      label: 'Label',
+                      required: true,
+                      admin: { width: '34%' }
+                    },
+                    {
+                      name: 'duration',
+                      type: 'text',
+                      label: 'Duration',
+                      required: true,
+                      admin: { width: '33%', description: 'e.g. 30 min' }
+                    }
+                  ]
+                },
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'iconName',
+                      type: 'text',
+                      label: 'Lucide Icon Name',
+                      admin: {
+                        width: '50%',
+                        description: 'e.g. Search, Compass, Code2'
+                      }
+                    },
+                    {
+                      name: 'desc',
+                      type: 'text',
+                      label: 'Short Description',
+                      admin: { width: '50%', description: 'e.g. Explore scope & fit' }
+                    }
+                  ]
+                }
+              ],
+              defaultValue: [
+                {
+                  value: 'discovery',
+                  label: 'Discovery Call',
+                  duration: '30 min',
+                  iconName: 'Search',
+                  desc: 'Explore scope & fit'
+                },
+                {
+                  value: 'strategy',
+                  label: 'Strategy Session',
+                  duration: '60 min',
+                  iconName: 'Compass',
+                  desc: 'Deep dive into your project'
+                },
+                {
+                  value: 'technical',
+                  label: 'Technical Review',
+                  duration: '45 min',
+                  iconName: 'Code2',
+                  desc: 'Architecture & implementation'
+                }
+              ]
+            },
+            {
+              name: 'features',
+              type: 'array',
+              label: '"What to Expect" Items',
+              admin: {
+                description: 'Bullet points in the left sidebar below call types.'
+              },
+              fields: [
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'iconName',
+                      type: 'text',
+                      label: 'Lucide Icon Name',
+                      admin: { width: '50%', description: 'e.g. Video, CalendarCheck, FileText' }
+                    },
+                    {
+                      name: 'text',
+                      type: 'text',
+                      label: 'Text',
+                      required: true,
+                      admin: { width: '50%' }
+                    }
+                  ]
+                }
+              ],
+              defaultValue: [
+                { iconName: 'Video', text: 'Google Meet or Zoom' },
+                { iconName: 'CalendarCheck', text: 'Calendar invite sent instantly' },
+                { iconName: 'FileText', text: 'Pre-call briefing document' },
+                { iconName: 'Lock', text: 'NDA available on request' }
+              ]
+            }
+          ]
+        },
+        {
+          label: 'Form',
+          fields: [
+            {
+              name: 'form',
+              type: 'relationship',
+              relationTo: 'forms',
+              label: 'Payload Form',
+              required: true,
+              admin: {
+                description:
+                  'Select the Payload Form Builder form used to store Book Call submissions. Fields must include: name, email, company, call_type, preferred_date, preferred_time, notes.'
+              }
+            },
+            {
+              name: 'timeSlots',
+              type: 'array',
+              label: 'Available Time Slots',
+              admin: {
+                description: 'Time slots shown in the booking grid.'
+              },
+              fields: [
+                {
+                  name: 'slot',
+                  type: 'text',
+                  label: 'Time Slot',
+                  required: true,
+                  admin: { description: 'e.g. 9:00 AM' }
+                }
+              ],
+              defaultValue: [
+                { slot: '9:00 AM' },
+                { slot: '9:30 AM' },
+                { slot: '10:00 AM' },
+                { slot: '10:30 AM' },
+                { slot: '11:00 AM' },
+                { slot: '11:30 AM' },
+                { slot: '1:00 PM' },
+                { slot: '1:30 PM' },
+                { slot: '2:00 PM' },
+                { slot: '2:30 PM' },
+                { slot: '3:00 PM' },
+                { slot: '3:30 PM' },
+                { slot: '4:00 PM' },
+                { slot: '4:30 PM' }
+              ]
+            },
+            {
+              name: 'footerNote',
+              type: 'text',
+              label: 'Form Footer Note',
+              defaultValue: `No charge. No commitment. We'll confirm within a few hours.`
+            }
+          ]
+        },
+        {
+          label: 'Settings',
+          fields: [
+            {
+              name: 'sectionId',
+              type: 'text',
+              label: 'Section ID',
+              defaultValue: 'book-call'
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: { language: 'css' }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
+

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

@@ -0,0 +1,112 @@
+{
+  "type": "block",
+  "name": "DD-BookCall",
+  "label": "Studio Book Call",
+  "sourceName": "StudioBookCallBlock",
+  "portableName": "DD-BookCall",
+  "slug": "DD-BookCall",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/StudioBookCallBlock",
+    "originalSlug": "studioBookCallBlock",
+    "originalConfigExport": "StudioBookCallBlock",
+    "originalComponentExport": "StudioBookCallBlock",
+    "originalInterfaceName": "StudioBookCallBlock"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-BookCall/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-BookCall/config.ts"
+    }
+  ],
+  "dependencies": [
+    {
+      "name": "lucide-react"
+    }
+  ],
+  "sharedFiles": [
+    {
+      "from": "templates/shared/components/ui/input.tsx",
+      "to": "src/components/ui/input.tsx",
+      "required": true,
+      "safeToCopy": true
+    },
+    {
+      "from": "templates/shared/utilities/getURL.ts",
+      "to": "src/utilities/getURL.ts",
+      "required": true,
+      "safeToCopy": true
+    },
+    {
+      "from": "templates/shared/utilities/canUseDOM.ts",
+      "to": "src/utilities/canUseDOM.ts",
+      "required": true,
+      "safeToCopy": true
+    }
+  ],
+  "requiredProjectFiles": [
+    {
+      "path": "src/utilities/ui.ts",
+      "reason": "Shared Input component uses the cn utility. If missing, add cn or replace the Input component classes."
+    }
+  ],
+  "optionalProjectFiles": [
+    {
+      "path": "src/blocks/Forms",
+      "reason": "Config uses relationTo: forms. The target project should have Payload Form Builder or an equivalent forms."
+    }
+  ],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Confirm the target project has a Payload forms collection or Payload Form Builder configured because this block relates to forms.",
+    "Create/select a Payload form with fields named name, email, company, call_type, preferred_date, preferred_time, and notes.",
+    "Register DDBookCall in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-BookCall in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "manualSteps": [
+    "Confirm the target project has a Payload forms collection or Payload Form Builder configured because this block relates to forms.",
+    "Create/select a Payload form with fields named name, email, company, call_type, preferred_date, preferred_time, and notes.",
+    "Register DDBookCall in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-BookCall 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 { DDBookCall } from '@/blocks/DD-BookCall/config' and add DDBookCall to clear Pages/Posts blocks arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-BookCall in src/blocks/**/RenderBlocks.tsx when the blockComponents map is clear."
+    }
+  },
+  "notes": [
+    "Converted from DesignsDustedv3 StudioBookCallBlock.",
+    "The generated Payload type import was replaced with a local portable props type so the block can be copied before payload generate:types.",
+    "Installer must not overwrite existing shared files."
+  ],
+  "exportName": "DDBookCall",
+  "interfaceName": "DDBookCall"
+}

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

@@ -0,0 +1,144 @@
+"use client";
+import React, { useRef, useState } from "react";
+import * as LucideIcons from "lucide-react";
+import { cn } from "@/utilities/ui";
+export type DDCardTemplate01Props = Record<string, any>;
+
+// ─── SpotlightCard ────────────────────────────────────────────────────────────
+interface SpotlightCardProps {
+  children: React.ReactNode;
+  className?: string;
+  spotlightColor?: string;
+  enableTilt?: boolean;
+  style?: React.CSSProperties;
+}
+
+function SpotlightCard({
+  children,
+  className,
+  spotlightColor = "rgba(214,211,209,0.08)",
+  enableTilt = true,
+  style,
+}: SpotlightCardProps) {
+  const cardRef = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState<{ x: number; y: number } | null>(null);
+  const [tilt, setTilt] = useState({ rx: 0, ry: 0 });
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!cardRef.current) return;
+    const rect = cardRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    setPos({ x, y });
+    if (enableTilt) {
+      const rx = (y / rect.height - 0.5) * -10;
+      const ry = (x / rect.width - 0.5) * 10;
+      setTilt({ rx, ry });
+    }
+  };
+
+  const handleMouseLeave = () => {
+    setPos(null);
+    setTilt({ rx: 0, ry: 0 });
+  };
+
+  return (
+    <div
+      ref={cardRef}
+      className={cn("relative overflow-hidden", className)}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+      style={
+        enableTilt
+          ? {
+              ...style,
+              transform: `perspective(800px) rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg)`,
+              transition: "transform 0.1s ease",
+            }
+          : style
+      }
+    >
+      {pos && (
+        <div
+          className="pointer-events-none absolute inset-0 z-0 transition-opacity duration-300"
+          style={{
+            background: `radial-gradient(400px circle at ${pos.x}px ${pos.y}px, ${spotlightColor}, transparent 60%)`,
+          }}
+        />
+      )}
+      <div className="relative z-10">{children}</div>
+    </div>
+  );
+}
+
+// ─── Dynamic Icon ─────────────────────────────────────────────────────────────
+function DynamicIcon({
+  name,
+  ...props
+}: { name?: string | null } & Omit<LucideIcons.LucideProps, "name">) {
+  if (!name) return null;
+  const Icon = (
+    LucideIcons as unknown as Record<string, React.FC<LucideIcons.LucideProps>>
+  )[name];
+  if (!Icon) return null;
+  return <Icon {...props} />;
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+export const DDCardTemplate01: React.FC<DDCardTemplate01Props> = ({
+  eyebrow,
+  headline,
+  description,
+  iconName = "ShieldCheck",
+  glowColor = "rgba(214,211,209,0.08)",
+  enableTilt = true,
+  minHeight = "220px",
+  className,
+  sectionId,
+  customCSS,
+}) => {
+  return (
+    <div
+      id={sectionId ?? undefined}
+      className="spotlight-card overflow-clip py-8"
+    >
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+      <SpotlightCard
+        spotlightColor={glowColor ?? undefined}
+        enableTilt={enableTilt ?? true}
+        className={cn(
+          "border border-stone-50 dark:border-stone-950 bg-stone-100 dark:bg-stone-900 hover:shadow-2xl transition-all hover:transition-all duration-900 hover:duration-900 flex flex-col justify-between p-6 max-w-[100rem] mx-auto",
+          className,
+        )}
+        style={{ minHeight: minHeight ?? "220px" }}
+      >
+        <div className="w-11 h-11 flex items-center justify-center rounded-xl border border-stone-300 text-stone-300 mb-6">
+          <DynamicIcon
+            className="text-stone-600 dark:text-stone-300"
+            name={iconName ?? "ShieldCheck"}
+            size={20}
+          />
+        </div>
+        <div>
+          {eyebrow && (
+            <p className="text-xs font-semibold text-stone-600 dark:text-stone-400 tracking-widest uppercase mb-2">
+              {eyebrow}
+            </p>
+          )}
+          {headline && (
+            <h3 className="text-2xl font-semibold text-stone-900 dark:text-stone-50 mb-3">
+              {headline}
+            </h3>
+          )}
+          {description && (
+            <p className="text-sm text-stone-600 dark:text-stone-400 leading-relaxed max-w-md">
+              {description}
+            </p>
+          )}
+        </div>
+      </SpotlightCard>
+    </div>
+  );
+};
+
+export default DDCardTemplate01;

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

@@ -0,0 +1,106 @@
+import type { Block } from 'payload'
+
+export const DDCardTemplate01: Block = {
+  slug: 'DD-CardTemplate01',
+  interfaceName: 'DDCardTemplate01',
+  labels: {
+    singular: 'Studio Card (Template 01)',
+    plural: 'Studio Cards (Template 01)'
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Content',
+          fields: [
+            {
+              name: 'eyebrow',
+              type: 'text',
+              label: 'Eyebrow Label',
+              admin: {
+                description: 'Small uppercase label above the headline e.g. "Architecture"'
+              }
+            },
+            {
+              name: 'headline',
+              type: 'text',
+              label: 'Headline',
+              required: true,
+              defaultValue: 'Production-Ready Architecture'
+            },
+            {
+              name: 'description',
+              type: 'textarea',
+              label: 'Description',
+              defaultValue:
+                'Every component is built with real-world production requirements in mind — not just demos. Proper error handling, loading states, and edge cases included.'
+            },
+            {
+              name: 'iconName',
+              type: 'text',
+              label: 'Lucide Icon Name',
+              defaultValue: 'ShieldCheck',
+              admin: {
+                description: 'Lucide icon name e.g. ShieldCheck, LayoutGrid, Zap, Users'
+              }
+            }
+          ]
+        },
+        {
+          label: 'Style',
+          fields: [
+            {
+              name: 'glowColor',
+              type: 'text',
+              label: 'Spotlight Glow Color',
+              defaultValue: 'rgba(214,211,209,0.08)',
+              admin: {
+                description: 'CSS rgba color for the spotlight glow on hover'
+              }
+            },
+            {
+              name: 'enableTilt',
+              type: 'checkbox',
+              label: 'Enable Tilt',
+              defaultValue: true
+            },
+            {
+              name: 'minHeight',
+              type: 'text',
+              label: 'Min Height',
+              defaultValue: '220px',
+              admin: {
+                description: 'e.g. 220px, 300px'
+              }
+            },
+            {
+              name: 'className',
+              type: 'text',
+              label: 'Additional CSS Classes',
+              admin: {
+                description: 'Extra Tailwind classes for the card wrapper'
+              }
+            }
+          ]
+        },
+        {
+          label: 'Settings',
+          fields: [
+            {
+              name: 'sectionId',
+              type: 'text',
+              label: 'Section ID'
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: { language: 'css' }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,84 @@
+{
+  "type": "block",
+  "name": "DD-CardTemplate01",
+  "label": "Studio Card Template01",
+  "sourceName": "StudioCardTemplate01",
+  "portableName": "DD-CardTemplate01",
+  "slug": "DD-CardTemplate01",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/StudioCardTemplate01",
+    "originalSlug": "studioCardTemplate01",
+    "originalConfigExport": "StudioCardTemplate01",
+    "originalComponentExport": "StudioCardTemplate01",
+    "originalInterfaceName": "StudioCardTemplate01"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-CardTemplate01/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-CardTemplate01/config.ts"
+    }
+  ],
+  "dependencies": [
+    {
+      "name": "lucide-react"
+    }
+  ],
+  "sharedFiles": [],
+  "requiredProjectFiles": [
+    {
+      "path": "src/utilities/ui.ts",
+      "reason": "Block uses the cn utility from @/utilities/ui."
+    }
+  ],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDCardTemplate01 in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-CardTemplate01 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 DDCardTemplate01 in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-CardTemplate01 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 { DDCardTemplate01 } from '@/blocks/DD-CardTemplate01/config' and add DDCardTemplate01 to clear Pages/Posts blocks arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-CardTemplate01 in src/blocks/**/RenderBlocks.tsx when the blockComponents map is clear."
+    }
+  },
+  "notes": [
+    "Converted from DesignsDustedv3 StudioCardTemplate01.",
+    "Generated Payload type imports are replaced with portable fallback types when needed.",
+    "Installer must not overwrite existing target files."
+  ],
+  "exportName": "DDCardTemplate01",
+  "interfaceName": "DDCardTemplate01"
+}