blocks-dusted 0.1.1 → 0.1.3

package/templates/components/HeaderDD02/MobileBottomNav/index.tsx

@@ -0,0 +1,545 @@
+'use client'
+
+import React, { useEffect, useMemo, useState } from 'react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { motion, AnimatePresence } from 'framer-motion'
+import * as LucideIcons from 'lucide-react'
+import { Home, ChevronDown } from 'lucide-react'
+import type { Header as HeaderType } from '@/payload-types'
+import RichText from '@/components/RichText'
+import { cn } from '@/utilities/ui'
+import {
+  TooltipProvider,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent
+} from '@/components/animate-ui/components/animate/tooltip'
+
+interface MobileBottomNavProps {
+  data?: HeaderType
+}
+
+const getLinkHref = (link: any): string => {
+  if (!link) return '#'
+
+  if (link.type === 'reference') {
+    const value = link.reference?.value
+
+    if (typeof value === 'object' && 'slug' in value) {
+      return `/${value.slug}`
+    }
+  }
+
+  return link.url || '#'
+}
+
+const resolveCustomIconUrl = (customIcon?: any): string | null => {
+  if (!customIcon) return null
+  if (typeof customIcon === 'string') return customIcon
+  if (typeof customIcon === 'number') return null
+
+  if (typeof customIcon === 'object' && 'url' in customIcon && typeof customIcon.url === 'string') {
+    return customIcon.url
+  }
+
+  return null
+}
+
+const normalizePath = (value?: string | null) => {
+  if (!value) return '/'
+
+  const [base] = value.split(/[?#]/)
+
+  if (!base) return '/'
+
+  if (base !== '/' && base.endsWith('/')) {
+    return base.slice(0, -1)
+  }
+
+  return base || '/'
+}
+
+const normalizeProductRoute = (href?: string | null, label?: string | null) => {
+  const normalizedHref = normalizePath(href)
+  const normalizedLabel = (label || '').toLowerCase().trim()
+
+  if (normalizedHref === '/templates' || normalizedLabel === 'templates') {
+    return '/products/templates'
+  }
+
+  if (normalizedHref === '/components' || normalizedLabel === 'components') {
+    return '/products/components'
+  }
+
+  return normalizedHref
+}
+
+const isPathActive = (href: string, currentPathname: string, label?: string | null) => {
+  const normalizedHref = normalizeProductRoute(href, label)
+  const normalizedCurrentPathname = normalizePath(currentPathname)
+
+  if (normalizedHref === normalizedCurrentPathname) return true
+  if (normalizedHref === '/') return false
+
+  return normalizedCurrentPathname.startsWith(`${normalizedHref}/`)
+}
+
+const renderIcon = (iconName?: string | null, className?: string, customIcon?: any) => {
+  const customUrl = resolveCustomIconUrl(customIcon)
+
+  if (customUrl) {
+    return (
+      <img
+        src={customUrl}
+        className={className || 'size-5'}
+        alt=""
+        aria-hidden="true"
+        loading="lazy"
+      />
+    )
+  }
+
+  if (!iconName) return null
+
+  const IconComponent = (LucideIcons as any)[iconName]
+
+  if (!IconComponent) return null
+
+  return <IconComponent className={className || 'size-5'} />
+}
+
+const menuButtonVariants = {
+  top: {
+    closed: { rotate: 0, translateY: 0 },
+    open: { rotate: 45, translateY: 6 }
+  },
+  middle: {
+    closed: { opacity: 1 },
+    open: { opacity: 0 }
+  },
+  bottom: {
+    closed: { rotate: 0, translateY: 0 },
+    open: { rotate: -45, translateY: -6 }
+  }
+}
+
+const barClass = 'menubar absolute left-0 h-[1.8px] w-full bg-current'
+
+export default function MobileBottomNav({ data }: MobileBottomNavProps) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [expandedDropdown, setExpandedDropdown] = useState<number | null>(null)
+
+  const pathname = usePathname()
+  const normalizedCurrentPathname = useMemo(() => normalizePath(pathname), [pathname])
+
+  const navItems = data?.header02?.navItems || []
+  const showLabels = data?.header02?.showMobileLabels ?? true
+
+  useEffect(() => {
+    if (isMenuOpen) {
+      const scrollY = window.scrollY
+
+      document.documentElement.style.overflow = 'hidden'
+      document.documentElement.style.touchAction = 'none'
+      document.documentElement.style.overscrollBehavior = 'none'
+
+      document.body.style.overflow = 'hidden'
+      document.body.style.position = 'fixed'
+      document.body.style.top = `-${scrollY}px`
+      document.body.style.width = '100%'
+      document.body.style.touchAction = 'none'
+      document.body.style.overscrollBehavior = 'none'
+    } else {
+      const scrollY = document.body.style.top
+
+      document.documentElement.style.overflow = ''
+      document.documentElement.style.touchAction = ''
+      document.documentElement.style.overscrollBehavior = ''
+
+      document.body.style.overflow = ''
+      document.body.style.position = ''
+      document.body.style.top = ''
+      document.body.style.width = ''
+      document.body.style.touchAction = ''
+      document.body.style.overscrollBehavior = ''
+
+      window.scrollTo(0, parseInt(scrollY || '0', 10) * -1)
+    }
+
+    return () => {
+      document.documentElement.style.overflow = ''
+      document.documentElement.style.touchAction = ''
+      document.documentElement.style.overscrollBehavior = ''
+
+      document.body.style.overflow = ''
+      document.body.style.position = ''
+      document.body.style.top = ''
+      document.body.style.width = ''
+      document.body.style.touchAction = ''
+      document.body.style.overscrollBehavior = ''
+    }
+  }, [isMenuOpen])
+
+  // Include both simple links and dropdowns (using first child's link)
+  const bottomNavLinks = navItems.slice(0, 4)
+
+  const toggleDropdown = (index: number) => {
+    setExpandedDropdown(expandedDropdown === index ? null : index)
+  }
+
+  // Helper to get URL for bottom nav items (handles both links and dropdowns)
+  const getBottomNavHref = (navItem: any) => {
+    const label = getBottomNavLabel(navItem)
+
+    if (navItem.type === 'link') {
+      return normalizeProductRoute(getLinkHref(navItem.link), label)
+    }
+
+    const children =
+      navItem.v1_children ||
+      navItem.v2_children ||
+      navItem.v4_children ||
+      navItem.v5_children ||
+      navItem.v6_children
+
+    return normalizeProductRoute(children?.[0]?.link ? getLinkHref(children[0].link) : '#', label)
+  }
+
+  // Helper to get label for bottom nav items
+  const getBottomNavLabel = (navItem: any) => {
+    return navItem.type === 'link' ? navItem.link?.label : navItem.label
+  }
+
+  // Helper to get icon for bottom nav items
+  const getBottomNavIcon = (navItem: any) => {
+    if (navItem.type === 'link') {
+      return renderIcon(navItem.link?.icon, 'size-6', navItem.link?.customIcon)
+    }
+    return renderIcon(navItem.triggerIcon, 'size-6')
+  }
+
+  return (
+    <>
+      <nav
+        className={cn(
+          'mobile-bottom-nav fixed bottom-0 left-0 right-0 z-[999] mx-4 mb-4 flex rounded-full border-t border-border px-4 backdrop-blur-md',
+          'bg-[var(--navbar-background)] shadow-[0_-2px_10px_rgba(0,0,0,0.1)]',
+          'pb-[env(safe-area-inset-bottom)] [filter:drop-shadow(2px_4px_6px_black)]',
+          'animate-[slideUpNav_0.3s_ease-out]',
+          'min-[978px]:hidden'
+        )}
+      >
+        <TooltipProvider>
+          <div className="relative flex w-full items-center justify-around px-2 py-0">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <motion.button
+                  aria-label={isMenuOpen ? 'Close menu' : 'Open menu'}
+                  aria-expanded={isMenuOpen}
+                  onClick={() => setIsMenuOpen(!isMenuOpen)}
+                  whileTap={{ scale: 0.96 }}
+                  className="menu-btn flex h-8 flex-col items-center justify-center gap-1 bg-transparent px-3 pt-1 text-stone-300 dark:text-stone-300 transition-all duration-200 hover:bg-black/10 hover:text-foreground hover:duration-200 [&_svg]:scale-100 [&_svg]:transition-all [&_svg]:duration-200 hover:[&_svg]:scale-105"
+                >
+                  <span className="relative block h-4 w-4">
+                    <motion.span
+                      className={barClass}
+                      style={{ top: '0px' }}
+                      animate={isMenuOpen ? 'open' : 'closed'}
+                      variants={menuButtonVariants.top}
+                      transition={{ type: 'spring', stiffness: 600, damping: 30 }}
+                    />
+
+                    <motion.span
+                      className={barClass}
+                      style={{ top: '6px' }}
+                      animate={isMenuOpen ? 'open' : 'closed'}
+                      variants={menuButtonVariants.middle}
+                      transition={{ duration: 0.18, ease: [0.22, 1, 0.36, 1] }}
+                    />
+
+                    <motion.span
+                      className="menubar absolute left-0 h-[1.8px] w-full bg-lime-500"
+                      style={{ top: '12px' }}
+                      animate={isMenuOpen ? 'open' : 'closed'}
+                      variants={menuButtonVariants.bottom}
+                      transition={{ type: 'spring', stiffness: 600, damping: 30 }}
+                    />
+                  </span>
+
+                  {showLabels && <span className="text-xs font-medium">Menu</span>}
+                </motion.button>
+              </TooltipTrigger>
+
+              <TooltipContent className="bg-white text-black">
+                {isMenuOpen ? 'Close menu' : 'Menu'}
+              </TooltipContent>
+            </Tooltip>
+
+            {bottomNavLinks.map((navItem, index) => {
+              const label = getBottomNavLabel(navItem)
+              const href = getBottomNavHref(navItem)
+              const isActive = isPathActive(href, normalizedCurrentPathname, label)
+              const icon = getBottomNavIcon(navItem)
+              const showLabelForItem =
+                navItem.type === 'link' ? showLabels && (navItem.showLabel ?? true) : showLabels
+
+              return (
+                <Tooltip key={index}>
+                  <TooltipTrigger asChild>
+                    <Link
+                      href={href}
+                      className={cn(
+                        'nav-button flex h-8 w-8 flex-col items-center justify-center gap-1 px-3 py-0 text-stone-300 dark:text-stone-300 transition-colors hover:text-foreground',
+                        isActive &&
+                          'nav-button-active border-b-[3px] border-lime-500 font-semibold text-foreground transition-all duration-300'
+                      )}
+                      {...(navItem.type === 'link' && navItem.link?.newTab
+                        ? { target: '_blank', rel: 'noopener noreferrer' }
+                        : {})}
+                      aria-current={isActive ? 'page' : undefined}
+                      aria-label={label || undefined}
+                      onClick={() => setIsMenuOpen(false)}
+                    >
+                      {icon || <Home className="size-6" />}
+
+                      {showLabelForItem && (
+                        <span className="max-w-[60px] truncate text-xs font-medium">{label}</span>
+                      )}
+                    </Link>
+                  </TooltipTrigger>
+
+                  <TooltipContent className="bg-white text-black">{label}</TooltipContent>
+                </Tooltip>
+              )
+            })}
+          </div>
+        </TooltipProvider>
+      </nav>
+
+      {/* <div className="fixed bottom-[0.3rem] left-0 right-0 mx-auto h-16 w-[calc(100dvw-1.5rem)] rounded-[10rem] bg-[#f0f8ff30] backdrop-blur-[10px] min-[978px]:hidden" /> */}
+
+      <AnimatePresence>
+        {isMenuOpen && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="fixed inset-0 z-[100] bg-background/95 backdrop-blur-md"
+            onClick={() => setIsMenuOpen(false)}
+          >
+            <motion.div
+              initial={{ y: '100%' }}
+              animate={{ y: 0 }}
+              exit={{ y: '100%' }}
+              transition={{ duration: 0.3, ease: 'easeOut' }}
+              className="absolute inset-0 flex flex-col bg-background"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className="MobileBottomNav-drawer sticky top-0 z-10 flex flex-shrink-0 items-center justify-between border-b border-border bg-background/95 px-4 py-4 pt-16 backdrop-blur-md">
+                <h2 className="text-lg font-semibold">Menu</h2>
+              </div>
+
+              <div
+                className="scrollContainer min-h-0 flex-1 space-y-2 overflow-y-auto px-4 py-6 pb-20"
+                data-lenis-prevent
+              >
+                {navItems.map((navItem, index) => {
+                  if (navItem.type === 'link') {
+                    const label = getBottomNavLabel(navItem)
+                    const href = normalizeProductRoute(getLinkHref(navItem.link), label)
+                    const isActive = isPathActive(href, normalizedCurrentPathname, label)
+                    const icon = renderIcon(navItem.link?.icon, 'size-5', navItem.link?.customIcon)
+                    const iconPosition = navItem.link?.iconPosition || 'before'
+
+                    return (
+                      <Link
+                        key={index}
+                        href={href}
+                        aria-current={isActive ? 'page' : undefined}
+                        onClick={() => setIsMenuOpen(false)}
+                        className={cn(
+                          'flex items-center gap-3 rounded-lg px-4 py-3 transition-colors hover:bg-stone-800/30',
+                          isActive && 'bg-accent font-semibold text-accent-foreground'
+                        )}
+                        {...(navItem.link?.newTab
+                          ? { target: '_blank', rel: 'noopener noreferrer' }
+                          : {})}
+                      >
+                        {icon && iconPosition === 'before' && icon}
+                        <span className="text-base font-medium">{navItem.link?.label}</span>
+                        {icon && iconPosition === 'after' && icon}
+                      </Link>
+                    )
+                  }
+
+                  const triggerIcon = renderIcon(navItem.triggerIcon, 'size-5')
+                  const isExpanded = expandedDropdown === index
+
+                  return (
+                    <div key={index} className="overflow-hidden rounded-lg border border-border">
+                      <button
+                        aria-expanded={isExpanded}
+                        onClick={() => toggleDropdown(index)}
+                        className="flex w-full items-center justify-between px-4 py-3 transition-colors hover:bg-stone-800/30"
+                      >
+                        <div className="flex items-center gap-3">
+                          {triggerIcon}
+                          <span className="text-base font-medium">{navItem.label}</span>
+                        </div>
+
+                        <ChevronDown
+                          className={cn(
+                            'size-5 transition-transform duration-200',
+                            isExpanded && 'rotate-180'
+                          )}
+                        />
+                      </button>
+
+                      <AnimatePresence>
+                        {isExpanded && (
+                          <motion.div
+                            initial={{ height: 0, opacity: 0 }}
+                            animate={{ height: 'auto', opacity: 1 }}
+                            exit={{ height: 0, opacity: 0 }}
+                            transition={{ duration: 0.2 }}
+                            className="overflow-hidden bg-muted/50"
+                          >
+                            {navItem.type === 'dropdown-richtext' && (
+                              <div className="space-y-4 p-4">
+                                {navItem.richTextContent && (
+                                  <div className="rounded-md bg-gradient-to-b from-muted/50 to-muted px-3 py-2">
+                                    <RichText
+                                      data={navItem.richTextContent}
+                                      enableGutter={false}
+                                      enableProse={false}
+                                      className="text-sm"
+                                    />
+                                  </div>
+                                )}
+
+                                <div className="space-y-1 grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8 ">
+                                  {navItem.v1_children?.map((child, childIndex) => {
+                                    const childLabel = child.link?.label
+                                    const childHref = normalizeProductRoute(
+                                      getLinkHref(child.link),
+                                      childLabel
+                                    )
+                                    const isChildActive = isPathActive(
+                                      childHref,
+                                      normalizedCurrentPathname,
+                                      childLabel
+                                    )
+                                    const childIcon = renderIcon(
+                                      child.link?.icon,
+                                      'size-5',
+                                      child.link?.customIcon
+                                    )
+                                    const childIconPosition = child.link?.iconPosition || 'before'
+                                    const showChildLabel =
+                                      showLabels &&
+                                      (('showLabel' in child ? child.showLabel : undefined) ?? true)
+
+                                    return (
+                                      <Link
+                                        key={childIndex}
+                                        href={childHref}
+                                        aria-current={isChildActive ? 'page' : undefined}
+                                        onClick={() => setIsMenuOpen(false)}
+                                        className={cn(
+                                          'rounded-md px-1 py-1 md:px-3 md:py-2 transition-colors hover:bg-stone-800/30 flex flex-col items-start justify-end align-top',
+                                          isChildActive &&
+                                            'bg-accent font-semibold text-stone-200 dark:text-stone-200'
+                                        )}
+                                      >
+                                        <div className="flex items-center gap-3">
+                                          {childIcon && childIconPosition === 'before' && childIcon}
+
+                                          {/* show Label inside menu */}
+                                          <span className="text-sm font-medium text-stone-200 dark:text-stone-200">
+                                            {child.link?.label}
+                                          </span>
+
+                                          {/* {showChildLabel && (
+                                            <span className="text-sm font-medium text-stone-200 dark:text-stone-200">
+                                              {child.link?.label}
+                                            </span>
+                                          )} */}
+
+                                          {childIcon && childIconPosition === 'after' && childIcon}
+                                        </div>
+
+                                        {'description' in child && child.description && (
+                                          <p className="mt-1 text-xs text-stone-400 dark:text-stone-400 text-ellipsis [-webkit-line-clamp:2] [display:-webkit-box] [-webkit-box-orient:vertical] overflow-hidden">
+                                            {child.description}
+                                          </p>
+                                        )}
+                                      </Link>
+                                    )
+                                  })}
+                                </div>
+                              </div>
+                            )}
+
+                            {(navItem.type === 'dropdown-single-desc' ||
+                              navItem.type === 'dropdown-single' ||
+                              navItem.type === 'dropdown-icons') && (
+                              <div className="space-y-1 p-4">
+                                {(navItem.type === 'dropdown-single-desc'
+                                  ? navItem.v4_children
+                                  : navItem.type === 'dropdown-single'
+                                    ? navItem.v5_children
+                                    : navItem.v6_children
+                                )?.map((child, childIndex) => (
+                                  <Link
+                                    key={childIndex}
+                                    href={normalizeProductRoute(getLinkHref(child.link), child.link?.label)}
+                                    onClick={() => setIsMenuOpen(false)}
+                                    className="block rounded-md px-3 py-2 transition-colors hover:bg-stone-800/30"
+                                  >
+                                    <div className="flex items-center gap-2">
+                                      {renderIcon(child.link?.icon, 'size-4')}
+
+                                      <span className="text-sm font-medium text-stone-200 dark:text-stone-200">
+                                        {child.link?.label}
+                                      </span>
+                                    </div>
+
+                                    {'description' in child && child.description && (
+                                      <p className="mt-1 text-xs text-stone-300 dark:text-stone-300 text-ellipsis [-webkit-line-clamp:2] [display:-webkit-box] [-webkit-box-orient:vertical] overflow-hidden">
+                                        {String(child.description)}
+                                      </p>
+                                    )}
+                                  </Link>
+                                ))}
+                              </div>
+                            )}
+                          </motion.div>
+                        )}
+                      </AnimatePresence>
+                    </div>
+                  )
+                })}
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <style jsx global>{`
+        @keyframes slideUpNav {
+          from {
+            transform: translateY(100%);
+            opacity: 0;
+          }
+
+          to {
+            transform: translateY(0);
+            opacity: 1;
+          }
+        }
+      `}</style>
+    </>
+  )
+}

package/templates/components/HeaderDD02/README.md

@@ -0,0 +1,45 @@
+# HeaderDD02
+
+HeaderDD02 is the exported Header02 implementation from DesignsDustedv3.
+
+This header uses the shared `defaultLexical` editor standard from `@/fields/defaultLexical`. Project-specific Lexical blocks are intentionally not bundled. The nested `BlocksFeature` uses an empty `blocks` array so each target project can register only the blocks it requires.
+
+Included files:
+
+- `index.tsx` for the HeaderDD02 desktop runtime.
+- `MobileBottomNav/index.tsx` because Header02 imports it directly.
+- `config.ts` for the Header02 field structure adapted to `HeaderDD02` and `defaultLexical`.
+- `RowLabel.tsx` because the Header02 config references `/Header/RowLabel.tsx#RowLabel` for Payload admin array labels.
+
+Not included:
+
+- Header01 and Header03 implementations.
+- The parent multi-variant Header shell.
+- Source project Lexical blocks: `AnimatedText`, `ButtonWithIcon`, `CounterBlock`, and `MediaBlock`.
+
+Before activating this header in an existing project, inspect the current Header global schema and stored Header data. The template installer copies files and backs up the `HeaderDD02` destination folder when it already exists, but it does not automatically replace the active Header global or inspect database content.
+
+## AI handover prompt
+
+```prompt
+Review the newly installed HeaderDD02 files and integrate them into this project
+
+Do not assume the source project architecture matches this repository.
+
+Tasks:
+
+1. Inspect the current Header component, Payload Header global, frontend layout, fields, utilities, generated types and styling conventions.
+2. Resolve HeaderDD02 imports against the current project.
+3. Reuse existing project utilities and fields where appropriate.
+4. Adapt HeaderDD02 config to the current Header global without deleting or destructively renaming existing database-backed fields.
+5. Keep the shared defaultLexical standard.
+6. Keep BlocksFeature({ blocks: [] }).
+7. Integrate the component into the existing header render flow.
+8. Preserve the existing layout, providers, transitions and mobile behaviour.
+9. Add any required CSS variables or utility classes using the current project's styling system.
+10. Report every file modified and any manual content migration required.
+
+Do not modify database records automatically.
+Do not run destructive migrations.
+Do not remove the existing header until the replacement is verified.
+```

package/templates/components/HeaderDD02/RowLabel.tsx

@@ -0,0 +1,33 @@
+'use client'
+import { RowLabelProps, useRowLabel } from '@payloadcms/ui'
+
+export const RowLabel: React.FC<RowLabelProps> = () => {
+  const data = useRowLabel<any>()
+
+  // Handle different data structures:
+  // 2. Nested link in Header02: data.link.label, data.link.url
+  // Type-based items in HeaderDD02 use data.label for dropdowns.
+
+  const getLinkLabel = () => {
+    // Check for dropdown type items (Header02 dropdowns)
+    if (data?.data?.type && data?.data?.type !== 'link') {
+      return data?.data?.label || 'Dropdown'
+    }
+
+    // Check for nested link structure (Header02 simple links)
+    if (data?.data?.link) {
+      return data.data.link.label || data.data.link.url
+    }
+
+    // Fallback for direct link fields in customised target headers.
+    return data?.data?.label || data?.data?.url
+  }
+
+  const linkLabel = getLinkLabel()
+
+  const label = linkLabel
+    ? `Nav item ${data.rowNumber !== undefined ? data.rowNumber + 1 : ''}: ${linkLabel}`
+    : `Row ${data.rowNumber !== undefined ? data.rowNumber + 1 : ''}`
+
+  return <div>{label}</div>
+}