@luscii-healthtech/web-ui 0.1.0

package/src/components/Section/Section.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import classNames from "classnames";
+
+import { ButtonProps } from "../Button/Button.types";
+import Button from "../Button/Button";
+import { Title } from "../Title/Title";
+import { LoadingIndicator, LoadingIndicatorProps } from "../LoadingIndicator/LoadingIndicator";
+import { RestPropped } from "../../types/general.types";
+
+import "./Section.scss";
+
+export interface SectionProps<TitleType, FooterType> extends RestPropped {
+  title?: string | TitleType;
+  buttons?: ButtonProps[];
+  footer?: FooterType;
+  className?: string;
+  isLoading?: boolean;
+  loadingIndicatorProps?: LoadingIndicatorProps;
+}
+
+export function Section<TitleType = unknown, FooterType = unknown>({
+  title,
+  buttons,
+  footer,
+  children,
+  className,
+  isLoading = false,
+  loadingIndicatorProps,
+  ...restProps
+}: React.PropsWithChildren<SectionProps<TitleType, FooterType>>): JSX.Element {
+  return (
+    <div
+      {...restProps}
+      className={classNames(
+        "cweb-section",
+        "flex justify-start flex-col items-start",
+        "rounded-lg",
+        "mx-0 my-4",
+        "bg-white",
+        "w-full",
+        className
+      )}
+    >
+      {(title || buttons) && (
+        <div className="cweb-section-header" data-test-id="section-header">
+          {title && (
+            <div className="flex flex-row items-center">
+              {typeof title === "string" ? <Title text={title} className="mr-3 cweb-section-title" type="sm" /> : title}
+              {isLoading && <LoadingIndicator asSpinner={true} {...loadingIndicatorProps} />}
+            </div>
+          )}
+          <div className={classNames("cweb-section-header-buttons-container", "flex flex-row space-x-3")}>
+            {buttons &&
+              buttons.length > 0 &&
+              buttons.map((button) => <Button {...button} key={button.key || button.id || button.text} />)}
+          </div>
+        </div>
+      )}
+
+      <div className="cweb-section-content w-full">{!isLoading && children}</div>
+
+      {footer && <div className="cweb-section-footer">{footer}</div>}
+    </div>
+  );
+}
+
+export default Section;

package/src/components/Select/LegacySelect.js

@@ -0,0 +1,114 @@
+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.examples.md

@@ -0,0 +1,161 @@
+```js
+class SelectExample extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: null,
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(event) {
+    this.setState({
+      value: event.target.value,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Select
+          value={this.state.value}
+          name="value"
+          options={[
+            {
+              value: "option1",
+              text: "Option1",
+            },
+            {
+              value: "option2",
+              text: "Option2",
+            },
+            {
+              value: "option3",
+              text: "Option3",
+            },
+          ]}
+          onChange={this.handleChange}
+        />
+      </div>
+    );
+  }
+}
+<SelectExample />;
+```
+
+```js
+class SelectExampleWithPlaceholder extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: null,
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(event) {
+    this.setState({
+      value: event.target.value,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Select
+          value={this.state.value}
+          name="value"
+          placeholder="Please select an option"
+          options={[
+            {
+              value: "option1",
+              text: "Option1",
+            },
+            {
+              value: "option2",
+              text: "Option2",
+            },
+            {
+              value: "option3",
+              text: "Option3",
+            },
+          ]}
+          onChange={this.handleChange}
+        />
+      </div>
+    );
+  }
+}
+<SelectExampleWithPlaceholder />;
+```
+
+```js
+const inForm = require("../HOCs/form/helpers/inForm").default;
+const SelectInForm = inForm(Select);
+
+class SelectExampleInForm extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: null,
+      error: null,
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleError = this.handleError.bind(this);
+  }
+
+  handleChange(event) {
+    this.setState({
+      value: event.target.value,
+    });
+  }
+
+  handleError() {
+    this.setState((prevState) => {
+      return {
+        error: prevState.error ? null : "This field is required",
+      };
+    });
+  }
+
+  render() {
+    return (
+      <div className="styleguide-in-form styleguide-component-block">
+        <Title type="tagline" text={"Example Select use in Form"} />
+
+        <SelectInForm
+          label="Field Label"
+          error={this.state.error}
+          value={this.state.value}
+          name="value"
+          placeholder="Please select an option"
+          options={[
+            {
+              value: "option1",
+              text: "Option1",
+            },
+            {
+              value: "option2",
+              text: "Option2",
+            },
+            {
+              value: "option3",
+              text: "Option3",
+            },
+          ]}
+          onChange={this.handleChange}
+        />
+
+        <Button text="Toggle ErrorWrapper" className="styleguide-margin-top-10" onClick={this.handleError} />
+      </div>
+    );
+  }
+}
+<SelectExampleInForm />;
+```

package/src/components/Select/Select.tsx

@@ -0,0 +1,136 @@
+import type { Props, StylesConfig, GroupBase } from "react-select";
+import ReactSelect, { mergeStyles, SelectInstance } from "react-select";
+import React from "react";
+
+import checkmark from "../../assets/check-icon-primary.svg";
+import doubleChevron from "../../assets/chevron-double.svg";
+
+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": {
+          position: "absolute",
+          content: '""',
+          background: `url(${checkmark}) no-repeat center`,
+          // This needs to match the proportional
+          // padding in this element.
+          // 0.75rem -> 12px
+          right: 12,
+          height: "1rem",
+          width: "1rem",
+          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",
+    }),
+
+    indicatorsContainer: (baseStyles) => ({
+      ...baseStyles,
+      opacity: 0.5,
+      transition: "opacity 0.3s ease-in-out",
+      background: `url(${doubleChevron}) no-repeat center`,
+      // hiding the default indicator
+      svg: {
+        display: "none",
+      },
+      marginRight: "0.75rem",
+    }),
+    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;
+
+const CustomSelect = React.forwardRef(
+  <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
+    props: Props<Option, IsMulti, Group>,
+    ref: any
+  ) => {
+    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} styles={mergedStyles} />;
+  }
+) as CustomSelect;
+
+export default CustomSelect;

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

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

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

@@ -0,0 +1,45 @@
+/**
+ * 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;
+};