feat(form): add AsyncValidatorResolver to enhance validation and update package.json with async-validator dependency

Author: Ohh-889

packages/ui/src/components/form/index.ts

@@ -2,8 +2,6 @@
 
 export {
   ComputedField as FormComputedField,
-  createStandardResolver,
-  createZodResolver,
   Form,
   List as FormList,
   useEffectField,

playground/package.json

@@ -17,7 +17,12 @@
   "bugs": {
     "url": "https://github.com/Ohh-889/soybean-react-ui/issues"
   },
-  "keywords": ["UI", "tailwind-css", "shadcn-ui", "react"],
+  "keywords": [
+    "UI",
+    "tailwind-css",
+    "shadcn-ui",
+    "react"
+  ],
   "scripts": {
     "build": "next build",
     "build:ui": "pnpm --filter soybean-react-ui build",
@@ -34,6 +39,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^5.2.1",
+    "async-validator": "^4.2.5",
     "embla-carousel-autoplay": "8.6.0",
     "grapheme-splitter": "1.0.4",
     "lucide-react": "0.525.0",

playground/src/app/(demo)/form/modules/AsyncValidatorResolver.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import Schema from 'async-validator';
+import type { RuleItem } from 'async-validator';
+import { Button, Card, Form, FormField, Input, useForm } from 'soybean-react-ui';
+
+// 定义 async-validator 规则
+const descriptor: Record<string, RuleItem | RuleItem[]> = {
+  email: { message: 'Email is not valid', required: true, type: 'email' },
+
+  username: { message: 'Username must be at least 3 characters', min: 3, required: true, type: 'string' }
+};
+
+const validator = new Schema(descriptor);
+
+type Inputs = {
+  email: string;
+
+  username: string;
+};
+
+const initialValues: Inputs = {
+  email: '',
+  username: ''
+};
+
+function normalizeKeys(name?: string | string[]): string[] | undefined {
+  if (!name) return undefined;
+  if (typeof name === 'string') {
+    return [name];
+  }
+  return name;
+}
+// 将 async-validator 封装成符合 GenericResolver 的函数
+async function asyncValidatorResolver(state: Inputs, name: string | string[] | undefined) {
+  try {
+    await validator.validate(state, {
+      keys: normalizeKeys(name)
+    });
+    return []; // ✅ 校验通过
+  } catch (err: any) {
+    // ❌ 校验失败
+    return (
+      err.errors?.map((e: any) => ({
+        message: e.message,
+        path: e.field ? [e.field] : []
+      })) ?? []
+    );
+  }
+}
+
+const AsyncValidatorDemo = () => {
+  const [form] = useForm<Inputs>();
+
+  return (
+    <Card title="Form with AsyncValidator (function resolver)">
+      <Form
+        className="w-[480px] max-sm:w-full space-y-4"
+        form={form}
+        initialValues={initialValues}
+        schema={asyncValidatorResolver} // ✅ 非标准库 → 传函数
+      >
+        <FormField
+          label="Username"
+          name="username"
+        >
+          <Input />
+        </FormField>
+
+        <FormField
+          label="Email"
+          name="email"
+        >
+          <Input />
+        </FormField>
+
+        <div className="flex gap-2">
+          <Button type="submit">Submit</Button>
+        </div>
+      </Form>
+    </Card>
+  );
+};
+
+export default AsyncValidatorDemo;

playground/src/app/(demo)/form/page.tsx

@@ -1,3 +1,4 @@
+import AsyncValidatorResolver from './modules/AsyncValidatorResolver';
 import ClearDestroy from './modules/ClearDestroy';
 import ComputedDemo from './modules/ComputedDemo';
 import Default from './modules/Default';
@@ -33,6 +34,8 @@ const FormPage = () => {
 
       <ZodResolver />
 
+      <AsyncValidatorResolver />
+
       <UseWatch />
 
       <UseSelector />