Skip to content

Commit

Permalink
Improve all forms
Browse files Browse the repository at this point in the history 
TODO: Add virtualization for tag comboboxes
  • Loading branch information
@mxsaad
mxsaad committed Mar 10, 2024
1 parent b3aee72 commit e15f514
Show file tree
Hide file tree
Showing 15 changed files with 19,768 additions and 569 deletions.
207 changes: 54 additions & 153 deletions components/forms/appearance-form.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
"use client"
"use client";

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
Form,
FormControl,
Expand All @@ -13,133 +13,64 @@ import {
FormLabel,
FormMessage,
FormDescription,
} from "@/components/ui/form"
} from "@/components/ui/form";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import { Textarea } from "../ui/textarea"
} from "@/components/ui/select";
import { Textarea } from "../ui/textarea";
import { height, complexion, build } from "@/data/form-data";

// Form Schema
const formSchema: z.Schema = z.object({
height: z.string({ required_error: "Height is required" }),
weight: z.number({ required_error: "Weight is required" })
.int()
.min(50, { message: "Must be at least 50 lbs" })
.max(500, { message: "Must be at most 600 lbs" }),
complexion: z.string({ required_error: "Complexion is required" }),
build: z.string({ required_error: "Build is required" }),
dress: z.string({ required_error: "Dress is required" })
height: z.string(),
weight: z
.number(),
complexion: z.string(),
build: z.string(),
description: z
.string()
.max(1000, { message: "Must be at most 1000 characters long" }),
grooming: z.string({ required_error: "Grooming is required" })
.max(1000, { message: "Must be at most 1000 characters long" }),
other: z.string()
.max(1000, { message: "Must be at most 1000 characters long" })
.optional(),
})

const height = [
"4' 0\"",
"4' 1\"",
"4' 2\"",
"4' 3\"",
"4' 4\"",
"4' 5\"",
"4' 6\"",
"4' 7\"",
"4' 8\"",
"4' 9\"",
"4' 10\"",
"4' 11\"",
"5' 0\"",
"5' 1\"",
"5' 2\"",
"5' 3\"",
"5' 4\"",
"5' 5\"",
"5' 6\"",
"5' 7\"",
"5' 8\"",
"5' 9\"",
"5' 10\"",
"5' 11\"",
"6' 0\"",
"6' 1\"",
"6' 2\"",
"6' 3\"",
"6' 4\"",
"6' 5\"",
"6' 6\"",
"6' 7\"",
"6' 8\"",
"6' 9\"",
"6' 10\"",
"6' 11\"",
"7' 0\"",
"7' 1\"",
"7' 2\"",
"7' 3\"",
"7' 4\"",
"7' 5\"",
"7' 6\"",
"7' 7\"",
"7' 8\"",
"7' 9\"",
"7' 10\"",
"7' 11\"",
"8' 0\"",
]

const complexion = [
"Fair",
"Olive",
"Brown",
"Dark",
"Other",
]

const build = [
"Slim",
"Average",
"Athletic",
"Muscular",
"Heavy",
]
});

export default function AppearanceForm() {
// Form Definition
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
height: "5' 6\"",
weight: 150,
complexion: "Fair",
build: "Average",
dress: "Not specified",
grooming: "Not specified",
other: "Not specified",
height: "",
weight: 0,
complexion: "",
build: "",
description: "",
},
})
});

// Submit
function onSubmit(values: z.infer<typeof formSchema>) {
console.log(values)
console.log(values);
}

return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="container flex flex-col gap-4">
<form
onSubmit={form.handleSubmit(onSubmit)}
className="container flex flex-col gap-4"
>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<FormField
control={form.control}
name="height"
render={({ field }) => (
<FormItem>
<FormLabel>Height</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<Select
onValueChange={field.onChange}
required
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Please select" />
Expand Down Expand Up @@ -172,13 +103,12 @@ export default function AppearanceForm() {
min={50}
max={600}
placeholder="Please select"
required
{...field}
onChange={event => field.onChange(+event.target.value)}
onChange={(event) => field.onChange(+event.target.value)}
/>
</FormControl>
<FormDescription>
Your weight in pounds.
</FormDescription>
<FormDescription>Your weight in pounds.</FormDescription>
<FormMessage />
</FormItem>
)}
Expand All @@ -189,7 +119,10 @@ export default function AppearanceForm() {
render={({ field }) => (
<FormItem>
<FormLabel>Complexion</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<Select
onValueChange={field.onChange}
required
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Please select" />
Expand All @@ -204,9 +137,7 @@ export default function AppearanceForm() {
</SelectContent>
</Select>
<FormMessage />
<FormDescription>
Your skin complexion.
</FormDescription>
<FormDescription>Your skin complexion.</FormDescription>
</FormItem>
)}
/>
Expand All @@ -216,7 +147,10 @@ export default function AppearanceForm() {
render={({ field }) => (
<FormItem>
<FormLabel>Build</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<Select
onValueChange={field.onChange}
required
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Please select" />
Expand All @@ -231,66 +165,33 @@ export default function AppearanceForm() {
</SelectContent>
</Select>
<FormMessage />
<FormDescription>
Your body build.
</FormDescription>
<FormDescription>Your body build.</FormDescription>
</FormItem>
)}
/>
</div>
<FormField
control={form.control}
name="dress"
render={({ field }) => (
<FormItem>
<FormLabel>Dress</FormLabel>
<FormControl>
<Textarea
placeholder="Your style of dressing."
className="min-h-32 resize-y max-h-64"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="grooming"
render={({ field }) => (
<FormItem>
<FormLabel>Grooming</FormLabel>
<FormControl>
<Textarea
placeholder="Your grooming habits."
className="min-h-32 resize-y max-h-64"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="other"
name="description"
render={({ field }) => (
<FormItem>
<FormLabel>Other</FormLabel>
<FormLabel >Description</FormLabel>
<FormControl>
<Textarea
placeholder="Any other details about your appearance."
placeholder="Describe your appearance and dress."
className="min-h-32 resize-y max-h-64"
required
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit" className="w-fit self-end">Save</Button>
<Button type="submit" className="w-fit self-end">
Save
</Button>
</form>
</Form>
)
);
}
Loading

0 comments on commit e15f514

Please sign in to comment.