tee3apps-cms-sdk-react 0.0.19 → 0.0.22

package/src/index.css

@@ -1,81 +1,127 @@
-/* Webkit browsers (Chrome, Safari) */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-:root {
-  --font-primary: 'Inter', sans-serif;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  font-family: var(--font-primary);
-  background-color: #f9f9f9; /* optional */
-  color: #1a1a1a; /* optional */
-}
-.groupBrandCarousel::-webkit-scrollbar {
-  height: 8px;
-  width: 8px;
-}
-
-.groupBrandCarousel::-webkit-scrollbar-thumb {
-  background-color: #888;
-  border-radius: 4px;
-}
-
-.groupBrandCarousel::-webkit-scrollbar-track {
-  background-color: #f1f1f1;
-}
-
-/* Firefox */
-.groupBrandCarousel {
-  scrollbar-width: thin;
-  scrollbar-color: #888 #f1f1f1;
-}
-.GroupImageComponent{
-  container-type: inline-size;
-
-}
-.GroupBrandComponent{
-  container-type: inline-size;
-
-}
-.GroupProductComponent {
-  container-type: inline-size;
-}
-
-@container (max-width: 480px) {
-  .groupProductCarousel {
-    gap: 8px !important;
-  }
-  
-  .productImageSlide {
-    min-width: 100px !important;
-  }
-}
-
-/* -------------- IMAGE STYLES --------------- */
-
-.image-box {
-  width: 100%;
-  overflow: hidden;
-  display: block;
-  position: relative;
-  max-height: 280px;
-}
-
-.fitted-image {
-  width: 100%;
-  height: auto;
-  max-height: 280px;
-  display: block;
-}
-.mainpagearea{
-  background-color: rgb(205, 205, 205);
-  width: 100%;
-  flex: flex;
-  justify-items: center;
-}
-.pagerender{
-  /* background-color: #888; */
-  width: 95%;
- 
+/* Webkit browsers (Chrome, Safari) */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+:root {
+  --font-primary: 'Inter', sans-serif;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-primary);
+  background-color: #f9f9f9; /* optional */
+  color: #1a1a1a; /* optional */
+}
+.groupBrandCarousel::-webkit-scrollbar {
+  height: 8px;
+  width: 8px;
+}
+
+.groupBrandCarousel::-webkit-scrollbar-thumb {
+  background-color: #888;
+  border-radius: 4px;
+}
+
+.groupBrandCarousel::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+}
+
+/* Firefox */
+.groupBrandCarousel {
+  scrollbar-width: thin;
+  scrollbar-color: #888 #f1f1f1;
+}
+
+/* Webkit browsers (Chrome, Safari) - Group Category Carousel */
+.groupCategoryCarousel::-webkit-scrollbar {
+  height: 8px;
+  width: 8px;
+}
+
+.groupCategoryCarousel::-webkit-scrollbar-thumb {
+  background-color: #c1c1c1;
+  border-radius: 4px;
+}
+
+.groupCategoryCarousel::-webkit-scrollbar-track {
+  background-color: #f0f0f0;
+}
+
+/* Firefox - Group Category Carousel */
+.groupCategoryCarousel {
+  scrollbar-width: thin;
+  scrollbar-color: #c1c1c1 #f0f0f0;
+}
+
+/* Webkit browsers (Chrome, Safari) - Group Image List Scrollable Container */
+.groupImageCarousel .scrollable-container::-webkit-scrollbar {
+  height: 8px;
+  width: 8px;
+}
+
+.groupImageCarousel .scrollable-container::-webkit-scrollbar-thumb {
+  background-color: #c1c1c1;
+  border-radius: 4px;
+}
+
+.groupImageCarousel .scrollable-container::-webkit-scrollbar-track {
+  background-color: #f0f0f0;
+}
+
+/* Firefox - Group Image List Scrollable Container */
+.groupImageCarousel .scrollable-container {
+  scrollbar-width: thin;
+  scrollbar-color: #c1c1c1 #f0f0f0;
+}
+.GroupImageComponent{
+  container-type: inline-size;
+
+}
+.GroupBrandComponent{
+  container-type: inline-size;
+
+}
+.GroupProductComponent {
+  container-type: inline-size;
+}
+
+@container (max-width: 480px) {
+  .groupProductCarousel {
+    gap: 8px !important;
+  }
+  
+  .productImageSlide {
+    min-width: 100px !important;
+  }
+}
+
+/* -------------- IMAGE STYLES --------------- */
+.image-box {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ display: flex;
+ align-items: stretch;
+ justify-content: stretch;
+ position: relative;
+}
+
+.fitted-image {
+ width: 100%;
+ height: 100%;
+ object-fit: fill;
+ display: block;
+ min-width: 0;
+ min-height: 0;
+}
+
+.mainpagearea{
+  background-color: rgb(205, 205, 205);
+  width: 100%;
+  flex: flex;
+  justify-items: center;
+}
+.pagerender{
+  /* background-color: #888; */
+  width: 95%;
+ 
 }

package/src/Components/BoxRenderer.tsx

@@ -1,108 +0,0 @@
-import React from 'react';
-import ComponentRenderer from './ComponentRenderer';
-import { Box } from '../types';
-
-interface BoxRendererProps {
-  box: Box;
-  deviceMode?: string;
-  autoAdjustForImages?: boolean;
-  totalColumns?: number;
-}
-
-const BoxRenderer: React.FC<BoxRendererProps> = ({ 
-  box, 
-  deviceMode = 'web',
-  autoAdjustForImages = true,
-  totalColumns = 12
-}) => {
-  // 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 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) => (
-          <div key={index} className="relative" style={{width: '100%'}}>
-            <ComponentRenderer component={component} />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default BoxRenderer;

package/src/Components/ComponentRenderer.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { Component } from '../types';
-import TextComponent from './TextComponent';
-
-import ImageComponent from './ImageComponent';
-
-interface ComponentRendererProps {
-  component: Component;
-}
-
-const ComponentRenderer: React.FC<ComponentRendererProps> = ({ component }) => {
-  switch (component.name) {
-
-    case 'ImageComponent':
-      return <ImageComponent props={component.props} />;
-
-    case 'TextComponent':
-      return <TextComponent props={component.props} />;
- 
-    default:
-      return (
-        <div 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>
-      );
-  }
-};
-
-export default ComponentRenderer;

package/src/Components/ImageComponent.tsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import { ComponentProps } from '../types';
-
-const ImageComponent: React.FC<{ props: ComponentProps; deviceMode?: string }> = ({ 
-  props, 
-  deviceMode = 'web' 
-}) => {
-  // Safe access to nested properties with fallbacks
-  const getCurrentMode = () => {
-    if (!props.mode) return { borderRadius: 0 };
-    
-    switch(deviceMode) {
-      case 'mobileweb':
-        return props.mode.mobileweb || props.mode.web || { borderRadius: 0 };
-      case 'mobileapp':
-        return props.mode.mobileapp || props.mode.web || { borderRadius: 0 };
-      case 'tablet':
-        return props.mode.tablet || props.mode.web || { borderRadius: 0 };
-      case 'web':
-      default:
-        return props.mode.web || { borderRadius: 0 };
-    }
-  };
-
-  const currentMode = getCurrentMode();
-  const imageData = props.images?.all || { url: '' };
-  const link = props.link || { url: '', target: '_blank' };
-
-  const handleClick = () => {
-    if (props.linktype === 'EXTERNAL' && link.url) {
-      window.open(link.url, link.target || '_blank');
-    }
-  };
-
-  const imageElement = (
-   <img src={imageData.url} alt="" />
-  );
-
-  if (props.linktype === 'EXTERNAL' && link.url) {
-    return (
-      <a 
-        href={link.url} 
-        target={link.target}
-        style={{ 
-          display: 'block', 
-          width: '100%',
-          textDecoration: 'none' 
-        }}
-      >
-        {imageElement}
-      </a>
-    );
-  }
-
-  return (
-    <div 
-      style={{ 
-        width: '100%',
-        cursor: props.linktype !== 'NONE' ? 'pointer' : 'default' 
-      }}
-      onClick={handleClick}
-    >
-      {imageElement}
-    </div>
-  );
-};
-
-export default ImageComponent;

package/src/Components/RowComponent.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import BoxRenderer from './BoxRenderer';
-import { Row } from '../types';
-
-interface RowComponentProps {
-  row: Row;
-  deviceMode?: string;
-}
-
-const RowComponent: React.FC<RowComponentProps> = ({ 
-  row, 
-  deviceMode = 'web'
-}) => {
-  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: '10px',
-        boxSizing: 'border-box'
-      }}>
-        {row.columns.map((box, boxIndex) => (
-          <BoxRenderer key={boxIndex} box={box} deviceMode={deviceMode} />
-        ))}
-        {/* Clear float after all children */}
-        <div style={{ clear: 'both' }} />
-      </div>
-    </div>
-  );
-};
-
-export default RowComponent;

package/src/Components/TextComponent.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import { ComponentProps } from '../types';
-
-const TextComponent: React.FC<{ props: ComponentProps }> = ({ props }) => {
-  const { text, style } = props;
-
-  const tagName = style?.headingTag ?? 'p';
-
-  if (!text?.all) {
-    return <div className="text-sm text-gray-500">No text content</div>;
-  }
-
-  const textStyle = {
-    fontSize: style?.fontSize ? `${style.fontSize}px` : '16px',
-    fontWeight: style?.fontStyle?.isBold ? 'bold' : 'normal',
-    fontStyle: style?.fontStyle?.isItalic ? 'italic' : 'normal',
-    textDecoration: style?.fontStyle?.isUnderLine ? 'underline' : 'none',
-    textDecorationLine: style?.fontStyle?.isStrikeThrough ? 'line-through' : 'none',
-    color: style?.fontColor || '#000',
-    textAlign: style?.textAlign || 'left',
-    fontFamily: style?.fontFamily || 'inherit',
-    margin: 5,
-  };
-
-  // Create the text element
-  const textElement = React.createElement(
-    tagName,
-    { style: textStyle },
-    text.all
-  );
-
-  if (props.linktype === 'EXTERNAL' && props.link?.url) {
-    return (
-      <a
-        href={props.link.url}
-        target={props.link.target}
-        style={{ textDecoration: 'none' }}
-      >
-        {textElement}
-      </a>
-    );
-  }
-
-  return textElement;
-};
-
-export default TextComponent;