@luscii-healthtech/web-ui 0.1.0

package/src/components/ListTable/ListTableCell.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import classNames from "classnames";
+
+import { Text } from "../Text/Text";
+
+import { ListTablePropsConfigurationField } from "./ListTable";
+
+function isEmpty(str: string) {
+  return str === null || str === undefined || (isString(str) && str.trim() === "");
+}
+
+function isString(obj?: string | any): obj is string {
+  return Object.prototype.toString.call(obj) === "[object String]";
+}
+
+export interface ListTableCellProps<ItemType, CellType> {
+  isHeader?: boolean;
+  value: string | CellType;
+  configuration: ListTablePropsConfigurationField<ItemType, CellType>;
+  emptyValue?: string;
+}
+
+export function ListTableCell<ItemType, CellType>({
+  isHeader = false,
+  value,
+  configuration,
+  emptyValue,
+}: ListTableCellProps<ItemType, CellType>): JSX.Element {
+  const { name, className, textProps } = configuration;
+
+  const textClassName = classNames("text-left", textProps?.className);
+  const cellClassName = classNames("cweb-list-table-content-cell", "py-0 px-3", className);
+
+  const returnChildren = () => {
+    return (
+      <>
+        {isEmpty(value) && isString(emptyValue) && (
+          <Text text={emptyValue} {...textProps} className={textClassName} color={"gray-500"} />
+        )}
+        {!isEmpty(value) && isString(value) && (
+          <Text
+            text={value}
+            {...textProps}
+            className={classNames(textClassName, {
+              truncate: !isHeader,
+              capitalize: isHeader,
+              "w-40": !isHeader,
+            })}
+          />
+        )}
+        {!isEmpty(value) && !isString(value) && value}
+      </>
+    );
+  };
+
+  return isHeader ? (
+    <th className={cellClassName} key={name}>
+      {returnChildren()}
+    </th>
+  ) : (
+    <td className={classNames(cellClassName, "max-w-40")} key={name}>
+      {returnChildren()}
+    </td>
+  );
+}
+
+export default ListTableCell;

package/src/components/ListTable/ListTableHeader.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import classNames from "classnames";
+
+import { ListTableItem, ListTablePropsConfigurationField } from "./ListTable";
+import ListTableCell from "./ListTableCell";
+
+export interface ListTableHeaderProps<ItemType extends ListTableItem, CellType> {
+  className?: string;
+  configurationFields: ListTablePropsConfigurationField<ItemType, CellType>[];
+}
+
+export function ListTableHeader<ItemType extends ListTableItem, CellType>({
+  className,
+  configurationFields,
+}: ListTableHeaderProps<ItemType, CellType>): JSX.Element {
+  return (
+    <thead className={classNames("cweb-list-table-header-section", className)}>
+      <tr className="border-b h-13 border-slate-100">
+        {configurationFields.map((field) => (
+          <ListTableCell
+            isHeader={true}
+            key={field.name}
+            value={field.title}
+            configuration={{
+              ...field,
+              textProps: { ...field.textProps, type: "strong", className: "py-4 leading-none" },
+            }}
+          />
+        ))}
+      </tr>
+    </thead>
+  );
+}

package/src/components/ListTable/ListTableRow.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import classNames from "classnames";
+
+import { ListTableItem, ListTablePropsConfiguration } from "./ListTable";
+import ListTableCell from "./ListTableCell";
+
+export interface ListTableRowProps<ItemType extends ListTableItem, CellType> {
+  item: ItemType;
+  onClick?: (arg: ItemType) => void;
+  configuration: ListTablePropsConfiguration<ItemType, CellType>;
+}
+
+export function ListTableRow<ItemType extends ListTableItem, CellType>({
+  item,
+  onClick,
+  configuration,
+}: ListTableRowProps<ItemType, CellType>): JSX.Element {
+  function handleRowClick(event: React.MouseEvent) {
+    event.stopPropagation();
+    if (onClick) {
+      onClick(item);
+    }
+  }
+
+  return (
+    <tr
+      className={classNames("cweb-list-table-content-section", "h-13", {
+        "hover:bg-slate-100 transition-colors ease-in-out duration-300 cursor-pointer": onClick,
+        "hover:bg-white cursor-default": !onClick,
+      })}
+      onClick={handleRowClick}
+      key={item[configuration.idField]}
+    >
+      {configuration.fields.map((field) => (
+        <ListTableCell
+          key={field.name}
+          value={field.field(item)}
+          configuration={{ ...field, className: `${field.className ?? ""} border-b border-slate-100` }}
+          emptyValue={configuration.emptyValue}
+        />
+      ))}
+    </tr>
+  );
+}
+
+export default ListTableRow;

package/src/components/LoadingIndicator/LoadingIndicator.scss

@@ -0,0 +1,50 @@
+@import "../../styles/colors";
+
+.cweb-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .cweb-loading-text {
+    margin-bottom: 24px;
+  }
+
+  &.as-modal {
+    $border-radius: 4px;
+
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 9999;
+    background-color: rgba($color-white, 0.6);
+
+    .cweb-loading-panel {
+      position: relative;
+      width: 320px;
+      min-height: 120px;
+      border-radius: $border-radius;
+      padding: 16px;
+      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.36);
+      background-color: #ffffff;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+
+      &:before {
+        position: absolute;
+        content: "";
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 1;
+        height: 3px;
+        background-color: $color-branding-support-1;
+        border-top-left-radius: $border-radius;
+        border-top-right-radius: $border-radius;
+      }
+    }
+  }
+}

package/src/components/LoadingIndicator/LoadingIndicator.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import classNames from "classnames";
+
+import loadingImage from "../../assets/loading.svg";
+import spinner from "../../assets/spinner.svg";
+import graySpinner from "../../assets/spinner-gray.svg";
+import { RestPropped } from "../../types/general.types";
+
+import "./LoadingIndicator.scss";
+
+export interface LoadingIndicatorProps extends RestPropped {
+  asModal?: boolean;
+  asSpinner?: boolean;
+  className?: string;
+  spinnerColor?: "blue" | "gray";
+}
+
+export function LoadingIndicator({
+  asModal = false,
+  asSpinner = false,
+  className = "",
+  spinnerColor = "blue",
+  ...restProps
+}: LoadingIndicatorProps): JSX.Element {
+  const spinnerToRender = spinnerColor === "blue" ? spinner : graySpinner;
+
+  const containerClassName = classNames("cweb-loading", className, {
+    "as-modal": asModal,
+  });
+
+  return (
+    <div {...restProps} className={containerClassName}>
+      <img
+        src={asSpinner ? spinnerToRender : loadingImage}
+        className={classNames("text-gray-600 fill-current stroke-current", {
+          "h-4 w-4": asSpinner,
+          "h-8 w-8": !asSpinner,
+        })}
+      />
+    </div>
+  );
+}
+
+export default LoadingIndicator;

package/src/components/Menu/Menu.js

@@ -0,0 +1,74 @@
+import React, { PureComponent } from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+
+import Button from "../Button/Button";
+
+import "./Menu.scss";
+
+class Menu extends PureComponent {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isOpen: false,
+    };
+  }
+
+  componentDidMount() {
+    document.addEventListener("mousedown", this.handleClickOutside);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener("mousedown", this.handleClickOutside);
+  }
+
+  handleClickOutside = (event) => {
+    if (this.rootRef && !this.rootRef.contains(event.target)) {
+      this.closeMenu();
+    }
+  };
+
+  handleIconClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    this.openMenu();
+  };
+
+  openMenu = () => {
+    this.setState({
+      isOpen: true,
+    });
+  };
+
+  closeMenu = () => {
+    this.setState({
+      isOpen: false,
+    });
+  };
+
+  render() {
+    const { children, className } = this.props;
+    const { isOpen } = this.state;
+
+    const containerClassName = classNames("cweb-menu", className, {
+      "is-open": isOpen,
+    });
+
+    return (
+      <div className={containerClassName} ref={(element) => (this.rootRef = element)}>
+        {isOpen ? (
+          <div className="p-6 border shadow-md cweb-menu-content border-slate-300">{children}</div>
+        ) : (
+          <Button role="tertiary" onClick={this.handleIconClick} className="chart-button" />
+        )}
+      </div>
+    );
+  }
+}
+
+export default Menu;

package/src/components/Menu/Menu.scss

@@ -0,0 +1,27 @@
+@import "../../styles/colors";
+@import "../../styles/layout";
+
+.cweb-menu {
+  > .cweb-menu-content {
+    min-width: 300px;
+    border-radius: 4px;
+    background-color: $color-white;
+  }
+
+  > .cweb-menu-button {
+    @include flexbox-layout();
+
+    width: 44px;
+    height: 44px;
+    background: url("../../assets/big-menu-icon.svg") no-repeat center;
+    transition: 0.2s ease;
+    background-size: contain;
+  }
+
+  > .cweb-menu-button:hover {
+    width: 44px;
+    height: 44px;
+    background: url("../../assets/big-menu-icon-hover.svg") no-repeat center;
+    transition: 0.2s ease;
+  }
+}

package/src/components/Modal/Modal.scss

@@ -0,0 +1,117 @@
+@import "../../styles/colors";
+@import "../../styles/layout";
+@import "../../styles/utils";
+@import "../../styles/shadows";
+
+.cweb-modal-overlay {
+  $modal-horizontal-distance: 8px;
+  $modal-vertical-distance: 60px;
+
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: $modal-vertical-distance $modal-horizontal-distance;
+  background-color: rgba(0, 0, 0, 0.25);
+  z-index: 20;
+
+  &.no-title-bar {
+    background-color: rgba(0, 0, 0, 0.75);
+  }
+
+  > .cweb-modal {
+    @include box-shadow-2dp();
+    position: relative;
+    margin: 0 auto;
+    background: white;
+    outline: none;
+    border-radius: 8px;
+
+    &.type-default {
+      max-width: 580px;
+    }
+
+    &.type-extra-small {
+      max-width: 444px;
+    }
+
+    &.type-wide {
+      max-width: 748px;
+    }
+
+    &.type-wider {
+      max-width: 868px;
+    }
+
+    &.has-padded-body {
+      .cweb-modal-content {
+        padding: 1.5rem;
+      }
+    }
+
+    .cweb-modal-no-title-section {
+      height: 0;
+      width: 100%;
+      position: relative;
+
+      > .cweb-modal-close-button {
+        position: absolute;
+        top: 16px;
+        right: 24px;
+
+        width: 44px;
+        height: 44px;
+        background: url("../../assets/modal-close-icon.svg") no-repeat center;
+        background-size: contain;
+
+        &:hover,
+        &:active,
+        &:focus {
+          background: url("../../assets/modal-close-icon-active.svg") no-repeat center;
+          background-size: contain;
+        }
+      }
+    }
+
+    .cweb-modal-title-section {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      border-bottom: 1px solid $color-chrome;
+      padding: 24px;
+
+      > .cweb-modal-title {
+        width: 100%;
+
+        justify-content: flex-start;
+        color: $color-secondary;
+        font-weight: normal;
+      }
+
+      > .cweb-modal-close-button {
+        transition: opacity 0.3s ease-in-out;
+        outline: none;
+        width: 2rem;
+        height: 2rem;
+        background: url("../../assets/cross-dark.svg") no-repeat center;
+        background-size: contain;
+
+        opacity: 0.75;
+
+        &:hover,
+        &:active,
+        &:focus {
+          opacity: 1;
+        }
+      }
+
+      > .cweb-modal-content {
+        margin: 24px;
+        overflow-y: auto;
+      }
+    }
+  }
+}

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import classNames from "classnames";
+import ReactModal from "react-modal";
+
+import "./Modal.scss";
+import { Title } from "../Title/Title";
+
+export const MODAL_SIZES = {
+  DEFAULT: "default",
+  WIDE: "wide",
+  WIDER: "wider",
+  EXTRA_SMALL: "extra-small",
+} as const;
+
+type MODAL_SIZES_NAMES = keyof typeof MODAL_SIZES;
+export type MODAL_SIZES_VALUES = typeof MODAL_SIZES[MODAL_SIZES_NAMES];
+
+export interface ModalProps {
+  children: React.ReactNode;
+  type?: MODAL_SIZES_VALUES;
+  isOpen?: boolean;
+  shouldCloseOnOverlayClick?: boolean;
+  showTitleBar?: boolean;
+  title?: string;
+  onCloseClick?: (event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void;
+  backAltText?: string;
+  closeAltText?: string;
+  className?: string;
+  closeButtonId?: string;
+  withPadding?: boolean;
+  showHeader?: boolean;
+}
+
+/**
+ * Don't use this modal directly if you need to add buttons to it.
+ * There's a component called <ModalWithButtons /> you can use instead.
+ */
+function Modal({
+  children,
+  type = MODAL_SIZES.DEFAULT,
+  isOpen = false,
+  shouldCloseOnOverlayClick = true,
+  showTitleBar = true,
+  title,
+  onCloseClick,
+  closeAltText = "Close",
+  className,
+  closeButtonId,
+  withPadding = false,
+  showHeader = true,
+}: ModalProps): JSX.Element {
+  const containerClassName = classNames("cweb-modal", className, {
+    "type-default": type === MODAL_SIZES.DEFAULT,
+    "type-wide": type === MODAL_SIZES.WIDE,
+    "type-wider": type === MODAL_SIZES.WIDER,
+    "type-extra-small": type === MODAL_SIZES.EXTRA_SMALL,
+  });
+
+  const overlayClassName = classNames("cweb-modal-overlay", {
+    "no-title-bar": !showTitleBar,
+  });
+
+  ReactModal.setAppElement("body");
+
+  return (
+    <ReactModal
+      isOpen={isOpen}
+      contentLabel={title}
+      portalClassName="cweb-modal-portal"
+      overlayClassName={overlayClassName}
+      bodyOpenClassName="cweb-modal-body-open"
+      htmlOpenClassName="cweb-modal-html-open"
+      onRequestClose={onCloseClick}
+      shouldFocusAfterRender={false}
+      shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
+      className={containerClassName}
+    >
+      {showHeader && (
+        <div
+          className={classNames({
+            "cweb-modal-title-section": showTitleBar,
+            "cweb-modal-no-title-section": !showTitleBar,
+          })}
+        >
+          {showTitleBar && title && <Title text={title} type="sm" className="cweb-modal-title" />}
+          <button
+            data-test-id="close-modal-button"
+            role="icon"
+            title={closeAltText}
+            id={closeButtonId}
+            className="cweb-modal-close-button"
+            onClick={onCloseClick}
+          />
+        </div>
+      )}
+
+      {children ? (
+        <div className={classNames("cweb-modal-content", { "px-6 py-4": withPadding })}>{children}</div>
+      ) : null}
+    </ReactModal>
+  );
+}
+
+export default Modal;

package/src/components/Modal/ModalWithButtons.tsx

@@ -0,0 +1,34 @@
+import classNames from "classnames";
+import React from "react";
+
+import Modal, { ModalProps } from "./Modal";
+
+export type ButtonsAlignment = "justify-end" | "justify-between";
+
+type ModalWithButtonProps = ModalProps & {
+  buttons: [JSX.Element, JSX.Element?];
+  buttonsAlignment: ButtonsAlignment;
+};
+
+export const ModalWithButtons = (props: ModalWithButtonProps): JSX.Element => {
+  const { buttons, buttonsAlignment = "justify-between", children, ...rest } = props;
+  return (
+    <Modal {...rest} withPadding={false}>
+      <div className={classNames("cweb-modal-content", { "px-6 py-4": props.withPadding })}>{children}</div>
+      <div
+        className={classNames(
+          "flex items-center",
+          {
+            "justify-end": buttonsAlignment === "justify-end" || buttons.length === 1,
+            "justify-between": buttonsAlignment === "justify-between" && buttons.length >= 2,
+          },
+          "px-6 py-4",
+          "border-t border-solid rounded-b-lg border-chrome",
+          "bg-slate-50"
+        )}
+      >
+        {buttons}
+      </div>
+    </Modal>
+  );
+};