blocks-dusted 0.1.0

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

@@ -0,0 +1,155 @@
+"use client";
+import React from "react";
+import * as LucideIcons from "lucide-react";
+import { motion, type Variants } from "framer-motion";
+export type DDProcessProps = Record<string, any>;
+type StepItem = {
+  id?: string | null;
+  iconName?: string | null;
+  title?: string | null;
+  description?: string | null;
+  duration?: string | null;
+};
+
+function DynamicIcon({
+  name,
+  size = 24,
+  ...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 size={size} {...props} />;
+}
+
+// Enumerate all possible classes so Tailwind doesn't purge them
+const gridColsMap: Record<number, string> = {
+  1: "lg:grid-cols-1",
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4",
+  5: "lg:grid-cols-5",
+  6: "lg:grid-cols-6",
+};
+
+const containerVariants: Variants = {
+  hidden: {},
+  show: {
+    transition: {
+      staggerChildren: 0.1,
+      delayChildren: 0.05,
+    },
+  },
+};
+
+const stepVariants: Variants = {
+  hidden: { opacity: 0, y: 28 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } },
+};
+
+export const DDProcess: React.FC<DDProcessProps> = ({
+  eyebrow,
+  headlineMain,
+  headlineAccent,
+  description,
+  steps,
+  sectionId,
+  customCSS,
+}) => {
+  const stepItems = (steps ?? []) as StepItem[];
+  const colCount = Math.min(stepItems.length || 4, 6);
+  const lgCols = gridColsMap[colCount] ?? "lg:grid-cols-4";
+
+  return (
+    <>
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <div id={sectionId ?? "process"} className="py-24">
+        <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
+          {/* Header */}
+          <div className="text-center max-w-2xl mx-auto mb-16">
+            {eyebrow && (
+              <p className="text-[11.5px] font-semibold text-stone-400 tracking-widest uppercase mb-3 top-caption">
+                {eyebrow}
+              </p>
+            )}
+            <h2 className="text-3d text-4xl md:text-5xl font-bold text-stone-900 dark:text-stone-50 leading-tight mb-5">
+              {headlineMain}
+              <br />
+              <span className="text-stone-400">{headlineAccent}</span>
+            </h2>
+            {description && (
+              <p className="text-stone-700 dark:text-stone-300 text-base leading-relaxed">
+                {description}
+              </p>
+            )}
+          </div>
+
+          {/* Steps */}
+          {stepItems.length > 0 && (
+            <div className="relative steps-container mb-4">
+              {/* Single connector line spanning icon centres */}
+              <div
+                className="hidden lg:block absolute top-10 h-px bg-indigo-700  z-0"
+                style={{
+                  left: `calc(100% / ${colCount} / 2)`,
+                  right: `calc(100% / ${colCount} / 2)`,
+                }}
+              />
+
+              <motion.div
+                className={`grid grid-cols-2 sm:grid-cols-2 ${lgCols} gap-8 sm:gap-6 relative z-10`}
+                variants={containerVariants}
+                initial="hidden"
+                whileInView="show"
+                viewport={{ once: false, amount: 0.2 }}
+              >
+                {stepItems.map((step, i) => (
+                  <motion.div
+                    key={step.id ?? i}
+                    className="flex flex-col items-start md:items-center text-left md:text-center justify-start md:justify-center p-4 border-zinc-700/0 border focus:outline-none group bg-lines rounded-md hover:rounded-lg hover:border hover:bg-stone-100 dark:hover:bg-stone-950/90 hover:shadow-2xl hover:border-indigo-500 duration-300 hover:duration-300 transition-all card-bottom-lit"
+                    variants={stepVariants}
+                  >
+                    {/* Circular icon with numbered badge */}
+                    <div className="w-20 h-20 mx-auto flex items-center justify-center rounded-full bg-stone-200 dark:bg-stone-900 border-2 border-indigo-700 group-hover:border-indigo-500 -border-stone-700 mb-5 relative shrink-0">
+                      <DynamicIcon
+                        className="dark:text-indigo-400 text-indigo-700 group-hover:dark:text-lime-400 duration-300 transition-all"
+                        name={step.iconName}
+                        size={24}
+                      />
+                      <span className="absolute -top-1 -right-1 w-6 h-6 flex items-center justify-center rounded-full bg-stone-200 dark:bg-stone-900 border border-indigo-700 text-[10px] font-mono text-indigo-700 dark:text-indigo-400">
+                        {i + 1}
+                      </span>
+                    </div>
+
+                    {/* Duration badge */}
+                    {step.duration && (
+                      <div className="inline-flex items-center gap-1 bg-7 bg-stone-800 border border-stone-700 rounded-full px-2.5 py-0.5 mb-3 group-hover:bg-indigo-800 group-hover:border-indigo-600 dark:group-hover:border-lime-500">
+                        <LucideIcons.Clock
+                          size={10}
+                          className="text-stone-300"
+                        />
+                        <span className="text-[10px] text-stone-300 font-medium">
+                          {step.duration}
+                        </span>
+                      </div>
+                    )}
+
+                    <h3 className="text-lg font-semibold text-stone-900 dark:text-stone-50 mb-2">
+                      {step.title}
+                    </h3>
+                    <p className="text-sm text-stone-700 dark:text-stone-300 leading-relaxed pb-8">
+                      {step.description}
+                    </p>
+                  </motion.div>
+                ))}
+              </motion.div>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,150 @@
+import type { Block } from 'payload'
+
+export const DDProcess: Block = {
+  slug: 'DD-Process',
+  interfaceName: 'DDProcess',
+  labels: {
+    singular: 'Studio Process',
+    plural: 'Studio Process Sections'
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Header',
+          fields: [
+            {
+              name: 'eyebrow',
+              type: 'text',
+              label: 'Eyebrow Label',
+              defaultValue: 'How We Work'
+            },
+            {
+              name: 'headlineMain',
+              type: 'text',
+              label: 'Headline (Main)',
+              defaultValue: 'A process built for',
+              required: true
+            },
+            {
+              name: 'headlineAccent',
+              type: 'text',
+              label: 'Headline (Accent)',
+              defaultValue: 'real outcomes',
+              required: true
+            },
+            {
+              name: 'description',
+              type: 'textarea',
+              label: 'Description',
+              defaultValue:
+                'We run a tight, transparent process that keeps you informed and involved — without wasting your time.'
+            }
+          ]
+        },
+        {
+          label: 'Steps',
+          fields: [
+            {
+              name: 'steps',
+              type: 'array',
+              label: 'Process Steps',
+              minRows: 1,
+              fields: [
+                {
+                  name: 'iconName',
+                  type: 'text',
+                  label: 'Lucide Icon Name',
+                  required: true,
+                  admin: {
+                    description: 'e.g. Search, Pencil, Hammer, Rocket, CheckCircle'
+                  }
+                },
+                {
+                  name: 'number',
+                  type: 'text',
+                  label: 'Step Number',
+                  admin: {
+                    description: 'e.g. 01, 02'
+                  }
+                },
+                {
+                  name: 'title',
+                  type: 'text',
+                  label: 'Step Title',
+                  required: true
+                },
+                {
+                  name: 'description',
+                  type: 'textarea',
+                  label: 'Description',
+                  required: true
+                },
+                {
+                  name: 'duration',
+                  type: 'text',
+                  label: 'Typical Duration',
+                  admin: {
+                    description: 'e.g. 1–2 weeks, 1 day'
+                  }
+                }
+              ],
+              defaultValue: [
+                {
+                  iconName: 'Search',
+                  number: '01',
+                  title: 'Discover',
+                  description:
+                    'We start with a deep-dive kickoff — understanding your users, your goals, and the constraints we need to design around.',
+                  duration: '1–2 days'
+                },
+                {
+                  iconName: 'PenTool',
+                  number: '02',
+                  title: 'Design',
+                  description:
+                    'Wireframes, flows, and high-fidelity UI. We move fast and keep you in the loop with regular check-ins and async Figma access.',
+                  duration: '1–2 weeks'
+                },
+                {
+                  iconName: 'Code2',
+                  number: '03',
+                  title: 'Build',
+                  description:
+                    'Clean, typed, tested code. We ship in short sprints with daily updates and a staging environment from day one.',
+                  duration: '2–8 weeks'
+                },
+                {
+                  iconName: 'Rocket',
+                  number: '04',
+                  title: 'Launch',
+                  description:
+                    'We handle deployment, monitoring, and handoff documentation so your team is set up for long-term success.',
+                  duration: '2–3 days'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          label: 'Settings',
+          fields: [
+            {
+              name: 'sectionId',
+              type: 'text',
+              label: 'Section ID',
+              defaultValue: 'process'
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: { language: 'css' }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

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