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

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

@@ -0,0 +1,126 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { defaultExperience, experienceSchema } 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 = experienceSchema;
+
+type FormValues = z.infer<typeof formSchema>;
+
+export const ExperienceDialog = () => {
+  const form = useForm<FormValues>({
+    defaultValues: defaultExperience,
+    resolver: zodResolver(formSchema),
+  });
+
+  return (
+    <SectionDialog<FormValues> id="experience" form={form} defaultValues={defaultExperience}>
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <FormField
+          name="company"
+          control={form.control}
+          render={({ field }) => (
+            <FormItem className="col-span-1">
+              <FormLabel>Company</FormLabel>
+              <FormControl>
+                <Input {...field} placeholder="Alphabet Inc." />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          name="position"
+          control={form.control}
+          render={({ field }) => (
+            <FormItem className="col-span-1">
+              <FormLabel>Position</FormLabel>
+              <FormControl>
+                <Input {...field} placeholder="Chief Executive Officer" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          name="date"
+          control={form.control}
+          render={({ field }) => (
+            <FormItem className="col-span-1">
+              <FormLabel>Date</FormLabel>
+              <FormControl>
+                <Input {...field} placeholder="Dec 2019 - Present" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          name="location"
+          control={form.control}
+          render={({ field }) => (
+            <FormItem className="col-span-1">
+              <FormLabel>Location</FormLabel>
+              <FormControl>
+                <Input {...field} placeholder="New York, NY" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          name="url"
+          control={form.control}
+          render={({ field }) => (
+            <FormItem className="col-span-1 sm:col-span-2">
+              <FormLabel>Website</FormLabel>
+              <FormControl>
+                <URLInput {...field} placeholder="https://www.abc.xyz/" />
+              </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>
+  );
+};