@luscii-healthtech/web-ui 0.1.0

package/src/components/MultiSelect/MultiSelect.js

@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+
+import Checkbox from "../Checkbox/Checkbox";
+import { TEXT_TYPE_OPTIONS } from "../Text/LegacyText";
+
+import { handleImplicitSelect } from "./MultiSelectUtils";
+
+import "./MultiSelect.scss";
+
+export function MultiSelect({
+  checkboxList,
+  radioLabel,
+  onChange,
+  validationError,
+  name,
+  implicitSelect,
+  radioOnDemand,
+}) {
+  const [list, setList] = useState(checkboxList);
+
+  useEffect(() => {
+    onChange({
+      target: {
+        name,
+        value: list,
+      },
+    });
+  }, [list]);
+
+  function handleChange(event, indexSelected) {
+    let newList = [...list];
+
+    const isChecked = event.target.checked;
+    const updateCheckbox = { ...list[indexSelected], isChecked: isChecked, isOn: false };
+    newList.splice(indexSelected, 1, updateCheckbox);
+
+    if (implicitSelect) {
+      newList = handleImplicitSelect(implicitSelect, event, newList, "isChecked");
+    }
+    setList(newList);
+  }
+
+  function handleRadioChange(event, indexSelected) {
+    let newList = [...list];
+
+    const isChecked = event.target.checked;
+    const updateCheckbox = { ...list[indexSelected], isOn: isChecked };
+    newList.splice(indexSelected, 1, updateCheckbox);
+
+    if (implicitSelect) {
+      newList = handleImplicitSelect(implicitSelect, event, newList, "isOn");
+    }
+
+    setList(newList);
+  }
+
+  return (
+    <ul>
+      {list.map((checkbox, index) => {
+        const text = [checkbox.name];
+
+        if (checkbox.description && checkbox.description !== checkbox.name) {
+          text.push(checkbox.description);
+        }
+
+        return (
+          <div className="cweb-multiselect" key={checkbox.identifier}>
+            <Checkbox
+              text={text.join(" - ")}
+              name={checkbox.identifier}
+              isChecked={checkbox.isChecked || false}
+              onChange={(event) => handleChange(event, index)}
+              className="cweb-multiselect-checkbox"
+              textType={TEXT_TYPE_OPTIONS.SMALL_DARK}
+              error={validationError}
+              key={checkbox.identifier}
+            />
+
+            {radioOnDemand && (
+              <div className="cweb-switch-wrapper">
+                <p className="cweb-switch-title">{radioLabel}</p>
+                <Checkbox
+                  type="switch"
+                  name={`${checkbox.identifier}-toggle`}
+                  isChecked={checkbox.isOn}
+                  onChange={(event) => handleRadioChange(event, index)}
+                  textType={TEXT_TYPE_OPTIONS.SMALL_DARK}
+                  error={validationError}
+                  className="cweb-multiselect-switch"
+                  isDisabled={!checkbox.isChecked}
+                  key={checkbox.identifier}
+                />
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </ul>
+  );
+}
+
+MultiSelect.propTypes = {
+  name: PropTypes.string,
+  checkboxList: PropTypes.arrayOf(
+    PropTypes.shape({
+      isChecked: PropTypes.bool,
+      name: PropTypes.string.isRequired,
+      description: PropTypes.string,
+      identifier: PropTypes.string.isRequired,
+    })
+  ),
+  onChange: PropTypes.func,
+  validationError: PropTypes.string,
+  implicitSelect: PropTypes.object,
+  radioOnDemand: PropTypes.bool,
+};

package/src/components/MultiSelect/MultiSelect.scss

@@ -0,0 +1,29 @@
+@import "../../styles/colors";
+
+.cweb-multiselect {
+  display: flex;
+  .cweb-multiselect-checkbox {
+    margin-bottom: 0px;
+    margin-top: 0.5rem;
+    width: 100%;
+    text-transform: capitalize;
+  }
+
+  .cweb-switch-wrapper {
+    display: flex;
+    .cweb-multiselect-switch {
+      width: 50px;
+      .cweb-checkbox.type-switch.is-checked {
+        .cweb-checkbox-icon-container {
+          background-color: $color-branding-support-1;
+        }
+      }
+    }
+    .cweb-switch-title {
+      width: 100px;
+      color: $color-text-lighter;
+      font-size: 16px;
+      line-height: 1.8em;
+    }
+  }
+}

package/src/components/MultiSelect/MultiSelectUtils.js

@@ -0,0 +1,23 @@
+export function handleImplicitSelect(implicitSelected, event, list, property) {
+  /*For certain values, if one checkbox is selected
+  other checkboxes have to be selected/unselected automatically */
+  const newList = [...list];
+  const selectCheckboxName = event.target.name;
+  const isChecked = event.target.checked;
+  const implicitSelectedValues = implicitSelected[selectCheckboxName];
+
+  if (implicitSelectedValues) {
+    implicitSelectedValues.forEach((value) => {
+      const selectedIndex = newList.findIndex((checkbox) => value === checkbox.identifier);
+      let upadteCheckbox;
+      if (property === "isChecked") {
+        //if normal checkbox is false the switcher must be set to false as well
+        upadteCheckbox = { ...newList[selectedIndex], isChecked: isChecked, isOn: false };
+      } else {
+        upadteCheckbox = { ...newList[selectedIndex], [property]: isChecked };
+      }
+      newList.splice(selectedIndex, 1, upadteCheckbox);
+    });
+  }
+  return newList;
+}

package/src/components/NavMenu/NavLayout.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import classNames from "classnames";
+
+export interface NavMenuLayoutProps {
+  menu: JSX.Element;
+  children: JSX.Element | JSX.Element[]; //rendered as the page
+  patientSidebar?: JSX.Element; //if passed will show the patients sidebar
+  isNavDisabled?: boolean; //don't show any navigation, for instance when constrained to a single patient
+  disableScrolling?: boolean;
+}
+
+/**
+ *
+ * @param props {NavMenuLayoutProps} - explaining specifically the `disableScrolling` prop:
+ *
+ * The patient overview page has some challenges we want to overcome in regards to the multiple scrollable
+ * content (the charts and the action bar with alerts, etc).
+ *
+ * In order to have the setup working on the patient overview page and the rest of the application, we have to
+ * progamatically disable/enable if that location will have a normal scrolling mechanism with specific margin/padding,
+ * or we will need to let the components take care of that.
+ */
+export const NavLayout = (props: NavMenuLayoutProps): JSX.Element => {
+  return (
+    <div className={"flex flex-col mb-3 lg:mb-0 lg:flex-row h-full w-full"}>
+      {!props.isNavDisabled && (
+        <>
+          {props.menu}
+          {props.patientSidebar && props.patientSidebar}
+        </>
+      )}
+      <div
+        data-test-id="page-main-content"
+        className={classNames(["w-full", { "max-h-screen overflow-y-auto px-4 lg:px-8": !props.disableScrolling }])}
+      >
+        {props.children}
+      </div>
+    </div>
+  );
+};

package/src/components/NavMenu/NavMenu.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { useState } from "react";
+
+import Button from "../Button/Button";
+
+import { NavMenuContent } from "./NavMenuContent";
+
+export function NavMenu(props) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleToggleOpen = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <>
+      <div className={"hidden h-screen lg:flex"}>
+        <NavMenuContent items={props.items} />
+      </div>
+      <div className={"lg:hidden relative bg-nav-header w-screen flex items-center p-2 shadow-lg"}>
+        <Button
+          hasIcon={true}
+          role="secondaryDark"
+          iconName={isOpen ? "close" : "hamburger"}
+          onClick={handleToggleOpen}
+        />
+      </div>
+      {isOpen && (
+        <div className="absolute z-20">
+          <NavMenuContent items={props.items} />
+        </div>
+      )}
+    </>
+  );
+}

package/src/components/NavMenu/NavMenuContent.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+import { NavMenuItem, NavMenuItemProps } from "./NavMenuItem";
+
+interface NavMenuContentProps {
+  items: Array<NavMenuItemProps>;
+}
+
+export const NavMenuContent = (props: NavMenuContentProps): JSX.Element => {
+  return (
+    <div className={"flex flex-col bg-nav-menu w-46 pl-1 py-2 lg:relative shadow-lg"}>
+      {props.items.map((item, index) => {
+        if (item.type === "separator") {
+          return <div key={`${item.type}-${index}`} className={"border-b ml-3 border-slate-600"} />;
+        } else if (item.type === "spacer") {
+          return <div key={`${item.type}-${index}`} className={"mt-auto"} />;
+        } else {
+          return <NavMenuItem {...item} key={item.title} />;
+        }
+      })}
+    </div>
+  );
+};

package/src/components/NavMenu/NavMenuItem.tsx

@@ -0,0 +1,96 @@
+import * as React from "react";
+import { useState } from "react";
+import { navigate } from "@reach/router";
+import classNames from "classnames";
+
+import { TextColor, Text } from "../Text/Text";
+
+export interface NavMenuItemProps {
+  href?: string;
+  linkTo?: string;
+  title: string;
+  isSelected: boolean;
+  img: string;
+  imgOnHover: string;
+  dataTestId: string;
+  gtmEvent?: string;
+  isExternal?: boolean;
+  type?: "separator" | "spacer" | "base" | void;
+  track?: (event: string) => void;
+}
+
+export const NavMenuItem = (props: NavMenuItemProps): JSX.Element => {
+  const [currentImg, setCurrentImg] = useState(props.isSelected ? props.imgOnHover : props.img);
+  const [textColor, setTextColor] = useState<TextColor>(props.isSelected ? "white" : "gray-200");
+
+  const classes = classNames(
+    [
+      "flex",
+      "flex-row",
+      "items-center",
+      "w-auto",
+      "rounded",
+      "px-2",
+      "py-1",
+      "my-2",
+      "mx-2",
+      "hover:bg-gray-600",
+      "transition",
+      "ease-in",
+      "duration-150",
+      "lg:last:pb-2",
+      "focus:outline-primary",
+    ],
+    {
+      "bg-nav-menu": !props.isSelected,
+      "bg-gray-600": props.isSelected,
+    }
+  );
+
+  const handleOnMouseOver = () => {
+    if (!props.isSelected) {
+      setCurrentImg(props.imgOnHover);
+      setTextColor("white");
+    }
+  };
+
+  const handleOnMouseOut = () => {
+    if (!props.isSelected) {
+      setCurrentImg(props.img);
+      setTextColor("gray-200");
+    }
+  };
+
+  return (
+    <a
+      href={props.href ?? props.linkTo ?? "#"}
+      data-test-id={props.dataTestId}
+      className={classes}
+      onMouseOver={handleOnMouseOver}
+      onMouseOut={handleOnMouseOut}
+      onClick={handleMenuClick}
+    >
+      <img src={currentImg} className={"mr-4 ml-0"} />
+      <Text type={"strong"} text={props.title} color={textColor} />
+    </a>
+  );
+
+  function handleMenuClick(event: React.MouseEvent<HTMLElement>) {
+    if (event.metaKey || event.ctrlKey) {
+      // if ctrl or meta key are held on click, allow default behavior of opening link in new tab
+      return;
+    }
+
+    event.preventDefault();
+
+    props.track && props.gtmEvent && props.track(props.gtmEvent);
+
+    if (props.isExternal) {
+      window.open(props.href, "_blank");
+    } else if (props.href) {
+      window.location.assign(props.href);
+    } else if (props.linkTo) {
+      navigate(props.linkTo);
+    }
+  }
+};

package/src/components/NotificationBanner/NotificationBanner.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import classNames from "classnames";
+
+import { Text } from "../Text/Text";
+import { TextLink } from "../TextLink/TextLink";
+
+export type NotificationBannerColor = "base" | "blue" | "red" | "green" | "amber";
+
+export interface NotificationBannerLinkProps {
+  text: string;
+  enabled: boolean;
+  handleClick?: () => void;
+}
+
+interface NotificationBannerProps {
+  text: string;
+  color?: NotificationBannerColor;
+  icon?: JSX.Element;
+  linkProps?: NotificationBannerLinkProps;
+  className?: string;
+}
+
+export const NotificationBanner = (props: NotificationBannerProps): JSX.Element => {
+  const classes = classNames(
+    "w-full px-6 py-2 flex flex-row items-center border border-solid rounded",
+    props.className,
+    {
+      "bg-slate-100 border-slate-700": props.color === "base",
+      "bg-blue-100 border-blue-700": props.color === "blue",
+      "bg-red-100 border-red-700": props.color === "red",
+      "bg-green-100 border-green-700": props.color === "green",
+      "bg-yellow-100 border-yellow-700": props.color === "amber",
+    }
+  );
+
+  return (
+    <div className={classes}>
+      {props.icon}
+      <Text className="first:ml-0 ml-4" text={props.text} color={props.color} />
+      {props.linkProps && (
+        <TextLink
+          className="ml-4"
+          text={props.linkProps.text}
+          enabled={props.linkProps.enabled}
+          rel="noopener"
+          target="_blank"
+          onClick={props.linkProps.handleClick}
+        />
+      )}
+    </div>
+  );
+};
+
+NotificationBanner.defaultProps = {
+  color: "base",
+  onButtonClick: undefined,
+};

package/src/components/Page/CRUDPage.js

@@ -0,0 +1,123 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+
+import LoadingIndicator from "../LoadingIndicator/LoadingIndicator";
+import LegacyTitle, { TITLE_TYPE_OPTIONS } from "../Title/LegacyTitle";
+import Button, { BUTTON_ROLES } from "../Button/Button";
+import Line from "../Line/Line";
+import { NavLayout } from "../NavMenu/NavLayout";
+import { Steps } from "../Steps/Steps";
+
+import "./CRUDPage.scss";
+
+function CRUDPage({
+  dataTestId = "page",
+  title,
+  stepTitles,
+  currentStep = 1,
+  submitButtonProps,
+  deleteButtonProps,
+  cancelButtonProps,
+  icon,
+  className,
+  children,
+  isLoading,
+  isSubmitting,
+  navMenuComponent,
+  localization,
+}) {
+  const mergedClasses = classNames("cweb-crud-page max-w-3xl", className);
+  const containerClassnames = classNames("cweb-crud-page-container mb-20");
+
+  const submitButton = submitButtonProps && (
+    <Button
+      data-test-id="submit-button"
+      key="submit-button"
+      /* eslint-disable-next-line */
+      onClick={submitButtonProps.handler}
+      role={BUTTON_ROLES.PRIMARY}
+      text={submitButtonProps.name}
+      isPending={isSubmitting}
+    />
+  );
+  const deleteButton = deleteButtonProps && (
+    <Button
+      data-test-id="delete-button"
+      key="delete-button"
+      /* eslint-disable-next-line */
+      onClick={deleteButtonProps.handler}
+      role={BUTTON_ROLES.NEGATIVE}
+      text={deleteButtonProps.name}
+    />
+  );
+  const cancelButton = cancelButtonProps && (
+    <Button
+      data-test-id="cancel-button"
+      key="cancel-button"
+      /* eslint-disable-next-line */
+      onClick={cancelButtonProps.handler}
+      role={BUTTON_ROLES.SECONDARY}
+      text={cancelButtonProps.name}
+    />
+  );
+
+  const renderHeader = () => {
+    return (
+      <div className="flex flex-row justify-start align-center">
+        <img id="title-icon" src={icon} className="mr-4 w-11 h-11" alt={"title icon"} />
+        <LegacyTitle id="title-text" text={title} type={TITLE_TYPE_OPTIONS.BOLD} />
+      </div>
+    );
+  };
+
+  return (
+    <div className={containerClassnames}>
+      <NavLayout menu={navMenuComponent}>
+        <>
+          {isLoading && (
+            <div className={classNames(mergedClasses, "cweb-crud-page-loading-container")}>
+              <div className="flex flex-row justify-start align-center">{renderHeader()}</div>
+              <LoadingIndicator className="crud-page-loader" asModal={false} />
+            </div>
+          )}
+
+          {!isLoading && (
+            <div className={mergedClasses} data-test-id={dataTestId}>
+              <div className="flex flex-row justify-start align-center">{renderHeader()}</div>
+
+              <div className={"cweb-crud-page-form-container"}>
+                {stepTitles && stepTitles.length > 0 && (
+                  <Steps orderedStepTitles={stepTitles} currentStep={currentStep} className={"mb-4"} localization={localization}/>
+                )}
+                {children}
+                <Line
+                  left={[cancelButton, deleteButton]}
+                  right={[submitButton]}
+                  className={"cweb-crud-page-button-line"}
+                />
+              </div>
+            </div>
+          )}
+        </>
+      </NavLayout>
+    </div>
+  );
+}
+
+CRUDPage.propTypes = {
+  isLoading: PropTypes.bool,
+  title: PropTypes.string.isRequired,
+  stepTitles: PropTypes.array,
+  currentStep: PropTypes.number,
+  submitButtonProps: PropTypes.shape({ name: PropTypes.string, handler: PropTypes.func }),
+  deleteButtonProps: PropTypes.shape({ name: PropTypes.string, handler: PropTypes.func }),
+  cancelButtonProps: PropTypes.shape({ name: PropTypes.string, handler: PropTypes.func }),
+  className: PropTypes.string,
+  icon: PropTypes.string,
+  isSubmitting: PropTypes.bool,
+  navMenuComponent: PropTypes.elementType,
+  localization: PropTypes.object,
+};
+
+export default CRUDPage;

package/src/components/Page/CRUDPage.scss

@@ -0,0 +1,32 @@
+@import "../../styles/colors";
+
+.cweb-crud-page {
+  width: 100%;
+  margin: 36px auto 0;
+
+  &-form-container {
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 24px;
+    margin-top: 16px;
+  }
+
+  &-button-line {
+    border-top: 1px solid $color-divider;
+    padding-top: 16px;
+    margin-top: 16px;
+  }
+
+  &-loading-container {
+    height: 90vh; /* puting this in 100vh causes an overflow bug */
+    overflow-y: hidden;
+    position: relative;
+
+    .crud-page-loader {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+}

package/src/components/Page/Page.js

@@ -0,0 +1,102 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+
+//import Breadcrumbs from "../Breadcrumbs/Breadcrumbs";
+import LoadingIndicator from "../LoadingIndicator/LoadingIndicator";
+//import { SmartNavMenu } from "../../components/NavMenu/SmartNavMenu";
+import { NavLayout } from "../NavMenu/NavLayout";
+import { Title } from "../Title/Title";
+//import { shouldPageShowFeedbackBlock } from "../../common/utils/locationUtils";
+//import { FeedbackBlock } from "../FeedbackBlock/FeedbackBlock";
+//import { ERROR_PAGE_ID } from "../../components/ErrorPages/ErrorPage";
+
+import "./Page.scss";
+
+//TODO this page needs to be refactored
+
+/**
+ * Renders page's content, if `isLoading` is false otherwise shows loading indicator.
+ *
+ * `breadcrumbs`, `title` and `content` can be lazy properties, that is parameterless functions which return actual value.
+ * `children` property has priority over `content` property.
+ *
+ * @typedef {{ name?: string, icon?: string|Object, link?: string}} Breadcrumb
+ *
+ */
+function Page({
+  dataTestId = "page",
+  breadcrumbs,
+  title,
+  accessories,
+  accessoryPosition = "right",
+  className,
+  children,
+  content,
+  isLoading = false,
+  isPolling = false,
+  spinnerColor = "blue",
+  navLayoutProps = {},
+  showFeedbackBlock = false,
+  feedbackBlock = <></>,
+  navMenu,
+  id,
+}) {
+  const mergedPageClasses = classNames("cweb-page", className);
+  const containerClassnames = classNames("cweb-page-container");
+
+  if (isLoading) {
+    return (
+      <div className={mergedPageClasses}>
+        <LoadingIndicator asModal={false} />
+      </div>
+    );
+  }
+
+  const maybeTitle = title instanceof Function ? title() : title;
+
+  const accessoryClasses = classNames("cweb-page-header mb-4", {
+    [`accessory-${accessoryPosition}`]: true,
+  });
+
+  const accessoriesContent = accessories instanceof Function ? accessories() : accessories;
+  const childrenOrContentProp = children || (content instanceof Function ? content() : content);
+
+  return (
+    <div id={id} className={containerClassnames}>
+      <NavLayout menu={navMenu} {...navLayoutProps}>
+        <div className={mergedPageClasses} data-test-id={dataTestId}>
+          <div className={accessoryClasses}>
+            <Title data-test-id={`${dataTestId}-title`} text={maybeTitle} />
+            {isPolling && <LoadingIndicator asSpinner={true} className={"page-spinner"} spinnerColor={spinnerColor} />}
+            {accessoriesContent}
+          </div>
+          {childrenOrContentProp}
+        </div>
+
+        {!isLoading && feedbackBlock}
+      </NavLayout>
+    </div>
+  );
+}
+
+const breadcrumbItemShape = PropTypes.shape({
+  name: PropTypes.string,
+  icon: PropTypes.string,
+  link: PropTypes.string,
+});
+
+Page.propTypes = {
+  breadcrumbs: PropTypes.oneOfType([PropTypes.arrayOf(breadcrumbItemShape), PropTypes.func]),
+  isLoading: PropTypes.bool,
+  isFetching: PropTypes.bool,
+  spinnerColor: PropTypes.oneOf(["blue", "gray"]),
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  accessories: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  accessoryPosition: PropTypes.oneOf(["right", "bottom", "left"]),
+  content: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.func]),
+  id: PropTypes.string,
+  navLayoutProps: PropTypes.object,
+};
+
+export default Page;