From b0d89dbd0b5164cd8a8636f78494b4a2eae6450e Mon Sep 17 00:00:00 2001
From: Anurag Hazra <hazru.anurag@gmail.com>
Date: Fri, 11 Sep 2020 18:43:19 +0530
Subject: [PATCH] chore: added react-hook-form examples (#35)

* chore: added react hook form examples

* chore: review updates
---
 package.json                                  |  1 +
 .../stories/NumberInput.stories.tsx           | 37 +++++++++
 src/slider/stories/Slider.stories.tsx         | 75 ++++++++++++++-----
 3 files changed, 96 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index 1a4f6cde0..07f7f8ab7 100644
--- a/package.json
+++ b/package.json
@@ -83,6 +83,7 @@
     "prettier": "2.1.1",
     "react": "16.13.1",
     "react-dom": "16.13.1",
+    "react-hook-form": "^6.8.1",
     "react-spring": "8.0.27",
     "react-test-renderer": "16.13.1",
     "react-transition-group": "4.4.1",
diff --git a/src/number-input/stories/NumberInput.stories.tsx b/src/number-input/stories/NumberInput.stories.tsx
index 2d329a059..ae1318ae3 100644
--- a/src/number-input/stories/NumberInput.stories.tsx
+++ b/src/number-input/stories/NumberInput.stories.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Meta } from "@storybook/react";
+import { useForm, Controller } from "react-hook-form";
 
 import { UseNumberInputProps, useNumberInputState } from "../NumberInputState";
 import { NumberInput } from "../NumberInput";
@@ -30,6 +31,42 @@ export const Default = () => {
   return <NumberInputComp {...props} />;
 };
 
+const NumberComponent: React.FC<any> = ({ onChange, value, name }) => {
+  const state = useNumberInputState({
+    onChange,
+    value,
+  });
+  return (
+    <>
+      <NumberInputDecrementButton {...state}>-</NumberInputDecrementButton>
+      <NumberInput name={name} {...state} />
+      <NumberInputIncrementButton {...state}>+</NumberInputIncrementButton>
+    </>
+  );
+};
+
+export const ReactHookForm = () => {
+  const { control, handleSubmit } = useForm<{
+    num: number;
+  }>({ defaultValues: { num: 20 } });
+
+  return (
+    <form
+      onSubmit={handleSubmit(values => {
+        alert(JSON.stringify(values));
+      })}
+    >
+      <div>
+        <Controller
+          name="num"
+          control={control}
+          render={NumberComponent as any}
+        />
+      </div>
+    </form>
+  );
+};
+
 export const DefaultValue = () => {
   const props = {
     defaultValue: 15,
diff --git a/src/slider/stories/Slider.stories.tsx b/src/slider/stories/Slider.stories.tsx
index a7c931986..627337f54 100644
--- a/src/slider/stories/Slider.stories.tsx
+++ b/src/slider/stories/Slider.stories.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Meta } from "@storybook/react";
+import { useForm, Controller } from "react-hook-form";
 
 import {
   Slider,
@@ -19,34 +20,74 @@ import {
   sliderVerticalThumbStyle,
   sliderVerticalTrackStyle,
 } from "./styles";
+import { Button } from "../../button";
 
 export default {
   title: "Component/Slider",
 } as Meta;
 
-export const Default = () => {
-  const slider = useSliderState();
+const SliderComp: React.FC<any> = props => {
+  const slider = useSliderState(props);
 
   return (
-    <Slider {...slider} style={sliderHorizontalStyle}>
-      <SliderTrack {...slider} style={sliderHorizontalTrackStyle}>
-        <SliderFilledTrack
+    <>
+      <label htmlFor="slider">{slider.state.value}</label>
+
+      <Slider {...slider} style={sliderHorizontalStyle}>
+        <SliderTrack {...slider} style={sliderHorizontalTrackStyle}>
+          <SliderFilledTrack
+            {...slider}
+            style={sliderHorizontalFilledTractStyle}
+          />
+        </SliderTrack>
+        <SliderThumb
           {...slider}
-          style={sliderHorizontalFilledTractStyle}
+          aria-label="slider-thumb"
+          style={{
+            ...sliderHorizontalThumbStyle,
+            transform: slider.state.isDragging
+              ? "translateY(-50%) scale(1.15)"
+              : sliderHorizontalThumbStyle.transform,
+          }}
         />
-      </SliderTrack>
-      <SliderThumb
-        {...slider}
-        aria-label="slider-thumb"
-        style={{
-          ...sliderHorizontalThumbStyle,
-          transform: slider.state.isDragging
-            ? "translateY(-50%) scale(1.15)"
-            : sliderHorizontalThumbStyle.transform,
+
+        <SliderInput name={name} {...slider} />
+      </Slider>
+    </>
+  );
+};
+
+export const Default = () => {
+  return <SliderComp />;
+};
+
+export const ReactHookForm = () => {
+  const { handleSubmit, control, errors } = useForm<{
+    slider: number;
+  }>({
+    mode: "onChange",
+    defaultValues: { slider: 10 },
+  });
+
+  return (
+    <form
+      onSubmit={handleSubmit(values => {
+        alert(JSON.stringify(values));
+      })}
+    >
+      <Controller
+        name="slider"
+        control={control}
+        rules={{
+          required: true,
+          max: { value: 70, message: "Overflow" },
+          min: { value: 30, message: "Underflow" },
         }}
+        render={SliderComp as any}
       />
-      <SliderInput {...slider} name="slider" />
-    </Slider>
+      <span>{errors.slider?.message}</span>
+      <Button type="submit">Submit</Button>
+    </form>
   );
 };