From b18b8e31a16834f5758d358ffa6c78a6896c1cb5 Mon Sep 17 00:00:00 2001
From: Edmund Hung <me@edmund.dev>
Date: Sat, 22 Jul 2023 12:34:40 +0200
Subject: [PATCH] fix tests and docs

---
 docs/checkbox-and-radio-group.md      | 13 +++-----
 playground/app/routes/collection.tsx  | 45 ++++++---------------------
 tests/integrations/collection.spec.ts |  2 +-
 3 files changed, 16 insertions(+), 44 deletions(-)

diff --git a/docs/checkbox-and-radio-group.md b/docs/checkbox-and-radio-group.md
index a70308bc..aa43cf17 100644
--- a/docs/checkbox-and-radio-group.md
+++ b/docs/checkbox-and-radio-group.md
@@ -39,7 +39,6 @@ function Example() {
           .collection(color, {
             type: 'radio',
             options: ['red', 'green', 'blue'],
-            ariaAttributes: true,
           })
           .map((props, index) => (
             <div key={index}>
@@ -57,7 +56,7 @@ function Example() {
 
 ## Checkbox
 
-Setting up a checkbox group would be similar to a radio group with `type` being set to `checkbox`. However, there is one caveat when validating a checkbox group: Conform will transform the value to an array only when there are more than one checkboxes selected. To ensure a consistent data structure, you need to preprocess the data as shown in the snippet.
+Setting up a checkbox group would be similar to a radio group except the `type` is set to `checkbox`.
 
 ```tsx
 import { useForm } from '@conform-to/react';
@@ -65,11 +64,10 @@ import { parse } from '@conform-to/zod';
 import { z } from 'zod';
 
 const schema = z.object({
-  answer: z.preprocess(
-    // To ensure the value is always an array
-    (value) => !Array.isArray(value) ? [value] : value,
-    z.string().array().nonEmpty('At least one answer is required')
-  ),
+  answer: z
+    .string()
+    .array()
+    .nonEmpty('At least one answer is required'),
 });
 
 function Example() {
@@ -87,7 +85,6 @@ function Example() {
           .collection(answer, {
             type: 'checkbox',
             options: ['a', 'b', 'c', 'd'],
-            ariaAttributes: true,
           })
           .map((props, index) => (
             <div key={index}>
diff --git a/playground/app/routes/collection.tsx b/playground/app/routes/collection.tsx
index d39801e3..98269ce9 100644
--- a/playground/app/routes/collection.tsx
+++ b/playground/app/routes/collection.tsx
@@ -1,39 +1,14 @@
-import { conform, parse, useForm } from '@conform-to/react';
+import { conform, useForm } from '@conform-to/react';
+import { parse } from '@conform-to/zod';
 import { type LoaderArgs, type ActionArgs, json } from '@remix-run/node';
 import { Form, useActionData, useLoaderData } from '@remix-run/react';
+import { z } from 'zod';
 import { Playground, Field } from '~/components';
 
-interface Schema {
-	singleChoice: string;
-	multipleChoice: string;
-}
-
-function parseForm(formData: FormData) {
-	return parse(formData, {
-		resolve({ singleChoice, multipleChoice }) {
-			const error: Record<string, string> = {};
-
-			if (!singleChoice) {
-				error.singleChoice = 'Required';
-			}
-
-			if (!multipleChoice) {
-				error.multipleChoice = 'Required';
-			}
-
-			if (error.singleChoice || error.multipleChoice) {
-				return { error };
-			}
-
-			return {
-				value: {
-					singleChoice,
-					multipleChoice,
-				},
-			};
-		},
-	});
-}
+const schema = z.object({
+	singleChoice: z.string({ required_error: 'Required' }),
+	multipleChoice: z.string().array().min(1, 'Required'),
+});
 
 export async function loader({ request }: LoaderArgs) {
 	const url = new URL(request.url);
@@ -45,7 +20,7 @@ export async function loader({ request }: LoaderArgs) {
 
 export async function action({ request }: ActionArgs) {
 	const formData = await request.formData();
-	const submission = parseForm(formData);
+	const submission = parse(formData, { schema });
 
 	return json(submission);
 }
@@ -53,12 +28,12 @@ export async function action({ request }: ActionArgs) {
 export default function Example() {
 	const { noClientValidate } = useLoaderData<typeof loader>();
 	const lastSubmission = useActionData<typeof action>();
-	const [form, { singleChoice, multipleChoice }] = useForm<Schema>({
+	const [form, { singleChoice, multipleChoice }] = useForm({
 		id: 'collection',
 		lastSubmission,
 		shouldRevalidate: 'onInput',
 		onValidate: !noClientValidate
-			? ({ formData }) => parseForm(formData)
+			? ({ formData }) => parse(formData, { schema })
 			: undefined,
 	});
 
diff --git a/tests/integrations/collection.spec.ts b/tests/integrations/collection.spec.ts
index 3d6f1b74..171ceaf4 100644
--- a/tests/integrations/collection.spec.ts
+++ b/tests/integrations/collection.spec.ts
@@ -28,7 +28,7 @@ async function runValidationScenario(page: Page) {
 				error: {},
 				value: {
 					singleChoice: 'y',
-					multipleChoice: 'c',
+					multipleChoice: ['c'],
 				},
 			},
 			null,