@websolutespa/bom-mixer-hooks 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @websolutespa/bom-mixer-hooks
 
+## 0.2.2
+
+### Patch Changes
+
+- Modified: useBreakpoint theme mediaQuery.
+
+## 0.2.1
+
+### Patch Changes
+
+- Added: source files.
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/index.js

@@ -380,7 +380,7 @@ function useBreakpoint() {
     throw new Error("useBreakpoint must be used within ThemeProvider");
   }
   const breakpoints = Object.keys(theme.mediaQuery);
-  const values = Object.values(theme.mediaQuery);
+  const values = Object.values(theme.mediaQuery).map((x) => parseInt(String(x)));
   const breakpoint = (0, import_react7.useMemo)(() => {
     const breakpoint2 = values.reduce((p, c, i) => {
       if (c < windowSize.width) {

package/dist/index.mjs

@@ -263,7 +263,7 @@ function useBreakpoint() {
     throw new Error("useBreakpoint must be used within ThemeProvider");
   }
   const breakpoints = Object.keys(theme.mediaQuery);
-  const values = Object.values(theme.mediaQuery);
+  const values = Object.values(theme.mediaQuery).map((x) => parseInt(String(x)));
   const breakpoint = useMemo(() => {
     const breakpoint2 = values.reduce((p, c, i) => {
       if (c < windowSize.width) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websolutespa/bom-mixer-hooks",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Mixer Hooks module of the BOM Repository",
   "keywords": [
     "bom",
@@ -58,14 +58,16 @@
   "sideEffects": false,
   "prepack": {
     "types": "./dist/index.d.ts",
-    "main": "./dist/index.js",
-    "module": "./dist/index.mjs"
+    "main": "./dist/index.mjs",
+    "module": "./dist/index.mjs",
+    "source": "./src/index.ts"
   },
   "postpack": {
     "types": "./src/index.ts",
     "main": "./src/index.ts"
   },
   "types": "./dist/index.d.ts",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs"
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "source": "./src/index.ts"
 }

package/src/index.ts

@@ -0,0 +1,60 @@
+export * from './useApi/useApi';
+export * from './useBodyScroll/useBodyScroll';
+export * from './useBreakpoint/useBreakpoint';
+export * from './useCart/useCart';
+export * from './useCheckout/useCheckout';
+export * from './useClickAnyWhere/useClickAnyWhere';
+export * from './useClickOut/useClickOut';
+export * from './useCurrency/useCurrency';
+export * from './useCurrentState/useCurrentState';
+export * from './useDateTimeFormat/useDateTimeFormat';
+export * from './useDebounce/useDebounce';
+export * from './useDebounceCallback/useDebounceCallback';
+export * from './useDebugChangedProps/useDebugChangedProps';
+export * from './useDomObserver/useDomObserver';
+export * from './useDrawer/useDrawer';
+export * from './useElementSize/useElementSize';
+export * from './useEventListener/useEventListener';
+export * from './useFilters/filter';
+export * from './useFilters/filter.service';
+export * from './useFilters/useFilters';
+export * from './useGenericContext/useGenericContext';
+export * from './useGeolocation/geolocation.service';
+export * from './useGeolocation/useGeolocation';
+export * from './useIdle/useIdle';
+export * from './useInfiniteLoader/useInfiniteLoader';
+export * from './useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
+export * from './useKeyboard/useKeyboard';
+export * from './useLabel/useLabel';
+export * from './useLayout/useLayout';
+export * from './useModal/useModal';
+export * from './useMounted/useMounted';
+export * from './useNumber/useNumber';
+export * from './usePage/usePage';
+export * from './usePagination/pagination.service';
+export * from './usePagination/usePagination';
+export * from './usePortal/usePortal';
+export * from './usePrevious/usePrevious';
+export * from './useRealSize/useRealSize';
+export * from './useResize/useResize';
+export * from './useScroll/useScroll';
+export * from './useScrollTo/useScrollTo';
+export * from './useSearchParams/useSearchParams';
+export * from './useSearchParamsEncoded/useSearchParamsEncoded';
+export * from './useSorting/useSorting';
+export * from './useSSR/useSSR';
+export * from './useSwiperIndex/useSwiperIndex';
+export * from './useSyncedRef/useSyncedRef';
+export * from './useUI/useUI';
+export * from './useUnit/useUnit';
+export * from './useUnmountEffect/useUnmountEffect';
+export * from './useUser/useUser';
+export * from './useWindowSize/useWindowSize';
+
+/**
+ *
+ * useful hooks
+ * https://streamich.github.io/react-use
+ * https://github.com/react-hookz/web
+ *
+ */

package/src/useApi/useApi.test.tsx

@@ -0,0 +1,193 @@
+import '@testing-library/jest-dom';
+import { render, renderHook, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
+import { LayoutDefaults } from '@websolutespa/bom-mixer-mock';
+import { getApiUrl } from '@websolutespa/bom-mixer-store';
+import { LayoutProvider } from '../useLayout/useLayout';
+import { useApi, useApiDelete, useApiFetch, useApiGet, useApiPatch, useApiPost, useApiPut } from './useApi';
+
+const wrapper = (props: { children: React.ReactNode }) => (
+  <LayoutProvider layout={LayoutDefaults}>{props.children}</LayoutProvider>
+);
+
+const defaultResponse = {
+  ok: true,
+  status: 200,
+  json: () => Promise.resolve(null),
+};
+
+function mockFetch(
+  method: string = 'GET',
+  result: any = { message: 'ok' },
+  overrideResponse: Partial<typeof defaultResponse> = {}
+) {
+  const endpoint = '/endpoint';
+  const url = `${getApiUrl(endpoint)}?locale=en&market=ww`;
+  const payload = { data: 'data' };
+  const response = {
+    ...defaultResponse,
+    ...overrideResponse,
+    json: () => Promise.resolve(result),
+  } as Response;
+  global.fetch = jest.fn(() =>
+    Promise.resolve(response)
+  );
+  const request: {
+    body?: string;
+    headers: { [key: string]: string },
+    method: string;
+  } = {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method,
+  };
+  if (['POST', 'PATCH', 'PUT'].includes(method)) {
+    request.body = JSON.stringify(payload);
+  }
+  return { endpoint, url, payload, result, request, response };
+}
+
+describe('useApi', () => {
+  const ENV = process.env;
+  const FETCH = global.fetch;
+
+  beforeEach(() => {
+    jest.resetModules();
+    jest.resetAllMocks();
+    jest.spyOn(console, 'error').mockImplementation(() => { });
+    process.env = {
+      NODE_ENV: 'test',
+      NEXT_PUBLIC_URL: 'http://localhost:3000',
+      NEXT_PUBLIC_MOCK_FALLBACK_URL: 'http://localhost:3000',
+      NEXT_PUBLIC_API: '/api',
+      NEXT_PUBLIC_GOOGLE_MAP_API_KEY: 'AIzaSyDvGw6iAoKdRv8mmaC9GeT-LWLPQtA8p60',
+      STORE_URL: 'http://localhost:4000',
+      STORE_API: '/api',
+      STORE_BEARER: '7584f15d12972fb1e7695e998dd5e4c754f46c74d06a08e8d76f556adcd045e48cd52bed6faac098784471ac273ee40243194b9cff7eba3c4a768f8f41d2d51959a7f767b943c7f0170f6e5f632db523803c357083bf7a7bf03ee8e0df2d8ce5cd52e0211283b34d7781313da775018a9e950433d2b6faf711c20e5a63b25243',
+      STORE_STRATEGY: 'mock',
+      SECRET_COOKIE_PASSWORD: '2gyZ3GDw3LHZQKDhPmPDL3sjREVRXPr8',
+      HOOKS_SECRET: '7584f15d12972fb1e7695e998dd5e4',
+    };
+  });
+
+  afterAll(() => {
+    process.env = ENV;
+    global.fetch = FETCH;
+  });
+
+  test('should throw without provider', () => {
+    expect(() => {
+      renderHook(() => useApi());
+    }).toThrow('useGenericContext must be used within a Provider');
+  });
+
+  test('should not throw with provider', () => {
+    expect(() => {
+      renderHook(() => useApi(), { wrapper });
+    }).not.toThrow();
+  });
+
+  test('api.get should return ok', async () => {
+    const { result } = renderHook(() => useApi(), { wrapper });
+    const mock = mockFetch();
+    const response = await result.current.get(mock.endpoint);
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(fetch).toHaveBeenCalledWith(mock.url, mock.request);
+    expect(response).toBe(mock.result);
+  });
+
+  test('api.post should return ok', async () => {
+    const { result } = renderHook(() => useApi(), { wrapper });
+    const mock = mockFetch('POST');
+    const response = await result.current.post(mock.endpoint, mock.payload);
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(fetch).toHaveBeenCalledWith(mock.url, mock.request);
+    expect(response).toBe(mock.result);
+  });
+
+  test('api.patch should return ok', async () => {
+    const { result } = renderHook(() => useApi(), { wrapper });
+    const mock = mockFetch('PATCH');
+    const response = await result.current.patch(mock.endpoint, mock.payload);
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(fetch).toHaveBeenCalledWith(mock.url, mock.request);
+    expect(response).toBe(mock.result);
+  });
+
+  test('api.put should return ok', async () => {
+    const { result } = renderHook(() => useApi(), { wrapper });
+    const mock = mockFetch('PUT');
+    const response = await result.current.put(mock.endpoint, mock.payload);
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(fetch).toHaveBeenCalledWith(mock.url, mock.request);
+    expect(response).toBe(mock.result);
+  });
+
+  test('api.delete should return ok', async () => {
+    const { result } = renderHook(() => useApi(), { wrapper });
+    const mock = mockFetch('DELETE');
+    const response = await result.current.delete(mock.endpoint);
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(fetch).toHaveBeenCalledWith(mock.url, mock.request);
+    expect(response).toBe(mock.result);
+  });
+
+  test('useApiGet expect result ok', TestMethod('GET'));
+
+  test('useApiPost expect result ok', TestMethod('POST'));
+
+  test('useApiPatch expect result ok', TestMethod('PATCH'));
+
+  test('useApiPut expect result ok', TestMethod('PUT'));
+
+  test('useApiDelete expect result ok', TestMethod('DELETE'));
+
+  function TestMethod(method?: string) {
+    const useHook = (mock: ReturnType<typeof mockFetch>) => {
+      switch (method) {
+        case 'GET':
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          return useApiGet(mock.endpoint);
+        case 'POST':
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          return useApiPost(mock.endpoint, mock.payload);
+        case 'PATCH':
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          return useApiPatch(mock.endpoint, mock.payload);
+        case 'PUT':
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          return useApiPut(mock.endpoint, mock.payload);
+        case 'DELETE':
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          return useApiDelete(mock.endpoint);
+        default:
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          return useApiFetch(mock.endpoint);
+      }
+    };
+    return async () => {
+      const mock = mockFetch(method);
+      const Wrapper = () => {
+        const [response, loading, error, setError] = useHook(mock);
+        return (
+          <>
+            {loading && <div data-testid="loading">loading</div>}
+            {response && <div data-testid="result">{JSON.stringify(response)}</div>}
+            {error && <div data-testid="error">{JSON.stringify(error)}</div>}
+          </>
+        );
+      };
+      render(
+        <LayoutProvider layout={LayoutDefaults}><Wrapper /></LayoutProvider>
+      );
+      expect(screen.getByTestId('loading')).toHaveTextContent('loading');
+      await waitForElementToBeRemoved(() => screen.getByTestId('loading'));
+      expect(fetch).toHaveBeenCalledTimes(1);
+      expect(fetch).toHaveBeenCalledWith(mock.url, mock.request);
+      const result = await waitFor(() => screen.getByTestId('result'));
+      expect(result).toHaveTextContent(JSON.stringify(mock.result));
+    };
+  }
+
+});
+

package/src/useApi/useApi.ts

@@ -0,0 +1,58 @@
+import { FetchRequestOptions } from '@websolutespa/bom-core';
+import { apiDelete, apiFetch, apiGet, apiPatch, apiPost, apiPut } from '@websolutespa/bom-mixer-store';
+import { useHttpFetch } from '../useHttp/useHttp';
+import { useLayout } from '../useLayout/useLayout';
+
+export function useApiFetch<T = any>(pathname: string, options: FetchRequestOptions = {}) {
+  const layout = useLayout();
+  return useHttpFetch<T>(pathname, options, apiFetch, layout);
+}
+
+export function useApiGet<T = any>(pathname: string, options: FetchRequestOptions = {}) {
+  return useApiFetch<T>(pathname, { ...options, method: 'GET' });
+}
+
+export function useApiPost<T = any>(pathname: string, payload: unknown, options: FetchRequestOptions = {}) {
+  return useApiFetch<T>(pathname, { ...options, method: 'POST', body: payload ? JSON.stringify(payload) : undefined });
+}
+
+export function useApiPut<T = any>(pathname: string, payload: unknown, options: FetchRequestOptions = {}) {
+  return useApiFetch<T>(pathname, { ...options, method: 'PUT', body: payload ? JSON.stringify(payload) : undefined });
+}
+
+export function useApiPatch<T = any>(pathname: string, payload: unknown, options: FetchRequestOptions = {}) {
+  return useApiFetch<T>(pathname, { ...options, method: 'PATCH', body: payload ? JSON.stringify(payload) : undefined });
+}
+
+export function useApiDelete<T = any>(pathname: string, options: FetchRequestOptions = {}) {
+  return useApiFetch<T>(pathname, { ...options, method: 'DELETE' });
+}
+
+type Api = {
+  get: <T = any>(pathname: string, options?: FetchRequestOptions) => Promise<T>;
+  post: <T = any>(pathname: string, payload?: unknown, options?: FetchRequestOptions) => Promise<T>;
+  put: <T = any>(pathname: string, payload?: unknown, options?: FetchRequestOptions) => Promise<T>;
+  patch: <T = any>(pathname: string, payload?: unknown, options?: FetchRequestOptions) => Promise<T>;
+  delete: <T = any>(pathname: string, options?: FetchRequestOptions) => Promise<T>;
+};
+
+export function useApi(): Api {
+  const layout = useLayout();
+  return {
+    get: async <T = any>(pathname: string, options: FetchRequestOptions = {}) => {
+      return apiGet<T>(pathname, options, layout);
+    },
+    post: async <T = any>(pathname: string, payload?: unknown, options: FetchRequestOptions = {}) => {
+      return apiPost<T>(pathname, payload, options, layout);
+    },
+    put: async <T = any>(pathname: string, payload?: unknown, options: FetchRequestOptions = {}) => {
+      return apiPut<T>(pathname, payload, options, layout);
+    },
+    patch: async <T = any>(pathname: string, payload?: unknown, options: FetchRequestOptions = {}) => {
+      return apiPatch<T>(pathname, payload, options, layout);
+    },
+    delete: async <T = any>(pathname: string, options: FetchRequestOptions = {}) => {
+      return apiDelete<T>(pathname, options, layout);
+    },
+  };
+}

package/src/useBodyScroll/useBodyScroll.test.ts

@@ -0,0 +1,112 @@
+// readme https://testing-library.com/
+import { act, renderHook } from '@testing-library/react';
+import { createRef, RefObject } from 'react';
+import { useBodyScroll } from './useBodyScroll';
+
+describe('useBodyScroll', () => {
+  jest.useFakeTimers();
+
+  it('should work correctly', () => {
+    const ref = createRef<HTMLDivElement>();
+    (ref as any).current = document.createElement('div');
+    const { result } = renderHook(() => useBodyScroll(ref));
+    let [hidden, setHidden] = result.current;
+    expect(hidden).toBe(false);
+    act(() => setHidden(true));
+    [hidden, setHidden] = result.current;
+    expect(hidden).toBe(true);
+  });
+
+  it('should set overflow', async () => {
+    const ref = createRef<HTMLDivElement>();
+    (ref as any).current = document.createElement('div');
+    const element = ref.current as HTMLDivElement;
+    const { result } = renderHook(() => useBodyScroll(ref));
+    act(() => result.current[1](true));
+    expect(element.style.overflow).toEqual('hidden');
+    act(() => result.current[1](false));
+    act(() => jest.advanceTimersByTime(10));
+    expect(element.style.overflow).not.toEqual('hidden');
+  });
+
+  it('the last value of overflow should be recovered after setHidden', async () => {
+    const ref = createRef<HTMLDivElement>();
+    const div = document.createElement('div');
+    div.style.overflow = 'scroll';
+    (ref as any).current = div;
+    const element = ref.current as HTMLDivElement;
+    const { result } = renderHook(() => useBodyScroll(ref));
+    let [hidden, setHidden] = result.current;
+    expect(element.style.overflow).toEqual('scroll');
+    act(() => setHidden(true));
+    expect(element.style.overflow).toEqual('hidden');
+    [hidden, setHidden] = result.current;
+    act(() => setHidden(false));
+    act(() => jest.advanceTimersByTime(10));
+    expect(element.style.overflow).toEqual('scroll');
+  });
+
+  it('should work correctly with multiple element', async () => {
+    const ref1 = createRef<HTMLDivElement>();
+    (ref1 as any).current = document.createElement('div');
+    const element1 = ref1.current as HTMLDivElement;
+    const { result } = renderHook(() => useBodyScroll(ref1));
+    const ref2 = createRef<HTMLDivElement>();
+    (ref2 as any).current = document.createElement('div');
+    const element2 = ref2.current as HTMLDivElement;
+    const { result: result2 } = renderHook(() => useBodyScroll(ref2));
+    act(() => result.current[1](true));
+    act(() => result2.current[1](true));
+    expect(element1.style.overflow).toEqual('hidden');
+    expect(element2.style.overflow).toEqual('hidden');
+    act(() => result.current[1](false));
+    act(() => result2.current[1](false));
+    act(() => jest.advanceTimersByTime(10));
+    expect(element1.style.overflow).toEqual('');
+    expect(element2.style.overflow).toEqual('');
+  });
+
+  it('should work correctly with options', async () => {
+    const ref = createRef<HTMLDivElement>();
+    (ref as any).current = document.createElement('div');
+    const element = ref.current as HTMLDivElement;
+    const { result } = renderHook(() => useBodyScroll(ref, { delayReset: 300 }));
+    const [hidden, setHidden] = result.current;
+    act(() => setHidden(true));
+    expect(element.style.overflow).toEqual('hidden');
+    act(() => setHidden(false));
+    act(() => jest.advanceTimersByTime(10));
+    expect(element.style.overflow).toEqual('hidden');
+    act(() => jest.advanceTimersByTime(100));
+    expect(element.style.overflow).toEqual('hidden');
+    act(() => jest.advanceTimersByTime(250));
+    expect(element.style.overflow).not.toEqual('hidden');
+  });
+
+  it('should work correctly when set element repeatedly', () => {
+    let _ref: RefObject<HTMLDivElement> | null = null;
+    const ref = createRef<HTMLDivElement>();
+    (ref as any).current = document.createElement('div');
+    _ref = ref;
+    const element = ref.current as HTMLDivElement;
+    const { result, rerender } = renderHook(() => useBodyScroll(_ref));
+    let [hidden, setHidden] = result.current;
+    act(() => setHidden(true));
+    expect(element.style.overflow).toEqual('hidden');
+    // Force tigger rerender at the same value
+    _ref = createRef<HTMLDivElement>();
+    rerender();
+    _ref = ref;
+    rerender();
+    [hidden, setHidden] = result.current;
+    act(() => setHidden(true));
+    expect(element.style.overflow).toEqual('hidden');
+  });
+
+  it('should set body when missing all params', () => {
+    const { result } = renderHook(() => useBodyScroll());
+    const [hidden, setHidden] = result.current;
+    act(() => setHidden(true));
+    expect(document.body.style.overflow).toEqual('hidden');
+  });
+});

package/src/useBodyScroll/useBodyScroll.ts

@@ -0,0 +1,89 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { Dispatch, RefObject, SetStateAction, useEffect, useRef, useState } from 'react';
+
+const defaultOptions: BodyScrollOptions = {
+  scrollLayer: false,
+  delayReset: 0,
+};
+
+const elementStack = new Map<HTMLElement, ElementStackItem>();
+
+export function useBodyScroll(elementRef?: RefObject<HTMLElement> | null, options?: BodyScrollOptions): [boolean, Dispatch<SetStateAction<boolean>>] {
+  if (typeof document === 'undefined') {
+    return [false, (t: boolean) => t] as any;
+  }
+  elementRef = elementRef || useRef<HTMLElement>(document.body);
+  const [hidden, setHidden] = useState<boolean>(false);
+  const safeOptions = {
+    ...defaultOptions,
+    ...(options || {}),
+  };
+
+  useEffect(() => {
+    if (!elementRef || !elementRef.current) {
+      return;
+    }
+    const lastOverflow = elementRef.current.style.overflow;
+    if (hidden) {
+      if (elementStack.has(elementRef.current)) {
+        return;
+      }
+      const paddingRight = getOwnerPaddingRight(elementRef.current);
+      const scrollbarWidth = getOwnerScrollbarWidth(elementRef.current);
+      // console.log('paddingRight', paddingRight, 'scrollbarWidth', scrollbarWidth);
+      elementStack.set(elementRef.current, {
+        overflow: lastOverflow,
+        paddingRight: elementRef.current.style.paddingRight,
+      });
+      elementRef.current.style.setProperty('--locked-padding-right', `${paddingRight + scrollbarWidth}px`);
+      elementRef.current.style.overflow = 'hidden';
+      elementRef.current.style.paddingRight = 'var(--locked-padding-right)';
+      return;
+    }
+
+    // reset element overflow
+    if (!elementStack.has(elementRef.current)) {
+      return;
+    }
+
+    const reset = (element: HTMLElement) => {
+      const store = elementStack.get(element) as ElementStackItem;
+      if (!store) {
+        return;
+      }
+      element.style.setProperty('--locked-padding-right', '0');
+      element.style.overflow = store.overflow;
+      element.style.paddingRight = store.paddingRight;
+      elementStack.delete(element);
+    };
+
+    const timer = window.setTimeout(() => {
+      reset(elementRef!.current!);
+      window.clearTimeout(timer);
+    }, safeOptions.delayReset);
+
+  }, [hidden, elementRef]);
+
+  return [hidden, setHidden];
+}
+
+export function getOwnerPaddingRight(element: Element): number {
+  const owner = element?.ownerDocument || document;
+  const view = owner.defaultView || window;
+  return Number.parseInt(view.getComputedStyle(element).paddingRight, 10) || 0;
+}
+
+export function getOwnerScrollbarWidth(element: Element): number {
+  const doc = element?.ownerDocument || document;
+  return Math.abs(window.innerWidth - doc.documentElement.clientWidth);
+}
+
+export type ElementStackItem = {
+  overflow: string;
+  paddingRight: string;
+};
+
+export type BodyScrollOptions = {
+  scrollLayer?: boolean;
+  delayReset?: number;
+};

package/src/useBreakpoint/useBreakpoint.test.tsx

@@ -0,0 +1,45 @@
+import { act, renderHook } from '@testing-library/react';
+import { ThemeDefaults } from '@websolutespa/bom-mixer-mock';
+import { ThemeProvider } from 'styled-components';
+import { useBreakpoint } from './useBreakpoint';
+
+const windowResize = (dimension: 'width' | 'height', value: number): void => {
+  if (dimension === 'width') {
+    window.innerWidth = value;
+  }
+  if (dimension === 'height') {
+    window.innerHeight = value;
+  }
+  window.dispatchEvent(new Event('resize'));
+};
+
+const wrapper = (props: { children: React.ReactNode }) => (
+  <ThemeProvider theme={ThemeDefaults}>{props.children}</ThemeProvider>
+);
+
+describe('useBreakpoint', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'error').mockImplementation(() => { });
+  });
+
+  test('should throw without provider', () => {
+    expect(() => {
+      renderHook(() => useBreakpoint());
+    }).toThrow('useBreakpoint must be used within ThemeProvider');
+  });
+
+  test('should not throw with provider', () => {
+    expect(() => {
+      renderHook(() => useBreakpoint(), { wrapper });
+    }).not.toThrow();
+  });
+
+  it('should work correctly', () => {
+    const { result } = renderHook(() => useBreakpoint(), { wrapper });
+    expect(result.current).toStrictEqual({ key: 'sm', min: 768, max: 1024 });
+    act(() => {
+      windowResize('width', 1920);
+    });
+    expect(result.current).toStrictEqual({ key: 'xl', min: 1600, max: Number.POSITIVE_INFINITY });
+  });
+});

package/src/useBreakpoint/useBreakpoint.ts

@@ -0,0 +1,44 @@
+import { useContext, useMemo } from 'react';
+import { ThemeContext } from 'styled-components';
+import { useWindowSize } from '../useWindowSize/useWindowSize';
+
+type BreakpointType = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+type Breakpoint = {
+  key: BreakpointType;
+  min: number;
+  max: number;
+};
+
+export function useBreakpoint(): Breakpoint {
+  // todo
+  const windowSize = useWindowSize();
+
+  // const [breakpoint, setBreakpoint] = useState<Breakpoint>({ key: 'xs', min: 0, max: 0 });
+
+  const theme = useContext(ThemeContext);
+  if (!theme) {
+    throw new Error('useBreakpoint must be used within ThemeProvider');
+  }
+
+  const breakpoints: BreakpointType[] = Object.keys(theme.mediaQuery) as BreakpointType[];
+  const values: number[] = Object.values(theme.mediaQuery).map(x => parseInt(String(x)));
+
+  const breakpoint = useMemo(() => {
+    const breakpoint = values.reduce((p, c, i) => {
+      if (c < windowSize.width) {
+        p.key = breakpoints[i];
+        p.min = c;
+        if (i + 1 < values.length) {
+          p.max = values[i + 1];
+        } else {
+          p.max = Number.POSITIVE_INFINITY;
+        }
+      }
+      return p;
+    }, { key: 'xs' as BreakpointType, min: -Number.NEGATIVE_INFINITY, max: -Number.NEGATIVE_INFINITY });
+    return breakpoint;
+  }, [windowSize.width]);
+
+  return breakpoint;
+}