From d0c4be178d5e84d8a20a4daa42969adfc96e7532 Mon Sep 17 00:00:00 2001
From: Michael Paradis <michael.p@getjobber.com>
Date: Wed, 4 Dec 2024 12:26:58 -0800
Subject: [PATCH] refactor(components): Expose Reusable hooks and components
 used in FormField [JOB-110812] (#2184)

---------

Co-authored-by: Scott Thompson <145565743+scotttjob@users.noreply.github.com>
---
 .../InputValidation/Web.stories.tsx           |  65 +++--
 .../src/FormField/FormField.test.tsx          |  39 ++-
 .../components/src/FormField/FormField.tsx    | 188 ++++--------
 .../src/FormField/FormFieldAffix.tsx          |   3 +-
 .../src/FormField/FormFieldDescription.tsx    |   6 +-
 .../src/FormField/FormFieldPostFix.tsx        |   8 +-
 .../src/FormField/FormFieldTypes.ts           |  17 ++
 .../src/FormField/FormFieldWrapper.tsx        | 267 +++++++++---------
 .../src/FormField/components/ClearAction.tsx  |   8 +-
 .../FormField/hooks/useAtlantisFormField.ts   | 129 +++++++++
 .../hooks/useAtlantisFormFieldActions.ts      | 106 +++++++
 .../hooks/useAtlantisFormFieldName.ts         |  16 ++
 .../hooks/useAtlantisReactHookForm.ts         |  61 ++++
 .../hooks/useFormFieldWrapperStyles.ts        | 138 +++++++++
 packages/components/src/FormField/index.ts    |   9 +
 .../InputValidation/InputValidation.test.tsx  |  51 +---
 .../src/InputValidation/InputValidation.tsx   |   8 +-
 packages/components/src/utils/meta/meta.json  |   1 +
 18 files changed, 788 insertions(+), 332 deletions(-)
 create mode 100644 packages/components/src/FormField/hooks/useAtlantisFormField.ts
 create mode 100644 packages/components/src/FormField/hooks/useAtlantisFormFieldActions.ts
 create mode 100644 packages/components/src/FormField/hooks/useAtlantisFormFieldName.ts
 create mode 100644 packages/components/src/FormField/hooks/useAtlantisReactHookForm.ts
 create mode 100644 packages/components/src/FormField/hooks/useFormFieldWrapperStyles.ts

diff --git a/docs/components/InputValidation/Web.stories.tsx b/docs/components/InputValidation/Web.stories.tsx
index 17c71c2542..7352c5e450 100644
--- a/docs/components/InputValidation/Web.stories.tsx
+++ b/docs/components/InputValidation/Web.stories.tsx
@@ -3,6 +3,8 @@ import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { InputValidation } from "@jobber/components/InputValidation";
 import { InputText } from "@jobber/components/InputText";
 import { Text } from "@jobber/components/Text";
+import { Button } from "@jobber/components/Button";
+import { Content } from "@jobber/components/Content";
 
 export default {
   title: "Components/Forms and Inputs/InputValidation/Web",
@@ -15,30 +17,51 @@ export default {
 
 const BasicTemplate: ComponentStory<typeof InputValidation> = args => {
   const [validationMessages, setValidationMessages] = useState(args.message);
+  const [displayError, setDisplayError] = useState(true);
 
   return (
-    <>
-      <Text>
-        My name is
-        <InputText
-          validations={{
-            required: {
-              value: true,
-              message: "Please tell me your name",
-            },
-            pattern: {
-              value: /Jeff/,
-              message: "Have you considered a better name, like Jeff?",
-            },
-          }}
-          onValidation={message => setValidationMessages(message)}
-          size="small"
-          inline={true}
-          maxLength={4}
+    <Content>
+      <Content spacing="smallest">
+        <Text>
+          My name is
+          <InputText
+            validations={{
+              required: {
+                value: true,
+                message: "Please tell me your name",
+              },
+              pattern: {
+                value: /Jeff/,
+                message: "Have you considered a better name, like Jeff?",
+              },
+            }}
+            onValidation={message => setValidationMessages(message)}
+            size="small"
+            inline={true}
+            maxLength={4}
+          />
+        </Text>
+        <InputValidation
+          message={validationMessages}
+          visible={!!validationMessages}
         />
-      </Text>
-      {validationMessages && <InputValidation message={validationMessages} />}
-    </>
+      </Content>
+      <Content spacing="smallest">
+        <Text>
+          InputValidation can also be toggled using the visible prop
+          <InputText size="small" />
+        </Text>
+        <InputValidation
+          message="This error message can be toggled "
+          visible={displayError}
+        />
+        <Button
+          fullWidth={false}
+          onClick={() => setDisplayError(prev => !prev)}
+          label="Toggle Error"
+        />
+      </Content>
+    </Content>
   );
 };
 
diff --git a/packages/components/src/FormField/FormField.test.tsx b/packages/components/src/FormField/FormField.test.tsx
index 8432f36560..b5084f50fd 100644
--- a/packages/components/src/FormField/FormField.test.tsx
+++ b/packages/components/src/FormField/FormField.test.tsx
@@ -1,5 +1,6 @@
-import React from "react";
+import React, { createRef } from "react";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { FormField } from ".";
 import { Form } from "../Form/Form";
 
@@ -93,6 +94,23 @@ describe("FormField", () => {
     });
   });
 
+  it("should call onFocus and onBlur", async () => {
+    const focusHandler = jest.fn();
+    const blurHandler = jest.fn();
+    const { getByLabelText } = render(
+      <FormField
+        placeholder="foo"
+        onBlur={blurHandler}
+        onFocus={focusHandler}
+      />,
+    );
+
+    await userEvent.click(getByLabelText("foo"));
+    await userEvent.tab();
+    expect(focusHandler).toHaveBeenCalledTimes(1);
+    expect(blurHandler).toHaveBeenCalledTimes(1);
+  });
+
   describe("with a controlled value", () => {
     it("should set the value", () => {
       const value = "Look, some words!";
@@ -229,7 +247,7 @@ describe("FormField", () => {
     describe("with validation errors", () => {
       it("should trigger onValidation with error message", async () => {
         const validationHandler = jest.fn();
-        const validate = val => (val == "Bob" ? "message" : "foo");
+        const validate = (val: string) => (val == "Bob" ? "message" : "foo");
 
         const { getByLabelText } = render(
           <FormField
@@ -422,5 +440,22 @@ describe("FormField", () => {
       fireEvent.click(clearButton);
       expect(setValue).toHaveBeenCalledWith("");
     });
+
+    describe("when inputRef provided", () => {
+      it("should focus the input when the clear is used", async () => {
+        const mockRef = createRef<HTMLInputElement>();
+        const { getByRole, getByLabelText } = render(
+          <FormField
+            placeholder={"I am a placeholder"}
+            value={"I am a value"}
+            clearable="always"
+            inputRef={mockRef}
+          />,
+        );
+        const clearButton = getByLabelText("Clear input");
+        await userEvent.click(clearButton);
+        expect(getByRole("textbox")).toHaveFocus();
+      });
+    });
   });
 });
diff --git a/packages/components/src/FormField/FormField.tsx b/packages/components/src/FormField/FormField.tsx
index 130b81ea54..8e325890b2 100644
--- a/packages/components/src/FormField/FormField.tsx
+++ b/packages/components/src/FormField/FormField.tsx
@@ -1,17 +1,11 @@
-import React, {
-  ChangeEvent,
-  FocusEvent,
-  KeyboardEvent,
-  useEffect,
-  useId,
-  useImperativeHandle,
-} from "react";
-import { useController, useForm, useFormContext } from "react-hook-form";
+import React, { useId } from "react";
 import { FormFieldProps } from "./FormFieldTypes";
-import styles from "./FormField.module.css";
 import { FormFieldWrapper } from "./FormFieldWrapper";
 import { FormFieldPostFix } from "./FormFieldPostFix";
-import { mergeRefs } from "../utils/mergeRefs";
+import { useAtlantisFormFieldActions } from "./hooks/useAtlantisFormFieldActions";
+import { useAtlantisFormField } from "./hooks/useAtlantisFormField";
+import { useAtlantisFormFieldName } from "./hooks/useAtlantisFormFieldName";
+import { useAtlantisReactHookForm } from "./hooks/useAtlantisReactHookForm";
 
 export function FormField(props: FormFieldProps) {
   // Warning: do not move useId into FormFieldInternal. This must be here to avoid
@@ -26,7 +20,6 @@ type FormFieldInternalProps = FormFieldProps & {
   readonly id: string;
 };
 
-// eslint-disable-next-line max-statements
 function FormFieldInternal(props: FormFieldInternalProps) {
   const {
     actionsRef,
@@ -58,76 +51,71 @@ function FormFieldInternal(props: FormFieldInternalProps) {
     clearable = "never",
     autofocus,
   } = props;
-  const formContext = useFormContext();
-  // If there isn't a Form Context being provided, get a form for this field.
-  const { control, setValue, watch } =
-    formContext ?? useForm({ mode: "onTouched" });
 
-  const descriptionIdentifier = `descriptionUUID--${id}`;
-  /**
-   * Generate a name if one is not supplied, this is the name
-   * that will be used for react-hook-form and not neccessarily
-   * attached to the DOM
-   */
-  const name = nameProp ? nameProp : `generatedName--${id}`;
-
-  useEffect(() => {
-    if (value != undefined) {
-      setValue(name, value);
-    }
-  }, [value, watch(name)]);
-
-  useImperativeHandle(actionsRef, () => ({
-    setValue: newValue => {
-      setValue(name, newValue, { shouldValidate: true });
-    },
-  }));
+  const { name } = useAtlantisFormFieldName({ id, nameProp });
 
   const {
-    field: {
-      onChange: onControllerChange,
-      onBlur: onControllerBlur,
-      ref: fieldRef,
-      ...rest
-    },
-    fieldState: { error },
-  } = useController({
+    errorMessage,
+    inputRefs,
+    useControllerField,
+    setValue,
+    onControllerBlur,
+    onControllerChange,
+  } = useAtlantisReactHookForm({
+    actionsRef,
+    name,
+    defaultValue,
+    value,
+    validations,
+    inputRef,
+  });
+  const {
+    handleValidation,
+    handleBlur,
+    handleChange,
+    handleClear,
+    handleFocus,
+    handleKeyDown,
+  } = useAtlantisFormFieldActions({
+    inputRef,
+    onChange,
+    onEnter,
+    readonly,
+    type,
+    onFocus,
+    setValue,
+    onBlur,
+    onValidation,
+    onControllerBlur,
+    onControllerChange,
     name,
-    control,
-    rules: validations,
-    defaultValue: value ?? defaultValue ?? "",
   });
 
-  const errorMessage = error?.message || "";
-  useEffect(() => handleValidation(errorMessage), [errorMessage]);
-
-  const fieldProps = {
-    ...rest,
-    id,
-    className: styles.input,
-    name: (validations || nameProp) && name,
-    disabled: disabled,
-    readOnly: readonly,
-    inputMode: keyboard,
-    onChange: handleChange,
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    autoFocus: autofocus,
-    ...(description &&
-      !inline && { "aria-describedby": descriptionIdentifier }),
-  };
-
-  const textFieldProps = {
-    ...fieldProps,
-    autoFocus: autofocus,
-    onKeyDown: handleKeyDown,
-  };
-  const inputRefs = mergeRefs([inputRef, fieldRef]);
+  const { textFieldProps, fieldProps, descriptionIdentifier } =
+    useAtlantisFormField({
+      id,
+      useControllerField,
+      name,
+      nameProp,
+      description,
+      validations: !!validations,
+      disabled,
+      readonly,
+      keyboard,
+      autofocus,
+      handleChange,
+      handleBlur,
+      handleFocus,
+      inline,
+      errorMessage,
+      handleValidation,
+      handleKeyDown,
+    });
 
   return (
     <FormFieldWrapper
       {...props}
-      value={rest.value}
+      value={useControllerField.value}
       error={errorMessage}
       identifier={id}
       descriptionIdentifier={descriptionIdentifier}
@@ -168,62 +156,6 @@ function FormFieldInternal(props: FormFieldInternalProps) {
         );
     }
   }
-
-  function handleClear() {
-    handleBlur();
-    setValue(name, "", { shouldValidate: true });
-    onChange && onChange("");
-    inputRef?.current?.focus();
-  }
-
-  function handleChange(
-    event: ChangeEvent<
-      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-    >,
-  ) {
-    let newValue: string | number;
-    newValue = event.currentTarget.value;
-
-    if (type === "number" && newValue.length > 0) {
-      newValue = parseFloat(newValue);
-    }
-
-    onChange && onChange(newValue, event);
-    onControllerChange(event);
-  }
-
-  function handleKeyDown(
-    event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) {
-    if (!onEnter) return;
-    if (event.key !== "Enter") return;
-    if (event.shiftKey || event.ctrlKey) return;
-    event.preventDefault();
-    onEnter && onEnter(event);
-  }
-
-  function handleFocus(
-    event: FocusEvent<
-      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-    >,
-  ) {
-    const target = event.currentTarget;
-
-    if ((target as HTMLInputElement).select) {
-      setTimeout(() => readonly && (target as HTMLInputElement).select());
-    }
-
-    onFocus && onFocus();
-  }
-
-  function handleBlur() {
-    onBlur && onBlur();
-    onControllerBlur();
-  }
-
-  function handleValidation(message: string) {
-    onValidation && onValidation(message);
-  }
 }
 
 function setAutocomplete(
diff --git a/packages/components/src/FormField/FormFieldAffix.tsx b/packages/components/src/FormField/FormFieldAffix.tsx
index 1196f5dd78..19f29eafdb 100644
--- a/packages/components/src/FormField/FormFieldAffix.tsx
+++ b/packages/components/src/FormField/FormFieldAffix.tsx
@@ -19,6 +19,7 @@ export function AffixLabel({
   const affixLabelClass = classnames(styles.affixLabel, {
     [styles.suffix]: variation === "suffix",
   });
+  if (!label) return null;
 
   return (
     <div ref={labelRef} className={affixLabelClass}>
@@ -44,7 +45,7 @@ export function AffixIcon({
 
   const iconSize = size === "small" ? "small" : "base";
 
-  if (!icon) return <></>;
+  if (!icon) return null;
 
   return (
     <div className={affixIconClass}>
diff --git a/packages/components/src/FormField/FormFieldDescription.tsx b/packages/components/src/FormField/FormFieldDescription.tsx
index 906f8d78d5..812f18c325 100644
--- a/packages/components/src/FormField/FormFieldDescription.tsx
+++ b/packages/components/src/FormField/FormFieldDescription.tsx
@@ -4,13 +4,17 @@ import { Text } from "../Text";
 
 interface FormFieldDescriptionProps {
   readonly id: string;
-  readonly description: string;
+  readonly description?: string;
+  readonly visible?: boolean;
 }
 
 export function FormFieldDescription({
   id,
   description,
+  visible = true,
 }: FormFieldDescriptionProps) {
+  if (!visible) return null;
+
   return (
     <div id={id} className={styles.description}>
       <Text size="small" variation="subdued">
diff --git a/packages/components/src/FormField/FormFieldPostFix.tsx b/packages/components/src/FormField/FormFieldPostFix.tsx
index 190642cccf..231403ecfd 100644
--- a/packages/components/src/FormField/FormFieldPostFix.tsx
+++ b/packages/components/src/FormField/FormFieldPostFix.tsx
@@ -5,9 +5,15 @@ import { Spinner } from "../Spinner";
 
 interface FormFieldPostFixProps {
   readonly variation: "select" | "spinner";
+  readonly visible?: boolean;
 }
 
-export function FormFieldPostFix({ variation }: FormFieldPostFixProps) {
+export function FormFieldPostFix({
+  variation,
+  visible = true,
+}: FormFieldPostFixProps) {
+  if (!visible) return null;
+
   return (
     <span className={styles.postfix}>
       {variation === "select" ? (
diff --git a/packages/components/src/FormField/FormFieldTypes.ts b/packages/components/src/FormField/FormFieldTypes.ts
index bd34c3e557..6477393281 100644
--- a/packages/components/src/FormField/FormFieldTypes.ts
+++ b/packages/components/src/FormField/FormFieldTypes.ts
@@ -14,6 +14,15 @@ export type FormFieldTypes =
   | "tel"
   | "email";
 
+export type KeyBoardTypes =
+  | "text"
+  | "none"
+  | "tel"
+  | "url"
+  | "email"
+  | "numeric"
+  | "decimal";
+
 export type AutocompleteTypes =
   | "one-time-code"
   | "address-line1"
@@ -123,6 +132,14 @@ export interface CommonFormFieldProps {
    * set it to `always`.
    */
   readonly clearable?: Clearable;
+
+  /**
+   * Experimental:
+   * Determine which version of the FormField to use.
+   * Right now this isn't used but it will be used in the future
+   * to allow us to release new versions of our form inputs without breaking existing functionality
+   */
+  version?: 1;
 }
 
 export interface FormFieldProps extends CommonFormFieldProps {
diff --git a/packages/components/src/FormField/FormFieldWrapper.tsx b/packages/components/src/FormField/FormFieldWrapper.tsx
index e65a3e606c..60e9fc6d17 100644
--- a/packages/components/src/FormField/FormFieldWrapper.tsx
+++ b/packages/components/src/FormField/FormFieldWrapper.tsx
@@ -1,11 +1,4 @@
-import React, {
-  PropsWithChildren,
-  RefObject,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import classnames from "classnames";
+import React, { PropsWithChildren, ReactNode, RefObject, useRef } from "react";
 import { Clearable, useShowClear } from "@jobber/hooks/useShowClear";
 import { AnimatePresence, motion } from "framer-motion";
 import { tokens } from "@jobber/design";
@@ -16,10 +9,10 @@ import { FormFieldDescription } from "./FormFieldDescription";
 import { ClearAction } from "./components/ClearAction";
 import { useToolbar } from "./hooks/useToolbar";
 import { useFormFieldFocus } from "./hooks/useFormFieldFocus";
-import { useIsSafari } from "./hooks/useIsSafari";
+import { useFormFieldWrapperStyles } from "./hooks/useFormFieldWrapperStyles";
 import { InputValidation } from "../InputValidation";
 
-interface FormFieldWrapperProps extends FormFieldProps {
+export interface FormFieldWrapperProps extends FormFieldProps {
   readonly error: string;
   readonly identifier: string;
   readonly descriptionIdentifier: string;
@@ -27,12 +20,6 @@ interface FormFieldWrapperProps extends FormFieldProps {
   readonly onClear: () => void;
 }
 
-interface LabelPadding {
-  paddingLeft: number | string | undefined;
-  paddingRight: number | string | undefined;
-}
-
-// eslint-disable-next-line max-statements
 export function FormFieldWrapper({
   align,
   description,
@@ -57,47 +44,25 @@ export function FormFieldWrapper({
   toolbarVisibility = "while-editing",
   wrapperRef,
 }: PropsWithChildren<FormFieldWrapperProps>) {
-  const isSafari = useIsSafari();
-  const wrapperClasses = classnames(
-    styles.wrapper,
-    size && styles[size],
-    align && styles[align],
-    {
-      [styles.miniLabel]:
-        (placeholder && value !== "") ||
-        (placeholder && type === "select") ||
-        // Naively assume that if the the type is tel, it is the InputPhoneNumber
-        (placeholder && type === "tel"),
-      [styles.text]: type === "textarea" || type === "text",
-      [styles.textarea]: type === "textarea",
-      [styles.safari]: isSafari && type === "textarea",
-      [styles.select]: type === "select",
-      [styles.invalid]: invalid ?? error,
-      [styles.disabled]: disabled,
-      [styles.maxLength]: maxLength,
-      [styles.timeInputLabel]:
-        placeholder && type === "time" && placeholder && value === "",
-    },
-  );
-  const containerClasses = classnames(styles.container, {
-    [styles.inline]: inline,
-  });
-
-  const wrapperInlineStyle = {
-    ["--formField-maxLength" as string]: maxLength || max,
-  };
-
   const prefixRef = useRef() as RefObject<HTMLDivElement>;
   const suffixRef = useRef() as RefObject<HTMLDivElement>;
 
-  const [labelStyle, setLabelStyle] = useState<LabelPadding>({
-    paddingLeft: undefined,
-    paddingRight: undefined,
-  });
-
-  useEffect(() => {
-    setLabelStyle(getAffixPaddding);
-  }, [value]);
+  const { wrapperClasses, containerClasses, wrapperInlineStyle, labelStyle } =
+    useFormFieldWrapperStyles({
+      align,
+      max,
+      maxLength,
+      prefixRef,
+      suffixRef,
+      placeholder,
+      value,
+      invalid,
+      error,
+      type,
+      disabled,
+      inline,
+      size,
+    });
 
   const { focused } = useFormFieldFocus({ wrapperRef });
 
@@ -124,97 +89,123 @@ export function FormFieldWrapper({
         data-testid="Form-Field-Wrapper"
         ref={wrapperRef}
       >
-        <div className={styles.horizontalWrapper}>
-          {prefix?.icon && <AffixIcon {...prefix} size={size} />}
-          <div className={styles.inputWrapper}>
-            {placeholder && (
-              <label
-                className={styles.label}
-                htmlFor={identifier}
-                style={
-                  prefixRef?.current || suffixRef?.current
-                    ? labelStyle
-                    : undefined
-                }
-              >
-                {placeholder}
-              </label>
-            )}
-
-            {prefix?.label && <AffixLabel {...prefix} labelRef={prefixRef} />}
-
-            <div className={styles.childrenWrapper} tabIndex={-1}>
-              {children}
-            </div>
-
-            {suffix?.label && (
-              <AffixLabel {...suffix} labelRef={suffixRef} variation="suffix" />
-            )}
-          </div>
-          {showClear && <ClearAction onClick={onClear} />}
-          {suffix?.icon && (
-            <AffixIcon {...suffix} variation="suffix" size={size} />
-          )}
-        </div>
-        <AnimatePresence
-          initial={toolbarVisibility === "always" ? false : true}
-        >
-          {isToolbarVisible && (
-            <motion.div
-              key="toolbar"
-              initial={toolbarAnimationEnd}
-              animate={toolbarAnimationStart}
-              exit={toolbarAnimationEnd}
-              transition={{
-                duration: tokens["timing-base"] / 1000,
-                ease: "easeInOut",
-              }}
-              tabIndex={-1}
-            >
-              <div
-                className={styles.toolbar}
-                data-testid="ATL-InputText-Toolbar"
-              >
-                {toolbar}
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </div>
-      {description && !inline && (
-        <FormFieldDescription
-          id={descriptionIdentifier}
-          description={description}
+        <FormFieldInputHorizontalWrapper>
+          <AffixIcon {...prefix} size={size} />
+          <FormFieldInputWrapperStyles>
+            <FormFieldLabel
+              placeholder={placeholder}
+              identifier={identifier}
+              style={
+                prefixRef?.current || suffixRef?.current
+                  ? labelStyle
+                  : undefined
+              }
+            />
+            <AffixLabel {...prefix} labelRef={prefixRef} />
+
+            <FormFieldWrapperMain>{children}</FormFieldWrapperMain>
+
+            <AffixLabel {...suffix} labelRef={suffixRef} variation="suffix" />
+          </FormFieldInputWrapperStyles>
+          <ClearAction onClick={onClear} visible={showClear} />
+          <AffixIcon {...suffix} variation="suffix" size={size} />
+        </FormFieldInputHorizontalWrapper>
+        <FormFieldWrapperToolbar
+          toolbarVisibility={toolbarVisibility}
+          isToolbarVisible={isToolbarVisible}
+          toolbarAnimationEnd={toolbarAnimationEnd}
+          toolbarAnimationStart={toolbarAnimationStart}
+          toolbar={toolbar}
         />
-      )}
-      {error && !inline && <InputValidation message={error} />}
+      </div>
+      <FormFieldDescription
+        visible={!!description && !inline}
+        id={descriptionIdentifier}
+        description={description}
+      />
+      <InputValidation message={error} visible={!!error && !inline} />
     </div>
   );
+}
 
-  function getAffixPaddding() {
-    const hasValue = value !== "";
-    const newPadding: LabelPadding = {
-      paddingLeft: undefined,
-      paddingRight: undefined,
-    };
+export function FormFieldInputHorizontalWrapper({
+  children,
+}: PropsWithChildren) {
+  return <div className={styles.horizontalWrapper}>{children}</div>;
+}
 
-    // Naively assume that if the the type is tel, it is the InputPhoneNumber
-    if (type === "tel") return newPadding;
+export function FormFieldInputWrapperStyles({
+  children,
+}: {
+  readonly children: React.ReactNode;
+}) {
+  return <div className={styles.inputWrapper}>{children}</div>;
+}
 
-    if (prefixRef?.current && !hasValue) {
-      const { offsetWidth } = prefixRef.current;
-      newPadding.paddingLeft = offset(offsetWidth);
-    }
+export function FormFieldWrapperMain({
+  children,
+  tabIndex = -1,
+}: {
+  readonly children: React.ReactNode;
+  readonly tabIndex?: number;
+}) {
+  return (
+    <div className={styles.childrenWrapper} tabIndex={tabIndex}>
+      {children}
+    </div>
+  );
+}
 
-    if (suffixRef?.current && !hasValue) {
-      const { offsetWidth } = suffixRef.current;
-      newPadding.paddingRight = offset(offsetWidth);
-    }
+export function FormFieldLabel({
+  placeholder,
+  identifier,
+  style,
+}: {
+  readonly placeholder?: string;
+  readonly identifier?: string;
+  readonly style?: React.CSSProperties;
+}) {
+  if (!placeholder) return null;
 
-    function offset(width: number) {
-      return `calc(${width}px + var(--space-smallest)`;
-    }
+  return (
+    <label className={styles.label} htmlFor={identifier} style={style}>
+      {placeholder}
+    </label>
+  );
+}
 
-    return newPadding;
-  }
+export function FormFieldWrapperToolbar({
+  toolbar,
+  isToolbarVisible,
+  toolbarAnimationEnd,
+  toolbarAnimationStart,
+  toolbarVisibility,
+}: {
+  readonly toolbarVisibility: string;
+  readonly isToolbarVisible: boolean;
+  readonly toolbarAnimationEnd: { opacity: number; height: number };
+  readonly toolbarAnimationStart: { opacity: number; height: string | number };
+  readonly toolbar: ReactNode;
+}) {
+  return (
+    <AnimatePresence initial={toolbarVisibility === "always" ? false : true}>
+      {isToolbarVisible && (
+        <motion.div
+          key="toolbar"
+          initial={toolbarAnimationEnd}
+          animate={toolbarAnimationStart}
+          exit={toolbarAnimationEnd}
+          transition={{
+            duration: tokens["timing-base"] / 1000,
+            ease: "easeInOut",
+          }}
+          tabIndex={-1}
+        >
+          <div className={styles.toolbar} data-testid="ATL-InputText-Toolbar">
+            {toolbar}
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
 }
diff --git a/packages/components/src/FormField/components/ClearAction.tsx b/packages/components/src/FormField/components/ClearAction.tsx
index 1b0e9c9732..0826ab5630 100644
--- a/packages/components/src/FormField/components/ClearAction.tsx
+++ b/packages/components/src/FormField/components/ClearAction.tsx
@@ -7,9 +7,15 @@ interface ClearActionProps {
    * Click handler
    */
   readonly onClick: () => void;
+  readonly visible?: boolean;
 }
 
-export function ClearAction({ onClick }: ClearActionProps): JSX.Element {
+export function ClearAction({
+  onClick,
+  visible,
+}: ClearActionProps): React.ReactElement | null {
+  if (!visible) return null;
+
   return (
     <button
       className={styles.clearInput}
diff --git a/packages/components/src/FormField/hooks/useAtlantisFormField.ts b/packages/components/src/FormField/hooks/useAtlantisFormField.ts
new file mode 100644
index 0000000000..f3199c0ff0
--- /dev/null
+++ b/packages/components/src/FormField/hooks/useAtlantisFormField.ts
@@ -0,0 +1,129 @@
+import { ChangeEvent, FocusEvent, KeyboardEvent, useEffect } from "react";
+import { UseControllerReturn } from "react-hook-form";
+import styles from "../FormField.module.css";
+import type { FormFieldProps, KeyBoardTypes } from "../FormFieldTypes";
+
+export interface useAtlantisFormFieldProps
+  extends Pick<
+    FormFieldProps,
+    "description" | "disabled" | "readonly" | "inline" | "autofocus"
+  > {
+  /**
+   * The html id for the field
+   */
+  readonly id: string;
+  /**
+   * The name for the html input field if one if provided by consumers of the component
+   */
+  readonly nameProp?: string;
+  /**
+   * The auto-generated name for the html input field if a nameProp is not provided
+   */
+  readonly name: string;
+  /**
+   * The ref used to access the FieldActions of the field
+   */
+  // readonly actionsRef?: React.RefObject<FieldActionsRef>;
+  /**
+   * The field returned from react-hook-form's useController
+   */
+  readonly useControllerField: Omit<
+    UseControllerReturn["field"],
+    "ref" | "onChange" | "onBlur"
+  >;
+
+  /**
+   * The keyboard type for the field. This is used to provide hints to the browser about the type of keyboard to display on mobile devices
+   */
+  readonly keyboard?: KeyBoardTypes;
+  /**
+   * The error message for the field
+   */
+  readonly errorMessage: string;
+
+  /**
+   * Determines if the field has validations
+   */
+  readonly validations: boolean;
+  /**
+   * Callback for when the field value changes
+   */
+  handleChange: (
+    event: ChangeEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >,
+  ) => void;
+  /**
+   * Callback for when the field loses focus
+   */
+  handleBlur: () => void;
+  /**
+   * Callback for when the field gains focus
+   */
+  handleFocus: (
+    event: FocusEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >,
+  ) => void;
+
+  /**
+   * Callback for when keydown event is triggered on the field
+   */
+  handleKeyDown: (
+    event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => void;
+  /**
+   * Callback that exposes the error message when the field is validated
+   */
+  handleValidation: (message: string) => void;
+}
+
+/**
+ * Provides the props for the html fields rendered by the FormField component
+ */
+export function useAtlantisFormField({
+  id,
+  nameProp,
+  name,
+  useControllerField: useControllerField,
+  description,
+  disabled,
+  readonly,
+  keyboard,
+  autofocus,
+  handleChange,
+  handleBlur,
+  handleFocus,
+  inline,
+  validations,
+  handleKeyDown,
+  handleValidation,
+  errorMessage,
+}: useAtlantisFormFieldProps) {
+  const descriptionIdentifier = `descriptionUUID--${id}`;
+
+  const fieldProps = {
+    ...useControllerField,
+    id,
+    className: styles.input,
+    name: (validations || nameProp) && name,
+    disabled: disabled,
+    readOnly: readonly,
+    inputMode: keyboard,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    autoFocus: autofocus,
+    ...(description &&
+      !inline && { "aria-describedby": descriptionIdentifier }),
+  };
+
+  const textFieldProps = {
+    ...fieldProps,
+    autoFocus: autofocus,
+    onKeyDown: handleKeyDown,
+  };
+  useEffect(() => handleValidation(errorMessage), [errorMessage]);
+
+  return { textFieldProps, fieldProps, descriptionIdentifier };
+}
diff --git a/packages/components/src/FormField/hooks/useAtlantisFormFieldActions.ts b/packages/components/src/FormField/hooks/useAtlantisFormFieldActions.ts
new file mode 100644
index 0000000000..620e30b37a
--- /dev/null
+++ b/packages/components/src/FormField/hooks/useAtlantisFormFieldActions.ts
@@ -0,0 +1,106 @@
+import { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
+import { FieldValues, UseFormSetValue } from "react-hook-form";
+import { FormFieldProps, FormFieldTypes } from "../FormFieldTypes";
+
+export interface useAtlantisFormFieldActionsProps
+  extends Pick<
+    FormFieldProps,
+    | "onChange"
+    | "inputRef"
+    | "onEnter"
+    | "readonly"
+    | "onFocus"
+    | "onBlur"
+    | "onValidation"
+    | "onEnter"
+  > {
+  readonly name: string;
+  readonly onControllerChange: (...event: unknown[]) => void;
+  readonly onControllerBlur: () => void;
+  readonly type: FormFieldTypes;
+  readonly setValue: UseFormSetValue<FieldValues>;
+}
+
+/**
+ * Combines the actions from the props of the FormField with the actions from react-hook-form. This is used to
+ * manage the form state of a field through react-hook-form while providing support for additional callbacks
+ */
+export function useAtlantisFormFieldActions({
+  name,
+  onChange,
+  inputRef,
+  onControllerChange,
+  onControllerBlur,
+  onEnter,
+  readonly,
+  type,
+  setValue,
+  onFocus,
+  onBlur,
+  onValidation,
+}: useAtlantisFormFieldActionsProps) {
+  function handleClear() {
+    handleBlur();
+    setValue(name, "", { shouldValidate: true });
+    onChange && onChange("");
+    inputRef?.current?.focus();
+  }
+
+  function handleChange(
+    event: ChangeEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >,
+  ) {
+    let newValue: string | number;
+    newValue = event.currentTarget.value;
+
+    if (type === "number" && newValue.length > 0) {
+      newValue = parseFloat(newValue);
+    }
+
+    onChange && onChange(newValue, event);
+    onControllerChange(event);
+  }
+
+  function handleKeyDown(
+    event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) {
+    if (!onEnter) return;
+    if (event.key !== "Enter") return;
+    if (event.shiftKey || event.ctrlKey) return;
+    event.preventDefault();
+    onEnter && onEnter(event);
+  }
+
+  function handleFocus(
+    event: FocusEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >,
+  ) {
+    const target = event.currentTarget;
+
+    if ((target as HTMLInputElement).select) {
+      setTimeout(() => readonly && (target as HTMLInputElement).select());
+    }
+
+    onFocus && onFocus();
+  }
+
+  function handleBlur() {
+    onBlur && onBlur();
+    onControllerBlur();
+  }
+
+  function handleValidation(message: string) {
+    onValidation && onValidation(message);
+  }
+
+  return {
+    handleClear,
+    handleChange,
+    handleKeyDown,
+    handleFocus,
+    handleBlur,
+    handleValidation,
+  };
+}
diff --git a/packages/components/src/FormField/hooks/useAtlantisFormFieldName.ts b/packages/components/src/FormField/hooks/useAtlantisFormFieldName.ts
new file mode 100644
index 0000000000..8410d3d053
--- /dev/null
+++ b/packages/components/src/FormField/hooks/useAtlantisFormFieldName.ts
@@ -0,0 +1,16 @@
+export function useAtlantisFormFieldName({
+  id,
+  nameProp,
+}: {
+  id: string;
+  nameProp?: string;
+}) {
+  /**
+   * Generate a name if one is not supplied, this is the name
+   * that will be used for react-hook-form and not neccessarily
+   * attached to the DOM
+   */
+  const name = nameProp ? nameProp : `generatedName--${id}`;
+
+  return { name };
+}
diff --git a/packages/components/src/FormField/hooks/useAtlantisReactHookForm.ts b/packages/components/src/FormField/hooks/useAtlantisReactHookForm.ts
new file mode 100644
index 0000000000..a0bbb37cf3
--- /dev/null
+++ b/packages/components/src/FormField/hooks/useAtlantisReactHookForm.ts
@@ -0,0 +1,61 @@
+import { useEffect, useImperativeHandle } from "react";
+import { useController, useForm, useFormContext } from "react-hook-form";
+import { mergeRefs } from "@jobber/components/utils/mergeRefs";
+import { FormFieldProps } from "../FormFieldTypes";
+
+interface useAtlantisReactHookFormProps
+  extends Pick<
+    FormFieldProps,
+    "actionsRef" | "defaultValue" | "value" | "validations" | "inputRef"
+  > {
+  name: string;
+}
+
+/**
+ * Hook used to manage the form state of a field through react-hook-form
+ */
+export function useAtlantisReactHookForm({
+  actionsRef,
+  name,
+  defaultValue,
+  value,
+  validations,
+  inputRef,
+}: useAtlantisReactHookFormProps) {
+  const formContext = useFormContext();
+  // If there isn't a Form Context being provided, get a form for this field.
+  const { control, setValue, watch } =
+    formContext ?? useForm({ mode: "onTouched" });
+  useImperativeHandle(actionsRef, () => ({
+    setValue: newValue => {
+      setValue(name, newValue, { shouldValidate: true });
+    },
+  }));
+  const {
+    field,
+    fieldState: { error },
+  } = useController({
+    name,
+    control,
+    rules: validations,
+    defaultValue: value ?? defaultValue ?? "",
+  });
+  const { onChange, onBlur, ref: fieldRef, ...useControllerField } = field;
+
+  useEffect(() => {
+    if (value != undefined) {
+      setValue(name, value);
+    }
+  }, [value, watch(name)]);
+
+  const inputRefs = mergeRefs([inputRef, fieldRef]);
+
+  return {
+    inputRefs,
+    useControllerField,
+    setValue,
+    errorMessage: error?.message || "",
+    onControllerChange: onChange,
+    onControllerBlur: onBlur,
+  };
+}
diff --git a/packages/components/src/FormField/hooks/useFormFieldWrapperStyles.ts b/packages/components/src/FormField/hooks/useFormFieldWrapperStyles.ts
new file mode 100644
index 0000000000..598f0463b0
--- /dev/null
+++ b/packages/components/src/FormField/hooks/useFormFieldWrapperStyles.ts
@@ -0,0 +1,138 @@
+import classnames from "classnames";
+import { RefObject, useEffect, useState } from "react";
+import { useIsSafari } from "./useIsSafari";
+import styles from "../FormField.module.css";
+import { FormFieldProps } from "../FormFieldTypes";
+
+export interface useFormFieldWrapperStylesProps
+  extends Pick<
+    FormFieldProps,
+    | "size"
+    | "align"
+    | "placeholder"
+    | "value"
+    | "invalid"
+    | "max"
+    | "maxLength"
+    | "type"
+    | "disabled"
+    | "inline"
+  > {
+  readonly error: string;
+  suffixRef: RefObject<HTMLDivElement>;
+  prefixRef: RefObject<HTMLDivElement>;
+}
+
+export interface LabelPadding {
+  paddingLeft: number | string | undefined;
+  paddingRight: number | string | undefined;
+}
+
+/**
+ * Hook for getting the correct styles for the FormField and its children
+ */
+export function useFormFieldWrapperStyles({
+  size,
+  align,
+  placeholder,
+  value,
+  invalid,
+  error,
+  max,
+  prefixRef,
+  suffixRef,
+  maxLength,
+  type,
+  disabled,
+  inline,
+}: useFormFieldWrapperStylesProps) {
+  const isSafari = useIsSafari();
+  const wrapperClasses = classnames(
+    styles.wrapper,
+    size && styles[size],
+    align && styles[align],
+    {
+      [styles.miniLabel]:
+        (placeholder && value !== "") ||
+        (placeholder && type === "select") ||
+        // Naively assume that if the the type is tel, it is the InputPhoneNumber
+        (placeholder && type === "tel"),
+      [styles.text]: type === "textarea" || type === "text",
+      [styles.textarea]: type === "textarea",
+      [styles.safari]: isSafari && type === "textarea",
+      [styles.select]: type === "select",
+      [styles.invalid]: invalid ?? error,
+      [styles.disabled]: disabled,
+      [styles.maxLength]: maxLength,
+      [styles.timeInputLabel]:
+        placeholder && type === "time" && placeholder && value === "",
+    },
+  );
+  const containerClasses = classnames(styles.container, {
+    [styles.inline]: inline,
+  });
+
+  const wrapperInlineStyle = {
+    ["--formField-maxLength" as string]: maxLength || max,
+  };
+
+  const [labelStyle, setLabelStyle] = useState<LabelPadding>({
+    paddingLeft: undefined,
+    paddingRight: undefined,
+  });
+
+  useEffect(() => {
+    setLabelStyle(
+      getAffixPaddding({
+        value,
+        type,
+        prefixWidth: prefixRef.current?.offsetWidth || 0,
+        suffixWidth: suffixRef.current?.offsetWidth || 0,
+      }),
+    );
+  }, [value]);
+
+  return {
+    inputStyle: styles.input,
+    wrapperClasses,
+    containerClasses,
+    wrapperInlineStyle,
+    labelStyle,
+    setLabelStyle,
+  };
+}
+
+export interface GetAffixProps extends FormFieldProps {
+  prefixWidth: number;
+  suffixWidth: number;
+}
+
+export function getAffixPaddding({
+  value,
+  type,
+  prefixWidth,
+  suffixWidth,
+}: GetAffixProps) {
+  const hasValue = value !== "";
+  const newPadding: LabelPadding = {
+    paddingLeft: undefined,
+    paddingRight: undefined,
+  };
+
+  // Naively assume that if the the type is tel, it is the InputPhoneNumber
+  if (type === "tel") return newPadding;
+
+  if (prefixWidth && !hasValue) {
+    newPadding.paddingLeft = offset(prefixWidth);
+  }
+
+  if (suffixWidth && !hasValue) {
+    newPadding.paddingRight = offset(suffixWidth);
+  }
+
+  function offset(width: number) {
+    return `calc(${width}px + var(--space-smallest)`;
+  }
+
+  return newPadding;
+}
diff --git a/packages/components/src/FormField/index.ts b/packages/components/src/FormField/index.ts
index 24fed9f609..8cf3aa27d3 100644
--- a/packages/components/src/FormField/index.ts
+++ b/packages/components/src/FormField/index.ts
@@ -1,2 +1,11 @@
 export * from "./FormField";
 export * from "./FormFieldTypes";
+export { useAtlantisFormField } from "./hooks/useAtlantisFormField";
+export { useAtlantisFormFieldActions } from "./hooks/useAtlantisFormFieldActions";
+export { useAtlantisFormFieldName } from "./hooks/useAtlantisFormFieldName";
+export { useAtlantisReactHookForm } from "./hooks/useAtlantisReactHookForm";
+export { FormFieldWrapper } from "./FormFieldWrapper";
+export {
+  useFormFieldWrapperStyles,
+  useFormFieldWrapperStylesProps,
+} from "./hooks/useFormFieldWrapperStyles";
diff --git a/packages/components/src/InputValidation/InputValidation.test.tsx b/packages/components/src/InputValidation/InputValidation.test.tsx
index ea728d7319..1a7add188a 100644
--- a/packages/components/src/InputValidation/InputValidation.test.tsx
+++ b/packages/components/src/InputValidation/InputValidation.test.tsx
@@ -1,42 +1,17 @@
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import React from "react";
 import { InputValidation } from ".";
 
-it("renders the input validation messages", () => {
-  const { container } = render(<InputValidation message="I am an error" />);
-  expect(container).toMatchInlineSnapshot(`
-    <div>
-      <div
-        style="opacity: 0; transform: translateY(5%) translateZ(0);"
-      >
-        <div
-          aria-live="assertive"
-          class="message"
-          role="alert"
-          tabindex="0"
-        >
-          <svg
-            data-testid="alert"
-            style="fill: var(--color-icon); display: inline-block; vertical-align: middle; width: 16px; height: 16px;"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M12 7a1 1 0 0 0-1 1v5a1 1 0 1 0 2 0V8a1 1 0 0 0-1-1Zm-1 10a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z"
-              style="fill: var(--color-critical);"
-            />
-            <path
-              d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
-              style="fill: var(--color-critical);"
-            />
-          </svg>
-          <p
-            class="base regular small critical"
-          >
-            I am an error
-          </p>
-        </div>
-      </div>
-    </div>
-  `);
+describe("InputValidation", () => {
+  it("renders the input validation messages", () => {
+    render(<InputValidation message="I am an error" />);
+    expect(screen.getByText("I am an error")).toBeInTheDocument();
+    expect(screen.getByRole("alert")).toBeInTheDocument();
+  });
+
+  it("does not render the input validation messages when visible is false", () => {
+    render(<InputValidation message="I am an error" visible={false} />);
+    expect(screen.queryByText("I am an error")).not.toBeInTheDocument();
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+  });
 });
diff --git a/packages/components/src/InputValidation/InputValidation.tsx b/packages/components/src/InputValidation/InputValidation.tsx
index f4aa5ceda0..201cb89c62 100644
--- a/packages/components/src/InputValidation/InputValidation.tsx
+++ b/packages/components/src/InputValidation/InputValidation.tsx
@@ -9,15 +9,21 @@ interface InputValidationProps {
    * Validation message to be displayed
    */
   readonly message: string;
+  readonly visible?: boolean;
 }
 
-export function InputValidation({ message }: InputValidationProps) {
+export function InputValidation({
+  message,
+  visible = true,
+}: InputValidationProps) {
   const messages = [message];
   const variants = {
     slideOut: { y: "5%", opacity: 0 },
     slideIn: { y: 0, opacity: 1 },
   };
 
+  if (!visible) return null;
+
   return (
     <>
       {messages && messages.length > 0 && (
diff --git a/packages/components/src/utils/meta/meta.json b/packages/components/src/utils/meta/meta.json
index 105c2fd352..b0b6a9b0fa 100644
--- a/packages/components/src/utils/meta/meta.json
+++ b/packages/components/src/utils/meta/meta.json
@@ -57,6 +57,7 @@
     "Footer",
     "Form",
     "FormField",
+    "FormFieldWrapper",
     "FormatDate",
     "FormatEmail",
     "FormatFile",