@luscii-healthtech/web-ui 2.0.0 → 2.3.0

package/src/components/Input/Input.tsx

@@ -1,24 +1,15 @@
-import React, {
-  HTMLInputTypeAttribute,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import React, { useEffect, useState } from "react";
 import classNames from "classnames";
 
 import { CrossIcon } from "../Icons/CrossIcon";
+import { AllowedTextInputTypes } from "../Form/form.types";
 import { IconProps } from "../Icons/types/IconProps.type";
 
 import "./Input.css";
 
-type AllowedInputTypes = Extract<
-  HTMLInputTypeAttribute,
-  "email" | "number" | "password" | "text"
->;
-
 // FIXME: something in the tsdx.js build doesn't allow me to use `Uppercase<AllowedInputTypes>`
 // Don't know why yet but it can be fixed later.
-export const INPUT_TYPES: Record<string, AllowedInputTypes> = {
+export const INPUT_TYPES: Record<string, AllowedTextInputTypes> = {
   EMAIL: "email",
   NUMBER: "number",
   PASSWORD: "password",
@@ -29,7 +20,10 @@ export const INPUT_TYPES: Record<string, AllowedInputTypes> = {
  * It's very complicated to tap into the onChange events of inputs,
  * so I omit the type it requires and add a easier one to deal with.
  */
-type CustomHTMLInputProps = Omit<React.HTMLProps<HTMLInputElement>, "onChange">;
+type CustomHTMLInputProps = Omit<
+  React.HTMLProps<HTMLInputElement>,
+  "onChange"
+> & { isError?: boolean };
 
 type FakeEventTarget = {
   target: {
@@ -43,174 +37,175 @@ type FakeEventTarget = {
 };
 
 export interface InputProps extends CustomHTMLInputProps {
-  type?: AllowedInputTypes;
+  type?: AllowedTextInputTypes;
   clearable?: boolean;
   isDisabled?: boolean;
   withPrefix?: string;
   withSuffix?: string;
   icon?: React.VoidFunctionComponent<IconProps>;
   onChange?: (event: FakeEventTarget) => void;
-  // FIXME: this is used in the SearchAndFilterBar in Vitals, but we can use forwardRef instead
-  // and lose this function later.
-  setRef?: (refTarget: HTMLInputElement) => void;
 }
 
-const Input: React.VoidFunctionComponent<InputProps> = ({
-  withSuffix = "",
-  withPrefix = "",
-  className,
-  clearable = false,
-  type = "text",
-  isDisabled = false,
-  icon,
-  setRef,
-  name,
-  value,
-  onChange,
-  ...otherProps
-}) => {
-  const hasNoExtraContent = withPrefix === "" && withSuffix === "";
-  const [innerValue, setInnerValue] = useState(value);
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  useEffect(() => {
-    setInnerValue(value);
-  }, [value]);
-
-  const clearField = () => {
-    setInnerValue("");
-
-    // This allows backwards compatibility with our usages of the input
-    onChange?.({
-      target: {
-        name: name || "",
-        value: "",
-      },
-      currentTarget: {
-        name: name || "",
-        value: "",
-      },
-    });
-  };
-
-  const handleChangeEvent = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setInnerValue(event.currentTarget.value);
-
-    // This allows backwards compatibility with our usages of the input
-    onChange?.({
-      target: {
-        name: name || "",
-        value: event.currentTarget.value,
-      },
-      currentTarget: {
-        name: name || "",
-        value: event.currentTarget.value,
-      },
-    });
-  };
-
-  const isClearIconVisible = clearable && value;
-
-  return (
-    <div
-      data-test-id="input-component-container"
-      className="relative inline-block"
-    >
-      <div className="flex flex-row">
-        <span
-          className={classNames(
-            "h-11",
-            {
-              hidden: hasNoExtraContent,
-              "order-1": withPrefix !== "",
-              "order-2": withSuffix !== "",
-              "rounded-l border-l": withPrefix !== "",
-              "rounded-r border-r": withSuffix !== "",
-            },
-            "border-t border-b border-solid border-input-border",
-            "flex flex-col items-center p-3",
-            "text-sm",
-            "text-slate-500",
-            "bg-main-background"
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      withSuffix = "",
+      withPrefix = "",
+      className,
+      clearable = false,
+      type = "text",
+      isDisabled = false,
+      icon,
+      name,
+      value = "",
+      onChange,
+      isError,
+      ...otherProps
+    },
+    ref
+  ) => {
+    const hasNoExtraContent = withPrefix === "" && withSuffix === "";
+    const [innerValue, setInnerValue] = useState(value);
+
+    useEffect(() => {
+      setInnerValue(value);
+    }, [value]);
+
+    const clearField = () => {
+      setInnerValue("");
+
+      // This allows backwards compatibility with our usages of the input
+      onChange?.({
+        target: {
+          name: name || "",
+          value: "",
+        },
+        currentTarget: {
+          name: name || "",
+          value: "",
+        },
+      });
+    };
+
+    const handleChangeEvent = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setInnerValue(event.currentTarget.value);
+
+      // This allows backwards compatibility with our usages of the input
+      onChange?.({
+        target: {
+          name: name || "",
+          value: event.currentTarget.value,
+        },
+        currentTarget: {
+          name: name || "",
+          value: event.currentTarget.value,
+        },
+      });
+    };
+
+    const isClearIconVisible = clearable && value;
+
+    return (
+      <div
+        data-test-id="input-component-container"
+        className="relative inline-block"
+      >
+        <div className="flex flex-row">
+          <span
+            className={classNames(
+              "h-11 border-t border-b border-solid border-input-border",
+              {
+                hidden: hasNoExtraContent,
+                "order-1": withPrefix !== "",
+                "order-2": withSuffix !== "",
+                "rounded-l border-l": withPrefix !== "",
+                "rounded-r border-r": withSuffix !== "",
+              },
+
+              "flex flex-col items-center p-3",
+              "text-sm",
+              "text-slate-500",
+              "bg-main-background"
+            )}
+          >
+            {withSuffix || withPrefix}
+          </span>
+          {icon && (
+            <div
+              className="absolute top-1/2 left-4"
+              style={{
+                transform: "translateY(-50%)",
+              }}
+            >
+              {React.createElement(icon, {
+                className: "w-6 h-6 text-slate-300 ",
+              })}
+            </div>
           )}
-        >
-          {withSuffix || withPrefix}
-        </span>
-        {icon && (
+          <input
+            {...otherProps}
+            data-test-id="input-component"
+            name={name}
+            value={innerValue}
+            onChange={handleChangeEvent}
+            ref={ref}
+            size={otherProps.maxLength}
+            type={type}
+            disabled={isDisabled}
+            className={classNames(
+              "input",
+              "block",
+              { "pl-12": icon, "pr-11": clearable },
+              {
+                "text-slate-400 bg-slate-50": isDisabled,
+                "text-slate-700": !isDisabled,
+                "border-input-border": !isDisabled && !isError,
+                "hover:border-input-border-dark": !isDisabled,
+                "border-red-700": isError,
+                "focus:outline-negative": isError,
+                "focus:border-blue-800": !isError,
+                "focus:outline-primary": !isError,
+                "bg-white": !isDisabled,
+              },
+              "h-11",
+              "p-2",
+              "border",
+              "text-sm",
+              "placeholder-slate-500",
+              "border-solid",
+
+              "transition-colors",
+              "duration-300",
+              {
+                "z-10": withSuffix !== "" || withPrefix !== "", // to make sure the outline is displayed completely
+                rounded: hasNoExtraContent,
+                "rounded-l": withSuffix !== "",
+                "rounded-r": withPrefix !== "",
+                "order-2": withPrefix !== "",
+                "order-1": withSuffix !== "",
+              },
+              "shadow-default",
+              className
+            )}
+          />
           <div
-            className="absolute top-1/2 left-4"
+            className="absolute right-0 top-1/2"
             style={{
               transform: "translateY(-50%)",
             }}
           >
-            {React.createElement(icon, {
-              className: "w-6 h-6 text-slate-300 ",
-            })}
+            <CrossIcon
+              className={classNames(
+                "w-6 h-6 mr-3 cursor-pointer text-slate-300",
+                { block: isClearIconVisible, hidden: !isClearIconVisible }
+              )}
+              onClick={clearField}
+            />
           </div>
-        )}
-        <input
-          {...otherProps}
-          data-test-id="input-component"
-          name={name}
-          value={innerValue}
-          onChange={handleChangeEvent}
-          ref={element => {
-            inputRef.current = element;
-            element && setRef?.(element);
-          }}
-          size={otherProps.maxLength}
-          type={type}
-          disabled={isDisabled}
-          className={classNames(
-            "input",
-            "block",
-            { "pl-12": icon, "pr-11": clearable },
-            {
-              "text-slate-400 bg-slate-50": isDisabled,
-              "text-slate-700": !isDisabled,
-              "border-input-border": !isDisabled,
-              "hover:border-input-border-dark": !isDisabled,
-              "bg-white": !isDisabled,
-            },
-            "h-11",
-            "p-2",
-            "border",
-            "text-sm",
-            "placeholder-slate-500",
-            "border-solid",
-            "focus:outline-primary",
-            "transition-colors",
-            "duration-300",
-            "focus:border-blue-800",
-            {
-              "z-10": withSuffix !== "" || withPrefix !== "", // to make sure the outline is displayed completely
-              rounded: hasNoExtraContent,
-              "rounded-l": withSuffix !== "",
-              "rounded-r": withPrefix !== "",
-              "order-2": withPrefix !== "",
-              "order-1": withSuffix !== "",
-            },
-            "shadow-default",
-            className
-          )}
-        />
-        <div
-          className="absolute right-0 top-1/2"
-          style={{
-            transform: "translateY(-50%)",
-          }}
-        >
-          <CrossIcon
-            className={classNames(
-              "w-6 h-6 mr-3 cursor-pointer text-slate-300",
-              { block: isClearIconVisible, hidden: !isClearIconVisible }
-            )}
-            onClick={clearField}
-          />
         </div>
       </div>
-    </div>
-  );
-};
+    );
+  }
+);
 
 export default Input;

package/src/components/Input/SearchInput.tsx

@@ -9,6 +9,16 @@ export type SearchInputProps = Omit<
   "icon" | "withSuffix" | "withPrefix" | "type" | "clearable"
 >;
 
-export const SearchInput: React.VoidFunctionComponent<SearchInputProps> = props => {
-  return <Input {...props} icon={SearchIcon} type="text" clearable={true} />;
-};
+export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
+  (props, ref) => {
+    return (
+      <Input
+        {...props}
+        icon={SearchIcon}
+        type="text"
+        clearable={true}
+        ref={ref}
+      />
+    );
+  }
+);

package/src/components/List/List.tsx

@@ -12,6 +12,7 @@ import {
   OnAssetLoadErrorPayload,
   Dragula,
 } from "./List.types";
+import { ListSkeleton } from "./ListSkeleton";
 
 export { ListProps, ListItemProps, OnAssetLoadErrorPayload };
 
@@ -23,6 +24,7 @@ export const List = ({
   onAssetLoadError,
   onDragEnd,
   emptyStateMessage,
+  isLoading,
 }: ListProps): JSX.Element => {
   const listRef = useRef<HTMLUListElement | null>(null);
   const dragulaRef = useRef<Dragula | null>(null);
@@ -43,17 +45,15 @@ export const List = ({
     const draggedItemId = element.dataset["id"];
 
     if (listRef.current && draggedItemId) {
-      const itemIdsWithOldOrder = items.map(item => item.itemId.toString());
+      const itemIdsWithOldOrder = items.map((item) => item.itemId.toString());
       const itemIdsWithNewOrder = Array.from(listRef.current.children)
-        .map(child => (child as HTMLElement).dataset["id"])
+        .map((child) => (child as HTMLElement).dataset["id"])
         .filter((itemId): itemId is string => !!itemId);
 
-      const oldIndexOfDraggedItemId = itemIdsWithOldOrder.indexOf(
-        draggedItemId
-      );
-      const newIndexOfDraggedItemId = itemIdsWithNewOrder.indexOf(
-        draggedItemId
-      );
+      const oldIndexOfDraggedItemId =
+        itemIdsWithOldOrder.indexOf(draggedItemId);
+      const newIndexOfDraggedItemId =
+        itemIdsWithNewOrder.indexOf(draggedItemId);
 
       if (oldIndexOfDraggedItemId !== newIndexOfDraggedItemId) {
         onDragEnd?.(draggedItemId, newIndexOfDraggedItemId);
@@ -72,6 +72,10 @@ export const List = ({
 
   const roundTop = !hasHeader || (hasHeader && headerTransparent);
 
+  if (isLoading) {
+    return <ListSkeleton items={items.length} />;
+  }
+
   return (
     <div data-test-id="list-component">
       {(title || headerButton) && (
@@ -103,7 +107,7 @@ export const List = ({
       )}
 
       <ul ref={listRef}>
-        {items.map(item => (
+        {items.map((item) => (
           <ListItem
             {...item}
             roundTop={roundTop}

package/src/components/List/List.types.ts

@@ -37,6 +37,7 @@ export type ListProps = {
   onAssetLoadError?: (payload: OnAssetLoadErrorPayload) => void;
   onDragEnd?: (itemId: string | number, newIndex: number) => void;
   emptyStateMessage?: string;
+  isLoading?: boolean;
 };
 
 export interface Dragula {

package/src/components/List/ListItemSkeleton.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+export const ListItemSkeleton = (): JSX.Element => {
+  return (
+    <div className="flex flex-row items-center p-4">
+      <div
+        className="skeleton-box is-circle mr-2"
+        style={{ width: `${32}px`, height: `${32}px` }}
+      />
+      <div className="flex flex-col">
+        <div
+          className="skeleton-box mb-1"
+          style={{ width: `${160}px`, height: `${14}px` }}
+        />
+        <div
+          className="skeleton-box"
+          style={{ width: `${110}px`, height: `${14}px` }}
+        />
+      </div>
+      <div
+        className="skeleton-box is-button ml-auto rounded-full"
+        style={{ width: `${24}px`, height: `${24}px` }}
+      />
+    </div>
+  );
+};

package/src/components/List/ListSkeleton.scss

@@ -0,0 +1,5 @@
+@import "../../styles/skeleton";
+
+.list-skeleton {
+  @include skeleton();
+}

package/src/components/List/ListSkeleton.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+import "./ListSkeleton.scss";
+import { ListItemSkeleton } from "./ListItemSkeleton";
+
+type ListSkeletonProps = {
+  items: number;
+};
+
+export const ListSkeleton = ({ items }: ListSkeletonProps): JSX.Element => {
+  const skeletonItems = Array.from({ length: items || 5 }, (_, i) => {
+    return <ListItemSkeleton key={i} />;
+  });
+
+  return (
+    <div className="flex flex-col divide-y divide-slate-200 bg-white border-slate-50 border rounded-lg shadow list-skeleton">
+      <div className="flex flex-row items-center px-4 py-2">
+        <div
+          className="skeleton-box"
+          style={{ width: `${160}px`, height: `${14}px` }}
+        />
+        <div
+          className="skeleton-box is-button ml-auto"
+          style={{ width: `${110}px`, height: `${44}px` }}
+        />
+      </div>
+      {skeletonItems}
+    </div>
+  );
+};

package/src/components/Radio/Radio.js

@@ -5,6 +5,9 @@ import classNames from "classnames";
 import "./Radio.scss";
 import { Text } from "../Text/Text";
 
+/**
+ * @deprecated: use RadioV2 instead
+ */
 class Radio extends PureComponent {
   static propTypes = {
     className: PropTypes.string,

package/src/components/Radio/RadioV2.css

@@ -0,0 +1,15 @@
+.radio-form-field-label input[type="radio"]:checked + .radio-circle {
+  @apply bg-primary;
+}
+
+.radio-form-field-label[data-has-error="true"] .radio-circle {
+  @apply border-red-700;
+  @apply outline-negative;
+}
+
+.radio-form-field-label
+  input[type="radio"]:checked
+  + .radio-circle
+  .radio-inner-circle {
+  @apply bg-white;
+}

package/src/components/Radio/RadioV2.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import classNames from "classnames";
+
+import Text from "../Text/Text";
+
+import "./RadioV2.css";
+
+export interface RadioProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  name: string;
+  value: string | number;
+  // text shown to the user to explain the option
+  text?: string;
+  // text shown to the user underneath the text for extra information
+  info?: string;
+  isError?: boolean;
+  innerRef?: React.Ref<HTMLInputElement>;
+  // value field is used by react-hook-form as the value returned
+}
+
+function RadioInner({
+  text,
+  info,
+  isError,
+  innerRef,
+  className,
+  ...otherProps
+}: RadioProps): JSX.Element {
+  const { value, disabled } = otherProps;
+  const nameHtmlFor = `field-${value}`;
+
+  return (
+    <label
+      className="radio-form-field-label leading-tight"
+      htmlFor={nameHtmlFor}
+      data-has-error={isError}
+      data-test-id={nameHtmlFor}
+    >
+      <div className="flex flex-row items-center ">
+        <input
+          {...otherProps}
+          className={classNames("appearance-none", className)}
+          ref={innerRef}
+          type="radio"
+          id={nameHtmlFor}
+          disabled={disabled}
+        />
+        <span
+          className={classNames(
+            "flex flex-col items-center justify-center w-4 h-4 transition-colors duration-300 ease-in-out border radio-circle rounded-xl border-slate-300"
+          )}
+        >
+          <span className="block transition-colors duration-300 ease-in-out radio-inner-circle w-1.5 h-1.5 rounded-xl"></span>
+        </span>
+        {text && (
+          <div className="ml-2">
+            <Text
+              inline={true}
+              text={text}
+              type="base"
+              color={disabled ? "slate-500" : undefined}
+            />
+          </div>
+        )}
+      </div>
+      {info && (
+        <Text
+          inline={true}
+          className="ml-6"
+          text={info}
+          type="sm"
+          color={disabled ? "slate-200" : "slate-500"}
+        />
+      )}
+    </label>
+  );
+}
+
+/**
+ * TODO: The CSS styling is all messed up, including isError
+ * Warning: don't use this prop before this is resolved
+ * Issue to track: https://github.com/Luscii/web-ui/issues/57
+ * TODO: remove this comment once this is resolved
+ */
+export const RadioV2 = React.forwardRef<HTMLInputElement, RadioProps>(
+  (props, ref) => <RadioInner {...props} innerRef={ref} />
+);

package/src/components/RadioGroup/RadioGroup.js

@@ -6,6 +6,9 @@ import Radio from "../Radio/Radio";
 
 import "./RadioGroup.scss";
 
+/**
+ * @deprecated: use RadioV2 instead
+ */
 function RadioGroup({
   className,
   radioClassName,