Bal 3521 (WIP DO NOT MERGE)

packages/ui/package.json

@@ -73,6 +73,7 @@
     "react-json-view": "^1.21.3",
     "react-phone-input-2": "^2.15.1",
     "recharts": "^2.7.2",
+    "sonner": "^1.4.3",
     "string-ts": "^1.2.0",
     "tailwind-merge": "^1.10.0",
     "zod": "^3.23.4"

packages/ui/src/common/hooks/useHttp/index.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './useHttp';
+export * from './utils/format-headers';
+export * from './utils/request';

packages/ui/src/common/hooks/useHttp/types.ts

@@ -0,0 +1,6 @@
+export interface IHttpParams {
+  url: string;
+  resultPath: string;
+  headers?: Record<string, string>;
+  method?: 'POST' | 'PUT' | 'GET' | 'DELETE';
+}

packages/ui/src/common/hooks/useHttp/useHttp.ts

@@ -0,0 +1,34 @@
+import { AnyObject } from '@/common/types';
+import get from 'lodash/get';
+import { useCallback, useState } from 'react';
+import { IHttpParams } from './types';
+import { request } from './utils/request';
+
+export const useHttp = (params: IHttpParams, metadata: AnyObject) => {
+  const [responseError, setResponseError] = useState<Error | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const runRequest = useCallback(
+    async (requestPayload?: any) => {
+      setIsLoading(true);
+      setResponseError(null);
+
+      try {
+        const response = await request(params, metadata, requestPayload);
+
+        return params.resultPath ? get(response, params.resultPath) : response;
+      } catch (error) {
+        setResponseError(error as Error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [params, metadata],
+  );
+
+  return {
+    isLoading,
+    error: responseError,
+    run: runRequest,
+  };
+};

packages/ui/src/common/hooks/useHttp/useHttp.unit.test.ts

@@ -0,0 +1,110 @@
+import { renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useHttp } from './useHttp';
+import { request } from './utils/request';
+
+vi.mock('./utils/request');
+
+describe('useHttp', () => {
+  const mockParams = {
+    url: 'test-url',
+    resultPath: 'data.items',
+    method: 'GET' as const,
+    headers: {},
+  };
+
+  const mockMetadata = {
+    token: 'test-token',
+  };
+
+  const mockResponse = {
+    data: {
+      items: ['item1', 'item2'],
+    },
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should return initial state', () => {
+    const { result } = renderHook(() => useHttp(mockParams, mockMetadata));
+
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.error).toBeNull();
+    expect(typeof result.current.run).toBe('function');
+  });
+
+  it('should handle successful request', async () => {
+    vi.mocked(request).mockResolvedValueOnce(mockResponse);
+
+    const { result } = renderHook(() => useHttp(mockParams, mockMetadata));
+
+    const response = await result.current.run();
+
+    expect(request).toHaveBeenCalledWith(mockParams, mockMetadata, undefined);
+    expect(response).toEqual(['item1', 'item2']);
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.error).toBeNull();
+  });
+
+  it('should handle request with payload', async () => {
+    vi.mocked(request).mockResolvedValueOnce(mockResponse);
+    const payload = { test: 'payload' };
+
+    const { result } = renderHook(() => useHttp(mockParams, mockMetadata));
+
+    await result.current.run(payload);
+
+    expect(request).toHaveBeenCalledWith(mockParams, mockMetadata, payload);
+  });
+
+  it('should handle request without resultPath', async () => {
+    const paramsWithoutPath = {
+      url: 'test-url',
+      resultPath: '',
+      method: 'GET' as const,
+      headers: {},
+    };
+    vi.mocked(request).mockResolvedValueOnce(mockResponse);
+
+    const { result } = renderHook(() => useHttp(paramsWithoutPath, mockMetadata));
+
+    const response = await result.current.run();
+
+    expect(response).toEqual(mockResponse);
+  });
+
+  it('should handle error', async () => {
+    const mockError = new Error('Test error');
+    vi.mocked(request).mockRejectedValueOnce(mockError);
+
+    const { result, rerender } = renderHook(() => useHttp(mockParams, mockMetadata));
+
+    await result.current.run();
+
+    rerender();
+
+    expect(result.current.error).toBe(mockError);
+    expect(result.current.isLoading).toBe(false);
+  });
+
+  it('should set loading state during request', async () => {
+    vi.mocked(request).mockImplementationOnce(
+      () =>
+        new Promise(resolve => {
+          setTimeout(() => resolve(mockResponse), 100);
+        }),
+    );
+
+    const { result, rerender } = renderHook(() => useHttp(mockParams, mockMetadata));
+
+    const promise = result.current.run();
+    rerender();
+    expect(result.current.isLoading).toBe(true);
+
+    await promise;
+    rerender();
+    expect(result.current.isLoading).toBe(false);
+  });
+});

packages/ui/src/common/hooks/useHttp/utils/format-headers.ts

@@ -0,0 +1,15 @@
+import { formatString } from '@/components/organisms/Form/DynamicForm/utils/format-string';
+
+export const formatHeaders = (
+  headers: Record<string, string>,
+  metadata: Record<string, string> = {},
+) => {
+  const formattedHeaders: Record<string, string> = {};
+
+  Object.entries(headers).forEach(([key, value]) => {
+    const formattedValue = formatString(value, metadata);
+    formattedHeaders[key] = formattedValue;
+  });
+
+  return formattedHeaders;
+};

packages/ui/src/common/hooks/useHttp/utils/format-headers.unit.test.ts

@@ -0,0 +1,58 @@
+import { formatString } from '@/components/organisms/Form/DynamicForm/utils/format-string';
+import { describe, expect, it, vi } from 'vitest';
+import { formatHeaders } from './format-headers';
+
+vi.mock('@/components/organisms/Form/DynamicForm/utils/format-string', () => ({
+  formatString: vi.fn(),
+}));
+
+const mockedFormatString = vi.mocked(formatString);
+
+describe('formatHeaders', () => {
+  it('should format headers with metadata', () => {
+    const headers = {
+      Authorization: 'Bearer {token}',
+      'Content-Type': 'application/json',
+    };
+
+    const metadata = {
+      token: 'abc123',
+    };
+
+    mockedFormatString.mockReturnValueOnce('Bearer abc123').mockReturnValueOnce('application/json');
+
+    const result = formatHeaders(headers, metadata);
+
+    expect(result).toEqual({
+      Authorization: 'Bearer abc123',
+      'Content-Type': 'application/json',
+    });
+
+    expect(mockedFormatString).toHaveBeenCalledTimes(2);
+    expect(mockedFormatString).toHaveBeenCalledWith('Bearer {token}', metadata);
+    expect(mockedFormatString).toHaveBeenCalledWith('application/json', metadata);
+  });
+
+  it('should handle empty headers', () => {
+    const result = formatHeaders({});
+
+    expect(result).toEqual({});
+    expect(mockedFormatString).not.toHaveBeenCalled();
+  });
+
+  it('should use empty metadata object if not provided', () => {
+    const headers = {
+      'X-Custom': 'test',
+    };
+
+    mockedFormatString.mockReturnValueOnce('test');
+
+    const result = formatHeaders(headers);
+
+    expect(result).toEqual({
+      'X-Custom': 'test',
+    });
+
+    expect(mockedFormatString).toHaveBeenCalledWith('test', {});
+  });
+});

packages/ui/src/common/hooks/useHttp/utils/request.ts

@@ -0,0 +1,29 @@
+import { AnyObject } from '@/common/types';
+import { formatString } from '@/components/organisms/Form/DynamicForm/utils/format-string';
+import axios from 'axios';
+import { IHttpParams } from '../types';
+import { formatHeaders } from './format-headers';
+
+export type TReuqestParams = Omit<IHttpParams, 'resultPath'>;
+
+export const request = async (request: TReuqestParams, metadata: AnyObject = {}, data?: any) => {
+  const { url, headers = {}, method } = request;
+
+  const formattedUrl = formatString(url, metadata);
+  const formattedHeaders = formatHeaders(headers, metadata);
+
+  try {
+    const response = await axios({
+      url: formattedUrl,
+      method,
+      headers: formattedHeaders,
+      data,
+    });
+
+    return response.data;
+  } catch (error) {
+    console.error('Failed to perform request.', error);
+
+    throw error;
+  }
+};

packages/ui/src/common/hooks/useHttp/utils/request.unit.test.ts

@@ -0,0 +1,92 @@
+import { formatString } from '@/components/organisms/Form/DynamicForm/utils/format-string';
+import axios from 'axios';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { formatHeaders } from './format-headers';
+import { request } from './request';
+
+vi.mock('axios');
+vi.mock('@/components/organisms/Form/DynamicForm/utils/format-string');
+vi.mock('./format-headers');
+
+describe('request', () => {
+  const mockAxios = vi.mocked(axios);
+  const mockFormatString = vi.mocked(formatString);
+  const mockFormatHeaders = vi.mocked(formatHeaders);
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should make a request with formatted url and headers', async () => {
+    const requestParams = {
+      url: 'http://api.example.com/{path}',
+      method: 'GET',
+      headers: {
+        Authorization: 'Bearer {token}',
+      },
+    } as const;
+    const metadata = {
+      path: 'test',
+      token: '12345',
+    };
+    const mockResponse = { data: { result: 'success' } };
+
+    mockFormatString.mockReturnValue('http://api.example.com/test');
+    mockFormatHeaders.mockReturnValue({ Authorization: 'Bearer 12345' });
+    mockAxios.mockResolvedValue(mockResponse);
+
+    const result = await request(requestParams, metadata);
+
+    expect(mockFormatString).toHaveBeenCalledWith('http://api.example.com/{path}', metadata);
+    expect(mockFormatHeaders).toHaveBeenCalledWith({ Authorization: 'Bearer {token}' }, metadata);
+    expect(mockAxios).toHaveBeenCalledWith({
+      url: 'http://api.example.com/test',
+      method: 'GET',
+      headers: { Authorization: 'Bearer 12345' },
+      data: undefined,
+    });
+    expect(result).toEqual({ result: 'success' });
+  });
+
+  it('should make a request with data when provided', async () => {
+    const requestParams = {
+      url: 'http://api.example.com/test',
+      method: 'POST',
+      headers: {},
+    } as const;
+    const data = { foo: 'bar' };
+    const mockResponse = { data: { result: 'success' } };
+
+    mockFormatString.mockReturnValue('http://api.example.com/test');
+    mockFormatHeaders.mockReturnValue({});
+    mockAxios.mockResolvedValue(mockResponse);
+
+    const result = await request(requestParams, {}, data);
+
+    expect(mockAxios).toHaveBeenCalledWith({
+      url: 'http://api.example.com/test',
+      method: 'POST',
+      headers: {},
+      data: { foo: 'bar' },
+    });
+    expect(result).toEqual({ result: 'success' });
+  });
+
+  it('should throw and log error when request fails', async () => {
+    const requestParams = {
+      url: 'http://api.example.com/test',
+      method: 'GET',
+      headers: {},
+    } as const;
+    const error = new Error('Request failed');
+
+    mockFormatString.mockReturnValue('http://api.example.com/test');
+    mockFormatHeaders.mockReturnValue({});
+    mockAxios.mockRejectedValue(error);
+
+    const consoleSpy = vi.spyOn(console, 'error');
+
+    await expect(request(requestParams, {})).rejects.toThrow('Request failed');
+    expect(consoleSpy).toHaveBeenCalledWith('Failed to perform request.', error);
+  });
+});

packages/ui/src/components/organisms/Form/DynamicForm/_stories/FileUploadShowcase/FileUploadShowcase.tsx

@@ -15,6 +15,7 @@ const schema: Array<IFormElement<any, any>> = [
       uploadSettings: {
         url: 'http://localhost:3000/upload',
         resultPath: 'filename',
+        method: 'POST',
       },
     },
   },
@@ -28,6 +29,7 @@ const schema: Array<IFormElement<any, any>> = [
       uploadSettings: {
         url: 'http://localhost:3000/upload-protected',
         resultPath: 'filename',
+        method: 'POST',
         headers: {
           Authorization: '{token}',
         },
@@ -45,6 +47,7 @@ const schema: Array<IFormElement<any, any>> = [
       uploadSettings: {
         url: 'http://localhost:3000/upload',
         resultPath: 'filename',
+        method: 'POST',
       },
       template: {
         id: 'document-1',
@@ -63,6 +66,7 @@ const schema: Array<IFormElement<any, any>> = [
       uploadSettings: {
         url: 'http://localhost:3000/upload',
         resultPath: 'filename',
+        method: 'POST',
       },
       template: {
         id: 'document-2',