@luscii-healthtech/web-ui 2.0.0 → 2.3.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0",
+  "version": "2.3.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -82,6 +82,7 @@
     "postcss": "^8.4.14",
     "postcss-loader": "4.2",
     "postcss-url": "^10.1.3",
+    "prettier": "^2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
@@ -103,6 +104,7 @@
   "dependencies": {
     "@fontsource/inter": "^4.5.11",
     "@fontsource/roboto": "^4.5.7",
+    "@hookform/error-message": "^2.0.0",
     "@reach/router": "^1.3.4",
     "@typescript-eslint/eslint-plugin": "^5.29.0",
     "classnames": "^2.3.1",
@@ -118,11 +120,12 @@
     "path": "^0.12.7",
     "react-datepicker": "^4.8.0",
     "react-draft-wysiwyg": "^1.14.7",
+    "react-dragula": "^1.1.17",
     "react-glider": "^3.1.0",
+    "react-hook-form": "^7.33.0",
     "react-modal": "^3.15.1",
     "react-quill": "^1.3.5",
-    "react-select": "^5.3.2",
-    "react-dragula": "^1.1.17"
+    "react-select": "^5.3.2"
   },
   "browserslist": [
     "last 1 chrome version",

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import { AccordionItem, AccordionItemProps } from "./AccordionItem";
+
+export interface AccordionProps {
+  dataTestId?: string;
+  items: AccordionItemProps[];
+  className?: string;
+  isCollapsedByDefault?: boolean;
+}
+
+const Accordion: React.VFC<AccordionProps> = ({
+  dataTestId,
+  isCollapsedByDefault = false,
+  items,
+  className,
+}) => {
+  return (
+    <ul data-test-id={dataTestId} className={className}>
+      {items.map?.((item) => (
+        <AccordionItem
+          {...item}
+          key={item.id}
+          isCollapsedByDefault={
+            item.isCollapsedByDefault ?? isCollapsedByDefault
+          }
+        />
+      ))}
+    </ul>
+  );
+};
+
+export default Accordion;

package/src/components/Accordion/AccordionItem.tsx

@@ -0,0 +1,50 @@
+import React, { useReducer } from "react";
+import classNames from "classnames";
+
+import { ChevronRightIcon } from "../Icons/ChevronRightIcon";
+import { ChevronDownIcon } from "../Icons/ChevronDownIcon";
+import Text from "../Text/Text";
+
+export interface AccordionItemProps {
+  id: string;
+  title: string;
+  content: React.ReactNode;
+  className?: string;
+  isCollapsedByDefault?: boolean;
+}
+
+export const AccordionItem: React.VFC<AccordionItemProps> = ({
+  id,
+  title,
+  content,
+  isCollapsedByDefault = false,
+}) => {
+  const [isCollapsed, toggleIsCollapsed] = useReducer(
+    (state) => !state,
+    isCollapsedByDefault
+  );
+  const Chevron = isCollapsed ? ChevronRightIcon : ChevronDownIcon;
+
+  return (
+    <li
+      className={"bg-white border-b last:border-b-0 border-slate-100"}
+      data-test-id={id}
+    >
+      <div
+        onClick={toggleIsCollapsed}
+        className={classNames(
+          "p-4 w-full flex flex-row space-x-4 select-none",
+          "cursor-pointer hover:bg-blue-50 transition-colors ease-in-out duration-300",
+          {
+            "border-b border-slate-100": !isCollapsed,
+          }
+        )}
+      >
+        <Chevron className={"text-slate-300"} />
+        <Text text={title} type={"lg-strong"} />
+      </div>
+
+      <div className={classNames({ hidden: isCollapsed })}>{content}</div>
+    </li>
+  );
+};

package/src/components/Form/Form.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import { Control, useForm } from "react-hook-form";
+
+import { PrimaryButton } from "../ButtonV2/PrimaryButton";
+import { InputProps } from "../Input/Input";
+import { RadioGroupProps } from "../RadioGroup/RadioGroupV2";
+import { SelectProps } from "../Select/SelectV2";
+
+import { FormInput } from "./FormInput";
+import { FormFieldProps, FormFieldRowProps, FormProps } from "./form.types";
+import { isRequired } from "./form.transformer";
+import { FormRadioGroup } from "./FormRadioGroup";
+import { FormSelect } from "./FormSelect";
+
+/**
+ * Create a straight forward 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.
+ */
+export function Form<TFieldValues>({
+  fields,
+  onValid,
+  onError,
+  defaultValues,
+}: FormProps<TFieldValues>): JSX.Element {
+  const {
+    register,
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = 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;
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {fields.map((props) => {
+        if (props.type === "row") {
+          const { fields: rowFields, key } =
+            props as FormFieldRowProps<TFieldValues>;
+          return (
+            <div className={"flex flex-row"} key={key}>
+              {rowFields.map(fieldMapper)}
+            </div>
+          );
+        }
+        return fieldMapper(props);
+      })}
+      <PrimaryButton onClick={handleSubmit(onValid, onError)} text={"submit"} />
+    </div>
+  );
+}

package/src/components/Form/FormFieldDecorator.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { ErrorMessage } from "@hookform/error-message";
+import classNames from "classnames";
+
+import { Text } from "../Text/Text";
+
+import { FormFieldDecoratorWithGeneratedProps } from "./form.types";
+
+/**
+ * Decorator for any input component. Adds a label and additional information to be shown.
+ *
+ * Includes the default error handling from react-hook-form.
+ */
+export function FormFieldDecorator({
+  name,
+  children,
+  label,
+  fieldRequired,
+  info,
+  fieldErrors,
+  decoratorClassname,
+}: FormFieldDecoratorWithGeneratedProps): JSX.Element {
+  return (
+    <div className={classNames(decoratorClassname)}>
+      {label && (
+        <label
+          className="cweb-form-field-label block mb-1"
+          htmlFor={name}
+          data-is-required={fieldRequired}
+        >
+          <Text
+            className="cweb-form-field-label-text"
+            inline={true}
+            text={label}
+          />
+        </label>
+      )}
+
+      <fieldset className="cweb-form-fieldset">{children}</fieldset>
+      {info && (
+        <Text
+          className="mt-1 cweb-form-info-text"
+          type="sm"
+          color="slate-500"
+          text={info}
+        />
+      )}
+
+      <ErrorMessage
+        errors={fieldErrors}
+        name={name}
+        render={({ messages }) =>
+          messages &&
+          Object.entries(messages).map(([key, message]) => (
+            <Text
+              key={key}
+              className="mt-1"
+              text={message as string}
+              color={"red"}
+            />
+          ))
+        }
+      />
+    </div>
+  );
+}

package/src/components/Form/FormInput.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+import Input from "../Input/Input";
+
+import { FormFieldDecorator } from "./FormFieldDecorator";
+import { hasError } from "./form.transformer";
+import { FormInputProps } from "./form.types";
+
+/**
+ * Input field that can be used in any react-hook-form context.
+ */
+const FormInputInner = React.forwardRef<HTMLInputElement, FormInputProps>(
+  (
+    {
+      name,
+      fieldErrors,
+      fieldRequired,
+      label,
+      info,
+      decoratorClassname,
+      ...fieldProps
+    },
+    ref
+  ) => {
+    return (
+      <FormFieldDecorator
+        name={name}
+        fieldErrors={fieldErrors}
+        fieldRequired={fieldRequired}
+        label={label}
+        info={info}
+        decoratorClassname={decoratorClassname}
+      >
+        <Input
+          {...fieldProps}
+          isError={hasError(name, fieldErrors)}
+          ref={ref}
+          name={name}
+        />
+      </FormFieldDecorator>
+    );
+  }
+);
+
+export const FormInput = React.forwardRef<HTMLInputElement, FormInputProps>(
+  (props, ref) => <FormInputInner {...props} ref={ref} />
+);

package/src/components/Form/FormRadioGroup.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { RadioGroupV2 } from "../RadioGroup/RadioGroupV2";
+
+import { FormFieldDecorator } from "./FormFieldDecorator";
+import { hasError } from "./form.transformer";
+import { FormRadioGroupProps } from "./form.types";
+
+/**
+ * Input field that can be used in any react-hook-form context.
+ */
+function FormRadioGroupInner(
+  { innerRef, name, fieldErrors, fieldRequired, label, info, decoratorClassname, ...fieldProps }: FormRadioGroupProps): JSX.Element {
+  return (
+    <FormFieldDecorator name={name} fieldErrors={fieldErrors} fieldRequired={fieldRequired} label={label} info={info} decoratorClassname={decoratorClassname}>
+      <RadioGroupV2 {...fieldProps} isError={hasError(name, fieldErrors)} ref={innerRef} name={name} />
+    </FormFieldDecorator>
+  );
+}
+
+export const FormRadioGroup = React.forwardRef<HTMLInputElement, FormRadioGroupProps>((props, ref) => (
+  <FormRadioGroupInner {...props} innerRef={ref} />
+));

package/src/components/Form/FormSelect.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Controller } from "react-hook-form";
+
+import { Select } from "../Select/SelectV2";
+
+import { FormSelectProps } from "./form.types";
+import { FormFieldDecorator } from "./FormFieldDecorator";
+import { hasError } from "./form.transformer";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const FormSelect = React.forwardRef<any, FormSelectProps>((
+  {
+    control, name, rules, fieldErrors, fieldRequired, label, info, decoratorClassname,
+    ...selectProps
+  }, innerRef) => {
+  return (
+    <FormFieldDecorator name={name} fieldErrors={fieldErrors} fieldRequired={fieldRequired} label={label} info={info} decoratorClassname={decoratorClassname}>
+      <Controller
+        name={name}
+        control={control}
+        rules={rules}
+        render={({ field }) => (
+          <Select
+            {...selectProps}
+            {...field}
+            isError={hasError(name, fieldErrors)}
+            ref={innerRef}
+          />)}
+      />
+    </FormFieldDecorator>
+  );
+});

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

@@ -0,0 +1,9 @@
+import { FieldErrors, RegisterOptions } from "react-hook-form";
+
+export const hasError = (name?: string, errors?: FieldErrors): boolean => {
+  return !!(name && errors && name in errors);
+};
+
+export const isRequired = (options?: RegisterOptions): boolean => {
+  return !!(options && "required" in options);
+};

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

@@ -0,0 +1,132 @@
+import {
+  Control,
+  DeepPartial,
+  FieldErrors,
+  FieldPath,
+  FieldValues,
+  RegisterOptions,
+  SubmitErrorHandler,
+  SubmitHandler,
+} from "react-hook-form";
+import React, { HTMLInputTypeAttribute } from "react";
+
+import { InputProps } from "../Input/Input";
+import { RadioGroupProps } from "../RadioGroup/RadioGroupV2";
+import { SelectProps } from "../Select/SelectV2";
+
+export type AllowedTextInputTypes = Extract<
+  HTMLInputTypeAttribute,
+  "email" | "number" | "password" | "text"
+>;
+
+// --------------------------------------------
+// The namespaces for props and components are structured as:
+// <<type>>Props         : usable in any context
+// Form<<type>>Props     : usable in any react-hook-form context
+// FormField<<type>>Props: usable in specifically the Form component
+// --------------------------------------------
+
+// the input for the 'out-of-the-box' Form
+export interface FormProps<TFieldValues extends FieldValues> {
+  // the fields to be rendered
+  fields: (FormFieldProps<TFieldValues> | FormFieldRowProps<TFieldValues>)[];
+  onValid: SubmitHandler<TFieldValues>;
+  onError?: SubmitErrorHandler<TFieldValues>;
+  // inject the form with already known data (for instance, when updating
+  defaultValues?: DeepPartial<TFieldValues>;
+}
+
+interface FormFieldGenericProps<TFieldType, TFieldValues>
+  extends FormFieldDecoratorProps {
+  // the name of the field, which is registered within react-hook-form
+  name: FieldPath<TFieldValues>;
+  // the options registered within react-hook-form
+  options?: RegisterOptions;
+  // any additional props to customise the component that renders the field
+  fieldProps?: TFieldType;
+}
+
+// these are the configuration options for the decorator
+interface FormFieldDecoratorProps {
+  // the label shown to the user within the decorator
+  label?: string;
+  // the additional information shown to the user within the decorator
+  info?: string;
+  // allow for custom styling of the decorator component
+  decoratorClassname?: string;
+}
+
+// these are all the types that can be included in the 'out-of-the-box' Form
+export type FormFieldProps<TFieldValues> =
+  | FormFieldInputProps<TFieldValues>
+  | FormFieldSelectProps<TFieldValues>
+  | FormFieldRadioGroupProps<TFieldValues>;
+
+// allow a row of fields
+export interface FormFieldRowProps<TFieldValues> {
+  type: "row";
+  // add a unique key string to ensure react can render the map in an optimized manner
+  key: string;
+  fields: FormFieldProps<TFieldValues>[];
+}
+
+interface FormFieldInputProps<TFieldValues>
+  extends FormFieldGenericProps<Omit<InputProps, "name">, TFieldValues> {
+  // the type of component rendered to display the field
+  type: AllowedTextInputTypes;
+}
+
+interface FormFieldRadioGroupProps<TFieldValues>
+  extends FormFieldGenericProps<Omit<RadioGroupProps, "name">, TFieldValues> {
+  type: "radioGroup";
+}
+
+export interface FormFieldSelectProps<TFieldValues>
+  extends FormFieldGenericProps<SelectProps, TFieldValues> {
+  type: "select";
+  // this makes it now required, because we need the options in there
+  fieldProps: SelectProps;
+}
+
+// --------------------------------------------
+// The types below are used for components that are used in a react-hook-form context but not the Form context
+// --------------------------------------------
+
+// these are the inputs required to decorate fields
+// they are generated within the Form component, but could also be manually inserted
+export interface FormFieldDecoratorWithGeneratedProps
+  extends FormFieldDecoratorProps {
+  // coming from register react-hook-form
+  name: string;
+  // coming from useForms formState react-hook-form
+  fieldErrors: FieldErrors;
+  // automatically generated within Form from the RegisterOptions
+  // showing an asterisk to the label if true
+  fieldRequired: boolean;
+  // the field that is decorated
+  children?: React.ReactNode;
+}
+
+export interface FormInputProps
+  extends Omit<InputProps, "name">,
+    FormFieldDecoratorWithGeneratedProps {
+  type: Extract<
+    HTMLInputTypeAttribute,
+    "email" | "number" | "password" | "text"
+  >;
+}
+
+export interface FormRadioGroupProps
+  extends RadioGroupProps,
+    FormFieldDecoratorWithGeneratedProps {}
+
+export interface FormSelectProps
+  extends Omit<SelectProps, "name">,
+    FormFieldDecoratorWithGeneratedProps {
+  control: Control;
+  // ref: https://react-hook-form.com/ts#UseControllerProps
+  rules?: Exclude<
+    RegisterOptions,
+    "valueAsNumber" | "valueAsDate" | "setValueAs"
+  >;
+}