fix(docs): address feedbacks for documentation

documentation/blog/2023-08-12-react-admin-vs-refine.md

@@ -790,7 +790,7 @@ This structure will let you show errors in the form fields with out of the box i
 
 React-admin also provides a similar feature but it does not have the i18n support out of the box.
 
-Check out the [Server Side Validation](https://refine.dev/docs/advanced-tutorials/forms/server-side-form-validation/) documentation for more information about Refine's server side validation features.
+Check out the [Server Side Validation](https://refine.dev/docs/guides-concepts/forms/#server-side-validation-) documentation for more information about Refine's server side validation features.
 
 ### Auto Save
 

documentation/blog/2024-06-13-flexbox-vs-grid.md

@@ -270,7 +270,7 @@ Use grid:
 
 You should just ensure that the combination of both CSS Grid and Flexbox is not at the cost of web page loading or running performance. Grids can sometimes be complicated, requiring a bit more work from the rendering engine; when there are large layouts, it may take more time to render them. Flexbox should be faster than Grid for simple one-dimensional layouts.
 
-### Optimisation Tips
+### Optimization Tips
 
 The following will serve you to keep your web pages running smoothly:
 

documentation/blog/2024-06-20-framer-motion.md

@@ -587,7 +587,7 @@ We may use the `useTransform` to define a new motion value called opacity. By sp
 
 #### Use cases of the useTransform hook.
 
-An example is to utilise the `useTransform` hook to animate the background parameters of an element on hover.
+An example is to utilize the `useTransform` hook to animate the background parameters of an element on hover.
 
 **Code:**
 

documentation/blog/2024-07-05-turborepo.md

@@ -198,7 +198,7 @@ jobs:
 
 Turborepo effectively integrates with package managers like npm, yarn, and pnpm, making it possible to manage dependencies in one centralized place. The add-on nature of Turborepo allows you to use the main features of your favorite package manager while using Turborepo's advanced features for task execution and caching.
 
-1. **Setup**: Install dependencies using your favourite package manager.
+1. **Setup**: Install dependencies using your favorite package manager.
 
 2. **Configuration**: Configure Turborepo to understand and work with the package manager's lock file and workspace settings.
 

documentation/blog/2024-08-05-react-unit-testing.md

@@ -741,7 +741,7 @@ test("button should have correct aria-label", () => {
 });
 ```
 
-In this example we are using the aria-label attribute in order that the button is accessibly labelled. We then use the @testing-library/react getByLabelText to test that the button is accessible by its ARIA label.
+In this example we are using the aria-label attribute in order that the button is accessibly labeled. We then use the @testing-library/react getByLabelText to test that the button is accessible by its ARIA label.
 
 ### Keyboard Navigation Testing
 

documentation/blog/2024-08-09-react-uselayouteffect.md

@@ -394,7 +394,7 @@ test("removes event listener on unmount", () => {
 
 ### Timers and Asynchronous Operations
 
-If the `useLayoutEffect` depends on some async operation or running timers, then with the help of test utilities, such as Jest's fake timers, you are sure the behaviour is tested right. You will be able to manipulate time better and determine the side effects that should happen with that delay.
+If the `useLayoutEffect` depends on some async operation or running timers, then with the help of test utilities, such as Jest's fake timers, you are sure the behavior is tested right. You will be able to manipulate time better and determine the side effects that should happen with that delay.
 
 ```tsx
 import React, { useLayoutEffect, useRef } from "react";

documentation/blog/2024-08-15-react-web-socket.md

@@ -336,7 +336,7 @@ I would like to briefly share my thoughts on security considerations while worki
 
 ### WSS: WebSocket Secure Connections
 
-Please be sure to use secure websocket connections (wss://) not just plain websocket connections (ws://). This would be the equivalent of using HTTPS not HTTP. Secure websocket connections actually encrypt the data travelling between the two points and, for this reason, help secure it from being man-in-the-middled to abuse.
+Please be sure to use secure websocket connections (wss://) not just plain websocket connections (ws://). This would be the equivalent of using HTTPS not HTTP. Secure websocket connections actually encrypt the data traveling between the two points and, for this reason, help secure it from being man-in-the-middled to abuse.
 
 ```tsx
 const ws = new WebSocket("wss://example.com/socket");

documentation/docs/data/data-provider/index.md

@@ -178,7 +178,9 @@ You can either use the `dataProviderName` prop in data hooks and data-related co
 
 ```tsx
 useTable({
-  dataProviderName: "example",
+  meta: {
+    dataProviderName: "example",
+  },
 });
 ```
 
@@ -241,6 +243,7 @@ The `getList` method is used to get a list of resources with sorting, filtering,
 Refine will consume this method using the [`useList`][use-list] or [`useInfiniteList`][use-infinite-list] data hook.
 
 #### Retrieving the Total Row Count
+
 - Different data providers have specific ways to determine the total row count, and these are just some examples:
   - **Simple REST Providers:** The `x-total-count` header is commonly used to get the row count.
   - **GraphQL Providers:** The total count is often sourced from specific data fields, like `response.data.pageInfo.total`.
@@ -266,6 +269,7 @@ getList: async ({ resource, pagination, sorters, filters, meta }) => {
     total,
   };
 };
+```
 
 :::tip
 

documentation/docs/data/hooks/use-form/index.md

@@ -233,15 +233,15 @@ useForm({ meta: { headers: { "x-greetings": "hello world" } } });
 Meta data values to be used in the internal `useOne` call for the `edit` and `clone` actions. These values will take precedence over the `meta` values.
 
 ```tsx
-useForm({ meta: { headers: { "x-greetings": "hello mars" } } });
+useForm({ queryMeta: { headers: { "x-greetings": "hello mars" } } });
 ```
 
 ### mutationMeta
 
 Meta data values to be used in the internal `useCreate` and `useUpdate` calls for form submissions. These values will take precedence over the `meta` values.
 
 ```tsx
-useForm({ meta: { headers: { "x-greetings": "hello pluto" } } });
+useForm({ mutationMeta: { headers: { "x-greetings": "hello pluto" } } });
 ```
 
 ### queryOptions

documentation/docs/data/hooks/use-invalidate/index.md

@@ -111,13 +111,13 @@ By default settings, all the targeted queries are invalidated and the active one
 
 ### Invalidation Parameters
 
-| Property                         | Description                                                       | Type                                                                                                                        | Default                                  |
-| -------------------------------- | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- |
-| invalidated <PropTag asterisk /> | The states you want to invalidate.                                | `all`, `resourceAll`, `list`, `many`, `detail`, `false`                                                                     |                                          |
-| resource                         | Resource name for State invalidation.                             | `string`                                                                                                                    |                                          |
-| id                               | The `id` to use when invalidating the "detail" state.             | [`BaseKey`](/docs/core/interface-references#basekey)                                                                        |                                          |
-| dataProviderName                 | The name of the data provider whose state you want to invalidate. | `string`                                                                                                                    | `default`                                |
-| invalidationFilters              | The filters to use when picking queries to invalidate             | [`InvalidateQueryFilters`](https://tanstack.com/query/latest/docs/react/reference/QueryClient#queryclientinvalidatequeries) | `{ type: "all", refetchType: "active" }` |
-| invalidationOptions              | The options to use in the invalidation process                    | [`InvalidateOptions`](https://tanstack.com/query/latest/docs/react/reference/QueryClient#queryclientinvalidatequeries)      | `{ cancelRefetch: false }`               |
+| Property                         | Description                                                       | Type                                                                                                              | Default                                  |
+| -------------------------------- | ----------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------- |
+| invalidated <PropTag asterisk /> | The states you want to invalidate.                                | `all`, `resourceAll`, `list`, `many`, `detail`, `false`                                                           |                                          |
+| resource                         | Resource name for State invalidation.                             | `string`                                                                                                          |                                          |
+| id                               | The `id` to use when invalidating the "detail" state.             | [`BaseKey`](/docs/core/interface-references#basekey)                                                              |                                          |
+| dataProviderName                 | The name of the data provider whose state you want to invalidate. | `string`                                                                                                          | `default`                                |
+| invalidationFilters              | The filters to use when picking queries to invalidate             | [`InvalidateQueryFilters`](https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientinvalidatequeries) | `{ type: "all", refetchType: "active" }` |
+| invalidationOptions              | The options to use in the invalidation process                    | [`InvalidateOptions`](https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientinvalidatequeries)      | `{ cancelRefetch: false }`               |
 
 [data-provider]: /docs/data/data-provider

documentation/docs/data/hooks/use-show/_basic-usage-live-preview.md

@@ -19,10 +19,10 @@ interface IProduct {
 const ProductShow: React.FC = () => {
   const { query } = useShow<IProduct>();
 
-  const { data, isLoading, isError } = query;
+  const { data, isFetching, isError, refetch } = query;
   const product = data?.data;
 
-  if (isLoading) {
+  if (isFetching) {
     return <div>Loading...</div>;
   }
 
@@ -36,6 +36,7 @@ const ProductShow: React.FC = () => {
       <p>id: {product?.id}</p>
       <p>name: {product?.name}</p>
       <p>material: {product?.material}</p>
+      <button onClick={refetch}>Refresh</button>
     </div>
   );
 };

documentation/docs/data/packages/simple-rest/index.md

@@ -123,7 +123,7 @@ In some cases, you may need to customize the data provider to work with a REST A
    const App = () => {
      return (
        <Refine
-         dataProvider={dataProvider}
+         dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
          /* ... */
        />
      );

documentation/docs/data/packages/strapi-v4/index.md

@@ -1204,7 +1204,7 @@ By default, `@refinedev/strapi-v4` transforms the error response from Strapi int
 
 Thus, `useForm` will automatically set the error message for each field that has a validation error.
 
-[Refer to the server-side form validation documentation for more information &#8594 ](/docs/advanced-tutorials/forms/server-side-form-validation).
+[Refer to the server-side form validation documentation for more information &#8594 ](/docs/guides-concepts/forms/#server-side-validation-).
 
 ## Example
 

documentation/docs/examples/form/antd/serverSideFormValidation.md

@@ -8,7 +8,7 @@ You can handle server-side form validation errors out-of-the-box with [Ant Desig
 
 When `dataProvider` returns rejected promise with `errors` field, [`useForm`][react-hook-form-use-form] will automatically update the error state with the rejected `errors` field.
 
-[Refer to the server-side Form Validation documentation for more information. →](/docs/advanced-tutorials/forms/server-side-form-validation/)
+[Refer to the server-side Form Validation documentation for more information. →](/docs/guides-concepts/forms/#server-side-validation-)
 
 <CodeSandboxExample path="server-side-form-validation-antd" />
 

documentation/docs/examples/form/chakra-ui/serverSideFormValidation.md

@@ -8,7 +8,7 @@ You can handle server-side form validation errors out-of-the-box with [React Hoo
 
 When `dataProvider` returns rejected promise with `errors` field, [`useForm`][react-hook-form-use-form] will automatically update the error state with the rejected `errors` field.
 
-[Refer to the server-side Form Validation documentation for more information. →](/docs/advanced-tutorials/forms/server-side-form-validation/)
+[Refer to the server-side Form Validation documentation for more information. →](/docs/guides-concepts/forms/#server-side-validation-)
 
 <CodeSandboxExample path="server-side-form-validation-chakra-ui" />
 

documentation/docs/examples/form/mantine/serverSideFormValidation.md

@@ -8,7 +8,7 @@ You can handle server-side form validation errors out-of-the-box with [Mantine u
 
 When `dataProvider` returns rejected promise with `errors` field, [`useForm`][react-hook-form-use-form] will automatically update the error state with the rejected `errors` field.
 
-[Refer to the server-side Form Validation documentation for more information. →](/docs/advanced-tutorials/forms/server-side-form-validation/)
+[Refer to the server-side Form Validation documentation for more information. →](/docs/guides-concepts/forms/#server-side-validation-)
 
 <CodeSandboxExample path="server-side-form-validation-mantine" />
 

documentation/docs/examples/form/mui/serverSideFormValidation.md

@@ -8,7 +8,7 @@ You can handle server-side form validation errors out-of-the-box with [React Hoo
 
 When `dataProvider` returns rejected promise with `errors` field, [`useForm`][react-hook-form-use-form] will automatically update the error state with the rejected `errors` field.
 
-[Refer to the server-side Form Validation documentation for more information. →](/docs/advanced-tutorials/forms/server-side-form-validation/)
+[Refer to the server-side Form Validation documentation for more information. →](/docs/guides-concepts/forms/#server-side-validation-)
 
 <CodeSandboxExample path="server-side-form-validation-material-ui" />
 

documentation/docs/guides-concepts/data-fetching/index.md

@@ -384,7 +384,7 @@ After obtaining the token, we'll use Axios interceptors to include the token in
 
 ## TanStack Query `QueryClient`
 
-To modify the [`QueryClient`](https://tanstack.com/query/latest/docs/react/reference/QueryClient) instance, you can use the `reactQuery` prop of the [`<Refine />`](/docs/core/refine-component) component.
+To modify the [`QueryClient`](https://tanstack.com/query/v4/docs/reference/QueryClient) instance, you can use the `reactQuery` prop of the [`<Refine />`](/docs/core/refine-component) component.
 
 ## `dataProvider` interface
 

documentation/docs/guides-concepts/notifications/notifications-mui.tsx

@@ -14,7 +14,7 @@ export default function NotificationMui() {
         "@mui/lab": "^5.0.0-alpha.85",
         "@mui/material": "^5.14.2",
         "@mui/system": "latest",
-        "@refinedev/mui": "5.0.0",
+        "@refinedev/mui": "latest",
       }}
       startRoute="/"
       files={{

documentation/docs/notification/notification-provider/index.md

@@ -51,7 +51,7 @@ const App = () => {
   return (
     <Refine
       //highlight-next-line
-      notificationProvider={useNotificationProvider}
+      notificationProvider={notificationProvider}
       /* ... */
     >
       {/* ... */}
@@ -139,7 +139,7 @@ import { useNotificationProvider } from "@refinedev/chakra-ui";
 return (
   <Refine
     //...
-    notificationProvider={useNotificationProvider}
+    notificationProvider={useNotificationProvider()}
   />
 );
 ```

documentation/docs/packages/react-hook-form/use-form/index.md

@@ -1048,7 +1048,7 @@ const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
 `onFinish` is a function that is called when the form is submitted. It will call the appropriate mutation based on the `action` property.
 You can override the default behavior by passing an `onFinish` function in the hook's options.
 
-For example you can [change values before sending to the API](/docs/packages/list-of-packages#how-can-i-change-the-form-data-before-submitting-it-to-the-api).
+For example you can [change values before sending to the API](/docs/packages/react-hook-form/use-form/#how-can-i-change-the-form-data-before-submitting-it-to-the-api).
 
 ### saveButtonProps
 

documentation/docs/routing/integrations/next-js/index.md

@@ -668,7 +668,7 @@ First let's create our [AuthProvider](/docs/authentication/auth-provider)
 
 let's install the `nookies` packages in our project.
 
-<InstallPackagesCommand args="@refinedev/nookies"/>
+<InstallPackagesCommand args="nookies"/>
 
 We will set/destroy cookies in the `login`, `logout` and `check` functions of our `AuthProvider`.
 

documentation/docs/ui-integrations/ant-design/hooks/use-modal-form/index.md

@@ -424,7 +424,7 @@ const modalForm = useModalForm({
 Default values for the form. Use this to pre-populate the form with data that needs to be displayed.
 
 ```tsx
-useForm({
+useModalForm({
   defaultFormValues: {
     title: "Hello World",
   },
@@ -436,7 +436,7 @@ Also, it can be provided as an async function to fetch the default values. The l
 > 🚨 When `action` is "edit" or "clone" a race condition with `async defaultFormValues` may occur. In this case, the form values will be the result of the last completed operation.
 
 ```tsx
-const { defaultFormValuesLoading } = useForm({
+const { defaultFormValuesLoading } = useModalForm({
   defaultFormValues: async () => {
     const response = await fetch("https://my-api.com/posts/1");
     const data = await response.json();

documentation/docs/ui-integrations/ant-design/hooks/use-radio-group/index.md

@@ -83,7 +83,7 @@ If you have multiple resources with the same name, you can pass the `identifier`
 ### defaultValue
 
 ```tsx
-const { selectProps } = useRadioGroup({
+const { radioGroupProps } = useRadioGroup({
   resource: "languages",
   // highlight-next-line
   defaultValue: 1,
@@ -98,7 +98,7 @@ const { selectProps } = useRadioGroup({
 - `"selected-first"`: sort `selectedOptions` at the top.
 
 ```tsx
-const { selectProps } = useRadioGroup({
+const { radioGroupProps } = useRadioGroup({
   resource: "languages",
   // highlight-next-line
   defaultValue: 1,
@@ -212,7 +212,7 @@ const { radioGroupProps } = useRadioGroup({
 `fetchSize` is the amount of records to fetch in checkboxes.
 
 ```tsx
-const { selectProps } = useRadioGroup({
+const { radioGroupProps } = useRadioGroup({
   resource: "languages",
   // highlight-next-line
   fetchSize: 20,
@@ -243,7 +243,7 @@ const { radioGroupProps } = useRadioGroup({
 For example, lets say that we have 1000 post records:
 
 ```ts
-const { selectProps } = useRadioGroup({
+const { radioGroupProps } = useRadioGroup({
   resource: "categories",
   // highlight-next-line
   pagination: { current: 3, pageSize: 8 },

documentation/docs/ui-integrations/mantine/hooks/use-form/index.md

@@ -1161,7 +1161,7 @@ You can use `meta` property to pass common values to the mutation and the query.
 
 ### How can I handle server-side form validation?
 
-[Refer to the Server-Side form validation documentation for more information. →](/docs/advanced-tutorials/forms/server-side-form-validation/#example-with-mantine-useform)
+[Refer to the Server-Side form validation documentation for more information. →](/docs/guides-concepts/forms/#server-side-validation-#example-with-mantine-useform)
 
 ## API Reference