blocks-dusted 0.1.11 → 0.1.12

package/templates/blocks/DDHG-LogoMarquee/Component.tsx

@@ -1,93 +1,143 @@
-'use client'
-
-import React, { useState } from 'react'
-import { motion } from 'framer-motion'
-import Image from 'next/image'
-import { cn } from '@/utilities/ui'
-// DDHG TODO: Re-enable after reviewing the project-specific separator/custom CSS bundle.
-// import { Separator } from '@/components/ui/separator'
-// import { extractCustomCSS } from '@/utilities/renderCustomCSS'
-
-const placeholderBlur =
-  'data:image/svg+xml;base64,' +
-  btoa(`<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" style="opacity:0"><rect width="100%" height="100%" fill="transparent" /></svg>`)
-
-type LogoItem = {
-  image?: { url?: string | null; alt?: string | null } | null
-  imageClass?: string | null
-  imageStyle?: React.CSSProperties
-  imageAltClass?: string | null
-}
-
-export type DDHGLogoMarqueeProps = {
-  sectionId?: string | null
-  logos?: LogoItem[] | null
-  speed?: number | null
-  spacing?: number | null
-  priority?: boolean | null
-  showTopDivider?: boolean | null
-  showBottomDivider?: boolean | null
-  containerClass?: string | null
-  itemWidth?: number | null
-  enableCustomCSS?: boolean | null
-  customCSS?: Array<{ blockType?: string; css?: string }> | string | null
-}
-
-const LogoImage: React.FC<{ src: string; alt?: string | null; customClass?: string | null; imageStyle?: React.CSSProperties; priority?: boolean }> = ({ src, alt, customClass, imageStyle, priority = false }) => {
-  const [imageError, setImageError] = useState(false)
-  const imageSrc = !src || imageError ? placeholderBlur : src
-  return <Image src={imageSrc} alt={alt || 'Logo'} width={300} height={300} priority={priority} className={customClass || ''} style={{ objectFit: 'contain', ...(imageStyle && typeof imageStyle === 'object' ? imageStyle : {}) }} onError={() => setImageError(true)} placeholder="blur" blurDataURL={placeholderBlur} />
-}
-
-export const DDHGLogoMarquee: React.FC<DDHGLogoMarqueeProps> = ({
-  sectionId,
-  logos,
-  speed = 10,
-  spacing = 32,
-  priority = false,
-  showTopDivider = false,
-  showBottomDivider = false,
-  containerClass = 'overflow-hidden py-8 bg-transparent',
-  enableCustomCSS = false,
-  customCSS,
-  itemWidth,
-}) => {
-  const validLogos = Array.isArray(logos) ? logos : []
-  if (validLogos.length === 0) return null
-  const calculatedItemWidth = itemWidth || 100
-  const totalWidth = validLogos.length * (calculatedItemWidth + (spacing || 0))
-
-  // DDHG TODO: Re-enable with extractCustomCSS when that bundle is reviewed.
-  // const extractedCSS = enableCustomCSS && Array.isArray(customCSS)
-  //   ? extractCustomCSS(customCSS)
-  //   : typeof customCSS === 'string'
-  //     ? customCSS
-  //     : ''
-  const extractedCSS = ''
-  void enableCustomCSS
-  void customCSS
-  void showTopDivider
-  void showBottomDivider
-
-  const renderSet = (suffix = '') => validLogos.map((logo, index) => (
-    <div key={`logo-${index}${suffix}`} className="marque-image-container flex-shrink-0 flex flex-col items-center justify-center" style={{ marginRight: `${spacing || 0}px`, ...(itemWidth ? { width: `${calculatedItemWidth}px` } : { minWidth: `${calculatedItemWidth}px` }) }}>
-      <LogoImage src={logo.image?.url || placeholderBlur} alt={logo.image?.alt} customClass={logo.imageClass} imageStyle={logo.imageStyle} priority={Boolean(priority)} />
-      <p className={cn('text-base text-center', logo.imageAltClass)}>{logo.image?.alt || null}</p>
-    </div>
-  ))
-
-  return <>
-    {/* DDHG TODO: Re-enable optional Separator rendering after bundle review. */}
-    {/* {showTopDivider && <Separator gradient={true} className="border-seperator" />} */}
-    <div id={sectionId ?? undefined} className="logo-marquee-block relative mx-auto">
-      {extractedCSS && <style dangerouslySetInnerHTML={{ __html: extractedCSS }} />}
-      <motion.div className={`${containerClass} flex py-4`} animate={{ x: [0, -totalWidth] }} transition={{ repeat: Infinity, duration: speed || 10, ease: 'linear' }} style={{ width: `${totalWidth * 2}px` }}>
-        {renderSet()}
-        {renderSet('-duplicate')}
-      </motion.div>
-    </div>
-    {/* {showBottomDivider && <Separator gradient={true} className="border-seperator opacity-20" />} */}
-  </>
-}
-
-export default DDHGLogoMarquee
+'use client'
+
+import React, { useState } from 'react'
+import { motion } from 'framer-motion'
+import Image from 'next/image'
+import { cn } from '@/utilities/ui'
+// DDHG TODO: Re-enable after reviewing the project-specific separator/custom CSS bundle.
+// import { Separator } from '@/components/ui/separator'
+// import { extractCustomCSS } from '@/utilities/renderCustomCSS'
+
+const placeholderBlur =
+  'data:image/svg+xml;base64,' +
+  btoa(
+    `<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" style="opacity:0"><rect width="100%" height="100%" fill="transparent" /></svg>`,
+  )
+
+type LogoItem = {
+  image?: { url?: string | null; alt?: string | null } | null
+  imageClass?: string | null
+  imageStyle?: React.CSSProperties
+  imageAltClass?: string | null
+}
+
+export type DDHGLogoMarqueeProps = {
+  sectionId?: string | null
+  logos?: LogoItem[] | null
+  speed?: number | null
+  spacing?: number | null
+  priority?: boolean | null
+  showTopDivider?: boolean | null
+  showBottomDivider?: boolean | null
+  containerClass?: string | null
+  itemWidth?: number | null
+  enableCustomCSS?: boolean | null
+  customCSS?: Array<{ blockType?: string; css?: string }> | string | null
+}
+
+const LogoImage: React.FC<{
+  src: string
+  alt?: string | null
+  customClass?: string | null
+  imageStyle?: React.CSSProperties
+  priority?: boolean
+}> = ({ src, alt, customClass, imageStyle, priority = false }) => {
+  const [imageError, setImageError] = useState(false)
+  const imageSrc = !src || imageError ? placeholderBlur : src
+  return (
+    <Image
+      src={imageSrc}
+      alt={alt || 'Logo'}
+      width={300}
+      height={300}
+      priority={priority}
+      className={customClass || ''}
+      style={{
+        objectFit: 'contain',
+        ...(imageStyle && typeof imageStyle === 'object' ? imageStyle : {}),
+      }}
+      onError={() => setImageError(true)}
+      placeholder="blur"
+      blurDataURL={placeholderBlur}
+    />
+  )
+}
+
+export const DDHGLogoMarquee: React.FC<DDHGLogoMarqueeProps> = ({
+  sectionId,
+  logos,
+  speed = 10,
+  spacing = 32,
+  priority = false,
+  showTopDivider = false,
+  showBottomDivider = false,
+  containerClass = 'overflow-hidden py-8 bg-transparent',
+  enableCustomCSS = false,
+  customCSS,
+  itemWidth,
+}) => {
+  const validLogos = Array.isArray(logos) ? logos : []
+  if (validLogos.length === 0) return null
+  const calculatedItemWidth = itemWidth || 100
+  const totalWidth = validLogos.length * (calculatedItemWidth + (spacing || 0))
+
+  // DDHG TODO: Re-enable with extractCustomCSS when that bundle is reviewed.
+  // const extractedCSS = enableCustomCSS && Array.isArray(customCSS)
+  //   ? extractCustomCSS(customCSS)
+  //   : typeof customCSS === 'string'
+  //     ? customCSS
+  //     : ''
+  const extractedCSS = ''
+  void enableCustomCSS
+  void customCSS
+  void showTopDivider
+  void showBottomDivider
+
+  const renderSet = (suffix = '') =>
+    validLogos.map((logo, index) => (
+      <div
+        key={`logo-${index}${suffix}`}
+        className="marque-image-container shrink-0 flex flex-col items-center justify-center"
+        style={{
+          marginRight: `${spacing || 0}px`,
+          ...(itemWidth
+            ? { width: `${calculatedItemWidth}px` }
+            : { minWidth: `${calculatedItemWidth}px` }),
+        }}
+      >
+        <LogoImage
+          src={logo.image?.url || placeholderBlur}
+          alt={logo.image?.alt}
+          customClass={logo.imageClass}
+          imageStyle={logo.imageStyle}
+          priority={Boolean(priority)}
+        />
+        <p className={cn('text-base text-center', logo.imageAltClass)}>{logo.image?.alt || null}</p>
+      </div>
+    ))
+
+  return (
+    <>
+      {/* DDHG TODO: Re-enable optional Separator rendering after bundle review. */}
+      {/* {showTopDivider && <Separator gradient={true} className="border-seperator" />} */}
+      <div
+        id={sectionId ?? undefined}
+        className="logo-marquee-block relative mx-auto max-w-screen overflow-x-clip bg-stone-300/20 dark:bg-stone-900/10 top-[20vh]"
+      >
+        {extractedCSS && <style dangerouslySetInnerHTML={{ __html: extractedCSS }} />}
+        <motion.div
+          className={`${containerClass} flex py-4`}
+          animate={{ x: [0, -totalWidth] }}
+          transition={{ repeat: Infinity, duration: speed || 10, ease: 'linear' }}
+          style={{ width: `${totalWidth * 2}px` }}
+        >
+          {renderSet()}
+          {renderSet('-duplicate')}
+        </motion.div>
+      </div>
+      {/* {showBottomDivider && <Separator gradient={true} className="border-seperator opacity-20" />} */}
+    </>
+  )
+}
+
+export default DDHGLogoMarquee

package/templates/blocks/DDHG-LogoMarquee/config.ts

@@ -1,66 +1,154 @@
-import type { Block } from 'payload'
-// DDHG TODO: Re-enable with the project-specific CustomCssBlock bundle.
-// import { CustomCSSBlock } from '@/blocks/CustomCssBlock/config'
-
-export const DDHGLogoMarquee: Block = {
-  slug: 'DDHG-LogoMarquee',
-  interfaceName: 'DDHGLogoMarquee',
-  labels: { singular: 'Image Marquee', plural: 'Image Marquee' },
-  fields: [
-    { name: 'sectionId', type: 'text', label: 'Section ID', required: false, admin: { description: 'Optional anchor ID for linking and scroll targets.' } },
-    {
-      type: 'collapsible', label: 'Block Settings', admin: { initCollapsed: true, className: 'custom-css-class' },
-      fields: [
-        { type: 'collapsible', label: 'Container Class', admin: { initCollapsed: true, className: 'custom-css-class' }, fields: [
-          { name: 'containerClass', label: false, type: 'text', required: false, admin: { description: 'Override the default container class.' } },
-        ] },
-        { type: 'collapsible', label: 'Marquee Settings', admin: { initCollapsed: true, className: 'custom-group-class' }, fields: [
-          { type: 'row', fields: [
-            { name: 'speed', type: 'number', label: 'Scroll Speed (seconds)', defaultValue: 10, required: true, admin: { width: '50%' } },
-            { name: 'spacing', type: 'number', label: 'Spacing between images (px)', defaultValue: 32, required: true, admin: { width: '50%' } },
-          ] },
-        ] },
-        { name: 'priority', type: 'checkbox', label: 'High Priority Loading', defaultValue: false },
-        { type: 'collapsible', label: 'Dividers', admin: { initCollapsed: true, className: 'custom-group-class' }, fields: [
-          { name: 'showTopDivider', type: 'checkbox', label: 'Show Top Divider' },
-          { name: 'showBottomDivider', type: 'checkbox', label: 'Show Bottom Divider' },
-        ] },
-      ],
-    },
-    {
-      name: 'logoImages', type: 'upload', relationTo: 'media', hasMany: true, required: false,
-      filterOptions: { mimeType: { contains: 'image' } },
-      hooks: { beforeChange: [({ value, siblingData }) => {
-        if (!Array.isArray(value) || value.length === 0) return value
-        const existingLogos = Array.isArray((siblingData as any)?.logos) ? (siblingData as any).logos : []
-        const normalizeImageId = (imageValue: unknown): number | string | undefined => {
-          if (typeof imageValue === 'number' || typeof imageValue === 'string') return imageValue
-          if (imageValue && typeof imageValue === 'object' && 'id' in (imageValue as any)) {
-            const maybeId = (imageValue as any).id
-            if (typeof maybeId === 'number' || typeof maybeId === 'string') return maybeId
-          }
-          return undefined
-        }
-        const existingIds = new Set(existingLogos.map((row: any) => normalizeImageId(row?.image)).filter((id: any) => id !== undefined))
-        const newRows = value.map((id) => normalizeImageId(id)).filter((id): id is number | string => id !== undefined).filter((id) => !existingIds.has(id)).map((id) => ({ image: id, imageAltClass: 'hidden', imageClass: '' }))
-        ;(siblingData as any).logos = [...existingLogos, ...newRows]
-        return []
-      }] },
-    },
-    {
-      name: 'logos', type: 'array', label: 'Images', labels: { singular: 'Image', plural: 'Images' },
-      fields: [
-        { name: 'image', type: 'upload', relationTo: 'media', required: false, filterOptions: { mimeType: { contains: 'image' } } },
-        { type: 'collapsible', label: 'Alt Text Class', admin: { initCollapsed: true, className: 'custom-css-class' }, fields: [
-          { name: 'imageAltClass', label: false, type: 'text', required: false, defaultValue: 'hidden' },
-        ] },
-        { type: 'collapsible', label: 'Image Class', admin: { initCollapsed: true, className: 'custom-css-class' }, fields: [
-          { name: 'imageClass', label: false, type: 'text', required: false },
-        ] },
-      ],
-    },
-    // DDHG TODO: Re-enable custom CSS support after reviewing the CustomCssBlock bundle.
-    // { name: 'enableCustomCSS', type: 'checkbox', label: 'Inject Custom CSS', defaultValue: false },
-    // { name: 'customCSS', type: 'blocks', label: 'Custom CSS', blocks: [CustomCSSBlock], maxRows: 1, required: false, admin: { initCollapsed: true, className: 'for-devs-class custom-css-class', condition: (_, siblingData) => Boolean(siblingData.enableCustomCSS) } },
-  ],
-}
+import type { Block } from 'payload'
+// DDHG TODO: Re-enable with the project-specific CustomCssBlock bundle.
+// import { CustomCSSBlock } from '@/blocks/CustomCssBlock/config'
+
+export const DDHGLogoMarquee: Block = {
+  slug: 'DDHG-LogoMarquee',
+  interfaceName: 'DDHGLogoMarquee',
+  labels: { singular: 'Image Marquee', plural: 'Image Marquee' },
+  fields: [
+    {
+      name: 'sectionId',
+      type: 'text',
+      label: 'Section ID',
+      required: false,
+      admin: { description: 'Optional anchor ID for linking and scroll targets.' },
+    },
+    {
+      type: 'collapsible',
+      label: 'Block Settings',
+      admin: { initCollapsed: true, className: 'custom-css-class' },
+      fields: [
+        {
+          type: 'collapsible',
+          label: 'Container Class',
+          admin: { initCollapsed: true, className: 'custom-css-class' },
+          fields: [
+            {
+              name: 'containerClass',
+              label: false,
+              type: 'text',
+              required: false,
+              admin: { description: 'Override the default container class.' },
+            },
+          ],
+        },
+        {
+          type: 'collapsible',
+          label: 'Marquee Settings',
+          admin: { initCollapsed: true, className: 'custom-group-class' },
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'speed',
+                  type: 'number',
+                  label: 'Scroll Speed (seconds)',
+                  defaultValue: 10,
+                  required: true,
+                  admin: { width: '50%' },
+                },
+                {
+                  name: 'spacing',
+                  type: 'number',
+                  label: 'Spacing between images (px)',
+                  defaultValue: 32,
+                  required: true,
+                  admin: { width: '50%' },
+                },
+              ],
+            },
+          ],
+        },
+        { name: 'priority', type: 'checkbox', label: 'High Priority Loading', defaultValue: false },
+        {
+          type: 'collapsible',
+          label: 'Dividers',
+          admin: { initCollapsed: true, className: 'custom-group-class' },
+          fields: [
+            { name: 'showTopDivider', type: 'checkbox', label: 'Show Top Divider' },
+            { name: 'showBottomDivider', type: 'checkbox', label: 'Show Bottom Divider' },
+          ],
+        },
+      ],
+    },
+    {
+      name: 'logoImages',
+      type: 'upload',
+      relationTo: 'media',
+      hasMany: true,
+      required: false,
+      filterOptions: { mimeType: { contains: 'image' } },
+      hooks: {
+        beforeChange: [
+          ({ value, siblingData }) => {
+            if (!Array.isArray(value) || value.length === 0) return value
+            const existingLogos = Array.isArray((siblingData as any)?.logos)
+              ? (siblingData as any).logos
+              : []
+            const normalizeImageId = (imageValue: unknown): number | string | undefined => {
+              if (typeof imageValue === 'number' || typeof imageValue === 'string')
+                return imageValue
+              if (imageValue && typeof imageValue === 'object' && 'id' in (imageValue as any)) {
+                const maybeId = (imageValue as any).id
+                if (typeof maybeId === 'number' || typeof maybeId === 'string') return maybeId
+              }
+              return undefined
+            }
+            const existingIds = new Set(
+              existingLogos
+                .map((row: any) => normalizeImageId(row?.image))
+                .filter((id: any) => id !== undefined),
+            )
+            const newRows = value
+              .map((id) => normalizeImageId(id))
+              .filter((id): id is number | string => id !== undefined)
+              .filter((id) => !existingIds.has(id))
+              .map((id) => ({ image: id, imageAltClass: 'hidden', imageClass: '' }))
+            ;(siblingData as any).logos = [...existingLogos, ...newRows]
+            return []
+          },
+        ],
+      },
+    },
+    {
+      name: 'logos',
+      type: 'array',
+      label: 'Images',
+      labels: { singular: 'Image', plural: 'Images' },
+      fields: [
+        {
+          name: 'image',
+          type: 'upload',
+          relationTo: 'media',
+          required: false,
+          filterOptions: { mimeType: { contains: 'image' } },
+        },
+        {
+          type: 'collapsible',
+          label: 'Alt Text Class',
+          admin: { initCollapsed: true, className: 'custom-css-class' },
+          fields: [
+            {
+              name: 'imageAltClass',
+              label: false,
+              type: 'text',
+              required: false,
+              defaultValue: 'hidden',
+            },
+          ],
+        },
+        {
+          type: 'collapsible',
+          label: 'Image Class',
+          admin: { initCollapsed: true, className: 'custom-css-class' },
+          fields: [{ name: 'imageClass', label: false, type: 'text', required: false }],
+        },
+      ],
+    },
+    // DDHG TODO: Re-enable custom CSS support after reviewing the CustomCssBlock bundle.
+    // { name: 'enableCustomCSS', type: 'checkbox', label: 'Inject Custom CSS', defaultValue: false },
+    // { name: 'customCSS', type: 'blocks', label: 'Custom CSS', blocks: [CustomCSSBlock], maxRows: 1, required: false, admin: { initCollapsed: true, className: 'for-devs-class custom-css-class', condition: (_, siblingData) => Boolean(siblingData.enableCustomCSS) } },
+  ],
+}