tee3apps-cms-sdk-react 0.0.11 → 0.0.13

package/package.json

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

package/src/PageFormComponents/BoxRenderer.tsx

@@ -10,6 +10,7 @@ import RadioField from './RadioField';
 import SelectField from './SelectField';
 import ImageComponent from './ImageComponent';
 import TermsAndCondition from './TermsAndCondition';
+import { Linodeurl } from '../const';
 
 interface BoxRendererProps {
   box: Box;
@@ -64,7 +65,7 @@ const BoxRenderer: React.FC<BoxRendererProps> = ({
         return box.props.mode.tablet || {};
       case 'web':
       default:
-        return box.props.mode.web;
+        return box.props.mode.web || {};
     }
   };
 
@@ -80,6 +81,58 @@ const BoxRenderer: React.FC<BoxRendererProps> = ({
   const currentMode = getCurrentMode();
   const widthPercentage = (colspan / totalColumns) * 100;
 
+  // Handle content justification with proper CSS values (from BoxComponent)
+  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',
+    };
+    
+    return justifyMap[justify] || justify || 'flex-start';
+  };
+
+  // Handle alignment with proper CSS values (from BoxComponent)
+  const getAlignItems = (align: string): 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',
+    };
+    
+    return (typeof align === 'string' && alignMap[align]) || align || 'flex-start';
+  };
+
+  // Build background image URL with Linode URL prefix
+  const getBackgroundImageUrl = () => {
+    if (!box.props.bgImage) return 'none';
+    
+    const bgImage = box.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})`;
+  };
+
+  // Determine if flexbox should be used
+  const useFlexView = currentMode.flexView !== false; // Default to true if not specified
+  
+  // Handle overflow/scroll
+  const overflowStyle = currentMode.isScroll ? 'auto' : 'hidden';
+
   // Dynamic height calculation based on content type
   const getBoxHeight = () => {
     if (!autoAdjustForImages) {
@@ -101,28 +154,40 @@ const BoxRenderer: React.FC<BoxRendererProps> = ({
     <div 
       style={{
         backgroundColor: box.props.bgColor,
-        display: currentMode.isVisible !== false ? 'block' : 'none',
+        backgroundImage: getBackgroundImageUrl(),
         backgroundSize: box.props.bgsize || 'cover',
+        backgroundPosition: 'center',
+        display: currentMode.isVisible !== false ? (useFlexView ? 'flex' : 'block') : 'none',
         height: getBoxHeight(),
         minHeight: autoAdjustForImages ? 'auto' : (currentMode.height || 'auto'),
         borderRadius: currentMode.radius || '0px',
         width: `${widthPercentage}%`,
         float: 'left',
         boxSizing: 'border-box',
-        padding: 'px',
+        padding: '5px',
         margin: 0,
-        overflow: 'hidden',
-        position: 'relative'
+        marginTop: currentMode.top,
+        marginBottom: currentMode.bottom,
+        marginLeft: currentMode.left,
+        marginRight: currentMode.right,
+        overflow: overflowStyle,
+        position: 'relative',
+        // Flexbox properties when flexView is enabled
+        ...(useFlexView && {
+          flexDirection: 'column',
+          alignItems: box.props.align === 'initial' ? 'initial' : getAlignItems(box.props.align),
+          justifyContent: box.props.justify === 'initial' ? 'initial' : getJustifyContent(box.props.justify),
+        }),
       }}
     >
       <div style={{ 
         width: '100%',
         height: autoAdjustForImages ? 'auto' : '100%',
-        display: 'flex',
+        display: useFlexView ? 'flex' : 'block',
         flexDirection: 'column',
-        alignItems: box.props.align || 'flex-start',
-        justifyContent: box.props.justify || 'flex-start',
-        padding: 0,
+        alignItems: useFlexView ? (box.props.align === 'initial' ? 'initial' : getAlignItems(box.props.align)) : undefined,
+        justifyContent: useFlexView ? (box.props.justify === 'initial' ? 'initial' : getJustifyContent(box.props.justify)) : undefined,
+        padding: '5px',
         margin: 0,
         boxSizing: 'border-box'
       }}>

package/src/PageFormComponents/PageForm.tsx

@@ -43,6 +43,15 @@ const PageForm: React.FC<PageFormProps> = ({ jsonData, onSubmit, isUrl = false,
     return component.props.name?.all || component.name;
   };
 
+  // Function to normalize field name: convert to lowercase and replace spaces/special characters with underscores
+  const normalizeFieldName = (name: string): string => {
+    return name
+      .toLowerCase()
+      .trim()
+      .replace(/[^a-z0-9]+/g, '_')  // Replace any sequence of non-alphanumeric characters with single underscore
+      .replace(/^_+|_+$/g, '');      // Remove leading/trailing underscores
+  };
+
   // Function to create a mapping of field codes to field names
   const getFieldCodeToNameMap = useCallback(() => {
     const codeToNameMap: Record<string, string> = {};
@@ -93,10 +102,13 @@ const PageForm: React.FC<PageFormProps> = ({ jsonData, onSubmit, isUrl = false,
     Object.keys(formValues).forEach((code) => {
       const fieldName = codeToNameMap[code];
       if (fieldName) {
-        transformedData[fieldName] = formValues[code];
+        // Normalize field name: convert to lowercase and replace spaces/special characters with underscores
+        const normalizedName = normalizeFieldName(fieldName);
+        transformedData[normalizedName] = formValues[code];
       } else {
-        // If no mapping found, keep the code as key
-        transformedData[code] = formValues[code];
+        // If no mapping found, normalize the code as well
+        const normalizedCode = normalizeFieldName(code);
+        transformedData[normalizedCode] = formValues[code];
       }
     });
     

package/src/PageFormComponents/RowComponent.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import BoxRenderer from './BoxRenderer';
 import type { Row } from '../types';
+import { Linodeurl } from '../const';
 
 interface RowComponentProps {
   row: Row;
@@ -35,18 +36,72 @@ const RowComponent: React.FC<RowComponentProps> = ({
         return row.props.mode.tablet || {};
       case 'web':
       default:
-        return row.props.mode.web;
+        return row.props.mode.web || {};
     }
   };
 
   const currentMode = getCurrentMode();
+  
+  // Determine if flexbox should be used
+  const useFlexView = currentMode.flexView !== false; // Default to true if not specified
+  
+  // Handle overflow/scroll
+  const overflowStyle = currentMode.isScroll ? 'auto' : 'hidden';
+  
+  // Handle content justification with proper CSS values (from BoxComponent)
+  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',
+      'flex-end': 'flex-end',
+    };
+    
+    return justifyMap[justify] || justify || 'flex-start';
+  };
+
+  // Handle alignment with proper CSS values (from BoxComponent)
+  const getAlignItems = (align: string): 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',
+      'flex-end': 'flex-end',
+    };
+    
+    return (typeof align === 'string' && alignMap[align]) || align || 'flex-start';
+  };
+  
+  // Build background image URL with Linode URL prefix
+  const getBackgroundImageUrl = () => {
+    if (!row.props.bgImage) return 'none';
+    
+    const bgImage = row.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})`;
+  };
 
   return (
     <div 
       style={{
         minHeight: row.props.minHeight,
         backgroundColor: row.props.bgColor,
-        backgroundImage: row.props.bgImage ? `url(${row.props.bgImage})` : 'none',
+        backgroundImage: getBackgroundImageUrl(),
         backgroundSize: row.props.bgsize,
         backgroundPosition: 'center',
         width: '100%',
@@ -54,15 +109,21 @@ const RowComponent: React.FC<RowComponentProps> = ({
         border: '1px solid #e0e0e0',
         borderRadius: '4px',
         boxSizing: 'border-box',
-        overflow: 'hidden',
+        overflow: overflowStyle,
         position: 'relative',
         display: currentMode.isVisible !== false ? 'block' : 'none',
+        top: currentMode.top,
+        bottom: currentMode.bottom,
       }}
     >
       {/* Row Content */}
       <div style={{
         width: '100%',
-        display: 'block',
+        display: useFlexView ? 'flex' : 'block',
+        flexDirection: 'row',
+        alignItems: useFlexView ? (row.props.align === 'initial' ? 'initial' : getAlignItems(row.props.align || 'flex-start')) : undefined,
+        justifyContent: useFlexView ? (row.props.justify === 'initial' ? 'initial' : getJustifyContent(row.props.justify || 'flex-start')) : undefined,
+        flexWrap: useFlexView ? (row.props.nowrap === true ? 'nowrap' : 'wrap') : undefined,
         position: 'relative',
         padding: '5px',
         boxSizing: 'border-box'
@@ -81,8 +142,8 @@ const RowComponent: React.FC<RowComponentProps> = ({
             isSubmitting={isSubmitting}
           />
         ))}
-        {/* Clear float after all children */}
-        <div style={{ clear: 'both' }} />
+        {/* Clear float after all children (only needed when not using flexbox) */}
+        {!useFlexView && <div style={{ clear: 'both' }} />}
       </div>
     </div>
   );