fix: resolve Mantine package bugs and improve functionality (#147)

Author: adityacodepublic

apps/web/components/utils.tsx

@@ -70,7 +70,7 @@ const zodFormSchema = z.object({
         },
       })
     ),
-  favouriteNumber: z
+  favouriteNumber: z.coerce
     .number({
       invalid_type_error: "Favourite number must be a number.",
     })
@@ -123,16 +123,16 @@ const zodFormSchema = z.object({
         country: z.string().optional(),
         test: z.object({
           name: z.string(),
-          age: z.number(),
+          age: z.coerce.number(),
           test: z.object({
             name: z.string(),
-            age: z.number(),
+            age: z.coerce.number(),
             test: z.object({
               name: z.string(),
-              age: z.number(),
+              age: z.coerce.number(),
               test: z.object({
                 name: z.string(),
-                age: z.number(),
+                age: z.coerce.number(),
               }),
             }),
           }),
@@ -145,16 +145,16 @@ const zodFormSchema = z.object({
   //   country: z.string().optional(),
   //   test: z.object({
   //     name: z.string(),
-  //     age: z.number(),
+  //     age: z.coerce.number(),
   //     test: z.object({
   //       name: z.string(),
-  //       age: z.number(),
+  //       age: z.coerce.number(),
   //       test: z.object({
   //         name: z.string(),
-  //         age: z.number(),
+  //         age: z.coerce.number(),
   //         test: z.object({
   //           name: z.string(),
-  //           age: z.number(),
+  //           age: z.coerce.number(),
   //         }),
   //       }),
   //     }),

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { AutoForm } from "@autoform/mui";
+import { AutoForm } from "@autoform/mantine";
 import { ZodProvider, fieldConfig } from "@autoform/zod";
 import { z } from "zod";
 import { TestWrapper } from "./utils";
@@ -59,16 +59,19 @@ describe("AutoForm Advanced Features Tests", () => {
       </TestWrapper>
     );
 
-    cy.get(".MuiFormControl-root")
+    cy.get(".mantine-InputWrapper-root")
       .eq(0)
       .find("input")
       .should("have.attr", "name", "username");
-    cy.get(".MuiFormControl-root")
+    cy.get(".mantine-InputWrapper-root")
       .eq(1)
       .find("input")
       .should("have.attr", "name", "password");
-    cy.get(".MuiFormControl-root").eq(2).find(".MuiSelect-select");
-    cy.get(".MuiFormControl-root")
+    cy.get(".mantine-InputWrapper-root")
+      .eq(2)
+      .find(".mantine-Select-wrapper")
+      .find("input");
+    cy.get(".mantine-InputWrapper-root")
       .eq(3)
       .find("input")
       .should("have.attr", "name", "bio");
@@ -119,14 +122,14 @@ describe("AutoForm Advanced Features Tests", () => {
       </TestWrapper>
     );
 
-    cy.get('.MuiSelect-select[aria-labelledby*="favoriteColor"]').should(
-      "exist"
-    );
-    cy.get('.MuiSelect-select[aria-labelledby*="favoriteColor"]').click();
-    cy.get('.MuiMenu-list[role="listbox"] .MuiMenuItem-root').should(
-      "have.length",
-      3
-    );
+    cy.get(".mantine-Select-input").eq(0).click();
+
+    cy.get(".mantine-Popover-dropdown").within(() => {
+      cy.contains("red").should("exist");
+      cy.contains("green").should("exist");
+      cy.contains("blue").should("exist");
+    });
+    // mantine select fields portal has auto-generated aria-label and names.
   });
 
   it("renders textarea field correctly", () => {

packages/mantine/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @autoform/mantine
 
+## 2.3.1
+
+### Patch Changes
+
+- - fixed description not showing in mantine package
+  - fixed select not working properly
+  - added mantine styles to date picker
+  - corrected key props via spread
+  - supported default value for date field (e.g. `birthdate: "1990-01-01" as unknown as Date,`)
+
 ## 2.3.0
 
 ### Minor Changes

packages/mantine/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autoform/mantine",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

packages/mantine/src/components/BooleanField.tsx

@@ -5,4 +5,8 @@ import { AutoFormFieldProps } from "@autoform/react";
 export const BooleanField: React.FC<AutoFormFieldProps> = ({
   inputProps,
   label,
-}) => <Checkbox label={label} {...inputProps} />;
+}) => {
+  const { key, ...props } = inputProps;
+
+  return <Checkbox label={label} key={key} {...props} />;
+};

packages/mantine/src/components/DateField.tsx

@@ -6,21 +6,28 @@ export const DateField: React.FC<AutoFormFieldProps> = ({
   field,
   inputProps,
   label,
-}) => (
-  <DateInput
-    label={label}
-    description={field.description}
-    error={inputProps.error}
-    onChange={(value) => {
-      // react-hook-form expects an event object
-      const event = {
-        target: {
-          name: field.key,
-          value: value?.toISOString(),
-        },
-      };
-      inputProps.onChange(event);
-    }}
-    value={inputProps.value}
-  />
-);
+  value
+}) => {
+  const { key, ...props } = inputProps;
+
+  return (
+    <DateInput
+      key={key}
+      {...props}
+      label={label}
+      description={field.fieldConfig?.description}
+      error={inputProps.error}
+      onChange={(value) => {
+        // react-hook-form expects an event object
+        const event = {
+          target: {
+            name: field.key,
+            value: value?.toISOString(),
+          },
+        };
+        inputProps.onChange(event);
+      }}
+      defaultValue={value ? new Date(value) : undefined}
+    />
+  );
+};

packages/mantine/src/components/Form.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import '@mantine/dates/styles.css';
 import { Box } from "@mantine/core";
 
 export const Form = React.forwardRef<

packages/mantine/src/components/NumberField.tsx

@@ -6,11 +6,16 @@ export const NumberField: React.FC<AutoFormFieldProps> = ({
   field,
   inputProps,
   label,
-}) => (
-  <TextInput
-    type="number"
-    label={label}
-    description={field.description}
-    {...inputProps}
-  />
-);
+}) => {
+  const { key, ...props } = inputProps;
+
+  return (
+    <TextInput
+      key={key}
+      type="number"
+      label={label}
+      description={field.fieldConfig?.description}
+      {...props}
+    />
+  );
+};

packages/mantine/src/components/SelectField.tsx

@@ -7,12 +7,32 @@ export const SelectField: React.FC<AutoFormFieldProps> = ({
   error,
   inputProps,
   label,
-}) => (
-  <Select
-    error={error}
-    label={label}
-    data={(field.options || []).map(([key, label]) => ({ value: key, label }))}
-    description={field.description}
-    {...inputProps}
-  />
-);
+  id,
+  value,
+}) => {
+  const { key, ...props } = inputProps;
+
+  return (
+    <Select
+      key={key}
+      {...props}
+      label={label}
+      error={error}
+      onChange={(value) => {
+        const event = {
+          target: {
+            name: field.key,
+            value: value,
+          },
+        };
+        props.onChange(event);
+      }}
+      defaultValue={value}
+      description={field.fieldConfig?.description}
+      data={(field.options || []).map(([key, label]) => ({
+        value: key,
+        label,
+      }))}
+    />
+  );
+};

packages/mantine/src/components/StringField.tsx

@@ -8,12 +8,15 @@ export const StringField: React.FC<AutoFormFieldProps> = ({
   label,
   id,
 }) => {
+  const { key, ...props } = inputProps;
+
   return (
     <TextInput
       id={id}
+      key={key}
       label={label}
-      description={field.description}
-      {...inputProps}
+      description={field.fieldConfig?.description}
+      {...props}
     />
   );
 };