Merge branch 'master' of github.com:refinedev/refine

MedEL2016 · Nov 14, 2023 · dbf4c96 · dbf4c96
2 parents 0825ae4 + e2dd826
commit dbf4c96
Show file tree

Hide file tree

Showing 465 changed files with 1,655 additions and 2,260 deletions.
diff --git a/documentation/blog/2021-11-26-refine-vs-react-admin.md b/documentation/blog/2021-11-26-refine-vs-react-admin.md
@@ -639,13 +639,6 @@ If you want to get information about the Enterprise, refine ready to help you fo
 
 refine Docs & Demo: [Documentation](https://refine.dev/docs/) - [Live Demo](https://refine.dev/demo/)
 
----
-
-<BannerRandom />
-
-
----
-
 ## Conclusion
 
 With the pricing, customization and flexibility that **refine** offers you, you will be able to meet all your business demands. In addition, you can easily develop both B2B and B2C applications using a single framework with the support of SSR - Next.js.

diff --git a/documentation/blog/2021-12-22-base64-upload.md b/documentation/blog/2021-12-22-base64-upload.md
@@ -194,11 +194,7 @@ Here we take data in file format and encode it as Base64. Then we show this enco
 <br/>
 <br/>
 
----
-
-<BannerRandom />
 
----
 ## How to Base64 Upload with Refine?
 The Base64 file upload process with **refine** is very simple. How to use it is explained step by step in the guide and example. 
 

diff --git a/documentation/blog/2021-12-27-multipart-upload.md b/documentation/blog/2021-12-27-multipart-upload.md
@@ -118,11 +118,7 @@ The requests we created to send files by JavaScript will now be sent to our loca
 <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-12-27-multipart-upload/overview.gif" alt="upload overview" />
 <br />
 
----
-
-<BannerRandom />
 
----
 ## How to Multipart Upload with Refine?
 The Multipart file upload process with **refine** is very simple. How to use it is explained step by step in the guide and example. 
 

diff --git a/documentation/blog/2022-01-18-csv-import.md b/documentation/blog/2022-01-18-csv-import.md
@@ -198,11 +198,7 @@ function App() {
 
 We formatted the CSV file that came in plain text format, using Javascript [slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice) and [split](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split) methods, and created two separate array. Then we converted Header and Rows arrays to Array of Object format as Key, Value.
 
----
-
-<BannerRandom />
 
----
 
 ## Live Codesandbox Example
 

diff --git a/documentation/blog/2022-07-21-admin-panel-with-materialui-and-strapi.md b/documentation/blog/2022-07-21-admin-panel-with-materialui-and-strapi.md
@@ -126,11 +126,7 @@ export const API_URL = "https://api.strapi-v4.refine.dev";
 
 
 
----
-
-<BannerRandom />
 
----
 
 ## CRUD operations
 

diff --git a/documentation/blog/2022-08-04-mocking-api-calls.md b/documentation/blog/2022-08-04-mocking-api-calls.md
@@ -23,6 +23,7 @@ I'll show how to write unit tests for API calls by mocking method in the simple
 
 Steps we'll cover: 
 
+- [Introduction](#introduction)
 - [Why mocking HTTP requests during testing is important?](#why-mocking-http-requests-during-testing-is-important)
 - [What is Nock?](#what-is-nock)
 - [Bootstrapping the example app](#bootstrapping-the-example-app)
@@ -34,6 +35,7 @@ Steps we'll cover:
     - [Mocking server Errors](#mocking-server-errors)
 - [Recording in Nock](#recording-in-nock)
 - [Alternative API mocking libraries](#alternative-api-mocking-libraries)
+- [Conclusion](#conclusion)
 
 
 ## Why mocking HTTP requests during testing is important?
@@ -150,13 +152,8 @@ Testing this HTTP request-related architecture in that way can be a headache.
 
 With the nock mock service, we can intercept requests to the API and return custom responses.
 
----
-
-<BannerRandom />
 
 
----
-
 ## Nock installation and configuration
 Install the nock with the following command if you don't have it.
 

diff --git a/documentation/blog/2022-08-17-using-next-image.md b/documentation/blog/2022-08-17-using-next-image.md
@@ -52,11 +52,7 @@ Here is a non-exhaustive list of things you should consider before serving your
 
 Once you're done optimizing your images manually, you can now proceed to use the NextJS Image component for maximum image optimization benefits. 
 
----
-
-<BannerRandom />
 
----
 ## The NextJS image component
 
 The [`<Image />`](https://nextjs.org/docs/api-reference/next/image) component is a batteries-included modern solution for serving images in NextJS applications. It's similar to the native HTML `<img/>` element but has a few differences.
@@ -116,12 +112,7 @@ const Profile = () => {
 You **should** always add the `width` and `height` props in the image component when using remote images because NextJS cannot determine the images dimension during the build process for proper page rendering to prevent layout shifts.
 :::
 
----
 
-<BannerRandom />
-
-
----
 
 ## The image component properties
 

diff --git a/documentation/blog/2022-08-18-auth-with-nextauth.md b/documentation/blog/2022-08-18-auth-with-nextauth.md
@@ -199,13 +199,8 @@ NEXTAUTH_URL=http://localhost:3000
 NEXTAUTH_SECRET=YOUR_SECRET
 ```
 
----
-
-<BannerRandom />
 
 
----
-
 ### For GithubProvider (you will need a GitHub account):
 
 To create your GithubProvider ID and SECRET, navigate to your GitHub account [developer settings](https://github.com/settings/apps) and click on the OAuth Apps tab to register a new application.
@@ -278,11 +273,7 @@ export default NextAuth({
 
 Congratulations! You’ve added your complete API route. The next thing you are going to do is to configure the shared session state.
 
----
-
-<BannerRandom />
 
----
 ## Configure Shared Session State
 
 The `useSession()` React Hook in the NextAuth.js client is the easiest way to check if someone is signed in, and to be able to use this hook, first you’ll need to expose the session context, `<SessionProvider />`, at the top level of your application:

diff --git a/documentation/blog/2022-08-19-temporal-api.md b/documentation/blog/2022-08-19-temporal-api.md
@@ -97,14 +97,6 @@ import { Temporal } from '@js-temporal/polyfill';
 
 Now, we are able to inspect the browser console when testing the following cases.
 
----
-
-
-<BannerRandom />
-
-
-
----
 ## Temporal API Data Types
 
 ### Temporal.Now

diff --git a/documentation/blog/2022-08-20-neumorphic-css.md b/documentation/blog/2022-08-20-neumorphic-css.md
@@ -94,13 +94,8 @@ Neumorphism's top accessibility rule is to comply with the [Web Content Accessib
 
 Another issue is with clickable items; even though you're aiming for minimalism, don't abuse the flat design idea. When users interact with clickable objects like buttons and links, they need to change their appearance and should be obvious.
 
----
-
-<BannerRandom />
 
 
----
-
 ## Neumorphism in CSS
 Now that you know how Neumorphism affects UI/UX let's look at how you as a developer might use it in actual projects.
 ### Buttons

diff --git a/documentation/blog/2022-08-23-mui-usedatagrid.md b/documentation/blog/2022-08-23-mui-usedatagrid.md
@@ -18,20 +18,23 @@ Material UI is a React UI component library with a rich set of components and to
 
 Steps we’ll cover:
 
--   [Create a new `refine` app](#create-a-new-refine-app)
--   [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)
--   [Adding styled-components](#adding-styled-components)
--   [refine's `useDataGrid` hook](#refines-usedatagrid-hook)
--   [Rendering data with the `<DataGrid />` component](#rendering-data-with-the-datagrid--component)
--   [Pagination, Filtering, and Sorting using the `useDataGrid` hook](#pagination-filtering-and-sorting-using-the-usedatagrid-hook)
-    -   [Pagination](#pagination)
-    -   [Sorting](#sorting)
-        -   [Initial sort order](#initial-sort-order)
-        -   [Controlled sorting](#controlled-sorting)
-    -   [Filtering](#filtering)
-        -   [Controlled filtering](#controlled-filtering)
--   [Live CodeSandbox Example](#live-codesandbox-example)
+- [Introduction](#introduction)
+- [Prerequisites](#prerequisites)
+- [Create a new refine app](#create-a-new-refine-app)
+- [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)
+- [Adding styled-components](#adding-styled-components)
+- [refine's `useDataGrid` hook](#refines-usedatagrid-hook)
+- [Rendering data with the `<DataGrid />` component](#rendering-data-with-the-datagrid--component)
+- [Pagination, Filtering, and Sorting using the `useDataGrid` hook](#pagination-filtering-and-sorting-using-the-usedatagrid-hook)
+  - [Pagination](#pagination)
+  - [Sorting](#sorting)
+    - [Initial sort order](#initial-sort-order)
+    - [Controlled sorting](#controlled-sorting)
+  - [Filtering](#filtering)
+    - [Controlled filtering](#controlled-filtering)
+- [Conclusion](#conclusion)
+- [Live CodeSandbox Example](#live-codesandbox-example)
 
 ## Prerequisites
 
@@ -426,7 +429,6 @@ By default, `syncWithLocation` is set to `true` in the `<Refine />` component. T
 
 You can refer to the MU X DataGrid [documentation](https://mui.com/x/react-data-grid/pagination/) for more information on the pagination feature.
 
-<BannerRandom />
 
 ### Sorting
 

diff --git a/documentation/blog/2022-08-24-mui-icons.md b/documentation/blog/2022-08-24-mui-icons.md
@@ -221,11 +221,7 @@ Here’s the result:
 
 
 
----
-
-<BannerRandom />
 
----
 
 ## SvgIcon API
 For cases where you may need a custom SVG icon that is not readily available in the Material icon specifications, you can use the `SvgIcon` wrapper. This component is an extension of the native `<svg>` element:

diff --git a/documentation/blog/2022-08-26-react-content-filtering.md b/documentation/blog/2022-08-26-react-content-filtering.md
@@ -275,11 +275,7 @@ To style the component, we will add the following code to the `src/components/se
 
 To style the search bar, we made it use all the available width of the parent wrapper, added margin and padding, removed the default border, made the search box rounded, and defined a specific font size.
 
----
-
-<BannerRandom />
 
----
 
 ### Content card
 

diff --git a/documentation/blog/2022-08-28-js-currying-functions.md b/documentation/blog/2022-08-28-js-currying-functions.md
@@ -100,13 +100,8 @@ So basically, what we've done is allow the accumulator to take multiple argument
 
 But now our `curry()` function is much more powerful. We can pass any number of arguments to an accumulator, as long as that is returned. And it is common to implement this with native JavaScript `Function.prototype` methods.
 
----
-
-<BannerRandom />
 
 
----
-
 ### Using `Function.prototype` Methods
 We can re-write the `curry()` function with `Function.prototype.apply`, and with `Function.prototype.bind`:
 

diff --git a/documentation/blog/2022-08-29-usestate-mistakes.md b/documentation/blog/2022-08-29-usestate-mistakes.md
@@ -120,13 +120,8 @@ function App() {
 export default App;
 ```
 
----
-
-<BannerRandom />
 
 
----
-
 ## Not Using Optional Chaining
 Sometimes just initializing the useState with the expected data type is often not enough to prevent the unexpected blank page error. This is especially true when trying to access the property of a deeply nested object buried deep inside a chain of related objects. 
 

diff --git a/documentation/blog/2022-08-30-flexbox-vs-grid.md b/documentation/blog/2022-08-30-flexbox-vs-grid.md
@@ -125,13 +125,8 @@ Nothing will happen if we change `display: flex` to `display: grid` You have to
 <br/>
 
 
----
-
-<BannerRandom />
 
 
----
-
 ## Intrinsic and Extrinsic Sizing
 In CSS, you have intrinsic and extrinsic sizing, like:
 

diff --git a/documentation/blog/2022-08-31-google-lighthouse.md b/documentation/blog/2022-08-31-google-lighthouse.md
@@ -253,13 +253,8 @@ If you navigate to the [refine landing page](https://refine.dev/) and use Lighth
 
 It is worth mentioning that PWAs have several features and best practices to follow. Google lighthouse can audit only a  handful of these features. You need to check some of them manually. Google lighthouse will also hint at the items you need to check manually.
 
----
-
-<BannerRandom />
 
 
----
-
 ## How to view Google lighthouse report
 
 Using Google lighthouse via the Chrome DevTools or the browser extension will generate the report and immediately display it in the browser. Depending on how you use Google lighthouse, you can also save the performance data in HTML or JSON format.

diff --git a/documentation/blog/2022-09-01-framer-text-animations.md b/documentation/blog/2022-09-01-framer-text-animations.md
@@ -50,11 +50,7 @@ We are going to break this article into two sections first, the text animation,
 :::
 
 
----
-
-<BannerRandom />
 
----
 
 
 ## Getting started with text animation

diff --git a/documentation/blog/2022-09-02-sveltekit-crud-app.md b/documentation/blog/2022-09-02-sveltekit-crud-app.md
@@ -305,13 +305,8 @@ In the above code snippets, we attached an event handler to change the value of
 
 <br/>
 
----
-
-<BannerRandom />
 
 
----
-
 ## Update Blog
 To update the blog post, we'll create a Sveltekit dynamic route. This route will use the `id` of each blog as a param. Sveltekit implements `file-system-based` routing, which means that your application routes are defined by your directories, and version 3 requires you to have a `+page.svelte` and a `+page.js` or `+page.server` file in each of the directories. 
 

diff --git a/documentation/blog/2022-09-04-next-link.md b/documentation/blog/2022-09-04-next-link.md
@@ -60,15 +60,8 @@ function Home () {
 export default Home
 ```
 
----
-
-
-<BannerRandom />
 
 
-
----
-
 ## The Link component props 
 
 ### **Required props**

diff --git a/documentation/blog/2022-09-05-mui-button.md b/documentation/blog/2022-09-05-mui-button.md
@@ -142,11 +142,7 @@ Here’s the result:
 
 
 
----
-
-<BannerRandom />
 
----
 
 ## How to use Material UI Button Component in your React project
 

diff --git a/documentation/blog/2022-09-06-nodejs-developer.md b/documentation/blog/2022-09-06-nodejs-developer.md
@@ -46,13 +46,8 @@ This asynchronous approach significantly reduces the waiting time for requests b
 Luckily, ES6 solved some of these problems by introducing Promises as a new way of writing asynchronous JavaScript code. With promises and callbacks, JavaScript's async nature becomes more predictable and easier to deal with as they help you better understand how your code is structured by offering consistency in how future events are handled. As such, having a proper understanding of the asynchronous first-class nature of Node.js, promises, and callbacks will help you avoid some of the problems associated with asynchronous programming.
 
 
----
-
-<BannerRandom />
 
 
----
-
 
 ## Understanding of Event-Driven Programming in Node
 Event-Driven Programming is a logical programming paradigm in which events drive program execution to avoid possible collisions in programs by limiting the complexity of program execution. Typically, an event-driven application uses an event loop to wait for an event to occur. When triggered, it invokes the appropriate action or callback function to deal with the event. 

diff --git a/documentation/blog/2022-09-07-next-env.md b/documentation/blog/2022-09-07-next-env.md
@@ -175,13 +175,8 @@ Next.js will always search for an environment variable in five places in your ap
 
 So for example if you define a variable in `.env.development.local` and then redefine it in `env.development`, the value in `env.development.local` will be used. 
 
----
-
-<BannerRandom />
 
 
----
-
 ## Test Environment Variables
 We can also use a `.env.test` to specify environment variables for testing purposes. In order to use default test environment variables, you must set `NODE_ENV` to test. Here's an example showing how you can do this in `package.json`:
 

diff --git a/documentation/blog/2022-09-09-react-18.md b/documentation/blog/2022-09-09-react-18.md
@@ -167,13 +167,8 @@ const root = hydrateRoot(app, <App tab="home" />);
 ```
 
 
----
-
-<BannerRandom />
 
 
----
-
 ## Render Callback
 You could pass a callback function when rendering the root component so that it would execute after the component renders or updates.
-Original file line number
+Diff line change
@@ Expand Up @@
     <br/>
     <br/>
-    ---
-    <BannerRandom />
-    ---
     ## How to Base64 Upload with Refine?
     The Base64 file upload process with **refine** is very simple. How to use it is explained step by step in the guide and example.
@@ Expand Down @@