@luscii-healthtech/web-ui 2.4.0 → 2.4.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.4.0",
+  "version": "2.4.1",
   "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/index.tsx

@@ -69,6 +69,11 @@ export {
 export { default as PreviewPhone } from "./components/PreviewPhone/PreviewPhone";
 export { default as Radio } from "./components/Radio/Radio";
 export { default as RadioGroup } from "./components/RadioGroup/RadioGroup";
+export { RadioProps, RadioV2 } from "./components/Radio/RadioV2";
+export {
+  RadioGroupProps,
+  RadioGroupV2,
+} from "./components/RadioGroup/RadioGroupV2";
 export { default as Section } from "./components/Section/Section";
 export { default as SectionItemWithContent } from "./components/Section/SectionItemWithContent";
 export {
@@ -76,6 +81,7 @@ export {
   SectionItemProps,
 } from "./components/Section/SectionItem";
 //export { default as Select } from "./components/Select/Select";
+export { SelectProps, Select } from "./components/Select/SelectV2";
 export {
   SettingsMenuButton,
   SettingsMenuButtonProps,
@@ -115,8 +121,8 @@ export { default as Text } from "./components/Text/Text";
 
 export { SearchInput, SearchInputProps } from "./components/Input/SearchInput";
 
-export { Form } from "./components/Form/Form";
-export { FormProps } from "./components/Form/form.types";
+export { GenericForm, Form } from "./components/Form/Form";
+export { GenericFormProps, FormProps } from "./components/Form/form.types";
 
 export { IconProps } from "./components/Icons/types/IconProps.type";
 export { AddIcon } from "./components/Icons/AddIcon";