@shohojdhara/atomix 0.4.0 → 0.4.2

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);
+  });
+});