blocks-dusted 0.1.9 → 0.1.11

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

@@ -0,0 +1,251 @@
+'use client'
+
+import React, { useState } from 'react'
+import { motion } from 'framer-motion'
+import Link from 'next/link'
+import Image from 'next/image'
+import { cn } from '@/utilities/ui'
+import RichText from '@/components/RichText'
+import { TextFade } from '@/components/ui/anims/fade'
+
+// Tailwind equivalent of .card-block SCSS rules.
+// Keep 'card-block' as the identifier class for CSS overrides.
+const CARD_BLOCK_CLS =
+  'flex-col w-full min-h-fit rounded-t-[8px] border-0 !no-underline overflow-visible ' +
+  // picture: pulled up -2rem with negative bottom margin compensation
+  '[&_picture]:relative [&_picture]:-top-8 [&_picture]:rounded-t-[8px] [&_picture]:pb-4 [&_picture]:!-mb-8 ' +
+  '[&_picture_img]:w-full [&_picture_img]:h-auto [&_picture_img]:object-cover [&_picture_img]:!rounded-t-[8px] [&_picture_img]:overflow-hidden ' +
+  // heading reset
+  '[&_h1]:mt-0 [&_h2]:mt-0 [&_h3]:mt-0 [&_h4]:mt-0 [&_h5]:mt-0 [&_h6]:mt-0 ' +
+  // blockquote caption overlay
+  '[&_blockquote]:!not-italic [&_blockquote]:flex [&_blockquote]:w-full [&_blockquote]:min-h-[60px] ' +
+  '[&_blockquote]:justify-center [&_blockquote]:bg-[#e9e9e9ab] [&_blockquote]:bg-[url(/svg/square-x.svg)] ' +
+  '[&_blockquote]:bg-[length:16px_16px] [&_blockquote]:p-4 [&_blockquote]:backdrop-blur-[4px] ' +
+  '[&_blockquote]:m-0 [&_blockquote]:-mt-16'
+
+type CardItem = {
+  cardBlockClass?: string
+  image?: {
+    url: string
+    alt?: string
+    width?: number
+    height?: number
+  }
+  customClass?: string
+  content: any
+  link?: {
+    url?: string
+  }
+}
+
+type CardBlockProps = {
+  cards: CardItem[]
+  cardScrollSpeed?: string
+  priority?: boolean // Add priority control
+  aspectRatio?: 'square' | 'video' | 'portrait' | 'auto' // Add aspect ratio options
+}
+
+// Fixed Image Component with proper dimensions and aspect ratio
+const CardImage: React.FC<{
+  src: string
+  alt?: string
+  customClass?: string
+  priority?: boolean
+  aspectRatio?: 'square' | 'video' | 'portrait' | 'auto'
+  originalWidth?: number
+  originalHeight?: number
+}> = ({
+  src,
+  alt,
+  customClass,
+  priority = false,
+  aspectRatio = 'video',
+  originalWidth,
+  originalHeight
+}) => {
+  const [imageVisible, setImageVisible] = useState(true)
+
+  if (!imageVisible) {
+    return (
+      <div
+        className={cn(
+          'fallback-image w-full bg-gray-200 flex items-center justify-center text-gray-500',
+          aspectRatio === 'square' && 'aspect-square',
+          aspectRatio === 'video' && 'aspect-video',
+          aspectRatio === 'portrait' && 'aspect-[3/4]',
+          aspectRatio === 'auto' && 'h-auto'
+        )}
+      >
+        <span>Image not available</span>
+      </div>
+    )
+  }
+
+  // Calculate dimensions based on aspect ratio or use original dimensions
+  let width = 400
+  let height = 225 // Default 16:9 ratio
+
+  if (originalWidth && originalHeight) {
+    width = originalWidth
+    height = originalHeight
+  } else {
+    switch (aspectRatio) {
+      case 'square':
+        width = 400
+        height = 400
+        break
+      case 'video':
+        width = 400
+        height = 225 // 16:9
+        break
+      case 'portrait':
+        width = 400
+        height = 533 // 3:4
+        break
+      case 'auto':
+        // Keep default 400x225
+        break
+    }
+  }
+
+  return (
+    <motion.div
+      className={cn(
+        'card-image w-full overflow-hidden',
+        aspectRatio === 'square' && 'aspect-square',
+        aspectRatio === 'video' && 'aspect-video',
+        aspectRatio === 'portrait' && 'aspect-[3/4]',
+        aspectRatio === 'auto' && 'h-auto'
+      )}
+      initial={{ opacity: 0, y: -20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+      viewport={{ once: false, amount: 0.2 }}
+    >
+      <Image
+        src={src}
+        alt={alt || 'Card Image'}
+        width={width}
+        height={height}
+        priority={priority}
+        placeholder="blur"
+        blurDataURL="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 250'%3E%3Cdefs%3E%3CradialGradient id='grad' cx='50%25' cy='50%25' r='50%25' fx='50%25' fy='50%25'%3E%3Cstop offset='0%25' style='stop-color:%23f3f4f6;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23e5e7eb;stop-opacity:1' /%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='400' height='250' fill='url(%23grad)'/%3E%3C/svg%3E"
+        className={cn('w-full h-full object-cover transition-transform duration-300', customClass)}
+        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+        onError={() => setImageVisible(false)}
+      />
+    </motion.div>
+  )
+}
+
+export const DDCard: React.FC<CardBlockProps> = ({
+  cards,
+  cardScrollSpeed = '0',
+  priority = false,
+  aspectRatio = 'video'
+}) => {
+  if (!cards || cards.length === 0) return null
+
+  const baseClasses = ['card-block', 'flex', 'flex-wrap', 'justify-center', 'gap-0']
+  const customBlockClasses = cards
+    .map((card) => card.cardBlockClass || '')
+    .join(' ')
+    .split(' ')
+    .filter(Boolean) // Remove empty strings
+
+  const filteredBlockClasses = Array.from(
+    new Set([
+      ...customBlockClasses,
+      ...baseClasses.filter((cls) => !customBlockClasses.includes(cls))
+    ])
+  ).join(' ')
+
+  return (
+    <div className={cn('w-full', CARD_BLOCK_CLS, filteredBlockClasses)}>
+      {cards.map((card, index) => {
+        const CardContent = (
+          <motion.div
+            className={cn(
+              'border-0 mt-2 mb-2 shadow-md bg-card hover:cursor-pointer overflow-hidden rounded-lg transition-all duration-300 hover:scale-[1.02] hover:shadow-lg w-full max-w-sm mx-auto',
+              card.customClass || card.cardBlockClass
+            )}
+            initial={{ opacity: 0, y: 40 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.3, delay: index * 0.1 }}
+            viewport={{ once: true, amount: 1 }}
+          >
+            {card.image?.url && (
+              <CardImage
+                src={card.image.url}
+                alt={card.image.alt}
+                customClass={card.customClass}
+                priority={priority && index < 2} // Only first 2 cards get priority
+                aspectRatio={aspectRatio}
+                originalWidth={card.image.width}
+                originalHeight={card.image.height}
+              />
+            )}
+
+            {card.content && (
+              <div className="p-4">
+                <RichText data={card.content} enableGutter={false} className="w-full" />
+              </div>
+            )}
+          </motion.div>
+        )
+
+        const linkUrl = card.link?.url
+
+        // No link case
+        if (!linkUrl || linkUrl === '#') {
+          return (
+            <motion.div
+              key={`card-${index}`}
+              data-scroll
+              data-scroll-speed={cardScrollSpeed}
+              className="card-wrapper"
+            >
+              {CardContent}
+            </motion.div>
+          )
+        }
+
+        // Internal link
+        if (linkUrl.startsWith('/')) {
+          return (
+            <Link
+              key={`card-link-${index}`}
+              href={linkUrl}
+              className="card-block-content block"
+              style={{ textDecoration: 'none' }}
+            >
+              <motion.div data-scroll data-scroll-speed={cardScrollSpeed} className="card-wrapper">
+                <TextFade direction="up" className="card-block-anims">
+                  {CardContent}
+                </TextFade>
+              </motion.div>
+            </Link>
+          )
+        }
+
+        // External link
+        return (
+          <a
+            key={`card-external-${index}`}
+            href={linkUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="card-external-content block"
+            style={{ textDecoration: 'none' }}
+          >
+            <motion.div data-scroll data-scroll-speed={cardScrollSpeed} className="card-wrapper">
+              <TextFade direction="down" className={cn('card-block', CARD_BLOCK_CLS)}>
+                {CardContent}
+              </TextFade>
+            </motion.div>
+          </a>
+        )
+      })}
+    </div>
+  )
+}

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

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

@@ -0,0 +1,154 @@
+import type { Block } from 'payload'
+
+import { defaultLexical } from '@/fields/defaultLexical'
+
+export const DDCard: Block = {
+  slug: 'DD-Card',
+  interfaceName: 'DDCard',
+  labels: {
+    singular: 'Card Block',
+    plural: 'Card Blocks'
+  },
+  fields: [
+    // Block-level settings
+    {
+      admin: {
+        initCollapsed: true,
+        className: 'custom-group-class'
+      },
+      type: 'collapsible',
+      label: 'Block Settings',
+      fields: [
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'priority',
+              type: 'checkbox',
+              label: 'High Priority Loading',
+              defaultValue: false,
+              admin: {
+                description:
+                  'Enable for above-the-fold cards only. Improves LCP but should only be used when this card block appears at the top of the page.',
+                width: '50%'
+              }
+            },
+            {
+              name: 'aspectRatio',
+              type: 'select',
+              label: 'Image Aspect Ratio',
+              defaultValue: 'video',
+              options: [
+                { label: '16:9 Video', value: 'video' },
+                { label: '1:1 Square', value: 'square' },
+                { label: '3:4 Portrait', value: 'portrait' },
+                { label: 'Auto (Original)', value: 'auto' }
+              ],
+              admin: {
+                description: 'Set consistent aspect ratio for all card images in this block.',
+                width: '50%'
+              }
+            }
+          ]
+        },
+        {
+          name: 'cardScrollSpeed',
+          type: 'text',
+          label: 'Scroll Animation Speed',
+          defaultValue: '0.2',
+          admin: {
+            description: 'Animation speed for scroll effects. Default: 0.2',
+            placeholder: '0.2'
+          }
+        }
+      ]
+    },
+    // Cards array
+    {
+      name: 'cards',
+      label: 'Cards',
+      type: 'array',
+      required: false,
+      minRows: 1,
+      fields: [
+        {
+          name: 'image',
+          label: 'Card Image',
+          type: 'upload',
+          relationTo: 'media',
+          required: false,
+          admin: {
+            description: 'Image will be displayed according to the aspect ratio setting above.'
+          }
+        },
+        // Custom styling for individual cards
+        {
+          admin: {
+            initCollapsed: true,
+            className: 'custom-css-class'
+          },
+          type: 'collapsible',
+          label: 'Card Styling (Optional)',
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'customClass',
+                  label: 'Custom Image Class',
+                  type: 'text',
+                  required: false,
+                  admin: {
+                    description:
+                      'Override default image classes. Use Tailwind classes for styling.',
+                    placeholder: 'rounded-lg border-2',
+                    width: '50%'
+                  }
+                },
+                {
+                  name: 'cardBlockClass',
+                  label: 'Custom Card Class',
+                  type: 'text',
+                  required: false,
+                  admin: {
+                    description: 'Override default card container classes.',
+                    placeholder: 'shadow-xl bg-accent',
+                    width: '50%'
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          name: 'content',
+          label: 'Card Content',
+          type: 'richText',
+          required: false,
+          admin: {
+            description: 'Rich text content for the card body.'
+          },
+          editor: defaultLexical
+        },
+        {
+          name: 'link',
+          label: 'Card Link (Optional)',
+          type: 'group',
+          fields: [
+            {
+              name: 'url',
+              label: 'URL',
+              type: 'text',
+              required: false,
+              admin: {
+                description:
+                  'Make the entire card clickable. If URL starts with "/", it will be treated as an internal link. Otherwise, it opens in a new tab.',
+                placeholder: '/about or https://example.com'
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,82 @@
+{
+  "type": "block",
+  "name": "DD-Card",
+  "label": "Card",
+  "sourceName": "CardBlock",
+  "portableName": "DD-Card",
+  "slug": "DD-Card",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/ROUND-TWO-CONVERSION/CardBlock",
+    "originalSlug": "cardBlock",
+    "originalConfigExport": "CardBlock",
+    "originalComponentExport": "CardBlock",
+    "originalInterfaceName": "DDCard"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-Card/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-Card/config.ts"
+    }
+  ],
+  "dependencies": [
+    "framer-motion"
+  ],
+  "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 DDCard in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Card in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "manualSteps": [
+    "Register DDCard in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-Card in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDCard } from '@/blocks/DD-Card/config' and add DDCard to clear Pages/Posts block arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-Card 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": "DDCard",
+  "interfaceName": "DDCard"
+}

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

@@ -18,7 +18,7 @@ function SpotlightCard({
   className,
   spotlightColor = 'rgba(214,211,209,0.08)',
   enableTilt = true,
-  style,
+  style
 }: SpotlightCardProps) {
   const cardRef = useRef<HTMLDivElement>(null)
   const [pos, setPos] = useState<{ x: number; y: number } | null>(null)
@@ -53,7 +53,7 @@ function SpotlightCard({
           ? {
               ...style,
               transform: `perspective(800px) rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg)`,
-              transition: 'transform 0.1s ease',
+              transition: 'transform 0.1s ease'
             }
           : style
       }
@@ -62,7 +62,7 @@ function SpotlightCard({
         <div
           className="pointer-events-none absolute inset-0 z-0 transition-opacity duration-300"
           style={{
-            background: `radial-gradient(400px circle at ${pos.x}px ${pos.y}px, ${spotlightColor}, transparent 60%)`,
+            background: `radial-gradient(400px circle at ${pos.x}px ${pos.y}px, ${spotlightColor}, transparent 60%)`
           }}
         />
       )}
@@ -93,7 +93,7 @@ export const DDCardTemplate01: React.FC<DDCardTemplate01Props> = ({
   minHeight = '220px',
   className,
   sectionId,
-  customCSS,
+  customCSS
 }) => {
   return (
     <div id={sectionId ?? undefined} className="spotlight-card overflow-clip py-8">
@@ -103,11 +103,10 @@ export const DDCardTemplate01: React.FC<DDCardTemplate01Props> = ({
         enableTilt={enableTilt ?? true}
         className={cn(
           'border border-stone-50 dark:border-stone-950 bg-stone-100 dark:bg-stone-900 hover:shadow-2xl transition-all hover:transition-all duration-900 hover:duration-900 flex flex-col justify-between p-6 max-w-[100rem] mx-auto',
-          className,
+          className
         )}
         style={{ minHeight: minHeight ?? '220px' }}
       >
-        #BlockName-DDCardTemplate01
         <div className="w-11 h-11 flex items-center justify-center rounded-xl border border-stone-300 text-stone-300 mb-6">
           <DynamicIcon
             className="text-stone-600 dark:text-stone-300"