Skip to content

Commit 62621ca

Browse files
adityacodepublicadityacodepublic
authored
feat: add chakra ui integration (#156)
* fix: resolved Mantine fieldConfig.description, mantine-zod advanced features Cypress test, Select not working fix, key props spread * date field key props spread * added test wrapper to 'renders select field correctly' test * re added the conditional theme provider rendering * refined ant package, restored react package to previous * refactor(ant): improve implementation, fix bugs, and add tests * restore default ant autoform props * added changeset * added changeset version and changelog * commit deleted changeset * rename AutoFormProps of packages/ant/AutoForm in camelCase * ant package version 1.0.0 -> 1.1.0 * feat: integrate chakra ui * added cypress tests for chakra ui * fix: chakra styles * object wrapper styles * fixed: focus on error, for all fields. * fix: ant package field focus on error * update web page imports * feat: integrate chakra ui * added cypress tests for chakra ui * fix: chakra styles * object wrapper styles * fixed: focus on error, for all fields. * update web page imports * test(chakra): Add Cypress tests for chakra package, added name attribute to buttons in wrappers * fix: select field accept input props * fix: date and select field bugs * chore: delete unnecessary components (dialog and drawer) * chore: update ant package readme * chore: removed avatar component chakra * chore: remove slider and tooltip form chakra package * chore: update all.cy.tsx * fix:added some tests which were not added in the all.cy * docs: Todo: ticked Chakra UI * removed --concurrency=12
1 parent f8c5505 commit 62621ca

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+2841
-64
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { Callout } from "nextra/components";
1818

1919
- UI libraries
2020
- [x] MUI
21-
- [ ] Chakra UI
21+
- [x] Chakra UI
2222
- [x] Ant Design
2323
- [x] Mantine
2424
- [x] shadcn/ui registry

‎apps/web/app/layout.tsx

+4-8
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
import type { Metadata } from "next";
2-
import "./globals.css";
3-
import "@mantine/core/styles.css";
4-
import "@autoform/shadcn/globals.css";
5-
import { createTheme, MantineProvider } from "@mantine/core";
6-
import { ColorSchemeScript } from "@mantine/core";
2+
// import "./globals.css";
3+
// import { ColorSchemeScript } from "@mantine/core";
74

8-
const theme = createTheme({});
95

106
export const metadata: Metadata = {
117
title: "AutoForm Demo",
@@ -20,10 +16,10 @@ export default function RootLayout({
2016
return (
2117
<html lang="en">
2218
<head>
23-
<ColorSchemeScript />
19+
{/* <ColorSchemeScript /> */}
2420
</head>
2521
<body>
26-
<MantineProvider theme={theme}>{children}</MantineProvider>
22+
{children}
2723
</body>
2824
</html>
2925
);

‎apps/web/app/page.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
"use client";
22
import { Card, CardContent, Container, Typography } from "@mui/material";
3-
// import Basics from "../components/Basics";
4-
import Ant from "../components/Ant";
3+
// import Ant from "../components/Ant";
4+
import Chakra from "components/Chakra";
55
// import Mantine from "components/Mantine";
6+
// import Array from "components/Array";
7+
// import Basics from "../components/Basics";
8+
69
export default function Home() {
710
return (
811
<div>
@@ -16,7 +19,8 @@ export default function Home() {
1619
{/* <Array /> */}
1720
{/* <Mantine /> */}
1821
{/* <Shadcn /> */}
19-
<Ant />
22+
{/* <Ant /> */}
23+
<Chakra/>
2024
</CardContent>
2125
</Card>
2226
</Container>

‎apps/web/components/Basics.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { AutoForm } from "@autoform/shadcn/components/ui/autoform/AutoForm";
2-
import { ZodProvider } from "@autoform/zod";
3-
import { zodSchemaProvider } from "./utils";
42
import { AutoFormFieldProps } from "@autoform/react";
3+
import { zodSchemaProvider } from "./utils";
4+
import "@autoform/shadcn/globals.css";
55

66
function Basics() {
77
return (

‎apps/web/components/Chakra.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { AutoForm, fieldConfig } from "@autoform/chakra";
2+
import { zodSchemaProvider } from "./utils";
3+
4+
function Chakra() {
5+
return (
6+
<AutoForm
7+
schema={zodSchemaProvider}
8+
onSubmit={(data) => {
9+
console.log(JSON.stringify(data, null, 2));
10+
}}
11+
colorModeProps={{
12+
enableSystem: false,
13+
}}
14+
withSubmit
15+
/>
16+
);
17+
}
18+
19+
export default Chakra;

‎apps/web/components/Mantine.tsx

+12-7
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
1+
import { createTheme, MantineProvider } from "@mantine/core";
12
import { AutoForm, fieldConfig } from "@autoform/mantine";
23
import { zodSchemaProvider } from "./utils";
4+
import "@mantine/core/styles.css";
35

46
function Mantine() {
7+
const theme = createTheme({});
58
return (
6-
<AutoForm
7-
schema={zodSchemaProvider}
8-
onSubmit={(data) => {
9-
console.log(JSON.stringify(data, null, 2));
10-
}}
11-
withSubmit
12-
/>
9+
<MantineProvider theme={theme}>
10+
<AutoForm
11+
schema={zodSchemaProvider}
12+
onSubmit={(data) => {
13+
console.log(JSON.stringify(data, null, 2));
14+
}}
15+
withSubmit
16+
/>
17+
</MantineProvider>
1318
);
1419
}
1520

‎apps/web/cypress/component/autoform/all.cy.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
import "./ant-zod/all.cy"
2+
import "./chakra-zod/all.cy"
3+
import "./mantine-zod/all.cy";
14
import "./mui-yup/all.cy";
25
import "./mui-zod/all.cy";
3-
import "./mantine-zod/all.cy";
46
import "./shadcn-zod/all.cy";
5-
import "./ant-zod/all.cy"

‎apps/web/cypress/component/autoform/ant-zod/all.cy.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import "./basic.cy";
22
import "./arrays.cy";
33
import "./subobjects.cy";
4-
import "./advanced-features.cy";
4+
import "./form-props.cy";
55
import "./validation.cy";
6+
import "./custom-fields.cy";
67
import "./controlled-form.cy";
78
import "./ui-customization.cy";
9+
import "./advanced-features.cy";

‎apps/web/cypress/component/autoform/chakra-zod/advanced-features.cy.tsx

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import React from "react";
2+
import { AutoForm } from "@autoform/chakra";
3+
import { ZodProvider, fieldConfig } from "@autoform/zod";
4+
import { z } from "zod";
5+
6+
describe("AutoForm Advanced Features Tests", () => {
7+
const advancedSchema = z.object({
8+
username: z
9+
.string()
10+
.min(3, "Username must be at least 3 characters")
11+
.superRefine(
12+
fieldConfig({
13+
description: "Choose a unique username",
14+
order: 1,
15+
inputProps: {
16+
placeholder: "Enter username",
17+
},
18+
})
19+
),
20+
password: z
21+
.string()
22+
.min(8, "Password must be at least 8 characters")
23+
.superRefine(
24+
fieldConfig({
25+
description: "Use a strong password",
26+
order: 2,
27+
inputProps: {
28+
type: "password",
29+
},
30+
})
31+
),
32+
favoriteColor: z.enum(["red", "green", "blue"]).superRefine(
33+
fieldConfig({
34+
fieldType: "select",
35+
order: 3,
36+
})
37+
),
38+
bio: z
39+
.string()
40+
.optional()
41+
.superRefine(
42+
fieldConfig({
43+
order: 4,
44+
})
45+
),
46+
});
47+
48+
const schemaProvider = new ZodProvider(advancedSchema);
49+
50+
it("renders fields in the correct order", () => {
51+
cy.mount(
52+
<AutoForm
53+
schema={schemaProvider}
54+
onSubmit={cy.stub().as("onSubmit")}
55+
withSubmit
56+
/>
57+
);
58+
59+
cy.get(".chakra-field__root")
60+
.eq(0)
61+
.find("input")
62+
.should("have.attr", "name", "username");
63+
cy.get(".chakra-field__root")
64+
.eq(1)
65+
.find("input")
66+
.should("have.attr", "name", "password");
67+
cy.get(".chakra-field__root").eq(2).find("select");
68+
cy.get(".chakra-field__root")
69+
.eq(3)
70+
.find("input")
71+
.should("have.attr", "name", "bio");
72+
});
73+
74+
it("displays field descriptions", () => {
75+
cy.mount(
76+
<AutoForm
77+
schema={schemaProvider}
78+
onSubmit={cy.stub().as("onSubmit")}
79+
withSubmit
80+
/>
81+
);
82+
83+
cy.contains("Choose a unique username").should("be.visible");
84+
cy.contains("Use a strong password").should("be.visible");
85+
});
86+
87+
it("applies custom input props", () => {
88+
cy.mount(
89+
<AutoForm
90+
schema={schemaProvider}
91+
onSubmit={cy.stub().as("onSubmit")}
92+
withSubmit
93+
/>
94+
);
95+
96+
cy.get('input[name="username"]').should(
97+
"have.attr",
98+
"placeholder",
99+
"Enter username"
100+
);
101+
cy.get('input[name="password"]').should("have.attr", "type", "password");
102+
});
103+
104+
it("renders select field correctly", () => {
105+
cy.mount(
106+
<AutoForm
107+
schema={schemaProvider}
108+
onSubmit={cy.stub().as("onSubmit")}
109+
withSubmit
110+
/>
111+
);
112+
113+
cy.get('.chakra-select__root').should("exist").within(() => {
114+
cy.get('select').should("have.attr", "name", "favoriteColor");
115+
}).click();
116+
117+
cy.get('.chakra-select__content').should("exist").within(() => {
118+
cy.get('.chakra-select__item').should('exist').should('contain', 'red');
119+
cy.get('.chakra-select__item').should('exist').should('contain', 'green');
120+
cy.get('.chakra-select__item').should('exist').should('contain', 'blue');
121+
});
122+
123+
});
124+
125+
it("renders textarea field correctly", () => {
126+
cy.mount(
127+
<AutoForm
128+
schema={schemaProvider}
129+
onSubmit={cy.stub().as("onSubmit")}
130+
withSubmit
131+
/>
132+
);
133+
134+
cy.get('input[name="bio"]').should("exist");
135+
});
136+
});

‎apps/web/cypress/component/autoform/chakra-zod/all.cy.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import "./basic.cy";
2+
import "./arrays.cy";
3+
import "./subobjects.cy";
4+
import "./form-props.cy";
5+
import "./validation.cy";
6+
import "./custom-fields.cy";
7+
import "./controlled-form.cy";
8+
import "./ui-customization.cy";
9+
import "./advanced-features.cy";

‎apps/web/cypress/component/autoform/chakra-zod/arrays.cy.tsx

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React from "react";
2+
import { AutoForm } from "@autoform/chakra";
3+
import { ZodProvider } from "@autoform/zod";
4+
import { z } from "zod";
5+
6+
describe("AutoForm Arrays Tests", () => {
7+
const arraySchema = z.object({
8+
tags: z.array(z.string()),
9+
friends: z.array(
10+
z.object({
11+
name: z.string(),
12+
age: z.coerce.number(),
13+
})
14+
),
15+
});
16+
17+
const schemaProvider = new ZodProvider(arraySchema);
18+
19+
it("renders array fields correctly", () => {
20+
cy.mount(
21+
<AutoForm
22+
schema={schemaProvider}
23+
onSubmit={cy.stub().as("onSubmit")}
24+
withSubmit
25+
/>
26+
);
27+
28+
cy.get('button[name="add-array-item"]').eq(0).should('exist');
29+
cy.get('button[name="add-array-item"]').eq(1).should('exist');
30+
});
31+
32+
it("allows adding and removing array items", () => {
33+
cy.mount(
34+
<AutoForm
35+
schema={schemaProvider}
36+
onSubmit={cy.stub().as("onSubmit")}
37+
withSubmit
38+
/>
39+
);
40+
41+
// Add tags
42+
cy.get('button[name="add-array-item"]').eq(0).click();
43+
cy.get('input[name="tags.0"]').type("tag1");
44+
cy.get('button[name="add-array-item"]').eq(0).click();
45+
cy.get('input[name="tags.1"]').type("tag2");
46+
47+
// Add friends
48+
cy.get('button[name="add-array-item"]').eq(1).click();
49+
cy.get('input[name="friends.0.name"]').type("Alice");
50+
cy.get('input[name="friends.0.age"]').type("25");
51+
cy.get('button[name="add-array-item"]').eq(1).click();
52+
cy.get('input[name="friends.1.name"]').type("Bob");
53+
cy.get('input[name="friends.1.age"]').type("30");
54+
55+
// Remove a tag and a friend
56+
cy.get('button[name="remove-array-item"]').eq(0).click();
57+
cy.get('button[name="remove-array-item"]').eq(1).click();
58+
59+
cy.get('button[type="submit"]').click();
60+
61+
cy.get("@onSubmit").should("have.been.calledOnce");
62+
cy.get("@onSubmit").should("have.been.calledWith", {
63+
tags: ["tag2"],
64+
friends: [{ name: "Bob", age: 30 }],
65+
});
66+
});
67+
});

0 commit comments

Comments
 (0)