docs: new docs structure (#2542)

* docs: move tutorials

* docs: apply new doc structure

* docs: update links with new structure

* docs: update internal links in documents

* docs: fix internal doc links

* docs: update comparison order

* docs: add redirects

* docs: fix redirects

* docs: add missing benchmarks page redirect

* docs: fix redirects

* docs: update redirects.json

* docs: fix useForgotPassword internal doc links

documentation/blog/2022-02-14-refine-ecommerce-blog.md

@@ -25,11 +25,11 @@ import page_size from '@site/static/img/blog/2022-02-14-refine-ecommerce-blog/pa
 </div>
 <br />
 
-In this article, we will create the e-commerce client of our [Strapi-Multitenancy](/docs/guides-and-concepts/multi-tenancy/strapi-v4) admin panel that we have done before.
+In this article, we will create the e-commerce client of our [Strapi-Multitenancy](/docs/advanced-tutorials/multi-tenancy/strapi-v4) admin panel that we have done before.
 
 It is now used **headless** with the **refine** 3 version. You can use any UI library you want with the **headless** feature.
 
-We will use [Strapi](https://strapi.io/) and [Chakra-UI](https://chakra-ui.com/) together with [**Next.js**](/docs/guides-and-concepts/ssr/nextjs/) in our E-commerce client example application.
+We will use [Strapi](https://strapi.io/) and [Chakra-UI](https://chakra-ui.com/) together with [**Next.js**](/docs/advanced-tutorials/ssr/nextjs/) in our E-commerce client example application.
 
 <!--truncate-->
 
@@ -49,7 +49,7 @@ npx superplate-cli -p refine-nextjs refine-ecommerce-example
 ✔ i18n - Internationalization: · no
 ```
 
-superplate will quickly create our **refine** project according to the features we choose. Let's continue by install the [**refine** Strapi-v4 Data Provider](/docs/guides-and-concepts/data-provider/strapi-v4/) and Chakra-UI packages that we will use later.
+superplate will quickly create our **refine** project according to the features we choose. Let's continue by install the [**refine** Strapi-v4 Data Provider](/docs/advanced-tutorials/data-provider/strapi-v4/) and Chakra-UI packages that we will use later.
 
 ## Installation
 

documentation/blog/2022-03-22-refine-with-react95.md

@@ -330,15 +330,15 @@ export const LoginPage = () => {
 </div>
 <br />
 
-We used React95 components to construct our Login page design. Then, using the **refine** [`<AuthProvider>`](/docs/core/providers/auth-provider/) [`<useLogin>`](/docs/core/hooks/auth/useLogin/) hook, we carried out the database sign-in operation. We can now access our database and fetch our Posts and Categories, as well as create our pages.
+We used React95 components to construct our Login page design. Then, using the **refine** [`<AuthProvider>`](/docs/api-reference/core/providers/auth-provider/) [`<useLogin>`](/docs/api-reference/core/hooks/auth/useLogin/) hook, we carried out the database sign-in operation. We can now access our database and fetch our Posts and Categories, as well as create our pages.
 
 ## Refine Post Page
 
 After our login process, we'll get the posts from our Supabase Database and display them in the table. We will use React95 components for the UI portion of our table, as well as `@pankod/refine-react-table` package to handle pagination, sorting, and filtering. You can use all the features of [TanStack Table](https://react-table.tanstack.com/) with the `@pankod/refine-react-table` adapter. On this page, we will use this adapter of **refine** to manage the table.
 
 In this step, we'll show how to use the `@pankod/refine-react-table` package to create a data table. We will begin by examining this page in two parts. In the first step, we'll utilize our `@pankod/refine-react-table` package and React95 UI components to only use our data. Then, in the following stage, we'll arrange the sorting, pagination processes and our UI part. Let's start!
 
-[Refer to the **refine** TanStack Table packages documentation for detailed information. →](/docs/packages/react-table/)
+[Refer to the **refine** TanStack Table packages documentation for detailed information. →](/docs/packages/documentation/react-table/)
 
 <details>
 <summary>Show Part I Code</summary>
@@ -681,7 +681,7 @@ You may quickly handle sorting and paging operations by simply adding a few line
 
 ## Refine Create and Edit Page
 
-We have created our post page. Now we will create pages where we can create and edit posts. **refine** provides a [`refine-react-hook-form`](/docs/packages/react-hook-form/useForm/) adapter that you can use with the headless feature. All the features of [React Hook Form](https://react-hook-form.com/) work in harmony with **refine** and the form you will create.
+We have created our post page. Now we will create pages where we can create and edit posts. **refine** provides a [`refine-react-hook-form`](/docs/packages/documentation/react-hook-form/useForm/) adapter that you can use with the headless feature. All the features of [React Hook Form](https://react-hook-form.com/) work in harmony with **refine** and the form you will create.
 
 -   `Create Page`
 
@@ -901,7 +901,7 @@ We can manage our forms and generate Posts thanks to the `refine-react-hook-form
 
 Our app is almost ready. As a final step, let's edit our Layout to make our application more like Window95. Let's create a footer component first and then define it as a **refine** Layout.
 
-[Refer to the refine Custom Layout docs for detailed usage. →](/docs/guides-and-concepts/custom-layout/)
+[Refer to the refine Custom Layout docs for detailed usage. →](/docs/advanced-tutorials/custom-layout/)
 
 -   `Footer`
 

documentation/blog/2022-03-29-react-hook-form-upload.md

@@ -225,9 +225,9 @@ A React-based framework for building internal tools, rapidly. **refine** offers
 
 ## How to Multipart File Upload with Refine and React Hook Form?
 
-It allows you to manage your forms and send data to your server with the [refine-react-hook-form adapter](/docs/packages/react-hook-form/useForm/) it publishes with its **refine** **headless** feature. With this adapter, you can use all the features of the React Hook Form in harmony with **refine**. You can also perform `Multipart File Upload(multipart/form-data)` operation very easily using this adapter.
+It allows you to manage your forms and send data to your server with the [refine-react-hook-form adapter](/docs/packages/documentation/react-hook-form/useForm/) it publishes with its **refine** **headless** feature. With this adapter, you can use all the features of the React Hook Form in harmony with **refine**. You can also perform `Multipart File Upload(multipart/form-data)` operation very easily using this adapter.
 
-[Refer to the refine-react-hook-form adapter documentation for detailed information. →](/docs/packages/react-hook-form/useForm/)
+[Refer to the refine-react-hook-form adapter documentation for detailed information. →](/docs/packages/documentation/react-hook-form/useForm/)
 
 [View Source](https://github.com/pankod/refine/tree/master/examples/reactHookForm/useForm)
 

documentation/blog/2022-04-29-create-full-stack-app.md

@@ -70,7 +70,7 @@ To learn more about **refine** features, we recommend that you read the [Overvie
 
 ## Create Full Stack App
 
-As we mentioned above, you can easily handle any API and GraphQL queries without writing extra code thanks to the **refine** [Data Provider](/docs/core/providers/data-provider/) hooks. If you do not have a custom backend, you can choose one of the following backend providers that work in harmony with **refine**.
+As we mentioned above, you can easily handle any API and GraphQL queries without writing extra code thanks to the **refine** [Data Provider](/docs/api-reference/core/providers/data-provider/) hooks. If you do not have a custom backend, you can choose one of the following backend providers that work in harmony with **refine**.
 
 **refine** includes many out-of-the-box data providers to use in your projects like:
 
@@ -88,7 +88,7 @@ As we mentioned above, you can easily handle any API and GraphQL queries without
 -   [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase)
 -   [Medusa](https://github.com/pankod/refine/tree/master/packages/medusa)
 
-[Refer to the `dataProvider` documentation for detailed usage. &#8594](/docs/core/providers/data-provider/)
+[Refer to the `dataProvider` documentation for detailed usage. &#8594](/docs/api-reference/core/providers/data-provider/)
 
 You can develop a full-featured web application by using any your custom backend or the above backend providers with **refine**.
 

documentation/blog/2022-07-21-admin-panel-with-materialui-and-strapi.md

@@ -202,9 +202,9 @@ We import and use Material UI components from refine's `@pankod/refine-mui` to s
 
 
 
-refine hook [`useDataGrid`](/docs/ui-frameworks/mui/hooks/useDataGrid) fetches data from API and wraps them with various helper hooks required for the  `<DataGrid/>` component. Data interaction functions like sorting, filtering, and pagination will be instantly available on the `<DataGrid/>` with this single line of code.
+refine hook [`useDataGrid`](/docs/api-reference/mui/hooks/useDataGrid) fetches data from API and wraps them with various helper hooks required for the  `<DataGrid/>` component. Data interaction functions like sorting, filtering, and pagination will be instantly available on the `<DataGrid/>` with this single line of code.
 
-[Refer to refine's useDataGrid hook doc to more information&#8594](/docs/ui-frameworks/mui/hooks/useDataGrid)
+[Refer to refine's useDataGrid hook doc to more information&#8594](/docs/api-reference/mui/hooks/useDataGrid)
 
 `columns` array are used for mapping and formatting each field shown on the `<DataGrid/>` field prop maps the field to a matching key from the API response. `renderCell` prop is used to choose the appropriate Field component for the given data type.
 

documentation/docs/guides-and-concepts/access-control.md → documentation/docs/advanced-tutorials/access-control.md

@@ -12,7 +12,7 @@ import accessControl from '@site/static/img/guides-and-concepts/access-control/a
 
 Access control is a broad topic where there are lots of advanced solutions that provide different set of features. **refine** is deliberately agnostic for its own API to be able to integrate different methods (RBAC, ABAC, ACL, etc.) and different libraries ([Casbin](https://casbin.org/), [CASL](https://casl.js.org/v5/en/), [Cerbos](https://cerbos.dev/), [AccessControl.js](https://onury.io/accesscontrol/)). `can` method would be the entry point for those solutions.
 
-[Refer to the Access Control Provider documentation for detailed information. &#8594](/core/providers/accessControl-provider.md)
+[Refer to the Access Control Provider documentation for detailed information. &#8594](/api-reference/core/providers/accessControl-provider.md)
 
 **refine** provides an agnostic API via the `accessControlProvider` to manage access control throughout your app.
 
@@ -468,7 +468,7 @@ const App: React.FC = () => {
 export default App;
 ```
 
-Then it can be used with [`useCan`](core/hooks/accessControl/useCan.md) in the related area:
+Then it can be used with [`useCan`](/api-reference/core/hooks/accessControl/useCan.md) in the related area:
 
 ```tsx title="src/pages/posts/list.tsx"
 import {
@@ -513,7 +513,7 @@ export const PostList: React.FC = () => {
 ```
 
 :::tip
-[`<CanAccess />`](/core/components/accessControl/canAccess.md) can be used too to check access control in custom places in your app.
+[`<CanAccess />`](/api-reference/core/components/accessControl/canAccess.md) can be used too to check access control in custom places in your app.
 :::
 
 <br/>

documentation/docs/guides-and-concepts/custom-layout.md → documentation/docs/advanced-tutorials/custom-layout.md

@@ -129,16 +129,16 @@ Here's how it looks in the end:
     title="refine-top-menu-layout-example"
 ></iframe>
 
-[refine]: /core/components/refine-config.md
-[layout]: /core/components/refine-config.md#layout
-[sider]: /core/components/refine-config.md#sider
-[footer]: /core/components/refine-config.md#footer
-[header]: /core/components/refine-config.md#header
-[offlayoutarea]: /core/components/refine-config.md#offlayoutarea
-[title]: /core/components/refine-config.md#title
-[layoutwrapper]: /core/components/layout-wrapper.md
-[custom page example]: /guides-and-concepts/custom-pages.md
+[refine]: /api-reference/core/components/refine-config.md
+[layout]: /api-reference/core/components/refine-config.md#layout
+[sider]: /api-reference/core/components/refine-config.md#sider
+[footer]: /api-reference/core/components/refine-config.md#footer
+[header]: /api-reference/core/components/refine-config.md#header
+[offlayoutarea]: /api-reference/core/components/refine-config.md#offlayoutarea
+[title]: /api-reference/core/components/refine-config.md#title
+[layoutwrapper]: /api-reference/core/components/layout-wrapper.md
+[custom page example]: /advanced-tutorials/custom-pages.md
 [custom page example code]: /examples/customization/topMenuLayout.md
 [antdlayout]: https://ant.design/components/layout/
-[usemenu]: /core/hooks/ui/useMenu.md
-[usetitle]: /core/hooks/refine/useTitle.md
+[usemenu]: /api-reference/core/hooks/ui/useMenu.md
+[usetitle]: /api-reference/core/hooks/refine/useTitle.md

documentation/docs/guides-and-concepts/custom-pages.md → documentation/docs/advanced-tutorials/custom-pages.md

@@ -348,7 +348,7 @@ Only authenticated users can access this page via `/custom-page` path.
 :::caution attention
 For authenticated custom page, your application needs an `authProvider`.
 
-[Refer to the `authProvider` for more detailed information. &#8594](/core/providers/auth-provider.md)
+[Refer to the `authProvider` for more detailed information. &#8594](/api-reference/core/providers/auth-provider.md)
 :::
 
 ## Layout for Custom Pages
@@ -430,7 +430,7 @@ export default App;
 
 By default, custom pages don't have any layout. If you want to show your custom page in a layout, you can use `<LayoutWrapper>` component.
 
-[Refer to the `<LayoutWrapper>` for more detailed information. &#8594](/core/components/layout-wrapper.md)
+[Refer to the `<LayoutWrapper>` for more detailed information. &#8594](/api-reference/core/components/layout-wrapper.md)
 </TabItem>
 </Tabs>
 
@@ -439,7 +439,7 @@ By default, custom pages don't have any layout. If you want to show your custom
 
 Let's make a custom page for posts. On this page, the editor can approve or reject the posts with the "draft" status.
 
-Before starting the example, let's assume that our [`dataProvider`](/core/providers/data-provider.md) has an endpoint that returns posts as following.
+Before starting the example, let's assume that our [`dataProvider`](/api-reference/core/providers/data-provider.md) has an endpoint that returns posts as following.
 
 ```ts title="https://api.fake-rest.refine.dev/posts"
 {
@@ -503,7 +503,7 @@ export default App;
 
 Now, let's create the custom page with the name `<PostReview>`. We will use the properties of `useList`, `filter` and `pagination` to fetch a post with "draft" status.
 
-[Refer to the `useList` documentation for detailed usage. &#8594](/core/hooks/data/useList.md)
+[Refer to the `useList` documentation for detailed usage. &#8594](/api-reference/core/hooks/data/useList.md)
 
 ```tsx  title="src/pages/post-review.tsx"
 import { useList } from "@pankod/refine-core";
@@ -707,7 +707,7 @@ Now our page looks like this:
 
 Now let's put in approve and reject buttons to change the status of the post shown on the page. When these buttons are clicked, we will change the status of the post using `useUpdate`.
 
-[Refer to the `useUpdate` documentation for detailed usage. &#8594](/core/hooks/data/useUpdate.md)
+[Refer to the `useUpdate` documentation for detailed usage. &#8594](/api-reference/core/hooks/data/useUpdate.md)
 
 ```tsx  title="src/pages/post-review.tsx"
 import { 
@@ -834,5 +834,5 @@ export const PostReview = () => {
     title="custom-pages-example"
 ></iframe>
 
-[ssrNextjs]: /docs/guides-and-concepts/ssr/nextjs
-[ssrRemix]: /docs/guides-and-concepts/ssr/remix
+[ssrNextjs]: /docs/advanced-tutorials/ssr/nextjs
+[ssrRemix]: /docs/advanced-tutorials/ssr/remix

documentation/docs/guides-and-concepts/data-provider/appwrite.md → documentation/docs/advanced-tutorials/data-provider/appwrite.md

@@ -140,7 +140,7 @@ const App: React.FC = () => {
 :::tip Live/Realtime 🚀
 `@pankod/refine-appwrite` package supports Live/Realtime Provider natively 🚀
 
-[Refer to the Live/Realtime Provider docs for detailed usage. →](/docs/core/providers/live-provider.md)
+[Refer to the Live/Realtime Provider docs for detailed usage. →](/docs/api-reference/core/providers/live-provider.md)
 :::
 
 ## Create Collections