ondra/ironmount
1
1
Fork 0
mirror of https://github.com/nicotsx/ironmount.git synced 2025-12-10 12:10:51 +01:00
Code Issues Packages Projects Releases 1 Wiki Activity

refactor(client): zod to arktype

Browse Source
This commit is contained in:
Nicolas Meienberger
2025-09-02 19:33:56 +02:00
parent eb2fbe8f75
commit 9ef21d4ec2
6 changed files with 134 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
apps/client/app/components/create-volume-dialog.tsx
View File

@@ -1,7 +1,7 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { arktypeResolver } from "@hookform/resolvers/arktype";
import { type } from "arktype";
import { Plus } from "lucide-react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { slugify } from "~/lib/utils";
import { Button } from "./ui/button";
import {
@@ -15,19 +15,21 @@ import {
} from "./ui/dialog";
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./ui/form";
import { Input } from "./ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
const formSchema = z.object({
name: z
.string()
.min(2, {
message: "Volume name must be at least 2 characters long",
})
.max(32, {
message: "Volume name must be at most 32 characters long",
}),
export const formSchema = type({
name: "2<=string<=32",
backend: "'directory'",
}).or({
name: "2<=string<=32",
backend: "'nfs'",
server: "string",
exportPath: "string",
port: "number >= 1",
version: "'3' | '4' | '4.1'",
});
type FormValues = z.infer<typeof formSchema>;
type FormValues = typeof formSchema.infer;
type Props = {
open: boolean;
setOpen: (open: boolean) => void;
@@ -35,13 +37,16 @@ type Props = {
};
export const CreateVolumeDialog = ({ open, setOpen, onSubmit }: Props) => {
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
const form = useForm<typeof formSchema.infer>({
resolver: arktypeResolver(formSchema),
defaultValues: {
name: "",
backend: "directory",
},
});
const watchedBackend = form.watch("backend");
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
@@ -76,6 +81,97 @@ export const CreateVolumeDialog = ({ open, setOpen, onSubmit }: Props) => {
</FormItem>
)}
/>
<FormField
name="backend"
render={({ field }) => (
<FormItem>
<FormLabel>Backend</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select a backend" />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="directory">Directory</SelectItem>
<SelectItem value="nfs">NFS</SelectItem>
</SelectContent>
</Select>
<FormDescription>Choose the storage backend for this volume.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
{watchedBackend === "nfs" && (
<>
<FormField
name="server"
render={({ field }) => (
<FormItem>
<FormLabel>Server</FormLabel>
<FormControl>
<Input placeholder="192.168.1.100" value={field.value ?? ""} onChange={field.onChange} />
</FormControl>
<FormDescription>NFS server IP address or hostname.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
name="exportPath"
render={({ field }) => (
<FormItem>
<FormLabel>Export Path</FormLabel>
<FormControl>
<Input placeholder="/export/data" value={field.value ?? ""} onChange={field.onChange} />
</FormControl>
<FormDescription>Path to the NFS export on the server.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
name="port"
render={({ field }) => (
<FormItem>
<FormLabel>Port</FormLabel>
<FormControl>
<Input
type="number"
placeholder="2049"
value={field.value ?? ""}
onChange={(e) => field.onChange(parseInt(e.target.value, 10) || undefined)}
/>
</FormControl>
<FormDescription>NFS server port (default: 2049).</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
name="version"
render={({ field }) => (
<FormItem>
<FormLabel>Version</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select NFS version" />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="3">NFS v3</SelectItem>
<SelectItem value="4">NFS v4</SelectItem>
<SelectItem value="4.1">NFS v4.1</SelectItem>
</SelectContent>
</Select>
<FormDescription>NFS protocol version to use.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</>
)}
{/* {createVolume.error && ( */}
{/* <div className="text-red-500 text-sm"> */}
{/* {createVolume.error.message} */}