Merge branch 'main' into next

.github/workflows/build-examples.yml

@@ -23,10 +23,11 @@ on:
     - cron: "0 6 * * *"
   workflow_dispatch:
     inputs:
-      environment:
-        description: "Environment to run tests against"
-        type: environment
+      build_all_examples:
+        description: "Build all examples"
+        type: boolean
         required: false
+        default: true
 
 jobs:
   chunks:
@@ -67,7 +68,7 @@ jobs:
 
       - name: Split Into Chunks
         id: chunkstep
-        run: CHUNKS=6 BASE_REF=${{ github.base_ref }} BUILD_ALL_EXAMPLES=${{ (contains(steps.pr-labels.outputs.labels, ' build-examples ') || github.event_name == 'schedule' ) && 'true' || 'false' }} node ./.github/workflows/scripts/build-example-chunks.js
+        run: CHUNKS=6 BASE_REF=${{ github.base_ref }} BUILD_ALL_EXAMPLES=${{ (github.event.inputs.build_all_examples || contains(steps.pr-labels.outputs.labels, ' build-examples ') || github.event_name == 'schedule' ) && 'true' || 'false' }} node ./.github/workflows/scripts/build-example-chunks.js
 
   build-chunk-1:
     runs-on: ubuntu-latest

.github/workflows/release.yml

@@ -2,9 +2,6 @@ name: Release
 
 on:
   push:
-    paths:
-      - ".changeset/**"
-      - "packages/**"
     branches:
       - main
 

documentation/blog/2022-11-17-antd-dynamic-form.md → documentation/blog/2024-12-20-antd-dynamic-form.md

@@ -4,12 +4,17 @@ description: Easy way to creating dynamic forms in React CRUD apps with Ant Desi
 slug: react-crud-app-with-dynamic-form-ant-design
 authors: david_omotayo
 tags: [react, Refine, tutorial, ant-design]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-11-17-antd-dynamic-form/social.png
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-11-17-antd-dynamic-form/social-2.png
 hide_table_of_contents: false
 ---
 
+**This article was last updated on December 20, 2024, to include advanced styling techniques for Ant Design dynamic forms and integration with form libraries like Formik and React Hook Form. Additionally, the introduction has been updated for clarity.**
+
 ## Introduction
 
+**TL;DR:** What is Ant Design Dynamic Form?
+Ant Design provides a dynamic form that enables the developer to create flexible and interactive forms, where users can dynamically add or remove fields if needed, making it quite suitable for complex data collection.
+
 Forms are one of the most adaptable elements in web development. They come in distinct structures for various use cases.
 
 However, due to the sporadic complexity of the information they collect, they tend to grow larger with several fields, which can be a big turnoff for most users.
@@ -31,7 +36,8 @@ Steps we'll cover:
 - [Adding icons](#adding-icons)
 - [Validation](#validation)
 - [Building the edit page](#building-the-edit-page)
-- [Live StackBlitz Example](#example)
+- [FAQ's](#faqs)
+- [Why Use AntD Dynamic Forms?](#why-use-antd-dynamic-forms)
 
 **Prerequisite**
 
@@ -1174,7 +1180,26 @@ This is a duplicate of the form component we created inside the `UserCreate` pag
 
 That's it. We've successfully built an application that uses an API to post and edit response records using a **dynamic form**.
 
-As a challenge, visit Refine's [documentation](https://refine.dev/docs/) to learn how you can add a `delete` button to the fields on the table and make your application a full-fledged CRUD application. Cheers!
+As a challenge, visit Refine's [documentation](https://refine.dev/docs/) to learn how you can add a `delete` button to the fields on the table and make your application a full-fledged CRUD application.
+
+## FAQ's
+
+- What is a dynamic form?
+  A dynamic form is one that automatically changes its structure depending on what the user enters, often allowing users to add or remove fields dynamically.
+
+- How do I start using dynamic fields from Ant Design?
+  To manage dynamic fields, use the component and methods provided by `<Form.List>`: add() and remove().
+
+- Is it possible to add validation to dynamic form fields?
+  Yes, you can utilize the rules prop on `<Form.Item>` to extend your own validate logic.
+
+## Why Use AntD Dynamic Forms?
+
+Dynamic forms improve user satisfaction by:
+
+- Simplifying User Input: Users only see fields they need, reducing form clutter.
+- Flexibility: Provide the user with the facility to add or remove fields as required.
+- Streamlining Complex Data: Collect additional details without overwhelming users with lengthy forms upfront. • Saving Time: Automate repetitive input scenarios with less manual work.
 
 ## Conclusion
 

documentation/blog/2022-10-30-mui-select.md → documentation/blog/2024-12-20-mui-select.md

@@ -4,12 +4,30 @@ description: We'll discover the Material UI select component with examples
 slug: material-ui-select-component
 authors: doro_onome
 tags: [material-ui, react]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-10-30-mui-select/social.png
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-10-30-mui-select/social-2.png
 hide_table_of_contents: false
 ---
 
+**This article was last updated on December 20, 2024, to include advanced styling techniques for Material UI Select and integration with form libraries like Formik and React Hook Form. Also the introduction is updated for clarity.**
+
 ## Introduction
 
+**TL;DR:**
+
+Material UI Select is a component to create dropdowns in React that provides native customization options for styles, indicators, decorators, and grouped options.
+
+**How to use Material UI Select?**
+
+- Import the required components, Select and Option, from @mui/joy:.
+- Customize with props like placeholder, defaultValue, and indicator.
+- Sx to style for responsive and dynamic designs.
+
+**Key Features of Material-UI Select:**
+
+- Custom Indicators: Replaces the default dropdown arrow for your icon.
+- Decorators: Appending icons or elements before or after the select field.
+- Options Grouped Together: A categorization of options contributes towards better usability. 4. Clearable Select: Add a clear button for resetting the selection. 5. - - - Accessibility: Native support for ARIA attributes.
+
 Material UI provides a plethora of available styled components that assist developers in creating responsive and aesthetically pleasing web designs. One of these components is Material UI's Select, which is an input field that showcases a list of customizable options. In this tutorial, we will deeply dive into **Material UI Select**, look at its prop possibilities, and highlight its features. We will also investigate a potential use case in a real-world application.
 
 Steps we'll cover:
@@ -18,12 +36,11 @@ Steps we'll cover:
 - [Getting Started with Material UI Select](#getting-started-with-material-ui-select)
 - [The Option component](#the-option-component)
 - [Other Material UI Select features](#other-material-ui-select-features)
-  - [Indicator](#indicator)
-  - [Decorator](#decorator)
-  - [Grouped Options](#grouped-options)
 - [Clearing the Select field](#clearing-the-select-field)
 - [Accessibility](#accessibility)
 - [Building a Sign-up Form UI with React and Material UI Select](#building-a-sign-up-form-ui-with-react-and-material-ui-select)
+- [Advanced Styling with Material UI Select](#advanced-styling-with-material-ui-select)
+- [Integration with Form Libraries (Formik and React Hook Form)](#integration-with-form-libraries-formik-and-react-hook-form)
 
 ## What is Material UI
 
@@ -527,6 +544,72 @@ And the result:
    <img style={{alignSelf:"center"}}  src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-10-30-mui-select/mui-select-result.gif"  alt="Material UI select option" />
 </div>
 
+## Advanced Styling with Material UI Select
+
+Material UI Select has more detailed customization with the sx prop and themes. On this page you can show how to:
+
+- Override default styles for hover, focus, and selected states.
+- Integrate custom themes to maintain consistent styling throughout the application.
+- Add animations for dropdown behavior or transitions.
+
+```tsx
+<Select
+  placeholder="Choose an option"
+  sx={{
+    borderRadius: "8px",
+    boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
+    "&:hover": {
+      backgroundColor: "#f0f0f0",
+    },
+    "& .Mui-selected": {
+      fontWeight: "bold",
+    },
+  }}
+>
+  <Option value="one">Option One</Option>
+  <Option value="two">Option Two</Option>
+  <Option value="three">Option Three</Option>
+</Select>
+```
+
+## Integration with Form Libraries (Formik and React Hook Form)
+
+This section would appeal to developers building forms with validation.
+
+Example with React Hook Form:
+
+```tsx
+import { useForm, Controller } from "react-hook-form";
+import Select from "@mui/joy/Select";
+import Option from "@mui/joy/Option";
+
+export default function FormWithSelect() {
+  const { control, handleSubmit } = useForm();
+
+  const onSubmit = (data) => {
+    console.log(data);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        name="carBrand"
+        control={control}
+        defaultValue=""
+        render={({ field }) => (
+          <Select {...field} placeholder="Select a Car Brand">
+            <Option value="tesla">Tesla</Option>
+            <Option value="bmw">BMW</Option>
+            <Option value="audi">Audi</Option>
+          </Select>
+        )}
+      />
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
 ## Conclusion
 
 This article covered the **Material UI Select** component, navigated its features, and highlighted its functionalities in a React application. We also investigated a use case by developing a Sign-up form UI in React with **Material UI Select**. I hope you find this post helpful.

documentation/blog/2023-03-07-react-dnd.md → documentation/blog/2024-12-24-react-dnd.md

@@ -4,17 +4,19 @@ description: We'll be using the react-dnd library to create draggable components
 slug: react-draggable-components-with-react-dnd
 authors: david_omotayo
 tags: [react, Refine, tutorial]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-03-07-react-dnd/social.png
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-03-07-react-dnd/social-2.png
 hide_table_of_contents: false
 ---
 
+**This article was last updated on December 24, 2024, to include advanced techniques for optimizing React-DND performance, such as avoiding unnecessary re-renders, virtualizing large lists, and supporting mobile devices with the Touch Backend, along with simplified explanations for better clarity.**
+
 <br/>
 
 <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-03-07-react-dnd/final-min.gif"  alt="react draggable" />
 
 <br />
 
-# Introduction
+## Introduction
 
 The HTML Drag-and-Drop API is a pioneering feature of the web, whose introduction has inspired developers to find innovative ways of using it to enhance the user experience on their websites.
 
@@ -688,15 +690,6 @@ Now, if you save your project go back to the browser, you should see the cards r
 
 <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-03-07-react-dnd/rendering-cards.png"  alt="react draggable" />
 
-<br />
-
-<br/>
-<div>
-<a href="https://discord.gg/refine">
-  <img  src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/discord_big_blue.png" alt="discord banner" />
-</a>
-</div>
-
 ## Using the useDrag hook
 
 To make our cards draggable, we'll declare the `useDrag` hook inside the `cards` component, give it a `type` and item `value`, and then pass the `dragRef` variable to the card component using the `ref` attribute.
@@ -901,6 +894,114 @@ If you save your progress and revisit the browser, you should now be able to dra
 
 That's all. We have successfully created a kanban board with draggable cards and columns with drop zones. You can enhance the appearance by adding designs based on the state of each card and column.
 
+## Optimizing Performance with React-DND
+
+Performance can become an issue when working with React-DND, especially with a large number of draggable items. Below are some tips to keep things running efficiently:
+
+**Avoid Unnecessary Re-Renders**
+
+Utilize `React.memo` or `useMemo` to avoid unnecessary re-renders. For instance, if your draggable items remain unchanged, memoizing them can save a lot of processing time.
+
+**Batch State Updates**
+
+When updating multiple items after a drop, batch those updates instead of triggering multiple state changes. This minimizes React’s render cycles.
+
+**Minimize the `collect` Function’s Scope**
+
+The `collect` function in `useDrag` and `useDrop` is powerful, but adding excessive logic can degrade performance. Only gather data that’s absolutely necessary.
+
+**Virtualize Large Lists**
+
+For hundreds of draggable items, consider using libraries like `react-window` or `react-virtualized`. These libraries render only the visible items, reducing React’s workload.
+
+By applying these strategies, you’ll achieve a drag-and-drop experience that is both fast and functional.
+
+## Error Handling and Debugging
+
+React-DND is a robust library, but you might encounter some common issues. Here’s how to resolve them:
+
+**Missing `DndProvider`**
+
+If you forget to wrap your app with `DndProvider`, nothing will work. Ensure your root component includes it:
+
+```jsx
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+
+function App() {
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <YourApp />
+    </DndProvider>
+  );
+}
+```
+
+**Type Mismatches Between useDrag and useDrop**
+
+The type property in useDrag must match the accept property in useDrop. Otherwise, the drop zone won’t recognize the dragged item:
+
+```tsx
+const [{ isDragging }, dragRef] = useDrag({ type: "item" });
+const [{ isOver }, dropRef] = useDrop({ accept: "item" });
+```
+
+**Monitor Data Not Updating**
+
+If collect isn’t providing accurate data, ensure you’re returning the correct values from the monitor:
+
+```tsx
+collect: (monitor) => ({ isDragging: monitor.isDragging() });
+```
+
+Debugging these small issues can save significant time. Always refer to the documentation and browser console for detailed error messages.
+
+**Mobile Device Support**
+
+React-DND’s default backend (HTML5Backend) works well on desktop browsers but struggles on mobile devices. Here’s how to enable drag-and-drop for touchscreens:
+
+**Use the Touch Backend**
+
+Install the react-dnd-touch-backend package designed for touch devices:
+
+```
+npm install react-dnd-touch-backend
+```
+
+**Set Up the Touch Backend**
+
+Replace HTML5Backend with TouchBackend in your app’s DndProvider:
+
+```tsx
+import { DndProvider } from "react-dnd";
+import { TouchBackend } from "react-dnd-touch-backend";
+
+function App() {
+  return (
+    <DndProvider backend={TouchBackend}>
+      <YourApp />
+    </DndProvider>
+  );
+}
+```
+
+**Customize Touch Behavior**
+
+You can tweak the touch backend’s settings for better performance, such as adjusting the drag delay:
+
+```tsx
+const backendOptions = {
+  enableMouseEvents: true,
+  delay: 100,
+};
+
+<DndProvider backend={TouchBackend} options={backendOptions}>
+  <YourApp />
+</DndProvider>;
+```
+
+With these adjustments, your drag-and-drop features will work seamlessly across both desktop and mobile devices.
+
 ## Conclusion
 
 This article introduced Refine and React-DND, detailing the process of setting up a Refine project with predefined CRUD pages via the Superplate CLI and integrating React-DND. It also covered the creation of a dashboard page featuring a kanban board that utilizes the useDrag and useDrop hooks from React-DND for its drag-and-drop functionality.