@luscii-healthtech/web-ui 2.2.0 → 2.4.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.2.0",
+  "version": "2.4.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -22,17 +22,13 @@
     "build-storybook": "build-storybook",
     "chromatic": "chromatic --exit-zero-on-changes",
     "build-tailwind": "NODE_ENV=production yarn run tailwindcss build tailwind.css -o ./dist/web-ui-tailwind.css",
-    "test-copy-build": "yarn build && cp -a ./dist/. ../cVitals-Web/node_modules/@luscii-healthtech/web-ui/dist"
+    "test-copy-build": "yarn build && cp -a ./dist/. ../cVitals-Web/node_modules/@luscii-healthtech/web-ui/dist",
+    "prepare": "husky install"
   },
   "peerDependencies": {
     "react": ">=16",
     "react-tooltip": "^4.2.21"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsdx lint"
-    }
-  },
   "prettier": {
     "printWidth": 80,
     "semi": true,
@@ -78,11 +74,12 @@
     "css-loader": "^0.28.11",
     "eslint": "^8.18.0",
     "eslint-plugin-chai-friendly": "^0.7.2",
-    "husky": "^8.0.1",
+    "husky": "^8.0.0",
     "postcss": "^8.4.14",
     "postcss-loader": "4.2",
     "postcss-url": "^10.1.3",
     "prettier": "^2.7.1",
+    "pretty-quick": "^3.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",

package/src/components/Icons/CheckIcon.tsx

@@ -8,6 +8,7 @@ export const CheckIcon = (props: IconProps): JSX.Element => {
       className={props.className}
       onClick={props.onClick}
       role={props.onClick ? "button" : undefined}
+      data-test-id={props["data-test-id"]}
       width="24"
       height="24"
       viewBox="0 0 24 24"

package/src/components/Icons/CrossIcon.tsx

@@ -8,6 +8,7 @@ export const CrossIcon = (props: IconProps): JSX.Element => {
       className={props.className}
       onClick={props.onClick}
       role={props.onClick ? "button" : undefined}
+      data-test-id={props["data-test-id"]}
       width="24"
       height="24"
       viewBox="0 0 24 24"

package/src/components/Icons/WarningIcon.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { IconProps } from "./types/IconProps.type";
+
+export const WarningIcon: React.VoidFunctionComponent<IconProps> = (props) => {
+  return (
+    <svg
+      className={props.className}
+      onClick={props.onClick}
+      role={props.onClick ? "button" : undefined}
+      data-test-id={props["data-test-id"]}
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 11C9.45 11 9 10.55 9 10V6C9 5.45 9.45 5 10 5C10.55 5 11 5.45 11 6V10C11 10.55 10.55 11 10 11ZM11 15H9V13H11V15Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/types/IconProps.type.ts

@@ -1,4 +1,5 @@
 export interface IconProps {
   className?: string;
   onClick?: (event: React.MouseEvent<SVGSVGElement> | undefined) => void;
+  "data-test-id"?: string;
 }

package/src/components/List/List.tsx

@@ -12,6 +12,7 @@ import {
   OnAssetLoadErrorPayload,
   Dragula,
 } from "./List.types";
+import { ListSkeleton } from "./ListSkeleton";
 
 export { ListProps, ListItemProps, OnAssetLoadErrorPayload };
 
@@ -23,6 +24,7 @@ export const List = ({
   onAssetLoadError,
   onDragEnd,
   emptyStateMessage,
+  isLoading,
 }: ListProps): JSX.Element => {
   const listRef = useRef<HTMLUListElement | null>(null);
   const dragulaRef = useRef<Dragula | null>(null);
@@ -43,17 +45,15 @@ export const List = ({
     const draggedItemId = element.dataset["id"];
 
     if (listRef.current && draggedItemId) {
-      const itemIdsWithOldOrder = items.map(item => item.itemId.toString());
+      const itemIdsWithOldOrder = items.map((item) => item.itemId.toString());
       const itemIdsWithNewOrder = Array.from(listRef.current.children)
-        .map(child => (child as HTMLElement).dataset["id"])
+        .map((child) => (child as HTMLElement).dataset["id"])
         .filter((itemId): itemId is string => !!itemId);
 
-      const oldIndexOfDraggedItemId = itemIdsWithOldOrder.indexOf(
-        draggedItemId
-      );
-      const newIndexOfDraggedItemId = itemIdsWithNewOrder.indexOf(
-        draggedItemId
-      );
+      const oldIndexOfDraggedItemId =
+        itemIdsWithOldOrder.indexOf(draggedItemId);
+      const newIndexOfDraggedItemId =
+        itemIdsWithNewOrder.indexOf(draggedItemId);
 
       if (oldIndexOfDraggedItemId !== newIndexOfDraggedItemId) {
         onDragEnd?.(draggedItemId, newIndexOfDraggedItemId);
@@ -72,6 +72,10 @@ export const List = ({
 
   const roundTop = !hasHeader || (hasHeader && headerTransparent);
 
+  if (isLoading) {
+    return <ListSkeleton items={items.length} />;
+  }
+
   return (
     <div data-test-id="list-component">
       {(title || headerButton) && (
@@ -103,7 +107,7 @@ export const List = ({
       )}
 
       <ul ref={listRef}>
-        {items.map(item => (
+        {items.map((item) => (
           <ListItem
             {...item}
             roundTop={roundTop}

package/src/components/List/List.types.ts

@@ -37,6 +37,7 @@ export type ListProps = {
   onAssetLoadError?: (payload: OnAssetLoadErrorPayload) => void;
   onDragEnd?: (itemId: string | number, newIndex: number) => void;
   emptyStateMessage?: string;
+  isLoading?: boolean;
 };
 
 export interface Dragula {

package/src/components/List/ListItemSkeleton.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+export const ListItemSkeleton = (): JSX.Element => {
+  return (
+    <div className="flex flex-row items-center p-4">
+      <div
+        className="skeleton-box is-circle mr-2"
+        style={{ width: `${32}px`, height: `${32}px` }}
+      />
+      <div className="flex flex-col">
+        <div
+          className="skeleton-box mb-1"
+          style={{ width: `${160}px`, height: `${14}px` }}
+        />
+        <div
+          className="skeleton-box"
+          style={{ width: `${110}px`, height: `${14}px` }}
+        />
+      </div>
+      <div
+        className="skeleton-box is-button ml-auto rounded-full"
+        style={{ width: `${24}px`, height: `${24}px` }}
+      />
+    </div>
+  );
+};

package/src/components/List/ListSkeleton.scss

@@ -0,0 +1,5 @@
+@import "../../styles/skeleton";
+
+.list-skeleton {
+  @include skeleton();
+}

package/src/components/List/ListSkeleton.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+import "./ListSkeleton.scss";
+import { ListItemSkeleton } from "./ListItemSkeleton";
+
+type ListSkeletonProps = {
+  items: number;
+};
+
+export const ListSkeleton = ({ items }: ListSkeletonProps): JSX.Element => {
+  const skeletonItems = Array.from({ length: items || 5 }, (_, i) => {
+    return <ListItemSkeleton key={i} />;
+  });
+
+  return (
+    <div className="flex flex-col divide-y divide-slate-200 bg-white border-slate-50 border rounded-lg shadow list-skeleton">
+      <div className="flex flex-row items-center px-4 py-2">
+        <div
+          className="skeleton-box"
+          style={{ width: `${160}px`, height: `${14}px` }}
+        />
+        <div
+          className="skeleton-box is-button ml-auto"
+          style={{ width: `${110}px`, height: `${44}px` }}
+        />
+      </div>
+      {skeletonItems}
+    </div>
+  );
+};

package/src/components/Toaster/Toaster.scss

@@ -0,0 +1,53 @@
+#application-toaster {
+  position: fixed;
+  left: 50%;
+  transform: translate(-50%, 150%);
+  bottom: 15px;
+
+  // https://easings.net/#easeInOutBack
+  transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+
+  &.shelved {
+    transform: translate(-50%, 150%);
+  }
+
+  &.expanded {
+    transform: translate(-50%, 0);
+  }
+
+  &.type-success {
+    [data-test-id="toaster-title"] {
+      @apply text-green-700;
+    }
+
+    .failure-icon {
+      @apply hidden;
+    }
+
+    [data-test-id="toaster-progress-bar-container"] {
+      @apply bg-green-50;
+
+      [data-test-id="toaster-progress-bar"] {
+        @apply bg-green-400;
+      }
+    }
+  }
+
+  &.type-failure {
+    [data-test-id="toaster-title"] {
+      @apply text-red-700;
+    }
+
+    .success-icon {
+      @apply hidden;
+    }
+
+    [data-test-id="toaster-progress-bar-container"] {
+      @apply bg-red-50;
+
+      [data-test-id="toaster-progress-bar"] {
+        @apply bg-red-400;
+      }
+    }
+  }
+}

package/src/components/Toaster/Toaster.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import classNames from "classnames";
+
+import { Text } from "../Text/Text";
+import { CheckIcon } from "../Icons/CheckIcon";
+import { CrossIcon } from "../Icons/CrossIcon";
+import { WarningIcon } from "../Icons/WarningIcon";
+
+import "./Toaster.scss";
+
+export interface ToasterProps {
+  type: "success" | "failure";
+  message: string;
+  title: string;
+  isVisible?: boolean;
+  /** if you need to reposition the toaster for whatever reason you can use these props */
+  styleOverwrite?: Pick<
+    React.CSSProperties,
+    "top" | "bottom" | "left" | "right"
+  >;
+}
+
+export const TOASTER_TYPE_OPTIONS = {
+  SUCCESS: "success",
+  FAILURE: "failure",
+} as const;
+export type ToasterType =
+  typeof TOASTER_TYPE_OPTIONS[keyof typeof TOASTER_TYPE_OPTIONS];
+
+const Toaster: React.VoidFunctionComponent<ToasterProps> = ({
+  message = "",
+  title = "",
+  type = TOASTER_TYPE_OPTIONS.SUCCESS,
+  isVisible,
+  styleOverwrite,
+}) => {
+  const isSuccess = type === TOASTER_TYPE_OPTIONS.SUCCESS;
+  const isFailure = type === TOASTER_TYPE_OPTIONS.FAILURE;
+
+  return (
+    <div
+      style={styleOverwrite}
+      id="application-toaster"
+      data-test-id={`toaster-panel-${type}`}
+      className={classNames(
+        "bg-white cursor-pointer",
+        "rounded-md shadow-md",
+        "min-h-13 max-h-19 w-104 transition-transform",
+
+        {
+          shelved: !isVisible,
+          expanded: isVisible,
+          "type-success": isSuccess,
+          "type-failure": isFailure,
+        }
+      )}
+    >
+      <div className="relative p-4">
+        <div className="flex flex-row">
+          <div
+            data-test-id="success-toaster-icon"
+            className={classNames("success-icon text-green-700", {
+              hidden: isFailure,
+            })}
+          >
+            <CheckIcon />
+          </div>
+          <div
+            data-test-id="failure-toaster-icon"
+            className={classNames("failure-icon text-red-700", {
+              hidden: isSuccess,
+            })}
+          >
+            <WarningIcon />
+          </div>
+          <div className="ml-3">
+            <Text type="strong" data-test-id="toaster-title" text={title} />
+            <Text data-test-id="toaster-message" text={message} />
+          </div>
+          <CrossIcon
+            data-test-id="toaster-close-button"
+            className="ml-auto cursor-pointer text-slate-500"
+          />
+        </div>
+      </div>
+
+      <div
+        data-test-id="toaster-progress-bar-container"
+        className={classNames("h-1 absolute bottom-0 w-full rounded-b-md")}
+      >
+        <div
+          data-test-id="toaster-progress-bar"
+          className={classNames("h-full")}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Toaster;

package/src/components/Toaster/toast-elements-getter.ts

@@ -0,0 +1,72 @@
+interface GetToasterElementsParams {
+  timeoutId: NodeJS.Timeout;
+  progressBarAnimationFrameHandler: number;
+}
+
+interface GetToasterElementsReturn {
+  toasterElementMessage: HTMLElement;
+  toasterProgressBar: HTMLElement;
+  toasterElementTitle: HTMLElement;
+  toasterElementSuccessIcon: HTMLElement;
+  toasterElementFailureIcon: HTMLElement;
+  toasterElementContainer: HTMLElement;
+  toasterCloseButton: HTMLElement;
+}
+
+/**
+ *
+ * @param params.timeoutId - the timeoutId (that makes the toaster vanish), in case of a shortcut
+ * @param params.progressBarAnimationFrameHandler - animation frame id to be canceled in case of a shortcut
+ * @returns a collection of html elements to be manipulated by the animation
+ */
+export const getToasterElements = (
+  params: GetToasterElementsParams
+): GetToasterElementsReturn => {
+  const { timeoutId, progressBarAnimationFrameHandler } = params;
+  const toasterElementContainer = document.querySelector<HTMLElement>(
+    "#application-toaster"
+  );
+
+  if (!toasterElementContainer) {
+    clearTimeout(timeoutId);
+    clearTimeout(progressBarAnimationFrameHandler);
+
+    throw new Error(
+      "Make sure that the Toaster component element is rendered with an id [application-toaster]"
+    );
+  }
+
+  const toasterElementMessage = toasterElementContainer?.querySelector(
+    '[data-test-id="toaster-message"]'
+  ) as HTMLElement;
+
+  const toasterElementTitle = toasterElementContainer?.querySelector(
+    '[data-test-id="toaster-title"]'
+  ) as HTMLElement;
+
+  const toasterElementSuccessIcon = toasterElementContainer?.querySelector(
+    '[data-test-id="success-toaster-icon"]'
+  ) as HTMLElement;
+
+  const toasterElementFailureIcon = toasterElementContainer?.querySelector(
+    '[data-test-id="failure-toaster-icon"]'
+  ) as HTMLElement;
+
+  const toasterCloseButton = toasterElementContainer?.querySelector(
+    '[data-test-id="toaster-close-button"]'
+  ) as HTMLElement;
+
+  const toasterProgressBar = toasterElementContainer?.querySelector(
+    '[data-test-id="toaster-progress-bar"]'
+  ) as HTMLElement;
+
+  return {
+    toasterElementContainer,
+    toasterElementMessage,
+    toasterElementTitle,
+    toasterProgressBar,
+    toasterElementSuccessIcon,
+    toasterElementFailureIcon,
+    toasterCloseButton,
+  };
+};

package/src/components/Toaster/toast-progress-animator.ts

@@ -0,0 +1,53 @@
+interface AnimateProgressParams {
+  animationDuration: number;
+  progressBarElement: HTMLElement;
+}
+
+/**
+ * Reference: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
+ * @param params.animationDuration - the amount of seconds the duration will take
+ * @param params.progressBarElement - the html element for the progress bar
+ * @returns the animation frame id
+ */
+export const animateProgress = (params: AnimateProgressParams): number => {
+  const { animationDuration, progressBarElement } = params;
+
+  let progressBarAnimationFrameHandler: number;
+
+  let startingTimestamp = 0;
+  let previousTimestamp = 0;
+  let done = false;
+  const animationTick = 100 / animationDuration;
+
+  const animate = (animationTimestamp: number) => {
+    if (!startingTimestamp) {
+      startingTimestamp = animationTimestamp;
+    }
+
+    const elapsed = animationTimestamp - startingTimestamp;
+
+    if (previousTimestamp !== animationTimestamp) {
+      const count = 100 - animationTick * elapsed;
+      progressBarElement.style.width = `${count}%`;
+      if (count === 0) {
+        done = true;
+      }
+    }
+
+    if (elapsed < animationDuration) {
+      // Stop the animation after duration is finished
+      previousTimestamp = animationTimestamp;
+
+      if (!done) {
+        progressBarAnimationFrameHandler =
+          window.requestAnimationFrame(animate);
+      }
+    }
+  };
+
+  progressBarElement.style.width = "100%";
+
+  progressBarAnimationFrameHandler = requestAnimationFrame(animate);
+
+  return progressBarAnimationFrameHandler;
+};

package/src/components/Toaster/toast.ts

@@ -0,0 +1,112 @@
+import { getToasterElements } from "./toast-elements-getter";
+import { animateProgress } from "./toast-progress-animator";
+
+let timeoutId: NodeJS.Timeout;
+let progressBarAnimationFrameHandler: number;
+
+const defaultDurationInSeconds = 5;
+
+type ToastParams =
+  | {
+      message: string;
+      title?: string;
+      showIcon?: boolean;
+      type: "success" | "failure";
+    }
+  | string;
+
+const showToaster = (params: ToastParams) => {
+  clearTimeout(timeoutId);
+  clearTimeout(progressBarAnimationFrameHandler);
+
+  const {
+    toasterElementContainer,
+    toasterElementMessage,
+    toasterElementTitle,
+    toasterProgressBar,
+    toasterElementSuccessIcon,
+    toasterElementFailureIcon,
+    toasterCloseButton,
+  } = getToasterElements({
+    timeoutId,
+    progressBarAnimationFrameHandler,
+  });
+
+  const animationDuration = defaultDurationInSeconds * 1000;
+
+  progressBarAnimationFrameHandler = animateProgress({
+    animationDuration,
+    progressBarElement: toasterProgressBar,
+  });
+
+  timeoutId = setTimeout(() => {
+    toasterElementContainer.classList.remove("expanded");
+    clearTimeout(timeoutId);
+    cancelAnimationFrame(progressBarAnimationFrameHandler);
+  }, animationDuration);
+
+  function shortcutAndClose() {
+    toasterElementContainer.classList.remove("expanded");
+    toasterElementContainer.classList.add("shelved");
+
+    clearTimeout(timeoutId);
+    cancelAnimationFrame(progressBarAnimationFrameHandler);
+  }
+
+  toasterCloseButton.removeEventListener("click", shortcutAndClose, true);
+  toasterCloseButton.addEventListener("click", shortcutAndClose);
+
+  toasterElementContainer.removeEventListener("click", shortcutAndClose, true);
+  toasterElementContainer.addEventListener("click", shortcutAndClose);
+
+  // Basic usage, no need to manipulate any other element;
+  if (typeof params === "string") {
+    toasterElementMessage.textContent = params;
+    toasterElementTitle.classList.add("hidden");
+
+    toasterElementSuccessIcon.classList.remove("hidden");
+    toasterElementFailureIcon.classList.add("hidden");
+
+    toasterElementContainer.classList.remove("type-failure");
+    toasterElementContainer.classList.add("type-success");
+    toasterElementContainer.classList.add("expanded");
+
+    return;
+  }
+
+  const { title = "", showIcon = true, message, type } = params;
+
+  toasterElementTitle.classList.toggle("hidden", !title);
+  toasterElementTitle.textContent = title;
+
+  toasterElementSuccessIcon.classList.toggle("hidden", !showIcon);
+  toasterElementFailureIcon.classList.toggle("hidden", !showIcon);
+
+  toasterElementMessage.textContent = message;
+  toasterElementContainer.classList.remove("type-success");
+  toasterElementContainer.classList.remove("type-failure");
+  toasterElementContainer.classList.add("expanded");
+  toasterElementContainer.classList.add(`type-${type}`);
+};
+
+export const toast = (params: ToastParams): void => {
+  showToaster(params);
+};
+
+toast.error = (message: string): void => {
+  showToaster({
+    message: message,
+    type: "failure",
+    showIcon: true,
+    title: "",
+  });
+};
+
+toast.info = (message: string): void => {
+  showToaster({
+    message: message,
+    type: "success",
+    showIcon: true,
+    title: "",
+  });
+};

package/src/index.tsx

@@ -1,7 +1,9 @@
 export {
-  default as Acknowledgement,
-  ACKNOWLEDGEMENT_TYPE_OPTIONS,
-} from "./components/Acknowledgement/Acknowledgement";
+  default as Toaster,
+  TOASTER_TYPE_OPTIONS,
+} from "./components/Toaster/Toaster";
+export { toast } from "./components/Toaster/toast";
+
 export { default as Avatar } from "./components/Avatar/Avatar";
 export { default as Badge } from "./components/Badge/Badge";
 export {
@@ -44,7 +46,7 @@ export {
 } from "./components/List/List";
 export {
   CheckboxList,
-    CheckboxListProps,
+  CheckboxListProps,
 } from "./components/CheckboxList/CheckboxList";
 
 export { MultiSelect } from "./components/MultiSelect/MultiSelect";