blocks-dusted 0.1.9 → 0.1.11

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

@@ -0,0 +1,90 @@
+import type { Block } from 'payload'
+
+export const DDLineAnim: Block = {
+  slug: 'DD-LineAnim',
+  interfaceName: 'DDLineAnim',
+  labels: {
+    singular: 'Line Animation',
+    plural: 'Line Animations'
+  },
+  fields: [
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'direction',
+          type: 'select',
+          label: 'Animation Direction',
+          defaultValue: 'left-to-right',
+          options: [
+            { label: 'Left to Right', value: 'left-to-right' },
+            { label: 'Right to Left', value: 'right-to-left' },
+            { label: 'Top to Bottom', value: 'top-to-bottom' },
+            { label: 'Bottom to Top', value: 'bottom-to-top' }
+          ],
+          required: true,
+          admin: {
+            width: '50%'
+          }
+        },
+        {
+          name: 'trigger',
+          type: 'select',
+          label: 'Animation Trigger',
+          defaultValue: 'scroll',
+          options: [
+            { label: 'On Scroll', value: 'scroll' },
+            { label: 'Immediate', value: 'immediate' }
+          ],
+          required: true,
+          admin: {
+            width: '50%'
+          }
+        }
+      ]
+    },
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'duration',
+          type: 'number',
+          label: 'Duration (seconds)',
+          defaultValue: 1,
+          min: 0.1,
+          max: 20,
+          required: true,
+          admin: {
+            width: '50%',
+            description: 'Animation duration in seconds. Range: 0.1 to 20',
+            step: 0.1
+          }
+        },
+        {
+          name: 'delay',
+          type: 'number',
+          label: 'Delay (seconds)',
+          defaultValue: 0,
+          min: 0,
+          max: 6,
+          required: false,
+          admin: {
+            width: '50%',
+            description: 'Delay before animation starts',
+            step: 0.1
+          }
+        }
+      ]
+    },
+    {
+      name: 'customClass',
+      type: 'text',
+      label: 'Custom CSS Class',
+      defaultValue: 'border border-border',
+      required: false,
+      admin: {
+        description: 'Add custom Tailwind or CSS classes for styling'
+      }
+    }
+  ]
+}

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

@@ -0,0 +1,80 @@
+{
+  "type": "block",
+  "name": "DD-LineAnim",
+  "label": "Line Animation",
+  "sourceName": "LineAnimBlock",
+  "portableName": "DD-LineAnim",
+  "slug": "DD-LineAnim",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/ROUND-TWO-CONVERSION/LineAnimBlock",
+    "originalSlug": "lineAnimBlock",
+    "originalConfigExport": "LineAnimBlock",
+    "originalComponentExport": "LineAnimBlock",
+    "originalInterfaceName": "DDLineAnim"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-LineAnim/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-LineAnim/config.ts"
+    }
+  ],
+  "dependencies": [],
+  "sharedFiles": [
+    {
+      "from": "templates/shared/src/components/ui/anims",
+      "to": "src/components/ui/anims",
+      "required": true,
+      "safeToCopy": true
+    }
+  ],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDLineAnim in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-LineAnim in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "manualSteps": [
+    "Register DDLineAnim in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-LineAnim in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDLineAnim } from '@/blocks/DD-LineAnim/config' and add DDLineAnim to clear Pages/Posts block arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-LineAnim 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.",
+    "Manifest includes shared local support files required by original DesignsDusted source imports."
+  ],
+  "exportName": "DDLineAnim",
+  "interfaceName": "DDLineAnim"
+}

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

@@ -0,0 +1,119 @@
+'use client'
+
+import React from 'react'
+import Link from 'next/link'
+import { motion, type Variants } from 'framer-motion'
+type LinkGridItem = { id?: string | null; label?: string | null; path: string }
+type LinkGridCard = { id?: string | null; title?: string | null; titleHref?: string | null; links: LinkGridItem[] }
+type LinkGridCardsProps = { cards?: LinkGridCard[] | null }
+
+const listVariants: Variants = {
+  hidden: {},
+  visible: {
+    transition: {
+      staggerChildren: 0.08,
+      delayChildren: 0.1
+    }
+  }
+}
+
+const itemVariants: Variants = {
+  hidden: {
+    opacity: 0,
+    y: 14
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.45,
+      ease: 'easeOut'
+    }
+  }
+}
+
+export const DDLinkGrid: React.FC<LinkGridCardsProps> = ({ cards }) => {
+  if (!cards || cards.length === 0) return null
+
+  return (
+    <motion.div
+      className="mx-auto grid w-full max-w-4xl grid-cols-1 justify-center gap-8 overflow-hidden p-4 sm:grid-cols-2 lg:flex lg:flex-wrap lg:items-start lg:justify-center"
+      variants={listVariants}
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, amount: 0.25 }}
+    >
+      {cards.map((card: LinkGridCard, index: number) => (
+        <motion.div
+          key={card.id ?? index}
+          variants={itemVariants}
+          className="flex flex-col justify-start items-start w-full max-w-fit"
+        >
+          <h3 className="mb-2 lg:mb-4 px-1 scale-100 w-full !text-[0.875rem] !font-normal !text-lime-500/80 hover:!text-lime-500 transition-all duration-100">
+            {card.titleHref ? <Link href={card.titleHref}>{card.title}</Link> : card.title}
+          </h3>
+
+          <ul className="m-0 flex list-none flex-col p-0">
+            {card.links.map((item: LinkGridItem, linkIndex: number) => (
+            <motion.li
+              key={item.id ?? linkIndex}
+              variants={itemVariants}
+              className="list-none border-l border-stone-100/5 ml-1 py-1 my-0"
+            >
+              <motion.div initial="rest" whileHover="hover" animate="rest" className="inline-block">
+                <Link
+                  href={item.path}
+                  className="group linkGridCard_link relative inline-flex items-start overflow-hidden text-sm !font-normal text-stone-300/80 transition-all duration-300"
+                >
+                  {/* dash */}
+                  <span className="inline-block w-[0.9em] mr-[0.35rem] overflow-hidden">
+                    <motion.span
+                      aria-hidden="true"
+                      className="inline-block text-lime-500"
+                      variants={{
+                        rest: { opacity: 0, x: -8 },
+                        hover: { opacity: 1, x: 0 }
+                      }}
+                      transition={{ duration: 0.25, ease: 'easeOut' }}
+                    >
+                      —
+                    </motion.span>
+                  </span>
+
+                  {/* text wrapper */}
+                  <span className="relative inline-block overflow-hidden">
+                    {/* base text */}
+                    <span className="block text-stone-300/80 transition-opacity duration-300 group-hover:opacity-0">
+                      {item.label}
+                    </span>
+
+                    {/* animated fill text */}
+                    <motion.span
+                      className="absolute inset-0 block whitespace-nowrap text-violet-500"
+                      variants={{
+                        rest: {
+                          clipPath: 'inset(0 100% 0 0)'
+                        },
+                        hover: {
+                          clipPath: 'inset(0 0% 0 0)'
+                        }
+                      }}
+                      transition={{
+                        duration: 0.45,
+                        ease: [0.22, 1, 0.36, 1]
+                      }}
+                    >
+                      {item.label}
+                    </motion.span>
+                  </span>
+                </Link>
+              </motion.div>
+            </motion.li>
+            ))}
+          </ul>
+        </motion.div>
+      ))}
+    </motion.div>
+  )
+}
+

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

@@ -0,0 +1,4 @@
+# DD-LinkGrid
+
+Portable first-pass conversion of `LinkGridCards` 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-LinkGrid/config.ts

@@ -0,0 +1,51 @@
+import type { Block } from 'payload'
+
+export const DDLinkGrid: Block = {
+  slug: 'DD-LinkGrid',
+  interfaceName: 'DDLinkGrid',
+  labels: {
+    singular: 'Link Grid Cards',
+    plural: 'Link Grid Cards'
+  },
+  fields: [
+    {
+      name: 'cards',
+      type: 'array',
+      label: 'Cards',
+      minRows: 1,
+      fields: [
+        {
+          name: 'title',
+          type: 'text',
+          label: 'Heading',
+          required: true
+        },
+        {
+          name: 'titleHref',
+          type: 'text',
+          label: 'Heading Link (href)'
+        },
+        {
+          name: 'links',
+          type: 'array',
+          label: 'Links',
+          minRows: 1,
+          fields: [
+            {
+              name: 'label',
+              type: 'text',
+              label: 'Label',
+              required: true
+            },
+            {
+              name: 'path',
+              type: 'text',
+              label: 'Path',
+              required: true
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,74 @@
+{
+  "type": "block",
+  "name": "DD-LinkGrid",
+  "label": "Link Grid",
+  "sourceName": "LinkGridCards",
+  "portableName": "DD-LinkGrid",
+  "slug": "DD-LinkGrid",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/ROUND-TWO-CONVERSION/LinkGridCards",
+    "originalSlug": "linkGridCards",
+    "originalConfigExport": "LinkGridCards",
+    "originalComponentExport": "LinkGridCards",
+    "originalInterfaceName": "DDLinkGrid"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-LinkGrid/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-LinkGrid/config.ts"
+    }
+  ],
+  "dependencies": [
+    "framer-motion"
+  ],
+  "sharedFiles": [],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDLinkGrid in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-LinkGrid in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "manualSteps": [
+    "Register DDLinkGrid in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-LinkGrid in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDLinkGrid } from '@/blocks/DD-LinkGrid/config' and add DDLinkGrid to clear Pages/Posts block arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-LinkGrid 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": "DDLinkGrid",
+  "interfaceName": "DDLinkGrid"
+}

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

@@ -0,0 +1,132 @@
+'use client'
+
+import React, { useMemo, useState } from 'react'
+import Image from 'next/image'
+import { cn } from '@/utilities/ui'
+import { Separator } from '@/components/ui/separator'
+
+const placeholderBlur =
+  'data:image/svg+xml;base64,' +
+  btoa(
+    '<svg width="160" height="80" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="transparent"/></svg>'
+  )
+
+export type LogoMarqueeProps = {
+  logos: {
+    image?: {
+      url?: string
+      alt?: string
+    } | null
+    imageClass?: string
+    imageStyle?: React.CSSProperties
+    imageAltClass?: string
+  }[]
+  speed?: number
+  spacing?: number
+  showTopDivider?: boolean
+  showBottomDivider?: boolean
+  containerClass?: string
+  itemWidth?: number
+  customCSS?: string
+}
+
+const LogoImage: React.FC<{
+  src: string
+  alt?: string
+  customClass?: string
+  imageStyle?: React.CSSProperties
+}> = ({ src, alt, customClass, imageStyle }) => {
+  const [imageError, setImageError] = useState(false)
+  const imageSrc = !src || imageError ? placeholderBlur : src
+
+  return (
+    <Image
+      src={imageSrc}
+      alt={alt || 'Logo'}
+      width={160}
+      height={72}
+      priority
+      className={cn('h-14 w-auto max-w-[140px] object-contain', customClass)}
+      style={imageStyle}
+      onError={() => setImageError(true)}
+      placeholder="blur"
+      blurDataURL={placeholderBlur}
+    />
+  )
+}
+
+export const DDLogoMarq: React.FC<LogoMarqueeProps> = ({
+  logos,
+  speed = 18,
+  spacing = 32,
+  showTopDivider = false,
+  showBottomDivider = false,
+  containerClass = 'py-8',
+  customCSS,
+  itemWidth = 190
+}) => {
+  const validLogos = logos || []
+  const marqueeItems = useMemo(() => {
+    if (validLogos.length === 0) return []
+    const minimumItems = Math.max(validLogos.length, 6)
+    return Array.from({ length: minimumItems }, (_, index) => validLogos[index % validLogos.length])
+  }, [validLogos])
+
+  if (marqueeItems.length === 0) return null
+
+  const gap = Math.max(16, spacing)
+
+  const LogoTile = ({
+    logo,
+    index,
+    duplicate = false
+  }: {
+    logo: (typeof marqueeItems)[number]
+    index: number
+    duplicate?: boolean
+  }) => (
+    <div
+      key={(duplicate ? 'duplicate' : 'logo') + '-' + index}
+      className="marquee-logo-tile flex shrink-0 flex-col items-center justify-center rounded-2xl border border-white/10 bg-white/[0.035] px-5 py-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] backdrop-blur-sm"
+      style={{ width: itemWidth }}
+    >
+      <LogoImage
+        src={logo.image?.url || placeholderBlur}
+        alt={logo.image?.alt}
+        customClass={logo.imageClass}
+        imageStyle={logo.imageStyle}
+      />
+      {logo.image?.alt && (
+        <p className={cn('mt-3 text-center text-sm font-medium leading-tight text-white/80', logo.imageAltClass)}>
+          {logo.image.alt}
+        </p>
+      )}
+    </div>
+  )
+
+  return (
+    <>
+      {showTopDivider && <Separator gradient className="border-seperator" />}
+      <section className="logo-marquee-block mx-auto flex min-h-[280px] w-full max-w-6xl items-center overflow-hidden">
+        {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+        <style>{
+          '@keyframes dd-logo-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }' +
+          '.logo-marquee-track { animation: dd-logo-marquee var(--dd-logo-marquee-speed) linear infinite; }' +
+          '.logo-marquee-block:hover .logo-marquee-track { animation-play-state: paused; }'
+        }</style>
+        <div className={cn('relative w-full overflow-hidden', containerClass)}>
+          <div
+            className="logo-marquee-track flex w-max items-center"
+            style={{ gap, '--dd-logo-marquee-speed': speed + 's' } as React.CSSProperties}
+          >
+            {marqueeItems.map((logo, index) => LogoTile({ logo, index }))}
+            {marqueeItems.map((logo, index) => LogoTile({ logo, index, duplicate: true }))}
+          </div>
+        </div>
+      </section>
+      {showBottomDivider && <Separator gradient className="border-seperator opacity-20" />}
+    </>
+  )
+}
+
+export default DDLogoMarq

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

@@ -0,0 +1,4 @@
+# DD-LogoMarq
+
+Portable first-pass conversion of `LogoMarquee` 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.
+