@luscii-healthtech/web-ui 2.6.0 → 2.8.0

package/dist/components/CenteredHero/CenteredHero.d.ts

@@ -1,22 +1,12 @@
-export default CenteredHero;
-declare function CenteredHero({ title, text, image, buttons, className }: {
-    title: any;
-    text: any;
-    image: any;
-    buttons: any;
-    className: any;
-}): JSX.Element;
-declare namespace CenteredHero {
-    export namespace propTypes {
-        export const title: PropTypes.Requireable<string>;
-        export const text: PropTypes.Requireable<string>;
-        export const image: PropTypes.Requireable<string>;
-        export const buttons: PropTypes.Requireable<(PropTypes.InferProps<{
-            title: PropTypes.Validator<string>;
-            handleOnClick: PropTypes.Validator<(...args: any[]) => any>;
-            type: PropTypes.Validator<"primary" | "secondary">;
-        }> | null | undefined)[]>;
-        export const className: PropTypes.Requireable<string>;
-    }
+/// <reference types="react" />
+import { ButtonProps } from "../Button/Button.types";
+export declare type BackgroundColor = "white" | "slate-50";
+export interface CenteredHeroProps {
+    title: string;
+    text: string;
+    image: string;
+    buttons: ButtonProps[];
+    background?: BackgroundColor;
 }
-import PropTypes from "prop-types";
+declare const CenteredHero: ({ title, text, image, buttons, background, }: CenteredHeroProps) => JSX.Element;
+export default CenteredHero;

package/dist/components/CheckBoxListModal/CheckboxListModal.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+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;
+}
+export declare const CheckboxListModal: ({ texts, initialItems, isLoadingInitialItems, isOpen, onSave, onCloseClick, filterItem, className, hasSearch, }: CheckboxListModalProps) => JSX.Element;
+export {};

package/dist/index.d.ts

@@ -24,6 +24,7 @@ export { LoadingIndicator, LoadingIndicatorProps, } from "./components/LoadingIn
 export { default as Menu } from "./components/Menu/Menu";
 export { List, ListProps, ListItemProps, OnAssetLoadErrorPayload, } from "./components/List/List";
 export { CheckboxList, 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";

package/dist/web-ui-tailwind.css

@@ -1328,11 +1328,6 @@ video {
   margin-bottom: 1rem;
 }
 
-.my-6 {
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-}
-
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -1382,6 +1377,10 @@ video {
   margin-left: 0.75rem;
 }
 
+.mt-4 {
+  margin-top: 1rem;
+}
+
 .mr-4 {
   margin-right: 1rem;
 }
@@ -1406,10 +1405,6 @@ video {
   margin-left: 1.5rem;
 }
 
-.mt-8 {
-  margin-top: 2rem;
-}
-
 .ml-10 {
   margin-left: 2.5rem;
 }
@@ -1618,6 +1613,10 @@ video {
   padding-left: 0.25rem;
 }
 
+.pr-4 {
+  padding-right: 1rem;
+}
+
 .pl-4 {
   padding-left: 1rem;
 }
@@ -2054,6 +2053,10 @@ video {
   width: 6rem;
 }
 
+.w-36 {
+  width: 9rem;
+}
+
 .w-46 {
   width: 11.5rem;
 }
@@ -2066,8 +2069,8 @@ video {
   width: 26rem;
 }
 
-.w-200 {
-  width: 50rem;
+.w-130 {
+  width: 32.5rem;
 }
 
 .w-auto {

package/dist/web-ui.cjs.development.js

@@ -18,6 +18,7 @@ var ClipboardJS = _interopDefault(require('clipboard'));
 var ReactSelect = require('react-select');
 var ReactSelect__default = _interopDefault(ReactSelect);
 var dragula = _interopDefault(require('react-dragula'));
+var groupBy = _interopDefault(require('lodash/groupBy'));
 var debounce = _interopDefault(require('lodash.debounce'));
 var ReactQuill = _interopDefault(require('react-quill'));
 require('react-quill/dist/quill.snow.css');
@@ -1130,49 +1131,42 @@ Title.defaultProps = {
   type: "base"
 };
 
-CenteredHero.propTypes = {
-  title: PropTypes.string,
-  text: PropTypes.string,
-  image: PropTypes.string,
-  buttons: /*#__PURE__*/PropTypes.arrayOf( /*#__PURE__*/PropTypes.shape({
-    title: PropTypes.string.isRequired,
-    handleOnClick: PropTypes.func.isRequired,
-    type: /*#__PURE__*/PropTypes.oneOf([BUTTON_ROLES.PRIMARY, BUTTON_ROLES.SECONDARY]).isRequired
-  })),
-  className: PropTypes.string
-};
-
-function CenteredHero(_ref) {
+var CenteredHero = function CenteredHero(_ref) {
   var title = _ref.title,
       text = _ref.text,
       image = _ref.image,
       buttons = _ref.buttons,
-      className = _ref.className;
+      _ref$background = _ref.background,
+      background = _ref$background === void 0 ? "slate-50" : _ref$background;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: classNames(className, "p-6 my-6 flex flex-col items-center w-200 ml-auto mr-auto")
+    className: classNames("p-6 flex flex-col items-center align-center w-full", {
+      "bg-white": background === "white",
+      "bg-slate-50": background === "slate-50"
+    })
   }, image && /*#__PURE__*/React__default.createElement("img", {
-    src: image
+    src: image,
+    className: "h-36 w-36 mb-4"
   }), title && /*#__PURE__*/React__default.createElement(Title, {
-    className: "mt-8 mb-2",
     text: title,
     type: "base"
   }), text && /*#__PURE__*/React__default.createElement(Text, {
     text: text
   }), (buttons == null ? void 0 : buttons.length) > 0 && /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-row mt-8"
+    className: "flex flex-row mt-4"
   }, buttons.filter(function (button) {
     return button.title && button.handleOnClick && button.type;
   }).map(function (button) {
     return /*#__PURE__*/React__default.createElement(Button, {
       className: "mr-4 last:mr-0",
       key: button.title,
-      role: button.type,
+      role: button.role,
+      type: button.type,
       title: button.title,
-      text: button.title,
+      text: button.text,
       onClick: button.handleOnClick
     });
   })));
-}
+};
 
 var css_248z$5 = ".cweb-checkbox {\n  outline: none;\n  transition: all 0.3s ease;\n}\n\n.cweb-checkbox .cweb-checkbox-input {\n  position: absolute;\n  -webkit-appearance: none;\n  height: 1px;\n  opacity: 0;\n  width: 1px;\n}\n\n.cweb-checkbox.type-regular .cweb-checkbox-label {\n  display: flex;\n  align-items: center;\n  margin-bottom: 0;\n}\n\n.cweb-checkbox.type-regular .cweb-checkbox-icon-container {\n  width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n}\n\n.cweb-checkbox.type-regular.hasError .cweb-checkbox-icon-container {\n  border: 1px solid #ff6266;\n}\n\n.cweb-checkbox.type-regular .cweb-checkbox-icon {\n  display: block;\n}\n\n.cweb-checkbox.type-regular.is-focused .cweb-checkbox-icon-container {\n  border-color: #0074dd;\n}\n\n.cweb-checkbox.type-regular.is-checked .cweb-checkbox-icon {\n  width: 0.5rem;\n  height: 0.5rem;\n  padding: 4px;\n  background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2210%22 height%3D%228%22 viewBox%3D%220 0 10 8%22 fill%3D%22none%22%3E    %3Cpath d%3D%22M9.207 0.792787C9.39447 0.980314 9.49979 1.23462 9.49979 1.49979C9.49979 1.76495 9.39447 2.01926 9.207 2.20679L4.207 7.20679C4.01947 7.39426 3.76516 7.49957 3.5 7.49957C3.23484 7.49957 2.98053 7.39426 2.793 7.20679L0.793 5.20679C0.610842 5.01818 0.510047 4.76558 0.512326 4.50339C0.514604 4.24119 0.619773 3.99038 0.805181 3.80497C0.990589 3.61956 1.2414 3.51439 1.5036 3.51211C1.7658 3.50983 2.0184 3.61063 2.207 3.79279L3.5 5.08579L7.793 0.792787C7.98053 0.605316 8.23484 0.5 8.5 0.5C8.76516 0.5 9.01947 0.605316 9.207 0.792787Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-checkbox.type-regular.is-indeterminate .cweb-checkbox-icon {\n  width: 0.5rem;\n  height: 0.5rem;\n  padding: 4px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%222%22 viewBox%3D%220 0 10 2%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M9 -4.37114e-08C9.55228 -1.95703e-08 10 0.447715 10 1C10 1.55228 9.55228 2 9 2L1 2C0.447716 2 -6.78525e-08 1.55228 -4.37114e-08 1C-1.95703e-08 0.447715 0.447715 -4.17544e-07 1 -3.93402e-07L9 -4.37114e-08Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-checkbox.type-regular.is-disabled.show-cross-when-disabled .cweb-checkbox-icon {\n  width: 10px;\n  height: 10px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2211px%22 height%3D%2211px%22 viewBox%3D%220 0 11 11%22 version%3D%221.1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cg stroke%3D%22none%22 stroke-width%3D%221%22 fill%3D%22none%22 fill-rule%3D%22evenodd%22 stroke-linecap%3D%22round%22%3E        %3Cg transform%3D%22translate(-6.000000%2C -7.000000)%22 stroke%3D%22%232D2D2D%22 stroke-width%3D%222%22%3E            %3Cpath d%3D%22M7%2C17 L16%2C8 M16%2C17 L7%2C8%22 %2F%3E        %3C%2Fg%3E    %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n  opacity: 0.6;\n}\n\n.cweb-checkbox.type-switch .cweb-checkbox-label {\n  display: flex;\n  align-items: center;\n  margin-bottom: 0;\n  width: 56px;\n  height: 28px;\n  position: relative;\n}\n\n.cweb-checkbox.type-switch .cweb-checkbox-icon-container {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: #d1d5db;\n  border-radius: 16px;\n}\n\n.cweb-checkbox.type-switch .cweb-checkbox-icon-container:after {\n  position: relative;\n  display: block;\n  content: \"\";\n  height: 20px;\n  width: 20px;\n  top: 4px;\n  left: 4px;\n  background-color: white;\n  border-radius: 50%;\n  transition: all 0.2s ease;\n}\n\n.cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container {\n  background-color: #6abfa6;\n}\n\n.cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container:after {\n  left: 32px;\n}\n";
 styleInject(css_248z$5);
@@ -2289,6 +2283,7 @@ function LoadingIndicator(_ref) {
     className: containerClassName
   }), /*#__PURE__*/React__default.createElement("img", {
     src: asSpinner ? spinnerToRender : img$e,
+    "data-chromatic": "ignore",
     className: classNames("text-gray-600 fill-current stroke-current", {
       "h-4 w-4": asSpinner,
       "h-12 w-12": !asSpinner
@@ -2920,6 +2915,7 @@ var ListItem = function ListItem(_ref) {
     className: "w-6 h-6"
   }), !loadIconError && icon && typeof icon === "string" && /*#__PURE__*/React__default.createElement("img", {
     src: icon,
+    "data-chromatic": "ignore",
     alt: "list-item-icon",
     className: "w-6 h-6 text-sm",
     onLoad: onListItemIconLoad,
@@ -3285,7 +3281,7 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
     type: "strong",
     text: groupTitle || "",
     className: " ml-4"
-  }), " ", ":"), /*#__PURE__*/React__default.createElement(Checkbox, {
+  }), " "), /*#__PURE__*/React__default.createElement(Checkbox, {
     onChange: handleGroupClick,
     className: "ml-auto",
     isChecked: groupCheckboxState === CheckboxState.CHECKED,
@@ -3332,6 +3328,170 @@ var CheckboxList = function CheckboxList(_ref) {
   }));
 };
 
+var SearchIcon = function SearchIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    className: props.className,
+    onClick: props.onClick,
+    role: props.onClick ? "button" : undefined,
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M15.5 13.9996H14.71L14.43 13.7296C15.63 12.3296 16.25 10.4196 15.91 8.38965C15.44 5.60965 13.12 3.38965 10.32 3.04965C6.09001 2.52965 2.53002 6.08965 3.05002 10.3196C3.39002 13.1196 5.61002 15.4396 8.39002 15.9096C10.42 16.2496 12.33 15.6296 13.73 14.4296L14 14.7096V15.4996L18.25 19.7496C18.66 20.1596 19.33 20.1596 19.74 19.7496C20.15 19.3396 20.15 18.6696 19.74 18.2596L15.5 13.9996ZM9.50002 13.9996C7.01002 13.9996 5.00002 11.9896 5.00002 9.49965C5.00002 7.00965 7.01002 4.99965 9.50002 4.99965C11.99 4.99965 14 7.00965 14 9.49965C14 11.9896 11.99 13.9996 9.50002 13.9996Z",
+    fill: "currentColor"
+  }));
+};
+
+var SearchInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, props, {
+    icon: SearchIcon,
+    type: "text",
+    clearable: true,
+    ref: ref
+  }));
+});
+
+var transformToGroups = function transformToGroups(items) {
+  var pinned = items.find(function (option) {
+    return option.isPinned;
+  });
+  var itemsWithGroup = items.filter(function (option) {
+    return option.group;
+  });
+  var groups = Object.entries(groupBy(itemsWithGroup, "group")).map(function (group) {
+    return {
+      title: group[0],
+      items: group[1].sort(function (a, b) {
+        return a.label > b.label ? 1 : b.label > a.label ? -1 : 0;
+      })
+    };
+  });
+  var itemsWithoutGroup = items.filter(function (option) {
+    return !option.group;
+  });
+  var restGroup = {
+    name: undefined,
+    items: itemsWithoutGroup
+  };
+
+  if (pinned) {
+    var myGroup = {
+      items: [pinned]
+    };
+    return [myGroup].concat(groups, [restGroup]);
+  }
+
+  return [].concat(groups, [restGroup]);
+};
+
+var CheckboxListModal = function CheckboxListModal(_ref) {
+  var texts = _ref.texts,
+      initialItems = _ref.initialItems,
+      isLoadingInitialItems = _ref.isLoadingInitialItems,
+      isOpen = _ref.isOpen,
+      onSave = _ref.onSave,
+      onCloseClick = _ref.onCloseClick,
+      _ref$filterItem = _ref.filterItem,
+      filterItem = _ref$filterItem === void 0 ? function () {
+    return true;
+  } : _ref$filterItem,
+      className = _ref.className,
+      _ref$hasSearch = _ref.hasSearch,
+      hasSearch = _ref$hasSearch === void 0 ? false : _ref$hasSearch;
+  var containerClassName = classNames(className);
+
+  var _useState = React.useState([]),
+      items = _useState[0],
+      setItems = _useState[1];
+
+  var _useState2 = React.useState([]),
+      visibleItems = _useState2[0],
+      setVisibleItems = _useState2[1];
+
+  var _useState3 = React.useState([]),
+      groups = _useState3[0],
+      setGroups = _useState3[1];
+
+  var _useState4 = React.useState(""),
+      search = _useState4[0],
+      setSearch = _useState4[1];
+
+  React.useEffect(function () {
+    setItems(initialItems);
+  }, [initialItems]);
+  React.useEffect(function () {
+    setVisibleItems(items.filter(function (item) {
+      return filterItem(item, search);
+    }));
+  }, [items, search]);
+  React.useEffect(function () {
+    setGroups(transformToGroups(visibleItems));
+  }, [visibleItems]);
+
+  var handleOnItemChange = function handleOnItemChange(event) {
+    var updatedItems = [].concat(items);
+    var index = updatedItems.findIndex(function (item) {
+      return item.id === event.id;
+    });
+    updatedItems[index].isChecked = event.newCheckedValue;
+    setItems(updatedItems);
+  };
+
+  var handleOnCloseClick = function handleOnCloseClick(event) {
+    event.stopPropagation();
+    onCloseClick();
+  };
+
+  var handleOnSaveClick = function handleOnSaveClick() {
+    onSave(items.filter(function (item) {
+      return item.isChecked;
+    }));
+    onCloseClick();
+  };
+
+  var handleOnSearchChange = function handleOnSearchChange(event) {
+    var _event$currentTarget$;
+
+    setSearch((_event$currentTarget$ = event.currentTarget.value) != null ? _event$currentTarget$ : "");
+  };
+
+  var closeButton = /*#__PURE__*/React.createElement(SecondaryButton, {
+    text: texts.cancelLabel,
+    onClick: handleOnCloseClick,
+    key: "close-checkbox-list-modal",
+    className: "mr-2"
+  });
+  var saveButton = /*#__PURE__*/React.createElement(PrimaryButton, {
+    text: texts.confirmLabel,
+    onClick: handleOnSaveClick,
+    key: "save-selected-checkbox-list-items"
+  });
+  return /*#__PURE__*/React.createElement(ModalWithButtons, {
+    isOpen: isOpen,
+    title: texts.title,
+    onCloseClick: handleOnCloseClick,
+    withPadding: true,
+    shouldCloseOnOverlayClick: true,
+    className: containerClassName,
+    buttons: [closeButton, saveButton],
+    buttonsAlignment: "justify-end"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "max-h-135 overflow-y-auto pr-4"
+  }, isLoadingInitialItems && /*#__PURE__*/React.createElement(LoadingIndicator, null), hasSearch && !isLoadingInitialItems && /*#__PURE__*/React.createElement(SearchInput, {
+    className: "w-130 mb-2",
+    value: search,
+    placeholder: texts.searchPlaceHolder,
+    onChange: handleOnSearchChange
+  }), !isLoadingInitialItems && (items == null ? void 0 : items.length) > 0 && /*#__PURE__*/React.createElement(CheckboxList, {
+    groups: groups,
+    onChange: handleOnItemChange
+  }), !isLoadingInitialItems && (items == null ? void 0 : items.length) === 0 && /*#__PURE__*/React.createElement(Text, {
+    text: texts.emptyState
+  })));
+};
+
 var TEXT_TYPE_OPTIONS = {
   DEFAULT: "default",
   STRONG: "strong",
@@ -5301,31 +5461,6 @@ function ViewItem(_ref) {
   })));
 }
 
-var SearchIcon = function SearchIcon(props) {
-  return /*#__PURE__*/React__default.createElement("svg", {
-    className: props.className,
-    onClick: props.onClick,
-    role: props.onClick ? "button" : undefined,
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M15.5 13.9996H14.71L14.43 13.7296C15.63 12.3296 16.25 10.4196 15.91 8.38965C15.44 5.60965 13.12 3.38965 10.32 3.04965C6.09001 2.52965 2.53002 6.08965 3.05002 10.3196C3.39002 13.1196 5.61002 15.4396 8.39002 15.9096C10.42 16.2496 12.33 15.6296 13.73 14.4296L14 14.7096V15.4996L18.25 19.7496C18.66 20.1596 19.33 20.1596 19.74 19.7496C20.15 19.3396 20.15 18.6696 19.74 18.2596L15.5 13.9996ZM9.50002 13.9996C7.01002 13.9996 5.00002 11.9896 5.00002 9.49965C5.00002 7.00965 7.01002 4.99965 9.50002 4.99965C11.99 4.99965 14 7.00965 14 9.49965C14 11.9896 11.99 13.9996 9.50002 13.9996Z",
-    fill: "currentColor"
-  }));
-};
-
-var SearchInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, props, {
-    icon: SearchIcon,
-    type: "text",
-    clearable: true,
-    ref: ref
-  }));
-});
-
 /**
  * Decorator for any input component. Adds a label and additional information to be shown.
  *
@@ -6362,6 +6497,7 @@ exports.ChatBoxIcon = ChatBoxIcon;
 exports.CheckIcon = CheckIcon;
 exports.Checkbox = Checkbox;
 exports.CheckboxList = CheckboxList;
+exports.CheckboxListModal = CheckboxListModal;
 exports.ChevronDoubleIcon = ChevronDoubleIcon;
 exports.ConfirmationDialog = ConfirmationDialog;
 exports.CrossIcon = CrossIcon;