Merge branch 'main' into feat/react-router-update-on-live-previews

refinedev · Dec 27, 2024 · a12acc4 · a12acc4
2 parents c7a1cc6 + f3ba408
commit a12acc4
Show file tree

Hide file tree

Showing 2 changed files with 176 additions and 33 deletions.
diff --git a/...mentation/blog/2022-12-15-mui-checkbox.md → ...mentation/blog/2024-12-25-mui-checkbox.md b/...mentation/blog/2022-12-15-mui-checkbox.md → ...mentation/blog/2024-12-25-mui-checkbox.md
@@ -4,30 +4,40 @@ description: We'll discover the Material UI Checkbox component with examples
 slug: material-ui-checkbox-component
 authors: doro_onome
 tags: [material-ui, react]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-12-15-mui-checkbox/social.png
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-12-15-mui-checkbox/social-2.png
 hide_table_of_contents: false
 ---
 
+**This article was last updated on December 25, 2024, to include advanced Material UI Checkbox customization techniques, improved form validation patterns, and accessibility best practices.**
+
 ## Introduction
 
-Material UI offers a wide range of component and utilities that empowers developers with the appropriate tools to create more responsive web designs and bolster the UX of their apps. A checkbox is a small box that, when selected by the user, indicates that a specific feature or option has been enabled. Material UI provides this valuable component on a platter and makes them customizable to apply to your project fittingly. This article will deeply traverse the Material UI Checkbox component, investigate its processes and highlight its syntax application. We will also explore a potential use case in a real-world application.
+### What is Material UI Checkbox?
+
+Material UI Checkbox is a form input component that allows users to select one or more options out of a given set of choices. It is part of the Material UI library, which provides an up-to-date, accessible, and customizable implementation of the checkbox for React applications.
+
+Key Features and Benefits
+
+- **Easy Integration**: Easy to implement with just a single import
+- **Accessibility**: ARIA support included; keyboard navigation
+- **Customization**: Rich styling with props and themes
+- **Form Support**: Seamless integrations with form libraries
+- **State Management**: controlled and uncontrolled component options
+- **Responsive**: Works on all sizes of devices - **TypeScript Support**: Full type definitions included
+
+Material UI offers a wide range of component and utilities that empowers developers with the appropriate tools to create more responsive web designs and bolster the UX of their apps. A checkbox is a small box that, when selected by the user, indicates that a specific feature or option has been enabled. Material UI provides this valuable component on a platter and makes them customizable to apply to your project fittingly.
+
+This article will deeply traverse the Material UI Checkbox component, investigate its processes and highlight its syntax application. We will also explore a potential use case in a real-world application.
 
 Steps we'll cover:
 
 - [What is Material UI?](#what-is-material-ui)
 - [Getting started with Material UI Checkbox](#getting-started-with-material-ui-checkbox)
 - [Customizing your Material UI Checkbox](#customizing-your-material-ui-checkbox)
-  - [Adding Labels](#adding-labels)
-  - [Controlling the Checkbox Size](#controlling-the-checkbox-size)
-  - [Controlling the Checkbox Color](#controlling-the-checkbox-color)
-  - [Label Placement](#label-placement)
-  - [Checkbox Icons](#checkbox-icons)
 - [Other handy features](#other-handy-features)
-  - [FormGroup](#formgroup)
-  - [Indeterminate](#indeterminate)
-- [When to use the Material UI Checkbox](#when-to-use-the-mui-checkbox)
-  - [Checkboxes vs Radio buttons](#checkboxes-vs-radio-buttons)
-  - [Checkboxes vs Switches](#checkboxes-vs-switches)
+- [Error Handling \& Validation](#error-handling--validation)
+- [Advanced Customization](#advanced-customization)
+- [When to use the Material UI Checkbox](#when-to-use-the-material-ui-checkbox)
 - [Material UI Checkbox Accessibility](#material-ui-checkbox-accessibility)
 
 ## What is Material UI?
@@ -460,12 +470,108 @@ export default function IndeterminateCheckbox() {
 
 <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>
+## Error Handling & Validation
+
+When working with checkboxes in forms, proper error handling is essential. Here's a simple example of form validation with Material UI Checkbox:
+
+```tsx
+import * as React from "react";
+import {
+  Checkbox,
+  FormControlLabel,
+  FormHelperText,
+  FormControl,
+} from "@mui/material";
+
+export default function ValidationExample() {
+  const [checked, setChecked] = React.useState(false);
+  const [error, setError] = React.useState(false);
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    if (!checked) {
+      setError(true);
+      return;
+    }
+    setError(false);
+    // Handle form submission
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <FormControl error={error}>
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={checked}
+              onChange={(e) => setChecked(e.target.checked)}
+            />
+          }
+          label="I accept the terms and conditions"
+        />
+        {error && (
+          <FormHelperText>You must accept the terms to continue</FormHelperText>
+        )}
+      </FormControl>
+    </form>
+  );
+}
+```
+
+Common validation scenarios include:
+
+- Required field validation
+- Minimum selection requirements
+- Group validation rules
+
+## Advanced Customization
+
+### Custom Styling
+
+You can create your own styled checkbox using the `styled` API:
+
+```tsx
+import { styled } from "@mui/material/styles";
+import Checkbox from "@mui/material/Checkbox";
+
+const CustomCheckbox = styled(Checkbox)`
+  &.MuiCheckbox-root {
+    color: #666;
+  }
+  &.Mui-checked {
+    color: #2196f3;
+  }
+`;
+
+export default function StyledExample() {
+  return <CustomCheckbox defaultChecked />;
+}
+```
+
+### Custom Icons
+
+You can also use custom icons for your checkboxes:
+
+```tsx
+import FavoriteIcon from "@mui/icons-material/Favorite";
+import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
+
+export default function CustomIconExample() {
+  return (
+    <Checkbox
+      icon={<FavoriteBorderIcon />}
+      checkedIcon={<FavoriteIcon />}
+      sx={{ color: "pink" }}
+    />
+  );
+}
+```
+
+These customizations allow you to:
+
+- Match your application's design system
+- Create unique visual elements
+- Improve user experience with custom interactions
 
 ## When to use the Material UI Checkbox
 

diff --git a/documentation/blog/2023-01-04-mui-card.md → documentation/blog/2024-12-26-mui-card.md b/documentation/blog/2023-01-04-mui-card.md → documentation/blog/2024-12-26-mui-card.md
@@ -4,36 +4,51 @@ description: We'll discover the Material UI Card component with examples
 slug: material-ui-card
 authors: doro_onome
 tags: [material-ui, react]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-01-04-mui-card/social.png
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-01-04-mui-card/social-2.png
 hide_table_of_contents: false
 ---
 
 ## Introduction
 
+### Quick Summary: What is Material UI Card?
+
+Think of a Material UI Card as a digital container - like a paper card in real life, but for your website. It's a neat way to show related information in one place. You can put all sorts of things in it: text, pictures, buttons, and more.
+
+Here's what makes Material UI Cards so useful:
+
+- They keep information organized and tidy
+- You can easily add images and other media
+- They're interactive - users can click, expand, or interact with them
+- They look great on both desktop and mobile screens
+- You can style them however you want to match your website
+
+The best part? They're super easy to use, even if you're just starting with React!
+
 Material UI cards are an important part of modern web design. They make it simple for users to access and interact with important information, whether text, images, or a combination of the two. Developers can use Material UI to easily create powerful and interactive cards that integrate seamlessly into their website design. This article will go over the various features, benefits, and applications of Material UI cards to give web developers a thorough understanding of how the component can help them create beautiful and engaging user experiences.
 
 Steps we'll cover:
 
+- [Quick Summary: What is Material UI Card?](#quick-summary-what-is-material-ui-card)
 - [What is Material UI?](#what-is-material-ui)
 - [Getting started with Material UI Card](#getting-started-with-material-ui-card)
 - [Other Material UI Card Variants](#other-material-ui-card-variants)
-  - [Image Cards](#image-cards)
-  - [Outlined Cards](#outlined-cards)
 - [Material UI Card Component Classes](#material-ui-card-component-classes)
 - [Material UI Card Interactions](#material-ui-card-interactions)
 - [Building a simple Blog Layout with React and Material UI Cards](#building-a-simple-blog-layout-with-react-and-material-ui-cards)
+- [Frequently Asked Questions (FAQ)](#frequently-asked-questions-faq)
 
 ## What is Material UI?
 
 Material UI is a React-based UI framework designed to aid in the creation of consistent user interfaces across web and mobile applications. It includes a large library of components and tools to help developers easily create modern user interfaces.
 
 It provides a comprehensive library of components and tools to help developers create modern user interfaces with ease. Some of which include:
-Input components
-Surface components
-Data Display components
-Navigation components
-Feedback components
-Layout components
+
+- Input components
+- Surface components
+- Data Display components
+- Navigation components
+- Feedback components
+- Layout components
 
 The Material UI Card is an example of the Material UI Surfaces.
 
@@ -545,12 +560,34 @@ Here’s the result:
 
 <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>
+## Frequently Asked Questions (FAQ)
+
+### Can I customize the look of Material UI Cards?
+
+Absolutely! You can change pretty much everything about how a card looks. Colors, shadows, borders, spacing - it's all customizable using the `sx` prop or custom styles.
+
+### Do Material UI Cards work well on mobile devices?
+
+Yes! Cards are responsive by default and will adjust their size based on the screen. Just make sure to set appropriate width values (like maxWidth) to control how they display.
+
+### What can I put inside a Material UI Card?
+
+Almost anything! Common elements include:
+
+- Text content
+- Images and videos
+- Buttons and links
+- Icons
+- Action areas
+- Expandable sections
+
+### Are Material UI Cards accessible?
+
+Yes, they're built with accessibility in mind. They work well with screen readers and can be navigated using a keyboard. Just remember to add proper ARIA labels when needed!
+
+### How do I handle card interactions like clicking or expanding?
+
+It's pretty straightforward! You can add onClick handlers to the Card or CardActionArea components, and use the Collapse component for expandable content. Check out our examples above to see how it works.
 
 ## Conclusion