@refinedev/react-hook-form 4.8.14 → 4.8.16

package/package.json

@@ -1,60 +1,74 @@
 {
-  "version": "4.8.14",
-  "license": "MIT",
-  "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
+  "name": "@refinedev/react-hook-form",
+  "version": "4.8.16",
   "private": false,
+  "description": "refine offers a React Hook Form adapter that allows you to use the React Hook Form library with refine.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/refinedev/refine.git",
+    "directory": "packages/react-hook-form"
+  },
+  "license": "MIT",
+  "author": "refine",
   "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "typings": "dist/index.d.ts",
   "files": [
     "dist",
     "src"
   ],
-  "engines": {
-    "node": ">=10"
-  },
   "scripts": {
-    "start": "tsup --watch --format esm,cjs,iife --legacy-output",
-    "build": "tsup --format esm,cjs,iife --minify --legacy-output",
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prepare": "npm run build",
+    "publint": "publint --strict=true --level=suggestion",
     "test": "jest --passWithNoTests --runInBand",
-    "prepare": "npm run build"
+    "types": "node ../shared/generate-declarations.js"
   },
-  "name": "@refinedev/react-hook-form",
-  "description": "refine offers a React Hook Form adapter that allows you to use the React Hook Form library with refine.",
-  "author": "refine",
-  "module": "dist/esm/index.js",
-  "peerDependencies": {
-    "@refinedev/core": "^4.46.1",
-    "react-hook-form": "^7.30.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0",
-    "@types/react": "^17.0.0 || ^18.0.0",
-    "@types/react-dom": "^17.0.0 || ^18.0.0"
+  "dependencies": {
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "react-hook-form": "^7.30.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.4",
-    "@refinedev/core": "^4.47.1",
     "@esbuild-plugins/node-resolve": "^0.1.4",
+    "@refinedev/core": "^4.49.0",
+    "@testing-library/jest-dom": "^5.16.4",
     "@types/jest": "^29.2.4",
     "@types/lodash": "^4.14.171",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "react-router-dom": "^6.8.1",
-    "ts-jest": "^29.0.3",
-    "tslib": "^2.3.1",
+    "ts-jest": "^29.1.2",
+    "tslib": "^2.6.2",
     "tsup": "^6.7.0"
   },
-  "dependencies": {
-    "react-hook-form": "^7.30.0",
-    "lodash-es": "^4.17.21",
-    "lodash": "^4.17.21"
+  "peerDependencies": {
+    "@refinedev/core": "^4.46.1",
+    "@types/react": "^17.0.0 || ^18.0.0",
+    "@types/react-dom": "^17.0.0 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "react-hook-form": "^7.30.0"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/refinedev/refine.git",
-    "directory": "packages/react-hook-form"
+  "engines": {
+    "node": ">=10"
   },
-  "gitHead": "829f5a516f98c06f666d6be3e6e6099c75c07719",
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "gitHead": "829f5a516f98c06f666d6be3e6e6099c75c07719"
 }

package/src/index.ts

@@ -1,11 +1,11 @@
 export { useForm, UseFormProps, UseFormReturnType } from "./useForm";
 export {
-    useStepsForm,
-    UseStepsFormProps,
-    UseStepsFormReturnType,
+  useStepsForm,
+  UseStepsFormProps,
+  UseStepsFormReturnType,
 } from "./useStepsForm";
 export {
-    useModalForm,
-    UseModalFormProps,
-    UseModalFormReturnType,
+  useModalForm,
+  UseModalFormProps,
+  UseModalFormReturnType,
 } from "./useModalForm";

package/src/useForm/index.spec.tsx

@@ -1,248 +1,235 @@
 import React from "react";
 
 import { useForm } from ".";
-import { HttpError } from "@refinedev/core";
+import { IRefineOptions, HttpError } from "@refinedev/core";
 import { MockJSONServer, TestWrapper, act, render, waitFor } from "../../test";
 import { Route, Routes } from "react-router-dom";
-import { IRefineOptions } from "@refinedev/core/dist/interfaces";
 
 interface IPost {
-    title: string;
-    content: string;
-    slug: string;
-    category: { id: number };
-    tags: string[];
+  title: string;
+  content: string;
+  slug: string;
+  category: { id: number };
+  tags: string[];
 }
 
 const renderForm = ({
-    refineCoreProps,
-    refineOptions,
-    useFormProps,
+  refineCoreProps,
+  refineOptions,
+  useFormProps,
 }: {
-    useFormProps?: any;
-    refineCoreProps?: any;
-    refineOptions?: IRefineOptions;
+  useFormProps?: any;
+  refineCoreProps?: any;
+  refineOptions?: IRefineOptions;
 }) => {
-    const EditPage = () => {
-        const {
-            refineCore: { formLoading },
-            saveButtonProps,
-            register,
-            formState: { errors },
-        } = useForm<IPost, HttpError, IPost>({
-            ...useFormProps,
-            refineCoreProps: {
-                resource: "posts",
-                ...refineCoreProps,
-            },
-        });
-
-        return (
-            <div>
-                {formLoading && <p>loading</p>}
-                <input {...register("title")} />
-                {errors.title && (
-                    <span>{errors?.title?.message?.toString()}</span>
-                )}
-
-                <input {...register("content")} />
-                {errors.content && (
-                    <span>{errors?.content?.message?.toString()}</span>
-                )}
-
-                <input {...register("slug")} />
-                {errors.slug && (
-                    <span>{errors?.slug?.message?.toString()}</span>
-                )}
-
-                <select
-                    {...register("category.id", {
-                        required: true,
-                    })}
-                >
-                    {["1", "2", "3"]?.map((category) => (
-                        <option key={category} value={category}>
-                            {category}
-                        </option>
-                    ))}
-                </select>
-                {errors.category && (
-                    <span>{`${errors.category?.id?.message}`}</span>
-                )}
-
-                <button
-                    {...saveButtonProps}
-                    onClick={(e) => {
-                        saveButtonProps?.onClick(e);
-                    }}
-                    data-testid="refine-save-button"
-                    type="submit"
-                >
-                    save
-                </button>
-            </div>
-        );
-    };
-
-    return render(
-        <Routes>
-            <Route path="/" element={<EditPage />} />
-        </Routes>,
-        {
-            wrapper: TestWrapper({
-                options: refineOptions,
-                i18nProvider: {
-                    changeLocale: () => Promise.resolve(),
-                    getLocale: () => "en",
-                    translate: (key: string) => {
-                        if (key === "form.error.content") {
-                            return "Translated content error";
-                        }
-
-                        return key;
-                    },
+  const EditPage = () => {
+    const {
+      refineCore: { formLoading },
+      saveButtonProps,
+      register,
+      formState: { errors },
+    } = useForm<IPost, HttpError, IPost>({
+      ...useFormProps,
+      refineCoreProps: {
+        resource: "posts",
+        ...refineCoreProps,
+      },
+    });
+
+    return (
+      <div>
+        {formLoading && <p>loading</p>}
+        <input {...register("title")} />
+        {errors.title && <span>{errors?.title?.message?.toString()}</span>}
+
+        <input {...register("content")} />
+        {errors.content && <span>{errors?.content?.message?.toString()}</span>}
+
+        <input {...register("slug")} />
+        {errors.slug && <span>{errors?.slug?.message?.toString()}</span>}
+
+        <select
+          {...register("category.id", {
+            required: true,
+          })}
+        >
+          {["1", "2", "3"]?.map((category) => (
+            <option key={category} value={category}>
+              {category}
+            </option>
+          ))}
+        </select>
+        {errors.category && <span>{`${errors.category?.id?.message}`}</span>}
+
+        <button
+          {...saveButtonProps}
+          onClick={(e) => {
+            saveButtonProps?.onClick(e);
+          }}
+          data-testid="refine-save-button"
+          type="submit"
+        >
+          save
+        </button>
+      </div>
+    );
+  };
+
+  return render(
+    <Routes>
+      <Route path="/" element={<EditPage />} />
+    </Routes>,
+    {
+      wrapper: TestWrapper({
+        options: refineOptions,
+        i18nProvider: {
+          changeLocale: () => Promise.resolve(),
+          getLocale: () => "en",
+          translate: (key: string) => {
+            if (key === "form.error.content") {
+              return "Translated content error";
+            }
+
+            return key;
+          },
+        },
+        dataProvider: {
+          ...MockJSONServer,
+          update: async () => {
+            const error: HttpError = {
+              message: "An error occurred while updating the record.",
+              statusCode: 400,
+              errors: {
+                title: ["Title is required"],
+                "category.id": ["Category is required"],
+                slug: true,
+                content: {
+                  key: "form.error.content",
+                  message: "Content is required",
                 },
-                dataProvider: {
-                    ...MockJSONServer,
-                    update: async () => {
-                        const error: HttpError = {
-                            message:
-                                "An error occurred while updating the record.",
-                            statusCode: 400,
-                            errors: {
-                                title: ["Title is required"],
-                                "category.id": ["Category is required"],
-                                slug: true,
-                                content: {
-                                    key: "form.error.content",
-                                    message: "Content is required",
-                                },
-                            },
-                        };
-
-                        return Promise.reject(error);
-                    },
-                    create: async () => {
-                        const error: HttpError = {
-                            message:
-                                "An error occurred while creating the record.",
-                            statusCode: 400,
-                            slug: true,
-                            errors: {
-                                title: ["Title is required"],
-                                "category.id": ["Category is required"],
-                                slug: true,
-                                content: {
-                                    key: "form.error.content",
-                                    message: "Content is required",
-                                },
-                            },
-                        };
-
-                        return Promise.reject(error);
-                    },
+              },
+            };
+
+            return Promise.reject(error);
+          },
+          create: async () => {
+            const error: HttpError = {
+              message: "An error occurred while creating the record.",
+              statusCode: 400,
+              slug: true,
+              errors: {
+                title: ["Title is required"],
+                "category.id": ["Category is required"],
+                slug: true,
+                content: {
+                  key: "form.error.content",
+                  message: "Content is required",
                 },
-            }),
+              },
+            };
+
+            return Promise.reject(error);
+          },
         },
-    );
+      }),
+    },
+  );
 };
 
 describe("useForm hook", () => {
-    it.each(["edit", "create"] as const)(
-        "should set %s-form errors from data provider",
-        async (action) => {
-            const onMutationError = jest.fn();
-
-            const { getByText, getByTestId } = renderForm({
-                refineCoreProps: {
-                    onMutationError,
-                    action: action,
-                    id: action === "edit" ? "1" : undefined,
-                },
-            });
-
-            await waitFor(() => {
-                expect(document.body).not.toHaveTextContent("loading");
-            });
-
-            await act(() => {
-                getByTestId("refine-save-button").click();
-                return Promise.resolve();
-            });
+  it.each(["edit", "create"] as const)(
+    "should set %s-form errors from data provider",
+    async (action) => {
+      const onMutationError = jest.fn();
+
+      const { getByText, getByTestId } = renderForm({
+        refineCoreProps: {
+          onMutationError,
+          action: action,
+          id: action === "edit" ? "1" : undefined,
+        },
+      });
+
+      await waitFor(() => {
+        expect(document.body).not.toHaveTextContent("loading");
+      });
+
+      await act(() => {
+        getByTestId("refine-save-button").click();
+        return Promise.resolve();
+      });
+
+      await waitFor(() => {
+        expect(document.body).not.toHaveTextContent("loading");
+      });
+
+      expect(onMutationError).toBeCalledTimes(1);
+
+      expect(getByText("Title is required")).toBeInTheDocument();
+      expect(getByText("Category is required")).toBeInTheDocument();
+      expect(getByText("Translated content error")).toBeInTheDocument();
+      expect(getByText("Field is not valid.")).toBeInTheDocument();
+    },
+  );
+
+  it.each([
+    {
+      action: "edit",
+      disableFromRefineOption: false,
+      disableFromHook: true,
+    },
+    {
+      action: "edit",
+      disableFromRefineOption: true,
+      disableFromHook: false,
+    },
+    {
+      action: "create",
+      disableFromRefineOption: false,
+      disableFromHook: true,
+    },
+    {
+      action: "create",
+      disableFromRefineOption: true,
+      disableFromHook: false,
+    },
+  ] as const)("should disable server-side validation", async (testCase) => {
+    const onMutationErrorMock = jest.fn();
+
+    const { getByTestId, queryByText } = renderForm({
+      refineOptions: {
+        disableServerSideValidation: testCase.disableFromRefineOption,
+      },
+      useFormProps: {
+        disableServerSideValidation: testCase.disableFromHook,
+      },
+
+      refineCoreProps: {
+        action: testCase.action,
+        onMutationError: onMutationErrorMock,
+        id: testCase.action === "edit" ? "1" : undefined,
+      },
+    });
 
-            await waitFor(() => {
-                expect(document.body).not.toHaveTextContent("loading");
-            });
+    await waitFor(() => {
+      expect(document.body).not.toHaveTextContent("loading");
+    });
 
-            expect(onMutationError).toBeCalledTimes(1);
+    await act(() => {
+      getByTestId("refine-save-button").click();
+      return Promise.resolve();
+    });
 
-            expect(getByText("Title is required")).toBeInTheDocument();
-            expect(getByText("Category is required")).toBeInTheDocument();
-            expect(getByText("Translated content error")).toBeInTheDocument();
-            expect(getByText("Field is not valid.")).toBeInTheDocument();
-        },
-    );
+    await waitFor(() => {
+      expect(document.body).not.toHaveTextContent("loading");
+      expect(onMutationErrorMock).toBeCalledTimes(1);
+    });
 
-    it.each([
-        {
-            action: "edit",
-            disableFromRefineOption: false,
-            disableFromHook: true,
-        },
-        {
-            action: "edit",
-            disableFromRefineOption: true,
-            disableFromHook: false,
-        },
-        {
-            action: "create",
-            disableFromRefineOption: false,
-            disableFromHook: true,
-        },
-        {
-            action: "create",
-            disableFromRefineOption: true,
-            disableFromHook: false,
-        },
-    ] as const)("should disable server-side validation", async (testCase) => {
-        const onMutationErrorMock = jest.fn();
-
-        const { getByTestId, queryByText } = renderForm({
-            refineOptions: {
-                disableServerSideValidation: testCase.disableFromRefineOption,
-            },
-            useFormProps: {
-                disableServerSideValidation: testCase.disableFromHook,
-            },
-
-            refineCoreProps: {
-                action: testCase.action,
-                onMutationError: onMutationErrorMock,
-                id: testCase.action === "edit" ? "1" : undefined,
-            },
-        });
-
-        await waitFor(() => {
-            expect(document.body).not.toHaveTextContent("loading");
-        });
-
-        await act(() => {
-            getByTestId("refine-save-button").click();
-            return Promise.resolve();
-        });
-
-        await waitFor(() => {
-            expect(document.body).not.toHaveTextContent("loading");
-            expect(onMutationErrorMock).toBeCalledTimes(1);
-        });
-
-        await waitFor(() => {
-            expect(queryByText("Title is required")).not.toBeInTheDocument();
-            expect(queryByText("Category is required")).not.toBeInTheDocument();
-            expect(
-                queryByText("Translated content error"),
-            ).not.toBeInTheDocument();
-            expect(queryByText("Field is not valid.")).not.toBeInTheDocument();
-        });
+    await waitFor(() => {
+      expect(queryByText("Title is required")).not.toBeInTheDocument();
+      expect(queryByText("Category is required")).not.toBeInTheDocument();
+      expect(queryByText("Translated content error")).not.toBeInTheDocument();
+      expect(queryByText("Field is not valid.")).not.toBeInTheDocument();
     });
+  });
 });