@onewelcome/react-lib-components 1.8.3 → 1.9.0

package/dist/util/helper.d.ts

@@ -12,4 +12,5 @@ export declare const getValueByPath: (obj: {
 }, path: string) => any;
 /** Source: https://stackoverflow.com/a/42769683/5084110 */
 export declare const remToPx: (rem: number) => number;
+export declare const isJsonString: (str: any) => boolean;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "1.8.3",
+  "version": "1.9.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",
@@ -53,7 +53,7 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.21.0",
+    "@babel/core": "^7.21.3",
     "@mdx-js/react": "^1.6.22",
     "@onewelcome/eslint-config-shared-codestyle": "^9.0.3",
     "@size-limit/preset-small-lib": "^8.2.4",
@@ -80,13 +80,13 @@
     "@types/react-dom": "^17.0.18",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^5.53.0",
-    "@typescript-eslint/parser": "^5.53.0",
+    "@typescript-eslint/eslint-plugin": "^5.56.0",
+    "@typescript-eslint/parser": "^5.56.0",
     "babel-loader": "^9.1.2",
-    "chromatic": "^6.17.1",
+    "chromatic": "^6.17.2",
     "dts-cli": "^1.6.3",
-    "eslint": "^8.34.0",
-    "eslint-config-prettier": "^8.6.0",
+    "eslint": "^8.36.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-license-header": "^0.6.0",
@@ -95,19 +95,19 @@
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
     "jest-junit": "^15.0.0",
-    "lint-staged": "^13.1.2",
+    "lint-staged": "^13.2.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.4",
+    "prettier": "^2.8.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^18.2.0",
-    "react-router": "^6.6.2",
-    "react-router-dom": "^6.8.2",
+    "react-router": "^6.9.0",
+    "react-router-dom": "^6.9.0",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-styles": "^4.0.0",
-    "sass": "^1.58.3",
-    "size-limit": "^8.1.1",
-    "style-loader": "^3.3.1",
+    "sass": "^1.60.0",
+    "size-limit": "^8.2.4",
+    "style-loader": "^3.3.2",
     "tslib": "^2.5.0",
     "typescript": "^4.9.5"
   }

package/src/Button/BaseButton.module.scss

@@ -18,4 +18,28 @@
 
 .button {
   @include mixins.buttonBase();
+  position: relative;
+
+  .content-hidden {
+    visibility: hidden;
+    display: flex;
+  }
+}
+
+.spinner {
+  position: absolute;
+  top: calc(50% - 0.75rem);
+  left: calc(50% - 0.75rem);
+  transform: translate(-50%, -50%);
+  animation: spin 1s infinite linear;
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 }

package/src/Button/BaseButton.test.tsx

@@ -75,6 +75,18 @@ describe("Properties of the button", () => {
     expect(onClickHandler).toHaveBeenCalledTimes(0);
   });
 
+  it("when loading onClick function should not have been called", async () => {
+    const onClickHandler = jest.fn();
+    const { baseButton } = createBaseButton(defaultParams => ({
+      ...defaultParams,
+      loading: true,
+      onClick: onClickHandler
+    }));
+
+    await userEvent.click(baseButton);
+    expect(onClickHandler).toHaveBeenCalledTimes(0);
+  });
+
   it('should have the class "TESTING"', () => {
     const { baseButton } = createBaseButton(defaultParams => ({
       ...defaultParams,

package/src/Button/BaseButton.tsx

@@ -14,21 +14,23 @@
  *    limitations under the License.
  */
 
-import React, { ForwardRefRenderFunction, ComponentPropsWithRef } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, Fragment } from "react";
 import classes from "./BaseButton.module.scss";
+import { Spinner } from "./Spinner";
 
 export interface Props extends ComponentPropsWithRef<"button"> {
   type?: "submit" | "button" | "reset";
   disabled?: boolean;
+  loading?: boolean;
   color?: "primary" | "secondary" | "tertiary" | "default";
 }
 
 const BaseButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
-  { children, type = "button", className, ...rest },
+  { children, type = "button", className, loading, disabled, ...rest },
   ref
 ) => {
   const validTypes = ["submit", "button", "reset"];
-
+  const isDisabled = disabled || loading;
   if (!validTypes.includes(type))
     throw new Error(
       `You have entered an invalid button type. Expected 'submit', 'button' or 'reset' got ${type}`
@@ -37,11 +39,21 @@ const BaseButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> =
   return (
     <button
       {...rest}
+      disabled={isDisabled}
       ref={ref}
       type={type}
-      className={`${classes.button} ${className ? className : ""}`}
+      className={`${classes.button} ${loading ? classes.loading : ""} ${
+        className ? className : ""
+      }`}
     >
-      {children}
+      {loading ? (
+        <Fragment>
+          <div className={classes["content-hidden"]}>{children}</div>
+          <Spinner className={classes["spinner"]} />
+        </Fragment>
+      ) : (
+        children
+      )}
     </button>
   );
 };

package/src/Button/Spinner.tsx

@@ -0,0 +1,33 @@
+/*
+ * 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 React from "react";
+
+export const Spinner: React.FC<React.SVGProps<SVGSVGElement>> = props => (
+  <svg
+    {...props}
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M24 12C24 13.8937 23.5518 15.7606 22.6921 17.4479C21.8323 19.1352 20.5855 20.5951 19.0534 21.7082C17.5214 22.8213 15.7476 23.556 13.8772 23.8523C12.0068 24.1485 10.0928 23.9979 8.2918 23.4127C6.49076 22.8275 4.85378 21.8243 3.51472 20.4853C2.17565 19.1462 1.17251 17.5092 0.587322 15.7082C0.00212849 13.9072 -0.148504 11.9932 0.14774 10.1228C0.443984 8.25238 1.17869 6.47863 2.2918 4.94658L3.91307 6.1245C2.98585 7.4007 2.37384 8.87823 2.12707 10.4363C1.8803 11.9943 2.00577 13.5887 2.49324 15.0889C2.9807 16.5892 3.81632 17.9528 4.93176 19.0682C6.0472 20.1837 7.4108 21.0193 8.91107 21.5068C10.4113 21.9942 12.0057 22.1197 13.5637 21.8729C15.1218 21.6262 16.5993 21.0141 17.8755 20.0869C19.1517 19.1597 20.1903 17.9436 20.9065 16.5381C21.6227 15.1326 21.996 13.5775 21.996 12H24Z"
+      fill="#5D607E"
+    />
+  </svg>
+);

package/src/DataGrid/DataGridBody/__snapshots__/DataGridBody.test.tsx.snap

@@ -45,7 +45,7 @@ Array [
             aria-controls="consent_menu_Paweł-menu"
             aria-expanded="false"
             aria-haspopup="true"
-            class="button icon-button text default button-m"
+            class="button  icon-button text default button-m"
             id="consent_menu_Paweł"
             tabindex="0"
             type="button"
@@ -108,7 +108,7 @@ Array [
             aria-controls="consent_menu_Michał-menu"
             aria-expanded="false"
             aria-haspopup="true"
-            class="button icon-button text default button-m"
+            class="button  icon-button text default button-m"
             id="consent_menu_Michał"
             tabindex="0"
             type="button"
@@ -171,7 +171,7 @@ Array [
             aria-controls="consent_menu_Daniel-menu"
             aria-expanded="false"
             aria-haspopup="true"
-            class="button icon-button text default button-m"
+            class="button  icon-button text default button-m"
             id="consent_menu_Daniel"
             tabindex="0"
             type="button"
@@ -234,7 +234,7 @@ Array [
             aria-controls="consent_menu_Jasha-menu"
             aria-expanded="false"
             aria-haspopup="true"
-            class="button icon-button text default button-m"
+            class="button  icon-button text default button-m"
             id="consent_menu_Jasha"
             tabindex="0"
             type="button"

package/src/Form/FileUpload/FileUpload.module.scss

@@ -39,8 +39,7 @@
   }
   &.error {
     span[data-icon-status],
-    .file-upload-title,
-    .file-selector-sub-text {
+    .file-upload-title {
       color: var(--error);
     }
   }
@@ -63,6 +62,14 @@
   }
 }
 
+.file-selector-sub-text {
+  color: var(--greyed-out);
+  padding: 0 1.25rem;
+  &.error {
+    color: var(--error);
+  }
+}
+
 .file-select {
   display: flex;
   align-items: center;

package/src/Form/FileUpload/FileUpload.tsx

@@ -136,7 +136,7 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
 
     let err = false;
     if (maxFileSize && file.size && file.size >= maxFileSize) {
-      const mb = (file.size / (1024 * 1024)).toFixed(2);
+      const mb = (maxFileSize / (1024 * 1024)).toFixed(2);
       result.error =
         exceedingMaxSizeErrorText ||
         `The maximum allowed file size is ${mb}MB. Upload a smaller file.`;
@@ -188,40 +188,42 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
 
   return (
     <div className={classes["file-upload-wrapper"]} {...wrapperProps}>
-      <div
-        className={dropzoneClassNames.join(" ")}
-        onDragOver={e => !disabled && handleOnDragOver(e)}
-        onDragLeave={e => !disabled && handleOnDragLeave(e)}
-        onDrop={e => !disabled && handleOnDrop(e)}
-      >
-        <Typography variant="body-bold" className={classes["file-upload-title"]} ref={labelRef}>
-          {title}
-        </Typography>
-        <div className={classes["file-select"]}>
-          <Icon className={"drop-file-icon"} icon={Icons.FileUpload} />
-          <Typography variant="body" className={"drag-and-drop-text"}>
-            {dragAndDropText}
+      <div className={classes["dropzone-wrapper"]}>
+        <div
+          className={dropzoneClassNames.join(" ")}
+          onDragOver={e => !disabled && handleOnDragOver(e)}
+          onDragLeave={e => !disabled && handleOnDragLeave(e)}
+          onDrop={e => !disabled && handleOnDrop(e)}
+        >
+          <Typography variant="body-bold" className={classes["file-upload-title"]} ref={labelRef}>
+            {title}
           </Typography>
-          <div className={classes["file-upload-btn"]}>
-            <Button variant="outline" disabled={disabled}>
-              {selectButtonText}
-              <input
-                className={classes["upload-input"]}
-                {...rest}
-                ref={ref}
-                aria-labelledby={labeledBy}
-                type="file"
-                name={name}
-                {...(multiple && { multiple: true })}
-                disabled={disabled}
-                accept={accept}
-                onChange={onInputChange}
-                spellCheck={rest.spellCheck || false}
-              />
-            </Button>
+          <div className={classes["file-select"]}>
+            <Icon className={"drop-file-icon"} icon={Icons.FileUpload} />
+            <Typography variant="body" className={"drag-and-drop-text"}>
+              {dragAndDropText}
+            </Typography>
+            <div className={classes["file-upload-btn"]}>
+              <Button variant="outline" disabled={disabled}>
+                {selectButtonText}
+                <input
+                  className={classes["upload-input"]}
+                  {...rest}
+                  ref={ref}
+                  aria-labelledby={labeledBy}
+                  type="file"
+                  name={name}
+                  {...(multiple && { multiple: true })}
+                  disabled={disabled}
+                  accept={accept}
+                  onChange={onInputChange}
+                  spellCheck={rest.spellCheck || false}
+                />
+              </Button>
+            </div>
+            {!disabled && icon}
+            <span className={classes["outline"]}></span>
           </div>
-          {!disabled && icon}
-          <span className={classes["outline"]}></span>
         </div>
         {subText && (
           <Typography variant={"sub-text"} className={subTextClass.join(" ")}>

package/src/Form/Wrapper/InputWrapper/InputWrapper.module.scss

@@ -42,6 +42,7 @@ input {
   [data-prefix],
   [data-suffix] {
     transform: translateY(-0.125rem);
+    font-family: var(--font-family);
   }
 
   [data-prefix] + input {

package/src/Notifications/BaseModal/BaseModalActions/BaseModalActions.module.scss

@@ -19,7 +19,7 @@
   display: flex;
   justify-content: flex-end;
 
-  & * + * {
+  & > * {
     margin-left: 2rem;
   }
 }

package/src/_BaseStyling_/BaseStyling.tsx

@@ -19,7 +19,7 @@
  * and make sure to add it to the shouldBeColorPicker array!
  */
 
-import React, { Fragment, HTMLAttributes, ReactChild, useEffect, useState } from "react";
+import React, { HTMLAttributes, ReactChild, useEffect, useRef, useState } from "react";
 
 interface CSSProperties {
   colorFocus?: string;
@@ -193,23 +193,31 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
 
   /** We need a loading state, because otherwise you see the colors flash from the default to the possible overridden ones. */
   const [isLoading, setIsLoading] = useState(true);
+  const baseStylingWrapper = useRef(null);
 
   const setCSSProperties = (CSSPropertiesObject: CSSProperties) => {
     for (const [key, value] of Object.entries(CSSPropertiesObject)) {
       const formattedPropertyName = key.replace(/([A-Z])/g, val => `-${val.toLowerCase()}`);
-      document.documentElement.style.setProperty(`--${formattedPropertyName}`, value);
+      (baseStylingWrapper.current! as HTMLElement).style.setProperty(
+        `--${formattedPropertyName}`,
+        value
+      );
     }
   };
 
   useEffect(() => {
-    if (Object.keys(properties).length !== 0) {
+    if (Object.keys(properties).length !== 0 && baseStylingWrapper.current) {
       const mergedState = { ...defaultProperties, ...properties };
       setCSSProperties(mergedState);
-    } else {
+    } else if (baseStylingWrapper.current) {
       setCSSProperties(defaultProperties);
     }
     setIsLoading(false);
-  }, [properties]);
+  }, [properties, baseStylingWrapper.current]);
 
-  return !isLoading ? <Fragment>{children}</Fragment> : null;
+  return (
+    <div className="basestyling-wrapper" ref={baseStylingWrapper}>
+      {!isLoading ? children : null}
+    </div>
+  );
 };

package/src/hooks/useUploadFile.test.ts

@@ -101,7 +101,7 @@ describe("it should perform upload", () => {
 
   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 mock = setupXhrEnvironment([404, DONE, JSON.stringify(response)]);
     const files3 = [
       {
         name: "test3.txt",
@@ -115,7 +115,7 @@ describe("it should perform upload", () => {
 
   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 mock = setupXhrEnvironment([500, DONE, JSON.stringify(response)]);
     const files6 = [
       {
         name: "test6.txt",

package/src/hooks/useUploadFile.tsx

@@ -16,7 +16,7 @@
 
 import { FileType } from "../Form/FileUpload/FileUpload";
 import { useEffect, useState } from "react";
-import { getValueByPath } from "../util/helper";
+import { getValueByPath, isJsonString } from "../util/helper";
 
 export interface UploadResponseType {
   fileList: FileType[];
@@ -76,6 +76,7 @@ export const useUploadFile = (
   ) => {
     let fileStatus: FileType["status"] = undefined;
     let error = "";
+    const response = responseText && isJsonString(responseText) && JSON.parse(responseText);
     if (requestStatus >= 200 && requestStatus < 400) {
       fileStatus = "completed";
     } else if (requestStatus === 0) {
@@ -83,13 +84,15 @@ export const useUploadFile = (
       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";
+      error =
+        responseErrorPath && response ? 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";
+      error =
+        responseErrorPath && response
+          ? getValueByPath(response, responseErrorPath)
+          : "Server Error";
     }
     return { fileStatus, error };
   };

package/src/util/helper.test.tsx

@@ -24,7 +24,8 @@ import {
   throttle,
   areArraysDifferent,
   getValueByPath,
-  isEqual
+  isEqual,
+  isJsonString
 } from "./helper";
 import { render } from "@testing-library/react";
 
@@ -337,3 +338,17 @@ describe("pixel to rem function works", () => {
     expect(result).toBe(px);
   });
 });
+
+describe("isJsonString should work", () => {
+  it("should return true when parameter is a valid JSON string", () => {
+    const param = JSON.stringify({ test: 1 });
+
+    expect(isJsonString(param)).toEqual(true);
+  });
+
+  it("should return false when parameter is a valid JSON string", () => {
+    const param = { test: 2 };
+
+    expect(isJsonString(param)).toEqual(false);
+  });
+});

package/src/util/helper.tsx

@@ -181,3 +181,12 @@ export const getValueByPath = (obj: { [key: string]: any }, path: string): any =
 export const remToPx = (rem: number): number => {
   return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
 };
+
+export const isJsonString = (str: any) => {
+  try {
+    JSON.parse(str);
+  } catch (e) {
+    return false;
+  }
+  return true;
+};