@onewelcome/react-lib-components 1.6.0 → 1.8.0

package/src/hooks/useUploadFile.test.ts

@@ -0,0 +1,211 @@
+import { useUploadFile } from "./useUploadFile";
+import { renderHook } from "@testing-library/react-hooks";
+import { waitFor } from "@testing-library/react";
+import { FileType } from "../Form/FileUpload/FileUpload";
+
+const DONE = 4;
+
+const mockXhrRequest = (status: number, readyState?: number, response?: Object) => {
+  return {
+    open: jest.fn(),
+    send: jest.fn(),
+    addEventListener: jest.fn(),
+    onprogress: jest.fn(),
+    responseText: response,
+    onreadystatechange: jest.fn(),
+    getResponseHeader: jest.fn(),
+    upload: {
+      addEventListener: jest.fn()
+    },
+    DONE,
+    setRequestHeader: jest.fn(),
+    readyState: readyState || 4,
+    status
+  };
+};
+
+type mockRequestParams = Parameters<typeof mockXhrRequest>;
+
+const progressData = {
+  loaded: 12,
+  total: 100
+};
+
+const requestInfo = { url: "https://www.test.io", withCredentials: true };
+
+const file = {
+  name: "test.txt",
+  data: new File([""], "test.txt"),
+  size: 5,
+  type: ""
+};
+
+const setupXhrEnvironment = (mockParams: mockRequestParams) => {
+  const mock = mockXhrRequest(...mockParams);
+  const mockClass = () => mock;
+
+  // @ts-ignore
+  window.XMLHttpRequest = jest.fn().mockImplementation(mockClass);
+
+  return mock;
+};
+
+const expectReadyStateInfo = async (
+  files: FileType[],
+  mock: ReturnType<typeof mockXhrRequest>,
+  response: { code: number; body: { message: string } }
+) => {
+  const { result } = renderHook(() =>
+    useUploadFile(files, { ...requestInfo, responseErrorPath: "body.message" })
+  );
+
+  expect(mock.addEventListener).toHaveBeenCalled();
+  const [[, readystatechange]] = mock.addEventListener.mock.calls;
+  await waitFor(() => readystatechange());
+  const currentFile = result.current.updatedFiles[0];
+  expect(currentFile.status).toEqual("error");
+  expect(currentFile.error).toEqual(response.body.message);
+};
+
+describe("it should perform upload", () => {
+  it("should register the correct progress", async () => {
+    const mock = setupXhrEnvironment([200]);
+    const { result } = renderHook(() => useUploadFile([file], requestInfo));
+    expect(result.current).toBeDefined();
+    expect(mock.upload.addEventListener).toHaveBeenCalled();
+    const [[, progress]] = mock.upload.addEventListener.mock.calls;
+    await waitFor(() => progress(progressData));
+
+    const targetFile = result.current.updatedFiles[0];
+    expect(targetFile.name).toEqual(file.name);
+    expect(targetFile.progress).toEqual(12);
+  });
+
+  it("should contain a file with status of retry", async () => {
+    const mock = setupXhrEnvironment([0, DONE]);
+    const files2 = [
+      {
+        name: "test2.txt",
+        data: new File([""], "test2.txt"),
+        size: 5,
+        type: ""
+      }
+    ];
+    const { result } = renderHook(() => useUploadFile(files2, requestInfo));
+    expect(result.current).toBeDefined();
+    expect(mock.addEventListener).toHaveBeenCalled();
+    const [[, readystatechange]] = mock.addEventListener.mock.calls;
+    await waitFor(() => readystatechange());
+    expect(result.current.updatedFiles[0].status).toEqual("retry");
+  });
+
+  it("should contain a file with status of error", async () => {
+    const response = { code: 404, body: { message: "Error test" } };
+    const mock = setupXhrEnvironment([404, DONE, response]);
+    const files3 = [
+      {
+        name: "test3.txt",
+        data: new File([""], "test3.txt"),
+        size: 5,
+        type: ""
+      }
+    ];
+    await expectReadyStateInfo(files3, mock, response);
+  });
+
+  it("should contain a file with status of server error", async () => {
+    const response = { code: 500, body: { message: "Error test" } };
+    const mock = setupXhrEnvironment([500, DONE, response]);
+    const files6 = [
+      {
+        name: "test6.txt",
+        data: new File([""], "test3.txt"),
+        size: 5,
+        type: ""
+      }
+    ];
+    await expectReadyStateInfo(files6, mock, response);
+  });
+
+  it("should contain a file with status of success", async () => {
+    const mock = setupXhrEnvironment([200, DONE]);
+    const files3 = [
+      {
+        name: "test3.txt",
+        data: new File([""], "test3.txt"),
+        size: 5,
+        type: ""
+      }
+    ];
+    const { result } = renderHook(() => useUploadFile(files3, requestInfo));
+    expect(result.current).toBeDefined();
+    expect(mock.addEventListener).toHaveBeenCalled();
+    const [[, readystatechange]] = mock.addEventListener.mock.calls;
+    await waitFor(() => readystatechange());
+    const currentFile = result.current.updatedFiles[0];
+    expect(currentFile.status).toEqual("completed");
+  });
+});
+
+describe("should return data according to the parameters", () => {
+  it("should call custom callbacks", async () => {
+    const onComplete = jest.fn();
+    const onProgress = jest.fn();
+    const mock = setupXhrEnvironment([200, DONE]);
+    const files4 = [
+      {
+        name: "test4.txt",
+        data: new File([""], "test3.txt"),
+        size: 5,
+        type: ""
+      }
+    ];
+    renderHook(() => useUploadFile(files4, requestInfo, { onProgress, onComplete }));
+
+    const [[, progress]] = mock.upload.addEventListener.mock.calls;
+    await waitFor(() => progress(progressData));
+
+    const [[, readystatechange]] = mock.addEventListener.mock.calls;
+    await waitFor(() => readystatechange());
+
+    expect(mock.addEventListener).toHaveBeenCalled();
+    expect(onComplete).toHaveBeenCalled();
+    expect(onComplete).toHaveBeenCalled();
+  });
+
+  it("should add the correct error message", async () => {
+    const mock = setupXhrEnvironment([0, DONE]);
+    const files5 = [
+      {
+        name: "test5.txt",
+        data: new File([""], "test5.txt"),
+        size: 5,
+        type: ""
+      }
+    ];
+    const error = "Network error";
+    const { result } = renderHook(() =>
+      useUploadFile(files5, { ...requestInfo, networkErrorText: error })
+    );
+    const [[, readystatechange]] = mock.addEventListener.mock.calls;
+    await waitFor(() => readystatechange());
+
+    expect(mock.addEventListener).toHaveBeenCalled();
+    const file = result.current.updatedFiles[0];
+    expect(file.error).toEqual(error);
+  });
+});
+
+describe("useFileUpload hook should not fire when url and array of files is not present", () => {
+  it("should return an empty array if url is empty", () => {
+    const { result } = renderHook(() => useUploadFile([], { url: "https://yoohoo.co" }));
+
+    expect(result.current.uploadingFiles.length).toBe(0);
+  });
+
+  it("should return an empty array if url is empty", () => {
+    const { result } = renderHook(() => useUploadFile([file], { url: "" }));
+
+    expect(result.current.uploadingFiles.length).toBe(0);
+  });
+});

package/src/hooks/useUploadFile.tsx

@@ -0,0 +1,136 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import { FileType } from "../Form/FileUpload/FileUpload";
+import { useEffect, useState } from "react";
+import { getValueByPath } from "../util/helper";
+
+export interface UploadResponseType {
+  fileList: FileType[];
+  status: XMLHttpRequest["status"];
+}
+export interface UseUploadFileCallback {
+  onComplete?: (response: UploadResponseType) => void;
+  onProgress?: Function;
+}
+
+export interface UploadFileRequestParams {
+  url: string;
+  headers?: Headers;
+  responseErrorPath?: string;
+  networkErrorText?: string;
+  withCredentials?: boolean;
+}
+
+export const useUploadFile = (
+  files: FileType[],
+  request: UploadFileRequestParams,
+  callbacks?: UseUploadFileCallback
+) => {
+  const { url, headers, withCredentials, networkErrorText, responseErrorPath } = request;
+
+  const { onComplete, onProgress } = callbacks || {};
+
+  const [uploadingFiles, setUploadingFiles] = useState<FileType[]>([]);
+  const [updatedFiles, setUpdatedFiles] = useState<FileType[]>([...files]);
+
+  const getUpdatedList = (
+    fileName: string,
+    fileStatus: FileType["status"],
+    progress?: number,
+    error?: string
+  ) => {
+    return files.map(file => {
+      if (file.name === fileName) {
+        file.progress = progress;
+        file.error = error;
+        file.status = fileStatus;
+      }
+      return { ...file };
+    });
+  };
+
+  const recordProgress = (e: ProgressEvent<XMLHttpRequestEventTarget>, fileName: string) => {
+    const progress = (e.loaded / e.total) * 100;
+    const updatedData = getUpdatedList(fileName, "uploading", progress);
+    setUpdatedFiles(updatedData);
+    onProgress && onProgress(fileName, progress);
+  };
+
+  const getFileStatus = (
+    requestStatus: XMLHttpRequest["status"],
+    responseText: XMLHttpRequest["responseText"]
+  ) => {
+    let fileStatus: FileType["status"] = undefined;
+    let error = "";
+    if (requestStatus >= 200 && requestStatus < 400) {
+      fileStatus = "completed";
+    } else if (requestStatus === 0) {
+      fileStatus = "retry";
+      error =
+        networkErrorText || "Network error. Check internet connection and retry uploading the file";
+    } else if (requestStatus >= 400 && requestStatus < 500) {
+      const response = responseText && JSON.parse(JSON.stringify(responseText));
+      fileStatus = "error";
+      error = responseErrorPath ? getValueByPath(response, responseErrorPath) : "Bad request";
+    } else if (requestStatus >= 500) {
+      const response = responseText && JSON.parse(JSON.stringify(responseText));
+      fileStatus = "error";
+      error = responseErrorPath ? getValueByPath(response, responseErrorPath) : "Server Error";
+    }
+    return { fileStatus, error };
+  };
+
+  const handleOnComplete = (xhr: XMLHttpRequest, fileName: string) => {
+    const { status, readyState, responseText } = xhr;
+    if (readyState === xhr.DONE) {
+      const { fileStatus, error } = getFileStatus(status, responseText);
+      const updatedList = getUpdatedList(fileName, fileStatus, undefined, error);
+      setUpdatedFiles(updatedList);
+      const response = { fileList: updatedList, status };
+      setUploadingFiles(prevState => prevState.filter(selected => selected.name === fileName));
+      onComplete && onComplete(response);
+    }
+  };
+
+  const uploadFile = (file: FileType) => {
+    const xhr = new XMLHttpRequest();
+    xhr.upload.addEventListener("progress", e => recordProgress(e, file.name));
+    xhr.addEventListener("readystatechange", () => handleOnComplete(xhr, file.name));
+    headers && headers.forEach((value, key) => xhr.setRequestHeader(key, value));
+    withCredentials && (xhr.withCredentials = true);
+    xhr.open("POST", url, true);
+    const formData = new FormData();
+    formData.append("file", file.data as File);
+    formData.append("name", file.name);
+    xhr.send(formData);
+  };
+
+  useEffect(() => {
+    if (!url || !files.length) {
+      return;
+    }
+
+    files.forEach(file => {
+      if (!file.status && !uploadingFiles.find(selected => selected.name === file.name)) {
+        setUploadingFiles(prevState => [...prevState, file]);
+        uploadFile(file);
+      }
+    });
+  }, [url, files]);
+
+  return { updatedFiles, setUpdatedFiles, uploadingFiles };
+};

package/src/mixins.module.scss

@@ -30,10 +30,10 @@
         color: var(--button-fill-text-color);
       }
     }
-    font-weight: bold;
+    font-weight: 500;
   } @else if $variant == "outline" {
     background-color: var(--white);
-    font-weight: bold;
+    font-weight: 500;
   }
 
   &.primary:not(#{$disabledSelector}) {
@@ -156,17 +156,26 @@
   }
 }
 
-@mixin outline {
+@mixin outline(
+  $color: var(--light-grey-border),
+  $style: var(--input-border-style),
+  $width: var(--input-border-width),
+  $borderRadius: var(--input-border-radius),
+  $backgroundColor: ""
+) {
   .outline {
     pointer-events: none;
     position: absolute;
     margin: 0;
     padding: 0;
     inset: 0;
-    border-color: var(--light-grey-border);
-    border-style: var(--input-border-style);
-    border-width: var(--input-border-width);
-    border-radius: var(--input-border-radius);
+    border-color: $color;
+    border-style: $style;
+    border-width: $width;
+    border-radius: $borderRadius;
+    @if ($backgroundColor != "") {
+      background-color: $backgroundColor;
+    }
     @include transition(all, 0.2s, ease-in-out);
   }
 }
@@ -249,3 +258,13 @@
     transition-duration: 0.1ms;
   }
 }
+
+@mixin width-size($size) {
+  .w-#{$size} {
+    width: $size * 1%;
+  }
+}
+
+@for $i from 1 through 100 {
+  @include width-size($i + 5);
+}

package/src/util/helper.test.tsx

@@ -16,7 +16,16 @@
 
 import React, { useCallback, useEffect, useState } from "react";
 import { fireEvent, waitFor } from "@testing-library/dom";
-import { generateID, filterProps, debounce, throttle } from "./helper";
+import {
+  debounce,
+  filterProps,
+  generateID,
+  remToPx,
+  throttle,
+  areArraysDifferent,
+  getValueByPath,
+  isEqual
+} from "./helper";
 import { render } from "@testing-library/react";
 
 /* Generate an ID of 20 characters with a string woven in */
@@ -76,11 +85,11 @@ describe("debounce function", () => {
 
     window.addEventListener("resize", debounce(debouncedFunction, 200));
 
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
 
     await waitFor(() => expect(debouncedFunction).toHaveBeenCalledTimes(1));
   });
@@ -150,18 +159,181 @@ describe("throttling works", () => {
 
     render(<ExampleComponent throttledFunction={exampleFunction} />);
 
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
 
     expect(exampleFunction).not.toHaveBeenCalledTimes(1);
     expect(exampleFunction).not.toHaveBeenCalledTimes(10);
   });
 });
+
+describe("areArraysDifferent works as expected", () => {
+  it("should return true for different arrays", () => {
+    const arr1 = [
+      {
+        name: "test1"
+      },
+      {
+        name: "test2"
+      }
+    ];
+
+    const arr2 = [
+      {
+        name: "test1"
+      },
+      {
+        name: "test3"
+      }
+    ];
+
+    const result = areArraysDifferent(arr1, arr2, "name");
+    expect(result).toBe(true);
+  });
+
+  it("should return false for arrays with same values", () => {
+    const arr1 = [
+      {
+        name: "test1"
+      }
+    ];
+
+    const arr2 = [
+      {
+        name: "test1"
+      }
+    ];
+
+    const result = areArraysDifferent(arr1, arr2, "name");
+    expect(result).toBe(false);
+  });
+
+  it("should return false for falsy values", () => {
+    const arr1 = [
+      {
+        name: "test1"
+      }
+    ];
+
+    const arr2 = [
+      {
+        label: "test1"
+      }
+    ];
+
+    const result = areArraysDifferent(arr1, arr2, "name");
+    expect(result).toBe(true);
+  });
+});
+
+describe("return correct values from getValueByPath", () => {
+  it("should return the correct value form a multi layered object", () => {
+    const val = "test";
+    const obj = {
+      firstNode: {
+        secondNode: {
+          thirdNode: {
+            val
+          }
+        }
+      }
+    };
+
+    const result = getValueByPath(obj, "firstNode.secondNode.thirdNode.val");
+    expect(result).toBe(val);
+  });
+});
+
+describe("verifies if isEqual returns the correct value", () => {
+  it("should return true for equal values objects", () => {
+    const obj1 = {
+      name1: "test1",
+      name2: {
+        val: "test2"
+      }
+    };
+
+    const obj2 = {
+      name1: "test1",
+      name2: {
+        val: "test2"
+      }
+    };
+
+    const res = isEqual(obj1, obj2);
+    expect(res).toBe(true);
+  });
+
+  it("should return false for unequal values objects", () => {
+    const obj1 = {
+      name1: "test1",
+      name2: {
+        val: "test2"
+      }
+    };
+
+    const obj2 = {
+      name1: "test1"
+    };
+
+    const res = isEqual(obj1, obj2);
+    expect(res).toBe(false);
+  });
+
+  it("should return false for falsy values", () => {
+    const obj1 = {
+      name1: "test1",
+      name2: {
+        val: "test2"
+      }
+    };
+    const obj2 = null;
+
+    const res = isEqual(obj1, obj2);
+    expect(res).toBe(false);
+  });
+
+  it("should return false for different types", () => {
+    const obj1 = [
+      {
+        name1: "test1",
+        name2: {
+          val: "test2"
+        }
+      }
+    ];
+    const obj2 = {
+      name1: "test1",
+      name2: {
+        val: "test2"
+      }
+    };
+
+    const res = isEqual(obj1, obj2);
+    expect(res).toBe(false);
+  });
+});
+
+describe("pixel to rem function works", () => {
+  document.documentElement.style.setProperty("font-size", "16px");
+
+  it.each([
+    [1, 16],
+    [1.25, 20],
+    [1.5, 24],
+    [1.75, 28],
+    [2, 32]
+  ])("%p rem equals %p px when font-size is 16px", async (rem: number, px: number) => {
+    const result = remToPx(rem);
+
+    expect(result).toBe(px);
+  });
+});

package/src/util/helper.tsx

@@ -143,3 +143,41 @@ export const throttle = (fn: (...args: unknown[]) => unknown, delay: number) =>
     }
   };
 };
+
+export const isEqual = (x: any, y: any): boolean => {
+  const typesCoincide = x && y && typeof x === "object" && typeof y === "object";
+  return typesCoincide
+    ? Object.keys(x).length === Object.keys(y).length &&
+        Object.keys(x).every(key => isEqual(x[key], y[key]))
+    : x === y;
+};
+
+export const areArraysDifferent = (
+  arr1: Record<string, any>[],
+  arr2: Record<string, any>[],
+  key: string
+) => {
+  if (arr1.length !== arr2.length) {
+    return true;
+  } else {
+    const firstFilteredArray = arr1.filter(arr1Item =>
+      arr2.some((arr2Item: { [x: string]: any }) => !isEqual(arr1Item[key], arr2Item[key]))
+    );
+    const secondFilteredArray = arr2.filter(arr2Item =>
+      arr1.some((arr1Item: { [x: string]: any }) => !isEqual(arr1Item[key], arr2Item[key]))
+    );
+
+    return !!firstFilteredArray.length || !!secondFilteredArray.length;
+  }
+};
+
+export const getValueByPath = (obj: { [key: string]: any }, path: string): any => {
+  return path.split(".").reduce((res, prop) => {
+    return res[prop];
+  }, obj);
+};
+
+/** Source: https://stackoverflow.com/a/42769683/5084110 */
+export const remToPx = (rem: number): number => {
+  return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+};

package/src/variables.scss

@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+$form-element-horizontal-padding-mobile: 1rem;
+$form-element-horizontal-padding-desktop: 1.25rem;