@shohojdhara/atomix 0.5.1 → 0.5.4

package/src/lib/composables/useDropdown.ts

@@ -1,338 +0,0 @@
-import { useState, useRef, useEffect, useCallback } from 'react';
-import { DROPDOWN } from '../constants/components';
-import type { DropdownPlacement, DropdownTrigger } from '../types/components';
-
-interface UseDropdownProps {
-  placement?: DropdownPlacement;
-  trigger?: DropdownTrigger;
-  offset?: number;
-  defaultOpen?: boolean;
-  isOpen?: boolean;
-  onOpenChange?: (isOpen: boolean) => void;
-  closeOnClickOutside?: boolean;
-  closeOnEscape?: boolean;
-  id?: string;
-}
-
-interface UseDropdownReturn {
-  isOpen: boolean;
-  setIsOpen: (isOpen: boolean) => void;
-  triggerRef: React.RefObject<HTMLElement | null>;
-  menuRef: React.RefObject<HTMLElement | null>;
-  dropdownId: string;
-  currentPlacement: DropdownPlacement;
-  updatePosition: () => void;
-}
-
-/**
- * Hook for managing dropdown state and position
- */
-export const useDropdown = ({
-  placement = DROPDOWN.DEFAULTS.PLACEMENT as DropdownPlacement,
-  trigger = DROPDOWN.DEFAULTS.TRIGGER as DropdownTrigger,
-  offset = DROPDOWN.DEFAULTS.OFFSET,
-  defaultOpen = false,
-  isOpen: controlledIsOpen,
-  onOpenChange,
-  closeOnClickOutside = true,
-  closeOnEscape = true,
-  id,
-}: UseDropdownProps): UseDropdownReturn => {
-  // Generate unique ID for the dropdown menu
-  const uniqueId = useRef(`dropdown-${id || Math.random().toString(36).substring(2, 9)}`);
-
-  // Setup controlled vs uncontrolled state
-  const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(defaultOpen);
-
-  // Use either controlled or uncontrolled state
-  const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : uncontrolledIsOpen;
-
-  // Callback to update open state with notification to parent
-  const setIsOpen = useCallback(
-    (nextIsOpen: boolean) => {
-      if (controlledIsOpen === undefined) {
-        setUncontrolledIsOpen(nextIsOpen);
-      }
-
-      if (onOpenChange) {
-        onOpenChange(nextIsOpen);
-      }
-    },
-    [controlledIsOpen, onOpenChange]
-  );
-
-  // Refs for trigger and dropdown menu elements
-  const triggerRef = useRef<HTMLElement>(null);
-  const menuRef = useRef<HTMLElement>(null);
-
-  // Current placement state
-  const [currentPlacement, setCurrentPlacement] = useState(placement);
-
-  // Handle click outside
-  useEffect(() => {
-    if (!isOpen || !closeOnClickOutside) return undefined;
-
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        menuRef.current &&
-        triggerRef.current &&
-        !menuRef.current.contains(event.target as Node) &&
-        !triggerRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [isOpen, closeOnClickOutside, setIsOpen]);
-
-  // Handle escape key
-  useEffect(() => {
-    if (!isOpen || !closeOnEscape) return undefined;
-
-    const handleEscapeKey = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener('keydown', handleEscapeKey);
-
-    return () => {
-      document.removeEventListener('keydown', handleEscapeKey);
-    };
-  }, [isOpen, closeOnEscape, setIsOpen]);
-
-  // Handle arrow key navigation
-  useEffect(() => {
-    if (!isOpen || !menuRef.current) return undefined;
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      const menu = menuRef.current;
-      if (!menu) return;
-
-      const items = Array.from(
-        menu.querySelectorAll<HTMLElement>('[role="menuitem"]:not([disabled])')
-      );
-      if (items.length === 0) return;
-
-      const currentIndex = items.indexOf(document.activeElement as HTMLElement);
-
-      switch (event.key) {
-        case 'ArrowDown':
-          event.preventDefault();
-          const nextIndex = (currentIndex + 1) % items.length;
-          const nextItem = items[nextIndex];
-          if (nextItem) nextItem.focus();
-          break;
-        case 'ArrowUp':
-          event.preventDefault();
-          const prevIndex = (currentIndex - 1 + items.length) % items.length;
-          const prevItem = items[prevIndex];
-          if (prevItem) prevItem.focus();
-          break;
-        case 'Home':
-          event.preventDefault();
-          const firstItem = items[0];
-          if (firstItem) firstItem.focus();
-          break;
-        case 'End':
-          event.preventDefault();
-          const lastItem = items[items.length - 1];
-          if (lastItem) lastItem.focus();
-          break;
-        case 'Tab':
-          // Close dropdown on tab
-          setIsOpen(false);
-          break;
-        default:
-          break;
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [isOpen, setIsOpen]);
-
-  // Focus management when dropdown opens
-  useEffect(() => {
-    if (isOpen && menuRef.current) {
-      const firstItem = menuRef.current.querySelector<HTMLElement>(
-        '[role="menuitem"]:not([disabled])'
-      );
-      if (firstItem) {
-        setTimeout(() => firstItem.focus(), 0);
-      }
-    }
-  }, [isOpen]);
-
-  // Helper function to get the flipped placement if needed
-  const getFlippedPlacement = useCallback(
-    (
-      placement: DropdownPlacement,
-      triggerRect: DOMRect,
-      menuRect: DOMRect,
-      offset: number
-    ): DropdownPlacement => {
-      const viewportWidth = window.innerWidth;
-      const viewportHeight = window.innerHeight;
-
-      // Start with the requested placement
-      let newPlacement = placement;
-
-      // Flip vertical placement if needed
-      if (
-        placement.startsWith('bottom') &&
-        triggerRect.bottom + menuRect.height + offset > viewportHeight
-      ) {
-        newPlacement = placement.replace('bottom', 'top') as DropdownPlacement;
-      } else if (placement.startsWith('top') && triggerRect.top - menuRect.height - offset < 0) {
-        newPlacement = placement.replace('top', 'bottom') as DropdownPlacement;
-      }
-
-      // Flip horizontal placement if needed
-      if (placement.startsWith('left') && triggerRect.left - menuRect.width - offset < 0) {
-        newPlacement = placement.replace('left', 'right') as DropdownPlacement;
-      } else if (
-        placement.startsWith('right') &&
-        triggerRect.right + menuRect.width + offset > viewportWidth
-      ) {
-        newPlacement = placement.replace('right', 'left') as DropdownPlacement;
-      }
-
-      // Adjust alignment for top/bottom placements
-      if (newPlacement.startsWith('top') || newPlacement.startsWith('bottom')) {
-        if (newPlacement.endsWith('start') && triggerRect.left + menuRect.width > viewportWidth) {
-          newPlacement = newPlacement.replace('start', 'end') as DropdownPlacement;
-        } else if (newPlacement.endsWith('end') && triggerRect.right - menuRect.width < 0) {
-          newPlacement = newPlacement.replace('end', 'start') as DropdownPlacement;
-        }
-      }
-
-      return newPlacement;
-    },
-    []
-  );
-
-  // Helper function to calculate position based on placement
-  const calculatePosition = useCallback(
-    (
-      placement: DropdownPlacement,
-      triggerRect: DOMRect,
-      menuRect: DOMRect,
-      offset: number
-    ): { top: number; left: number } => {
-      let top = 0;
-      let left = 0;
-
-      // Vertical positioning
-      if (placement.startsWith('bottom')) {
-        top = triggerRect.height + offset;
-      } else if (placement.startsWith('top')) {
-        top = -menuRect.height - offset;
-      } else if (placement.startsWith('left') || placement.startsWith('right')) {
-        top = triggerRect.height / 2 - menuRect.height / 2;
-      }
-
-      // Horizontal positioning
-      if (placement.startsWith('left')) {
-        left = -menuRect.width - offset;
-      } else if (placement.startsWith('right')) {
-        left = triggerRect.width + offset;
-      } else if (placement.endsWith('start')) {
-        left = 0;
-      } else if (placement.endsWith('end')) {
-        left = triggerRect.width - menuRect.width;
-      } else {
-        left = triggerRect.width / 2 - menuRect.width / 2;
-      }
-
-      return { top, left };
-    },
-    []
-  );
-
-  // Calculate and update dropdown position
-  const updatePosition = useCallback(() => {
-    if (!isOpen || !triggerRef.current || !menuRef.current) return;
-
-    const triggerRect = triggerRef.current.getBoundingClientRect();
-    const menuRect = menuRef.current.getBoundingClientRect();
-
-    // Get the optimal placement
-    const newPlacement = getFlippedPlacement(placement, triggerRect, menuRect, offset);
-
-    // Calculate position based on the new placement
-    const { top, left } = calculatePosition(newPlacement, triggerRect, menuRect, offset);
-
-    // Apply position
-    menuRef.current.style.position = 'absolute';
-    menuRef.current.style.top = `${top}px`;
-    menuRef.current.style.left = `${left}px`;
-
-    // Update placement state if it changed
-    if (newPlacement !== currentPlacement) {
-      setCurrentPlacement(newPlacement);
-    }
-  }, [isOpen, offset, placement, currentPlacement, getFlippedPlacement, calculatePosition]);
-
-  // Update position when menu is opened
-  useEffect(() => {
-    if (!isOpen) return undefined;
-
-    // Initial position update
-    updatePosition();
-
-    // Use ResizeObserver to detect size changes in the menu
-    let resizeObserver: ResizeObserver | null = null;
-    if (menuRef.current && typeof ResizeObserver !== 'undefined') {
-      resizeObserver = new ResizeObserver(() => {
-        requestAnimationFrame(updatePosition);
-      });
-      resizeObserver.observe(menuRef.current);
-    }
-
-    // Update position on resize/scroll
-    const handleResize = () => {
-      requestAnimationFrame(updatePosition);
-    };
-
-    const handleScroll = () => {
-      requestAnimationFrame(updatePosition);
-    };
-
-    window.addEventListener('resize', handleResize);
-    window.addEventListener('scroll', handleScroll, { passive: true });
-
-    // Fallback for browsers without ResizeObserver or for dynamic content changes
-    // Use a less frequent interval (500ms instead of 200ms)
-    const intervalId = window.setInterval(updatePosition, 500);
-
-    return () => {
-      if (resizeObserver && menuRef.current) {
-        resizeObserver.unobserve(menuRef.current);
-        resizeObserver.disconnect();
-      }
-      window.removeEventListener('resize', handleResize);
-      window.removeEventListener('scroll', handleScroll);
-      window.clearInterval(intervalId);
-    };
-  }, [isOpen, updatePosition]);
-
-  return {
-    isOpen,
-    setIsOpen,
-    triggerRef,
-    menuRef,
-    dropdownId: uniqueId.current,
-    currentPlacement,
-    updatePosition,
-  };
-};

package/src/lib/composables/useModal.ts

@@ -1,110 +0,0 @@
-import { useState, useCallback, useEffect } from 'react';
-
-export interface UseModalProps {
-  /**
-   * Whether the modal is open
-   */
-  isOpen?: boolean;
-
-  /**
-   * Callback when modal state changes
-   */
-  onOpenChange?: (isOpen: boolean) => void;
-
-  /**
-   * Callback when modal opens
-   */
-  onOpen?: () => void;
-
-  /**
-   * Callback when modal closes
-   */
-  onClose?: () => void;
-}
-
-export interface UseModalReturn {
-  /**
-   * Current open state
-   */
-  isOpen: boolean;
-
-  /**
-   * Function to open the modal
-   */
-  open: () => void;
-
-  /**
-   * Function to close the modal
-   */
-  close: () => void;
-
-  /**
-   * Function to toggle the modal
-   */
-  toggle: () => void;
-}
-
-/**
- * Hook for managing modal state
- */
-export function useModal({
-  isOpen: isOpenProp,
-  onOpenChange,
-  onOpen,
-  onClose,
-}: UseModalProps = {}): UseModalReturn {
-  // For uncontrolled usage
-  const [isOpenState, setIsOpenState] = useState(false);
-
-  // Determine if we're in controlled or uncontrolled mode
-  const isControlled = isOpenProp !== undefined;
-  const isOpen = isControlled ? !!isOpenProp : isOpenState;
-
-  // Update internal state when prop changes (for controlled mode)
-  useEffect(() => {
-    if (isControlled) {
-      setIsOpenState(!!isOpenProp);
-    }
-  }, [isOpenProp, isControlled]);
-
-  const updateOpen = useCallback(
-    (nextIsOpen: boolean) => {
-      // For uncontrolled mode, update internal state
-      if (!isControlled) {
-        setIsOpenState(nextIsOpen);
-      }
-
-      // Call the change handler in either mode
-      if (onOpenChange) {
-        onOpenChange(nextIsOpen);
-      }
-
-      // Call the specific handler
-      if (nextIsOpen && onOpen) {
-        onOpen();
-      } else if (!nextIsOpen && onClose) {
-        onClose();
-      }
-    },
-    [isControlled, onOpenChange, onOpen, onClose]
-  );
-
-  const open = useCallback(() => {
-    updateOpen(true);
-  }, [updateOpen]);
-
-  const close = useCallback(() => {
-    updateOpen(false);
-  }, [updateOpen]);
-
-  const toggle = useCallback(() => {
-    updateOpen(!isOpen);
-  }, [isOpen, updateOpen]);
-
-  return {
-    isOpen,
-    open,
-    close,
-    toggle,
-  };
-}

package/src/lib/hooks/usePerformanceMonitor.ts

@@ -1,148 +0,0 @@
-/**
- * Performance Monitoring Hook
- *
- * Tracks component render times and re-render counts
- * for performance analysis and optimization
- */
-
-import { useEffect, useRef } from 'react';
-
-export interface PerformanceMetrics {
-  /**
-   * Component name
-   */
-  componentName: string;
-  /**
-   * Number of renders
-   */
-  renderCount: number;
-  /**
-   * Average render time in milliseconds
-   */
-  averageRenderTime: number;
-  /**
-   * Total render time in milliseconds
-   */
-  totalRenderTime: number;
-  /**
-   * Maximum render time in milliseconds
-   */
-  maxRenderTime: number;
-  /**
-   * Minimum render time in milliseconds
-   */
-  minRenderTime: number;
-}
-
-/**
- * Options for performance monitoring
- */
-export interface UsePerformanceMonitorOptions {
-  /**
-   * Component name to track
-   */
-  componentName: string;
-  /**
-   * Whether to log metrics to console (development only)
-   */
-  logToConsole?: boolean;
-  /**
-   * Threshold in milliseconds to warn about slow renders
-   */
-  warnThreshold?: number;
-  /**
-   * Callback to report metrics (e.g., to analytics)
-   */
-  onMetrics?: (metrics: PerformanceMetrics) => void;
-}
-
-/**
- * Hook to monitor component performance
- *
- * @param options - Performance monitoring options
- * @returns Performance metrics
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   usePerformanceMonitor({
- *     componentName: 'MyComponent',
- *     warnThreshold: 16, // Warn if render takes > 16ms (1 frame)
- *   });
- *
- *   return <div>Content</div>;
- * }
- * ```
- */
-export function usePerformanceMonitor(options: UsePerformanceMonitorOptions) {
-  const {
-    componentName,
-    logToConsole = typeof process === 'undefined' || process.env?.NODE_ENV === 'development',
-    warnThreshold = 16,
-    onMetrics,
-  } = options;
-
-  const metricsRef = useRef<PerformanceMetrics>({
-    componentName,
-    renderCount: 0,
-    averageRenderTime: 0,
-    totalRenderTime: 0,
-    maxRenderTime: 0,
-    minRenderTime: Infinity,
-  });
-
-  const renderStartRef = useRef<number>(0);
-
-  useEffect(() => {
-    // Start timing the render
-    renderStartRef.current = performance.now();
-  });
-
-  useEffect(() => {
-    // Calculate render time
-    const renderTime = performance.now() - renderStartRef.current;
-    const metrics = metricsRef.current;
-
-    // Update metrics
-    metrics.renderCount += 1;
-    metrics.totalRenderTime += renderTime;
-    metrics.averageRenderTime = metrics.totalRenderTime / metrics.renderCount;
-    metrics.maxRenderTime = Math.max(metrics.maxRenderTime, renderTime);
-    metrics.minRenderTime = Math.min(metrics.minRenderTime, renderTime);
-
-    // Warn if render is slow
-    if (renderTime > warnThreshold && logToConsole) {
-      console.warn(
-        `[Performance] ${componentName} render took ${renderTime.toFixed(2)}ms ` +
-          `(threshold: ${warnThreshold}ms)`
-      );
-    }
-
-    // Log metrics in development
-    if (logToConsole && metrics.renderCount % 10 === 0) {
-      console.log(`[Performance] ${componentName} metrics:`, {
-        renderCount: metrics.renderCount,
-        averageRenderTime: metrics.averageRenderTime.toFixed(2) + 'ms',
-        maxRenderTime: metrics.maxRenderTime.toFixed(2) + 'ms',
-        minRenderTime: metrics.minRenderTime.toFixed(2) + 'ms',
-      });
-    }
-
-    // Report metrics via callback
-    if (onMetrics) {
-      onMetrics({ ...metrics });
-    }
-  });
-
-  return metricsRef.current;
-}
-
-/**
- * Get all performance metrics for all monitored components
- * (useful for debugging and analytics)
- */
-export function getPerformanceMetrics(): PerformanceMetrics[] {
-  // This would need to be implemented with a global store
-  // For now, this is a placeholder
-  return [];
-}

package/src/lib/utils/displacement-generator.ts

@@ -1,92 +0,0 @@
-export interface Vec2 {
-  x: number;
-  y: number;
-}
-
-export interface ShaderOptions {
-  width: number;
-  height: number;
-  fragment: (uv: Vec2) => Vec2;
-}
-
-function smoothStep(a: number, b: number, t: number): number {
-  t = Math.max(0, Math.min(1, (t - a) / (b - a)));
-  return t * t * (3 - 2 * t);
-}
-
-function length(x: number, y: number): number {
-  return Math.sqrt(x * x + y * y);
-}
-
-function roundedRectSDF(
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  radius: number
-): number {
-  const qx = Math.abs(x) - width + radius;
-  const qy = Math.abs(y) - height + radius;
-  return Math.min(Math.max(qx, qy), 0) + length(Math.max(qx, 0), Math.max(qy, 0)) - radius;
-}
-
-export const fragmentShaders = {
-  liquidGlass: (uv: Vec2): Vec2 => {
-    const ix = uv.x - 0.5;
-    const iy = uv.y - 0.5;
-    const distanceToEdge = roundedRectSDF(ix, iy, 0.3, 0.2, 0.6);
-    const displacement = smoothStep(0.8, 0, distanceToEdge - 0.15);
-    const scaled = smoothStep(0, 1, displacement);
-    return { x: ix * scaled + 0.5, y: iy * scaled + 0.5 };
-  },
-};
-
-export class ShaderDisplacementGenerator {
-  private canvas: HTMLCanvasElement;
-  private context: CanvasRenderingContext2D;
-
-  constructor(private options: ShaderOptions) {
-    this.canvas = document.createElement('canvas');
-    this.canvas.width = options.width;
-    this.canvas.height = options.height;
-    this.canvas.style.display = 'none';
-
-    const context = this.canvas.getContext('2d');
-    if (!context) {
-      throw new Error('Could not get 2D context');
-    }
-    this.context = context;
-  }
-
-  updateShader(): string {
-    const { width, height } = this.options;
-    const imageData = this.context.createImageData(width, height);
-    const data = imageData.data;
-
-    for (let y = 0; y < height; y++) {
-      for (let x = 0; x < width; x++) {
-        const uv: Vec2 = { x: x / width, y: y / height };
-        const pos = this.options.fragment(uv);
-
-        const dx = pos.x * width - x;
-        const dy = pos.y * height - y;
-
-        const r = dx / 10 + 0.5;
-        const g = dy / 10 + 0.5;
-
-        const pixelIndex = (y * width + x) * 4;
-        data[pixelIndex] = Math.max(0, Math.min(255, r * 255));
-        data[pixelIndex + 1] = Math.max(0, Math.min(255, g * 255));
-        data[pixelIndex + 2] = Math.max(0, Math.min(255, g * 255));
-        data[pixelIndex + 3] = 255;
-      }
-    }
-
-    this.context.putImageData(imageData, 0, 0);
-    return this.canvas.toDataURL();
-  }
-
-  destroy(): void {
-    this.canvas.remove();
-  }
-}