tee3apps-cms-sdk-react 0.0.6 → 0.0.7

package/README.md

@@ -5,7 +5,10 @@ A powerful and flexible React component library for dynamically rendering pages
 ## 🚀 Features
 
 - **Dynamic Page Rendering**: Convert JSON data into fully functional web pages
+- **Dynamic Form Rendering**: Convert JSON data into interactive forms with validation
 - **Flexible Element Support**: Support for various page elements (text, images, buttons, forms, etc.)
+- **Form Field Support**: Multiple form field types (text, number, date, select, radio, boolean)
+- **Form Validation**: Built-in required field validation with custom toast notifications
 - **Easy Integration**: Simple drop-in component with minimal configuration
 - **TypeScript Support**: Full TypeScript support with comprehensive type definitions
 - **Customizable Styling**: Built-in themes with customization options
@@ -30,7 +33,7 @@ Here's a simple example of how to use the Dynamic Page Renderer:
 
 ```jsx
 import React, { useState, useEffect } from 'react';
-import { Page } from 'tee3apps-cms-sdk-react';
+import { Page, PageForm } from 'tee3apps-cms-sdk-react';
 
 function App() {
   const [pageData, setPageData] = useState(null);
@@ -67,7 +70,60 @@ function App() {
 export default App;
 ```
 
-## 📊 Data Structure
+## 📝 Using PageForm Component
+
+The `PageForm` component allows you to render dynamic forms based on JSON data. It includes built-in validation, form state management, and toast notifications.
+
+### Basic PageForm Usage
+
+```jsx
+import React, { useState, useEffect } from 'react';
+import { PageForm } from 'tee3apps-cms-sdk-react';
+
+function FormPage() {
+  const [formData, setFormData] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchFormData = async () => {
+      try {
+        const response = await fetch('/api/form-data');
+        const data = await response.json();
+        const formElements = data?.data?.formElements;
+        
+        setFormData(formElements);
+      } catch (error) {
+        console.error('Error fetching form data:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchFormData();
+  }, []);
+
+  const handleFormSubmit = (formValues) => {
+    console.log('Form submitted with values:', formValues);
+    // Handle form submission (e.g., send to API)
+    // Form values are automatically transformed to use field names instead of codes
+  };
+
+  if (loading) return <div>Loading...</div>;
+
+  return (
+    <div className="form-page">
+      <PageForm 
+        jsonData={formData} 
+        onSubmit={handleFormSubmit}
+      />
+    </div>
+  );
+}
+
+export default FormPage;
+```
+
+## 📊 Page Component Data Structure
 
 The package expects your `pageElements` data to follow this structure:
 
@@ -239,7 +295,193 @@ The package expects your `pageElements` data to follow this structure:
 ]
 ```
 
+## 📋 PageForm Component Data Structure
+
+The `PageForm` component expects the same structure as `Page`, but with form-specific components. Here's an example with form fields:
+
+```json
+[
+    {
+        "name": "Row",
+        "props": {
+            "minHeight": "auto",
+            "bgColor": "#ffffff",
+            "bgImage": "",
+            "align": "initial",
+            "justify": "flex-start",
+            "nowrap": false,
+            "bgsize": "cover",
+            "mode": {
+                "web": {
+                    "isScroll": false,
+                    "isVisible": true,
+                    "top": "0px",
+                    "bottom": "0px",
+                    "flexView": true
+                },
+                "mobileweb": { ... },
+                "mobileapp": { ... },
+                "tablet": { ... }
+            }
+        },
+        "columns": [
+            {
+                "name": "Box",
+                "props": {
+                    "bgColor": "#ffffff",
+                    "align": "initial",
+                    "justify": "flex-start",
+                    "mode": {
+                        "web": {
+                            "colspan": 12,
+                            "isVisible": true,
+                            "height": "auto"
+                        }
+                    }
+                },
+                "components": [
+                    {
+                        "name": "InputField",
+                        "props": {
+                            "code": "email",
+                            "name": {
+                                "all": "Email Address"
+                            },
+                            "required": true,
+                            "type": "email",
+                            "placeholder": {
+                                "all": "Enter your email"
+                            }
+                        },
+                        "type": []
+                    },
+                    {
+                        "name": "NumberField",
+                        "props": {
+                            "code": "age",
+                            "name": {
+                                "all": "Age"
+                            },
+                            "required": false,
+                            "min": 18,
+                            "max": 100
+                        },
+                        "type": []
+                    },
+                    {
+                        "name": "SelectField",
+                        "props": {
+                            "code": "country",
+                            "name": {
+                                "all": "Country"
+                            },
+                            "required": true,
+                            "multiSelect": false,
+                            "lov": [
+                                {
+                                    "id": "1",
+                                    "code": "us",
+                                    "name": "United States"
+                                },
+                                {
+                                    "id": "2",
+                                    "code": "uk",
+                                    "name": "United Kingdom"
+                                }
+                            ]
+                        },
+                        "type": []
+                    },
+                    {
+                        "name": "DateField",
+                        "props": {
+                            "code": "birthdate",
+                            "name": {
+                                "all": "Date of Birth"
+                            },
+                            "required": true,
+                            "format": "YYYY-MM-DD"
+                        },
+                        "type": []
+                    },
+                    {
+                        "name": "RadioField",
+                        "props": {
+                            "code": "gender",
+                            "name": {
+                                "all": "Gender"
+                            },
+                            "required": true,
+                            "lov": [
+                                {
+                                    "id": "1",
+                                    "code": "male",
+                                    "name": "Male"
+                                },
+                                {
+                                    "id": "2",
+                                    "code": "female",
+                                    "name": "Female"
+                                }
+                            ]
+                        },
+                        "type": []
+                    },
+                    {
+                        "name": "BooleanField",
+                        "props": {
+                            "code": "terms",
+                            "name": {
+                                "all": "I agree to the terms and conditions"
+                            },
+                            "required": true,
+                            "onText": "Yes",
+                            "offText": "No"
+                        },
+                        "type": []
+                    }
+                ]
+            }
+        ]
+    }
+]
+```
+
+### Supported Form Field Types
 
+- **InputField**: Text input fields (text, email, password, etc.)
+- **NumberField**: Numeric input with min/max validation
+- **DateField**: Date picker with format support
+- **SelectField**: Dropdown select with single or multi-select
+- **RadioField**: Radio button group
+- **BooleanField**: Checkbox or toggle switch
+
+### Form Features
+
+- **Automatic Validation**: Required fields are validated automatically
+- **Toast Notifications**: Custom toast notifications for validation errors
+- **Field Name Mapping**: Form values are automatically transformed from codes to field names
+- **Responsive Design**: Forms adapt to different device modes (web, mobileweb, mobileapp, tablet)
+- **Error Highlighting**: Invalid fields are visually highlighted
+
+### Form Submission
+
+The `onSubmit` callback receives form data with field names as keys:
+
+```jsx
+const handleFormSubmit = (formValues) => {
+  // formValues will have field names as keys
+  // Example: { "Email Address": "user@example.com", "Country": "us" }
+  console.log(formValues);
+  
+  // Submit to your API
+  fetch('/api/submit-form', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(formValues)
+  });
+};
+```
 
 ## 📄 License