@luscii-healthtech/web-ui 2.4.1 → 2.5.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.4.1",
+  "version": "2.5.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -103,6 +103,7 @@
     "@fontsource/roboto": "^4.5.7",
     "@hookform/error-message": "^2.0.0",
     "@reach/router": "^1.3.4",
+    "@types/react-dragula": "^1.1.0",
     "@typescript-eslint/eslint-plugin": "^5.29.0",
     "classnames": "^2.3.1",
     "clipboard": "^2.0.11",

package/src/components/CheckboxList/CheckboxGroup.tsx

@@ -1,82 +1,121 @@
 import React, { useEffect, useState } from "react";
 import classNames from "classnames";
 
-
 import { Text } from "../Text/Text";
 import { Checkbox } from "../..";
 import { ChevronRightIcon } from "../Icons/ChevronRightIcon";
 import { ChevronDownIcon } from "../Icons/ChevronDownIcon";
 
-import {CheckboxGroupProps, CheckboxState } from "./CheckboxList.types";
+import { CheckboxGroupProps, CheckboxState } from "./CheckboxList.types";
 import { CheckboxListItem } from "./CheckboxListItem";
 
 export const CheckboxGroup = ({
-                             title,
-                             items,
-                             onChange,
-                             className
-                         }: CheckboxGroupProps): JSX.Element => {
-
-    const [groupCheckboxState, setGroupCheckboxState] = useState<CheckboxState>(CheckboxState.UNCHECKED);
+  title,
+  items,
+  onChange,
+  className,
+  isCollapsed = true,
+}: CheckboxGroupProps): JSX.Element => {
+  const [groupCheckboxState, setGroupCheckboxState] = useState<CheckboxState>(
+    CheckboxState.UNCHECKED
+  );
 
-    const [collapsed, setCollapsed] = useState(true);
+  const [collapsed, setCollapsed] = useState(isCollapsed);
 
-    useEffect(() => {
-        if (items?.length > 0) {
-            const indeterminate = items.some((item) => item.isChecked !== items[0].isChecked);
-            if (!indeterminate && items[0].isChecked) {
-                setGroupCheckboxState(CheckboxState.CHECKED);
-            } else if (!indeterminate && !items[0].isChecked) {
-                setGroupCheckboxState(CheckboxState.UNCHECKED);
-            } else {
-                setGroupCheckboxState(CheckboxState.INDETERMINATE);
-            }
-        } else {
-            setGroupCheckboxState(CheckboxState.UNCHECKED);
-        }
-    }, [items]);
+  useEffect(() => {
+    if (items?.length > 0) {
+      const indeterminate = items.some(
+        (item) => item.isChecked !== items[0].isChecked
+      );
+      if (!indeterminate && items[0].isChecked) {
+        setGroupCheckboxState(CheckboxState.CHECKED);
+      } else if (!indeterminate && !items[0].isChecked) {
+        setGroupCheckboxState(CheckboxState.UNCHECKED);
+      } else {
+        setGroupCheckboxState(CheckboxState.INDETERMINATE);
+      }
+    } else {
+      setGroupCheckboxState(CheckboxState.UNCHECKED);
+    }
+  }, [items]);
 
-    const handleGroupClick = (event: React.MouseEvent<HTMLDivElement> | React.ChangeEvent<HTMLInputElement>) => {
-        event.stopPropagation();
+  const handleGroupClick = (
+    event:
+      | React.MouseEvent<HTMLDivElement>
+      | React.ChangeEvent<HTMLInputElement>
+  ) => {
+    event.stopPropagation();
 
-        if ((groupCheckboxState === CheckboxState.CHECKED || groupCheckboxState === CheckboxState.INDETERMINATE) && onChange) {
-            //if checked or indeterminate >> make all items unchecked
-            items.forEach((item) => onChange({id: item.id, newCheckedValue: false}));
-        } else if (onChange) {
-            // else if unchecked >> make all items  checked
-            items.forEach((item) => onChange({id: item.id, newCheckedValue: true}));
-        }
-    };
+    if (
+      (groupCheckboxState === CheckboxState.CHECKED ||
+        groupCheckboxState === CheckboxState.INDETERMINATE) &&
+      onChange
+    ) {
+      //if checked or indeterminate >> make all items unchecked
+      items.forEach((item) =>
+        onChange({ id: item.id, newCheckedValue: false })
+      );
+    } else if (onChange) {
+      // else if unchecked >> make all items  checked
+      items.forEach((item) => onChange({ id: item.id, newCheckedValue: true }));
+    }
+  };
 
-    const handleGroupCollapse = (event: React.MouseEvent<HTMLDivElement> | React.MouseEvent<SVGSVGElement> | undefined) => {
-        if (event) {
-            event.stopPropagation();
-        }
+  const handleGroupCollapse = (
+    event:
+      | React.MouseEvent<HTMLDivElement>
+      | React.MouseEvent<SVGSVGElement>
+      | undefined
+  ) => {
+    if (event) {
+      event.stopPropagation();
+    }
 
-        setCollapsed(!collapsed);
-    };
+    setCollapsed(!collapsed);
+  };
 
-    const checkedItemsCount = items?.filter(item => item?.isChecked).length;
-    const groupTitle = checkedItemsCount > 0 ? `${title} (${checkedItemsCount})` : title;
+  const checkedItemsCount = items?.filter((item) => item?.isChecked).length;
+  const groupTitle =
+    checkedItemsCount > 0 ? `${title} (${checkedItemsCount})` : title;
 
-    return (
-      <div className={classNames("flex flex-col", className)}>
-        {title &&
+  return (
+    <div className={classNames("flex flex-col", className)}>
+      {title && (
         <div className={"flex flex-row my-1 items-center w-full space-between"}>
-          <div className={"h-6 cursor-pointer mr-auto flex flex-row items-center text-slate-300 hover:text-slate-500 transition duration-300"} onClick={handleGroupCollapse}>
-            {collapsed ? <ChevronRightIcon onClick={handleGroupCollapse} /> : <ChevronDownIcon onClick={handleGroupCollapse} />}
-            <Text type={"strong"} text={groupTitle || ""} className={" ml-4"}/> :
+          <div
+            className={
+              "h-6 cursor-pointer mr-auto flex flex-row items-center text-slate-300 hover:text-slate-500 transition duration-300"
+            }
+            onClick={handleGroupCollapse}
+          >
+            {collapsed ? (
+              <ChevronRightIcon onClick={handleGroupCollapse} />
+            ) : (
+              <ChevronDownIcon onClick={handleGroupCollapse} />
+            )}
+            <Text type={"strong"} text={groupTitle || ""} className={" ml-4"} />{" "}
+            :
           </div>
-          <Checkbox onChange={handleGroupClick} className={"ml-auto"}
-                    isChecked={groupCheckboxState === CheckboxState.CHECKED}
-                    isIndeterminate={groupCheckboxState === CheckboxState.INDETERMINATE}/>
+          <Checkbox
+            onChange={handleGroupClick}
+            className={"ml-auto"}
+            isChecked={groupCheckboxState === CheckboxState.CHECKED}
+            isIndeterminate={groupCheckboxState === CheckboxState.INDETERMINATE}
+          />
         </div>
-            }
-
-        {!collapsed &&
-                items.map((item) => (<CheckboxListItem key={item.id} id={item.id} label={item.label} onChange={onChange} isChecked={item.isChecked} className={"ml-10 my-1"}/>))
-            }
+      )}
 
-      </div>
-    );
+      {!collapsed &&
+        items.map((item) => (
+          <CheckboxListItem
+            key={item.id}
+            id={item.id}
+            label={item.label}
+            onChange={onChange}
+            isChecked={item.isChecked}
+            className={"ml-10 my-1"}
+          />
+        ))}
+    </div>
+  );
 };

package/src/components/CheckboxList/CheckboxList.tsx

@@ -5,25 +5,42 @@ import { CheckboxListItem } from "./CheckboxListItem";
 import { CheckboxListProps } from "./CheckboxList.types";
 import { CheckboxGroup } from "./CheckboxGroup";
 
-export {CheckboxListProps};
+export { CheckboxListProps };
 
 export const CheckboxList = ({
-                                  groups,
-                                  onChange,
-                                  className,
-                              }: CheckboxListProps): JSX.Element => {
-
-    return (
-      <div className={classNames("flex flex-col", className)}>
-        {groups?.length > 0 && groups.map((group) => {
-                if (group.title) {
-                    return <CheckboxGroup key={group.title} items={group.items} title={group.title} onChange={onChange}/>;
-                } else {
-                    return group.items.map((item) => <CheckboxListItem key={item.id} id={item.id} label={item.label} onChange={onChange} isChecked={item.isChecked} className={"my-1"}/>);
-                }
-            })}
-      </div>
-    );
+  groups,
+  onChange,
+  className,
+}: CheckboxListProps): JSX.Element => {
+  return (
+    <div className={classNames("flex flex-col", className)}>
+      {groups?.length > 0 &&
+        groups.map((group) => {
+          if (group.title) {
+            return (
+              <CheckboxGroup
+                key={group.title}
+                items={group.items}
+                title={group.title}
+                isCollapsed={group.isCollapsed}
+                onChange={onChange}
+              />
+            );
+          } else {
+            return group.items.map((item) => (
+              <CheckboxListItem
+                key={item.id}
+                id={item.id}
+                label={item.label}
+                onChange={onChange}
+                isChecked={item.isChecked}
+                className={"my-1"}
+              />
+            ));
+          }
+        })}
+    </div>
+  );
 };
 
 export default CheckboxList;

package/src/components/CheckboxList/CheckboxList.types.ts

@@ -1,45 +1,47 @@
 export enum CheckboxState {
-    CHECKED = "checked",
-    INDETERMINATE = "indeterminate",
-    UNCHECKED = "unchecked"
+  CHECKED = "checked",
+  INDETERMINATE = "indeterminate",
+  UNCHECKED = "unchecked",
 }
 
 export interface CheckboxListProps {
-    groups: CheckboxGroup[];
-    onChange: (event: CheckboxChangeEvent) => void;
-    className?: string;
+  groups: CheckboxGroup[];
+  onChange: (event: CheckboxChangeEvent) => void;
+  className?: string;
 }
 
 export interface CheckboxGroupProps {
-    //If you don't specify a title than it will just be a non-collapsible list
-    title?: string,
-    items: CheckboxListItem[],
-    onChange: (event: CheckboxChangeEvent) => void;
-    className?: string;
+  //If you don't specify a title than it will just be a non-collapsible list
+  title?: string;
+  items: CheckboxListItem[];
+  onChange: (event: CheckboxChangeEvent) => void;
+  className?: string;
+  isCollapsed?: boolean;
 }
 
 export interface CheckboxGroupItemProps {
-    id: string,
-    label: string,
-    isChecked?: boolean,
-    onChange: (event: CheckboxChangeEvent) => void;
-    className?: string;
+  id: string;
+  label: string;
+  isChecked?: boolean;
+  onChange: (event: CheckboxChangeEvent) => void;
+  className?: string;
 }
 
 export interface CheckboxListItem {
-    id: string,
-    label: string,
-    isChecked?: boolean,
-    className?: string,
+  id: string;
+  label: string;
+  isChecked?: boolean;
+  className?: string;
 }
 
 export interface CheckboxGroup {
-    //If you don't specify a title than it will just be a non-collapsible list
-    title?: string,
-    items: CheckboxListItem[],
+  //If you don't specify a title than it will just be a non-collapsible list
+  title?: string;
+  items: CheckboxListItem[];
+  isCollapsed?: boolean;
 }
 
 export interface CheckboxChangeEvent {
-    id: string,
-    newCheckedValue: boolean
+  id: string;
+  newCheckedValue: boolean;
 }

package/src/components/List/List.scss

@@ -0,0 +1,23 @@
+li {
+  &.gu-mirror {
+    @apply shadow-xl m-0 fixed z-9999;
+  }
+
+  &.gu-hide {
+    @apply hidden;
+  }
+
+  &.gu-unselectable {
+    @apply select-none;
+  }
+
+  &.gu-transit {
+    @apply bg-blue-50;
+    @apply outline-dropTarget;
+    filter: none;
+    @apply opacity-100 rounded-none border-none; // TODO we only need these to override them in cVitals-Web
+  }
+  &.gu-transit > * {
+    @apply invisible;
+  }
+}

package/src/components/List/List.tsx

@@ -10,10 +10,11 @@ import {
   ListProps,
   ListItemProps,
   OnAssetLoadErrorPayload,
-  Dragula,
 } from "./List.types";
 import { ListSkeleton } from "./ListSkeleton";
 
+import "./List.scss";
+
 export { ListProps, ListItemProps, OnAssetLoadErrorPayload };
 
 export const List = ({
@@ -27,19 +28,19 @@ export const List = ({
   isLoading,
 }: ListProps): JSX.Element => {
   const listRef = useRef<HTMLUListElement | null>(null);
-  const dragulaRef = useRef<Dragula | null>(null);
+  const dragulaRef = useRef<dragula.Drake | null>(null);
   const hasHeader = !!(title || headerButton);
 
   useEffect(() => {
     dragulaRef.current?.destroy?.();
-    if (onDragEnd && items.length) {
+    if (listRef.current && onDragEnd && items.length) {
       dragulaRef.current = setupDragging();
     }
 
     return () => {
       dragulaRef.current?.destroy?.();
     };
-  }, [items]);
+  }, [items, listRef]);
 
   const handleDragEnd = (element: HTMLElement) => {
     const draggedItemId = element.dataset["id"];
@@ -61,11 +62,14 @@ export const List = ({
     }
   };
 
-  const setupDragging = (): Dragula => {
+  const setupDragging = (): dragula.Drake | null => {
+    if (!listRef.current) {
+      return null;
+    }
     const dragulaInstance = dragula([listRef.current], {
       revertOnSpill: true,
     });
-    dragulaInstance.on("dragend", handleDragEnd);
+    dragulaInstance.on("dragend", handleDragEnd as (Element) => void);
 
     return dragulaInstance;
   };

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

@@ -39,7 +39,3 @@ export type ListProps = {
   emptyStateMessage?: string;
   isLoading?: boolean;
 };
-
-export interface Dragula {
-  destroy?: () => void;
-}

package/src/components/Toaster/Toaster.scss

@@ -2,7 +2,7 @@
   position: fixed;
   left: 50%;
   transform: translate(-50%, 150%);
-  bottom: 15px;
+  bottom: 48px;
 
   // https://easings.net/#easeInOutBack
   transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);