Fix resource usage and add routerProvider to <Refine>

README.md

@@ -21,6 +21,7 @@
 [![npm](https://img.shields.io/npm/dm/@pankod/refine)](https://www.npmjs.com/package/@pankod/refine)
 [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](code_of_conduct.md)
 [![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/UuU3XCc3J5)
+
 </div>
 
 <div align="center">
@@ -29,8 +30,7 @@
 
 ## About
 
-[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to *admin panels*, *B2B applications* and *dashboards*.
-
+[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.
 
 ## Documentation
 
@@ -54,13 +54,13 @@ For more detailed information and usage, refer to the [refine documentation](htt
 
 ## Motivation
 
-Higher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility. 
+Higher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.
 
 After many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.
 
 **refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.
 
-As **refine** is totally *unopinionated* about UI and logic, it's strongly *opinionated* about three parts of your application:
+As **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:
 
 1. **API Networking**
 2. **State Management**
@@ -72,8 +72,8 @@ We believe, these are the most important components of a data-intensive frontend
 
 ## Architecture
 
-**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components. 
-Under the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management. 
+**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.
+Under the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.
 Access to external sources and API's happen via providers which are basically plug-in type components for extendibility.
 
 <br/>
@@ -82,21 +82,19 @@ Access to external sources and API's happen via providers which are basically pl
     <img src="https://raw.githubusercontent.com/pankod/refine/master/documentation/static/img/getting-started/refine_architecture.png" width="400px" />
 </div>
 
-
 ## Benchmark
 
-After releasing the first internal versions, we had the chance to migrate some of our *React* projects to **refine**.
+After releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.
 In addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.
 
-**refine** makes your codebase significantly smaller, by eliminating redundant code such as *reducers*, *actions* and *unit tests*. Below is a size comparison for an example project:
+**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:
 
 <br/>
 
 <div align="center">
     <img src="https://raw.githubusercontent.com/pankod/refine/master/documentation/static/img/getting-started/benchmark.png" width="400px" align="center" />
 </div>
 
-
 ## Quick Start
 
 Run the **superplate** tool with the following command:
@@ -105,7 +103,7 @@ Run the **superplate** tool with the following command:
 npx superplate-cli tutorial
 ```
 
-Follow the *CLI wizard* to select options and start creating your project.
+Follow the _CLI wizard_ to select options and start creating your project.
 
 After setup is complete, navigate to the project folder and start your project with:
 
@@ -115,7 +113,7 @@ npm run dev
 
 Your **refine** application will be accessible at [http://localhost:3000](http://localhost:3000).
 
-Replace the contents of ```App.tsx``` with the following code:
+Replace the contents of `App.tsx` with the following code:
 
 ```tsx title="App.tsx"
 import React from "react";
@@ -128,15 +126,23 @@ import {
     useMany,
     DateField,
 } from "@pankod/refine";
+import routerProvider from "@pankod/refine-react-router";
 import dataProvider from "@pankod/refine-simple-rest";
 
 import "@pankod/refine/dist/styles.min.css";
 
 const App: React.FC = () => {
     return (
-        <Refine dataProvider={dataProvider("https://api.fake-rest.refine.dev")}>
-            <Resource name="posts" list={PostList} />
-        </Refine>
+        <Refine
+            routerProvider={routerProvider}
+            dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+            resources={[
+                {
+                    name: "posts",
+                    list: PostList,
+                },
+            ]}
+        />
     );
 };
 
@@ -195,10 +201,8 @@ interface ICategory {
     id: string;
     title: string;
 }
-
 ```
 
-
 ## Roadmap
 
 ☑️ NextJS & SSR support
@@ -208,6 +212,7 @@ interface ICategory {
 ☑️ Support for more UI frameworks (MaterialUI, Chakra, Spectrum etc.)
 
 ## Stargazers
+
 [![Stargazers repo roster for pankod/refine](https://reporoster.com/stars/pankod/refine)](https://github.com/pankod/refine/stargazers)
 
 ## Contribution
@@ -221,4 +226,5 @@ If you are willing to fix an issue or propose a feature; all PRs with clear expl
 Licensed under the MIT License, Copyright © 2021-present Pankod
 
 ## Special Thanks
+
 [React Admin](https://marmelab.com/react-admin/) has been a great source of ideas and inspiration for refine. Big thanks to friends at [Marmelab](https://marmelab.com) for the amazing work they are doing.

documentation/docs/api-references/components/basic-views/create.md

@@ -112,8 +112,9 @@ The `<Create>` component reads the `resource` information from the route by defa
 
 [Refer to the custom pages documentation for detailed usage. &#8594](/guides-and-concepts/custom-pages.md)
 
-```tsx twoslash {2-4, 11-17}
+```tsx twoslash {4-6, 14-20}
 import { Refine, Create } from "@pankod/refine";
+import routerProvider from "@pankod/refine-react-router";
 import dataProvider from "@pankod/refine-simple-rest";
 
 const CustomPage = () => {
@@ -123,6 +124,7 @@ const CustomPage = () => {
 export const App: React.FC = () => {
     return (
         <Refine
+            routerProvider={routerProvider}
             dataProvider={dataProvider("https://api.fake-rest.refine.dev/")}
             resources={[{ name: "posts" }]}
             routes={[

documentation/docs/api-references/components/basic-views/edit.md

@@ -181,8 +181,9 @@ export const EditPage: React.FC = () => {
 
 [Refer to the custom pages documentation for detailed usage. &#8594](/guides-and-concepts/custom-pages.md)
 
-```tsx twoslash
+```tsx twoslash {4-6, 14-20}
 import { Refine, Edit } from "@pankod/refine";
+import routerProvider from "@pankod/refine-react-router";
 import dataProvider from "@pankod/refine-simple-rest";
 
 const CustomPage = () => {
@@ -192,6 +193,7 @@ const CustomPage = () => {
 export const App: React.FC = () => {
     return (
         <Refine
+            routerProvider={routerProvider}
             dataProvider={dataProvider("https://api.fake-rest.refine.dev/")}
             resources={[{ name: "posts" }]}
             routes={[

documentation/docs/api-references/components/basic-views/list.md

@@ -90,8 +90,9 @@ export const ListPage: React.FC = () => {
 
 [Refer to the custom pages documentation for detailed usage. &#8594](/guides-and-concepts/custom-pages.md)
 
-```tsx twoslash
+```tsx twoslash {4-6, 14-20}
 import { Refine, List } from "@pankod/refine";
+import routerProvider from "@pankod/refine-react-router";
 import dataProvider from "@pankod/refine-simple-rest";
 
 const CustomPage = () => {
@@ -101,6 +102,7 @@ const CustomPage = () => {
 export const App: React.FC = () => {
     return (
         <Refine
+            routerProvider={routerProvider}
             dataProvider={dataProvider("https://api.fake-rest.refine.dev/")}
             resources={[{ name: "posts" }]}
             routes={[

documentation/docs/api-references/components/basic-views/show.md

@@ -9,7 +9,7 @@ import isLoading from '@site/static/img/guides-and-concepts/basic-views/show/isL
 
 `<Show>` provides us a layout for displaying the page. It does not contain any logic but adds extra functionalities like a refresh button or giving title to the page.
 
-We will show what `<Show>` does ?using properties with examples.
+We will show what `<Show>` does using properties with examples.
 
 ## Properties
 
@@ -188,9 +188,10 @@ The `<Show>` component reads the `resource` information from the route by defaul
 
 [Refer to the custom pages documentation for detailed usage. &#8594](/guides-and-concepts/custom-pages.md)
 
-```tsx twoslash
+```tsx twoslash {4-10, 18-24}
 import { Refine, Show } from "@pankod/refine";
 import dataProvider from "@pankod/refine-simple-rest";
+import routerProvider from "@pankod/refine-react-router";
 
 const CustomPage = () => {
     return (
@@ -203,6 +204,7 @@ const CustomPage = () => {
 export const App: React.FC = () => {
     return (
         <Refine
+            routerProvider={routerProvider}
             dataProvider={dataProvider("https://api.fake-rest.refine.dev/")}
             resources={[{ name: "posts" }]}
             routes={[

documentation/docs/api-references/components/buttons/clone.md

@@ -6,7 +6,7 @@ title: Clone
 import cloneButton from '@site/static/img/guides-and-concepts/components/buttons/clone/clone.png';
 
 `<CloneButton>` uses Ant Design's [`<Button>`](https://ant.design/components/button/) component. It uses the `clone` method from [useNavigation](/api-references/hooks/navigation/useNavigation.md) under the hood.
-It can be useful when redirecting the app to the create page with the record id route of `<Resource>`.
+It can be useful when redirecting the app to the create page with the record id route of resource.
 
 ## Usage
 
@@ -78,7 +78,7 @@ Clicking the button will trigger the `clone` method of [`useNavigation`](/api-re
 
 ### `resourceName`
 
-It is used to redirect the app to the `/create` endpoint of the given resource name. By default, the app redirects to a URL with `/create` defined by the name property of the `<Resource>` component.
+It is used to redirect the app to the `/create` endpoint of the given resource name. By default, the app redirects to a URL with `/create` defined by the name property of the resource object.
 
 ```tsx twoslash
 import { CloneButton } from "@pankod/refine";

documentation/docs/api-references/components/buttons/create.md

@@ -5,7 +5,7 @@ title: Create
 
 import createButton from '@site/static/img/guides-and-concepts/components/buttons/create/create.png';
 
-`<CreateButton>` uses Ant Design's [`<Button>`](https://ant.design/components/button/) component. It uses the `create` method from [`useNavigation`](/api-references/hooks/navigation/useNavigation.md) under the hood. It can be useful to redirect the app to the create page route of `<Resource>`.
+`<CreateButton>` uses Ant Design's [`<Button>`](https://ant.design/components/button/) component. It uses the `create` method from [`useNavigation`](/api-references/hooks/navigation/useNavigation.md) under the hood. It can be useful to redirect the app to the create page route of resource.
 
 ## Usage
 
@@ -51,7 +51,7 @@ Will look like this:
 
 ### `resourceName`
 
-It is used to redirect the app to the `/create` endpoint of the given resource name. By default, the app redirects to a URL with `/create` defined by the name property of `<Resource>` component.
+It is used to redirect the app to the `/create` endpoint of the given resource name. By default, the app redirects to a URL with `/create` defined by the name property of resource object.
 
 ```tsx twoslash
 import { CreateButton } from "@pankod/refine";

documentation/docs/api-references/components/buttons/edit.md

@@ -5,7 +5,7 @@ title: Edit
 
 import editButton from '@site/static/img/guides-and-concepts/components/buttons/edit/edit.png';
 
-`<EditButton>` uses Ant Design's [`<Button>`](https://ant.design/components/button/) component. It uses the `edit` method from [`useNavigation`](/api-references/hooks/navigation/useNavigation.md) under the hood. It can be useful when redirecting the app to the edit page with the record id route of `<Resource>`.
+`<EditButton>` uses Ant Design's [`<Button>`](https://ant.design/components/button/) component. It uses the `edit` method from [`useNavigation`](/api-references/hooks/navigation/useNavigation.md) under the hood. It can be useful when redirecting the app to the edit page with the record id route of resource.
 
 ## Usage
 
@@ -77,7 +77,7 @@ Clicking the button will trigger the `edit` method of [`useNavigation`](/api-ref
 
 ### `resourceName`
 
-Redirection endpoint(`resourceName/edit`) is defined by `resourceName` property. By default, `<EditButton>` uses `name` property of the `<Resource>` component as an endpoint to redirect after clicking.
+Redirection endpoint(`resourceName/edit`) is defined by `resourceName` property. By default, `<EditButton>` uses `name` property of the resource object as an endpoint to redirect after clicking.
 
 ```tsx twoslash
 import { EditButton } from "@pankod/refine";

documentation/docs/api-references/components/buttons/list.md

@@ -5,7 +5,7 @@ title: List
 
 import listButton from '@site/static/img/guides-and-concepts/components/buttons/list/list.png';
 
-`<ListButton>` is using Ant Design's [`<Button>`](https://ant.design/components/button/) component. It uses the `list` method from [`useNavigation`](api-references/hooks/navigation/useNavigation.md) under the hood. It can be useful when redirecting the app to the list page route of `<Resource>`.
+`<ListButton>` is using Ant Design's [`<Button>`](https://ant.design/components/button/) component. It uses the `list` method from [`useNavigation`](api-references/hooks/navigation/useNavigation.md) under the hood. It can be useful when redirecting the app to the list page route of resource.
 
 ## Usage
 
@@ -54,14 +54,14 @@ Will look like this:
 <br/>
 
 :::note
-The button text is defined automatically by **refine** based on _`<Resource>`_ component name property.
+The button text is defined automatically by **refine** based on _resource_ object name property.
 :::
 
 ## Properties
 
 ### `resourceName`
 
-Redirection endpoint(`resourceName/list`) is defined by `resourceName` property. By default, `<ListButton>` uses `name` property of the `<Resource>` component as the endpoint to redirect after clicking.
+Redirection endpoint(`resourceName/list`) is defined by `resourceName` property. By default, `<ListButton>` uses `name` property of the resource object as the endpoint to redirect after clicking.
 
 ```tsx twoslash
 import { ListButton } from "@pankod/refine";

documentation/docs/api-references/components/buttons/show.md

@@ -5,7 +5,7 @@ title: Show
 
 import showButton from '@site/static/img/guides-and-concepts/components/buttons/show/show.png';
 
-`<ShowButton>` uses Ant Design's [`<Button>`](https://ant.design/components/button/) component. It uses the `show` method from [`useNavigation`](/api-references/hooks/navigation/useNavigation.md) under the hood. It can be useful when redirecting the app to the show page with the record id route of `<Resource>`.
+`<ShowButton>` uses Ant Design's [`<Button>`](https://ant.design/components/button/) component. It uses the `show` method from [`useNavigation`](/api-references/hooks/navigation/useNavigation.md) under the hood. It can be useful when redirecting the app to the show page with the record id route of resource.
 
 ## Usage
 
@@ -76,7 +76,7 @@ Clicking the button will trigger the `show` method of [`useNavigation`](/api-ref
 
 ### `resourceName`
 
-Redirection endpoint(`resourceName/show`) is defined by `resourceName` property. By default, `<ShowButton>` uses `name` property of the `<Resource>` component as an endpoint to redirect after clicking.
+Redirection endpoint(`resourceName/show`) is defined by `resourceName` property. By default, `<ShowButton>` uses `name` property of the resource object as an endpoint to redirect after clicking.
 
 ```tsx twoslash
 import { ShowButton } from "@pankod/refine";

documentation/docs/api-references/components/layout-wrapper.md

@@ -15,9 +15,10 @@ This component accepts layout customizations to further customize the layout par
 
 An example use in a custom page may look like this:
 
-```tsx title="App.tsx" {4, 14-22, 28-34}
+```tsx title="App.tsx" {0, 10-19, 26-31}
 import { Refine, Authenticated, LayoutWrapper } from "@pankod/refine";
 
+import routerProvider from "@pankod/refine-react-router";
 import dataProvider from "@pankod/refine-simple-rest";
 import "@pankod/refine/dist/styles.min.css";
 
@@ -38,17 +39,16 @@ const AuthenticatedPostReview = () => {
 const App: React.FC = () => {
     return (
         <Refine
+            routerProvider={routerProvider}
             dataProvider={dataProvider(API_URL)}
             resources={[{ name: "posts", list: PostList }]}
-            //highlight-start
             routes={[
                 {
                     exact: true,
                     component: AuthenticatedPostReview,
                     path: "/authenticated-page",
                 },
             ]}
-            //highlight-end
         />
     );
 };

documentation/docs/api-references/hooks/data/useCreate.md

@@ -65,7 +65,7 @@ mutate({
 
 After the mutation runs `categories` will be updated as below:
 
-```ts title="https://api.fake-rest.refine.dev/categories" {14-17}
+```ts title="https://api.fake-rest.refine.dev/categories"
 {
     [
         {

documentation/docs/api-references/hooks/form/useDrawerForm.md

@@ -285,3 +285,6 @@ The `saveButtonProps` and `deleteButtonProps` gives us the ability of saving and
      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
    ></iframe>
+
+[BaseRecord]: /api-references/interfaces.md#baserecord
+[HttpError]: /api-references/interfaces.md#httperror

documentation/docs/api-references/hooks/form/useModalForm.md

@@ -264,3 +264,6 @@ Don't forget to pass the record id to `show` to fetch the record data. This is n
      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
    ></iframe>
+
+[BaseRecord]: /api-references/interfaces.md#baserecord
+[HttpError]: /api-references/interfaces.md#httperror

documentation/docs/api-references/hooks/form/useStepsForm.md

@@ -527,3 +527,6 @@ export const PostCreate: React.FC = () => {
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
 ></iframe>
+
+[BaseRecord]: /api-references/interfaces.md#baserecord
+[HttpError]: /api-references/interfaces.md#httperror