Multi Step Form

1"use client";
2 
3import React, { useState, useMemo } from "react";
4import { format } from "date-fns";
5import { Check, ChevronRight, ChevronLeft, CalendarIcon } from "lucide-react";
6import { useForm, FormProvider as Form } from "react-hook-form";
7import { zodResolver } from "@hookform/resolvers/zod";
8import { z } from "zod";
9import { toast } from "sonner";
10import {
11  Field,
12  FieldLabel,
13  FieldDescription,
14  FieldError,
15} from "@/components/ui/field";
16import {
17  Card,
18  CardHeader,
19  CardTitle,
20  CardDescription,
21  CardContent,
22  CardFooter,
23} from "@/components/ui/card";
24import { Button } from "@/components/ui/button";
25import { Input } from "@/components/ui/input";
26import { Textarea } from "@/components/ui/textarea";
27import {
28  Select,
29  SelectContent,
30  SelectItem,
31  SelectTrigger,
32  SelectValue,
33} from "@/components/ui/select";
34import { Badge } from "@/components/ui/badge";
35import { Calendar } from "@/components/ui/calendar";
36import {
37  Popover,
38  PopoverContent,
39  PopoverTrigger,
40} from "@/components/ui/popover";
41import { cn } from "@/lib/utils";
42import { AnimatePresence, motion, MotionConfig } from "motion/react";
43import useMeasure from "react-use-measure";
44 
45const TEAM_SIZE_OPTIONS = [
46  { label: "Select team size", value: null },
47  { label: "1-5 Members", value: "1-5" },
48  { label: "5-10 Members", value: "5-10" },
49  { label: "10+ Members", value: "10+" },
50];
51 
52const PRIORITY_OPTIONS = [
53  { label: "Select priority", value: null },
54  { label: "Low", value: "Low" },
55  { label: "Medium", value: "Medium" },
56  { label: "High", value: "High" },
57  { label: "Critical", value: "Critical" },
58];
59 
60const formSchema = z.object({
61  "project-name": z.string().optional(),
62  "due-date": z.date().optional(),
63  description: z.string().optional(),
64  "team-size": z.string().nullable().optional(),
65  priority: z.string().nullable().optional(),
66  tag: z.array(z.string()).optional(),
67  mood: z.string().optional(),
68  comment: z.string().optional(),
69});
70 
71type FormValues = z.infer<typeof formSchema>;
72 
73export default function MultiStepFormDemo() {
74  const [currentStep, setCurrentStep] = useState(0);
75  const [direction, setDirection] = useState<number>();
76  const [ref, bounds] = useMeasure();
77 
78  const form = useForm<FormValues>({
79    resolver: zodResolver(formSchema),
80    defaultValues: {
81      "project-name": "",
82      "due-date": undefined,
83      description: "",
84      "team-size": null,
85      priority: null,
86      tag: [],
87      mood: "",
88      comment: "",
89    },
90  });
91 
92// … truncated