feat: refine v4 💥 (refinedev#3709)

.changeset/beige-mails-walk.md

@@ -0,0 +1,5 @@
+---
+"@refinedev/codemod": minor
+---
+
+Added transform function to change `metaData` to `meta`.

.changeset/big-dingos-fix.md

@@ -0,0 +1,5 @@
+---
+"@pankod/refine-remix-router": minor
+---
+
+`parseTableParams` helper is added to let users parse the query params in loaders to persist `syncWithLocation` feature in tables.

.changeset/bright-cobras-ring.md

@@ -0,0 +1,5 @@
+---
+"@refinedev/codemod": major
+---
+
+Added `move-to-new-org` transform to move **refine** packages to their new scope `@refinedev`.

.changeset/chatty-otters-approve.md

@@ -0,0 +1,5 @@
+---
+"@refinedev/demo-sidebar": minor
+---
+
+Upgrade `@ant-design/icons` to `^5.0.1` for consistency.

.changeset/chilled-candles-kick.md

@@ -0,0 +1,5 @@
+---
+"@pankod/refine-mui": minor
+---
+
+Updated buttons with `resource` property. `resourceNameOrRouteName` is now deprecated but kept working until next major version.

.changeset/chilly-bobcats-rhyme.md

@@ -0,0 +1,41 @@
+---
+"@refinedev/remix-router": major
+---
+
+## 🪄 Migrating your project automatically with refine-codemod ✨
+
+[`@refinedev/codemod`](https://github.com/refinedev/refine/tree/master/packages/codemod) package handles the breaking changes for your project automatically, without any manual steps. It migrates your project from `3.x.x` to `4.x.x`.
+
+Just `cd` into root folder of your project (where `package.json` is contained) and run this command:
+
+```sh
+npx @refinedev/codemod refine3-to-refine4
+```
+
+And it's done. Now your project uses `[email protected]`.
+
+## 📝 Changelog
+
+We're releasing a new way to connect your router to **refine**. 
+
+The legacy `routerProvider` and its exports are now deprecated but accessible at `@refinedev/remix-router/legacy` path.
+
+The new `routerBindings` are smaller and more flexible than the previos one.
+
+## New `routerBindings` export
+
+New `routerBindings` contains following properties;
+
+- `go`: Which returns a function to handle the navigation in `@remix-run/react`. It accepts a config object and navigates to the given path. Uses `useNavigate` hook under the hood.
+- `back`: Which returns a function to handle the navigation in `@remix-run/react`. It navigates back to the previous page. Uses `useNavigate` hook under the hood.
+- `parse`: Which returns a function to parse the given path and returns the `resource`, `id`, `action` and additional `params`. Uses `useParams` and `useLocation` hooks under the hood.
+- `Link`: A component that accepts `to` prop and renders a link to the given path. Uses `Link` component from `@remix-run/react` under the hood.
+
+## Complemetary Components
+
+- `RefineRoutes` - A component that renders the routes for the resources when the actions are defined as components. This can be used to achieve the legacy behavior of `routerProvider` prop. `RefineRoutes` component accepts a render function as a child and passes `JSX.Element` if there's a match for the given path, `undefined` is passed otherwise. You can use this in `$` splat route to render the matching action component for a resource. We're encouraging our users to use file based routing instead of `$` splat route which provides more flexibility and a better development experience with its performance benefits.
+
+- `NavigateToResource` - A component that navigates to the first `list` action of the `resources` array of `<Refine>`. Optionally, you can pass a `resource` prop to navigate to `list` action of the resource. This can be placed at the `index` route of your app to redirect to the first resource.
+
+- `UnsavedChangesNotifier` - This component handles the prompt when the user tries to leave the page with unsaved changes. It can be placed under the `Refine` component.
+

.changeset/clean-owls-return.md

@@ -0,0 +1,24 @@
+---
+"@refinedev/react-hook-form": major
+---
+
+All `react-hook-form` imports re-exported from `@refinedev/react-hook-form` have been removed. You should import them from the `react-hook-form` package directly.
+
+If the package is not installed, you can install it with your package manager:
+
+```bash
+npm install react-hook-form
+# or
+pnpm add react-hook-form
+# or
+yarn add react-hook-form
+```
+
+After that, you can import them from `react-hook-form` package directly.
+
+```diff
+- import { useForm, Controller } from "@refinedev/react-hook-form";
+
++ import { useForm } from "@refinedev/react-hook-form";
++ import { Controller } from "react-hook-form";
+```

.changeset/clever-beans-pretend.md

@@ -0,0 +1,199 @@
+---
+"@refinedev/core": major
+---
+
+## 🪄 Migrating your project automatically with refine-codemod ✨
+
+[`@refinedev/codemod`](https://github.com/refinedev/refine/tree/master/packages/codemod) package handles the breaking changes for your project automatically, without any manual steps. It migrates your project from `3.x.x` to `4.x.x`.
+
+Just `cd` into root folder of your project (where `package.json` is contained) and run this command:
+
+```sh
+npx @refinedev/codemod refine3-to-refine4
+```
+
+And it's done. Now your project uses `[email protected]`.
+
+## 📝 Changelog
+
+We're releasing a new way to connect routers to **refine**. Now the `routerProvider` prop is marked as optional in `<Refine>` component.
+
+New `routerProvider` property is smaller and more flexible than the previous one which is now can be used with `legacyRouterProvider` property. 
+
+We've redesigned our bindings to the router libraries. Instead of handling the route creation process, now **refine** leaves this to the user and only uses a way to communicate with the router and the routes through the bindings provided to `routerProvider` property.
+
+The changes in routing system comes with a new way to define resource actions as well. Actions now can be defined as paths, components or both. We're encouraging our users to use paths, which enables our users to use all the optimizations that the router libraries provide without giving up any features of **refine**.
+
+Router libraries are also comes with components like `RefineRoutes` which can be used to define routes for resources when you pass components to the actions of the resources. Please refer to the documentation for more information.
+
+## Changes in `resources`
+
+Now you can define actions in multiple ways;
+
+1. As a path
+
+```tsx
+<Refine
+    resources={[
+        {
+            name: "posts",
+            list: "/posts",
+        },
+    ]}
+>
+...
+</Refine>
+```
+
+2. As a component
+
+```tsx
+import { PostList } from "src/posts";
+
+<Refine
+    resources={[
+        {
+            name: "posts",
+            list: PostList,
+        },
+    ]}
+>
+...
+</Refine>
+```
+
+3. As both
+
+```tsx
+import { PostList } from "src/posts";
+
+<Refine
+    resources={[
+        {
+            name: "posts",
+            list: {
+                path: "/posts",
+                component: PostList,
+            },
+        },
+    ]}
+>
+...
+</Refine>
+```
+
+This also comes with some additional changes;
+
+- `options` property is renamed to `meta` for consistency.
+- `parentName` is now defined with `parent` property in `meta` object.
+- `auditLog` is renamed to `audit`.
+- `route` in `options` is now deprecated for the new routing system. If you want to define a custom route for a resource, you can define such routes in action definitions.
+- Parents are not included in the routes by default. If you want to inclue parents in the routes, you need to define action paths explicitly.
+- `identifier` can be passed to the resource definition to distinguish between resources with the same name. This is useful when you have multiple resources with the same name.
+
+### Nested routes
+
+Now, **refine** supports nested routes with parameters. You can define the action paths for a resource with parameters. Parameters will be filled with the current ones in the URL and additional ones can be provided via `meta` properties in hooks and components.
+
+```tsx
+<Refine
+    resources={[
+        {
+            name: "posts",
+            list: "users/:authorId/posts",
+            show: "users/:authorId/posts/:id",
+        },
+    ]}
+>
+```
+
+When you're in the `list` page of the `posts` resource, assuming you already have the `authorId` parameter present in the URL, the `show` action will be rendered with the `authorId` parameter filled with the current one in the URL. If you want to use a different `authorId`, you can pass `meta` properties to the components or hooks, such as `useGetToPath` hook to get the navigation path.
+
+```tsx
+const { go } = useGo();
+const getToPath = useGetToPath();
+
+const to = getToPath({
+    resource: "posts",
+    action: "show",
+    meta: {
+        id: 1,
+        authorId: 2,
+    },
+});
+// "to" will be "/users/2/posts/1"
+
+go({ to, type: "push" });
+```
+
+## Changes in `routerProvider`
+
+`routerProvider` is now smaller and more flexible. It only contains the following properties;
+
+- `Link`: A component that accepts `to` prop and renders a link to the given path.
+- `go`: A function that returns a function that accepts a config object and navigates to the given path.
+- `back`: A function that returns a function that navigates back to the previous page.
+- `parse`: A function that returns a function that returns the `resource`, `id`, `action` and additional `params` from the given path. This is the **refine**'s way to communicate with the router library.
+
+None of the properties are required. Missing properties may result in some features not working but it won't break **refine**.
+
+Our users are able to provide different implementations for the router bindings, such as handling the search params in the path with a different way or customizing the navigation process.
+
+**Note**: Existing `routerProvider` implementation is preserved as `legacyRouterProvider` and will continue working as before. We're planning to remove it in the next major version.
+
+**Note**: New routing system do not handle the authentication process. You can now wrap your components with `Authenticated` component or handle the authentication check inside your components through `useIsAuthenticated` hook to provide more flexible auth concepts in your app.
+
+## Changes in hooks
+
+We're now providing new hooks for the new routing system. You're free to use them or use the ones provided by your router library.
+
+- `useGo`
+- `useBack`
+- `useParsed`
+- `useLink`
+- `useGetToPath`
+
+are provided by **refine** to use the properties of `routerProvider` in a more convenient way.
+
+- `useResourceWithRoute` is now deprecated and only works with the legacy routing system.
+- `useResource` has changed its definition and now accepts a single argument which is the `resource` name. It returns the `resource` object depending on the current route or the given `resource` name. If `resource` is provided but not found, it will create a temporary one to use with the given `resource` name.
+- `useNavigation`'s functions in its return value are now accepting `meta` object as an argument. This can be used to provide parameters to the target routes. For example, if your path for the `edit` action of a resource is `/:userId/posts/:id/edit`, you can provide `userId` parameter in `meta` object and it will be used in the path. 
+- Hooks using routes, redirection etc. are now accepts `meta` property in their arguments. This can be used to provide parameters to the target routes. This change includes `useMenu` and `useBreadcrumb` which are creating paths to the resources for their purposes.
+- `selectedKey` in `useMenu` hook's return type now can be `undefined` if the current route is not found in the menu items.
+
+## `warnWhenUnsavedChanges` prop
+
+In earlier versions, **refine** was handling this feature in `beforeunload` event. This was causing unintended dependencies to the `window` and was not customizable. Now, **refine** is leaving this to the router libraries. Router packages `@refinedev/react-router-v6`, `@refinedev/nextjs-router` and `@refinedev/remix-router` are now exporting a component `UnsavedChangesNotifier` which can be placed under the `<Refine>` component and registers a listener to the necessary events to handle the `warnWhenUnsavedChanges` feature.
+
+## Changes in `Authenticated` component.
+
+`<Authenticated>` component now accepts `redirectOnFail` to override the redirection path on authentication failure. This can be used to redirect to a different page when the user is not authenticated. This property only works if the `fallback` prop is not provided. 
+
+`redirectOnFail` also respects the newly introduced `appendCurrentPathToQuery` prop which can be used to append the current path to the query string of the redirection path. This can be used to redirect the user to the page they were trying to access after they logged in.
+
+## Changes in `<Refine>`
+
+We've removed the long deprecated props from `<Refine />` component and deprecated some more to encourage users to use the new routing system.
+
+In earlier versions, we've accepted layout related props such as `Layout`, `Sider`, `Header`, `Footer`, `OffLayoutArea` and `Title`. All these props were used in the route creation process while wrapping the components to the `Layout` and others were passed to the `Layout` for configuration. Now, we've deprecated these props and we're encouraging users to use `Layout` prop and its props in the `children` of `<Refine />` component. This will allow users to customize the layout easily and provide custom layouts per route.
+
+We've also deprecated the route related props such as;
+
+- `catchAll`, which was used in rendering 404 pages and was unclear to the user when its going to be rendered in the app.
+- `LoginPage`, which was rendered at `/login` path and was not customizable enough.
+- `DashboardPage`, which wass rendered at `/` path and was limiting our users to handle the index page just with a single prop.
+- `ReadyPage`, which was shown when `<Refine>` had no resources defined. Now, we're accepting empty resources array and rendering nothing in this case.
+
+We're encouraging our users to create their own routes for the above props and give them the flexibility to use the full potential of the router library they're using.
+
+## Integration with existing apps
+
+We've made the changes to the routing system, the resource definitions and some additional changes to make the integration with existing apps possible. 
+
+Now you can migrate your existing apps to **refine** with ease and incrementally adopt **refine**'s features.
+
+## Backward compatibility
+
+We've made all the changes in a backward compatible way. You can continue using the old routing system and the old props of `<Refine />` component. Migrating to the new behaviors are optional but encouraged. 
+
+We're planning to keep the support for the deprecated props and the old behaviors until the next major version.

.changeset/config.json

@@ -7,7 +7,7 @@
   "access": "public",
   "baseBranch": "master",
   "updateInternalDependencies": "patch",
-  "ignore": ["!@pankod/*", "!create-refine-app"],
+  "ignore": ["!@refinedev/*", "!create-refine-app"],
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "onlyUpdatePeerDependentsWhenOutOfRange": true
   }

.changeset/curvy-pianos-carry.md

@@ -0,0 +1,45 @@
+---
+"@refinedev/antd": major
+---
+
+Updated the components to match the changes in routing system of `@refinedev/core`.
+
+## `meta` property in components
+
+This includes `meta` props in buttons and `Sider` component. `meta` property can be used to pass additional parameters to the navigation paths.
+
+For a `posts` resource definition like this:
+
+```tsx
+<Refine
+    resources={[
+        {
+            name: "posts",
+            list: "/posts",
+            show: "/:authorId/posts/:id",
+        }
+    ]}
+>
+```
+
+You can pass `authorId` to the `ShowButton` component like this:
+
+```tsx
+<ShowButton resource="posts" id="1" meta={{ authorId: 123 }}>
+```
+
+This will navigate to `/123/posts/1` path.
+
+## `syncWithLocation` support in `useDrawerForm` and `useModalForm` hooks
+
+`useDrawerForm` and `useModalForm` hooks now support `syncWithLocation` prop. This prop can be used to sync the visibility state of them with the location via query params. 
+
+You can pass a boolean or an object with `key` and `syncId` properties.
+
+- `key` is used to define the query param key. Default value is inferred from the resource and the action. For example `posts-create` for `posts` resource and `create` action.
+
+- `syncId` is used to include the `id` property in the query param key. Default value is `false`. This is useful for `edit` and `clone` actions.
+
+## Removed props
+
+`ignoreAccessControlProvider` prop is removed from buttons.

.changeset/early-bananas-reflect.md

@@ -0,0 +1,9 @@
+---
+"@refinedev/core": minor
+---
+
+Added [audit log](https://refine.dev/docs/api-reference/core/providers/audit-log-provider/) support for the following hooks:
+
+-   [`useCreateMany`](https://refine.dev/docs/api-reference/core/hooks/data/useCreateMany/)
+-   [`useDeleteMany`]((https://refine.dev/docs/api-reference/core/hooks/data/useDeleteMany/))
+-   [`useUpdateMany`]((https://refine.dev/docs/api-reference/core/hooks/data/useUpdateMany/))

.changeset/early-kings-add.md

@@ -0,0 +1,7 @@
+---
+"@refinedev/chakra-ui": minor
+---
+
+`meta` prop is added. To ensure backward compatibility, `metaData` prop will be used if `meta` prop is not provided.
+
+

.changeset/early-pigs-decide.md

@@ -0,0 +1,5 @@
+---
+"@refinedev/inferencer": minor
+---
+
+Inferecer uses the resource `meta` instead of `options` to pick which data provider to use. If `meta` is not defined, it will use `options` as fallback.