@websolutespa/bom-mixer-hooks 0.2.0 → 0.2.2

package/src/useKeyboard/useKeyboard.test.tsx

@@ -0,0 +1,163 @@
+import { fireEvent, render, renderHook, screen } from '@testing-library/react';
+import { KeyboardResult, KeyCode, KeyMod, useKeyboard } from './useKeyboard';
+
+describe('useKeyboard', () => {
+  it('should work correctly', () => {
+    let code = null;
+    const handler = jest.fn().mockImplementation(e => {
+      code = e.keyCode;
+    });
+    renderHook(() => useKeyboard(handler, KeyCode.KEY_H));
+    document.dispatchEvent(new KeyboardEvent('keydown', { keyCode: KeyCode.KEY_H }));
+    expect(handler).toBeCalledTimes(1);
+    expect(code).toEqual(KeyCode.KEY_H);
+  });
+
+  it('should not trigger handler', () => {
+    const handler = jest.fn().mockImplementation(() => { });
+    renderHook(() => useKeyboard(handler, [KeyCode.KEY_0]));
+    const event = new KeyboardEvent('keydown', { keyCode: KeyCode.KEY_1 });
+    document.dispatchEvent(event);
+    expect(handler).not.toBeCalled();
+  });
+
+  it('should trigger with command key', () => {
+    const handler = jest.fn().mockImplementation(() => { });
+    renderHook(() => useKeyboard(handler, [KeyCode.KEY_A, KeyMod.Shift]));
+    const event = new KeyboardEvent('keydown', { keyCode: KeyCode.KEY_A });
+    document.dispatchEvent(event);
+    expect(handler).not.toBeCalled();
+    const event2 = new KeyboardEvent('keydown', {
+      keyCode: KeyCode.KEY_A,
+      shiftKey: true,
+    });
+    document.dispatchEvent(event2);
+    expect(handler).toBeCalledTimes(1);
+  });
+
+  it('should ignore command when code does not exist', () => {
+    const handler = jest.fn().mockImplementation(() => { });
+    renderHook(() => useKeyboard(handler, [KeyCode.KEY_A, 12345]));
+    const event = new KeyboardEvent('keydown', { keyCode: KeyCode.KEY_A });
+    document.dispatchEvent(event);
+    expect(handler).toBeCalled();
+  });
+
+  it('should work with each command', () => {
+    const handler = jest.fn().mockImplementation(() => { });
+    renderHook(() =>
+      useKeyboard(handler, [KeyCode.KEY_A, KeyMod.Alt, KeyMod.CtrlCmd, KeyMod.WinCtrl]),
+    );
+    document.dispatchEvent(
+      new KeyboardEvent('keydown', {
+        keyCode: KeyCode.KEY_A,
+      }),
+    );
+    expect(handler).not.toBeCalled();
+    document.dispatchEvent(
+      new KeyboardEvent('keydown', {
+        keyCode: KeyCode.KEY_A,
+        altKey: true,
+      }),
+    );
+    expect(handler).not.toBeCalled();
+    document.dispatchEvent(
+      new KeyboardEvent('keydown', {
+        keyCode: KeyCode.KEY_A,
+        altKey: true,
+        ctrlKey: true,
+      }),
+    );
+    expect(handler).not.toBeCalled();
+    document.dispatchEvent(
+      new KeyboardEvent('keydown', {
+        keyCode: KeyCode.KEY_A,
+        altKey: true,
+        ctrlKey: true,
+        metaKey: true,
+      }),
+    );
+    expect(handler).toBeCalledTimes(1);
+  });
+
+  it('should ignore global events', () => {
+    const handler = jest.fn().mockImplementation(() => { });
+    renderHook(() => useKeyboard(handler, [KeyCode.KEY_A], { disableGlobalEvent: true }));
+    const event = new KeyboardEvent('keydown', { keyCode: KeyCode.KEY_A });
+    document.dispatchEvent(event);
+    expect(handler).not.toBeCalled();
+  });
+
+  it('should respond to different event types', () => {
+    const handler = jest.fn().mockImplementation(() => { });
+    renderHook(() => useKeyboard(handler, [KeyCode.KEY_A], { event: 'keyup' }));
+    document.dispatchEvent(new KeyboardEvent('keydown', { keyCode: KeyCode.KEY_A }));
+    expect(handler).not.toBeCalled();
+    document.dispatchEvent(new KeyboardEvent('keypress', { keyCode: KeyCode.KEY_A }));
+    expect(handler).not.toBeCalled();
+    document.dispatchEvent(new KeyboardEvent('keyup', { keyCode: KeyCode.KEY_A }));
+    expect(handler).toBeCalled();
+  });
+
+  it('should pass the keyboard events', async () => {
+    const handler = jest.fn().mockImplementation(() => { });
+    const nativeHandler = jest.fn().mockImplementation(() => { });
+    const { result } = renderHook<KeyboardResult, {}>(() =>
+      useKeyboard(handler, KeyCode.Escape),
+    );
+    const { container } = render(
+      <div onKeyDown={nativeHandler} >
+        <span data-testid="inner" {...result.current.bindings} />
+      </div>,
+    );
+    const inner = await screen.findByTestId('inner');
+    fireEvent.keyUp(inner, {
+      keyCode: KeyCode.Escape,
+    }); // { key: 'Enter', code: 'Enter', charCode: 13})
+    expect(handler).not.toBeCalled();
+    expect(nativeHandler).not.toBeCalled();
+    fireEvent.keyDown(inner, {
+      keyCode: KeyCode.Escape,
+    });
+    expect(handler).toBeCalled();
+    expect(nativeHandler).toBeCalled();
+  });
+
+  it('should prevent default events', async () => {
+    const handler = jest.fn().mockImplementation(() => { });
+    const nativeHandler = jest.fn().mockImplementation(() => { });
+    const { result } = renderHook<KeyboardResult, {}>(() => useKeyboard(handler, KeyCode.Escape, {
+      disableGlobalEvent: true,
+      stopPropagation: true,
+    }));
+    const { container } = render(
+      <div onKeyDown={nativeHandler} >
+        <span data-testid="inner" {...result.current.bindings} />
+      </div>,
+    );
+    const inner = await screen.findByTestId('inner');
+    expect(nativeHandler).not.toBeCalled();
+    fireEvent.keyDown(inner, {
+      keyCode: KeyCode.Escape,
+    });
+    expect(handler).toBeCalled();
+    expect(nativeHandler).not.toBeCalled();
+  });
+
+  it('should trigger capture event', async () => {
+    const handler = jest.fn().mockImplementation(() => { });
+    const { result } = renderHook<KeyboardResult, {}>(() =>
+      useKeyboard(handler, KeyCode.Escape, { capture: true, disableGlobalEvent: true }),
+    );
+    const { container } = render(
+      <div onKeyDownCapture={result.current.bindings.onKeyDownCapture} >
+        <span data-testid="inner" />
+      </div>,
+    );
+    const inner = await screen.findByTestId('inner');
+    fireEvent.keyDown(inner, {
+      keyCode: KeyCode.Escape,
+    });
+    expect(handler).toBeCalled();
+  });
+});

package/src/useKeyboard/useKeyboard.ts

@@ -0,0 +1,91 @@
+
+import React, { useEffect } from 'react';
+import { KeyCode, KeyMod } from './codes';
+import { getActiveModMap, getCtrlKeysByPlatform } from './helper';
+
+export const useKeyboard: UseKeyboard = (handler, keyBindings, options = {}) => {
+  const bindings = Array.isArray(keyBindings) ? (keyBindings as number[]) : [keyBindings];
+  const {
+    disableGlobalEvent = false,
+    capture = false,
+    stopPropagation = false,
+    preventDefault = true,
+    event = 'keydown',
+  } = options;
+  const activeModMap = getActiveModMap(bindings);
+  const keyCode = bindings.filter((item: number) => !KeyMod[item]);
+  const { CtrlCmd, WinCtrl } = getCtrlKeysByPlatform();
+
+  const eventHandler = (event: React.KeyboardEvent | KeyboardEvent) => {
+    if (activeModMap.Shift && !event.shiftKey) return;
+    if (activeModMap.Alt && !event.altKey) return;
+    if (activeModMap.CtrlCmd && !event[CtrlCmd]) return;
+    if (activeModMap.WinCtrl && !event[WinCtrl]) return;
+    const hitOne = keyCode.find(k => k === event.keyCode);
+    if (keyCode && !hitOne) return;
+    if (stopPropagation) {
+      event.stopPropagation();
+    }
+    if (preventDefault) {
+      event.preventDefault();
+    }
+    handler && handler(event);
+  };
+
+  useEffect(() => {
+    if (!disableGlobalEvent) {
+      document.addEventListener(event, eventHandler);
+    }
+    return () => {
+      document.removeEventListener(event, eventHandler);
+    };
+  }, [disableGlobalEvent]);
+
+  const elementBindingHandler = (
+    elementEventType: 'keydown' | 'keypress' | 'keyup',
+    isCapture: boolean = false,
+  ) => {
+    if (elementEventType !== event) return () => { };
+    if (isCapture !== capture) return () => { };
+    return (e: React.KeyboardEvent) => eventHandler(e);
+  };
+  return {
+    bindings: {
+      onKeyDown: elementBindingHandler('keydown'),
+      onKeyDownCapture: elementBindingHandler('keydown', true),
+      onKeyPress: elementBindingHandler('keypress'),
+      onKeyPressCapture: elementBindingHandler('keypress', true),
+      onKeyUp: elementBindingHandler('keyup'),
+      onKeyUpCapture: elementBindingHandler('keyup', true),
+    },
+  };
+};
+
+export { KeyMod, KeyCode };
+
+export type KeyboardOptions = {
+  disableGlobalEvent?: boolean
+  stopPropagation?: boolean
+  preventDefault?: boolean
+  capture?: boolean
+  event?: 'keydown' | 'keypress' | 'keyup'
+};
+
+export type KeyboardResult = {
+  bindings: {
+    onKeyDown: React.KeyboardEventHandler
+    onKeyDownCapture: React.KeyboardEventHandler
+    onKeyPress: React.KeyboardEventHandler
+    onKeyPressCapture: React.KeyboardEventHandler
+    onKeyUp: React.KeyboardEventHandler
+    onKeyUpCapture: React.KeyboardEventHandler
+  }
+};
+
+export type UseKeyboardHandler = (event: React.KeyboardEvent | KeyboardEvent) => void;
+
+export type UseKeyboard = (
+  handler: UseKeyboardHandler,
+  keyBindings: Array<number> | number,
+  options?: KeyboardOptions,
+) => KeyboardResult;

package/src/useLabel/useLabel.test.tsx

@@ -0,0 +1,68 @@
+import { renderHook } from '@testing-library/react';
+import { LayoutDefaults } from '@websolutespa/bom-mixer-mock';
+import { LayoutProvider } from '../useLayout/useLayout';
+import { LabelProvider, parseParams, useLabel } from './useLabel';
+
+const wrapper = (props: { children: React.ReactNode }) => (
+  <LayoutProvider layout={LayoutDefaults}>
+    <LabelProvider>{props.children}</LabelProvider>
+  </LayoutProvider>
+);
+
+describe('useLabel', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'error').mockImplementation(() => { });
+  });
+
+  test('should throw without provider', () => {
+    expect(() => {
+      renderHook(() => useLabel());
+    }).toThrow('useGenericContext must be used within a Provider');
+  });
+
+  test('should not throw with provider', () => {
+    expect(() => {
+      renderHook(() => useLabel(), { wrapper });
+    }).not.toThrow();
+  });
+
+  test('should not throw with provider null', () => {
+    expect(() => {
+      renderHook(() => useLabel(), { wrapper });
+    }).not.toThrow();
+  });
+
+  test('should return formatted value', () => {
+    const { result } = renderHook(() => useLabel(), { wrapper });
+    const formatted = result.current('error.required');
+    expect(formatted).toBe('Required field');
+  });
+
+  test('non existing key should return key', () => {
+    const { result } = renderHook(() => useLabel(), { wrapper });
+    const formatted = result.current('not.existing');
+    expect(formatted).toBe('not.existing');
+  });
+
+  test('should return formatted value with params', () => {
+    const { result } = renderHook(() => useLabel(), { wrapper });
+    const formatted = result.current('items.found', { items: 123 });
+    expect(formatted).toBe('123 items found');
+  });
+
+  test('value with params without param should return formatted value with token', () => {
+    const { result } = renderHook(() => useLabel(), { wrapper });
+    const formatted = result.current('items.found');
+    expect(formatted).toBe('@items items found');
+  });
+
+  test('parseParams should format value params', () => {
+    const formatted = parseParams('test @param', { param: 1 });
+    expect(formatted).toBe('test 1');
+  });
+
+  test('parseParams should format value without params', () => {
+    const formatted = parseParams('test @param', {});
+    expect(formatted).toBe('test @param');
+  });
+});

package/src/useLabel/useLabel.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { createGenericContext } from '../useGenericContext/useGenericContext';
+import { useLayout } from '../useLayout/useLayout';
+
+export type ILabelContext = (key: string, params?: { [key: string]: any }) => string;
+
+const [useLabel, LabelContextProvider] = createGenericContext<ILabelContext>();
+
+function LabelProvider({ children }: { children?: React.ReactNode }) {
+
+  // const { locale, labels } = useLayout() || { locale: '*', labels: [] };
+  const { locale, labels } = useLayout();
+
+  // console.log('LabelProvider', locale);
+
+  const dictionary = Object.fromEntries(labels.map(l => [l.id, l.text]));
+
+  const context = (key: string, params?: { [key: string]: any }): string => {
+    const label = (dictionary[key] != null ? dictionary[key] : key) as string;
+    if (params) {
+      return parseParams(label, params);
+    }
+    return label;
+  };
+
+  // console.log('LabelProvider.context', context);
+  return (
+    <LabelContextProvider value={context}>
+      {children}
+    </LabelContextProvider>
+  );
+}
+
+function parseParams(label: string, params: { [key: string]: any }): string {
+  const TEMPLATE_REGEXP: RegExp = /@(\w+)/g;
+  return label.replace(TEMPLATE_REGEXP, (text: string, key: string) => {
+    const replacer: unknown = params[key];
+    return typeof replacer !== 'undefined' ? String(replacer) : text;
+  });
+}
+
+export { useLabel, LabelProvider, parseParams };
+

package/src/useLayout/useLayout.test.tsx

@@ -0,0 +1,32 @@
+// readme https://testing-library.com/
+import { renderHook } from '@testing-library/react';
+import { LayoutDefaults } from '@websolutespa/bom-mixer-mock';
+import { LayoutProvider, useLayout } from './useLayout';
+
+const wrapper = (props: { children: React.ReactNode }) => (
+  <LayoutProvider layout={LayoutDefaults}>{props.children}</LayoutProvider>
+);
+
+describe('useLayout', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'error').mockImplementation(() => { });
+  });
+
+  test('should throw without provider', () => {
+    expect(() => {
+      renderHook(() => useLayout());
+    }).toThrow('useGenericContext must be used within a Provider');
+  });
+
+  test('should not throw with provider', () => {
+    expect(() => {
+      renderHook(() => useLayout(), { wrapper });
+    }).not.toThrow();
+  });
+
+  test('should return layout', () => {
+    const { result } = renderHook(() => useLayout(), { wrapper });
+    expect(result.current).toBe(LayoutDefaults);
+  });
+
+});

package/src/useLayout/useLayout.tsx

@@ -0,0 +1,19 @@
+import { ILayout } from '@websolutespa/bom-core';
+import React from 'react';
+import { createGenericContext } from '../useGenericContext/useGenericContext';
+
+export type ILayoutContext = ILayout;
+
+const [useLayout, LayoutContextProvider] = createGenericContext<ILayoutContext>();
+
+function LayoutProvider({ children, layout }: { children?: React.ReactNode, layout: ILayout }) {
+  // console.log('LayoutProvider.context', context);
+  return (
+    <LayoutContextProvider value={layout}>
+      {children}
+    </LayoutContextProvider>
+  );
+}
+
+export { useLayout, LayoutProvider };
+

package/src/useModal/useModal.test.ts

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

package/src/useModal/useModal.ts

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

package/src/useMounted/useMounted.test.tsx

@@ -0,0 +1,34 @@
+import '@testing-library/jest-dom';
+import { renderHook } from '@testing-library/react';
+import { useMounted } from './useMounted';
+
+describe('useMounted', () => {
+
+  it('should be defined', () => {
+    expect(useMounted).toBeDefined();
+  });
+
+  it('should return a boolean', () => {
+    const { result } = renderHook(() => useMounted(), { initialProps: false });
+    expect(result.current).toBe(true);
+  });
+
+  /*
+  it('should return a function', () => {
+    const { result } = renderHook(() => useMounted(), { initialProps: false });
+    expect(typeof result.current).toEqual('function');
+  });
+
+  it('should return true if component is mounted', () => {
+    const { result } = renderHook(() => useMounted(), { initialProps: false });
+    expect(result.current()).toBe(true);
+  });
+
+  it('should return false if component is unmounted', () => {
+    const { result, unmount } = renderHook(() => useMounted(), { initialProps: false });
+    unmount();
+    expect(result.current()).toBe(false);
+  });
+  */
+
+});

package/src/useMounted/useMounted.ts

@@ -0,0 +1,25 @@
+/*
+import { useCallback, useEffect, useRef } from 'react';
+
+export function useMounted(): () => boolean {
+  const ref = useRef<boolean>(false);
+  const get = useCallback(() => ref.current, []);
+  useEffect(() => {
+    ref.current = true;
+    return () => {
+      ref.current = false;
+    };
+  }, []);
+  return get;
+}
+*/
+
+import { useEffect, useState } from 'react';
+
+export function useMounted() {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);   // at init only
+  return mounted;
+}

package/src/useNumber/useNumber.test.tsx

@@ -0,0 +1,36 @@
+import { renderHook } from '@testing-library/react';
+import { LayoutDefaults } from '@websolutespa/bom-mixer-mock';
+import { LayoutProvider } from '../useLayout/useLayout';
+import { useNumber } from './useNumber';
+
+const wrapper = (props: { children: React.ReactNode }) => (
+  <LayoutProvider layout={LayoutDefaults}>{props.children}</LayoutProvider>
+);
+
+describe('useNumber', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'error').mockImplementation(() => { });
+  });
+
+  test('should throw without provider', () => {
+    expect(() => {
+      renderHook(() => useNumber());
+    }).toThrow('useGenericContext must be used within a Provider');
+  });
+
+  test('should not throw with provider', () => {
+    expect(() => {
+      renderHook(() => useNumber(), { wrapper });
+    }).not.toThrow();
+  });
+
+  test('should return formatted value', () => {
+    const { result } = renderHook(() => useNumber({
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    }), { wrapper });
+    const formatted = result.current(1234.5678);
+    expect(formatted).toEqual('1,234.57');
+  });
+
+});

package/src/useNumber/useNumber.ts

@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+import { useLayout } from '../useLayout/useLayout';
+
+export function useNumber(options?: Intl.NumberFormatOptions, locale?: string): (value: number) => string {
+  const layout = useLayout();
+  const currentLocale = locale || layout.locale;
+  const flatOptions = options ? Object.entries(options).map(([k, v]) => `${k}:${v}`).join('') : undefined;
+  const formatter = useMemo(() => {
+    const formatter = new Intl.NumberFormat(currentLocale, options).format;
+    return formatter;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentLocale, flatOptions]);
+
+  return formatter;
+}

package/src/usePage/usePage.test.tsx

@@ -0,0 +1,31 @@
+import { renderHook } from '@testing-library/react';
+import { PageDefaults } from '@websolutespa/bom-mixer-mock';
+import { PageProvider, usePage } from './usePage';
+
+const wrapper = (props: { children: React.ReactNode }) => (
+  <PageProvider page={PageDefaults}>{props.children}</PageProvider>
+);
+
+describe('usePage', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'error').mockImplementation(() => { });
+  });
+
+  test('should throw without provider', () => {
+    expect(() => {
+      renderHook(() => usePage());
+    }).toThrow('useGenericContext must be used within a Provider');
+  });
+
+  test('should not throw with provider', () => {
+    expect(() => {
+      renderHook(() => usePage(), { wrapper });
+    }).not.toThrow();
+  });
+
+  test('should return page', () => {
+    const { result } = renderHook(() => usePage(), { wrapper });
+    expect(result.current).toBe(PageDefaults);
+  });
+
+});

package/src/usePage/usePage.tsx

@@ -0,0 +1,19 @@
+import { IPage } from '@websolutespa/bom-core';
+import React from 'react';
+import { createGenericContext } from '../useGenericContext/useGenericContext';
+
+export type IPageContext = IPage;
+
+const [usePage, PageContextProvider] = createGenericContext<IPageContext>();
+
+function PageProvider({ children, page }: { children?: React.ReactNode, page: IPage }) {
+  // console.log('PageProvider.context', context);
+  return (
+    <PageContextProvider value={page}>
+      {children}
+    </PageContextProvider>
+  );
+}
+
+export { usePage, PageProvider };
+

package/src/usePagination/pagination.service.ts

@@ -0,0 +1,23 @@
+export type IPaginationInfo<T> = {
+  items: T[],
+  total: number,
+  pages: number,
+  page: number,
+  perPage: number,
+};
+
+export function getPagedItems<T>(items: T[], page: number, perPage: number): T[] {
+  const from = (page - 1) * perPage;
+  const to = Math.min(page * perPage, items.length);
+  return items.slice(from, to);
+}
+
+/*
+export function getPaginationInfo<T>(items: T[], page: number = 1, perPage: number = 15): IPaginationInfo<T> {
+  const total = items.length;
+  const pages = Math.ceil(total / perPage);
+  const pagedItems = getPagedItems(items, page, perPage);
+  // console.log(items.length, '->', pagedItems.length);
+  return { items: pagedItems, total, pages, page, perPage };
+}
+*/