@luscii-healthtech/web-ui 0.1.0

package/src/components/SettingsMenuButton/SettingsMenuButton.tsx

@@ -0,0 +1,111 @@
+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);
+
+    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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,22 @@
+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" : "gray-500"} />
+      <Text text={title} type={"strong"} />
+    </div>
+  );
+};

package/src/components/Steps/Steps.tsx

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,67 @@
+@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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,29 @@
+import React from "react";
+
+import TabbarItem, { TabItemDetails } from "./TabbarItem";
+
+interface TabbarProps {
+  tabs?: TabItemDetails[];
+  selectedIndex?: number;
+  onSelect?(index: number): void;
+  className?: string;
+}
+
+export const Tabbar = ({ tabs, selectedIndex, onSelect, className = "" }: TabbarProps): JSX.Element => {
+  return (
+    <div className={`flex flex-row w-full bg-white rounded-xl ${className}`}>
+      {tabs.map((tabItemProps, index) => {
+        const itemProps = {
+          index,
+          onSelect,
+          isSelected: selectedIndex === index,
+          ...tabItemProps,
+        };
+
+        return <TabbarItem key={tabItemProps.dataTestId ?? index} {...itemProps} />;
+      })}
+    </div>
+  );
+};
+
+export default Tabbar;

package/src/components/Tabbar/TabbarItem.tsx

@@ -0,0 +1,53 @@
+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 {
+  title: string | JSX.Element;
+  badgeCount?: number;
+  isLoading?: boolean;
+  dataTestId?: string;
+}
+
+interface TabbarItemProps extends TabItemDetails {
+  index: number;
+  isSelected?: boolean;
+  onSelect(index: number): void;
+  className?: string;
+}
+
+const TabbarItem = ({
+  title,
+  index,
+  isSelected,
+  onSelect,
+  className,
+  badgeCount = null,
+  isLoading = false,
+  dataTestId = "",
+}: TabbarItemProps): JSX.Element => {
+  const handleTabClick = () => 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/Tag/Tag.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import classNames from "classnames";
+
+import { Text } from "../Text/Text";
+
+import { TagSize } from "./TagGroup";
+
+export enum TagColorTheme {
+  Red = "red",
+  Amber = "amber",
+  Green = "green",
+  Gray = "gray",
+  Blue = "blue",
+}
+
+export interface TagProps {
+  text: string;
+  colorTheme?: TagColorTheme;
+  size?: TagSize;
+  className?: string;
+}
+
+const Tag = ({ text, colorTheme = TagColorTheme.Gray, className, size = TagSize.base }: TagProps): JSX.Element => {
+  const containerClassName = classNames("inline py-1 px-2 rounded-lg", className, {
+    "bg-red-100 text-red-700": colorTheme === TagColorTheme.Red,
+    "bg-orange-100 text-amber-700": colorTheme === TagColorTheme.Amber,
+    "bg-green-100 text-green-800": colorTheme === TagColorTheme.Green,
+    "bg-slate-100 text-slate-600": colorTheme === TagColorTheme.Gray,
+    "bg-blue-50 text-blue-800": colorTheme === TagColorTheme.Blue,
+  });
+
+  return (
+    <div className={containerClassName}>
+      <Text inline color={"inherit"} text={text} type={size === TagSize.small ? "sm" : "base"} />
+    </div>
+  );
+};
+
+export default Tag;

package/src/components/Tag/TagGroup.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import classNames from "classnames";
+
+import Tag, { TagProps } from "./Tag";
+
+export enum TagSize {
+  "small" = "small",
+  "base" = "base",
+}
+
+interface TagGroupProps {
+  tags: TagProps[];
+  tagSize?: TagSize;
+  className?: string;
+}
+
+const TagGroup = ({ tags, tagSize = TagSize.base, className }: TagGroupProps): JSX.Element => (
+  <div className={classNames("flex flex-row flex-wrap", className)}>
+    {tags.map((tag) => (
+      <Tag size={tagSize} {...tag} className={classNames("mr-2 last:mr-0 mb-2")} />
+    ))}
+  </div>
+);
+
+export default TagGroup;

package/src/components/Text/LegacyText.js

@@ -0,0 +1,78 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+
+import "./Text.scss";
+
+const TEXT_TYPE_OPTIONS = {
+  DEFAULT: "default",
+  STRONG: "strong",
+  EMPHASIZED: "emphasized",
+  FINEPRINT: "fineprint",
+  SMALL: "small",
+  SMALL_DARK: "small-dark",
+  SMALL_FINEPRINT: "small-fineprint",
+  MICRO: "micro",
+  ERROR: "error",
+};
+
+const TEXT_LEVEL_OPTIONS = {
+  INLINE: "inline",
+  BLOCK: "block",
+};
+
+LegacyText.propTypes = {
+  text: PropTypes.string.isRequired,
+  level: PropTypes.oneOf([TEXT_LEVEL_OPTIONS.INLINE, TEXT_LEVEL_OPTIONS.BLOCK]),
+  type: PropTypes.oneOf([
+    TEXT_TYPE_OPTIONS.DEFAULT,
+    TEXT_TYPE_OPTIONS.STRONG,
+    TEXT_TYPE_OPTIONS.EMPHASIZED,
+    TEXT_TYPE_OPTIONS.FINEPRINT,
+    TEXT_TYPE_OPTIONS.SMALL,
+    TEXT_TYPE_OPTIONS.SMALL_DARK,
+    TEXT_TYPE_OPTIONS.SMALL_FINEPRINT,
+    TEXT_TYPE_OPTIONS.MICRO,
+    TEXT_TYPE_OPTIONS.ERROR,
+  ]),
+  className: PropTypes.string,
+  containsDangerousHtml: PropTypes.bool,
+};
+
+/**
+ * @deprecated use TextV2
+ */
+function LegacyText({
+  text,
+  type = TEXT_TYPE_OPTIONS.DEFAULT,
+  level = TEXT_LEVEL_OPTIONS.BLOCK,
+  className = "",
+  containsDangerousHtml = false,
+  ...otherProps
+}) {
+  const containerClassName = classNames("cweb-text", className, {
+    "type-default": type === TEXT_TYPE_OPTIONS.DEFAULT,
+    "type-strong": type === TEXT_TYPE_OPTIONS.STRONG,
+    "type-emphasized": type === TEXT_TYPE_OPTIONS.EMPHASIZED,
+    "type-small": type === TEXT_TYPE_OPTIONS.SMALL,
+    "type-fineprint": type === TEXT_TYPE_OPTIONS.FINEPRINT,
+    "type-small-fineprint": type === TEXT_TYPE_OPTIONS.SMALL_FINEPRINT,
+    "level-inline": level === TEXT_LEVEL_OPTIONS.INLINE,
+    "level-block": level === TEXT_LEVEL_OPTIONS.BLOCK,
+    "type-small-dark": type === TEXT_LEVEL_OPTIONS.SMALL_DARK,
+    "type-error": type === TEXT_TYPE_OPTIONS.ERROR,
+    "text-xs": type === TEXT_TYPE_OPTIONS.MICRO,
+  });
+
+  return containsDangerousHtml ? (
+    <p className={containerClassName} dangerouslySetInnerHTML={{ __html: text }} {...otherProps} />
+  ) : (
+    <p className={containerClassName} {...otherProps}>
+      {text}
+    </p>
+  );
+}
+
+export default LegacyText;
+
+export { TEXT_TYPE_OPTIONS, TEXT_LEVEL_OPTIONS };