make checkboxes submit correct data

src/app/tailwind.css

@@ -620,10 +620,18 @@ body {
   position: relative;
 }
 
+.left-1 {
+  left: 0.25rem;
+}
+
 .left-2 {
   left: 0.5rem;
 }
 
+.right-1 {
+  right: 0.25rem;
+}
+
 .right-2 {
   right: 0.5rem;
 }
@@ -636,14 +644,6 @@ body {
   top: 0.5rem;
 }
 
-.left-1 {
-  left: 0.25rem;
-}
-
-.right-1 {
-  right: 0.25rem;
-}
-
 .z-50 {
   z-index: 50;
 }
@@ -739,6 +739,14 @@ body {
   height: 1rem;
 }
 
+.h-7 {
+  height: 1.75rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
 .h-9 {
   height: 2.25rem;
 }
@@ -751,14 +759,6 @@ body {
   height: 1px;
 }
 
-.h-8 {
-  height: 2rem;
-}
-
-.h-7 {
-  height: 1.75rem;
-}
-
 .max-h-96 {
   max-height: 24rem;
 }
@@ -775,6 +775,10 @@ body {
   width: 0.5rem;
 }
 
+.w-2\/3 {
+  width: 66.666667%;
+}
+
 .w-3 {
   width: 0.75rem;
 }
@@ -787,26 +791,14 @@ body {
   width: 1rem;
 }
 
-.w-\[340px\] {
+.w-7 {
-  width: 340px;
+  width: 1.75rem;
-}
-
-.w-full {
-  width: 100%;
-}
-
-.w-2\/3 {
-  width: 66.666667%;
 }
 
 .w-72 {
   width: 18rem;
 }
 
-.w-7 {
-  width: 1.75rem;
-}
-
 .w-9 {
   width: 2.25rem;
 }
@@ -815,10 +807,18 @@ body {
   width: 240px;
 }
 
+.w-\[340px\] {
+  width: 340px;
+}
+
 .w-auto {
   width: auto;
 }
 
+.w-full {
+  width: 100%;
+}
+
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -889,6 +889,12 @@ body {
   gap: 0.25rem;
 }
 
+.space-x-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -901,40 +907,16 @@ body {
   margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.space-y-0 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0px * var(--tw-space-y-reverse));
-}
-
-.space-y-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
-}
-
-.space-y-8 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
-}
-
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
   margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+.space-y-0 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
-  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+  margin-bottom: calc(0px * var(--tw-space-y-reverse));
-}
-
-.space-x-1 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
-  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
@@ -943,12 +925,30 @@ body {
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
 
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
+.space-y-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -981,6 +981,10 @@ body {
   border-top-width: 1px;
 }
 
+.border-destructive {
+  border-color: hsl(var(--destructive));
+}
+
 .border-input {
   border-color: hsl(var(--input));
 }
@@ -989,8 +993,8 @@ body {
   border-color: hsl(var(--primary));
 }
 
-.border-destructive {
+.bg-accent {
-  border-color: hsl(var(--destructive));
+  background-color: hsl(var(--accent));
 }
 
 .bg-background {
@@ -1030,18 +1034,22 @@ body {
   background-color: transparent;
 }
 
-.bg-accent {
-  background-color: hsl(var(--accent));
-}
-
 .fill-current {
   fill: currentColor;
 }
 
+.p-0 {
+  padding: 0px;
+}
+
 .p-1 {
   padding: 0.25rem;
 }
 
+.p-3 {
+  padding: 0.75rem;
+}
+
 .p-4 {
   padding: 1rem;
 }
@@ -1050,14 +1058,6 @@ body {
   padding: 1.5rem;
 }
 
-.p-0 {
-  padding: 0px;
-}
-
-.p-3 {
-  padding: 0.75rem;
-}
-
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1103,6 +1103,10 @@ body {
   padding-bottom: 1rem;
 }
 
+.pl-3 {
+  padding-left: 0.75rem;
+}
+
 .pl-8 {
   padding-left: 2rem;
 }
@@ -1119,10 +1123,6 @@ body {
   padding-top: 0.25rem;
 }
 
-.pl-3 {
-  padding-left: 0.75rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -1140,6 +1140,10 @@ body {
   line-height: 2.25rem;
 }
 
+.text-\[0\.8rem\] {
+  font-size: 0.8rem;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1155,10 +1159,6 @@ body {
   line-height: 1rem;
 }
 
-.text-\[0\.8rem\] {
-  font-size: 0.8rem;
-}
-
 .font-black {
   font-weight: 900;
 }
@@ -1187,6 +1187,10 @@ body {
   letter-spacing: 0.1em;
 }
 
+.text-accent-foreground {
+  color: hsl(var(--accent-foreground));
+}
+
 .text-current {
   color: currentColor;
 }
@@ -1199,6 +1203,14 @@ body {
   color: hsl(var(--destructive-foreground));
 }
 
+.text-foreground {
+  color: hsl(var(--foreground));
+}
+
+.text-foreground\/50 {
+  color: hsl(var(--foreground) / 0.5);
+}
+
 .text-muted-foreground {
   color: hsl(var(--muted-foreground));
 }
@@ -1224,18 +1236,6 @@ body {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-foreground {
-  color: hsl(var(--foreground));
-}
-
-.text-foreground\/50 {
-  color: hsl(var(--foreground) / 0.5);
-}
-
-.text-accent-foreground {
-  color: hsl(var(--accent-foreground));
-}
-
 .underline {
   text-decoration-line: underline;
 }
@@ -1244,6 +1244,10 @@ body {
   text-underline-offset: 4px;
 }
 
+.opacity-0 {
+  opacity: 0;
+}
+
 .opacity-50 {
   opacity: 0.5;
 }
@@ -1252,10 +1256,6 @@ body {
   opacity: 0.6;
 }
 
-.opacity-0 {
-  opacity: 0;
-}
-
 .opacity-90 {
   opacity: 0.9;
 }
@@ -1289,14 +1289,14 @@ body {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.transition-colors {
+.transition-all {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
 
-.transition-all {
+.transition-colors {
-  transition-property: all;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -1366,20 +1366,20 @@ body {
   background-color: hsl(var(--muted) / 0.5);
 }
 
-.hover\:bg-primary\/90:hover {
+.hover\:bg-primary:hover {
-  background-color: hsl(var(--primary) / 0.9);
+  background-color: hsl(var(--primary));
 }
 
-.hover\:bg-secondary\/80:hover {
+.hover\:bg-primary\/90:hover {
-  background-color: hsl(var(--secondary) / 0.8);
+  background-color: hsl(var(--primary) / 0.9);
 }
 
 .hover\:bg-secondary:hover {
   background-color: hsl(var(--secondary));
 }
 
-.hover\:bg-primary:hover {
+.hover\:bg-secondary\/80:hover {
-  background-color: hsl(var(--primary));
+  background-color: hsl(var(--secondary) / 0.8);
 }
 
 .hover\:text-accent-foreground:hover {
@@ -1644,14 +1644,14 @@ body {
   --tw-exit-opacity: 0;
 }
 
-.data-\[state\=open\]\:fade-in-0[data-state=open] {
-  --tw-enter-opacity: 0;
-}
-
 .data-\[state\=closed\]\:fade-out-80[data-state=closed] {
   --tw-exit-opacity: 0.8;
 }
 
+.data-\[state\=open\]\:fade-in-0[data-state=open] {
+  --tw-enter-opacity: 0;
+}
+
 .data-\[state\=closed\]\:zoom-out-95[data-state=closed] {
   --tw-exit-scale: .95;
 }

src/app/test/page.tsx

@@ -0,0 +1,7 @@
+import { CheckboxReactHookFormMultiple } from "app/ui/forms/Checkboxdemo";
+
+export default function Page() {
+  return (
+    <CheckboxReactHookFormMultiple />
+  )
+}

src/app/ui/forms/story.tsx

@@ -16,14 +16,15 @@ import {
 } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
 import { Checkbox } from "@/components/ui/checkbox"
+import { toast } from "@/components/ui/use-toast"
+import * as Popover from '@radix-ui/react-popover';
 
 const formSchema = z.object({
 	title: z.string().min(2).max(50),
-	word_count: z.number(),
+	word_count: z.coerce.number(),
-	genres: z.object({ id: z.number(), name: z.string() }).array()
+	genres: z.array(z.number())
 })
 
-
 export default function StoryForm({ genres }) {
 	// 1. Define your form.
 	const form = useForm<z.infer<typeof formSchema>>({
@@ -31,18 +32,40 @@ export default function StoryForm({ genres }) {
 		defaultValues: {
 			title: "",
 			word_count: 0,
-			genres: genres
+			genres: []
 		},
 	})
 	// 2. Define a submit handler.
 	function onSubmit(values: z.infer<typeof formSchema>) {
 		// Do something with the form values.
 		// ✅ This will be type-safe and validated.
+		toast({
+			title: "You submitted the following values:",
+			description: (
+				<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+					<code className="text-white">{JSON.stringify(values, null, 2)}</code>
+				</pre>
+			),
+		})
 		console.log(values)
 	}
+
+
+	function onErrors(errors) {
+		toast({
+			title: "You have errors",
+			description: (
+				<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+					<code className="text-white">{JSON.stringify(errors, null, 2)}</code>
+				</pre>
+			),
+		})
+		console.log(JSON.stringify(errors))
+	}
+
 	return (
 		<Form {...form}>
-			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+			<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
 				<FormField
 					control={form.control}
 					name="title"
@@ -65,17 +88,25 @@ export default function StoryForm({ genres }) {
 							<FormControl>
 								<Input type="number" step={500} min={0} {...field}></Input>
 							</FormControl>
+							<FormMessage />
 						</FormItem>
 					)}
 				/>
+				{
+					// <Popover.Root>
+					// 	<Popover.Trigger>
+					// 		Genres
+					// 	</Popover.Trigger>
+					// 	<Popover.Content>
+				}
 				<FormField
 					control={form.control}
 					name="genres"
-					render={({ field }) => (
+					render={() => (
 						<FormItem>
 							<div className="mb-4">
 								<FormLabel>Genres</FormLabel>
-								<FormDescription>genres baby</FormDescription>
+								<FormDescription>Specify relevant genres</FormDescription>
 							</div>
 							{genres.map((item) => (
 								<FormField
@@ -110,10 +141,15 @@ export default function StoryForm({ genres }) {
 									}}
 								/>
 							))}
+							<FormMessage />
 						</FormItem>
 					)}
-
 				/>
+				{
+					// 	</Popover.Content>
+					// </Popover.Root>
+				}
+
 				<Button type="submit">Submit</Button>
 			</form>
 		</Form>

src/app/ui/forms/sub.tsx

@@ -31,21 +31,26 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select"
-import { ItemText, SelectItemIndicator, SelectItemText } from "@radix-ui/react-select"
+import { useState } from "react"
 
 const FormSchema = z.object({
-	storyId: z.string(),
+	storyId: z.coerce.number(),
-	pubId: z.string(),
+	pubId: z.coerce.number(),
 	submitted: z.date(),
-	// responded: z.date(),
+	responded: z.date().optional(),
-	// responseId: z.string()
+	responseId: z.number()
 })
 
 
 export default function SubmissionForm({ stories, pubs, responses }) {
 	const form = useForm<z.infer<typeof FormSchema>>({
 		resolver: zodResolver(FormSchema),
+		defaultValues: {
+			responseId: responses[0].id
+		}
 	})
+	const [isSubCalendarOpen, setIsSubCalendarOpen] = useState(false);
+	const [isRespCalendarOpen, setIsRespCalendarOpen] = useState(false);
 	const storiesSelectItems = stories.map(e => (
 		<SelectItem value={e.id.toString()} key={e.title}>
 			{e.title}
@@ -146,8 +151,8 @@ export default function SubmissionForm({ stories, pubs, responses }) {
 					name="submitted"
 					render={({ field }) => (
 						<FormItem className="flex flex-col">
-							<FormLabel>Date of birth</FormLabel>
+							<FormLabel>Date of submission</FormLabel>
-							<Popover>
+							<Popover open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
 								<PopoverTrigger asChild>
 									<FormControl>
 										<Button
@@ -170,7 +175,7 @@ export default function SubmissionForm({ stories, pubs, responses }) {
 									<Calendar
 										mode="single"
 										selected={field.value}
-										onSelect={field.onChange}
+										onSelect={(e) => { field.onChange(e); setIsSubCalendarOpen(false); }}
 										disabled={(date) =>
 											date > new Date() || date < new Date("1900-01-01")
 										}
@@ -186,8 +191,76 @@ export default function SubmissionForm({ stories, pubs, responses }) {
 					)}
 				/>
 
+				<FormField
+					control={form.control}
+					name="responded"
+					render={({ field }) => (
+						<FormItem className="flex flex-col">
+							<FormLabel>Date of response</FormLabel>
+							<Popover open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
+								<PopoverTrigger asChild>
+									<FormControl>
+										<Button
+											variant={"outline"}
+											className={cn(
+												"w-[240px] pl-3 text-left font-normal",
+												!field.value && "text-muted-foreground"
+											)}
+										>
+											{field.value ? (
+												format(field.value, "PPP")
+											) : (
+												<span>Pick a date</span>
+											)}
+											<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+										</Button>
+									</FormControl>
+								</PopoverTrigger>
+								<PopoverContent className="w-auto p-0" align="start">
+									<Calendar
+										mode="single"
+										selected={field.value}
+										onSelect={(e) => { field.onChange(e); setIsRespCalendarOpen(false); }}
+										disabled={(date) =>
+											date > new Date() || date < new Date("1900-01-01")
+										}
+										initialFocus
+									/>
+								</PopoverContent>
+							</Popover>
+							<FormDescription>
+								The date they wrote back
+							</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
 
 
+				<FormField
+					control={form.control}
+					name="responseId"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Response</FormLabel>
+							<Select onValueChange={field.onChange} defaultValue={field.value}>
+								<FormControl>
+									<SelectTrigger>
+										<SelectValue>
+											<p>{responses?.find(e => e.id === Number(field.value))?.response ?? null}</p>
+										</SelectValue>
+									</SelectTrigger>
+								</FormControl>
+								<SelectContent>
+									{reponsesSelectItems}
+								</SelectContent>
+							</Select>
+							<FormDescription>The market you sent it to</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
 				<Button type="submit">Submit</Button>
 			</form>
 		</Form>