blocks-dusted 0.1.10 → 0.1.12

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

@@ -0,0 +1,102 @@
+// src/blocks/ButtonECDustedFluid/config.ts
+import type { Block } from 'payload'
+import { link } from '@/fields/link'
+
+export const DDFluidBtn: Block = {
+  slug: 'DD-FluidBtn',
+  interfaceName: 'DDFluidBtn',
+  labels: {
+    singular: 'Button Dusted Fluid',
+    plural: 'Button Dusted Fluid'
+  },
+  fields: [
+    {
+      name: 'variant',
+      type: 'select',
+      defaultValue: 'v1',
+      required: true,
+      options: [
+        { label: 'v1', value: 'v1' },
+        { label: 'v2', value: 'v2' },
+        { label: 'v3', value: 'v3' },
+        { label: 'v4', value: 'v4' },
+        { label: 'v5', value: 'v5' }
+      ],
+      admin: { width: '50%' }
+    },
+    {
+      name: 'label',
+      type: 'text',
+      required: true,
+      defaultValue: 'BUTTON',
+      admin: { width: '50%' }
+    },
+    {
+      name: 'displayMode',
+      type: 'select',
+      label: 'Display Mode',
+      defaultValue: 'labelOnly',
+      options: [
+        { label: 'Label Only', value: 'labelOnly' },
+        { label: 'Icon with Label', value: 'iconWithLabel' },
+        { label: 'Icon Only', value: 'iconOnly' }
+      ],
+      required: true,
+      admin: { width: '50%' }
+    },
+    {
+      name: 'iconPosition',
+      type: 'select',
+      label: 'Icon Position',
+      defaultValue: 'before',
+      options: [
+        { label: 'Before Label', value: 'before' },
+        { label: 'After Label', value: 'after' }
+      ],
+      required: false,
+      admin: {
+        width: '50%',
+        condition: (data, siblingData) => siblingData?.displayMode === 'iconWithLabel'
+      }
+    },
+    link({
+      overrides: {
+        name: 'link',
+        label: 'Link',
+        admin: {
+          condition: (data) => data.displayMode !== 'labelOnly'
+        }
+      },
+      disableLabel: true,
+      appearances: false
+    }),
+    {
+      name: 'enableCustomClasses',
+      type: 'checkbox',
+      label: 'Enable Custom Classes',
+      defaultValue: false,
+      admin: { width: '100%' }
+    },
+    {
+      name: 'wrapperClassName',
+      type: 'text',
+      label: 'Button Wrapper Class',
+      defaultValue: 'w-fit',
+      required: false,
+      admin: {
+        width: '50%',
+        condition: (data, siblingData) => siblingData.enableCustomClasses === true
+      }
+    },
+    {
+      name: 'className',
+      type: 'text',
+      label: 'Inner Button Class',
+      required: false,
+      admin: {
+        width: '50%',
+        condition: (data, siblingData) => siblingData.enableCustomClasses === true
+      }
+    }
+  ]
+}

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

@@ -0,0 +1,86 @@
+{
+  "type": "block",
+  "name": "DD-FluidBtn",
+  "label": "Fluid Button Set",
+  "sourceName": "ButtonECDustedFluid",
+  "portableName": "DD-FluidBtn",
+  "slug": "DD-FluidBtn",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/ButtonECDustedFluid",
+    "originalSlug": "buttonECDustedFluid",
+    "originalConfigExport": "ButtonECDustedFluid",
+    "originalComponentExport": "ButtonECDustedFluid",
+    "originalInterfaceName": "DDFluidBtn"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-FluidBtn/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-FluidBtn/config.ts"
+    },
+    {
+      "from": "ButtonsEyeCatching.tsx",
+      "to": "src/blocks/DD-FluidBtn/ButtonsEyeCatching.tsx"
+    }
+  ],
+  "dependencies": [
+    "framer-motion"
+  ],
+  "sharedFiles": [
+    {
+      "from": "templates/shared/src/components/ui/button-dusted-fluid",
+      "to": "src/components/ui/button-dusted-fluid",
+      "required": true,
+      "safeToCopy": true
+    }
+  ],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDFluidBtn in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-FluidBtn in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "manualSteps": [
+    "Register DDFluidBtn in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-FluidBtn in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDFluidBtn } from '@/blocks/DD-FluidBtn/config' and add DDFluidBtn to clear Pages/Posts block arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-FluidBtn in RenderBlocks."
+    }
+  },
+  "notes": [
+    "Bundles the required ButtonsEyeCatching child component with the public parent block.",
+    "Only DDFluidBtn is registered as a block.",
+    "Manifest includes shared local support files required by original DesignsDusted source imports."
+  ],
+  "exportName": "DDFluidBtn",
+  "interfaceName": "DDFluidBtn"
+}

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

@@ -0,0 +1,149 @@
+'use client'
+
+import React, { useState, useEffect, useRef } from 'react'
+import { motion } from 'framer-motion'
+import RichText from '@/components/RichText'
+
+export interface ButtonGooeyInfoProps {
+  buttonLabel?: string
+  buttonIcon?: string
+  richTextData?: any
+  panelWidth?: string
+  panelBgColor?: string
+  buttonBgColor?: string
+  buttonTextColor?: string
+  panelTextColor?: string
+  xOffset?: number
+  className?: string
+  panelClassName?: string
+}
+
+export const DDGooeyInfo: React.FC<ButtonGooeyInfoProps> = ({
+  buttonLabel = 'i',
+  buttonIcon,
+  richTextData,
+  panelWidth = '16rem',
+  panelBgColor = 'black',
+  buttonBgColor = 'black',
+  buttonTextColor = 'white',
+  panelTextColor = 'white',
+  xOffset = 48,
+  className = '',
+  panelClassName = ''
+}) => {
+  const [open, setOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement | null>(null)
+  const panelRef = useRef<HTMLDivElement | null>(null)
+
+  // Close on outside tap/click (helps on touch devices)
+  useEffect(() => {
+    function handlePointerDown(e: PointerEvent) {
+      if (!buttonRef.current || !panelRef.current) return
+      if (
+        !buttonRef.current.contains(e.target as Node) &&
+        !panelRef.current.contains(e.target as Node)
+      ) {
+        setOpen(false)
+      }
+    }
+
+    window.addEventListener('pointerdown', handlePointerDown)
+    return () => window.removeEventListener('pointerdown', handlePointerDown)
+  }, [])
+
+  const handleToggle = () => {
+    setOpen((prev) => !prev)
+  }
+
+  return (
+    <div className={`gooey-info-container relative w-auto h-auto block ${className}`}>
+      {/* Gooey Filter */}
+      <svg className="absolute w-0 h-0">
+        <filter id="gooey">
+          {/* // Subtle gooey effect - best color merge */}
+          <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
+          <feColorMatrix
+            in="blur"
+            mode="matrix"
+            values="1 0 0 0 0
+                    0 1 0 0 0
+                    0 0 1 0 0
+                    0 0 0 18 -5"
+            result="gooey"
+          />
+          {/* // Strong gooey effect */}
+          {/* <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur" />
+          <feColorMatrix
+            in="blur"
+            mode="matrix"
+            values="1 0 0 0 0
+                    0 1 0 0 0
+                    0 0 1 0 0
+                    0 0 0 24 -8"
+            result="gooey"
+          /> */}
+          {/* // Extreme gooey effect */}
+          {/* <feGaussianBlur in="SourceGraphic" stdDeviation="16" result="blur" />
+          <feColorMatrix
+            in="blur"
+            mode="matrix"
+            values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0
+          0 0 0 30 -10"
+            result="gooey"
+          /> */}
+          <feBlend in="SourceGraphic" in2="gooey" />
+        </filter>
+      </svg>
+      <div
+        className="relative flex items-center justify-center my-16"
+        style={{ filter: 'url(#gooey)' }}
+      >
+        {/* Floating Button */}
+        <motion.button
+          ref={buttonRef}
+          onHoverStart={() => setOpen(true)}
+          onHoverEnd={() => setOpen(false)}
+          onClick={handleToggle} // supports mouse + touch tap
+          className="w-14 h-14 rounded-full flex items-center justify-center cursor-pointer shadow-lg touch-manipulation select-none"
+          style={{
+            backgroundColor: buttonBgColor,
+            color: buttonTextColor
+          }}
+        >
+          <span className="text-xl font-bold">{buttonIcon || buttonLabel}</span>
+        </motion.button>
+
+        {/* Panel */}
+        <motion.div
+          ref={panelRef}
+          initial={{
+            opacity: 0,
+            scale: 0.85,
+            x: xOffset - 8
+          }}
+          animate={{
+            opacity: open ? 1 : 0,
+            scale: open ? 1 : 0.85,
+            x: open ? xOffset : xOffset - 8
+          }}
+          transition={{ type: 'spring', stiffness: 250, damping: 22 }}
+          onHoverStart={() => setOpen(true)}
+          onHoverEnd={() => setOpen(false)}
+          className={`absolute left-0 top-1/2 -translate-y-1/2 origin-left rounded-3xl px-6 py-5 flex flex-col gap-3 ${panelClassName}`}
+          style={{
+            width: panelWidth,
+            backgroundColor: panelBgColor,
+            color: panelTextColor,
+            pointerEvents: open ? 'auto' : 'none'
+          }}
+        >
+          {richTextData && (
+            <RichText data={richTextData} className="gooey-info-richtext" enableGutter={false} />
+          )}
+        </motion.div>
+      </div>
+    </div>
+  )
+}
+
+export default DDGooeyInfo

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

@@ -0,0 +1,135 @@
+import type { Block } from 'payload'
+import { BlocksFeature } from '@payloadcms/richtext-lexical'
+
+import { MediaBlock } from '@/blocks/MediaBlock/config'
+import { DDIcon } from '@/blocks/DD-Icon/config'
+import { DDAnimText } from '@/blocks/DD-AnimText/config'
+import { DDIconButton } from '@/blocks/DD-IconButton/config'
+import { defaultLexical } from '@/fields/defaultLexical'
+
+export const DDGooeyInfo: Block = {
+  slug: 'DD-GooeyInfo',
+  interfaceName: 'DDGooeyInfo',
+  labels: {
+    singular: 'Button Gooey Info',
+    plural: 'Button Gooey Info Blocks'
+  },
+  fields: [
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'buttonLabel',
+          type: 'text',
+          label: 'Button Label/Icon',
+          defaultValue: 'i',
+          admin: {
+            width: '50%',
+            description: 'Text or single character to display on button (e.g., "i", "?", "N")'
+          }
+        },
+        {
+          name: 'xOffset',
+          type: 'number',
+          label: 'Panel X Offset',
+          defaultValue: 110,
+          admin: {
+            width: '50%',
+            description: 'Horizontal distance from button to panel in pixels'
+          }
+        }
+      ]
+    },
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'panelWidth',
+          type: 'text',
+          label: 'Panel Width',
+          defaultValue: '16rem',
+          admin: {
+            width: '33.33%',
+            description: 'Width of info panel (e.g., 16rem, 300px)'
+          }
+        },
+        {
+          name: 'buttonBgColor',
+          type: 'text',
+          label: 'Button Background',
+          defaultValue: 'black',
+          admin: {
+            width: '33.33%',
+            description: 'CSS color (e.g., black, #000, var(--primary))'
+          }
+        },
+        {
+          name: 'buttonTextColor',
+          type: 'text',
+          label: 'Button Text Color',
+          defaultValue: 'white',
+          admin: {
+            width: '33.33%',
+            description: 'CSS color for button text'
+          }
+        }
+      ]
+    },
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'panelBgColor',
+          type: 'text',
+          label: 'Panel Background',
+          defaultValue: 'black',
+          admin: {
+            width: '50%',
+            description: 'CSS color for panel background'
+          }
+        },
+        {
+          name: 'panelTextColor',
+          type: 'text',
+          label: 'Panel Text Color',
+          defaultValue: 'white',
+          admin: {
+            width: '50%',
+            description: 'CSS color for panel text'
+          }
+        }
+      ]
+    },
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'className',
+          type: 'text',
+          label: 'Container CSS Classes',
+          admin: {
+            width: '50%',
+            description: 'Additional CSS classes for the outer container'
+          }
+        },
+        {
+          name: 'panelClassName',
+          type: 'text',
+          label: 'Panel CSS Classes',
+          admin: {
+            width: '50%',
+            description: 'Additional CSS classes for the info panel'
+          }
+        }
+      ]
+    },
+    {
+      name: 'richTextData',
+      type: 'richText',
+      editor: defaultLexical,
+      label: 'Panel Content'
+    }
+  ]
+}
+
+export default DDGooeyInfo

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

@@ -0,0 +1,72 @@
+{
+  "type": "block",
+  "name": "DD-GooeyInfo",
+  "label": "Gooey Info Button",
+  "sourceName": "ButtonGooeyInfo",
+  "portableName": "DD-GooeyInfo",
+  "slug": "DD-GooeyInfo",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/ButtonGooeyInfo",
+    "originalSlug": "buttonGooeyInfo",
+    "originalConfigExport": "ButtonGooeyInfo",
+    "originalComponentExport": "ButtonGooeyInfo",
+    "originalInterfaceName": "DDGooeyInfo"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-GooeyInfo/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-GooeyInfo/config.ts"
+    }
+  ],
+  "dependencies": [],
+  "sharedFiles": [],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDGooeyInfo in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-GooeyInfo in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "manualSteps": [
+    "Register DDGooeyInfo in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-GooeyInfo in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDGooeyInfo } from '@/blocks/DD-GooeyInfo/config' and add DDGooeyInfo to clear Pages/Posts block arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-GooeyInfo in RenderBlocks."
+    }
+  },
+  "notes": [
+    "Converted from DesignsDustedv3 ButtonGooeyInfo.",
+    "Project-specific imports were replaced with portable local behaviour where required."
+  ],
+  "exportName": "DDGooeyInfo",
+  "interfaceName": "DDGooeyInfo"
+}