tee3apps-cms-sdk-react 0.0.10 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tee3apps-cms-sdk-react",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "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'
       }}>
@@ -218,7 +283,7 @@ const BoxRenderer: React.FC<BoxRendererProps> = ({
             );
           } else if (component.name === 'TextComponent') {
             return <TextComponent key={index} props={component.props} />;
-          } else if (component.name === 'TermsAndCondition' || component.name === 'TERMSANDCONDITION') {
+          } else if (component.name === 'TermsAndCondition' ) {
             const code = getFieldCode(component);
             const hasError = validationErrors[code];
             return (

package/src/PageFormComponents/Button.tsx

@@ -85,7 +85,11 @@ const Button: React.FC<ButtonProps> = ({
   };
 
   // Handle button click based on button type
-  const handleClick = () => {
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    // Prevent default form submission behavior
+    e.preventDefault();
+    e.stopPropagation();
+    
     const buttonType = props.buttonType || 'submit';
     
     // Handle different button types
@@ -145,7 +149,7 @@ const Button: React.FC<ButtonProps> = ({
     <div className="mb-6">
       <button
         onClick={handleClick}
-        type={props.buttonType === 'submit' ? 'submit' : 'button'}
+        type="button"
         disabled={props.disabled || (isSubmitting && props.buttonType === 'submit')}
         style={{
           backgroundColor: currentMode.bgColor || '#3498db',

package/src/PageFormComponents/PageForm.tsx

@@ -209,7 +209,8 @@ const PageForm: React.FC<PageFormProps> = ({ jsonData, onSubmit, isUrl = false,
     const transformedData = transformFormValuesToNames();
 
     // Check if we should send to URL or use onSubmit callback
-    if (isUrl && url) {
+    // If URL is provided, automatically use it for API submission
+    if (url && url.trim() !== '') {
       // Send data to API URL
       setIsSubmitting(true);
       try {
@@ -223,13 +224,17 @@ const PageForm: React.FC<PageFormProps> = ({ jsonData, onSubmit, isUrl = false,
 
         // For GET requests, append data as query parameters
         // For POST requests, send data in the body
-        let requestUrl = url;
+        let requestUrl = url.trim();
         if (httpMethod === 'GET') {
           const queryParams = new URLSearchParams();
           Object.keys(transformedData).forEach((key) => {
-            queryParams.append(key, String(transformedData[key]));
+            const value = transformedData[key];
+            if (value !== null && value !== undefined && value !== '') {
+              queryParams.append(key, String(value));
+            }
           });
-          requestUrl = `${url}?${queryParams.toString()}`;
+          const queryString = queryParams.toString();
+          requestUrl = queryString ? `${requestUrl}?${queryString}` : requestUrl;
         } else {
           // POST, PUT, PATCH, etc.
           requestOptions.body = JSON.stringify(transformedData);
@@ -237,11 +242,28 @@ const PageForm: React.FC<PageFormProps> = ({ jsonData, onSubmit, isUrl = false,
 
         const response = await fetch(requestUrl, requestOptions);
         
+        // Read response as text first (can only read body once)
+        const responseText = await response.text().catch(() => '');
+        
         if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
+          const errorText = responseText || response.statusText || `HTTP ${response.status}`;
+          throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`);
         }
 
-        const responseData = await response.json().catch(() => response.text());
+        // Try to parse as JSON, fallback to text if not JSON
+        let responseData;
+        const contentType = response.headers.get('content-type');
+        if (contentType && contentType.includes('application/json') && responseText) {
+          try {
+            responseData = JSON.parse(responseText);
+          } catch {
+            // If JSON parsing fails, use text as message
+            responseData = { message: responseText };
+          }
+        } else {
+          // Not JSON or empty response, use text as message
+          responseData = responseText ? { message: responseText } : { message: 'Success' };
+        }
         
         setIsSubmitting(false);
         showToast('Form submitted successfully!', 'success');
@@ -253,6 +275,7 @@ const PageForm: React.FC<PageFormProps> = ({ jsonData, onSubmit, isUrl = false,
       } catch (error) {
         setIsSubmitting(false);
         const errorMessage = error instanceof Error ? error.message : 'Failed to submit form';
+        console.error('Form submission error:', error);
         showToast(`Error submitting form: ${errorMessage}`, 'error');
         
         // Still call onSubmit with error data if provided
@@ -264,6 +287,9 @@ const PageForm: React.FC<PageFormProps> = ({ jsonData, onSubmit, isUrl = false,
       // Send transformed data back to parent component via onSubmit callback
       if (onSubmit) {
         onSubmit(transformedData);
+      } else {
+        // If neither URL nor onSubmit is provided, show a warning
+        showToast('No submission handler configured. Please provide either a URL or onSubmit callback.', 'warning');
       }
     }
   }, [formValues, validateForm, getRequiredFields, transformFormValuesToNames, onSubmit, showToast, isUrl, method, url]);

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>
   );