onboarding-wizard-form

1"use client";
2 
3import { useState } from "react";
4import { useForm, Controller } from "react-hook-form";
5import { zodResolver } from "@hookform/resolvers/zod";
6import * as z from "zod";
7import { Button } from "@/components/ui/button";
8import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
9import { Input } from "@/components/ui/input";
10import { Label } from "@/components/ui/label";
11import { toast } from "sonner";
12import { cn } from "@/lib/utils";
13import { Progress } from "@/components/ui/progress";
14import { Textarea } from "@/components/ui/textarea";
15import {
16  Select,
17  SelectContent,
18  SelectItem,
19  SelectTrigger,
20  SelectValue,
21} from "@/components/ui/select";
22import { Checkbox } from "@/components/ui/checkbox";
23 
24const formSchema = z.object({
25  email: z.string().email("Invalid email address").min(1, "Email Address is required"),
26  password: z.string().min(1, "Password is required"),
27  fullName: z.string().min(1, "Full Name is required"),
28  bio: z.string().optional().or(z.literal("")),
29  website: z.string().optional().or(z.literal("")),
30  theme: z.enum(["light", "dark", "system"]),
31  notifications: z.boolean(),
32});
33 
34type FormValues = z.infer<typeof formSchema>;
35 
36export function OnboardingWizardForm() {
37  const [currentStep, setCurrentStep] = useState(0);
38  const steps = [
39  {
40    "id": "account",
41    "title": "Account",
42    "description": "Create your secure account",
43    "fields": [
44      "email",
45      "password"
46    ]
47  },
48  {
49    "id": "profile",
50    "title": "Profile",
51    "description": "Tell us about yourself",
52    "fields": [
53      "fullName",
54      "bio",
55      "website"
56    ]
57  },
58  {
59    "id": "preferences",
60    "title": "Preferences",
61    "description": "Customize your experience",
62    "fields": [
63      "theme",
64      "notifications"
65    ]
66  }
67];
68 
69  const form = useForm<FormValues>({
70    resolver: zodResolver(formSchema),
71    defaultValues: {
72      email: "",
73      password: "",
74      fullName: "",
75      bio: "",
76      website: "",
77      theme: "system",
78      notifications: false,
79    },
80    mode: "onChange",
81  });
82 
83  const onSubmit = async (data: FormValues) => {
84    console.log("Form submitted:", data);
85    toast.success("Form submitted successfully!");
86  };
87 
88  const nextStep = async () => {
89    const fields = steps[currentStep].fields;
90    const output = await form.trigger(fields as any);
91    if (output) {
92      setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1));
93    }
94  };
95// … truncated