@luscii-healthtech/web-ui 2.7.0 → 2.9.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.7.0",
+  "version": "2.9.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/CheckBoxListModal/CheckboxListModal.tsx

@@ -0,0 +1,180 @@
+import * as React from "react";
+import { useEffect, useState } from "react";
+import classNames from "classnames";
+import groupBy from "lodash/groupBy";
+
+import { CheckboxChangeEvent } from "../CheckboxList/CheckboxList.types";
+import { SecondaryButton } from "../ButtonV2/SecondaryButton";
+import { PrimaryButton } from "../ButtonV2/PrimaryButton";
+import { ModalWithButtons } from "../Modal/ModalWithButtons";
+import LoadingIndicator from "../LoadingIndicator/LoadingIndicator";
+import { SearchInput } from "../Input/SearchInput";
+import Text from "../Text/Text";
+import CheckboxList from "../CheckboxList/CheckboxList";
+
+export interface Item {
+  id: string;
+  label: string;
+  isChecked: boolean;
+  group?: string;
+  isPinned?: boolean;
+}
+
+export interface Group {
+  title?: string;
+  items: Item[];
+}
+
+interface CheckboxListModalTexts {
+  title: string;
+  confirmLabel: string;
+  cancelLabel: string;
+  searchPlaceHolder?: string;
+  emptyState: string;
+}
+
+export interface CheckboxListModalProps {
+  texts: CheckboxListModalTexts;
+  initialItems: Array<Item>;
+  isLoadingInitialItems?: boolean;
+  isOpen: boolean;
+  onSave: (newItems: Item[]) => void;
+  onCloseClick: () => void;
+  filterItem: (item: Item, searchQuery: string) => boolean;
+  className?: string;
+  hasSearch: boolean;
+}
+
+const transformToGroups = (items: Item[]): Group[] => {
+  const pinned = items.find((option) => option.isPinned);
+
+  const itemsWithGroup = items.filter((option) => option.group);
+  const groups = Object.entries(groupBy(itemsWithGroup, "group")).map(
+    (group) => ({
+      title: group[0],
+      items: group[1].sort((a, b) =>
+        a.label > b.label ? 1 : b.label > a.label ? -1 : 0
+      ),
+    })
+  );
+
+  const itemsWithoutGroup = items.filter((option) => !option.group);
+  const restGroup = {
+    name: undefined,
+    items: itemsWithoutGroup,
+  };
+
+  if (pinned) {
+    const myGroup = {
+      items: [pinned],
+    };
+    return [myGroup, ...groups, restGroup];
+  }
+
+  return [...groups, restGroup];
+};
+
+export const CheckboxListModal = ({
+  texts,
+  initialItems,
+  isLoadingInitialItems,
+  isOpen,
+  onSave,
+  onCloseClick,
+  filterItem = () => true,
+  className,
+  hasSearch = false,
+}: CheckboxListModalProps): JSX.Element => {
+  const containerClassName = classNames(className);
+
+  const [items, setItems] = useState<Item[]>([]);
+  const [visibleItems, setVisibleItems] = useState<Item[]>([]);
+  const [groups, setGroups] = useState<Group[]>([]);
+  const [search, setSearch] = useState("");
+
+  useEffect(() => {
+    setItems(initialItems);
+  }, [initialItems]);
+
+  useEffect(() => {
+    setVisibleItems(items.filter((item) => filterItem(item, search)));
+  }, [items, search]);
+
+  useEffect(() => {
+    setGroups(transformToGroups(visibleItems));
+  }, [visibleItems]);
+
+  const handleOnItemChange = (event: CheckboxChangeEvent) => {
+    const updatedItems = [...items];
+    const index = updatedItems.findIndex((item) => item.id === event.id);
+    updatedItems[index].isChecked = event.newCheckedValue;
+    setItems(updatedItems);
+  };
+
+  const handleOnCloseClick = (
+    event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent
+  ) => {
+    event.stopPropagation();
+    onCloseClick();
+  };
+
+  const handleOnSaveClick = () => {
+    onSave(items.filter((item) => item.isChecked));
+    onCloseClick();
+  };
+
+  const handleOnSearchChange = (event) => {
+    setSearch(event.currentTarget.value ?? "");
+  };
+
+  const closeButton = (
+    <SecondaryButton
+      text={texts.cancelLabel}
+      onClick={handleOnCloseClick}
+      key="close-checkbox-list-modal"
+      className="mr-2"
+    />
+  );
+
+  const saveButton = (
+    <PrimaryButton
+      text={texts.confirmLabel}
+      onClick={handleOnSaveClick}
+      key="save-selected-checkbox-list-items"
+    />
+  );
+
+  return (
+    <ModalWithButtons
+      isOpen={isOpen}
+      title={texts.title}
+      onCloseClick={handleOnCloseClick}
+      withPadding
+      shouldCloseOnOverlayClick
+      className={containerClassName}
+      buttons={[closeButton, saveButton]}
+      buttonsAlignment="justify-end"
+    >
+      <div className="max-h-135 overflow-y-auto pr-4">
+        {isLoadingInitialItems && <LoadingIndicator />}
+
+        {hasSearch && !isLoadingInitialItems && (
+          <SearchInput
+            className="w-130 mb-2"
+            value={search}
+            placeholder={texts.searchPlaceHolder}
+            onChange={handleOnSearchChange}
+          />
+        )}
+
+        {!isLoadingInitialItems && items?.length > 0 && (
+          <CheckboxList groups={groups} onChange={handleOnItemChange} />
+        )}
+
+        {!isLoadingInitialItems && items?.length === 0 && (
+          <Text text={texts.emptyState} />
+        )}
+      </div>
+    </ModalWithButtons>
+  );
+};

package/src/components/CheckboxList/CheckboxGroup.tsx

@@ -94,7 +94,6 @@ export const CheckboxGroup = ({
               <ChevronDownIcon onClick={handleGroupCollapse} />
             )}
             <Text type={"strong"} text={groupTitle || ""} className={" ml-4"} />{" "}
-            :
           </div>
           <Checkbox
             onChange={handleGroupClick}

package/src/components/CheckboxList/CheckboxListItem.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import classNames from "classnames";
 
 import { Text } from "../Text/Text";
@@ -6,45 +6,49 @@ import { Checkbox } from "../Checkbox/Checkbox";
 
 import { CheckboxGroupItemProps } from "./CheckboxList.types";
 
-
 export const CheckboxListItem = ({
-                                  id,
-                                  label,
-                                  isChecked,
-                                  onChange,
-                                  className,
-                              }: CheckboxGroupItemProps): JSX.Element => {
-
-    const [checked, setChecked] = useState(isChecked || false);
-
-    useEffect(() => {
-        setChecked(isChecked || false);
-    }, [isChecked]);
-
-    const handleItemClick = (event: React.MouseEvent<HTMLDivElement>) => {
-        event.stopPropagation();
-
-        if (onChange) {
-            onChange({id, newCheckedValue: !checked});
-        }
-        setChecked(!checked);
-    };
-
-    const handleCheckboxClick = (event: React.ChangeEvent<HTMLInputElement>) => {
-        event.stopPropagation();
-        const targetId = event.target.id;
-        const newCheckedValue = event.target.checked;
-
-        if (onChange) {
-            onChange({id: targetId, newCheckedValue});
-        }
-    };
-
-    return (
-      <div className={classNames("flex flex-row space-between cursor-pointer", className)} item-id={id} onClick={handleItemClick}>
-        <Text text={label} className={"mr-auto"}/>
-        <Checkbox isChecked={checked} onChange={handleCheckboxClick} id={id}/>
-      </div>
-    );
+  id,
+  label,
+  isChecked,
+  onChange,
+  className,
+}: CheckboxGroupItemProps): JSX.Element => {
+  const [checked, setChecked] = useState(isChecked || false);
+
+  useEffect(() => {
+    setChecked(isChecked || false);
+  }, [isChecked]);
+
+  const handleItemClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+
+    if (onChange) {
+      onChange({ id, newCheckedValue: !checked });
+    }
+    setChecked(!checked);
+  };
+
+  const handleCheckboxClick = (event: React.ChangeEvent<HTMLInputElement>) => {
+    event.stopPropagation();
+    const targetId = event.target.id;
+    const newCheckedValue = event.target.checked;
+
+    if (onChange) {
+      onChange({ id: targetId, newCheckedValue });
+    }
+  };
+
+  return (
+    <div
+      className={classNames(
+        "flex flex-row space-between cursor-pointer",
+        className
+      )}
+      item-id={id}
+      onClick={handleItemClick}
+    >
+      <Text text={label} className={"mr-auto"} />
+      <Checkbox isChecked={checked} onChange={handleCheckboxClick} id={id} />
+    </div>
+  );
 };
-

package/src/components/Container/FlexColumn.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+import { FlexContainer } from "./FlexContainer";
+import { FlexContainerProps } from "./types/FlexContainerProps.type";
+
+/**
+ * Container to be used for layouting instead of divs around the project.
+ * The spacing here has been coded according to our guidelines.
+ */
+export const FlexColumn: React.FC<FlexContainerProps> = (props) => {
+  const { children, spaced = true, ...rest } = props;
+
+  return (
+    <FlexContainer {...rest} type="column" verticallySpaced={spaced}>
+      {children}
+    </FlexContainer>
+  );
+};

package/src/components/Container/FlexContainer.tsx

@@ -0,0 +1,46 @@
+import classNames from "classnames";
+import React from "react";
+
+import { FlexContainerBaseProps } from "./types/FlexContainerProps.type";
+
+/**
+ * Container to be used for layouting instead of divs around the project.
+ * The spacing here has been coded according to our guidelines.
+ */
+export const FlexContainer: React.FC<
+  FlexContainerBaseProps & { type: "column" | "row" }
+> = (props) => {
+  const {
+    children,
+    alignItems,
+    verticallySpaced,
+    horitontallySpaced,
+    justifyContent,
+    hasPadding,
+    type,
+  } = props;
+
+  return (
+    <div
+      className={classNames("flex w-full", {
+        "flex-row": type === "row",
+        "flex-col": type === "column",
+
+        "justify-center": justifyContent === "center",
+        "justify-start": justifyContent === "start",
+        "justify-end": justifyContent === "end",
+        "justify-between": justifyContent === "between",
+
+        "items-start": alignItems === "start",
+        "items-center": alignItems === "center",
+        "items-end": alignItems === "end",
+
+        "space-x-4": horitontallySpaced,
+        "space-y-4": verticallySpaced,
+        "p-4": hasPadding,
+      })}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/Container/FlexRow.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+import { FlexContainer } from "./FlexContainer";
+import { FlexContainerProps } from "./types/FlexContainerProps.type";
+
+/**
+ * Container to be used for layouting instead of divs around the project.
+ * The spacing here has been coded according to our guidelines.
+ */
+export const FlexRow: React.FC<FlexContainerProps> = (props) => {
+  const { children, spaced = true, ...rest } = props;
+
+  return (
+    <FlexContainer {...rest} type="row" horitontallySpaced={spaced}>
+      {children}
+    </FlexContainer>
+  );
+};

package/src/components/Container/types/FlexContainerProps.type.ts

@@ -0,0 +1,18 @@
+import React from "react";
+
+type FlexContainerBase = {
+  alignItems?: "center" | "start" | "end";
+  justifyContent?: "center" | "start" | "end" | "between";
+  verticallySpaced?: boolean;
+  horitontallySpaced?: boolean;
+  hasPadding?: boolean;
+};
+
+export type FlexContainerBaseProps = FlexContainerBase & {
+  children: React.ReactNode;
+};
+
+export type FlexContainerProps = Omit<
+  FlexContainerBaseProps,
+  "verticallySpaced" | "horitontallySpaced"
+> & { spaced?: boolean };

package/src/components/List/ListItem.tsx

@@ -68,6 +68,7 @@ export const ListItem = ({
       {!loadIconError && icon && typeof icon === "string" && (
         <img
           src={icon}
+          data-chromatic="ignore"
           alt="list-item-icon"
           className="w-6 h-6 text-sm"
           onLoad={onListItemIconLoad}

package/src/components/LoadingIndicator/LoadingIndicator.tsx

@@ -33,6 +33,7 @@ export function LoadingIndicator({
     <div {...restProps} className={containerClassName}>
       <img
         src={asSpinner ? spinnerToRender : loadingImage}
+        data-chromatic="ignore"
         className={classNames("text-gray-600 fill-current stroke-current", {
           "h-4 w-4": asSpinner,
           "h-12 w-12": !asSpinner,

package/src/components/Radio/RadioV2.tsx

@@ -8,6 +8,7 @@ import "./RadioV2.css";
 export interface RadioProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
   name: string;
+  // value field is used by react-hook-form as the value returned
   value: string | number;
   // text shown to the user to explain the option
   text?: string;
@@ -15,7 +16,6 @@ export interface RadioProps
   info?: string;
   isError?: boolean;
   innerRef?: React.Ref<HTMLInputElement>;
-  // value field is used by react-hook-form as the value returned
 }
 
 function RadioInner({

package/src/index.tsx

@@ -1,3 +1,7 @@
+export { FlexColumn } from "./components/Container/FlexColumn";
+export { FlexRow } from "./components/Container/FlexRow";
+export type { FlexContainerProps } from "./components/Container/types/FlexContainerProps.type";
+
 export {
   default as Toaster,
   TOASTER_TYPE_OPTIONS,
@@ -49,6 +53,11 @@ export {
   CheckboxListProps,
 } from "./components/CheckboxList/CheckboxList";
 
+export {
+  CheckboxListModal,
+  CheckboxListModalProps,
+} from "./components/CheckBoxListModal/CheckboxListModal";
+
 export { MultiSelect } from "./components/MultiSelect/MultiSelect";
 export { NavLayout, NavMenuLayoutProps } from "./components/NavMenu/NavLayout";
 export { NavMenu, NavMenuElement } from "./components/NavMenu/NavMenu";