@addev-be/ui 2.5.17 → 2.6.0

package/src/hooks/useElementSize.ts

@@ -1,24 +1,24 @@
-import { useEffect, useState } from 'react';
-
-export const useElementSize = (element: HTMLElement | null) => {
-  const [size, setSize] = useState({ width: 0, height: 0 });
-
-  useEffect(() => {
-    if (!element) {
-      return;
-    }
-
-    const observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      const { width, height } = entry.contentRect;
-      setSize({ width, height });
-    });
-
-    observer.observe(element);
-    return () => {
-      observer.disconnect();
-    };
-  }, [element]);
-
-  return size;
-};
+import { useEffect, useState } from 'react';
+
+export const useElementSize = (element: HTMLElement | null) => {
+  const [size, setSize] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    if (!element) {
+      return;
+    }
+
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      const { width, height } = entry.contentRect;
+      setSize({ width, height });
+    });
+
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [element]);
+
+  return size;
+};

package/src/hooks/useMediaQuery.ts

@@ -1,9 +1,9 @@
-import { useMediaQueryForWidth } from './useMediaQueryForWidth';
-import { useWindowSize } from './useWindowSize';
-
-export const useMediaQuery = () => {
-  const { width } = useWindowSize();
-  const realWidth = width ?? 0;
-
-  return useMediaQueryForWidth(realWidth);
-};
+import { useMediaQueryForWidth } from './useMediaQueryForWidth';
+import { useWindowSize } from './useWindowSize';
+
+export const useMediaQuery = () => {
+  const { width } = useWindowSize();
+  const realWidth = width ?? 0;
+
+  return useMediaQueryForWidth(realWidth);
+};

package/src/hooks/useMediaQueryForWidth.ts

@@ -1,35 +1,35 @@
-import {
-  findBreakpoint,
-  isGreaterThanOrEqual,
-  isSmallerThanOrEqual,
-} from '../helpers/responsive';
-
-import { useMemo } from 'react';
-
-export const useMediaQueryForWidth = (width: number) => {
-  const breakpoint = findBreakpoint(width);
-
-  return useMemo(
-    () => ({
-      breakpoint,
-
-      isXs: breakpoint === 'xs',
-      isSm: breakpoint === 'sm',
-      isMd: breakpoint === 'md',
-      isLg: breakpoint === 'lg',
-      isXl: breakpoint === 'xl',
-      isXxl: breakpoint === 'xxl',
-
-      isSmDown: isSmallerThanOrEqual('sm', breakpoint),
-      isMdDown: isSmallerThanOrEqual('md', breakpoint),
-      isLgDown: isSmallerThanOrEqual('lg', breakpoint),
-      isXlDown: isSmallerThanOrEqual('xl', breakpoint),
-
-      isSmUp: isGreaterThanOrEqual('sm', breakpoint),
-      isMdUp: isGreaterThanOrEqual('md', breakpoint),
-      isLgUp: isGreaterThanOrEqual('lg', breakpoint),
-      isXlUp: isGreaterThanOrEqual('xl', breakpoint),
-    }),
-    [breakpoint]
-  );
-};
+import {
+  findBreakpoint,
+  isGreaterThanOrEqual,
+  isSmallerThanOrEqual,
+} from '../helpers/responsive';
+
+import { useMemo } from 'react';
+
+export const useMediaQueryForWidth = (width: number) => {
+  const breakpoint = findBreakpoint(width);
+
+  return useMemo(
+    () => ({
+      breakpoint,
+
+      isXs: breakpoint === 'xs',
+      isSm: breakpoint === 'sm',
+      isMd: breakpoint === 'md',
+      isLg: breakpoint === 'lg',
+      isXl: breakpoint === 'xl',
+      isXxl: breakpoint === 'xxl',
+
+      isSmDown: isSmallerThanOrEqual('sm', breakpoint),
+      isMdDown: isSmallerThanOrEqual('md', breakpoint),
+      isLgDown: isSmallerThanOrEqual('lg', breakpoint),
+      isXlDown: isSmallerThanOrEqual('xl', breakpoint),
+
+      isSmUp: isGreaterThanOrEqual('sm', breakpoint),
+      isMdUp: isGreaterThanOrEqual('md', breakpoint),
+      isLgUp: isGreaterThanOrEqual('lg', breakpoint),
+      isXlUp: isGreaterThanOrEqual('xl', breakpoint),
+    }),
+    [breakpoint]
+  );
+};

package/src/hooks/useMutableState.test.ts

@@ -0,0 +1,410 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { act, renderHook } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { isDispatchFunction, useMutableState } from './useMutableState';
+
+describe('isDispatchFunction', () => {
+  it('should return true for functions', () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const fn = (state: any) => state;
+    expect(isDispatchFunction(fn)).toBe(true);
+  });
+
+  it('should return false for objects', () => {
+    expect(isDispatchFunction({ key: 'value' })).toBe(false);
+  });
+
+  it('should return false for primitives', () => {
+    expect(isDispatchFunction('string')).toBe(false);
+    expect(isDispatchFunction(123)).toBe(false);
+    expect(isDispatchFunction(null)).toBe(false);
+    expect(isDispatchFunction(undefined)).toBe(false);
+  });
+});
+
+describe('useMutableState', () => {
+  describe('initialization', () => {
+    it('should initialize with default value', () => {
+      const { result } = renderHook(() =>
+        useMutableState({ name: 'John', age: 30 })
+      );
+      const [state] = result.current;
+
+      expect(state).toEqual({ name: 'John', age: 30 });
+    });
+
+    it('should initialize with empty object when no value is provided', () => {
+      const { result } = renderHook(() => useMutableState());
+      const [state] = result.current;
+
+      expect(state).toEqual({});
+    });
+
+    it('should initialize with function result', () => {
+      const { result } = renderHook(() =>
+        useMutableState(() => ({ count: 0, items: [] }))
+      );
+      const [state] = result.current;
+
+      expect(state).toEqual({ count: 0, items: [] });
+    });
+
+    it('should return tuple with three elements', () => {
+      const { result } = renderHook(() => useMutableState({ value: 1 }));
+
+      expect(result.current).toHaveLength(3);
+      expect(typeof result.current[0]).toBe('object');
+      expect(typeof result.current[1]).toBe('function');
+      expect(typeof result.current[2]).toBe('function');
+    });
+  });
+
+  describe('setValue (full state update)', () => {
+    it('should update entire state with new value', () => {
+      const { result } = renderHook(() =>
+        useMutableState({ name: 'John', age: 30 })
+      );
+
+      act(() => {
+        const [, setValue] = result.current;
+        setValue({ name: 'Jane', age: 25 });
+      });
+
+      expect(result.current[0]).toEqual({ name: 'Jane', age: 25 });
+    });
+
+    it('should update state using function', () => {
+      const { result } = renderHook(() => useMutableState({ count: 0 }));
+
+      act(() => {
+        const [, setValue] = result.current;
+        setValue((prev) => ({ count: prev.count + 1 }));
+      });
+
+      expect(result.current[0]).toEqual({ count: 1 });
+    });
+
+    it('should replace entire state object', () => {
+      const { result } = renderHook(() =>
+        useMutableState({ name: 'John', age: 30, city: 'Paris' })
+      );
+
+      act(() => {
+        const [, setValue] = result.current;
+        setValue({ name: 'Jane', age: 22, city: 'London' });
+      });
+
+      expect(result.current[0]).toEqual({
+        name: 'Jane',
+        age: 22,
+        city: 'London',
+      });
+    });
+  });
+
+  describe('setPartialValue (partial state update)', () => {
+    it('should merge partial object with existing state', () => {
+      const { result } = renderHook(() =>
+        useMutableState({ name: 'John', age: 30, city: 'Paris' })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({ age: 31 });
+      });
+
+      expect(result.current[0]).toEqual({
+        name: 'John',
+        age: 31,
+        city: 'Paris',
+      });
+    });
+
+    it('should merge partial object using function', () => {
+      const { result } = renderHook(() =>
+        useMutableState({ count: 0, total: 100 })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue((state) => ({ count: state.count + 5 }));
+      });
+
+      expect(result.current[0]).toEqual({ count: 5, total: 100 });
+    });
+
+    it('should handle deep nested objects', () => {
+      const { result } = renderHook(() =>
+        useMutableState({
+          user: {
+            name: 'John',
+            address: {
+              city: 'Paris',
+              country: 'France',
+            },
+          },
+          settings: {
+            theme: 'dark',
+          },
+        })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({
+          user: {
+            address: {
+              city: 'Lyon',
+            },
+          },
+        });
+      });
+
+      expect(result.current[0]).toEqual({
+        user: {
+          name: 'John',
+          address: {
+            city: 'Lyon',
+            country: 'France',
+          },
+        },
+        settings: {
+          theme: 'dark',
+        },
+      });
+    });
+
+    it('should add new properties to state', () => {
+      const { result } = renderHook(() =>
+        useMutableState<{ name: string; age?: number }>({ name: 'John' })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({ age: 30 });
+      });
+
+      expect(result.current[0]).toEqual({ name: 'John', age: 30 });
+    });
+
+    it('should handle multiple consecutive updates', () => {
+      const { result } = renderHook(() =>
+        useMutableState({ count: 0, value: 10 })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({ count: 1 });
+        setPartialValue({ value: 20 });
+        setPartialValue({ count: 2 });
+      });
+
+      expect(result.current[0]).toEqual({ count: 2, value: 20 });
+    });
+
+    it('should handle empty partial object', () => {
+      const { result } = renderHook(() =>
+        useMutableState({ name: 'John', age: 30 })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({});
+      });
+
+      expect(result.current[0]).toEqual({ name: 'John', age: 30 });
+    });
+
+    it('should preserve arrays correctly', () => {
+      const { result } = renderHook(() =>
+        useMutableState({ items: [1, 2, 3], count: 0 })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({ count: 5 });
+      });
+
+      expect(result.current[0]).toEqual({ items: [1, 2, 3], count: 5 });
+    });
+
+    it('should update arrays when provided', () => {
+      const { result } = renderHook(() =>
+        useMutableState({ items: [1, 2, 3], count: 0 })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({ items: [4, 5, 6] });
+      });
+
+      expect(result.current[0]).toEqual({ items: [4, 5, 6], count: 0 });
+    });
+  });
+
+  describe('referential stability', () => {
+    it('should maintain stable setPartialValue reference', () => {
+      const { result, rerender } = renderHook(() =>
+        useMutableState({ count: 0 })
+      );
+
+      const [, , firstSetPartial] = result.current;
+
+      act(() => {
+        const [, setValue] = result.current;
+        setValue({ count: 1 });
+      });
+
+      rerender();
+
+      const [, , secondSetPartial] = result.current;
+
+      expect(firstSetPartial).toBe(secondSetPartial);
+    });
+
+    it('should trigger new reference when state changes', () => {
+      const { result, rerender } = renderHook(() =>
+        useMutableState({ count: 0 })
+      );
+
+      const [firstState] = result.current;
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({ count: 1 });
+      });
+
+      rerender();
+
+      const [secondState] = result.current;
+
+      expect(firstState).not.toBe(secondState);
+    });
+  });
+
+  describe('complex types', () => {
+    interface ComplexState {
+      id: number;
+      user: {
+        name: string;
+        email: string;
+        preferences: {
+          notifications: boolean;
+          theme: 'light' | 'dark';
+        };
+      };
+      items: string[];
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      metadata?: Record<string, any>;
+    }
+
+    it('should handle complex nested types', () => {
+      const initialState: ComplexState = {
+        id: 1,
+        user: {
+          name: 'John',
+          email: 'john@example.com',
+          preferences: {
+            notifications: true,
+            theme: 'dark',
+          },
+        },
+        items: ['item1', 'item2'],
+      };
+
+      const { result } = renderHook(() => useMutableState(initialState));
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({
+          user: {
+            preferences: {
+              theme: 'light',
+            },
+          },
+          metadata: { lastUpdated: Date.now() },
+        });
+      });
+
+      const [state] = result.current;
+
+      expect(state.user.name).toBe('John');
+      expect(state.user.email).toBe('john@example.com');
+      expect(state.user.preferences.notifications).toBe(true);
+      expect(state.user.preferences.theme).toBe('light');
+      expect(state.metadata).toBeDefined();
+      expect(state.items).toEqual(['item1', 'item2']);
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle null values', () => {
+      const { result } = renderHook(() =>
+        useMutableState<{ value: string | null }>({ value: 'test' })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({ value: null });
+      });
+
+      expect(result.current[0]).toEqual({ value: null });
+    });
+
+    it('should handle undefined values', () => {
+      const { result } = renderHook(() =>
+        useMutableState<{ value?: string }>({ value: 'test' })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({ value: undefined });
+      });
+
+      // defaultsDeep doesn't override with undefined, so original value remains
+      expect(result.current[0].value).toBe('test');
+    });
+
+    it('should handle state with boolean false', () => {
+      const { result } = renderHook(() =>
+        useMutableState({ isActive: true, isEnabled: true })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({ isActive: false });
+      });
+
+      expect(result.current[0]).toEqual({ isActive: false, isEnabled: true });
+    });
+
+    it('should handle state with number zero', () => {
+      const { result } = renderHook(() =>
+        useMutableState({ count: 10, total: 100 })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({ count: 0 });
+      });
+
+      expect(result.current[0]).toEqual({ count: 0, total: 100 });
+    });
+
+    it('should handle state with empty string', () => {
+      const { result } = renderHook(() =>
+        useMutableState({ name: 'John', description: 'Test' })
+      );
+
+      act(() => {
+        const [, , setPartialValue] = result.current;
+        setPartialValue({ name: '' });
+      });
+
+      expect(result.current[0]).toEqual({ name: '', description: 'Test' });
+    });
+  });
+});

package/src/hooks/useMutableState.ts

@@ -1,25 +1,39 @@
-import { useCallback, useMemo, useState } from 'react';
-
-import { DeepPartial } from '../types';
-import { defaultsDeep } from 'lodash';
-
-export type PartialSetStateAction<T> = (partialValue: DeepPartial<T>) => void;
-
-export type UseMutableStateReturn<T> = readonly [
-  T,
-  React.Dispatch<React.SetStateAction<T>>,
-  PartialSetStateAction<T>
-];
-
-export const useMutableState = <T>(initialValue: T | (() => T) = {} as T) => {
-  const [value, setValue] = useState<T>(initialValue);
-
-  const setPartialValue = useCallback((partialValue: DeepPartial<T>) => {
-    setValue((value) => defaultsDeep({}, partialValue, value));
-  }, []);
-
-  return useMemo(
-    () => [value, setValue, setPartialValue] as const,
-    [setPartialValue, value]
-  );
-};
+import { Dispatch, useCallback, useMemo, useState } from 'react';
+
+import { DeepPartial } from '../types';
+import { defaultsDeep } from 'lodash';
+
+export type PartialSetStateAction<T> =
+  | DeepPartial<T>
+  | ((state: T) => DeepPartial<T>);
+
+export type UseMutableStateReturn<T> = readonly [
+  T,
+  React.Dispatch<React.SetStateAction<T>>,
+  Dispatch<PartialSetStateAction<T>>
+];
+
+export const isDispatchFunction = <T>(
+  value: PartialSetStateAction<T>
+): value is (state: T) => DeepPartial<T> => typeof value === 'function';
+
+export const useMutableState = <T>(initialValue: T | (() => T) = {} as T) => {
+  const [value, setValue] = useState<T>(initialValue);
+
+  const setPartialValue = useCallback<Dispatch<PartialSetStateAction<T>>>(
+    (partialValue) => {
+      setValue((value) => {
+        const resolvedPartialValue = isDispatchFunction(partialValue)
+          ? partialValue(value)
+          : partialValue;
+        return defaultsDeep({}, resolvedPartialValue, value);
+      });
+    },
+    []
+  );
+
+  return useMemo(
+    () => [value, setValue, setPartialValue] as const,
+    [setPartialValue, value]
+  );
+};

package/src/hooks/useShowArchived.ts

@@ -1,28 +1,28 @@
-import { useCallback, useMemo, useState } from 'react';
-
-import { ConditionDTO } from '../services/sqlRequests';
-
-export const useShowArchived = (initialValue?: boolean) => {
-  const [showArchived, setShowArchived] = useState(initialValue ?? false);
-
-  const toggleShowArchived = useCallback((value?: boolean) => {
-    setShowArchived((prev) => (value === undefined ? !prev : value));
-  }, []);
-
-  const archivedConditions = useMemo<ConditionDTO[]>(
-    () =>
-      showArchived
-        ? []
-        : [{ field: 'Archived', operator: 'notEquals', value: 1 }],
-    [showArchived]
-  );
-
-  return useMemo(
-    () => ({
-      archivedConditions,
-      showArchived,
-      toggleShowArchived,
-    }),
-    [archivedConditions, showArchived, toggleShowArchived]
-  );
-};
+import { useCallback, useMemo, useState } from 'react';
+
+import { ConditionDTO } from '../services/sqlRequests';
+
+export const useShowArchived = (initialValue?: boolean) => {
+  const [showArchived, setShowArchived] = useState(initialValue ?? false);
+
+  const toggleShowArchived = useCallback((value?: boolean) => {
+    setShowArchived((prev) => (value === undefined ? !prev : value));
+  }, []);
+
+  const archivedConditions = useMemo<ConditionDTO[]>(
+    () =>
+      showArchived
+        ? []
+        : [{ field: 'Archived', operator: 'notEquals', value: 1 }],
+    [showArchived]
+  );
+
+  return useMemo(
+    () => ({
+      archivedConditions,
+      showArchived,
+      toggleShowArchived,
+    }),
+    [archivedConditions, showArchived, toggleShowArchived]
+  );
+};