129 lines
3.7 KiB
TypeScript
129 lines
3.7 KiB
TypeScript
import { ChangelogCreateInput } from '@boring.tools/schema'
|
|
import {
|
|
Button,
|
|
Checkbox,
|
|
Form,
|
|
FormControl,
|
|
FormDescription,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
Input,
|
|
Textarea,
|
|
} from '@boring.tools/ui'
|
|
import { zodResolver } from '@hookform/resolvers/zod'
|
|
import { createLazyFileRoute } from '@tanstack/react-router'
|
|
import { useNavigate } from '@tanstack/react-router'
|
|
import { useForm } from 'react-hook-form'
|
|
import type { z } from 'zod'
|
|
import { PageWrapper } from '../components/PageWrapper'
|
|
import { useChangelogCreate } from '../hooks/useChangelog'
|
|
|
|
const Component = () => {
|
|
const navigate = useNavigate({ from: '/changelog/create' })
|
|
const changelogCreate = useChangelogCreate()
|
|
const form = useForm<z.infer<typeof ChangelogCreateInput>>({
|
|
resolver: zodResolver(ChangelogCreateInput),
|
|
defaultValues: {
|
|
title: '',
|
|
description: '',
|
|
isSemver: true,
|
|
},
|
|
})
|
|
|
|
const onSubmit = (values: z.infer<typeof ChangelogCreateInput>) => {
|
|
changelogCreate.mutate(values, {
|
|
onSuccess(data) {
|
|
navigate({ to: '/changelog/$id', params: { id: data.id } })
|
|
},
|
|
})
|
|
}
|
|
|
|
return (
|
|
<PageWrapper
|
|
breadcrumbs={[
|
|
{
|
|
name: 'Changelog',
|
|
to: '/changelog',
|
|
},
|
|
{ name: 'New', to: '/changelog/create' },
|
|
]}
|
|
>
|
|
<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"
|
|
>
|
|
<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}
|
|
/>
|
|
</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}
|
|
/>
|
|
</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>
|
|
)}
|
|
/>
|
|
<Button type="submit">Create</Button>
|
|
</form>
|
|
</Form>
|
|
</div>
|
|
</PageWrapper>
|
|
)
|
|
}
|
|
|
|
export const Route = createLazyFileRoute('/changelog/create')({
|
|
component: Component,
|
|
})
|