Validation directive support

examples/todoapp/src/App.tsx

@@ -21,7 +21,11 @@ function App() {
                 input: [
                   { field: "id", config: { hidden: true } }
                   { field: "hasDone", config: { hidden: true } }
-                  { field: "name", config: { gridCol: 9 } }
+                  {
+                    field: "name"
+                    config: { gridCol: 9 }
+                    constraint: { maxLength: 50 }
+                  }
                   { field: "priority", config: { gridCol: 3 } }
                 ]
               ) {

packages/chakra-ui/src/components/default/form.tsx

@@ -3,7 +3,7 @@ import {
   FormComponentProps,
   FieldType,
 } from "@fabrix-framework/fabrix";
-import { Switch, Input, Stack, Button, Box, Text } from "@chakra-ui/react";
+import { Text, Switch, Input, Stack, Button, Box } from "@chakra-ui/react";
 import { Select } from "chakra-react-select";
 import { useController } from "@fabrix-framework/fabrix/rhf";
 import { LabelledHeading } from "./shared";
@@ -121,6 +121,7 @@ const SelectFormField = (
         onBlur={field.onBlur}
         onChange={(e) => e && field.onChange(e.value)}
       />
+      <ErrorField {...props} />
     </Stack>
   );
 };
@@ -136,6 +137,7 @@ const TextFormField = (props: FormFieldComponentProps) => {
     <Stack className={attributes.className} spacing={2}>
       <LabelledHeading {...props} />
       <Input {...field} placeholder="Enter value" />
+      <ErrorField {...props} />
     </Stack>
   );
 };
@@ -173,6 +175,7 @@ const BooleanFormField = (props: FormFieldComponentProps) => {
     <Stack className={className} spacing={2}>
       <LabelledHeading {...props} />
       <Switch {...field} size="lg" />
+      <ErrorField {...props} />
     </Stack>
   );
 };

packages/fabrix/tests/mocks/data.ts → packages/fabrix/__tests__/mocks/data.ts

@@ -4,11 +4,11 @@ export const users = [
   {
     id: faker.string.uuid(),
     name: "first user",
-    code: "u001",
+    email: faker.internet.email(),
   },
   {
     id: faker.string.uuid(),
     name: "second user",
-    code: "u002",
+    email: faker.internet.email(),
   },
 ];

packages/fabrix/tests/mocks/handlers.ts → packages/fabrix/__tests__/mocks/handlers.ts

@@ -7,7 +7,7 @@ const mockSchema = buildSchema(`
 type User {
   id: ID!
   name: String!
-  code: String!
+  email: String!
 }
 
 type UsersResult {
@@ -26,9 +26,9 @@ enum UserCategory {
 input CreateUserInput {
   id: ID
   name: String!
-  code: String!
+  email: String
   age: Int!
-  category: UserCategory!
+  category: UserCategory
 }
 
 type Mutation {

packages/fabrix/__tests__/mutation.test.tsx

@@ -0,0 +1,51 @@
+import { describe, expect, it } from "vitest";
+import { screen, within } from "@testing-library/react";
+import { FabrixComponent } from "@renderer";
+import { testWithUnmount } from "./supports/render";
+
+describe("mutation", () => {
+  it("should render the form", async () => {
+    await testWithUnmount(
+      <FabrixComponent
+        query={`
+          mutation createUser($input: CreateUserInput!) {
+            createUser(input: $input) {
+              id
+            }
+          }
+        `}
+      />,
+      async () => {
+        const form = await screen.findByRole("form");
+        expect(form).toBeInTheDocument();
+
+        const inputs = await within(form).findAllByRole("textbox");
+        expect(inputs.length).toBe(5);
+      },
+    );
+  });
+
+  it("should render the form with customized labels", async () => {
+    await testWithUnmount(
+      <FabrixComponent
+        query={`
+          mutation createUser($input: CreateUserInput!) {
+            createUser(input: $input) @fabrixForm(input: [
+              { field: "id", config: { hidden: true } },
+              { field: "name", config: { label: "UserName" } }
+            ]) {
+              id
+            }
+          }
+        `}
+      />,
+      async () => {
+        const form = await screen.findByRole("form");
+        expect(form).toBeInTheDocument();
+
+        expect(within(form).queryByLabelText("id")).not.toBeInTheDocument();
+        expect(within(form).getByLabelText("UserName")).toBeInTheDocument();
+      },
+    );
+  });
+});