blocks-dusted 0.1.0

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

@@ -0,0 +1,317 @@
+"use client";
+
+import Image from "next/image";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { cn } from "@/utilities/ui";
+type Media = { url?: string | null; alt?: string | null; [key: string]: any };
+
+export type DDShowcaseGridProps = Record<string, any> & {
+  stickToTop?: boolean | null;
+  fadeOutOnScroll?: boolean | null;
+};
+
+type ColumnImage = {
+  image?: Media | string | null;
+  imageUrl?: string | null;
+  [key: string]: any;
+};
+
+type ShowcaseColumn = {
+  id?: string | null;
+  images?: ColumnImage[] | null;
+  speed?: number | null;
+  initialOffset?: number | null;
+};
+
+interface ScrollColumnProps {
+  images: ColumnImage[];
+  speed: number;
+  initialOffset: number;
+  priority?: boolean;
+}
+
+function isLocalImageSrc(src?: string | null): src is string {
+  return typeof src === "string" && src.startsWith("/api/media/file/");
+}
+
+function ScrollColumn({
+  images,
+  speed,
+  initialOffset,
+  priority = false,
+}: ScrollColumnProps) {
+  const colRef = useRef<HTMLDivElement>(null);
+  const posRef = useRef(initialOffset);
+  const rafRef = useRef<number | null>(null);
+  const [mounted, setMounted] = useState(false);
+
+  const resolveSrc = (item: ColumnImage): string | null => {
+    if (item.image && typeof item.image === "object") {
+      const media = item.image as Media;
+      const url = media.url;
+
+      if (!url) return isLocalImageSrc(item.imageUrl) ? item.imageUrl : null;
+
+      return isLocalImageSrc(url) ? url : null;
+    }
+
+    return isLocalImageSrc(item.imageUrl) ? item.imageUrl : null;
+  };
+
+  const validImages = useMemo(() => {
+    return (images ?? []).filter((item) => resolveSrc(item) !== null);
+  }, [images]);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!mounted) return;
+
+    const el = colRef.current;
+    if (!el) return;
+
+    const animate = () => {
+      posRef.current -= speed;
+
+      const totalHeight = el.scrollHeight / 2;
+
+      if (totalHeight > 0 && Math.abs(posRef.current) >= totalHeight) {
+        posRef.current = 0;
+      }
+
+      el.style.transform = `translateY(${posRef.current}px)`;
+      rafRef.current = requestAnimationFrame(animate);
+    };
+
+    const timer = window.setTimeout(() => {
+      rafRef.current = requestAnimationFrame(animate);
+    }, 1200);
+
+    return () => {
+      window.clearTimeout(timer);
+
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, [mounted, speed]);
+
+  if (validImages.length === 0) return null;
+
+  const renderImages = mounted ? [...validImages, ...validImages] : validImages;
+
+  return (
+    <div className="flex flex-col gap-4 will-change-transform" ref={colRef}>
+      {renderImages.map((item, i) => {
+        const src = resolveSrc(item);
+        if (!src) return null;
+
+        const isClone = i >= validImages.length;
+        const shouldPrioritize = Boolean(priority) && !isClone;
+
+        return (
+          <div
+            key={`${item.id ?? "image"}-${i}`}
+            className="relative aspect-4/3 w-full shrink-0 overflow-hidden rounded-lg border border-white/6"
+          >
+            <Image
+              src={src}
+              alt={item.alt ?? ""}
+              fill
+              sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
+              className="object-cover object-top"
+              priority={shouldPrioritize}
+              loading="eager"
+              // loading={shouldPrioritize ? 'eager' : 'lazy'}
+              fetchPriority={shouldPrioritize ? "high" : "auto"}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export const DDShowcaseGrid: React.FC<DDShowcaseGridProps> = ({
+  columns,
+  height = 520,
+  columnHeight = 3200,
+  sectionId,
+  customCSS,
+  priority = false,
+  stickToTop = false,
+  fadeOutOnScroll = false,
+}) => {
+  const sectionHeight = height ?? 520;
+  const colHeight = columnHeight ?? 3200;
+  const shouldStick = Boolean(stickToTop);
+  const shouldFade = Boolean(fadeOutOnScroll);
+  const columnItems = (columns ?? []) as ShowcaseColumn[];
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const stickyRef = useRef<HTMLDivElement | null>(null);
+  const fadeDistance = Math.max(1, sectionHeight);
+
+  useEffect(() => {
+    if (!shouldFade) {
+      if (stickyRef.current) stickyRef.current.style.opacity = "1";
+      return;
+    }
+
+    let rafId = 0;
+
+    const updateOpacity = () => {
+      if (rafId) window.cancelAnimationFrame(rafId);
+
+      rafId = window.requestAnimationFrame(() => {
+        const wrapper = wrapperRef.current;
+        const sticky = stickyRef.current;
+
+        if (!wrapper || !sticky) return;
+
+        const rect = wrapper.getBoundingClientRect();
+        const progress = Math.min(1, Math.max(0, -rect.top / fadeDistance));
+
+        sticky.style.opacity = String(1 - progress);
+      });
+    };
+
+    updateOpacity();
+
+    window.addEventListener("scroll", updateOpacity, { passive: true });
+    window.addEventListener("resize", updateOpacity);
+    window.addEventListener("locomotive:scroll", updateOpacity);
+    window.addEventListener("locomotive:resize", updateOpacity);
+
+    return () => {
+      window.removeEventListener("scroll", updateOpacity);
+      window.removeEventListener("resize", updateOpacity);
+      window.removeEventListener("locomotive:scroll", updateOpacity);
+      window.removeEventListener("locomotive:resize", updateOpacity);
+
+      if (rafId) {
+        window.cancelAnimationFrame(rafId);
+      }
+    };
+  }, [fadeDistance, shouldFade]);
+
+  return (
+    <>
+      <style>{`
+        .studio-showcase-grid {
+          --sg-perspective: 900px;
+          --sg-perspective-origin: 50% 40%;
+          --sg-transform: rotateX(52deg) rotateZ(-42deg);
+          --sg-top: -160%;
+          --sg-bottom: -90%;
+          --sg-sides: -30%;
+        }
+
+        @media (max-width: 1023px) {
+          .studio-showcase-grid {
+          --sg-perspective-origin: 50% 40%;
+          --sg-transform: rotateX(52deg) rotateZ(-42deg);
+          --sg-top: -90%;
+          --sg-bottom: -30%;
+          --sg-sides: -50%;
+            max-height: 420px;
+          }
+        }
+
+        @media (max-width: 639px) {
+          .studio-showcase-grid {
+          --sg-perspective-origin: 50% 40%;
+          --sg-transform: rotateX(52deg) rotateZ(-42deg);
+          --sg-top: -60%;
+          --sg-bottom: 0%;
+          --sg-sides: -90%;
+            max-height: 300px;
+          }
+        }
+      `}</style>
+
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <div
+        data-content-type="ddShowcaseGrid"
+        ref={wrapperRef}
+        className={cn(
+          "relative overflow-clip",
+          shouldStick || shouldFade ? "z-0" : "",
+        )}
+        style={{
+          height:
+            shouldStick || shouldFade
+              ? `${sectionHeight + fadeDistance}px`
+              : undefined,
+        }}
+      >
+        <div
+          ref={stickyRef}
+          className={cn(
+            "relative will-change-opacity",
+            shouldStick || shouldFade ? "sticky top-0" : "",
+          )}
+        >
+          <div className="pointer-events-none absolute left-0 right-0 top-0 bottom-0 z-10 h-[150vh] bg-[linear-gradient(0deg,#ffffff,#ffffff,#ffffff,#ffffff,transparent)] dark:bg-[linear-gradient(0deg,#0a0a0a,#0a0a0a,#0a0a0a,#0a0a0a,transparent)] opacity-80 mix-blend-color-dodge" />
+          <div
+            id={sectionId ?? undefined}
+            className="studio-showcase-grid relative z-0! overflow-hidden"
+            style={{ height: `${sectionHeight}px` }}
+          >
+            <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-80 bg-linear-to-b from-white to-transparent dark:from-[#0a0a0a]" />
+            <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-80 bg-linear-to-t from-white to-transparent dark:from-[#0a0a0a]" />
+            <div className="pointer-events-none absolute inset-y-0 left-0 z-10 w-40 bg-linear-to-r from-white to-transparent dark:from-[#0a0a0a]" />
+            <div className="pointer-events-none absolute inset-y-0 right-0 z-10 w-40 bg-linear-to-l from-white to-transparent dark:from-[#0a0a0a]" />
+
+            <div
+              className="absolute inset-0"
+              style={{
+                perspective: "var(--sg-perspective)",
+                perspectiveOrigin: "var(--sg-perspective-origin)",
+              }}
+            >
+              <div
+                style={{
+                  transform: "var(--sg-transform)",
+                  transformOrigin: "center center",
+                  position: "absolute",
+                  top: "var(--sg-top)",
+                  left: "var(--sg-sides)",
+                  right: "var(--sg-sides)",
+                  bottom: "var(--sg-bottom)",
+                  display: "flex",
+                  gap: "16px",
+                  alignItems: "flex-start",
+                }}
+              >
+                {columnItems.map((col, colIndex) => (
+                  <div
+                    key={col.id ?? colIndex}
+                    className="studio-showcase-col"
+                    style={{
+                      flex: "1",
+                      overflow: "hidden",
+                      height: `${colHeight}px`,
+                    }}
+                  >
+                    <ScrollColumn
+                      images={col.images ?? []}
+                      speed={col.speed ?? 0.5}
+                      initialOffset={col.initialOffset ?? 0}
+                      priority={Boolean(priority)}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DDShowcaseGrid;

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

@@ -0,0 +1,197 @@
+import type { Block } from 'payload'
+
+export const DDShowcaseGrid: Block = {
+  slug: 'DD-ShowcaseGrid',
+  interfaceName: 'DDShowcaseGrid',
+  labels: {
+    singular: 'Studio Showcase Grid',
+    plural: 'Studio Showcase Grids'
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Columns',
+          fields: [
+            {
+              name: 'columns',
+              type: 'array',
+              label: 'Scroll Columns',
+              minRows: 1,
+              maxRows: 8,
+              admin: {
+                description:
+                  'Each column scrolls independently. Add images via upload or fallback URL.',
+                initCollapsed: true
+              },
+              defaultValue: [
+                { speed: 0.45, initialOffset: 0 },
+                { speed: 0.6, initialOffset: -260 },
+                { speed: 0.5, initialOffset: -130 },
+                { speed: 0.38, initialOffset: -390 },
+                { speed: 0.55, initialOffset: -200 }
+              ],
+              fields: [
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'speed',
+                      type: 'number',
+                      label: 'Scroll Speed (px/frame)',
+                      defaultValue: 0.5,
+                      admin: {
+                        description: 'Pixels scrolled per animation frame. e.g. 0.5',
+                        width: '50%'
+                      }
+                    },
+                    {
+                      name: 'initialOffset',
+                      type: 'number',
+                      label: 'Initial Offset (px)',
+                      defaultValue: 0,
+                      admin: {
+                        description:
+                          'Starting vertical offset in pixels. Use negatives to stagger.',
+                        width: '50%'
+                      }
+                    }
+                  ]
+                },
+                {
+                  name: 'images',
+                  type: 'array',
+                  label: 'Images',
+                  minRows: 1,
+                  admin: {
+                    description:
+                      'Images displayed in this column. Original images render first. Duplicate loop images are added after mount.'
+                  },
+                  fields: [
+                    {
+                      name: 'image',
+                      type: 'upload',
+                      relationTo: 'media',
+                      label: 'Upload Image'
+                    },
+                    {
+                      name: 'imageUrl',
+                      type: 'text',
+                      label: 'Image URL (fallback)',
+                      admin: {
+                        description: 'Used when no image is uploaded.'
+                      }
+                    },
+                    {
+                      name: 'alt',
+                      type: 'text',
+                      label: 'Alt Text',
+                      admin: {
+                        description: 'Accessible description for the image.'
+                      }
+                    },
+                    {
+                      name: 'priority',
+                      type: 'checkbox',
+                      label: 'LCP Preload (single image only)',
+                      defaultValue: false,
+                      admin: {
+                        description:
+                          'Only tick this on the ONE image Lighthouse reports as the LCP element. Adds a <link rel="preload"> in <head>. Too many preloads waste bandwidth — use the block-level "Hero Above Fold" checkbox to eagerly load all images instead.'
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          label: 'Settings',
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'height',
+                  type: 'number',
+                  label: 'Section Height (px)',
+                  defaultValue: 520,
+                  admin: {
+                    width: '50%',
+                    description: 'Height of the visible viewport area.'
+                  }
+                },
+                {
+                  name: 'columnHeight',
+                  type: 'number',
+                  label: 'Column Height (px)',
+                  defaultValue: 3200,
+                  admin: {
+                    width: '50%',
+                    description: 'Total height of each scrolling column container.'
+                  }
+                }
+              ]
+            },
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'stickToTop',
+                  type: 'checkbox',
+                  label: 'Stick to Top',
+                  defaultValue: false,
+                  admin: {
+                    width: '50%',
+                    description:
+                      'Pins the showcase grid to the top of the viewport while its own section scrolls.'
+                  }
+                },
+                {
+                  name: 'fadeOutOnScroll',
+                  type: 'checkbox',
+                  label: 'Fade Out On Scroll',
+                  defaultValue: false,
+                  admin: {
+                    width: '50%',
+                    description:
+                      'Fades the pinned grid based on this block section height, not the entire page scroll.'
+                  }
+                }
+              ]
+            },
+            {
+              name: 'priority',
+              type: 'checkbox',
+              label: 'Hero Above Fold (eager load all images)',
+              defaultValue: true,
+              admin: {
+                description:
+                  'Enable when this block is in the hero / above the fold. Sets loading="eager" + fetchpriority="high" on every original image, bypassing the lazy-load detection bug inside 3D-transform containers. Clone/loop images stay lazy.'
+              }
+            },
+            {
+              name: 'sectionId',
+              type: 'text',
+              label: 'Section ID',
+              admin: {
+                description: 'Optional HTML id attribute for anchor linking.'
+              }
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: {
+                language: 'css',
+                description: 'Injected as a <style> tag. Use with caution.'
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,80 @@
+{
+  "type": "block",
+  "name": "DD-ShowcaseGrid",
+  "label": "Studio Showcase Grid",
+  "sourceName": "StudioShowcaseGrid",
+  "portableName": "DD-ShowcaseGrid",
+  "slug": "DD-ShowcaseGrid",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/StudioShowcaseGrid",
+    "originalSlug": "studioShowcaseGrid",
+    "originalConfigExport": "StudioShowcaseGrid",
+    "originalComponentExport": "StudioShowcaseGrid",
+    "originalInterfaceName": "StudioShowcaseGrid"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-ShowcaseGrid/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-ShowcaseGrid/config.ts"
+    }
+  ],
+  "dependencies": [],
+  "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 DDShowcaseGrid in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-ShowcaseGrid 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 DDShowcaseGrid in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-ShowcaseGrid 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 { DDShowcaseGrid } from '@/blocks/DD-ShowcaseGrid/config' and add DDShowcaseGrid to clear Pages/Posts blocks arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-ShowcaseGrid in src/blocks/**/RenderBlocks.tsx when the blockComponents map is clear."
+    }
+  },
+  "notes": [
+    "Converted from DesignsDustedv3 StudioShowcaseGrid.",
+    "Generated Payload type imports are replaced with portable fallback types when needed.",
+    "Installer must not overwrite existing target files."
+  ],
+  "exportName": "DDShowcaseGrid",
+  "interfaceName": "DDShowcaseGrid"
+}