tee3apps-cms-sdk-react 0.0.4 → 0.0.6

package/src/PageFormComponents/ImageComponent.tsx

@@ -0,0 +1,163 @@
+import React from 'react';
+import '../App.css'; 
+// Import your CSS file here
+
+interface ImageData {
+  isDynamic: boolean;
+  shape: string;
+  url: string;
+  alt: string;
+}
+
+interface ImageModeProps {
+  borderRadius: number;
+  width: string;
+  height: string;
+}
+
+interface ImageComponentProps {
+  images: any;
+  mode: {
+    web: ImageModeProps;
+    mobileweb: ImageModeProps;
+    mobileapp: ImageModeProps;
+    tablet: ImageModeProps;
+  };
+  linktype: string;
+  link: {
+    url: string;
+    target: string;
+  };
+  product: {
+    _id: string;
+    code: string;
+    name: object;
+    pd_type: string;
+  };
+  page: {
+    _id: string;
+    code: string;
+    name: object;
+    pg_type: string;
+    facet_params: any[];
+    track_params: any[];
+  };
+  tag: {
+    _id: string;
+    code: string;
+    name: object;
+    tagtype: string;
+  };
+  type: any[];
+}
+
+interface ImageComponentMainProps {
+  props: ImageComponentProps;
+  deviceMode?: string;
+  boxHeight?: string; // Add this prop to receive box height
+}
+
+const ImageComponent: React.FC<ImageComponentMainProps> = ({
+  props,
+  deviceMode = 'web',
+  boxHeight = '280px',
+}) => {
+
+  const bannerLink = (element: any): string | null => {
+    if (!element || !element.linktype) return null;
+
+    switch (element.linktype) {
+      case 'NONE':
+        return null;
+
+      case 'EXTERNAL':
+      case 'EXTERNAL_LINK':
+        return element.link?.url || null;
+
+      case 'PRODUCT': {
+        const pdType = element.product?.pd_type;
+        const code =
+          element.product?.pd_id?.code ||
+          element.product?.code ||
+          element.product?.product_data?.code;
+
+        if (!code) return null;
+
+        return pdType === 'VARIANT'
+        ? `/variant/${code}`
+        : `model/${code}`;
+      }
+
+      case 'TAG': {
+        const tagCode =  element.tag?.code;
+        if (!tagCode) return null;
+        // return `/${tagCode}/s?type=tag`;
+         return `/tag/${tagCode}`;
+      }
+
+      case 'PAGE': {
+        const pageId = element.page?._id || element.page?.code;
+        const pgType = element.page?.pg_type;
+        if (!pageId || !pgType) return null;
+        return `/page/${pageId}?type=${pgType}`;
+      }
+
+      default:
+        return element.slug || null;
+    }
+  };
+
+  const getCurrentMode = () => {
+    switch (deviceMode) {
+      case 'mobileweb':
+        return props.mode.mobileweb;
+      case 'mobileapp':
+        return props.mode.mobileapp;
+      case 'tablet':
+        return props.mode.tablet;
+      case 'web':
+      default:
+        return props.mode.web;
+    }
+  };
+
+  const currentMode = getCurrentMode();
+  const containerHeight = boxHeight === 'auto' ? 'auto' : boxHeight;
+  const link = bannerLink(props);
+  const imageUrl = `https://pim.in-maa-1.linodeobjects.com/${props.images?.url || props.images?.all?.url}`;
+  const altText = props.images.alt || '';
+
+  const imageElement = (
+    <img
+      src={imageUrl}
+      alt={altText}
+      className="fitted-image"
+      style={{ cursor: link ? 'pointer' : 'default' }}
+    />
+  );
+
+  return (
+    <div
+      className="image-box"
+      style={{
+        borderRadius: `${currentMode.borderRadius}px`,
+        height: containerHeight,
+        overflow: 'hidden',
+      }}
+    >
+      {link ? (
+        <a
+          href={link}
+                  target={props?.linktype=='EXTERNAL' ? props?.link?.target :'_self'}
+          style={{ display: 'block', width: '100%', height: '100%' }}
+        >
+          {imageElement}
+        </a>
+      ) : (
+        imageElement
+      )}
+    </div>
+  );
+};
+
+export default ImageComponent;

package/src/PageFormComponents/InputField.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import type { ComponentProps } from '../types';
+import './Styles/InputField.css'; // Import external CSS
+
+interface InputFieldProps {
+  props: ComponentProps;
+  value?: any;
+  onChange?: (code: string, value: any) => void;
+}
+
+const InputField: React.FC<InputFieldProps> = ({ props, value = '', onChange }) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const newValue = e.target.value;
+    if (onChange) {
+      const code = props.code || `inputfield_${props.name?.all || 'field'}`;
+      onChange(code, newValue);
+    }
+  };
+
+  return (
+    <div className="input-field">
+      <label className="input-field__label">
+        {props.name?.all || 'Input Field'}
+        {props.required && <span className="input-field__required">*</span>}
+      </label>
+
+      {props.textArea ? (
+        <textarea
+          value={value || ''}
+          onChange={handleChange}
+          minLength={props.minLength}
+          maxLength={props.maxLength}
+          rows={4}
+          required={props.required}
+          className="input-field__textarea"
+        />
+      ) : (
+        <input
+          type="text"
+          value={value || ''}
+          onChange={handleChange}
+          minLength={props.minLength}
+          maxLength={props.maxLength}
+          required={props.required}
+          className="input-field__input"
+        />
+      )}
+
+      {props.helperText && (
+        <p className="input-field__helper-text">{props.helperText}</p>
+      )}
+
+      <div className="input-field__status">
+        {props.format && `Format: ${props.format}`}
+        {props.postaltype && ` • Type: ${props.postaltype}`}
+        {props.minLength && props.maxLength && ` • Length: ${props.minLength}-${props.maxLength}`}
+      </div>
+    </div>
+  );
+};
+
+export default InputField;

package/src/PageFormComponents/NumberField.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import type { ComponentProps } from '../types';
+import './Styles/NumberField.css'; // Import the external CSS
+
+interface NumberFieldProps {
+  props: ComponentProps;
+  value?: any;
+  onChange?: (code: string, value: any) => void;
+}
+
+const NumberField: React.FC<NumberFieldProps> = ({ props, value = '', onChange }) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (onChange) {
+      const code = props.code || `numberfield_${props.name?.all || 'field'}`;
+      onChange(code, e.target.value);
+    }
+  };
+
+  return (
+    <div className="number-field">
+      <label className="number-field__label">
+        {props.name?.all || 'Number Field'}
+        {props.required && <span className="number-field__required">*</span>}
+      </label>
+
+      <div className="number-field__input-wrapper">
+        <input
+          type="number"
+          value={value || ''}
+          onChange={handleChange}
+          min={props.min}
+          max={props.max}
+          step={props.step}
+          required={props.required}
+          className="number-field__input"
+        />
+
+        {props.suffix && (
+          <span className="number-field__suffix">
+            {props.suffix}
+          </span>
+        )}
+      </div>
+
+      {props.helperText && (
+        <p className="number-field__helper-text">{props.helperText}</p>
+      )}
+
+      <div className="number-field__status">
+        Range: {props.min}-{props.max} • Step: {props.step}
+      </div>
+    </div>
+  );
+};
+
+export default NumberField;

package/src/PageFormComponents/PageForm.css

@@ -0,0 +1,67 @@
+.page-form {
+  min-height: 100vh;
+  background: linear-gradient(to bottom right, #f9fafb, #f3f4f6); /* from-gray-50 to-gray-100 */
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.page-form__container {
+  max-width: 112rem; /* max-w-7xl (1120px) */
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+@media (min-width: 640px) {
+  .page-form__container {
+    padding-left: 1.5rem; /* sm:px-6 */
+    padding-right: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .page-form__container {
+    padding-left: 2rem; /* lg:px-8 */
+    padding-right: 2rem;
+  }
+}
+
+.page-form__footer {
+  margin-top: 3rem; /* mt-12 */
+  text-align: center;
+}
+
+.page-form__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem; /* gap-2 */
+  padding: 0.5rem 1rem; /* px-4 py-2 */
+  background-color: #fff; /* bg-white */
+  border-radius: 9999px; /* rounded-full */
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); /* shadow-sm */
+  border: 1px solid #e5e7eb; /* border-gray-200 */
+}
+
+.page-form__status-indicator {
+  width: 0.5rem; /* w-2 */
+  height: 0.5rem; /* h-2 */
+  background-color: #10b981; /* green-500 */
+  border-radius: 9999px; /* rounded-full */
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.page-form__status-text {
+  font-size: 0.875rem; /* text-sm */
+  color: #4b5563; /* gray-600 */
+}
+
+/* pulse animation */
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}

package/src/PageFormComponents/PageForm.tsx

@@ -0,0 +1,195 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import type { Row } from '../types';
+import RowComponent from './RowComponent';
+import './PageForm.css'; // Import the new CSS file
+
+interface PageFormProps {
+  jsonData: Row[];
+  onSubmit?: (data: Record<string, any>) => void;
+}
+
+const PageForm: React.FC<PageFormProps> = ({ jsonData, onSubmit }) => {
+  // Form state to store all field values
+  const [formValues, setFormValues] = useState<Record<string, any>>({});
+  const [deviceMode, setDeviceMode] = useState<string>('web');
+  const [validationErrors, setValidationErrors] = useState<Record<string, boolean>>({});
+
+  // Function to determine device mode based on screen width
+  const getDeviceMode = (width: number) => {
+    if (width <= 480) return 'mobileapp';
+    if (width <= 768) return 'mobileweb';
+    if (width <= 1024) return 'tablet';
+    return 'web';
+  };
+
+  // Function to get field code from component
+  const getFieldCode = (component: any) => {
+    return component.props.code || `${component.name.toLowerCase()}_${component.props.name?.all || 'field'}`;
+  };
+
+  // Function to get field name from component
+  const getFieldName = (component: any) => {
+    return component.props.name?.all || component.name;
+  };
+
+  // Function to create a mapping of field codes to field names
+  const getFieldCodeToNameMap = useCallback(() => {
+    const codeToNameMap: Record<string, string> = {};
+    
+    jsonData.forEach((row) => {
+      row.columns?.forEach((box) => {
+        box.components?.forEach((component) => {
+          // Check if component is a form field
+          const fieldTypes = ['DateField', 'NumberField', 'SelectField', 'RadioField', 'InputField', 'BooleanField'];
+          if (fieldTypes.includes(component.name)) {
+            const code = getFieldCode(component);
+            const name = getFieldName(component);
+            codeToNameMap[code] = name;
+          }
+        });
+      });
+    });
+    
+    return codeToNameMap;
+  }, [jsonData]);
+
+  // Function to collect all required fields from jsonData
+  const getRequiredFields = useCallback(() => {
+    const requiredFields: Record<string, { code: string; name: string }> = {};
+    
+    jsonData.forEach((row) => {
+      row.columns?.forEach((box) => {
+        box.components?.forEach((component) => {
+          // Check if component is a form field and is required
+          const fieldTypes = ['DateField', 'NumberField', 'SelectField', 'RadioField', 'InputField', 'BooleanField'];
+          if (fieldTypes.includes(component.name) && component.props.required) {
+            const code = getFieldCode(component);
+            const name = getFieldName(component);
+            requiredFields[code] = { code, name };
+          }
+        });
+      });
+    });
+    
+    return requiredFields;
+  }, [jsonData]);
+
+  // Function to transform form values from code-based to name-based
+  const transformFormValuesToNames = useCallback(() => {
+    const codeToNameMap = getFieldCodeToNameMap();
+    const transformedData: Record<string, any> = {};
+    
+    Object.keys(formValues).forEach((code) => {
+      const fieldName = codeToNameMap[code];
+      if (fieldName) {
+        transformedData[fieldName] = formValues[code];
+      } else {
+        // If no mapping found, keep the code as key
+        transformedData[code] = formValues[code];
+      }
+    });
+    
+    return transformedData;
+  }, [formValues, getFieldCodeToNameMap]);
+
+  // Effect to handle window resize
+  useEffect(() => {
+    const handleResize = () => {
+      const width = window.innerWidth;
+      setDeviceMode(getDeviceMode(width));
+    };
+
+    // Call once on mount
+    handleResize();
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  // Handler to update form values
+  const handleFieldChange = useCallback((code: string, value: any) => {
+    setFormValues(prev => ({
+      ...prev,
+      [code]: value
+    }));
+    // Clear validation error for this field when user types
+    if (validationErrors[code]) {
+      setValidationErrors(prev => {
+        const newErrors = { ...prev };
+        delete newErrors[code];
+        return newErrors;
+      });
+    }
+  }, [validationErrors]);
+
+  // Function to validate required fields
+  const validateForm = useCallback(() => {
+    const requiredFields = getRequiredFields();
+    const errors: Record<string, boolean> = {};
+    
+    Object.keys(requiredFields).forEach((code) => {
+      const value = formValues[code];
+      // Check if value is empty, null, undefined, empty array, or empty string
+      if (
+        value === undefined ||
+        value === null ||
+        value === '' ||
+        (Array.isArray(value) && value.length === 0)
+      ) {
+        errors[code] = true;
+      }
+    });
+    
+    setValidationErrors(errors);
+    return { isValid: Object.keys(errors).length === 0, errors };
+  }, [formValues, getRequiredFields]);
+
+  // Single method to handle form submission - validates, transforms, and sends data to parent
+  const handleFormSubmit = useCallback(() => {
+    // Validate form and get validation result
+    const { isValid, errors } = validateForm();
+    
+    if (isValid) {
+      // Transform form values to use field names instead of codes
+      const transformedData = transformFormValuesToNames();
+      
+      // Send transformed data back to parent component
+      if (onSubmit) {
+        onSubmit(transformedData);
+      }
+    } else {
+      // If validation fails, show error message with field names
+      const requiredFields = getRequiredFields();
+      const errorFields = Object.keys(errors)
+        .map(code => requiredFields[code]?.name || code)
+        .join(', ');
+      alert(`Please fill in all required fields: ${errorFields}`);
+    }
+  }, [formValues, validateForm, getRequiredFields, transformFormValuesToNames, onSubmit]);
+
+  return (
+    <div className="page-form">
+      <div className="page-form__container">
+        {/* Render each row */}
+        {jsonData.map((row, rowIndex) => (
+          <RowComponent 
+            key={rowIndex} 
+            row={row}
+            deviceMode={deviceMode}
+            formValues={formValues}
+            validationErrors={validationErrors}
+            onFieldChange={handleFieldChange}
+            onFormSubmit={handleFormSubmit}
+          />
+        ))}
+
+        {/* Footer */}
+        
+      </div>
+    </div>
+  );
+};
+
+export default PageForm;

package/src/PageFormComponents/RadioField.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import type { ComponentProps } from '../types';
+import './Styles/RadioField.css'; // Import external stylesheet
+
+interface RadioFieldProps {
+  props: ComponentProps;
+  value?: any;
+  onChange?: (code: string, value: any) => void;
+}
+
+const RadioField: React.FC<RadioFieldProps> = ({ props, value = '', onChange }) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (onChange) {
+      const code = props.code || `radiofield_${props.name?.all || 'field'}`;
+      onChange(code, e.target.value);
+    }
+  };
+
+  return (
+    <div className="radio-field">
+      <label className="radio-field__label">
+        {props.name?.all || 'Radio Field'}
+        {props.required && <span className="radio-field__required">*</span>}
+      </label>
+
+      <div className="radio-field__options">
+        {props.lov?.length === 0 ? (
+          <div className="radio-field__empty">No options available</div>
+        ) : (
+          props.lov?.map((item) => (
+            <label
+              key={item.id}
+              className="radio-field__option"
+            >
+              <input
+                type="radio"
+                name={props.code}
+                value={item.code}
+                checked={value === item.code}
+                onChange={handleChange}
+                className="radio-field__input"
+                required={props.required}
+              />
+              <span className="radio-field__option-label">{item.name}</span>
+            </label>
+          ))
+        )}
+      </div>
+
+      {props.helperText && (
+        <p className="radio-field__helper-text">{props.helperText}</p>
+      )}
+
+      
+    </div>
+  );
+};
+
+export default RadioField;

package/src/PageFormComponents/RowComponent.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import BoxRenderer from './BoxRenderer';
+import type { Row } from '../types';
+
+interface RowComponentProps {
+  row: Row;
+  deviceMode?: string;
+  formValues?: Record<string, any>;
+  validationErrors?: Record<string, boolean>;
+  onFieldChange?: (code: string, value: any) => void;
+  onFormSubmit?: () => void;
+}
+
+const RowComponent: React.FC<RowComponentProps> = ({ 
+  row, 
+  deviceMode = 'web',
+  formValues = {},
+  validationErrors = {},
+  onFieldChange,
+  onFormSubmit
+}) => {
+  const getCurrentMode = () => {
+    switch(deviceMode) {
+      case 'mobileweb':
+        return row.props.mode.mobileweb || {};
+      case 'mobileapp':
+        return row.props.mode.mobileapp || {};
+      case 'tablet':
+        return row.props.mode.tablet || {};
+      case 'web':
+      default:
+        return row.props.mode.web;
+    }
+  };
+
+  const currentMode = getCurrentMode();
+
+  return (
+    <div 
+      style={{
+        minHeight: row.props.minHeight,
+        backgroundColor: row.props.bgColor,
+        backgroundImage: row.props.bgImage ? `url(${row.props.bgImage})` : 'none',
+        backgroundSize: row.props.bgsize,
+        backgroundPosition: 'center',
+        width: '100%',
+        marginBottom: '2px',
+        border: '1px solid #e0e0e0',
+        borderRadius: '4px',
+        boxSizing: 'border-box',
+        overflow: 'hidden',
+        position: 'relative',
+        display: currentMode.isVisible !== false ? 'block' : 'none',
+      }}
+    >
+      {/* Row Content */}
+      <div style={{
+        width: '100%',
+        display: 'block',
+        position: 'relative',
+        padding: '5px',
+        boxSizing: 'border-box'
+      }}>
+        {row.columns.map((box, boxIndex) => (
+          <BoxRenderer 
+            key={boxIndex} 
+            box={box} 
+            deviceMode={deviceMode}
+            formValues={formValues}
+            validationErrors={validationErrors}
+            onFieldChange={onFieldChange}
+            onFormSubmit={onFormSubmit}
+          />
+        ))}
+        {/* Clear float after all children */}
+        <div style={{ clear: 'both' }} />
+      </div>
+    </div>
+  );
+};
+
+export default RowComponent;