@luscii-healthtech/web-ui 2.3.1 → 2.5.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.3.1",
+  "version": "2.5.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Form/Form.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Control, useForm } from "react-hook-form";
+import { Control, useForm, UseFormReturn } from "react-hook-form";
 
 import { PrimaryButton } from "../ButtonV2/PrimaryButton";
 import { InputProps } from "../Input/Input";
@@ -7,85 +7,56 @@ import { RadioGroupProps } from "../RadioGroup/RadioGroupV2";
 import { SelectProps } from "../Select/SelectV2";
 
 import { FormInput } from "./FormInput";
-import { FormFieldProps, FormFieldRowProps, FormProps } from "./form.types";
+import {
+  FormFieldProps,
+  FormFieldRowProps,
+  FormProps,
+  GenericFormProps,
+} from "./form.types";
 import { isRequired } from "./form.transformer";
 import { FormRadioGroup } from "./FormRadioGroup";
 import { FormSelect } from "./FormSelect";
 
 /**
- * Create a straight forward Form.
+ * Create a straight forward Form, which takes away the 'overhead' of react-hook-form.
  *
- * TODO: wrap this in some Page component to style the div and buttons
- * WARNING: don't use this component before some styling errors are resolved.
+ * You will probably don't want to use this component for now, given that the button is hardcoded.
+ * This is an example for the Form for now, though it could be improved to enforce further unification.
+ *
+ * TODO: make the buttons configurable.
  */
-export function Form<TFieldValues>({
+export function GenericForm<TFieldValues>({
   fields,
   onValid,
   onError,
   defaultValues,
-}: FormProps<TFieldValues>): JSX.Element {
-  const {
-    register,
-    handleSubmit,
-    control,
-    formState: { errors },
-  } = useForm<TFieldValues>({
+}: GenericFormProps<TFieldValues>): JSX.Element {
+  const useFormReturn = useForm<TFieldValues>({
     criteriaMode: "all",
     defaultValues: defaultValues,
   });
 
-  const fieldMapper = ({
-    type,
-    name,
-    options,
-    fieldProps = {},
-    ...decoratorProps
-  }: FormFieldProps<TFieldValues>) => {
-    switch (type) {
-      case "text":
-      case "number":
-      case "email":
-      case "password":
-        return (
-          <FormInput
-            key={name}
-            {...decoratorProps}
-            fieldRequired={isRequired(options)}
-            fieldErrors={errors}
-            {...(fieldProps as InputProps)}
-            {...register(name, options)}
-            type={type || "text"}
-          />
-        );
-      case "select":
-        return (
-          <FormSelect
-            key={name}
-            {...decoratorProps}
-            fieldRequired={isRequired(options)}
-            fieldErrors={errors}
-            {...(fieldProps as SelectProps)}
-            control={control as Control}
-            rules={options}
-            name={name}
-          />
-        );
-      case "radioGroup":
-        return (
-          <FormRadioGroup
-            key={name}
-            {...decoratorProps}
-            fieldRequired={isRequired(options)}
-            fieldErrors={errors}
-            {...(fieldProps as RadioGroupProps)}
-            {...register(name, options)}
-          />
-        );
-      default:
-        return undefined;
-    }
-  };
+  const { handleSubmit } = useFormReturn;
 
+  return (
+    <div className="space-y-4">
+      <Form fields={fields} useFormReturn={useFormReturn} />
+      <PrimaryButton onClick={handleSubmit(onValid, onError)} text={"submit"} />
+    </div>
+  );
+}
+
+/**
+ * Creates a Form based on the fields input.
+ *
+ * Expects the results of the useForm hook to be injected into the useFormReturn parameter.
+ *
+ * This allows you to use and modify the useFormReturn before injecting it here.
+ */
+export function Form<TFieldValues, TContext>({
+  fields,
+  useFormReturn,
+}: FormProps<TFieldValues, TContext>): JSX.Element {
   return (
     <div className="space-y-4">
       {fields.map((props) => {
@@ -93,14 +64,75 @@ export function Form<TFieldValues>({
           const { fields: rowFields, key } =
             props as FormFieldRowProps<TFieldValues>;
           return (
-            <div className={"flex flex-row"} key={key}>
-              {rowFields.map(fieldMapper)}
+            <div className={"flex flex-row space-x-4"} key={key}>
+              {rowFields.map((field) => FormFieldMapper(field, useFormReturn))}
             </div>
           );
         }
-        return fieldMapper(props);
+        return FormFieldMapper(props, useFormReturn);
       })}
-      <PrimaryButton onClick={handleSubmit(onValid, onError)} text={"submit"} />
     </div>
   );
 }
+
+function FormFieldMapper<TFieldValues, TContext>(
+  formFieldProps: FormFieldProps<TFieldValues>,
+  useFormReturn: UseFormReturn<TFieldValues, TContext>
+): JSX.Element {
+  const {
+    type,
+    name,
+    options,
+    fieldProps = {},
+    ...decoratorProps
+  } = formFieldProps;
+  const {
+    register,
+    control,
+    formState: { errors },
+  } = useFormReturn;
+
+  switch (type) {
+    case "text":
+    case "number":
+    case "email":
+    case "password":
+      return (
+        <FormInput
+          key={name}
+          {...decoratorProps}
+          fieldRequired={isRequired(options)}
+          fieldErrors={errors}
+          {...(fieldProps as InputProps)}
+          {...register(name, options)}
+          type={type || "text"}
+        />
+      );
+    case "select":
+      return (
+        <FormSelect
+          key={name}
+          {...decoratorProps}
+          fieldRequired={isRequired(options)}
+          fieldErrors={errors}
+          {...(fieldProps as SelectProps)}
+          control={control as Control}
+          rules={options}
+          name={name}
+        />
+      );
+    case "radioGroup":
+      return (
+        <FormRadioGroup
+          key={name}
+          {...decoratorProps}
+          fieldRequired={isRequired(options)}
+          fieldErrors={errors}
+          {...(fieldProps as RadioGroupProps)}
+          {...register(name, options)}
+        />
+      );
+    default:
+      return <></>;
+  }
+}

package/src/components/Form/form.types.ts

@@ -7,6 +7,7 @@ import {
   RegisterOptions,
   SubmitErrorHandler,
   SubmitHandler,
+  UseFormReturn,
 } from "react-hook-form";
 import React, { HTMLInputTypeAttribute } from "react";
 
@@ -27,7 +28,7 @@ export type AllowedTextInputTypes = Extract<
 // --------------------------------------------
 
 // the input for the 'out-of-the-box' Form
-export interface FormProps<TFieldValues extends FieldValues> {
+export interface GenericFormProps<TFieldValues extends FieldValues> {
   // the fields to be rendered
   fields: (FormFieldProps<TFieldValues> | FormFieldRowProps<TFieldValues>)[];
   onValid: SubmitHandler<TFieldValues>;
@@ -36,6 +37,12 @@ export interface FormProps<TFieldValues extends FieldValues> {
   defaultValues?: DeepPartial<TFieldValues>;
 }
 
+export interface FormProps<TFieldValues extends FieldValues, TContext> {
+  // the fields to be rendered
+  fields: (FormFieldProps<TFieldValues> | FormFieldRowProps<TFieldValues>)[];
+  useFormReturn: UseFormReturn<TFieldValues, TContext>;
+}
+
 interface FormFieldGenericProps<TFieldType, TFieldValues>
   extends FormFieldDecoratorProps {
   // the name of the field, which is registered within react-hook-form

package/src/components/Icons/CheckIcon.tsx

@@ -8,6 +8,7 @@ export const CheckIcon = (props: IconProps): JSX.Element => {
       className={props.className}
       onClick={props.onClick}
       role={props.onClick ? "button" : undefined}
+      data-test-id={props["data-test-id"]}
       width="24"
       height="24"
       viewBox="0 0 24 24"

package/src/components/Icons/CrossIcon.tsx

@@ -8,6 +8,7 @@ export const CrossIcon = (props: IconProps): JSX.Element => {
       className={props.className}
       onClick={props.onClick}
       role={props.onClick ? "button" : undefined}
+      data-test-id={props["data-test-id"]}
       width="24"
       height="24"
       viewBox="0 0 24 24"

package/src/components/Icons/WarningIcon.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { IconProps } from "./types/IconProps.type";
+
+export const WarningIcon: React.VoidFunctionComponent<IconProps> = (props) => {
+  return (
+    <svg
+      className={props.className}
+      onClick={props.onClick}
+      role={props.onClick ? "button" : undefined}
+      data-test-id={props["data-test-id"]}
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 11C9.45 11 9 10.55 9 10V6C9 5.45 9.45 5 10 5C10.55 5 11 5.45 11 6V10C11 10.55 10.55 11 10 11ZM11 15H9V13H11V15Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/types/IconProps.type.ts

@@ -1,4 +1,5 @@
 export interface IconProps {
   className?: string;
   onClick?: (event: React.MouseEvent<SVGSVGElement> | undefined) => void;
+  "data-test-id"?: string;
 }

package/src/components/Toaster/Toaster.scss

@@ -0,0 +1,53 @@
+#application-toaster {
+  position: fixed;
+  left: 50%;
+  transform: translate(-50%, 150%);
+  bottom: 48px;
+
+  // https://easings.net/#easeInOutBack
+  transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+
+  &.shelved {
+    transform: translate(-50%, 150%);
+  }
+
+  &.expanded {
+    transform: translate(-50%, 0);
+  }
+
+  &.type-success {
+    [data-test-id="toaster-title"] {
+      @apply text-green-700;
+    }
+
+    .failure-icon {
+      @apply hidden;
+    }
+
+    [data-test-id="toaster-progress-bar-container"] {
+      @apply bg-green-50;
+
+      [data-test-id="toaster-progress-bar"] {
+        @apply bg-green-400;
+      }
+    }
+  }
+
+  &.type-failure {
+    [data-test-id="toaster-title"] {
+      @apply text-red-700;
+    }
+
+    .success-icon {
+      @apply hidden;
+    }
+
+    [data-test-id="toaster-progress-bar-container"] {
+      @apply bg-red-50;
+
+      [data-test-id="toaster-progress-bar"] {
+        @apply bg-red-400;
+      }
+    }
+  }
+}

package/src/components/Toaster/Toaster.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import classNames from "classnames";
+
+import { Text } from "../Text/Text";
+import { CheckIcon } from "../Icons/CheckIcon";
+import { CrossIcon } from "../Icons/CrossIcon";
+import { WarningIcon } from "../Icons/WarningIcon";
+
+import "./Toaster.scss";
+
+export interface ToasterProps {
+  type: "success" | "failure";
+  message: string;
+  title: string;
+  isVisible?: boolean;
+  /** if you need to reposition the toaster for whatever reason you can use these props */
+  styleOverwrite?: Pick<
+    React.CSSProperties,
+    "top" | "bottom" | "left" | "right"
+  >;
+}
+
+export const TOASTER_TYPE_OPTIONS = {
+  SUCCESS: "success",
+  FAILURE: "failure",
+} as const;
+export type ToasterType =
+  typeof TOASTER_TYPE_OPTIONS[keyof typeof TOASTER_TYPE_OPTIONS];
+
+const Toaster: React.VoidFunctionComponent<ToasterProps> = ({
+  message = "",
+  title = "",
+  type = TOASTER_TYPE_OPTIONS.SUCCESS,
+  isVisible,
+  styleOverwrite,
+}) => {
+  const isSuccess = type === TOASTER_TYPE_OPTIONS.SUCCESS;
+  const isFailure = type === TOASTER_TYPE_OPTIONS.FAILURE;
+
+  return (
+    <div
+      style={styleOverwrite}
+      id="application-toaster"
+      data-test-id={`toaster-panel-${type}`}
+      className={classNames(
+        "bg-white cursor-pointer",
+        "rounded-md shadow-md",
+        "min-h-13 max-h-19 w-104 transition-transform",
+
+        {
+          shelved: !isVisible,
+          expanded: isVisible,
+          "type-success": isSuccess,
+          "type-failure": isFailure,
+        }
+      )}
+    >
+      <div className="relative p-4">
+        <div className="flex flex-row">
+          <div
+            data-test-id="success-toaster-icon"
+            className={classNames("success-icon text-green-700", {
+              hidden: isFailure,
+            })}
+          >
+            <CheckIcon />
+          </div>
+          <div
+            data-test-id="failure-toaster-icon"
+            className={classNames("failure-icon text-red-700", {
+              hidden: isSuccess,
+            })}
+          >
+            <WarningIcon />
+          </div>
+          <div className="ml-3">
+            <Text type="strong" data-test-id="toaster-title" text={title} />
+            <Text data-test-id="toaster-message" text={message} />
+          </div>
+          <CrossIcon
+            data-test-id="toaster-close-button"
+            className="ml-auto cursor-pointer text-slate-500"
+          />
+        </div>
+      </div>
+
+      <div
+        data-test-id="toaster-progress-bar-container"
+        className={classNames("h-1 absolute bottom-0 w-full rounded-b-md")}
+      >
+        <div
+          data-test-id="toaster-progress-bar"
+          className={classNames("h-full")}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Toaster;

package/src/components/Toaster/toast-elements-getter.ts

@@ -0,0 +1,72 @@
+interface GetToasterElementsParams {
+  timeoutId: NodeJS.Timeout;
+  progressBarAnimationFrameHandler: number;
+}
+
+interface GetToasterElementsReturn {
+  toasterElementMessage: HTMLElement;
+  toasterProgressBar: HTMLElement;
+  toasterElementTitle: HTMLElement;
+  toasterElementSuccessIcon: HTMLElement;
+  toasterElementFailureIcon: HTMLElement;
+  toasterElementContainer: HTMLElement;
+  toasterCloseButton: HTMLElement;
+}
+
+/**
+ *
+ * @param params.timeoutId - the timeoutId (that makes the toaster vanish), in case of a shortcut
+ * @param params.progressBarAnimationFrameHandler - animation frame id to be canceled in case of a shortcut
+ * @returns a collection of html elements to be manipulated by the animation
+ */
+export const getToasterElements = (
+  params: GetToasterElementsParams
+): GetToasterElementsReturn => {
+  const { timeoutId, progressBarAnimationFrameHandler } = params;
+  const toasterElementContainer = document.querySelector<HTMLElement>(
+    "#application-toaster"
+  );
+
+  if (!toasterElementContainer) {
+    clearTimeout(timeoutId);
+    clearTimeout(progressBarAnimationFrameHandler);
+
+    throw new Error(
+      "Make sure that the Toaster component element is rendered with an id [application-toaster]"
+    );
+  }
+
+  const toasterElementMessage = toasterElementContainer?.querySelector(
+    '[data-test-id="toaster-message"]'
+  ) as HTMLElement;
+
+  const toasterElementTitle = toasterElementContainer?.querySelector(
+    '[data-test-id="toaster-title"]'
+  ) as HTMLElement;
+
+  const toasterElementSuccessIcon = toasterElementContainer?.querySelector(
+    '[data-test-id="success-toaster-icon"]'
+  ) as HTMLElement;
+
+  const toasterElementFailureIcon = toasterElementContainer?.querySelector(
+    '[data-test-id="failure-toaster-icon"]'
+  ) as HTMLElement;
+
+  const toasterCloseButton = toasterElementContainer?.querySelector(
+    '[data-test-id="toaster-close-button"]'
+  ) as HTMLElement;
+
+  const toasterProgressBar = toasterElementContainer?.querySelector(
+    '[data-test-id="toaster-progress-bar"]'
+  ) as HTMLElement;
+
+  return {
+    toasterElementContainer,
+    toasterElementMessage,
+    toasterElementTitle,
+    toasterProgressBar,
+    toasterElementSuccessIcon,
+    toasterElementFailureIcon,
+    toasterCloseButton,
+  };
+};

package/src/components/Toaster/toast-progress-animator.ts

@@ -0,0 +1,53 @@
+interface AnimateProgressParams {
+  animationDuration: number;
+  progressBarElement: HTMLElement;
+}
+
+/**
+ * Reference: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
+ * @param params.animationDuration - the amount of seconds the duration will take
+ * @param params.progressBarElement - the html element for the progress bar
+ * @returns the animation frame id
+ */
+export const animateProgress = (params: AnimateProgressParams): number => {
+  const { animationDuration, progressBarElement } = params;
+
+  let progressBarAnimationFrameHandler: number;
+
+  let startingTimestamp = 0;
+  let previousTimestamp = 0;
+  let done = false;
+  const animationTick = 100 / animationDuration;
+
+  const animate = (animationTimestamp: number) => {
+    if (!startingTimestamp) {
+      startingTimestamp = animationTimestamp;
+    }
+
+    const elapsed = animationTimestamp - startingTimestamp;
+
+    if (previousTimestamp !== animationTimestamp) {
+      const count = 100 - animationTick * elapsed;
+      progressBarElement.style.width = `${count}%`;
+      if (count === 0) {
+        done = true;
+      }
+    }
+
+    if (elapsed < animationDuration) {
+      // Stop the animation after duration is finished
+      previousTimestamp = animationTimestamp;
+
+      if (!done) {
+        progressBarAnimationFrameHandler =
+          window.requestAnimationFrame(animate);
+      }
+    }
+  };
+
+  progressBarElement.style.width = "100%";
+
+  progressBarAnimationFrameHandler = requestAnimationFrame(animate);
+
+  return progressBarAnimationFrameHandler;
+};

package/src/components/Toaster/toast.ts

@@ -0,0 +1,112 @@
+import { getToasterElements } from "./toast-elements-getter";
+import { animateProgress } from "./toast-progress-animator";
+
+let timeoutId: NodeJS.Timeout;
+let progressBarAnimationFrameHandler: number;
+
+const defaultDurationInSeconds = 5;
+
+type ToastParams =
+  | {
+      message: string;
+      title?: string;
+      showIcon?: boolean;
+      type: "success" | "failure";
+    }
+  | string;
+
+const showToaster = (params: ToastParams) => {
+  clearTimeout(timeoutId);
+  clearTimeout(progressBarAnimationFrameHandler);
+
+  const {
+    toasterElementContainer,
+    toasterElementMessage,
+    toasterElementTitle,
+    toasterProgressBar,
+    toasterElementSuccessIcon,
+    toasterElementFailureIcon,
+    toasterCloseButton,
+  } = getToasterElements({
+    timeoutId,
+    progressBarAnimationFrameHandler,
+  });
+
+  const animationDuration = defaultDurationInSeconds * 1000;
+
+  progressBarAnimationFrameHandler = animateProgress({
+    animationDuration,
+    progressBarElement: toasterProgressBar,
+  });
+
+  timeoutId = setTimeout(() => {
+    toasterElementContainer.classList.remove("expanded");
+    clearTimeout(timeoutId);
+    cancelAnimationFrame(progressBarAnimationFrameHandler);
+  }, animationDuration);
+
+  function shortcutAndClose() {
+    toasterElementContainer.classList.remove("expanded");
+    toasterElementContainer.classList.add("shelved");
+
+    clearTimeout(timeoutId);
+    cancelAnimationFrame(progressBarAnimationFrameHandler);
+  }
+
+  toasterCloseButton.removeEventListener("click", shortcutAndClose, true);
+  toasterCloseButton.addEventListener("click", shortcutAndClose);
+
+  toasterElementContainer.removeEventListener("click", shortcutAndClose, true);
+  toasterElementContainer.addEventListener("click", shortcutAndClose);
+
+  // Basic usage, no need to manipulate any other element;
+  if (typeof params === "string") {
+    toasterElementMessage.textContent = params;
+    toasterElementTitle.classList.add("hidden");
+
+    toasterElementSuccessIcon.classList.remove("hidden");
+    toasterElementFailureIcon.classList.add("hidden");
+
+    toasterElementContainer.classList.remove("type-failure");
+    toasterElementContainer.classList.add("type-success");
+    toasterElementContainer.classList.add("expanded");
+
+    return;
+  }
+
+  const { title = "", showIcon = true, message, type } = params;
+
+  toasterElementTitle.classList.toggle("hidden", !title);
+  toasterElementTitle.textContent = title;
+
+  toasterElementSuccessIcon.classList.toggle("hidden", !showIcon);
+  toasterElementFailureIcon.classList.toggle("hidden", !showIcon);
+
+  toasterElementMessage.textContent = message;
+  toasterElementContainer.classList.remove("type-success");
+  toasterElementContainer.classList.remove("type-failure");
+  toasterElementContainer.classList.add("expanded");
+  toasterElementContainer.classList.add(`type-${type}`);
+};
+
+export const toast = (params: ToastParams): void => {
+  showToaster(params);
+};
+
+toast.error = (message: string): void => {
+  showToaster({
+    message: message,
+    type: "failure",
+    showIcon: true,
+    title: "",
+  });
+};
+
+toast.info = (message: string): void => {
+  showToaster({
+    message: message,
+    type: "success",
+    showIcon: true,
+    title: "",
+  });
+};