@onewelcome/react-lib-components 1.5.0 → 1.7.0

package/dist/util/helper.d.ts

@@ -5,4 +5,9 @@ export declare const generateID: (length?: number, stringToWeaveIn?: string) =>
 export declare const filterProps: (props: any, regexPattern: RegExp, returnFiltered?: boolean) => KeyValuePair;
 export declare const debounce: (fn: (...args: unknown[]) => unknown, delay: number) => (...args: unknown[]) => void;
 export declare const throttle: (fn: (...args: unknown[]) => unknown, delay: number) => () => void;
+export declare const isEqual: (x: any, y: any) => boolean;
+export declare const areArraysDifferent: (arr1: Record<string, any>[], arr2: Record<string, any>[], key: string) => boolean;
+export declare const getValueByPath: (obj: {
+    [key: string]: any;
+}, path: string) => any;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",
@@ -22,6 +22,7 @@
     "analyze": "size-limit --why",
     "build": "dts build",
     "build-storybook": "build-storybook",
+    "chromatic": "chromatic --exit-zero-on-changes",
     "dev": "npm-run-all -p start test:watch storybook",
     "lint": "eslint '**/*.{ts,tsx}'",
     "prepare": "husky install && dts build",
@@ -52,38 +53,39 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.20.12",
+    "@babel/core": "^7.21.0",
     "@mdx-js/react": "^1.6.22",
     "@onewelcome/eslint-config-shared-codestyle": "^9.0.3",
-    "@size-limit/preset-small-lib": "^7.0.8",
-    "@storybook/addon-a11y": "^6.5.15",
-    "@storybook/addon-docs": "^6.5.15",
-    "@storybook/addon-essentials": "^6.5.15",
-    "@storybook/addon-links": "^6.5.15",
-    "@storybook/addons": "^6.5.15",
-    "@storybook/builder-webpack5": "^6.5.15",
-    "@storybook/manager-webpack5": "^6.5.15",
+    "@size-limit/preset-small-lib": "^8.2.4",
+    "@storybook/addon-a11y": "^6.5.16",
+    "@storybook/addon-docs": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/addons": "^6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.5.15",
-    "@storybook/theming": "^6.5.15",
-    "@testing-library/dom": "^8.19.1",
+    "@storybook/react": "^6.5.16",
+    "@storybook/theming": "^6.5.16",
+    "@testing-library/dom": "^8.20.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.5.0",
     "@tsconfig/create-react-app": "^1.0.3",
-    "@tsconfig/recommended": "^1.0.1",
+    "@tsconfig/recommended": "^1.0.2",
     "@types/color-convert": "^2.0.0",
     "@types/mdx": "^2.0.3",
     "@types/react": "^17.0.52",
     "@types/react-dom": "^17.0.18",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^5.48.1",
-    "@typescript-eslint/parser": "^5.48.1",
-    "babel-loader": "^9.1.0",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@typescript-eslint/parser": "^5.53.0",
+    "babel-loader": "^9.1.2",
+    "chromatic": "^6.17.0",
     "dts-cli": "^1.6.3",
-    "eslint": "^8.31.0",
+    "eslint": "^8.34.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-jest": "^27.2.1",
@@ -93,19 +95,20 @@
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
     "jest-junit": "^15.0.0",
-    "lint-staged": "^13.1.0",
+    "lint-staged": "^13.1.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.2",
+    "prettier": "^2.8.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^18.2.0",
     "react-router": "^6.6.2",
-    "react-router-dom": "^6.6.2",
+    "react-router-dom": "^6.8.1",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-styles": "^4.0.0",
-    "sass": "^1.57.1",
-    "size-limit": "^7.0.8",
-    "tslib": "^2.4.1",
-    "typescript": "^4.9.4"
+    "sass": "^1.58.3",
+    "size-limit": "^8.1.1",
+    "style-loader": "^3.3.1",
+    "tslib": "^2.5.0",
+    "typescript": "^4.9.5"
   }
 }

package/src/Button/BaseButton.module.scss

@@ -14,8 +14,8 @@
  *    limitations under the License.
  */
 
-@import "../mixins.module.scss";
+@use "../mixins.module.scss";
 
 .button {
-  @include buttonBase();
+  @include mixins.buttonBase();
 }

package/src/Button/Button.module.scss

@@ -14,19 +14,18 @@
  *    limitations under the License.
  */
 
-@import "../readyclasses.module.scss";
-@import "../mixins.module.scss";
+@use "../mixins.module.scss";
 
 .fill {
-  @include button("fill");
+  @include mixins.button("fill");
 }
 
 .outline {
-  @include button("outline");
+  @include mixins.button("outline");
 }
 
 .text {
-  @include button("text");
+  @include mixins.button("text");
 }
 
 .has-icon {

package/src/Button/Button.tsx

@@ -21,7 +21,6 @@ import classes from "./Button.module.scss";
 export interface Props extends BaseButtonProps {
   startIcon?: React.ReactNode | false;
   endIcon?: React.ReactNode | false;
-  children?: React.ReactNode;
   variant?: "text" | "fill" | "outline";
 }
 

package/src/Button/IconButton.module.scss

@@ -14,8 +14,7 @@
  *    limitations under the License.
  */
 
-@import "../readyclasses.module.scss";
-@import "../mixins.module.scss";
+@use "../mixins.module.scss";
 
 .icon-button {
   border: var(--button-border-width) var(--button-border-style) transparent;
@@ -57,14 +56,14 @@
   }
 
   &.fill {
-    @include button("fill", "icon");
+    @include mixins.button("fill", "icon");
   }
 
   &.text {
-    @include button("text", "icon");
+    @include mixins.button("text", "icon");
   }
 
   &.outline {
-    @include button("outline", "icon");
+    @include mixins.button("outline", "icon");
   }
 }

package/src/DataGrid/DataGrid.tsx

@@ -144,14 +144,15 @@ const DataGridInner = <T extends {}>(
             spacing={styleWithSpacing}
           />
           <DataGridBody
-            children={children}
             data={data}
             headers={internalHeaders}
             isLoading={isLoading}
             disableContextMenuColumn={disableContextMenuColumn}
             emptyLabel={emptyLabel}
             spacing={styleWithSpacing}
-          />
+          >
+            {children}
+          </DataGridBody>
         </table>
       </div>
       {paginationProps && !isLoading && (

package/src/DataGrid/DataGridActions/DataGridActions.tsx

@@ -52,6 +52,7 @@ const DataGridActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
     searchIconBtnProps = {},
     headers,
     onColumnToggled,
+    children,
     ...rest
   }: Props,
   ref
@@ -59,6 +60,9 @@ const DataGridActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
   const isHidden = !(enableAddBtn || enableColumnsBtn || enableSearchBtn);
   const [showColsPopover, setShowColsPopover] = useState(false);
   const showColumnBtn = useRef<HTMLButtonElement>(null);
+  const { children: addBtnChildren, ...restAddBtnProps } = addBtnProps;
+  const { children: columnsBtnChildren, ...restColumnsBtnProps } = columnsBtnProps;
+  const { children: searchBtnChildren, ...restSearchBtnProps } = searchBtnProps;
 
   return isHidden ? null : (
     <div {...rest} ref={ref} className={`${classes["actions"]} ${className ?? ""}`}>
@@ -70,9 +74,10 @@ const DataGridActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
             title="Add item"
             type="button"
             variant="outline"
-            children="Add item"
-            {...addBtnProps}
-          />
+            {...restAddBtnProps}
+          >
+            {addBtnChildren ?? "Add item"}
+          </Button>
         )}
       </div>
       <div className={classes["right-actions"]}>
@@ -82,12 +87,13 @@ const DataGridActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
               startIcon={<Icon icon={Icons.Change} />}
               title="Show/hide columns"
               variant="text"
-              children="Columns"
-              {...columnsBtnProps}
+              {...restColumnsBtnProps}
               className={`${classes["desktop"]} ${columnsBtnProps?.className ?? ""}`}
               ref={showColumnBtn}
               onClick={() => setShowColsPopover(true)}
-            />
+            >
+              {columnsBtnChildren ?? "Columns"}
+            </Button>
             <IconButton
               title="Show/hide columns"
               {...columnsBtnProps}
@@ -112,10 +118,11 @@ const DataGridActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
               startIcon={<Icon icon={Icons.TableSearch} />}
               title="Search"
               variant="text"
-              children="Search"
-              {...searchBtnProps}
+              {...restSearchBtnProps}
               className={`${classes["desktop"]} ${searchBtnProps?.className ?? ""}`}
-            />
+            >
+              {searchBtnChildren ?? "Search"}
+            </Button>
             <IconButton
               title="Search"
               {...searchIconBtnProps}

package/src/DataGrid/DataGridBody/DataGridCell.module.scss

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-@import "../../mixins.module.scss";
+@use "../../mixins.module.scss";
 
 .cell {
   min-height: 3.5rem;
@@ -29,7 +29,7 @@
   }
 
   .loading {
-    @include skeletonLoading();
+    @include mixins.skeletonLoading();
     border-radius: 0.5rem;
     height: 1.25rem;
     margin: 0.625rem 0;

package/src/DataGrid/DataGridHeader/DataGridHeader.test.tsx

@@ -21,8 +21,8 @@ import userEvent from "@testing-library/user-event";
 
 const defaultParams: Props = {
   headers: [
-    { name: "firstName", headline: "First name" },
-    { name: "lastName", headline: "Last name" }
+    { name: "firstName", headline: "First name", align: "center" },
+    { name: "lastName", headline: "Last name", align: "right" }
   ]
 };
 
@@ -36,7 +36,6 @@ const createDataGridHeader = (params?: (defaultParams: Props) => Props) => {
     container
   });
   const dataGridHeader = queries.getByTestId("dataGridHeader");
-
   return {
     ...queries,
     dataGridHeader
@@ -51,6 +50,12 @@ describe("DataGridHeader should render", () => {
     expect(getAllByRole("columnheader")).toHaveLength(2);
     expect(getByRole("cell")).toBeDefined(); //context-menu empty cell
 
+    const headerCells = dataGridHeader.querySelectorAll("th");
+
+    expect(headerCells).toHaveLength(2);
+    expect(headerCells[0]).toHaveStyle({ textAlign: "center" });
+    expect(headerCells[1]).toHaveStyle({ textAlign: "right" });
+
     expect(dataGridHeader.querySelectorAll("[data-icon]")).toHaveLength(0);
   });
 

package/src/DataGrid/DataGridHeader/DataGridHeader.tsx

@@ -77,7 +77,9 @@ const DataGridHeaderComponent: ForwardRefRenderFunction<HTMLTableSectionElement,
       return null;
     }
 
-    let headerStyle: React.CSSProperties = {};
+    let headerStyle: React.CSSProperties = {
+      textAlign: header.align || "left"
+    };
 
     if (index === 0) {
       headerStyle.paddingLeft = spacing?.paddingLeft;

package/src/DataGrid/datagrid.interfaces.ts

@@ -27,4 +27,5 @@ export interface HeaderCell {
   headline: string;
   disableSorting?: boolean;
   hidden?: boolean;
+  align?: "left" | "right" | "center";
 }

package/src/Form/FileUpload/FileItem/FileItem.modules.scss

@@ -0,0 +1,75 @@
+/*!
+ * 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 "../../../mixins.module.scss";
+
+.file-item-wrapper {
+  padding: 0.5rem 1.25rem;
+  border-radius: var(--input-border-radius);
+  background-color: var(--input-background-color);
+  @include transition(all, 0.2s, ease-in-out);
+
+  [class*="icon"] {
+    font-size: 1.25rem;
+  }
+
+  .progress-bar {
+    background-color: var(--light-pink);
+  }
+
+  span[class*="bar--"] {
+    border-radius: var(--input-border-radius);
+    height: 1rem;
+  }
+
+  .file-name {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    .friendly-name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .action-icon {
+    margin-left: auto;
+    color: var(--color-primary);
+    cursor: pointer;
+    padding-left: 1.25rem;
+  }
+
+  .file-icon {
+    margin-right: 0.5rem;
+  }
+
+  .file-subtitle,
+  .progress-bar {
+    display: block;
+    margin: 0.3125rem 1.75rem;
+    padding: 0;
+  }
+
+  .error,
+  .retry {
+    color: var(--error);
+  }
+
+  .readonly {
+    color: var(--greyed-out);
+  }
+}

package/src/Form/FileUpload/FileItem/FileItem.test.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import { FILE_ACTION, FileItem, Props } from "./FileItem";
+import { render } from "@testing-library/react";
+import user from "@testing-library/user-event";
+
+const defaultParams: Props = {
+  name: "Test.txt"
+};
+
+const createFileItem = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<FileItem {...parameters} />);
+  const component = queries.getByLabelText(`${parameters.name}-wrapper`);
+  const title = component.querySelector(".file-name");
+  const fileIcon = component.querySelector(".file-icon");
+  const actionIcon = component.querySelector(".action-icon");
+  const errorSubtitle = component.querySelector(".file-subtitle");
+  const progressBar = component.querySelector(".progress-bar");
+
+  return {
+    ...queries,
+    component,
+    title,
+    fileIcon,
+    actionIcon,
+    errorSubtitle,
+    progressBar
+  };
+};
+
+describe("component should render", () => {
+  it("renders without crashing", () => {
+    const { component } = createFileItem();
+
+    expect(component).toBeDefined();
+  });
+});
+
+describe("component should change display the correct style and elements according to the status", () => {
+  it("should show the correct details for completed", () => {
+    const { actionIcon, title } = createFileItem(defaultParams => ({
+      ...defaultParams,
+      status: "completed"
+    }));
+    expect(title).toHaveClass("completed");
+    expect(actionIcon).toHaveAttribute("title", FILE_ACTION.DELETE);
+  });
+
+  it("should show the correct details for uploading", () => {
+    const { actionIcon, title, progressBar } = createFileItem(defaultParams => ({
+      ...defaultParams,
+      status: "uploading"
+    }));
+    expect(title).toHaveClass("uploading");
+    expect(actionIcon).toHaveAttribute("title", FILE_ACTION.ABORT);
+    expect(progressBar).toBeDefined();
+  });
+
+  it("should show the correct details for readonly", () => {
+    const { actionIcon, title } = createFileItem(defaultParams => ({
+      ...defaultParams,
+      status: "readonly"
+    }));
+    expect(title).toHaveClass("readonly");
+    expect(actionIcon).toBeNull();
+  });
+
+  it("should show the correct details for error", () => {
+    const { actionIcon, title, errorSubtitle } = createFileItem(defaultParams => ({
+      ...defaultParams,
+      status: "error"
+    }));
+    expect(title).toHaveClass("error");
+    expect(actionIcon).toHaveAttribute("title", FILE_ACTION.REMOVE);
+    expect(errorSubtitle).toBeDefined();
+  });
+
+  it("should show the correct details for retry", () => {
+    const { actionIcon, title } = createFileItem(defaultParams => ({
+      ...defaultParams,
+      status: "retry"
+    }));
+    expect(title).toHaveClass("retry");
+    expect(actionIcon).toHaveAttribute("title", FILE_ACTION.RETRY);
+  });
+});
+
+describe("component should transmit the correct message upwards when a file action icon is clicked", () => {
+  it("should call retry action", () => {
+    const onRequestedFileAction = jest.fn();
+    const { actionIcon } = createFileItem(defaultParams => ({
+      ...defaultParams,
+      status: "retry",
+      onRequestedFileAction
+    }));
+
+    user.click(actionIcon as Element);
+    expect(onRequestedFileAction).toHaveBeenNthCalledWith(1, FILE_ACTION.RETRY, defaultParams.name);
+  });
+});

package/src/Form/FileUpload/FileItem/FileItem.tsx

@@ -0,0 +1,141 @@
+/*
+ * 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, { ComponentPropsWithRef, ForwardRefRenderFunction } from "react";
+import classes from "./FileItem.modules.scss";
+import { Typography } from "../../../Typography/Typography";
+import { Icon, Icons } from "../../../Icon/Icon";
+import { ProgressBar } from "../../../ProgressBar/ProgressBar";
+import { FileType } from "../FileUpload";
+
+export type UploadProgress = "uploading" | "completed" | "error" | "readonly" | "retry";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  name: string;
+  status?: UploadProgress;
+  progress?: number;
+  error?: string;
+  onRequestedFileAction?: (action: FILE_ACTION, name: FileType["name"]) => void;
+}
+interface FileItemIcons {
+  fileIcon: Icons;
+  actionIcon?: { type: Icons; action: FILE_ACTION };
+}
+
+export enum FILE_ACTION {
+  DELETE = "delete",
+  REMOVE = "remove",
+  ABORT = "abort",
+  RETRY = "retry"
+}
+
+const FileItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { name, status, error, progress, onRequestedFileAction }: Props,
+  ref
+) => {
+  const determineIcons = (status?: UploadProgress): FileItemIcons => {
+    switch (status) {
+      case "completed":
+        return {
+          fileIcon: Icons.FileOutline,
+          actionIcon: {
+            type: Icons.Trash,
+            action: FILE_ACTION.DELETE
+          }
+        };
+      case "error":
+        return {
+          fileIcon: Icons.InfoCircle,
+          actionIcon: {
+            type: Icons.Times,
+            action: FILE_ACTION.REMOVE
+          }
+        };
+      case "uploading":
+        return {
+          fileIcon: Icons.FileUpload,
+          actionIcon: {
+            type: Icons.Times,
+            action: FILE_ACTION.ABORT
+          }
+        };
+      case "retry":
+        return {
+          fileIcon: Icons.InfoCircle,
+          actionIcon: {
+            type: Icons.Refresh,
+            action: FILE_ACTION.RETRY
+          }
+        };
+      case "readonly":
+      default:
+        return { fileIcon: Icons.FileOutline };
+    }
+  };
+
+  const icons = determineIcons(status);
+
+  const getFriendlyNameAndExtension = (name: string) => {
+    const index = name.indexOf(".");
+    return { friendlyName: name.slice(0, index), extension: name.slice(index + 1) };
+  };
+
+  const { friendlyName, extension } = getFriendlyNameAndExtension(name);
+
+  return (
+    <div ref={ref} className={classes["file-item-wrapper"]} aria-label={`${name}-wrapper`}>
+      <Typography
+        variant={"body"}
+        title={name}
+        className={`${classes["file-name"]} ${status ? classes[status] : ""}`}
+      >
+        <Icon icon={icons.fileIcon} className={classes["file-icon"]} />
+        <span className={classes["friendly-name"]}>{friendlyName}</span>.<span>{extension}</span>
+        {icons.actionIcon && (
+          <Icon
+            title={icons.actionIcon.action}
+            icon={icons.actionIcon.type}
+            className={classes["action-icon"]}
+            onClick={() =>
+              icons.actionIcon &&
+              onRequestedFileAction &&
+              onRequestedFileAction(icons.actionIcon.action, name)
+            }
+          />
+        )}
+      </Typography>
+      {error && (
+        <Typography
+          variant={"sub-text"}
+          className={`${classes["file-subtitle"]} ${status ? classes[status] : ""}`}
+        >
+          {error}
+        </Typography>
+      )}
+      {status === "uploading" ? (
+        <ProgressBar
+          className={classes["progress-bar"]}
+          placeholderText={""}
+          completed={progress}
+        />
+      ) : (
+        ""
+      )}
+    </div>
+  );
+};
+
+export const FileItem = React.forwardRef(FileItemComponent);