tee3apps-cms-sdk-react 0.0.5 → 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
 

package/dist/index.d.ts

@@ -1,5 +1,193 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
 
 declare const Page: ({ data }: any) => react_jsx_runtime.JSX.Element;
 
-export { Page as default };
+type LOVItem = {
+    id: string;
+    code: string;
+    name: string;
+};
+interface TextStyle {
+    headingTag: string;
+    fontSize: number;
+    fontStyle: {
+        isBold: boolean;
+        isItalic: boolean;
+        isUnderLine: boolean;
+        isStrikeThrough: boolean;
+    };
+    fontColor: string;
+    textAlign: string;
+    fontFamily: string;
+}
+interface ImageData {
+    isDynamic: boolean;
+    shape: string;
+    url: string;
+    alt: string;
+}
+interface ImageModeProps {
+    borderRadius: number;
+    width: string;
+    height: string;
+    bgColor?: string;
+}
+interface DeviceModes {
+    web: ImageModeProps | ButtonModeProps;
+    mobileweb: ImageModeProps | ButtonModeProps;
+    mobileapp: ImageModeProps | ButtonModeProps;
+    tablet: ImageModeProps | ButtonModeProps;
+}
+type ComponentProps = {
+    columnSize?: string;
+    name?: {
+        all?: string;
+    };
+    type?: string;
+    required?: boolean;
+    helperText?: string;
+    multiSelect?: boolean;
+    lov?: LOVItem[];
+    pattern?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    suffix?: string;
+    format?: string;
+    postaltype?: string;
+    textArea?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    termsandcondition?: {
+        all?: string;
+    };
+    onText?: string;
+    offText?: string;
+    code?: string;
+    pd_id?: {
+        _id: string;
+        code: string;
+        name: object;
+        pd_type: string;
+    };
+    images?: {
+        all: ImageData;
+    };
+    linktype?: string;
+    link?: {
+        url: string;
+        target: string;
+    };
+    mode?: DeviceModes;
+    product?: {
+        _id: string;
+        code: string;
+        name: object;
+        pd_type: string;
+        pd_id?: any;
+        product_data?: any;
+    };
+    page?: {
+        _id: string;
+        code: string;
+        name: object;
+        pg_type: string;
+        facet_params: any[];
+        track_params: any[];
+    };
+    tag?: {
+        _id: string;
+        tag_id?: any;
+        code: string;
+        name: object;
+        tagtype: string;
+    };
+    text?: any;
+    style?: TextStyle;
+    height?: string;
+    disabled?: boolean;
+    bgColor?: string;
+    radius?: string;
+};
+type Component = {
+    name: string;
+    props: ComponentProps;
+    type: any[];
+};
+type Box = {
+    name: string;
+    props: {
+        bgColor: string;
+        bgImage: any;
+        align: string;
+        justify: string;
+        compOrder: string;
+        bgsize: string;
+        layout: string;
+        mode: {
+            web: {
+                colspan: number;
+                isVisible: boolean;
+                height: string;
+                top: string;
+                bottom: string;
+                left: string;
+                right: string;
+                radius: string;
+            };
+            mobileweb: any;
+            mobileapp: any;
+            tablet: any;
+        };
+    };
+    components: Component[];
+};
+interface ButtonModeProps {
+    radius?: string;
+    borderRadius?: number;
+    bgColor?: string;
+    textstyle?: {
+        fontSize: number;
+        fontColor: string;
+        fontStyle: {
+            isBold: boolean;
+            isItalic: boolean;
+            isUnderLine: boolean;
+            isStrikeThrough: boolean;
+        };
+    };
+}
+type Row = {
+    name: string;
+    props: {
+        minHeight: string;
+        bgColor: string;
+        bgImage: string;
+        align: string;
+        justify: string;
+        nowrap: boolean;
+        bgsize: string;
+        mode: {
+            web: {
+                isScroll: boolean;
+                isVisible: boolean;
+                top: string;
+                bottom: string;
+                flexView: boolean;
+            };
+            mobileweb: any;
+            mobileapp: any;
+            tablet: any;
+        };
+    };
+    columns: Box[];
+};
+
+interface PageFormProps {
+    jsonData: Row[];
+    onSubmit?: (data: Record<string, any>) => void;
+}
+declare const PageForm: React.FC<PageFormProps>;
+
+export { Page, PageForm };