tee3apps-cms-sdk-react 0.0.20 → 0.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tee3apps-cms-sdk-react",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "Uses JSON to dynamically generate and render UI pages in a website",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/Page.tsx

@@ -63,7 +63,7 @@ const Page = ({data}:any) => {
           key={boxIndex} 
           props={box.props} 
           deviceMode={deviceMode}
-          autoAdjustForImages={true}
+          autoAdjustForImages={false}
         >
           {box.components.map((component: { name: string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined; props: TextProps | LinkProps | ImageComponentProps | GroupProductComponentProps | VideoComponentProps | GroupBrandComponentProps | LottieComponentProps | CarouselProps | NavigationProps | GroupVideoListProps | GroupCategoryComponentProps | GroupImageListProps | TabComponentProps | RichTextComponentProps; }, compIndex: React.Key | null | undefined) => {
             const getCurrentBoxHeight = () => {
@@ -103,7 +103,7 @@ const Page = ({data}:any) => {
                   return <GroupImageList key={compIndex} props={component.props as GroupImageListProps} deviceMode={deviceMode} />;
                 case 'TabComponent':
                   return <TabComponent key={compIndex} props={component.props as TabComponentProps} deviceMode={deviceMode} />;
-                case 'RichTextComponent':
+                case 'RichTextBoxComponent':
                   return <RichTextComponent key={compIndex} props={component.props as RichTextComponentProps} />;
                   default:
                   return null;

package/src/PageComponents/BoxComponent.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Linodeurl } from '../const';
 
 interface ModeProps {
   isScroll?: boolean;
@@ -23,9 +24,10 @@ interface DeviceModes {
 
 interface BoxProps {
   bgColor: string;
+  bgImage?: string;
   align: React.CSSProperties['alignItems'];
   justify: string;
-  compOrder: string[];
+  compOrder: string | string[];
   bgsize: React.CSSProperties['backgroundSize'];
   layout: string;
   mode: DeviceModes;
@@ -121,6 +123,19 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
   return (typeof align === 'string' && alignMap[align]) || align || 'flex-start'; // Default to flex-start
 };
 
+  // Build background image URL with Linode URL prefix
+  const getBackgroundImageUrl = (): string => {
+    if (!props.bgImage) return 'none';
+    
+    const bgImage = props.bgImage;
+    // If the image URL already starts with http:// or https://, use it as is
+    if (typeof bgImage === 'string' && (bgImage.startsWith('http://') || bgImage.startsWith('https://'))) {
+      return `url(${bgImage})`;
+    }
+    // Otherwise, prepend the Linode URL
+    return `url(${Linodeurl}${bgImage})`;
+  };
+
   // Check if children is empty
   const isEmpty = (children: any): boolean => {
     if (!children) return true;
@@ -129,7 +144,64 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
   };
 
   // Get children as array
-  const childrenArray = React.Children.toArray(children);
+  const originalChildrenArray = React.Children.toArray(children);
+
+  // Parse compOrder and reorder children accordingly
+  const getOrderedChildren = (): React.ReactNode[] => {
+    if (!props.compOrder || originalChildrenArray.length === 0) {
+      return originalChildrenArray;
+    }
+
+    // Parse compOrder - can be string like "2,3,1" or array like ["2","3","1"]
+    let orderArray: string[];
+    if (typeof props.compOrder === 'string') {
+      orderArray = props.compOrder.split(',').map(item => item.trim()).filter(item => item !== '');
+    } else {
+      orderArray = props.compOrder.map(item => String(item).trim()).filter(item => item !== '');
+    }
+
+    // If no valid order, return original order
+    if (orderArray.length === 0) {
+      return originalChildrenArray;
+    }
+
+    // Reorder children based on compOrder
+    // compOrder is 1-indexed (1 = first component, 2 = second component, etc.)
+    const orderedChildren: React.ReactNode[] = [];
+    const usedIndices = new Set<number>();
+    
+    for (const orderIndex of orderArray) {
+      const oneIndexed = parseInt(orderIndex, 10);
+      if (isNaN(oneIndexed) || oneIndexed < 1) {
+        continue; // Skip invalid indices
+      }
+      
+      // Convert from 1-indexed to 0-indexed
+      const zeroIndexed = oneIndexed - 1;
+      
+      // Check if index is valid and not already used
+      if (zeroIndexed >= 0 && zeroIndexed < originalChildrenArray.length && !usedIndices.has(zeroIndexed)) {
+        orderedChildren.push(originalChildrenArray[zeroIndexed]);
+        usedIndices.add(zeroIndexed);
+      }
+    }
+
+    // Add any remaining children that weren't in compOrder (in their original order)
+    for (let i = 0; i < originalChildrenArray.length; i++) {
+      if (!usedIndices.has(i)) {
+        orderedChildren.push(originalChildrenArray[i]);
+      }
+    }
+
+    // If we got no valid children, return original order
+    if (orderedChildren.length === 0) {
+      return originalChildrenArray;
+    }
+
+    return orderedChildren;
+  };
+
+  const childrenArray = getOrderedChildren();
   
   // Layout styles
   const rowLayout = {
@@ -145,11 +217,15 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
   const colLayout = {
     display: 'flex',
     flexDirection: 'column' as const,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: '5px',
+    alignItems: 'stretch',
+    justifyContent: 'stretch',
+    padding: 0,
     boxSizing: 'border-box' as const,
-    flex: 1
+    flex: 1,
+    minWidth: 0,
+    minHeight: 0,
+    overflow: 'hidden' as const,
+    position: 'relative' as const
   };
 
   // Render layout based on the layout prop
@@ -184,7 +260,6 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
                     alignItems:props.align,
                     
           }}>
-            {/* {children} */}
              <div style={{
                   
                   display:"flex",
@@ -192,7 +267,7 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
                   alignItems:props.align,
 height: "100%" 
                  }}>
-                  <div style={{width:'100%'}}> {children}</div>
+                  <div style={{width:'100%'}}> {childrenArray}</div>
                  </div>
           </div>
         );
@@ -201,7 +276,7 @@ height: "100%"
   return (
     <div style={{ 
       display: 'flex', 
-      flexDirection: 'column', // Changed to column to stack vertically
+      flexDirection: 'row', // Display in row (side by side)
       width: '100%',
       height: '100%',
       margin: 0,
@@ -213,13 +288,15 @@ height: "100%"
           key={`BOX-LAYOUT2-${idx}`}
           style={{
             ...colLayout,
-            minHeight: "50%",
-            width: '100%',
+            minWidth: "50%",
+            width: '50%',
             flex: 1
           }}
         >
           {!isEmpty(childrenArray[idx]) ? (
-            childrenArray[idx]
+            <div style={{ width: '100%', height: '100%', position: 'relative' }}>
+              {childrenArray[idx]}
+            </div>
           ) : (
             <div style={{ textAlign: 'center', color: '#999' }}>
               No component here
@@ -231,19 +308,22 @@ height: "100%"
   );
       case "layout3":
         return (
-          <div style={{ ...rowLayout, flexDirection: 'column', height: '100%' }}>
-            <div style={{ ...rowLayout, flex: 1 }}>
+          <div style={{ ...rowLayout, flexDirection: 'column', height: '100%', minHeight: 0 }}>
+            <div style={{ ...rowLayout, flex: 1, minHeight: 0 }}>
               {[0, 1].map((idx) => (
                 <div
                   key={`BOX-LAYOUT3-TOP-${idx}`}
                   style={{
                     ...colLayout,
                     minHeight: "50px",
-                    flex: 1
+                    flex: 1,
+                    width: '50%'
                   }}
                 >
                   {!isEmpty(childrenArray[idx]) ? (
-                    childrenArray[idx]
+                    <div style={{ width: '100%', height: '100%', position: 'relative' }}>
+                      {childrenArray[idx]}
+                    </div>
                   ) : (
                     <div style={{ textAlign: 'center', color: '#999' }}>
                       No component here
@@ -252,18 +332,21 @@ height: "100%"
                 </div>
               ))}
             </div>
-            <div style={{ ...rowLayout, flex: 1 }}>
+            <div style={{ ...rowLayout, flex: 1, minHeight: 0 }}>
               {[2, 3].map((idx) => (
                 <div
                   key={`BOX-LAYOUT3-BOTTOM-${idx}`}
                   style={{
                     ...colLayout,
                     minHeight: "50px",
-                    flex: 1
+                    flex: 1,
+                    width: '50%'
                   }}
                 >
                   {!isEmpty(childrenArray[idx]) ? (
-                    childrenArray[idx]
+                    <div style={{ width: '100%', height: '100%', position: 'relative' }}>
+                      {childrenArray[idx]}
+                    </div>
                   ) : (
                     <div style={{ textAlign: 'center', color: '#999' }}>
                       No component here
@@ -286,7 +369,9 @@ height: "100%"
               }}
             >
               {!isEmpty(childrenArray[0]) ? (
-                childrenArray[0]
+                <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'stretch', justifyContent: 'stretch' }}>
+                  {childrenArray[0]}
+                </div>
               ) : (
                 <div style={{ textAlign: 'center', color: '#999' }}>
                   No component here
@@ -304,7 +389,9 @@ height: "100%"
                   }}
                 >
                   {!isEmpty(childrenArray[idx]) ? (
-                    childrenArray[idx]
+                    <div style={{ width: '100%', height: '100%', position: 'relative' }}>
+                      {childrenArray[idx]}
+                    </div>
                   ) : (
                     <div style={{ textAlign: 'center', color: '#999' }}>
                       No component here
@@ -330,7 +417,9 @@ height: "100%"
                   }}
                 >
                   {!isEmpty(childrenArray[idx]) ? (
-                    childrenArray[idx]
+                    <div style={{ width: '100%', height: '100%', position: 'relative' }}>
+                      {childrenArray[idx]}
+                    </div>
                   ) : (
                     <div style={{ textAlign: 'center', color: '#999' }}>
                       No component here
@@ -347,7 +436,9 @@ height: "100%"
               }}
             >
               {!isEmpty(childrenArray[2]) ? (
-                childrenArray[2]
+                <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'stretch', justifyContent: 'stretch' }}>
+                  {childrenArray[2]}
+                </div>
               ) : (
                 <div style={{ textAlign: 'center', color: '#999' }}>
                   No component here
@@ -358,15 +449,22 @@ height: "100%"
         );
 
       default:
-        return children;
+        return childrenArray;
     }
   };
 
+  const backgroundImageUrl = getBackgroundImageUrl();
+  const hasBackgroundImage = backgroundImageUrl !== 'none';
+
   return (
     <div 
       style={{
-        backgroundColor: props.bgColor,
+        // bgImage takes priority over bgColor
+        backgroundColor: hasBackgroundImage ? 'transparent' : props.bgColor,
+        backgroundImage: backgroundImageUrl,
         backgroundSize: props.bgsize || 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
         height: getBoxHeight(),
         minHeight: autoAdjustForImages ? 'auto' : (currentMode.height || 'auto'),
         borderRadius: currentMode.radius || '0px',