@luscii-healthtech/web-ui 2.9.0 → 2.10.2

package/src/components/Table/Table.utils.ts

@@ -1,23 +0,0 @@
-import {
-  TableFieldText,
-  TableFieldAction,
-  TableFieldContent,
-} from "./Table.types";
-
-export function isTableFieldText<Item>(
-  content: TableFieldContent<Item>
-): content is TableFieldText {
-  return "text" in content || "tag" in content;
-}
-
-export function isTableFieldAction<Item>(
-  content: TableFieldContent<Item>
-): content is [TableFieldAction<Item>?, TableFieldAction<Item>?] {
-  return (
-    Array.isArray(content) &&
-    content.some(
-      action =>
-        action && "key" in action && "icon" in action && "handleClick" in action
-    )
-  );
-}

package/src/components/Table/TableBody.tsx

@@ -1,57 +0,0 @@
-import classNames from "classnames";
-import React from "react";
-
-import { EmptyListMessage } from "../EmptyListMessage/EmptyListMessage";
-import LoadingIndicator from "../LoadingIndicator/LoadingIndicator";
-
-import { TableFieldConfig } from "./Table.types";
-import { TableBodyRow } from "./TableBodyRow";
-
-export interface TableBody<Item> {
-  items?: Item[];
-  fieldConfigurations: TableFieldConfig<Item>[];
-  emptyItemsText: string;
-  emptyFieldContentText?: string;
-  isLoading: boolean;
-  showEmptyView: boolean;
-  onRowClick?: (item: Item) => void;
-  className?: string;
-}
-
-export function TableBody<Item>(props: TableBody<Item>): JSX.Element {
-  return (
-    <tbody className={props.className}>
-      {!props.isLoading &&
-        props.items?.map(item => (
-          <TableBodyRow
-            className={classNames("border-b last:border-none border-slate-100")}
-            key={JSON.stringify(item)}
-            item={item}
-            fieldConfigurations={props.fieldConfigurations}
-            emptyFieldContentText={props.emptyFieldContentText}
-            onClick={props.onRowClick}
-          />
-        ))}
-
-      {props.isLoading && (
-        <tr>
-          <td colSpan={props.fieldConfigurations.length}>
-            <LoadingIndicator className="py-0 px-3" asModal={false} />
-          </td>
-        </tr>
-      )}
-
-      {props.showEmptyView && (
-        <tr>
-          <td colSpan={props.fieldConfigurations.length}>
-            <EmptyListMessage
-              className="py-6"
-              text={props.emptyItemsText}
-              imageName={"search-not-found"}
-            />
-          </td>
-        </tr>
-      )}
-    </tbody>
-  );
-}

package/src/components/Table/TableBodyRow.tsx

@@ -1,47 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-
-import { TableFieldConfig } from "./Table.types";
-import { TableBodyRowDataCell } from "./TableBodyRowDataCell";
-
-export interface TableBodyRowProps<Item> {
-  item: Item;
-  fieldConfigurations: TableFieldConfig<Item>[];
-  emptyFieldContentText?: string;
-  onClick?: (item: Item) => void;
-  className?: string;
-}
-
-export function TableBodyRow<Item>(
-  props: TableBodyRowProps<Item>
-): JSX.Element {
-  const handleRowClick = (event: React.MouseEvent) => {
-    event.stopPropagation();
-    props.onClick?.(props.item);
-  };
-
-  return (
-    <tr
-      tabIndex={0}
-      className={classNames(
-        "group",
-        {
-          "hover:bg-blue-50 transition-colors ease-in-out duration-300 cursor-pointer focus:outline-primary":
-            props.onClick,
-          "hover:bg-white cursor-default": !props.onClick,
-        },
-        props.className
-      )}
-      onClick={handleRowClick}
-    >
-      {props.fieldConfigurations.map(fieldConfig => (
-        <TableBodyRowDataCell
-          key={fieldConfig.key}
-          item={props.item}
-          fieldConfig={fieldConfig}
-          emptyFieldContentText={props.emptyFieldContentText}
-        />
-      ))}
-    </tr>
-  );
-}

package/src/components/Table/TableBodyRowDataCell.tsx

@@ -1,76 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-
-import Tag from "../Tag/Tag";
-import Text from "../Text/Text";
-import { TertiaryButton } from "../ButtonV2/TertiaryButton";
-
-import { TableFieldConfig } from "./Table.types";
-import { isTableFieldAction, isTableFieldText } from "./Table.utils";
-
-export interface TableBodyRowDataCellProps<Item> {
-  item: Item;
-  fieldConfig: TableFieldConfig<Item>;
-  emptyFieldContentText?: string;
-}
-
-export function TableBodyRowDataCell<Item>(
-  props: TableBodyRowDataCellProps<Item>
-): JSX.Element {
-  const content = props.fieldConfig.content(props.item);
-  const emptyFieldContentText = props.emptyFieldContentText ?? "";
-
-  return (
-    <td
-      className={classNames("px-2 first:pl-6 last:pr-6", {
-        "align-top": !isTableFieldAction(content),
-      })}
-    >
-      {isTableFieldText(content) && (
-        <div className="flex flex-row">
-          {content.tag && (
-            <div className="mt-3 mr-2">
-              <Tag text={content.tag.text} colorTheme={content.tag.color} />
-            </div>
-          )}
-          <Text
-            className={classNames("py-4 text-left leading-5", {
-              "break-all": content.breakAllWord,
-              "break-words": !content.breakAllWord,
-            })}
-            text={content.text === "" ? emptyFieldContentText : content.text}
-            type="base"
-          />
-        </div>
-      )}
-
-      {isTableFieldAction(content) && (
-        <div
-          className={classNames(
-            "flex flex-row justify-end",
-            "transition-opacity ease-in-out duration-300",
-            {
-              "opacity-0": props.fieldConfig.onlyShowContentOnHovering,
-              "group-hover:opacity-100":
-                props.fieldConfig.onlyShowContentOnHovering,
-            }
-          )}
-        >
-          {content.map(
-            action =>
-              action && (
-                <TertiaryButton
-                  className="ml-2 first:ml-0"
-                  key={action.key}
-                  icon={action.icon}
-                  onClick={() => {
-                    action.handleClick(props.item);
-                  }}
-                />
-              )
-          )}
-        </div>
-      )}
-    </td>
-  );
-}

package/src/components/Table/TableFooter.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-
-import { PaginationMenu } from "../PaginationMenu/PaginationMenu";
-import { PaginationMenuProps } from "../PaginationMenu/PaginationMenu.types";
-
-interface TableFooterProps {
-  colSpan: number;
-  paginationMenuProps: PaginationMenuProps;
-}
-
-export const TableFooter = (props: TableFooterProps): JSX.Element => {
-  return (
-    <tfoot>
-      <tr>
-        <td colSpan={props.colSpan}>
-          <PaginationMenu className="p-6" {...props.paginationMenuProps} />
-        </td>
-      </tr>
-    </tfoot>
-  );
-};

package/src/components/Table/TableHeader.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-
-import Text from "../Text/Text";
-
-import { TableFieldConfig } from "./Table.types";
-
-export interface TableHeaderProps<Item> {
-  fieldConfigurations: TableFieldConfig<Item>[];
-  className?: string;
-}
-
-export function TableHeader<Item>(props: TableHeaderProps<Item>): JSX.Element {
-  return (
-    <thead className={props.className}>
-      <tr>
-        {props.fieldConfigurations.map(fieldConfig => (
-          <th className="px-2 first:pl-6 last:pr-6" key={fieldConfig.key}>
-            <Text
-              text={fieldConfig.headerText ?? ""}
-              type="strong"
-              className="py-4 text-left leading-5 truncate uppercase"
-            />
-          </th>
-        ))}
-      </tr>
-    </thead>
-  );
-}

package/src/components/Tag/Tag.tsx

@@ -1,58 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-
-import { Text, TextColor } from "../Text/Text";
-
-import { TagSize } from "./Tag.utils";
-
-export enum TagColorTheme {
-  Red = "red",
-  Amber = "amber",
-  Green = "green",
-  Gray = "gray",
-  Blue = "blue",
-}
-
-export interface TagProps {
-  text: string;
-  colorTheme?: TagColorTheme;
-  size?: TagSize;
-  className?: string;
-}
-
-const Tag = ({
-  text,
-  colorTheme = TagColorTheme.Gray,
-  className,
-  size = TagSize.base,
-}: TagProps): JSX.Element => {
-  const textColor: Record<TagColorTheme, TextColor> = {
-    [TagColorTheme.Red]: "red",
-    [TagColorTheme.Amber]: "amber",
-    [TagColorTheme.Green]: "green",
-    [TagColorTheme.Gray]: "base",
-    // Blue must be 800 here to pass the contrast test
-    [TagColorTheme.Blue]: "blue-800",
-  };
-
-  return (
-    <div
-      className={classNames("py-1 px-2 inline-block rounded-lg", className, {
-        "bg-red-50": colorTheme === TagColorTheme.Red,
-        "bg-orange-50": colorTheme === TagColorTheme.Amber,
-        "bg-green-50": colorTheme === TagColorTheme.Green,
-        "bg-slate-50": colorTheme === TagColorTheme.Gray,
-        "bg-blue-50": colorTheme === TagColorTheme.Blue,
-      })}
-    >
-      <Text
-        className="leading-5"
-        color={textColor[colorTheme]}
-        text={text}
-        type={size === TagSize.small ? "sm" : "base"}
-      />
-    </div>
-  );
-};
-
-export default Tag;

package/src/components/Tag/Tag.utils.ts

@@ -1,4 +0,0 @@
-export enum TagSize {
-  "small" = "small",
-  "base" = "base",
-}

package/src/components/Tag/TagGroup.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-
-import Tag, { TagProps } from "./Tag";
-import { TagSize } from "./Tag.utils";
-
-interface TagGroupProps {
-  tags: TagProps[];
-  tagSize?: TagSize;
-  className?: string;
-}
-
-const TagGroup = ({
-  tags,
-  tagSize = TagSize.base,
-  className,
-}: TagGroupProps): JSX.Element => (
-  <div className={classNames("flex flex-row flex-wrap", className)}>
-    {tags.map(tag => (
-      <Tag
-        size={tagSize}
-        {...tag}
-        className={classNames("mr-2 last:mr-0 mb-2")}
-      />
-    ))}
-  </div>
-);
-
-export default TagGroup;

package/src/components/Text/LegacyText.js

@@ -1,78 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-
-import "./Text.scss";
-
-const TEXT_TYPE_OPTIONS = {
-  DEFAULT: "default",
-  STRONG: "strong",
-  EMPHASIZED: "emphasized",
-  FINEPRINT: "fineprint",
-  SMALL: "small",
-  SMALL_DARK: "small-dark",
-  SMALL_FINEPRINT: "small-fineprint",
-  MICRO: "micro",
-  ERROR: "error",
-};
-
-const TEXT_LEVEL_OPTIONS = {
-  INLINE: "inline",
-  BLOCK: "block",
-};
-
-LegacyText.propTypes = {
-  text: PropTypes.string.isRequired,
-  level: PropTypes.oneOf([TEXT_LEVEL_OPTIONS.INLINE, TEXT_LEVEL_OPTIONS.BLOCK]),
-  type: PropTypes.oneOf([
-    TEXT_TYPE_OPTIONS.DEFAULT,
-    TEXT_TYPE_OPTIONS.STRONG,
-    TEXT_TYPE_OPTIONS.EMPHASIZED,
-    TEXT_TYPE_OPTIONS.FINEPRINT,
-    TEXT_TYPE_OPTIONS.SMALL,
-    TEXT_TYPE_OPTIONS.SMALL_DARK,
-    TEXT_TYPE_OPTIONS.SMALL_FINEPRINT,
-    TEXT_TYPE_OPTIONS.MICRO,
-    TEXT_TYPE_OPTIONS.ERROR,
-  ]),
-  className: PropTypes.string,
-  containsDangerousHtml: PropTypes.bool,
-};
-
-/**
- * @deprecated use TextV2
- */
-function LegacyText({
-  text,
-  type = TEXT_TYPE_OPTIONS.DEFAULT,
-  level = TEXT_LEVEL_OPTIONS.BLOCK,
-  className = "",
-  containsDangerousHtml = false,
-  ...otherProps
-}) {
-  const containerClassName = classNames("cweb-text", className, {
-    "type-default": type === TEXT_TYPE_OPTIONS.DEFAULT,
-    "type-strong": type === TEXT_TYPE_OPTIONS.STRONG,
-    "type-emphasized": type === TEXT_TYPE_OPTIONS.EMPHASIZED,
-    "type-small": type === TEXT_TYPE_OPTIONS.SMALL,
-    "type-fineprint": type === TEXT_TYPE_OPTIONS.FINEPRINT,
-    "type-small-fineprint": type === TEXT_TYPE_OPTIONS.SMALL_FINEPRINT,
-    "level-inline": level === TEXT_LEVEL_OPTIONS.INLINE,
-    "level-block": level === TEXT_LEVEL_OPTIONS.BLOCK,
-    "type-small-dark": type === TEXT_LEVEL_OPTIONS.SMALL_DARK,
-    "type-error": type === TEXT_TYPE_OPTIONS.ERROR,
-    "text-xs": type === TEXT_TYPE_OPTIONS.MICRO,
-  });
-
-  return containsDangerousHtml ? (
-    <p className={containerClassName} dangerouslySetInnerHTML={{ __html: text }} {...otherProps} />
-  ) : (
-    <p className={containerClassName} {...otherProps}>
-      {text}
-    </p>
-  );
-}
-
-export default LegacyText;
-
-export { TEXT_TYPE_OPTIONS, TEXT_LEVEL_OPTIONS };

package/src/components/Text/Text.scss

@@ -1,67 +0,0 @@
-@import "../../styles/colors";
-@import "../../styles/typography";
-
-.cweb-text {
-  $color: $color-body;
-  $color-fineprint: $color-text-lighter;
-  $color-small: $color-text-secondary;
-
-  $font-size: 1rem;
-  $font-size-small: 0.875rem;
-
-  $line-height: 1.31em;
-  $line-height-small: 1.25em;
-
-  @include text($font-size, $line-height, $color);
-
-  &.type-emphasized {
-    font-weight: bold;
-  }
-
-  &.type-error {
-    color: $color-negative-alt-emphasis;
-    font-size: $font-size-small;
-    line-height: $line-height-small;
-  }
-
-  &.type-strong {
-    font-weight: bold;
-    color: $color-text-emphasis;
-  }
-
-  &.type-small-dark {
-    font-size: $font-size-small;
-    line-height: $line-height-small;
-    color: $color-body;
-  }
-
-  &.type-small {
-    font-size: $font-size-small;
-    line-height: $line-height-small;
-    color: $color-small;
-  }
-
-  &.type-small-fineprint {
-    font-size: $font-size-small;
-    line-height: $line-height-small;
-    color: $color-fineprint;
-  }
-
-  &.type-fineprint {
-    color: $color-fineprint;
-  }
-
-  &.level-inline {
-    display: inline;
-  }
-
-  &.level-block {
-    display: block;
-  }
-}
-
-.in-html-link {
-  a:hover {
-    text-decoration: underline;
-  }
-}

package/src/components/Text/Text.tsx

@@ -1,131 +0,0 @@
-import classNames from "classnames";
-import React from "react";
-
-import { RestPropped } from "../../types/general.types";
-
-import "./Text.scss";
-
-export type TextStyle =
-  | "sm"
-  | "sm-strong"
-  | "base"
-  | "strong"
-  | "lg"
-  | "lg-strong"
-  | "xl"
-  | "xl-strong";
-
-//Extend with other colors that we want to enable for text
-export type TextColor =
-  | "base"
-  | "slate-500"
-  | "slate-200"
-  | "white"
-  | "blue-800"
-  | "red"
-  | "green"
-  | "amber";
-
-export type TextHoverColor = "blue-900" | "white";
-
-export interface TextProps extends RestPropped {
-  text: string;
-  type?: TextStyle; //defaults to "base"
-  inline?: boolean; //defaults to false
-  color?: TextColor; //defaults to "base"
-  hoverColor?: TextHoverColor; //defaults to "base"
-  hoverInGroup?: boolean;
-  className?: string;
-  containsDangerousHtml?: boolean; //defaults to false
-  truncate?: boolean; //defaults to false
-  "data-test-id"?: string;
-}
-
-export const Text = (props: TextProps): JSX.Element => {
-  /**
-   * One might argue that we're duplicating strings in this file.
-   * That's how tailwind expects to detect used classes, so please do not make
-   * anything dynamic or try to string concat class names.
-   * https://v1.tailwindcss.com/docs/controlling-file-size
-   */
-
-  const allowedColors: Record<TextColor, string> = {
-    base: "text-slate-700",
-    "slate-500": "text-slate-500",
-    "slate-200": "text-slate-200",
-    red: "text-red-700",
-    green: "text-green-700",
-    amber: "text-yellow-700",
-    white: "text-white",
-    "blue-800": "text-blue-800",
-  };
-
-  const allowedHoverColors: Record<TextHoverColor, string> = {
-    "blue-900": "hover:text-blue-900",
-    white: "hover:text-white",
-  };
-
-  // What is a group hover? https://v1.tailwindcss.com/docs/pseudo-class-variants#group-hover
-  const allowedGroupHoverColors: Record<TextHoverColor, string> = {
-    "blue-900": "group-hover:text-blue-900",
-    white: "group-hover:text-white",
-  };
-
-  const selectedHoverColor =
-    props.hoverColor &&
-    !props.hoverInGroup &&
-    allowedHoverColors[props.hoverColor];
-
-  const selectedGroupHoverColor =
-    props.hoverColor &&
-    props.hoverInGroup &&
-    allowedGroupHoverColors[props.hoverColor];
-
-  const containerProps = {
-    "data-test-id": props["data-test-id"],
-    className: classNames(
-      // apply different style classes
-      // for now we stick with font-size 16px on the body
-      // so I am adjusting our styles accordingly (one step down)
-      {
-        "text-xs font-medium": props.type === "sm",
-        "text-xs font-semibold": props.type === "sm-strong",
-        "text-sm": props.type === "base",
-        "text-sm font-semibold": props.type === "strong",
-        "": props.type === "lg",
-        "font-semibold": props.type === "lg-strong",
-        "text-lg": props.type === "xl",
-        "font-semibold text-lg": props.type === "xl-strong",
-      },
-      {
-        inline: props.inline,
-        // FIXME: this class doesn't do anything without a max-width
-        truncate: props.truncate,
-      },
-      allowedColors[props.color || "base"],
-      selectedHoverColor,
-      selectedGroupHoverColor,
-      {
-        "in-html-link": props.containsDangerousHtml,
-      },
-      //can be used to overwrite other classes like the color
-      props.className
-    ),
-  };
-
-  return props.containsDangerousHtml ? (
-    <p {...containerProps} dangerouslySetInnerHTML={{ __html: props.text }} />
-  ) : (
-    <p {...containerProps}>{props.text}</p>
-  );
-};
-
-export default Text;
-
-Text.defaultProps = {
-  type: "base",
-  inline: false,
-  color: "base",
-  containsDangerousHtml: false,
-  truncate: false,
-};

package/src/components/TextEditor/TextEditor.js

@@ -1,61 +0,0 @@
-import React, { useEffect, useMemo, useRef } from "react";
-import PropTypes from "prop-types";
-import ReactQuill from "react-quill";
-
-import "react-quill/dist/quill.snow.css";
-import "./TextEditor.scss";
-
-export default function TextEditor({ defaultValue, onValueChange, placeholder }) {
-  const formats = ["bold", "italic", "underline", "strike", "list", "bullet", "link"];
-  const toolbarLastGroup = ["link", "video"];
-  const quillRef = useRef();
-
-
-  useEffect(() => {
-    if (quillRef.current) {
-      const quillInstance = quillRef.current;
-      const tooltipSave = quillInstance.editor.theme.tooltip.save;
-
-      quillInstance.editor.theme.tooltip.save = function () {
-        // overwrite save link functionality
-        let url = this.textbox.value;
-
-        if (url.indexOf("http") === -1 || url.indexOf("https") === -1) {
-          url = `https://${url}`;
-          this.textbox.value = url;
-        }
-        tooltipSave.call(this);
-      };
-    }
-  }, []);
-
-  const modules = useMemo(() => {
-    return {
-      toolbar: {
-        container: [
-          ["bold", "italic", "underline", "strike"],
-          [{ list: "ordered" }, { list: "bullet" }],
-          toolbarLastGroup,
-        ],
-      },
-    };
-  }, []);
-
-  return (
-    <ReactQuill
-      ref={quillRef}
-      theme="snow"
-      modules={modules}
-      placeholder={placeholder}
-      formats={formats}
-      value={defaultValue}
-      onChange={onValueChange}
-    />
-  );
-}
-
-TextEditor.propTypes = {
-  defaultValue: PropTypes.string,
-  placeholder: PropTypes.string,
-  onValueChange: PropTypes.func.isRequired,
-};