📝(react) add RHF examples

Rework a bit the recent work made on RHF example to make some component
more generic, such as RhfSelect and RhfDatepicker, which is based on a
design using RHF context hooks to provide a seamless integration.

Fixes #144

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

@@ -1,17 +1,14 @@
 import { Meta, StoryFn } from "@storybook/react";
 import React, { useState } from "react";
-import { useForm, Controller, ControllerRenderProps } from "react-hook-form";
+import { useForm, FormProvider } from "react-hook-form";
 import * as Yup from "yup";
 import { faker } from "@faker-js/faker";
 import { yupResolver } from "@hookform/resolvers/yup";
+import { onSubmit } from ":/components/Forms/Examples/ReactHookForm/reactHookFormUtils";
 import { Select } from ":/components/Forms/Select";
 import { Button } from ":/components/Button";
 import { CunninghamProvider } from ":/components/Provider";
-import {
-  getFieldState,
-  getFieldErrorMessage,
-  onSubmit,
-} from ":/tests/reactHookFormUtils";
+import { RhfSelect } from ":/components/Forms/Select/stories-utils";
 
 export default {
   title: "Components/Forms/Select/Mono",
@@ -164,87 +161,6 @@ 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,
 
@@ -405,3 +321,69 @@ export const FormExample = () => {
     </CunninghamProvider>
   );
 };
+
+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 methods = useForm<SelectExampleFormValues>({
+    defaultValues: {
+      joTown: CitiesOptionEnum.NONE,
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+    resolver: yupResolver(selectExampleSchema),
+  });
+
+  return (
+    <CunninghamProvider>
+      <FormProvider {...methods}>
+        <form
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "1rem",
+            width: "400px",
+          }}
+          onSubmit={methods.handleSubmit(onSubmit)}
+        >
+          <div>Where will the 2024 Olympics take place?</div>
+          <RhfSelect
+            name="joTown"
+            label="Select a city"
+            fullWidth={true}
+            options={[
+              {
+                label: "Dijon",
+                value: CitiesOptionEnum.DIJON,
+              },
+              {
+                label: "Paris",
+                value: CitiesOptionEnum.PARIS,
+              },
+              {
+                label: "Tokyo",
+                value: CitiesOptionEnum.TOKYO,
+              },
+            ]}
+          />
+          <Button fullWidth={true}>Submit</Button>
+        </form>
+      </FormProvider>
+    </CunninghamProvider>
+  );
+};

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

@@ -1,17 +1,14 @@
 import React, { useState } from "react";
-import { useForm, Controller, ControllerRenderProps } from "react-hook-form";
+import { useForm, FormProvider } from "react-hook-form";
 import * as Yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Meta, StoryFn } from "@storybook/react";
 import { faker } from "@faker-js/faker";
+import { onSubmit } from ":/components/Forms/Examples/ReactHookForm/reactHookFormUtils";
 import { Select } from ":/components/Forms/Select";
 import { CunninghamProvider } from ":/components/Provider";
 import { Button } from ":/components/Button";
-import {
-  getFieldState,
-  getFieldErrorMessage,
-  onSubmit,
-} from ":/tests/reactHookFormUtils";
+import { RhfSelect } from ":/components/Forms/Select/stories-utils";
 
 export default {
   title: "Components/Forms/Select/Multi",
@@ -216,103 +213,6 @@ export const Error = {
   },
 };
 
-export const ReactHookForm = () => {
-  enum CitiesOptionEnum {
-    NONE = "",
-    DIJON = "dijon",
-    PARIS = "paris",
-    TOKYO = "tokyo",
-    VANNES = "vannes",
-  }
-
-  interface SelectExampleFormValues {
-    capitalCity: CitiesOptionEnum[];
-  }
-
-  const selectExampleSchema = Yup.object().shape({
-    capitalCity: Yup.array()
-      .required()
-      .test({
-        test: (cityList) =>
-          cityList.every((city) =>
-            [CitiesOptionEnum.PARIS, CitiesOptionEnum.TOKYO].includes(city),
-          ),
-        message: "Wrong answer!",
-      }),
-  });
-
-  const { handleSubmit, formState, control } = useForm<SelectExampleFormValues>(
-    {
-      defaultValues: {
-        capitalCity: [],
-      },
-      mode: "onChange",
-      reValidateMode: "onChange",
-      resolver: yupResolver(selectExampleSchema),
-    },
-  );
-
-  const renderSelect = ({
-    field,
-  }: {
-    field: ControllerRenderProps<SelectExampleFormValues, "capitalCity">;
-  }) => {
-    return (
-      <>
-        <div>Which are the capital of the country ?</div>
-        <Select
-          label="Select a city"
-          multi={true}
-          options={[
-            {
-              label: "Dijon",
-              value: CitiesOptionEnum.DIJON,
-            },
-            {
-              label: "Paris",
-              value: CitiesOptionEnum.PARIS,
-            },
-            {
-              label: "Tokyo",
-              value: CitiesOptionEnum.TOKYO,
-            },
-            {
-              label: "Vannes",
-              value: CitiesOptionEnum.VANNES,
-            },
-          ]}
-          state={getFieldState("capitalCity", formState)}
-          text={getFieldErrorMessage("capitalCity", 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="capitalCity"
-          render={renderSelect}
-        />
-        <Button fullWidth={true}>Submit</Button>
-      </form>
-    </CunninghamProvider>
-  );
-};
-
 export const FormExample = () => {
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -409,3 +309,81 @@ export const FormExample = () => {
     </CunninghamProvider>
   );
 };
+
+export const ReactHookForm = () => {
+  enum CitiesOptionEnum {
+    NONE = "",
+    DIJON = "dijon",
+    PARIS = "paris",
+    TOKYO = "tokyo",
+    VANNES = "vannes",
+  }
+
+  interface SelectExampleFormValues {
+    capitalCity: CitiesOptionEnum[];
+  }
+
+  const selectExampleSchema = Yup.object().shape({
+    capitalCity: Yup.array()
+      .required()
+      .test({
+        test: (cityList) =>
+          cityList.every((city) =>
+            [CitiesOptionEnum.PARIS, CitiesOptionEnum.TOKYO].includes(city),
+          ),
+        message: "Wrong answer!",
+      }),
+  });
+
+  const methods = useForm<SelectExampleFormValues>({
+    defaultValues: {
+      capitalCity: [],
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+    resolver: yupResolver(selectExampleSchema),
+  });
+
+  return (
+    <CunninghamProvider>
+      <FormProvider {...methods}>
+        <form
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "1rem",
+            width: "400px",
+          }}
+          onSubmit={methods.handleSubmit(onSubmit)}
+        >
+          <div>Which cities are capital of countries ?</div>
+          <RhfSelect
+            name="capitalCity"
+            label="Select a city"
+            multi={true}
+            fullWidth={true}
+            options={[
+              {
+                label: "Dijon",
+                value: CitiesOptionEnum.DIJON,
+              },
+              {
+                label: "Paris",
+                value: CitiesOptionEnum.PARIS,
+              },
+              {
+                label: "Tokyo",
+                value: CitiesOptionEnum.TOKYO,
+              },
+              {
+                label: "Vannes",
+                value: CitiesOptionEnum.VANNES,
+              },
+            ]}
+          />
+          <Button fullWidth={true}>Submit</Button>
+        </form>
+      </FormProvider>
+    </CunninghamProvider>
+  );
+};

packages/react/src/components/Forms/Select/stories-utils.tsx

@@ -0,0 +1,26 @@
+import { Controller, useFormContext } from "react-hook-form";
+import React from "react";
+import { Select } from ":/components/Forms/Select/index";
+import { SelectProps } from ":/components/Forms/Select/mono";
+
+export const RhfSelect = (props: SelectProps & { name: string }) => {
+  const { control } = useFormContext();
+  return (
+    <Controller
+      control={control}
+      name={props.name}
+      render={({ field, fieldState }) => {
+        return (
+          <Select
+            {...props}
+            state={fieldState.error ? "error" : "default"}
+            text={fieldState.error?.message}
+            onBlur={field.onBlur}
+            onChange={field.onChange}
+            value={field.value}
+          />
+        );
+      }}
+    />
+  );
+};