Skip to content

Commit b10ea83

Browse files
ljh12138164ljh12138164
authored
Added support for ant-design (#145)
1 parent db5e2e3 commit b10ea83

35 files changed

+2136
-106
lines changed

‎.changeset/lovely-dancers-give.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
"@autoform/react": major
3+
"@autoform/ant": major
4+
"docs": major
5+
"web": major
6+
---
7+
8+
add ant-design support

‎apps/docs/pages/docs/technical/todo.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { Callout } from "nextra/components";
1919
- UI libraries
2020
- [x] MUI
2121
- [ ] Chakra UI
22-
- [ ] Ant Design
22+
- [x] Ant Design
2323
- [x] Mantine
2424
- [x] shadcn/ui registry
2525
- Schema libraries

‎apps/web/app/globals.css

+4
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,7 @@ a {
3737
color-scheme: dark;
3838
}
3939
}
40+
41+
.no-margin-form .ant-form-item {
42+
margin-bottom: 0;
43+
}

‎apps/web/app/page.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
"use client";
2-
import { Card, CardContent, Typography, Container } from "@mui/material";
3-
import Basics from "../components/Basics";
4-
2+
import { Card, CardContent, Container, Typography } from "@mui/material";
3+
// import Basics from "../components/Basics";
4+
import Ant from "../components/Ant";
5+
// import Mantine from "components/Mantine";
56
export default function Home() {
67
return (
78
<div>
@@ -11,10 +12,11 @@ export default function Home() {
1112
<Typography variant="h4" component="h1" gutterBottom>
1213
Auto Form demo
1314
</Typography>
14-
<Basics />
15+
{/* <Basics /> */}
1516
{/* <Array /> */}
1617
{/* <Mantine /> */}
1718
{/* <Shadcn /> */}
19+
<Ant />
1820
</CardContent>
1921
</Card>
2022
</Container>

‎apps/web/components/Ant.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
"use client";
2+
import { AntAutoForm } from "@autoform/ant";
3+
import { zodSchemaProvider } from "./utils";
4+
5+
const Ant = () => {
6+
return (
7+
<AntAutoForm
8+
schema={zodSchemaProvider}
9+
onSubmit={(data) => {
10+
console.log(JSON.stringify(data, null, 2));
11+
}}
12+
// Ant Design Form Props
13+
AntFormProps={{
14+
layout: "horizontal",
15+
className: "no-margin-form",
16+
onValuesChange: (e) => {
17+
// console.log("inputChange", e);
18+
},
19+
// onFinish: (e) => {
20+
// console.log("onFinish", e);
21+
// },
22+
}}
23+
withSubmit
24+
/>
25+
);
26+
};
27+
28+
export default Ant;

‎apps/web/components/utils.tsx

+113-85
Original file line numberDiff line numberDiff line change
@@ -38,102 +38,129 @@ const zodFormSchema = z.object({
3838
// },
3939
// })
4040
// ),
41-
// username: z
42-
// .string({
43-
// required_error: "Username is required.",
44-
// })
45-
// .min(2, {
46-
// message: "Username must be at least 2 characters.",
47-
// })
48-
// .superRefine(
49-
// fieldConfig({
50-
// description: "You cannot change this later.",
51-
// })
52-
// ),
53-
54-
// password: z
55-
// .string({
56-
// required_error: "Password is required.",
57-
// })
58-
// .describe("Your secure password")
59-
// .min(8, {
60-
// message: "Password must be at least 8 characters.",
61-
// })
62-
// .superRefine(
63-
// fieldConfig({
64-
// description: (
65-
// <>
66-
// Always use a <b>secure password</b>!
67-
// </>
68-
// ),
69-
// inputProps: {
70-
// type: "password",
71-
// },
72-
// })
73-
// ),
74-
75-
// favouriteNumber: z
76-
// .number({
77-
// invalid_type_error: "Favourite number must be a number.",
78-
// })
79-
// .min(1, {
80-
// message: "Favourite number must be at least 1.",
81-
// })
82-
// .max(10, {
83-
// message: "Favourite number must be at most 10.",
84-
// })
85-
// .default(1)
86-
// .optional(),
87-
41+
username: z
42+
.string({
43+
required_error: "Username is required.",
44+
})
45+
.min(2, {
46+
message: "Username must be at least 2 characters.",
47+
})
48+
.superRefine(
49+
fieldConfig({
50+
description: "You cannot change this later.",
51+
})
52+
),
53+
password: z
54+
.string({
55+
required_error: "Password is required.",
56+
})
57+
.describe("Your secure password")
58+
.min(8, {
59+
message: "Password must be at least 8 characters.",
60+
})
61+
.superRefine(
62+
fieldConfig({
63+
description: (
64+
<>
65+
Always use a <b>secure password</b>!
66+
</>
67+
),
68+
inputProps: {
69+
type: "password",
70+
},
71+
})
72+
),
73+
favouriteNumber: z
74+
.number({
75+
invalid_type_error: "Favourite number must be a number.",
76+
})
77+
.min(1, {
78+
message: "Favourite number must be at least 1.",
79+
})
80+
.max(10, {
81+
message: "Favourite number must be at most 10.",
82+
})
83+
.default(1)
84+
.optional(),
8885
acceptTerms: z
8986
.boolean()
9087
.describe("Accept terms and conditions.")
9188
.refine((value) => value, {
9289
message: "You must accept the terms and conditions.",
9390
path: ["acceptTerms"],
9491
}),
95-
96-
// sendMeMails: z
97-
// .boolean()
98-
// .optional()
99-
// .superRefine(
100-
// fieldConfig({
101-
// fieldWrapper: (props: FieldWrapperProps) => {
102-
// return (
103-
// <>
104-
// {props.children}
105-
// <p className="text-muted-foreground text-sm">
106-
// Don't worry, we only send important emails!
107-
// </p>
108-
// </>
109-
// );
110-
// },
111-
// })
112-
// ),
113-
114-
// birthday: z.coerce.date().optional(),
115-
116-
// color: z.enum(["red", "green", "blue"]).optional(),
117-
118-
// // Another enum example
119-
// marshmallows: z
120-
// .enum(["not many", "a few", "a lot", "too many"])
121-
// .describe("How many marshmallows fit in your mouth?"),
122-
123-
// // Native enum example
124-
// sports: z.nativeEnum(Sports).describe("What is your favourite sport?"),
125-
126-
// guests: z.array(
127-
// z.object({
128-
// name: z.string().optional(),
129-
// age: z.coerce.number().optional(),
130-
// })
131-
// ),
132-
92+
sendMeMails: z
93+
.boolean()
94+
.optional()
95+
.superRefine(
96+
fieldConfig({
97+
fieldWrapper: (props: FieldWrapperProps) => {
98+
return (
99+
<>
100+
{props.children}
101+
<p className="text-muted-foreground text-sm">
102+
Don't worry, we only send important emails!
103+
</p>
104+
</>
105+
);
106+
},
107+
})
108+
),
109+
birthday: z.coerce.date({ message: "aaa" }).optional(),
110+
color: z.enum(["red", "green", "blue"]).optional(),
111+
// Another enum example
112+
marshmallows: z
113+
.enum(["not many", "a few", "a lot", "too many"])
114+
.describe("How many marshmallows fit in your mouth?"),
115+
// Native enum example
116+
sports: z.nativeEnum(Sports).describe("What is your favourite sport?"),
117+
guests: z.array(
118+
z.object({
119+
name: z.string(),
120+
age: z.coerce.number().optional(),
121+
location: z.object({
122+
city: z.string(),
123+
country: z.string().optional(),
124+
test: z.object({
125+
name: z.string(),
126+
age: z.number(),
127+
test: z.object({
128+
name: z.string(),
129+
age: z.number(),
130+
test: z.object({
131+
name: z.string(),
132+
age: z.number(),
133+
test: z.object({
134+
name: z.string(),
135+
age: z.number(),
136+
}),
137+
}),
138+
}),
139+
}),
140+
}),
141+
})
142+
),
133143
// location: z.object({
134144
// city: z.string(),
135145
// country: z.string().optional(),
146+
// test: z.object({
147+
// name: z.string(),
148+
// age: z.number(),
149+
// test: z.object({
150+
// name: z.string(),
151+
// age: z.number(),
152+
// test: z.object({
153+
// name: z.string(),
154+
// age: z.number(),
155+
// test: z.object({
156+
// name: z.string(),
157+
// age: z.number(),
158+
// }),
159+
// }),
160+
// }),
161+
// }),
136162
// }),
163+
// obj
137164
});
138165

139166
export const zodSchemaProvider = new ZodProvider(zodFormSchema);
@@ -161,6 +188,7 @@ const yupFormSchema = object({
161188
name: string().required(),
162189
})
163190
),
191+
abc: date().optional(),
164192
sport: mixed().oneOf(Object.values(Sports)),
165193
hobbies: array().of(string()),
166194
});

‎apps/web/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"dependencies": {
1313
"@autoform/mantine": "*",
1414
"@autoform/mui": "*",
15+
"@autoform/ant": "*",
1516
"@autoform/shadcn": "*",
1617
"@autoform/yup": "*",
1718
"@autoform/zod": "*",

0 commit comments

Comments
 (0)