Feature/NS-27-add-react-hook-form-with-example (#67)

* feat: add react-hook-form with example

* docs: update readme

README.md

@@ -6,6 +6,8 @@
 - 🎨 TailwindCSS - Class sorting, merging and linting
 - 🛠️ Shadcn/ui - Customizable UI components
 - 🔒 Next-auth - Easy authentication library for Next.js (GitHub provider)
+- 📋 React-hook-form - Manage your forms easy and efficient 
+- 🔍 Zod - Schema validation library
 - 🧪 Jest & React Testing Library - Configured for unit testing
 - 🎭 Playwright - Configured for e2e testing
 - 📈 Absolute Import & Path Alias - Import components using `@/` prefix
@@ -17,7 +19,7 @@
 - 🗺️ Sitemap & robots.txt - With next-sitemap
 - 📝 Commitlint - Lint your git commits
 - 🤖 Github actions - Lint your code on PR
-- ⚙️ T3-env - Menage your environment variables
+- ⚙️ T3-env - Manage your environment variables
 - 💯 Perfect Lighthouse score
 
 ## 🚀 Deployment

package.json

@@ -31,8 +31,11 @@
     ]
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toast": "^1.1.5",
     "@t3-oss/env-nextjs": "^0.8.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
@@ -42,6 +45,7 @@
     "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.50.0",
     "tailwind-merge": "^2.2.1",
     "zod": "^3.22.4"
   },

src/actions/hello-action.ts

@@ -0,0 +1,5 @@
+'use server';
+
+export const helloAction = async (name: string) => {
+  return { message: `Hello ${name}, from server!` };
+};

src/app/layout.tsx

@@ -6,6 +6,7 @@ import type { Metadata } from 'next';
 import { Footer } from '@/components/footer';
 import { Navbar } from '@/components/navbar/navbar';
 import { ThemeProvider } from '@/components/theme-provider';
+import { Toaster } from '@/components/ui/toaster';
 import { siteConfig } from '@/lib/constant';
 import { fonts } from '@/lib/fonts';
 import { cn } from '@/lib/utils';
@@ -52,6 +53,7 @@ const RootLayout = ({ children }: PropsWithChildren) => {
           <Navbar />
           {children}
           <Footer />
+          <Toaster />
         </ThemeProvider>
       </body>
     </html>

src/app/page.tsx

@@ -1,3 +1,4 @@
+import { HeroForm } from '@/components/form';
 import { Icons } from '@/components/icons';
 import { Button } from '@/components/ui/button';
 
@@ -27,6 +28,9 @@ const Home = () => {
           </a>
         </Button>
       </div>
+      <div className="mt-5">
+        <HeroForm />
+      </div>
     </section>
   );
 };

src/components/form.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
+import { helloAction } from '@/actions/hello-action';
+import { Button } from '@/components/ui/button';
+import { Form, FormControl, FormField, FormItem } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { useToast } from '@/components/ui/use-toast';
+import { cn } from '@/lib/utils';
+
+const formSchema = z.object({
+  name: z.string().min(3),
+});
+
+type FormSchema = z.infer<typeof formSchema>;
+
+export const HeroForm = () => {
+  const form = useForm<FormSchema>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: '',
+    },
+  });
+  const { toast } = useToast();
+
+  const onSubmit = async ({ name }: FormSchema) => {
+    const { message } = await helloAction(name);
+
+    toast({ description: message });
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="flex gap-3">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <Input
+                  placeholder="Type your name ..."
+                  className={cn(
+                    'md:w-96',
+                    form.formState.errors.name && 'border-destructive'
+                  )}
+                  {...field}
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+        <Button variant="secondary" type="submit">
+          Submit
+        </Button>
+      </form>
+    </Form>
+  );
+};