blocks-dusted 0.1.10 → 0.1.12

package/templates/shared/src/components/ui/separator.tsx

@@ -0,0 +1,85 @@
+import { cn } from '@/utilities/ui'
+//import { FaPlus } from 'react-icons/fa';
+
+/**
+ *
+ * USAGE EXAMPLES
+ *
+ * const Usage = () => (
+  <div>
+    <Separator gradient />
+    <Separator />
+    <Separator label={<span className="px-2">Section</span>} gradient />
+    <Separator label={<span className="px-2">Section</span>} />
+    <Separator
+      label={
+        <div className="border px-4 py-1 rounded-full border-dashed">
+          Section
+        </div>
+      }
+      gradient
+    />
+    <Separator
+      label={<div className="border px-4 py-1 rounded-full">Section</div>}
+    />
+    <Separator
+      label={
+        <div className="border px-12 py-2 rounded-full">
+          <FaPlus />
+        </div>
+      }
+      gradient
+    />
+  </div>
+);
+ */
+type SeparatorProps = {
+  /**
+   * @default ""
+   */
+  label?: React.ReactNode
+  /**
+   * @default false
+   */
+  gradient?: boolean
+  className?: string
+}
+//======================================
+export const Separator = ({ label, gradient = false, className = '' }: SeparatorProps) => {
+  if (label) {
+    return (
+      <div className="separator-container flex items-center w-full">
+        <div
+          className={cn(
+            'rounded-full w-full h-[0.3px]',
+            gradient
+              ? 'bg-gradient-to-r from-transparent dark:from-zinc-800 dark:to-zinc-400 to-zinc-500'
+              : 'bg-white dark:bg-gradient ',
+            className
+          )}
+        ></div>
+        <div className="text-gray-600 uppercase w-fit dark:text-gray-300 text-nowrap">{label}</div>
+        <div
+          className={cn(
+            'rounded-full w-full h-[1px]',
+            gradient
+              ? 'bg-gradient-to-r from-zinc-500 dark:from-zinc-200 to-transparent dark:to-zinc-500'
+              : 'bg-white dark:bg-gradient ',
+            className
+          )}
+        ></div>
+      </div>
+    )
+  }
+  return (
+    <div
+      className={cn(
+        'rounded-full w-full h-[1px]',
+        gradient
+          ? 'bg-gradient-to-r from-transparent via-zinc-500 dark:via-zinc-200 to-transparent dark:from-zinc-800 dark:to-zinc-700'
+          : 'bg-white/10 dark:bg-white/10',
+        className
+      )}
+    />
+  )
+}

package/templates/shared/src/hooks/useBodyScrollLock.ts

@@ -0,0 +1,97 @@
+'use client'
+
+import { useEffect } from 'react'
+
+/**
+ * Hook to lock body scroll when a modal is open
+ * Handles both standard scrolling and Locomotive Scroll
+ * Applies to both html and body elements for maximum compatibility
+ *
+ * @param isLocked - Whether the body scroll should be locked
+ * @param scrollYDataKey - Optional key for storing scroll position in dataset (default: 'modalScrollY')
+ */
+export function useBodyScrollLock(isLocked: boolean, scrollYDataKey: string = 'modalScrollY') {
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+
+    const html = document.documentElement
+    const body = document.body
+
+    if (!isLocked) {
+      // Restore scroll
+      const scrollYRaw = body.dataset[scrollYDataKey]
+      const scrollY = scrollYRaw ? Number(scrollYRaw) : 0
+
+      // Remove lock styles from html
+      html.style.overflow = ''
+      html.style.height = ''
+
+      // Remove lock styles from body
+      body.style.overflow = ''
+      body.style.position = ''
+      body.style.top = ''
+      body.style.width = ''
+      body.style.height = ''
+      delete body.dataset[scrollYDataKey]
+
+      window.scrollTo(0, scrollY)
+
+      // Resume Locomotive Scroll if available
+      const locoScroll = (window as any).locoScroll
+      if (locoScroll && typeof locoScroll.start === 'function') {
+        locoScroll.start()
+      }
+
+      return
+    }
+
+    // Lock scroll
+    const scrollY = window.scrollY
+    const locoScroll = (window as any).locoScroll
+
+    // Stop Locomotive Scroll if available
+    if (locoScroll && typeof locoScroll.stop === 'function') {
+      locoScroll.stop()
+    }
+
+    // Save scroll position and lock both html and body
+    body.dataset[scrollYDataKey] = String(scrollY)
+
+    // Lock html element
+    html.style.overflow = 'hidden'
+    html.style.height = '100%'
+
+    // Lock body element with fixed positioning
+    body.style.overflow = 'hidden'
+    body.style.position = 'fixed'
+    body.style.top = `-${scrollY}px`
+    body.style.width = '100%'
+    body.style.height = '100%'
+
+    // Cleanup on unmount
+    return () => {
+      const scrollYRaw = body.dataset[scrollYDataKey]
+      const scrollY = scrollYRaw ? Number(scrollYRaw) : 0
+
+      // Remove lock styles from html
+      html.style.overflow = ''
+      html.style.height = ''
+
+      // Remove lock styles from body
+      body.style.overflow = ''
+      body.style.position = ''
+      body.style.top = ''
+      body.style.width = ''
+      body.style.height = ''
+      delete body.dataset[scrollYDataKey]
+
+      window.scrollTo(0, scrollY)
+
+      // Resume Locomotive Scroll if available
+      const locoScroll = (window as any).locoScroll
+      if (locoScroll && typeof locoScroll.start === 'function') {
+        locoScroll.start()
+      }
+    }
+  }, [isLocked, scrollYDataKey])
+}

package/templates/shared/src/hooks/useClickOutside.ts

@@ -0,0 +1,28 @@
+'use client'
+
+import { useEffect, RefObject } from 'react'
+
+export function useClickOutside<T extends HTMLElement = HTMLElement>(
+  ref: RefObject<T>,
+  handler: (event: MouseEvent | TouchEvent) => void,
+) {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      const el = ref?.current
+      if (!el || el.contains(event.target as Node)) {
+        return
+      }
+      handler(event)
+    }
+
+    document.addEventListener('mousedown', listener)
+    document.addEventListener('touchstart', listener)
+
+    return () => {
+      document.removeEventListener('mousedown', listener)
+      document.removeEventListener('touchstart', listener)
+    }
+  }, [ref, handler])
+}
+
+export default useClickOutside

package/templates/shared/src/utilities/renderCustomCSS.ts

@@ -0,0 +1,5 @@
+export const extractCustomCSS = (blocks: any[]) =>
+  (Array.isArray(blocks) ? blocks : [])
+    ?.filter((block) => block.blockType === 'customCSS')
+    .map((block) => block.css)
+    .join('\n')

package/templates/shared/src/utilities/smoothScroll.ts

@@ -0,0 +1,65 @@
+import { gsap } from 'gsap'
+import { ScrollToPlugin } from 'gsap/ScrollToPlugin'
+
+// Register the ScrollToPlugin
+gsap.registerPlugin(ScrollToPlugin)
+
+export interface SmoothScrollOptions {
+  duration?: number
+  offsetY?: number
+  ease?: string
+  onComplete?: () => void
+  onStart?: () => void
+}
+
+/**
+ * Smooth scroll to an element using GSAP
+ * @param targetId - The ID of the target element (with or without #)
+ * @param options - Scroll options
+ */
+export const smoothScrollTo = (targetId: string, options: SmoothScrollOptions = {}): void => {
+  const { duration = 1, offsetY = 80, ease = 'power2.out', onComplete, onStart } = options
+
+  // Remove the # from the beginning of the targetId if it exists
+  const cleanTargetId = targetId.startsWith('#') ? targetId.slice(1) : targetId
+
+  // Check if the target element exists
+  const targetElement = document.getElementById(cleanTargetId)
+  if (!targetElement) {
+    console.warn(`Element with id "${cleanTargetId}" not found`)
+    return
+  }
+
+  // Call onStart callback if provided
+  onStart?.()
+
+  gsap.to(window, {
+    duration,
+    scrollTo: { y: `#${cleanTargetId}`, offsetY },
+    ease,
+    onComplete,
+  })
+}
+
+/**
+ * Check if a URL is an anchor link
+ */
+export const isAnchorLink = (url: string): boolean => {
+  return url.startsWith('#')
+}
+
+/**
+ * Handle click event for smooth scrolling anchor links
+ */
+export const handleAnchorClick = (
+  href: string,
+  event?: React.MouseEvent,
+  options?: SmoothScrollOptions,
+): boolean => {
+  if (isAnchorLink(href)) {
+    event?.preventDefault()
+    smoothScrollTo(href, options)
+    return true // Indicates that smooth scroll was handled
+  }
+  return false // Indicates that this is not an anchor link
+}