tee3apps-cms-sdk-react 0.0.35 → 0.0.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tee3apps-cms-sdk-react",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "description": "Uses JSON to dynamically generate and render UI pages in a website",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/rollup.config-1772797822233.cjs

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var resolve = require('@rollup/plugin-node-resolve');
+var commonjs = require('@rollup/plugin-commonjs');
+var typescript = require('@rollup/plugin-typescript');
+var dts = require('rollup-plugin-dts');
+var terser = require('@rollup/plugin-terser');
+var peerDepsExternal = require('rollup-plugin-peer-deps-external');
+var postcss = require('rollup-plugin-postcss');
+
+const packageJson = require("./package.json");
+
+var rollup_config = [
+  {
+    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$/],
+  },
+];
+
+exports.default = rollup_config;

package/rollup.config-1773143567440.cjs

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var resolve = require('@rollup/plugin-node-resolve');
+var commonjs = require('@rollup/plugin-commonjs');
+var typescript = require('@rollup/plugin-typescript');
+var dts = require('rollup-plugin-dts');
+var terser = require('@rollup/plugin-terser');
+var peerDepsExternal = require('rollup-plugin-peer-deps-external');
+var postcss = require('rollup-plugin-postcss');
+
+const packageJson = require("./package.json");
+
+var rollup_config = [
+  {
+    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$/],
+  },
+];
+
+exports.default = rollup_config;

package/src/Page.tsx

@@ -124,7 +124,7 @@ const Page = ({ data, showsp = true, showdiscount = true }: any) => {
                                 deviceMode={deviceMode} />;
                             }
                           case 'RichTextBoxComponent':
-                            return <RichTextComponent key={compIndex} props={component.props as RichTextComponentProps} />;
+                            return <RichTextComponent key={compIndex} props={component.props as RichTextComponentProps} deviceMode={deviceMode} />;
                           default:
                             return null;
                         }

package/src/PageComponents/RowComponent.tsx

@@ -30,6 +30,7 @@ interface RowProps {
   nowrap: boolean;
   bgsize: React.CSSProperties['backgroundSize'];
   mode: DeviceModes;
+  idname:string;
 }
 
 interface RowComponentProps {
@@ -132,7 +133,8 @@ const getJustifyContent = (): React.CSSProperties['justifyContent'] => {
 };
 
   return (
-    <div 
+    <section 
+     id={props.idname}
       style={{
         minHeight: getRowMinHeight(),
         backgroundColor: props.bgColor,
@@ -159,7 +161,7 @@ const getJustifyContent = (): React.CSSProperties['justifyContent'] => {
       }}
     >
       {children}
-    </div>
+    </section>
   );
 };
 

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

@@ -247,18 +247,20 @@ const GroupBrandComponent: React.FC<GroupBrandComponentMainProps> = ({ props, de
 		<>
 			<style>
 				{`
-				.groupBrandCarousel::-webkit-scrollbar {
-					display: none;
+				${!isHorizontalScroll ? `
+				.GroupBrandComponent .groupBrandCarousel::-webkit-scrollbar {
+					display: none !important;
 				}
-				.groupBrandCarousel {
-					scrollbar-width: none;
-					-ms-overflow-style: none;
+				.GroupBrandComponent .groupBrandCarousel {
+					scrollbar-width: none !important;
+					-ms-overflow-style: none !important;
 				}
+				` : ''}
 			`}
 			</style>
 			<div
 				style={{
-					border: '1px solid #e1e1e1',
+					// border: '1px solid #e1e1e1',
 					width: '100%',
 					maxWidth: '100%',
 					borderRadius: '0px',
@@ -349,7 +351,7 @@ const GroupBrandComponent: React.FC<GroupBrandComponentMainProps> = ({ props, de
 				<div
 					style={{
 						display: currentLayout === 'NONE' ? 'flex' : 'block',
-						overflowX: currentLayout === 'NONE' ? (isHorizontalScroll ? 'auto' : 'hidden') : 'visible',
+						overflowX: 'auto',
 						overflowY: currentLayout === 'NONE' ? 'hidden' : 'visible',
 						alignItems: currentLayout === 'NONE' ? 'stretch' : undefined,
 						gap: currentLayout === 'NONE' ? '12px' : '0',

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

@@ -283,18 +283,20 @@ const GroupCategoryComponent: React.FC<GroupCategoryComponentMainProps> = ({ pro
 		<>
 			<style>
 				{`
-					.groupCategoryCarousel::-webkit-scrollbar {
-						display: none;
+					${!isHorizontalScroll ? `
+					.GroupCategoryComponent .groupCategoryCarousel::-webkit-scrollbar {
+						display: none !important;
 					}
-					.groupCategoryCarousel {
-						scrollbar-width: none;
-						-ms-overflow-style: none;
+					.GroupCategoryComponent .groupCategoryCarousel {
+						scrollbar-width: none !important;
+						-ms-overflow-style: none !important;
 					}
+					` : ''}
 				`}
 			</style>
 			<div
 				style={{
-					border: '1px solid #e1e1e1',
+					// border: '1px solid #e1e1e1',
 					width: '100%',
 					maxWidth: '100%',
 					borderRadius: '0px',
@@ -385,7 +387,7 @@ const GroupCategoryComponent: React.FC<GroupCategoryComponentMainProps> = ({ pro
 				<div
 					style={{
 						display: currentLayout === 'NONE' ? 'flex' : 'block',
-						overflowX: currentLayout === 'NONE' ? (isHorizontalScroll ? 'auto' : 'hidden') : 'visible',
+						overflowX: 'auto',
 						overflowY: currentLayout === 'NONE' ? 'hidden' : 'visible',
 						alignItems: currentLayout === 'NONE' ? 'stretch' : undefined,
 						gap: currentLayout === 'NONE' ? '12px' : '0',

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

@@ -425,18 +425,22 @@ const GroupImageList: React.FC<GroupImageListMainProps> = ({
     <>
       <style>
         {`
-          .scrollable-container::-webkit-scrollbar {
-            display: none;
+          ${!isHorizontalScroll ? `
+          .GroupImageListComponent .scrollable-container::-webkit-scrollbar,
+          .GroupImageListComponent .groupImageCarousel::-webkit-scrollbar {
+            display: none !important;
           }
-          .scrollable-container {
-            scrollbar-width: none;
-            -ms-overflow-style: none;
+          .GroupImageListComponent .scrollable-container,
+          .GroupImageListComponent .groupImageCarousel {
+            scrollbar-width: none !important;
+            -ms-overflow-style: none !important;
           }
+          ` : ''}
         `}
       </style>
       <div
         style={{
-          border: '1px solid #e1e1e1',
+          // border: '1px solid #e1e1e1',
           width: '100%',
           maxWidth: '100%',
           borderRadius: '0px',
@@ -549,7 +553,7 @@ const GroupImageList: React.FC<GroupImageListMainProps> = ({
                 style={{
                   display: 'flex',
                   gap: '12px',
-                  overflowX: isHorizontalScroll ? 'auto' : 'hidden',
+                  overflowX: 'auto',
                   overflowY: 'hidden',
                   alignItems: 'stretch',
                   width: '100%',
@@ -645,7 +649,7 @@ const GroupImageList: React.FC<GroupImageListMainProps> = ({
               </div>
             ) : null
           ) : (
-            <div style={{ textAlign: 'center', color: '#666', padding: '40px', width: '100%', border: '2px dashed #ddd', borderRadius: '8px', backgroundColor: '#f9f9f9' }}>
+            <div style={{ textAlign: 'center', color: '#666', padding: '40px', width: '100%', border: '2px dashed #ddd', borderRadius: '8px', backgroundColor: '#fff' }}>
               <p>No images available.</p>
             </div>
           )}

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

@@ -452,18 +452,22 @@ const GroupVideoList: React.FC<GroupVideoListMainProps> = ({ props, deviceMode =
 
   return (
     <>
-      <style>{`
-        .groupVideoCarousel::-webkit-scrollbar {
-          display: none;
-        }
-        .groupVideoCarousel {
-          scrollbar-width: none;
-          -ms-overflow-style: none;
-        }
-      `}</style>
+      <style>
+        {`
+          ${!isHorizontalScroll ? `
+          .GroupVideoListComponent .groupVideoCarousel::-webkit-scrollbar {
+            display: none !important;
+          }
+          .GroupVideoListComponent .groupVideoCarousel {
+            scrollbar-width: none !important;
+            -ms-overflow-style: none !important;
+          }
+          ` : ''}
+        `}
+      </style>
       <div
         style={{
-          border: '1px solid #e1e1e1',
+          // border: '1px solid #e1e1e1',
           width: '100%',
           maxWidth: '100%',
           borderRadius: '0px',
@@ -554,7 +558,7 @@ const GroupVideoList: React.FC<GroupVideoListMainProps> = ({ props, deviceMode =
         <div
           style={{
             display: currentLayout === 'NONE' ? 'flex' : 'block',
-            overflowX: currentLayout === 'NONE' ? (isHorizontalScroll ? 'auto' : 'hidden') : 'visible',
+            overflowX: 'auto',
             overflowY: currentLayout === 'NONE' ? 'hidden' : (boxHeight ? 'auto' : 'visible'),
             gap: currentLayout === 'NONE' ? '12px' : '0',
             padding: '12px',

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

@@ -1,13 +1,21 @@
 import React from 'react';
 
 export interface RichTextComponentProps {
-  content: {
-    all: string;
+  content?: {
+    all?: string;
+  } | string;
+  mode?: {
+    [key: string]: {
+      content: string;
+    };
   };
 }
 
-const RichTextComponent: React.FC<{ props: RichTextComponentProps }> = ({ props }) => {
-  const htmlContent = props?.content?.all || props?.content;
+const RichTextComponent: React.FC<{ props: RichTextComponentProps; deviceMode?: string }> = ({ props, deviceMode = 'web' }) => {
+  const modeData = props?.mode?.[deviceMode] as { content?: string } | undefined;
+  const contentAll = typeof props?.content === 'string' ? props?.content : props?.content?.all;
+
+  const htmlContent = modeData?.content || contentAll || '';
 
   return (
     <div

package/src/PageComponents/Visual-Components/tab.css

@@ -4,7 +4,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #f4f4f4;
+  background-color: #fff;
   overflow: hidden;
   box-sizing: border-box;
 }