@shohojdhara/atomix 0.4.1 → 0.4.2

package/src/components/Rating/Rating.tsx

@@ -5,6 +5,27 @@ import type { RatingProps } from '../../lib/types/components';
 import useForkRef from '../../lib/utils/useForkRef';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
+// Helper function to calculate star value based on mouse position
+const calculateStarValue = (
+  e: React.MouseEvent,
+  starValue: number,
+  allowHalf: boolean
+): number => {
+  if (!allowHalf) {
+    return starValue;
+  }
+
+  // Get the star element's bounding rectangle
+  const starRect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+  // Calculate the x position within the star
+  const starCenterX = starRect.left + starRect.width / 2;
+  // If mouse is on the left half of the star, use half value
+  const isHalfStar = e.clientX < starCenterX;
+  const adjustedValue = isHalfStar ? starValue - 0.5 : starValue;
+
+  return Math.max(0.5, adjustedValue); // Ensure minimum of 0.5
+};
+
 /**
  * Rating component for displaying and collecting star ratings
  *
@@ -61,19 +82,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
     const handleMouseEnter = useCallback(
       (e: React.MouseEvent, starValue: number) => {
         if (readOnly) return;
-
-        if (allowHalf) {
-          // Get the star element's bounding rectangle
-          const starRect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-          // Calculate the x position within the star
-          const starCenterX = starRect.left + starRect.width / 2;
-          // If mouse is on the left half of the star, use half value
-          const isHalfStar = e.clientX < starCenterX;
-          const adjustedValue = isHalfStar ? starValue - 0.5 : starValue;
-          setHoverValue(Math.max(0.5, adjustedValue)); // Ensure minimum of 0.5
-        } else {
-          setHoverValue(starValue);
-        }
+        setHoverValue(calculateStarValue(e, starValue, !!allowHalf));
       },
       [readOnly, allowHalf, setHoverValue]
     );
@@ -82,15 +91,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
     const handleMouseMove = useCallback(
       (e: React.MouseEvent, starValue: number) => {
         if (readOnly || !allowHalf) return;
-
-        // Get the star element's bounding rectangle
-        const starRect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-        // Calculate the x position within the star
-        const starCenterX = starRect.left + starRect.width / 2;
-        // If mouse is on the left half of the star, use half value
-        const isHalfStar = e.clientX < starCenterX;
-        const adjustedValue = isHalfStar ? starValue - 0.5 : starValue;
-        setHoverValue(Math.max(0.5, adjustedValue)); // Ensure minimum of 0.5
+        setHoverValue(calculateStarValue(e, starValue, !!allowHalf));
       },
       [readOnly, allowHalf, setHoverValue]
     );
@@ -105,20 +106,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
     const handleClick = useCallback(
       (e: React.MouseEvent, starValue: number) => {
         if (readOnly) return;
-
-        let newValue = starValue;
-
-        if (allowHalf) {
-          // Get the star element's bounding rectangle
-          const starRect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-          // Calculate the x position within the star
-          const starCenterX = starRect.left + starRect.width / 2;
-          // If click is on the left half of the star, use half value
-          const isHalfStar = e.clientX < starCenterX;
-          newValue = isHalfStar ? starValue - 0.5 : starValue;
-          newValue = Math.max(0.5, newValue); // Ensure minimum of 0.5
-        }
-
+        const newValue = calculateStarValue(e, starValue, !!allowHalf);
         onChange?.(newValue);
       },
       [readOnly, onChange, allowHalf]
@@ -291,7 +279,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
         blurAmount: 1,
         saturation: 160,
         aberrationIntensity: 0.5,
-        cornerRadius: 8,
+        borderRadius: 8,
         mode: 'shader' as const,
       };
 

package/src/components/Spinner/Spinner.tsx

@@ -38,7 +38,7 @@ export const Spinner: React.FC<SpinnerProps> = memo(
       const defaultGlassProps = {
         displacementScale: 20,
         blurAmount: 1,
-        cornerRadius: 999,
+        borderRadius: 999,
         mode: 'shader' as const,
       };
       const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };

package/src/components/Steps/Steps.stories.tsx

@@ -404,7 +404,7 @@ export const GlassCustom: Story = {
       blurAmount: 2,
       saturation: 200,
       aberrationIntensity: 0.8,
-      cornerRadius: 12,
+      borderRadius: 12,
     },
   },
   render: args => (

package/src/components/Steps/Steps.tsx

@@ -24,7 +24,7 @@ export interface StepItemData {
 export type { StepItemData as StepItem };
 
 // Compound Component Props
-export interface StepsItemProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface StepsItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
   /**
    * The number or icon for the step
    */
@@ -231,7 +231,7 @@ const StepsComp: React.FC<StepsProps> = ({
       blurAmount: 1,
       saturation: 160,
       aberrationIntensity: 0.5,
-      cornerRadius: 8,
+      borderRadius: 8,
       mode: 'shader' as const,
     };
 

package/src/components/Tabs/Tabs.stories.tsx

@@ -372,7 +372,7 @@ export const GlassCustom: Story = {
       blurAmount: 2,
       saturation: 200,
       aberrationIntensity: 0.8,
-      cornerRadius: 12,
+      borderRadius: 12,
     } as GlassProps,
   },
   render: args => (

package/src/components/Tabs/Tabs.tsx

@@ -277,7 +277,7 @@ export const Tabs: TabsComponent = memo(
         blurAmount: 1,
         saturation: 160,
         aberrationIntensity: 0.5,
-        cornerRadius: 8,
+        borderRadius: 8,
         mode: 'shader' as const,
       };
 

package/src/components/Todo/Todo.tsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
 import { TodoProps } from '../../lib/types/components';
 import { useTodo } from '../../lib/composables/useTodo';
 import { Icon } from '../Icon/Icon';
-import { TODO } from '../../lib/constants/components';
 import { generateUUID } from '../../lib/utils';
 
 export const Todo: React.FC<TodoProps> = ({

package/src/components/Toggle/Toggle.stories.tsx

@@ -266,7 +266,7 @@ export const GlassCustom: Story = {
       blurAmount: 2,
       saturation: 200,
       aberrationIntensity: 0.8,
-      cornerRadius: 12,
+      borderRadius: 12,
       children: <div>Custom glass</div>,
     },
   },

package/src/components/Toggle/Toggle.tsx

@@ -121,7 +121,7 @@ export const Toggle: React.FC<ToggleProps> = ({
       blurAmount: 1,
       saturation: 160,
       aberrationIntensity: 0.5,
-      cornerRadius: 8,
+      borderRadius: 8,
       mode: 'shader' as const,
     };
 

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -349,7 +349,7 @@ export const GlassTooltipCustom: Story = {
       blurAmount: 2,
       saturation: 200,
       aberrationIntensity: 1,
-      cornerRadius: 12,
+      borderRadius: 12,
       mode: 'polar',
     } as GlassProps,
   } as any,

package/src/components/VideoPlayer/VideoPlayer.stories.tsx

@@ -813,7 +813,7 @@ export const GlassCustom: Story = {
       saturation: 180,
       aberrationIntensity: 2.5,
       elasticity: 0.4,
-      cornerRadius: 20,
+      borderRadius: 20,
       mode: 'prominent',
       overLight: false,
     },
@@ -1071,7 +1071,7 @@ export const GlassWithInteractiveContent: Story = {
       saturation: 170,
       aberrationIntensity: 2,
       elasticity: 0.3,
-      cornerRadius: 15,
+      borderRadius: 15,
       mode: 'standard',
     },
     glassOpacity: 0.6,

package/src/lib/composables/__tests__/useAtomixGlassPerf.test.tsx

@@ -0,0 +1,88 @@
+import React, { useRef } from 'react';
+import { render, act } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { useAtomixGlass } from '../useAtomixGlass';
+
+describe('useAtomixGlass Performance', () => {
+  let renderCount = 0;
+  let glassRefOut: React.RefObject<HTMLDivElement> | null = null;
+
+  const TestComponent = () => {
+    renderCount++;
+    const glassRef = useRef<HTMLDivElement>(null);
+    const contentRef = useRef<HTMLDivElement>(null);
+    glassRefOut = glassRef;
+
+    useAtomixGlass({
+      glassRef,
+      contentRef,
+      elasticity: 0.1, // Ensure elasticity so transform changes
+    });
+
+    return (
+      <div ref={glassRef} style={{ width: 200, height: 100 }}>
+        <div ref={contentRef}>Content</div>
+      </div>
+    );
+  };
+
+  beforeEach(() => {
+    renderCount = 0;
+    glassRefOut = null;
+    // Mock getBoundingClientRect
+    Element.prototype.getBoundingClientRect = vi.fn(() => ({
+      width: 200,
+      height: 100,
+      top: 0,
+      left: 0,
+      bottom: 100,
+      right: 200,
+      x: 0,
+      y: 0,
+      toJSON: () => {},
+    }));
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it('does not re-render on mouse move but updates styles', async () => {
+    render(<TestComponent />);
+
+    // Run initial effects
+    await act(async () => {
+      vi.runAllTimers();
+    });
+
+    const countAfterSetup = renderCount;
+    const initialTransform = glassRefOut?.current?.style.transform;
+    console.log(`Initial transform: ${initialTransform}`);
+
+    // Simulate mouse move
+    const moveEvent = new MouseEvent('mousemove', {
+      clientX: 50,
+      clientY: 50,
+      bubbles: true,
+    });
+
+    await act(async () => {
+      document.dispatchEvent(moveEvent);
+      vi.runAllTimers();
+    });
+
+    console.log(`Render count: ${renderCount}`);
+
+    // Expect NO re-render
+    expect(renderCount).toBe(countAfterSetup);
+
+    // Expect style update
+    const finalTransform = glassRefOut?.current?.style.transform;
+    console.log(`Final transform: ${finalTransform}`);
+
+    expect(finalTransform).not.toBe(initialTransform);
+    expect(finalTransform).toContain('translate');
+  });
+});

package/src/lib/composables/__tests__/useChart.test.ts

@@ -0,0 +1,50 @@
+import { describe, it, expect } from 'vitest';
+import { getDatasetBounds } from '../useChart';
+import { ChartDataPoint } from '../../types/components';
+
+describe('useChart', () => {
+  describe('getDatasetBounds', () => {
+    it('should correctly calculate min and max for valid numeric data', () => {
+      const data: ChartDataPoint[] = [
+        { label: 'A', value: 10 },
+        { label: 'B', value: 5 },
+        { label: 'C', value: 20 },
+      ];
+      const result = getDatasetBounds(data);
+      expect(result).toEqual({ min: 5, max: 20, hasValid: true });
+    });
+
+    it('should handle empty data', () => {
+      const data: ChartDataPoint[] = [];
+      const result = getDatasetBounds(data);
+      expect(result).toEqual({ min: Infinity, max: -Infinity, hasValid: false });
+    });
+
+    it('should handle undefined data', () => {
+      const result = getDatasetBounds(undefined);
+      expect(result).toEqual({ min: Infinity, max: -Infinity, hasValid: false });
+    });
+
+    it('should ignore invalid values', () => {
+      const data: any[] = [
+        { label: 'A', value: 10 },
+        { label: 'B', value: 'invalid' },
+        { label: 'C', value: null },
+        { label: 'D', value: 30 },
+      ];
+      const result = getDatasetBounds(data as ChartDataPoint[]);
+      expect(result).toEqual({ min: 10, max: 30, hasValid: true });
+    });
+
+    it('should handle large datasets without stack overflow', () => {
+        const size = 150000;
+        const data: ChartDataPoint[] = Array.from({ length: size }, (_, i) => ({
+            label: `Point ${i}`,
+            value: i
+        }));
+
+        const result = getDatasetBounds(data);
+        expect(result).toEqual({ min: 0, max: size - 1, hasValid: true });
+    });
+  });
+});

package/src/lib/composables/__tests__/useChart.test.tsx

@@ -0,0 +1,139 @@
+import { renderHook, act } from '@testing-library/react';
+import { useChartData } from '../useChart';
+import { ChartDataset } from '../../types/components';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+
+describe('useChartData - Real-time Optimization', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('should not update processedData if data has not changed', () => {
+    const datasets: ChartDataset[] = [
+      {
+        label: 'Dataset 1',
+        data: [
+          { label: '1', value: 10 },
+          { label: '2', value: 20 },
+        ],
+      },
+    ];
+
+    const { result } = renderHook(() =>
+      useChartData(datasets, {
+        enableRealTime: true,
+        realTimeInterval: 1000,
+        enableDecimation: false,
+      })
+    );
+
+    const initialData = result.current.processedData;
+
+    // Advance time
+    act(() => {
+      vi.advanceTimersByTime(1100);
+    });
+
+    expect(result.current.processedData).toBe(initialData);
+  });
+
+  it('should update processedData if data length changes (mutation)', () => {
+    const datasets: ChartDataset[] = [
+      {
+        label: 'Dataset 1',
+        data: [
+          { label: '1', value: 10 },
+          { label: '2', value: 20 },
+        ],
+      },
+    ];
+
+    const { result } = renderHook(() =>
+      useChartData(datasets, {
+        enableRealTime: true,
+        realTimeInterval: 1000,
+        enableDecimation: false,
+      })
+    );
+
+    const initialData = result.current.processedData;
+
+    datasets[0].data.push({ label: '3', value: 30 });
+
+    act(() => {
+      vi.advanceTimersByTime(1100);
+    });
+
+    expect(result.current.processedData).not.toBe(initialData);
+    expect(result.current.processedData[0].data.length).toBe(3);
+  });
+
+  it('should update processedData if data value changes (mutation)', () => {
+    const datasets: ChartDataset[] = [
+      {
+        label: 'Dataset 1',
+        data: [
+          { label: '1', value: 10 },
+          { label: '2', value: 20 },
+        ],
+      },
+    ];
+
+    const { result } = renderHook(() =>
+      useChartData(datasets, {
+        enableRealTime: true,
+        realTimeInterval: 1000,
+        enableDecimation: false,
+      })
+    );
+
+    const initialData = result.current.processedData;
+
+    datasets[0].data[1].value = 25;
+
+    act(() => {
+      vi.advanceTimersByTime(1100);
+    });
+
+    expect(result.current.processedData).not.toBe(initialData);
+    expect(result.current.processedData[0].data[1].value).toBe(25);
+  });
+
+  it('should update processedData if historical data changes (mutation)', () => {
+    const datasets: ChartDataset[] = [
+      {
+        label: 'Dataset 1',
+        data: [
+          { label: '1', value: 10 },
+          { label: '2', value: 20 },
+          { label: '3', value: 30 },
+        ],
+      },
+    ];
+
+    const { result } = renderHook(() =>
+      useChartData(datasets, {
+        enableRealTime: true,
+        realTimeInterval: 1000,
+        enableDecimation: false,
+      })
+    );
+
+    const initialData = result.current.processedData;
+
+    // Mutate historical data (index 0)
+    datasets[0].data[0].value = 15;
+
+    act(() => {
+      vi.advanceTimersByTime(1100);
+    });
+
+    // Should update
+    expect(result.current.processedData).not.toBe(initialData);
+    expect(result.current.processedData[0].data[0].value).toBe(15);
+  });
+});

package/src/lib/composables/__tests__/useHeroBackgroundSlider.test.tsx

@@ -0,0 +1,59 @@
+import { renderHook, act } from '@testing-library/react';
+import { useHeroBackgroundSlider } from '../useHeroBackgroundSlider';
+import { HeroBackgroundSliderConfig } from '../../types/components';
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
+
+describe('useHeroBackgroundSlider Performance', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it('should not reset interval frequently during autoplay', () => {
+    const config: HeroBackgroundSliderConfig = {
+      slides: [
+        { type: 'image', src: 'slide1.jpg' },
+        { type: 'image', src: 'slide2.jpg' },
+        { type: 'image', src: 'slide3.jpg' },
+      ],
+      autoplay: {
+        delay: 3000,
+      },
+      transitionDuration: 1000,
+    };
+
+    const clearIntervalSpy = vi.spyOn(global, 'clearInterval');
+
+    const { result } = renderHook(() => useHeroBackgroundSlider(config));
+
+    // Reset call count after initial render
+    clearIntervalSpy.mockClear();
+
+    // 1st Transition
+    act(() => {
+      vi.advanceTimersByTime(3000);
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+
+    // 2nd Transition
+    act(() => {
+      vi.advanceTimersByTime(3000);
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+
+    console.log(`clearInterval calls: ${clearIntervalSpy.mock.calls.length}`);
+
+    // With optimization, the interval should persist and not be cleared during transitions
+    expect(clearIntervalSpy).toHaveBeenCalledTimes(0);
+  });
+});

package/src/lib/composables/__tests__/useSliderAutoplay.test.tsx

@@ -0,0 +1,68 @@
+import { renderHook, act } from '@testing-library/react';
+import { useSlider } from '../useSlider';
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { SliderSlide } from '../../types/components';
+
+describe('useSlider Autoplay Optimization', () => {
+  const slides: SliderSlide[] = [
+    { id: '1', content: 'Slide 1' },
+    { id: '2', content: 'Slide 2' },
+    { id: '3', content: 'Slide 3' },
+  ];
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it('should not reset interval when transitioning state changes', () => {
+    const setIntervalSpy = vi.spyOn(global, 'setInterval');
+    const clearIntervalSpy = vi.spyOn(global, 'clearInterval');
+
+    const autoplayConfig = { delay: 1000 };
+
+    const { result } = renderHook(() =>
+      useSlider({
+        slides,
+        autoplay: autoplayConfig,
+        speed: 300,
+        slidesToShow: 1,
+      })
+    );
+
+    // Initial render should set interval.
+    // Note: It might be called more than once due to initial state updates (like internalIndex setting)
+    // causing re-renders if dependencies are unstable, though refs should be stable.
+    // However, strictly, we want to verify it doesn't reset DURING autoplay cycle.
+
+    // Let's clear mocks after initial render is done.
+    setIntervalSpy.mockClear();
+    clearIntervalSpy.mockClear();
+
+    // Fast-forward to trigger autoplay
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+
+    // Check if transition started
+    expect(result.current.transitioning).toBe(true);
+
+    // At this point, in the buggy version, transitioning becoming true triggers the effect cleanup and re-setup.
+    // So we expect setInterval/clearInterval to have been called.
+
+    // Let's see what happens after transition ends
+    act(() => {
+        vi.advanceTimersByTime(300); // speed is 300
+    });
+
+    expect(result.current.transitioning).toBe(false);
+
+    // In the optimized version, these should be 0 because the interval persists.
+    expect(setIntervalSpy).toHaveBeenCalledTimes(0);
+    expect(clearIntervalSpy).toHaveBeenCalledTimes(0);
+  });
+});