tee3apps-cms-sdk-react 0.0.31 → 0.0.32

package/package.json

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

package/src/PageComponents/BoxComponent.tsx

@@ -53,10 +53,10 @@ const BoxComponent: React.FC<BoxComponentProps> = ({
   // Safely get the device mode with fallback
   const getCurrentMode = (): ModeProps => {
     const validModes = ['web', 'mobileweb', 'mobileapp', 'tablet'] as const;
-    const safeDeviceMode = validModes.includes(deviceMode as any) 
-      ? deviceMode as keyof DeviceModes 
+    const safeDeviceMode = validModes.includes(deviceMode as any)
+      ? deviceMode as keyof DeviceModes
       : 'web';
-    
+
     return props.mode[safeDeviceMode] || props.mode.web;
   };
 
@@ -77,56 +77,56 @@ const BoxComponent: React.FC<BoxComponentProps> = ({
     if (!autoAdjustForImages) {
       return currentMode.height || 'auto';
     }
-    
-    const hasImageComponent = React.Children.toArray(children).some(child => 
-      React.isValidElement(child) && 
+
+    const hasImageComponent = React.Children.toArray(children).some(child =>
+      React.isValidElement(child) &&
       (child.type as any)?.name === 'ImageComponent' || 'CarouselComponent'
     );
-    
+
     if (hasImageComponent) {
       return 'auto';
     }
-    
+
     return currentMode.height || 'auto';
   };
 
   // Handle content justification with proper CSS values
-const getJustifyContent = (justify: string): React.CSSProperties['justifyContent'] => {
-  if (justify === 'initial') return 'initial';
-  
-  const justifyMap: Record<string, React.CSSProperties['justifyContent']> = {
-    around: 'space-around',
-    between: 'space-between',
-    evenly: 'space-evenly',
-    start: 'flex-start',
-    end: 'flex-end',
-    center: 'center',
-    'flex-start': 'flex-start', // Add this
+  const getJustifyContent = (justify: string): React.CSSProperties['justifyContent'] => {
+    if (justify === 'initial') return 'initial';
+
+    const justifyMap: Record<string, React.CSSProperties['justifyContent']> = {
+      around: 'space-around',
+      between: 'space-between',
+      evenly: 'space-evenly',
+      start: 'flex-start',
+      end: 'flex-end',
+      center: 'center',
+      'flex-start': 'flex-start', // Add this
+    };
+
+    return justifyMap[justify] || justify || 'flex-start'; // Default to flex-start
   };
-  
-  return justifyMap[justify] || justify || 'flex-start'; // Default to flex-start
-};
 
   // Handle alignment with proper CSS values
-const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSProperties['alignItems'] => {
-  if (align === 'initial') return 'initial';
-  
-  const alignMap: Record<string, React.CSSProperties['alignItems']> = {
-    start: 'flex-start',
-    end: 'flex-end',
-    center: 'center',
-    stretch: 'stretch',
-    baseline: 'baseline',
-    'flex-start': 'flex-start', // Add this
+  const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSProperties['alignItems'] => {
+    if (align === 'initial') return 'initial';
+
+    const alignMap: Record<string, React.CSSProperties['alignItems']> = {
+      start: 'flex-start',
+      end: 'flex-end',
+      center: 'center',
+      stretch: 'stretch',
+      baseline: 'baseline',
+      'flex-start': 'flex-start', // Add this
+    };
+
+    return (typeof align === 'string' && alignMap[align]) || align || 'flex-start'; // Default to flex-start
   };
-  
-  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://'))) {
@@ -169,16 +169,16 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
     // 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]);
@@ -202,7 +202,7 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
   };
 
   const childrenArray = getOrderedChildren();
-  
+
   // Layout styles
   const rowLayout = {
     display: 'flex',
@@ -232,10 +232,10 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
   const renderLayout = () => {
     if (!props.layout) {
       return (
-        <div style={{ 
-          display: 'flex', 
-          flexDirection: 'column', 
-          alignItems: 'center', 
+        <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
           justifyContent: 'center',
           height: '100%',
           color: '#666',
@@ -246,66 +246,67 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
         </div>
       );
     }
-    
-    switch(props.layout) {
+
+    switch (props.layout) {
       case "layout1":
         return (
-          <div style={{ 
+          <div style={{
             width: "100%",
-                    height: "100%",
-                    minHeight: "50px",
-                    boxSizing: "border-box",
-                    overflow: "hidden",
-                    justifyContent:"center",
-                    alignItems:props.align,
-                    
+            height: "100%",
+            minHeight: "50px",
+            boxSizing: "border-box",
+            overflow: "hidden",
+            // justifyContent: "center",
+            // alignItems: props.align,
+
           }}>
-             <div style={{
-                  
-                  display:"flex",
-                  justifyContent:props.justify,
-                  alignItems:props.align,
-height: "100%" 
-                 }}>
-                  <div style={{width:'100%'}}> {childrenArray}</div>
-                 </div>
+            <div style={{
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: getJustifyContent(props.justify),
+              alignItems: getAlignItems(props.align),
+              height: "100%",
+              width: "100%"
+            }}>
+              <div style={{ width: '100%' }}> {childrenArray}</div>
+            </div>
           </div>
         );
-      
+
       case "layout2":
-  return (
-    <div style={{ 
-      display: 'flex', 
-      flexDirection: 'row', // Display in row (side by side)
-      width: '100%',
-      height: '100%',
-      margin: 0,
-      padding: 0,
-      boxSizing: 'border-box'
-    }}>
-      {[0, 1].map((idx) => (
-        <div
-          key={`BOX-LAYOUT2-${idx}`}
-          style={{
-            ...colLayout,
-            minWidth: "50%",
-            width: '50%',
-            flex: 1
-          }}
-        >
-          {!isEmpty(childrenArray[idx]) ? (
-            <div style={{ width: '100%', height: '100%', position: 'relative' }}>
-              {childrenArray[idx]}
-            </div>
-          ) : (
-            <div style={{ textAlign: 'center', color: '#999' }}>
-              No component here
-            </div>
-          )}
-        </div>
-      ))}
-    </div>
-  );
+        return (
+          <div style={{
+            display: 'flex',
+            flexDirection: 'row', // Display in row (side by side)
+            width: '100%',
+            height: '100%',
+            margin: 0,
+            padding: 0,
+            boxSizing: 'border-box'
+          }}>
+            {[0, 1].map((idx) => (
+              <div
+                key={`BOX-LAYOUT2-${idx}`}
+                style={{
+                  ...colLayout,
+                  minWidth: "50%",
+                  width: '50%',
+                  flex: 1
+                }}
+              >
+                {!isEmpty(childrenArray[idx]) ? (
+                  <div style={{ width: '100%', height: '100%', position: 'relative' }}>
+                    {childrenArray[idx]}
+                  </div>
+                ) : (
+                  <div style={{ textAlign: 'center', color: '#999' }}>
+                    No component here
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        );
       case "layout3":
         return (
           <div style={{ ...rowLayout, flexDirection: 'column', height: '100%', minHeight: 0 }}>
@@ -457,7 +458,7 @@ height: "100%"
   const hasBackgroundImage = backgroundImageUrl !== 'none';
 
   return (
-    <div 
+    <div
       style={{
         // bgImage takes priority over bgColor
         backgroundColor: hasBackgroundImage ? 'transparent' : props.bgColor,

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

@@ -41,7 +41,7 @@ interface PageData {
   pg_type?: string | null;
 
   page_id?: any;
-  page_data?:any;
+  page_data?: any;
 }
 
 interface ImageItem {
@@ -169,7 +169,7 @@ const ImageComponentInternal: React.FC<ImageComponentProps> = ({
   const buildLink = () => {
     console.warn(linkData)
     switch (linkData.linktype) {
-      
+
       case 'NONE':
         return null;
       case 'EXTERNAL_LINK':
@@ -187,21 +187,21 @@ const ImageComponentInternal: React.FC<ImageComponentProps> = ({
       case 'TAG':
         return `/tag/${linkData.tag?.tag_id?.code || linkData?.tag?.tag_data?.code}`;
       case 'PAGE':
-        return `/page/${linkData.page?.page_id?._id  || linkData.page?.page_data?._id  }?type=${linkData.page?.page_type || linkData.page?.pg_type}`;
+        return `/page/${linkData.page?.page_id?._id || linkData.page?.page_data?._id}?type=${linkData.page?.page_type || linkData.page?.pg_type}`;
       default:
         return null;
     }
   };
 
   // const handleImageClick = () => {
-    // const link = buildLink();
-    // if (link === null) return;
-    
-    // if (link.startsWith('http')) {
-    //   window.open(link, linkData.link?.target || '_blank');
-    // } else {
-    //   window.location.href = link;
-    // }
+  // const link = buildLink();
+  // if (link === null) return;
+
+  // if (link.startsWith('http')) {
+  //   window.open(link, linkData.link?.target || '_blank');
+  // } else {
+  //   window.location.href = link;
+  // }
   // };
 
   const imageStyle: React.CSSProperties = {
@@ -214,16 +214,16 @@ const ImageComponentInternal: React.FC<ImageComponentProps> = ({
   };
 
   return (
-    <a 
+    <a
       href={buildLink() ?? undefined}
       target={
         linkData?.linktype === 'EXTERNAL'
-          ? (linkData?.link?.target ?? '_blank') 
+          ? (linkData?.link?.target ?? '_blank')
           : '_self'
       }
-      style={{ 
-        display: 'block', 
-        width: '100%', 
+      style={{
+        display: 'block',
+        width: '100%',
         height: '100%',
         textDecoration: 'none',
         color: 'inherit'
@@ -261,10 +261,10 @@ const ImageComponentInternal: React.FC<ImageComponentProps> = ({
 };
 
 // Main GroupImageList Component
-const GroupImageList: React.FC<GroupImageListMainProps> = ({ 
-  props, 
-  deviceMode = 'web', 
-  boxHeight 
+const GroupImageList: React.FC<GroupImageListMainProps> = ({
+  props,
+  deviceMode = 'web',
+  boxHeight
 }) => {
   const getCurrentBooleanProp = (prop?: DeviceBooleanProps) => {
     if (!prop) return false;
@@ -319,22 +319,22 @@ const GroupImageList: React.FC<GroupImageListMainProps> = ({
     }
   };
 
-  const ImageCard = ({ item, large = false }: { item: ImageItem; large?: boolean }) => {
+  const ImageCard = ({ item }: { item: ImageItem }) => {
     const [isHovered, setIsHovered] = useState(false);
-    
+
     return (
       <div
         className="imageCard"
         style={{
           height: '100%',
-          minHeight: large ? '280px' : '260px',
+          minHeight: '260px',
           borderRadius: '8px',
           overflow: 'hidden',
           border: '1px solid #eee',
           backgroundColor: props.cardcolor || '#fff',
           display: 'flex',
           flexDirection: 'column',
-          padding: large ? '16px' : '12px',
+          padding: '12px',
           boxShadow: isHovered ? '0 4px 8px rgba(0,0,0,0.15)' : '0 2px 4px rgba(0,0,0,0.1)',
           transition: 'all 0.2s ease',
           cursor: item.linktype !== 'NONE' ? 'pointer' : 'default',
@@ -343,14 +343,16 @@ const GroupImageList: React.FC<GroupImageListMainProps> = ({
         onMouseOver={() => setIsHovered(true)}
         onMouseOut={() => setIsHovered(false)}
       >
-        <div style={{ 
-          width: '100%', 
-          height: large ? '200px' : '180px',
-          minHeight: large ? '200px' : '180px',
-          maxHeight: large ? '200px' : '180px',
-          marginBottom: large ? '12px' : '8px', 
-          display: 'flex', 
-          alignItems: 'center', 
+        <div style={{
+          // width: '100%',
+          // height: '180px',
+          minHeight: '180px',
+          maxHeight: '180px',
+          minWidth:'200px',
+          maxWidth:'400px',
+          marginBottom: '8px',
+          display: 'flex',
+          alignItems: 'center',
           justifyContent: 'center',
           overflow: 'hidden',
           flexShrink: 0
@@ -369,21 +371,21 @@ const GroupImageList: React.FC<GroupImageListMainProps> = ({
             width="100%"
           />
         </div>
-        <div style={{ 
-          display: 'flex', 
-          flexDirection: 'column', 
+        <div style={{
+          display: 'flex',
+          flexDirection: 'column',
           flexShrink: 0,
           minHeight: 0
         }}>
           {showTitle && item.title && (
-            <div style={{ 
-              textAlign: 'center', 
-              fontSize: props.titleStyle ? `${props.titleStyle.fontSize}px` : (large ? '16px' : '14px'), 
-              fontWeight: props.titleStyle?.isBold ? 'bold' : (large ? 600 : 500), 
-              color: props.titleStyle?.fontColor || '#333', 
+            <div style={{
+              textAlign: 'center',
+              fontSize: props.titleStyle ? `${props.titleStyle.fontSize}px` : '14px',
+              fontWeight: props.titleStyle?.isBold ? 'bold' : 500,
+              color: props.titleStyle?.fontColor || '#333',
               fontStyle: props.titleStyle?.isItalic ? 'italic' : 'normal',
               textDecoration: props.titleStyle?.isUnderline ? 'underline' : 'none',
-              lineHeight: '1.4', 
+              lineHeight: '1.4',
               marginBottom: showSubtitle && item.subTitle ? '4px' : '0',
               overflow: 'hidden',
               textOverflow: 'ellipsis',
@@ -396,11 +398,11 @@ const GroupImageList: React.FC<GroupImageListMainProps> = ({
             </div>
           )}
           {showSubtitle && item.subTitle && (
-            <div style={{ 
-              textAlign: 'center', 
-              fontSize: props.subtitleStyle ? `${props.subtitleStyle.fontSize}px` : (large ? '14px' : '12px'), 
-              fontWeight: props.subtitleStyle?.isBold ? 'bold' : 400, 
-              color: props.subtitleStyle?.fontColor || '#666', 
+            <div style={{
+              textAlign: 'center',
+              fontSize: props.subtitleStyle ? `${props.subtitleStyle.fontSize}px` : '12px',
+              fontWeight: props.subtitleStyle?.isBold ? 'bold' : 400,
+              color: props.subtitleStyle?.fontColor || '#666',
               fontStyle: props.subtitleStyle?.isItalic ? 'italic' : 'normal',
               textDecoration: props.subtitleStyle?.isUnderline ? 'underline' : 'none',
               lineHeight: '1.3',
@@ -530,11 +532,11 @@ const GroupImageList: React.FC<GroupImageListMainProps> = ({
       >
         {images.length > 0 ? (
           currentLayout === 'NONE' ? (
-            <div 
+            <div
               className="scrollable-container"
-              style={{ 
-                display: 'flex', 
-                gap: '12px', 
+              style={{
+                display: 'flex',
+                gap: '12px',
                 overflowX: isHorizontalScroll ? 'auto' : 'hidden',
                 overflowY: 'hidden',
                 alignItems: 'stretch',
@@ -545,8 +547,8 @@ const GroupImageList: React.FC<GroupImageListMainProps> = ({
                 <div
                   key={image.id}
                   style={{
-                    minWidth: '250px',
-                    width: '250px',
+                    minWidth: '400px',
+                    width: '400px',
                     flexShrink: 0,
                     display: 'flex',
                     flexDirection: 'column',
@@ -559,15 +561,15 @@ const GroupImageList: React.FC<GroupImageListMainProps> = ({
             </div>
 
           ) : currentLayout === 'SMALL' ? (
-            <div style={{ 
-              display: 'grid', 
-              gridTemplateColumns: 'repeat(2, 1fr)', 
-              gap: '16px', 
+            <div style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(2, 1fr)',
+              gap: '16px',
               padding: '8px',
               height: '100%'
             }}>
               {images.map((image) => (
-                <div key={image.id} style={{ 
+                <div key={image.id} style={{
                   height: '100%',
                   display: 'flex',
                   flexDirection: 'column'
@@ -577,17 +579,17 @@ const GroupImageList: React.FC<GroupImageListMainProps> = ({
               ))}
             </div>
           ) : currentLayout === 'MEDIUM' ? (
-            <div style={{ 
-              display: 'grid', 
-              gridTemplateColumns: 'repeat(3, 1fr)', 
-              gap: '16px', 
+            <div style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(3, 1fr)',
+              gap: '16px',
               padding: '8px',
               height: 'auto',
               overflowX: 'auto',
 
             }}>
               {images.map((image) => (
-                <div key={image.id} style={{ 
+                <div key={image.id} style={{
                   height: '100%',
                   display: 'flex',
                   flexDirection: 'column'
@@ -598,27 +600,27 @@ const GroupImageList: React.FC<GroupImageListMainProps> = ({
               ))}
             </div>
           ) : currentLayout === 'MEDIUM_THREE' ? (
-            <div style={{ 
-              display: 'flex', 
-              flexDirection: 'column', 
-              gap: '16px', 
+            <div style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '16px',
               padding: '8px',
               height: '100%'
             }}>
               {images.length > 0 && (
                 <div style={{ flex: '2', minHeight: '200px' }}>
-                  <ImageCard item={images[0]} large />
+                  <ImageCard item={images[0]} />
                 </div>
               )}
               {images.length > 1 && (
-                <div style={{ 
-                  display: 'grid', 
-                  gridTemplateColumns: 'repeat(2, 1fr)', 
+                <div style={{
+                  display: 'grid',
+                  gridTemplateColumns: 'repeat(2, 1fr)',
                   gap: '16px',
                   flex: '1'
                 }}>
                   {images.slice(1).map((image) => (
-                    <div key={image.id} style={{ 
+                    <div key={image.id} style={{
                       height: '100%',
                       display: 'flex',
                       flexDirection: 'column'