vantezzen · adityacodepublic · Jan 15, 2025 · Jan 15, 2025 · Jan 15, 2025 · Jan 16, 2025
diff --git a/apps/docs/pages/docs/technical/todo.mdx b/apps/docs/pages/docs/technical/todo.mdx
@@ -18,7 +18,7 @@ import { Callout } from "nextra/components";
 
 - UI libraries
   - [x] MUI
-  - [ ] Chakra UI
+  - [x] Chakra UI
   - [x] Ant Design
   - [x] Mantine
   - [x] shadcn/ui registry

diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -1,11 +1,7 @@
 import type { Metadata } from "next";
-import "./globals.css";
-import "@mantine/core/styles.css";
-import "@autoform/shadcn/globals.css";
-import { createTheme, MantineProvider } from "@mantine/core";
-import { ColorSchemeScript } from "@mantine/core";
+// import "./globals.css";
+// import { ColorSchemeScript } from "@mantine/core";
 
-const theme = createTheme({});
 
 export const metadata: Metadata = {
   title: "AutoForm Demo",
@@ -20,10 +16,10 @@ export default function RootLayout({
   return (
     <html lang="en">
       <head>
-        <ColorSchemeScript />
+        {/* <ColorSchemeScript /> */}
       </head>
       <body>
-        <MantineProvider theme={theme}>{children}</MantineProvider>
+        {children}
       </body>
     </html>
   );

diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
@@ -1,8 +1,11 @@
 "use client";
 import { Card, CardContent, Container, Typography } from "@mui/material";
-// import Basics from "../components/Basics";
-import Ant from "../components/Ant";
+// import Ant from "../components/Ant";
+import Chakra from "components/Chakra";
 // import Mantine from "components/Mantine";
+// import Array from "components/Array";
+// import Basics from "../components/Basics";
+
 export default function Home() {
   return (
     <div>
@@ -16,7 +19,8 @@ export default function Home() {
             {/* <Array /> */}
             {/* <Mantine /> */}
             {/* <Shadcn /> */}
-            <Ant />
+            {/* <Ant /> */}
+            <Chakra/>
           </CardContent>
         </Card>
       </Container>

diff --git a/apps/web/components/Basics.tsx b/apps/web/components/Basics.tsx
@@ -1,7 +1,7 @@
 import { AutoForm } from "@autoform/shadcn/components/ui/autoform/AutoForm";
-import { ZodProvider } from "@autoform/zod";
-import { zodSchemaProvider } from "./utils";
 import { AutoFormFieldProps } from "@autoform/react";
+import { zodSchemaProvider } from "./utils";
+import "@autoform/shadcn/globals.css";
 
 function Basics() {
   return (

diff --git a/apps/web/components/Chakra.tsx b/apps/web/components/Chakra.tsx
@@ -0,0 +1,19 @@
+import { AutoForm, fieldConfig } from "@autoform/chakra";
+import { zodSchemaProvider } from "./utils";
+
+function Chakra() {
+  return (
+    <AutoForm
+      schema={zodSchemaProvider}
+      onSubmit={(data) => {
+        console.log(JSON.stringify(data, null, 2));
+      }}
+      colorModeProps={{
+        enableSystem: false,
+      }}
+      withSubmit
+    />
+  );
+}
+
+export default Chakra;
diff --git a/apps/web/components/Mantine.tsx b/apps/web/components/Mantine.tsx
@@ -1,15 +1,20 @@
+import { createTheme, MantineProvider } from "@mantine/core";
 import { AutoForm, fieldConfig } from "@autoform/mantine";
 import { zodSchemaProvider } from "./utils";
+import "@mantine/core/styles.css";
 
 function Mantine() {
+  const theme = createTheme({});
   return (
-    <AutoForm
-      schema={zodSchemaProvider}
-      onSubmit={(data) => {
-        console.log(JSON.stringify(data, null, 2));
-      }}
-      withSubmit
-    />
+    <MantineProvider theme={theme}>
+      <AutoForm
+        schema={zodSchemaProvider}
+        onSubmit={(data) => {
+          console.log(JSON.stringify(data, null, 2));
+        }}
+        withSubmit
+      />
+    </MantineProvider>
   );
 }
 

diff --git a/apps/web/cypress/component/autoform/all.cy.tsx b/apps/web/cypress/component/autoform/all.cy.tsx
@@ -1,5 +1,6 @@
+import "./ant-zod/all.cy"
+import "./chakra-zod/all.cy"
+import "./mantine-zod/all.cy";
 import "./mui-yup/all.cy";
 import "./mui-zod/all.cy";
-import "./mantine-zod/all.cy";
 import "./shadcn-zod/all.cy";
-import "./ant-zod/all.cy"
diff --git a/apps/web/cypress/component/autoform/ant-zod/all.cy.tsx b/apps/web/cypress/component/autoform/ant-zod/all.cy.tsx
@@ -1,7 +1,9 @@
 import "./basic.cy";
 import "./arrays.cy";
 import "./subobjects.cy";
-import "./advanced-features.cy";
+import "./form-props.cy";
 import "./validation.cy";
+import "./custom-fields.cy";
 import "./controlled-form.cy";
 import "./ui-customization.cy";
+import "./advanced-features.cy";
diff --git a/apps/web/cypress/component/autoform/chakra-zod/advanced-features.cy.tsx b/apps/web/cypress/component/autoform/chakra-zod/advanced-features.cy.tsx
@@ -0,0 +1,136 @@
+import React from "react";
+import { AutoForm } from "@autoform/chakra";
+import { ZodProvider, fieldConfig } from "@autoform/zod";
+import { z } from "zod";
+
+describe("AutoForm Advanced Features Tests", () => {
+  const advancedSchema = z.object({
+    username: z
+      .string()
+      .min(3, "Username must be at least 3 characters")
+      .superRefine(
+        fieldConfig({
+          description: "Choose a unique username",
+          order: 1,
+          inputProps: {
+            placeholder: "Enter username",
+          },
+        })
+      ),
+    password: z
+      .string()
+      .min(8, "Password must be at least 8 characters")
+      .superRefine(
+        fieldConfig({
+          description: "Use a strong password",
+          order: 2,
+          inputProps: {
+            type: "password",
+          },
+        })
+      ),
+    favoriteColor: z.enum(["red", "green", "blue"]).superRefine(
+      fieldConfig({
+        fieldType: "select",
+        order: 3,
+      })
+    ),
+    bio: z
+      .string()
+      .optional()
+      .superRefine(
+        fieldConfig({
+          order: 4,
+        })
+      ),
+  });
+
+  const schemaProvider = new ZodProvider(advancedSchema);
+
+  it("renders fields in the correct order", () => {
+    cy.mount(
+      <AutoForm
+        schema={schemaProvider}
+        onSubmit={cy.stub().as("onSubmit")}
+        withSubmit
+      />
+    );
+
+    cy.get(".chakra-field__root")
+      .eq(0)
+      .find("input")
+      .should("have.attr", "name", "username");
+    cy.get(".chakra-field__root")
+      .eq(1)
+      .find("input")
+      .should("have.attr", "name", "password");
+    cy.get(".chakra-field__root").eq(2).find("select");
+    cy.get(".chakra-field__root")
+      .eq(3)
+      .find("input")
+      .should("have.attr", "name", "bio");
+  });
+
+  it("displays field descriptions", () => {
+    cy.mount(
+      <AutoForm
+        schema={schemaProvider}
+        onSubmit={cy.stub().as("onSubmit")}
+        withSubmit
+      />
+    );
+
+    cy.contains("Choose a unique username").should("be.visible");
+    cy.contains("Use a strong password").should("be.visible");
+  });
+
+  it("applies custom input props", () => {
+    cy.mount(
+      <AutoForm
+        schema={schemaProvider}
+        onSubmit={cy.stub().as("onSubmit")}
+        withSubmit
+      />
+    );
+
+    cy.get('input[name="username"]').should(
+      "have.attr",
+      "placeholder",
+      "Enter username"
+    );
+    cy.get('input[name="password"]').should("have.attr", "type", "password");
+  });
+
+  it("renders select field correctly", () => {
+    cy.mount(
+      <AutoForm
+        schema={schemaProvider}
+        onSubmit={cy.stub().as("onSubmit")}
+        withSubmit
+      />
+    );
+
+    cy.get('.chakra-select__root').should("exist").within(() => {
+      cy.get('select').should("have.attr", "name", "favoriteColor");
+    }).click();
+
+    cy.get('.chakra-select__content').should("exist").within(() => {
+      cy.get('.chakra-select__item').should('exist').should('contain', 'red');
+      cy.get('.chakra-select__item').should('exist').should('contain', 'green');
+      cy.get('.chakra-select__item').should('exist').should('contain', 'blue');
+    });
+
+  });
+
+  it("renders textarea field correctly", () => {
+    cy.mount(
+      <AutoForm
+        schema={schemaProvider}
+        onSubmit={cy.stub().as("onSubmit")}
+        withSubmit
+      />
+    );
+
+    cy.get('input[name="bio"]').should("exist");
+  });
+});
diff --git a/apps/web/cypress/component/autoform/chakra-zod/all.cy.tsx b/apps/web/cypress/component/autoform/chakra-zod/all.cy.tsx
@@ -0,0 +1,9 @@
+import "./basic.cy";
+import "./arrays.cy";
+import "./subobjects.cy";
+import "./form-props.cy";
+import "./validation.cy";
+import "./custom-fields.cy";
+import "./controlled-form.cy";
+import "./ui-customization.cy";
+import "./advanced-features.cy";
diff --git a/apps/web/cypress/component/autoform/chakra-zod/arrays.cy.tsx b/apps/web/cypress/component/autoform/chakra-zod/arrays.cy.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import { AutoForm } from "@autoform/chakra";
+import { ZodProvider } from "@autoform/zod";
+import { z } from "zod";
+
+describe("AutoForm Arrays Tests", () => {
+  const arraySchema = z.object({
+    tags: z.array(z.string()),
+    friends: z.array(
+      z.object({
+        name: z.string(),
+        age: z.coerce.number(),
+      })
+    ),
+  });
+
+  const schemaProvider = new ZodProvider(arraySchema);
+
+  it("renders array fields correctly", () => {
+    cy.mount(
+      <AutoForm
+        schema={schemaProvider}
+        onSubmit={cy.stub().as("onSubmit")}
+        withSubmit
+      />
+    );
+
+    cy.get('button[name="add-array-item"]').eq(0).should('exist');
+    cy.get('button[name="add-array-item"]').eq(1).should('exist'); 
+  });
+
+  it("allows adding and removing array items", () => {
+    cy.mount(
+      <AutoForm
+        schema={schemaProvider}
+        onSubmit={cy.stub().as("onSubmit")}
+        withSubmit
+      />
+    );
+
+    // Add tags
+    cy.get('button[name="add-array-item"]').eq(0).click();
+    cy.get('input[name="tags.0"]').type("tag1");
+    cy.get('button[name="add-array-item"]').eq(0).click();
+    cy.get('input[name="tags.1"]').type("tag2");
+
+    // Add friends
+    cy.get('button[name="add-array-item"]').eq(1).click();
+    cy.get('input[name="friends.0.name"]').type("Alice");
+    cy.get('input[name="friends.0.age"]').type("25");
+    cy.get('button[name="add-array-item"]').eq(1).click();
+    cy.get('input[name="friends.1.name"]').type("Bob");
+    cy.get('input[name="friends.1.age"]').type("30");
+
+    // Remove a tag and a friend
+    cy.get('button[name="remove-array-item"]').eq(0).click();
+    cy.get('button[name="remove-array-item"]').eq(1).click();
+
+    cy.get('button[type="submit"]').click();
+
+    cy.get("@onSubmit").should("have.been.calledOnce");
+    cy.get("@onSubmit").should("have.been.calledWith", {
+      tags: ["tag2"],
+      friends: [{ name: "Bob", age: 30 }],
+    });
+  });
+});