blocks-dusted 0.1.10 → 0.1.12

package/templates/blocks/DDHG-ProcessSec/config.ts

@@ -0,0 +1,170 @@
+import type { Block } from 'payload'
+
+// Optional rich-text block support. Uncomment and adapt if the destination project
+// wants Media / Masonry / Lottie blocks inside diagramContent.
+// import { BlocksFeature, HeadingFeature } from '@payloadcms/richtext-lexical'
+// import { defaultLexical } from '@/fields/defaultLexical'
+// import { MediaBlock } from '@/blocks/MediaBlock/config'
+// import { MasonryMediaBlock } from '@/blocks/MasonryMediaBlock/config'
+// import { LottieBlock } from '@/blocks/LottieBlock/config'
+
+export const DDHGProcessSec: Block = {
+  slug: 'DDHG-ProcessSec',
+  interfaceName: 'DDHGProcessSec',
+  dbName: 'ddhg_proc_sec',
+  labels: {
+    singular: 'Process Section',
+    plural: 'Process Sections',
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Content',
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'eyebrowPrefix',
+                  type: 'text',
+                  label: 'Eyebrow Prefix',
+                  defaultValue: 'our',
+                  admin: { width: '50%' },
+                },
+                {
+                  name: 'eyebrowEmphasis',
+                  type: 'text',
+                  label: 'Eyebrow Emphasis',
+                  defaultValue: 'process',
+                  admin: { width: '50%' },
+                },
+              ],
+            },
+            {
+              name: 'heading',
+              type: 'text',
+              label: 'Heading',
+              defaultValue: 'HOW WE WORK',
+              required: true,
+            },
+            {
+              name: 'showDivider',
+              type: 'checkbox',
+              label: 'Show Divider',
+              defaultValue: true,
+            },
+            {
+              name: 'steps',
+              type: 'array',
+              label: 'Process Steps',
+              dbName: 'steps',
+              minRows: 1,
+              labels: { singular: 'Step', plural: 'Steps' },
+              fields: [
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'num',
+                      type: 'text',
+                      label: 'Number',
+                      defaultValue: '01',
+                      admin: { width: '25%' },
+                    },
+                    {
+                      name: 'title',
+                      type: 'text',
+                      label: 'Title',
+                      required: true,
+                      admin: { width: '75%' },
+                    },
+                  ],
+                },
+                {
+                  name: 'description',
+                  type: 'textarea',
+                  label: 'Description',
+                },
+                {
+                  name: 'substeps',
+                  type: 'array',
+                  label: 'Substeps',
+                  dbName: 'subs',
+                  fields: [
+                    { name: 'label', type: 'text', label: 'Substep', required: true },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: 'Diagram',
+          fields: [
+            {
+              name: 'diagramLabel',
+              type: 'text',
+              label: 'Diagram Label',
+              defaultValue: 'Process Flow Diagram',
+            },
+            {
+              name: 'diagramContent',
+              type: 'richText',
+              label: 'Diagram Content',
+              // Optional enhanced editor configuration:
+              // editor: defaultLexical({
+              //   features: [
+              //     HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }),
+              //     BlocksFeature({ blocks: [MediaBlock, MasonryMediaBlock, LottieBlock] }),
+              //   ],
+              // }),
+              admin: {
+                description:
+                  'Rich-text visual slot for the process diagram. Embedded block support can be enabled in the destination project.',
+              },
+            },
+          ],
+        },
+        {
+          label: 'Advanced',
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'sectionId',
+                  type: 'text',
+                  label: 'Section ID',
+                  admin: { width: '50%' },
+                },
+                {
+                  name: 'customClassName',
+                  type: 'text',
+                  label: 'Custom CSS Classes',
+                  admin: { width: '50%' },
+                },
+              ],
+            },
+            {
+              name: 'scrollSpeed',
+              type: 'text',
+              label: 'Scroll Speed',
+              admin: { description: 'Optional data-scroll-speed value.' },
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: {
+                language: 'css',
+                description: 'Injected as a style tag. Use with caution.',
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}

package/templates/blocks/DDHG-ProcessSec/manifest.json

@@ -0,0 +1,56 @@
+{
+  "type": "block",
+  "name": "DDHG-ProcessSec",
+  "label": "Process Section",
+  "sourceName": "ProcessSection",
+  "portableName": "DDHG-ProcessSec",
+  "slug": "DDHG-ProcessSec",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/HeatherGrey2025",
+    "originalPath": "src/blocks/ProcessSection",
+    "originalSlug": "processSection",
+    "originalConfigExport": "ProcessSection",
+    "originalComponentExport": "ProcessSectionBlock",
+    "originalInterfaceName": "ProcessSectionBlockProps"
+  },
+  "files": [
+    { "from": "Component.tsx", "to": "src/blocks/DDHG-ProcessSec/Component.tsx" },
+    { "from": "config.ts", "to": "src/blocks/DDHG-ProcessSec/config.ts" }
+  ],
+  "dependencies": [
+    { "name": "framer-motion" },
+    { "name": "lucide-react" }
+  ],
+  "sharedFiles": [],
+  "requiredProjectFiles": [
+    { "path": "src/components/RichText/index.tsx", "reason": "Frontend renders diagramContent through the shared RichText renderer." },
+    { "path": "src/components/Logo/LogoIcon.tsx", "reason": "Frontend fallback diagram renders the HeatherGrey LogoIcon." },
+    { "path": "src/utilities/ui.ts", "reason": "Component uses the cn utility." }
+  ],
+  "optionalProjectFiles": [
+    { "path": "src/fields/defaultLexical.ts", "reason": "Optional if enhanced Lexical editor configuration is enabled." },
+    { "path": "src/blocks/MediaBlock/config.ts", "reason": "Optional if MediaBlock is enabled inside diagramContent." },
+    { "path": "src/blocks/MasonryMediaBlock/config.ts", "reason": "Optional if MasonryMediaBlock is enabled inside diagramContent." },
+    { "path": "src/blocks/LottieBlock/config.ts", "reason": "Optional if LottieBlock is enabled inside diagramContent." }
+  ],
+  "collectionRegistration": { "enabled": true, "collections": ["Pages", "Posts"] },
+  "renderBlocksRegistration": { "enabled": true },
+  "renderBlocksBehavior": { "wrapperless": false },
+  "pageRouteIntegration": { "required": false, "manualSteps": [] },
+  "manualSteps": [
+    "Confirm the shared RichText renderer exists in the destination project.",
+    "Optionally uncomment and adapt the enhanced Lexical block editor configuration if embedded Media, Masonry or Lottie content is required.",
+    "Replace the HeatherGrey LogoIcon fallback if the destination project uses different branding.",
+    "Run payload generate:types after schema changes."
+  ],
+  "notes": [
+    "Converted from HeatherGrey2025 ProcessSection.",
+    "The top-level dbName was namespaced to ddhg_proc_sec for portability.",
+    "Enhanced Lexical block configuration is commented out by default.",
+    "RichText remains a prerequisite for frontend rendering.",
+    "Installer must not overwrite existing target files."
+  ],
+  "exportName": "DDHGProcessSec",
+  "interfaceName": "DDHGProcessSec"
+}

package/templates/blocks/DDHG-ServiceDetails/Component.tsx

@@ -0,0 +1,164 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import React, { useMemo, useState } from 'react'
+import { cn } from '@/utilities/ui'
+import {
+  ServiceDetailCard,
+  type ServiceDetailItem,
+  type ServiceDetailLayout,
+} from './ServiceDetailCard'
+
+export type DDHGServiceDetailsProps = {
+  sectionId?: string | null
+  customClassName?: string | null
+  customCSS?: string | null
+  blockId?: string | null
+  scrollSpeed?: string | number | null
+  eyebrowPrefix?: string | null
+  eyebrowEmphasis?: string | null
+  layoutMode?: 'cycle' | 'manual' | null
+  services?: ServiceDetailItem[] | null
+}
+
+const layoutCycle: ServiceDetailLayout[] = ['left', 'right', 'center', 'split', 'asym', 'bleed']
+
+const defaultServices: ServiceDetailItem[] = [
+  {
+    code: 'SVC-01',
+    title: 'Discovery & Briefing',
+    description:
+      'We uncover the operational, spatial, and behavioural needs behind the brief before shaping the design direction.',
+    timeline: '8-12 weeks',
+    engagement: 'Fixed Fee',
+    points: [
+      { label: 'Brief development' },
+      { label: 'Space audit' },
+      { label: 'Stakeholder alignment' },
+      { label: 'Design direction' },
+    ],
+  },
+  {
+    code: 'SVC-02',
+    title: 'Concept Design',
+    description:
+      'We translate the brief into a clear interior concept across planning, mood, materials, and experience.',
+    timeline: '12-16 weeks',
+    engagement: 'Project-based',
+    points: [
+      { label: 'Concept strategy' },
+      { label: 'Mood and material direction' },
+      { label: 'Spatial planning' },
+      { label: 'Preliminary visualisation' },
+    ],
+  },
+  {
+    code: 'SVC-03',
+    title: 'Design Development',
+    description:
+      'We refine the selected concept into a resolved design package with practical, buildable decisions.',
+    timeline: '16-24 weeks',
+    engagement: 'Fixed Fee',
+    points: [
+      { label: 'Interior detailing' },
+      { label: 'Material schedules' },
+      { label: 'Furniture direction' },
+      { label: 'Lighting coordination' },
+    ],
+  },
+]
+
+function getServices(services?: ServiceDetailItem[] | null) {
+  return Array.isArray(services) && services.length > 0 ? services : defaultServices
+}
+
+function getLayout(
+  service: ServiceDetailItem,
+  index: number,
+  layoutMode?: 'cycle' | 'manual' | null,
+): ServiceDetailLayout {
+  if (layoutMode === 'manual' && service.layout && service.layout !== 'auto') return service.layout
+  return layoutCycle[index % layoutCycle.length]
+}
+
+function slugifyServiceTitle(value?: string | null) {
+  if (!value) return ''
+  return value
+    .trim()
+    .toLowerCase()
+    .replace(/&/g, 'and')
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+}
+
+export const DDHGServiceDetails: React.FC<DDHGServiceDetailsProps> = ({
+  sectionId,
+  customClassName,
+  customCSS,
+  blockId,
+  scrollSpeed,
+  eyebrowPrefix = 'detailed',
+  eyebrowEmphasis = 'breakdown',
+  layoutMode = 'cycle',
+  services,
+}) => {
+  const serviceItems = useMemo(() => getServices(services), [services])
+  const [expanded, setExpanded] = useState<number | null>(null)
+
+  return (
+    <div
+      id={sectionId ?? undefined}
+      data-block-id={blockId ?? undefined}
+      data-scroll={scrollSpeed ? true : undefined}
+      data-scroll-speed={scrollSpeed ? String(scrollSpeed) : undefined}
+      className={cn('ServiceDetails01 px-2 py-16 md:px-8', customClassName)}
+    >
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+      <div className="ServiceDetails02 mx-auto max-w-7xl">
+        <motion.div
+          className="ServiceDetails03 mb-12"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.25 }}
+          transition={{ duration: 0.9, ease: [0.22, 1, 0.36, 1] }}
+        >
+          {(eyebrowPrefix || eyebrowEmphasis) && (
+            <p className="ServiceDetails04 mb-2 text-xs uppercase tracking-[0.2em] text-stone-600 dark:text-stone-200">
+              {eyebrowPrefix && <span className="font-light">{eyebrowPrefix} </span>}
+              {eyebrowEmphasis && <span className="font-medium">{eyebrowEmphasis}</span>}
+            </p>
+          )}
+        </motion.div>
+        <div className="ServiceDetails05 space-y-16">
+          {serviceItems.map((service, index) => {
+            const layout = getLayout(service, index, layoutMode)
+            const isExpanded = expanded === index
+            const serviceDetailId = slugifyServiceTitle(service.title) || `service-detail-${index}`
+            return (
+              <motion.div
+                key={service.id || service.code || `service-detail-${index}`}
+                id={serviceDetailId}
+                data-service-index={`service-${index}`}
+                className="ServiceDetails06"
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true, amount: 0.18 }}
+                transition={{ duration: 0.9, delay: index * 0.05, ease: [0.22, 1, 0.36, 1] }}
+              >
+                <ServiceDetailCard
+                  service={service}
+                  index={index}
+                  layout={layout}
+                  isExpanded={isExpanded}
+                  onToggle={() => setExpanded(isExpanded ? null : index)}
+                />
+              </motion.div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DDHGServiceDetails