@websolutespa/bom-mixer-hooks 0.2.0 → 0.2.2

package/src/usePagination/usePagination.test.ts

@@ -0,0 +1,64 @@
+// readme https://testing-library.com/
+import { act, renderHook } from '@testing-library/react';
+import { usePagination } from './usePagination';
+
+describe('usePagination', () => {
+
+  test('should paginate items', () => {
+    const items = new Array(100).fill(0).map((_, i) => i + 1);
+    const { result } = renderHook(() => usePagination(items));
+    expect(result.current.page).toEqual(1);
+    expect(result.current.pages).toEqual(7);
+    expect(result.current.total).toEqual(100);
+    expect(result.current.items.length).toEqual(15);
+    expect(result.current.items[0]).toEqual(1);
+  });
+
+  test('should paginate items with params', () => {
+    const items = new Array(100).fill(0).map((_, i) => i + 1);
+    const { result } = renderHook(() => usePagination(items, 2, 10));
+    expect(result.current.page).toEqual(2);
+    expect(result.current.pages).toEqual(10);
+    expect(result.current.total).toEqual(100);
+    expect(result.current.items.length).toEqual(10);
+    expect(result.current.items[0]).toEqual(11);
+  });
+
+  test('should call nextPage and paginate items', async () => {
+    const items = new Array(100).fill(0).map((_, i) => i + 1);
+    const { result } = renderHook(() => usePagination(items, 2, 10));
+    act(() => { result.current.nextPage(); });
+    expect(result.current.page).toEqual(3);
+    expect(result.current.items.length).toEqual(10);
+    expect(result.current.items[0]).toEqual(21);
+  });
+
+  test('should call previousPage and paginate items', async () => {
+    const items = new Array(100).fill(0).map((_, i) => i + 1);
+    const { result } = renderHook(() => usePagination(items, 2, 10));
+    act(() => { result.current.previousPage(); });
+    expect(result.current.page).toEqual(1);
+    expect(result.current.items.length).toEqual(10);
+    expect(result.current.items[0]).toEqual(1);
+  });
+
+  test('should call goToPage and paginate items', async () => {
+    const items = new Array(100).fill(0).map((_, i) => i + 1);
+    const { result } = renderHook(() => usePagination(items, 2, 10));
+    act(() => { result.current.goToPage(4); });
+    expect(result.current.page).toEqual(4);
+    expect(result.current.items.length).toEqual(10);
+    expect(result.current.items[0]).toEqual(31);
+  });
+
+  test('should call setPerPage and paginate items', async () => {
+    const items = new Array(100).fill(0).map((_, i) => i + 1);
+    const { result } = renderHook(() => usePagination(items, 2, 10));
+    act(() => { result.current.setPerPage(20); });
+    expect(result.current.pages).toEqual(5);
+    expect(result.current.page).toEqual(2);
+    expect(result.current.items.length).toEqual(20);
+    expect(result.current.items[0]).toEqual(21);
+  });
+
+});

package/src/usePagination/usePagination.ts

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+import { getPagedItems } from './pagination.service';
+
+export function usePagination<T>($items: T[], $page: number = 1, $perPage: number = 15) {
+
+  const total = $items.length;
+
+  const [page, setPage] = useState($page);
+  const [perPage, setPerPage_] = useState($perPage);
+  const [items, setItems] = useState(getPagedItems<T>($items, $page, $perPage));
+
+  const pages = Math.ceil(total / perPage);
+
+  useEffect(() => {
+    // console.log('setPagination');
+    setItems(getPagedItems<T>($items, page, perPage));
+  }, [$items]);
+
+  function goToPage(page: number) {
+    if (page > 0 && page <= pages) {
+      // console.log('goToPage', page);
+      setPage(page);
+      setItems(getPagedItems<T>($items, page, perPage));
+    }
+  }
+
+  function setPerPage(perPage: number) {
+    if (perPage > 0) {
+      // console.log('setPerPage', perPage);
+      const pages = Math.ceil(total / perPage);
+      const newPage = Math.max(1, Math.min(pages, page));
+      setPage(newPage);
+      setPerPage_(perPage);
+      setItems(getPagedItems<T>($items, newPage, perPage));
+    }
+  }
+
+  function nextPage() {
+    goToPage(page + 1);
+  }
+
+  function previousPage() {
+    goToPage(page - 1);
+  }
+
+  return { items, page, pages, total, nextPage, previousPage, goToPage, setPerPage };
+}

package/src/usePortal/usePortal.test.ts

@@ -0,0 +1,24 @@
+// readme https://testing-library.com/
+import { renderHook } from '@testing-library/react';
+import { createElementWithId, getUID, usePortal } from './usePortal';
+
+describe('usePortal', () => {
+
+  test('should return react portal', async () => {
+    const { result } = renderHook(() => usePortal());
+    expect(result.current).toBeInstanceOf(HTMLElement);
+  });
+
+  test('should create element with id', async () => {
+    const element = createElementWithId('test');
+    expect(element).toBeInstanceOf(HTMLElement);
+    expect(element).toHaveProperty('id', 'test');
+  });
+
+  test('should return UID', async () => {
+    const uid = getUID();
+    expect(uid).toEqual(expect.any(String));
+    expect(uid).toMatch(/^[\d|\w]{8}$/);
+  });
+
+});

package/src/usePortal/usePortal.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import { useSSR } from '../useSSR/useSSR';
+
+const namespace = 'theme';
+
+export function usePortal(name: string = getUID(), getContainer?: () => HTMLElement | null): HTMLElement | null {
+  const { isBrowser } = useSSR();
+
+  const id = `${namespace}-${name}`;
+
+  const [portal, setPortal] = useState<HTMLElement | null>(isBrowser ? createElementWithId(id) : null);
+
+  useEffect(() => {
+    const container = typeof getContainer === 'function' ? getContainer() : null;
+    const parentElement = container || document.body;
+    const element = parentElement.querySelector<HTMLElement>(`#${id}`) || createElementWithId(id);
+    if (!element.parentElement) {
+      parentElement.appendChild(element);
+    }
+    setPortal(element);
+  }, []);
+
+  return portal;
+}
+
+export function createElementWithId(id: string): HTMLElement {
+  const element = document.createElement('div');
+  element.setAttribute('id', id);
+  return element;
+}
+
+export function getUID() {
+  return Math.random().toString(32).slice(2, 10);
+}

package/src/usePrevious/usePrevious.test.ts

@@ -0,0 +1,21 @@
+// readme https://testing-library.com/
+import { renderHook } from '@testing-library/react';
+import { usePrevious } from './usePrevious';
+
+describe('usePrevious', () => {
+
+  test('should return previous value', () => {
+    const value = false;
+    const { result, unmount, rerender } = renderHook((props) => usePrevious<boolean>(props.value), { initialProps: { value } });
+    expect(result.current).toBe(null);
+    rerender({ value: true });
+    expect(result.current).toBe(false);
+    rerender({ value: false });
+    expect(result.current).toBe(true);
+    /*
+    unmount();
+    expect(result.current).toBe(null);
+    */
+  });
+
+});

package/src/usePrevious/usePrevious.ts

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from 'react';
+
+export function usePrevious<T>(state: T): T | undefined | null {
+  const ref = useRef<T | null>(null);
+  useEffect(() => {
+    ref.current = state;
+  });
+  return ref.current; // ref ? ref.current : null;
+}

package/src/useRealSize/useRealSize.ts

@@ -0,0 +1,41 @@
+import { MutableRefObject, useEffect, useState } from 'react';
+
+export type SizeType = {
+  width: number;
+  height: number;
+};
+
+export type SizeResult = [SizeType, () => void];
+
+export function useRealSize<T extends HTMLElement>(ref: MutableRefObject<T | null>): SizeResult {
+  const [state, setState] = useState<SizeType>({ width: 0, height: 0 });
+  const update = () => {
+    const { width, height } = getRealSize(ref.current);
+    setState({ width, height });
+  };
+  useEffect(() => update(), [ref.current]);
+  return [state, update];
+}
+
+export function getRealSize(element: HTMLElement | null): SizeType {
+  const defaultSize: SizeType = { width: 0, height: 0 };
+  if (!element || typeof window === 'undefined') {
+    return defaultSize;
+  }
+  const rect = element.getBoundingClientRect();
+  const { width, height } = window.getComputedStyle(element);
+  return {
+    width: getComputedValue(`${width}`, rect.width),
+    height: getComputedValue(`${height}`, rect.height),
+  };
+}
+
+function getComputedValue(style: string, parentNum: number): number {
+  if (!style) {
+    return 0;
+  }
+  const value = style.includes('px') ? +style.split('px')[0] : (
+    style.includes('%') ? +style.split('%')[0] * parentNum * 0.01 : style
+  );
+  return Number.isNaN(+value) ? 0 : +value;
+}

package/src/useResize/useResize.test.ts

@@ -0,0 +1,31 @@
+// readme https://testing-library.com/
+import { act, renderHook } from '@testing-library/react';
+import { useResize } from './useResize';
+
+const windowResize = (): void => {
+  window.dispatchEvent(new Event('resize'));
+};
+
+describe('useResize', () => {
+
+  it('should work correctly', () => {
+    const handler = jest.fn();
+    renderHook(() => useResize(handler));
+    expect(handler).toBeCalledTimes(1);
+    act(() => {
+      windowResize();
+    });
+    expect(handler).toBeCalledTimes(2);
+  });
+
+  it('should work correctly with immediate param set to false', () => {
+    const handler = jest.fn();
+    renderHook(() => useResize(handler, false));
+    expect(handler).toBeCalledTimes(0);
+    act(() => {
+      windowResize();
+    });
+    expect(handler).toBeCalledTimes(1);
+  });
+
+});

package/src/useResize/useResize.ts

@@ -0,0 +1,18 @@
+import { useEventListener } from '../useEventListener/useEventListener';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
+
+export function useResize(callback: () => unknown, immediate: boolean = true): void {
+
+  const handleResize = () => callback();
+
+  useEventListener('resize', handleResize);
+
+  // Set size at the first client-side load
+  useIsomorphicLayoutEffect(() => {
+    if (immediate) {
+      handleResize();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+}

package/src/useSSR/useSSR.test.tsx

@@ -0,0 +1,16 @@
+import { renderHook } from '@testing-library/react';
+import { detectIsBrowser, useSSR } from './useSSR';
+
+describe('useSSR', () => {
+  test('should return correctly', () => {
+    const { result } = renderHook(() => useSSR());
+    const { isBrowser, isServer } = result.current;
+    expect(isBrowser).toBe(true);
+    expect(isServer).toBe(false);
+  });
+
+  test('detectIsBrowser should return true', () => {
+    const isBrowser = detectIsBrowser();
+    expect(isBrowser).toBe(true);
+  });
+});

package/src/useSSR/useSSR.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+export type SSRState = {
+  isBrowser: boolean;
+  isServer: boolean;
+};
+
+export const detectIsBrowser = (): boolean => {
+  return Boolean(
+    typeof window !== 'undefined' && window.document && window.document.createElement
+  );
+};
+
+export function useSSR(): SSRState {
+  const [browser, setBrowser] = useState<boolean>(false);
+  useEffect(() => {
+    setBrowser(detectIsBrowser());
+  }, []);
+  return {
+    isBrowser: browser,
+    isServer: !browser,
+  };
+}

package/src/useScroll/useScroll.test.tsx

@@ -0,0 +1,25 @@
+// readme https://testing-library.com/
+import { act, renderHook } from '@testing-library/react';
+import { useScroll } from './useScroll';
+
+const windowScroll = (scrollTop: number): void => {
+  window.pageYOffset = scrollTop;
+  window.dispatchEvent(new Event('scroll'));
+};
+
+const wrapper = (props: { children: React.ReactNode }) => (
+  <div data-testid="test" style={{ height: '2000px' }}>{props.children}</div>
+);
+
+describe('useScroll', () => {
+
+  it('should work correctly', () => {
+    const { result } = renderHook(() => useScroll(), { wrapper });
+    expect(result.current).toStrictEqual({ left: 0, top: 0 });
+    act(() => {
+      windowScroll(500);
+    });
+    expect(result.current).toStrictEqual({ left: 0, top: 500 });
+  });
+
+});

package/src/useScroll/useScroll.ts

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+import { useEventListener } from '../useEventListener/useEventListener';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
+
+type Scroll = {
+  left: number;
+  top: number;
+};
+
+export function useScroll(): Scroll {
+  const [scroll, setScroll] = useState<Scroll>({ left: 0, top: 0 });
+
+  const onScroll = () => {
+    const left = window.pageXOffset;
+    const top = window.pageYOffset;
+    if (scroll.left !== left || scroll.top !== top) {
+      setScroll({ left, top });
+    }
+  };
+
+  useEventListener('scroll', onScroll);
+
+  // Set size at the first client-side load
+  useIsomorphicLayoutEffect(() => {
+    onScroll();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return scroll;
+}

package/src/useScrollTo/useScrollTo.test.tsx

@@ -0,0 +1,105 @@
+// readme https://testing-library.com/
+import { render, renderHook, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { forwardRef } from 'react';
+import { useScrollTo } from './useScrollTo';
+
+jest.mock('framer-motion', () => {
+  const FakeTransition = jest.fn().mockImplementation(({ children }) => children);
+  const FakeAnimate = jest.fn().mockImplementation((from, to, options) => {
+    if (options && typeof options.onUpdate === 'function') {
+      options.onUpdate(from);
+      options.onUpdate(to);
+    }
+  });
+  const FakeAnimatePresence = jest.fn().mockImplementation(({ children }) => (
+    <FakeTransition>{children}</FakeTransition>
+  ));
+  const motion = {
+    a: jest.fn().mockImplementation(({ children, ...rest }) => (
+      <a {...rest}>{children}</a>
+    )),
+    li: jest.fn().mockImplementation(({ children }) => children),
+    span: jest.fn().mockImplementation(({ children }) => children),
+    small: jest.fn().mockImplementation(({ children }) => <small>{children}</small>),
+    h4: jest.fn().mockImplementation(({ children }) => <h4>{children}</h4>),
+    h2: jest.fn().mockImplementation(({ children }) => <h2>{children}</h2>),
+    p: jest.fn().mockImplementation(({ children }) => <p>{children}</p>),
+    // eslint-disable-next-line react/display-name
+    div: forwardRef(({ children, ...rest }: { children: React.ReactNode }, ref) => {
+      const { whileTap, animate, initial, variants, ...divProps } = rest as any;
+      return (
+        <div {...divProps} ref={ref}>
+          {children}
+        </div>
+      );
+    }),
+    button: jest.fn().mockImplementation(({ children, ...rest }) => (
+      <button {...rest}>{children}</button>
+    )),
+    custom: jest.fn().mockImplementation((props) => props),
+  };
+  return {
+    __esModule: true,
+    motion: motion,
+    animate: FakeAnimate,
+    AnimatePresence: FakeAnimatePresence,
+    default: jest.fn(),
+  };
+});
+
+const Wrapper = () => {
+  const scrollTo = useScrollTo();
+  return (
+    <div>
+      <a data-testid="trigger" href="#target" onClick={scrollTo}>trigger</a>
+      <div style={{ height: '2000px' }}>spacer</div>
+      <div id="target" data-testid="target">target</div>
+    </div>
+  );
+};
+
+describe('useScrollTo', () => {
+
+  const SCROLL_TO = window.scrollTo;
+
+  let scrollTo: jest.SpyInstance<void, [x: number, y: number]> = jest.fn();
+
+  beforeEach(() => {
+    jest.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(() => ({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 100,
+      top: 1000,
+      right: 0,
+      bottom: 1100,
+      left: 0,
+    }) as any);
+    scrollTo = jest.spyOn(window, 'scrollTo').mockImplementation((left: number, top: number) => {
+      window.pageXOffset = left;
+      window.pageYOffset = top;
+    });
+  });
+
+  afterAll(() => {
+    window.scrollTo = SCROLL_TO;
+  });
+
+  it('should return a callback', () => {
+    const { result } = renderHook(() => useScrollTo());
+    expect(result.current).toEqual(expect.any(Function));
+  });
+
+  it('should work correctly', async () => {
+    render(<Wrapper />);
+    expect(window.pageYOffset).toBe(0);
+    const trigger = screen.getByTestId('trigger');
+    await userEvent.click(trigger);
+    expect(scrollTo).toBeCalled();
+    expect(scrollTo).toHaveBeenCalledTimes(2);
+    expect(scrollTo).toHaveBeenCalledWith(0, 940);
+    expect(window.pageYOffset).toBe(940);
+  });
+
+});

package/src/useScrollTo/useScrollTo.ts

@@ -0,0 +1,41 @@
+import { animate } from 'framer-motion';
+
+export function useScrollTo(): (event: React.MouseEvent<HTMLElement>) => void {
+  // The handler to smoothly scroll the element into view
+  const scrollToHash = (event: React.MouseEvent<HTMLElement>) => {
+    const href = event.currentTarget.getAttribute('href');
+    // console.log(event.currentTarget, href, href?.indexOf('#'));
+    if (href && href.indexOf('#') !== -1) {
+      const hashId = `#${href.split('#')[1]}`;
+      // console.log('hashId', hashId);
+      // console.log('NavLink.onClick', event.currentTarget.getAttribute('href'), hashId);
+      scrollToSelector(hashId);
+    }
+  };
+  return scrollToHash;
+}
+
+export function scrollToSelector(selector?: string, offset: number = 0) {
+  if (selector && typeof window !== 'undefined') {
+    const element = document.querySelector(selector);
+    if (element) {
+      const rect = element.getBoundingClientRect();
+      scrollToRelativeY(rect.top, offset);
+    }
+  }
+}
+
+export function scrollToRelativeY(y: number = 0, offset: number = 0) {
+  const to = window.pageYOffset + y - 60 + offset;
+  return scrollToY(to);
+}
+
+export function scrollToY(y: number = 0) {
+  const from = window.pageYOffset;
+  const to = y;
+  const duration = Math.sqrt(Math.abs(to - from) / 4000);
+  animate(from, to, {
+    duration,
+    onUpdate: v => window.scrollTo(0, v)
+  });
+}

package/src/useSearchParams/useSearchParams.test.ts

@@ -0,0 +1,59 @@
+
+// readme https://testing-library.com/
+import { act, renderHook } from '@testing-library/react';
+import * as nextRouter from 'next/router';
+import { useSearchParams } from './useSearchParams';
+
+const useRouter = (nextRouter as any).useRouter = jest.fn();
+
+describe('useSearchParams', () => {
+
+  it('should work correctly', async () => {
+    useRouter.mockReturnValue({
+      asPath: '',
+    });
+    const params = {};
+    const { result } = renderHook(() => useSearchParams());
+    expect(result.current.params).toEqual(params);
+  });
+
+  it('should work correctly with params', async () => {
+    useRouter.mockReturnValue({
+      asPath: '?flag=1',
+    });
+    const params = { flag: '1' };
+    const { result } = renderHook(() => useSearchParams());
+    expect(result.current.params).toEqual(params);
+  });
+
+  it('should replace search params silently', async () => {
+    useRouter.mockReturnValue({
+      asPath: '',
+    });
+    const params = { flag: '1' };
+    const { result } = renderHook(() => useSearchParams());
+    window.history.replaceState = jest.fn();
+    expect(result.current.replaceParamsSilently).toEqual(expect.any(Function));
+    act(() => result.current.replaceParamsSilently(params));
+    expect(window.history.replaceState).toBeCalledWith('flag=1', '', 'http://localhost/?flag=1');
+  });
+
+  it('should replace search params', async () => {
+    const handler = jest.fn();
+    useRouter.mockReturnValue({
+      asPath: '',
+      replace: handler,
+    });
+    const params = { flag: '1' };
+    const { result } = renderHook(() => useSearchParams());
+    window.history.replaceState = jest.fn();
+    expect(result.current.replaceParams).toEqual(expect.any(Function));
+    act(() => result.current.replaceParams(params));
+    expect(handler).toBeCalledTimes(1);
+    expect(handler).toBeCalledWith({
+      pathname: '',
+      query: { flag: '1' }
+    });
+  });
+
+});