blocks-dusted 0.1.10 → 0.1.12

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

@@ -0,0 +1,455 @@
+'use client'
+
+import React from 'react'
+import { cn } from '@/utilities/ui'
+import Link from 'next/link'
+import * as LucideIcons from 'lucide-react'
+import type { Page, Post } from '@/payload-types'
+import { ShareButton } from '@/components/ui/ShareButton'
+import { smoothScrollTo, isAnchorLink } from '@/utilities/smoothScroll'
+import { usePathname, useRouter } from 'next/navigation'
+
+const useDrawerClose = () => undefined
+
+type DisplayMode = 'iconWithLabel' | 'iconOnly' | 'labelOnly' | 'share'
+type ButtonStyle =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'outline'
+  | 'ghost'
+  | 'destructive'
+  | 'v1'
+  | 'v2'
+  | 'v3'
+  | 'v4'
+  | 'v5'
+  | 'v6'
+  | 'v7'
+  | 'v8'
+type ButtonSize = 'small' | 'medium' | 'large'
+type IconPosition = 'before' | 'after'
+
+type LinkReference =
+  | { relationTo: 'pages'; value: number | Page }
+  | { relationTo: 'posts'; value: number | Post }
+
+export type LinkType = {
+  type?: 'reference' | 'custom' | null
+  url?: string | null
+  reference?: LinkReference | null
+  label: string
+  newTab?: boolean | null
+  appearance?: 'default' | 'outline' | null
+  icon?: string | null
+}
+
+export type ButtonWithIconProps = {
+  iconButtonContainerClass?: string
+  enableGutter?: boolean
+  buttonText?: string
+  buttonStyle?: ButtonStyle
+  displayMode?: DisplayMode
+  iconName?: string
+  iconPosition?: IconPosition
+  link?: LinkType | string
+  size?: ButtonSize
+  overrideSizeClasses?: string
+  onToggle?: () => void
+  scrollDuration?: number
+  scrollOffset?: number
+  closeDrawerOnClick?: boolean
+}
+
+export const DDIconButton: React.FC<ButtonWithIconProps> = ({
+  iconButtonContainerClass,
+  enableGutter = true,
+  buttonText,
+  buttonStyle = 'primary',
+  displayMode = 'iconWithLabel',
+  iconName,
+  iconPosition = 'before',
+  link,
+  size = 'medium',
+  overrideSizeClasses,
+  onToggle,
+  scrollDuration = 1,
+  scrollOffset = 80,
+  closeDrawerOnClick = true
+}) => {
+  const pathname = usePathname()
+  const router = useRouter()
+  const isNavigating = false
+  const closeDrawer = useDrawerClose?.() || (() => {})
+
+  const toPascalCase = (value: string): string => {
+    const parts = value
+      .trim()
+      .split(/[^a-zA-Z0-9]+/)
+      .filter(Boolean)
+
+    return parts
+      .map((part) => {
+        if (/^\d+$/.test(part)) return part
+        return part.charAt(0).toUpperCase() + part.slice(1)
+      })
+      .join('')
+  }
+
+  const resolveLucideIconComponent = (name?: string | null) => {
+    if (!name) return null
+
+    const trimmed = name.trim()
+    if (!trimmed) return null
+
+    const candidates = [
+      trimmed,
+      trimmed.charAt(0).toUpperCase() + trimmed.slice(1),
+      toPascalCase(trimmed)
+    ]
+
+    for (const candidate of candidates) {
+      const maybe = (LucideIcons as unknown as Record<string, unknown>)[candidate]
+
+      const isComponent =
+        typeof maybe === 'function' ||
+        (typeof maybe === 'object' && maybe !== null && '$$typeof' in (maybe as any))
+
+      if (isComponent) return maybe as React.ComponentType<{ className?: string }>
+    }
+
+    return null
+  }
+
+  const effectiveIconName = typeof link === 'object' && link?.icon ? link.icon : iconName
+  const IconComponent = resolveLucideIconComponent(effectiveIconName)
+
+  const handleNavigation = (href: string, e?: React.MouseEvent) => {
+    e?.preventDefault()
+
+    if (closeDrawerOnClick) {
+      closeDrawer()
+    }
+
+    setTimeout(
+      () => {
+        router.push(href)
+      },
+      closeDrawerOnClick ? 150 : 0
+    )
+  }
+
+  const handleClick = (href: string, e?: React.MouseEvent) => {
+    const hashIndex = href.indexOf('#')
+    const hasHash = hashIndex >= 0
+    const basePath = hasHash ? href.slice(0, hashIndex) : href
+    const hash = hasHash ? href.slice(hashIndex) : ''
+
+    const normalise = (p?: string) => (p ? p.replace(/\/$/, '') : '')
+    const isSamePageHash =
+      hasHash && (basePath === '' || normalise(basePath) === normalise(pathname))
+
+    if (isAnchorLink(href) || isSamePageHash) {
+      e?.preventDefault()
+
+      if (closeDrawerOnClick) {
+        closeDrawer()
+      }
+
+      const target = hash || href
+
+      smoothScrollTo(target, {
+        duration: scrollDuration,
+        offsetY: scrollOffset,
+        ease: 'power2.out'
+      })
+
+      onToggle?.()
+      return
+    }
+
+    if (href && href !== '#') {
+      handleNavigation(href, e)
+    }
+
+    onToggle?.()
+  }
+
+  const getDocumentSlug = (doc: Page | Post | number): string | null => {
+    if (typeof doc === 'number') return null
+    return (doc as any)?.slug || null
+  }
+
+  const getPageURLFromDoc = (doc: Page | number): string | null => {
+    if (typeof doc === 'number') return null
+
+    const anyDoc = doc as any
+    const slug = anyDoc?.slug as string | undefined
+
+    if (!slug) return null
+    if (slug === 'home' || slug === '') return '/home'
+
+    return slug.startsWith('/') ? slug : `/${slug}`
+  }
+
+  const isExternalUrl = (url: string): boolean => {
+    return (
+      url.startsWith('http://') ||
+      url.startsWith('https://') ||
+      url.startsWith('mailto:') ||
+      url.startsWith('tel:')
+    )
+  }
+
+  let href = '#'
+  let target: string | undefined
+  let rel: string | undefined
+
+  if (!link) {
+    href = '#'
+  } else if (typeof link === 'string') {
+    href = link
+  } else {
+    const isExternal = link.type === 'custom'
+
+    if (isExternal && link.url) {
+      href = link.url
+
+      if (isAnchorLink(link.url)) {
+        target = undefined
+        rel = undefined
+      } else if (isExternalUrl(link.url)) {
+        target = link.newTab !== false ? '_blank' : undefined
+        rel = link.newTab !== false ? 'noopener noreferrer' : undefined
+      } else {
+        target = link.newTab ? '_blank' : undefined
+        rel = link.newTab ? 'noopener noreferrer' : undefined
+      }
+    } else if (!isExternal && link.reference) {
+      const { relationTo, value } = link.reference
+
+      if (relationTo === 'pages') {
+        const pageHref = getPageURLFromDoc(value as Page | number)
+        if (pageHref) href = pageHref
+      } else if (relationTo === 'posts') {
+        const slug = getDocumentSlug(value as Post | number)
+        if (slug) href = `/thoughts/${slug}`
+      } else {
+        const slug = getDocumentSlug(value as any)
+        if (slug) href = `/${relationTo}/${slug}`
+      }
+
+      target = link.newTab ? '_blank' : undefined
+      rel = link.newTab ? 'noopener noreferrer' : undefined
+    }
+  }
+
+  const sizeClasses: Record<ButtonSize, string> = {
+    small: overrideSizeClasses || 'px-3 py-2 text-sm',
+    medium: overrideSizeClasses || 'px-4 py-2 text-base',
+    large: overrideSizeClasses || 'px-6 py-3 text-lg'
+  }
+
+  const styleClasses: Record<ButtonStyle, string> = {
+    default:
+      'bg-transparent text-[aliceblue] rounded-2xl squircle shadow-[var(--shadow-md)] border-2 border-[aliceblue] border-[ridge] brightness-100 max-h-fit transition-all duration-300 hover:brightness-110 hover:text-[var(--accent)] hover:border hover:border-[outset] hover:border-[var(--accent)] hover:shadow-[var(--shadow-xl)] [&_svg]:scale-100 [&_svg]:transition-all [&_svg]:duration-300 hover:[&_svg]:scale-110',
+
+    primary:
+      'bg-[#242845] text-[aliceblue] rounded-2xl squircle border border-[outset] border-[rgba(253,253,253,0.2)] brightness-100 max-h-fit !no-underline transition-all duration-300 hover:bg-[rgba(253,253,253,0.7)] hover:text-[#242845] hover:brightness-100 hover:[&_svg]:!text-[#242845]',
+
+    secondary:
+      'bg-[rgba(253,253,253,0.7)] text-[#242845] rounded-2xl squircle border border-[outset] border-[rgba(253,253,253,0.2)] brightness-100 max-h-fit !no-underline transition-all duration-300 [&_svg]:!text-[#242845] hover:bg-[#242845] hover:text-[aliceblue] hover:brightness-100 hover:[&_svg]:!text-[aliceblue]',
+
+    outline:
+      'bg-transparent text-[aliceblue] rounded-2xl squircle shadow-[var(--shadow-md)] border-2 border-[aliceblue] border-[ridge] brightness-100 max-h-fit transition-all duration-300 hover:brightness-110 hover:text-[var(--accent)] hover:border hover:border-[outset] hover:border-[var(--accent)] hover:shadow-[var(--shadow-xl)] [&_svg]:scale-100 [&_svg]:transition-all [&_svg]:duration-300 hover:[&_svg]:scale-110',
+
+    ghost:
+      'bg-transparent text-[var(--text)] !border-0 max-h-fit transition-all duration-300 hover:text-[var(--accent)] hover:font-medium',
+
+    destructive:
+      "relative z-0 overflow-hidden bg-[var(--error)] !text-white rounded-2xl squircle border border-[outset] border-[var(--color-alt2)] brightness-100 max-h-fit shadow-[inset_0_0_20px_2px_rgb(73_17_10_/_90%),var(--shadow-md)] transition-all duration-300 before:content-[''] before:absolute before:inset-0 before:-z-10 before:bg-[url('/assets/svg/lines.svg')] before:bg-[length:10px_10px] before:bg-repeat before:opacity-100 before:pointer-events-none hover:!text-white hover:shadow-[inset_0_0_30px_2px_rgb(178_20_2),var(--shadow-xl)] hover:brightness-110",
+
+    v1: 'border-[0.5px] rounded-sm bg-transparent duration-200 bg-blur shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] active:shadow-none border-stone-800 text-zinc-800 dark:border-stone-600 dark:shadow-[3px_3px_0px_0px_rgba(255,255,255,0.7)] active:dark:shadow-none dark:text-zinc-50 dark:bg-zinc-950 px-3 py-1',
+    v2: 'group relative justify-center rounded-sm shadow-md overflow-hidden ease-in-out hover:scale-100 hover:shadow-lg text-zinc-50 bg-gradient-to-tr from-zinc-900 to-zinc-700 hover:shadow-zinc-500/30 dark:text-stone-900 dark:bg-gradient-to-tr dark:from-zinc-50 dark:to-zinc-100 dark:hover:shadow-zinc-700/30 px-3 py-1',
+    v3: 'relative overflow-hidden group hover:ring-2 hover:ring-offset-2 ease-out hover:bg-gradient-to-r bg-zinc-900 hover:from-zinc-800 hover:to-zinc-700 text-zinc-50 hover:ring-zinc-900 dark:bg-zinc-50 dark:hover:from-zinc-50 dark:hover:to-zinc-100 dark:text-zinc-800 dark:hover:ring-white dark:ring-offset-black px-3 py-1',
+    v4: 'group relative overflow-hidden rounded-md text-zinc-50 bg-gradient-to-tr duration-300 ease-in-out active:translate-y-0.5 active:scale-100 active:shadow-none from-zinc-800 to-zinc-700 shadow-[0px_3px_0px_rgba(82,82,91,0.9)] dark:active:shadow-none dark:from-zinc-50 dark:to-zinc-100 dark:shadow-[0px_3px_0px_rgba(161,161,170,0.9)] px-3 py-1',
+    v5: 'relative overflow-hidden border shadow group invert-[1] border-stone-300 text-zinc-800 bg-zinc-50 dark:border-stone-700 dark:text-zinc-100 dark:bg-zinc-950 px-3 py-1',
+    v6: 'relative rounded-sm border dark:border-stone-200 border-stone-600 group scale-y-[.88] scale-x-[0.97] group-hover:scale-100 duration-300 font-semibold transition dark:bg-zinc-50 bg-zinc-950 text-zinc-100 dark:text-zinc-800 px-3 py-1',
+    v7: "relative hover:no-underline px-[1px] pb-0 ease-in after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:translate-y-[3px] after:rounded-full after:dark:bg-zinc-50 after:bg-zinc-800 after:opacity-0 after:duration-300 after:content-[''] hover:after:-translate-y-1 hover:after:opacity-100 px-3 py-1",
+    v8: 'shadow-embossed hover:shadow-none ease-out hover:scale-100 dark:bg-[#121212] dark:text-[#999999] bg-zinc-50 text-stone-900 px-3 py-1'
+  }
+
+  const iconSizeClasses: Record<ButtonSize, string> = {
+    small: 'w-4 h-4',
+    medium: 'w-4 h-4',
+    large: 'w-6 h-6'
+  }
+
+  const buttonContent = () => {
+    switch (displayMode) {
+      case 'iconOnly':
+        return IconComponent ? (
+          <IconComponent className={iconSizeClasses[size]} />
+        ) : (
+          <span>No Icon</span>
+        )
+
+      case 'labelOnly':
+        return buttonText || 'Button'
+
+      case 'share':
+        return null
+
+      case 'iconWithLabel':
+      default:
+        return (
+          <div className="flex items-center justify-center gap-2">
+            {IconComponent && iconPosition === 'before' && (
+              <IconComponent className={iconSizeClasses[size]} />
+            )}
+            <span>{buttonText || 'Button'}</span>
+            {IconComponent && iconPosition === 'after' && (
+              <IconComponent className={iconSizeClasses[size]} />
+            )}
+          </div>
+        )
+    }
+  }
+
+  const getButtonContent = () => {
+    const baseContent = buttonContent()
+
+    switch (buttonStyle) {
+      case 'v2':
+        return (
+          <>
+            <span className="relative">{baseContent}</span>
+            <span
+              className="absolute inset-0 flex size-full justify-center [transform:skew(-14deg)_translateX(-100%)] group-hover:duration-1000 group-hover:[transform:skew(-14deg)_translateX(100%)]"
+              style={{ width: '200% !important' }}
+              aria-hidden="true"
+            >
+              <span className="relative h-full w-32 scale-200 bg-black/20 dark:bg-black/10" />
+            </span>
+          </>
+        )
+
+      case 'v3':
+        return (
+          <>
+            <span
+              className="absolute right-0 w-8 h-32 -mt-12 transition-all duration-1000 transform translate-x-12 bg-white/80 dark:bg-zinc-900 opacity-10 rotate-12 group-hover:-translate-x-60 ease"
+              aria-hidden="true"
+            />
+            <span className="relative">{baseContent}</span>
+          </>
+        )
+
+      case 'v4':
+        return (
+          <>
+            <span
+              className="absolute size-0 rounded-md bg-white/80 dark:bg-black/80 opacity-10 transition-all duration-300 ease-out group-hover:size-full !text-white !dark:text-black"
+              aria-hidden="true"
+            />
+            <span className="relative text-white dark:text-black">{baseContent}</span>
+          </>
+        )
+
+      default:
+        return <span className="relative">{baseContent}</span>
+    }
+  }
+
+  const buttonClasses = cn(
+    'inline-flex items-center justify-center font-medium transition-colors',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+    'disabled:pointer-events-none disabled:opacity-50',
+    'min-w-36 flex justify-center items-center [&_span]:tracking-[0.2em]',
+    !buttonStyle?.startsWith('v') && sizeClasses[size],
+    styleClasses[buttonStyle],
+    displayMode === 'iconOnly' && 'aspect-square'
+  )
+
+  const shareButtonContent = (
+    <ShareButton
+      links={[
+        {
+          icon: LucideIcons.Share2,
+          onClick: () => {
+            if (closeDrawerOnClick) closeDrawer()
+            window.open('https://twitter.com/share')
+          }
+        },
+        {
+          icon: LucideIcons.Share,
+          onClick: () => {
+            if (closeDrawerOnClick) closeDrawer()
+            window.open('https://facebook.com/share')
+          }
+        },
+        {
+          icon: LucideIcons.Link,
+          onClick: () => {
+            if (closeDrawerOnClick) closeDrawer()
+            window.open('https://linkedin.com/share')
+          }
+        },
+        {
+          icon: LucideIcons.Link2,
+          onClick: () => {
+            if (closeDrawerOnClick) closeDrawer()
+            navigator.clipboard.writeText(window.location.href)
+          }
+        }
+      ]}
+    >
+      {IconComponent && iconPosition === 'before' && (
+        <IconComponent className={iconSizeClasses[size]} />
+      )}
+      <span>{buttonText || 'Share'}</span>
+      {IconComponent && iconPosition === 'after' && (
+        <IconComponent className={iconSizeClasses[size]} />
+      )}
+    </ShareButton>
+  )
+
+  const standardButtonContent =
+    href && href !== '#' ? (
+      <button
+        className={cn(buttonClasses, isNavigating ? 'pointer-events-none opacity-50' : '')}
+        type="button"
+        onClick={(e) => handleClick(href, e)}
+        disabled={isNavigating}
+      >
+        {getButtonContent()}
+      </button>
+    ) : (
+      <button className={buttonClasses} type="button" onClick={(e) => handleClick(href, e)}>
+        {getButtonContent()}
+      </button>
+    )
+
+  const content = displayMode === 'share' ? shareButtonContent : standardButtonContent
+
+  return (
+    <div
+      className={cn(
+        'flex',
+        iconButtonContainerClass,
+        enableGutter && 'w-fit',
+        !enableGutter && 'py-4'
+      )}
+    >
+      {displayMode === 'share' ? (
+        content
+      ) : href && href !== '#' ? (
+        <Link href={href} target={target} rel={rel} onClick={(e) => handleClick(href, e)}>
+          {content}
+        </Link>
+      ) : (
+        content
+      )}
+    </div>
+  )
+}