tee3apps-cms-sdk-react 0.0.9 → 0.0.10

package/README.md

@@ -69,7 +69,7 @@ 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, and toast notifications.
+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
 
@@ -120,6 +120,32 @@ function FormPage() {
 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:
@@ -464,23 +490,30 @@ The `PageForm` component expects the same structure as `Page`, but with form-spe
 
 ### Supported Form Field Types
 
-- **InputField**: Text input fields (text, email, password, etc.)
+- **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
+- **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
@@ -498,6 +531,92 @@ const handleFormSubmit = (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
 
 This project is licensed under the MIT License.

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>;