@luscii-healthtech/web-ui 2.1.0 → 2.3.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.1.0",
+  "version": "2.3.1",
   "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/Accordion/Accordion.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import { AccordionItem, AccordionItemProps } from "./AccordionItem";
+
+export interface AccordionProps {
+  dataTestId?: string;
+  items: AccordionItemProps[];
+  className?: string;
+  isCollapsedByDefault?: boolean;
+}
+
+const Accordion: React.VFC<AccordionProps> = ({
+  dataTestId,
+  isCollapsedByDefault = false,
+  items,
+  className,
+}) => {
+  return (
+    <ul data-test-id={dataTestId} className={className}>
+      {items.map?.((item) => (
+        <AccordionItem
+          {...item}
+          key={item.id}
+          isCollapsedByDefault={
+            item.isCollapsedByDefault ?? isCollapsedByDefault
+          }
+        />
+      ))}
+    </ul>
+  );
+};
+
+export default Accordion;

package/src/components/Accordion/AccordionItem.tsx

@@ -0,0 +1,50 @@
+import React, { useReducer } from "react";
+import classNames from "classnames";
+
+import { ChevronRightIcon } from "../Icons/ChevronRightIcon";
+import { ChevronDownIcon } from "../Icons/ChevronDownIcon";
+import Text from "../Text/Text";
+
+export interface AccordionItemProps {
+  id: string;
+  title: string;
+  content: React.ReactNode;
+  className?: string;
+  isCollapsedByDefault?: boolean;
+}
+
+export const AccordionItem: React.VFC<AccordionItemProps> = ({
+  id,
+  title,
+  content,
+  isCollapsedByDefault = false,
+}) => {
+  const [isCollapsed, toggleIsCollapsed] = useReducer(
+    (state) => !state,
+    isCollapsedByDefault
+  );
+  const Chevron = isCollapsed ? ChevronRightIcon : ChevronDownIcon;
+
+  return (
+    <li
+      className={"bg-white border-b last:border-b-0 border-slate-100"}
+      data-test-id={id}
+    >
+      <div
+        onClick={toggleIsCollapsed}
+        className={classNames(
+          "p-4 w-full flex flex-row space-x-4 select-none",
+          "cursor-pointer hover:bg-blue-50 transition-colors ease-in-out duration-300",
+          {
+            "border-b border-slate-100": !isCollapsed,
+          }
+        )}
+      >
+        <Chevron className={"text-slate-300"} />
+        <Text text={title} type={"lg-strong"} />
+      </div>
+
+      <div className={classNames({ hidden: isCollapsed })}>{content}</div>
+    </li>
+  );
+};

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/styles/_skeleton.scss

@@ -0,0 +1,63 @@
+@mixin skeleton() {
+  .skeleton-box {
+    display: inline-block;
+    height: 1em;
+    position: relative;
+    overflow: hidden;
+    background-color: #cbd5e1; //slate 300
+    border-radius: 3px;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      transform: translateX(-100%);
+      background-image: linear-gradient(
+                      90deg,
+                      rgba(#fff, 0) 0,
+                      rgba(#fff, 0.2) 20%,
+                      rgba(#fff, 0.5) 60%,
+                      rgba(#fff, 0)
+      );
+
+      animation: shimmer 800ms infinite;
+      content: "";
+    }
+
+    &.is-circle {
+      border-radius: 50%;
+    }
+
+    &.is-button {
+      background-color: #e2e8f0; //secondary button color
+      border-radius: 9999px;
+
+      &::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        transform: translateX(-100%);
+        background-image: linear-gradient(
+                        90deg,
+                        rgba(#ddd, 0) 0,
+                        rgba(#ddd, 0.2) 20%,
+                        rgba(#ddd, 0.5) 60%,
+                        rgba(#ddd, 0)
+        );
+
+        animation: shimmer 800ms infinite;
+        content: "";
+      }
+    }
+
+    @keyframes shimmer {
+      100% {
+        transform: translateX(100%);
+      }
+    }
+  }
+}

package/src/types/general.types.ts

@@ -1,5 +1,5 @@
 // This type is used to allow for other props to be injected into the component
-// For instance, for a data-testid or key
+// For instance, for a data-test-id or key
 export interface RestPropped {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [key: string]: any;