tee3apps-cms-sdk-react 0.0.1

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

@@ -0,0 +1,114 @@
+import React from 'react';
+import type { ComponentProps } from '../../types';
+
+const TextComponent: React.FC<{ props: ComponentProps }> = ({ props }) => {
+  const { text, style } = props;
+
+  const tagName = style?.headingTag ?? 'p';
+
+ 
+
+  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,
+    wordWrap: "break-word",
+    overflowWrap: "break-word",
+    maxWidth: "100%",
+    whiteSpace: "normal",
+    width: "100%",
+    boxSizing: "border-box",
+    wordBreak: "break-word",
+  };
+
+  // ✅ Build the dynamic link URL
+  const buildLink = (): string | null => {
+    const linkData = props;
+
+    switch (linkData.linktype) {
+      case 'NONE':
+        return null;
+      case 'EXTERNAL_LINK':
+      case 'EXTERNAL':
+        return linkData.link?.url || null;
+      case 'PRODUCT':
+        const pdType = linkData.product?.pd_type;
+        const code = linkData.product?.pd_id?.code || linkData.product?.code || linkData.product?.product_data?.code;
+
+        if (!code) return null;
+
+        return pdType === 'VARIANT'
+          ? `/variant/${code}`
+          : `model/${code}`;
+      case 'TAG':
+        return `/tag/${linkData.tag?.code}`;
+      case 'PAGE':
+        return `/page/${linkData.page?._id}?type=${linkData.page?.pg_type}`;
+      default:
+        return null;
+    }
+  };
+
+  const url = buildLink();
+
+  const textElement = React.createElement(
+    tagName,
+    { style: textStyle },
+    text
+  );
+
+  // ✅ Wrap text in anchor tag if link is present
+  if (url) {
+    return (
+      <div style={{
+        display: "block",
+        width: "100%",
+        maxWidth: "100%",
+        wordWrap: "break-word",
+        overflowWrap: "break-word",
+        boxSizing: "border-box",
+      }}>
+        <a
+          href={url}
+          target={props?.linktype=='EXTERNAL' ? props?.link?.target :'_self'}
+          style={{
+            textDecoration: 'none',
+            display: "inline-block",
+            width: "100%",
+            maxWidth: "100%",
+            boxSizing: "border-box",
+            wordWrap: "break-word",
+            overflowWrap: "break-word",
+            whiteSpace: "normal",
+            wordBreak: "break-word",
+            color: style?.fontColor || 'inherit',
+          }}
+        >
+          {textElement}
+        </a>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{
+      display: "block",
+      width: "100%",
+      maxWidth: "100%",
+      wordWrap: "break-word",
+      overflowWrap: "break-word",
+      boxSizing: "border-box",
+      padding: '20px'
+    }}>
+      {textElement}
+    </div>
+  );
+};
+
+export default TextComponent;

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

@@ -0,0 +1,191 @@
+import React from 'react';
+import '../../../src/index.css';
+import { Linodeurl } from '../../const';
+
+interface VideoData {
+  url: string;
+  type: 'Youtube' | 'Vimeo' | 'Dailymotion' | 'Video';
+  controls?: boolean;
+  loop?: boolean;
+  alt?: string;
+  thumbnail?: Record<string, unknown>;
+  autoplay?: boolean;
+  muted?: boolean;
+}
+
+interface VideoModeProps {
+  borderRadius: number;
+  height: string;
+}
+
+export interface VideoComponentProps {
+  videos: VideoData;
+  mode: {
+    web: VideoModeProps;
+    mobileweb: VideoModeProps;
+    mobileapp: VideoModeProps;
+    tablet: VideoModeProps;
+  };
+}
+
+interface VideoComponentMainProps {
+  props: VideoComponentProps;
+  deviceMode?: string;
+  boxHeight?: string;
+}
+
+const extractYouTubeId = (url: string): string | null => {
+  try {
+    const parsed = new URL(url);
+    if (parsed.hostname.includes('youtu.be')) {
+      return parsed.pathname.replace('/', '') || null;
+    }
+    if (parsed.hostname.includes('youtube.com')) {
+      if (parsed.pathname.startsWith('/watch')) {
+        return parsed.searchParams.get('v');
+      }
+      if (parsed.pathname.startsWith('/embed/')) {
+        return parsed.pathname.split('/embed/')[1] || null;
+      }
+    }
+  } catch {}
+  return null;
+};
+
+const extractVimeoId = (url: string): string | null => {
+  try {
+    const parsed = new URL(url);
+    if (parsed.hostname.includes('vimeo.com')) {
+      const parts = parsed.pathname.split('/').filter(Boolean);
+      if (parts[0] === 'video') return parts[1] || null;
+      return parts[0] || null;
+    }
+    if (parsed.hostname.includes('player.vimeo.com')) {
+      const parts = parsed.pathname.split('/').filter(Boolean);
+      return parts[1] || null;
+    }
+  } catch {}
+  return null;
+};
+
+const extractDailymotionId = (url: string): string | null => {
+  try {
+    const parsed = new URL(url);
+    if (parsed.hostname.includes('dailymotion.com')) {
+      const parts = parsed.pathname.split('/').filter(Boolean);
+      if (parts[0] === 'video') return parts[1] || null;
+    }
+    if (parsed.hostname.includes('dai.ly')) {
+      return parsed.pathname.replace('/', '') || null;
+    }
+  } catch {}
+  return null;
+};
+
+const VideoComponent: React.FC<VideoComponentMainProps> = ({
+  props,
+  deviceMode = 'web',
+  boxHeight = '280px',
+}) => {
+  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 video = props.videos;
+
+  const containerHeight =  boxHeight;
+
+  const renderPlayer = () => {
+    const commonStyle: React.CSSProperties = {
+      width: '100%',
+      height: '100%',
+      border: 0,
+      borderRadius: `${currentMode.borderRadius}px`,
+      objectFit: 'contain',
+    };
+
+    if (video.type === 'Youtube') {
+      const id = extractYouTubeId(video.url);
+      const src = id ? `https://www.youtube.com/embed/${id}` : video.url;
+      return (
+        <iframe
+          title={video.alt || 'YouTube video'}
+          src={src}
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          allowFullScreen
+          style={commonStyle}
+        />
+      );
+    }
+
+    if (video.type === 'Vimeo') {
+      const id = extractVimeoId(video.url);
+      const src = id ? `https://player.vimeo.com/video/${id}` : video.url;
+      return (
+        <iframe
+          title={video.alt || 'Vimeo video'}
+          src={src}
+          allow="autoplay; fullscreen; picture-in-picture"
+          allowFullScreen
+          style={commonStyle}
+        />
+      );
+    }
+
+    if (video.type === 'Dailymotion') {
+      const id = extractDailymotionId(video.url);
+      const src = id ? `https://www.dailymotion.com/embed/video/${id}` : video.url;
+      return (
+        <iframe
+          title={video.alt || 'Dailymotion video'}
+          src={src}
+          allow="autoplay; fullscreen; picture-in-picture"
+          allowFullScreen
+          style={commonStyle}
+        />
+      );
+    }
+
+    // Default: normal video
+    return (
+      <video
+        autoPlay={video.autoplay !== false}
+        muted={video.muted !== false}
+        playsInline
+        controls={video.controls !== false}
+        loop={video.loop === true}
+        style={{ width: '100%', height: '100%', borderRadius: `${currentMode.borderRadius}px` }}
+        poster={typeof video.thumbnail === 'string' ? video.thumbnail : undefined}
+      >
+        <source src={`${Linodeurl}${video.url}`} />
+      </video>
+    );
+  };
+
+  return (
+    <div
+      className="image-box"
+      style={{
+        borderRadius: `${currentMode.borderRadius}px`,
+        height: containerHeight,
+        objectFit: 'contain',
+
+      }}
+    >
+      {renderPlayer()}
+    </div>
+  );
+};
+
+export default VideoComponent;