@luscii-healthtech/web-ui 2.9.0 → 2.10.2

package/src/components/ButtonV2/ButtonV2.tsx

@@ -1,97 +0,0 @@
-import classNames from "classnames";
-import React from "react";
-
-import { Spinner } from "../Spinner/Spinner";
-import Text from "../Text/Text";
-
-import { ButtonProps } from "./ButtonProps.type";
-
-export const ButtonV2 = ({
-  onClick,
-  text,
-  textColor,
-  textHoverColor,
-  icon,
-  isDisabled,
-  isPending,
-  className,
-  ...otherAttributes
-}: ButtonProps): JSX.Element => {
-  function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
-    event.stopPropagation();
-    onClick?.(event);
-  }
-
-  if (!text && !icon) {
-    console.error(
-      "A text or an icon is required to use this component, please make sure to pass at least one of them as a prop."
-    );
-    return <span>Invalid props passed to this component.</span>;
-  }
-
-  const buttonClassName = classNames(
-    [
-      "h-11",
-      "relative flex flex-row justify-center items-center",
-      "border",
-      "transition-outline transition-colors duration-300 ease-in-out",
-      "rounded-full",
-      "leading-none",
-      "shadow-sm",
-      "cursor-pointer",
-      "focus:outline-primary",
-      "group",
-    ],
-    {
-      "w-11": !text && icon,
-      "pl-4 pr-6": text && icon,
-      "px-4": text && !icon,
-    },
-    {
-      "opacity-50": isDisabled,
-      "pointer-events-none": isDisabled || isPending,
-    },
-    className
-  );
-
-  return (
-    <button
-      {...otherAttributes}
-      className={buttonClassName}
-      type={"button"}
-      onClick={handleClick}
-      disabled={isDisabled}
-      aria-disabled={isDisabled}
-    >
-      {icon && React.createElement(icon, { className: "w-6 h-6" })}
-
-      {isPending && (
-        <span
-          className="opacity-100"
-          // IE11 center translate fix
-          style={{
-            position: "absolute",
-            left: "50%",
-            top: "50%",
-            transform: "translate(-50%, -50%)",
-          }}
-        >
-          <Spinner className="text-white" />
-        </span>
-      )}
-
-      {text && (
-        <Text
-          className={classNames({
-            invisible: isPending,
-            "ml-1": icon,
-          })}
-          text={text}
-          color={textColor}
-          hoverColor={textHoverColor}
-          hoverInGroup
-        />
-      )}
-    </button>
-  );
-};

package/src/components/ButtonV2/PrimaryButton.tsx

@@ -1,25 +0,0 @@
-import classNames from "classnames";
-import React from "react";
-
-import { ButtonV2 } from "./ButtonV2";
-import { ButtonWithPendingStateProps } from "./ButtonProps.type";
-
-export const PrimaryButton = (
-  props: ButtonWithPendingStateProps
-): JSX.Element => {
-  return (
-    <ButtonV2
-      {...props}
-      className={classNames(
-        [
-          "text-white",
-          "bg-blue-800",
-          "border-primary-transparent",
-          "hover:bg-blue-900",
-        ],
-        props.className
-      )}
-      textColor="white"
-    />
-  );
-};

package/src/components/ButtonV2/SecondaryButton.tsx

@@ -1,26 +0,0 @@
-import classNames from "classnames";
-import React from "react";
-
-import { ButtonV2 } from "./ButtonV2";
-import { BaseButtonProps } from "./ButtonProps.type";
-
-export const SecondaryButton = (props: BaseButtonProps): JSX.Element => {
-  return (
-    <ButtonV2
-      {...props}
-      className={classNames(
-        [
-          "text-blue-800",
-          "bg-white",
-          "border-slate-300",
-          "hover:text-blue-900",
-          "hover:border-slate-400",
-          "focus:border-blue-800",
-        ],
-        props.className
-      )}
-      textColor="blue-800"
-      textHoverColor="blue-900"
-    />
-  );
-};

package/src/components/ButtonV2/TertiaryButton.tsx

@@ -1,26 +0,0 @@
-import classNames from "classnames";
-import React from "react";
-
-import { ButtonV2 } from "./ButtonV2";
-import { BaseButtonProps } from "./ButtonProps.type";
-
-export const TertiaryButton = (props: BaseButtonProps): JSX.Element => {
-  return (
-    <ButtonV2
-      {...props}
-      className={classNames(
-        [
-          "text-blue-800",
-          "bg-transparent",
-          "border-transparent",
-          "hover:text-blue-900",
-          "focus:border-blue-800",
-          "shadow-none",
-        ],
-        props.className
-      )}
-      textColor="blue-800"
-      textHoverColor="blue-900"
-    />
-  );
-};

package/src/components/Carousel/Carousel.tsx

@@ -1,52 +0,0 @@
-import React, { useEffect, useState } from "react";
-import classNames from "classnames";
-import Glider from "react-glider";
-
-import { GliderContainer } from "./GliderContainer";
-
-interface CarouselProps {
-  id: string;
-  slides: React.ReactNode[];
-  className?: string;
-}
-
-const Carousel = ({ slides, className, id }: CarouselProps): JSX.Element => {
-  const [isVisible, setIsVisible] = useState(false);
-  useEffect(() => setIsVisible(false), [id]);
-  useEffect(() => {
-    // hack to force Glider to re mount when id changes
-    if (!isVisible) {
-      setIsVisible(true);
-    }
-  }, [isVisible]);
-
-  return (
-    isVisible ? (
-      <Glider
-        hasDots
-        hasArrows
-        skipTrack
-        // draggable
-        scrollLock
-        rewind
-        arrows={{
-          prev: ".entity-preview-left",
-          next: ".entity-preview-right",
-        }}
-        id={id} // this should force Glider to rebuild, but it does not
-        dots={".entity-preview-dots"}
-        className={classNames("h-full", className)}
-        containerElement={GliderContainer}
-      >
-        <div className="glider-track h-full">
-          {slides?.map((slide, index) => (
-            <div key={index} className={"overflow-hidden"}>
-              {slide}
-            </div>
-          ))}
-        </div>
-      </Glider>
-    ) : <></>);
-};
-
-export default Carousel;

package/src/components/Carousel/GliderContainer.scss

@@ -1,13 +0,0 @@
-.entity-preview-dots.glider-dots {
-  @apply pt-4;
-  .glider-dot {
-    @apply h-2 w-2 m-1 bg-blue-50;
-    &:focus {
-      @apply outline-primary;
-    }
-    &.active,
-    &:focus {
-      @apply bg-blue-800;
-    }
-  }
-}

package/src/components/Carousel/GliderContainer.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-
-import Button, { BUTTON_ROLES } from "../Button/Button";
-
-import "./GliderContainer.scss";
-
-interface GliderContainerProps {
-  children: React.ReactNode;
-}
-
-export const GliderContainer = (props: GliderContainerProps): JSX.Element => (
-  <div className={"relative h-full pb-6 glider-contain px-17 pb-6"}>
-    {props.children}
-    <div className={"entity-preview-left absolute top-1/2 left-0"}>
-      <Button iconName={"chevron-left-blue"} role={BUTTON_ROLES.QUATERNARY} />
-    </div>
-    <div className={"entity-preview-right absolute top-1/2 right-0"}>
-      <Button iconName={"chevron-right-blue"} role={BUTTON_ROLES.QUATERNARY} />
-    </div>
-    <div className="entity-preview-dots" />
-  </div>
-);

package/src/components/CenteredHero/CenteredHero.tsx

@@ -1,63 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-
-import Button from "../Button/Button";
-import { ButtonProps } from "../Button/Button.types";
-import Text from "../Text/Text";
-import { Title } from "../Title/Title";
-
-export type BackgroundColor = "white" | "slate-50";
-
-export interface CenteredHeroProps {
-  title: string;
-  text: string;
-  image: string;
-  buttons: ButtonProps[];
-  background?: BackgroundColor;
-}
-
-const CenteredHero = ({
-  title,
-  text,
-  image,
-  buttons,
-  background = "slate-50",
-}: CenteredHeroProps): JSX.Element => {
-  return (
-    <div
-      className={classNames(
-        "p-6 flex flex-col items-center align-center w-full",
-        {
-          "bg-white": background === "white",
-          "bg-slate-50": background === "slate-50",
-        }
-      )}
-    >
-      {image && <img src={image} className="h-36 w-36 mb-4" />}
-      {title && <Title text={title} type={"base"} />}
-      {text && <Text text={text} />}
-
-      {buttons?.length > 0 && (
-        <div className="flex flex-row mt-4">
-          {buttons
-            .filter(
-              (button) => button.title && button.handleOnClick && button.type
-            )
-            .map((button) => (
-              <Button
-                className="mr-4 last:mr-0"
-                key={button.title}
-                role={button.role}
-                type={button.type}
-                title={button.title}
-                text={button.text}
-                onClick={button.handleOnClick}
-              />
-            ))}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default CenteredHero;

package/src/components/CheckBoxListModal/CheckboxListModal.tsx

@@ -1,180 +0,0 @@
-import * as React from "react";
-import { useEffect, useState } from "react";
-import classNames from "classnames";
-import groupBy from "lodash/groupBy";
-
-import { CheckboxChangeEvent } from "../CheckboxList/CheckboxList.types";
-import { SecondaryButton } from "../ButtonV2/SecondaryButton";
-import { PrimaryButton } from "../ButtonV2/PrimaryButton";
-import { ModalWithButtons } from "../Modal/ModalWithButtons";
-import LoadingIndicator from "../LoadingIndicator/LoadingIndicator";
-import { SearchInput } from "../Input/SearchInput";
-import Text from "../Text/Text";
-import CheckboxList from "../CheckboxList/CheckboxList";
-
-export interface Item {
-  id: string;
-  label: string;
-  isChecked: boolean;
-  group?: string;
-  isPinned?: boolean;
-}
-
-export interface Group {
-  title?: string;
-  items: Item[];
-}
-
-interface CheckboxListModalTexts {
-  title: string;
-  confirmLabel: string;
-  cancelLabel: string;
-  searchPlaceHolder?: string;
-  emptyState: string;
-}
-
-export interface CheckboxListModalProps {
-  texts: CheckboxListModalTexts;
-  initialItems: Array<Item>;
-  isLoadingInitialItems?: boolean;
-  isOpen: boolean;
-  onSave: (newItems: Item[]) => void;
-  onCloseClick: () => void;
-  filterItem: (item: Item, searchQuery: string) => boolean;
-  className?: string;
-  hasSearch: boolean;
-}
-
-const transformToGroups = (items: Item[]): Group[] => {
-  const pinned = items.find((option) => option.isPinned);
-
-  const itemsWithGroup = items.filter((option) => option.group);
-  const groups = Object.entries(groupBy(itemsWithGroup, "group")).map(
-    (group) => ({
-      title: group[0],
-      items: group[1].sort((a, b) =>
-        a.label > b.label ? 1 : b.label > a.label ? -1 : 0
-      ),
-    })
-  );
-
-  const itemsWithoutGroup = items.filter((option) => !option.group);
-  const restGroup = {
-    name: undefined,
-    items: itemsWithoutGroup,
-  };
-
-  if (pinned) {
-    const myGroup = {
-      items: [pinned],
-    };
-    return [myGroup, ...groups, restGroup];
-  }
-
-  return [...groups, restGroup];
-};
-
-export const CheckboxListModal = ({
-  texts,
-  initialItems,
-  isLoadingInitialItems,
-  isOpen,
-  onSave,
-  onCloseClick,
-  filterItem = () => true,
-  className,
-  hasSearch = false,
-}: CheckboxListModalProps): JSX.Element => {
-  const containerClassName = classNames(className);
-
-  const [items, setItems] = useState<Item[]>([]);
-  const [visibleItems, setVisibleItems] = useState<Item[]>([]);
-  const [groups, setGroups] = useState<Group[]>([]);
-  const [search, setSearch] = useState("");
-
-  useEffect(() => {
-    setItems(initialItems);
-  }, [initialItems]);
-
-  useEffect(() => {
-    setVisibleItems(items.filter((item) => filterItem(item, search)));
-  }, [items, search]);
-
-  useEffect(() => {
-    setGroups(transformToGroups(visibleItems));
-  }, [visibleItems]);
-
-  const handleOnItemChange = (event: CheckboxChangeEvent) => {
-    const updatedItems = [...items];
-    const index = updatedItems.findIndex((item) => item.id === event.id);
-    updatedItems[index].isChecked = event.newCheckedValue;
-    setItems(updatedItems);
-  };
-
-  const handleOnCloseClick = (
-    event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent
-  ) => {
-    event.stopPropagation();
-    onCloseClick();
-  };
-
-  const handleOnSaveClick = () => {
-    onSave(items.filter((item) => item.isChecked));
-    onCloseClick();
-  };
-
-  const handleOnSearchChange = (event) => {
-    setSearch(event.currentTarget.value ?? "");
-  };
-
-  const closeButton = (
-    <SecondaryButton
-      text={texts.cancelLabel}
-      onClick={handleOnCloseClick}
-      key="close-checkbox-list-modal"
-      className="mr-2"
-    />
-  );
-
-  const saveButton = (
-    <PrimaryButton
-      text={texts.confirmLabel}
-      onClick={handleOnSaveClick}
-      key="save-selected-checkbox-list-items"
-    />
-  );
-
-  return (
-    <ModalWithButtons
-      isOpen={isOpen}
-      title={texts.title}
-      onCloseClick={handleOnCloseClick}
-      withPadding
-      shouldCloseOnOverlayClick
-      className={containerClassName}
-      buttons={[closeButton, saveButton]}
-      buttonsAlignment="justify-end"
-    >
-      <div className="max-h-135 overflow-y-auto pr-4">
-        {isLoadingInitialItems && <LoadingIndicator />}
-
-        {hasSearch && !isLoadingInitialItems && (
-          <SearchInput
-            className="w-130 mb-2"
-            value={search}
-            placeholder={texts.searchPlaceHolder}
-            onChange={handleOnSearchChange}
-          />
-        )}
-
-        {!isLoadingInitialItems && items?.length > 0 && (
-          <CheckboxList groups={groups} onChange={handleOnItemChange} />
-        )}
-
-        {!isLoadingInitialItems && items?.length === 0 && (
-          <Text text={texts.emptyState} />
-        )}
-      </div>
-    </ModalWithButtons>
-  );
-};

package/src/components/Checkbox/Checkbox.scss

@@ -1,125 +0,0 @@
-@import "../../styles/colors";
-@import "../../styles/layout";
-
-.cweb-checkbox {
-  outline: none;
-  transition: all 0.3s ease;
-
-  .cweb-checkbox-input {
-    position: absolute;
-    -webkit-appearance: none;
-    height: 1px;
-    opacity: 0;
-    width: 1px;
-  }
-
-  &.type-regular {
-    .cweb-checkbox-label {
-      display: flex;
-      align-items: center;
-      margin-bottom: 0;
-    }
-
-    .cweb-checkbox-icon-container {
-      width: 16px;
-      height: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex: 0 0 auto;
-      border: 1px solid $color-border;
-      border-radius: $default-border-radius;
-    }
-
-    &.hasError {
-      .cweb-checkbox-icon-container {
-        border: 1px solid $color-negative;
-      }
-    }
-
-    .cweb-checkbox-icon {
-      display: block;
-    }
-
-    &.is-focused {
-      .cweb-checkbox-icon-container {
-        border-color: $color-primary;
-      }
-    }
-
-    &.is-checked {
-      .cweb-checkbox-icon {
-        width: 0.5rem;
-        height: 0.5rem;
-        padding: 4px;
-        background: url("../../assets/check-icon.svg") no-repeat center;
-        background-size: contain;
-      }
-    }
-
-    &.is-indeterminate {
-      .cweb-checkbox-icon {
-        width: 0.5rem;
-        height: 0.5rem;
-        padding: 4px;
-        background: url("../../assets/indeterminate-icon.svg") no-repeat center;
-        background-size: contain;
-      }
-    }
-
-    &.is-disabled.show-cross-when-disabled {
-      .cweb-checkbox-icon {
-        width: 10px;
-        height: 10px;
-        background: url("../../assets/check-cross-icon.svg") no-repeat center;
-        background-size: contain;
-        opacity: 0.6;
-      }
-    }
-  }
-
-  &.type-switch {
-    .cweb-checkbox-label {
-      display: flex;
-      align-items: center;
-      margin-bottom: 0;
-      width: 56px;
-      height: 28px;
-      position: relative;
-    }
-
-    .cweb-checkbox-icon-container {
-      position: absolute;
-      cursor: pointer;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: $input-background;
-      border-radius: 16px;
-
-      &:after {
-        position: relative;
-        display: block;
-        content: "";
-        height: 20px;
-        width: 20px;
-        top: 4px;
-        left: 4px;
-        background-color: white;
-        border-radius: 50%;
-        transition: all 0.2s ease;
-      }
-    }
-
-    &.is-checked {
-      .cweb-checkbox-icon-container {
-        background-color: $color-toggle-switch-background;
-
-        &:after {
-          left: 32px;
-        }
-      }
-    }
-  }
-}