refactor(v4.0.0-alpha): beginning of a new era

apps/client/src/pages/builder/sidebars/left/dialogs/publications.tsx

@@ -0,0 +1,112 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { defaultPublication, publicationSchema } from "@reactive-resume/schema";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  RichInput,
+} from "@reactive-resume/ui";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { AiActions } from "@/client/components/ai-actions";
+
+import { SectionDialog } from "../sections/shared/section-dialog";
+import { URLInput } from "../sections/shared/url-input";
+
+const formSchema = publicationSchema;
+
+type FormValues = z.infer<typeof formSchema>;
+
+export const PublicationsDialog = () => {
+  const form = useForm<FormValues>({
+    defaultValues: defaultPublication,
+    resolver: zodResolver(formSchema),
+  });
+
+  return (
+    <SectionDialog<FormValues> id="publications" form={form} defaultValues={defaultPublication}>
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <FormField
+          name="name"
+          control={form.control}
+          render={({ field }) => (
+            <FormItem className="col-span-1">
+              <FormLabel>Name</FormLabel>
+              <FormControl>
+                <Input {...field} placeholder="The Great Gatsby" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          name="publisher"
+          control={form.control}
+          render={({ field }) => (
+            <FormItem className="col-span-1">
+              <FormLabel>Publisher</FormLabel>
+              <FormControl>
+                <Input {...field} placeholder="Charles Scribner's Sons" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          name="date"
+          control={form.control}
+          render={({ field }) => (
+            <FormItem className="col-span-1">
+              <FormLabel>Release Date</FormLabel>
+              <FormControl>
+                <Input {...field} placeholder="April 10, 1925" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          name="url"
+          control={form.control}
+          render={({ field }) => (
+            <FormItem className="col-span-1">
+              <FormLabel>Website</FormLabel>
+              <FormControl>
+                <URLInput {...field} placeholder="https://books.google.com/..." />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          name="summary"
+          control={form.control}
+          render={({ field }) => (
+            <FormItem className="col-span-1 sm:col-span-2">
+              <FormLabel>Summary</FormLabel>
+              <FormControl>
+                <RichInput
+                  {...field}
+                  content={field.value}
+                  onChange={(value) => field.onChange(value)}
+                  footer={(editor) => (
+                    <AiActions value={editor.getText()} onChange={editor.commands.setContent} />
+                  )}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div>
+    </SectionDialog>
+  );
+};