tee3apps-cms-sdk-react 0.0.5 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tee3apps-cms-sdk-react",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "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/Page.tsx

@@ -17,6 +17,7 @@ import GroupCategoryComponent, { GroupCategoryComponentProps } from './PageCompo
 import GroupImageList, { GroupImageListProps } from './PageComponents/Visual-Components/GroupImageList';
 import TabComponent, { TabComponentProps } from './PageComponents/Visual-Components/TabComponent';
 import ErrorBoundary from './ErrorBoundary';
+import RichTextComponent, { RichTextComponentProps } from './PageComponents/Visual-Components/RichTextComponent';
 const Page = ({data}:any) => {
     const [deviceMode, setDeviceMode] = useState<string>('web');
    const [screenSize, setScreenSize] = useState({
@@ -64,7 +65,7 @@ const Page = ({data}:any) => {
           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) => {
+          {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 | RichTextComponentProps; }, compIndex: React.Key | null | undefined) => {
             const getCurrentBoxHeight = () => {
             const validModes = ['web', 'mobileweb', 'mobileapp', 'tablet'] as const;
             const safeDeviceMode = validModes.includes(deviceMode as any) 
@@ -102,7 +103,9 @@ const Page = ({data}:any) => {
                   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:
+                case 'RichTextComponent':
+                  return <RichTextComponent key={compIndex} props={component.props as RichTextComponentProps} />;
+                  default:
                   return null;
               }
             } catch (err) {

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

@@ -127,6 +127,175 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
   };
 
   const products = getProducts();
+
+  // Helper function to render product based on style
+  const renderProduct = (product: Product, key: string) => {
+    if (currentstyle === 'STYLE1') {
+      return (
+        <div key={key}>
+          <ProductListViewOne props={product} />
+        </div>
+      );
+    } else if (currentstyle === 'STYLE2') {
+      return (
+        <div key={key}>
+          <ProductListViewTwo props={product} />
+        </div>
+      );
+    } else {
+      // Default style (NONE) - inline JSX
+      return (
+        <a href={`/${product.code}`} target={'_blank'} rel="noopener noreferrer" style={{textDecoration:"none"}} key={key}>
+          <div
+            className="productImageSlide"
+            style={{
+              height: 'auto',
+              minWidth: deviceMode === 'mobileapp' || deviceMode === 'mobileweb' ? '120px' : '150px',
+              borderRadius: '8px',
+              overflow: 'hidden',
+              border: '1px solid #eee',
+              backgroundColor: '#fff',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: '12px',
+              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+              transition: 'transform 0.2s ease',
+              cursor: 'pointer',
+            }}
+            onMouseOver={(e) => {
+              e.currentTarget.style.transform = 'translateY(-2px)';
+              e.currentTarget.style.boxShadow = '0 4px 8px rgba(0,0,0,0.15)';
+            }}
+            onMouseOut={(e) => {
+              e.currentTarget.style.transform = 'translateY(0)';
+              e.currentTarget.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
+            }}
+          >
+            <div
+              style={{
+                height: '120px',
+                width: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                marginBottom: '8px',
+              }}
+            >
+              <img
+                src={`${Linodeurl}${product.image?.url}`}
+                alt={typeof product.name === 'object' ? product.name.all : product.name}
+                style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+              />
+            </div>
+
+            {showProductName && (
+              <div
+                style={{
+                  marginTop: '8px',
+                  textAlign: 'center',
+                  fontSize: '14px',
+                  fontWeight: '500',
+                  color: '#333',
+                  lineHeight: '1.4',
+                  height: '40px',
+                  overflow: 'hidden',
+                  display: '-webkit-box',
+                  WebkitLineClamp: 2,
+                  WebkitBoxOrient: 'vertical',
+                }}
+              >
+                {typeof product.name === 'object' ? product.name.all : product.name}
+                <h1 style={{ fontSize: '16px', fontWeight: '700', color: '#333' }}>
+                  {product?.price?.SP?.$numberDecimal}
+                </h1>
+              </div>
+            )}
+          </div>
+        </a>
+      );
+    }
+  };
+
+  // Helper function to render product card (for grid layouts)
+  const renderProductCard = (product: Product, key: string, imageHeight: string = '120px', fontSize: string = '14px', nameHeight: string = '40px', fontWeight: string = '500') => {
+    if (currentstyle === 'STYLE1') {
+      return (
+        <div key={key}>
+          <ProductListViewOne props={product} />
+        </div>
+      );
+    } else if (currentstyle === 'STYLE2') {
+      return (
+        <div key={key}>
+          <ProductListViewTwo props={product} />
+        </div>
+      );
+    } else {
+      // Default style (NONE) - inline JSX
+      return (
+        <div
+          key={key}
+          className="productImageSlide"
+          style={{
+            height: 'auto',
+            borderRadius: '8px',
+            overflow: 'hidden',
+            border: '1px solid #eee',
+            backgroundColor: '#fff',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '12px',
+            boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+            transition: 'transform 0.2s ease',
+            cursor: 'pointer'
+          }}
+          onMouseOver={(e) => {
+            e.currentTarget.style.transform = 'translateY(-2px)';
+            e.currentTarget.style.boxShadow = '0 4px 8px rgba(0,0,0,0.15)';
+          }}
+          onMouseOut={(e) => {
+            e.currentTarget.style.transform = 'translateY(0)';
+            e.currentTarget.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
+          }}
+        >
+          <div style={{ 
+            height: imageHeight, 
+            width: '100%', 
+            display: 'flex', 
+            alignItems: 'center', 
+            justifyContent: 'center',
+            marginBottom: '8px'
+          }}>
+            <img
+              src={`${Linodeurl}${product.image?.all?.url || product.image?.url}`}
+              alt=""
+              style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+            />
+          </div>
+          {showProductName && <div style={{ 
+            textAlign: 'center',
+            fontSize: fontSize,
+            fontWeight: fontWeight,
+            color: '#333',
+            lineHeight: '1.4',
+            ...(nameHeight === 'auto' ? {} : {
+              height: nameHeight,
+              overflow: 'hidden',
+              display: '-webkit-box',
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: 'vertical'
+            })
+          }}>
+            {typeof product.name === 'object' ? (product.name as { all: string }).all : product.name}
+          </div>}
+        </div>
+      );
+    }
+  };
   
   // Carousel navigation functions
   const scrollLeft = () => {
@@ -300,100 +469,9 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
       >
         {products.length > 0 ? (
           currentLayout === 'NONE' ? (
-            products.slice(0, props.type === 'static' ? 15 : products.length).map((product) => {
-  if (currentstyle === 'STYLE1') {
-    return (
-      <div key={product._id}>
-        <ProductListViewOne props={product} />
-      </div>
-    );
-  } else if (currentstyle === 'STYLE2') {
-    return (
-      <div key={product._id}>
-        <ProductListViewTwo props={product} />
-      </div>
-    );
-  } else {
-    // Default style (NONE)
-    return (
-      <a href={`/${product.code}`} target={'_blank'}  rel="noopener noreferrer" style={{textDecoration:"none"}}>
-           <div
-  key={product._id}
-  className="productImageSlide"
-  style={{
-    height: 'auto',
-    minWidth: deviceMode === 'mobileapp' || deviceMode === 'mobileweb' ? '120px' : '150px',
-
-    borderRadius: '8px',
-    overflow: 'hidden',
-    border: '1px solid #eee',
-    backgroundColor: '#fff',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: '12px',
-    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-    transition: 'transform 0.2s ease',
-    cursor: 'pointer',
-  }}
-  onMouseOver={(e) => {
-    e.currentTarget.style.transform = 'translateY(-2px)';
-    e.currentTarget.style.boxShadow = '0 4px 8px rgba(0,0,0,0.15)';
-  }}
-  onMouseOut={(e) => {
-    e.currentTarget.style.transform = 'translateY(0)';
-    e.currentTarget.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
-  }}
->
-  <div
-    style={{
-      height: '120px',
-      width: '100%',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginBottom: '8px',
-    }}
-  >
-    <img
-      src={`${Linodeurl}${product.image?.url}`}
-      alt={typeof product.name === 'object' ? product.name.all : product.name}
-      style={{ width: '100%', height: '100%', objectFit: 'contain' }}
-    />
-  </div>
-
-  {showProductName && (
-    <div
-      style={{
-        marginTop: '8px',
-        textAlign: 'center',
-        fontSize: '14px',
-        fontWeight: '500',
-        color: '#333',
-        lineHeight: '1.4',
-        height: '40px',
-        overflow: 'hidden',
-        display: '-webkit-box',
-        WebkitLineClamp: 2,
-        WebkitBoxOrient: 'vertical',
-      }}
-    >
-      {typeof product.name === 'object' ? product.name.all : product.name}
-      <h1 style={{ fontSize: '16px', fontWeight: '700', color: '#333' }}>
-        {product?.price?.SP?.$numberDecimal}
-      </h1>
-      {/* <h2 style={{ fontSize: '14px', fontWeight: '500', color: '#666' }}>
-        MRP: {product?.price?.MRP?.$numberDecimal}
-      </h2> */}
-    </div>
-  )}
-</div>
-      </a>
-
-    );
-  }
-})
+            products.slice(0, props.type === 'static' ? 15 : products.length).map((product) => 
+              renderProduct(product, product._id)
+            )
           ) : currentLayout === 'SMALL' ? (
             <div style={{
               display: 'grid',
@@ -402,64 +480,9 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
               padding: '8px'
             }}>
               {
-              products.map((product) => (
-                <div
-                  key={product._id}
-                  className="productImageSlide"
-                  style={{
-                    height: 'auto',
-                    borderRadius: '8px',
-                    overflow: 'hidden',
-                    border: '1px solid #eee',
-                    backgroundColor: '#fff',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    padding: '12px',
-                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-                    transition: 'transform 0.2s ease',
-                    cursor: 'pointer'
-                  }}
-                  onMouseOver={(e) => {
-                    e.currentTarget.style.transform = 'translateY(-2px)';
-                    e.currentTarget.style.boxShadow = '0 4px 8px rgba(0,0,0,0.15)';
-                  }}
-                  onMouseOut={(e) => {
-                    e.currentTarget.style.transform = 'translateY(0)';
-                    e.currentTarget.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
-                  }}
-                >
-                  <div style={{ 
-                    height: '100px', 
-                    width: '100%', 
-                    display: 'flex', 
-                    alignItems: 'center', 
-                    justifyContent: 'center',
-                    marginBottom: '8px'
-                  }}>
-                    <img
-      src={`${Linodeurl}${product.image?.all?.url}`}
-  alt=""
-  style={{ width: '100%', height: '100%', objectFit: 'contain' }}
-/>
-                  </div>
-                  {showProductName && <div style={{ 
-                    textAlign: 'center',
-                    fontSize: '12px',
-                    fontWeight: '500',
-                    color: '#333',
-                    lineHeight: '1.4',
-                    height: '32px',
-                    overflow: 'hidden',
-                    display: '-webkit-box',
-                    WebkitLineClamp: 2,
-                    WebkitBoxOrient: 'vertical'
-                  }}>
-                    {typeof product.name === 'object' ? (product.name as { all: string }).all : product.name}
-                  </div>}
-                </div>
-              ))}
+              products.map((product) => 
+                renderProductCard(product, product._id, '100px', '12px', '32px')
+              )}
             </div>
           ) : currentLayout === 'MEDIUM' ? (
             <div style={{
@@ -469,118 +492,14 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
               padding: '8px'
             }}>
               {
-              products.map((product) => (
-                <div
-                  key={product._id}
-                  className="productImageSlide"
-                  style={{
-                    height: 'auto',
-                    borderRadius: '8px',
-                    overflow: 'hidden',
-                    border: '1px solid #eee',
-                    backgroundColor: '#fff',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    padding: '12px',
-                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-                    transition: 'transform 0.2s ease',
-                    cursor: 'pointer'
-                  }}
-                  onMouseOver={(e) => {
-                    e.currentTarget.style.transform = 'translateY(-2px)';
-                    e.currentTarget.style.boxShadow = '0 4px 8px rgba(0,0,0,0.15)';
-                  }}
-                  onMouseOut={(e) => {
-                    e.currentTarget.style.transform = 'translateY(0)';
-                    e.currentTarget.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
-                  }}
-                >
-                  <div style={{ 
-                    height: '120px', 
-                    width: '100%', 
-                    display: 'flex', 
-                    alignItems: 'center', 
-                    justifyContent: 'center',
-                    marginBottom: '8px'
-                  }}>
-                 <img
-      src={`${Linodeurl}${product.image?.all?.url}`}
-  alt=""
-  style={{ width: '100%', height: '100%', objectFit: 'contain' }}
-/>
-                  </div>
-                  {showProductName && <div style={{ 
-                    textAlign: 'center',
-                    fontSize: '14px',
-                    fontWeight: '500',
-                    color: '#333',
-                    lineHeight: '1.4',
-                    height: '40px',
-                    overflow: 'hidden',
-                    display: '-webkit-box',
-                    WebkitLineClamp: 2,
-                    WebkitBoxOrient: 'vertical'
-                  }}>
-                    {typeof product.name === 'object' ? (product.name as { all: string }).all : product.name}
-                  </div>}
-                </div>
-              ))}
+              products.map((product) => 
+                renderProductCard(product, product._id, '120px', '14px', '40px')
+              )}
             </div>
           ) : currentLayout === 'MEDIUM_THREE' ? (
             <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '8px' }}>
               {products.length > 0 && (
-                <div
-                  className="productImageSlide"
-                  style={{
-                    height: 'auto',
-                    borderRadius: '8px',
-                    overflow: 'hidden',
-                    border: '1px solid #eee',
-                    backgroundColor: '#fff',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    padding: '16px',
-                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-                    transition: 'transform 0.2s ease',
-                    cursor: 'pointer'
-                  }}
-                  onMouseOver={(e) => {
-                    e.currentTarget.style.transform = 'translateY(-2px)';
-                    e.currentTarget.style.boxShadow = '0 4px 8px rgba(0,0,0,0.15)';
-                  }}
-                  onMouseOut={(e) => {
-                    e.currentTarget.style.transform = 'translateY(0)';
-                    e.currentTarget.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
-                  }}
-                >
-                  <div style={{ 
-                    height: '160px', 
-                    width: '100%', 
-                    display: 'flex', 
-                    alignItems: 'center', 
-                    justifyContent: 'center',
-                    marginBottom: '12px'
-                  }}>
-                               <img
-      src={`${Linodeurl}${products[0].image?.all?.url}`}
-  alt=""
-  style={{ width: '100%', height: '100%', objectFit: 'contain' }}
-/>
-                  </div>
-                  {showProductName && <div style={{ 
-                    textAlign: 'center',
-                    fontSize: '16px',
-                    fontWeight: '600',
-                    color: '#333',
-                    lineHeight: '1.4'
-                  }}>
-                    {typeof products[0].name === 'object' ? (products[0].name as { all: string }).all : products[0].name}
-                  </div>}
-                </div>
+                renderProductCard(products[0], products[0]._id, '160px', '16px', 'auto', '600')
               )}
               {products.length > 1 && (
                 <div style={{
@@ -588,64 +507,9 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
                   gridTemplateColumns: 'repeat(2,1fr)',
                   gap: '16px'
                 }}>
-                  {products.slice(1).map((product) => (
-                    <div
-                      key={product._id}
-                      className="productImageSlide"
-                      style={{
-                        height: 'auto',
-                        borderRadius: '8px',
-                        overflow: 'hidden',
-                        border: '1px solid #eee',
-                        backgroundColor: '#fff',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        padding: '12px',
-                        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-                        transition: 'transform 0.2s ease',
-                        cursor: 'pointer'
-                      }}
-                      onMouseOver={(e) => {
-                        e.currentTarget.style.transform = 'translateY(-2px)';
-                        e.currentTarget.style.boxShadow = '0 4px 8px rgba(0,0,0,0.15)';
-                      }}
-                      onMouseOut={(e) => {
-                        e.currentTarget.style.transform = 'translateY(0)';
-                        e.currentTarget.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
-                      }}
-                    >
-                      <div style={{ 
-                        height: '100px', 
-                        width: '100%', 
-                        display: 'flex', 
-                        alignItems: 'center', 
-                        justifyContent: 'center',
-                        marginBottom: '8px'
-                      }}>
-                                         <img
-      src={`${Linodeurl}${product.image?.all?.url}`}
-  alt=""
-  style={{ width: '100%', height: '100%', objectFit: 'contain' }}
-/>
-                      </div>
-                      {showProductName && <div style={{ 
-                        textAlign: 'center',
-                        fontSize: '12px',
-                        fontWeight: '500',
-                        color: '#333',
-                        lineHeight: '1.4',
-                        height: '32px',
-                        overflow: 'hidden',
-                        display: '-webkit-box',
-                        WebkitLineClamp: 2,
-                        WebkitBoxOrient: 'vertical'
-                      }}>
-                        {typeof product.name === 'object' ? (product.name as { all: string }).all : product.name}
-                      </div>}
-                    </div>
-                  ))}
+                  {products.slice(1).map((product) => 
+                    renderProductCard(product, product._id, '100px', '12px', '32px', '500')
+                  )}
                 </div>
               )}
             </div>

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

@@ -0,0 +1,28 @@
+import React from 'react';
+
+export interface RichTextComponentProps {
+  content: {
+    all: string;
+  };
+}
+
+const RichTextComponent: React.FC<{ props: RichTextComponentProps }> = ({ props }) => {
+  const htmlContent = props?.content?.all || '';
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        maxWidth: '100%',
+        wordWrap: 'break-word',
+        overflowWrap: 'break-word',
+        boxSizing: 'border-box',
+        padding: '20px',
+      }}
+      dangerouslySetInnerHTML={{ __html: htmlContent }}
+    />
+  );
+};
+
+export default RichTextComponent;
+