tee3apps-cms-sdk-react 0.0.8 → 0.0.10

package/README.md

@@ -67,6 +67,85 @@ function App() {
 export default App;
 ```
 
+## 📝 Using PageForm Component
+
+The `PageForm` component allows you to render dynamic forms based on JSON data. It includes built-in validation, form state management, toast notifications, and API submission support.
+
+### 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;
+```
+
+### PageForm with API Submission
+
+You can configure the form to automatically submit to an API endpoint:
+
+```jsx
+<PageForm 
+  jsonData={formData}
+  isUrl={true}
+  method="POST"
+  url="https://api.example.com/submit"
+  onSubmit={(responseData) => {
+    // This callback is called after successful API submission
+    // responseData contains the API response
+    console.log('API Response:', responseData);
+  }}
+/>
+```
+
+**API Submission Props:**
+- `isUrl` (boolean): Set to `true` to enable API submission
+- `method` ('POST' | 'GET'): HTTP method to use (defaults to 'POST')
+- `url` (string): API endpoint URL
+- `onSubmit` (function): Callback function called after submission (receives API response or error)
+
+**Note:** When `isUrl` is `false` or not provided, the form uses the `onSubmit` callback with form data directly.
+
 ## 📊 Data Structure
 
 The package expects your `pageElements` data to follow this structure:
@@ -239,7 +318,304 @@ 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": {
+                    "isScroll": false,
+                    "isVisible": true,
+                    "top": "0px",
+                    "bottom": "0px",
+                    "flexView": true
+                },
+                "mobileapp": {
+                    "isScroll": false,
+                    "isVisible": true,
+                    "top": "0px",
+                    "bottom": "0px",
+                    "flexView": true
+                },
+                "tablet": {
+                    "isScroll": false,
+                    "isVisible": true,
+                    "top": "0px",
+                    "bottom": "0px",
+                    "flexView": true
+                }
+            }
+        },
+        "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.) with postal code formatting support
+- **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
+- **TermsAndCondition**: Terms and conditions checkbox with modal popup for conditions
+- **ButtonField**: Form buttons with submit, reset, and cancel types
+
+### Form Features
+
+- **Automatic Validation**: Required fields are validated automatically
+- **Toast Notifications**: Custom toast notifications for validation errors and form actions
+- **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
+- **API Submission**: Built-in support for submitting forms directly to API endpoints
+- **Button Types**: Support for submit, reset, and cancel button types
+- **Form Reset/Cancel**: Built-in handlers for resetting or cancelling forms
+
+### Form Submission
+
+#### Using Callback (Default)
+
+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)
+  });
+};
+```
+
+#### Using API Submission
+
+When `isUrl={true}`, the form automatically submits to the specified API:
+
+```jsx
+<PageForm 
+  jsonData={formData}
+  isUrl={true}
+  method="POST"
+  url="https://api.example.com/submit"
+  onSubmit={(responseData) => {
+    // Called after successful API submission
+    // responseData contains the API response
+    console.log('Success:', responseData);
+  }}
+/>
+```
+
+**API Submission Behavior:**
+- **POST requests**: Form data is sent in the request body as JSON
+- **GET requests**: Form data is appended as query parameters
+- **Success**: Shows success toast and calls `onSubmit` with response data
+- **Error**: Shows error toast and calls `onSubmit` with error information
+
+### Button Types
+
+Buttons support three types: `submit`, `reset`, and `cancel`:
+
+```json
+{
+  "name": "ButtonField",
+  "props": {
+    "text": {
+      "all": "Submit",
+      "en-IN": "Submit"
+    },
+    "buttonType": "submit",
+    "disabled": false,
+    "mode": {
+      "web": {
+        "radius": "5px",
+        "bgColor": "#3498db",
+        "textstyle": {
+          "fontSize": 16,
+          "fontColor": "#ffffff",
+          "fontStyle": {
+            "isBold": false,
+            "isItalic": false,
+            "isUnderLine": false,
+            "isStrikeThrough": false
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+**Button Types:**
+- `submit`: Triggers form submission (shows "Submitting..." during API calls)
+- `reset`: Resets all form fields and validation errors
+- `cancel`: Cancels the form (same as reset, can be customized)
+
+### Field Component Props
+
+#### InputField
+- `helperText`: Used as placeholder text
+- `format`: "Postalcode" for postal code formatting
+- `postaltype`: "State" for US postal code formatting
+- `textArea`: `true` to render as textarea
+- `minLength` / `maxLength`: Length constraints
+
+#### NumberField
+- `helperText`: Used as placeholder text
+- `termsandcondition`: HTML text displayed below input
+- `onText` / `offText`: Status text displayed
+
+#### RadioField
+- `helperText`: Displayed in parentheses after the label (e.g., "Label (helperText)")
 
+#### TermsAndCondition
+- `termsText`: Clickable terms text (HTML supported)
+- `conditionText`: Conditions displayed in modal popup (HTML supported)
+- `isRequired`: Whether checkbox is required
+- `checked`: Initial checked state
 
 ## 📄 License
 
@@ -251,5 +627,4 @@ If you encounter any issues or have questions, please create an issue on GitHub
 
 ---
 
-Built for developers who need dynamic page rendering capabilities.
-=======
+Built for developers who need dynamic page rendering capabilities.

package/dist/index.d.ts

@@ -109,6 +109,15 @@ type ComponentProps = {
     disabled?: boolean;
     bgColor?: string;
     radius?: string;
+    conditionText?: {
+        all?: string;
+    };
+    termsText?: {
+        all?: string;
+    };
+    isRequired?: boolean;
+    checked?: boolean;
+    buttonType?: 'submit' | 'reset' | 'cancel';
 };
 type Component = {
     name: string;
@@ -187,6 +196,9 @@ type Row = {
 interface PageFormProps {
     jsonData: Row[];
     onSubmit?: (data: Record<string, any>) => void;
+    isUrl?: boolean;
+    method?: 'POST' | 'GET' | 'post' | 'get';
+    url?: string;
 }
 declare const PageForm: React.FC<PageFormProps>;