boring.tools/boring.tools-poc
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat(app): refactor changelog create/update forms

Browse Source
This commit is contained in:
Lars Hampe 2024-11-11 21:23:52 +01:00
parent 714da23d04
commit 83b615d989
2 changed files with 231 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
apps/app/src/routes/changelog.$id.edit.lazy.tsx
View File

@ -1,5 +1,9 @@
import { import {
Button, Button,
Card,
CardContent,
CardHeader,
CardTitle,
Checkbox, Checkbox,
Form, Form,
FormControl, FormControl,
@ -58,8 +62,15 @@ const Component = () => {
<Form {...form}> <Form {...form}>
<form <form
onSubmit={form.handleSubmit(onSubmit)} onSubmit={form.handleSubmit(onSubmit)}
className="space-y-8 max-w-screen-md" className="flex flex-col gap-10 w-full max-w-screen-lg"
> >
<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 <FormField
control={form.control} control={form.control}
name="title" name="title"
@ -67,7 +78,11 @@ const Component = () => {
<FormItem> <FormItem>
<FormLabel>Title</FormLabel> <FormLabel>Title</FormLabel>
<FormControl> <FormControl>
<Input placeholder="My changelog" {...field} autoFocus /> <Input
placeholder="My changelog"
{...field}
autoFocus
/>
</FormControl>{' '} </FormControl>{' '}
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
@ -90,7 +105,16 @@ const Component = () => {
</FormItem> </FormItem>
)} )}
/> />
</div>
</CardContent>
</Card>
<Card className="w-full">
<CardHeader>
<CardTitle>Options</CardTitle>
</CardHeader>
<CardContent>
<div className="w-full flex flex-col gap-5">
<FormField <FormField
control={form.control} control={form.control}
name="isSemver" name="isSemver"
@ -117,7 +141,39 @@ const Component = () => {
</FormItem> </FormItem>
)} )}
/> />
<div className="flex gap-5">
<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 <Button
type="button" type="button"
variant={'ghost'} variant={'ghost'}
@ -127,7 +183,8 @@ const Component = () => {
> >
Cancel Cancel
</Button> </Button>
<Button type="submit">Update</Button>
<Button type="submit">Save</Button>
</div> </div>
</form> </form>
</Form> </Form>

44
apps/app/src/routes/changelog.create.lazy.tsx
View File

@ -1,6 +1,10 @@
import { ChangelogCreateInput } from '@boring.tools/schema' import { ChangelogCreateInput } from '@boring.tools/schema'
import { import {
Button, Button,
Card,
CardContent,
CardHeader,
CardTitle,
Checkbox, Checkbox,
Form, Form,
FormControl, FormControl,
@ -53,12 +57,18 @@ const Component = () => {
> >
<div className="flex flex-col gap-5"> <div className="flex flex-col gap-5">
<h1 className="text-3xl">New changelog</h1> <h1 className="text-3xl">New changelog</h1>
<Form {...form}> <Form {...form}>
<form <form
onSubmit={form.handleSubmit(onSubmit)} onSubmit={form.handleSubmit(onSubmit)}
className="space-y-8 max-w-screen-md" className="flex flex-col gap-10 w-full max-w-screen-lg"
> >
<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 <FormField
control={form.control} control={form.control}
name="title" name="title"
@ -66,7 +76,11 @@ const Component = () => {
<FormItem> <FormItem>
<FormLabel>Title</FormLabel> <FormLabel>Title</FormLabel>
<FormControl> <FormControl>
<Input placeholder="My changelog" {...field} autoFocus /> <Input
placeholder="My changelog"
{...field}
autoFocus
/>
</FormControl>{' '} </FormControl>{' '}
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
@ -89,7 +103,16 @@ const Component = () => {
</FormItem> </FormItem>
)} )}
/> />
</div>
</CardContent>
</Card>
<Card className="w-full">
<CardHeader>
<CardTitle>Options</CardTitle>
</CardHeader>
<CardContent>
<div className="w-full flex flex-col gap-5">
<FormField <FormField
control={form.control} control={form.control}
name="isSemver" name="isSemver"
@ -143,7 +166,22 @@ const Component = () => {
</FormItem> </FormItem>
)} )}
/> />
</div>
</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> <Button type="submit">Create</Button>
</div>
</form> </form>
</Form> </Form>
</div> </div>