From fec2e600c3cc1ceea0e19cdc87a0b7036b74d468 Mon Sep 17 00:00:00 2001
From: pwli0755 <lipw0755@gmail.com>
Date: Wed, 28 Aug 2024 15:04:12 +0800
Subject: [PATCH 1/3] chore: enable multiple-type toggle-group in shadcn-ui
 examples

---
 examples/shadcn-ui/src/App.tsx                | 22 ++++++++++++++++++-
 .../src/components/conform/ToggleGroup.tsx    | 22 +++++++++++++++----
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/examples/shadcn-ui/src/App.tsx b/examples/shadcn-ui/src/App.tsx
index ecd99efb..5d551746 100644
--- a/examples/shadcn-ui/src/App.tsx
+++ b/examples/shadcn-ui/src/App.tsx
@@ -44,6 +44,7 @@ const UserSubscriptionSchema = z.object({
 	accountType: z.enum(['personal', 'business'], {
 		required_error: 'You must select an account type',
 	}),
+	accountTypes: z.array(z.enum(['personal', 'business'])),
 	interests: z
 		.array(z.string())
 		.min(3, 'You must select at least three interest'),
@@ -54,7 +55,11 @@ function App() {
 	const [form, fields] = useForm({
 		id: 'signup',
 		onValidate({ formData }) {
-			return parseWithZod(formData, { schema: UserSubscriptionSchema });
+			const result = parseWithZod(formData, { schema: UserSubscriptionSchema });
+			if (result.status==='error') {
+				console.error(result);
+			}
+			return result
 		},
 		onSubmit(e) {
 			e.preventDefault();
@@ -164,6 +169,21 @@ function App() {
 						<FieldError>{fields.accountType.errors}</FieldError>
 					)}
 				</Field>
+				<Field>
+					<Label htmlFor={fields.accountTypes.id}>Account types</Label>
+					<ToggleGroupConform
+						type="multiple"
+						meta={fields.accountTypes}
+						items={[
+							{ value: 'personal', label: 'Personal' },
+							{ value: 'business', label: 'Business' },
+							{ value: 'business2', label: 'Business2' },
+						]}
+					/>
+					{fields.accountTypes.errors && (
+						<FieldError>{fields.accountTypes.errors}</FieldError>
+					)}
+				</Field>
 				<Field>
 					<fieldset>Interests</fieldset>
 					<CheckboxGroupConform
diff --git a/examples/shadcn-ui/src/components/conform/ToggleGroup.tsx b/examples/shadcn-ui/src/components/conform/ToggleGroup.tsx
index 47da3b2e..da0a9b87 100644
--- a/examples/shadcn-ui/src/components/conform/ToggleGroup.tsx
+++ b/examples/shadcn-ui/src/components/conform/ToggleGroup.tsx
@@ -6,19 +6,20 @@ import { ComponentProps, ElementRef, useRef } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 
 export const ToggleGroupConform = ({
+	type = 'single',
 	meta,
 	items,
 	...props
 }: {
 	items: Array<{ value: string; label: string }>;
-	meta: FieldMetadata<string>;
+	meta: FieldMetadata<string | string[]>;
 } & Omit<ComponentProps<typeof ToggleGroup>, 'defaultValue'>) => {
 	const toggleGroupRef = useRef<ElementRef<typeof ToggleGroup>>(null);
-	const control = useControl(meta);
+	const control = useControl<string | string[]>(meta);
 
 	return (
 		<>
-			<input
+			{type === 'single' ? <input
 				name={meta.name}
 				ref={control.register}
 				className="sr-only"
@@ -27,9 +28,22 @@ export const ToggleGroupConform = ({
 				onFocus={() => {
 					toggleGroupRef.current?.focus();
 				}}
-			/>
+			/> : control.value ? (control.value as string[]).map(v => <input
+				// use the same name as the field, html form will handle the rest
+				name={meta.name} 
+				className="sr-only"
+				tabIndex={-1}
+				value={v}
+				// we just care the value to be submitted
+				onChange={() => { }}
+				onFocus={() => {
+					toggleGroupRef.current?.focus();
+				}}
+			/>) : null}
+
 			<ToggleGroup
 				{...props}
+				type={type}
 				ref={toggleGroupRef}
 				value={control.value}
 				onValueChange={(value) => {

From 9ba244ae13dc2e36f0ab73a5bb930d2d5ed6be05 Mon Sep 17 00:00:00 2001
From: pwli0755 <lipw0755@gmial.com>
Date: Wed, 28 Aug 2024 23:15:32 +0800
Subject: [PATCH 2/3] fix auto revalidate

---
 examples/shadcn-ui/src/App.tsx                |  7 +++---
 .../src/components/conform/ToggleGroup.tsx    | 22 ++++++++++++-------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/examples/shadcn-ui/src/App.tsx b/examples/shadcn-ui/src/App.tsx
index 5d551746..69737214 100644
--- a/examples/shadcn-ui/src/App.tsx
+++ b/examples/shadcn-ui/src/App.tsx
@@ -44,7 +44,7 @@ const UserSubscriptionSchema = z.object({
 	accountType: z.enum(['personal', 'business'], {
 		required_error: 'You must select an account type',
 	}),
-	accountTypes: z.array(z.enum(['personal', 'business'])),
+	accountTypes: z.array(z.enum(['personal', 'business'])).min(1,'You must select at least one account type'),
 	interests: z
 		.array(z.string())
 		.min(3, 'You must select at least three interest'),
@@ -180,8 +180,9 @@ function App() {
 							{ value: 'business2', label: 'Business2' },
 						]}
 					/>
-					{fields.accountTypes.errors && (
-						<FieldError>{fields.accountTypes.errors}</FieldError>
+					{fields.accountTypes.allErrors && (
+						<FieldError>{
+							Object.values(fields.accountTypes.allErrors).flat()}</FieldError>
 					)}
 				</Field>
 				<Field>
diff --git a/examples/shadcn-ui/src/components/conform/ToggleGroup.tsx b/examples/shadcn-ui/src/components/conform/ToggleGroup.tsx
index da0a9b87..36597336 100644
--- a/examples/shadcn-ui/src/components/conform/ToggleGroup.tsx
+++ b/examples/shadcn-ui/src/components/conform/ToggleGroup.tsx
@@ -28,18 +28,24 @@ export const ToggleGroupConform = ({
 				onFocus={() => {
 					toggleGroupRef.current?.focus();
 				}}
-			/> : control.value ? (control.value as string[]).map(v => <input
-				// use the same name as the field, html form will handle the rest
-				name={meta.name} 
+			/> : <select
+				multiple
+				name={meta.name}
 				className="sr-only"
-				tabIndex={-1}
-				value={v}
-				// we just care the value to be submitted
-				onChange={() => { }}
+				ref={control.register}
 				onFocus={() => {
 					toggleGroupRef.current?.focus();
 				}}
-			/>) : null}
+				defaultValue={meta.initialValue}
+				tabIndex={-1}
+			>
+				{items.map((item) => (
+					<option value={item.value} key={item.value}>
+						{item.label}
+					</option>
+				))}
+			</select>
+			}
 
 			<ToggleGroup
 				{...props}

From 29dcf9e732a81b6ab7a0d3ada06d6c08405680cd Mon Sep 17 00:00:00 2001
From: pwli0755 <lipw0755@gmail.com>
Date: Sat, 31 Aug 2024 15:39:21 +0800
Subject: [PATCH 3/3] revert console error log

---
 examples/shadcn-ui/src/App.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/examples/shadcn-ui/src/App.tsx b/examples/shadcn-ui/src/App.tsx
index 69737214..b1e07e4e 100644
--- a/examples/shadcn-ui/src/App.tsx
+++ b/examples/shadcn-ui/src/App.tsx
@@ -55,11 +55,7 @@ function App() {
 	const [form, fields] = useForm({
 		id: 'signup',
 		onValidate({ formData }) {
-			const result = parseWithZod(formData, { schema: UserSubscriptionSchema });
-			if (result.status==='error') {
-				console.error(result);
-			}
-			return result
+			return parseWithZod(formData, { schema: UserSubscriptionSchema });
 		},
 		onSubmit(e) {
 			e.preventDefault();