@luscii-healthtech/web-ui 1.0.0 → 2.2.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/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,

package/src/components/RadioGroup/RadioGroupV2.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import classNames from "classnames";
+
+import { RadioProps, RadioV2 } from "../Radio/RadioV2";
+
+export interface RadioGroupProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"> {
+  name: string;
+  isError?: boolean;
+  options: Omit<RadioProps, "name">[];
+  innerRef?: React.Ref<HTMLInputElement>;
+}
+
+function RadioGroupInner({
+  innerRef,
+  options,
+  ...registerProps
+}: RadioGroupProps): JSX.Element {
+  return (
+    <div className={classNames("flex flex-col space-y-2")}>
+      {options.map((option) => (
+        <RadioV2
+          key={option.value}
+          {...option}
+          {...registerProps}
+          ref={innerRef}
+        />
+      ))}
+    </div>
+  );
+}
+
+export const RadioGroupV2 = React.forwardRef<HTMLInputElement, RadioGroupProps>(
+  (props, ref) => <RadioGroupInner {...props} innerRef={ref} />
+);

package/src/components/Select/Select.tsx

@@ -13,10 +13,11 @@ import Select from "react-select/base";
  */
 import "./Select.scss";
 
-function generateCustomStyles<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
-  hasError: boolean,
-  isIE11: boolean
-): StylesConfig<Option, IsMulti, Group> {
+function generateCustomStyles<
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+>(hasError: boolean, isIE11: boolean): StylesConfig<Option, IsMulti, Group> {
   return {
     option: (baseStyles, state) => {
       return {
@@ -47,8 +48,12 @@ function generateCustomStyles<Option, IsMulti extends boolean, Group extends Gro
       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"}`;
+      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,
@@ -101,24 +106,45 @@ function generateCustomStyles<Option, IsMulti extends boolean, Group extends Gro
   };
 }
 
-type CustomSelect = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
+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>>,
+    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);
+    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} />;
+    return (
+      <ReactSelect<Option, IsMulti, Group>
+        {...props}
+        ref={ref}
+        className={classNames("customized-select", className)}
+        styles={mergedStyles}
+      />
+    );
   }
 ) as CustomSelect;