refactor(components): rewrite SearchForm component

* remove searchPage prop (the consumer should handle the submit)
* change onSubmit type
* use `useForm` hook to handle the form

4 files changed, 133 insertions, 117 deletions

diff --git a/src/components/organisms/forms/search-form/search-form.module.scss b/src/components/organisms/forms/search-form/search-form.module.scss
index 1315fde..db247a2 100644
--- a/src/components/organisms/forms/search-form/search-form.module.scss
+++ b/src/components/organisms/forms/search-form/search-form.module.scss
@@ -1,57 +1,60 @@
 @use "../../../../styles/abstracts/functions" as fun;
-@use "../../../../styles/abstracts/mixins" as mix;
 
-.wrapper {
-  display: flex;
-  align-items: center;
-  position: relative;
+.input {
+  border-right: none;
+}
 
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      max-width: 35ch;
-    }
-  }
+.icon {
+  transform: scale(0.85);
+  transition: all 0.3s ease-in-out 0s;
 }
 
 .btn {
-  align-self: stretch;
   background: var(--color-bg-tertiary);
   border: fun.convert-px(2) solid var(--color-border);
-  border-left: none;
   box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow);
   transition: all 0.25s linear 0s;
 
-  &__icon {
-    transform: scale(0.85);
-    transition: all 0.3s ease-in-out 0s;
+  &:hover,
+  &:focus {
+    .icon {
+      transform: scale(0.85) rotate(20deg) translateX(#{fun.convert-px(2)})
+        translateY(#{fun.convert-px(3)});
+    }
   }
 
   &:focus {
-    outline: var(--color-primary-light) solid fun.convert-px(3);
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0
+      var(--color-primary-dark);
   }
 
   &:active {
-    outline: none;
+    .icon {
+      transform: scale(0.7);
+    }
   }
+}
+
+.wrapper {
+  display: flex;
 
-  &:hover &,
-  &:focus & {
-    &__icon {
-      transform: scale(0.85) rotate(20deg) translateY(#{fun.convert-px(3)});
+  &--no-label {
+    .btn {
+      align-self: stretch;
     }
   }
 
-  &:active & {
-    &__icon {
-      transform: scale(0.7);
+  &--has-label {
+    .btn {
+      align-self: flex-end;
+      height: fun.convert-px(52);
     }
   }
 }
 
 .field {
-  min-width: 0;
-  width: 100%;
-
   &:focus-within ~ .btn {
     background: var(--color-bg);
     border-color: var(--color-primary);
@@ -66,5 +69,10 @@
     box-shadow: fun.convert-px(5) fun.convert-px(5) 0 fun.convert-px(1)
       var(--color-shadow);
     transform: translate(fun.convert-px(-3), fun.convert-px(-3));
+
+    &:focus {
+      box-shadow: fun.convert-px(5) fun.convert-px(5) 0 fun.convert-px(1)
+        var(--color-primary-dark);
+    }
   }
 }
diff --git a/src/components/organisms/forms/search-form/search-form.stories.tsx b/src/components/organisms/forms/search-form/search-form.stories.tsx
index 971a8ee..d8e4339 100644
--- a/src/components/organisms/forms/search-form/search-form.stories.tsx
+++ b/src/components/organisms/forms/search-form/search-form.stories.tsx
@@ -5,26 +5,9 @@ import { SearchForm } from './search-form';
  * SearchForm - Storybook Meta
  */
 export default {
-  title: 'Organisms/Forms',
+  title: 'Organisms/Forms/Search',
   component: SearchForm,
-  args: {
-    isLabelHidden: false,
-    searchPage: '#',
-  },
   argTypes: {
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the form wrapper.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
     isLabelHidden: {
       control: {
         type: 'boolean',
@@ -39,16 +22,6 @@ export default {
         required: false,
       },
     },
-    searchPage: {
-      control: {
-        type: 'text',
-      },
-      description: 'The search results page url.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
   },
 } as ComponentMeta<typeof SearchForm>;
 
@@ -57,9 +30,17 @@ const Template: ComponentStory<typeof SearchForm> = (args) => (
 );
 
 /**
- * Forms Stories - Search
+ * SearchForm Stories - Default
+ */
+export const Default = Template.bind({});
+Default.args = {
+  isLabelHidden: false,
+};
+
+/**
+ * SearchForm Stories - With hidden label
  */
-export const Search = Template.bind({});
-Search.args = {
+export const WithHiddenLabel = Template.bind({});
+WithHiddenLabel.args = {
   isLabelHidden: true,
 };
diff --git a/src/components/organisms/forms/search-form/search-form.test.tsx b/src/components/organisms/forms/search-form/search-form.test.tsx
index 908a8eb..56ba0d7 100644
--- a/src/components/organisms/forms/search-form/search-form.test.tsx
+++ b/src/components/organisms/forms/search-form/search-form.test.tsx
@@ -1,19 +1,39 @@
 import { describe, expect, it } from '@jest/globals';
+import { userEvent } from '@testing-library/user-event';
 import { render, screen as rtlScreen } from '../../../../../tests/utils';
 import { SearchForm } from './search-form';
 
 describe('SearchForm', () => {
-  it('renders a search input', () => {
-    render(<SearchForm searchPage="#" />);
+  it('renders a search input with a submit button', () => {
+    render(<SearchForm />);
+
     expect(
       rtlScreen.getByRole('searchbox', { name: 'Search for:' })
     ).toBeInTheDocument();
-  });
-
-  it('renders a submit button', () => {
-    render(<SearchForm searchPage="#" />);
     expect(
       rtlScreen.getByRole('button', { name: 'Search' })
     ).toBeInTheDocument();
   });
+
+  it('can submit the form', async () => {
+    const onSubmit = jest.fn((_search: { query?: string }) => undefined);
+    const user = userEvent.setup();
+    const query = 'autem voluptatum eos';
+
+    render(<SearchForm onSubmit={onSubmit} />);
+
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    expect.assertions(3);
+
+    expect(onSubmit).not.toHaveBeenCalled();
+
+    await user.type(
+      rtlScreen.getByRole('searchbox', { name: 'Search for:' }),
+      query
+    );
+    await user.click(rtlScreen.getByRole('button', { name: 'Search' }));
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit).toHaveBeenCalledWith({ query });
+  });
 });
diff --git a/src/components/organisms/forms/search-form/search-form.tsx b/src/components/organisms/forms/search-form/search-form.tsx
index 5c685c0..3f16ad0 100644
--- a/src/components/organisms/forms/search-form/search-form.tsx
+++ b/src/components/organisms/forms/search-form/search-form.tsx
@@ -1,20 +1,22 @@
-import { useRouter } from 'next/router';
-import {
-  type ChangeEvent,
-  type FormEvent,
-  forwardRef,
-  type ForwardRefRenderFunction,
-  useId,
-  useState,
-  useCallback,
-} from 'react';
+import { forwardRef, type ForwardRefRenderFunction, useId } from 'react';
 import { useIntl } from 'react-intl';
-import { Button, Form, Icon, Input, Label } from '../../../atoms';
+import { type FormSubmitHandler, useForm } from '../../../../utils/hooks';
+import {
+  Button,
+  Form,
+  type FormProps,
+  Icon,
+  Input,
+  Label,
+} from '../../../atoms';
 import { LabelledField } from '../../../molecules';
 import styles from './search-form.module.scss';
 
-export type SearchFormProps = {
-  className?: string;
+export type SearchFormData = { query: string };
+
+export type SearchFormSubmit = FormSubmitHandler<SearchFormData>;
+
+export type SearchFormProps = Omit<FormProps, 'children' | 'onSubmit'> & {
   /**
    * Should the label be visually hidden?
    *
@@ -22,75 +24,80 @@ export type SearchFormProps = {
    */
   isLabelHidden?: boolean;
   /**
-   * The search page url.
+   * A callback function to handle search form submit.
    */
-  searchPage: string;
+  onSubmit?: SearchFormSubmit;
 };
 
 const SearchFormWithRef: ForwardRefRenderFunction<
   HTMLInputElement,
   SearchFormProps
-> = ({ className = '', isLabelHidden = false, searchPage }, ref) => {
+> = ({ className = '', isLabelHidden = false, onSubmit, ...props }, ref) => {
   const intl = useIntl();
-  const fieldLabel = intl.formatMessage({
-    defaultMessage: 'Search for:',
-    description: 'SearchForm: field accessible label',
-    id: 'X8oujO',
-  });
-  const buttonLabel = intl.formatMessage({
-    defaultMessage: 'Search',
-    description: 'SearchForm: button accessible name',
-    id: 'WMqQrv',
+  const { values, submit, submitStatus, update } = useForm<SearchFormData>({
+    initialValues: { query: '' },
+    submitHandler: onSubmit,
   });
-
-  const router = useRouter();
-  const [value, setValue] = useState<string>('');
-
-  const submitHandler = useCallback(
-    (e: FormEvent) => {
-      e.preventDefault();
-      router.push({ pathname: searchPage, query: { s: value } });
-      setValue('');
-    },
-    [router, searchPage, value]
-  );
-
-  const updateForm = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    setValue(e.target.value);
-  }, []);
-
   const id = useId();
-  const formClass = `${styles.wrapper} ${className}`;
+  const formClass = [
+    styles.wrapper,
+    styles[isLabelHidden ? 'wrapper--no-label' : 'wrapper--has-label'],
+    className,
+  ].join(' ');
+  const labels = {
+    button: intl.formatMessage({
+      defaultMessage: 'Search',
+      description: 'SearchForm: button accessible name',
+      id: 'WMqQrv',
+    }),
+    field: intl.formatMessage({
+      defaultMessage: 'Search for:',
+      description: 'SearchForm: field accessible label',
+      id: 'X8oujO',
+    }),
+  };
 
   return (
-    <Form className={formClass} onSubmit={submitHandler}>
+    <Form {...props} className={formClass} onSubmit={submit}>
       <LabelledField
         className={styles.field}
         field={
           <Input
-            className={styles.field}
-            id={`search-form-${id}`}
-            name="search-form"
-            onChange={updateForm}
+            className={styles.input}
+            id={id}
+            // eslint-disable-next-line react/jsx-no-literals
+            name="query"
+            onChange={update}
             ref={ref}
+            // eslint-disable-next-line react/jsx-no-literals
             type="search"
-            value={value}
+            value={values.query}
           />
         }
         label={
-          <Label htmlFor={`search-form-${id}`} isHidden={isLabelHidden}>
-            {fieldLabel}
+          <Label htmlFor={id} isHidden={isLabelHidden}>
+            {labels.field}
           </Label>
         }
       />
       <Button
-        aria-label={buttonLabel}
+        aria-label={labels.button}
         className={styles.btn}
+        isLoading={submitStatus === 'PENDING'}
+        // eslint-disable-next-line react/jsx-no-literals
         kind="neutral"
+        // eslint-disable-next-line react/jsx-no-literals
         shape="initial"
         type="submit"
       >
-        <Icon className={styles.btn__icon} shape="magnifying-glass" />
+        <Icon
+          aria-hidden
+          className={styles.icon}
+          // eslint-disable-next-line react/jsx-no-literals
+          shape="magnifying-glass"
+          // eslint-disable-next-line react/jsx-no-literals
+          size="lg"
+        />
       </Button>
     </Form>
   );