✨(react) react-hook-form Select example

Our form elements needs to be usable with react-hook-form

packages/react/src/components/Forms/Select/mono.stories.tsx

@@ -1,9 +1,17 @@
 import { Meta, StoryFn } from "@storybook/react";
 import React, { useState } from "react";
+import { useForm, Controller, ControllerRenderProps } from "react-hook-form";
+import * as Yup from "yup";
 import { faker } from "@faker-js/faker";
+import { yupResolver } from "@hookform/resolvers/yup";
 import { Select } from ":/components/Forms/Select";
 import { Button } from ":/components/Button";
 import { CunninghamProvider } from ":/components/Provider";
+import {
+  getFieldState,
+  getFieldErrorMessage,
+  onSubmit,
+} from ":/tests/reactHookFormUtils";
 
 export default {
   title: "Components/Forms/Select/Mono",
@@ -156,6 +164,87 @@ export const SearchableControlled = () => {
   );
 };
 
+export const ReactHookForm = () => {
+  enum CitiesOptionEnum {
+    NONE = "",
+    DIJON = "dijon",
+    PARIS = "paris",
+    TOKYO = "tokyo",
+  }
+
+  interface SelectExampleFormValues {
+    joTown: CitiesOptionEnum;
+  }
+
+  const selectExampleSchema = Yup.object().shape({
+    joTown: Yup.string()
+      .required()
+      .oneOf([CitiesOptionEnum.PARIS], "That's not the right town!"),
+  });
+
+  const { handleSubmit, formState, control } = useForm<SelectExampleFormValues>(
+    {
+      defaultValues: {
+        joTown: CitiesOptionEnum.NONE,
+      },
+      mode: "onChange",
+      reValidateMode: "onChange",
+      resolver: yupResolver(selectExampleSchema),
+    },
+  );
+
+  const renderSelect = ({
+    field,
+  }: {
+    field: ControllerRenderProps<SelectExampleFormValues, "joTown">;
+  }) => {
+    return (
+      <>
+        <div>Where will the 2024 Olympics take place?</div>
+        <Select
+          label="Select a city"
+          options={[
+            {
+              label: "Dijon",
+              value: CitiesOptionEnum.DIJON,
+            },
+            {
+              label: "Paris",
+              value: CitiesOptionEnum.PARIS,
+            },
+            {
+              label: "Tokyo",
+              value: CitiesOptionEnum.TOKYO,
+            },
+          ]}
+          state={getFieldState("joTown", formState)}
+          text={getFieldErrorMessage("joTown", formState)}
+          onBlur={field.onBlur}
+          onChange={field.onChange}
+          value={field.value}
+        />
+      </>
+    );
+  };
+
+  return (
+    <CunninghamProvider>
+      <form
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+          width: "400px",
+        }}
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <Controller control={control} name="joTown" render={renderSelect} />
+        <Button fullWidth={true}>Submit</Button>
+      </form>
+    </CunninghamProvider>
+  );
+};
+
 export const FullWidth = {
   render: Template,