From 83b615d9899963701d25ec89a91914117df88fc4 Mon Sep 17 00:00:00 2001
From: Lars Hampe <hello@hashdot.co>
Date: Mon, 11 Nov 2024 21:23:52 +0100
Subject: [PATCH] feat(app): refactor changelog create/update forms

---
 .../src/routes/changelog.$id.edit.lazy.tsx    | 169 ++++++++++-----
 apps/app/src/routes/changelog.create.lazy.tsx | 198 +++++++++++-------
 2 files changed, 231 insertions(+), 136 deletions(-)

diff --git a/apps/app/src/routes/changelog.$id.edit.lazy.tsx b/apps/app/src/routes/changelog.$id.edit.lazy.tsx
index c067f4e..76e41e0 100644
--- a/apps/app/src/routes/changelog.$id.edit.lazy.tsx
+++ b/apps/app/src/routes/changelog.$id.edit.lazy.tsx
@@ -1,5 +1,9 @@
 import {
   Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
   Checkbox,
   Form,
   FormControl,
@@ -58,66 +62,118 @@ const Component = () => {
           <Form {...form}>
             <form
               onSubmit={form.handleSubmit(onSubmit)}
-              className="space-y-8 max-w-screen-md"
+              className="flex flex-col gap-10 w-full max-w-screen-lg"
             >
-              <FormField
-                control={form.control}
-                name="title"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Title</FormLabel>
-                    <FormControl>
-                      <Input placeholder="My changelog" {...field} autoFocus />
-                    </FormControl>{' '}
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="description"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Description</FormLabel>
-                    <FormControl>
-                      <Textarea
-                        placeholder="Some details about the changelog..."
-                        {...field}
+              <div className="flex gap-10 w-full max-w-screen-lg">
+                <Card className="w-full">
+                  <CardHeader>
+                    <CardTitle>Details</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="flex flex-col gap-3 w-full">
+                      <FormField
+                        control={form.control}
+                        name="title"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>Title</FormLabel>
+                            <FormControl>
+                              <Input
+                                placeholder="My changelog"
+                                {...field}
+                                autoFocus
+                              />
+                            </FormControl>{' '}
+                            <FormMessage />
+                          </FormItem>
+                        )}
                       />
-                    </FormControl>{' '}
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
 
-              <FormField
-                control={form.control}
-                name="isSemver"
-                render={({ field }) => (
-                  <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md ">
-                    <FormControl>
-                      <Checkbox
-                        checked={field.value}
-                        onCheckedChange={field.onChange}
+                      <FormField
+                        control={form.control}
+                        name="description"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>Description</FormLabel>
+                            <FormControl>
+                              <Textarea
+                                placeholder="Some details about the changelog..."
+                                {...field}
+                              />
+                            </FormControl>{' '}
+                            <FormMessage />
+                          </FormItem>
+                        )}
                       />
-                    </FormControl>
-                    <div className="space-y-1 leading-none">
-                      <FormLabel>Using Semver</FormLabel>
-                      <FormDescription>
-                        If this changelog is following the{' '}
-                        <a
-                          href="https://semver.org/lang/de/"
-                          className="text-emerald-700"
-                        >
-                          semantic versioning?
-                        </a>
-                      </FormDescription>
                     </div>
-                  </FormItem>
-                )}
-              />
-              <div className="flex gap-5">
+                  </CardContent>
+                </Card>
+
+                <Card className="w-full">
+                  <CardHeader>
+                    <CardTitle>Options</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="w-full flex flex-col gap-5">
+                      <FormField
+                        control={form.control}
+                        name="isSemver"
+                        render={({ field }) => (
+                          <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md ">
+                            <FormControl>
+                              <Checkbox
+                                checked={field.value}
+                                onCheckedChange={field.onChange}
+                              />
+                            </FormControl>
+                            <div className="space-y-1 leading-none">
+                              <FormLabel>Using Semver</FormLabel>
+                              <FormDescription>
+                                If this changelog is following the{' '}
+                                <a
+                                  href="https://semver.org/lang/de/"
+                                  className="text-emerald-700"
+                                >
+                                  semantic versioning?
+                                </a>
+                              </FormDescription>
+                            </div>
+                          </FormItem>
+                        )}
+                      />
+
+                      <FormField
+                        control={form.control}
+                        name="isConventional"
+                        render={({ field }) => (
+                          <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md ">
+                            <FormControl>
+                              <Checkbox
+                                checked={field.value}
+                                onCheckedChange={field.onChange}
+                              />
+                            </FormControl>
+                            <div className="space-y-1 leading-none">
+                              <FormLabel>Using Conventional Commits</FormLabel>
+                              <FormDescription>
+                                If this changelog is using{' '}
+                                <a
+                                  href="https://www.conventionalcommits.org/en/v1.0.0/"
+                                  className="text-emerald-700"
+                                >
+                                  conventional commits
+                                </a>
+                              </FormDescription>
+                            </div>
+                          </FormItem>
+                        )}
+                      />
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+
+              <div className="flex items-end justify-end gap-5">
                 <Button
                   type="button"
                   variant={'ghost'}
@@ -127,7 +183,8 @@ const Component = () => {
                 >
                   Cancel
                 </Button>
-                <Button type="submit">Update</Button>
+
+                <Button type="submit">Save</Button>
               </div>
             </form>
           </Form>
diff --git a/apps/app/src/routes/changelog.create.lazy.tsx b/apps/app/src/routes/changelog.create.lazy.tsx
index 1a28d84..fe44808 100644
--- a/apps/app/src/routes/changelog.create.lazy.tsx
+++ b/apps/app/src/routes/changelog.create.lazy.tsx
@@ -1,6 +1,10 @@
 import { ChangelogCreateInput } from '@boring.tools/schema'
 import {
   Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
   Checkbox,
   Form,
   FormControl,
@@ -53,97 +57,131 @@ const Component = () => {
     >
       <div className="flex flex-col gap-5">
         <h1 className="text-3xl">New changelog</h1>
-
         <Form {...form}>
           <form
             onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-8 max-w-screen-md"
+            className="flex flex-col gap-10 w-full max-w-screen-lg"
           >
-            <FormField
-              control={form.control}
-              name="title"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Title</FormLabel>
-                  <FormControl>
-                    <Input placeholder="My changelog" {...field} autoFocus />
-                  </FormControl>{' '}
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="description"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Description</FormLabel>
-                  <FormControl>
-                    <Textarea
-                      placeholder="Some details about the changelog..."
-                      {...field}
+            <div className="flex gap-10 w-full max-w-screen-lg">
+              <Card className="w-full">
+                <CardHeader>
+                  <CardTitle>Details</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="flex flex-col gap-3 w-full">
+                    <FormField
+                      control={form.control}
+                      name="title"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Title</FormLabel>
+                          <FormControl>
+                            <Input
+                              placeholder="My changelog"
+                              {...field}
+                              autoFocus
+                            />
+                          </FormControl>{' '}
+                          <FormMessage />
+                        </FormItem>
+                      )}
                     />
-                  </FormControl>{' '}
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
 
-            <FormField
-              control={form.control}
-              name="isSemver"
-              render={({ field }) => (
-                <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md ">
-                  <FormControl>
-                    <Checkbox
-                      checked={field.value}
-                      onCheckedChange={field.onChange}
+                    <FormField
+                      control={form.control}
+                      name="description"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Description</FormLabel>
+                          <FormControl>
+                            <Textarea
+                              placeholder="Some details about the changelog..."
+                              {...field}
+                            />
+                          </FormControl>{' '}
+                          <FormMessage />
+                        </FormItem>
+                      )}
                     />
-                  </FormControl>
-                  <div className="space-y-1 leading-none">
-                    <FormLabel>Using Semver</FormLabel>
-                    <FormDescription>
-                      If this changelog is following the{' '}
-                      <a
-                        href="https://semver.org/lang/de/"
-                        className="text-emerald-700"
-                      >
-                        semantic versioning?
-                      </a>
-                    </FormDescription>
                   </div>
-                </FormItem>
-              )}
-            />
+                </CardContent>
+              </Card>
 
-            <FormField
-              control={form.control}
-              name="isConventional"
-              render={({ field }) => (
-                <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md ">
-                  <FormControl>
-                    <Checkbox
-                      checked={field.value}
-                      onCheckedChange={field.onChange}
+              <Card className="w-full">
+                <CardHeader>
+                  <CardTitle>Options</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="w-full flex flex-col gap-5">
+                    <FormField
+                      control={form.control}
+                      name="isSemver"
+                      render={({ field }) => (
+                        <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md ">
+                          <FormControl>
+                            <Checkbox
+                              checked={field.value}
+                              onCheckedChange={field.onChange}
+                            />
+                          </FormControl>
+                          <div className="space-y-1 leading-none">
+                            <FormLabel>Using Semver</FormLabel>
+                            <FormDescription>
+                              If this changelog is following the{' '}
+                              <a
+                                href="https://semver.org/lang/de/"
+                                className="text-emerald-700"
+                              >
+                                semantic versioning?
+                              </a>
+                            </FormDescription>
+                          </div>
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="isConventional"
+                      render={({ field }) => (
+                        <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md ">
+                          <FormControl>
+                            <Checkbox
+                              checked={field.value}
+                              onCheckedChange={field.onChange}
+                            />
+                          </FormControl>
+                          <div className="space-y-1 leading-none">
+                            <FormLabel>Using Conventional Commits</FormLabel>
+                            <FormDescription>
+                              If this changelog is using{' '}
+                              <a
+                                href="https://www.conventionalcommits.org/en/v1.0.0/"
+                                className="text-emerald-700"
+                              >
+                                conventional commits
+                              </a>
+                            </FormDescription>
+                          </div>
+                        </FormItem>
+                      )}
                     />
-                  </FormControl>
-                  <div className="space-y-1 leading-none">
-                    <FormLabel>Using Conventional Commits</FormLabel>
-                    <FormDescription>
-                      If this changelog is using{' '}
-                      <a
-                        href="https://www.conventionalcommits.org/en/v1.0.0/"
-                        className="text-emerald-700"
-                      >
-                        conventional commits
-                      </a>
-                    </FormDescription>
                   </div>
-                </FormItem>
-              )}
-            />
-            <Button type="submit">Create</Button>
+                </CardContent>
+              </Card>
+            </div>
+
+            <div className="flex items-end justify-end gap-5">
+              <Button
+                type="button"
+                variant={'ghost'}
+                onClick={() => navigate({ to: '/changelog' })}
+              >
+                Cancel
+              </Button>
+
+              <Button type="submit">Create</Button>
+            </div>
           </form>
         </Form>
       </div>