@websolutespa/bom-mixer-hooks 0.2.0 → 0.2.2

package/src/useDateTimeFormat/useDateTimeFormat.test.tsx

@@ -0,0 +1,47 @@
+import { renderHook } from '@testing-library/react';
+import { LayoutDefaults } from '@websolutespa/bom-mixer-mock';
+import { LayoutProvider } from '../useLayout/useLayout';
+import { useDateTimeFormat } from './useDateTimeFormat';
+
+const wrapper = (props: { children: React.ReactNode }) => (
+  <LayoutProvider layout={LayoutDefaults}>{props.children}</LayoutProvider>
+);
+
+describe('useDateTimeFormat', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'error').mockImplementation(() => { });
+  });
+
+  test('should throw without provider', () => {
+    expect(() => {
+      renderHook(() => useDateTimeFormat());
+    }).toThrow('useGenericContext must be used within a Provider');
+  });
+
+  test('should not throw with provider', () => {
+    expect(() => {
+      renderHook(() => useDateTimeFormat(), { wrapper });
+    }).not.toThrow();
+  });
+
+  test('should return formatted dateTime', () => {
+    const { result } = renderHook(() => useDateTimeFormat({
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    }), { wrapper });
+    const formatted = result.current(new Date(2023, 0, 19));
+    expect(formatted).toEqual('Jan 19, 2023');
+  });
+
+  test('should return formatted dateTime with date string', () => {
+    const { result } = renderHook(() => useDateTimeFormat({
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    }), { wrapper });
+    const formatted = result.current('2023/1/19');
+    expect(formatted).toEqual('Jan 19, 2023');
+  });
+
+});

package/src/useDateTimeFormat/useDateTimeFormat.ts

@@ -0,0 +1,22 @@
+import { useLayout } from '../useLayout/useLayout';
+
+export function useDateTimeFormat(
+  options: Intl.DateTimeFormatOptions = {
+    // weekday: 'long',
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric'
+  },
+  locale?: string
+): (value: Date | string) => string {
+
+  const layout = useLayout();
+
+  const dateTimeFormat = (value: Date | string): string => {
+    const date = value instanceof Date ? value : new Date(value);
+    const formattedValue = new Intl.DateTimeFormat(locale || layout.locale, options).format(date);
+    return formattedValue;
+  };
+
+  return dateTimeFormat;
+}

package/src/useDebounce/useDebounce.test.ts

@@ -0,0 +1,49 @@
+// readme https://testing-library.com/
+import { renderHook } from '@testing-library/react';
+import { useDebounce } from './useDebounce';
+
+describe('useDebounce', () => {
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  test('should return debounce value', () => {
+    const value = 'value';
+    const { result } = renderHook(() => useDebounce(value));
+    expect(value).toBe(result.current);
+  });
+
+  test('should debounce with default debounce 500 ms', () => {
+    mockSetTimeout();
+    const value = 'value';
+    renderHook(() => useDebounce(value));
+    expect(setTimeout).toHaveBeenCalledTimes(1);
+    expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 500);
+  });
+
+  test('should debounce with given debounce', () => {
+    mockSetTimeout();
+    const value = 'value';
+    renderHook(() => useDebounce(value, 1337));
+    expect(setTimeout).toHaveBeenCalledTimes(1);
+    expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 1337);
+  });
+
+  test('should call clearTimeout on unmount', () => {
+    mockClearTimeout();
+    const value = 'value';
+    const { unmount } = renderHook(() => useDebounce(value));
+    unmount();
+    expect(clearTimeout).toHaveBeenCalledTimes(1);
+  });
+});
+
+function mockSetTimeout() {
+  jest.useFakeTimers();
+  jest.spyOn(global, 'setTimeout');
+}
+
+function mockClearTimeout() {
+  jest.useFakeTimers();
+  jest.spyOn(global, 'clearTimeout');
+}

package/src/useDebounce/useDebounce.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+
+export function useDebounce<T>(value: T, msec: number = 500): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), msec);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, msec]);
+
+  return debouncedValue;
+}

package/src/useDebounceCallback/useDebounceCallback.test.ts

@@ -0,0 +1,34 @@
+// readme https://testing-library.com/
+import { act, renderHook } from '@testing-library/react';
+import { useDebounceCallback } from './useDebounceCallback';
+
+const renderDebounceCallback = (callback: () => unknown, msec: number = 500) =>
+  renderHook(() => useDebounceCallback(callback, msec));
+
+describe('useDebounceCallback', () => {
+  jest.useFakeTimers();
+
+  it('should wait 100ms before invoking the callback', () => {
+    const callback = jest.fn();
+    const { result } = renderDebounceCallback(callback, 100);
+    const debouncedCallback = result.current;
+
+    act(debouncedCallback);
+    act(debouncedCallback);
+    act(debouncedCallback);
+
+    act(() => jest.advanceTimersByTime(50));
+    expect(callback).toBeCalledTimes(0);
+    act(() => jest.advanceTimersByTime(100));
+    expect(callback).toBeCalledTimes(1);
+
+    act(debouncedCallback);
+    act(debouncedCallback);
+    act(debouncedCallback);
+
+    act(() => jest.advanceTimersByTime(99));
+    expect(callback).toHaveBeenCalledTimes(1);
+    act(() => jest.advanceTimersByTime(1));
+    expect(callback).toHaveBeenCalledTimes(2);
+  });
+});

package/src/useDebounceCallback/useDebounceCallback.ts

@@ -0,0 +1,102 @@
+import { useCallback, useRef } from 'react';
+
+/**
+ * Returns a memoized function that will only call the passed function when it hasn't been called for the msec period
+ * @param func The function to be called
+ * @param msec Wait period after function hasn't been called for
+ * @returns A memoized function that is debounced
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useDebounceCallback<T extends (...args: any[]) => any>(callback: T, msec: number = 500) {
+  // Use a ref to store the timeout between renders
+  // and prevent changes to it from causing re-renders
+  const timeout = useRef<ReturnType<typeof setTimeout>>();
+
+  return useCallback((...args: unknown[]) => {
+    const later = () => {
+      clearTimeout(timeout.current);
+      callback(...args);
+    };
+
+    clearTimeout(timeout.current);
+    timeout.current = setTimeout(later, msec);
+  }, [callback, msec]);
+
+}
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/*
+import { DependencyList, useRef } from 'react';
+import { useUnmountEffect } from '../useUnmountEffect/useUnmountEffect';
+
+export interface DebouncedFunction<Fn extends (...args: any[]) => any> {
+  (this: ThisParameterType<Fn>, ...args: Parameters<Fn>): void;
+}
+*/
+
+/**
+ * Makes passed function debounced, otherwise acts like `useCallback`.
+ *
+ * @param callback Function that will be debounced.
+ * @param deps Dependencies list when to update callback.
+ * @param delay Debounce delay.
+ * @param maxWait The maximum time `callback` is allowed to be delayed before
+ * it's invoked. 0 means no max wait.
+ */
+/*
+export function useDebouncedCallback<Fn extends (...args: any[]) => any>(
+  callback: Fn,
+  deps: DependencyList,
+  delay: number,
+  maxWait = 0
+): DebouncedFunction<Fn> {
+  const timeout = useRef<ReturnType<typeof setTimeout>>();
+  const waitTimeout = useRef<ReturnType<typeof setTimeout>>();
+  const lastCall = useRef<{ args: Parameters<Fn>; this: ThisParameterType<Fn> }>();
+  const clear = () => {
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+      timeout.current = undefined;
+    }
+    if (waitTimeout.current) {
+      clearTimeout(waitTimeout.current);
+      waitTimeout.current = undefined;
+    }
+  };
+  // cancel scheduled execution on unmount
+  useUnmountEffect(clear);
+  return useMemo(
+    () => {
+      const execute = () => {
+        // barely possible to test this line
+        // istanbul ignore next
+        if (!lastCall.current) return;
+        const context = lastCall.current;
+        lastCall.current = undefined;
+        callback.apply(context.this, context.args);
+        clear();
+      };
+      // eslint-disable-next-line func-names
+      const wrapped = function (this, ...args) {
+        if (timeout.current) {
+          clearTimeout(timeout.current);
+        }
+        lastCall.current = { args, this: this };
+        // plan regular execution
+        timeout.current = setTimeout(execute, delay);
+        // plan maxWait execution if required
+        if (maxWait > 0 && !waitTimeout.current) {
+          waitTimeout.current = setTimeout(execute, maxWait);
+        }
+      } as DebouncedFunction<Fn>;
+      Object.defineProperties(wrapped, {
+        length: { value: callback.length },
+        name: { value: `${callback.name || 'anonymous'}__debounced__${delay}` },
+      });
+      return wrapped;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps,@typescript-eslint/no-unsafe-assignment
+    [delay, maxWait, ...deps]
+  );
+}
+*/

package/src/useDebugChangedProps/useDebugChangedProps.test.tsx

@@ -0,0 +1,21 @@
+
+
+import { renderHook } from '@testing-library/react';
+import { useDebugChangedProps } from './useDebugChangedProps';
+
+describe('useDebugChangedProps', () => {
+  /*
+  beforeEach(() => {
+    jest.spyOn(console, 'log').mockImplementation(() => { });
+  });
+  */
+
+  it('should work correctly', () => {
+    const logSpy = jest.spyOn(console, 'log').mockImplementation(() => { });
+    const { rerender } = renderHook((props) => useDebugChangedProps(props), { initialProps: { test: 1 } });
+    expect(logSpy).toHaveBeenCalledTimes(0);
+    rerender({ test: 2 });
+    expect(logSpy).toHaveBeenCalledTimes(1);
+    expect(logSpy).toHaveBeenCalledWith('Changed props:', { test: [1, 2] });
+  });
+});

package/src/useDebugChangedProps/useDebugChangedProps.ts

@@ -0,0 +1,17 @@
+import { ComponentProps, useEffect, useRef } from 'react';
+
+export function useDebugChangedProps(props: ComponentProps<any>): void {
+  const ref = useRef(props);
+  useEffect(() => {
+    const changedProps = Object.entries(props).reduce((object: { [key: string]: unknown }, [key, value]) => {
+      if (ref.current[key] !== value) {
+        object[key] = [ref.current[key], value];
+      }
+      return object;
+    }, {});
+    if (Object.keys(changedProps).length > 0) {
+      console.log('Changed props:', changedProps);
+    }
+    ref.current = props;
+  });
+}

package/src/useDomObserver/useDomObserver.test.ts

@@ -0,0 +1,22 @@
+
+
+// readme https://testing-library.com/
+import { renderHook, screen, waitFor } from '@testing-library/react';
+import { useDomObserver } from './useDomObserver';
+
+describe('useDomObserver', () => {
+
+  it('should work correctly', async () => {
+    const handler = jest.fn();
+    const div = document.createElement('div');
+    div.setAttribute('data-testid', 'test');
+    document.body.appendChild(div);
+    const ref = { current: div };
+    renderHook(() => useDomObserver(ref, handler));
+    expect(handler).toHaveBeenCalledTimes(0);
+    div.innerText = 'test';
+    await waitFor(() => expect(screen.getByTestId('test').innerText).toBe('test'));
+    expect(handler).toHaveBeenCalledTimes(0); // !!! MutationObserver not working
+    // expect(handler).toHaveBeenCalledWith('Changed props:', { test: [1, 2] });
+  });
+});

package/src/useDomObserver/useDomObserver.ts

@@ -0,0 +1,26 @@
+import { MutableRefObject, useEffect } from 'react';
+
+export function useDomObserver(ref: MutableRefObject<HTMLElement | null> | undefined, callback: MutationCallback = () => { }) {
+
+  const config = { attributes: false, childList: true, subtree: true };
+
+  useEffect(() => {
+    if (!ref || !ref.current) {
+      return;
+    }
+    let unmount = false;
+    const done: MutationCallback = (...params) => {
+      // console.log('useDomObserver.MutationCallback', params);
+      if (unmount) {
+        return;
+      }
+      callback(...params);
+    };
+    const observer = new MutationObserver(done);
+    observer.observe(ref.current, config);
+    return () => {
+      unmount = true;
+      observer.disconnect();
+    };
+  }, [ref]);
+}

package/src/useDrawer/useDrawer.test.ts

@@ -0,0 +1,17 @@
+// readme https://testing-library.com/
+import { act, renderHook } from '@testing-library/react';
+import { useDrawer } from './useDrawer';
+
+describe('useDrawer', () => {
+  it('should work correctly', async () => {
+    const { result } = renderHook(() => useDrawer());
+    let [drawer, openDrawer, closeDrawer] = result.current;
+    expect(drawer).toBe(undefined);
+    act(() => openDrawer('test'));
+    [drawer, openDrawer, closeDrawer] = result.current;
+    expect(drawer).toBe('test');
+    act(() => closeDrawer());
+    [drawer, openDrawer, closeDrawer] = result.current;
+    expect(drawer).toBe(undefined);
+  });
+});

package/src/useDrawer/useDrawer.ts

@@ -0,0 +1,16 @@
+import { UIValue, useUI } from '../useUI/useUI';
+
+export function useDrawer(): [drawer: UIValue, open: (value?: string) => void, close: () => void] {
+  const drawer = useUI(state => state.views.drawer);
+  const reduce = useUI(state => state.actions.reduce);
+  function setDrawer(value?: string | number) {
+    reduce('drawer', (views) => value);
+  }
+  function openDrawer(value?: string | number) {
+    return setDrawer(value);
+  }
+  function closeDrawer() {
+    return setDrawer();
+  }
+  return [drawer, openDrawer, closeDrawer];
+}

package/src/useElementSize/useElementSize.test.ts

@@ -0,0 +1,108 @@
+// readme https://testing-library.com/
+import { act, renderHook } from '@testing-library/react';
+import { useElementSize } from './useElementSize';
+
+const setupHook = () => renderHook(() => useElementSize());
+const originalOffsetHeight = Object.getOwnPropertyDescriptor(
+  HTMLElement.prototype,
+  'offsetHeight',
+) as PropertyDescriptor;
+const originalOffsetWidth = Object.getOwnPropertyDescriptor(
+  HTMLElement.prototype,
+  'offsetWidth',
+) as PropertyDescriptor;
+const resizeElement = (
+  node: HTMLElement,
+  dimension: 'width' | 'height',
+  value: number,
+): void => {
+  if (dimension === 'height') {
+    return void Object.defineProperty(node, 'offsetHeight', {
+      configurable: true,
+      value,
+    });
+  }
+
+  if (dimension === 'width') {
+    void Object.defineProperty(node, 'offsetWidth', {
+      configurable: true,
+      value,
+    });
+  }
+};
+const dom = document.createElement('div');
+
+describe('useElementSize', () => {
+  afterAll(() => {
+    Object.defineProperty(
+      HTMLElement.prototype,
+      'offsetHeight',
+      originalOffsetHeight,
+    );
+    Object.defineProperty(
+      HTMLElement.prototype,
+      'offsetWidth',
+      originalOffsetWidth,
+    );
+  });
+
+  it('should initialize', () => {
+    const { result } = setupHook();
+    const [setRef, size] = result.current;
+    expect(typeof size.height).toBe('number');
+    expect(typeof size.width).toBe('number');
+    expect(setRef).toBeInstanceOf(Function);
+  });
+
+  it('should match the corresponding height', () => {
+    const height_1 = 360;
+    const height_2 = 600;
+    const height_3 = 1024;
+    const { result, rerender } = setupHook();
+    const [setRef] = result.current;
+    /* 1 */
+    act(() => {
+      setRef(dom);
+      resizeElement(dom, 'height', height_1);
+    });
+    expect(result.current[1].height).toEqual(height_1);
+    /* 2 */
+    act(() => {
+      resizeElement(dom, 'height', height_2);
+    });
+    rerender();
+    expect(result.current[1].height).toEqual(height_2);
+    /* 3 */
+    act(() => {
+      resizeElement(dom, 'height', height_3);
+    });
+    rerender();
+    expect(result.current[1].height).toEqual(height_3);
+  });
+
+  it('should match the corresponding width', () => {
+    const width_1 = 360;
+    const width_2 = 600;
+    const width_3 = 1024;
+    const { result, rerender } = setupHook();
+    const [setRef] = result.current;
+    /* 1 */
+    act(() => {
+      setRef(dom);
+      resizeElement(dom, 'width', width_1);
+    });
+    expect(result.current[1].width).toEqual(width_1);
+    /* 2 */
+    act(() => {
+      resizeElement(dom, 'width', width_2);
+    });
+    rerender();
+    expect(result.current[1].width).toEqual(width_2);
+    /* 3 */
+    act(() => {
+      resizeElement(dom, 'width', width_3);
+    });
+    rerender();
+    expect(result.current[1].width).toEqual(width_3);
+  });
+});

package/src/useElementSize/useElementSize.ts

@@ -0,0 +1,34 @@
+import { useCallback, useState } from 'react';
+import { useEventListener } from '../useEventListener/useEventListener';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
+
+type Size = {
+  width: number;
+  height: number;
+};
+
+export function useElementSize<T extends HTMLElement = HTMLDivElement>(): [(node: T | null) => void, Size] {
+  // Mutable values like 'ref.current' aren't valid dependencies
+  // because mutating them doesn't re-render the component.
+  // Instead, we use a state as a ref to be reactive.
+  const [ref, setRef] = useState<T | null>(null);
+  const [size, setSize] = useState<Size>({ width: 0, height: 0 });
+
+  // Prevent too many rendering using useCallback
+  const onResize = useCallback(() => {
+    setSize({
+      width: ref?.offsetWidth || 0,
+      height: ref?.offsetHeight || 0,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ref?.offsetHeight, ref?.offsetWidth]);
+
+  useEventListener('resize', onResize);
+
+  useIsomorphicLayoutEffect(() => {
+    onResize();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ref?.offsetHeight, ref?.offsetWidth]);
+
+  return [setRef, size];
+}

package/src/useEventListener/useEventListener.test.ts

@@ -0,0 +1,128 @@
+// readme https://testing-library.com/
+import { fireEvent, renderHook } from '@testing-library/react';
+import { useEventListener } from './useEventListener';
+
+declare global {
+  interface WindowEventMap {
+    'test-event': CustomEvent
+  }
+
+  interface HTMLElementEventMap {
+    'test-event': CustomEvent
+  }
+
+  interface DocumentEventMap {
+    'test-event': CustomEvent
+  }
+}
+
+const windowAddEventListenerSpy = jest.spyOn(window, 'addEventListener');
+const windowRemoveEventListenerSpy = jest.spyOn(window, 'removeEventListener');
+
+const ref = { current: document.createElement('div') };
+const refAddEventListenerSpy = jest.spyOn(ref.current, 'addEventListener');
+const refRemoveEventListenerSpy = jest.spyOn(ref.current, 'removeEventListener');
+const docRef = { current: window.document };
+const docAddEventListenerSpy = jest.spyOn(docRef.current, 'addEventListener');
+const docRemoveEventListenerSpy = jest.spyOn(
+  docRef.current,
+  'removeEventListener',
+);
+
+describe('useEventListener', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should bind/unbind the event listener to the window when element is not provided', () => {
+    const eventName = 'test-event';
+    const handler = jest.fn();
+    const options = undefined;
+    const { unmount } = renderHook(() => useEventListener(eventName, handler));
+    expect(windowAddEventListenerSpy).toHaveBeenCalledWith(
+      eventName,
+      expect.any(Function),
+      options,
+    );
+    unmount();
+    expect(windowRemoveEventListenerSpy).toHaveBeenCalledWith(
+      eventName,
+      expect.any(Function),
+    );
+  });
+
+  it('should bind/unbind the event listener to the element when element is provided', () => {
+    const eventName = 'test-event';
+    const handler = jest.fn();
+    const options = undefined;
+    const { unmount } = renderHook(() =>
+      useEventListener(eventName, handler, ref, options),
+    );
+    expect(refAddEventListenerSpy).toHaveBeenCalledTimes(1);
+    expect(refAddEventListenerSpy).toHaveBeenCalledWith(
+      eventName,
+      expect.any(Function),
+      options,
+    );
+    unmount();
+    expect(refRemoveEventListenerSpy).toHaveBeenCalledWith(
+      eventName,
+      expect.any(Function),
+    );
+  });
+
+  it('should bind/unbind the event listener to the document when document is provided', () => {
+    const eventName = 'test-event';
+    const handler = jest.fn();
+    const options = undefined;
+    const { unmount } = renderHook(() =>
+      useEventListener(eventName, handler, docRef, options),
+    );
+    expect(docAddEventListenerSpy).toHaveBeenCalledTimes(1);
+    expect(docAddEventListenerSpy).toHaveBeenCalledWith(
+      eventName,
+      expect.any(Function),
+      options,
+    );
+    unmount();
+    expect(docRemoveEventListenerSpy).toHaveBeenCalledWith(
+      eventName,
+      expect.any(Function),
+    );
+  });
+
+  it('should pass the options to the event listener', () => {
+    const eventName = 'test-event';
+    const handler = jest.fn();
+    const options = {
+      passive: true,
+      once: true,
+      capture: true,
+    };
+    renderHook(() => useEventListener(eventName, handler, undefined, options));
+    expect(windowAddEventListenerSpy).toHaveBeenCalledWith(
+      eventName,
+      expect.any(Function),
+      options,
+    );
+  });
+
+  it('should call the event listener handler when the event is triggered', () => {
+    const eventName = 'click';
+    const handler = jest.fn();
+    renderHook(() => useEventListener(eventName, handler, ref));
+    fireEvent.click(ref.current);
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it('should have the correct event type', () => {
+    const clickHandler = jest.fn();
+    const keydownHandler = jest.fn();
+    renderHook(() => useEventListener('click', clickHandler, ref));
+    renderHook(() => useEventListener('keydown', keydownHandler, ref));
+    fireEvent.click(ref.current);
+    fireEvent.keyDown(ref.current);
+    expect(clickHandler).toHaveBeenCalledWith(expect.any(MouseEvent));
+    expect(keydownHandler).toHaveBeenCalledWith(expect.any(KeyboardEvent));
+  });
+});