material_ui_integration

Material UI Integration bridges Drupal with Google’s Material Design principles using Material-UI, a popular React component library. This module integrates responsive UI components as a Webforms element.

Introduction

Material UI Integration is a Drupal module that connects Google's Material Design with Drupal using Material-UI, a modern React component library. It empowers site builders to create visually engaging, responsive, and interactive interfaces with ease. The module includes seamless integration with Drupal Webforms, allowing Material-UI components to be added to forms and pages without custom code.

Key Features:

Dynamic integration of Material-UI components like sliders, buttons, and more.
Support for custom props and dynamic rendering via React.
Admin configuration options to manage Material UI settings.

Usage Instructions

1. Installation

Place the material_ui_integration folder in web/modules/custom/.
Enable the module:
```
drush en material_ui_integration
```
Clear the cache:
```
drush cr
```

2. Configuration

Navigate to the settings page at Configuration → Development → Material UI Integration Settings.

Enable Material UI Integration: Toggle to enable or disable Material UI features.
Custom CSS Path: Specify a path to override Material-UI styling (optional).

3. Adding Material UI Components to Webforms

Go to Structure → Webforms.
Create or edit a Webform.
Click Add Element and search for Material UI Element.
Configure the element:
- material_ui_component: Enter the name of the Material-UI component (e.g., Slider).
- material_ui_props: Provide component properties in YAML format, e.g.:
```
 material_ui_props: defaultValue: 50 min: 0 max: 100 step: 10 
```
Save the Webform and preview the changes.

4. Customizing Components

Extend the React app to add or modify components:

Edit js/react_app/components/MaterialUIComponent.js to add custom React components.
Rebuild the React app and clear Drupal's cache.

5. Debugging and Troubleshooting

Ensure Material UI libraries are loaded by inspecting the browser’s developer tools.
Check the browser’s console for JavaScript errors.
Clear cache if changes do not reflect:
```
drush cr
```

Example: Adding a Slider to a Webform

Add a Material UI Element to the Webform.
Set material_ui_component to Slider.

Set material_ui_props:

 material_ui_props: defaultValue: 50 min: 0 max: 100 step: 10

Save the Webform and preview the slider.

Feel free to share this structure in the module documentation or project page to assist collaborators!