upgrade examples and packages to react 18 (#1718)

* add react 18 support * upgrade examples and packages to react 18 * fix unit tests for react@18 * upgrade react-testing-library * fix antd tests * update unit tests for react@18 * disable hoist * update package-lock * fix react-hook-form and react-table dependencies * refactor: disable lerna bootstrap hoist * fix: react@18 "children" type build issues * fix: add "react-query" dependency for @pankod/refine-cloud package * fix: add "@mui/icons-material" dependency for finefoods mui example * fix: unit tests * fix: react@18 build issues * chore: update peerDependencies * build: enable hoist mode * refactor: update all dependencies to react@18 * fix: hoist finefoods mui example * refactor: upgrade typescript to 4.7.4 * fix: react@18 issues on finefoods ant design example * chore: update package-lock * fix: axios version * fix: react@18 compability * fix: finefoods mui react@18 issues * refactor: unit tests compability react@18 * refactor: react@18 compatibility of core package's unit tests Co-authored-by: Ali Emir Şen <[email protected]> * refactor: react@18 compatibility of antd package's unit tests * refactor: react@18 compatibility of mui package's unit tests * refactor: react@18 compatibility of react-hook-form example * refactor: react@18 compatibility of refine-react-hook-form-use-steps-form-example example * refactor: react@18 compatibility of refine-realworld-example * refactor: react@18 compatibility of react-table example * refactor: react@18 compatibility of refine-headless-tutorial-example * style: reorder classNames on refine-headless-tutorial-example * refactor: react@18 compatibility of refine-headless-tutorial-example * refactor: react@18 compatibility of refine-ecommerce-example * fix: react@18 children prop issue * fix: multiple children on refine-email-subscriptions example * fix: multiple children on refine-invoice-generator example * fix: react@18 children prop issue * fix: react-hook-form & mui react@18 compability * docs: fix defaultValue for create form * fix: mui storybook react@18 compability * fix: add additional timeout for react-table test * chore: add changeset
refinedev · Jul 29, 2022 · b38620d · b38620d
1 parent 9b80864
commit b38620d
Show file tree

Hide file tree

Showing 331 changed files with 3,179 additions and 2,878 deletions.
diff --git a/.changeset/orange-bottles-breathe.md b/.changeset/orange-bottles-breathe.md
@@ -0,0 +1,21 @@
+---
+"@pankod/refine-antd": minor
+"@pankod/refine-antd-audit-log": minor
+"@pankod/refine-cloud": minor
+"@pankod/refine-core": minor
+"@pankod/refine-demo-sidebar": minor
+"@pankod/refine-hasura": minor
+"@pankod/refine-kbar": minor
+"@pankod/refine-mui": minor
+"@pankod/refine-nextjs-router": minor
+"@pankod/refine-nhost": minor
+"@pankod/refine-react-hook-form": minor
+"@pankod/refine-react-location": minor
+"@pankod/refine-react-router-v6": minor
+"@pankod/refine-react-table": minor
+"@pankod/refine-sdk": minor
+"@pankod/refine-strapi": minor
+"@pankod/refine-strapi-v4": minor
+---
+
+Add React@18 support 🚀
diff --git a/documentation/blog/2022-02-14-refine-ecommerce-blog.md b/documentation/blog/2022-02-14-refine-ecommerce-blog.md
@@ -137,9 +137,10 @@ We created our collections in the previous Strapi Multitenancy guide. Now we wil
 The Layout we've created now will only show the **refine** logo. In the following steps, we will edit our Layout.
 
 ```tsx title="components/Layout.tsx"
+import { LayoutProps } from "@pankod/refine-core";
 import { Box, Container, Flex, Image } from "@chakra-ui/react";
 
-export const Layout: React.FC = ({ children }) => {
+export const Layout: React.FC<LayoutProps> = ({ children }) => {
     return (
         <Box
             display={"flex"}

diff --git a/documentation/blog/2022-03-01-refine-invoice-genarator-p2.md b/documentation/blog/2022-03-01-refine-invoice-genarator-p2.md
@@ -848,9 +848,11 @@ export const PdfLayout: React.FC<PdfProps> = ({ record }) => {
                         <div className="pdf-body">
                             <div id="grid"></div>
                             <p className="signature">
-                                Signature: ________________ <br />
-                                <br />
-                                Date: {record?.date}
+                                <>
+                                    Signature: ________________ <br />
+                                    <br />
+                                    Date: {record?.date}
+                                </>
                             </p>
                         </div>
                     </div>

diff --git a/documentation/blog/2022-07-21-admin-panel-with-materialui-and-strapi.md b/documentation/blog/2022-07-21-admin-panel-with-materialui-and-strapi.md
@@ -390,6 +390,7 @@ The React Hook Form library has been integrated with **refine** ([`@pankod/refin
 First, we'll create PostCreate page to create new records.
 
 ```tsx title="src/pages/posts/create"
+import { HttpError } from "@pankod/refine-core";
 import {
     Box,
     TextField,
@@ -399,7 +400,7 @@ import {
 } from "@pankod/refine-mui";
 import { useForm, Controller } from "@pankod/refine-react-hook-form";
 
-import { ICategory } from "interfaces";
+import { IPost, ICategory } from "interfaces";
 
 export const PostCreate: React.FC = () => {
     const {
@@ -408,7 +409,7 @@ export const PostCreate: React.FC = () => {
         register,
         control,
         formState: { errors },
-    } = useForm();
+    } = useForm<IPost, HttpError, IPost & { category: ICategory }>();
 
     const { autocompleteProps } = useAutocomplete<ICategory>({
         resource: "categories",
@@ -550,6 +551,7 @@ Try it on the browser and see if you can create new posts from scratch.
 We'll start by creating a new `<PostEdit>` page responsible for editing a existed single record:
 
 ```tsx title="src/pages/posts/edit.tsx"
+import { HttpError } from "@pankod/refine-core";
 import { Controller, useForm } from "@pankod/refine-react-hook-form";
 import {
     Edit,
@@ -559,7 +561,7 @@ import {
     useAutocomplete,
 } from "@pankod/refine-mui";
 
-import { ICategory } from "interfaces";
+import { IPost, ICategory } from "interfaces";
 
 export const PostEdit: React.FC = () => {
     const {
@@ -568,7 +570,9 @@ export const PostEdit: React.FC = () => {
         register,
         control,
         formState: { errors },
-    } = useForm({ refineCoreProps: { metaData: { populate: ["category"] } } });
+    } = useForm<IPost, HttpError, IPost & { category: ICategory }>({
+        refineCoreProps: { metaData: { populate: ["category"] } },
+    });
 
     const { autocompleteProps } = useAutocomplete<ICategory>({
         resource: "categories",
@@ -600,7 +604,7 @@ export const PostEdit: React.FC = () => {
                     control={control}
                     name="category"
                     rules={{ required: "Category is required" }}
-                    defaultValue=""
+                    defaultValue={null as any}
                     render={({ field }) => (
                         <Autocomplete
                             {...autocompleteProps}

diff --git a/documentation/docs/core/hooks/ui/useMenu.md b/documentation/docs/core/hooks/ui/useMenu.md
@@ -40,9 +40,10 @@ We will show you how to use `useMenu` to create a simple menu for your refine ap
 Create a `<Layout />` component inside `src/components/layout.tsx` with the following code;
 
 ```tsx title="src/components/layout.tsx"
+import { LayoutProps } from "@pankod/refine-core";
 import { useMenu, useNavigation, useRouterContext, useRefineContext } from "@pankod/refine-core";
 
-export const Layout: React.FC = ({ children }) => {
+export const Layout: React.FC<LayoutProps> = ({ children }) => {
     const { menuItems, selectedKey } = useMenu();
     const { hasDashboard } = useRefineContext();
     const { Link } = useRouterContext();
@@ -200,9 +201,10 @@ export const App: React.FC = () => {
 Now you can update your `<Layout/>` to support multi level rendering with following code:
 
 ```tsx title="src/components/Layout.tsx"
+import { LayoutProps } from "@pankod/refine-core";
 import { useMenu, useNavigation, useRouterContext } from "@pankod/refine-core";
 
-export const Layout: React.FC = ({ children }) => {
+export const Layout: React.FC<LayoutProps> = ({ children }) => {
     const { menuItems, selectedKey } = useMenu();
     const { Link } = useRouterContext();
 

diff --git a/documentation/docs/core/tutorial.md b/documentation/docs/core/tutorial.md
@@ -417,12 +417,12 @@ We will create a **Layout** component to handle the rendering of the **Page** co
 Create a new folder named _"components"_ under _"/src"_ and create a new file named _"Layout.tsx"_ with the following code:
 
 ```tsx title="components/Layout.tsx"
-import { useMenu, useNavigation } from "@pankod/refine-core";
+import { useMenu, useNavigation, LayoutProps } from "@pankod/refine-core";
 import routerProvider from "@pankod/refine-react-router-v6";
 
 const { Link } = routerProvider;
 
-export const Layout: React.FC = ({ children }) => {
+export const Layout: React.FC<LayoutProps> = ({ children }) => {
     const { menuItems } = useMenu();
     const { push } = useNavigation();
 

diff --git a/documentation/docs/ui-frameworks/antd/components/fields/boolean.md b/documentation/docs/ui-frameworks/antd/components/fields/boolean.md
@@ -64,11 +64,11 @@ export const PostList: React.FC = () => {
 
 ### Properties
 
-| Property             | Description                                | Type                                                                 | Default                                                    |
-| -------------------- | ------------------------------------------ | -------------------------------------------------------------------- | ---------------------------------------------------------- |
-| value                | Field value                                | `unknown`                                                            |                                                            |
+| Property             | Description                                  | Type                                                                 | Default                                                    |
+| -------------------- | -------------------------------------------- | -------------------------------------------------------------------- | ---------------------------------------------------------- |
+| value                | Field value                                  | `unknown`                                                            |                                                            |
 | valueLabelTrue       | If there is a value, this is the text to use | `string`                                                             | `"true"`                                                   |
 | valueLabelFalse      | If there no value, this is the text to use   | `string`                                                             | `"false"`                                                  |
-| trueIcon             | If there is a value, this is the icon to use | `React.FC` \| `object`                                               | [`<CheckOutlined />`](https://ant.design/components/icon/) |
-| falseIcon            | If there no value, this is the icon to use.  | `React.FC` \| `object`                                               | [`<CloseOutlined />`](https://ant.design/components/icon/) |
-| AbstractTooltipProps | Ant Design `Tooltip` properties                | [`AbstractTooltipProps`](https://ant.design/components/tooltip/#API) |                                                            |
+| trueIcon             | If there is a value, this is the icon to use | `React.ReactNode`                                                    | [`<CheckOutlined />`](https://ant.design/components/icon/) |
+| falseIcon            | If there no value, this is the icon to use.  | `React.ReactNode`                                                    | [`<CloseOutlined />`](https://ant.design/components/icon/) |
+| AbstractTooltipProps | Ant Design `Tooltip` properties              | [`AbstractTooltipProps`](https://ant.design/components/tooltip/#API) |                                                            |
diff --git a/documentation/docs/ui-frameworks/mui/customization/theme.md b/documentation/docs/ui-frameworks/mui/customization/theme.md
@@ -518,7 +518,7 @@ export const ColorModeContext = createContext<ColorModeContextType>(
     {} as ColorModeContextType,
 );
 
-export const ColorModeContextProvider: React.FC = ({ children }) => {
+export const ColorModeContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
     const colorModeFromLocalStorage = localStorage.getItem("colorMode");
     const isSystemPreferenceDark = window?.matchMedia(
         "(prefers-color-scheme: dark)",

diff --git a/documentation/docs/ui-frameworks/mui/hooks/useAutocomplete.md b/documentation/docs/ui-frameworks/mui/hooks/useAutocomplete.md
@@ -32,6 +32,7 @@ We'll demonstrate how to get data at `/categories` endpoint from `https://api.fa
 ```
 
 ```tsx title="pages/posts/create.tsx"
+import { HttpError } from "@pankod/refine-core";
 import {
     Create,
     Box,
@@ -50,7 +51,7 @@ export const PostCreate = () => {
         register,
         control,
         formState: { errors },
-    } = useForm();
+    } = useForm<IPost, HttpError, IPost & { category: ICategory }>();
 
     // highlight-start
     const { autocompleteProps } = useAutocomplete<ICategory>({
@@ -109,6 +110,12 @@ interface ICategory {
     id: number;
     title: string;
 }
+
+export interface IPost {
+    id: number;
+    category: { id: number };
+}
+
 ```
 
 The use of `useAutocomplete` with [`useForm`](/packages/react-hook-form/useForm.md) is demonstrated in the code above. You can use the `useAutocomplete` hook independently of the `useForm`hook.

diff --git a/documentation/docs/ui-frameworks/mui/tutorial.md b/documentation/docs/ui-frameworks/mui/tutorial.md
@@ -1032,16 +1032,17 @@ The React Hook Form library has been integrated with **refine** ([`@pankod/refin
 Let's start by creating a new `<PostEdit>` page responsible for `editing` a single record:
 
 ```tsx title="src/pages/posts/edit.tsx"
-import { Controller, useForm } from "@pankod/refine-react-hook-form";
+import { HttpError } from "@pankod/refine-core";
 import {
     Edit,
     Box,
     TextField,
     Autocomplete,
     useAutocomplete,
 } from "@pankod/refine-mui";
+import { Controller, useForm } from "@pankod/refine-react-hook-form";
 
-import { ICategory } from "interfaces";
+import { ICategory, IPost } from "interfaces";
 
 export const PostEdit: React.FC = () => {
     const {
@@ -1050,7 +1051,7 @@ export const PostEdit: React.FC = () => {
         register,
         control,
         formState: { errors },
-    } = useForm();
+    } = useForm<IPost, HttpError, IPost & { category: ICategory }>();
 
     const { autocompleteProps } = useAutocomplete<ICategory>({
         resource: "categories",
@@ -1082,7 +1083,7 @@ export const PostEdit: React.FC = () => {
                     control={control}
                     name="status"
                     rules={{ required: "Status is required" }}
-                    defaultValue=""
+                    defaultValue={null as any}
                     render={({ field }) => (
                         <Autocomplete
                             {...field}
@@ -1108,7 +1109,7 @@ export const PostEdit: React.FC = () => {
                     control={control}
                     name="category"
                     rules={{ required: "Category is required" }}
-                    defaultValue=""
+                    defaultValue={null as any}
                     render={({ field }) => (
                         <Autocomplete
                             {...autocompleteProps}
@@ -1351,6 +1352,7 @@ Creating a record in **refine** follows a similar flow as `editing` records.
 First, we'll create a `<PostCreate>` page:
 
 ```tsx title="src/pages/posts/create.tsx"
+import { HttpError } from "@pankod/refine-core";
 import {
     Box,
     TextField,
@@ -1360,7 +1362,7 @@ import {
 } from "@pankod/refine-mui";
 import { useForm, Controller } from "@pankod/refine-react-hook-form";
 
-import { ICategory } from "interfaces";
+import { IPost, ICategory } from "interfaces";
 
 export const PostCreate: React.FC = () => {
     const {
@@ -1369,7 +1371,7 @@ export const PostCreate: React.FC = () => {
         register,
         control,
         formState: { errors },
-    } = useForm();
+    } = useForm<IPost, HttpError, IPost & { category: ICategory }>();
 
     const { autocompleteProps } = useAutocomplete<ICategory>({
         resource: "categories",
@@ -1398,7 +1400,6 @@ export const PostCreate: React.FC = () => {
                     control={control}
                     name="status"
                     rules={{ required: "Status is required" }}
-                    defaultValue=""
                     render={({ field }) => (
                         <Autocomplete
                             {...field}

diff --git a/examples/ably/package.json b/examples/ably/package.json
@@ -9,14 +9,14 @@
     "@pankod/refine-react-router-v6": "^3.29.0",
     "@pankod/refine-simple-rest": "^3.27.0",
     "@types/node": "^12.20.11",
-    "@types/react": "^17.0.4",
-    "@types/react-dom": "^17.0.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-markdown": "^6.0.1",
     "react-mde": "^11.1.0",
     "react-scripts": "^5.0.0",
-    "typescript": "^4.4.3"
+    "typescript": "^4.7.4"
   },
   "scripts": {
     "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",

diff --git a/examples/accessControl/casbin/package.json b/examples/accessControl/casbin/package.json
@@ -8,15 +8,15 @@
     "@pankod/refine-react-router-v6": "^3.29.0",
     "@pankod/refine-simple-rest": "^3.27.0",
     "@types/node": "^12.20.11",
-    "@types/react": "^17.0.4",
-    "@types/react-dom": "^17.0.4",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "casbin": "^5.15.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-markdown": "^6.0.1",
     "react-mde": "^11.1.0",
     "react-scripts": "^4.0.0",
-    "typescript": "^4.4.3"
+    "typescript": "^4.7.4"
   },
   "scripts": {
     "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",

diff --git a/examples/accessControl/cerbos/package.json b/examples/accessControl/cerbos/package.json
@@ -9,14 +9,14 @@
         "@pankod/refine-react-router-v6": "^3.29.0",
         "@pankod/refine-simple-rest": "^3.27.0",
         "@types/node": "^12.20.11",
-        "@types/react": "^17.0.4",
-        "@types/react-dom": "^17.0.4",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
         "react-markdown": "^6.0.1",
         "react-mde": "^11.1.0",
         "react-scripts": "^5.0.0",
-        "typescript": "^4.4.3"
+        "typescript": "^4.7.4"
     },
     "scripts": {
         "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",

diff --git a/examples/antdAuditLog/package.json b/examples/antdAuditLog/package.json
@@ -10,14 +10,14 @@
         "@pankod/refine-sdk": "^0.0.25",
         "@pankod/refine-simple-rest": "^3.27.0",
         "@types/node": "^12.20.11",
-        "@types/react": "^17.0.4",
-        "@types/react-dom": "^17.0.4",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
         "react-markdown": "^6.0.1",
         "react-mde": "^11.1.0",
         "react-scripts": "^5.0.0",
-        "typescript": "^4.4.3"
+        "typescript": "^4.7.4"
     },
     "scripts": {
         "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",

diff --git a/examples/auditLogProvider/package.json b/examples/auditLogProvider/package.json
@@ -11,14 +11,14 @@
         "@pankod/refine-react-router-v6": "^3.29.0",
         "@pankod/refine-simple-rest": "^3.27.0",
         "@pankod/refine-react-hook-form": "^3.29.0",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
     },
     "devDependencies": {
-        "@types/react": "^17.0.4",
-        "@types/react-dom": "^17.0.4",
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
         "@vitejs/plugin-react": "^1.0.7",
-        "typescript": "^4.4.3",
+        "typescript": "^4.7.4",
         "vite": "^2.8.0",
         "vite-plugin-cdn-import": "^0.3.5"
     },

diff --git a/examples/auditLogProvider/src/components/modal.tsx b/examples/auditLogProvider/src/components/modal.tsx
@@ -3,6 +3,7 @@ import React from "react";
 type ModalPropsType = {
     isOpen: boolean;
     onClose: () => void;
+    children: React.ReactNode;
 };
 
 export const Modal: React.FC<ModalPropsType> = ({