@clikvn/showroom-visualizer 0.5.0 → 0.5.1-dev-02

package/example/src/components/CustomComponents/SearchAndDiscoveryComponents.tsx

@@ -0,0 +1,207 @@
+import {
+  SearchAndDiscoverySlideIn as SearchAndDiscoverySlideInDefault,
+  TourInfoActionPart as TourInfoActionPartDefault,
+  ScenarioPart as ScenarioPartDefault,
+  PromotionPart as PromotionPartDefault,
+  PoiInfoActionPart as PoiInfoActionPartDefault,
+  DisplayActionPart as DisplayActionPartDefault,
+  HelpActionPart as HelpActionPartDefault,
+} from '@clikvn/showroom-visualizer';
+
+// 🔍 Custom SearchAndDiscoverySlideIn Component
+export const CustomSearchAndDiscoverySlideIn = (props: any) => {
+  return <SearchAndDiscoverySlideInDefault {...props} />;
+};
+
+// 🏢 Custom TourInfoActionPart
+export const CustomTourInfoActionPart = (props: any) => {
+  return (
+    <div
+      style={{
+        background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4)',
+        padding: '15px',
+        borderRadius: '8px',
+        margin: '10px 0',
+      }}
+    >
+      <h4 style={{ color: 'white', margin: '0 0 10px 0' }}>
+        🏢 Tour Information
+      </h4>
+      <div style={{ opacity: 0.9 }}>
+        <TourInfoActionPartDefault {...props} />
+      </div>
+    </div>
+  );
+};
+
+// 🎬 Custom ScenarioPart
+export const CustomScenarioPart = (props: any) => {
+  return (
+    <div
+      style={{
+        background: 'linear-gradient(45deg, #f093fb, #f5576c)',
+        padding: '15px',
+        borderRadius: '8px',
+        margin: '10px 0',
+      }}
+    >
+      <h4 style={{ color: 'white', margin: '0 0 10px 0' }}>🎬 Scenarios</h4>
+      <div style={{ filter: 'brightness(1.1)' }}>
+        <ScenarioPartDefault {...props} />
+      </div>
+    </div>
+  );
+};
+
+// 🎁 Custom PromotionPart
+export const CustomPromotionPart = (props: any) => {
+  return (
+    <div
+      style={{
+        background: 'linear-gradient(45deg, #fa709a, #fee140)',
+        padding: '15px',
+        borderRadius: '8px',
+        margin: '10px 0',
+        border: '2px dashed #fff',
+      }}
+    >
+      <h4 style={{ color: 'white', margin: '0 0 10px 0' }}>
+        🎁 Special Promotions
+      </h4>
+      <PromotionPartDefault {...props} />
+    </div>
+  );
+};
+
+// 📍 Custom PoiInfoActionPart
+export const CustomPoiInfoActionPart = (props: any) => {
+  return (
+    <div
+      style={{
+        background: 'linear-gradient(45deg, #a8edea, #fed6e3)',
+        padding: '15px',
+        borderRadius: '8px',
+        margin: '10px 0',
+      }}
+    >
+      <h4 style={{ color: '#333', margin: '0 0 10px 0' }}>
+        📍 Points of Interest
+      </h4>
+      <PoiInfoActionPartDefault {...props} />
+    </div>
+  );
+};
+
+// 🎨 Custom DisplayActionPart
+export const CustomDisplayActionPart = (props: any) => {
+  return (
+    <div
+      style={{
+        background: 'linear-gradient(45deg, #ffecd2, #fcb69f)',
+        padding: '15px',
+        borderRadius: '8px',
+        margin: '10px 0',
+      }}
+    >
+      <h4 style={{ color: '#333', margin: '0 0 10px 0' }}>
+        🎨 Display Options
+      </h4>
+      <DisplayActionPartDefault {...props} />
+    </div>
+  );
+};
+
+// ❓ Custom HelpActionPart
+export const CustomHelpActionPart = (props: any) => {
+  return (
+    <div
+      style={{
+        background: 'linear-gradient(45deg, #89f7fe, #66a6ff)',
+        padding: '15px',
+        borderRadius: '8px',
+        margin: '10px 0',
+        boxShadow: '0 3px 10px rgba(0,0,0,0.2)',
+      }}
+    >
+      <h4 style={{ color: 'white', margin: '0 0 10px 0' }}>
+        ❓ Help & Support
+      </h4>
+      <HelpActionPartDefault {...props} />
+    </div>
+  );
+};
+
+// 🎯 Custom ContentItem Component
+export const CustomContentItem = (props: any) => {
+  const {
+    dataKey,
+    icon,
+    title,
+    onClick,
+    type,
+    itemRight,
+    handleTitleRenderer,
+  } = props;
+
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (onClick) onClick(dataKey);
+  };
+
+  return (
+    <div
+      onClick={handleClick}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '12px 16px',
+        margin: '4px 0',
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        borderRadius: '8px',
+        cursor: type === 'button' ? 'pointer' : 'default',
+        transition: 'all 0.3s ease',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.transform = 'translateX(5px)';
+        e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.2)';
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.transform = 'translateX(0)';
+        e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+        {icon && (
+          <div
+            style={{
+              width: '32px',
+              height: '32px',
+              borderRadius: '50%',
+              background: 'rgba(255,255,255,0.2)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <i className={icon} style={{ color: 'white', fontSize: '16px' }} />
+          </div>
+        )}
+        <span style={{ color: 'white', fontWeight: '500', fontSize: '14px' }}>
+          {handleTitleRenderer ? handleTitleRenderer() : title}
+        </span>
+      </div>
+      {itemRight && <div style={{ color: 'white' }}>{itemRight}</div>}
+    </div>
+  );
+};
+
+export const CustomScenarioItem = (props: any) => {
+  return <div>test</div>;
+};
+
+export const CustomCardItem = (props: any) => {
+  return <div>test card item</div>;
+};

package/example/src/components/CustomComponents/index.tsx

@@ -0,0 +1,7 @@
+// Export all custom components from a single entry point
+export * from './FloorplanComponents';
+export * from './PinActionsComponents';
+export * from './SearchAndDiscoveryComponents';
+export * from './HotspotCategoryComponents';
+export * from './PlayBarComponents';
+export * from './PoiDetailComponents';

package/example/src/css-modules.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const content: string;
+  export default content;
+}

package/example/src/hooks/useCustomLayout.ts

@@ -0,0 +1,328 @@
+import {
+  CustomMarker,
+  FloorplanMinimapDefault,
+  CustomPinActions,
+  CustomPinActionButton,
+  CustomPinActionButtonWithTooltip,
+  CustomSearchAndDiscoverySlideIn,
+  CustomTourInfoActionPart,
+  CustomScenarioPart,
+  CustomPromotionPart,
+  CustomPoiInfoActionPart,
+  CustomDisplayActionPart,
+  CustomHelpActionPart,
+  CustomContentItem,
+  CustomScenarioItem,
+  CustomCardItem,
+  CustomHotspotCategorySlideIn,
+  CustomScenarioSlideIn,
+  CustomSpaceAndSceneSlideIn,
+  CustomFeatureSlideIn,
+  CustomProductSlideIn,
+  CustomPoiSlideIn,
+  CustomPlayBarTooltip,
+  CustomPlayBarButton,
+  CustomPoiDetailDrawer,
+  CustomPoiDetailBottomSheet,
+  CustomProductDetailHeader,
+  CustomGroupActionButton,
+  CustomTabs,
+  CustomTabsContent,
+  CustomInfo,
+  CustomGallery,
+  CustomArTab,
+} from '../components/CustomComponents';
+
+type CustomLayoutState = {
+  // General
+  enableCustomLayout: boolean;
+
+  // Floorplan/Minimap
+  customMinimap: boolean;
+  customMarker: boolean;
+
+  // PinActions
+  customPinActions: boolean;
+  customPinActionButton: boolean;
+  customPinActionButtonWithTooltip: boolean;
+
+  // SearchAndDiscoverySlideIn
+  customSearchAndDiscovery: boolean;
+  customTourInfoActionPart: boolean;
+  customScenarioPart: boolean;
+  customPromotionPart: boolean;
+  customPoiInfoActionPart: boolean;
+  customDisplayActionPart: boolean;
+  customHelpActionPart: boolean;
+  customContentItem: boolean;
+  customScenarioItem: boolean;
+  customCardItem: boolean;
+
+  // HotspotCategorySlideIn
+  customHotspotCategorySlideIn: boolean;
+  customScenarioSlideIn: boolean;
+  customSpaceAndSceneSlideIn: boolean;
+  customFeatureSlideIn: boolean;
+  customProductSlideIn: boolean;
+  customPoiSlideIn: boolean;
+
+  // PlayBar
+  customPlayBarTooltip: boolean;
+  customPlayBarButton: boolean;
+
+  // PoiDetailSlideIn
+  customPoiDetailDrawer: boolean;
+  customPoiDetailBottomSheet: boolean;
+  customProductDetailHeader: boolean;
+  customGroupActionButton: boolean;
+  customTabs: boolean;
+  customTabsContent: boolean;
+  customInfo: boolean;
+  customGallery: boolean;
+  customArTab: boolean;
+};
+
+export const useCustomLayout = (state: CustomLayoutState) => {
+  const buildCustomLayout = () => {
+    if (!state.enableCustomLayout) return {};
+
+    const layout: any = {};
+
+    // Floorplan/Minimap customizations
+    if (state.customMinimap || state.customMarker) {
+      layout.Floorplan = {};
+      if (state.customMinimap) {
+        layout.Floorplan.Minimap = {};
+        layout.Floorplan.Minimap.default = FloorplanMinimapDefault;
+        if (state.customMarker) {
+          layout.Floorplan.Minimap.Marker = CustomMarker;
+        }
+      }
+    }
+
+    // PinActions customizations
+    if (
+      state.customPinActions ||
+      state.customPinActionButton ||
+      state.customPinActionButtonWithTooltip
+    ) {
+      layout.PinActions = layout.PinActions || {};
+      if (state.customPinActions) {
+        layout.PinActions.default = CustomPinActions;
+      }
+      if (state.customPinActionButton) {
+        layout.PinActions.Button = CustomPinActionButton;
+      }
+      if (state.customPinActionButtonWithTooltip) {
+        layout.PinActions.ButtonWithTooltip = CustomPinActionButtonWithTooltip;
+      }
+    }
+
+    // SearchAndDiscoverySlideIn customizations
+    if (
+      state.customSearchAndDiscovery ||
+      state.customTourInfoActionPart ||
+      state.customScenarioPart ||
+      state.customPromotionPart ||
+      state.customPoiInfoActionPart ||
+      state.customDisplayActionPart ||
+      state.customHelpActionPart ||
+      state.customContentItem ||
+      state.customScenarioItem ||
+      state.customCardItem
+    ) {
+      layout.SearchAndDiscoverySlideIn = {};
+      if (state.customSearchAndDiscovery) {
+        layout.SearchAndDiscoverySlideIn.default =
+          CustomSearchAndDiscoverySlideIn;
+      }
+      if (state.customTourInfoActionPart || state.customContentItem) {
+        layout.SearchAndDiscoverySlideIn.TourInfoActionPart = {};
+        if (state.customTourInfoActionPart) {
+          layout.SearchAndDiscoverySlideIn.TourInfoActionPart.default =
+            CustomTourInfoActionPart;
+        }
+        if (state.customContentItem) {
+          layout.SearchAndDiscoverySlideIn.TourInfoActionPart.ContentItem =
+            CustomContentItem;
+        }
+      }
+      if (state.customScenarioPart || state.customScenarioItem) {
+        layout.SearchAndDiscoverySlideIn.ScenarioPart = {};
+        if (state.customScenarioPart) {
+          layout.SearchAndDiscoverySlideIn.ScenarioPart.default =
+            CustomScenarioPart;
+        }
+        if (state.customScenarioItem) {
+          layout.SearchAndDiscoverySlideIn.ScenarioPart.ScenarioItem =
+            CustomScenarioItem;
+        }
+      }
+      if (state.customPromotionPart || state.customCardItem) {
+        layout.SearchAndDiscoverySlideIn.PromotionPart = {};
+        if (state.customPromotionPart) {
+          layout.SearchAndDiscoverySlideIn.PromotionPart.default =
+            CustomPromotionPart;
+        }
+        if (state.customCardItem) {
+          layout.SearchAndDiscoverySlideIn.PromotionPart.CardItem =
+            CustomCardItem;
+        }
+      }
+      if (state.customPoiInfoActionPart || state.customContentItem) {
+        layout.SearchAndDiscoverySlideIn.PoiInfoActionPart =
+          layout.SearchAndDiscoverySlideIn.PoiInfoActionPart || {};
+        if (state.customPoiInfoActionPart) {
+          layout.SearchAndDiscoverySlideIn.PoiInfoActionPart.default =
+            CustomPoiInfoActionPart;
+        }
+        if (state.customContentItem) {
+          layout.SearchAndDiscoverySlideIn.PoiInfoActionPart.ContentItem =
+            CustomContentItem;
+        }
+      }
+      if (state.customDisplayActionPart || state.customContentItem) {
+        layout.SearchAndDiscoverySlideIn.DisplayActionPart =
+          layout.SearchAndDiscoverySlideIn.DisplayActionPart || {};
+        if (state.customDisplayActionPart) {
+          layout.SearchAndDiscoverySlideIn.DisplayActionPart.default =
+            CustomDisplayActionPart;
+        }
+        if (state.customContentItem) {
+          layout.SearchAndDiscoverySlideIn.DisplayActionPart.ContentItem =
+            CustomContentItem;
+        }
+      }
+      if (state.customHelpActionPart || state.customContentItem) {
+        layout.SearchAndDiscoverySlideIn.HelpActionPart =
+          layout.SearchAndDiscoverySlideIn.HelpActionPart || {};
+        if (state.customHelpActionPart) {
+          layout.SearchAndDiscoverySlideIn.HelpActionPart.default =
+            CustomHelpActionPart;
+        }
+        if (state.customContentItem) {
+          layout.SearchAndDiscoverySlideIn.HelpActionPart.ContentItem =
+            CustomContentItem;
+        }
+      }
+    }
+
+    // HotspotCategorySlideIn customizations
+    if (
+      state.customHotspotCategorySlideIn ||
+      state.customScenarioSlideIn ||
+      state.customSpaceAndSceneSlideIn ||
+      state.customFeatureSlideIn ||
+      state.customProductSlideIn ||
+      state.customPoiSlideIn
+    ) {
+      layout.HotspotCategorySlideIn = {};
+      if (state.customHotspotCategorySlideIn) {
+        layout.HotspotCategorySlideIn.default = CustomHotspotCategorySlideIn;
+      }
+      if (state.customScenarioSlideIn) {
+        layout.HotspotCategorySlideIn.ScenarioSlideIn = CustomScenarioSlideIn;
+      }
+      if (state.customSpaceAndSceneSlideIn) {
+        layout.HotspotCategorySlideIn.SpaceAndSceneSlideIn =
+          CustomSpaceAndSceneSlideIn;
+      }
+      if (state.customFeatureSlideIn) {
+        layout.HotspotCategorySlideIn.FeatureSlideIn = CustomFeatureSlideIn;
+      }
+      if (state.customProductSlideIn) {
+        layout.HotspotCategorySlideIn.ProductSlideIn = CustomProductSlideIn;
+      }
+      if (state.customPoiSlideIn) {
+        layout.HotspotCategorySlideIn.PoiSlideIn = CustomPoiSlideIn;
+      }
+    }
+
+    // PlayBar customizations
+    if (state.customPlayBarTooltip || state.customPlayBarButton) {
+      layout.PlayBar = {};
+      if (state.customPlayBarTooltip) {
+        layout.PlayBar.Tooltip = CustomPlayBarTooltip;
+      }
+      if (state.customPlayBarButton) {
+        layout.PlayBar.Button = CustomPlayBarButton;
+      }
+    }
+
+    // PoiDetailSlideIn customizations
+    if (
+      state.customPoiDetailDrawer ||
+      state.customPoiDetailBottomSheet ||
+      state.customProductDetailHeader ||
+      state.customGroupActionButton ||
+      state.customTabs ||
+      state.customTabsContent ||
+      state.customInfo ||
+      state.customGallery ||
+      state.customArTab
+    ) {
+      layout.PoiDetailSlideIn = {};
+
+      if (state.customPoiDetailDrawer) {
+        layout.PoiDetailSlideIn.Drawer = CustomPoiDetailDrawer;
+      }
+      if (state.customPoiDetailBottomSheet) {
+        layout.PoiDetailSlideIn.BottomSheet = CustomPoiDetailBottomSheet;
+      }
+
+      if (
+        state.customProductDetailHeader ||
+        state.customGroupActionButton ||
+        state.customTabs ||
+        state.customTabsContent ||
+        state.customInfo ||
+        state.customGallery ||
+        state.customArTab
+      ) {
+        layout.PoiDetailSlideIn.ProductDetail = {};
+
+        if (state.customProductDetailHeader) {
+          layout.PoiDetailSlideIn.ProductDetail.Header =
+            CustomProductDetailHeader;
+        }
+        if (state.customGroupActionButton) {
+          layout.PoiDetailSlideIn.ProductDetail.GroupActionButton =
+            CustomGroupActionButton;
+        }
+        if (state.customTabs) {
+          layout.PoiDetailSlideIn.ProductDetail.Tabs = CustomTabs;
+        }
+        if (state.customTabsContent) {
+          layout.PoiDetailSlideIn.ProductDetail.TabsContent = CustomTabsContent;
+        }
+
+        if (state.customInfo || state.customGallery || state.customArTab) {
+          layout.PoiDetailSlideIn.ProductDetail.TabsContent =
+            layout.PoiDetailSlideIn.ProductDetail.TabsContent || {};
+          if (
+            typeof layout.PoiDetailSlideIn.ProductDetail.TabsContent !==
+            'object'
+          ) {
+            layout.PoiDetailSlideIn.ProductDetail.TabsContent = {};
+          }
+
+          if (state.customInfo) {
+            layout.PoiDetailSlideIn.ProductDetail.TabsContent.Info = CustomInfo;
+          }
+          if (state.customGallery) {
+            layout.PoiDetailSlideIn.ProductDetail.TabsContent.Gallery =
+              CustomGallery;
+          }
+          if (state.customArTab) {
+            layout.PoiDetailSlideIn.ProductDetail.TabsContent.ArTab =
+              CustomArTab;
+          }
+        }
+      }
+    }
+
+    return layout;
+  };
+
+  return { buildCustomLayout };
+};

package/example/src/index.css

@@ -0,0 +1,31 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  background: #f4f4f4;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 13px;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
+
+.custom-minimap-marker .marker__content {
+  background-color: red !important;
+}

package/example/src/main.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+

package/example/tailwind.config.cjs

@@ -1,12 +1,12 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  // Extend the parent tailwind config
-  presets: [require('../tailwind.config.cjs')],
-  content: [
-    './index.html',
-    './src/**/*.{js,ts,jsx,tsx}',
-    // Include parent library source files
-    '../src/**/*.{js,ts,jsx,tsx}',
-  ],
-  important: true,
-};
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  // Extend the parent tailwind config
+  presets: [require('../tailwind.config.cjs')],
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+    // Include parent library source files
+    '../src/**/*.{js,ts,jsx,tsx}',
+  ],
+  important: true,
+};

package/example/tsconfig.node.json

@@ -1,12 +1,12 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true
-  },
-  "include": ["vite.config.ts"]
-}
-
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
+