blocks-dusted 0.1.10 → 0.1.12

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

@@ -24,7 +24,7 @@ export const DDContact: Block = {
               name: 'headlineMain',
               type: 'text',
               label: 'Headline (Main)',
-              required: true,
+              required: true,
               defaultValue: "Let's build"
             },
             {
@@ -118,27 +118,27 @@ export const DDContact: Block = {
             }
           ]
         },
-        {
-          label: 'Form',
-          fields: [
-            // Reconnect option:
-            // If the target project has Payload Form Builder enabled with a forms
-            // collection, uncomment this relationship field. Without it, the block
-            // renders as a standalone contact composition and does not submit to Payload.
-            // {
-            //   name: 'form',
-            //   type: 'relationship',
-            //   relationTo: 'forms',
-            //   label: 'Payload Form',
-            //   required: false,
-            //   admin: {
-            //     description:
-            //       'Select the Payload Form Builder form used to store Studio Contact submissions.'
-            //   }
-            // },
-            {
-              name: 'serviceOptions',
-              type: 'array',
+        {
+          label: 'Form',
+          fields: [
+            // Reconnect option:
+            // If the target project has Payload Form Builder enabled with a forms
+            // collection, uncomment this relationship field. Without it, the block
+            // renders as a standalone contact composition and does not submit to Payload.
+            // {
+            //   name: 'form',
+            //   type: 'relationship',
+            //   relationTo: 'forms',
+            //   label: 'Payload Form',
+            //   required: false,
+            //   admin: {
+            //     description:
+            //       'Select the Payload Form Builder form used to store Studio Contact submissions.'
+            //   }
+            // },
+            {
+              name: 'serviceOptions',
+              type: 'array',
               label: 'Service Options',
               fields: [
                 {

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

@@ -0,0 +1,190 @@
+'use client'
+
+import React from 'react'
+import { animate, useInView, useIsomorphicLayoutEffect } from 'framer-motion'
+import RichText from '@/components/RichText'
+
+export interface CounterItem {
+  id: string
+  from?: number
+  to: number
+  duration?: number
+  className?: string
+  counterContId?: string
+  counterId?: string
+  prefix?: string
+  suffix?: string
+  prefixClass?: string
+  suffixClass?: string
+  beforeCounter?: any // Rich text content before counter
+  label?: any // Rich text content after counter
+}
+
+export interface CounterBlockProps {
+  counters: CounterItem[]
+  containerClass?: string
+  counterContId?: string
+  counterId?: string
+  // Layout props
+  layoutType?: 'flex' | 'grid' | 'block'
+  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse'
+  justifyContent?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
+  alignItems?: 'stretch' | 'start' | 'center' | 'end' | 'baseline'
+  gap?: '0' | '4' | '6' | '8' | '12'
+  gridColumns?: '1' | '2' | '3' | '4' | '6' | 'auto-fit' | 'auto-fill'
+}
+
+export const Counter: React.FC<CounterItem> = ({
+  from = 0,
+  to,
+  duration,
+  className,
+  prefix,
+  suffix,
+  prefixClass,
+  suffixClass,
+}) => {
+  const ref = React.useRef<HTMLSpanElement>(null)
+  const inView = useInView(ref, { once: false })
+
+  useIsomorphicLayoutEffect(() => {
+    const element = ref.current
+    if (!element) return
+    if (!inView) return
+
+    element.textContent = String(from)
+
+    if (window.matchMedia('(prefers-reduced-motion)').matches) {
+      element.textContent = String(to)
+      return
+    }
+
+    const controls = animate(from, to, {
+      duration,
+      ease: 'easeOut',
+      onUpdate(value) {
+        if (element && typeof value === 'number') {
+          element.textContent = value.toFixed(0)
+        }
+      },
+    })
+
+    return () => {
+      controls.stop()
+    }
+  }, [ref, inView, from, to, duration])
+
+  return (
+    <div className="counter-wrapper flex items-center justify-center">
+      {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'}>
+          {suffix}
+        </span>
+      )}
+    </div>
+  )
+}
+
+export const DDCounter: React.FC<CounterBlockProps> = ({
+  counters,
+  containerClass,
+  counterContId,
+  counterId,
+  layoutType = 'flex',
+  flexDirection = 'row',
+  justifyContent = 'center',
+  alignItems = 'center',
+  gap = '6',
+  gridColumns = '2',
+}) => {
+  // Generate layout classes based on configuration
+  const getLayoutClasses = () => {
+    // If custom containerClass is provided, use it
+    if (containerClass) return containerClass
+
+    const classes: string[] = []
+
+    // Base layout type
+    if (layoutType === 'flex') {
+      classes.push('flex')
+
+      // Flex direction
+      const flexDirMap = {
+        row: 'flex-row',
+        column: 'flex-col',
+        'row-reverse': 'flex-row-reverse',
+        'column-reverse': 'flex-col-reverse',
+      }
+      classes.push(flexDirMap[flexDirection])
+
+      // Add flex-wrap for responsive behavior
+      classes.push('flex-wrap')
+
+      // Justify content
+      const justifyMap = {
+        start: 'justify-start',
+        center: 'justify-center',
+        end: 'justify-end',
+        between: 'justify-between',
+        around: 'justify-around',
+        evenly: 'justify-evenly',
+      }
+      classes.push(justifyMap[justifyContent])
+
+      // Align items
+      const alignMap = {
+        stretch: 'items-stretch',
+        start: 'items-start',
+        center: 'items-center',
+        end: 'items-end',
+        baseline: 'items-baseline',
+      }
+      classes.push(alignMap[alignItems])
+    } else if (layoutType === 'grid') {
+      classes.push('grid')
+
+      // Grid columns
+      if (gridColumns === 'auto-fit') {
+        classes.push('grid-cols-[repeat(auto-fit,minmax(200px,1fr))]')
+      } else if (gridColumns === 'auto-fill') {
+        classes.push('grid-cols-[repeat(auto-fill,minmax(200px,1fr))]')
+      } else {
+        classes.push(`grid-cols-${gridColumns}`)
+      }
+    }
+
+    // Gap (works for both flex and grid)
+    if (layoutType === 'flex' || layoutType === 'grid') {
+      classes.push(`gap-${gap}`)
+    }
+
+    return classes.join(' ')
+  }
+
+  return (
+    <div className={getLayoutClasses()} id={counterContId}>
+      {counters.map((counter) => (
+        <div key={counter.id} className="counter-item" id={counterId}>
+          <RichText
+            data={counter.beforeCounter}
+            enableGutter={false}
+            className="counter_label-before"
+          />
+
+          <Counter {...counter} />
+
+          <RichText
+            data={counter.label}
+            enableProse={false}
+            enableGutter={false}
+            className="counter_label-after scale-80 origin-top"
+          />
+        </div>
+      ))}
+    </div>
+  )
+}

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

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

@@ -0,0 +1,291 @@
+import type { Block } from 'payload'
+
+import { BlocksFeature } from '@payloadcms/richtext-lexical'
+import { DDIcon } from '@/blocks/DD-Icon/config'
+import { defaultLexical } from '@/fields/defaultLexical'
+
+export const DDCounter: Block = {
+  slug: 'DD-Counter',
+  interfaceName: 'DDCounter',
+  labels: {
+    singular: 'Counter',
+    plural: 'Counters'
+  },
+  // Add flex or grid classes to the container
+  fields: [
+    // Layout Configuration
+    {
+      admin: {
+        initCollapsed: true,
+        className: 'layout-configuration custom-css-class'
+      },
+      type: 'collapsible',
+      label: 'Container Layout Configuration',
+      fields: [
+        {
+          name: 'layoutType',
+          label: 'Layout Type',
+          type: 'select',
+          defaultValue: 'flex',
+          options: [
+            {
+              label: 'Flexbox',
+              value: 'flex'
+            },
+            {
+              label: 'Grid',
+              value: 'grid'
+            },
+            {
+              label: 'Block (Default)',
+              value: 'block'
+            }
+          ],
+          required: true
+        },
+        // Flex-specific options
+        {
+          name: 'flexDirection',
+          label: 'Flex Direction',
+          type: 'select',
+          defaultValue: 'row',
+          options: [
+            { label: 'Row (Horizontal)', value: 'row' },
+            { label: 'Column (Vertical)', value: 'column' },
+            { label: 'Row Reverse', value: 'row-reverse' },
+            { label: 'Column Reverse', value: 'column-reverse' }
+          ],
+          admin: {
+            condition: (data, siblingData) => siblingData?.layoutType === 'flex'
+          }
+        },
+        {
+          name: 'justifyContent',
+          label: 'Justify Content',
+          type: 'select',
+          defaultValue: 'center',
+          options: [
+            { label: 'Start', value: 'start' },
+            { label: 'Center', value: 'center' },
+            { label: 'End', value: 'end' },
+            { label: 'Space Between', value: 'between' },
+            { label: 'Space Around', value: 'around' },
+            { label: 'Space Evenly', value: 'evenly' }
+          ],
+          admin: {
+            condition: (data, siblingData) => siblingData?.layoutType === 'flex'
+          }
+        },
+        {
+          name: 'alignItems',
+          label: 'Align Items',
+          type: 'select',
+          defaultValue: 'center',
+          options: [
+            { label: 'Stretch', value: 'stretch' },
+            { label: 'Start', value: 'start' },
+            { label: 'Center', value: 'center' },
+            { label: 'End', value: 'end' },
+            { label: 'Baseline', value: 'baseline' }
+          ],
+          admin: {
+            condition: (data, siblingData) => siblingData?.layoutType === 'flex'
+          }
+        },
+        {
+          name: 'gap',
+          label: 'Gap',
+          type: 'select',
+          defaultValue: '6',
+          options: [
+            { label: 'None', value: '0' },
+            { label: 'Small (1rem)', value: '4' },
+            { label: 'Medium (1.5rem)', value: '6' },
+            { label: 'Large (2rem)', value: '8' },
+            { label: 'Extra Large (3rem)', value: '12' }
+          ],
+          admin: {
+            condition: (data, siblingData) =>
+              siblingData?.layoutType === 'flex' || siblingData?.layoutType === 'grid'
+          }
+        },
+        // Grid-specific options
+        {
+          name: 'gridColumns',
+          label: 'Grid Columns',
+          type: 'select',
+          defaultValue: '2',
+          options: [
+            { label: '1 Column', value: '1' },
+            { label: '2 Columns', value: '2' },
+            { label: '3 Columns', value: '3' },
+            { label: '4 Columns', value: '4' },
+            { label: '6 Columns', value: '6' },
+            { label: 'Auto Fit', value: 'auto-fit' },
+            { label: 'Auto Fill', value: 'auto-fill' }
+          ],
+          admin: {
+            condition: (data, siblingData) => siblingData?.layoutType === 'grid'
+          }
+        },
+        {
+          name: 'containerClass',
+          label: 'Container CSS Classes',
+          type: 'text',
+          required: false,
+          admin: {
+            description:
+              'Custom CSS classes for the counter container. Leave empty to use layout-generated classes.',
+            placeholder: 'flex flex-wrap gap-6 justify-center items-center'
+          }
+        }
+      ]
+    },
+    {
+      name: 'counters',
+      type: 'array',
+      label: 'Counters',
+      minRows: 1,
+      fields: [
+        {
+          name: 'counterContId',
+          type: 'text',
+          label: 'Counter ID',
+          hidden: false,
+          required: false,
+          admin: {
+            description: 'Unique ID for the counter',
+            width: '50%'
+          }
+        },
+        {
+          name: 'from',
+          label: 'From',
+          type: 'number',
+          required: true,
+          admin: {
+            description: 'Starting number for the counter',
+            width: '50%'
+          }
+        },
+        {
+          name: 'to',
+          label: 'To',
+          type: 'number',
+          required: true,
+          admin: {
+            description: 'End number for the counter',
+            width: '50%'
+          }
+        },
+        {
+          name: 'duration',
+          label: 'Animation Duration (seconds)',
+          type: 'number',
+          required: false,
+          defaultValue: 3,
+          admin: {
+            description: 'Duration of the animation in seconds'
+          }
+        },
+        {
+          name: 'className',
+          label: 'Counter Text Class',
+          type: 'text',
+          required: false,
+          admin: {
+            description:
+              'Custom CSS classes for the counter number. Default: "text-xl font-bold sm:text-2xl md:text-3xl"',
+            placeholder: 'text-2xl font-extrabold text-blue-500'
+          }
+        },
+        {
+          name: 'beforeCounter',
+          label: 'Before Counter Text',
+          type: 'richText',
+          editor: defaultLexical,
+          required: false,
+          admin: {
+            description: 'Rich text content that appears before the counter'
+          }
+        },
+        {
+          name: 'label',
+          label: 'Counter Label',
+          type: 'richText',
+          editor: defaultLexical,
+          required: false,
+          admin: {
+            description: 'Rich text label that appears below the counter'
+          }
+        },
+        {
+          admin: {
+            initCollapsed: true
+          },
+          type: 'collapsible',
+          label: 'Prefix & Suffix',
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'prefix',
+                  label: 'Prefix Text/Symbol',
+                  type: 'text',
+                  required: false,
+                  admin: {
+                    description: 'Text or symbol to show before the counter (e.g., "$", "+", "≈")',
+                    placeholder: '$',
+                    width: '50%'
+                  }
+                },
+                {
+                  name: 'suffix',
+                  label: 'Suffix Text/Symbol',
+                  type: 'text',
+                  required: false,
+                  admin: {
+                    description:
+                      'Text or symbol to show after the counter (e.g., "%", "+", "K", "M")',
+                    placeholder: '%',
+                    width: '50%'
+                  }
+                }
+              ]
+            },
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'prefixClass',
+                  label: 'Prefix CSS Classes',
+                  type: 'text',
+                  required: false,
+                  admin: {
+                    description:
+                      'Custom CSS classes for the prefix. Uses counter class as default.',
+                    placeholder: 'text-lg text-green-500',
+                    width: '50%'
+                  }
+                },
+                {
+                  name: 'suffixClass',
+                  label: 'Suffix CSS Classes',
+                  type: 'text',
+                  required: false,
+                  admin: {
+                    description:
+                      'Custom CSS classes for the suffix. Uses counter class as default.',
+                    placeholder: 'text-lg text-blue-500',
+                    width: '50%'
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

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

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

@@ -0,0 +1,8 @@
+import React from 'react'
+
+type Props = { css?: string | null; customCSS?: string | null }
+export const DDCustomCSS: React.FC<Props> = ({ css, customCSS }) => {
+  const value = css || customCSS
+  return value ? <style dangerouslySetInnerHTML={{ __html: value }} /> : null
+}
+export default DDCustomCSS

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

@@ -0,0 +1,4 @@
+# DD-CustomCSS
+
+Portable first-pass conversion of `CustomCssBlock` 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-CustomCSS/addToLayout.md

@@ -0,0 +1,5 @@
+// TODO: Add this to root layout when ready
+
+<!-- {customCSS && (
+  <style dangerouslySetInnerHTML={{ __html: customCSS }} />
+)} -->

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

@@ -0,0 +1,22 @@
+//src/blocks/DDCustomCSS/config.ts
+
+import { Block } from 'payload'
+
+export const DDCustomCSS: Block = {
+  slug: 'DD-CustomCSS',
+  interfaceName: 'DDCustomCSS',
+  labels: {
+    singular: 'Custom CSS',
+    plural: 'Custom CSS Blocks',
+  },
+  fields: [
+    {
+      name: 'css',
+      type: 'code',
+      admin: {
+        language: 'css',
+        description: 'Write custom CSS to override styles on production application.',
+      },
+    },
+  ],
+}