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