@websolutespa/bom-next 3.0.0

package/src/client/useApi.test.tsx

@@ -0,0 +1,203 @@
+// @vitest-environment jsdom
+
+import '@testing-library/jest-dom/vitest';
+import { cleanup, render, renderHook, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
+import { ILayout } from '@websolutespa/bom-core';
+import { afterAll, afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+import { getLocalApiUrl } from '../lib/http';
+import { LayoutDefaults } from '../lib/layout.defaults';
+import { LabelProvider } from './label';
+import { LayoutProvider } from './layout';
+import { useApi, useApiDelete, useApiFetch, useApiGet, useApiPatch, useApiPost, useApiPut } from './useApi';
+
+const wrapper = (props: { children: React.ReactNode }) => (
+  <LayoutProvider layout={LayoutDefaults as ILayout}>
+    <LabelProvider>
+      {props.children}
+    </LabelProvider>
+  </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 = `${getLocalApiUrl(endpoint)}?locale=en&market=ww`;
+  const payload = { data: 'data' };
+  const response = {
+    ...defaultResponse,
+    ...overrideResponse,
+    json: () => Promise.resolve(result),
+  } as Response;
+  (global.fetch as any) = vi.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;
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  beforeEach(() => {
+    vi.resetModules();
+    vi.resetAllMocks();
+    vi.spyOn(console, 'error').mockImplementation(() => { });
+    vi.spyOn(console, 'log').mockImplementation(() => { });
+    process.env = {
+      MIXER_SECRET: 'MIXER_SECRET_32_CHARS_LONG',
+      NEXT_PUBLIC_API: '/api',
+      NEXT_PUBLIC_MOCK_FALLBACK_URL: 'http://localhost:3000',
+      NEXT_PUBLIC_URL: 'http://localhost:3000',
+      NODE_ENV: 'test',
+      STORE_API_KEY: 'STORE_API_KEY',
+      STORE_API: '/bowl/api',
+      STORE_STRATEGY: 'mock',
+      STORE_URL: 'http://localhost:4000',
+    };
+  });
+
+  afterAll(() => {
+    process.env = ENV;
+    global.fetch = FETCH;
+  });
+
+  test('should throw without provider', () => {
+    expect(() => {
+      renderHook(() => useApi());
+    }).toThrow('useLayout must be used within LayoutProvider');
+  });
+
+  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':
+          return useApiGet(mock.endpoint);
+        case 'POST':
+          return useApiPost(mock.endpoint, mock.payload);
+        case 'PATCH':
+          return useApiPatch(mock.endpoint, mock.payload);
+        case 'PUT':
+          return useApiPut(mock.endpoint, mock.payload);
+        case 'DELETE':
+          return useApiDelete(mock.endpoint);
+        default:
+          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 as ILayout}>
+          <LabelProvider>
+            <Wrapper />
+          </LabelProvider>
+        </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/client/useApi.ts

@@ -0,0 +1,59 @@
+import { ApiRequestOptions, localApiDelete, localApiFetch, localApiGet, localApiPatch, localApiPost, localApiPut } from '../lib/http';
+import { useHttpFetch } from './useHttp';
+import { useLayout } from './useLayout';
+
+export function useApiFetch<T = unknown>(pathname: string, options: ApiRequestOptions = {}) {
+  const layout = useLayout();
+  // const layout = { locale: '', market: '' };
+  return useHttpFetch<T>(pathname, options, localApiFetch, layout);
+}
+
+export function useApiGet<T = unknown>(pathname: string, options: ApiRequestOptions = {}) {
+  return useApiFetch<T>(pathname, { ...options, method: 'GET' });
+}
+
+export function useApiPost<T = unknown>(pathname: string, payload: unknown, options: ApiRequestOptions = {}) {
+  return useApiFetch<T>(pathname, { ...options, method: 'POST', body: payload ? JSON.stringify(payload) : undefined });
+}
+
+export function useApiPut<T = unknown>(pathname: string, payload: unknown, options: ApiRequestOptions = {}) {
+  return useApiFetch<T>(pathname, { ...options, method: 'PUT', body: payload ? JSON.stringify(payload) : undefined });
+}
+
+export function useApiPatch<T = unknown>(pathname: string, payload: unknown, options: ApiRequestOptions = {}) {
+  return useApiFetch<T>(pathname, { ...options, method: 'PATCH', body: payload ? JSON.stringify(payload) : undefined });
+}
+
+export function useApiDelete<T = unknown>(pathname: string, options: ApiRequestOptions = {}) {
+  return useApiFetch<T>(pathname, { ...options, method: 'DELETE' });
+}
+
+type Api = {
+  get: <T = unknown>(pathname: string, options?: ApiRequestOptions) => Promise<T>;
+  post: <T = unknown>(pathname: string, payload?: unknown, options?: ApiRequestOptions) => Promise<T>;
+  put: <T = unknown>(pathname: string, payload?: unknown, options?: ApiRequestOptions) => Promise<T>;
+  patch: <T = unknown>(pathname: string, payload?: unknown, options?: ApiRequestOptions) => Promise<T>;
+  delete: <T = unknown>(pathname: string, options?: ApiRequestOptions) => Promise<T>;
+};
+
+export function useApi(): Api {
+  const layout = useLayout();
+  // const layout = { locale: '', market: '' };
+  return {
+    get: async <T = unknown>(pathname: string, options: ApiRequestOptions = {}) => {
+      return localApiGet<T>(pathname, options, layout);
+    },
+    post: async <T = unknown>(pathname: string, payload?: unknown, options: ApiRequestOptions = {}) => {
+      return localApiPost<T>(pathname, payload, options, layout);
+    },
+    put: async <T = unknown>(pathname: string, payload?: unknown, options: ApiRequestOptions = {}) => {
+      return localApiPut<T>(pathname, payload, options, layout);
+    },
+    patch: async <T = unknown>(pathname: string, payload?: unknown, options: ApiRequestOptions = {}) => {
+      return localApiPatch<T>(pathname, payload, options, layout);
+    },
+    delete: async <T = unknown>(pathname: string, options: ApiRequestOptions = {}) => {
+      return localApiDelete<T>(pathname, options, layout);
+    },
+  };
+}

package/src/client/useCollectionApi.test.tsx

@@ -0,0 +1,201 @@
+// @vitest-environment jsdom
+
+import '@testing-library/jest-dom/vitest';
+import { cleanup, render, renderHook, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
+import { ILayout } from '@websolutespa/bom-core';
+import { afterAll, afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+import { getLocalApiUrl } from '../lib/http';
+import { LayoutDefaults } from '../lib/layout.defaults';
+import { LayoutProvider } from './layout';
+import { useApiFetch } from './useApi';
+import { useCollectionApi, useCollectionApiDelete, useCollectionApiGet, useCollectionApiPatch, useCollectionApiPost, useCollectionApiPut } from './useCollectionApi';
+
+const wrapper = (props: { children: React.ReactNode }) => (
+  <LayoutProvider layout={LayoutDefaults as ILayout}>{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 = `${getLocalApiUrl(endpoint)}?locale=en&market=ww`;
+  const payload = { data: 'data' };
+  const response = {
+    ...defaultResponse,
+    ...overrideResponse,
+    json: () => Promise.resolve(result),
+  } as Response;
+  (global.fetch as any) = vi.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('useCollectionApi', () => {
+  const ENV = process.env;
+  const FETCH = global.fetch;
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  beforeEach(() => {
+    vi.resetModules();
+    vi.resetAllMocks();
+    vi.spyOn(console, 'error').mockImplementation(() => { });
+    vi.spyOn(console, 'log').mockImplementation(() => { });
+    process.env = {
+      MIXER_SECRET: 'MIXER_SECRET_32_CHARS_LONG',
+      NEXT_PUBLIC_API: '/api',
+      NEXT_PUBLIC_MOCK_FALLBACK_URL: 'http://localhost:3000',
+      NEXT_PUBLIC_URL: 'http://localhost:3000',
+      NODE_ENV: 'test',
+      STORE_API_KEY: 'STORE_API_KEY',
+      STORE_API: '/bowl/api',
+      STORE_STRATEGY: 'mock',
+      STORE_URL: 'http://localhost:4000',
+    };
+  });
+
+  afterAll(() => {
+    process.env = ENV;
+    global.fetch = FETCH;
+  });
+
+  test('should throw without provider', () => {
+    expect(() => {
+      renderHook(() => useCollectionApi());
+    }).toThrow('useLayout must be used within LayoutProvider');
+  });
+
+  test('should not throw with provider', () => {
+    expect(() => {
+      renderHook(() => useCollectionApi(), { wrapper });
+    }).not.toThrow();
+  });
+
+  test('api.get should return ok', async () => {
+    const { result } = renderHook(() => useCollectionApi(), { 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(() => useCollectionApi(), { 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(() => useCollectionApi(), { 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(() => useCollectionApi(), { 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(() => useCollectionApi(), { 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('useCollectionApiGet expect result ok', TestMethod('GET'));
+
+  test('useCollectionApiPost expect result ok', TestMethod('POST'));
+
+  test('useCollectionApiPatch expect result ok', TestMethod('PATCH'));
+
+  test('useCollectionApiPut expect result ok', TestMethod('PUT'));
+
+  test('useCollectionApiDelete 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 useCollectionApiGet(mock.endpoint);
+        case 'POST':
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          return useCollectionApiPost(mock.endpoint, mock.payload);
+        case 'PATCH':
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          return useCollectionApiPatch(mock.endpoint, mock.payload);
+        case 'PUT':
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          return useCollectionApiPut(mock.endpoint, mock.payload);
+        case 'DELETE':
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          return useCollectionApiDelete(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 as ILayout}><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/client/useCollectionApi.ts

@@ -0,0 +1,66 @@
+import { QueryParams, qsSerialize } from '@websolutespa/bom-core';
+import { ApiRequestOptions } from '../lib/http';
+import { localCollectionDelete, localCollectionGet, localCollectionPatch, localCollectionPost, localCollectionPut } from './local.collection';
+import { useApiFetch } from './useApi';
+import { useLayout } from './useLayout';
+
+type CollectionApi = {
+  get: <T = unknown>(pathname: string, params?: QueryParams, options?: ApiRequestOptions) => Promise<T>;
+  post: <T = unknown>(pathname: string, payload?: unknown, options?: ApiRequestOptions) => Promise<T>;
+  put: <T = unknown>(pathname: string, payload?: unknown, options?: ApiRequestOptions) => Promise<T>;
+  patch: <T = unknown>(pathname: string, payload?: unknown, options?: ApiRequestOptions) => Promise<T>;
+  delete: <T = unknown>(pathname: string, options?: ApiRequestOptions) => Promise<T>;
+};
+
+export function useCollectionApi(): CollectionApi {
+  const layout = useLayout();
+  return {
+    get: async <T = unknown>(pathname: string, params: QueryParams = {}, options: ApiRequestOptions = {}) => {
+      params.locale = params.locale || layout.locale;
+      params.market = params.market || layout.market;
+      const qs = qsSerialize(params);
+      return localCollectionGet<T>(pathname + (qs ? '?' + qs : ''), options);
+    },
+    post: async <T = unknown>(pathname: string, payload?: unknown, options: ApiRequestOptions = {}) => {
+      return localCollectionPost<T>(pathname, payload, options, layout);
+    },
+    put: async <T = unknown>(pathname: string, payload?: unknown, options: ApiRequestOptions = {}) => {
+      return localCollectionPut<T>(pathname, payload, options, layout);
+    },
+    patch: async <T = unknown>(pathname: string, payload?: unknown, options: ApiRequestOptions = {}) => {
+      return localCollectionPatch<T>(pathname, payload, options, layout);
+    },
+    delete: async <T = unknown>(pathname: string, options: ApiRequestOptions = {}) => {
+      return localCollectionDelete<T>(pathname, options, layout);
+    },
+  };
+}
+
+/*
+export function useCollectionApiFetch<T = unknown>(pathname: string, options: ApiRequestOptions = {}) {
+  const layout = useLayout();
+  // const layout = { locale: '', market: '' };
+  return useHttpFetch<T>(pathname, options, localApiFetch, layout);
+}
+*/
+
+export function useCollectionApiGet<T = unknown>(pathname: string, params?: QueryParams, options: ApiRequestOptions = {}) {
+  const api = useApiFetch<T>(pathname, { ...options, method: 'GET' });
+  return api;
+}
+
+export function useCollectionApiPost<T = unknown>(pathname: string, payload: unknown, options: ApiRequestOptions = {}) {
+  return useApiFetch<T>(pathname, { ...options, method: 'POST', body: payload ? JSON.stringify(payload) : undefined });
+}
+
+export function useCollectionApiPut<T = unknown>(pathname: string, payload: unknown, options: ApiRequestOptions = {}) {
+  return useApiFetch<T>(pathname, { ...options, method: 'PUT', body: payload ? JSON.stringify(payload) : undefined });
+}
+
+export function useCollectionApiPatch<T = unknown>(pathname: string, payload: unknown, options: ApiRequestOptions = {}) {
+  return useApiFetch<T>(pathname, { ...options, method: 'PATCH', body: payload ? JSON.stringify(payload) : undefined });
+}
+
+export function useCollectionApiDelete<T = unknown>(pathname: string, options: ApiRequestOptions = {}) {
+  return useApiFetch<T>(pathname, { ...options, method: 'DELETE' });
+}

package/src/client/useExtra.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { useContext } from 'react';
+import { ExtraContext } from './extra';
+
+export const useExtra = () => {
+  const context = useContext(ExtraContext);
+  if (!context) {
+    throw new Error('useExtra must be used within ExtraProvider');
+  }
+  return context;
+};

package/src/client/useHttp.ts

@@ -0,0 +1,54 @@
+'use client';
+
+import { FetchError, FetchRequestOptions, FetchService, httpFetch } from '@websolutespa/bom-core';
+import { Dispatch, useEffect, useState } from 'react';
+
+export function useHttpFetch<T = unknown>(
+  pathname: string,
+  options: FetchRequestOptions = { method: 'GET' },
+  service: FetchService<T> = httpFetch,
+  serviceOptions?: unknown
+): [T | undefined, boolean, FetchError, Dispatch<FetchError>] {
+  const [response, setResponse] = useState<T>();
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<FetchError>(null);
+  useEffect(() => {
+    // const source = axios.CancelToken.source();
+    const fetchData = async () => {
+      loading ? null : setLoading(true);
+      error ? setError(null) : null;
+      try {
+        const response = await service(pathname, options, serviceOptions);
+        // console.log('useHttp.response', response);
+        setResponse(response);
+      } catch (error: FetchError) {
+        // console.error(error)
+        setError(error);
+      }
+      setLoading(false);
+    };
+    fetchData();
+    // return () => source.cancel();
+  }, [pathname, options.method, options.body]);
+  return [response, loading, error, setError];
+}
+
+export function useHttpGet<T = unknown>(pathname: string, options: FetchRequestOptions = {}) {
+  return useHttpFetch<T>(pathname, { ...options, method: 'GET' });
+}
+
+export function useHttpPost<T = unknown>(pathname: string, payload: unknown, options: FetchRequestOptions = {}) {
+  return useHttpFetch<T>(pathname, { ...options, method: 'POST', body: payload ? JSON.stringify(payload) : undefined });
+}
+
+export function useHttpPut<T = unknown>(pathname: string, payload: unknown, options: FetchRequestOptions = {}) {
+  return useHttpFetch<T>(pathname, { ...options, method: 'PUT', body: payload ? JSON.stringify(payload) : undefined });
+}
+
+export function useHttpPatch<T = unknown>(pathname: string, payload: unknown, options: FetchRequestOptions = {}) {
+  return useHttpFetch<T>(pathname, { ...options, method: 'PATCH', body: payload ? JSON.stringify(payload) : undefined });
+}
+
+export function useHttpDelete<T = unknown>(pathname: string, options: FetchRequestOptions = {}) {
+  return useHttpFetch<T>(pathname, { ...options, method: 'DELETE' });
+}

package/src/client/useLabel.test.tsx

@@ -0,0 +1,76 @@
+// @vitest-environment jsdom
+
+import { renderHook } from '@testing-library/react';
+import { spyOn } from '@vitest/spy';
+import { ILayout } from '@websolutespa/bom-core';
+import React from 'react';
+import { beforeEach, describe, expect, test } from 'vitest';
+import { interpolateText } from '../lib/label';
+import { LayoutDefaults } from '../lib/layout.defaults';
+import { LabelProvider } from './label';
+import { LayoutProvider } from './layout';
+import { useLabel } from './useLabel';
+
+const wrapper = (props: { children: React.ReactNode }) => (
+  <LayoutProvider layout={LayoutDefaults as ILayout}>
+    <LabelProvider>{props.children}</LabelProvider>
+  </LayoutProvider>
+);
+
+describe('useLabel', () => {
+  beforeEach(() => {
+    spyOn(console, 'error').mockImplementation(() => { });
+  });
+
+  test('should throw without provider', () => {
+    expect(() => {
+      renderHook(() => useLabel());
+    }).toThrow('useLabel must be used within LabelProvider');
+  });
+
+  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('interpolateText should format value params', () => {
+    const formatted = interpolateText('test @param', { param: 1 });
+    expect(formatted).toBe('test 1');
+  });
+
+  test('interpolateText should format value without params', () => {
+    const formatted = interpolateText('test @param', {});
+    expect(formatted).toBe('test @param');
+  });
+});

package/src/client/useLabel.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { useContext } from 'react';
+import { LabelContext } from './label';
+
+export const useLabel = () => {
+  const context = useContext(LabelContext);
+  if (!context) {
+    throw new Error('useLabel must be used within LabelProvider');
+  }
+  return context;
+};