@evoke-platform/ui-components 1.6.0-dev.1 → 1.6.0-dev.11

package/dist/published/theme/hooks.test.js

@@ -0,0 +1,187 @@
+import { renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useWidgetSize } from '.';
+// Shared mock bounds for useMeasure
+let mockBounds = {
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+    bottom: 0,
+    right: 0,
+    x: 0,
+    y: 0,
+};
+function setMockBounds(newBounds) {
+    mockBounds = { ...mockBounds, ...newBounds };
+}
+// Mock useMeasure from react-use-measure
+vi.mock('react-use-measure', () => {
+    const useMeasure = () => [
+        vi.fn(),
+        mockBounds,
+    ];
+    return { __esModule: true, default: useMeasure, useMeasure };
+});
+describe('useWidgetSize', () => {
+    beforeEach(() => {
+        // Reset bounds before each test
+        setMockBounds({
+            left: 0,
+            top: 0,
+            width: 0,
+            height: 0,
+            bottom: 0,
+            right: 0,
+            x: 0,
+            y: 0,
+        });
+    });
+    it('should provide ref and basic structure', () => {
+        setMockBounds({ width: 123, height: 456 });
+        const { result } = renderHook(() => useWidgetSize());
+        expect(result.current.ref).toBeDefined();
+        expect(typeof result.current.ref).toBe('function');
+        expect(result.current.width).toBe(123);
+        expect(result.current.height).toBe(456);
+    });
+    describe('breakpoints', () => {
+        it('should set isXs for width < 800', () => {
+            setMockBounds({ width: 799, height: 100 });
+            const { result } = renderHook(() => useWidgetSize());
+            expect(result.current.breakpoints.isXs).toBe(true);
+            expect(result.current.breakpoints.isSm).toBe(false);
+            expect(result.current.breakpoints.isMd).toBe(false);
+            expect(result.current.breakpoints.isLg).toBe(false);
+            expect(result.current.breakpoints.isXl).toBe(false);
+        });
+        it('should set isSm for 800 <= width < 1000', () => {
+            setMockBounds({ width: 800, height: 100 });
+            let { result } = renderHook(() => useWidgetSize());
+            expect(result.current.breakpoints.isXs).toBe(false);
+            expect(result.current.breakpoints.isSm).toBe(true);
+            expect(result.current.breakpoints.isMd).toBe(false);
+            expect(result.current.breakpoints.isLg).toBe(false);
+            expect(result.current.breakpoints.isXl).toBe(false);
+            setMockBounds({ width: 999, height: 100 });
+            result = renderHook(() => useWidgetSize()).result;
+            expect(result.current.breakpoints.isXs).toBe(false);
+            expect(result.current.breakpoints.isSm).toBe(true);
+            expect(result.current.breakpoints.isMd).toBe(false);
+            expect(result.current.breakpoints.isLg).toBe(false);
+            expect(result.current.breakpoints.isXl).toBe(false);
+        });
+        it('should set isMd for 1000 <= width < 1200', () => {
+            setMockBounds({ width: 1000, height: 100 });
+            let { result } = renderHook(() => useWidgetSize());
+            expect(result.current.breakpoints.isXs).toBe(false);
+            expect(result.current.breakpoints.isSm).toBe(false);
+            expect(result.current.breakpoints.isMd).toBe(true);
+            expect(result.current.breakpoints.isLg).toBe(false);
+            expect(result.current.breakpoints.isXl).toBe(false);
+            setMockBounds({ width: 1199, height: 100 });
+            result = renderHook(() => useWidgetSize()).result;
+            expect(result.current.breakpoints.isXs).toBe(false);
+            expect(result.current.breakpoints.isSm).toBe(false);
+            expect(result.current.breakpoints.isMd).toBe(true);
+            expect(result.current.breakpoints.isLg).toBe(false);
+            expect(result.current.breakpoints.isXl).toBe(false);
+        });
+        it('should set isLg for 1200 <= width < 1400', () => {
+            setMockBounds({ width: 1200, height: 100 });
+            let { result } = renderHook(() => useWidgetSize());
+            expect(result.current.breakpoints.isXs).toBe(false);
+            expect(result.current.breakpoints.isSm).toBe(false);
+            expect(result.current.breakpoints.isMd).toBe(false);
+            expect(result.current.breakpoints.isLg).toBe(true);
+            expect(result.current.breakpoints.isXl).toBe(false);
+            setMockBounds({ width: 1399, height: 100 });
+            result = renderHook(() => useWidgetSize()).result;
+            expect(result.current.breakpoints.isXs).toBe(false);
+            expect(result.current.breakpoints.isSm).toBe(false);
+            expect(result.current.breakpoints.isMd).toBe(false);
+            expect(result.current.breakpoints.isLg).toBe(true);
+            expect(result.current.breakpoints.isXl).toBe(false);
+        });
+        it('should set isXl for width >= 1400', () => {
+            setMockBounds({ width: 1400, height: 100 });
+            let { result } = renderHook(() => useWidgetSize());
+            expect(result.current.breakpoints.isXs).toBe(false);
+            expect(result.current.breakpoints.isSm).toBe(false);
+            expect(result.current.breakpoints.isMd).toBe(false);
+            expect(result.current.breakpoints.isLg).toBe(false);
+            expect(result.current.breakpoints.isXl).toBe(true);
+            setMockBounds({ width: 2000, height: 100 });
+            result = renderHook(() => useWidgetSize()).result;
+            expect(result.current.breakpoints.isXs).toBe(false);
+            expect(result.current.breakpoints.isSm).toBe(false);
+            expect(result.current.breakpoints.isMd).toBe(false);
+            expect(result.current.breakpoints.isLg).toBe(false);
+            expect(result.current.breakpoints.isXl).toBe(true);
+        });
+        it('should set isCompact for height < 300', () => {
+            setMockBounds({ width: 1000, height: 299 });
+            const { result } = renderHook(() => useWidgetSize());
+            expect(result.current.breakpoints.isCompact).toBe(true);
+            expect(result.current.breakpoints.isTall).toBe(false);
+        });
+        it('should set isTall for height >= 600', () => {
+            setMockBounds({ width: 1000, height: 600 });
+            const { result } = renderHook(() => useWidgetSize());
+            expect(result.current.breakpoints.isTall).toBe(true);
+            expect(result.current.breakpoints.isCompact).toBe(false);
+            setMockBounds({ width: 1000, height: 800 });
+            const { result: result2 } = renderHook(() => useWidgetSize());
+            expect(result2.current.breakpoints.isTall).toBe(true);
+            expect(result2.current.breakpoints.isCompact).toBe(false);
+        });
+        it('should not set isCompact or isTall for 300 <= height < 600', () => {
+            setMockBounds({ width: 1000, height: 300 });
+            let { result } = renderHook(() => useWidgetSize());
+            expect(result.current.breakpoints.isCompact).toBe(false);
+            expect(result.current.breakpoints.isTall).toBe(false);
+            setMockBounds({ width: 1000, height: 599 });
+            result = renderHook(() => useWidgetSize()).result;
+            expect(result.current.breakpoints.isCompact).toBe(false);
+            expect(result.current.breakpoints.isTall).toBe(false);
+        });
+    });
+    it('should provide bounds information', () => {
+        setMockBounds({
+            left: 1,
+            top: 2,
+            width: 300,
+            height: 400,
+            bottom: 402,
+            right: 301,
+            x: 1,
+            y: 2,
+        });
+        const { result } = renderHook(() => useWidgetSize());
+        expect(result.current.bounds).toBeDefined();
+        expect(result.current.bounds.left).toBe(1);
+        expect(result.current.bounds.top).toBe(2);
+        expect(result.current.bounds.width).toBe(300);
+        expect(result.current.bounds.height).toBe(400);
+        expect(result.current.bounds.bottom).toBe(402);
+        expect(result.current.bounds.right).toBe(301);
+        expect(result.current.bounds.x).toBe(1);
+        expect(result.current.bounds.y).toBe(2);
+    });
+    it('should provide responsive utility functions', () => {
+        setMockBounds({ width: 1200 });
+        const { result } = renderHook(() => useWidgetSize());
+        expect(result.current.isAbove).toBeDefined();
+        expect(typeof result.current.isAbove).toBe('function');
+        expect(result.current.isBelow).toBeDefined();
+        expect(typeof result.current.isBelow).toBe('function');
+    });
+    it('should calculate responsive utility functions correctly', () => {
+        setMockBounds({ width: 1100 });
+        const { result } = renderHook(() => useWidgetSize());
+        expect(result.current.isAbove('sm')).toBe(true); // 1100 >= 1000
+        expect(result.current.isBelow('lg')).toBe(true); // 1100 < 1400
+        expect(result.current.isAbove('xl')).toBe(false); // 1100 < Infinity
+        expect(result.current.isBelow('xs')).toBe(false); // 1100 >= 800
+    });
+});

package/dist/published/theme/index.d.ts

@@ -1,5 +1,5 @@
 import { useMediaQuery, useTheme } from '@mui/material';
 import UIThemeProvider from './UIThemeProvider';
-import { useResponsive } from './hooks';
-export { useMediaQuery, useResponsive, useTheme };
+import { useResponsive, useWidgetSize, type WidgetSizeInfo } from './hooks';
+export { useMediaQuery, useResponsive, useTheme, useWidgetSize, type WidgetSizeInfo };
 export default UIThemeProvider;

package/dist/published/theme/index.js

@@ -1,5 +1,5 @@
 import { useMediaQuery, useTheme } from '@mui/material';
 import UIThemeProvider from './UIThemeProvider';
-import { useResponsive } from './hooks';
-export { useMediaQuery, useResponsive, useTheme };
+import { useResponsive, useWidgetSize } from './hooks';
+export { useMediaQuery, useResponsive, useTheme, useWidgetSize };
 export default UIThemeProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.6.0-dev.1",
+    "version": "1.6.0-dev.11",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -128,6 +128,7 @@
         "react-input-mask": "^2.0.4",
         "react-number-format": "^4.9.3",
         "react-querybuilder": "^6.0.2",
+        "react-use-measure": "^2.1.7",
         "rtf.js": "^3.0.9",
         "sift": "^17.1.3",
         "small-date": "^2.0.0",