blocks-dusted 0.1.10 → 0.1.12

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"
+}

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

@@ -0,0 +1,123 @@
+'use client'
+
+import React, { useEffect, useRef } from 'react'
+import Image from 'next/image'
+import 'swiper/css'
+
+export interface ProjectSliderImage {
+  id?: string
+  image: string | { url: string; alt?: string }
+  alt?: string
+}
+
+export interface ProjectSliderBlockProps {
+  images?: ProjectSliderImage[]
+  slidesPerView?: number
+  spaceBetween?: number
+  loop?: boolean
+  centeredSlides?: boolean
+}
+
+const fallbackImages: ProjectSliderImage[] = [
+  {
+    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="%23201d2c"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="64" fill="%23a3e635"%3EProject slide%3C/text%3E%3C/svg%3E',
+    alt: 'Project slide'
+  },
+  {
+    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="%23120f1b"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="64" fill="%23c084fc"%3ECase study%3C/text%3E%3C/svg%3E',
+    alt: 'Case study slide'
+  },
+  {
+    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="%230b0b0d"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="64" fill="%23f8fafc"%3EGallery frame%3C/text%3E%3C/svg%3E',
+    alt: 'Gallery frame slide'
+  }
+]
+
+function getImageSrc(image: ProjectSliderImage['image']) {
+  return typeof image === 'string' ? image : image.url
+}
+
+function getImageAlt(image: ProjectSliderImage) {
+  return image.alt || (typeof image.image === 'string' ? 'Project image' : image.image.alt) || 'Project image'
+}
+
+export const DDProjSlider: React.FC<ProjectSliderBlockProps> = ({
+  images = fallbackImages,
+  slidesPerView = 2,
+  spaceBetween = 30,
+  loop = true,
+  centeredSlides = true
+}) => {
+  const swiperRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    let destroyed = false
+    let instance: { destroy: (deleteInstance?: boolean, cleanStyles?: boolean) => void } | null = null
+
+    const init = async () => {
+      if (!swiperRef.current) return
+
+      const { Swiper } = await import('swiper')
+      if (!swiperRef.current || destroyed) return
+
+      instance = new Swiper(swiperRef.current, {
+        slidesPerView,
+        spaceBetween,
+        loop,
+        centeredSlides,
+        watchOverflow: true,
+        breakpoints: {
+          0: {
+            slidesPerView: 1,
+            spaceBetween: 16,
+            centeredSlides: false
+          },
+          768: {
+            slidesPerView,
+            spaceBetween,
+            centeredSlides
+          }
+        }
+      })
+    }
+
+    init()
+
+    return () => {
+      destroyed = true
+      instance?.destroy(true, true)
+    }
+  }, [slidesPerView, spaceBetween, loop, centeredSlides, images.length])
+
+  if (!images.length) return null
+
+  return (
+    <section className="project-slider-block w-full overflow-hidden py-10">
+      <div ref={swiperRef} className="swiper w-full overflow-visible">
+        <div className="swiper-wrapper items-center">
+          {images.map((image, index) => (
+            <div key={image.id || 'slide-' + index} className="swiper-slide !h-auto">
+              <div className="relative aspect-[16/9] w-full overflow-hidden rounded-[2rem] border border-white/10 bg-stone-950 shadow-2xl [corner-shape:squircle]">
+                <Image
+                  src={getImageSrc(image.image)}
+                  alt={getImageAlt(image)}
+                  width={1920}
+                  height={1080}
+                  className="h-full w-full object-cover object-center"
+                  sizes="(max-width: 768px) 92vw, 48vw"
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+

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

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

@@ -0,0 +1,64 @@
+import { Block } from 'payload'
+
+export const DDProjSlider: Block = {
+  slug: 'DD-ProjSlider',
+  interfaceName: 'DDProjSlider',
+  labels: {
+    singular: 'Project Slider Block',
+    plural: 'Project Slider Blocks'
+  },
+  fields: [
+    {
+      name: 'images',
+      type: 'array',
+      label: 'Images',
+      minRows: 1,
+      fields: [
+        {
+          name: 'itemKey',
+          type: 'text',
+          label: 'Image Key',
+          required: true
+        },
+        {
+          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
+    }
+  ]
+}
+
+export default DDProjSlider

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

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