editable-form-demo

1"use client";
2 
3import { zodResolver } from "@hookform/resolvers/zod";
4import * as React from "react";
5import { useForm } from "react-hook-form";
6import { toast } from "sonner";
7import * as z from "zod";
8import { Button } from "@/registry/bases/base/ui/button";
9import {
10  Editable,
11  EditableArea,
12  EditableCancel,
13  EditableInput,
14  EditableLabel,
15  EditablePreview,
16  EditableSubmit,
17  EditableToolbar,
18  EditableTrigger,
19} from "@/registry/bases/base/ui/editable";
20import {
21  Form,
22  FormControl,
23  FormField,
24  FormItem,
25  FormLabel,
26  FormMessage,
27} from "@/registry/bases/base/ui/form";
28 
29const formSchema = z.object({
30  name: z
31    .string()
32    .min(2, "Name must be at least 2 characters")
33    .max(50, "Name must be less than 50 characters"),
34  title: z
35    .string()
36    .min(3, "Title must be at least 3 characters")
37    .max(100, "Title must be less than 100 characters"),
38});
39 
40type FormSchema = z.infer<typeof formSchema>;
41 
42export default function EditableFormDemo() {
43  const form = useForm<FormSchema>({
44    resolver: zodResolver(formSchema),
45    defaultValues: {
46      name: "Rodney Mullen",
47      title: "Skateboarder",
48    },
49  });
50 
51  const onSubmit = React.useCallback((input: FormSchema) => {
52    toast.success(
53      <pre className="w-full">{JSON.stringify(input, null, 2)}</pre>,
54    );
55  }, []);
56 
57  return (
58    <Form {...form}>
59      <form
60        onSubmit={form.handleSubmit(onSubmit)}
61        className="flex w-full flex-col gap-2 rounded-md border p-4 shadow-sm"
62      >
63        <FormField
64          control={form.control}
65          name="name"
66          render={({ field }) => (
67            <FormItem>
68              <FormControl>
69                <Editable
70                  defaultValue={field.value}
71                  onSubmit={field.onChange}
72                  invalid={
73                    !!form.formState.errors.name &&
74                    !!form.formState.touchedFields.name
75                  }
76                >
77                  <EditableLabel>Name</EditableLabel>
78                  <div className="flex items-start gap-4">
79                    <EditableArea className="flex-1">
80                      <EditablePreview />
81                      <EditableInput />
82                    </EditableArea>
83                    <EditableTrigger
84                      render={
85                        <Button type="button" variant="outline" size="sm" />
86                      }
87                    >
88                      Edit
89                    </EditableTrigger>
90// … truncated