blocks-dusted 0.1.0

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

@@ -0,0 +1,189 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import * as LucideIcons from "lucide-react";
+export type DDTechStackProps = Record<string, any>;
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+type MediaObj = { url?: string | null; alt?: string | null };
+type TechStackItem = {
+  image?: string | MediaObj | null;
+  icon?: string | null;
+  label?: string | null;
+  showLabel?: boolean | null;
+};
+type TechStackRow = {
+  duration?: number | null;
+  direction?: "left" | "right" | null;
+  items?: TechStackItem[] | null;
+};
+
+function getMediaUrl(
+  media: string | MediaObj | null | undefined,
+): string | null {
+  if (!media) return null;
+  if (typeof media === "string") return media;
+  return media.url ?? null;
+}
+
+function getMediaAlt(
+  media: string | MediaObj | null | undefined,
+): string | null {
+  if (!media || typeof media === "string") return null;
+  return (media as MediaObj).alt ?? null;
+}
+
+// ─── Dynamic Lucide Icon ──────────────────────────────────────────────────────
+function isLocalImageSrc(src?: string | null): src is string {
+  return typeof src === "string" && src.startsWith("/api/media/file/");
+}
+
+function DynamicIcon({
+  name,
+  size = 36,
+  ...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} />;
+}
+
+// ─── Tech Item Card ───────────────────────────────────────────────────────────
+function TechItem({
+  imageUrl,
+  imageAlt,
+  icon,
+  label,
+  showLabel,
+}: {
+  imageUrl?: string | null;
+  imageAlt?: string | null;
+  icon?: string | null;
+  label?: string | null;
+  showLabel?: boolean | null;
+}) {
+  const safeImageUrl = isLocalImageSrc(imageUrl) ? imageUrl : null;
+
+  return (
+    <div className="relative group/tech text-center shrink-0">
+      <div className="w-20 h-20 bg-linear-to-b from-[#1a1a1f] to-[#0f0f12] rounded-2xl p-4 transition-all duration-300 hover:scale-105 hover:shadow-[0_0_30px_rgba(140,138,132,0.15)] flex items-center justify-center border border-[#2A2A30] invert-[1] dark:invert-[0]">
+        {safeImageUrl ? (
+          <Image
+            src={safeImageUrl}
+            alt={imageAlt ?? label ?? "Tech logo"}
+            width={40}
+            height={40}
+            loading="lazy"
+            className="object-contain w-10 h-10"
+          />
+        ) : (
+          <DynamicIcon className="text-[#9A9790]" name={icon} size={36} />
+        )}
+      </div>
+      {showLabel !== false && label && (
+        <span className="text-sm whitespace-nowrap text-[#9A9790] mt-2 block">
+          {label}
+        </span>
+      )}
+    </div>
+  );
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+export const DDTechStack: React.FC<DDTechStackProps> = ({
+  eyebrow,
+  heading,
+  techRows,
+  sectionId,
+  customCSS,
+}) => {
+  const rows = (techRows ?? []) as TechStackRow[];
+  if (!rows.length) return null;
+
+  const rowMaskStyle: React.CSSProperties = {
+    maskImage:
+      "linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%)",
+    WebkitMaskImage:
+      "linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%)",
+  };
+
+  return (
+    <section
+      id={sectionId ?? undefined}
+      className="relative w-full bg-transparent py-12 px-4 md:px-6 max-w-6xl mx-auto"
+    >
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      {(eyebrow || heading) && (
+        <div className="mb-12">
+          {eyebrow && (
+            <p className="text-sm uppercase tracking-widest text-[#9A9790] mb-2">
+              {eyebrow}
+            </p>
+          )}
+          {heading && (
+            <h2
+              className="text-3xl font-bold tracking-tighter sm:text-4xl text-stone-900 dark:text-stone-50"
+              style={{ fontFamily: "'Space Grotesk', sans-serif" }}
+            >
+              {heading}
+            </h2>
+          )}
+        </div>
+      )}
+
+      <div className="relative">
+        {rows.map((row, rowIndex) => {
+          const duration = row.duration ?? 40;
+          const direction = row.direction ?? "left";
+          const items = row.items ?? [];
+
+          if (items.length === 0) return null;
+
+          // Quadruple items for a seamless infinite loop
+          const duplicated = [...items, ...items, ...items, ...items];
+
+          return (
+            <div
+              key={rowIndex}
+              className="overflow-x-hidden overflow-y-visible py-6 relative"
+              style={rowMaskStyle}
+            >
+              <div
+                className="flex shrink-0 justify-around gap-8 flex-row animate-marquee"
+                style={{
+                  animationDuration: `${duration}s`,
+                  animationDirection:
+                    direction === "right" ? "reverse" : "normal",
+                }}
+              >
+                {duplicated.map((item, idx) => {
+                  const imgUrl = getMediaUrl(
+                    item.image as string | MediaObj | null,
+                  );
+                  const imgAlt = getMediaAlt(
+                    item.image as string | MediaObj | null,
+                  );
+                  return (
+                    <TechItem
+                      key={idx}
+                      imageUrl={imgUrl}
+                      imageAlt={imgAlt}
+                      icon={item.icon}
+                      label={item.label}
+                      showLabel={item.showLabel}
+                    />
+                  );
+                })}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+};

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

@@ -0,0 +1,153 @@
+import type { Block } from 'payload'
+import { iconPicker } from '@/fields/lucide-icon-picker/field'
+
+export const DDTechStack: Block = {
+  slug: 'DD-TechStack',
+  interfaceName: 'DDTechStack',
+  labels: {
+    singular: 'Tech Stack',
+    plural: 'Tech Stacks'
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Header',
+          fields: [
+            {
+              name: 'eyebrow',
+              type: 'text',
+              label: 'Eyebrow Label',
+              admin: { description: 'Small text above the heading (e.g. "Our Stack")' }
+            },
+            {
+              name: 'heading',
+              type: 'text',
+              label: 'Heading',
+              defaultValue: 'Technology Stack',
+              admin: { description: 'Main section heading. Leave blank to hide.' }
+            }
+          ]
+        },
+        {
+          label: 'Rows',
+          fields: [
+            {
+              name: 'techRows',
+              type: 'array',
+              label: 'Tech Rows',
+              minRows: 1,
+              maxRows: 3,
+              admin: {
+                description: 'Up to 3 independently scrolling rows of tech stack items.'
+              },
+              fields: [
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'direction',
+                      type: 'select',
+                      label: 'Scroll Direction',
+                      defaultValue: 'left',
+                      options: [
+                        { label: '← Left', value: 'left' },
+                        { label: '→ Right', value: 'right' }
+                      ],
+                      admin: { width: '50%' }
+                    },
+                    {
+                      name: 'duration',
+                      type: 'number',
+                      label: 'Duration (seconds)',
+                      defaultValue: 40,
+                      min: 5,
+                      max: 180,
+                      admin: {
+                        description: 'Scroll cycle time — lower = faster.',
+                        width: '50%'
+                      }
+                    }
+                  ]
+                },
+                {
+                  name: 'items',
+                  type: 'array',
+                  label: 'Tech Items',
+                  minRows: 1,
+                  admin: {
+                    description:
+                      'Each item shows a logo image or Lucide icon with an optional label. Upload takes priority over icon.'
+                  },
+                  fields: [
+                    {
+                      name: 'image',
+                      type: 'upload',
+                      label: 'Custom Logo',
+                      relationTo: 'media',
+                      admin: {
+                        description:
+                          'Upload SVG, PNG, JPG, WebP, or GIF. Takes priority over the Lucide icon.'
+                      }
+                    },
+                    {
+                      type: 'row',
+                      fields: [
+                        iconPicker({
+                          name: 'icon',
+                          required: false,
+                          description: 'Fallback if no logo is uploaded (e.g. Code2, Database)',
+                          overrides: (field) => ({
+                            ...field,
+                            label: 'Lucide Icon (fallback)',
+                            admin: { ...field.admin, width: '40%' }
+                          })
+                        }),
+                        {
+                          name: 'label',
+                          type: 'text',
+                          label: 'Label',
+                          admin: {
+                            description: 'e.g. "React", "TypeScript"',
+                            width: '40%'
+                          }
+                        },
+                        {
+                          name: 'showLabel',
+                          type: 'checkbox',
+                          label: 'Show Label',
+                          defaultValue: true,
+                          admin: { width: '20%' }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          label: 'Settings',
+          fields: [
+            {
+              name: 'sectionId',
+              type: 'text',
+              label: 'Section ID',
+              admin: {
+                description: 'Unique ID for anchor linking (e.g. "tech-stack")'
+              }
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: { language: 'css' }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,118 @@
+{
+  "type": "block",
+  "name": "DD-TechStack",
+  "label": "Studio Tech Stack",
+  "sourceName": "StudioTechStack",
+  "portableName": "DD-TechStack",
+  "slug": "DD-TechStack",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/StudioTechStack",
+    "originalSlug": "studioTechStack",
+    "originalConfigExport": "StudioTechStack",
+    "originalComponentExport": "StudioTechStack",
+    "originalInterfaceName": "StudioTechStack"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-TechStack/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-TechStack/config.ts"
+    }
+  ],
+  "dependencies": [
+    {
+      "name": "@radix-ui/react-slot"
+    },
+    {
+      "name": "@tanstack/react-virtual"
+    },
+    {
+      "name": "class-variance-authority"
+    },
+    {
+      "name": "fuse.js"
+    },
+    {
+      "name": "lucide-react"
+    }
+  ],
+  "sharedFiles": [
+    {
+      "from": "templates/shared/fields/lucide-icon-picker",
+      "to": "src/fields/lucide-icon-picker",
+      "required": true,
+      "safeToCopy": true
+    },
+    {
+      "from": "templates/shared/components/ui/input.tsx",
+      "to": "src/components/ui/input.tsx",
+      "required": true,
+      "safeToCopy": true
+    },
+    {
+      "from": "templates/shared/components/ui/button.tsx",
+      "to": "src/components/ui/button.tsx",
+      "required": true,
+      "safeToCopy": true
+    }
+  ],
+  "requiredProjectFiles": [
+    {
+      "path": "src/utilities/ui.ts",
+      "reason": "Shared Input/Button components use the cn utility from @/utilities/ui."
+    }
+  ],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Confirm the target Payload project has compatible @payloadcms/ui admin packages for the lucide icon picker field.",
+    "Register DDTechStack in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-TechStack 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 Payload project has compatible @payloadcms/ui admin packages for the lucide icon picker field.",
+    "Register DDTechStack in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-TechStack 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 { DDTechStack } from '@/blocks/DD-TechStack/config' and add DDTechStack to clear Pages/Posts blocks arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-TechStack in src/blocks/**/RenderBlocks.tsx when the blockComponents map is clear."
+    }
+  },
+  "notes": [
+    "Converted from DesignsDustedv3 StudioTechStack.",
+    "Generated Payload type imports are replaced with portable fallback types when needed.",
+    "Installer must not overwrite existing target files.",
+    "Includes shared lucide-icon-picker field files because config imports @/fields/lucide-icon-picker/field."
+  ],
+  "exportName": "DDTechStack",
+  "interfaceName": "DDTechStack"
+}

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

@@ -0,0 +1,147 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import { Star } from "lucide-react";
+import { motion, type Variants } from "framer-motion";
+export type DDTestimonialsProps = Record<string, any>;
+type Media = { url?: string | null };
+type Testimonial = {
+  id?: string | null;
+  title?: string | null;
+  content?: unknown;
+  designation?: unknown;
+  companyLogo?: Media | string | null;
+  fallbackAvatarUrl?: string | null;
+  rating?: number | null;
+};
+
+function isLocalImageSrc(src?: string | null): src is string {
+  return typeof src === "string" && src.startsWith("/api/media/file/");
+}
+
+const containerVariants: Variants = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.12, delayChildren: 0.05 } },
+};
+
+const cardVariants: Variants = {
+  hidden: { opacity: 0, y: 24 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } },
+};
+
+export const DDTestimonials: React.FC<DDTestimonialsProps> = ({
+  eyebrow,
+  headline,
+  testimonials,
+  sectionId,
+  customCSS,
+}) => {
+  const populated = ((testimonials ?? []) as unknown[]).filter(
+    (t): t is Testimonial => typeof t === "object" && t !== null,
+  );
+
+  return (
+    <>
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <div id={sectionId ?? "testimonials"} 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-xl mx-auto mb-14">
+            {eyebrow && (
+              <p className="text-[11.5px] font-semibold text-stone-400 tracking-widest uppercase mb-3 top-caption">
+                {eyebrow}
+              </p>
+            )}
+            <h2 className="text-3xl font-semibold text-stone-900 dark:text-stone-50 leading-tight">
+              {headline}
+            </h2>
+          </div>
+
+          {/* Testimonials */}
+          {populated.length > 0 && (
+            <motion.div
+              className="grid grid-cols-1 md:grid-cols-3 gap-6"
+              variants={containerVariants}
+              initial="hidden"
+              whileInView="show"
+              viewport={{ once: false, amount: 0.15 }}
+            >
+              {populated.map((t, i) => {
+                const avatarUrl =
+                  typeof t.companyLogo === "object" &&
+                  t.companyLogo !== null &&
+                  "url" in t.companyLogo
+                    ? t.companyLogo.url
+                    : (t.fallbackAvatarUrl ?? null);
+                const safeAvatarUrl = isLocalImageSrc(avatarUrl)
+                  ? avatarUrl
+                  : null;
+
+                const stars = Math.min(5, Math.max(1, t.rating ?? 5));
+
+                return (
+                  <motion.div
+                    key={t.id ?? i}
+                    className="rounded-2xl bg-stone-100 dark:bg-stone-900 border border-stone-100 dark:border-stone-800 p-8 flex flex-col"
+                    variants={cardVariants}
+                    style={{ cornerShape: "squircle" } as React.CSSProperties}
+                  >
+                    {/* Stars */}
+                    <div className="flex items-center gap-1 mb-5">
+                      {Array.from({ length: stars }).map((_, si) => (
+                        <Star
+                          key={si}
+                          size={14}
+                          className="text-amber-400"
+                          fill="currentColor"
+                        />
+                      ))}
+                    </div>
+
+                    {/* Quote */}
+                    {t.content ? (
+                      <div className="text-sm text-stone-400 leading-relaxed flex-1 mb-6">
+                        {/* TODO: Reconnect this project's RichText renderer for testimonial content. */}
+                        <span>
+                          Rich text content is configured for this testimonial.
+                        </span>
+                      </div>
+                    ) : null}
+
+                    {/* Author / Company */}
+                    <div className="flex items-center gap-3 pt-5 border-t border-stone-800">
+                      {safeAvatarUrl && (
+                        <div className="w-10 h-10 rounded-full overflow-hidden shrink-0 relative">
+                          <Image
+                            src={safeAvatarUrl}
+                            alt={t.title ?? ""}
+                            fill
+                            sizes="40px"
+                            className="object-cover object-top"
+                          />
+                        </div>
+                      )}
+                      <div>
+                        <div className="text-sm font-semibold text-stone-800 dark:text-stone-50">
+                          {t.title}
+                        </div>
+                        {t.designation ? (
+                          <div className="text-xs text-stone-300">
+                            {/* TODO: Reconnect RichText for designation if needed. */}
+                            <span>Designation content configured.</span>
+                          </div>
+                        ) : null}
+                      </div>
+                    </div>
+                  </motion.div>
+                );
+              })}
+            </motion.div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};