chore(material-ui): rename mui as material-ui in examples and docs (

refinedev#4228) * docs(blog): revert in remix example * chore: update example name * chore: rename finefoods mui * chore: update auth-mui * chore: update README * chore: move base material ui * chore: update blog mui data grid * chore: update customization-theme-material-ui * chore: update field-material-ui-use-autocomplete * chore: update form-material-ui-use-drawer-form * chore: update form-mui-use-form * chore: update form-material-ui-use-modal-form * chore: update form-material-ui-use-steps-form * chore: update inferencer-material-ui * chore: update tutorial-material-ui * chore: update template-material-ui * chore: update theme-material-ui-demo * chore: update upload-material-ui-base64 * chore: update upload-material-ui-multipart * chore: update import-export-material-ui * chore: update table-material-ui-advanced * chore: update table-material-ui-cursor-pagination * chore: update table-material-ui-data-grid-pro * chore: update table-material-ui-table-filter * chore: update table-material-ui-use-data-grid * chore: update table-material-ui-use-delete-many * chore: update table-material-ui-use-update-many * docs(docs): update new links * chore: update with-storybook-material-ui * chore: update text * ci(finefoods): update material ui build action * chore(finefoods-mui): dummy commit --------- Co-authored-by: Ali Emir Şen <[email protected]>
iaurg · Apr 28, 2023 · 199e4b7 · 199e4b7
1 parent fbe109b
commit 199e4b7
Show file tree

Hide file tree

Showing 594 changed files with 1,550 additions and 769 deletions.
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -12,5 +12,5 @@
         "packages/react-table",
         "packages/simple-rest"
     ],
-    "sandboxes": ["/examples/finefoods-antd", "/examples/finefoods-client", "/examples/finefoods-mui", "/examples/base-antd"]
+    "sandboxes": ["/examples/finefoods-antd", "/examples/finefoods-client", "/examples/finefoods-material-ui", "/examples/base-antd"]
   }
diff --git a/.github/workflows/pull-request-previews.yml b/.github/workflows/pull-request-previews.yml
@@ -9,7 +9,7 @@ on:
     paths:
       - "packages/**"
       - "examples/finefoods-antd/**"
-      - "examples/finefoods-mui/**"
+      - "examples/finefoods-material-ui/**"
       - "examples/finefoods-client/**"
 
 jobs:
@@ -62,7 +62,7 @@ jobs:
       matrix:
         node-version: [16.x]
 
-    name: Fine Foods MUI
+    name: Fine Foods Material UI
 
     steps:
       - name: Workflow run cleanup action
@@ -77,12 +77,12 @@ jobs:
       - name: Install Dependencies
         run: |
           npm ci
-          npm run bootstrap -- --scope finefoods-mui
-          npm run build -- --scope finefoods-mui
+          npm run bootstrap -- --scope finefoods-material-ui
+          npm run build -- --scope finefoods-material-ui
       - name: Deploy to Netlify
         uses: nwtgck/[email protected]
         with:
-          publish-dir: "./examples/finefoods-mui/build"
+          publish-dir: "./examples/finefoods-material-ui/build"
           github-token: ${{ secrets.PANKOD_BOT_TOKEN }}
           deploy-message: "Deploy from GitHub Actions"
           alias: deploy-preview-mui-${{ github.event.number }}

diff --git a/.gitignore b/.gitignore
@@ -16,7 +16,7 @@ coverage
 .env.production.local
 
 !examples/finefoods-antd/.env
-!examples/finefoods-mui/.env
+!examples/finefoods-material-ui/.env
 !examples/store/.env
 
 

diff --git a/EXAMPLE_PROGRESS.MD b/EXAMPLE_PROGRESS.MD
diff --git a/documentation/blog/2022-08-23-mui-usedatagrid.md b/documentation/blog/2022-08-23-mui-usedatagrid.md
@@ -40,6 +40,8 @@ In this article, we'll show how to use Material UI [`<DataGrid/>`](https://mui.c
 Material UI is a React UI component library with a rich set of components and tools for bootstrapping elegant user interfaces. We'll use the `<DataGrid/>` component to render a list of employees from a mock server. We'll also look at some of the properties and custom configurations that can be used with the component.
 
 Steps we’ll cover:
+- [Introduction](#introduction)
+- [Prerequisites](#prerequisites)
 - [Setting up a `refine` application](#setting-up-a-refine-application)
 - [Creating mock API with Mockaroo and My JSON Server](#creating-mock-api-with-mockaroo-and-my-json-server)
 - [Material UI DataGrid component](#material-ui-datagrid-component)
@@ -53,6 +55,8 @@ Steps we’ll cover:
     - [Controlled sorting](#controlled-sorting)
   - [Filtering](#filtering)
     - [Controlled filtering](#controlled-filtering)
+- [Conclusion](#conclusion)
+- [Example](#example)
 
 
 ## Prerequisites
@@ -849,7 +853,7 @@ Where to go next? Check the useDataGrid hook documentation [here](https://refine
 
 ## Example
 
-<CodeSandboxExample path="blog-mui-datagrid" />
+<CodeSandboxExample path="blog-material-ui-datagrid" />
 
 
 ---

diff --git a/documentation/docs/api-reference/mui/components/inferencer.md b/documentation/docs/api-reference/mui/components/inferencer.md
@@ -419,4 +419,4 @@ render(<App />);
 
 Below you'll find a Live CodeSandbox Example displaying a fully setup `Refine` app with `@refinedev/inferencer/mui` components.
 
-<CodeSandboxExample path="inferencer-mui" />
+<CodeSandboxExample path="inferencer-material-ui" />
diff --git a/documentation/docs/api-reference/mui/components/themed-layout.md b/documentation/docs/api-reference/mui/components/themed-layout.md
@@ -126,9 +126,9 @@ render(<App />);
 
 Example of above showing how to use `<ThemedLayoutV2>` with [`React Router v6`](/docs/packages/documentation/routers/react-router-v6/). You can see these examples for other routers:
 
--   [React Router v6](https://github.com/refinedev/refine/blob/next/examples/auth-mui/src/App.tsx#L210)
+-   [React Router v6](https://github.com/refinedev/refine/blob/next/examples/auth-material-ui/src/App.tsx#L210)
 -   [Next.js](https://github.com/refinedev/refine/blob/next/examples/with-nextjs-auth/pages/_app.tsx#L31)
--   [Remix](https://github.com/refinedev/refine/blob/next/examples/with-remix-mui/app/routes/_layout.tsx#L13)
+-   [Remix](https://github.com/refinedev/refine/blob/next/examples/with-remix-material-ui/app/routes/_layout.tsx#L13)
 
 > ⚠️ Next.js examples are using `<ThemedLayout`> from `@refinedev/antd` package. But you can use `<ThemedLayoutV2>` from `@refinedev/mui` as same.
 

diff --git a/documentation/docs/api-reference/mui/hooks/useAutocomplete/index.md b/documentation/docs/api-reference/mui/hooks/useAutocomplete/index.md
@@ -446,7 +446,7 @@ By default, refine does the search using the [`useList`](/docs/api-reference/cor
 
 ## Example
 
-<CodeSandboxExample path="field-mui-use-autocomplete" />
+<CodeSandboxExample path="field-material-ui-use-autocomplete" />
 
 [baserecord]: /api-reference/core/interfaces.md#baserecord
 [httperror]: /api-reference/core/interfaces.md#httperror
diff --git a/documentation/docs/api-reference/mui/hooks/useDataGrid/index.md b/documentation/docs/api-reference/mui/hooks/useDataGrid/index.md
@@ -1026,7 +1026,7 @@ useDataGrid({
 
 ## Example
 
-<CodeSandboxExample path="table-mui-use-data-grid" />
+<CodeSandboxExample path="table-material-ui-use-data-grid" />
 
 [use-table-core]: /docs/api-reference/core/hooks/useTable
 [source-code]: https://github.com/refinedev/refine/blob/master/packages/mui/src/hooks/useDataGrid/index.ts

diff --git a/documentation/docs/api-reference/mui/theming.md b/documentation/docs/api-reference/mui/theming.md
@@ -543,7 +543,7 @@ declare module "@mui/material/styles" {
 }
 ```
 
-You can see an example of how to [`create your own theme with custom variables`](https://github.com/refinedev/refine/blob/next/examples/finefoods-mui/src/theme.ts) and its [`interface`](https://github.com/refinedev/refine/blob/next/examples/finefoods-mui/src/interfaces/theme.d.ts) by accessing the links.
+You can see an example of how to [`create your own theme with custom variables`](https://github.com/refinedev/refine/blob/next/examples/finefoods-material-ui/src/theme.ts) and its [`interface`](https://github.com/refinedev/refine/blob/next/examples/finefoods-material-ui/src/interfaces/theme.d.ts) by accessing the links.
 
 ## Dark Mode
 
@@ -828,7 +828,7 @@ export default App;
   </div>
 </details>
 
-[You can use this CodeSandbox link to access this example. &#8594](https://codesandbox.io/embed/github/refinedev/refine/tree/next/examples/customization-theme-mui/?view=preview&theme=dark&codemirror=1)
+[You can use this CodeSandbox link to access this example. &#8594](https://codesandbox.io/embed/github/refinedev/refine/tree/next/examples/customization-theme-material-ui/?view=preview&theme=dark&codemirror=1)
 
 ```tsx live previewOnly previewHeight=450px disableScroll
 setInitialRoutes(["/samples"]);

diff --git a/documentation/docs/examples/authentication/mui.md b/documentation/docs/examples/authentication/mui.md
@@ -7,4 +7,4 @@ example-tags: [mui,authentication,react-table]
 
 You can create your own Authentication approach using **refine**. You can customize the [AuthProvider](/docs/api-reference/core/providers/auth-provider/) methods according to your needs and control the privileges of your users. This example is a simple example of custom authentication with **refine**.
 
-<CodeSandboxExample path="auth-mui" />
+<CodeSandboxExample path="auth-material-ui" />
diff --git a/documentation/docs/examples/form/mui/useDrawerForm.md b/documentation/docs/examples/form/mui/useDrawerForm.md
@@ -8,4 +8,4 @@ example-tags: [form,mui,react-hook-form]
 
 [Refer to the useModalForm hook documentation for more information. →](/docs/packages/documentation/react-hook-form/useModalForm/)
 
-<CodeSandboxExample path="form-mui-use-drawer-form" />
+<CodeSandboxExample path="form-material-ui-use-drawer-form" />
diff --git a/documentation/docs/examples/form/mui/useForm.md b/documentation/docs/examples/form/mui/useForm.md
@@ -8,4 +8,4 @@ example-tags: [form,mui,react-hook-form]
 
 [Refer to the useForm hook documentation for more information. →](/docs/packages/documentation/react-hook-form/useForm)
 
-<CodeSandboxExample path="form-mui-use-form" />
+<CodeSandboxExample path="form-material-ui-use-form" />
diff --git a/documentation/docs/examples/form/mui/useModalForm.md b/documentation/docs/examples/form/mui/useModalForm.md
@@ -8,4 +8,4 @@ example-tags: [form,mui,react-hook-form]
 
 [Refer to the useModalForm hook documentation for more information. →](/docs/packages/documentation/react-hook-form/useModalForm/)
 
-<CodeSandboxExample path="form-mui-use-modal-form" />
+<CodeSandboxExample path="form-material-ui-use-modal-form" />
diff --git a/documentation/docs/examples/form/mui/useStepsForm.md b/documentation/docs/examples/form/mui/useStepsForm.md
@@ -8,4 +8,4 @@ example-tags: [form,mui,react-hook-form]
 
 [Refer to the useStepsForm hook documentation for more information. →](/docs/packages/documentation/react-hook-form/useStepsForm/)
 
-<CodeSandboxExample path="form-mui-use-steps-form" />
+<CodeSandboxExample path="form-material-ui-use-steps-form" />
diff --git a/documentation/docs/examples/remix/mui.md b/documentation/docs/examples/remix/mui.md
@@ -1,9 +1,9 @@
 ---
-id: remix-mui
-title: MUI
+id: remix-material-ui
+title: Material UI
 example-tags: [remix, router-provider, mui]
 ---
 
-**refine** allows you to build your **SSR** supported web applications using [Remix](https://remix.run/). With this example, you can see how to make a simple SSR supported CMS Admin panel using [MUI](https://mui.com/).
+**refine** allows you to build your **SSR** supported web applications using [Remix](https://remix.run/). With this example, you can see how to make a simple SSR supported CMS Admin panel using [Material UI](https://mui.com/).
 
-<CodeSandboxExample path="with-remix-mui" />
+<CodeSandboxExample path="with-remix-material-ui" />
diff --git a/documentation/docs/examples/table/mui/advanced.md b/documentation/docs/examples/table/mui/advanced.md
@@ -7,4 +7,4 @@ example-tags: [table, mui, react-router]
 
 Advanced table examples with [`useDataGrid`](/docs/api-reference/mui/hooks/useDataGrid) and [`useTable`](https://react-table.tanstack.com/) created with **refine**'s [@refinedev/react-table](https://github.com/refinedev/refine/tree/master/packages/react-table) adapter.
 
-<CodeSandboxExample path="table-mui-advanced" />
+<CodeSandboxExample path="table-material-ui-advanced" />
diff --git a/documentation/docs/examples/table/mui/cursor-pagination.md b/documentation/docs/examples/table/mui/cursor-pagination.md
@@ -7,4 +7,4 @@ example-tags: [data-provider, mui]
 
 [Cursor Pagination](https://mui.com/x/react-data-grid/pagination/#cursor-implementation) is a pagination method and [Material UI](https://mui.com/) supports it by default. This sample application shows how to use it.
 
-<CodeSandboxExample path="table-mui-cursor-pagination" />
+<CodeSandboxExample path="table-material-ui-cursor-pagination" />
diff --git a/documentation/docs/examples/table/mui/filter.md b/documentation/docs/examples/table/mui/filter.md
@@ -9,5 +9,5 @@ example-tags: [table,filter,mui,react-router]
 The `Table Filter` option allows you to apply filters to the data in your table. The example below demonstrates how you might filter and display data in your table based on certain field parameters.
 By filtering your table's data you may only see the fields you want.
 
-<CodeSandboxExample path="table-mui-table-filter" />
+<CodeSandboxExample path="table-material-ui-table-filter" />
 
diff --git a/documentation/docs/examples/table/mui/useDataGrid.md b/documentation/docs/examples/table/mui/useDataGrid.md
@@ -12,8 +12,8 @@ You may use the `useDataGrid` hook to process your data with features compatible
 
 ## With `DataGrid` Component
 
-<CodeSandboxExample path="table-mui-use-data-grid" />
+<CodeSandboxExample path="table-material-ui-use-data-grid" />
 
 ## With `DataGridPro` Component
 
-<CodeSandboxExample path="table-mui-data-grid-pro" />
+<CodeSandboxExample path="table-material-ui-data-grid-pro" />
diff --git a/documentation/docs/examples/table/mui/useDeleteMany.md b/documentation/docs/examples/table/mui/useDeleteMany.md
@@ -9,4 +9,4 @@ The `useDeleteMany` is one of **refine**'s data hooks. It removes more than one
 
 [Refer to the **refine** useDeleteMany data hook documentation for more information. →](/docs/api-reference/core/hooks/data/useDeleteMany/)
 
-<CodeSandboxExample path="table-mui-use-delete-many" />
+<CodeSandboxExample path="table-material-ui-use-delete-many" />
diff --git a/documentation/docs/examples/table/mui/useUpdateMany.md b/documentation/docs/examples/table/mui/useUpdateMany.md
@@ -9,4 +9,4 @@ example-tags: [table,mui,refine-hooks,react-router]
 
 [Refer to the **refine** useUpdateMany data hook documentation for more information. →](/docs/api-reference/core/hooks/data/useUpdateMany/)
 
-<CodeSandboxExample path="table-mui-use-update-many" />
+<CodeSandboxExample path="table-material-ui-use-update-many" />
diff --git a/documentation/docs/examples/upload/mui/base64.md b/documentation/docs/examples/upload/mui/base64.md
@@ -6,4 +6,4 @@ example-tags: [mui,upload]
 
 In this example, you'll learn how to do base64 upload in **refine** with React Hook Form. For more information, you can view the live example or review the source code.
 
-<CodeSandboxExample path="upload-mui-base64" />
+<CodeSandboxExample path="upload-material-ui-base64" />
diff --git a/documentation/docs/examples/upload/mui/multipart.md b/documentation/docs/examples/upload/mui/multipart.md
@@ -6,4 +6,4 @@ example-tags: [mui,upload]
 
 In this example, you'll learn how to do multipart upload in **refine** with React Hook Form. For more information, you can view the live example or review the source code.
 
-<CodeSandboxExample path="upload-mui-multipart" />
+<CodeSandboxExample path="upload-material-ui-multipart" />
diff --git a/documentation/docs/packages/documentation/command-palette.md b/documentation/docs/packages/documentation/command-palette.md
@@ -140,4 +140,4 @@ useRegisterActions(customAction);
 [refine-kbar]: https://github.com/refinedev/refine/tree/master/packages/kbar
 [access-contol]: https://refine.dev/docs/core/providers/accessControl-provider/
 [usecanwithoutcache]: https://github.com/refinedev/refine/blob/master/packages/core/src/hooks/accessControl/useCanWithoutCache.ts
-[refine-finefoods]: https://github.com/refinedev/refine/blob/master/examples/finefoods-mui/src/hooks/useOrderCustomKbarActions/index.tsx
+[refine-finefoods]: https://github.com/refinedev/refine/blob/master/examples/finefoods-material-ui/src/hooks/useOrderCustomKbarActions/index.tsx
diff --git a/documentation/docs/tutorial/1-getting-started/0-intro.md b/documentation/docs/tutorial/1-getting-started/0-intro.md
@@ -71,7 +71,7 @@ Prefer to go through this tutorial in an online code editor? That's possible!
 
 <UIConditional is="mui">
 
-1. Click [here](https://codesandbox.io/s/github/refinedev/refine/tree/next/examples/template-mui?file=src%2FApp.tsx) to open the Material UI template.
+1. Click [here](https://codesandbox.io/s/github/refinedev/refine/tree/next/examples/template-material-ui?file=src%2FApp.tsx) to open the Material UI template.
 
 </UIConditional>
 

diff --git a/documentation/redirects.json b/documentation/redirects.json
@@ -772,6 +772,10 @@
     {
       "from": "/docs/api-reference/mantine/customization/theme",
       "to": "/docs/api-reference/mantine/theming"
+    },
+    {
+      "from": "/docs/examples/remix/remix-mui/",
+      "to": "/docs/examples/remix/remix-material-ui/"
     }
   ]
 }
diff --git a/documentation/sidebars.js b/documentation/sidebars.js
@@ -852,7 +852,7 @@ module.exports = {
                     label: "Remix",
                     items: [
                         "examples/remix/remix-antd",
-                        "examples/remix/remix-mui",
+                        "examples/remix/remix-material-ui",
                         "examples/remix/remix-headless",
                         "examples/remix/remix-auth",
                     ],

diff --git a/documentation/src/assets/examples.ts b/documentation/src/assets/examples.ts
@@ -43,7 +43,7 @@ export const SHOW_CASES: Examples = [
             text: "VIEW DEMO",
             link: "https://example.mui.admin.refine.dev",
         },
-        source: "https://github.com/refinedev/refine/tree/master/examples/finefoods-mui",
+        source: "https://github.com/refinedev/refine/tree/master/examples/finefoods-material-ui",
     },
 ];
 

diff --git a/...ation/versioned_docs/version-3.xx.xx/api-reference/mui/components/inferencer.md b/...ation/versioned_docs/version-3.xx.xx/api-reference/mui/components/inferencer.md
@@ -360,4 +360,4 @@ render(<App />);
 
 Below you'll find a Live CodeSandbox Example displaying a fully setup `Refine` app with `@pankod/refine-inferencer/mui` components.
 
-<CodeSandboxExample path="inferencer-mui" />
+<CodeSandboxExample path="inferencer-material-ui" />
diff --git a/...ntation/versioned_docs/version-3.xx.xx/api-reference/mui/customization/theme.md b/...ntation/versioned_docs/version-3.xx.xx/api-reference/mui/customization/theme.md
@@ -415,7 +415,7 @@ declare module "@pankod/refine-mui" {
 }
 ```
 
-You can see an example of how to [`create your own theme with custom variables`](https://github.com/refinedev/refine/blob/next/examples/finefoods-mui/src/theme.ts) and its [`interface`](https://github.com/refinedev/refine/blob/next/examples/finefoods-mui/src/interfaces/theme.d.ts) by accessing the links.
+You can see an example of how to [`create your own theme with custom variables`](https://github.com/refinedev/refine/blob/next/examples/finefoods-material-ui/src/theme.ts) and its [`interface`](https://github.com/refinedev/refine/blob/next/examples/finefoods-material-ui/src/interfaces/theme.d.ts) by accessing the links.
 
 ## Dark Mode
 
@@ -638,7 +638,7 @@ export default App;
   </div>
 </details>
 
-[You can use this CodeSandbox link to access this example. &#8594](https://codesandbox.io/embed/github/refinedev/refine/tree/next/examples/customization-theme-mui/?view=preview&theme=dark&codemirror=1)
+[You can use this CodeSandbox link to access this example. &#8594](https://codesandbox.io/embed/github/refinedev/refine/tree/next/examples/customization-theme-material-ui/?view=preview&theme=dark&codemirror=1)
 
 ```tsx live previewOnly previewHeight=450px disableScroll
 // visible-block-start

diff --git a/...versioned_docs/version-3.xx.xx/api-reference/mui/hooks/useAutocomplete/index.md b/...versioned_docs/version-3.xx.xx/api-reference/mui/hooks/useAutocomplete/index.md
@@ -415,4 +415,4 @@ By default, refine does the search using the [`useList`](/docs/api-reference/cor
 
 ## Example
 
-<CodeSandboxExample path="field-mui-use-autocomplete" />
+<CodeSandboxExample path="field-material-ui-use-autocomplete" />
diff --git a/...ion/versioned_docs/version-3.xx.xx/api-reference/mui/hooks/useDataGrid/index.md b/...ion/versioned_docs/version-3.xx.xx/api-reference/mui/hooks/useDataGrid/index.md
@@ -771,7 +771,7 @@ You can use [`useSelect`](http://localhost:3000/docs/api-reference/core/hooks/us
 
 ## Example
 
-<CodeSandboxExample path="table-mui-use-data-grid" />
+<CodeSandboxExample path="table-material-ui-use-data-grid" />
 
 [use-table-core]: /docs/api-reference/core/hooks/useTable
 [source-code]: https://github.com/refinedev/refine/blob/master/packages/mui/src/hooks/useDataGrid/index.ts

diff --git a/documentation/versioned_docs/version-3.xx.xx/examples/authentication/mui.md b/documentation/versioned_docs/version-3.xx.xx/examples/authentication/mui.md
@@ -7,4 +7,4 @@ example-tags: [mui,authentication,react-table]
 
 You can create your own Authentication approach using **refine**. You can customize the [AuthProvider](/docs/api-reference/core/providers/auth-provider/) methods according to your needs and control the privileges of your users. This example is a simple example of custom authentication with **refine**.
 
-<CodeSandboxExample path="auth-mui" />
+<CodeSandboxExample path="auth-material-ui" />
diff --git a/documentation/versioned_docs/version-3.xx.xx/examples/form/mui/useDrawerForm.md b/documentation/versioned_docs/version-3.xx.xx/examples/form/mui/useDrawerForm.md
@@ -8,4 +8,4 @@ example-tags: [form,mui,react-hook-form]
 
 [Refer to the useModalForm hook documentation for more information. →](/docs/packages/documentation/react-hook-form/useModalForm/)
 
-<CodeSandboxExample path="form-mui-use-drawer-form" />
+<CodeSandboxExample path="form-material-ui-use-drawer-form" />
diff --git a/documentation/versioned_docs/version-3.xx.xx/examples/form/mui/useForm.md b/documentation/versioned_docs/version-3.xx.xx/examples/form/mui/useForm.md
@@ -8,4 +8,4 @@ example-tags: [form,mui,react-hook-form]
 
 [Refer to the useForm hook documentation for more information. →](/docs/packages/documentation/react-hook-form/useForm)
 
-<CodeSandboxExample path="form-mui-use-form" />
+<CodeSandboxExample path="form-material-ui-use-form" />
diff --git a/documentation/versioned_docs/version-3.xx.xx/examples/form/mui/useModalForm.md b/documentation/versioned_docs/version-3.xx.xx/examples/form/mui/useModalForm.md
@@ -8,4 +8,4 @@ example-tags: [form,mui,react-hook-form]
 
 [Refer to the useModalForm hook documentation for more information. →](/docs/packages/documentation/react-hook-form/useModalForm/)
 
-<CodeSandboxExample path="form-mui-use-modal-form" />
+<CodeSandboxExample path="form-material-ui-use-modal-form" />
diff --git a/documentation/versioned_docs/version-3.xx.xx/examples/form/mui/useStepsForm.md b/documentation/versioned_docs/version-3.xx.xx/examples/form/mui/useStepsForm.md
@@ -8,4 +8,4 @@ example-tags: [form,mui,react-hook-form]
 
 [Refer to the useStepsForm hook documentation for more information. →](/docs/packages/documentation/react-hook-form/useStepsForm/)
 
-<CodeSandboxExample path="form-mui-use-steps-form" />
+<CodeSandboxExample path="form-material-ui-use-steps-form" />
diff --git a/documentation/versioned_docs/version-3.xx.xx/examples/table/mui/advanced.md b/documentation/versioned_docs/version-3.xx.xx/examples/table/mui/advanced.md
@@ -7,4 +7,4 @@ example-tags: [table, mui, react-router]
 
 Advanced table examples with [`useDataGrid`](/docs/api-reference/mui/hooks/useDataGrid) and [`useTable`](https://react-table.tanstack.com/) created with **refine**'s [@pankod/refine-react-table](https://github.com/refinedev/refine/tree/master/packages/react-table) adapter.
 
-<CodeSandboxExample path="table-mui-advanced" />
+<CodeSandboxExample path="table-material-ui-advanced" />
diff --git a/...entation/versioned_docs/version-3.xx.xx/examples/table/mui/cursor-pagination.md b/...entation/versioned_docs/version-3.xx.xx/examples/table/mui/cursor-pagination.md
@@ -7,4 +7,4 @@ example-tags: [data-provider, mui]
 
 [Cursor Pagination](https://mui.com/x/react-data-grid/pagination/#cursor-implementation) is a pagination method and [Material UI](https://mui.com/) supports it by default. This sample application shows how to use it.
 
-<CodeSandboxExample path="table-mui-cursor-pagination" />
+<CodeSandboxExample path="table-material-ui-cursor-pagination" />
diff --git a/documentation/versioned_docs/version-3.xx.xx/examples/table/mui/filter.md b/documentation/versioned_docs/version-3.xx.xx/examples/table/mui/filter.md
@@ -9,5 +9,5 @@ example-tags: [table,filter,mui,react-router]
 The `Table Filter` option allows you to apply filters to the data in your table. The example below demonstrates how you might filter and display data in your table based on certain field parameters.
 By filtering your table's data you may only see the fields you want.
 
-<CodeSandboxExample path="table-mui-table-filter" />
+<CodeSandboxExample path="table-material-ui-table-filter" />
 
diff --git a/documentation/versioned_docs/version-3.xx.xx/examples/table/mui/useDataGrid.md b/documentation/versioned_docs/version-3.xx.xx/examples/table/mui/useDataGrid.md
@@ -12,8 +12,8 @@ You may use the `useDataGrid` hook to process your data with features compatible
 
 ## With `DataGrid` Component
 
-<CodeSandboxExample path="table-mui-use-data-grid" />
+<CodeSandboxExample path="table-material-ui-use-data-grid" />
 
 ## With `DataGridPro` Component
 
-<CodeSandboxExample path="table-mui-data-grid-pro" />
+<CodeSandboxExample path="table-material-ui-data-grid-pro" />
diff --git a/documentation/versioned_docs/version-3.xx.xx/examples/table/mui/useDeleteMany.md b/documentation/versioned_docs/version-3.xx.xx/examples/table/mui/useDeleteMany.md
@@ -9,4 +9,4 @@ The `useDeleteMany` is one of **refine**'s data hooks. It removes more than one
 
 [Refer to the **refine** useDeleteMany data hook documentation for more information. →](/docs/api-reference/core/hooks/data/useDeleteMany/)
 
-<CodeSandboxExample path="table-mui-use-delete-many" />
+<CodeSandboxExample path="table-material-ui-use-delete-many" />
diff --git a/documentation/versioned_docs/version-3.xx.xx/examples/table/mui/useUpdateMany.md b/documentation/versioned_docs/version-3.xx.xx/examples/table/mui/useUpdateMany.md
@@ -9,4 +9,4 @@ example-tags: [table,mui,refine-hooks,react-router]
 
 [Refer to the **refine** useUpdateMany data hook documentation for more information. →](/docs/api-reference/core/hooks/data/useUpdateMany/)
 
-<CodeSandboxExample path="table-mui-use-update-many" />
+<CodeSandboxExample path="table-material-ui-use-update-many" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -419,4 +419,4 @@ render(<App />);

		Below you'll find a Live CodeSandbox Example displaying a fully setup `Refine` app with `@refinedev/inferencer/mui` components.

		<CodeSandboxExample path="inferencer-mui" />
		<CodeSandboxExample path="inferencer-material-ui" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,4 +7,4 @@ example-tags: [mui,authentication,react-table]

		You can create your own Authentication approach using refine. You can customize the [AuthProvider](/docs/api-reference/core/providers/auth-provider/) methods according to your needs and control the privileges of your users. This example is a simple example of custom authentication with refine.

		<CodeSandboxExample path="auth-mui" />
		<CodeSandboxExample path="auth-material-ui" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,4 +8,4 @@ example-tags: [form,mui,react-hook-form]

		[Refer to the useModalForm hook documentation for more information. →](/docs/packages/documentation/react-hook-form/useModalForm/)

		<CodeSandboxExample path="form-mui-use-drawer-form" />
		<CodeSandboxExample path="form-material-ui-use-drawer-form" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,4 +8,4 @@ example-tags: [form,mui,react-hook-form]

		[Refer to the useForm hook documentation for more information. →](/docs/packages/documentation/react-hook-form/useForm)

		<CodeSandboxExample path="form-mui-use-form" />
		<CodeSandboxExample path="form-material-ui-use-form" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,4 +8,4 @@ example-tags: [form,mui,react-hook-form]

		[Refer to the useStepsForm hook documentation for more information. →](/docs/packages/documentation/react-hook-form/useStepsForm/)

		<CodeSandboxExample path="form-mui-use-steps-form" />
		<CodeSandboxExample path="form-material-ui-use-steps-form" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,4 +7,4 @@ example-tags: [table, mui, react-router]

		Advanced table examples with [`useDataGrid`](/docs/api-reference/mui/hooks/useDataGrid) and [`useTable`](https://react-table.tanstack.com/) created with refine's [@refinedev/react-table](https://github.com/refinedev/refine/tree/master/packages/react-table) adapter.

		<CodeSandboxExample path="table-mui-advanced" />
		<CodeSandboxExample path="table-material-ui-advanced" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,4 +7,4 @@ example-tags: [data-provider, mui]

		[Cursor Pagination](https://mui.com/x/react-data-grid/pagination/#cursor-implementation) is a pagination method and [Material UI](https://mui.com/) supports it by default. This sample application shows how to use it.

		<CodeSandboxExample path="table-mui-cursor-pagination" />
		<CodeSandboxExample path="table-material-ui-cursor-pagination" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,4 +9,4 @@ The `useDeleteMany` is one of refine's data hooks. It removes more than one

		[Refer to the refine useDeleteMany data hook documentation for more information. →](/docs/api-reference/core/hooks/data/useDeleteMany/)

		<CodeSandboxExample path="table-mui-use-delete-many" />
		<CodeSandboxExample path="table-material-ui-use-delete-many" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,4 +9,4 @@ example-tags: [table,mui,refine-hooks,react-router]

		[Refer to the refine useUpdateMany data hook documentation for more information. →](/docs/api-reference/core/hooks/data/useUpdateMany/)

		<CodeSandboxExample path="table-mui-use-update-many" />
		<CodeSandboxExample path="table-material-ui-use-update-many" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,4 +6,4 @@ example-tags: [mui,upload]

		In this example, you'll learn how to do base64 upload in refine with React Hook Form. For more information, you can view the live example or review the source code.

		<CodeSandboxExample path="upload-mui-base64" />
		<CodeSandboxExample path="upload-material-ui-base64" />