@shohojdhara/atomix 0.5.1 → 0.5.2

package/src/lib/composables/useChartPerformance.ts

@@ -1,347 +0,0 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
-import { ChartDataPoint, ChartDataset } from '../types/components';
-
-/**
- * Performance optimization hook for charts
- * Provides memoization, virtualization, and efficient re-rendering
- */
-export function useChartPerformance() {
-  const renderCountRef = useRef(0);
-  const lastRenderTimeRef = useRef(Date.now());
-  const [performanceMetrics, setPerformanceMetrics] = useState({
-    renderCount: 0,
-    averageRenderTime: 0,
-    lastRenderDuration: 0,
-  });
-
-  /**
-   * Memoized chart data processing
-   */
-  const processDatasetsOptimized = useCallback((datasets: ChartDataset[]) => {
-    const startTime = performance.now();
-
-    // Process datasets with optimizations
-    const processedDatasets = datasets.map(dataset => ({
-      ...dataset,
-      data: dataset.data.map((point, index) => ({
-        ...point,
-        // Add index for efficient lookups
-        _index: index,
-        // Pre-calculate commonly used values
-        _stringValue: point.value.toString(),
-        _hasMetadata: Boolean(point.metadata && Object.keys(point.metadata).length > 0),
-      })),
-      // Pre-calculate dataset statistics
-      _stats: {
-        min: Math.min(...dataset.data.map(p => p.value)),
-        max: Math.max(...dataset.data.map(p => p.value)),
-        average: dataset.data.reduce((sum, p) => sum + p.value, 0) / dataset.data.length,
-        count: dataset.data.length,
-      },
-    }));
-
-    const endTime = performance.now();
-    const processingTime = endTime - startTime;
-
-    // Update performance metrics
-    renderCountRef.current += 1;
-    const currentTime = Date.now();
-    const timeSinceLastRender = currentTime - lastRenderTimeRef.current;
-    lastRenderTimeRef.current = currentTime;
-
-    setPerformanceMetrics(prev => ({
-      renderCount: renderCountRef.current,
-      averageRenderTime:
-        (prev.averageRenderTime * (renderCountRef.current - 1) + processingTime) /
-        renderCountRef.current,
-      lastRenderDuration: processingTime,
-    }));
-
-    return processedDatasets;
-  }, []);
-
-  /**
-   * Optimized scale calculations with caching
-   */
-  const createOptimizedScales = useCallback(
-    (
-      datasets: ChartDataset[],
-      width: number,
-      height: number,
-      padding: { top: number; right: number; bottom: number; left: number }
-    ) => {
-      if (!datasets.length) return null;
-
-      const innerWidth = width - padding.left - padding.right;
-      const innerHeight = height - padding.top - padding.bottom;
-
-      // Calculate bounds efficiently
-      const allValues = datasets.flatMap(dataset => dataset.data.map(d => d.value));
-      const minValue = Math.min(...allValues);
-      const maxValue = Math.max(...allValues);
-      const valueRange = maxValue - minValue;
-
-      // Pre-calculate scale functions for better performance
-      const xScale = (i: number, dataLength: number) =>
-        padding.left + (i / (dataLength - 1)) * innerWidth;
-
-      const yScale = (value: number) =>
-        padding.top + innerHeight - ((value - minValue) / valueRange) * innerHeight;
-
-      return {
-        xScale,
-        yScale,
-        minValue,
-        maxValue,
-        valueRange,
-        innerWidth,
-        innerHeight,
-      };
-    },
-    []
-  );
-
-  /**
-   * Virtualization for large datasets
-   */
-  const useDataVirtualization = useCallback(
-    (
-      data: ChartDataPoint[],
-      viewportStart: number,
-      viewportEnd: number,
-      bufferSize: number = 50
-    ) => {
-      if (data.length <= 1000) {
-        // No virtualization needed for small datasets
-        return {
-          visibleData: data,
-          startIndex: 0,
-          endIndex: data.length - 1,
-          isVirtualized: false,
-        };
-      }
-
-      const start = Math.max(0, viewportStart - bufferSize);
-      const end = Math.min(data.length - 1, viewportEnd + bufferSize);
-
-      return {
-        visibleData: data.slice(start, end + 1),
-        startIndex: start,
-        endIndex: end,
-        isVirtualized: true,
-        totalLength: data.length,
-      };
-    },
-    []
-  );
-
-  /**
-   * Debounced data updates for real-time charts
-   * Returns a debounced function that maintains timeout state across calls
-   * Uses a closure to maintain state - each call to useDebouncedUpdates creates
-   * a new debounced function with its own persistent timeout state
-   */
-  const useDebouncedUpdates = useCallback((updateFunction: () => void, delay: number = 100) => {
-    // Use a closure variable to maintain timeout state across multiple calls to the returned function
-    // This variable is created once when useDebouncedUpdates is called and persists
-    // across all invocations of the returned debounced function
-    let timeoutId: NodeJS.Timeout | null = null;
-
-    const debouncedFn: (() => void) & { cancel: () => void } = () => {
-      // Clear any existing timeout before setting a new one
-      if (timeoutId !== null) {
-        clearTimeout(timeoutId);
-        timeoutId = null;
-      }
-
-      // Set new timeout and store the ID
-      timeoutId = setTimeout(() => {
-        updateFunction();
-        timeoutId = null;
-      }, delay);
-    };
-
-    // Add cleanup method to cancel pending debounced calls
-    debouncedFn.cancel = () => {
-      if (timeoutId !== null) {
-        clearTimeout(timeoutId);
-        timeoutId = null;
-      }
-    };
-
-    return debouncedFn;
-  }, []);
-
-  /**
-   * Memory-efficient color palette generation using CSS custom properties
-   */
-  const generateOptimizedColorPalette = useMemo(() => {
-    const baseColors = [
-      'var(--atomix-primary)',
-      'var(--atomix-secondary)',
-      'var(--atomix-success)',
-      'var(--atomix-info)',
-      'var(--atomix-warning)',
-      'var(--atomix-error)',
-      'var(--atomix-primary-5)',
-      'var(--atomix-primary-7)',
-      'var(--atomix-primary-3)',
-      'var(--atomix-gray-6)',
-      'var(--atomix-gray-8)',
-      'var(--atomix-gray-4)',
-      'var(--atomix-primary-2)',
-      'var(--atomix-primary-8)',
-      'var(--atomix-gray-5)',
-      'var(--atomix-gray-7)',
-      'var(--atomix-primary-4)',
-      'var(--atomix-primary-6)',
-    ];
-
-    // Pre-generate a large palette to avoid runtime calculations
-    const extendedColors: string[] = [];
-    for (let i = 0; i < 100; i++) {
-      extendedColors.push(baseColors[i % baseColors.length] || '#000000');
-    }
-
-    return (index: number) => extendedColors[index % extendedColors.length];
-  }, []);
-
-  /**
-   * Optimized animation frame handling
-   * Returns animation control functions that maintain state across calls
-   * Uses closures to maintain state - each call to useAnimationFrame creates
-   * a new animation controller with its own persistent state
-   */
-  const useAnimationFrame = useCallback((callback: () => void) => {
-    // Use closure variables to maintain animation state across multiple calls
-    // These variables are created once when useAnimationFrame is called and persist
-    // across all invocations of the returned animation control functions
-    let requestId: number | null = null;
-    let previousTime: number | null = null;
-
-    const animate = (time: number) => {
-      if (previousTime !== null && previousTime !== undefined) {
-        const deltaTime = time - previousTime;
-        callback();
-      }
-      previousTime = time;
-      requestId = requestAnimationFrame(animate);
-    };
-
-    const startAnimation = () => {
-      // Only start if not already running
-      if (requestId === null) {
-        requestId = requestAnimationFrame(animate);
-      }
-    };
-
-    const stopAnimation = () => {
-      if (requestId !== null) {
-        cancelAnimationFrame(requestId);
-        requestId = null;
-      }
-      previousTime = null;
-    };
-
-    return { startAnimation, stopAnimation };
-  }, []);
-
-  /**
-   * Smart re-rendering based on data changes
-   */
-  const shouldUpdateChart = useCallback(
-    (prevDatasets: ChartDataset[], newDatasets: ChartDataset[], threshold: number = 0.01) => {
-      if (prevDatasets.length !== newDatasets.length) return true;
-
-      // Check if any significant data changes occurred
-      for (let i = 0; i < prevDatasets.length; i++) {
-        const prevDataset = prevDatasets[i];
-        const newDataset = newDatasets[i];
-        if (!prevDataset || !newDataset) continue;
-
-        const prevData = prevDataset.data;
-        const newData = newDataset.data;
-
-        if (prevData.length !== newData.length) return true;
-
-        // Check for significant value changes
-        for (let j = 0; j < prevData.length; j++) {
-          const prevPoint = prevData[j];
-          const newPoint = newData[j];
-          if (!prevPoint || !newPoint) continue;
-
-          const valueDiff = Math.abs(prevPoint.value - newPoint.value);
-          const relativeChange = valueDiff / Math.abs(prevPoint.value);
-
-          if (relativeChange > threshold) return true;
-        }
-      }
-
-      return false;
-    },
-    []
-  );
-
-  /**
-   * Canvas optimization for better performance
-   */
-  const optimizeCanvasRendering = useCallback(
-    (
-      canvasRef: React.RefObject<HTMLCanvasElement>,
-      pixelRatio: number = window.devicePixelRatio || 1
-    ) => {
-      if (!canvasRef.current) return null;
-
-      const canvas = canvasRef.current;
-      const ctx = canvas.getContext('2d');
-
-      if (!ctx) return null;
-
-      // Set up high-DPI rendering
-      const rect = canvas.getBoundingClientRect();
-      canvas.width = rect.width * pixelRatio;
-      canvas.height = rect.height * pixelRatio;
-      canvas.style.width = rect.width + 'px';
-      canvas.style.height = rect.height + 'px';
-      ctx.scale(pixelRatio, pixelRatio);
-
-      // Optimize canvas settings for better performance
-      ctx.imageSmoothingEnabled = false;
-      ctx.fillStyle = 'transparent';
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-      return { canvas, ctx, width: rect.width, height: rect.height };
-    },
-    []
-  );
-
-  /**
-   * Batch DOM updates for better performance
-   */
-  const batchDOMUpdates = useCallback((updates: (() => void)[]) => {
-    // Use requestAnimationFrame to batch DOM updates
-    requestAnimationFrame(() => {
-      updates.forEach(update => update());
-    });
-  }, []);
-
-  return {
-    // Data processing
-    processDatasetsOptimized,
-    createOptimizedScales,
-    useDataVirtualization,
-
-    // Performance monitoring
-    performanceMetrics,
-    shouldUpdateChart,
-
-    // Rendering optimizations
-    generateOptimizedColorPalette,
-    optimizeCanvasRendering,
-    batchDOMUpdates,
-
-    // Animation and updates
-    useAnimationFrame,
-    useDebouncedUpdates,
-  };
-}

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,
-  };
-};