blocks-dusted 0.1.10 → 0.1.12

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

@@ -1,140 +1,140 @@
-'use client'
-import React, { useRef, useState } from 'react'
-import * as LucideIcons from 'lucide-react'
-import { cn } from '@/utilities/ui'
-export type DDCardTemplate01Props = Record<string, any>
-
-// ─── SpotlightCard ────────────────────────────────────────────────────────────
-interface SpotlightCardProps {
-  children: React.ReactNode
-  className?: string
-  spotlightColor?: string
-  enableTilt?: boolean
-  style?: React.CSSProperties
-}
-
-function SpotlightCard({
-  children,
-  className,
-  spotlightColor = 'rgba(214,211,209,0.08)',
-  enableTilt = true,
-  style,
-}: SpotlightCardProps) {
-  const cardRef = useRef<HTMLDivElement>(null)
-  const [pos, setPos] = useState<{ x: number; y: number } | null>(null)
-  const [tilt, setTilt] = useState({ rx: 0, ry: 0 })
-
-  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!cardRef.current) return
-    const rect = cardRef.current.getBoundingClientRect()
-    const x = e.clientX - rect.left
-    const y = e.clientY - rect.top
-    setPos({ x, y })
-    if (enableTilt) {
-      const rx = (y / rect.height - 0.5) * -10
-      const ry = (x / rect.width - 0.5) * 10
-      setTilt({ rx, ry })
-    }
-  }
-
-  const handleMouseLeave = () => {
-    setPos(null)
-    setTilt({ rx: 0, ry: 0 })
-  }
-
-  return (
-    <div
-      ref={cardRef}
-      className={cn('relative overflow-hidden', className)}
-      onMouseMove={handleMouseMove}
-      onMouseLeave={handleMouseLeave}
-      style={
-        enableTilt
-          ? {
-              ...style,
-              transform: `perspective(800px) rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg)`,
-              transition: 'transform 0.1s ease',
-            }
-          : style
-      }
-    >
-      {pos && (
-        <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%)`,
-          }}
-        />
-      )}
-      <div className="relative z-10">{children}</div>
-    </div>
-  )
-}
-
-// ─── Dynamic Icon ─────────────────────────────────────────────────────────────
-function DynamicIcon({
-  name,
-  ...props
-}: { name?: string | null } & Omit<LucideIcons.LucideProps, 'name'>) {
-  if (!name) return null
-  const Icon = (LucideIcons as unknown as Record<string, React.FC<LucideIcons.LucideProps>>)[name]
-  if (!Icon) return null
-  return <Icon {...props} />
-}
-
-// ─── Component ────────────────────────────────────────────────────────────────
-export const DDCardTemplate01: React.FC<DDCardTemplate01Props> = ({
-  eyebrow,
-  headline,
-  description,
-  iconName = 'ShieldCheck',
-  glowColor = 'rgba(214,211,209,0.08)',
-  enableTilt = true,
-  minHeight = '220px',
-  className,
-  sectionId,
-  customCSS,
-}) => {
-  return (
-    <div id={sectionId ?? undefined} className="spotlight-card overflow-clip py-8">
-      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
-      <SpotlightCard
-        spotlightColor={glowColor ?? undefined}
-        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,
-        )}
-        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"
-            name={iconName ?? 'ShieldCheck'}
-            size={20}
-          />
-        </div>
-        <div>
-          {eyebrow && (
-            <p className="text-xs font-semibold text-stone-600 dark:text-stone-400 tracking-widest uppercase mb-2">
-              {eyebrow}
-            </p>
-          )}
-          {headline && (
-            <h3 className="text-2xl font-semibold text-stone-900 dark:text-stone-50 mb-3">
-              {headline}
-            </h3>
-          )}
-          {description && (
-            <p className="text-sm text-stone-600 dark:text-stone-400 leading-relaxed max-w-md">
-              {description}
-            </p>
-          )}
-        </div>
-      </SpotlightCard>
-    </div>
-  )
-}
-
-export default DDCardTemplate01
+'use client'
+import React, { useRef, useState } from 'react'
+import * as LucideIcons from 'lucide-react'
+import { cn } from '@/utilities/ui'
+export type DDCardTemplate01Props = Record<string, any>
+
+// ─── SpotlightCard ────────────────────────────────────────────────────────────
+interface SpotlightCardProps {
+  children: React.ReactNode
+  className?: string
+  spotlightColor?: string
+  enableTilt?: boolean
+  style?: React.CSSProperties
+}
+
+function SpotlightCard({
+  children,
+  className,
+  spotlightColor = 'rgba(214,211,209,0.08)',
+  enableTilt = true,
+  style,
+}: SpotlightCardProps) {
+  const cardRef = useRef<HTMLDivElement>(null)
+  const [pos, setPos] = useState<{ x: number; y: number } | null>(null)
+  const [tilt, setTilt] = useState({ rx: 0, ry: 0 })
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!cardRef.current) return
+    const rect = cardRef.current.getBoundingClientRect()
+    const x = e.clientX - rect.left
+    const y = e.clientY - rect.top
+    setPos({ x, y })
+    if (enableTilt) {
+      const rx = (y / rect.height - 0.5) * -10
+      const ry = (x / rect.width - 0.5) * 10
+      setTilt({ rx, ry })
+    }
+  }
+
+  const handleMouseLeave = () => {
+    setPos(null)
+    setTilt({ rx: 0, ry: 0 })
+  }
+
+  return (
+    <div
+      ref={cardRef}
+      className={cn('relative overflow-hidden', className)}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+      style={
+        enableTilt
+          ? {
+              ...style,
+              transform: `perspective(800px) rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg)`,
+              transition: 'transform 0.1s ease',
+            }
+          : style
+      }
+    >
+      {pos && (
+        <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%)`,
+          }}
+        />
+      )}
+      <div className="relative z-10">{children}</div>
+    </div>
+  )
+}
+
+// ─── Dynamic Icon ─────────────────────────────────────────────────────────────
+function DynamicIcon({
+  name,
+  ...props
+}: { name?: string | null } & Omit<LucideIcons.LucideProps, 'name'>) {
+  if (!name) return null
+  const Icon = (LucideIcons as unknown as Record<string, React.FC<LucideIcons.LucideProps>>)[name]
+  if (!Icon) return null
+  return <Icon {...props} />
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+export const DDCardTemplate01: React.FC<DDCardTemplate01Props> = ({
+  eyebrow,
+  headline,
+  description,
+  iconName = 'ShieldCheck',
+  glowColor = 'rgba(214,211,209,0.08)',
+  enableTilt = true,
+  minHeight = '220px',
+  className,
+  sectionId,
+  customCSS,
+}) => {
+  return (
+    <div id={sectionId ?? undefined} className="spotlight-card overflow-clip py-8">
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+      <SpotlightCard
+        spotlightColor={glowColor ?? undefined}
+        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,
+        )}
+        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"
+            name={iconName ?? 'ShieldCheck'}
+            size={20}
+          />
+        </div>
+        <div>
+          {eyebrow && (
+            <p className="text-xs font-semibold text-stone-600 dark:text-stone-400 tracking-widest uppercase mb-2">
+              {eyebrow}
+            </p>
+          )}
+          {headline && (
+            <h3 className="text-2xl font-semibold text-stone-900 dark:text-stone-50 mb-3">
+              {headline}
+            </h3>
+          )}
+          {description && (
+            <p className="text-sm text-stone-600 dark:text-stone-400 leading-relaxed max-w-md">
+              {description}
+            </p>
+          )}
+        </div>
+      </SpotlightCard>
+    </div>
+  )
+}
+
+export default DDCardTemplate01