blocks-dusted 0.1.9 → 0.1.11

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

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

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

@@ -0,0 +1,256 @@
+'use client'
+
+import React, { useRef } from 'react'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { Navigation } from 'swiper/modules'
+import type { Swiper as SwiperInstance } from 'swiper'
+import { cn } from '@/utilities/ui'
+import { Media } from '@/components/Media'
+import RichText from '@/components/RichText'
+import type { Testimonial } from '@/payload-types'
+import 'swiper/css'
+import 'swiper/css/navigation'
+
+export interface Testimonial2BlockProps {
+  awardsTitle?: string
+  testimonialsTitle?: string
+  features?: Array<{
+    title: string
+    company?: string
+    year?: string
+    category?: string
+    link?: string
+    id?: string
+  }>
+  testimonials?: Array<Testimonial | string | number>
+  containerClass?: string
+}
+
+export const DDTestim2: React.FC<Testimonial2BlockProps> = ({
+  awardsTitle = '',
+  testimonialsTitle = '',
+  features = [],
+  testimonials = [],
+  containerClass = ''
+}) => {
+  // Filter and type-guard testimonials
+  const validTestimonials = testimonials?.filter(
+    (t): t is Testimonial => typeof t === 'object' && t !== null
+  )
+
+  const prevButtonRef = useRef(null)
+  const nextButtonRef = useRef(null)
+  const swiperRef = useRef<SwiperInstance | null>(null)
+
+  const swiperOptions = {
+    spaceBetween: 30,
+    slidesPerView: 1,
+    loop: true,
+    modules: [Navigation],
+    navigation: {
+      prevEl: '.custom-swiper-button-prev',
+      nextEl: '.custom-swiper-button-next'
+    },
+    onSwiper: (swiper: SwiperInstance) => {
+      swiperRef.current = swiper
+    }
+  }
+
+  return (
+    <section
+      className={cn(
+        'half-block sub-bg max-w-none mx-0 md:mx-auto prose md:prose-md dark:prose-invert m-0 p-[15px]',
+        containerClass
+      )}
+      id="testimonial2-block"
+    >
+      <div className="w-full max-w-[1500px] mx-auto px-4">
+        <div className="w-full flex flex-wrap lg:flex-nowrap px-0">
+          {/* Awards Section */}
+          {features && features.length > 0 && (
+            <div className="w-full lg:w-1/2 pt-10 pb-10 pl-10 md:pt-[30px] md:pb-[30px] md:pl-5">
+              <div className="mr-0 md:mr-5">
+                <div className="mb-20">
+                  <h3 className="uppercase tracking-[1px]">{awardsTitle}</h3>
+                </div>
+                <div className="flex flex-wrap -mx-[15px] py-[25px] px-[15px] border-b border-white/50">
+                  <div className="w-full md:w-[58.333333%] px-[15px]">
+                    <div className="p-0">
+                      <h6 className="text-sm uppercase tracking-[2px]">Featured Projects</h6>
+                    </div>
+                  </div>
+                  <div className="w-full md:w-[25%] px-[15px]">
+                    <div className="p-0">
+                      <h6 className="text-sm uppercase tracking-[2px]">Category</h6>
+                    </div>
+                  </div>
+                </div>
+
+                {features.map((feature, index) => (
+                  <div
+                    key={feature.id || index}
+                    className="group flex flex-wrap -mx-[15px] py-[25px] px-[15px] border-b border-white/[0.08] relative transition-all duration-400 z-[3] hover:after:h-full after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-0 after:bg-[#fdfdfd29] after:transition-all after:duration-400 after:z-[-1]"
+                  >
+                    <div className="w-full md:w-[58.333333%] px-[15px]">
+                      <div className="p-0 flex justify-start">
+                        <h6 className="text-stone-200 dark:text-stone-200 transition-all duration-400 dark:group-hover:text-white light:group-hover:text-[#0c0c0c]">
+                          {feature.title}
+                          {feature.title.length < 25 && <br />}
+                          <span className="text-sm opacity-70 ml-[15px]">
+                            {feature.company} <span>{feature.year}</span>
+                          </span>
+                        </h6>
+                      </div>
+                    </div>
+                    <div className="w-full flex md:w-[25%] px-[15px]">
+                      <div className="p-0 flex justify-end mr-1 scale-90 origin-right">
+                        <h6 className="text-stone-200 dark:text-stone-200 transition-all duration-400">
+                          {feature.category}
+                        </h6>
+                        <a href={feature.link} className="ml-2 mt-2 inline-block scale-110">
+                          <svg
+                            width="18"
+                            height="18"
+                            viewBox="0 0 18 18"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                            className="transition-transform duration-300 ease-in-out group-hover:translate-x-[3px] group-hover:-translate-y-[3px]"
+                          >
+                            <path
+                              d="M13.922 4.5V11.8125C13.922 11.9244 13.8776 12.0317 13.7985 12.1108C13.7193 12.1899 13.612 12.2344 13.5002 12.2344C13.3883 12.2344 13.281 12.1899 13.2018 12.1108C13.1227 12.0317 13.0783 11.9244 13.0783 11.8125V5.51953L4.79547 13.7953C4.71715 13.8736 4.61092 13.9176 4.50015 13.9176C4.38939 13.9176 4.28316 13.8736 4.20484 13.7953C4.12652 13.717 4.08252 13.6108 4.08252 13.5C4.08252 13.3892 4.12652 13.283 4.20484 13.2047L12.4806 4.92188H6.18765C6.07577 4.92188 5.96846 4.87743 5.88934 4.79831C5.81023 4.71919 5.76578 4.61189 5.76578 4.5C5.76578 4.38811 5.81023 4.28081 5.88934 4.20169C5.96846 4.12257 6.07577 4.07813 6.18765 4.07812H13.5002C13.612 4.07813 13.7193 4.12257 13.7985 4.20169C13.8776 4.28081 13.922 4.38811 13.922 4.5Z"
+                              fill="currentColor"
+                            ></path>
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    {/* <div className="w-full md:w-[16.666667%] px-[15px]"></div> */}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Testimonials Section */}
+          {validTestimonials && validTestimonials.length > 0 && (
+            <div className="w-full lg:w-1/2 pr-0 mr-0">
+              <div className="testim-crev">
+                <div className="p-4 my-4">
+                  <h3 className="uppercase tracking-[1px]">{testimonialsTitle}</h3>
+                </div>
+                <div className="testim-swiper bg-lines pb-16 px-0 -ml-1 rounded-3xl">
+                  <Swiper
+                    id="content-carousel-container-unq-testim"
+                    className="swiper-container"
+                    {...swiperOptions}
+                  >
+                    {validTestimonials.map((testimonial, index) => (
+                      <SwiperSlide
+                        key={testimonial.id || index}
+                        style={{ left: '20px', marginRight: '50px' }}
+                      >
+                        <div className="container item sub-background border-t border-l border-b mb-4 -ml-4 pt-12 pb-10 px-10 rounded-[40px_0px_0px_40px] relative md:pt-[30px] md:pb-0 md:px-5">
+                          <div className="w-full">
+                            <div className="flex items-center">
+                              <div className="ml-auto">
+                                <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  width="256.721"
+                                  height="208.227"
+                                  viewBox="0 0 256.721 208.227"
+                                  className="w-[100px] h-20 mb-10 scale-[4] opacity-10 mr-44 md:w-[110px] md:h-[110px] md:pt-4 md:-mb-16"
+                                >
+                                  <path
+                                    d="M-23.723-530.169v97.327H-121.05v-68.7q0-40.076,13.359-73.472T-62.845-639.9l36.259,28.625Q-63.8-570.244-68.57-530.169Zm158.395,0v97.327H37.345v-68.7q0-40.076,13.359-73.472T95.55-639.9l36.259,28.625Q94.6-570.244,89.825-530.169Z"
+                                    transform="translate(121.55 640.568)"
+                                    fill="none"
+                                    stroke="#fff"
+                                    strokeWidth="1"
+                                    opacity="0.322"
+                                  ></path>
+                                </svg>
+                              </div>
+                            </div>
+                            <div className="text">
+                              {testimonial.content && (
+                                <RichText
+                                  data={testimonial.content}
+                                  enableGutter={false}
+                                  className=" text-stone-200 dark:text-stone-200"
+                                />
+                              )}
+                            </div>
+                            <div className="flex items-center mt-10 md:-ml-5">
+                              <div className="relative p-5 rounded-[0_30px_0_0] w-20 h-20 overflow-hidden md:mb-0 md:p-0 md:flex md:w-auto">
+                                <div className="w-full h-full rounded-full overflow-hidden invert-[0.8] dark:invert-[0] object-cover">
+                                  {testimonial.companyLogo &&
+                                  typeof testimonial.companyLogo === 'object' ? (
+                                    <Media
+                                      resource={testimonial.companyLogo}
+                                      imgClassName="object-cover"
+                                    />
+                                  ) : (
+                                    <svg
+                                      className="w-full h-full opacity-20"
+                                      viewBox="0 0 24 24"
+                                      fill="none"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"
+                                        fill="currentColor"
+                                      />
+                                    </svg>
+                                  )}
+                                </div>
+                              </div>
+                              <div className="text-left ml-[30px] md:ml-0 md:mt-0 md:max-w-[55vw]">
+                                {testimonial.clientName && (
+                                  <RichText
+                                    data={testimonial.clientName}
+                                    enableGutter={false}
+                                    className=" text-stone-200 dark:text-stone-200"
+                                  />
+                                )}
+                                {testimonial.company && (
+                                  <div
+                                    className="text-alt scale-95 origin-top-left opacity-100"
+                                    style={{ maxWidth: '280px', marginTop: '-8px' }}
+                                  >
+                                    <RichText
+                                      data={testimonial.company}
+                                      enableGutter={false}
+                                      className="text-sm"
+                                    />
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </SwiperSlide>
+                    ))}
+                  </Swiper>
+
+                  {/* Navigation Buttons */}
+                  <div className="flex gap-12 justify-start mt-8 ml-8">
+                    <div
+                      ref={prevButtonRef}
+                      className="swiper-button-prev custom-swiper-button-prev relative w-[20px] h-[20px] rounded-full flex items-center justify-center cursor-pointer transition-all duration-300 bg-transparent hover:border-white/50 hover:bg-white/5 disabled:opacity-30 disabled:cursor-not-allowed"
+                    ></div>
+                    <div
+                      ref={nextButtonRef}
+                      className="swiper-button-next custom-swiper-button-next relative w-[20px] h-[20px] rounded-full flex items-center justify-center cursor-pointer transition-all duration-300 bg-transparent hover:border-white/50 hover:bg-white/5 disabled:opacity-30 disabled:cursor-not-allowed"
+                    ></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default DDTestim2

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

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

@@ -0,0 +1,100 @@
+import type { Block } from 'payload'
+
+export const DDTestim2: Block = {
+  slug: 'DD-Testim2',
+  interfaceName: 'DDTestim2',
+  labels: {
+    singular: 'Testimonial 2 Block',
+    plural: 'Testimonial 2 Blocks'
+  },
+  fields: [
+    {
+      name: 'features',
+      type: 'array',
+      label: 'Featured Projects',
+      minRows: 0,
+      fields: [
+        {
+          name: 'title',
+          type: 'text',
+          label: 'Project Title',
+          required: true
+        },
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'company',
+              type: 'text',
+              label: 'Company',
+              admin: {
+                width: '50%'
+              }
+            },
+            {
+              name: 'year',
+              type: 'text',
+              label: 'Year',
+              admin: {
+                width: '50%'
+              }
+            }
+          ]
+        },
+        {
+          type: 'row',
+          fields: [
+            {
+              name: 'category',
+              type: 'text',
+              label: 'Category',
+              admin: {
+                width: '50%'
+              }
+            },
+            {
+              name: 'link',
+              type: 'text',
+              label: 'Project Link',
+              admin: {
+                width: '50%',
+                description: 'Full URL to the project'
+              }
+            }
+          ]
+        }
+      ],
+      defaultValue: []
+    },
+    {
+      name: 'testimonials',
+      type: 'relationship',
+      relationTo: 'testimonials',
+      label: 'Select Testimonials',
+      hasMany: true,
+      required: false,
+      admin: {
+        description: 'Select testimonials from the Testimonials collection'
+      }
+    },
+    {
+      type: 'collapsible',
+      label: 'Custom Classes',
+      admin: {
+        initCollapsed: true
+      },
+      fields: [
+        {
+          name: 'containerClass',
+          type: 'text',
+          label: 'Container Class',
+          admin: {
+            description: 'Additional classes for section container'
+          }
+        }
+      ]
+    }
+  ]
+}
+
+export default DDTestim2

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

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