@tuturuuu/ui 0.0.4 → 0.1.0

package/src/hooks/useHorizontalScroll.ts

@@ -0,0 +1,215 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+interface UseHorizontalScrollOptions {
+  scrollSpeed?: number;
+  enableTouchScroll?: boolean;
+  enableMouseWheel?: boolean;
+  isDragActive?: () => boolean; // Function to check if drag is active
+}
+
+export function useHorizontalScroll({
+  scrollSpeed = 0.5,
+  enableTouchScroll = true,
+  enableMouseWheel = true,
+  isDragActive,
+}: UseHorizontalScrollOptions = {}) {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const isDragging = useRef(false);
+  const startX = useRef(0);
+  const scrollLeft = useRef(0);
+  const dragStartTime = useRef(0);
+  const minimumDragDistance = 5; // Minimum pixels to move before starting scroll
+  const minimumDragTime = 150; // Minimum ms to hold before starting scroll
+
+  // Handle mouse wheel for horizontal scrolling
+  const handleWheel = useCallback(
+    (e: WheelEvent) => {
+      if (!scrollContainerRef.current || !enableMouseWheel) return;
+
+      // Don't interfere with drag and drop operations
+      if (isDragActive?.()) return;
+
+      // Check if the user is scrolling vertically with shift key or if deltaX is present
+      const isHorizontalScroll =
+        e.shiftKey || Math.abs(e.deltaX) > Math.abs(e.deltaY);
+
+      if (isHorizontalScroll) {
+        // Check if we're currently in a drag operation by checking for active elements
+        const hasActiveDraggable =
+          document.querySelector('[data-sortable-id][style*="transform"]') ||
+          document.querySelector('[draggable="true"][style*="transform"]');
+
+        if (hasActiveDraggable) return;
+
+        e.preventDefault();
+        const delta = e.shiftKey ? e.deltaY : e.deltaX;
+        scrollContainerRef.current.scrollLeft += delta * scrollSpeed;
+      }
+    },
+    [scrollSpeed, enableMouseWheel, isDragActive]
+  );
+
+  // Touch/mouse drag scrolling
+  const handleMouseDown = useCallback(
+    (e: MouseEvent | TouchEvent) => {
+      if (!scrollContainerRef.current || !enableTouchScroll) return;
+
+      // Don't interfere with drag and drop operations
+      if (isDragActive?.()) return;
+
+      // Check if the target has draggable attributes (dnd-kit elements)
+      const target = e.target as HTMLElement;
+      if (
+        target.closest('[data-rbd-draggable-id]') ||
+        target.closest('[draggable="true"]') ||
+        target.closest('[data-sortable-id]') ||
+        target.closest('[data-dnd-id]') ||
+        target.closest('[role="button"]') ||
+        target.closest('button') ||
+        target.closest('input') ||
+        target.closest('textarea') ||
+        target.closest('select') ||
+        target.closest('a') ||
+        target.closest('[data-id]') || // Task cards have data-id
+        target.closest('.task-card') || // Generic task card class
+        target.hasAttribute('draggable') ||
+        target.closest('[data-testid*="task"]') ||
+        // Check for any element that might be part of a draggable component
+        (target.closest('*[class*="task"]') &&
+          target.closest('*[class*="card"]'))
+      ) {
+        return;
+      }
+
+      // Only allow scrolling from the background/container areas
+      const isBackgroundArea =
+        target === scrollContainerRef.current ||
+        target.classList.contains('gap-4') ||
+        !target.closest('[data-id]');
+
+      if (!isBackgroundArea) {
+        return;
+      }
+
+      isDragging.current = true;
+      dragStartTime.current = Date.now();
+      scrollContainerRef.current.style.cursor = 'grabbing';
+      scrollContainerRef.current.style.userSelect = 'none';
+
+      const clientX = 'touches' in e ? e.touches[0]?.clientX : e.clientX;
+      if (clientX === undefined) return;
+
+      startX.current = clientX;
+      scrollLeft.current = scrollContainerRef.current.scrollLeft;
+    },
+    [enableTouchScroll, isDragActive]
+  );
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent | TouchEvent) => {
+      if (!isDragging.current || !scrollContainerRef.current) return;
+
+      // Stop scrolling if drag becomes active or if there are active draggable elements
+      if (isDragActive?.()) {
+        isDragging.current = false;
+        scrollContainerRef.current.style.cursor = 'grab';
+        scrollContainerRef.current.style.userSelect = '';
+        return;
+      }
+
+      // Additional check for active drag elements in the DOM
+      const hasActiveDraggable =
+        document.querySelector('[data-sortable-id][style*="transform"]') ||
+        document.querySelector('[draggable="true"][style*="transform"]') ||
+        document.querySelector('.dnd-overlay');
+
+      if (hasActiveDraggable) {
+        isDragging.current = false;
+        scrollContainerRef.current.style.cursor = 'grab';
+        scrollContainerRef.current.style.userSelect = '';
+        return;
+      }
+
+      e.preventDefault();
+      const clientX = 'touches' in e ? e.touches[0]?.clientX : e.clientX;
+      if (clientX === undefined) return;
+
+      const x = clientX;
+      const deltaX = Math.abs(x - startX.current);
+      const timeSinceStart = Date.now() - dragStartTime.current;
+
+      // Only start scrolling if we've moved enough distance and enough time has passed
+      // This prevents accidental scrolling during quick clicks or drag starts
+      if (deltaX < minimumDragDistance || timeSinceStart < minimumDragTime) {
+        return;
+      }
+
+      const walk = (x - startX.current) * 2; // Adjust scroll speed
+      scrollContainerRef.current.scrollLeft = scrollLeft.current - walk;
+    },
+    [isDragActive]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    if (!scrollContainerRef.current) return;
+
+    isDragging.current = false;
+    scrollContainerRef.current.style.cursor = 'grab';
+    scrollContainerRef.current.style.userSelect = '';
+  }, []);
+
+  useEffect(() => {
+    const scrollContainer = scrollContainerRef.current;
+    if (!scrollContainer) return;
+
+    // Add event listeners
+    if (enableMouseWheel) {
+      scrollContainer.addEventListener('wheel', handleWheel, {
+        passive: false,
+      });
+    }
+
+    if (enableTouchScroll) {
+      scrollContainer.addEventListener('mousedown', handleMouseDown);
+      scrollContainer.addEventListener('touchstart', handleMouseDown, {
+        passive: true,
+      });
+
+      // Add global listeners for mouse/touch move and up
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('touchmove', handleMouseMove, {
+        passive: false,
+      });
+      document.addEventListener('mouseup', handleMouseUp);
+      document.addEventListener('touchend', handleMouseUp);
+    }
+
+    return () => {
+      if (enableMouseWheel) {
+        scrollContainer.removeEventListener('wheel', handleWheel);
+      }
+
+      if (enableTouchScroll) {
+        scrollContainer.removeEventListener('mousedown', handleMouseDown);
+        scrollContainer.removeEventListener('touchstart', handleMouseDown);
+
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('touchmove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+        document.removeEventListener('touchend', handleMouseUp);
+      }
+    };
+  }, [
+    handleWheel,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp,
+    enableMouseWheel,
+    enableTouchScroll,
+  ]);
+
+  return {
+    scrollContainerRef,
+    isDragging: isDragging.current,
+  };
+}

package/src/hooks/usePresence.ts

@@ -0,0 +1,272 @@
+import { createClient } from '@tuturuuu/supabase/next/client';
+import type { RealtimePresenceState } from '@tuturuuu/supabase/next/realtime';
+import type { User } from '@tuturuuu/types/primitives/User';
+import { DEV_MODE } from '@tuturuuu/utils/constants';
+import { useEffect, useRef, useState } from 'react';
+
+export interface UserPresenceState {
+  user: User;
+  online_at: string;
+  session_id?: string;
+  /** Optional metadata for context-specific presence tracking */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  metadata?: Record<string, any>;
+}
+
+export function usePresence(
+  channelName: string,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  metadata?: Record<string, any>
+) {
+  const [presenceState, setPresenceState] = useState<
+    RealtimePresenceState<UserPresenceState>
+  >({});
+  const [currentUserId, setCurrentUserId] = useState<string>();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const channelRef = useRef<any>(null);
+  const retryCountRef = useRef(0);
+  const isCleanedUpRef = useRef(false);
+  const metadataRef = useRef(metadata);
+  const MAX_RETRIES = 3;
+
+  // Update metadata ref when it changes
+  useEffect(() => {
+    metadataRef.current = metadata;
+  }, [metadata]);
+
+  // Update presence metadata when it changes
+  useEffect(() => {
+    const updateMetadata = async () => {
+      if (!channelRef.current || !currentUserId || !metadata) return;
+
+      try {
+        const {
+          data: { user },
+        } = await createClient().auth.getUser();
+        if (!user?.id) return;
+
+        const { data: userData } = await createClient()
+          .from('users')
+          .select('display_name, avatar_url')
+          .eq('id', user.id)
+          .single();
+
+        await channelRef.current.track({
+          user: {
+            id: user.id,
+            display_name: userData?.display_name,
+            email: user.email,
+            avatar_url: userData?.avatar_url,
+          },
+          online_at: new Date().toISOString(),
+          metadata: metadata,
+        });
+      } catch (error) {
+        if (DEV_MODE) {
+          console.error('Error updating presence metadata:', error);
+        }
+      }
+    };
+
+    updateMetadata();
+  }, [metadata, currentUserId]);
+
+  useEffect(() => {
+    if (!channelName) return;
+    isCleanedUpRef.current = false;
+
+    const supabase = createClient();
+
+    const setupPresence = async () => {
+      if (isCleanedUpRef.current) return;
+
+      try {
+        const {
+          data: { user },
+        } = await supabase.auth.getUser();
+
+        if (!user?.id) return;
+
+        const { data: userData, error: userDataError } = await supabase
+          .from('users')
+          .select('display_name, avatar_url')
+          .eq('id', user.id)
+          .single();
+
+        if (userDataError) {
+          if (DEV_MODE) {
+            console.error('Error fetching user data:', userDataError);
+          }
+          return;
+        }
+
+        setCurrentUserId(user.id);
+
+        // Clean up existing channel before creating a new one
+        if (channelRef.current) {
+          await supabase.removeChannel(channelRef.current);
+          channelRef.current = null;
+        }
+
+        const channel = supabase.channel(channelName, {
+          config: {
+            presence: {
+              key: user.id,
+              enabled: true,
+            },
+          },
+        });
+
+        channelRef.current = channel;
+
+        channel
+          .on('presence', { event: 'sync' }, () => {
+            const newState =
+              channel.presenceState() as RealtimePresenceState<UserPresenceState>;
+            setPresenceState({ ...newState });
+          })
+          .on('presence', { event: 'join' }, ({ key, newPresences }) => {
+            if (DEV_MODE) {
+              console.log('👋 User joined:', key, newPresences);
+            }
+          })
+          .on('presence', { event: 'leave' }, ({ key, leftPresences }) => {
+            if (DEV_MODE) {
+              console.log('👋 User left:', key, leftPresences);
+            }
+          })
+          .subscribe(async (status) => {
+            if (DEV_MODE) {
+              console.log('📡 Channel status:', status);
+            }
+
+            switch (status) {
+              case 'SUBSCRIBED': {
+                const presenceTrackStatus = await channel.track({
+                  user: {
+                    id: user.id,
+                    display_name: userData?.display_name,
+                    email: user.email,
+                    avatar_url: userData?.avatar_url,
+                  },
+                  online_at: new Date().toISOString(),
+                  metadata: metadataRef.current,
+                });
+
+                if (DEV_MODE) {
+                  console.log('Presence track status:', presenceTrackStatus);
+                }
+
+                if (
+                  presenceTrackStatus === 'timed out' &&
+                  !isCleanedUpRef.current
+                ) {
+                  if (DEV_MODE) {
+                    console.warn('⚠️ Presence tracking timed out, retrying...');
+                  }
+                  // Retry once
+                  setTimeout(async () => {
+                    if (!isCleanedUpRef.current) {
+                      await channel.track({
+                        user: {
+                          id: user.id,
+                          display_name: userData?.display_name,
+                          email: user.email,
+                          avatar_url: userData?.avatar_url,
+                        },
+                        online_at: new Date().toISOString(),
+                        metadata: metadataRef.current,
+                      });
+                    }
+                  }, 1000);
+                }
+
+                // Reset retry count on success
+                retryCountRef.current = 0;
+                break;
+              }
+              case 'CHANNEL_ERROR':
+                if (DEV_MODE) {
+                  console.error('❌ Channel error, connection lost');
+                }
+                if (
+                  retryCountRef.current < MAX_RETRIES &&
+                  !isCleanedUpRef.current
+                ) {
+                  retryCountRef.current++;
+                  if (DEV_MODE) {
+                    console.log(
+                      `Retrying presence setup (${retryCountRef.current}/${MAX_RETRIES})...`
+                    );
+                  }
+                  setTimeout(() => {
+                    setupPresence();
+                  }, 2000 * retryCountRef.current); // Exponential backoff
+                }
+                break;
+              case 'TIMED_OUT':
+                if (DEV_MODE) {
+                  console.warn('⚠️ Channel subscription timed out');
+                }
+                if (
+                  retryCountRef.current < MAX_RETRIES &&
+                  !isCleanedUpRef.current
+                ) {
+                  retryCountRef.current++;
+                  if (DEV_MODE) {
+                    console.log(
+                      `Retrying presence setup (${retryCountRef.current}/${MAX_RETRIES})...`
+                    );
+                  }
+                  setTimeout(() => {
+                    setupPresence();
+                  }, 2000 * retryCountRef.current); // Exponential backoff
+                }
+                break;
+              case 'CLOSED':
+                if (DEV_MODE) {
+                  console.info('📡 Channel closed');
+                }
+                break;
+              default:
+                if (DEV_MODE) {
+                  console.info('📡 Unknown channel status:', status);
+                }
+                break;
+            }
+          });
+      } catch (error) {
+        if (DEV_MODE) {
+          console.error('Error setting up board presence:', error);
+        }
+        if (retryCountRef.current < MAX_RETRIES && !isCleanedUpRef.current) {
+          retryCountRef.current++;
+          if (DEV_MODE) {
+            console.log(
+              `Retrying presence setup (${retryCountRef.current}/${MAX_RETRIES})...`
+            );
+          }
+          setTimeout(() => {
+            setupPresence();
+          }, 2000 * retryCountRef.current);
+        }
+      }
+    };
+
+    setupPresence();
+
+    return () => {
+      isCleanedUpRef.current = true;
+      retryCountRef.current = 0;
+      if (channelRef.current) {
+        supabase.removeChannel(channelRef.current);
+        channelRef.current = null;
+      }
+    };
+  }, [channelName]);
+
+  return {
+    presenceState,
+    currentUserId,
+  };
+}

package/src/hooks/useSearchParams.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import {
+  useSearchParams as useDefaultSearchParams,
+  usePathname,
+  useRouter,
+} from 'next/navigation';
+import { useCallback } from 'react';
+
+const useSearchParams = () => {
+  const searchParams = useDefaultSearchParams();
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const has = useCallback(
+    (key: string) => searchParams.has(key),
+    [searchParams]
+  );
+
+  const get = useCallback(
+    (data: { key: string; fallbackValue?: string | string[] } | string) => {
+      if (typeof data === 'string') return searchParams.getAll(data) || '';
+
+      const { key, fallbackValue } = data;
+      return searchParams.getAll(key).length > 0
+        ? searchParams.getAll(key) || fallbackValue
+        : fallbackValue;
+    },
+    [searchParams]
+  );
+
+  const getSingle = useCallback(
+    (key: string, fallbackValue?: string) => {
+      return searchParams.get(key) || fallbackValue;
+    },
+    [searchParams]
+  );
+
+  const set = useCallback(
+    (
+      data: Record<string, string | number | string[] | undefined>,
+      refresh = true
+    ) => {
+      const params = new URLSearchParams(searchParams);
+
+      Object.entries(data).forEach(([key, value]) => {
+        if (value === undefined) {
+          params.delete(key);
+          return;
+        }
+        if (Array.isArray(value)) {
+          params.delete(key);
+          value
+            .filter((v) => v !== undefined && v !== null)
+            .forEach((item) => {
+              params.append(key, item);
+            });
+        } else {
+          params.set(key, value.toString());
+        }
+      });
+
+      router.push(`${pathname}?${params.toString()}`);
+      if (refresh) router.refresh();
+    },
+    [pathname, router, searchParams]
+  );
+
+  const add = useCallback(
+    (key: string, value: string | string[], refresh = true) => {
+      const params = new URLSearchParams(searchParams);
+      if (Array.isArray(value)) {
+        value.forEach((item) => {
+          params.append(key, item);
+        });
+      } else {
+        params.append(key, value);
+      }
+      router.push(`${pathname}?${params.toString()}`);
+      if (refresh) router.refresh();
+    },
+    [pathname, router, searchParams]
+  );
+
+  const remove = useCallback(
+    (key: string, refresh = true) => {
+      const params = new URLSearchParams(searchParams);
+      params.delete(key);
+      router.push(`${pathname}?${params.toString()}`);
+      if (refresh) router.refresh();
+    },
+    [pathname, router, searchParams]
+  );
+
+  const reset = useCallback(
+    (refresh = true) => {
+      router.push(pathname);
+      if (refresh) router.refresh();
+    },
+    [pathname, router]
+  );
+
+  const getAll = useCallback(() => {
+    const params = new URLSearchParams(searchParams);
+    const entries = params.entries();
+    const result: Record<string, string[]> = {};
+    for (const [key, value] of entries) {
+      if (result[key]) {
+        result[key]?.push(value);
+      } else {
+        result[key] = [value];
+      }
+    }
+    return result;
+  }, [searchParams]);
+
+  const isEmpty = searchParams.toString().length === 0;
+
+  return {
+    isEmpty,
+    has,
+    get,
+    set,
+    add,
+    remove,
+    reset,
+    clear: reset,
+    getAll,
+    getSingle,
+  };
+};
+
+export default useSearchParams;