blocks-dusted 0.1.12 → 0.1.13

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

@@ -75,13 +75,13 @@ export const Counter: React.FC<CounterItem> = ({
   }, [ref, inView, from, to, duration])
 
   return (
-    <div className="counter-wrapper flex items-center justify-center">
+    <div className="counter-wrapper flex min-h-12 items-baseline justify-center gap-1 tabular-nums">
       {prefix && (
         <span className={prefixClass || 'text-xl font-bold sm:text-2xl md:text-4xl'}>{prefix}</span>
       )}
       <span ref={ref} className={className || 'text-xl font-bold sm:text-2xl md:text-4xl'} />
       {suffix && (
-        <span className={suffixClass || 'text-md font-base sm:text-lg md:text-xl ml-2'}>
+        <span className={suffixClass || 'text-base font-medium sm:text-lg md:text-xl'}>
           {suffix}
         </span>
       )}
@@ -166,13 +166,18 @@ export const DDCounter: React.FC<CounterBlockProps> = ({
   }
 
   return (
-    <div className={getLayoutClasses()} id={counterContId}>
+    <div className={`w-full ${getLayoutClasses()}`} id={counterContId}>
       {counters.map((counter) => (
-        <div key={counter.id} className="counter-item" id={counterId}>
+        <div
+          key={counter.id}
+          className="counter-item flex min-h-40 w-full flex-col items-center justify-center gap-3 rounded-2xl border border-border bg-card p-6 text-center shadow-sm"
+          id={counterId}
+        >
           <RichText
             data={counter.beforeCounter}
             enableGutter={false}
-            className="counter_label-before"
+            enableProse={false}
+            className="counter_label-before text-sm font-medium text-muted-foreground [&_*]:m-0 [&_*]:text-current"
           />
 
           <Counter {...counter} />
@@ -181,7 +186,7 @@ export const DDCounter: React.FC<CounterBlockProps> = ({
             data={counter.label}
             enableProse={false}
             enableGutter={false}
-            className="counter_label-after scale-80 origin-top"
+            className="counter_label-after text-sm font-medium text-foreground [&_*]:m-0 [&_*]:text-current"
           />
         </div>
       ))}

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

@@ -0,0 +1,303 @@
+'use client'
+
+import React, { useMemo, useState } from 'react'
+import Image from 'next/image'
+import * as LucideIcons from 'lucide-react'
+import { Truck } from 'lucide-react'
+
+import { cn } from '@/utilities/ui'
+import RichText from '@/components/RichText'
+
+type MediaObj = {
+  url?: string | null
+  alt?: string | null
+}
+
+type IconMedia = MediaObj | string | number | null | undefined
+
+type Badge = {
+  icon?: string | null
+  customIcon?: IconMedia
+  title?: string | null
+  description?: string | null
+}
+
+type Feature = {
+  id?: string | null
+  icon?: string | null
+  customIcon?: IconMedia
+  title?: string | null
+  description?: string | null
+}
+
+type PricingItem = {
+  id?: string | null
+  price?: string | null
+  label?: string | null
+}
+
+export type DDDeliCardProps = {
+  blockType?: 'DD-DeliCard'
+  blockName?: string | null
+  sectionId?: string | null
+  customCSS?: string | null
+  image?: MediaObj | string | null
+  imageAlt?: string | null
+  badge?: Badge | null
+  heading?: string | null
+  description?: any | null
+  features?: Feature[] | null
+  pricingItems?: PricingItem[] | null
+}
+
+function getMediaUrl(media?: IconMedia): string | undefined {
+  if (!media) return undefined
+  if (typeof media === 'string') return media
+  if (typeof media === 'object' && 'url' in media && typeof media.url === 'string') return media.url
+  return undefined
+}
+
+function getMediaAlt(media?: MediaObj | string | null, fallback = ''): string {
+  if (!media || typeof media === 'string') return fallback
+  return media.alt ?? fallback
+}
+
+function IconRenderer({
+  icon,
+  customIcon,
+  className,
+  size = 22,
+}: {
+  icon?: string | null
+  customIcon?: IconMedia
+  className?: string
+  size?: number
+}) {
+  const customIconUrl = getMediaUrl(customIcon)
+
+  if (customIconUrl) {
+    return (
+      <Image
+        src={customIconUrl}
+        alt=""
+        width={size}
+        height={size}
+        className={cn('h-auto w-auto object-contain', className)}
+      />
+    )
+  }
+
+  const Icon = icon
+    ? ((LucideIcons as Record<string, any>)[icon] as
+        | React.ComponentType<{ size?: number; strokeWidth?: number; className?: string }>
+        | undefined)
+    : undefined
+
+  if (Icon) return <Icon size={size} strokeWidth={2.2} className={className} />
+
+  return <Truck size={size} strokeWidth={2.2} className={className} />
+}
+
+export const DDDeliCard: React.FC<DDDeliCardProps> = ({
+  sectionId,
+  customCSS,
+  image,
+  imageAlt,
+  badge,
+  heading = 'Reliable Delivery, Every Time',
+  description,
+  features = [],
+  pricingItems = [],
+}) => {
+  const safeFeatures = useMemo(() => {
+    return features?.filter((feature) => feature?.title) ?? []
+  }, [features])
+
+  const safePricingItems = useMemo(() => {
+    return pricingItems?.filter((item) => item?.price || item?.label) ?? []
+  }, [pricingItems])
+
+  const [activeTab, setActiveTab] = useState(0)
+
+  const activeFeature = safeFeatures[activeTab] ?? safeFeatures[0]
+  const imageUrl = getMediaUrl(image)
+
+  return (
+    <div
+      id={sectionId || undefined}
+      data-block-type="DD-DeliCard"
+      className="delivery-card-block mx-auto w-full max-w-7xl bg-stone-50/50 text-stone-900 dark:bg-stone-950 dark:text-stone-100 rounded-3xl squircle"
+    >
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <div
+        data-container-type={`${sectionId}-container`}
+        className="overflow-hidden rounded-3xl border border-stone-200 dark:border-stone-800 squircle"
+      >
+        <div data-col-type={`${sectionId}-col`} className="grid grid-cols-1 lg:grid-cols-2">
+          <div className="relative min-h-[400px] overflow-hidden">
+            {imageUrl ? (
+              <>
+                <Image
+                  data-image-type={`${sectionId}-img`}
+                  src={imageUrl}
+                  alt={imageAlt || getMediaAlt(image, 'BFS Plastics delivery truck')}
+                  width={900}
+                  height={600}
+                  className="h-full min-h-[400px] w-full object-cover"
+                />
+                <img
+                  data-image-type={`${sectionId}-bgimg`}
+                  src="/assets/svg/lines.svg"
+                  alt=""
+                  aria-hidden="true"
+                  className="pointer-events-none absolute inset-0 h-full min-h-[400px] w-full object-cover"
+                />
+              </>
+            ) : (
+              <div className="flex h-full min-h-[400px] w-full items-center justify-center border border-dashed border-stone-300 dark:border-stone-700 text-sm text-stone-600 dark:text-stone-300">
+                Upload a delivery image
+              </div>
+            )}
+
+            <div className="absolute inset-0 bg-gradient-to-r from-transparent to-stone-950/60 lg:bg-gradient-to-l lg:from-stone-950/60 lg:to-transparent" />
+
+            {(badge?.title || badge?.description) && (
+              <div
+                data-content-type={`${sectionId}-description`}
+                className="absolute bottom-6 left-6 rounded-xl bg-stone-50/95 dark:bg-stone-900/95 px-4 py-3 shadow-lg backdrop-blur-sm"
+              >
+                <div
+                  data-container-type={`${sectionId}-container`}
+                  className="flex items-center gap-2"
+                >
+                  <span className="flex h-8 w-8 items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-950/70">
+                    <IconRenderer
+                      icon={badge?.icon || 'Truck'}
+                      customIcon={badge?.customIcon}
+                      size={18}
+                      className="text-indigo-700 dark:text-indigo-300"
+                    />
+                  </span>
+
+                  <div data-container-type={`${sectionId}-badge-desc`}>
+                    {badge?.title && (
+                      <div className="text-sm font-bold text-stone-900 dark:text-stone-100">
+                        {badge.title}
+                      </div>
+                    )}
+                    {badge?.description && (
+                      <div className="text-xs text-stone-600 dark:text-stone-300">
+                        {badge.description}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div
+            data-container-type={`${sectionId}-heading`}
+            className="flex flex-col justify-center p-6 md:p-10 lg:p-12"
+          >
+            {heading && (
+              <h3 className="mb-0 text-2xl font-bold text-stone-900 dark:text-stone-100 md:text-3xl">
+                {heading}
+              </h3>
+            )}
+
+            {description && (
+              <RichText
+                data-content-type={`${sectionId}-richtext`}
+                data={description}
+                className="mb-8 max-w-none text-base leading-relaxed text-stone-600 dark:text-stone-300"
+                enableGutter={false}
+                enableProse={false}
+              />
+            )}
+
+            {safeFeatures.length > 0 && (
+              <>
+                <div
+                  data-container-type="delivery-location-tags"
+                  className="mb-6 mt-6 flex flex-wrap gap-2"
+                >
+                  {safeFeatures.map((feature, index) => (
+                    <button
+                      key={feature.id || feature.title || index}
+                      type="button"
+                      onClick={() => setActiveTab(index)}
+                      className={cn(
+                        'cursor-pointer whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium transition-all duration-300 hover:duration-300',
+                        activeTab === index
+                          ? 'border border-solid border-indigo-600 bg-indigo-600 text-white dark:border-indigo-400 dark:bg-indigo-500 dark:text-stone-950'
+                          : 'border border-stone-200 bg-stone-100 text-stone-700 hover:bg-stone-200 hover:text-stone-950 dark:border-stone-700 dark:bg-stone-900 dark:text-stone-300 dark:hover:bg-stone-800 dark:hover:text-stone-100',
+                      )}
+                    >
+                      {feature.title}
+                    </button>
+                  ))}
+                </div>
+
+                {activeFeature && (
+                  <div className="rounded-xl border border-stone-200 bg-stone-50 dark:border-stone-800 dark:bg-stone-900/80 p-5 md:p-6">
+                    <div className="flex items-start gap-4">
+                      <span className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-indigo-100 dark:bg-indigo-950/70">
+                        <IconRenderer
+                          icon={activeFeature.icon || 'MapPin'}
+                          customIcon={activeFeature.customIcon}
+                          size={20}
+                          className="text-indigo-700 dark:text-indigo-300"
+                        />
+                      </span>
+
+                      <div>
+                        {activeFeature.title && (
+                          <h4 className="mb-1 text-lg font-bold text-foreground">
+                            {activeFeature.title}
+                          </h4>
+                        )}
+
+                        {activeFeature.description && (
+                          <p className="text-sm leading-relaxed text-stone-600 dark:text-stone-300">
+                            {activeFeature.description}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </>
+            )}
+
+            {safePricingItems.length > 0 && (
+              <div className="mt-6 grid grid-cols-1 gap-3 sm:grid-cols-3">
+                {safePricingItems.map((item, index) => (
+                  <div
+                    key={item.id || item.price || index}
+                    className="rounded-xl border border-stone-200 bg-stone-50 dark:border-stone-800 dark:bg-stone-900/80 p-3 text-center"
+                  >
+                    {item.price && (
+                      <div className="text-lg font-bold text-indigo-700 dark:text-indigo-300">
+                        {item.price}
+                      </div>
+                    )}
+
+                    {item.label && (
+                      <div className="mt-0.5 text-xs text-stone-600 dark:text-stone-300">
+                        {item.label}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DDDeliCard

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

@@ -0,0 +1,186 @@
+import type { Block } from 'payload'
+
+/**
+ * Author: Hadi Zainal | Designs Dusted
+ * Delivery Card Block - version 1.0 BFS variant
+ * Main delivery/freight card with editable image, badge, tabbed features,
+ * pricing summary, lucide icon picker defaults, and uploaded custom icon overrides.
+ */
+
+import { iconPicker } from '@/fields/lucide-icon-picker/field'
+import { defaultLexical } from '@/fields/defaultLexical'
+
+const iconFields = [
+  iconPicker({
+    name: 'icon',
+    description: 'Choose a Lucide icon. Overridden by custom icon upload if provided.',
+  }),
+  {
+    name: 'customIcon',
+    type: 'upload' as const,
+    relationTo: 'media' as const,
+    required: false,
+    label: 'Custom Icon (overrides Lucide)',
+    admin: {
+      description: 'Upload a custom icon image. If set, this takes priority over the Lucide icon.',
+    },
+  },
+]
+
+export const DDDeliCard: Block = {
+  slug: 'DD-DeliCard',
+  dbName: 'dd_deli_card',
+  interfaceName: 'DDDeliCard',
+  labels: {
+    singular: 'DD Deli Card',
+    plural: 'DD Deli Cards',
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Content',
+          fields: [
+            {
+              name: 'image',
+              type: 'upload',
+              relationTo: 'media',
+              required: false,
+              label: 'Delivery Image',
+            },
+            {
+              name: 'imageAlt',
+              type: 'text',
+              label: 'Image Alt Text',
+              defaultValue: 'BFS Plastics delivery truck',
+            },
+            {
+              name: 'badge',
+              type: 'group',
+              label: 'Floating Badge',
+              fields: [
+                ...iconFields,
+                {
+                  name: 'title',
+                  type: 'text',
+                  defaultValue: 'Australia-wide',
+                },
+                {
+                  name: 'description',
+                  type: 'text',
+                  defaultValue: 'Delivery coverage',
+                },
+              ],
+            },
+            {
+              name: 'heading',
+              type: 'text',
+              defaultValue: 'Reliable Delivery, Every Time',
+            },
+            {
+              name: 'description',
+              type: 'richText',
+              label: 'Description',
+              editor: defaultLexical,
+              required: false,
+            },
+            {
+              name: 'features',
+              type: 'array',
+              label: 'Delivery Features',
+              minRows: 1,
+              defaultValue: [
+                {
+                  icon: 'MapPin',
+                  title: 'Brisbane Metro',
+                  description:
+                    'From $35 + GST across all Brisbane metro areas. Fast, reliable local delivery.',
+                },
+                {
+                  icon: 'Sun',
+                  title: 'Gold & Sunshine Coast',
+                  description:
+                    'From $40 + GST covering Sunshine Coast and Gold Coast regional areas.',
+                },
+                {
+                  icon: 'Map',
+                  title: 'Interstate Freight',
+                  description:
+                    'Interstate charges quoted as per request. We ship Australia-wide with trusted freight partners.',
+                },
+              ],
+              fields: [
+                ...iconFields,
+                {
+                  name: 'title',
+                  type: 'text',
+                  required: true,
+                },
+                {
+                  name: 'description',
+                  type: 'textarea',
+                },
+              ],
+            },
+            {
+              name: 'pricingItems',
+              type: 'array',
+              label: 'Pricing Summary',
+              minRows: 1,
+              defaultValue: [
+                {
+                  price: '$35',
+                  label: 'Brisbane Metro',
+                },
+                {
+                  price: '$40',
+                  label: 'Coast Regions',
+                },
+                {
+                  price: 'Quote',
+                  label: 'Interstate',
+                },
+              ],
+              fields: [
+                {
+                  name: 'price',
+                  type: 'text',
+                  required: true,
+                },
+                {
+                  name: 'label',
+                  type: 'text',
+                  required: true,
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: 'Settings',
+          fields: [
+            {
+              name: 'sectionId',
+              type: 'text',
+              label: 'Section ID',
+              admin: {
+                description: 'Optional ID for anchor linking',
+              },
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: {
+                language: 'css',
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}
+
+export default DDDeliCard

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

@@ -0,0 +1,94 @@
+{
+  "type": "block",
+  "name": "DD-DeliCard",
+  "label": "Delivery Card",
+  "sourceName": "DD-DeliCard",
+  "portableName": "DD-DeliCard",
+  "slug": "DD-DeliCard",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/Dusted-Payload-Blocks",
+    "originalPath": "CLI-TestGround/dusted-blocks-demo/src/blocks/DD-DeliCard",
+    "originalSlug": "DD-DeliCard",
+    "originalConfigExport": "DDDeliCard",
+    "originalComponentExport": "DDDeliCard",
+    "originalInterfaceName": "DDDeliCard"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-DeliCard/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-DeliCard/config.ts"
+    }
+  ],
+  "dependencies": [
+    "lucide-react"
+  ],
+  "sharedFiles": [],
+  "requiredProjectFiles": [
+    {
+      "path": "src/fields/defaultLexical.ts",
+      "reason": "Payload config uses the project Lexical editor configuration."
+    },
+    {
+      "path": "src/fields/lucide-icon-picker/field.ts",
+      "reason": "Payload config uses the Lucide icon picker field."
+    },
+    {
+      "path": "src/components/RichText/index.tsx",
+      "reason": "Component renders Payload rich text."
+    },
+    {
+      "path": "src/utilities/ui.ts",
+      "reason": "Component imports cn from @/utilities/ui."
+    }
+  ],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDDeliCard in Pages/Posts block arrays if automatic registration was skipped.",
+    "Register DD-DeliCard in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "manualSteps": [
+    "Register DDDeliCard in Pages/Posts block arrays if automatic registration was skipped.",
+    "Register DD-DeliCard in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can register DDDeliCard from @/blocks/DD-DeliCard/config."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-DeliCard with component export DDDeliCard."
+    }
+  },
+  "notes": [
+    "Promoted from the verified Dusted Blocks demo implementation.",
+    "Installer preserves existing destination files and reports project requirements before writing."
+  ],
+  "exportName": "DDDeliCard",
+  "componentExportName": "DDDeliCard",
+  "interfaceName": "DDDeliCard"
+}