blocks-dusted 0.1.10 → 0.1.11

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

@@ -0,0 +1,123 @@
+'use client'
+
+import React, { useEffect, useRef } from 'react'
+import Image from 'next/image'
+import 'swiper/css'
+
+export interface ProjectSliderImage {
+  id?: string
+  image: string | { url: string; alt?: string }
+  alt?: string
+}
+
+export interface ProjectSliderBlockProps {
+  images?: ProjectSliderImage[]
+  slidesPerView?: number
+  spaceBetween?: number
+  loop?: boolean
+  centeredSlides?: boolean
+}
+
+const fallbackImages: ProjectSliderImage[] = [
+  {
+    id: '1',
+    image:
+      'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080"%3E%3Crect width="1920" height="1080" fill="%23201d2c"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="64" fill="%23a3e635"%3EProject slide%3C/text%3E%3C/svg%3E',
+    alt: 'Project slide'
+  },
+  {
+    id: '2',
+    image:
+      'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080"%3E%3Crect width="1920" height="1080" fill="%23120f1b"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="64" fill="%23c084fc"%3ECase study%3C/text%3E%3C/svg%3E',
+    alt: 'Case study slide'
+  },
+  {
+    id: '3',
+    image:
+      'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080"%3E%3Crect width="1920" height="1080" fill="%230b0b0d"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="64" fill="%23f8fafc"%3EGallery frame%3C/text%3E%3C/svg%3E',
+    alt: 'Gallery frame slide'
+  }
+]
+
+function getImageSrc(image: ProjectSliderImage['image']) {
+  return typeof image === 'string' ? image : image.url
+}
+
+function getImageAlt(image: ProjectSliderImage) {
+  return image.alt || (typeof image.image === 'string' ? 'Project image' : image.image.alt) || 'Project image'
+}
+
+export const DDProjSlider: React.FC<ProjectSliderBlockProps> = ({
+  images = fallbackImages,
+  slidesPerView = 2,
+  spaceBetween = 30,
+  loop = true,
+  centeredSlides = true
+}) => {
+  const swiperRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    let destroyed = false
+    let instance: { destroy: (deleteInstance?: boolean, cleanStyles?: boolean) => void } | null = null
+
+    const init = async () => {
+      if (!swiperRef.current) return
+
+      const { Swiper } = await import('swiper')
+      if (!swiperRef.current || destroyed) return
+
+      instance = new Swiper(swiperRef.current, {
+        slidesPerView,
+        spaceBetween,
+        loop,
+        centeredSlides,
+        watchOverflow: true,
+        breakpoints: {
+          0: {
+            slidesPerView: 1,
+            spaceBetween: 16,
+            centeredSlides: false
+          },
+          768: {
+            slidesPerView,
+            spaceBetween,
+            centeredSlides
+          }
+        }
+      })
+    }
+
+    init()
+
+    return () => {
+      destroyed = true
+      instance?.destroy(true, true)
+    }
+  }, [slidesPerView, spaceBetween, loop, centeredSlides, images.length])
+
+  if (!images.length) return null
+
+  return (
+    <section className="project-slider-block w-full overflow-hidden py-10">
+      <div ref={swiperRef} className="swiper w-full overflow-visible">
+        <div className="swiper-wrapper items-center">
+          {images.map((image, index) => (
+            <div key={image.id || 'slide-' + index} className="swiper-slide !h-auto">
+              <div className="relative aspect-[16/9] w-full overflow-hidden rounded-[2rem] border border-white/10 bg-stone-950 shadow-2xl [corner-shape:squircle]">
+                <Image
+                  src={getImageSrc(image.image)}
+                  alt={getImageAlt(image)}
+                  width={1920}
+                  height={1080}
+                  className="h-full w-full object-cover object-center"
+                  sizes="(max-width: 768px) 92vw, 48vw"
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+

package/templates/blocks/DD-ProjSlider/README.md

@@ -0,0 +1,4 @@
+# DD-ProjSlider
+
+Portable first-pass conversion of `ProjectSliderBlock` from ROUND-TWO-CONVERSION. Project-specific roots and nested unconverted block dependencies were intentionally replaced with local rendering so the template can install into a clean Payload project.
+

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

@@ -0,0 +1,64 @@
+import { Block } from 'payload'
+
+export const DDProjSlider: Block = {
+  slug: 'DD-ProjSlider',
+  interfaceName: 'DDProjSlider',
+  labels: {
+    singular: 'Project Slider Block',
+    plural: 'Project Slider Blocks'
+  },
+  fields: [
+    {
+      name: 'images',
+      type: 'array',
+      label: 'Images',
+      minRows: 1,
+      fields: [
+        {
+          name: 'imageId',
+          type: 'text',
+          label: 'Image ID',
+          required: true
+        },
+        {
+          name: 'image',
+          type: 'upload',
+          relationTo: 'media',
+          label: 'Image',
+          required: true
+        },
+        {
+          name: 'alt',
+          type: 'text',
+          label: 'Alt Text'
+        }
+      ]
+    },
+    {
+      name: 'slidesPerView',
+      type: 'number',
+      label: 'Slides Per View',
+      defaultValue: 2
+    },
+    {
+      name: 'spaceBetween',
+      type: 'number',
+      label: 'Space Between Slides',
+      defaultValue: 30
+    },
+    {
+      name: 'loop',
+      type: 'checkbox',
+      label: 'Enable Loop',
+      defaultValue: true
+    },
+    {
+      name: 'centeredSlides',
+      type: 'checkbox',
+      label: 'Center Slides',
+      defaultValue: true
+    }
+  ]
+}
+
+export default DDProjSlider

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

@@ -0,0 +1,72 @@
+{
+  "type": "block",
+  "name": "DD-ProjSlider",
+  "label": "Project Slider",
+  "sourceName": "ProjectSliderBlock",
+  "portableName": "DD-ProjSlider",
+  "slug": "DD-ProjSlider",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/ROUND-TWO-CONVERSION/ProjectSliderBlock",
+    "originalSlug": "projectSlider",
+    "originalConfigExport": "ProjectSliderBlock",
+    "originalComponentExport": "ProjectSliderBlock",
+    "originalInterfaceName": "DDProjSlider"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-ProjSlider/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-ProjSlider/config.ts"
+    }
+  ],
+  "dependencies": [],
+  "sharedFiles": [],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDProjSlider in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-ProjSlider in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "manualSteps": [
+    "Register DDProjSlider in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-ProjSlider in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDProjSlider } from '@/blocks/DD-ProjSlider/config' and add DDProjSlider to clear Pages/Posts block arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-ProjSlider in RenderBlocks."
+    }
+  },
+  "notes": [
+    "Converted from ROUND-TWO-CONVERSION as a portable Dusted template.",
+    "Project-specific imports were replaced with local, dependency-light rendering where required."
+  ],
+  "exportName": "DDProjSlider",
+  "interfaceName": "DDProjSlider"
+}

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

@@ -0,0 +1,114 @@
+'use client'
+
+import React, { useEffect, useRef, useState } from 'react'
+import {
+  motion,
+  useAnimationFrame,
+  useMotionValue,
+  useScroll,
+  useSpring,
+  useTransform,
+  useVelocity
+} from 'framer-motion'
+
+import { cn } from '@/utilities/ui'
+
+interface TextScrollProps {
+  text: string
+  default_velocity?: number
+  className?: string
+}
+
+interface ParallaxProps {
+  children: string
+  baseVelocity: number
+  className?: string
+}
+
+export const wrap = (min: number, max: number, v: number) => {
+  const rangeSize = max - min
+  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min
+}
+
+export const DDScrollText: React.FC<TextScrollProps> = ({
+  text,
+  default_velocity = 5,
+  className
+}) => {
+  const ParallaxText: React.FC<ParallaxProps> = ({ children, baseVelocity = 100, className }) => {
+    const baseX = useMotionValue(0)
+    const { scrollY } = useScroll()
+    const scrollVelocity = useVelocity(scrollY)
+    const smoothVelocity = useSpring(scrollVelocity, {
+      damping: 50,
+      stiffness: 400
+    })
+
+    const velocityFactor = useTransform(smoothVelocity, [0, 1000], [0, 5], {
+      clamp: false
+    })
+
+    const [repetitions, setRepetitions] = useState(1)
+    const containerRef = useRef<HTMLDivElement>(null)
+    const textRef = useRef<HTMLSpanElement>(null)
+
+    useEffect(() => {
+      const calculateRepetitions = () => {
+        if (containerRef.current && textRef.current) {
+          const containerWidth = containerRef.current.offsetWidth
+          const textWidth = textRef.current.offsetWidth
+          const newRepetitions = Math.ceil(containerWidth / textWidth) + 2
+          setRepetitions(newRepetitions)
+        }
+      }
+
+      calculateRepetitions()
+
+      window.addEventListener('resize', calculateRepetitions)
+      return () => window.removeEventListener('resize', calculateRepetitions)
+    }, [children])
+
+    const x = useTransform(baseX, (v) => `${wrap(-100 / repetitions, 0, v)}%`)
+
+    const directionFactor = useRef<number>(1)
+    useAnimationFrame((t, delta) => {
+      let moveBy = directionFactor.current * baseVelocity * (delta / 1000)
+
+      if (velocityFactor.get() < 0) {
+        directionFactor.current = -1
+      } else if (velocityFactor.get() > 0) {
+        directionFactor.current = 1
+      }
+
+      moveBy += directionFactor.current * moveBy * velocityFactor.get()
+
+      baseX.set(baseX.get() + moveBy)
+    })
+
+    return (
+      <div className="w-full overflow-hidden whitespace-nowrap" ref={containerRef}>
+        <motion.div className={cn('inline-block', className)} style={{ x }}>
+          {Array.from({ length: repetitions }).map((_, i) => (
+            <span key={i} ref={i === 0 ? textRef : null}>
+              {children}{' '}
+            </span>
+          ))}
+        </motion.div>
+      </div>
+    )
+  }
+
+  return (
+    <section className="parallel-text-section relative w-full">
+      <ParallaxText baseVelocity={default_velocity} className={cn('parallel-text-top', className)}>
+        {text}
+      </ParallaxText>
+      <ParallaxText
+        baseVelocity={-default_velocity}
+        className={cn('parallel-text-bottom', className)}
+      >
+        {text}
+      </ParallaxText>
+    </section>
+  )
+}

package/templates/blocks/DD-ScrollText/README.md

@@ -0,0 +1,4 @@
+# DD-ScrollText
+
+Portable first-pass conversion of `ScrollTextBlock` from ROUND-TWO-CONVERSION. Project-specific roots and nested unconverted block dependencies were intentionally replaced with local rendering so the template can install into a clean Payload project.
+

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

@@ -0,0 +1,58 @@
+import type { Block } from 'payload'
+
+export const DDScrollText: Block = {
+  slug: 'DD-ScrollText',
+  interfaceName: 'DDScrollText',
+  labels: {
+    singular: 'Scroll Text Block',
+    plural: 'Scroll Text Blocks',
+  },
+  fields: [
+    {
+      admin: {
+        initCollapsed: true,
+        className: 'custom-css-class',
+      },
+      type: 'collapsible',
+      label: 'Custom Settings',
+      fields: [
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'default_velocity',
+              type: 'number',
+              label: 'Default Scroll Speed',
+              required: false,
+              defaultValue: 5,
+              admin: {
+                width: '50%',
+                description:
+                  'Set the default scroll speed (positive value). Negative handled automatically.',
+              },
+            },
+            {
+              name: 'className',
+              type: 'text',
+              label: 'Custom Class Name',
+              required: false,
+              admin: {
+                width: '50%',
+                description: 'Additional Tailwind or custom classes for the scrolling text.',
+              },
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: 'text',
+      type: 'text',
+      label: 'Text to Scroll',
+      required: true,
+      admin: {
+        description: 'Enter the text that will scroll across the screen.',
+      },
+    },
+  ],
+}

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

@@ -0,0 +1,72 @@
+{
+  "type": "block",
+  "name": "DD-ScrollText",
+  "label": "Scroll Text",
+  "sourceName": "ScrollTextBlock",
+  "portableName": "DD-ScrollText",
+  "slug": "DD-ScrollText",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/ROUND-TWO-CONVERSION/ScrollTextBlock",
+    "originalSlug": "scrollTextBlock",
+    "originalConfigExport": "ScrollTextBlock",
+    "originalComponentExport": "ScrollTextBlock",
+    "originalInterfaceName": "DDScrollText"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-ScrollText/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-ScrollText/config.ts"
+    }
+  ],
+  "dependencies": [],
+  "sharedFiles": [],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDScrollText in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-ScrollText in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "manualSteps": [
+    "Register DDScrollText in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-ScrollText in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDScrollText } from '@/blocks/DD-ScrollText/config' and add DDScrollText to clear Pages/Posts block arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-ScrollText in RenderBlocks."
+    }
+  },
+  "notes": [
+    "Converted from ROUND-TWO-CONVERSION as a portable Dusted template.",
+    "Project-specific imports were replaced with local, dependency-light rendering where required."
+  ],
+  "exportName": "DDScrollText",
+  "interfaceName": "DDScrollText"
+}