tee3apps-cms-sdk-react 0.0.1

package/.env

@@ -0,0 +1,11 @@
+  VITE_API_BASEURL='http://172.235.15.58:8000/api/v1'
+#VITE_API_BASEURL='http://localhost:8000/api/v1'
+VITE_API_BASEURLJOB='http://localhost:9000/api/v1'
+VITE_AUTH_PREFIX='PIM_TOKEN'
+VITE_HASHKEY='tee3apps'
+VITE_OWNERCODE='TEE3-0003'
+VITE_FRONTEND_BASEURL='http://localhost:3000'
+VITE_REGION='in-maa-1'
+VITE_ENDPOINT='https://in-maa-1.linodeobjects.com'
+VITE_ACCESS_KEY_ID='FQ6XNSMYNKNTPX5UPYZG'
+VITE_SECRET_ACCESS_KEY='SCU0BwLkVJK6w6VyGUUNTfTRzTqXOe9hToRAy6Nq'

package/README.md

@@ -0,0 +1,255 @@
+# Dynamic Page Renderer
+
+A powerful and flexible React component library for dynamically rendering pages based on API data. Transform your JSON page structure into beautiful, interactive web pages with minimal setup.
+
+## 🚀 Features
+
+- **Dynamic Page Rendering**: Convert JSON data into fully functional web pages
+- **Flexible Element Support**: Support for various page elements (text, images, buttons, forms, etc.)
+- **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
+- **Responsive Design**: Mobile-first approach with responsive layouts
+- **Performance Optimized**: Efficient rendering with minimal re-renders
+
+## 📦 Installation
+
+```bash
+npm install page-render/react
+```
+
+or with yarn:
+
+```bash
+yarn add page-render/react
+```
+
+## 🔧 Basic Usage
+
+Here's a simple example of how to use the Dynamic Page Renderer:
+
+```jsx
+import React, { useState, useEffect } from 'react';
+import { Page } from 'page-render/react';
+
+function App() {
+  const [pageData, setPageData] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchPageData = async () => {
+      try {
+        const response = await fetch('/api/page-data');
+        const data = await response.json();
+        const pageElements = data?.data?.pageElements;
+        
+        console.log('Fetched pageElements:', pageElements);
+        setPageData(pageElements);
+      } catch (error) {
+        console.error('Error fetching page data:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchPageData();
+  }, []);
+
+  if (loading) return <div>Loading...</div>;
+
+  return (
+    <div className="app">
+      <Page data={pageData} />
+    </div>
+  );
+}
+
+export default App;
+```
+
+## 📊 Data Structure
+
+The package expects your `pageElements` data to follow this structure:
+
+```json
+[
+    {
+        "name": "Row",
+        "props": {
+            "minHeight": "280px",
+            "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",
+                    "bgImage": {},
+                    "align": "initial",
+                    "justify": "flex-start",
+                    "compOrder": "1,2,3,4",
+                    "bgsize": "cover",
+                    "layout": "layout1",
+                    "mode": {
+                        "web": {
+                            "colspan": 12,
+                            "isVisible": true,
+                            "height": "279px",
+                            "top": "0px",
+                            "bottom": "0px",
+                            "left": "0px",
+                            "right": "0px",
+                            "radius": "0px"
+                        },
+                        "mobileweb": {
+                            "colspan": 4,
+                            "isVisible": true,
+                            "height": "279px",
+                            "top": "0px",
+                            "bottom": "0px",
+                            "left": "0px",
+                            "right": "0px",
+                            "radius": "0px"
+                        },
+                        "mobileapp": {
+                            "colspan": 4,
+                            "isVisible": true,
+                            "height": "279px",
+                            "top": "0px",
+                            "bottom": "0px",
+                            "left": "0px",
+                            "right": "0px",
+                            "radius": "0px"
+                        },
+                        "tablet": {
+                            "colspan": 4,
+                            "isVisible": true,
+                            "height": "279px",
+                            "top": "0px",
+                            "bottom": "0px",
+                            "left": "0px",
+                            "right": "0px",
+                            "radius": "0px"
+                        }
+                    }
+                },
+                "components": [
+                    {
+                        "name": "ImageComponent",
+                        "props": {
+                            "images": {
+                                "all": {
+                                    "isDynamic": true,
+                                    "shape": "",
+                                    "url": "TEE3-0003/UPLOADS/GROUP/1758084156233.jpg",
+                                    "alt": "Text"
+                                }
+                            },
+                            "mode": {
+                                "web": {
+                                    "borderRadius": 0,
+                                    "width": "auto",
+                                    "height": "auto"
+                                },
+                                "mobileweb": {
+                                    "borderRadius": 0,
+                                    "width": "auto",
+                                    "height": "auto"
+                                },
+                                "mobileapp": {
+                                    "borderRadius": 0,
+                                    "width": "auto",
+                                    "height": "auto"
+                                },
+                                "tablet": {
+                                    "borderRadius": 0,
+                                    "width": "auto",
+                                    "height": "auto"
+                                }
+                            },
+                            "linktype": "NONE",
+                            "link": {
+                                "url": "",
+                                "target": "_blank"
+                            },
+                            "product": {
+                                "_id": "",
+                                "code": "",
+                                "pd_type": "VARIANT"
+                            },
+                            "page": {
+                                "_id": "",
+                                "code": "",
+                                "pg_type": "GENERAL",
+                                "facet_params": [],
+                                "track_params": []
+                            },
+                            "tag": {
+                                "_id": "",
+                                "code": "",
+                                "tagtype": "PRODUCT"
+                            },
+                            "type": []
+                        },
+                        "type": [
+                            {
+                                "id": null
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+]
+```
+
+
+
+## 📄 License
+
+This project is licensed under the MIT License.
+
+## 🐛 Issues and Support
+
+If you encounter any issues or have questions, please create an issue on GitHub with detailed information about your problem.
+
+---
+
+Built for developers who need dynamic page rendering capabilities.
+=======

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const Page: ({ data }: any) => react_jsx_runtime.JSX.Element;
+
+export { Page as default };