@onewelcome/react-lib-components 1.6.0 → 1.7.0

package/src/ProgressBar/ProgressBar.test.tsx

@@ -56,3 +56,24 @@ describe("ref should work", () => {
     render(<ExampleComponent propagateRef={refCheck} />, { container });
   });
 });
+
+describe("ProgressBar should change styles depending on props", () => {
+  it("should show a progress when 'completed' prop is provided", () => {
+    const { ProgressBarComponent } = createProgressBar(defaultParams => ({
+      ...defaultParams,
+      completed: 40
+    }));
+
+    const bar = ProgressBarComponent.querySelector(".bar");
+    expect(bar).toHaveClass("w-40");
+  });
+
+  it("should show a loading effect when 'completed' prop is not provided", () => {
+    const { ProgressBarComponent } = createProgressBar(defaultParams => ({
+      ...defaultParams
+    }));
+
+    const bar = ProgressBarComponent.querySelector(".bar");
+    expect(bar).toHaveClass("loading-state");
+  });
+});

package/src/ProgressBar/ProgressBar.tsx

@@ -20,16 +20,21 @@ import classes from "./ProgressBar.module.scss";
 
 export interface Props extends Omit<ComponentPropsWithRef<"span">, "children"> {
   placeholderText: string;
+  completed?: number;
 }
 
 const ProgressBarComponent: ForwardRefRenderFunction<HTMLSpanElement, Props> = (
-  { placeholderText, ...rest }: Props,
+  { placeholderText, completed, ...rest }: Props,
   ref
 ) => {
   return (
     <span {...rest} ref={ref} role="progressbar">
       <span className={classes["progress-bar"]}>
-        <span className={classes["bar"]} />
+        <span
+          className={`${classes["bar"]} ${
+            completed ? classes[`w-${5 * Math.round(completed / 5)}`] : classes["loading-state"]
+          }`}
+        />
       </span>
       <Typography className={classes["placeholder"]} spacing={{ marginBottom: 0 }} variant="body">
         {placeholderText}

package/src/Typography/Typography.module.scss

@@ -37,11 +37,11 @@
   }
 
   &h3 {
-    @include fontProperties(var(--font-family), var(--font-size-h3), 400, 1.16666);
+    @include fontProperties(var(--font-family), var(--font-size-h3), 500, 1.16666);
   }
 
   &h4 {
-    @include fontProperties(var(--font-family), var(--font-size-h4), 700, 1.2);
+    @include fontProperties(var(--font-family), var(--font-size-h4), 500, 1.2);
   }
 
   &body {

package/src/_BaseStyling_/BaseStyling.tsx

@@ -26,6 +26,8 @@ interface CSSProperties {
   colorPrimary?: string;
   colorSecondary?: string;
   colorTertiary?: string;
+  lightPink?: string;
+  vividViolet?: string;
   defaultLineHeight?: string;
   buttonBorderRadius?: string;
   buttonBorderWidth?: string;
@@ -39,6 +41,7 @@ interface CSSProperties {
   inputBorderWidthFocus?: string;
   inputBorderStyle?: string;
   inputBackgroundColor?: string;
+  dragBorderStyle?: string;
   modalShadowColor?: string;
   modalBackgroundColor?: string;
   modalHeaderBackgroundColor?: string;
@@ -91,6 +94,8 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     colorPrimary: "#9e006b",
     colorSecondary: "#003b5e",
     colorTertiary: "#ff1e4e",
+    lightPink: "#9E006B1A",
+    vividViolet: "#9E006B",
     defaultLineHeight: "26px",
     buttonBorderRadius: "20px",
     buttonBorderWidth: "2px",
@@ -134,15 +139,16 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     warning: "#ff6105",
     light: "#FFF",
     grey: "#c3c3c7",
-    fontFamily: "'Red Hat Display', sans-serif",
-    fontFamilyCode: "'Red Hat Mono', monospace",
+    fontFamily: "Roboto, sans-serif",
+    fontFamilyCode: "'Roboto Mono', monospace",
     fontSize: "1rem",
     fontSizeH1: "2.5rem",
     fontSizeH2: "1.625rem",
     fontSizeH3: "1.5rem",
     fontSizeH4: "1.25rem",
     fontSizeSub: ".75rem",
-    fontSizeCode: "1rem"
+    fontSizeCode: "1rem",
+    dragBorderStyle: "dashed"
   };
 
   /** We need a loading state, because otherwise you see the colors flash from the default to the possible overridden ones. */

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

@@ -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,15 @@
 
 import React, { useCallback, useEffect, useState } from "react";
 import { fireEvent, waitFor } from "@testing-library/dom";
-import { generateID, filterProps, debounce, throttle } from "./helper";
+import {
+  generateID,
+  filterProps,
+  debounce,
+  throttle,
+  areArraysDifferent,
+  getValueByPath,
+  isEqual
+} from "./helper";
 import { render } from "@testing-library/react";
 
 /* Generate an ID of 20 characters with a string woven in */
@@ -165,3 +173,150 @@ describe("throttling works", () => {
     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);
+  });
+});