tee3apps-cms-sdk-react 0.0.1

package/src/PageComponents/BoxComponent.tsx

@@ -0,0 +1,397 @@
+import React from 'react';
+
+interface ModeProps {
+  isScroll?: boolean;
+  isVisible: boolean;
+  top: string;
+  bottom: string;
+  flexView?: boolean;
+  colspan?: number;
+  height?: string;
+  width?: string;
+  left?: string;
+  right?: string;
+  radius?: string;
+}
+
+interface DeviceModes {
+  web: ModeProps;
+  mobileweb: ModeProps;
+  mobileapp: ModeProps;
+  tablet: ModeProps;
+}
+
+interface BoxProps {
+  bgColor: string;
+  align: React.CSSProperties['alignItems'];
+  justify: string;
+  compOrder: string[];
+  bgsize: React.CSSProperties['backgroundSize'];
+  layout: string;
+  mode: DeviceModes;
+}
+
+interface BoxComponentProps {
+  props: BoxProps;
+  children?: React.ReactNode;
+  deviceMode?: string;
+  autoAdjustForImages?: boolean;
+  isSelected?: boolean;
+  setShowLayoutDialog?: (show: boolean) => void;
+}
+
+const BoxComponent: React.FC<BoxComponentProps> = ({
+  props,
+  children,
+  deviceMode = 'web',
+  autoAdjustForImages = true,
+  isSelected = false,
+  setShowLayoutDialog
+}) => {
+  // 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 
+      : 'web';
+    
+    return props.mode[safeDeviceMode] || props.mode.web;
+  };
+
+  const getColspan = (): number => {
+    const currentMode = getCurrentMode();
+    return currentMode?.colspan ?? 12;
+  };
+
+  const currentMode = getCurrentMode();
+  const colspan = getColspan();
+
+  // Apply visibility
+  if (!currentMode.isVisible) {
+    return null;
+  }
+
+  const getBoxHeight = (): string => {
+    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) {
+      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
+  };
+  
+  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
+  };
+  
+  return (typeof align === 'string' && alignMap[align]) || align || 'flex-start'; // Default to flex-start
+};
+
+  // Check if children is empty
+  const isEmpty = (children: any): boolean => {
+    if (!children) return true;
+    if (Array.isArray(children)) return children.length === 0;
+    return false;
+  };
+
+  // Get children as array
+  const childrenArray = React.Children.toArray(children);
+  
+  // Layout styles
+  const rowLayout = {
+    display: 'flex',
+    flexDirection: 'row' as const,
+    width: '100%',
+    height: '100%',
+    margin: 0,
+    padding: 0,
+    boxSizing: 'border-box' as const
+  };
+
+  const colLayout = {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '5px',
+    boxSizing: 'border-box' as const,
+    flex: 1
+  };
+
+  // Render layout based on the layout prop
+  const renderLayout = () => {
+    if (!props.layout) {
+      return (
+        <div style={{ 
+          display: 'flex', 
+          flexDirection: 'column', 
+          alignItems: 'center', 
+          justifyContent: 'center',
+          height: '100%',
+          color: '#666',
+          width: '100%',
+          boxSizing: 'border-box'
+        }}>
+          <h1>No Layout</h1>
+        </div>
+      );
+    }
+    
+    switch(props.layout) {
+      case "layout1":
+        return (
+          <div style={{ 
+            width: "100%",
+                    height: "100%",
+                    minHeight: "50px",
+                    boxSizing: "border-box",
+                    overflow: "hidden",
+                    justifyContent:"center",
+                    alignItems:props.align,
+                    
+          }}>
+            {/* {children} */}
+             <div style={{
+                  
+                  display:"flex",
+                  justifyContent:props.justify,
+                  alignItems:props.align,
+height: "100%" 
+                 }}>
+                  <div style={{width:'100%'}}> {children}</div>
+                 </div>
+          </div>
+        );
+      
+      case "layout2":
+  return (
+    <div style={{ 
+      display: 'flex', 
+      flexDirection: 'column', // Changed to column to stack vertically
+      width: '100%',
+      height: '100%',
+      margin: 0,
+      padding: 0,
+      boxSizing: 'border-box'
+    }}>
+      {[0, 1].map((idx) => (
+        <div
+          key={`BOX-LAYOUT2-${idx}`}
+          style={{
+            ...colLayout,
+            minHeight: "50%",
+            width: '100%',
+            flex: 1
+          }}
+        >
+          {!isEmpty(childrenArray[idx]) ? (
+            childrenArray[idx]
+          ) : (
+            <div style={{ textAlign: 'center', color: '#999' }}>
+              No component here
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+      case "layout3":
+        return (
+          <div style={{ ...rowLayout, flexDirection: 'column', height: '100%' }}>
+            <div style={{ ...rowLayout, flex: 1 }}>
+              {[0, 1].map((idx) => (
+                <div
+                  key={`BOX-LAYOUT3-TOP-${idx}`}
+                  style={{
+                    ...colLayout,
+                    minHeight: "50px",
+                    flex: 1
+                  }}
+                >
+                  {!isEmpty(childrenArray[idx]) ? (
+                    childrenArray[idx]
+                  ) : (
+                    <div style={{ textAlign: 'center', color: '#999' }}>
+                      No component here
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+            <div style={{ ...rowLayout, flex: 1 }}>
+              {[2, 3].map((idx) => (
+                <div
+                  key={`BOX-LAYOUT3-BOTTOM-${idx}`}
+                  style={{
+                    ...colLayout,
+                    minHeight: "50px",
+                    flex: 1
+                  }}
+                >
+                  {!isEmpty(childrenArray[idx]) ? (
+                    childrenArray[idx]
+                  ) : (
+                    <div style={{ textAlign: 'center', color: '#999' }}>
+                      No component here
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        );
+
+      case "layout4":
+        return (
+          <div style={rowLayout}>
+            <div
+              style={{
+                ...colLayout,
+                minHeight: "50px",
+                flex: 1
+              }}
+            >
+              {!isEmpty(childrenArray[0]) ? (
+                childrenArray[0]
+              ) : (
+                <div style={{ textAlign: 'center', color: '#999' }}>
+                  No component here
+                </div>
+              )}
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
+              {[1, 2].map((idx) => (
+                <div
+                  key={`BOX-LAYOUT4-${idx}`}
+                  style={{
+                    ...colLayout,
+                    minHeight: "50px",
+                    flex: 1
+                  }}
+                >
+                  {!isEmpty(childrenArray[idx]) ? (
+                    childrenArray[idx]
+                  ) : (
+                    <div style={{ textAlign: 'center', color: '#999' }}>
+                      No component here
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        );
+
+      case "layout5":
+        return (
+          <div style={rowLayout}>
+            <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
+              {[0, 1].map((idx) => (
+                <div
+                  key={`BOX-LAYOUT5-${idx}`}
+                  style={{
+                    ...colLayout,
+                    minHeight: "50px",
+                    flex: 1
+                  }}
+                >
+                  {!isEmpty(childrenArray[idx]) ? (
+                    childrenArray[idx]
+                  ) : (
+                    <div style={{ textAlign: 'center', color: '#999' }}>
+                      No component here
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+            <div
+              style={{
+                ...colLayout,
+                minHeight: "50px",
+                flex: 1
+              }}
+            >
+              {!isEmpty(childrenArray[2]) ? (
+                childrenArray[2]
+              ) : (
+                <div style={{ textAlign: 'center', color: '#999' }}>
+                  No component here
+                </div>
+              )}
+            </div>
+          </div>
+        );
+
+      default:
+        return children;
+    }
+  };
+
+  return (
+    <div 
+      style={{
+        backgroundColor: props.bgColor,
+        backgroundSize: props.bgsize || 'cover',
+        height: getBoxHeight(),
+        minHeight: autoAdjustForImages ? 'auto' : (currentMode.height || 'auto'),
+        borderRadius: currentMode.radius || '0px',
+        width: `calc(${(colspan / 12) * 100}% - 1px)`,
+        maxWidth: `calc(${(colspan / 12) * 100}% - 1px)`,
+        minWidth: `calc(${(colspan / 12) * 100}% - 1px)`,
+        flex: 'none',
+        boxSizing: 'border-box',
+        margin: '5px 0px',
+        overflow: 'hidden',
+        position: 'relative',
+        marginTop: currentMode.top,
+        marginBottom: currentMode.bottom,
+        marginLeft: currentMode.left,
+        marginRight: currentMode.right,
+        // Flex container for children
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: props.align === 'initial' ? 'initial' : getAlignItems(props.align),
+        justifyContent: props.justify === 'initial' ? 'initial' : getJustifyContent(props.justify)
+      }}
+    >
+      {renderLayout()}
+    </div>
+  );
+};
+
+export default BoxComponent;

package/src/PageComponents/RowComponent.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+
+interface ModeProps {
+  isScroll: boolean;
+  isVisible: boolean;
+  top: string;
+  bottom: string;
+  flexView?: boolean;
+  colspan?: number;
+  height?: string;
+  width?: string;
+  left?: string;
+  right?: string;
+  radius?: string;
+}
+
+interface DeviceModes {
+  web: ModeProps;
+  mobileweb: ModeProps;
+  mobileapp: ModeProps;
+  tablet: ModeProps;
+}
+
+interface RowProps {
+  minHeight: string;
+  bgColor: string;
+  bgImage: string;
+  align: React.CSSProperties['alignItems'];
+  justify: string;
+  nowrap: boolean;
+  bgsize: React.CSSProperties['backgroundSize'];
+  mode: DeviceModes;
+}
+
+interface RowComponentProps {
+  props: RowProps;
+  children?: React.ReactNode;
+  deviceMode?: string;
+}
+
+const RowComponent: React.FC<RowComponentProps> = ({
+  props,
+  children,
+  deviceMode = 'web'
+}) => {
+  // 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 
+      : 'web';
+    
+    return props.mode[safeDeviceMode] || props.mode.web;
+  };
+
+  // Get the current device mode configuration
+  const currentMode = getCurrentMode();
+
+  // Apply visibility
+  if (!currentMode.isVisible) {
+    return null;
+  }
+
+  // Handle content justification with proper CSS values
+const getJustifyContent = (): React.CSSProperties['justifyContent'] => {
+  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',
+    'flex-end': 'flex-end',
+    initial: 'initial'
+  };
+  
+  return justifyMap[props.justify] || props.justify || 'flex-start';
+};
+
+  return (
+    <div 
+      style={{
+        minHeight: props.minHeight,
+        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,
+        marginTop: currentMode.top,
+        marginBottom: currentMode.bottom,
+        marginLeft: currentMode.left,
+        marginRight: currentMode.right,
+        borderRadius: currentMode.radius,
+        boxSizing: 'border-box',
+        overflow: currentMode.isScroll ? 'auto' : 'visible',
+        position: 'relative',
+        // Flexbox properties like the old code
+        display: currentMode.flexView ? 'flex' : 'block',
+        flexDirection: currentMode.flexView ? 'row' as const : undefined,
+        flexWrap: currentMode.flexView ? (props.nowrap ? 'nowrap' as const : 'wrap' as const) : undefined,
+        justifyContent: currentMode.flexView ? getJustifyContent() : undefined,
+        alignItems: props.align
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default RowComponent;