blocks-dusted 0.1.10 → 0.1.11

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

@@ -0,0 +1,141 @@
+'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', 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-lg font-medium text-white', labelClass)}>{skill.label}</div>
+        {skill.showPercentage !== false && (
+          <motion.span
+            className={cn('text-sm font-semibold text-white', 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 overflow-hidden">
+        <motion.div
+          className={cn('progress-bar-fill absolute top-0 left-0 h-full', 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
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

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

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

@@ -0,0 +1,91 @@
+'use client'
+import React from 'react'
+import { DDProjSlider } from '../DD-ProjSlider/Component'
+
+export interface Project2HeaderInfo {
+  label: string
+  value: string
+}
+
+export interface Project2HeaderImage {
+  image: string | { url: string; alt?: string }
+  alt?: string
+  id?: string
+}
+
+export interface Project2HeaderBlockProps {
+  title?: string
+  description?: string
+  projectInfo?: Project2HeaderInfo[]
+  images?: Project2HeaderImage[]
+  slidesPerView?: number
+  spaceBetween?: number
+  loop?: boolean
+  centeredSlides?: boolean
+  showSlider?: boolean
+}
+
+function Project2HeaderBlock({
+  title = 'Media Agency',
+  description = 'We provide digital experience services to startups and small businesses. We help our clients succeed by creating brand identities.',
+  projectInfo = [
+    { label: 'Category', value: 'Marketing' },
+    { label: 'Client', value: 'DustedClient' },
+    { label: 'Start Date', value: '4 July 2021' },
+    { label: 'Designer', value: 'DustedUi' }
+  ],
+  images = [
+    {
+      id: '1',
+      image:
+        'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080"%3E%3Crect width="1920" height="1080" fill="%23ddd"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="64" fill="%23999"%3E1920x1080%3C/text%3E%3C/svg%3E'
+    },
+    {
+      id: '2',
+      image:
+        'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080"%3E%3Crect width="1920" height="1080" fill="%23ddd"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="64" fill="%23999"%3E1920x1080%3C/text%3E%3C/svg%3E'
+    },
+    {
+      id: '3',
+      image:
+        'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080"%3E%3Crect width="1920" height="1080" fill="%23ddd"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="64" fill="%23999"%3E1920x1080%3C/text%3E%3C/svg%3E'
+    }
+  ],
+  slidesPerView = 2,
+  spaceBetween = 30,
+  loop = true,
+  centeredSlides = true,
+  showSlider = true
+}: Project2HeaderBlockProps) {
+  return (
+    <>
+      <section className="container py-12">
+        <h1 className="text-3xl md:text-5xl font-semibold mb-4">{title}</h1>
+        <p className="text-stone-400 mb-8 max-w-3xl">{description}</p>
+        {projectInfo?.length ? (
+          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+            {projectInfo.map((info, index) => (
+              <div key={`${info.label}-${index}`} className="rounded border border-stone-800 p-3">
+                <p className="text-xs uppercase text-stone-400">{info.label}</p>
+                <p className="text-sm text-stone-200">{info.value}</p>
+              </div>
+            ))}
+          </div>
+        ) : null}
+      </section>
+      {showSlider && (
+        <DDProjSlider
+          images={images}
+          slidesPerView={slidesPerView}
+          spaceBetween={spaceBetween}
+          loop={loop}
+          centeredSlides={centeredSlides}
+        />
+      )}
+    </>
+  )
+}
+
+export const DDProjHeader = Project2HeaderBlock
+export default DDProjHeader
+

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

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

@@ -0,0 +1,96 @@
+import { Block } from 'payload'
+
+export const DDProjHeader: Block = {
+  slug: 'DD-ProjHeader',
+  interfaceName: 'DDProjHeader',
+  labels: {
+    singular: 'Project2 Header Block',
+    plural: 'Project2 Header Blocks'
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      label: 'Title',
+      defaultValue: 'OPT Media Agency'
+    },
+    {
+      name: 'description',
+      type: 'textarea',
+      label: 'Description',
+      defaultValue:
+        'We provide digital experience services to startups and small businesses. We help our clients succeed by creating brand identities.'
+    },
+    {
+      name: 'projectInfo',
+      type: 'array',
+      label: 'Project Info',
+      fields: [
+        {
+          name: 'label',
+          type: 'text',
+          label: 'Label',
+          required: true
+        },
+        {
+          name: 'value',
+          type: 'text',
+          label: 'Value',
+          required: true
+        }
+      ]
+    },
+    {
+      name: 'images',
+      type: 'array',
+      label: 'Images',
+      minRows: 1,
+      fields: [
+        {
+          name: 'image',
+          type: 'upload',
+          relationTo: 'media',
+          label: 'Image',
+          required: true
+        },
+        {
+          name: 'alt',
+          type: 'text',
+          label: 'Alt Text'
+        }
+      ]
+    },
+    {
+      name: 'slidesPerView',
+      type: 'number',
+      label: 'Slides Per View',
+      defaultValue: 2
+    },
+    {
+      name: 'spaceBetween',
+      type: 'number',
+      label: 'Space Between Slides',
+      defaultValue: 30
+    },
+    {
+      name: 'loop',
+      type: 'checkbox',
+      label: 'Enable Loop',
+      defaultValue: true
+    },
+    {
+      name: 'centeredSlides',
+      type: 'checkbox',
+      label: 'Center Slides',
+      defaultValue: true
+    },
+    {
+      name: 'showSlider',
+      type: 'checkbox',
+      label: 'Show Slider',
+      defaultValue: true
+    }
+  ]
+}
+
+export default DDProjHeader

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

@@ -0,0 +1,72 @@
+{
+  "type": "block",
+  "name": "DD-ProjHeader",
+  "label": "Project Header",
+  "sourceName": "Project2HeaderBlock",
+  "portableName": "DD-ProjHeader",
+  "slug": "DD-ProjHeader",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/ROUND-TWO-CONVERSION/Project2HeaderBlock",
+    "originalSlug": "project2Header",
+    "originalConfigExport": "Project2HeaderBlock",
+    "originalComponentExport": "Project2HeaderBlock",
+    "originalInterfaceName": "DDProjHeader"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-ProjHeader/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-ProjHeader/config.ts"
+    }
+  ],
+  "dependencies": [],
+  "sharedFiles": [],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDProjHeader in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-ProjHeader in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "manualSteps": [
+    "Register DDProjHeader in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-ProjHeader in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDProjHeader } from '@/blocks/DD-ProjHeader/config' and add DDProjHeader to clear Pages/Posts block arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-ProjHeader 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": "DDProjHeader",
+  "interfaceName": "DDProjHeader"
+}