@luscii-healthtech/web-ui 0.1.0

package/src/components/Dropdown/Dropdown.js

@@ -0,0 +1,364 @@
+import React, { PureComponent } from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+
+import chevronDouble from "../../assets/chevron-double.svg";
+import checkmark from "../../assets/check-icon-primary.svg";
+import { Text } from "../Text/Text";
+
+import "./Dropdown.scss";
+
+const ITEM_QUERY_FIELD_NAMES = {
+  ID: "id",
+  HIGHLIGHT_INDEX: "highlightIndex",
+};
+
+const keyCodes = {
+  ARROW_DOWN: 40,
+  ARROW_UP: 38,
+  ENTER: 13,
+  TAB: 9,
+  SHIFT: 16,
+  ESC: 27,
+};
+
+class Dropdown extends PureComponent {
+  static addHighlightIndexToItems = (items) => {
+    let index = 0;
+
+    return items.map((item) => {
+      if (!item.subItems) {
+        const currentIndex = index;
+        index = index + 1;
+
+        return {
+          ...item,
+          highlightIndex: currentIndex,
+        };
+      } else {
+        return {
+          ...item,
+          subItems: item.subItems.map((subItem) => {
+            const currentIndex = index;
+            index = index + 1;
+
+            return {
+              ...subItem,
+              highlightIndex: currentIndex,
+            };
+          }),
+        };
+      }
+    });
+  };
+
+  static getTotalItemCount = (items) => {
+    return items.reduce((acc, item) => {
+      if (!item.subItems) {
+        return acc + 1;
+      } else {
+        return acc + item.subItems.length;
+      }
+    }, 0);
+  };
+
+  constructor(props) {
+    super(props);
+
+    const items = Dropdown.addHighlightIndexToItems(props.items);
+    const selectedItem = props.initialSelectedItemId
+      ? this.findItem(items, ITEM_QUERY_FIELD_NAMES.ID, props.initialSelectedItemId)
+      : null;
+
+    this.state = {
+      totalItemCount: Dropdown.getTotalItemCount(items),
+      isDropdownOpen: false,
+      highlightIndex: null,
+      selectedItem,
+      items,
+    };
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const items = Dropdown.addHighlightIndexToItems(nextProps.items);
+
+    return {
+      ...prevState,
+      items: items,
+      totalItemCount: Dropdown.getTotalItemCount(items),
+    };
+  }
+
+  componentDidMount() {
+    document.addEventListener("mousedown", this.handleClickOutside);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener("mousedown", this.handleClickOutside);
+  }
+
+  handleClickOutside = (event) => {
+    if (this.rootRef && !this.rootRef.contains(event.target)) {
+      this.closeDropdown();
+    }
+  };
+
+  handleKeyDown = (event) => {
+    const { items, isDropdownOpen, highlightIndex } = this.state;
+
+    if (event.keyCode === keyCodes.ENTER) {
+      event.preventDefault();
+
+      if (isDropdownOpen) {
+        this.closeDropdown();
+        this.setSelectedItem(this.findItem(items, ITEM_QUERY_FIELD_NAMES.HIGHLIGHT_INDEX, highlightIndex));
+        this.rootRef.blur();
+      } else {
+        this.openDropdown();
+      }
+    } else if (event.keyCode === keyCodes.TAB) {
+      if (event.shiftKey) {
+        this.decreaseHighlightIndexIfPossible();
+      } else {
+        this.increaseHighlightIndexIfPossible();
+      }
+    } else if (event.keyCode === keyCodes.ARROW_UP) {
+      event.preventDefault();
+
+      this.decreaseHighlightIndexIfPossible();
+    } else if (event.keyCode === keyCodes.ARROW_DOWN) {
+      event.preventDefault();
+
+      if (isDropdownOpen) {
+        this.increaseHighlightIndexIfPossible();
+      } else {
+        this.openDropdown();
+      }
+    } else if (event.keyCode === keyCodes.ESC) {
+      this.closeDropdown();
+      this.rootRef.blur();
+    }
+  };
+
+  findItem = (items, fieldName, fieldValue) => {
+    let selectedItem;
+
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+
+      if (item[fieldName] === fieldValue) {
+        selectedItem = item;
+      } else if (item.subItems) {
+        for (let j = 0; j < item.subItems.length; j++) {
+          const subItem = item.subItems[j];
+
+          if (
+            (fieldName === ITEM_QUERY_FIELD_NAMES.ID && subItem.key === fieldValue) ||
+            subItem[fieldName] === fieldValue
+          ) {
+            selectedItem = subItem;
+            break;
+          }
+        }
+      }
+
+      if (selectedItem) {
+        break;
+      }
+    }
+
+    return selectedItem;
+  };
+
+  openDropdown = () => {
+    this.setState((prevState) => {
+      return {
+        isDropdownOpen: true,
+        highlightIndex: prevState.selectedItem ? prevState.selectedItem.highlightIndex : 0,
+      };
+    });
+  };
+
+  closeDropdown = () => {
+    this.setState({
+      isDropdownOpen: false,
+      highlightIndex: null,
+    });
+  };
+
+  setSelectedItem = (item) => {
+    this.setState({
+      selectedItem: item,
+    });
+  };
+
+  findSelectedItem = (selectedIndex) => {
+    return this.rootRef.querySelectorAll(".dropdown-list-item")[selectedIndex];
+  };
+
+  scrollToHighlightedItem = (selectedIndex) => {
+    const selectedItem = this.findSelectedItem(selectedIndex);
+    if (this.dropdownListRef.scrollTo) {
+      this.dropdownListRef.scrollTo(0, selectedItem.offsetTop);
+    }
+  };
+
+  increaseHighlightIndexIfPossible = () => {
+    this.setState((prevState) => {
+      const newHighlightIndex =
+        prevState.highlightIndex < prevState.totalItemCount - 1
+          ? prevState.highlightIndex + 1
+          : prevState.highlightIndex;
+
+      if (newHighlightIndex !== prevState.highlightIndex) {
+        this.scrollToHighlightedItem(newHighlightIndex);
+      }
+
+      return {
+        highlightIndex: newHighlightIndex,
+      };
+    });
+  };
+
+  decreaseHighlightIndexIfPossible = () => {
+    this.setState((prevState) => {
+      const newHighlightIndex = prevState.highlightIndex > 0 ? prevState.highlightIndex - 1 : prevState.highlightIndex;
+
+      if (newHighlightIndex !== prevState.highlightIndex) {
+        this.scrollToHighlightedItem(newHighlightIndex);
+      }
+
+      return {
+        highlightIndex: newHighlightIndex,
+      };
+    });
+  };
+
+  selectItem = (item) => {
+    const { onItemSelect } = this.props;
+
+    this.closeDropdown();
+    this.setSelectedItem(item);
+
+    onItemSelect(item);
+  };
+
+  renderIndividualItem = (item) => {
+    const { highlightIndex } = this.state;
+    const isItemSelected = item.highlightIndex === highlightIndex;
+
+    const itemClassName = classNames("dropdown-list-item p-3", {
+      "is-selected": isItemSelected,
+      "flex flex-row justify-between space-x-2": isItemSelected,
+    });
+    const textType = isItemSelected ? "strong" : "base";
+
+    return (
+      <div className={itemClassName} key={item.id} tabIndex="0" onClick={() => this.selectItem(item)}>
+        <Text data-test-id={item.text} text={item.text} type={textType} truncate />
+        <img className={classNames({ hidden: !isItemSelected })} src={checkmark} alt="checked" />
+      </div>
+    );
+  };
+
+  renderGroupedItems = (item) => {
+    return (
+      <div className="dropdown-list-item-group" key={item.groupKey}>
+        {item.title && (
+          <div className="p-3 bg-main-background" tabIndex="-1">
+            <Text
+              className="uppercase"
+              data-test-id={item.text}
+              text={item.title}
+              type="sm"
+              color="gray-500"
+              truncate
+            />
+          </div>
+        )}
+        {item.subItems.map((subItem) => this.renderIndividualItem(subItem))}
+      </div>
+    );
+  };
+
+  renderItems = () => {
+    const { items } = this.state;
+
+    return (
+      <div
+        className={classNames("dropdown-list", { wider: this.props.wider })}
+        ref={(element) => (this.dropdownListRef = element)}
+      >
+        {items.map((item) => (item.subItems ? this.renderGroupedItems(item) : this.renderIndividualItem(item)))}
+      </div>
+    );
+  };
+
+  render() {
+    // eslint-disable-next-line no-unused-vars
+    const {
+      placeholder = "",
+      className,
+      initialSelectedItemId,
+      onItemSelect,
+      items,
+      wider,
+      ...otherProps
+    } = this.props;
+    const { selectedItem, isDropdownOpen } = this.state;
+    const containerClassName = classNames("cweb-dropdown", className, { "is-open": isDropdownOpen });
+    const onDropdownClick = isDropdownOpen ? this.closeDropdown : this.openDropdown;
+
+    return (
+      <div
+        className={classNames(containerClassName)}
+        tabIndex="0"
+        ref={(element) => (this.rootRef = element)}
+        onKeyDown={this.handleKeyDown}
+      >
+        <div
+          {...otherProps}
+          className={classNames("dropdown-header space-x-2 border border-solid p-3 cursor-pointer", {
+            "border-primary-dark": isDropdownOpen,
+            "border-input-border hover:border-input-border-dark": !isDropdownOpen,
+          })}
+          onClick={onDropdownClick}
+        >
+          <Text className="dropdown-header-title" text={selectedItem ? selectedItem.text : placeholder} truncate />
+          <img className="dropdown-header-icon" src={chevronDouble} alt="browse icon" />
+        </div>
+        {this.renderItems()}
+      </div>
+    );
+  }
+}
+
+Dropdown.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.oneOfType([
+      PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        text: PropTypes.string.isRequired,
+        key: PropTypes.string.isRequired,
+      }),
+      PropTypes.shape({
+        subItems: PropTypes.arrayOf(
+          PropTypes.shape({
+            id: PropTypes.string.isRequired,
+            text: PropTypes.string.isRequired,
+            key: PropTypes.string.isRequired,
+          })
+        ).isRequired,
+        title: PropTypes.string,
+        groupKey: PropTypes.string.isRequired,
+      }),
+    ])
+  ).isRequired,
+  initialSelectedItemId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  placeholder: PropTypes.string,
+  className: PropTypes.string,
+  onItemSelect: PropTypes.func.isRequired,
+  wider: PropTypes.bool,
+};
+
+export default Dropdown;

package/src/components/Dropdown/Dropdown.scss

@@ -0,0 +1,83 @@
+@import "../../styles/colors";
+@import "../../styles/typography";
+@import "../../styles/layout";
+@import "../../styles/utils";
+
+.cweb-dropdown {
+  $list-item-title-padding: 15px 12px;
+
+  @mixin dropdown-list-item() {
+    cursor: pointer;
+  }
+
+  @include flexbox-vertical();
+  position: relative;
+
+  outline: none;
+  border-radius: 4px;
+
+  &:focus {
+    outline: 4px solid rgba(0, 159, 227, 0.3);
+  }
+
+  > .dropdown-header {
+    @include flexbox-horizontal(center, space-between);
+
+    align-self: stretch;
+    height: $default-height;
+    border-radius: $default-border-radius;
+    transition: all 0.4s ease;
+
+    > .dropdown-header-icon {
+      opacity: 0.5;
+      transition: opacity 0.3s ease-in-out;
+    }
+
+    &:hover {
+      > .dropdown-header-icon {
+        opacity: 1;
+      }
+    }
+  }
+
+  > .dropdown-list {
+    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.56);
+
+    display: none;
+    position: absolute;
+    top: 100%;
+    z-index: 1;
+    width: 100%;
+    max-height: 360px;
+    overflow-y: auto;
+    align-self: stretch;
+    margin-top: 8px;
+    padding: 0;
+    background-color: #ffffff;
+    list-style: none;
+
+    border: 1px solid $input-border;
+    border-radius: 4px;
+
+    > .dropdown-list-item {
+      @include dropdown-list-item();
+    }
+
+    > .dropdown-list-item-group {
+      > .dropdown-list-item {
+        @include dropdown-list-item();
+      }
+    }
+  }
+
+  &.is-open {
+    > .dropdown-list {
+      display: block;
+      margin-bottom: 32px;
+
+      &.wider {
+        width: 200%;
+      }
+    }
+  }
+}

package/src/components/EmptyListMessage/EmptyListMessage.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import classNames from "classnames";
+
+import NoOpenAlertsImage from "../../assets/no-open-alerts.svg";
+import SearchNotFoundImage from "../../assets/search-not-found.svg";
+import HappyStarImage from "../../assets/happy-star.svg";
+import { Text } from "../Text/Text";
+
+const imageSrc = {
+  "no-open-alerts": NoOpenAlertsImage,
+  "search-not-found": SearchNotFoundImage,
+  "no-notes-found": HappyStarImage,
+};
+
+interface EmptyListMessageProps {
+  text: string;
+  imageName?: keyof typeof imageSrc;
+  dataTestId?: string;
+  className?: string;
+}
+
+export const EmptyListMessage = ({
+  text,
+  imageName,
+  dataTestId = "empty-list-message",
+  className,
+}: EmptyListMessageProps): JSX.Element => {
+  return (
+    <div className={classNames("flex flex-col items-center", className)} data-test-id={dataTestId}>
+      {imageName && <img className="mb-2.5" alt="" src={imageSrc[imageName]} />}
+      <Text className="text-center" text={text} />
+    </div>
+  );
+};

package/src/components/ErrorBlock/ErrorBlock.js

@@ -0,0 +1,24 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+
+import Text from "../Text/Text";
+
+import "./ErrorBlock.scss";
+
+ErrorBlock.propTypes = {
+  message: PropTypes.string.isRequired,
+  className: PropTypes.string,
+};
+
+function ErrorBlock({ message, className = "", ...otherProps }) {
+  const containerClassName = classNames("cweb-error-block", className);
+
+  return (
+    <div className={containerClassName}>
+      <Text {...otherProps} className="cweb-error-block-message" text={message} />
+    </div>
+  );
+}
+
+export default ErrorBlock;

package/src/components/ErrorBlock/ErrorBlock.scss

@@ -0,0 +1,20 @@
+@import '../../styles/colors';
+
+.cweb-error-block {
+  position: relative;
+  padding: 16px 16px 16px 56px;
+  background-color: $color-negative-support;
+  border-radius: 8px;
+
+  &:before {
+    content: "";
+    position: absolute;
+    left: 16px;
+    top: 14px;
+    z-index: 1;
+    width: 24px;
+    height: 23px;
+    background: url("../../assets/error-icon.svg") no-repeat center;
+    background-size: contain;
+  }
+}

package/src/components/Icons/AddIcon.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+import { IconProps } from "./types/IconProps.type";
+
+export const AddIcon = (props: IconProps): JSX.Element => {
+  return (
+    <svg
+      className={props.className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="10" y="2" width="4" height="20" rx="2" fill="currentColor" />
+      <rect
+        x="22"
+        y="10"
+        width="4"
+        height="20"
+        rx="2"
+        transform="rotate(90 22 10)"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/AlertsIcon.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+interface AlertsIconProps {
+  className?: string;
+}
+
+export const AlertsIcon = (props: AlertsIconProps): JSX.Element => {
+  return (
+    <svg
+      className={props.className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14 19.5C14 20.163 13.7893 20.7989 13.4142 21.2678C13.0391 21.7366 12.5304 22 12 22C11.4696 22 10.9609 21.7366 10.5858 21.2678C10.2107 20.7989 10 20.163 10 19.5L14 19.5Z"
+        fill="currentColor"
+      />
+      <path d="M10 4C10 2.89543 10.8954 2 12 2C13.1046 2 14 2.89543 14 4V5H10V4Z" fill="currentColor" />
+      <path d="M5 11C5 7.13401 8.13401 4 12 4C15.866 4 19 7.13401 19 11V17H5V11Z" fill="currentColor" />
+      <rect x="3" y="15.5" width="18" height="2.5" rx="1.25" fill="currentColor" />
+    </svg>
+  );
+};

package/src/components/Icons/BellIcon.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+interface BellIconProps {
+  className?: string;
+}
+
+export const BellIcon = (props: BellIconProps): JSX.Element => {
+  return (
+    <svg
+      className={props.className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14 19.5C14 20.163 13.7893 20.7989 13.4142 21.2678C13.0391 21.7366 12.5304 22 12 22C11.4696 22 10.9609 21.7366 10.5858 21.2678C10.2107 20.7989 10 20.163 10 19.5L14 19.5Z"
+        fill="currentColor"
+      />
+      <path d="M10 4C10 2.89543 10.8954 2 12 2C13.1046 2 14 2.89543 14 4V5H10V4Z" fill="currentColor" />
+      <path d="M5 11C5 7.13401 8.13401 4 12 4C15.866 4 19 7.13401 19 11V17H5V11Z" fill="currentColor" />
+      <rect x="3" y="15.5" width="18" height="2.5" rx="1.25" fill="currentColor" />
+    </svg>
+  );
+};

package/src/components/Icons/ChartIcon.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+import { IconProps } from "./types/IconProps.type";
+
+export const ChartIcon = (props: IconProps): JSX.Element => {
+  return (
+    <svg
+      className={props.className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="2" y="7" width="5" height="15" rx="2.5" fill="currentColor" />
+      <rect x="9" y="3" width="5" height="19" rx="2.5" fill="currentColor" />
+      <rect x="16" y="10" width="5" height="12" rx="2.5" fill="currentColor" />
+    </svg>
+  );
+};

package/src/components/Icons/ChatBox.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+export interface IconProps {
+  className?: string;
+}
+
+export const ChatBox = (props: IconProps): JSX.Element => {
+  return (
+    <svg
+      width="20"
+      className={props.className}
+      height="19"
+      viewBox="0 0 20 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18 0H2C0.9 0 0 0.9 0 2V17.59C0 18.48 1.08 18.93 1.71 18.3L4 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0ZM11.57 9.57L10.45 12.01C10.27 12.4 9.72 12.4 9.54 12.01L8.42 9.57L5.98 8.45C5.59 8.27 5.59 7.72 5.98 7.54L8.42 6.42L9.54 3.98C9.72 3.59 10.27 3.59 10.45 3.98L11.57 6.42L14.01 7.54C14.4 7.72 14.4 8.27 14.01 8.45L11.57 9.57Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/CheckIcon.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { IconProps } from "./GroupIcon";
+
+export const CheckIcon = (props: IconProps): JSX.Element => {
+  return (
+    <svg
+      className={props.className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.7071 7.29289C19.0976 7.68342 19.0976 8.31658 18.7071 8.70711L10.7071 16.7071C10.3166 17.0976 9.68342 17.0976 9.29289 16.7071L5.29289 12.7071C4.90237 12.3166 4.90237 11.6834 5.29289 11.2929C5.68342 10.9024 6.31658 10.9024 6.70711 11.2929L10 14.5858L17.2929 7.29289C17.6834 6.90237 18.3166 6.90237 18.7071 7.29289Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};