blocks-dusted 0.1.10 → 0.1.11

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

@@ -0,0 +1,3 @@
+# DD-AnimText
+
+Portable first-pass conversion of AnimatedText. It keeps `framer-motion`; advanced GSAP SplitText modes from the original source are not bundled in this template.

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

@@ -0,0 +1,295 @@
+import type { Block } from 'payload'
+
+import { defaultLexical } from '@/fields/defaultLexical'
+
+export const DDAnimText: Block = {
+  slug: 'DD-AnimText',
+  interfaceName: 'DDAnimText',
+  labels: {
+    singular: 'Animated Text',
+    plural: 'Animated Texts'
+  },
+  fields: [
+    {
+      name: 'animTextScrollSpeed',
+      type: 'text',
+      hidden: true,
+      label: 'Scroll Data Speed',
+      defaultValue: '0.2',
+      admin: {
+        description: 'Default value 0.2'
+      }
+    },
+    // Custom class for textbox container - not working - not required
+    {
+      admin: {
+        initCollapsed: true,
+        hidden: true,
+        className: 'custom-css-class',
+        condition: (data) =>
+          data.variation === 'text-fade-up' ||
+          data.variation === 'text-fade-down' ||
+          data.variation === 'blur-in'
+      },
+      type: 'collapsible',
+      label: 'Container Classes (RichText Variations)',
+      fields: [
+        {
+          name: 'aniTextBoxContainerClass',
+          type: 'text',
+          hidden: false,
+          label: 'Animated Text Container Class'
+        },
+        {
+          name: 'aniTextBoxClass',
+          type: 'text',
+          hidden: false,
+          label: 'Animated Text Box Class',
+          admin: {
+            description: 'Add additional class to the animated richText box.'
+          }
+        }
+      ]
+    },
+    // Custom class for all variations
+    {
+      admin: {
+        initCollapsed: true,
+        className: 'custom-css-class'
+      },
+      type: 'collapsible',
+      label: 'Text Classes (All Variations)',
+      fields: [
+        {
+          name: 'aniTextClass',
+          type: 'text',
+          label: false,
+          admin: {
+            description:
+              'Add an additional class to the animated text. This can be used to style the text or apply additional animations.'
+          }
+        }
+      ]
+    },
+    {
+      name: 'animatedText',
+      type: 'richText',
+      label: 'Text Content',
+      editor: defaultLexical,
+      admin: {
+        condition: (data, siblingData) =>
+          siblingData.variation === 'text-fade-up' ||
+          siblingData.variation === 'text-fade-down' ||
+          siblingData.variation === 'blur-in',
+        description:
+          'Add the text that will be animated. This will be used for text fade and blur effects.'
+      }
+    },
+
+    {
+      name: 'plainText',
+      type: 'text',
+      label: 'Content',
+      admin: {
+        condition: (data, siblingData) =>
+          siblingData.variation !== 'text-fade-up' &&
+          siblingData.variation !== 'text-fade-down' &&
+          siblingData.variation !== 'blur-in',
+        description: 'The text content that will be animated.'
+      }
+    },
+    {
+      name: 'rotateWords',
+      type: 'text',
+      label: 'Rotating Words or Letters',
+      admin: {
+        condition: (data, siblingData) => siblingData.variation === 'rotate',
+        description: 'Comma-separated words to rotate through.'
+      }
+    },
+    {
+      name: 'variation',
+      type: 'select',
+      label: 'Animation Type',
+      defaultValue: 'text-fade-up',
+      options: [
+        { label: 'No Animation', value: 'no-animation' },
+        { label: 'Split Text', value: 'split-text' },
+        { label: 'Text Type', value: 'text-type' },
+        { label: 'Shuffle Text', value: 'shuffle-text' },
+        { label: 'Shiny Text', value: 'shiny-text' },
+        { label: 'Gradual Spacing', value: 'gradual-spacing' },
+        { label: 'Typing Effect', value: 'typing' },
+        { label: 'Staggered Fade', value: 'staggered-fade' },
+        { label: 'Rotate Words', value: 'rotate' },
+        { label: 'Letters Pull Up', value: 'letters-pull-up' },
+        { label: 'Words Pull Up', value: 'words-pull-up' },
+        { label: 'Blur In', value: 'blur-in' },
+        { label: 'Text Fade Up', value: 'text-fade-up' },
+        { label: 'Text Fade Down', value: 'text-fade-down' }
+      ],
+
+      admin: {
+        description: 'Select the animation style for this text.'
+      }
+    },
+    // Split Text variant fields
+    {
+      admin: {
+        initCollapsed: true,
+        condition: (data, siblingData) => siblingData.variation === 'split-text'
+      },
+      type: 'collapsible',
+      label: 'Split Text Settings',
+      fields: [
+        {
+          name: 'splitTrigger',
+          type: 'select',
+          label: 'Animation Trigger',
+          defaultValue: 'view',
+          options: [
+            { label: 'In View', value: 'view' },
+            { label: 'Hover', value: 'hover' },
+            { label: 'Click', value: 'click' }
+          ]
+        },
+        {
+          name: 'splitDelay',
+          type: 'number',
+          label: 'Character Delay (seconds)',
+          defaultValue: 0.05,
+          admin: {
+            step: 0.01
+          }
+        },
+        {
+          name: 'splitDuration',
+          type: 'number',
+          label: 'Animation Duration (seconds)',
+          defaultValue: 0.6,
+          admin: {
+            step: 0.1
+          }
+        },
+        {
+          name: 'splitEase',
+          type: 'text',
+          label: 'Animation Ease',
+          defaultValue: 'back.out(1.7)',
+          admin: {
+            description: 'GSAP ease string (e.g., "power2.out", "elastic.out(1, 0.3)")'
+          }
+        },
+        {
+          name: 'splitYOffset',
+          type: 'number',
+          label: 'Y Offset (pixels)',
+          defaultValue: 80
+        },
+        {
+          name: 'splitOpacity',
+          type: 'checkbox',
+          label: 'Animate Opacity',
+          defaultValue: true
+        }
+      ]
+    },
+    // Text Type variant fields
+    {
+      admin: {
+        initCollapsed: true,
+        condition: (data, siblingData) => siblingData.variation === 'text-type'
+      },
+      type: 'collapsible',
+      label: 'Text Type Settings',
+      fields: [
+        {
+          name: 'typeSpeed',
+          type: 'number',
+          label: 'Typing Speed (ms)',
+          defaultValue: 100
+        },
+        {
+          name: 'typeDelay',
+          type: 'number',
+          label: 'Start Delay (ms)',
+          defaultValue: 0
+        },
+        {
+          name: 'showCursor',
+          type: 'checkbox',
+          label: 'Show Cursor',
+          defaultValue: true
+        },
+        {
+          name: 'cursorChar',
+          type: 'text',
+          label: 'Cursor Character',
+          defaultValue: '|'
+        },
+        {
+          name: 'autoStart',
+          type: 'checkbox',
+          label: 'Auto Start',
+          defaultValue: true,
+          admin: {
+            description: 'Start typing automatically when component mounts'
+          }
+        }
+      ]
+    },
+    // Shuffle Text variant fields
+    {
+      admin: {
+        initCollapsed: true,
+        condition: (data, siblingData) => siblingData.variation === 'shuffle-text'
+      },
+      type: 'collapsible',
+      label: 'Shuffle Text Settings',
+      fields: [
+        {
+          name: 'shuffleDuration',
+          type: 'number',
+          label: 'Shuffle Duration (seconds)',
+          defaultValue: 0.8,
+          admin: {
+            step: 0.1,
+            description: 'Duration of the shuffle animation'
+          }
+        }
+      ]
+    },
+    // Shiny Text variant fields
+    {
+      admin: {
+        condition: (data, siblingData) => siblingData.variation === 'shiny-text'
+      },
+      type: 'row',
+      fields: [
+        {
+          name: 'shinyDuration',
+          type: 'number',
+          label: 'Animation Speed (seconds)',
+          defaultValue: 5,
+          admin: {
+            width: '50%',
+            step: 0.5,
+            description: 'Speed of the shine animation (higher = slower)'
+          }
+        },
+        {
+          name: 'shinyColor',
+          type: 'text',
+          label: 'Shine Color (hex or rgba)',
+          defaultValue: 'rgba(255, 255, 255, 0.6)',
+          admin: {
+            width: '50%',
+            description: 'CSS color for the shine effect (e.g., #ffffff, rgba(255, 255, 255, 0.6))'
+          }
+        }
+      ]
+    }
+  ]
+}
+
+export default DDAnimText

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

@@ -0,0 +1,85 @@
+{
+  "type": "block",
+  "name": "DD-AnimText",
+  "label": "Animated Text",
+  "sourceName": "AnimatedText",
+  "portableName": "DD-AnimText",
+  "slug": "DD-AnimText",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/AnimatedText",
+    "originalSlug": "animatedText",
+    "originalConfigExport": "AnimatedText",
+    "originalComponentExport": "AnimatedText",
+    "originalInterfaceName": "DDAnimText"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-AnimText/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-AnimText/config.ts"
+    }
+  ],
+  "dependencies": [
+    {
+      "name": "framer-motion"
+    },
+    "@gsap/react",
+    "gsap"
+  ],
+  "sharedFiles": [
+    {
+      "from": "templates/shared/src/components/ui/anims",
+      "to": "src/components/ui/anims",
+      "required": true,
+      "safeToCopy": true
+    }
+  ],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDAnimText in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-AnimText in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "manualSteps": [
+    "Register DDAnimText in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-AnimText in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDAnimText } from '@/blocks/DD-AnimText/config' and add DDAnimText to clear Pages/Posts block arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-AnimText in RenderBlocks."
+    }
+  },
+  "notes": [
+    "Portable conversion keeps framer-motion animation. Raw GSAP SplitText modes are not bundled in this first pass.",
+    "Manifest includes shared local support files required by original DesignsDusted source imports."
+  ],
+  "exportName": "DDAnimText",
+  "interfaceName": "DDAnimText"
+}

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

@@ -0,0 +1,321 @@
+'use client'
+
+import * as React from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { motion } from 'framer-motion'
+import { ArrowDownWideNarrow } from 'lucide-react'
+import { extractCustomCSS } from '@/utilities/renderCustomCSS'
+
+const Divider: React.FC = () => (
+  <span className="block h-px w-4 shrink-0 bg-white/55 dark:bg-white/55" />
+)
+
+const FadeEdges: React.FC = () => (
+  <div className="sticky top-0 z-[100]">
+    <div
+      aria-hidden="true"
+      className="pointer-events-none absolute -left-1 -top-1 h-24 w-screen bg-gradient-to-b from-[var(--color-muted,transparent)] to-transparent blur-[6px]"
+    />
+    <div
+      aria-hidden="true"
+      className="pointer-events-none absolute -bottom-1 -left-1 h-24 w-screen bg-gradient-to-t from-[var(--color-muted,transparent)] to-transparent"
+    />
+  </div>
+)
+
+const rowVariants = {
+  hidden: { opacity: 0, y: 10 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      type: 'spring' as const,
+      stiffness: 200,
+      damping: 20,
+      staggerChildren: 0.1
+    }
+  }
+} as const
+
+const childBarVariants = (w = 55) => ({
+  rest: { width: 36, backgroundColor: 'rgba(255,255,255,0.65)' },
+  hover: { width: w, backgroundColor: 'var(--accent)' }
+})
+
+const childTextVariants = {
+  rest: { opacity: 1, color: 'inherit', filter: 'brightness(1.1)' },
+  hover: { opacity: 1, color: 'var(--accent)' }
+}
+
+const ParentRow: React.FC<{ label: string; index: number }> = ({ label, index }) => (
+  <motion.div
+    initial="hidden"
+    animate="show"
+    variants={rowVariants}
+    custom={index}
+    className="relative color-alt will-change-[transform,opacity]"
+    transition={{
+      delay: index * 0.025,
+      type: 'spring',
+      stiffness: 200,
+      damping: 20
+    }}
+  >
+    <div className="group relative flex h-px items-center gap-3 py-2">
+      <span className="inline-block h-px w-9 shrink-0 bg-white/65 text-sm opacity-100 dark:bg-white/65" />
+      <span className="color-text whitespace-nowrap text-md font-semibold uppercase opacity-100">
+        {label}
+      </span>
+    </div>
+  </motion.div>
+)
+
+const ChildRow: React.FC<{
+  targetSection?: string
+  label: string
+  index: number
+  wideOnHover?: number
+  scrollOffset?: number
+}> = ({ targetSection, label, index, wideOnHover = 55, scrollOffset = -100 }) => {
+  const handleScrollTo = (e: React.MouseEvent) => {
+    e.preventDefault()
+
+    if (!targetSection) return
+
+    const el = document.getElementById(targetSection)
+
+    if (!el) {
+      console.warn(`Target element with id "${targetSection}" not found`)
+      return
+    }
+
+    const elementTop = el.getBoundingClientRect().top + window.pageYOffset
+    const targetTop = elementTop + scrollOffset
+
+    window.scrollTo({ top: targetTop, behavior: 'smooth' })
+  }
+
+  return (
+    <motion.div
+      initial="hidden"
+      animate="show"
+      variants={rowVariants}
+      custom={index}
+      transition={{
+        delay: index * 0.025,
+        type: 'spring',
+        stiffness: 200,
+        damping: 20
+      }}
+    >
+      <motion.button
+        onClick={handleScrollTo}
+        initial="rest"
+        whileHover="hover"
+        animate="rest"
+        disabled={!targetSection}
+        className="group relative flex h-px cursor-pointer items-center gap-4 border-0 bg-transparent py-0 text-left text-sm opacity-50 hover:opacity-100 will-change-[transform,opacity] after:absolute after:left-0 after:top-1/2 after:size-full after:-translate-y-1/2 after:p-[12px] disabled:cursor-not-allowed disabled:opacity-50 disabled:[&_*]:opacity-30 focus-visible:rounded focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--dd-accent,#9803e2)]"
+      >
+        <motion.span
+          className="inline-block h-px shrink-0 text-sm opacity-100 will-change-[width,background-color]"
+          variants={childBarVariants(wideOnHover)}
+          transition={{ type: 'spring', stiffness: 500, damping: 35 }}
+        />
+
+        <motion.span
+          className="whitespace-nowrap text-sm !font-medium text-stone-400 transition-all ease-out will-change-[color,opacity] group-hover:!font-semibold group-hover:text-[var(--dd-accent,#9803e2)]"
+          variants={childTextVariants}
+          transition={{ type: 'spring', stiffness: 500, damping: 35 }}
+        >
+          {label}
+        </motion.span>
+      </motion.button>
+    </motion.div>
+  )
+}
+
+interface AsideScrollLinksProps {
+  parentSections?: Array<{
+    sectionId?: string
+    label: string
+    children?: Array<{
+      linkId?: string
+      label: string
+      targetSection?: string
+      scrollOffset?: number
+      wideOnHover?: number
+    }>
+  }>
+  position?: 'left' | 'right'
+  zIndex?: number
+  offsetFromEdge?: number
+  className?: string
+  blockName?: string
+  enableCustomCSS?: boolean
+  customCSS?: any[]
+}
+
+function AsideNav({
+  parentSections = [
+    {
+      label: 'Out of the box',
+      children: [{ label: 'Aside PageLinks', targetSection: 's1' }]
+    }
+  ],
+  position = 'left',
+  offsetFromEdge = 8,
+  enableCustomCSS = false,
+  customCSS = []
+}: AsideScrollLinksProps) {
+  const [mounted, setMounted] = useState(false)
+  const styleIdRef = useRef(`aside-nav-css-${Math.random().toString(36).slice(2)}`)
+
+  const extractedCSS = enableCustomCSS && customCSS?.length > 0 ? extractCustomCSS(customCSS) : ''
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  useEffect(() => {
+    if (!extractedCSS) return
+
+    const styleId = styleIdRef.current
+    const existingStyle = document.getElementById(styleId)
+
+    if (existingStyle) {
+      existingStyle.textContent = extractedCSS
+    } else {
+      const style = document.createElement('style')
+      style.id = styleId
+      style.textContent = extractedCSS
+      document.head.appendChild(style)
+    }
+
+    return () => {
+      document.getElementById(styleId)?.remove()
+    }
+  }, [extractedCSS])
+
+  const items = useMemo(() => {
+    const flat: Array<{
+      type: 'parent' | 'child'
+      label: string
+      targetSection?: string
+      scrollOffset?: number
+      wideOnHover?: number
+    }> = []
+
+    parentSections.forEach((p) => {
+      flat.push({ type: 'parent', label: p.label })
+
+      p.children?.forEach((c) =>
+        flat.push({
+          type: 'child',
+          label: c.label,
+          targetSection: c.targetSection,
+          scrollOffset: c.scrollOffset,
+          wideOnHover: c.wideOnHover
+        })
+      )
+    })
+
+    return flat
+  }, [parentSections])
+
+  const positionClass = position === 'left' ? 'left-2' : 'right-2'
+
+  const asideContent = (
+    <aside
+      className={[
+        'aside-scroll-block group fixed top-16 z-[200] flex items-start overflow-hidden opacity-100 shadow-lg transition-[width,height,max-width,max-height,border-radius,padding] duration-300 delay-50 hover:delay-0 focus-within:delay-0',
+        'h-[2.3rem] w-[2.3rem] max-w-[12rem] max-h-[30vh] p-px',
+        'rounded-2xl backdrop-blur-[10px]',
+        'bg-[var(--border)] border-[2px] border-ridge border-[#edededf0] shadow-[inset_0_0_20px_0px_rgb(255_255_255_/_80%)]',
+        'dark:bg-[var(--background)] dark:border-[rgba(245,245,245,0.5)] dark:shadow-[inset_0_0_20px_#ffffff70]',
+        'hover:h-auto hover:w-[calc(100%+1rem)] hover:max-w-[15rem] hover:max-h-[40vh] hover:rounded-2xl hover:p-1 hover:duration-200 focus-within:h-auto focus-within:w-[calc(100%+1rem)] focus-within:max-w-[15rem] focus-within:max-h-[40vh] focus-within:rounded-2xl focus-within:p-1',
+        positionClass
+      ].join(' ')}
+      style={{
+        opacity: 1,
+        transform: 'none',
+        [position]: `${offsetFromEdge}px`
+      }}
+    >
+      <div
+        data-lenis-prevent
+        className={[
+          'aside-inner-box relative flex h-full w-full overflow-hidden p-1 text-[14px] tracking-tight backdrop-blur-md transition-all duration-300',
+          'rounded-2xl bg-[rgba(5,5,5,0.5)] border border-[rgba(152,3,226,0.1)]',
+          'dark:bg-[rgba(22,20,34,0.9)] dark:border-[rgba(152,3,226,0.15)]',
+          'group-hover:rounded-xl group-hover:p-0.5 group-focus-within:rounded-xl group-focus-within:p-0.5'
+        ].join(' ')}
+      >
+        <div className="w-full overflow-hidden">
+          <ArrowDownWideNarrow className="icon-arrow-down-wide-narrow color-alt sticky left-0 top-1 z-[100] h-auto w-6 shrink-0 p-1" />
+
+          <FadeEdges />
+
+          <nav
+            data-lenis-prevent
+            className="aside-nav-list pointer-events-none relative m-0 flex h-fit max-h-[40vh] w-full flex-col gap-2 overflow-x-clip overflow-y-auto px-0 pb-24 pt-2 text-stone-200 opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&::-webkit-scrollbar]:h-0 [&::-webkit-scrollbar]:w-0 dark:text-stone-200"
+          >
+            {items.map((it, i) => {
+              if (it.type === 'parent') {
+                return (
+                  <React.Fragment key={`p-${i}`}>
+                    <ParentRow label={it.label} index={i} />
+                    <Divider />
+                    <Divider />
+                  </React.Fragment>
+                )
+              }
+
+              return (
+                <React.Fragment key={`c-${i}`}>
+                  <ChildRow
+                    targetSection={it.targetSection}
+                    label={it.label}
+                    index={i}
+                    wideOnHover={it.wideOnHover ?? 55}
+                    scrollOffset={it.scrollOffset ?? -100}
+                  />
+                  <Divider />
+                  <Divider />
+                  <Divider />
+                </React.Fragment>
+              )
+            })}
+          </nav>
+        </div>
+      </div>
+
+      <style jsx global>{`
+        .aside-nav-list {
+          -ms-overflow-style: none !important;
+          scrollbar-width: none !important;
+          overscroll-behavior: contain;
+        }
+
+        .aside-nav-list::-webkit-scrollbar,
+        .aside-nav-list *::-webkit-scrollbar {
+          display: none !important;
+          width: 0 !important;
+          height: 0 !important;
+          background: transparent !important;
+        }
+
+        .aside-scroll-block {
+          border-style: ridge;
+        }
+      `}</style>
+    </aside>
+  )
+
+  if (!mounted || typeof window === 'undefined') return null
+
+  return createPortal(asideContent, document.body)
+}
+
+export { AsideNav as DDAsideNav }
+export default AsideNav