@luscii-healthtech/web-ui 2.9.0 → 2.10.2

package/src/components/SettingsMenuButton/SettingsMenuButton.tsx

@@ -1,111 +0,0 @@
-import classNames from "classnames";
-import React, { useEffect, useRef, useState } from "react";
-
-import useOutsideClick from "../../utils/useOutsideClick";
-import Button from "../Button/Button";
-import Checkbox from "../Checkbox/Checkbox";
-import { IconProps } from "../Icons/types/IconProps.type";
-import Text from "../Text/Text";
-
-export interface ConfigurationItem {
-  itemId: string;
-  itemName: string;
-  on: boolean;
-}
-
-export interface SettingsMenuButtonProps {
-  configuration: ConfigurationItem[];
-  onConfigurationChange: (newConfig: ConfigurationItem) => void;
-  shiftMenuTo?: "right" | "right-md" | "left" | "left-md";
-  buttonTitle?: string;
-  menuTitle?: string;
-  iconComponent: React.FunctionComponent<IconProps>;
-}
-
-export const SettingsMenuButton = (props: SettingsMenuButtonProps): JSX.Element => {
-  const {
-    configuration: configFromProps = [],
-    onConfigurationChange,
-    shiftMenuTo,
-    buttonTitle,
-    iconComponent,
-    menuTitle,
-  } = props;
-  const [innerConfiguration, setInnerConfiguration] = useState(configFromProps);
-  const [showMenu, setShowMenu] = useState(false);
-
-  const menuRef = useRef<HTMLDivElement | null>(null);
-
-  useOutsideClick(menuRef, () => {
-    if (showMenu) {
-      setShowMenu(false);
-    }
-  });
-
-  useEffect(() => {
-    setInnerConfiguration(configFromProps);
-  }, [configFromProps]);
-
-  const handleShowMenu = () => {
-    setShowMenu(true);
-  };
-
-  const handleOnVibilitySwitchChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { id, name, checked } = event.currentTarget;
-
-    const newConfig = innerConfiguration.find((config) => config.itemId === id && config.itemName === name) as ConfigurationItem;
-
-    onConfigurationChange({ ...newConfig, on: checked });
-  };
-
-  if (!iconComponent) {
-    console.error("A an icon component is required to use this component, please make sure to pass it as a prop. ");
-    return <span>Invalid props passed to this component.</span>;
-  }
-
-  return (
-    <div onClick={handleShowMenu} className="relative">
-      <Button dynamicIcon={iconComponent} onClick={handleShowMenu} text={buttonTitle} role="tertiary" />
-
-      <div
-        ref={menuRef}
-        className={classNames(
-          "cursor-default transition-all transform duration-300",
-          "absolute -top-1 z-30",
-          "rounded w-80 max-h-78 overflow-y-auto",
-          "bg-white shadow-md",
-          "border border-slate-300",
-          {
-            "-left-54": shiftMenuTo === "left",
-            "-right-54": shiftMenuTo === "right",
-            "-left-68": shiftMenuTo === "left-md",
-            "-right-68": shiftMenuTo === "right-md",
-            "transform -translate-x-1/2 left-1/2": !shiftMenuTo, // centering the menu in the Y axis of the button
-          },
-          {
-            "opacity-0 pointer-events-none": !showMenu,
-            "opacity-100": showMenu,
-          }
-        )}
-      >
-        {menuTitle && (
-          <div className="w-full p-3 h-11 bg-slate-50">
-            <Text type="sm" className="uppercase" text={menuTitle} />
-          </div>
-        )}
-        {innerConfiguration.map((innerConfig) => (
-          <div key={innerConfig.itemId} className="flex items-center justify-between w-full p-3 h-11">
-            <Text text={innerConfig.itemName} />
-            <Checkbox
-              name={innerConfig.itemName}
-              id={innerConfig.itemId}
-              type="switch"
-              isChecked={innerConfig.on}
-              onChange={handleOnVibilitySwitchChanged}
-            />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};

package/src/components/Spinner/Spinner.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-
-interface SpinnerProps {
-  className?: string;
-}
-
-export const Spinner = (props: SpinnerProps): JSX.Element => {
-  return (
-    <svg
-      className={`w-5 h-5 animate-spin ${props.className}`}
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-      <path
-        className="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      />
-    </svg>
-  );
-};

package/src/components/Steps/Step.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-
-import { Text } from "../Text/Text";
-
-export interface StepProps {
-  title: string;
-  stepNumber: number;
-  active: boolean;
-  localization: { step: string };
-}
-
-export const Step = ({
-  title,
-  stepNumber,
-  active,
-  localization,
-}: StepProps): JSX.Element => {
-  const barColor = active ? "bg-blue-800" : "bg-slate-200";
-
-  return (
-    <div className={"w-full"}>
-      <div className={`w-full h-1 mb-2 rounded ${barColor}`}></div>
-      <Text
-        text={`${localization.step} ${stepNumber}`}
-        type={"strong"}
-        color={active ? "blue-800" : "slate-500"}
-      />
-      <Text text={title} type={"strong"} />
-    </div>
-  );
-};

package/src/components/Steps/Steps.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-
-import { Step } from "./Step";
-
-interface StepsProps {
-  orderedStepTitles: Array<string>;
-  currentStep: number; //start count from 1
-  className?: string;
-  localization: {step: string};
-}
-
-export const Steps = ({ orderedStepTitles, currentStep, className, localization }: StepsProps): JSX.Element => {
-  const renderedSteps = orderedStepTitles.map((stepTitle, index) => (
-    <Step
-      key={`step-${index}-${stepTitle.split(" ")[0]}`}
-      title={stepTitle}
-      stepNumber={index + 1}
-      active={index + 1 <= currentStep}
-      localization={localization}
-    />
-  ));
-
-  return <div className={`flex flex-row justify-items-stretch space-x-6 ${className}`}>{renderedSteps}</div>;
-};

package/src/components/Switcher/Switcher.js

@@ -1,58 +0,0 @@
-import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-
-import SwitcherItem from "./SwitcherItem";
-
-function Switcher({ selectedIndex = -1, onChange, className, itemClassName, items }) {
-  const [currentSelection, setCurrentSelection] = useState(selectedIndex);
-
-  useEffect(() => {
-    setCurrentSelection(selectedIndex);
-  }, [selectedIndex]);
-
-  const handleItemSelect = (index) => {
-    onChange(index);
-  };
-
-  return (
-    <ul
-      className={classNames("cweb-switcher", className, "flex list-none p-0 m-0")}
-      data-test-id={"switcher-container"}
-    >
-      {items.map((item, index) => {
-        return (
-          <SwitcherItem
-            key={JSON.stringify(item)}
-            name={item.name}
-            icon={item.icon}
-            index={index}
-            isSelected={currentSelection === index}
-            onSelect={handleItemSelect}
-            className={itemClassName}
-          />
-        );
-      })}
-    </ul>
-  );
-}
-
-Switcher.propTypes = {
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string,
-      icon: PropTypes.shape({
-        default: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-        active: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-        showBadge: PropTypes.bool,
-      }),
-      key: PropTypes.string,
-    })
-  ).isRequired,
-  onChange: PropTypes.func.isRequired,
-  selectedIndex: PropTypes.number,
-  className: PropTypes.string,
-  itemClassName: PropTypes.string,
-};
-
-export default Switcher;

package/src/components/Switcher/SwitcherItem.js

@@ -1,61 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-
-import "./SwitcherItem.scss";
-import { Text } from "../Text/Text";
-
-SwitcherItem.propTypes = {
-  name: PropTypes.string,
-  icon: PropTypes.shape({
-    default: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    active: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    showBadge: PropTypes.bool,
-  }),
-  index: PropTypes.number.isRequired,
-  isSelected: PropTypes.bool,
-  onSelect: PropTypes.func.isRequired,
-  className: PropTypes.string,
-};
-
-function SwitcherItem({ className, icon, index, isSelected = false, name, onSelect }) {
-  const handleItemClick = () => onSelect(index);
-  const itemClassName = classNames(
-    "",
-    className,
-    "flex flex-row h-11 p-2 items-center border-solid border-t border-b border-l border-slate-200 transition duration-300 cursor-pointer ",
-    "first:rounded-l-xl last:rounded-r-xl last:border-r",
-    {
-      "bg-slate-100 text-slate-500": isSelected,
-      "bg-slate-50 hover:bg-slate-100 hover:text-slate-500 text-slate-300": !isSelected,
-    }
-  );
-
-  let calculatedIcon;
-  if (icon && typeof icon.default === "string") {
-    calculatedIcon = isSelected ? (
-      <img alt="" className="" src={icon.active} />
-    ) : (
-      <img alt="" className="" src={icon.default} />
-    );
-  } else if (icon) {
-    calculatedIcon = isSelected ? icon.active : icon.default;
-  }
-
-  return (
-    <li className={itemClassName} onClick={handleItemClick}>
-      {
-        <span className="relative block">
-          {icon?.showBadge && (
-            <div className={"absolute top-0 right-0 w-2.5 h-2.5 bg-red-400 rounded-xl border-slate-50 border-2 "} />
-          )}
-          {calculatedIcon}
-        </span>
-      }
-
-      {name && <Text text={name} color={isSelected ? "base" : "gray-500"} />}
-    </li>
-  );
-}
-
-export default SwitcherItem;

package/src/components/Switcher/SwitcherItem.scss

@@ -1,67 +0,0 @@
-@import "../../styles/colors";
-@import "../../styles/layout";
-
-.cweb-switcher-item {
-  @include flexbox-layout(center, center);
-
-  .cweb-switcher-item-link {
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-    padding: 0.5rem 1rem;
-    cursor: pointer;
-
-    .cweb-switcher-item-link-icon {
-      display: flex;
-      align-items: center;
-
-      .cweb-switcher-item-link-icon-default,
-      .cweb-switcher-item-link-icon-active {
-        width: 20px;
-        height: 20px;
-      }
-
-      .cweb-switcher-item-link-icon-active {
-        display: none;
-      }
-    }
-
-    .cweb-switcher-item-link-text {
-      color: $color-text-lighter;
-      transition: color 0.4s ease;
-      padding-bottom: 0;
-    }
-
-    .cweb-switcher-item-link-icon + .cweb-switcher-item-link-text {
-      margin-left: 8px;
-      padding: 0;
-    }
-  }
-
-  &.is-selected,
-  &:hover,
-  &:active {
-    border-color: $color-primary;
-    z-index: 1;
-
-    .cweb-switcher-item-link {
-      .cweb-switcher-item-link-icon {
-        .cweb-switcher-item-link-icon-default {
-          display: none;
-        }
-
-        .cweb-switcher-item-link-icon-active {
-          display: inherit;
-        }
-      }
-
-      .cweb-switcher-item-link-text {
-        color: $color-primary;
-      }
-    }
-  }
-
-  &.is-disabled {
-    pointer-events: none;
-  }
-}

package/src/components/TabLinks/TabLinks.tsx

@@ -1,63 +0,0 @@
-import React from "react";
-import {Link, LinkGetProps, NavigateFn, WindowLocation} from "@reach/router";
-
-import Select from "../Select/Select";
-
-interface TabLinkItem {
-  url: URL;
-  text: string;
-}
-
-interface TabLinksProps {
-  patientUuid: string;
-  items: Array<TabLinkItem>;
-  navigate: NavigateFn;
-  location: WindowLocation;
-}
-
-const TabLinksSelect = ({ items, navigate, location }: { items: Array<TabLinkItem>, navigate: NavigateFn, location: WindowLocation }): JSX.Element => {
-    const options = items.map(({ url, text }) => ({ value: url, label: text }));
-
-  const handleChange = (selected: any) => {
-    navigate(selected?.value?.href);
-  };
-
-  return (
-    <Select
-      value={options.filter(({ value }) => location?.href === value?.href)}
-      options={options}
-      onChange={handleChange}
-    />
-  );
-};
-
-const TabLinks = ({ patientUuid, items, navigate, location }: TabLinksProps): JSX.Element => {
-  const linkProps = ({ isCurrent }: LinkGetProps) => {
-    return isCurrent
-      ? {
-          className:
-            "mr-2 bg-slate-100 is-selected py-3 px-4 rounded-lg text-sm font-semibold transition ease-in duration-150 text-slate-700 hover:text-slate-700 focus:text-slate-700 focus:outline-primary",
-        }
-      : {
-          className:
-            "mr-2 text-slate-500 py-3 px-4 text-sm hover:bg-slate-100 hover:text-slate-500 focus:text-slate-500 rounded-lg transition ease-in duration-150 focus:outline-primary",
-        };
-  };
-
-  return (
-    <>
-      <div className={"w-full block xl:hidden bg-white p-2"}>
-        <TabLinksSelect items={items} navigate={navigate} location={location}/>
-      </div>
-      <div className={"w-full hidden xl:flex bg-white p-2 rounded-xl"}>
-        {items.map(({ text, url }) => (
-          <Link key={`${patientUuid}_${text}`} to={url.pathname} getProps={linkProps}>
-            {text}
-          </Link>
-        ))}
-      </div>
-    </>
-  );
-};
-
-export default TabLinks;

package/src/components/Tabbar/Tabbar.tsx

@@ -1,60 +0,0 @@
-import classNames from "classnames";
-import React, { useEffect, useState } from "react";
-
-import TabbarItem, { TabItemDetails } from "./TabbarItem";
-
-export interface TabbarProps {
-  tabs?: TabItemDetails[];
-  selectedIndex?: number;
-  onSelect?: (params: { index: number; selectedTab: TabItemDetails }) => void;
-  className?: string;
-  /**
-   * If this component is being used on a container that will handle spacing, this option disables the padding, allowing the container to take over spacing.
-   */
-  withoutPadding?: boolean;
-}
-
-export { TabItemDetails };
-
-export const Tabbar = ({
-  tabs = [],
-  selectedIndex,
-  onSelect,
-  className = "",
-  withoutPadding = false,
-}: TabbarProps): JSX.Element => {
-  const [innerSelectedIndex, setInnerSelectedIndex] = useState(selectedIndex);
-
-  useEffect(() => {
-    setInnerSelectedIndex(selectedIndex);
-  }, [selectedIndex]);
-
-  function handleOnTabSelect(index: number) {
-    setInnerSelectedIndex(index);
-    onSelect?.({ index, selectedTab: tabs[index] });
-  }
-
-  return (
-    <div
-      className={classNames(
-        `flex flex-row w-full bg-white rounded-xl ${className}`,
-        { "p-2": !withoutPadding }
-      )}
-    >
-      {tabs?.map((tabItemProps, index) => {
-        const itemProps = {
-          index,
-          onSelect: handleOnTabSelect,
-          isSelected: innerSelectedIndex === index,
-          ...tabItemProps,
-        };
-
-        return (
-          <TabbarItem key={tabItemProps.dataTestId ?? index} {...itemProps} />
-        );
-      })}
-    </div>
-  );
-};
-
-export default Tabbar;

package/src/components/Tabbar/TabbarItem.tsx

@@ -1,66 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-
-import { Text } from "../Text/Text";
-import Badge from "../Badge/Badge";
-import LoadingIndicator from "../LoadingIndicator/LoadingIndicator";
-
-export interface TabItemDetails<T extends object = Record<string, unknown>> {
-  title: string | JSX.Element;
-  badgeCount?: number;
-  isLoading?: boolean;
-  dataTestId?: string;
-  extra?: T;
-}
-
-interface TabbarItemProps extends TabItemDetails {
-  index: number;
-  isSelected?: boolean;
-  onSelect?: (index: number) => void;
-  className?: string;
-}
-
-const TabbarItem = ({
-  title,
-  index,
-  isSelected,
-  onSelect,
-  className,
-  badgeCount = 0,
-  isLoading = false,
-  dataTestId = "",
-}: TabbarItemProps): JSX.Element => {
-  const handleTabClick = () => onSelect && onSelect(index);
-
-  const itemClassName = classNames(
-    "flex first:ml-0 ml-2 flex-row cursor-pointer py-2 px-3 rounded-lg focus:outline-primary transition ease-in duration-150",
-    className,
-    {
-      "bg-slate-100 text-slate-700 hover:text-slate-700 focus:text-slate-700": isSelected,
-      "bg-slate-50 text-slate-500 hover:bg-slate-100 hover:text-slate-500 focus:text-slate-500 opacity-75": !isSelected,
-    }
-  );
-
-  return (
-    <div
-      className={itemClassName}
-      onClick={handleTabClick}
-      data-test-id={dataTestId}
-    >
-      {typeof title === "string" && (
-        <Text text={title} type={isSelected ? "strong" : "base"} inline />
-      )}
-      {typeof title !== "string" && title}
-      {badgeCount > 0 && <Badge className="ml-1" badgeCount={badgeCount} />}
-      {isLoading && (
-        <LoadingIndicator
-          asSpinner={true}
-          spinnerColor={"gray"}
-          className={"w-6"}
-        />
-      )}
-    </div>
-  );
-};
-
-export default TabbarItem;

package/src/components/Table/Table.tsx

@@ -1,91 +0,0 @@
-import React, { useEffect, useState } from "react";
-import classNames from "classnames";
-
-import { PaginationMenuProps } from "../PaginationMenu/PaginationMenu.types";
-
-import { TableHeader } from "./TableHeader";
-import { TableBody } from "./TableBody";
-import { TableFooter } from "./TableFooter";
-import { TableFieldConfig } from "./Table.types";
-
-export interface TableProps<Item>
-  extends React.HTMLAttributes<HTMLTableElement> {
-  items?: Item[];
-  fieldConfigurations: TableFieldConfig<Item>[];
-  emptyRowsText: string;
-  emptyFieldContentText?: string;
-  isLoading?: boolean;
-  showHeader?: boolean;
-  paginationMenuProps?: PaginationMenuProps;
-  onRowClick?: (item: Item) => void;
-  className?: string;
-}
-
-export function Table<Item>({
-  items,
-  fieldConfigurations,
-  emptyRowsText,
-  emptyFieldContentText,
-  isLoading = false,
-  showHeader = true,
-  paginationMenuProps,
-  onRowClick,
-  className,
-  ...otherAttributes
-}: TableProps<Item>): JSX.Element {
-  // For not displaying empty view at creation
-  const [isPristine, setIsPristine] = useState(true);
-
-  useEffect(() => {
-    setIsPristine(false);
-  }, [items, isLoading]);
-
-  const showEmptyView =
-    !isPristine && !isLoading && !(items && items.length > 0);
-
-  return (
-    <table
-      className={classNames(
-        "w-full rounded-lg bg-white border-collapse table-auto",
-        className
-      )}
-      {...otherAttributes}
-    >
-      {showHeader ? (
-        <TableHeader
-          className="border-b border-slate-100"
-          fieldConfigurations={fieldConfigurations}
-        />
-      ) : null}
-
-      <TableBody
-        className={classNames({
-          "border-b border-slate-100":
-            !isLoading &&
-            !showEmptyView &&
-            paginationMenuProps &&
-            paginationMenuProps.currentPageNumber > 0 &&
-            paginationMenuProps.pageCount > 0,
-        })}
-        items={items}
-        fieldConfigurations={fieldConfigurations}
-        emptyItemsText={emptyRowsText}
-        emptyFieldContentText={emptyFieldContentText}
-        isLoading={isLoading}
-        showEmptyView={showEmptyView}
-        onRowClick={onRowClick}
-      />
-
-      {!isLoading &&
-      !showEmptyView &&
-      paginationMenuProps &&
-      paginationMenuProps.currentPageNumber > 0 &&
-      paginationMenuProps.pageCount > 0 ? (
-        <TableFooter
-          colSpan={fieldConfigurations.length}
-          paginationMenuProps={paginationMenuProps}
-        />
-      ) : null}
-    </table>
-  );
-}

package/src/components/Table/Table.types.ts

@@ -1,28 +0,0 @@
-import { IconProps } from "../Icons/types/IconProps.type";
-import { TagColorTheme } from "../Tag/Tag";
-
-export interface TableFieldConfig<Item> {
-  key: string;
-  headerText?: string;
-  content: (item: Item) => TableFieldContent<Item>;
-  onlyShowContentOnHovering?: boolean;
-}
-
-export type TableFieldContent<Item> =
-  | TableFieldText
-  | [TableFieldAction<Item>?, TableFieldAction<Item>?];
-
-export interface TableFieldText {
-  text: string;
-  breakAllWord?: boolean;
-  tag?: {
-    text: string;
-    color: TagColorTheme;
-  };
-}
-
-export interface TableFieldAction<Item> {
-  key: string;
-  icon: React.FunctionComponent<IconProps>;
-  handleClick: (item: Item) => void;
-}