tee3apps-cms-sdk-react 0.0.1

package/src/PageComponents/Visual-Components/ImageComponent.tsx

@@ -0,0 +1,163 @@
+import '../../../src/index.css';
+import React from 'react';
+import { Linodeurl } from '../../const';
+
+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 = `${Linodeurl}${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/PageComponents/Visual-Components/LinkComponent.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+interface LinkProps {
+  text: any;
+  url: string;
+  target: string;
+  framename: string;
+  style?: {
+    fontSize?: number;
+    fontStyle?: {
+      isBold?: boolean;
+      isItalic?: boolean;
+      isUnderLine?: boolean;
+      isStrikeThrough?: boolean;
+    };
+    fontColor?: string;
+    textAlign?: React.CSSProperties['textAlign'];
+    fontFamily?: string;
+  };
+}
+
+interface LinkComponentProps {
+  props: LinkProps;
+}
+
+const LinkComponent: React.FC<LinkComponentProps> = ({ props }) => {
+  const { text, url, target, style } = props;
+
+  const linkStyle: React.CSSProperties = {
+    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 || '#000000ff',
+    textAlign: (style?.textAlign as React.CSSProperties['textAlign']) || 'left',
+    fontFamily: style?.fontFamily || 'inherit',
+    margin: 5,
+    wordWrap: "break-word" as const,
+    overflowWrap: "break-word" as const,
+    maxWidth: "100%",
+    whiteSpace: "normal" as const,
+    width: "100%",
+    boxSizing: "border-box" as const,
+    wordBreak: "break-word" as const,
+  };
+
+  return (
+    <div style={{
+      display: "block" as const,
+      width: "100%",
+      maxWidth: "100%",
+      wordWrap: "break-word" as const,
+      overflowWrap: "break-word" as const,
+      boxSizing: "border-box" as const,
+    }}>
+      <a 
+        href={url} 
+        target={target}
+        style={linkStyle}
+      >
+        {text}
+      </a>
+    </div>
+  );
+};
+
+export default LinkComponent;

package/src/PageComponents/Visual-Components/LottieComponent.tsx

@@ -0,0 +1,213 @@
+import React from 'react'
+import Lottie from 'lottie-react'
+import { Linodeurl } from '../../const'
+
+// No custom JSX intrinsic elements needed when using lottie-react
+
+interface LottieModeProps {
+  autoplay: boolean
+  loop: boolean
+  height: string
+  width: string
+}
+
+export interface LottieComponentProps {
+  lottieurl: string
+  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
+  }
+  mode: {
+    web: LottieModeProps
+    mobileweb: LottieModeProps
+    mobileapp: LottieModeProps
+    tablet: LottieModeProps
+  }
+}
+
+interface LottieComponentMainProps {
+  props: LottieComponentProps
+  deviceMode?: 'web' | 'mobileweb' | 'mobileapp' | 'tablet'
+}
+
+const LottieComponent: React.FC<LottieComponentMainProps> = ({ props, deviceMode = 'web' }) => {
+  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'
+          ? `/${code}/s?type=variant`
+          : `/${code}/s?type=model`;
+      }
+
+      case 'TAG': {
+        const tagCode =  element.tag?.code;
+        if (!tagCode) return null;
+        return `/${tagCode}/s?type=tag`;
+      }
+
+      case 'PAGE': {
+        const pageId = element.page?._id || element.page?.code;
+        const pgType = element.page?.pg_type?.toLowerCase();
+        if (!pageId || !pgType) return null;
+        return `/page/${pageId}?type=${pgType}`;
+      }
+
+      default:
+        return element.slug || null;
+    }
+  };
+
+
+    const link = bannerLink(props)
+
+
+  const getCurrentMode = (): LottieModeProps => {
+    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 src = props.lottieurl?.startsWith('http')
+    ? props.lottieurl
+    : `${Linodeurl}${props.lottieurl}`
+
+  const isClickable = bannerLink(props) !== null
+
+  const [animationData, setAnimationData] = React.useState<any | null>(null)
+  const [error, setError] = React.useState<string | null>(null)
+
+  React.useEffect(() => {
+    let isMounted = true
+    const controller = new AbortController()
+    setAnimationData(null)
+    setError(null)
+    fetch(src, { signal: controller.signal })
+      .then(async (res) => {
+        if (!res.ok) throw new Error(`Failed to load lottie json: ${res.status}`)
+        return res.json()
+      })
+      .then((json) => {
+        if (isMounted) setAnimationData(json)
+      })
+      .catch((e) => {
+        if (isMounted && e.name !== 'AbortError') setError(e.message || 'Failed to load animation')
+      })
+    return () => {
+      isMounted = false
+      controller.abort()
+    }
+  }, [src])
+
+  return (
+    <>
+   {link?(
+     <a 
+   href={link}
+                  target={props?.linktype=='EXTERNAL' ? props?.link?.target :'_self'}
+   >
+     <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'inline-block',
+        backgroundColor: 'white',
+        cursor: isClickable ? 'pointer' : 'default',
+      }}
+      
+    >
+      {animationData && (
+        <Lottie
+          animationData={animationData}
+          loop={currentMode.loop}
+          autoplay={currentMode.autoplay}
+          style={{ width: '100%', height: '100%' }}
+        />
+      )}
+      {!animationData && !error && (
+        <div style={{ width: '100%', height: '100%' }} />
+      )}
+      {error && (
+        <div style={{ fontSize: '12px', color: '#999' }}>Failed to load animation</div>
+      )}
+    </div>
+   </a>
+  ):(
+       <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'inline-block',
+        backgroundColor: 'white',
+        cursor: isClickable ? 'pointer' : 'default',
+      }}
+      
+    >
+      {animationData && (
+        <Lottie
+          animationData={animationData}
+          loop={currentMode.loop}
+          autoplay={currentMode.autoplay}
+          style={{ width: '100%', height: '100%' }}
+        />
+      )}
+      {!animationData && !error && (
+        <div style={{ width: '100%', height: '100%' }} />
+      )}
+      {error && (
+        <div style={{ fontSize: '12px', color: '#999' }}>Failed to load animation</div>
+      )}
+    </div>
+  )}
+  </>
+  )
+}
+
+export default LottieComponent

package/src/PageComponents/Visual-Components/NavigationComponent.tsx

@@ -0,0 +1,178 @@
+import React from 'react'
+
+interface NavTitle {
+  all: string
+}
+
+interface NavItem {
+  nl_id?: string
+  id?: string
+  title: any
+  url?: string
+  target?: string
+  framename?: string
+  children?: NavItem[]
+  collapsed?: boolean
+}
+
+interface ColorPair {
+  background: string
+  text: string
+  arrow?: string
+  separator?: string
+}
+
+interface LayerStyle {
+  isSeparator: boolean
+  color: ColorPair
+  colorHover: ColorPair
+}
+
+interface NavigationStyles {
+  primary: LayerStyle
+  secondary: LayerStyle
+}
+
+export interface NavigationProps {
+  navData: NavItem[]
+  shape: 'simple' | string
+  styles: NavigationStyles
+}
+
+interface NavigationComponentMainProps {
+  props: NavigationProps
+  boxHeight: string
+}
+
+const NavigationComponent: React.FC<NavigationComponentMainProps> = ({ props, boxHeight }) => {
+  const root = props.navData?.[0]
+  const topItems: NavItem[] = root?.children || []
+
+  const [openId, setOpenId] = React.useState<string | null>(null)
+
+  const buildHref = (item: NavItem) => item.url || '#'
+
+  const Item = ({ item, depth = 0, isRoot = false }: { item: NavItem; depth?: number; isRoot?: boolean }) => {
+    const hasChildren = Array.isArray(item.children) && item.children.length > 0
+    const isTop = depth === 0 && !isRoot
+    const layer = isRoot ? props.styles.primary : (isTop ? props.styles.primary : props.styles.secondary)
+
+    const baseStyles: React.CSSProperties = {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: '8px',
+      padding: isRoot ? '12px 16px' : (isTop ? '10px 14px' : '8px 12px'),
+      color: layer.color.text,
+      background: layer.color.background,
+      textDecoration: 'none',
+      whiteSpace: 'nowrap',
+      fontSize: isRoot ? 16 : (isTop ? 14 : 13),
+      borderBottom: layer.isSeparator && !isTop && !isRoot ? `1px solid ${layer.color.separator}` : 'none',
+      borderRadius: isRoot ? 8 : (isTop ? 6 : 4),
+      cursor: 'pointer',
+      fontWeight: isRoot ? 'bold' : 'normal'
+    }
+
+    const [hover, setHover] = React.useState(false)
+
+    return (
+      <div
+        style={{ position: 'relative' }}
+        onMouseEnter={() => { setHover(true); if (isTop || isRoot) setOpenId(item.id || item.nl_id || null) }}
+        onMouseLeave={() => { setHover(false); if (isTop || isRoot) setOpenId((prev) => (prev === (item.id || item.nl_id) ? null : prev)) }}
+      >
+       {isRoot ? (
+  <div
+    style={{
+      ...baseStyles,
+      background: hover ? layer.colorHover.background : layer.color.background,
+      color: hover ? layer.colorHover.text : layer.color.text,
+      cursor: 'default'
+    }}
+  >
+    <span>{item?.title}</span>
+    {hasChildren && (
+      <span style={{ color: layer.color.arrow || layer.color.text }}>{'▾'}</span>
+    )}
+  </div>
+) : (
+  <a
+    href={buildHref(item)}
+    target={item.target || '_self'}
+    rel={item.target === '_blank' ? 'noopener noreferrer' : undefined}
+    style={{
+      ...baseStyles,
+      background: hover ? layer.colorHover.background : layer.color.background,
+      color: hover ? layer.colorHover.text : layer.color.text
+    }}
+  >
+    <span>{item?.title}</span>
+    {hasChildren && (
+      <span style={{ color: layer.color.arrow || layer.color.text }}>{isTop ? '▾' : '›'}</span>
+    )}
+  </a>
+)}
+
+
+        {/* Dropdown */}
+        {hasChildren && ((isTop || isRoot) ? openId === (item.id || item.nl_id) : hover) && (
+          <div
+            style={{
+              position: 'absolute',
+              top: (isTop || isRoot) ? '100%' : 0,
+              left: (isTop || isRoot) ? 0 : '100%',
+              background: props.styles.secondary.color.background,
+              color: props.styles.secondary.color.text,
+              border: `1px solid ${props.styles.secondary.color.separator || 'transparent'}`,
+              borderRadius: 8,
+              minWidth: 220,
+              padding: 6,
+              boxShadow: '0 6px 24px rgba(0,0,0,0.12)',
+              zIndex: 1000
+            }}
+          >
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+              {item.children!.map((child) => (
+                <Item key={child.id || child.nl_id} item={child} depth={depth + 1} />
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  if (!root) {
+    return (
+      <div style={{ padding: 12, color: '#666' }}>No navigation items</div>
+    )
+  }
+
+  return (
+    <nav
+      style={{
+        width: '100%',
+        display: 'flex',
+        alignItems: 'start',
+        paddingTop: '5px',
+        paddingLeft:'10px',
+        margin: '0px',        
+        background: props.styles.primary.color.background,
+        borderRadius: 8,
+        overflow: 'visible',
+        height: boxHeight
+      }}
+    >
+      {/* Render root node first */}
+      <Item key={root.id || root.nl_id} item={root} depth={0} isRoot={true} />
+      
+      
+    </nav>
+  )
+}
+
+export default NavigationComponent
+
+
+