From bb4266ea360e6b2a87e75ffba221fc4d105b6080 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Abadesso?= Date: Fri, 23 Aug 2024 13:39:22 -0300 Subject: [PATCH 01/43] feat: created form with zod --- packages/bet-dapp/package.json | 9 +- packages/bet-dapp/src/app/create/page.tsx | 138 +++- packages/bet-dapp/src/app/page.tsx | 5 +- packages/bet-dapp/src/components/ui/form.tsx | 178 +++++ packages/bet-dapp/src/components/ui/input.tsx | 25 + packages/bet-dapp/src/components/ui/label.tsx | 26 + .../bet-dapp/src/components/ui/popover.tsx | 33 + .../bet-dapp/src/components/ui/select.tsx | 164 +++++ .../bet-dapp/src/components/ui/textarea.tsx | 24 + yarn.lock | 633 +++++++++++++++++- 10 files changed, 1228 insertions(+), 7 deletions(-) create mode 100644 packages/bet-dapp/src/components/ui/form.tsx create mode 100644 packages/bet-dapp/src/components/ui/input.tsx create mode 100644 packages/bet-dapp/src/components/ui/label.tsx create mode 100644 packages/bet-dapp/src/components/ui/popover.tsx create mode 100644 packages/bet-dapp/src/components/ui/select.tsx create mode 100644 packages/bet-dapp/src/components/ui/textarea.tsx diff --git a/packages/bet-dapp/package.json b/packages/bet-dapp/package.json index 43bbe5c..8789f63 100644 --- a/packages/bet-dapp/package.json +++ b/packages/bet-dapp/package.json @@ -9,17 +9,24 @@ "lint": "next lint" }, "dependencies": { + "@hookform/resolvers": "^3.9.0", "@radix-ui/react-aspect-ratio": "^1.1.0", "@radix-ui/react-icons": "^1.3.0", + "@radix-ui/react-label": "^2.1.0", + "@radix-ui/react-popover": "^1.1.1", + "@radix-ui/react-select": "^2.1.1", "@radix-ui/react-slot": "^1.1.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", + "date-fns": "^3.6.0", "lucide-react": "^0.435.0", "next": "14.2.6", "react": "^18", "react-dom": "^18", + "react-hook-form": "^7.52.2", "tailwind-merge": "^2.5.2", - "tailwindcss-animate": "^1.0.7" + "tailwindcss-animate": "^1.0.7", + "zod": "^3.23.8" }, "devDependencies": { "@types/node": "^20", diff --git a/packages/bet-dapp/src/app/create/page.tsx b/packages/bet-dapp/src/app/create/page.tsx index 7dfa12e..abb6a60 100644 --- a/packages/bet-dapp/src/app/create/page.tsx +++ b/packages/bet-dapp/src/app/create/page.tsx @@ -1,13 +1,145 @@ -import React from 'react'; +'use client'; + +import React, { useCallback } from 'react'; import { Card, CardContent } from '@/components/ui/card'; import { Header } from '@/components/header'; +import { z } from 'zod'; +import { useForm } from 'react-hook-form'; +import { zodResolver } from '@hookform/resolvers/zod'; +import { Form, FormControl, FormField, FormItem, FormLabel } from '@/components/ui/form'; +import { Input } from '@/components/ui/input' +import { Button } from '@/components/ui/button'; +import { Textarea } from '@/components/ui/textarea'; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; +import { format } from 'date-fns'; + +function formatLocalDateTime(date: Date): string { + return format(date, 'yyyy-MM-dd\'T\'HH:mm'); +} + +const formSchema = z.object({ + name: z.string(), + description: z.string(), + oracleType: z.string(), + oracle: z.string().optional(), + lastBetAt: z.date(), +}); export default function CreateNanoContractLayout() { + const form = useForm>({ + resolver: zodResolver(formSchema), + defaultValues: { + name: '', + description: '', + oracleType: '', + lastBetAt: new Date(), + }, + }); + + const onSubmit = useCallback((values: z.infer) => { + console.log(values); + }, []); + + const oracleTypeValue = form.watch('oracleType'); + return (
- - + + +
+ + {/* Name Field */} + ( + + Name of the Main Event + + + + + )} + /> + + {/* Description Field */} + ( + + Description + +