@shohojdhara/atomix 0.3.3 → 0.3.5

package/src/lib/composables/useChartPerformance.ts

@@ -70,35 +70,33 @@ export function useChartPerformance() {
       height: number,
       padding: { top: number; right: number; bottom: number; left: number }
     ) => {
-      return useMemo(() => {
-        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,
-        };
-      }, [datasets, width, height, padding.top, padding.right, padding.bottom, padding.left]);
+      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,
+      };
     },
     []
   );
@@ -113,47 +111,65 @@ export function useChartPerformance() {
       viewportEnd: number,
       bufferSize: number = 50
     ) => {
-      return useMemo(() => {
-        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);
-
+      if (data.length <= 1000) {
+        // No virtualization needed for small datasets
         return {
-          visibleData: data.slice(start, end + 1),
-          startIndex: start,
-          endIndex: end,
-          isVirtualized: true,
-          totalLength: data.length,
+          visibleData: data,
+          startIndex: 0,
+          endIndex: data.length - 1,
+          isVirtualized: false,
         };
-      }, [data, viewportStart, viewportEnd, bufferSize]);
+      }
+
+      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) => {
-    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-    return useCallback(() => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
+    // 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;
       }
 
-      timeoutRef.current = setTimeout(() => {
+      // Set new timeout and store the ID
+      timeoutId = setTimeout(() => {
         updateFunction();
+        timeoutId = null;
       }, delay);
-    }, [updateFunction, delay]);
+    };
+
+    // Add cleanup method to cancel pending debounced calls
+    debouncedFn.cancel = () => {
+      if (timeoutId !== null) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+      }
+    };
+
+    return debouncedFn;
   }, []);
 
   /**
@@ -192,32 +208,40 @@ export function useChartPerformance() {
 
   /**
    * 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) => {
-    const requestRef = useRef<number | null>(null);
-    const previousTimeRef = useRef<number | null>(null);
-
-    const animate = useCallback(
-      (time: number) => {
-        if (previousTimeRef.current !== undefined) {
-          const deltaTime = time - (previousTimeRef.current || 0);
-          callback();
-        }
-        previousTimeRef.current = time;
-        requestRef.current = requestAnimationFrame(animate);
-      },
-      [callback]
-    );
-
-    const startAnimation = useCallback(() => {
-      requestRef.current = requestAnimationFrame(animate);
-    }, [animate]);
+    // 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 = useCallback(() => {
-      if (requestRef.current) {
-        cancelAnimationFrame(requestRef.current);
+    const stopAnimation = () => {
+      if (requestId !== null) {
+        cancelAnimationFrame(requestId);
+        requestId = null;
       }
-    }, []);
+      previousTime = null;
+    };
 
     return { startAnimation, stopAnimation };
   }, []);

package/src/lib/composables/useChartScale.ts

@@ -18,6 +18,11 @@ export function useChartScale(
       return {
         xScale: () => padding.left,
         yScale: () => padding.top + innerHeight,
+        minValue: 0,
+        maxValue: 0,
+        valueRange: 0,
+        innerWidth,
+        innerHeight,
         width,
         height,
         padding,
@@ -40,6 +45,11 @@ export function useChartScale(
     return {
       xScale,
       yScale,
+      minValue,
+      maxValue,
+      valueRange,
+      innerWidth,
+      innerHeight,
       width,
       height,
       padding,

package/src/lib/composables/useHero.ts

@@ -97,10 +97,17 @@ export function useHero(initialProps?: Partial<HeroProps>): UseHeroResult {
   const hasBackgroundSlider = !!defaultProps.backgroundSlider;
 
   /**
-   * Initialize background slider hook if enabled
+   * Initialize background slider hook - always call hook, conditionally use result
    */
+  const backgroundSliderResult = useHeroBackgroundSlider(
+    defaultProps.backgroundSlider || { 
+      slides: [], 
+      autoplay: { delay: 5000, pauseOnHover: true } 
+    }
+  );
+  
   const backgroundSlider = hasBackgroundSlider && defaultProps.backgroundSlider
-    ? useHeroBackgroundSlider(defaultProps.backgroundSlider)
+    ? backgroundSliderResult
     : undefined;
 
   /**

package/src/lib/composables/useHeroBackgroundSlider.ts

@@ -89,8 +89,9 @@ export function useHeroBackgroundSlider(
 
       // Play video if it's a video slide
       const currentVideo = videoRefs[nextIndex]?.current;
-      if (currentVideo && slides[nextIndex].type === 'video') {
-        const videoOptions = slides[nextIndex].videoOptions || {};
+      const nextSlide = slides[nextIndex];
+      if (currentVideo && nextSlide && nextSlide.type === 'video') {
+        const videoOptions = nextSlide.videoOptions || {};
         if (videoOptions.autoplay !== false) {
           currentVideo.play().catch(() => {
             // Ignore autoplay errors
@@ -100,7 +101,8 @@ export function useHeroBackgroundSlider(
 
       // Pause previous video if it exists
       const prevVideo = videoRefs[currentIndex]?.current;
-      if (prevVideo && slides[currentIndex].type === 'video') {
+      const currentSlide = slides[currentIndex];
+      if (prevVideo && currentSlide && currentSlide.type === 'video') {
         prevVideo.pause();
       }
 

package/src/lib/composables/useSideMenu.ts

@@ -60,6 +60,7 @@ export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
     } else if (!shouldCollapse && wrapperRef.current) {
       wrapperRef.current.style.height = 'auto';
     }
+    return undefined;
   }, []); // Only run on mount
 
   // Handle responsive behavior - vertical collapse for both mobile and desktop

package/src/lib/composables/useVideoPlayer.ts

@@ -41,18 +41,19 @@ export function useVideoPlayer({
   const [currentQuality, setCurrentQuality] = useState<VideoQuality | null>(quality?.[0] || null);
   const [showControls, setShowControls] = useState(true);
 
-  const controlsTimeoutRef = useRef<NodeJS.Timeout>(null);
+  const controlsTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const resetControlsTimeout = useCallback(() => {
     if (controlsTimeoutRef.current) {
       clearTimeout(controlsTimeoutRef.current);
     }
     setShowControls(true);
-    controlsTimeoutRef.current = setTimeout(() => {
+    const timeout = setTimeout(() => {
       if (isPlaying) {
         setShowControls(false);
       }
     }, 3000);
+    controlsTimeoutRef.current = timeout;
   }, [isPlaying]);
 
   const play = useCallback(async () => {

package/src/lib/config/index.ts

@@ -0,0 +1,275 @@
+/**
+ * Atomix Configuration System
+ * 
+ * Tailwind-like configuration for customizing the Atomix Design System.
+ * 
+ * External developers can create `atomix.config.ts` in their project root
+ * to customize design tokens, similar to Tailwind's tailwind.config.js
+ * 
+ * @example
+ * ```typescript
+ * // atomix.config.ts (in your project)
+ * import { defineConfig } from '@shohojdhara/atomix/config';
+ * 
+ * export default defineConfig({
+ *   theme: {
+ *     extend: {
+ *       colors: {
+ *         primary: { main: '#7AFFD7' },
+ *       },
+ *     },
+ *   },
+ * });
+ * ```
+ */
+
+import type { Theme } from '../theme/types';
+
+/**
+ * Color Scale (1-10)
+ */
+export interface ColorScale {
+    1?: string;
+    2?: string;
+    3?: string;
+    4?: string;
+    5?: string;
+    6?: string;
+    7?: string;
+    8?: string;
+    9?: string;
+    10?: string;
+    [key: string]: string | undefined;
+}
+
+/**
+ * Palette Color Options
+ */
+export interface PaletteColorOptions {
+    main: string;
+    light?: string;
+    dark?: string;
+    contrastText?: string;
+}
+
+/**
+ * Design Tokens Schema (Tailwind-like)
+ */
+export interface ThemeTokens {
+    /** Color palette */
+    colors?: Record<string, string | PaletteColorOptions | ColorScale | Record<string, string>>;
+    /** Spacing scale */
+    spacing?: Record<string, string>;
+    /** Border radius scale */
+    borderRadius?: Record<string, string>;
+    /** Typography scale and settings */
+    typography?: {
+        fontFamilies?: Record<string, string>;
+        fontSizes?: Record<string, string>;
+        fontWeights?: Record<string, string | number>;
+        lineHeights?: Record<string, string | number>;
+        letterSpacings?: Record<string, string>;
+    };
+    /** Shadow scale */
+    shadows?: Record<string, string>;
+    /** Z-index scale */
+    zIndex?: Record<string, string | number>;
+    /** Breakpoints scale */
+    breakpoints?: Record<string, string | number>;
+    /** Transitions settings */
+    transitions?: {
+        durations?: Record<string, string>;
+        easings?: Record<string, string>;
+    };
+}
+
+/**
+ * CSS Theme Definition
+ */
+export interface CSSThemeDefinition {
+    type: 'css';
+    name: string;
+    class?: string;
+    description?: string;
+    author?: string;
+    version?: string;
+    tags?: string[];
+    supportsDarkMode?: boolean;
+    status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
+    a11y?: {
+        contrastTarget?: number;
+        modes?: string[];
+    };
+    color?: string;
+    features?: string[];
+    dependencies?: string[];
+    cssPath?: string;
+}
+
+/**
+ * JavaScript Theme Definition
+ */
+export interface JSThemeDefinition {
+    type: 'js';
+    name: string;
+    class?: string;
+    description?: string;
+    author?: string;
+    version?: string;
+    tags?: string[];
+    supportsDarkMode?: boolean;
+    status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
+    a11y?: {
+        contrastTarget?: number;
+        modes?: string[];
+    };
+    color?: string;
+    features?: string[];
+    dependencies?: string[];
+    createTheme: () => Theme;
+}
+
+/**
+ * Theme Definition (CSS or JS)
+ */
+export type ThemeDefinition = CSSThemeDefinition | JSThemeDefinition;
+
+/**
+ * Build configuration (migrated from theme.config.ts)
+ */
+export interface BuildConfig {
+    output?: {
+        directory?: string;
+        formats?: {
+            expanded?: string;
+            compressed?: string;
+        };
+    };
+    sass?: {
+        style?: 'expanded' | 'compressed';
+        sourceMap?: boolean;
+        loadPaths?: string[];
+    };
+}
+
+/**
+ * Runtime configuration (migrated from theme.config.ts)
+ */
+export interface RuntimeConfig {
+    basePath?: string;
+    cdnPath?: string | null;
+    preload?: string[];
+    lazy?: boolean;
+    defaultTheme?: string;
+    storageKey?: string;
+    dataAttribute?: string;
+    enablePersistence?: boolean;
+    useMinified?: boolean;
+}
+
+/**
+ * Integration settings (migrated from theme.config.ts)
+ */
+export interface IntegrationConfig {
+    cssVariables?: Record<string, string>;
+    classNames?: {
+        theme?: string;
+        colorMode?: string;
+    };
+}
+
+/**
+ * Atomix Configuration Interface
+ * 
+ * Tailwind-like configuration for external developers.
+ * Focus on theme customization - build/runtime configs are internal only.
+ */
+export interface AtomixConfig {
+    /** 
+     * CSS variable prefix (default: 'atomix')
+     * 
+     * Change this to customize all CSS variable names.
+     * Example: prefix: 'myapp' → --myapp-primary instead of --atomix-primary
+     */
+    prefix?: string;
+    
+    /** 
+     * Theme customization (Tailwind-like)
+     * 
+     * Use `extend` to add or override design tokens.
+     * Use `tokens` to completely replace the default token system (advanced).
+     */
+    theme?: {
+        /** 
+         * Extend the default design tokens
+         * 
+         * This is the recommended way to customize Atomix.
+         * Your values will override or extend the base tokens.
+         */
+        extend?: ThemeTokens;
+        
+        /** 
+         * Override the default tokens entirely (advanced)
+         * 
+         * Use with caution - this replaces the entire token system.
+         * Most users should use `extend` instead.
+         */
+        tokens?: ThemeTokens;
+        
+        /** 
+         * Register custom themes (optional)
+         * 
+         * Define CSS or JavaScript themes that can be loaded dynamically.
+         */
+        themes?: Record<string, ThemeDefinition>;
+    };
+    
+    // Internal configurations (for library development only)
+    // These are not needed for external developers
+    /** @internal Build configuration (internal use only) */
+    build?: BuildConfig;
+    /** @internal Runtime configuration (internal use only) */
+    runtime?: RuntimeConfig;
+    /** @internal Integration settings (internal use only) */
+    integration?: IntegrationConfig;
+    /** @internal Theme dependencies mapping (internal use only) */
+    dependencies?: Record<string, string[]>;
+}
+
+/**
+ * Helper function to define Atomix configuration with type safety
+ * 
+ * @param config - Atomix configuration object
+ * @returns The configuration object
+ */
+/**
+ * Helper function to define Atomix configuration with type safety
+ * 
+ * Similar to Tailwind's defineConfig, provides autocomplete and type checking.
+ * 
+ * @param config - Atomix configuration object
+ * @returns The configuration object
+ * 
+ * @example
+ * ```typescript
+ * import { defineConfig } from '@shohojdhara/atomix/config';
+ * 
+ * export default defineConfig({
+ *   theme: {
+ *     extend: {
+ *       colors: {
+ *         primary: { main: '#7AFFD7' },
+ *       },
+ *     },
+ *   },
+ * });
+ * ```
+ */
+export function defineConfig(config: AtomixConfig): AtomixConfig {
+    return config;
+}
+
+// Export loader functions
+export { loadAtomixConfig, resolveConfigPath } from './loader';
+
+export default AtomixConfig;