1// Example: Form Pattern with shadcn/ui components
2// Demonstrates: Form building, validation, and composition
3 
4"use client"
5 
6import { Button } from "@/components/ui/button"
7import {
8    Form,
9    FormControl,
10    FormDescription,
11    FormField,
12    FormItem,
13    FormLabel,
14    FormMessage,
15} from "@/components/ui/form"
16import { Input } from "@/components/ui/input"
17import {
18    Select,
19    SelectContent,
20    SelectItem,
21    SelectTrigger,
22    SelectValue,
23} from "@/components/ui/select"
24import { Textarea } from "@/components/ui/textarea"
25import { toast } from "@/components/ui/use-toast"
26import { zodResolver } from "@hookform/resolvers/zod"
27import { useForm } from "react-hook-form"
28import * as z from "zod"
29 
30// Define form schema with zod
31const formSchema = z.object({
32  username: z.string().min(2, {
33    message: "Username must be at least 2 characters.",
34  }),
35  email: z.string().email({
36    message: "Please enter a valid email address.",
37  }),
38  role: z.enum(["admin", "user", "viewer"], {
39    required_error: "Please select a role.",
40  }),
41  bio: z.string().max(160, {
42    message: "Bio must not be longer than 160 characters.",
43  }).optional(),
44})
45 
46type FormValues = z.infer<typeof formSchema>
47 
48export function UserProfileForm() {
49  // Initialize form with react-hook-form and zod validation
50  const form = useForm<FormValues>({
51    resolver: zodResolver(formSchema),
52    defaultValues: {
53      username: "",
54      email: "",
55      bio: "",
56    },
57  })
58 
59  // Handle form submission
60  function onSubmit(values: FormValues) {
61    // In a real app, send to API
62    console.log(values)
63    
64    toast({
65      title: "Profile updated",
66      description: "Your profile has been successfully updated.",
67    })
68  }
69 
70  return (
71    <Form {...form}>
72      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
73        <FormField
74          control={form.control}
75          name="username"
76          render={({ field }) => (
77            <FormItem>
78              <FormLabel>Username</FormLabel>
79              <FormControl>
80                <Input placeholder="johndoe" {...field} />
81              </FormControl>
82              <FormDescription>
83                This is your public display name.
84              </FormDescription>
85              <FormMessage />
86            </FormItem>
87          )}
88        />
89 
90        <FormField
91          control={form.control}
92          name="email"
93          render={({ field }) => (
94            <FormItem>
95              <FormLabel>Email</FormLabel>
96              <FormControl>
97                <Input type="email" placeholder="[email protected]" {...field} />
98              </FormControl>
99              <FormMessage />
100            </FormItem>
101          )}
102        />
103 
104        <FormField
105          control={form.control}
106          name="role"
107          render={({ field }) => (
108            <FormItem>
109              <FormLabel>Role</FormLabel>
110              <Select onValueChange={field.onChange} defaultValue={field.value}>
111                <FormControl>
112                  <SelectTrigger>
113                    <SelectValue placeholder="Select a role" />
114                  </SelectTrigger>
115                </FormControl>
116                <SelectContent>
117                  <SelectItem value="admin">Admin</SelectItem>
118                  <SelectItem value="user">User</SelectItem>
119                  <SelectItem value="viewer">Viewer</SelectItem>
120                </SelectContent>
121              </Select>
122              <FormDescription>
123                Your role determines your access level.
124              </FormDescription>
125              <FormMessage />
126            </FormItem>
127          )}
128        />
129 
130        <FormField
131          control={form.control}
132          name="bio"
133          render={({ field }) => (
134            <FormItem>
135              <FormLabel>Bio</FormLabel>
136              <FormControl>
137                <Textarea
138                  placeholder="Tell us about yourself"
139                  className="resize-none"
140                  {...field}
141                />
142              </FormControl>
143              <FormDescription>
144                Optional. Maximum 160 characters.
145              </FormDescription>
146              <FormMessage />
147            </FormItem>
148          )}
149        />
150 
151        <Button type="submit">Update profile</Button>
152      </form>
153    </Form>
154  )
155}
156 
157/**
158 * Key Patterns Demonstrated:
159 * 
160 * 1. Form Composition: Using shadcn/ui's Form components with react-hook-form
161 * 2. Validation: Zod schema for type-safe validation
162 * 3. Error Handling: Automatic error messages via FormMessage
163 * 4. Accessibility: All fields properly labeled with descriptions
164 * 5. Type Safety: TypeScript types inferred from Zod schema
165 * 
166 * Required Dependencies:
167 * - react-hook-form
168 * - @hookform/resolvers
169 * - zod
170 * 
171 * Installation:
172 * npx shadcn@latest add form
173 * npx shadcn@latest add input
174 * npx shadcn@latest add select
175 * npx shadcn@latest add textarea
176 * npx shadcn@latest add button
177 */
178