@luscii-healthtech/web-ui 2.9.0 → 2.10.2

package/src/components/Section/SectionItemWithContent.tsx

@@ -1,30 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-
-import Text from "../Text/Text";
-
-import SectionItem, { SectionItemProps } from "./SectionItem";
-
-interface SectionItemWithContentProps extends Omit<SectionItemProps, "children"> {
-  text: string;
-  icon?: string;
-  iconClass?: string;
-}
-
-function SectionItemWithContent(
-  props: SectionItemWithContentProps
-): JSX.Element {
-  const { text, icon, className, iconClass, onClick, ...rest } = props;
-
-  const mergedClasses = classNames("cweb-section-text-item", className);
-  const iconClasses = classNames("w-6 h-6 mr-4", iconClass);
-
-  return (
-    <SectionItem className={mergedClasses} onClick={onClick} {...rest}>
-      {icon && <img className={iconClasses} src={icon} alt="" />}
-      <Text text={text} />
-    </SectionItem>
-  );
-}
-
-export default SectionItemWithContent;

package/src/components/Select/LegacySelect.js

@@ -1,114 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import PropTypes from "prop-types";
-import { components } from "react-select";
-import classNames from "classnames";
-
-import { findValue } from "./select.utils";
-import Select from "./Select";
-
-LegacySelect.propTypes = {
-  className: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  name: PropTypes.string.isRequired,
-  placeholder: PropTypes.string,
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-      text: PropTypes.string.isRequired,
-      disabled: PropTypes.bool,
-    })
-  ).isRequired,
-  onChange: PropTypes.func.isRequired,
-};
-
-/**
- * For legacy purposes this functional component behaves a certain manner that is expected by Forms that still use it.
- * @deprecated use Select instead
- */
-function LegacySelect({
-  className,
-  value,
-  name,
-  placeholder = "Placeholder text",
-  options,
-  onChange,
-  isDisabled = false,
-  isSearchable = false,
-  ...otherProps
-}) {
-  const transformedOptions = useMemo(() => options.map((option) => ({ label: option.text, ...option })), [options]);
-  const selectRef = useRef(null);
-
-  const [innerValue, setInnerValue] = useState(findValue(value, transformedOptions));
-
-  useEffect(() => {
-    if (value !== innerValue?.value) {
-      // there is a change triggered from the parents
-      setInnerValue(findValue(value, transformedOptions));
-    }
-  }, [value, transformedOptions]);
-
-  // Why: https://github.com/JedWatson/react-select/issues/3149
-  const getDataAttributes = () => {
-    const dataProps = {};
-
-    for (const prop in otherProps) {
-      if (prop.includes("data-")) {
-        dataProps[prop] = otherProps[prop];
-      }
-    }
-
-    return dataProps;
-  };
-
-  const CustomContainer = (commonProps) => (
-    <components.SelectContainer
-      {...commonProps}
-      innerProps={Object.assign({}, commonProps.innerProps, {
-        ...getDataAttributes(),
-      })}
-    />
-  );
-
-  const handleChange = useCallback(
-    (changedValue) => {
-      setInnerValue(changedValue);
-      const { value: extractedValue, ...rest } = changedValue;
-      // all components in the app expect this select to behave as
-      // a html select so we need to pass a lookalike object in the callback
-      onChange &&
-        onChange({
-          // making sure no legacy implementation breaks
-          preventDefault: () => undefined,
-          target: { name, value: extractedValue, ...rest },
-          currentTarget: { name, value: extractedValue, ...rest },
-        });
-
-      selectRef.current?.blur();
-    },
-    [setInnerValue, onChange]
-  );
-
-  const containerClassName = classNames("cweb-select h-11", className);
-
-  // We can easily transform it here, because all forms expect this to be a normal html select.
-
-  return (
-    <Select
-      {...otherProps}
-      ref={selectRef}
-      className={containerClassName}
-      name={name}
-      isDisabled={isDisabled}
-      value={innerValue}
-      onChange={handleChange}
-      placeholder={placeholder}
-      options={transformedOptions}
-      isOptionDisabled={(option) => option.disabled}
-      components={{ SelectContainer: CustomContainer }}
-      isSearchable={isSearchable}
-    />
-  );
-}
-
-export default LegacySelect;

package/src/components/Select/Select.scss

@@ -1,29 +0,0 @@
-.customized-select {
-  // postcss-url cannot make sense of the inline styles in emotion, so we need to
-  // extract the background customization to a css file
-  [class*="IndicatorsContainer"] {
-    background: url(../../assets/chevron-double.svg) no-repeat center;
-    opacity: 0.5;
-    transition: opacity 0.3s ease-in-out;
-    // hiding the default indicator
-    svg {
-      display: none;
-    }
-
-    margin-right: 0.75rem;
-  }
-
-  [class*="MenuList"] {
-    [class*="option"]::after {
-      position: absolute;
-      content: "";
-      background: url(../../assets/check-icon-primary.svg) no-repeat center;
-      // This needs to match the proportional
-      // padding in this element.
-      // 0.75rem -> 12px
-      right: 12px;
-      height: 1rem;
-      width: 1rem;
-    }
-  }
-}

package/src/components/Select/Select.tsx

@@ -1,151 +0,0 @@
-import type { Props, StylesConfig, GroupBase } from "react-select";
-import ReactSelect, { mergeStyles, SelectInstance } from "react-select";
-import React, { Ref } from "react";
-import classNames from "classnames";
-import Select from "react-select/base";
-
-/**
- * Exceptional case for this file:
- * We use postcss-url to inline and base64 our image assets.
- * But the library can only see as far as css files.
- * When javascript gets in the way (react-select uses a package called `emotion` for styles), postcss-url cannot
- * bundle the svg assets used here, and we end up with some broken style.
- */
-import "./Select.scss";
-
-function generateCustomStyles<
-  Option,
-  IsMulti extends boolean,
-  Group extends GroupBase<Option>
->(hasError: boolean, isIE11: boolean): StylesConfig<Option, IsMulti, Group> {
-  return {
-    option: (baseStyles, state) => {
-      return {
-        ...baseStyles,
-        fontWeight: state.isSelected ? "bold" : "normal",
-        fontSize: "14px",
-        backgroundColor: "none",
-        color: "inherit",
-        position: "relative",
-        padding: "0.75rem",
-        opacity: state.isDisabled ? "0.5" : 1,
-        transition: "background-color 0.3s ease-in-out",
-        "&:hover": {
-          // tailwind blue-50
-          backgroundColor: state.isSelected ? "transparent" : "#F2FAFD",
-        },
-        // The static styles of this pseudo-element is in ./Select.scss
-        "&:after": {
-          visibility: state.isSelected ? "visible" : "hidden",
-        },
-        pointerEvents: state.isDisabled ? "none" : "auto",
-      };
-    },
-    container: (baseStyles) => {
-      return { ...baseStyles, flexGrow: isIE11 ? 0.5 : "initial" };
-    },
-    control: (baseStyles, state) => {
-      const defaultBorderColor = state.isFocused ? "#045baa" : "#D1D5DB";
-      const validatedBorderColor = hasError ? "#c53030" : defaultBorderColor;
-
-      const defaultOutline = hasError
-        ? "rgba(255, 98, 102, 0.3)"
-        : "rgba(0, 159, 227, 0.3)";
-      const validatedOutline = `4px solid ${
-        state.isFocused ? defaultOutline : "transparent"
-      }`;
-
-      return {
-        ...baseStyles,
-        fontSize: "14px",
-        transition: "border 0.3s ease-in-out",
-        height: isIE11 ? "50px" : "2.75rem",
-
-        // primary outline
-        outline: validatedOutline,
-
-        borderColor: validatedBorderColor,
-        borderWidth: "1px !important",
-        borderStyle: "solid",
-        borderRadius: "4px",
-
-        boxShadow: "0px 1px 2px rgba(0, 0, 0, 0.05)",
-
-        "&:hover": {
-          borderColor: "#9CA3AF",
-          // selector for the chevron
-          '> [class*="IndicatorsContainer"]': {
-            opacity: 1,
-          },
-        },
-      };
-    },
-    // The placeholder has the following css prop: grid-area: 1/1/2/3;
-    // And grid-area doesn't work on IE11, so we need to style it slightly different.
-    placeholder: (baseStyles) => ({
-      ...baseStyles,
-      fontWeight: 100,
-      color: "#6B7280",
-      paddingTop: isIE11 ? "1.2rem" : undefined,
-    }),
-    singleValue: (baseStyles) => {
-      return {
-        ...baseStyles,
-        paddingTop: isIE11 ? "1.2rem" : undefined,
-        fontSize: "14px",
-      };
-    },
-    indicatorSeparator: () => ({
-      display: "none",
-    }),
-    // The indicatorContainer styles is added via the `Select.scss` file.
-    menu: (baseStyles) => ({
-      ...baseStyles,
-      zIndex: 20,
-    }),
-  };
-}
-
-type CustomSelect = <
-  Option,
-  IsMulti extends boolean,
-  Group extends GroupBase<Option>
->(
-  props: Props<Option, IsMulti, Group>,
-  ref: React.RefAttributes<SelectInstance<Option, IsMulti, Group>>
-) => React.ReactElement;
-
-/**
- * @deprecated: use SelectV2 instead
- */
-const CustomSelect = React.forwardRef(
-  <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
-    props: Props<Option, IsMulti, Group>,
-    ref: Ref<Select<Option, IsMulti, Group>>
-  ) => {
-    const { className, styles } = props;
-
-    const hasError = className?.includes("has-error") || false;
-    const isIE11 =
-      "MSInputMethodContext" in window && "documentMode" in document;
-    const customStyles = generateCustomStyles<Option, IsMulti, Group>(
-      hasError,
-      isIE11
-    );
-    const mergedStyles = mergeStyles<Option, IsMulti, Group>(
-      customStyles,
-      styles
-    );
-
-    return (
-      <ReactSelect<Option, IsMulti, Group>
-        {...props}
-        ref={ref}
-        className={classNames("customized-select", className)}
-        styles={mergedStyles}
-      />
-    );
-  }
-) as CustomSelect;
-
-export default CustomSelect;

package/src/components/Select/SelectV2.tsx

@@ -1,171 +0,0 @@
-import type {
-  MultiValue,
-  OptionsOrGroups,
-  Props,
-  StylesConfig,
-  GroupBase, Options,
-} from "react-select";
-import ReactSelect, { mergeStyles } from "react-select";
-import React from "react";
-import classNames from "classnames";
-
-
-
-/**
- * Exceptional case for this file:
- * We use postcss-url to inline and base64 our image assets.
- * But the library can only see as far as css files.
- * When javascript gets in the way (react-select uses a package called `emotion` for styles), postcss-url cannot
- * bundle the svg assets used here, and we end up with some broken style.
- */
-import "./Select.scss";
-
-function generateCustomStyles<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
-  hasError: boolean,
-  isIE11: boolean,
-  ): StylesConfig<Option, IsMulti, Group> {
-  return {
-    option: (baseStyles, state) => {
-      return {
-        ...baseStyles,
-        fontWeight: state.isSelected ? "bold" : "normal",
-        fontSize: "14px",
-        backgroundColor: "none",
-        color: "inherit",
-        position: "relative",
-        padding: "0.75rem",
-        opacity: state.isDisabled ? "0.5" : 1,
-        "&:after": {
-          visibility: state.isSelected ? "visible" : "hidden",
-        },
-        transition: "background-color 0.3s ease-in-out",
-        "&:hover": {
-          // tailwind blue-50
-          backgroundColor: state.isSelected ? "transparent" : "#F2FAFD",
-        },
-        pointerEvents: state.isDisabled ? "none" : "auto",
-      };
-    },
-    container: (baseStyles) => {
-      return { ...baseStyles, flexGrow: isIE11 ? 0.5 : "initial" };
-    },
-    control: (baseStyles, state) => {
-      const defaultBorderColor = state.isFocused ? "#045baa" : "#D1D5DB";
-      const validatedBorderColor = hasError ? "#c53030" : defaultBorderColor;
-
-      const defaultOutline = hasError ? "rgba(255, 98, 102, 0.3)" : "rgba(0, 159, 227, 0.3)";
-      const validatedOutline = `4px solid ${state.isFocused ? defaultOutline : "transparent"}`;
-
-      return {
-        ...baseStyles,
-        fontSize: "14px",
-        transition: "border 0.3s ease-in-out",
-        height: isIE11 ? "50px" : "2.75rem",
-
-        // primary outline
-        outline: validatedOutline,
-
-        borderColor: validatedBorderColor,
-        borderWidth: "1px !important",
-        borderStyle: "solid",
-        borderRadius: "4px",
-
-        boxShadow: "0px 1px 2px rgba(0, 0, 0, 0.05)",
-
-        "&:hover": {
-          borderColor: "#9CA3AF",
-          // selector for the chevron
-          "> [class*=\"IndicatorsContainer\"]": {
-            opacity: 1,
-          },
-        },
-      };
-    },
-    // The placeholder has the following css prop: grid-area: 1/1/2/3;
-    // And grid-area doesn't work on IE11, so we need to style it slightly different.
-    placeholder: (baseStyles) => ({
-      ...baseStyles,
-      fontWeight: 100,
-      color: "#6B7280",
-      paddingTop: isIE11 ? "1.2rem" : undefined,
-    }),
-    singleValue: (baseStyles) => {
-      return {
-        ...baseStyles,
-        paddingTop: isIE11 ? "1.2rem" : undefined,
-        fontSize: "14px",
-      };
-    },
-    indicatorSeparator: () => ({
-      display: "none",
-    }),
-    menu: (baseStyles) => ({
-      ...baseStyles,
-      zIndex: 20,
-    }),
-  };
-}
-
-// All the options require a value to work in the wrapper
-interface OptionMinimal {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  value: any;
-  label?: string;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export interface SelectProps<Option extends OptionMinimal = OptionMinimal, IsMulti extends boolean = any, Group extends GroupBase<Option> = GroupBase<Option>> extends Props<Option, IsMulti, Group> {
-  isError?: boolean;
-}
-
-/**
- * A wrapper around react-select to style it according to our design specification.
- *
- * In addition, the value is taken out of the option, instead of returning the complete option.
- *
- * Care when using grouped options: the value of the options overspanning all groups need to be unique!
- * For instance, if you have an option with value "chocolate" in both the groups "flavor" and "dip", then you get unforeseen errors.
- * This is a problem within react-select itself, not our wrapper.
- *
- * Care when using defaultValue: this still requires the complete Option (instead of the value of the Option).
- * So far there wasn't a use-case for this.
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const Select = React.forwardRef(<Option extends OptionMinimal, IsMulti extends boolean, Group extends GroupBase<Option>>(
-    { isError = false, styles, options, onChange, value, isMulti, className, ...otherProps }: SelectProps<Option, IsMulti, Group>,
-    innerRef,
-  ) => {
-    const isIE11 = "MSInputMethodContext" in window && "documentMode" in document;
-    const customStyles = generateCustomStyles<Option, IsMulti, Group>(isError, isIE11);
-  const mergedStyles = mergeStyles<Option, IsMulti, Group>(customStyles, styles);
-
-    // the options can be either a list of options or a grouped list of options
-    // this is a typechecker to verify it is the case.
-    const isOptionsGrouped = !options ? false : (options as OptionsOrGroups<Option, Group>)
-      .reduce((acc, o) => acc || ("options" in o && !("values" in o)), false);
-    // we subsequently flatmap to ensure it's always a list of options
-    const flatmappedOptions = !options ? [] : isOptionsGrouped
-      ? (options as Group[]).flatMap((g) => g.options)
-      : options as Options<Option>;
-
-    // based on: https://stackoverflow.com/a/70022957
-    const onChangeWrapped = !onChange ? undefined : isMulti
-      ? (val, a) => onChange(val.map((v) => v.value), a)
-      : (val, a) => onChange(val?.value, a);
-    // TODO: how can we report the error if a value was given that is not within the options?
-    const valueWrapped = (!value || !options) ? value : isMulti
-      ? flatmappedOptions.filter((o) => (value as MultiValue<Option>).includes(o.value))
-      : flatmappedOptions.find((o) => o.value === value);
-
-    return <ReactSelect
-      {...otherProps}
-      ref={innerRef}
-      styles={mergedStyles}
-      options={options}
-      onChange={onChangeWrapped}
-      value={valueWrapped}
-      isMulti={isMulti}
-      className={classNames("customized-select", className)}
-    />;
-  },
-);

package/src/components/Select/options.transformer.ts

@@ -1,36 +0,0 @@
-interface DropdownItem {
-  id: string;
-  text: string;
-  key: string;
-  type: string;
-}
-
-interface DropdownGroupedItem {
-  groupKey: string;
-  title: string;
-  subItems: DropdownItem[];
-}
-
-export const transformSubitemToSelectOption = (subItem: DropdownItem): Record<string, unknown> => {
-  return { ...subItem, label: subItem.text, value: subItem.id };
-};
-
-export const transformToSelectOptions = (
-  items: Array<DropdownGroupedItem | DropdownItem>
-): Array<Record<string, unknown>> => {
-  const groupedItems = items
-    .filter((option): option is DropdownGroupedItem => "groupKey" in option)
-    .map((option) => ({
-      label: option.title,
-      options: option.subItems.map(transformSubitemToSelectOption),
-    }));
-
-  const singleItems = items
-    .filter((option): option is DropdownItem => !("groupKey" in option))
-    .map((option) => ({
-      value: option.id,
-      label: option.text,
-    }));
-
-  return [...singleItems, ...groupedItems];
-};

package/src/components/Select/select.utils.spec.ts

@@ -1,63 +0,0 @@
-import { findValue } from "./select.utils";
-
-describe("findValue", () => {
-  const options: Record<string, string | number>[] = [
-    {
-      label: "Nausea - 018678f2-f5ab-401d-957e-b94db30347f3",
-      text: "Nausea - 018678f2-f5ab-401d-957e-b94db30347f3",
-      value: '{"type":"instrument","uuid":"018678f2-f5ab-401d-957e-b94db30347f3"}',
-    },
-    {
-      label: "Pain - 34c30d2e-7e1e-4c13-b066-ebf4897debbf",
-      text: "Pain - 34c30d2e-7e1e-4c13-b066-ebf4897debbf",
-      value: '{"type":"instrument","uuid":"34c30d2e-7e1e-4c13-b066-ebf4897debbf"}',
-    },
-    {
-      label: "Temperature - 38c85570-cc6e-41d8-aeb1-a84a11de6158",
-      text: "Temperature - 38c85570-cc6e-41d8-aeb1-a84a11de6158",
-      value: '{"type":"instrument","uuid":"38c85570-cc6e-41d8-aeb1-a84a11de6158"}',
-    },
-    {
-      label: "Body Temperature - f712cc98-fb78-4f3d-b6b5-eb74cb95cb3e",
-      text: "Body Temperature - f712cc98-fb78-4f3d-b6b5-eb74cb95cb3e",
-      value: '{"type":"instrument","uuid":"f712cc98-fb78-4f3d-b6b5-eb74cb95cb3e"}',
-    },
-  ];
-
-  it("can find a filled value", () => {
-    const expected = options[0];
-
-    expect(findValue('{"type":"instrument","uuid":"018678f2-f5ab-401d-957e-b94db30347f3"}', options)).toBe(expected);
-  });
-
-  it("if no value passed, it returns null", () => {
-    expect(findValue(null, options)).toEqual(null);
-    expect(findValue(undefined, options)).toEqual(null);
-  });
-
-  it("if value passed is empty but options have an empty value, it finds it", () => {
-    const optionsWithEmpty = [...options];
-    optionsWithEmpty.unshift({
-      label: "-- None --",
-      text: "-- None --",
-      value: "",
-    });
-
-    const expected = optionsWithEmpty[0];
-
-    expect(findValue("", optionsWithEmpty)).toEqual(expected);
-  });
-
-  it("if value passed is zero but options have a zero, it finds it", () => {
-    const optionsWithZero = [...options];
-    optionsWithZero.unshift({
-      label: "-- None --",
-      text: "-- None --",
-      value: 0,
-    });
-
-    const expected = optionsWithZero[0];
-
-    expect(findValue(0, optionsWithZero)).toEqual(expected);
-  });
-});

package/src/components/Select/select.utils.ts

@@ -1,45 +0,0 @@
-/**
- * This is specifically because of the workflow form, that uses a stringified object as a value.
- * @param valueParam The alleged object value
- * @returns true if value is indeed an object
- */
-const isValueObject = (valueParam: string | number) => {
-  if (typeof valueParam === "number") {
-    return false;
-  }
-
-  try {
-    const allegedObject = JSON.parse(valueParam);
-    return Object.keys(allegedObject).length > 0;
-  } catch {
-    // if the parsing breaks, it is probably not an object
-    return false;
-  }
-};
-
-/**
- * react-select needs an exact match of the object we are using in the options in order to know what has been set
- * that's why we have to filter it
- * @param {*} value - The value we need to set in the selector
- * @returns the object having the passed value
- */
-export const findValue = (value: any, options: any[]): any => {
-  // There are values that can be found with "" or 0, and they
-  // don't need to be evaluated as false in the check below
-  if (value === null || value === undefined) {
-    return null;
-  }
-
-  let foundValue = null;
-
-  if (isValueObject(value)) {
-    foundValue = options.find((option) => JSON.stringify(option.value) === JSON.stringify(value));
-    return foundValue;
-  }
-
-  foundValue = options.find((option: any) => {
-    return option.value?.toString() === value?.toString();
-  });
-
-  return foundValue;
-};