tee3apps-cms-sdk-react 0.0.19 → 0.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tee3apps-cms-sdk-react",
-  "version": "0.0.19",
+  "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;
@@ -71,63 +73,18 @@ const BoxComponent: React.FC<BoxComponentProps> = ({
     return null;
   }
 
-  // Check if children contain image/video components for dynamic height
-  const hasMediaComponents = (): boolean => {
-    const checkChild = (child: React.ReactNode): boolean => {
-      if (!React.isValidElement(child)) return false;
-      
-      const componentName = (child.type as any)?.name || (child.type as any)?.displayName;
-      const mediaComponents = [
-        'ImageComponent',
-        'CarouselComponent',
-        'VideoComponent',
-        'TabComponent',
-        'GroupImageComponent',
-        'GroupVideoComponent'
-      ];
-      
-      if (componentName && mediaComponents.includes(componentName)) {
-        return true;
-      }
-      
-      // Check nested children
-      if (child.props && typeof child.props === 'object' && 'children' in child.props) {
-        const children = (child.props as any).children;
-        if (children) {
-          const nestedChildren = React.Children.toArray(children);
-          return nestedChildren.some(checkChild);
-        }
-      }
-      
-      return false;
-    };
-    
-    return React.Children.toArray(children).some(checkChild);
-  };
-
-  // Check if we have media components
-  const hasMedia = hasMediaComponents();
-
-  const getBoxHeight = (): string | undefined => {
+  const getBoxHeight = (): string => {
     if (!autoAdjustForImages) {
       return currentMode.height || 'auto';
     }
     
-    if (hasMedia) {
-      return 'auto';
-    }
-    
-    return currentMode.height || 'auto';
-  };
-
-  // Get dynamic minHeight based on media components
-  const getBoxMinHeight = (): string | undefined => {
-    if (!autoAdjustForImages) {
-      return currentMode.height || 'auto';
-    }
+    const hasImageComponent = React.Children.toArray(children).some(child => 
+      React.isValidElement(child) && 
+      (child.type as any)?.name === 'ImageComponent' || 'CarouselComponent'
+    );
     
-    if (hasMedia) {
-      return undefined; // Remove minHeight constraint for media components
+    if (hasImageComponent) {
+      return 'auto';
     }
     
     return currentMode.height || 'auto';
@@ -166,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;
@@ -174,17 +144,71 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
   };
 
   // Get children as array
-  const childrenArray = React.Children.toArray(children);
-  
-  // Check if we should use auto height for layouts
-  const useAutoHeight = autoAdjustForImages && hasMedia;
+  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 = {
     display: 'flex',
     flexDirection: 'row' as const,
     width: '100%',
-    height: useAutoHeight ? 'auto' : '100%',
+    height: '100%',
     margin: 0,
     padding: 0,
     boxSizing: 'border-box' as const
@@ -193,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: useAutoHeight ? 'none' : 1
+    flex: 1,
+    minWidth: 0,
+    minHeight: 0,
+    overflow: 'hidden' as const,
+    position: 'relative' as const
   };
 
   // Render layout based on the layout prop
@@ -224,7 +252,7 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
         return (
           <div style={{ 
             width: "100%",
-                    height: useAutoHeight ? 'auto' : "100%",
+                    height: "100%",
                     minHeight: "50px",
                     boxSizing: "border-box",
                     overflow: "hidden",
@@ -232,15 +260,14 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
                     alignItems:props.align,
                     
           }}>
-            {/* {children} */}
              <div style={{
                   
                   display:"flex",
                   justifyContent:props.justify,
                   alignItems:props.align,
-                  height: useAutoHeight ? 'auto' : "100%"
+height: "100%" 
                  }}>
-                  <div style={{width:'100%'}}> {children}</div>
+                  <div style={{width:'100%'}}> {childrenArray}</div>
                  </div>
           </div>
         );
@@ -249,9 +276,9 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
   return (
     <div style={{ 
       display: 'flex', 
-      flexDirection: 'column', // Changed to column to stack vertically
+      flexDirection: 'row', // Display in row (side by side)
       width: '100%',
-      height: useAutoHeight ? 'auto' : '100%',
+      height: '100%',
       margin: 0,
       padding: 0,
       boxSizing: 'border-box'
@@ -261,13 +288,15 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
           key={`BOX-LAYOUT2-${idx}`}
           style={{
             ...colLayout,
-            minHeight: useAutoHeight ? "50px" : "50%",
-            width: '100%',
-            flex: useAutoHeight ? 'none' : 1
+            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
@@ -279,19 +308,22 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
   );
       case "layout3":
         return (
-          <div style={{ ...rowLayout, flexDirection: 'column' }}>
-            <div style={{ ...rowLayout, flex: useAutoHeight ? 'none' : 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: useAutoHeight ? 'none' : 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
@@ -300,18 +332,21 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
                 </div>
               ))}
             </div>
-            <div style={{ ...rowLayout, flex: useAutoHeight ? 'none' : 1 }}>
+            <div style={{ ...rowLayout, flex: 1, minHeight: 0 }}>
               {[2, 3].map((idx) => (
                 <div
                   key={`BOX-LAYOUT3-BOTTOM-${idx}`}
                   style={{
                     ...colLayout,
                     minHeight: "50px",
-                    flex: useAutoHeight ? 'none' : 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
@@ -330,29 +365,33 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
               style={{
                 ...colLayout,
                 minHeight: "50px",
-                flex: useAutoHeight ? 'none' : 1
+                flex: 1
               }}
             >
               {!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
                 </div>
               )}
             </div>
-            <div style={{ display: 'flex', flexDirection: 'column', flex: useAutoHeight ? 'none' : 1 }}>
+            <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
               {[1, 2].map((idx) => (
                 <div
                   key={`BOX-LAYOUT4-${idx}`}
                   style={{
                     ...colLayout,
                     minHeight: "50px",
-                    flex: useAutoHeight ? 'none' : 1
+                    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
@@ -367,18 +406,20 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
       case "layout5":
         return (
           <div style={rowLayout}>
-            <div style={{ display: 'flex', flexDirection: 'column', flex: useAutoHeight ? 'none' : 1 }}>
+            <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
               {[0, 1].map((idx) => (
                 <div
                   key={`BOX-LAYOUT5-${idx}`}
                   style={{
                     ...colLayout,
                     minHeight: "50px",
-                    flex: useAutoHeight ? 'none' : 1
+                    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
@@ -391,11 +432,13 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
               style={{
                 ...colLayout,
                 minHeight: "50px",
-                flex: useAutoHeight ? 'none' : 1
+                flex: 1
               }}
             >
               {!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
@@ -406,17 +449,24 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
         );
 
       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: getBoxMinHeight(),
+        minHeight: autoAdjustForImages ? 'auto' : (currentMode.height || 'auto'),
         borderRadius: currentMode.radius || '0px',
         width: `calc(${(colspan / 12) * 100}% - 1px)`,
         maxWidth: `calc(${(colspan / 12) * 100}% - 1px)`,