📝(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

.changeset/chilly-ways-dance.md

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+add RHF examples

packages/react/.eslintrc.cjs

@@ -17,6 +17,8 @@ module.exports = {
           "**/*.stories.tsx",
           "**/*.spec.tsx",
           "src/tests/*",
+          "**/stories-utils.tsx",
+          "**/reactHookFormUtils.tsx"
         ],
       },
     ],

packages/react/src/components/Forms/Checkbox/index.stories.tsx

@@ -3,13 +3,13 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { Meta, StoryFn } from "@storybook/react";
 import { useForm } from "react-hook-form";
 import * as Yup from "yup";
-import { Checkbox, CheckboxGroup } from ":/components/Forms/Checkbox/index";
-import { Button } from ":/components/Button";
 import {
   getFieldState,
   getFieldErrorMessage,
   onSubmit,
-} from ":/tests/reactHookFormUtils";
+} from ":/components/Forms/Examples/ReactHookForm/reactHookFormUtils";
+import { Checkbox, CheckboxGroup } from ":/components/Forms/Checkbox/index";
+import { Button } from ":/components/Button";
 
 export default {
   title: "Components/Forms/Checkbox",

packages/react/src/components/Forms/DatePicker/index.stories.tsx

@@ -1,9 +1,14 @@
 import { Meta, StoryFn } from "@storybook/react";
 import React, { useState } from "react";
+import * as Yup from "yup";
+import { FormProvider, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
 import { CunninghamProvider } from ":/components/Provider";
 import { Button } from ":/components/Button";
 import { DateRangePicker } from ":/components/Forms/DatePicker/DateRangePicker";
 import { DatePicker } from ":/components/Forms/DatePicker/DatePicker";
+import { onSubmit } from ":/components/Forms/Examples/ReactHookForm/reactHookFormUtils";
+import { RhfDatePicker } from ":/components/Forms/DatePicker/stories-utils";
 
 export default {
   title: "Components/Forms/DatePicker",
@@ -135,6 +140,38 @@ export const Controlled = () => {
   );
 };
 
+export const ReactHookForm = () => {
+  const methods = useForm({
+    defaultValues: {
+      date: "",
+    },
+    resolver: yupResolver(
+      Yup.object().shape({
+        date: Yup.string().required(),
+      }),
+    ),
+  });
+
+  return (
+    <CunninghamProvider>
+      <FormProvider {...methods}>
+        <form
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "1rem",
+            width: "400px",
+          }}
+          onSubmit={methods.handleSubmit(onSubmit)}
+        >
+          <RhfDatePicker name="date" label="Pick a date" fullWidth={true} />
+          <Button fullWidth={true}>Submit</Button>
+        </form>
+      </FormProvider>
+    </CunninghamProvider>
+  );
+};
+
 export const RangeDefault = () => {
   return (
     <div style={{ minHeight: "400px" }}>

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

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

packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx

@@ -10,10 +10,10 @@ import {
   getFieldState,
   getFieldErrorMessage,
   onSubmit,
-} from ":/tests/reactHookFormUtils";
+} from "./reactHookFormUtils";
 
 export default {
-  title: "Components/Forms/Reac-Hook-Form",
+  title: "Components/Forms/Examples/React-Hook-Form",
 } as Meta;
 
 interface LoginStoryFormValues {

packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx

@@ -1,218 +1,153 @@
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Meta } from "@storybook/react";
 import React from "react";
-import { useForm, Controller, ControllerRenderProps } from "react-hook-form";
+import { useForm, FormProvider } from "react-hook-form";
 import * as Yup from "yup";
 import { Input } from ":/components/Forms/Input";
 import { Button } from ":/components/Button";
-import { Select } from ":/components/Forms/Select";
 import { CunninghamProvider } from ":/components/Provider";
 import { Radio, RadioGroup } from ":/components/Forms/Radio";
+import { RhfSelect } from ":/components/Forms/Select/stories-utils";
 import {
   getFieldState,
   getFieldErrorMessage,
   onSubmit,
-} from ":/tests/reactHookFormUtils";
+} from "./reactHookFormUtils";
 
 export default {
-  title: "Components/Forms/Reac-Hook-Form",
+  title: "Components/Forms/Examples/React-Hook-Form",
 } as Meta;
 
-enum GenderEnum {
-  MALE = "male",
-  FEMALE = "female",
-  OTHER = "other",
-}
-enum CompetitionEnum {
-  ATHLETICS = "Athletics",
-  SWIMMING = "Swimming",
-  MARATHON = "Marathon",
-}
-enum RewardEnum {
-  BRONZE = "bronze",
-  SILVER = "silver",
-  GOLD = "gold",
-  FLOCON = "flocon",
-  OURSON = "ourson",
-  CHAMOIS = "chamois",
-}
-
 interface SportsStoryFormValues {
   firstName: string;
   lastName: string;
-  gender: GenderEnum;
-  competition: CompetitionEnum;
-  rewards: RewardEnum[];
+  gender: string;
+  competition: string;
+  rewards: string[];
 }
 
 const sportsSchema = Yup.object().shape({
   firstName: Yup.string().required(),
   lastName: Yup.string().required(),
-  gender: Yup.string<GenderEnum>().required(),
-  competition: Yup.string()
-    .defined()
-    .required()
-    .oneOf(Object.values(CompetitionEnum)),
-  rewards: Yup.array().of(Yup.string<RewardEnum>().defined()).defined(),
+  gender: Yup.string().required(),
+  competition: Yup.string().defined().required(),
+  rewards: Yup.array().of(Yup.string().defined()).defined(),
 });
 
 export const Sports = () => {
-  const { register, handleSubmit, formState, control } =
-    useForm<SportsStoryFormValues>({
-      defaultValues: {
-        firstName: "",
-        lastName: "",
-        rewards: [],
-      },
-      mode: "onChange",
-      reValidateMode: "onChange",
-      resolver: yupResolver(sportsSchema),
-    });
-
-  const renderCompetitionSelect = ({
-    field,
-  }: {
-    field: ControllerRenderProps<SportsStoryFormValues, "competition">;
-  }) => {
-    return (
-      <Select
-        label="Competition"
-        options={[
-          {
-            label: "Athletics",
-            value: CompetitionEnum.ATHLETICS,
-          },
-          {
-            label: "Swimming",
-            value: CompetitionEnum.SWIMMING,
-          },
-          {
-            label: "Marathon",
-            value: CompetitionEnum.MARATHON,
-          },
-        ]}
-        state={getFieldState("competition", formState)}
-        text={getFieldErrorMessage("competition", formState)}
-        onBlur={field.onBlur}
-        onChange={field.onChange}
-        value={field.value}
-      />
-    );
-  };
-
-  const renderRewardsMultiSelect = ({
-    field,
-  }: {
-    field: ControllerRenderProps<SportsStoryFormValues, "rewards">;
-  }) => {
-    return (
-      <Select
-        label="Rewards"
-        options={[
-          {
-            label: "Bronze",
-            value: RewardEnum.BRONZE,
-          },
-          {
-            label: "Silver",
-            value: RewardEnum.SILVER,
-          },
-          {
-            label: "Gold",
-            value: RewardEnum.GOLD,
-          },
-          {
-            label: "Flocon",
-            value: RewardEnum.FLOCON,
-          },
-          {
-            label: "Ourson",
-            value: RewardEnum.OURSON,
-          },
-          {
-            label: "Chamois",
-            value: RewardEnum.CHAMOIS,
-          },
-        ]}
-        state={getFieldState("rewards", formState)}
-        text={getFieldErrorMessage("rewards", formState)}
-        onBlur={field.onBlur}
-        onChange={field.onChange}
-        value={field.value}
-        multi={true}
-      />
-    );
-  };
+  const methods = useForm<SportsStoryFormValues>({
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+      rewards: [],
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+    resolver: yupResolver(sportsSchema),
+  });
 
   return (
     <CunninghamProvider>
-      <form
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "1rem",
-          width: "400px",
-        }}
-        onSubmit={handleSubmit(onSubmit)}
-      >
-        <h1
-          className="fs-h3 fw-bold clr-greyscale-900"
-          style={{ textAlign: "center" }}
+      <FormProvider {...methods}>
+        <form
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "1rem",
+            width: "400px",
+          }}
+          onSubmit={methods.handleSubmit(onSubmit)}
         >
-          Register
-        </h1>
-        <div style={{ display: "flex", gap: "1rem" }}>
-          <Input
-            label="First name"
-            state={getFieldState("firstName", formState)}
-            text={getFieldErrorMessage("firstName", formState)}
-            {...register("firstName")}
-          />
-          <Input
-            label="Last name"
-            state={getFieldState("lastName", formState)}
-            text={getFieldErrorMessage("lastName", formState)}
-            {...register("lastName")}
-          />
-        </div>
+          <h1
+            className="fs-h3 fw-bold clr-greyscale-900"
+            style={{ textAlign: "center" }}
+          >
+            Register
+          </h1>
+          <div style={{ display: "flex", gap: "1rem" }}>
+            <Input
+              label="First name"
+              state={getFieldState("firstName", methods.formState)}
+              text={getFieldErrorMessage("firstName", methods.formState)}
+              {...methods.register("firstName")}
+            />
+            <Input
+              label="Last name"
+              state={getFieldState("lastName", methods.formState)}
+              text={getFieldErrorMessage("lastName", methods.formState)}
+              {...methods.register("lastName")}
+            />
+          </div>
 
-        <RadioGroup
-          state={getFieldState("gender", formState)}
-          text={getFieldErrorMessage("gender", formState)}
-          style={{ display: "flex", flexDirection: "row", gap: "0.5rem" }}
-        >
-          <Radio
-            label="Male"
+          <RadioGroup
+            state={getFieldState("gender", methods.formState)}
+            text={getFieldErrorMessage("gender", methods.formState)}
+            style={{ display: "flex", flexDirection: "row", gap: "0.5rem" }}
+          >
+            <Radio
+              label="Male"
+              state={getFieldState("gender", methods.formState)}
+              {...methods.register("gender")}
+            />
+            <Radio
+              label="Female"
+              state={getFieldState("gender", methods.formState)}
+              {...methods.register("gender")}
+            />
+            <Radio
+              label="Other"
+              state={getFieldState("gender", methods.formState)}
+              {...methods.register("gender")}
+            />
+          </RadioGroup>
+          <RhfSelect
+            name="competition"
+            label="Competition"
+            options={[
+              {
+                label: "Athletics",
+              },
+              {
+                label: "Swimming",
+              },
+              {
+                label: "Marathon",
+              },
+            ]}
             fullWidth={true}
-            state={getFieldState("gender", formState)}
-            {...register("gender")}
           />
-          <Radio
-            label="Female"
-            state={getFieldState("gender", formState)}
-            {...register("gender")}
+          <RhfSelect
+            name="rewards"
+            label="Previous rewards"
+            multi={true}
+            options={[
+              {
+                label: "Bronze",
+              },
+              {
+                label: "Silver",
+              },
+              {
+                label: "Gold",
+              },
+              {
+                label: "Flocon",
+              },
+              {
+                label: "Ourson",
+              },
+              {
+                label: "Chamois",
+              },
+            ]}
+            fullWidth={true}
           />
-          <Radio
-            label="Other"
-            state={getFieldState("gender", formState)}
-            {...register("gender")}
-          />
-        </RadioGroup>
-        <Controller
-          control={control}
-          name="competition"
-          render={renderCompetitionSelect}
-        />
-        <Controller
-          control={control}
-          name="rewards"
-          render={renderRewardsMultiSelect}
-        />
-        <Button fullWidth={true}>Apply</Button>
-        <Button fullWidth={true} color="secondary">
-          Need help ?
-        </Button>
-      </form>
+          <Button fullWidth={true}>Apply</Button>
+          <Button fullWidth={true} color="secondary">
+            Need help ?
+          </Button>
+        </form>
+      </FormProvider>
     </CunninghamProvider>
   );
 };

packages/react/src/components/Forms/Input/index.stories.tsx

@@ -3,13 +3,13 @@ import { Meta } from "@storybook/react";
 import { useForm } from "react-hook-form";
 import * as Yup from "yup";
 import React, { useRef } from "react";
-import { Input } from ":/components/Forms/Input/index";
-import { Button } from ":/components/Button";
 import {
   getFieldState,
   getFieldErrorMessage,
   onSubmit,
-} from ":/tests/reactHookFormUtils";
+} from ":/components/Forms/Examples/ReactHookForm/reactHookFormUtils";
+import { Input } from ":/components/Forms/Input/index";
+import { Button } from ":/components/Button";
 
 export default {
   title: "Components/Forms/Input",
@@ -175,47 +175,6 @@ export const WithRef = () => {
   );
 };
 
-export const ReactHookForm = () => {
-  interface InputExampleFormValues {
-    email: string;
-  }
-
-  const inputExampleSchema = Yup.object().shape({
-    email: Yup.string().email().required(),
-  });
-  const { register, handleSubmit, formState } = useForm<InputExampleFormValues>(
-    {
-      defaultValues: {
-        email: "",
-      },
-      mode: "onChange",
-      reValidateMode: "onChange",
-      resolver: yupResolver(inputExampleSchema),
-    },
-  );
-
-  return (
-    <form
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "1rem",
-        width: "400px",
-      }}
-      onSubmit={handleSubmit(onSubmit)}
-    >
-      <Input
-        label="Email address"
-        fullWidth={true}
-        state={getFieldState("email", formState)}
-        text={getFieldErrorMessage("email", formState)}
-        {...register("email")}
-      />
-      <Button fullWidth={true}>Log-in</Button>
-    </form>
-  );
-};
-
 export const FormExample = () => {
   return (
     <div>
@@ -268,3 +227,44 @@ export const FormExample = () => {
     </div>
   );
 };
+
+export const ReactHookForm = () => {
+  interface InputExampleFormValues {
+    email: string;
+  }
+
+  const inputExampleSchema = Yup.object().shape({
+    email: Yup.string().email().required(),
+  });
+  const { register, handleSubmit, formState } = useForm<InputExampleFormValues>(
+    {
+      defaultValues: {
+        email: "",
+      },
+      mode: "onChange",
+      reValidateMode: "onChange",
+      resolver: yupResolver(inputExampleSchema),
+    },
+  );
+
+  return (
+    <form
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "1rem",
+        width: "400px",
+      }}
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <Input
+        label="Email address"
+        fullWidth={true}
+        state={getFieldState("email", formState)}
+        text={getFieldErrorMessage("email", formState)}
+        {...register("email")}
+      />
+      <Button fullWidth={true}>Log-in</Button>
+    </form>
+  );
+};

packages/react/src/components/Forms/Radio/index.stories.tsx

@@ -3,13 +3,13 @@ import { useForm } from "react-hook-form";
 import * as Yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Meta, StoryFn } from "@storybook/react";
-import { Radio, RadioGroup } from ":/components/Forms/Radio/index";
-import { Button } from ":/components/Button";
 import {
   getFieldState,
   getFieldErrorMessage,
   onSubmit,
-} from ":/tests/reactHookFormUtils";
+} from ":/components/Forms/Examples/ReactHookForm/reactHookFormUtils";
+import { Radio, RadioGroup } from ":/components/Forms/Radio/index";
+import { Button } from ":/components/Button";
 
 export default {
   title: "Components/Forms/Radio",

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}
+          />
+        );
+      }}
+    />
+  );
+};

packages/react/src/components/Forms/Switch/index.stories.tsx

@@ -3,13 +3,13 @@ import { Meta } from "@storybook/react";
 import { useForm } from "react-hook-form";
 import * as Yup from "yup";
 import React from "react";
-import { Switch } from ":/components/Forms/Switch/index";
-import { Button } from ":/components/Button";
 import {
   getFieldState,
   getFieldErrorMessage,
   onSubmit,
-} from ":/tests/reactHookFormUtils";
+} from ":/components/Forms/Examples/ReactHookForm/reactHookFormUtils";
+import { Switch } from ":/components/Forms/Switch/index";
+import { Button } from ":/components/Button";
 
 export default {
   title: "Components/Forms/Switch",
@@ -130,49 +130,6 @@ export const Controlled = {
   },
 };
 
-export const ReactHookForm = () => {
-  interface SwitchExampleFormValues {
-    terms: boolean;
-  }
-
-  const switchExampleSchema = Yup.object().shape({
-    terms: Yup.boolean()
-      .required()
-      .oneOf([true], "You have to accept the terms of use"),
-  });
-
-  const { register, handleSubmit, formState } =
-    useForm<SwitchExampleFormValues>({
-      defaultValues: {
-        terms: false,
-      },
-      mode: "onChange",
-      reValidateMode: "onChange",
-      resolver: yupResolver(switchExampleSchema),
-    });
-
-  return (
-    <form
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "1rem",
-        width: "400px",
-      }}
-      onSubmit={handleSubmit(onSubmit)}
-    >
-      <Switch
-        label="I accept the terms of use"
-        fullWidth
-        state={getFieldState("terms", formState)}
-        text={getFieldErrorMessage("terms", formState)}
-        {...register("terms")}
-      />
-      <Button fullWidth={true}>Log-in</Button>
-    </form>
-  );
-};
-
 export const FormExample = {
   render: () => {
     return (
@@ -240,3 +197,46 @@ export const FormExampleRight = {
     );
   },
 };
+
+export const ReactHookForm = () => {
+  interface SwitchExampleFormValues {
+    terms: boolean;
+  }
+
+  const switchExampleSchema = Yup.object().shape({
+    terms: Yup.boolean()
+      .required()
+      .oneOf([true], "You have to accept the terms of use"),
+  });
+
+  const { register, handleSubmit, formState } =
+    useForm<SwitchExampleFormValues>({
+      defaultValues: {
+        terms: false,
+      },
+      mode: "onChange",
+      reValidateMode: "onChange",
+      resolver: yupResolver(switchExampleSchema),
+    });
+
+  return (
+    <form
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "1rem",
+        width: "400px",
+      }}
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <Switch
+        label="I accept the terms of use"
+        fullWidth
+        state={getFieldState("terms", formState)}
+        text={getFieldErrorMessage("terms", formState)}
+        {...register("terms")}
+      />
+      <Button fullWidth={true}>Log-in</Button>
+    </form>
+  );
+};