@luscii-healthtech/web-ui 2.9.0 → 2.10.2

package/src/components/Page/CRUDPage.js

@@ -1,123 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-
-import LoadingIndicator from "../LoadingIndicator/LoadingIndicator";
-import LegacyTitle, { TITLE_TYPE_OPTIONS } from "../Title/LegacyTitle";
-import Button, { BUTTON_ROLES } from "../Button/Button";
-import Line from "../Line/Line";
-import { NavLayout } from "../NavMenu/NavLayout";
-import { Steps } from "../Steps/Steps";
-
-import "./CRUDPage.scss";
-
-function CRUDPage({
-  dataTestId = "page",
-  title,
-  stepTitles,
-  currentStep = 1,
-  submitButtonProps,
-  deleteButtonProps,
-  cancelButtonProps,
-  icon,
-  className,
-  children,
-  isLoading,
-  isSubmitting,
-  navMenuComponent,
-  localization,
-}) {
-  const mergedClasses = classNames("cweb-crud-page max-w-3xl", className);
-  const containerClassnames = classNames("cweb-crud-page-container mb-20");
-
-  const submitButton = submitButtonProps && (
-    <Button
-      data-test-id="submit-button"
-      key="submit-button"
-      /* eslint-disable-next-line */
-      onClick={submitButtonProps.handler}
-      role={BUTTON_ROLES.PRIMARY}
-      text={submitButtonProps.name}
-      isPending={isSubmitting}
-    />
-  );
-  const deleteButton = deleteButtonProps && (
-    <Button
-      data-test-id="delete-button"
-      key="delete-button"
-      /* eslint-disable-next-line */
-      onClick={deleteButtonProps.handler}
-      role={BUTTON_ROLES.NEGATIVE}
-      text={deleteButtonProps.name}
-    />
-  );
-  const cancelButton = cancelButtonProps && (
-    <Button
-      data-test-id="cancel-button"
-      key="cancel-button"
-      /* eslint-disable-next-line */
-      onClick={cancelButtonProps.handler}
-      role={BUTTON_ROLES.SECONDARY}
-      text={cancelButtonProps.name}
-    />
-  );
-
-  const renderHeader = () => {
-    return (
-      <div className="flex flex-row justify-start align-center">
-        <img id="title-icon" src={icon} className="mr-4 w-11 h-11" alt={"title icon"} />
-        <LegacyTitle id="title-text" text={title} type={TITLE_TYPE_OPTIONS.BOLD} />
-      </div>
-    );
-  };
-
-  return (
-    <div className={containerClassnames}>
-      <NavLayout menu={navMenuComponent}>
-        <>
-          {isLoading && (
-            <div className={classNames(mergedClasses, "cweb-crud-page-loading-container")}>
-              <div className="flex flex-row justify-start align-center">{renderHeader()}</div>
-              <LoadingIndicator className="crud-page-loader" asModal={false} />
-            </div>
-          )}
-
-          {!isLoading && (
-            <div className={mergedClasses} data-test-id={dataTestId}>
-              <div className="flex flex-row justify-start align-center">{renderHeader()}</div>
-
-              <div className={"cweb-crud-page-form-container"}>
-                {stepTitles && stepTitles.length > 0 && (
-                  <Steps orderedStepTitles={stepTitles} currentStep={currentStep} className={"mb-4"} localization={localization}/>
-                )}
-                {children}
-                <Line
-                  left={[cancelButton, deleteButton]}
-                  right={[submitButton]}
-                  className={"cweb-crud-page-button-line"}
-                />
-              </div>
-            </div>
-          )}
-        </>
-      </NavLayout>
-    </div>
-  );
-}
-
-CRUDPage.propTypes = {
-  isLoading: PropTypes.bool,
-  title: PropTypes.string.isRequired,
-  stepTitles: PropTypes.array,
-  currentStep: PropTypes.number,
-  submitButtonProps: PropTypes.shape({ name: PropTypes.string, handler: PropTypes.func }),
-  deleteButtonProps: PropTypes.shape({ name: PropTypes.string, handler: PropTypes.func }),
-  cancelButtonProps: PropTypes.shape({ name: PropTypes.string, handler: PropTypes.func }),
-  className: PropTypes.string,
-  icon: PropTypes.string,
-  isSubmitting: PropTypes.bool,
-  navMenuComponent: PropTypes.elementType,
-  localization: PropTypes.object,
-};
-
-export default CRUDPage;

package/src/components/Page/CRUDPage.scss

@@ -1,32 +0,0 @@
-@import "../../styles/colors";
-
-.cweb-crud-page {
-  width: 100%;
-  margin: 36px auto 0;
-
-  &-form-container {
-    background-color: #fff;
-    border-radius: 8px;
-    padding: 24px;
-    margin-top: 16px;
-  }
-
-  &-button-line {
-    border-top: 1px solid $color-divider;
-    padding-top: 16px;
-    margin-top: 16px;
-  }
-
-  &-loading-container {
-    height: 90vh; /* puting this in 100vh causes an overflow bug */
-    overflow-y: hidden;
-    position: relative;
-
-    .crud-page-loader {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
-}

package/src/components/Page/Page.js

@@ -1,102 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-
-//import Breadcrumbs from "../Breadcrumbs/Breadcrumbs";
-import LoadingIndicator from "../LoadingIndicator/LoadingIndicator";
-//import { SmartNavMenu } from "../../components/NavMenu/SmartNavMenu";
-import { NavLayout } from "../NavMenu/NavLayout";
-import { Title } from "../Title/Title";
-//import { shouldPageShowFeedbackBlock } from "../../common/utils/locationUtils";
-//import { FeedbackBlock } from "../FeedbackBlock/FeedbackBlock";
-//import { ERROR_PAGE_ID } from "../../components/ErrorPages/ErrorPage";
-
-import "./Page.scss";
-
-//TODO this page needs to be refactored
-
-/**
- * Renders page's content, if `isLoading` is false otherwise shows loading indicator.
- *
- * `breadcrumbs`, `title` and `content` can be lazy properties, that is parameterless functions which return actual value.
- * `children` property has priority over `content` property.
- *
- * @typedef {{ name?: string, icon?: string|Object, link?: string}} Breadcrumb
- *
- */
-function Page({
-  dataTestId = "page",
-  breadcrumbs,
-  title,
-  accessories,
-  accessoryPosition = "right",
-  className,
-  children,
-  content,
-  isLoading = false,
-  isPolling = false,
-  spinnerColor = "blue",
-  navLayoutProps = {},
-  showFeedbackBlock = false,
-  feedbackBlock = <></>,
-  navMenu,
-  id,
-}) {
-  const mergedPageClasses = classNames("cweb-page", className);
-  const containerClassnames = classNames("cweb-page-container");
-
-  if (isLoading) {
-    return (
-      <div className={mergedPageClasses}>
-        <LoadingIndicator asModal={false} />
-      </div>
-    );
-  }
-
-  const maybeTitle = title instanceof Function ? title() : title;
-
-  const accessoryClasses = classNames("cweb-page-header mb-4", {
-    [`accessory-${accessoryPosition}`]: true,
-  });
-
-  const accessoriesContent = accessories instanceof Function ? accessories() : accessories;
-  const childrenOrContentProp = children || (content instanceof Function ? content() : content);
-
-  return (
-    <div id={id} className={containerClassnames}>
-      <NavLayout menu={navMenu} {...navLayoutProps}>
-        <div className={mergedPageClasses} data-test-id={dataTestId}>
-          <div className={accessoryClasses}>
-            <Title data-test-id={`${dataTestId}-title`} text={maybeTitle} />
-            {isPolling && <LoadingIndicator asSpinner={true} className={"page-spinner"} spinnerColor={spinnerColor} />}
-            {accessoriesContent}
-          </div>
-          {childrenOrContentProp}
-        </div>
-
-        {!isLoading && feedbackBlock}
-      </NavLayout>
-    </div>
-  );
-}
-
-const breadcrumbItemShape = PropTypes.shape({
-  name: PropTypes.string,
-  icon: PropTypes.string,
-  link: PropTypes.string,
-});
-
-Page.propTypes = {
-  breadcrumbs: PropTypes.oneOfType([PropTypes.arrayOf(breadcrumbItemShape), PropTypes.func]),
-  isLoading: PropTypes.bool,
-  isFetching: PropTypes.bool,
-  spinnerColor: PropTypes.oneOf(["blue", "gray"]),
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  accessories: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-  accessoryPosition: PropTypes.oneOf(["right", "bottom", "left"]),
-  content: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.func]),
-  id: PropTypes.string,
-  navLayoutProps: PropTypes.object,
-};
-
-export default Page;

package/src/components/Page/Page.scss

@@ -1,59 +0,0 @@
-.cweb-page {
-  width: 100%;
-  max-width: 1140px;
-  margin: 32px auto 0 auto;
-
-  .cweb-page-breadcrumbs {
-    margin-bottom: 16px;
-  }
-
-  .page-spinner {
-    margin-left: 8px;
-    margin-bottom: 4px;
-
-    img {
-      width: 21px;
-    }
-  }
-
-  .cweb-page-header {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    flex-grow: 0;
-
-    .cweb-page-title {
-      display: inline;
-    }
-
-    &.accessory-right {
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    &.accessory-bottom {
-      @media screen and (max-width: 426px) {
-        max-width: 75vw;
-
-        img {
-          max-width: 10vw;
-        }
-
-        button {
-          p {
-            font-size: 4vw;
-          }
-        }
-      }
-
-      flex-direction: column;
-      align-items: flex-start;
-
-      .cweb-page-title {
-        margin-bottom: 8px;
-        display: inline;
-      }
-    }
-  }
-}

package/src/components/PageHeader/PageHeader.tsx

@@ -1,51 +0,0 @@
-import React from "react";
-
-import { Breadcrumbs, BreadcrumbProps } from "../Breadcrumbs/Breadcrumbs";
-import LoadingIndicator from "../LoadingIndicator/LoadingIndicator";
-import Tabbar, { TabbarProps } from "../Tabbar/Tabbar";
-import { Title } from "../Title/Title";
-
-export interface PageHeaderProps {
-  navigation?: Omit<TabbarProps, "withoutPadding">;
-  breadcrumbs?: BreadcrumbProps["crumbs"];
-  dataTestId?: string;
-  title: string;
-  isPolling?: boolean;
-  accessories?: React.ReactNode;
-}
-
-export const PageHeader: React.VoidFunctionComponent<PageHeaderProps> = ({
-  navigation,
-  breadcrumbs,
-  dataTestId,
-  accessories,
-  isPolling,
-  title,
-}) => {
-  return (
-    <div data-test-id="page-header" className="p-4 space-y-4 bg-white">
-      {!!breadcrumbs?.length && (
-        <div className="mb-4 space-y-4">
-          <Breadcrumbs crumbs={breadcrumbs} />
-          <div className="mb-4 border-b border-slate-100" />
-        </div>
-      )}
-      <div className="flex flex-row items-center justify-between">
-        <div className="flex flex-row items-center space-x-3">
-          <Title data-test-id={`${dataTestId}-title`} text={title} />
-          {isPolling && (
-            <LoadingIndicator
-              asSpinner={true}
-              className={"page-spinner"}
-              spinnerColor="gray"
-            />
-          )}
-        </div>
-        {accessories && (
-          <div data-test-id="page-header-accessories">{accessories}</div>
-        )}
-      </div>
-      {navigation && <Tabbar {...navigation} withoutPadding />}
-    </div>
-  );
-};

package/src/components/PaginationMenu/PaginationMenu.tsx

@@ -1,47 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-
-import { PaginationMenuSmall } from "./PaginationMenuSmall";
-import { PaginationMenuLarge } from "./PaginationMenuLarge";
-import { PaginationMenuProps } from "./PaginationMenu.types";
-
-export const PaginationMenu = (props: PaginationMenuProps): JSX.Element => {
-  const buildPaginationLarge = (): JSX.Element => {
-    if (!props.localization) {
-      console.error(
-        "Localization is required to use the non small Pagination component, please make sure to pass it as a prop."
-      );
-      return <span>Invalid props passed to this component.</span>;
-    }
-    return (
-      <PaginationMenuLarge
-        pageCount={props.pageCount}
-        currentPageNumber={props.currentPageNumber}
-        onChange={props.onChange}
-        pageSize={props.pageSize}
-        localization={props.localization}
-        resultCount={props.resultCount}
-      />
-    );
-  };
-
-  return (
-    <div
-      className={classNames(
-        "flex flex-row w-full items-center justify-between",
-        props.className
-      )}
-    >
-      {props.small ? (
-        <PaginationMenuSmall
-          pageCount={props.pageCount}
-          currentPageNumber={props.currentPageNumber}
-          pageSize={props.pageSize}
-          onChange={props.onChange}
-        />
-      ) : (
-        buildPaginationLarge()
-      )}
-    </div>
-  );
-};

package/src/components/PaginationMenu/PaginationMenu.types.ts

@@ -1,46 +0,0 @@
-export interface PaginationMenuProps {
-  pageCount: number;
-  currentPageNumber: number;
-  onChange: OnPaginationChange;
-  pageSize?: PageSize;
-  localization?: Localization;
-  resultCount?: number;
-  small?: boolean;
-  className?: string;
-}
-
-export interface PaginationMenuSmallProps {
-  pageCount: number;
-  currentPageNumber: number;
-  onChange: OnPaginationChange;
-  pageSize?: PageSize;
-}
-
-export interface PaginationMenuLargeProps {
-  pageCount: number;
-  currentPageNumber: number;
-  onChange: OnPaginationChange;
-  pageSize?: PageSize;
-  localization: Localization;
-  resultCount?: number;
-}
-
-export type OnPaginationChange = (
-  pageNumber: number,
-  pageSize?: PageSize
-) => void;
-
-export type PageSize = 25 | 50 | 75 | 100;
-
-export interface Localization {
-  display: string;
-  page: string;
-  previous: string;
-  next: string;
-  of: string;
-}
-
-export type Option = {
-  value: number;
-  label: string;
-};

package/src/components/PaginationMenu/PaginationMenu.utils.ts

@@ -1,49 +0,0 @@
-import { Localization, Option, PageSize } from "./PaginationMenu.types";
-
-const PAGE_SIZES: PageSize[] = [25, 50, 75, 100];
-
-export const PAGE_SIZE_OPTIONS = PAGE_SIZES.map(pageSize => {
-  return {
-    label: pageSize.toString(),
-    value: pageSize,
-  };
-});
-
-export const getPageNumberOptions = (pageCount: number): Option[] => {
-  const items: Option[] = [];
-  for (let i = 1; i <= pageCount; i++) {
-    items.push({
-      label: i.toString(),
-      value: i,
-    });
-  }
-  return items;
-};
-
-/**
- *
- * @returns When the pageSize and resultCount params are present,
- * this function returns a text indicating the range of elements that are being displayed,
- * otherwise it returns a text indicating the current page and the page count.
- * @example 1-50 of 100
- *
- */
-export const getSummaryText = (
-  pageCount: number,
-  currentPageNumber: number,
-  localization: Localization,
-  pageSize?: number,
-  resultCount?: number
-): string => {
-  if (pageSize && resultCount) {
-    const lowestElement = (currentPageNumber - 1) * pageSize + 1;
-    const highestElement =
-      currentPageNumber === pageCount
-        ? resultCount
-        : currentPageNumber * pageSize;
-
-    return `${lowestElement}-${highestElement} ${localization.of} ${resultCount}`;
-  } else {
-    return `${localization.page} ${currentPageNumber} / ${pageCount}`;
-  }
-};

package/src/components/PaginationMenu/PaginationMenuLarge.tsx

@@ -1,96 +0,0 @@
-import React from "react";
-import { GroupBase, SingleValue } from "react-select";
-
-import { SecondaryButton } from "../ButtonV2/SecondaryButton";
-import Select from "../Select/Select";
-import { Text } from "../Text/Text";
-
-import { Option, PaginationMenuLargeProps } from "./PaginationMenu.types";
-import {
-  getPageNumberOptions,
-  getSummaryText,
-  PAGE_SIZE_OPTIONS,
-} from "./PaginationMenu.utils";
-
-export const PaginationMenuLarge = (
-  props: PaginationMenuLargeProps
-): JSX.Element => {
-  const handleOnPageNumberSelect = (optionSelected: SingleValue<Option>) => {
-    optionSelected && props.onChange(optionSelected.value, props.pageSize);
-  };
-  const handleOnPageSizeSelect = (optionSelected: SingleValue<Option>) => {
-    const pageSize = PAGE_SIZE_OPTIONS.find(
-      option => option === optionSelected
-    );
-    pageSize && props.onChange(1, pageSize.value);
-  };
-  const handleOnPrevNextButtonClick = (
-    event: React.MouseEvent<HTMLButtonElement>
-  ) => {
-    const newPage = event.currentTarget.dataset.page;
-    newPage && props.onChange(parseInt(newPage, 10), props.pageSize);
-  };
-
-  return (
-    <>
-      <div className={"flex flex-row items-center"}>
-        {props.pageSize && props.resultCount && (
-          <>
-            <Text text={props.localization.display} />
-            <Select<Option, false, GroupBase<Option>>
-              className={"w-24 ml-2 mr-4"}
-              options={PAGE_SIZE_OPTIONS}
-              onChange={handleOnPageSizeSelect}
-              value={{
-                label: props.pageSize.toString(),
-                value: props.pageSize,
-              }}
-              menuPlacement="auto"
-            />
-          </>
-        )}
-        <Text text={props.localization.page} />
-        <Select<Option, false, GroupBase<Option>>
-          className={"w-24 ml-2"}
-          options={getPageNumberOptions(props.pageCount)}
-          onChange={handleOnPageNumberSelect}
-          value={{
-            label: props.currentPageNumber.toString(),
-            value: props.currentPageNumber,
-          }}
-          isDisabled={props.pageCount < 2}
-          menuPlacement="auto"
-        />
-      </div>
-
-      <div className={"ml-4 flex flex-row items-center"}>
-        <Text
-          text={getSummaryText(
-            props.pageCount,
-            props.currentPageNumber,
-            props.localization,
-            props.pageSize,
-            props.resultCount
-          )}
-          color="slate-500"
-        />
-        <SecondaryButton
-          data-test-id="prev-button"
-          text={props.localization.previous}
-          data-page={props.currentPageNumber - 1}
-          onClick={handleOnPrevNextButtonClick}
-          isDisabled={props.currentPageNumber === 1}
-          className="ml-4"
-        />
-        <SecondaryButton
-          data-test-id="next-button"
-          text={props.localization.next}
-          isDisabled={props.currentPageNumber === props.pageCount}
-          data-page={props.currentPageNumber + 1}
-          onClick={handleOnPrevNextButtonClick}
-          className="ml-4"
-        />
-      </div>
-    </>
-  );
-};

package/src/components/PaginationMenu/PaginationMenuSmall.tsx

@@ -1,43 +0,0 @@
-import React from "react";
-
-import { TertiaryButton } from "../ButtonV2/TertiaryButton";
-import { LeftArrowIcon } from "../Icons/LeftArrowIcon";
-import { RightArrowIcon } from "../Icons/RightArrowIcon";
-import { Text } from "../Text/Text";
-
-import { PaginationMenuSmallProps } from "./PaginationMenu.types";
-
-export const PaginationMenuSmall = (
-  props: PaginationMenuSmallProps
-): JSX.Element => {
-  const handleOnChange = (event: React.MouseEvent<HTMLButtonElement>) => {
-    const pageNumber = event.currentTarget.dataset.page;
-    pageNumber && props.onChange(parseInt(pageNumber, 10), props.pageSize);
-  };
-
-  return (
-    <>
-      <TertiaryButton
-        data-test-id="prev-button"
-        icon={LeftArrowIcon}
-        data-page={props.currentPageNumber - 1}
-        onClick={handleOnChange}
-        isDisabled={props.currentPageNumber === 1}
-      />
-      <Text
-        className="ml-4"
-        text={`${props.currentPageNumber} / ${props.pageCount}`}
-        type="sm"
-        color="slate-500"
-      />
-      <TertiaryButton
-        className="ml-4"
-        data-test-id="next-button"
-        icon={RightArrowIcon}
-        isDisabled={props.currentPageNumber === props.pageCount}
-        data-page={props.currentPageNumber + 1}
-        onClick={handleOnChange}
-      />
-    </>
-  );
-};