tee3apps-cms-sdk-react 0.0.1

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "tee3apps-cms-sdk-react",
+  "version": "0.0.1",
+  "description": "convert json to page",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "rollup": "rollup -c --bundleConfigAsCjs",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.4",
+    "@types/react": "^19.1.12",
+    "@types/uuid": "^10.0.0",
+    "react": "^19.1.1",
+    "rollup-plugin-dts": "^6.2.3",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.2"
+  },
+  "dependencies": {
+    "lottie-react": "^2.4.1",
+    "rollup": "^4.50.1",
+    "rollup-plugin-postcss": "^4.0.2"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,43 @@
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "@rollup/plugin-typescript";
+import dts from "rollup-plugin-dts";
+import terser from "@rollup/plugin-terser";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+
+import postcss from "rollup-plugin-postcss";
+
+const packageJson = require("./package.json");
+
+export default [
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: packageJson.main,
+        format: "cjs",
+        sourcemap: true,
+      },
+      {
+        file: packageJson.module,
+        format: "esm",
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: "./tsconfig.json" }),
+      terser(),
+      postcss(),
+    ],
+    external: ["react", "react-dom"],
+  },
+  {
+    input: "src/index.ts",
+    output: [{ file: packageJson.types }],
+    plugins: [dts.default()],
+    external: [/\.css$/],
+  },
+];

package/src/Components/BoxRenderer.tsx

@@ -0,0 +1,108 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,47 @@
+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;

package/src/ErrorBoundary.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+}
+
+class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error("ErrorBoundary caught an error:", error, errorInfo);
+    // Optionally send error to a logging service
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <div style={{ padding: '2rem', color: 'red' }}>Failed to render this section. Please try again later.</div>;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

package/src/Page.tsx

@@ -0,0 +1,124 @@
+import React, { useEffect, useState } from 'react'
+import RowComponent from './PageComponents/RowComponent';
+import BoxComponent from './PageComponents/BoxComponent';
+import TextComponent from './PageComponents/Visual-Components/TextComponent';
+import LinkComponent from './PageComponents/Visual-Components/LinkComponent';
+import ImageComponent from './PageComponents/Visual-Components/ImageComponent';
+import GroupProductComponent, { GroupProductComponentProps } from './PageComponents/Visual-Components/GroupProductComponent';
+import VideoComponent, { VideoComponentProps } from './PageComponents/Visual-Components/VideoComponent';
+import GroupBrandComponent, { GroupBrandComponentProps } from './PageComponents/Visual-Components/GroupBrandComponent';
+import LottieComponent, { LottieComponentProps } from './PageComponents/Visual-Components/LottieComponent';
+import {  ImageComponentProps, LinkProps, TextProps } from './common.interface';
+import CarouselComponent, { CarouselProps } from './PageComponents/Visual-Components/CarouselComponent';
+import NavigationComponent, { NavigationProps } from './PageComponents/Visual-Components/NavigationComponent';
+import './index.css'
+import GroupVideoList, { GroupVideoListProps } from './PageComponents/Visual-Components/GroupVideoList';
+import GroupCategoryComponent, { GroupCategoryComponentProps } from './PageComponents/Visual-Components/GroupCategoryComponent';
+import GroupImageList, { GroupImageListProps } from './PageComponents/Visual-Components/GroupImageList';
+import TabComponent, { TabComponentProps } from './PageComponents/Visual-Components/TabComponent';
+import ErrorBoundary from './ErrorBoundary';
+const Page = ({data}:any) => {
+    const [deviceMode, setDeviceMode] = useState<string>('web');
+   const [screenSize, setScreenSize] = useState({
+    width: 0,
+    height: 0
+  });
+
+  // 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';
+  };
+
+  // Effect to handle window resize
+  useEffect(() => {
+    const handleResize = () => {
+      const width = window.innerWidth;
+      const height = window.innerHeight;
+      setScreenSize({ width, height });
+      setDeviceMode(getDeviceMode(width));
+    };
+
+    // Call once on mount
+    handleResize();
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return (
+    <>
+      <div className=''>
+ <div className=''>
+     
+        <ErrorBoundary>
+  {data.map((row: { props: any; columns: any[]; }, rowIndex: React.Key | null | undefined) => (
+    <RowComponent key={rowIndex} props={row.props} deviceMode={deviceMode}>
+      {row.columns.map((box, boxIndex) => (
+        <BoxComponent 
+          key={boxIndex} 
+          props={box.props} 
+          deviceMode={deviceMode}
+          autoAdjustForImages={true}
+        >
+          {box.components.map((component: { name: string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined; props: TextProps | LinkProps | ImageComponentProps | GroupProductComponentProps | VideoComponentProps | GroupBrandComponentProps | LottieComponentProps | CarouselProps | NavigationProps | GroupVideoListProps | GroupCategoryComponentProps | GroupImageListProps | TabComponentProps; }, compIndex: React.Key | null | undefined) => {
+            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' // add this line
+            return box.props.mode[safeDeviceMode]?.height || 'auto';
+            };
+
+            try {
+              switch (component.name) {
+                case 'TextComponent':
+                  return <TextComponent key={compIndex} props={component.props as TextProps} />;
+                case 'LinkComponent':
+                  return <LinkComponent key={compIndex} props={component.props as LinkProps} />;
+                case 'ImageComponent':
+                  return <ImageComponent key={compIndex} props={component.props as ImageComponentProps} deviceMode={deviceMode} boxHeight={getCurrentBoxHeight()} />;
+                case 'GroupProductComponent':
+                  return <GroupProductComponent key={compIndex} props={component.props as GroupProductComponentProps} deviceMode={deviceMode} />;
+                case 'VideoComponent':
+                  return <VideoComponent key={compIndex} props={component.props as VideoComponentProps} deviceMode={deviceMode} boxHeight={getCurrentBoxHeight()} />;
+                case 'GroupBrandComponent':
+                  return <GroupBrandComponent key={compIndex} props={component.props as GroupBrandComponentProps} deviceMode={deviceMode} />;
+                case 'LottieComponent':
+                  return <LottieComponent key={compIndex} props={component.props as LottieComponentProps} />;
+                case 'CarouselComponent':
+                  return <CarouselComponent key={compIndex} props={component.props as CarouselProps} deviceMode={deviceMode} />;
+                case 'NavigationComponent':
+                  return <NavigationComponent key={compIndex} props={component.props as NavigationProps} boxHeight={getCurrentBoxHeight()} />;
+                case 'GroupVideoComponent':
+                  return <GroupVideoList key={compIndex} props={component.props as GroupVideoListProps} boxHeight={getCurrentBoxHeight()} />;
+                case 'GroupCategoryComponent':
+                  return <GroupCategoryComponent key={compIndex} props={component.props as GroupCategoryComponentProps} deviceMode={deviceMode} />;
+                case 'GroupImageComponent':
+                  return <GroupImageList key={compIndex} props={component.props as GroupImageListProps} deviceMode={deviceMode} />;
+                case 'TabComponent':
+                  return <TabComponent key={compIndex} props={component.props as TabComponentProps} deviceMode={deviceMode} />;
+                default:
+                  return null;
+              }
+            } catch (err) {
+              console.error(`Error rendering component: ${component.name}`, err);
+              return <div key={compIndex} style={{ color: 'red' }}>Failed to load component: {component.name}</div>;
+            }
+          })}
+        </BoxComponent>
+      ))}
+    </RowComponent>
+  ))}
+</ErrorBoundary>
+    </div>
+        </div>
+    </>
+  )
+}
+
+export default Page