@websolutespa/bom-mixer-hooks 0.2.0 → 0.2.2

package/src/useCart/useCart.test.tsx

@@ -0,0 +1,89 @@
+
+
+// readme https://testing-library.com/
+import { act, renderHook } from '@testing-library/react';
+import { CartProvider, useCart } from './useCart';
+
+const wrapper = (props: { children: React.ReactNode }) => (
+  <CartProvider>{props.children}</CartProvider>
+);
+
+const item = {
+  id: 1,
+  price: 100.0,
+  title: 'Item',
+  href: '#',
+  media: {
+    src: '/path/to/image.png',
+    type: 'image',
+  },
+  schema: 'product',
+};
+
+describe('useCart', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'error').mockImplementation(() => { });
+  });
+
+  test('should throw without provider', () => {
+    expect(() => {
+      renderHook(() => useCart(state => state));
+    }).toThrow('Missing CartContext.Provider in the tree');
+  });
+
+  test('should not throw with provider', () => {
+    expect(() => {
+      renderHook(() => useCart(state => state), { wrapper });
+    }).not.toThrow();
+  });
+
+  it('should work correctly', async () => {
+    const { result } = renderHook(() => useCart(state => state), { wrapper });
+    let state = result.current;
+    // read
+    expect(state.items).toStrictEqual([]);
+    expect(state.actions.count()).toBe(0);
+    expect(state.actions.has(item)).toBe(false);
+    // add
+    act(() => state.actions.add(item, 1));
+    state = result.current;
+    expect(state.actions.count()).toBe(1);
+    expect(state.actions.has(item)).toBe(true);
+    state = result.current;
+    expect(state.items).toStrictEqual([{ ...item, qty: 1 }]);
+    const cartItem = state.actions.find(item);
+    expect(state.items[0]).toBe(cartItem);
+    // re add
+    act(() => state.actions.add(item, 1));
+    state = result.current;
+    expect(state.items).toStrictEqual([{ ...item, qty: 1 }]);
+    // rehydrate
+    const rehydrate = renderHook(() => useCart(state => state), { wrapper });
+    expect(rehydrate.result.current.items).toStrictEqual([{ ...item, qty: 1 }]);
+    // update
+    act(() => state.actions.update({ ...item, qty: 2 }));
+    state = result.current;
+    expect(state.items).toStrictEqual([{ ...item, qty: 2 }]);
+    // update non exhistent
+    act(() => state.actions.update({ ...item, id: 2, qty: 1 }));
+    state = result.current;
+    expect(state.items).toStrictEqual([{ ...item, qty: 2 }]);
+    // remove
+    act(() => state.actions.remove(item));
+    state = result.current;
+    expect(state.items).toStrictEqual([]);
+    expect(state.actions.count()).toBe(0);
+    // remove non exhistent
+    act(() => state.actions.remove({ ...item, id: 2 }));
+    state = result.current;
+    expect(state.actions.count()).toBe(0);
+    // clear
+    act(() => state.actions.add(item));
+    state = result.current;
+    act(() => state.actions.clear());
+    state = result.current;
+    expect(state.items).toStrictEqual([]);
+    expect(state.actions.count()).toBe(0);
+  });
+
+});

package/src/useCart/useCart.tsx

@@ -0,0 +1,132 @@
+import { ISchema } from '@websolutespa/bom-core';
+import { ICartAddItem, ICartItem } from '@websolutespa/bom-mixer-models';
+import { createContext, useContext, useRef } from 'react';
+import { createStore, useStore } from 'zustand';
+import { StateStorage, createJSONStorage, persist } from 'zustand/middleware';
+
+type CartProps = {
+  hydrated: boolean;
+  items: ICartItem[];
+};
+
+type CartActions = {
+  count(): number;
+  has(item: ISchema): boolean;
+  find(item: ISchema): ICartItem | undefined;
+  add(item: ICartAddItem, qty?: number): void;
+  remove(item: ISchema): number;
+  update(item: ICartItem): void;
+  clear(): void;
+};
+
+type CartState = CartProps & {
+  actions: CartActions;
+};
+
+type CartStore = ReturnType<typeof createCartStore>;
+
+const createCartStore = ({ storage, ...initialProps }: { storage?: StateStorage } & Partial<CartProps>) => {
+  const DEFAULT_PROPS: CartProps = {
+    hydrated: false,
+    items: [],
+  };
+  const useStore = createStore<CartState>()(
+    persist(
+      (set, get) => ({
+        ...DEFAULT_PROPS,
+        ...initialProps,
+        actions: {
+          count: () => {
+            return get().items.length;
+          },
+          has: (item: ISchema) => {
+            return get().items.find(x => x.schema === item.schema && x.id === item.id) != null;
+          },
+          find: (item: ISchema) => {
+            return get().items.find(x => x.schema === item.schema && x.id === item.id);
+          },
+          add: (item: ICartItem, qty: number = 1) => set(state => {
+            const items = state.items.slice();
+            const index = items.reduce((p, c, i) => (c.schema === item.schema && c.id === item.id) ? i : p, -1);
+            if (index === -1) {
+              items.push({ ...item, qty });
+            }
+            return { items };
+          }),
+          remove: (item: ISchema) => {
+            let count = 0;
+            set(state => {
+              const items = state.items.slice();
+              const index = items.reduce((p, c, i) => (c.schema === item.schema && c.id === item.id) ? i : p, -1);
+              if (index !== -1) {
+                items.splice(index, 1);
+              }
+              count = items.length;
+              return { items };
+            });
+            return count;
+          },
+          update: (item: ICartItem) => set(state => {
+            const items = state.items.slice();
+            const index = items.reduce((p, c, i) => (c.schema === item.schema && c.id === item.id) ? i : p, -1);
+            if (index !== -1) {
+              items[index] = item;
+            }
+            return { items };
+          }),
+          clear: () => set(state => ({ items: [] })),
+        },
+      }),
+      {
+        name: 'cart',
+        storage: createJSONStorage(() => storage || localStorage),
+        /*
+        getStorage: () => {
+          // console.log('useCart.getStorage');
+          return storage || localStorage;
+        },
+        */
+        onRehydrateStorage: () => () => {
+          useStore.setState({ hydrated: true });
+          // console.log('onRehydrateStorage', useStore, useStore.getState());
+        },
+        merge: (persistedState: any, currentState: CartState) => {
+          if (persistedState.items && Array.isArray(persistedState.items)) {
+            currentState.items = [...persistedState.items];
+          }
+          currentState.hydrated = true;
+          return currentState;
+        },
+      }
+    )
+  );
+  return useStore;
+};
+
+export const CartContext = createContext<CartStore | null>(null);
+
+type CartProviderProps = React.PropsWithChildren<{ items?: ICartItem[], storage?: StateStorage }>;
+
+function CartProvider({ children, ...props }: CartProviderProps) {
+  const storeRef = useRef<CartStore>();
+  if (!storeRef.current) {
+    storeRef.current = createCartStore(props);
+  }
+  return (
+    <CartContext.Provider value={storeRef.current}>
+      {children}
+    </CartContext.Provider>
+  );
+}
+
+function useCart<T>(
+  selector: (state: CartState) => T,
+  equalityFn?: (left: T, right: T) => boolean
+): T {
+  const store = useContext(CartContext);
+  if (!store) throw new Error('Missing CartContext.Provider in the tree');
+  return useStore(store, selector, equalityFn);
+}
+
+export { CartProvider, useCart };
+

package/src/useCheckout/useCheckout.test.tsx

@@ -0,0 +1,53 @@
+
+
+// readme https://testing-library.com/
+import { act, renderHook } from '@testing-library/react';
+import { ICheckoutPartial } from '@websolutespa/bom-mixer-models';
+import { CheckoutProvider, useCheckout } from './useCheckout';
+
+const data = {
+  countries: [],
+  regions: [],
+  provinces: [],
+};
+
+const wrapper = (props: { children: React.ReactNode }) => (
+  <CheckoutProvider data={data}>{props.children}</CheckoutProvider>
+);
+
+const checkout: ICheckoutPartial = {
+  items: [],
+};
+
+describe('useCheckout', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'error').mockImplementation(() => { });
+  });
+
+  test('should throw without provider', () => {
+    expect(() => {
+      renderHook(() => useCheckout(state => state));
+    }).toThrow('Missing CheckoutContext.Provider in the tree');
+  });
+
+  test('should not throw with provider', () => {
+    expect(() => {
+      renderHook(() => useCheckout(state => state), { wrapper });
+    }).not.toThrow();
+  });
+
+  it('should work correctly', async () => {
+    const { result } = renderHook(() => useCheckout(state => state), { wrapper });
+    let state = result.current;
+    // read
+    expect(state.checkout).toStrictEqual({});
+    // set
+    act(() => state.actions.setCheckout(checkout));
+    state = result.current;
+    expect(state.checkout).toStrictEqual(checkout);
+    // rehydrate
+    const rehydrate = renderHook(() => useCheckout(state => state), { wrapper });
+    expect(rehydrate.result.current.checkout).toStrictEqual(checkout);
+  });
+
+});

package/src/useCheckout/useCheckout.tsx

@@ -0,0 +1,95 @@
+import { IAddressOptions, ICheckoutPartial } from '@websolutespa/bom-mixer-models';
+import { createContext, useContext, useRef } from 'react';
+import { createStore, useStore } from 'zustand';
+import { createJSONStorage, persist, StateStorage } from 'zustand/middleware';
+
+type CheckoutInitialProps = {
+  data: IAddressOptions;
+  checkout?: ICheckoutPartial;
+};
+
+type CheckoutProps = {
+  hydrated: boolean;
+  data: IAddressOptions;
+  checkout: ICheckoutPartial;
+};
+
+type CheckoutActions = {
+  setCheckout(checkout: ICheckoutPartial): void;
+};
+
+type CheckoutState = CheckoutProps & {
+  actions: CheckoutActions,
+};
+
+type CheckoutStore = ReturnType<typeof createCheckoutStore>;
+
+const createCheckoutStore = ({ storage, ...initialProps }: { storage?: StateStorage } & CheckoutInitialProps) => {
+  const DEFAULT_PROPS = {
+    hydrated: false,
+    checkout: {},
+  };
+  const useStore = createStore<CheckoutState>()(
+    persist(
+      (set, get) => ({
+        ...DEFAULT_PROPS,
+        ...initialProps,
+        actions: {
+          setCheckout: (checkout: ICheckoutPartial) => set(state => {
+            return { checkout };
+          }),
+        },
+      }),
+      {
+        name: 'checkout',
+        storage: createJSONStorage(() => storage || localStorage),
+        /*
+        getStorage: () => {
+          // console.log('useCheckout.getStorage');
+          return storage || localStorage;
+        },
+        */
+        onRehydrateStorage: () => () => {
+          useStore.setState({ hydrated: true });
+          // console.log('onRehydrateStorage', useStore, useStore.getState());
+        },
+        merge: (persistedState: any, currentState: CheckoutState) => {
+          if (persistedState.checkout && typeof persistedState.checkout === 'object') {
+            currentState.checkout = { ...persistedState.checkout };
+          }
+          currentState.hydrated = true;
+          return currentState;
+        },
+      }
+    )
+  );
+  return useStore;
+};
+
+export const CheckoutContext = createContext<CheckoutStore | null>(null);
+
+type CheckoutProviderProps = React.PropsWithChildren<{ data: IAddressOptions, checkout?: ICheckoutPartial, storage?: StateStorage }>;
+
+function CheckoutProvider({ children, ...props }: CheckoutProviderProps) {
+  const storeRef = useRef<CheckoutStore>();
+  if (!storeRef.current) {
+    storeRef.current = createCheckoutStore(props);
+  }
+  return (
+    <CheckoutContext.Provider value={storeRef.current}>
+      {children}
+    </CheckoutContext.Provider>
+  );
+}
+
+function useCheckout<T>(
+  selector: (state: CheckoutState) => T,
+  equalityFn?: (left: T, right: T) => boolean
+): T {
+  const store = useContext(CheckoutContext);
+  if (!store) throw new Error('Missing CheckoutContext.Provider in the tree');
+  return useStore(store, selector, equalityFn);
+}
+
+export { CheckoutProvider, useCheckout };
+

package/src/useClickAnyWhere/useClickAnyWhere.test.ts

@@ -0,0 +1,15 @@
+// readme https://testing-library.com/
+import { fireEvent, renderHook } from '@testing-library/react';
+import { useClickAnyWhere } from './useClickAnyWhere';
+
+describe('useClickAnyWhere', () => {
+
+  it('should work correctly', () => {
+    const handler = jest.fn();
+    renderHook(() => useClickAnyWhere(handler));
+    expect(handler).toHaveBeenCalledTimes(0);
+    fireEvent.click(document);
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+});

package/src/useClickAnyWhere/useClickAnyWhere.ts

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+
+export function useClickAnyWhere(handler: (event: MouseEvent) => void) {
+  useEffect(() => {
+    const callback = (event: MouseEvent) => handler(event);
+    document.addEventListener('click', callback);
+    return () => document.removeEventListener('click', callback);
+  }, [handler]);
+}

package/src/useClickOut/useClickOut.test.tsx

@@ -0,0 +1,78 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React, { useRef } from 'react';
+import { useClickOut } from './useClickOut';
+
+type Props = {
+  handler: () => void;
+};
+
+const Wrapper: React.FunctionComponent<Props> = ({ handler }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  useClickOut(ref, handler);
+  return <div data-testid="inside" ref={ref} />;
+};
+
+describe('useClickOut', () => {
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should call handler when clicked outside', async () => {
+    const handler = jest.fn();
+    render(
+      <>
+        <Wrapper handler={handler} />
+        <div data-testid="outside" />
+      </>
+    );
+    const outside = screen.getByTestId('outside');
+    expect(handler).toHaveBeenCalledTimes(0);
+    await userEvent.click(outside);
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not call handler when clicked inside', async () => {
+    const handler = jest.fn();
+    render(
+      <>
+        <Wrapper handler={handler} />
+        <div data-testid="outside" />
+      </>
+    );
+    const inside = screen.getByTestId('inside');
+    expect(handler).toHaveBeenCalledTimes(0);
+    await userEvent.click(inside);
+    expect(handler).toHaveBeenCalledTimes(0);
+  });
+
+  /*
+  it('should call handler when clicked outside', async () => {
+    const handler = jest.fn();
+
+    render(
+      <>
+        <Wrapper handler={handler} />
+        <div data-testid="outside" />
+      </>
+    );
+
+    const inside = screen.getByTestId('inside');
+    const outside = screen.getByTestId('outside');
+
+    expect(handler).toHaveBeenCalledTimes(0);
+
+    await userEvent.click(inside);
+    expect(handler).toHaveBeenCalledTimes(0);
+
+    await userEvent.click(outside);
+    expect(handler).toHaveBeenCalledTimes(1);
+
+    await userEvent.click(outside);
+    expect(handler).toHaveBeenCalledTimes(2);
+
+    await userEvent.click(inside);
+    expect(handler).toHaveBeenCalledTimes(2);
+  });
+  */
+});

package/src/useClickOut/useClickOut.ts

@@ -0,0 +1,25 @@
+import { MutableRefObject, useEffect, useRef } from 'react';
+
+export type ClickOutGetContainer = () => HTMLElement | null;
+
+export function useClickOut(ref: MutableRefObject<HTMLElement | null>, handler: (event: MouseEvent) => void) {
+
+  const handlerRef = useRef(handler);
+
+  useEffect(() => {
+    handlerRef.current = handler;
+  }, [handler]);
+
+  useEffect(() => {
+    const callback = (event: MouseEvent) => {
+      const el = ref.current;
+      if (!event || !el || el.contains(event.target as Node)) {
+        return;
+      }
+      handlerRef.current(event);
+    };
+    document.addEventListener('click', callback);
+    return () => document.removeEventListener('click', callback);
+  }, [ref]);
+
+}

package/src/useCurrency/useCurrency.test.tsx

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

package/src/useCurrency/useCurrency.ts

@@ -0,0 +1,42 @@
+import { useNumber } from '../useNumber/useNumber';
+
+export function useCurrency(currency: string = 'EUR', locale?: string): (value: number) => string {
+  return useNumber({ style: 'currency', currency, minimumFractionDigits: 2, maximumFractionDigits: 2 }, locale);
+}
+
+/*
+import { useMemo } from 'react';
+import { useNumber } from 'src/useNumber/useNumber';
+import { useLayout } from '../useLayout/useLayout';
+
+export function useCurrency(currency: string = 'EUR', locale?: string): (value: number) => string {
+  const layout = useLayout();
+  const currentLocale = locale || layout.locale;
+
+  const formatter = useMemo(() => {
+    const options = { style: 'currency', currency };
+    const formatter = new Intl.NumberFormat(currentLocale, options).format;
+    return formatter;
+  }, [currency, currentLocale]);
+
+  return formatter;
+}
+
+*/
+
+/*
+
+export function useCurrency(value: number, currency: string = 'EUR', locale?: string): string {
+
+  const layout = useLayout();
+
+  const currentLocale = locale || layout.locale;
+
+  return useMemo(() => {
+    const options = { style: 'currency', currency };
+    const formattedValue = new Intl.NumberFormat(currentLocale, options).format(value);
+    return formattedValue;
+  }, [value, currency, currentLocale]);
+}
+
+*/

package/src/useCurrentState/useCurrentState.test.tsx

@@ -0,0 +1,56 @@
+import { act, render, renderHook } from '@testing-library/react';
+import React, { useEffect } from 'react';
+import { useCurrentState } from './useCurrentState';
+
+describe('useCurrentState', () => {
+  it('should work correctly', () => {
+    const { result } = renderHook(() => useCurrentState(''));
+    let [state, setState, ref] = result.current;
+    expect(state).toEqual('');
+    act(() => setState('test'));
+    [state, setState, ref] = result.current;
+    expect(state).toEqual('test');
+    expect(ref.current).toEqual('test');
+  });
+
+  it('functional initial mode should be supported', () => {
+    const { result } = renderHook(() => useCurrentState(() => 1 + 1));
+    let [state, setState, ref] = result.current;
+    expect(state).toEqual(2);
+    act(() => setState(0));
+    [state, setState, ref] = result.current;
+    expect(state).toEqual(0);
+    expect(ref.current).toEqual(0);
+  });
+
+  it('functional update mode should be supported', () => {
+    const { result } = renderHook(() => useCurrentState(0));
+    let [state, setState, ref] = result.current;
+    expect(state).toEqual(0);
+    act(() => setState(pre => pre + 10));
+    [state, setState, ref] = result.current;
+    expect(state).toEqual(10);
+    expect(ref.current).toEqual(10);
+  });
+
+  it('only ref should track latest value', () => {
+    const Mock: React.FC<unknown> = () => {
+      const [state, setState, ref] = useCurrentState('');
+      useEffect(() => {
+        return () => {
+          setTimeout(() => {
+            expect(state).not.toEqual('test2');
+            expect(ref.current).toEqual('test2');
+          }, 0);
+        };
+      }, []);
+      useEffect(() => {
+        setState('test');
+        setState('test2');
+      }, []);
+      return <span />;
+    };
+    const { container, unmount } = render(<Mock />);
+    expect(() => unmount()).not.toThrow();
+  });
+});

package/src/useCurrentState/useCurrentState.ts

@@ -0,0 +1,22 @@
+import { Dispatch, MutableRefObject, SetStateAction, useEffect, useRef, useState } from 'react';
+
+export function useCurrentState<S>(initialState: S | (() => S)): CurrentStateType<S> {
+  const [state, setState] = useState<S>(() => {
+    return typeof initialState === 'function' ? (initialState as () => S)() : initialState;
+  });
+  const ref = useRef<S>(initialState as S);
+
+  useEffect(() => {
+    ref.current = state;
+  }, [state]);
+
+  const setValue = (val: SetStateAction<S>) => {
+    const result = typeof val === 'function' ? (val as (prevState: S) => S)(ref.current) : val;
+    ref.current = result;
+    setState(result);
+  };
+
+  return [state, setValue, ref];
+}
+
+export type CurrentStateType<S> = [S, Dispatch<SetStateAction<S>>, MutableRefObject<S>];