blocks-dusted 0.1.10 → 0.1.12

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"
+}