tee3apps-cms-sdk-react 0.0.5 → 0.0.6

package/package.json

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

package/src/App.css

@@ -0,0 +1,37 @@
+.main {
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  display: flex;
+  font-weight: bold;
+  font-size: 1.875rem; /* 3xl = 30px (1.875rem) */
+  justify-content: center;
+  padding: 2px; 
+}
+
+.content-wrapper {
+  background-color: #f87171; /* Tailwind's red-400 */
+  padding: 1rem; /* 16px */
+}
+
+.content-box {
+  background-color: white;
+  padding: 0.5rem; /* 8px */
+}
+
+.image-box {
+ 
+   width: 100%;
+  /* height: 280px; */
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fitted-image {
+  width: 100%;
+  height: 100%;
+}

package/src/PageFormComponents/BooleanField.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import type { ComponentProps } from '../types';
+import './Styles/BooleanField.css'; // Importing the CSS file
+
+interface BooleanFieldProps {
+  props: ComponentProps;
+  value?: any;
+  onChange?: (code: string, value: any) => void;
+}
+
+const BooleanField: React.FC<BooleanFieldProps> = ({ props, value = false, onChange }) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (onChange) {
+      const code = props.code || `booleanfield_${props.name?.all || 'field'}`;
+      onChange(code, e.target.checked);
+    }
+  };
+
+  return (
+    <div className="boolean-field">
+      <div className="boolean-field__container">
+        <div className="boolean-field__checkbox-wrapper">
+          <input
+            type="checkbox"
+            checked={value || false}
+            onChange={handleChange}
+            className="boolean-field__checkbox"
+            required={props.required}
+          />
+        </div>
+        <div className="boolean-field__content">
+          <label className="boolean-field__label">
+            {props.name?.all || 'Boolean Field'}
+            {props.required && <span className="boolean-field__required">*</span>}
+          </label>
+
+          {props.termsandcondition?.all && (
+            <p className="boolean-field__terms">
+              {props.termsandcondition.all}
+            </p>
+          )}
+
+          {props.helperText && (
+            <p className="boolean-field__helper-text">{props.helperText}</p>
+          )}
+
+          <div className="boolean-field__status-text">
+            {props.onText || 'On'} / {props.offText || 'Off'}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BooleanField;

package/src/PageFormComponents/BoxRenderer.tsx

@@ -0,0 +1,229 @@
+import React from 'react';
+import type { Box } from '../types';
+import DateField from './DateField';
+import NumberField from './NumberField';
+import TextComponent from './TextComponent';
+import BooleanField from './BooleanField';
+import Button from './Button';
+import InputField from './InputField';
+import RadioField from './RadioField';
+import SelectField from './SelectField';
+import ImageComponent from './ImageComponent';
+
+interface BoxRendererProps {
+  box: Box;
+  deviceMode?: string;
+  autoAdjustForImages?: boolean;
+  totalColumns?: number;
+  formValues?: Record<string, any>;
+  validationErrors?: Record<string, boolean>;
+  onFieldChange?: (code: string, value: any) => void;
+  onFormSubmit?: () => void;
+}
+
+const BoxRenderer: React.FC<BoxRendererProps> = ({ 
+  box, 
+  deviceMode = 'web',
+  autoAdjustForImages = true,
+  totalColumns = 12,
+  formValues = {},
+  validationErrors = {},
+  onFieldChange,
+  onFormSubmit
+}) => {
+  // Get colspan based on device mode
+  const getColspan = () => {
+    switch(deviceMode) {
+      case 'mobileweb':
+        return box.props.mode.mobileweb?.colspan || 12;
+      case 'mobileapp':
+        return box.props.mode.mobileapp?.colspan || 12;
+      case 'tablet':
+        return box.props.mode.tablet?.colspan || 12;
+      case 'web':
+      default:
+        return box.props.mode.web.colspan || 12;
+    }
+  };
+
+  // Get device-specific mode properties
+  const getCurrentMode = () => {
+    switch(deviceMode) {
+      case 'mobileweb':
+        return box.props.mode.mobileweb || {};
+      case 'mobileapp':
+        return box.props.mode.mobileapp || {};
+      case 'tablet':
+        return box.props.mode.tablet || {};
+      case 'web':
+      default:
+        return box.props.mode.web;
+    }
+  };
+
+  const getFieldCode = (component: typeof box.components[0]) => {
+    return component.props.code || `${component.name.toLowerCase()}_${component.props.name?.all || 'field'}`;
+  };
+
+  const getFieldValue = (code: string) => {
+    return formValues[code] ?? '';
+  };
+
+  const colspan = getColspan();
+  const currentMode = getCurrentMode();
+  const widthPercentage = (colspan / totalColumns) * 100;
+
+  // Dynamic height calculation based on content type
+  const getBoxHeight = () => {
+    if (!autoAdjustForImages) {
+      return currentMode.height || 'auto';
+    }
+    
+    const hasImageComponent = box.components.some(component => 
+      component.name === 'ImageComponent'
+    );
+    
+    if (hasImageComponent) {
+      return 'auto';
+    }
+    
+    return currentMode.height || 'auto';
+  };
+
+  return (
+    <div 
+      style={{
+        backgroundColor: box.props.bgColor,
+        display: currentMode.isVisible !== false ? 'block' : 'none',
+        backgroundSize: box.props.bgsize || 'cover',
+        height: getBoxHeight(),
+        minHeight: autoAdjustForImages ? 'auto' : (currentMode.height || 'auto'),
+        borderRadius: currentMode.radius || '0px',
+        width: `${widthPercentage}%`,
+        float: 'left',
+        boxSizing: 'border-box',
+        padding: 'px',
+        margin: 0,
+        overflow: 'hidden',
+        position: 'relative'
+      }}
+    >
+      <div style={{ 
+        width: '100%',
+        height: autoAdjustForImages ? 'auto' : '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: box.props.align || 'flex-start',
+        justifyContent: box.props.justify || 'flex-start',
+        padding: 0,
+        margin: 0,
+        boxSizing: 'border-box'
+      }}>
+        {box.components.map((component, index) => {
+          const getCurrentBoxHeight = () => {
+            const validModes = ['web', 'mobileweb', 'mobileapp', 'tablet'] as const;
+            const safeDeviceMode = validModes.includes(deviceMode as any) 
+              ? deviceMode as keyof typeof box.props.mode 
+              : 'web';
+            if (component.name === 'ImageComponent') return 'auto';
+            return box.props.mode[safeDeviceMode]?.height || 'auto';
+          };
+
+          if (component.name === 'DateField') {
+            const code = getFieldCode(component);
+            const hasError = validationErrors[code];
+            return (
+              <div key={index} style={{ width: '100%' }}>
+                <DateField props={component.props} value={getFieldValue(code)} onChange={onFieldChange} />
+                {hasError && component.props.required && (
+                  <div style={{ color: 'red', fontSize: '12px', marginTop: '4px' }}>
+                    This field is required
+                  </div>
+                )}
+              </div>
+            );
+          } else if (component.name === 'NumberField') {
+            const code = getFieldCode(component);
+            const hasError = validationErrors[code];
+            return (
+              <div key={index} style={{ width: '100%' }}>
+                <NumberField props={component.props} value={getFieldValue(code)} onChange={onFieldChange} />
+                {hasError && component.props.required && (
+                  <div style={{ color: 'red', fontSize: '12px', marginTop: '4px' }}>
+                    This field is required
+                  </div>
+                )}
+              </div>
+            );
+          } else if (component.name === 'SelectField') {
+            const code = getFieldCode(component);
+            const hasError = validationErrors[code];
+            return (
+              <div key={index} style={{ width: '100%' }}>
+                <SelectField props={component.props} value={formValues[code]} onChange={onFieldChange} />
+                {hasError && component.props.required && (
+                  <div style={{ color: 'red', fontSize: '12px', marginTop: '4px' }}>
+                    This field is required
+                  </div>
+                )}
+              </div>
+            );
+          } else if (component.name === 'RadioField') {
+            const code = getFieldCode(component);
+            const hasError = validationErrors[code];
+            return (
+              <div key={index} style={{ width: '100%' }}>
+                <RadioField props={component.props} value={getFieldValue(code)} onChange={onFieldChange} />
+                {hasError && component.props.required && (
+                  <div style={{ color: 'red', fontSize: '12px', marginTop: '4px' }}>
+                    This field is required
+                  </div>
+                )}
+              </div>
+            );
+          } else if (component.name === 'InputField') {
+            const code = getFieldCode(component);
+            const hasError = validationErrors[code];
+            return (
+              <div key={index} style={{ width: '100%' }}>
+                <InputField props={component.props} value={getFieldValue(code)} onChange={onFieldChange} />
+                {hasError && component.props.required && (
+                  <div style={{ color: 'red', fontSize: '12px', marginTop: '4px' }}>
+                    This field is required
+                  </div>
+                )}
+              </div>
+            );
+          } else if (component.name === 'ImageComponent') {
+            return <ImageComponent key={index} props={component.props as any} deviceMode={deviceMode} boxHeight={getCurrentBoxHeight()} />;
+          } else if (component.name === 'BooleanField') {
+            const code = getFieldCode(component);
+            const hasError = validationErrors[code];
+            return (
+              <div key={index} style={{ width: '100%' }}>
+                <BooleanField props={component.props} value={formValues[code] ?? false} onChange={onFieldChange} />
+                {hasError && component.props.required && (
+                  <div style={{ color: 'red', fontSize: '12px', marginTop: '4px' }}>
+                    This field is required
+                  </div>
+                )}
+              </div>
+            );
+          } else if (component.name === 'TextComponent') {
+            return <TextComponent key={index} props={component.props} />;
+          } else if (component.name === 'ButtonField') {
+            return <Button key={index} props={component.props} onFormSubmit={onFormSubmit} />;
+          } else {
+            return (
+              <div key={index} className="mb-4 p-4 bg-gray-100 rounded-md border-2 border-dashed border-gray-300">
+                <p className="text-sm text-gray-500">Unknown component: {component.name}</p>
+              </div>
+            );
+          }
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default BoxRenderer;

package/src/PageFormComponents/Button.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import type { ComponentProps } from '../types';
+
+// Define a proper type for button mode
+interface ButtonModeProps {
+  radius?: string;
+  bgColor?: string;
+  textstyle?: {
+    fontSize: number;
+    fontColor: string;
+    fontStyle: {
+      isBold: boolean;
+      isItalic: boolean;
+      isUnderLine: boolean;
+      isStrikeThrough: boolean;
+    };
+  };
+}
+
+interface ButtonProps {
+  props: ComponentProps;
+  onFormSubmit?: () => void;
+}
+
+const Button: React.FC<ButtonProps> = ({ props, onFormSubmit }) => {
+  // Get device-specific mode properties with proper typing
+  const getCurrentMode = (): ButtonModeProps => {
+    // Default to web mode if not specified
+    return (props.mode?.web as ButtonModeProps) || {
+      radius: '4px',
+      bgColor: '#3498db',
+      textstyle: {
+        fontSize: 16,
+        fontColor: '#ffffff',
+        fontStyle: {
+          isBold: false,
+          isItalic: false,
+          isUnderLine: false,
+          isStrikeThrough: false
+        }
+      }
+    };
+  };
+
+  const currentMode = getCurrentMode();
+  const textStyle = currentMode.textstyle || {
+    fontSize: 16,
+    fontColor: '#ffffff',
+    fontStyle: {
+      isBold: false,
+      isItalic: false,
+      isUnderLine: false,
+      isStrikeThrough: false
+    }
+  };
+
+  // Handle button click
+  const handleClick = () => {
+    // You can add button click logic here
+    console.log('Button clicked:', props.name?.all || 'Button');
+    
+    // Trigger form submission if handler is provided
+    if (onFormSubmit) {
+      onFormSubmit();
+    }
+    
+    // If there's a link configured, handle it
+    if (props.linktype === 'EXTERNAL' && props.link?.url) {
+      window.open(props.link.url, props.link.target || '_blank');
+    }
+  };
+
+  // Get button text - handle both string and {all: string} formats
+  const getButtonText = () => {
+    if (typeof props.text === 'string') {
+      return props.text;
+    } else if (props.text?.all) {
+      return props.text.all;
+    } else if (props.name?.all) {
+      return props.name.all;
+    }
+    return 'Button';
+  };
+
+  return (
+    <div className="mb-6">
+      <button
+        onClick={handleClick}
+        disabled={props.disabled}
+        style={{
+          backgroundColor: currentMode.bgColor || '#3498db',
+          color: textStyle.fontColor,
+          fontSize: `${textStyle.fontSize}px`,
+          fontWeight: textStyle.fontStyle?.isBold ? 'bold' : 'normal',
+          fontStyle: textStyle.fontStyle?.isItalic ? 'italic' : 'normal',
+          textDecoration: textStyle.fontStyle?.isUnderLine ? 'underline' : 'none',
+          textDecorationLine: textStyle.fontStyle?.isStrikeThrough ? 'line-through' : 'none',
+          borderRadius: currentMode.radius || '4px',
+          padding: '10px 20px',
+          border: 'none',
+          cursor: props.disabled ? 'not-allowed' : 'pointer',
+          opacity: props.disabled ? 0.6 : 1,
+          transition: 'all 0.2s ease-in-out',
+          minWidth: '120px'
+        }}
+        onMouseEnter={(e) => {
+          if (!props.disabled) {
+            e.currentTarget.style.opacity = '0.8';
+            e.currentTarget.style.transform = 'translateY(-1px)';
+          }
+        }}
+        onMouseLeave={(e) => {
+          if (!props.disabled) {
+            e.currentTarget.style.opacity = '1';
+            e.currentTarget.style.transform = 'translateY(0)';
+          }
+        }}
+      >
+        {getButtonText()}
+      </button>
+
+      
+    </div>
+  );
+};
+
+export default Button;

package/src/PageFormComponents/DateField.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { ComponentProps } from '../types';
+import './Styles/DateField.css'; // Import the external stylesheet
+
+interface DateFieldProps {
+  props: ComponentProps;
+  value?: any;
+  onChange?: (code: string, value: any) => void;
+}
+
+const DateField: React.FC<DateFieldProps> = ({ props, value = '', onChange }) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    if (onChange) {
+      const code = props.code || `datefield_${props.name?.all || 'field'}`;
+      onChange(code, newValue);
+    }
+  };
+
+  return (
+    <div className="date-field">
+      <label className="date-field__label">
+        {props.name?.all || 'Date Field'}
+        {props.required && <span className="date-field__required">*</span>}
+      </label>
+
+      <input
+        type="date"
+        value={value || ''}
+        onChange={handleChange}
+        className="date-field__input"
+        required={props.required}
+      />
+
+      {props.helperText && (
+        <p className="date-field__helper-text">{props.helperText}</p>
+      )}
+
+      <div className="date-field__pattern">
+        Pattern: {props.pattern || 'Default'}
+      </div>
+    </div>
+  );
+};
+
+export default DateField;

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;