tee3apps-cms-sdk-react 0.0.18 → 0.0.19

package/package.json

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

package/src/App.css

@@ -22,16 +22,14 @@
 }
 
 .image-box {
- 
-   width: 100%;
-  /* height: 280px; */
+  width: 100%;
   overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  display: block;
+  position: relative;
 }
 
 .fitted-image {
   width: 100%;
-  height: 100%;
+  height: auto;
+  display: block;
 }

package/src/PageComponents/BoxComponent.tsx

@@ -71,23 +71,68 @@ const BoxComponent: React.FC<BoxComponentProps> = ({
     return null;
   }
 
-  const getBoxHeight = (): string => {
+  // 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 => {
     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 (hasImageComponent) {
+    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';
+    }
+    
+    if (hasMedia) {
+      return undefined; // Remove minHeight constraint for media components
+    }
+    
+    return currentMode.height || 'auto';
+  };
+
   // Handle content justification with proper CSS values
 const getJustifyContent = (justify: string): React.CSSProperties['justifyContent'] => {
   if (justify === 'initial') return 'initial';
@@ -131,12 +176,15 @@ 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;
+
   // Layout styles
   const rowLayout = {
     display: 'flex',
     flexDirection: 'row' as const,
     width: '100%',
-    height: '100%',
+    height: useAutoHeight ? 'auto' : '100%',
     margin: 0,
     padding: 0,
     boxSizing: 'border-box' as const
@@ -149,7 +197,7 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
     justifyContent: 'center',
     padding: '5px',
     boxSizing: 'border-box' as const,
-    flex: 1
+    flex: useAutoHeight ? 'none' : 1
   };
 
   // Render layout based on the layout prop
@@ -176,7 +224,7 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
         return (
           <div style={{ 
             width: "100%",
-                    height: "100%",
+                    height: useAutoHeight ? 'auto' : "100%",
                     minHeight: "50px",
                     boxSizing: "border-box",
                     overflow: "hidden",
@@ -190,7 +238,7 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
                   display:"flex",
                   justifyContent:props.justify,
                   alignItems:props.align,
-height: "100%" 
+                  height: useAutoHeight ? 'auto' : "100%"
                  }}>
                   <div style={{width:'100%'}}> {children}</div>
                  </div>
@@ -203,7 +251,7 @@ height: "100%"
       display: 'flex', 
       flexDirection: 'column', // Changed to column to stack vertically
       width: '100%',
-      height: '100%',
+      height: useAutoHeight ? 'auto' : '100%',
       margin: 0,
       padding: 0,
       boxSizing: 'border-box'
@@ -213,9 +261,9 @@ height: "100%"
           key={`BOX-LAYOUT2-${idx}`}
           style={{
             ...colLayout,
-            minHeight: "50%",
+            minHeight: useAutoHeight ? "50px" : "50%",
             width: '100%',
-            flex: 1
+            flex: useAutoHeight ? 'none' : 1
           }}
         >
           {!isEmpty(childrenArray[idx]) ? (
@@ -231,15 +279,15 @@ height: "100%"
   );
       case "layout3":
         return (
-          <div style={{ ...rowLayout, flexDirection: 'column', height: '100%' }}>
-            <div style={{ ...rowLayout, flex: 1 }}>
+          <div style={{ ...rowLayout, flexDirection: 'column' }}>
+            <div style={{ ...rowLayout, flex: useAutoHeight ? 'none' : 1 }}>
               {[0, 1].map((idx) => (
                 <div
                   key={`BOX-LAYOUT3-TOP-${idx}`}
                   style={{
                     ...colLayout,
                     minHeight: "50px",
-                    flex: 1
+                    flex: useAutoHeight ? 'none' : 1
                   }}
                 >
                   {!isEmpty(childrenArray[idx]) ? (
@@ -252,14 +300,14 @@ height: "100%"
                 </div>
               ))}
             </div>
-            <div style={{ ...rowLayout, flex: 1 }}>
+            <div style={{ ...rowLayout, flex: useAutoHeight ? 'none' : 1 }}>
               {[2, 3].map((idx) => (
                 <div
                   key={`BOX-LAYOUT3-BOTTOM-${idx}`}
                   style={{
                     ...colLayout,
                     minHeight: "50px",
-                    flex: 1
+                    flex: useAutoHeight ? 'none' : 1
                   }}
                 >
                   {!isEmpty(childrenArray[idx]) ? (
@@ -282,7 +330,7 @@ height: "100%"
               style={{
                 ...colLayout,
                 minHeight: "50px",
-                flex: 1
+                flex: useAutoHeight ? 'none' : 1
               }}
             >
               {!isEmpty(childrenArray[0]) ? (
@@ -293,14 +341,14 @@ height: "100%"
                 </div>
               )}
             </div>
-            <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
+            <div style={{ display: 'flex', flexDirection: 'column', flex: useAutoHeight ? 'none' : 1 }}>
               {[1, 2].map((idx) => (
                 <div
                   key={`BOX-LAYOUT4-${idx}`}
                   style={{
                     ...colLayout,
                     minHeight: "50px",
-                    flex: 1
+                    flex: useAutoHeight ? 'none' : 1
                   }}
                 >
                   {!isEmpty(childrenArray[idx]) ? (
@@ -319,14 +367,14 @@ height: "100%"
       case "layout5":
         return (
           <div style={rowLayout}>
-            <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
+            <div style={{ display: 'flex', flexDirection: 'column', flex: useAutoHeight ? 'none' : 1 }}>
               {[0, 1].map((idx) => (
                 <div
                   key={`BOX-LAYOUT5-${idx}`}
                   style={{
                     ...colLayout,
                     minHeight: "50px",
-                    flex: 1
+                    flex: useAutoHeight ? 'none' : 1
                   }}
                 >
                   {!isEmpty(childrenArray[idx]) ? (
@@ -343,7 +391,7 @@ height: "100%"
               style={{
                 ...colLayout,
                 minHeight: "50px",
-                flex: 1
+                flex: useAutoHeight ? 'none' : 1
               }}
             >
               {!isEmpty(childrenArray[2]) ? (
@@ -368,7 +416,7 @@ height: "100%"
         backgroundColor: props.bgColor,
         backgroundSize: props.bgsize || 'cover',
         height: getBoxHeight(),
-        minHeight: autoAdjustForImages ? 'auto' : (currentMode.height || 'auto'),
+        minHeight: getBoxMinHeight(),
         borderRadius: currentMode.radius || '0px',
         width: `calc(${(colspan / 12) * 100}% - 1px)`,
         maxWidth: `calc(${(colspan / 12) * 100}% - 1px)`,

package/src/PageComponents/RowComponent.tsx

@@ -61,6 +61,59 @@ const RowComponent: React.FC<RowComponentProps> = ({
     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();
+
+  // Get dynamic height based on media components
+  const getRowHeight = (): string | undefined => {
+    if (hasMedia) {
+      return 'auto';
+    }
+    return currentMode.height;
+  };
+
+  // Get dynamic minHeight based on media components
+  const getRowMinHeight = (): string | undefined => {
+    if (hasMedia) {
+      return undefined; // Remove minHeight constraint for media components
+    }
+    return props.minHeight;
+  };
+
   // Handle content justification with proper CSS values
 const getJustifyContent = (): React.CSSProperties['justifyContent'] => {
   const justifyMap: Record<string, React.CSSProperties['justifyContent']> = {
@@ -81,14 +134,14 @@ const getJustifyContent = (): React.CSSProperties['justifyContent'] => {
   return (
     <div 
       style={{
-        minHeight: props.minHeight,
+        minHeight: getRowMinHeight(),
         backgroundColor: props.bgColor,
         backgroundImage: props.bgImage ? `url(${props.bgImage})` : 'none',
         backgroundSize: props.bgsize,
         backgroundPosition: 'center',
         backgroundRepeat: 'no-repeat',
         width: currentMode.width || '100%',
-        height: currentMode.height,
+        height: getRowHeight(),
         marginTop: currentMode.top,
         marginBottom: currentMode.bottom,
         marginLeft: currentMode.left,

package/src/PageComponents/Visual-Components/CarouselComponent.tsx

@@ -200,7 +200,7 @@ const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
       className="carousel-container"
       style={{
         position: 'relative',
-        height: props.height,
+        width: '100%',
         overflow: 'hidden'
       }}
       onMouseEnter={handleMouseEnter}
@@ -211,7 +211,7 @@ const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
         className="carousel-slides"
         style={{
           display: 'flex',
-          height: '100%',
+          width: '100%',
           transition: `opacity ${props.speed}ms ease`,
           flexDirection: props.vertical ? 'column' : 'row'
         }}
@@ -225,11 +225,9 @@ const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
               className="carousel-slide"
               style={{
                 flex: `0 0 ${100 / slidesToShow}%`,
-                height: props.vertical ? `${100 / slidesToShow}%` : '100%',
+                width: props.vertical ? '100%' : `${100 / slidesToShow}%`,
                 overflow: 'hidden',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
+                display: 'block',
                 cursor: clickable ? 'pointer' : 'default'
               }}
               onClick={clickable ? () => handleSlideClick(slide) : undefined}
@@ -237,7 +235,7 @@ const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
               {slide.sl_type === 'video' ? (
                 <video
                   src={resolveAssetUrl(slide.video?.url)}
-                  style={{ width: '100%', height: '100%', objectFit: props.objectFit as any }}
+                  style={{ width: '100%', height: 'auto', display: 'block' }}
                   autoPlay={props.autoplay}
                   muted
                   loop
@@ -247,7 +245,7 @@ const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
                 <img
                   src={resolveAssetUrl(slide.image?.url)}
                   alt={slide.image?.alt || ''}
-                  style={{ width: '100%', height: '100%', objectFit: props.objectFit as any }}
+                  style={{ width: '100%', height: 'auto', display: 'block' }}
                 />
               )}
             </div>

package/src/PageComponents/Visual-Components/ImageComponent.tsx

@@ -122,7 +122,6 @@ const ImageComponent: React.FC<ImageComponentMainProps> = ({
   };
 
   const currentMode = getCurrentMode();
-  const containerHeight = boxHeight === 'auto' ? 'auto' : boxHeight;
   const link = bannerLink(props);
   const imageUrl = `${Linodeurl}${props.images?.url || props.images?.all?.url}`;
   const altText = props.images.alt || '';
@@ -132,7 +131,9 @@ const ImageComponent: React.FC<ImageComponentMainProps> = ({
       src={imageUrl}
       alt={altText}
       className="fitted-image"
-      style={{ cursor: link ? 'pointer' : 'default' }}
+      style={{ 
+        cursor: link ? 'pointer' : 'default'
+      }}
     />
   );
 
@@ -141,15 +142,15 @@ const ImageComponent: React.FC<ImageComponentMainProps> = ({
       className="image-box"
       style={{
         borderRadius: `${currentMode.borderRadius}px`,
-        height: containerHeight,
+        width: '100%',
         overflow: 'hidden',
       }}
     >
       {link ? (
         <a
           href={link}
-                  target={props?.linktype=='EXTERNAL' ? props?.link?.target :'_self'}
-          style={{ display: 'block', width: '100%', height: '100%' }}
+          target={props?.linktype=='EXTERNAL' ? props?.link?.target :'_self'}
+          style={{ display: 'block', width: '100%' }}
         >
           {imageElement}
         </a>