Release/1.0.0

.github/workflows/npm-publish.yaml

@@ -13,7 +13,7 @@ jobs:
     # Create multiple jobs for each node version
     strategy:
       matrix:
-        node: [10, 12, 14]
+        node: [12, 14]
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1

CHANGELOG.md

@@ -4,6 +4,15 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [v1.0.0](https://github.com/clement-faure/mui-rhf/compare/v0.0.11...v1.0.0)
+
+> 15 June 2021
+
+- Release/0.0.11 [`#17`](https://github.com/clement-faure/mui-rhf/pull/17)
+- Update dependencies, update jest config [`a96ad3a`](https://github.com/clement-faure/mui-rhf/commit/a96ad3afec266bfe7477cf6a6aa22347ccfd5f44)
+- Update components and typings according to react-hook-form update [`2679d94`](https://github.com/clement-faure/mui-rhf/commit/2679d94b55010cd1cdffa56539011f0d09d9142e)
+- Fix unit tests [`297e5d4`](https://github.com/clement-faure/mui-rhf/commit/297e5d488e4b0be1d6572d3d22721252ab550c0b)
+
 #### [v0.0.11](https://github.com/clement-faure/mui-rhf/compare/v0.0.10...v0.0.11)
 
 > 29 April 2021

README.md

@@ -24,15 +24,15 @@ yarn add mui-rhf
 ## Usage
 
 ```
-import * as React from 'react';
+import React from 'react';
 
 import { useForm } from "react-hook-form";
 import { MuiRhfForm } from "mui-rhf";
 import { Button } from "@material-ui/core";
 
 const Form = ({ onSubmit }) => {
   // Initialize form
-  const { control, errors, handleSubmit } = useForm();
+  const { control, handleSubmit } = useForm();
 
   const onSubmit = (data) => {
     // Play with retrieved data
@@ -42,7 +42,6 @@ const Form = ({ onSubmit }) => {
     <form onSubmit={handleSubmit(onSubmit)} noValidate>
       <MuiRhfForm
         control={control}
-        errors={errors}
         fields={[
           [{ name: "firstName" }, { name: "lastName" }],
           [{ name: "email" }],
@@ -104,10 +103,6 @@ Provided by [React Hook Form](https://react-hook-form.com/api#watch)
 
 Provided by [React Hook Form](https://react-hook-form.com/api#control)
 
-#### errors: FieldErrors;
-
-Provided by [React Hook Form](https://react-hook-form.com/api#errors)
-
 ## Contributors ✨
 
 This project follows the

jest.config.js

@@ -5,6 +5,7 @@ module.exports = {
     "^.+\\.(t|j)sx?$": "ts-jest",
   },
   testRegex: "(/tests/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
+  testEnvironment: "jsdom",
   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
   moduleNameMapper: {
     "~/(.*)": "<rootDir>/src/$1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-rhf",
-  "version": "0.0.11",
+  "version": "1.0.0",
   "description": "Form generator based on Material UI and React Hook Form",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -36,35 +36,35 @@
   "homepage": "https://github.com/clement-faure/mui-rhf#readme",
   "dependencies": {},
   "peerDependencies": {
-    "@material-ui/core": "^4.11.3",
-    "@material-ui/lab": "^4.0.0-alpha.57",
+    "@material-ui/core": "^4.11.4",
+    "@material-ui/lab": "^4.0.0-alpha.58",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-hook-form": "^6.14.2"
+    "react-hook-form": "^7.8.6"
   },
   "devDependencies": {
-    "@material-ui/core": "^4.11.3",
-    "@material-ui/lab": "^4.0.0-alpha.57",
-    "@testing-library/react": "^11.2.3",
-    "@testing-library/react-hooks": "^5.0.3",
-    "@types/jest": "^26.0.20",
-    "@types/node": "^14.14.22",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.14.1",
-    "@typescript-eslint/parser": "^4.14.1",
-    "auto-changelog": "^2.2.1",
+    "@material-ui/core": "^4.11.4",
+    "@material-ui/lab": "^4.0.0-alpha.58",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/react-hooks": "^7.0.0",
+    "@types/jest": "^26.0.23",
+    "@types/node": "^15.12.2",
+    "@types/react": "17.0.0",
+    "@types/react-dom": "17.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.27.0",
+    "@typescript-eslint/parser": "^4.27.0",
+    "auto-changelog": "^2.3.0",
     "cross-env": "^7.0.3",
-    "eslint": "^7.19.0",
-    "jest": "^26.6.3",
-    "prettier": "^2.2.1",
+    "eslint": "^7.28.0",
+    "jest": "^27.0.4",
+    "prettier": "^2.3.1",
     "prettierrc": "^0.0.0-5",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-hook-form": "^6.14.2",
-    "ts-jest": "^26.5.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-hook-form": "^7.8.6",
+    "ts-jest": "^27.0.3",
     "tscpaths": "^0.0.9",
-    "tslib": "^2.1.0",
-    "typescript": "^4.1.3"
+    "tslib": "^2.3.0",
+    "typescript": "^4.3.2"
   }
 }

src/components/MuiRhfAutocomplete.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 import { Controller } from "react-hook-form";
 
@@ -9,7 +9,6 @@ import { MuiRhfAutocompleteProps } from "~/models/fields";
 
 const MuiRhfAutocomplete: React.FC<MuiRhfAutocompleteProps> = ({
   control,
-  errors,
   name,
   defaultValue,
   textFieldProps,
@@ -19,21 +18,21 @@ const MuiRhfAutocomplete: React.FC<MuiRhfAutocompleteProps> = ({
     name={name}
     control={control}
     defaultValue={defaultValue}
-    render={(props) => (
+    render={({ field, fieldState: { error } }) => (
       <Autocomplete
         fullWidth
-        {...props}
+        {...field}
         {...autocompleteProps}
         renderInput={(params) => (
           <TextField
-            error={!!errors?.[name]}
-            helperText={errors?.[name]}
+            error={!!error}
+            helperText={error?.message}
             {...params}
             {...textFieldProps}
           />
         )}
         onChange={(_, data) => {
-          props.onChange(data);
+          field.onChange(data);
         }}
       />
     )}

src/components/MuiRhfAutocompleteMultiple.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 import { MuiRhfAutocompleteProps } from "~/models/fields";
 

src/components/MuiRhfAutocompleteSingle.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 import { MuiRhfAutocompleteProps } from "~/models/fields";
 

src/components/MuiRhfCheckbox.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 import { Controller } from "react-hook-form";
 
@@ -13,7 +13,6 @@ import { MuiRhfCheckboxProps } from "~/models/fields";
 
 const MuiRhfCheckbox: React.FC<MuiRhfCheckboxProps> = ({
   control,
-  errors,
   name,
   defaultValue = false,
   label,
@@ -25,10 +24,9 @@ const MuiRhfCheckbox: React.FC<MuiRhfCheckboxProps> = ({
     name={name}
     defaultValue={defaultValue}
     control={control}
-    render={({ onChange, /*onBlur, */ value, ref }) => {
-      const error = !!errors?.[name];
+    render={({ field: { onChange, value, ref }, fieldState: { error } }) => {
       return (
-        <FormControl required={required} disabled={disabled} error={error}>
+        <FormControl required={required} disabled={disabled} error={!!error}>
           <FormControlLabel
             inputRef={ref}
             checked={value}
@@ -38,7 +36,7 @@ const MuiRhfCheckbox: React.FC<MuiRhfCheckboxProps> = ({
             control={<Checkbox {...rest} />}
             label={label}
           />
-          {error && <FormHelperText>{error}</FormHelperText>}
+          {error && <FormHelperText>{error.message}</FormHelperText>}
         </FormControl>
       );
     }}

src/components/MuiRhfForm.tsx

@@ -12,7 +12,6 @@ const MuiRhfForm: React.FC<MuiRhfFormProps> = ({
   headers,
   watch,
   control,
-  errors,
   spacing,
 }) => {
   return (
@@ -115,9 +114,8 @@ const MuiRhfForm: React.FC<MuiRhfFormProps> = ({
 
                       // Check hideConditions
                       conditionalKeys.forEach((conditionalKey) => {
-                        const [path, customCondition] = conditionalProps[
-                          conditionalKey
-                        ];
+                        const [path, customCondition] =
+                          conditionalProps[conditionalKey];
 
                         _set(
                           extra,
@@ -143,7 +141,6 @@ const MuiRhfForm: React.FC<MuiRhfFormProps> = ({
                         label={label}
                         name={name}
                         control={control}
-                        errors={errors}
                       />
                     </Grid>
                   );

src/components/MuiRhfSelect.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 import { Controller } from "react-hook-form";
 
@@ -14,7 +14,6 @@ import { MuiRhfSelectProps } from "~/models/fields";
 
 const MuiRhfSelect: React.FC<MuiRhfSelectProps> = ({
   control,
-  errors,
   name,
   label,
   defaultValue = "",
@@ -25,16 +24,15 @@ const MuiRhfSelect: React.FC<MuiRhfSelectProps> = ({
     name={name}
     defaultValue={defaultValue}
     control={control}
-    render={(props) => {
-      const error = errors?.[name];
+    render={({ field, fieldState: { error } }) => {
       return (
-        <FormControl error={error}>
+        <FormControl error={!!error}>
           <InputLabel id={name}>{label}</InputLabel>
           <Select
             labelId={name}
             displayEmpty
             fullWidth
-            {...props}
+            {...field}
             {...selectProps}
           >
             {React.Children.toArray(
@@ -43,7 +41,7 @@ const MuiRhfSelect: React.FC<MuiRhfSelectProps> = ({
               ))
             )}
           </Select>
-          {error && <FormHelperText>{error}</FormHelperText>}
+          {error && <FormHelperText>{error.message}</FormHelperText>}
         </FormControl>
       );
     }}

src/components/MuiRhfTextField.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 import { Controller } from "react-hook-form";
 
@@ -8,7 +8,6 @@ import { MuiRhfTextFieldProps } from "~/models/fields";
 
 const MuiRhfTextField: React.FC<MuiRhfTextFieldProps> = ({
   control,
-  errors,
   name,
   defaultValue = "",
   ...rest
@@ -17,12 +16,12 @@ const MuiRhfTextField: React.FC<MuiRhfTextFieldProps> = ({
     name={name}
     defaultValue={defaultValue}
     control={control}
-    render={(props) => (
+    render={({ field, fieldState: { error } }) => (
       <TextField
         fullWidth
-        error={!!errors?.[name]}
-        helperText={errors?.[name]}
-        {...props}
+        error={!!error}
+        helperText={error?.message}
+        {...field}
         {...rest}
       />
     )}

src/components/tests/form.test.tsx

@@ -10,11 +10,10 @@ import { MuiRhfForm } from "../";
 describe("Form render", () => {
   it("render basic form", () => {
     const { result } = renderHook(() => useForm());
-    const { control, errors /**, loading */ } = result.current;
+    const { control } = result.current;
     render(
       <MuiRhfForm
         control={control}
-        errors={errors}
         fields={[
           [{ name: "firstName" }, { name: "lastName" }],
           [{ name: "email" }],
@@ -26,11 +25,10 @@ describe("Form render", () => {
 
   it("render complex form", () => {
     const { result } = renderHook(() => useForm());
-    const { control, errors /**, loading */ } = result.current;
+    const { control } = result.current;
     render(
       <MuiRhfForm
         control={control}
-        errors={errors}
         headers={[{ title: "Company section" }]}
         fields={[
           [
@@ -58,11 +56,10 @@ describe("Form render", () => {
 
   it("render basic form with hideConditions", () => {
     const { result } = renderHook(() => useForm());
-    const { control, errors /**, loading */ } = result.current;
+    const { control } = result.current;
     render(
       <MuiRhfForm
         control={control}
-        errors={errors}
         fields={[
           [
             { name: "firstName" },