blocks-dusted 0.1.10 → 0.1.12

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

@@ -1,150 +1,150 @@
-import type { Block } from 'payload'
-
-export const DDProcess: Block = {
-  slug: 'DD-Process',
-  interfaceName: 'DDProcess',
-  labels: {
-    singular: 'Studio Process',
-    plural: 'Studio Process Sections'
-  },
-  fields: [
-    {
-      type: 'tabs',
-      tabs: [
-        {
-          label: 'Header',
-          fields: [
-            {
-              name: 'eyebrow',
-              type: 'text',
-              label: 'Eyebrow Label',
-              defaultValue: 'How We Work'
-            },
-            {
-              name: 'headlineMain',
-              type: 'text',
-              label: 'Headline (Main)',
-              defaultValue: 'A process built for',
-              required: true
-            },
-            {
-              name: 'headlineAccent',
-              type: 'text',
-              label: 'Headline (Accent)',
-              defaultValue: 'real outcomes',
-              required: true
-            },
-            {
-              name: 'description',
-              type: 'textarea',
-              label: 'Description',
-              defaultValue:
-                'We run a tight, transparent process that keeps you informed and involved — without wasting your time.'
-            }
-          ]
-        },
-        {
-          label: 'Steps',
-          fields: [
-            {
-              name: 'steps',
-              type: 'array',
-              label: 'Process Steps',
-              minRows: 1,
-              fields: [
-                {
-                  name: 'iconName',
-                  type: 'text',
-                  label: 'Lucide Icon Name',
-                  required: true,
-                  admin: {
-                    description: 'e.g. Search, Pencil, Hammer, Rocket, CheckCircle'
-                  }
-                },
-                {
-                  name: 'number',
-                  type: 'text',
-                  label: 'Step Number',
-                  admin: {
-                    description: 'e.g. 01, 02'
-                  }
-                },
-                {
-                  name: 'title',
-                  type: 'text',
-                  label: 'Step Title',
-                  required: true
-                },
-                {
-                  name: 'description',
-                  type: 'textarea',
-                  label: 'Description',
-                  required: true
-                },
-                {
-                  name: 'duration',
-                  type: 'text',
-                  label: 'Typical Duration',
-                  admin: {
-                    description: 'e.g. 1–2 weeks, 1 day'
-                  }
-                }
-              ],
-              defaultValue: [
-                {
-                  iconName: 'Search',
-                  number: '01',
-                  title: 'Discover',
-                  description:
-                    'We start with a deep-dive kickoff — understanding your users, your goals, and the constraints we need to design around.',
-                  duration: '1–2 days'
-                },
-                {
-                  iconName: 'PenTool',
-                  number: '02',
-                  title: 'Design',
-                  description:
-                    'Wireframes, flows, and high-fidelity UI. We move fast and keep you in the loop with regular check-ins and async Figma access.',
-                  duration: '1–2 weeks'
-                },
-                {
-                  iconName: 'Code2',
-                  number: '03',
-                  title: 'Build',
-                  description:
-                    'Clean, typed, tested code. We ship in short sprints with daily updates and a staging environment from day one.',
-                  duration: '2–8 weeks'
-                },
-                {
-                  iconName: 'Rocket',
-                  number: '04',
-                  title: 'Launch',
-                  description:
-                    'We handle deployment, monitoring, and handoff documentation so your team is set up for long-term success.',
-                  duration: '2–3 days'
-                }
-              ]
-            }
-          ]
-        },
-        {
-          label: 'Settings',
-          fields: [
-            {
-              name: 'sectionId',
-              type: 'text',
-              label: 'Section ID',
-              defaultValue: 'process'
-            },
-            {
-              name: 'customCSS',
-              type: 'code',
-              label: 'Custom CSS',
-              admin: { language: 'css' }
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}
+import type { Block } from 'payload'
+
+export const DDProcess: Block = {
+  slug: 'DD-Process',
+  interfaceName: 'DDProcess',
+  labels: {
+    singular: 'Studio Process',
+    plural: 'Studio Process Sections'
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Header',
+          fields: [
+            {
+              name: 'eyebrow',
+              type: 'text',
+              label: 'Eyebrow Label',
+              defaultValue: 'How We Work'
+            },
+            {
+              name: 'headlineMain',
+              type: 'text',
+              label: 'Headline (Main)',
+              defaultValue: 'A process built for',
+              required: true
+            },
+            {
+              name: 'headlineAccent',
+              type: 'text',
+              label: 'Headline (Accent)',
+              defaultValue: 'real outcomes',
+              required: true
+            },
+            {
+              name: 'description',
+              type: 'textarea',
+              label: 'Description',
+              defaultValue:
+                'We run a tight, transparent process that keeps you informed and involved — without wasting your time.'
+            }
+          ]
+        },
+        {
+          label: 'Steps',
+          fields: [
+            {
+              name: 'steps',
+              type: 'array',
+              label: 'Process Steps',
+              minRows: 1,
+              fields: [
+                {
+                  name: 'iconName',
+                  type: 'text',
+                  label: 'Lucide Icon Name',
+                  required: true,
+                  admin: {
+                    description: 'e.g. Search, Pencil, Hammer, Rocket, CheckCircle'
+                  }
+                },
+                {
+                  name: 'number',
+                  type: 'text',
+                  label: 'Step Number',
+                  admin: {
+                    description: 'e.g. 01, 02'
+                  }
+                },
+                {
+                  name: 'title',
+                  type: 'text',
+                  label: 'Step Title',
+                  required: true
+                },
+                {
+                  name: 'description',
+                  type: 'textarea',
+                  label: 'Description',
+                  required: true
+                },
+                {
+                  name: 'duration',
+                  type: 'text',
+                  label: 'Typical Duration',
+                  admin: {
+                    description: 'e.g. 1–2 weeks, 1 day'
+                  }
+                }
+              ],
+              defaultValue: [
+                {
+                  iconName: 'Search',
+                  number: '01',
+                  title: 'Discover',
+                  description:
+                    'We start with a deep-dive kickoff — understanding your users, your goals, and the constraints we need to design around.',
+                  duration: '1–2 days'
+                },
+                {
+                  iconName: 'PenTool',
+                  number: '02',
+                  title: 'Design',
+                  description:
+                    'Wireframes, flows, and high-fidelity UI. We move fast and keep you in the loop with regular check-ins and async Figma access.',
+                  duration: '1–2 weeks'
+                },
+                {
+                  iconName: 'Code2',
+                  number: '03',
+                  title: 'Build',
+                  description:
+                    'Clean, typed, tested code. We ship in short sprints with daily updates and a staging environment from day one.',
+                  duration: '2–8 weeks'
+                },
+                {
+                  iconName: 'Rocket',
+                  number: '04',
+                  title: 'Launch',
+                  description:
+                    'We handle deployment, monitoring, and handoff documentation so your team is set up for long-term success.',
+                  duration: '2–3 days'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          label: 'Settings',
+          fields: [
+            {
+              name: 'sectionId',
+              type: 'text',
+              label: 'Section ID',
+              defaultValue: 'process'
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: { language: 'css' }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,156 @@
+'use client'
+
+import React from 'react'
+import { motion, useInView } from 'framer-motion'
+import { cn } from '@/utilities/ui'
+
+export interface SkillItem {
+  label: string
+  percentage: number
+  color?: string
+  showPercentage?: boolean
+  id?: string
+}
+
+export interface ProgressSkillBlockProps {
+  skills?: SkillItem[]
+  containerClass?: string
+  labelClass?: string
+  progressBarClass?: string
+  percentageClass?: string
+  animationDuration?: number
+  animationDelay?: number
+  blockType?: string
+}
+
+export const DDProgress: React.FC<ProgressSkillBlockProps> = ({
+  skills = [],
+  containerClass = '',
+  labelClass = '',
+  progressBarClass = '',
+  percentageClass = '',
+  animationDuration = 1.5,
+  animationDelay = 0.2,
+}) => {
+  if (!skills || skills.length === 0) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        'progress-skill-block w-full space-y-6 py-8',
+        'max-w-7xl mx-auto',
+        containerClass,
+      )}
+    >
+      {skills.map((skill, index) => (
+        <SkillProgressBar
+          key={skill.id || `skill-${index}`}
+          skill={skill}
+          index={index}
+          labelClass={labelClass}
+          progressBarClass={progressBarClass}
+          percentageClass={percentageClass}
+          animationDuration={animationDuration}
+          animationDelay={animationDelay}
+        />
+      ))}
+    </div>
+  )
+}
+
+interface SkillProgressBarProps {
+  skill: SkillItem
+  index: number
+  labelClass: string
+  progressBarClass: string
+  percentageClass: string
+  animationDuration: number
+  animationDelay: number
+}
+
+const SkillProgressBar: React.FC<SkillProgressBarProps> = ({
+  skill,
+  index,
+  labelClass,
+  progressBarClass,
+  percentageClass,
+  animationDuration,
+  animationDelay,
+}) => {
+  const ref = React.useRef(null)
+  const isInView = useInView(ref, { once: false, amount: 0.3 })
+
+  const progressVariants = {
+    hidden: { width: '0%' },
+    visible: {
+      width: `${skill.percentage}%`,
+      transition: {
+        duration: animationDuration,
+        delay: index * animationDelay,
+        ease: [0.25, 0.46, 0.45, 0.94] as [number, number, number, number],
+      },
+    },
+  }
+
+  const percentageVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        duration: 0.3,
+        delay: index * animationDelay + animationDuration * 0.8,
+      },
+    },
+  }
+
+  // Create unique class name from label (slugified)
+  const uniqueClass =
+    skill.id ||
+    skill.label
+      .toLowerCase()
+      .replace(/\s+/g, '-')
+      .replace(/[^a-z0-9-]/g, '')
+
+  return (
+    <div ref={ref} className={cn('skill-item w-full', `skill-${uniqueClass}`)}>
+      {/* Label and Percentage Row */}
+      <div className="flex justify-between items-center mb-1">
+        <div className={cn('text-md font-medium text-stone-700 dark:text-stone-200', labelClass)}>
+          {skill.label}
+        </div>
+        {skill.showPercentage !== false && (
+          <motion.span
+            className={cn(
+              'text-xl font-semibold text-stone-700 dark:text-stone-200',
+              percentageClass,
+            )}
+            variants={percentageVariants}
+            initial="hidden"
+            animate={isInView ? 'visible' : 'hidden'}
+          >
+            {skill.percentage} %
+          </motion.span>
+        )}
+      </div>
+
+      {/* Progress Bar Container */}
+      <div className="progress-bar-container relative w-full h-1.5 bg-zinc-700/50 overflow-hidden">
+        <motion.div
+          className={cn(
+            'progress-bar-fill absolute top-0 left-0 h-full',
+            'bg-indigo-500',
+            progressBarClass,
+          )}
+          style={{
+            backgroundColor: skill.color || '#9ACD32',
+          }}
+          variants={progressVariants}
+          initial="hidden"
+          animate={isInView ? 'visible' : 'hidden'}
+        />
+      </div>
+    </div>
+  )
+}

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

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

@@ -0,0 +1,175 @@
+import type { Block } from 'payload'
+
+export const DDProgress: Block = {
+  slug: 'DD-Progress',
+  interfaceName: 'DDProgress',
+  labels: {
+    singular: 'Progress Skill Block',
+    plural: 'Progress Skill Blocks'
+  },
+  fields: [
+    {
+      name: 'skills',
+      label: 'Skills',
+      type: 'array',
+      required: true,
+      minRows: 1,
+      maxRows: 10,
+      labels: {
+        singular: 'Skill',
+        plural: 'Skills'
+      },
+      fields: [
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'label',
+              type: 'text',
+              required: true,
+              label: 'Skill Label',
+              defaultValue: 'Label',
+              admin: {
+                width: '50%',
+                description: 'Name of the skill (e.g., "Industrial Design", "UI/UX Design")'
+              }
+            },
+            {
+              name: 'percentage',
+              type: 'number',
+              required: true,
+              label: 'Skill Percentage',
+              defaultValue: 75,
+              min: 0,
+              max: 100,
+              admin: {
+                width: '25%',
+                description: 'Skill proficiency percentage (0-100)',
+                step: 1
+              }
+            },
+            {
+              name: 'showPercentage',
+              type: 'checkbox',
+              label: 'Show %',
+              defaultValue: true,
+              admin: {
+                width: '25%',
+                description: 'Display the percentage value'
+              }
+            }
+          ]
+        },
+        {
+          name: 'color',
+          type: 'text',
+          label: 'Progress Bar Color',
+          admin: {
+            description:
+              'Custom color for this skill bar (hex or rgb format only). Example: #9ACD32 or rgb(154, 205, 50)',
+            placeholder: '#9ACD32'
+          }
+        }
+      ]
+    },
+    {
+      type: 'collapsible',
+      label: 'Styling Options',
+      admin: {
+        initCollapsed: true
+      },
+      fields: [
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'containerClass',
+              type: 'text',
+              label: 'Container Classes',
+              admin: {
+                width: '50%',
+                description: 'Additional Tailwind classes for the main container',
+                placeholder: 'py-12 px-4'
+              }
+            },
+            {
+              name: 'labelClass',
+              type: 'text',
+              label: 'Label Classes',
+              admin: {
+                width: '50%',
+                description: 'Additional Tailwind classes for skill labels',
+                placeholder: 'text-xl font-bold'
+              }
+            }
+          ]
+        },
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'progressBarClass',
+              type: 'text',
+              label: 'Progress Bar Classes',
+              admin: {
+                width: '50%',
+                description: 'Additional Tailwind classes for progress bars',
+                placeholder: 'shadow-lg'
+              }
+            },
+            {
+              name: 'percentageClass',
+              type: 'text',
+              label: 'Percentage Classes',
+              admin: {
+                width: '50%',
+                description: 'Additional Tailwind classes for percentage display',
+                placeholder: 'text-lg font-bold'
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      type: 'collapsible',
+      label: 'Animation Settings',
+      admin: {
+        initCollapsed: true
+      },
+      fields: [
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'animationDuration',
+              type: 'number',
+              label: 'Animation Duration (seconds)',
+              defaultValue: 1.5,
+              min: 0.5,
+              max: 5,
+              admin: {
+                width: '50%',
+                description: 'Duration of the progress bar animation',
+                step: 0.1
+              }
+            },
+            {
+              name: 'animationDelay',
+              type: 'number',
+              label: 'Stagger Delay (seconds)',
+              defaultValue: 0.2,
+              min: 0,
+              max: 2,
+              admin: {
+                width: '50%',
+                description: 'Delay between each skill animation',
+                step: 0.1
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}