@luscii-healthtech/web-ui 2.9.0 → 2.10.2

package/src/components/Dropdown/Dropdown.js

@@ -1,416 +0,0 @@
-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="slate-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

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

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

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

@@ -1,20 +0,0 @@
-@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/Form/Form.tsx

@@ -1,138 +0,0 @@
-import React from "react";
-import { Control, useForm, UseFormReturn } from "react-hook-form";
-
-import { PrimaryButton } from "../ButtonV2/PrimaryButton";
-import { InputProps } from "../Input/Input";
-import { RadioGroupProps } from "../RadioGroup/RadioGroupV2";
-import { SelectProps } from "../Select/SelectV2";
-
-import { FormInput } from "./FormInput";
-import {
-  FormFieldProps,
-  FormFieldRowProps,
-  FormProps,
-  GenericFormProps,
-} from "./form.types";
-import { isRequired } from "./form.transformer";
-import { FormRadioGroup } from "./FormRadioGroup";
-import { FormSelect } from "./FormSelect";
-
-/**
- * Create a straight forward Form, which takes away the 'overhead' of react-hook-form.
- *
- * You will probably don't want to use this component for now, given that the button is hardcoded.
- * This is an example for the Form for now, though it could be improved to enforce further unification.
- *
- * TODO: make the buttons configurable.
- */
-export function GenericForm<TFieldValues>({
-  fields,
-  onValid,
-  onError,
-  defaultValues,
-}: GenericFormProps<TFieldValues>): JSX.Element {
-  const useFormReturn = useForm<TFieldValues>({
-    criteriaMode: "all",
-    defaultValues: defaultValues,
-  });
-
-  const { handleSubmit } = useFormReturn;
-
-  return (
-    <div className="space-y-4">
-      <Form fields={fields} useFormReturn={useFormReturn} />
-      <PrimaryButton onClick={handleSubmit(onValid, onError)} text={"submit"} />
-    </div>
-  );
-}
-
-/**
- * Creates a Form based on the fields input.
- *
- * Expects the results of the useForm hook to be injected into the useFormReturn parameter.
- *
- * This allows you to use and modify the useFormReturn before injecting it here.
- */
-export function Form<TFieldValues, TContext>({
-  fields,
-  useFormReturn,
-}: FormProps<TFieldValues, TContext>): JSX.Element {
-  return (
-    <div className="space-y-4">
-      {fields.map((props) => {
-        if (props.type === "row") {
-          const { fields: rowFields, key } =
-            props as FormFieldRowProps<TFieldValues>;
-          return (
-            <div className={"flex flex-row space-x-4"} key={key}>
-              {rowFields.map((field) => FormFieldMapper(field, useFormReturn))}
-            </div>
-          );
-        }
-        return FormFieldMapper(props, useFormReturn);
-      })}
-    </div>
-  );
-}
-
-function FormFieldMapper<TFieldValues, TContext>(
-  formFieldProps: FormFieldProps<TFieldValues>,
-  useFormReturn: UseFormReturn<TFieldValues, TContext>
-): JSX.Element {
-  const {
-    type,
-    name,
-    options,
-    fieldProps = {},
-    ...decoratorProps
-  } = formFieldProps;
-  const {
-    register,
-    control,
-    formState: { errors },
-  } = useFormReturn;
-
-  switch (type) {
-    case "text":
-    case "number":
-    case "email":
-    case "password":
-      return (
-        <FormInput
-          key={name}
-          {...decoratorProps}
-          fieldRequired={isRequired(options)}
-          fieldErrors={errors}
-          {...(fieldProps as InputProps)}
-          {...register(name, options)}
-          type={type || "text"}
-        />
-      );
-    case "select":
-      return (
-        <FormSelect
-          key={name}
-          {...decoratorProps}
-          fieldRequired={isRequired(options)}
-          fieldErrors={errors}
-          {...(fieldProps as SelectProps)}
-          control={control as Control}
-          rules={options}
-          name={name}
-        />
-      );
-    case "radioGroup":
-      return (
-        <FormRadioGroup
-          key={name}
-          {...decoratorProps}
-          fieldRequired={isRequired(options)}
-          fieldErrors={errors}
-          {...(fieldProps as RadioGroupProps)}
-          {...register(name, options)}
-        />
-      );
-    default:
-      return <></>;
-  }
-}