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

package/example/src/components/ControlPanel.tsx

@@ -0,0 +1,736 @@
+import { FC } from 'react';
+
+type ControlPanelProps = {
+  // General
+  enableCustomLayout: boolean;
+  language: 'vi' | 'en';
+  onEnableCustomLayoutChange: (value: boolean) => void;
+  onLanguageChange: (value: 'vi' | 'en') => void;
+
+  // Floorplan/Minimap
+  customMinimap: boolean;
+  customMarker: boolean;
+  onCustomMinimapChange: (value: boolean) => void;
+  onCustomMarkerChange: (value: boolean) => void;
+
+  // PinActions
+  customPinActions: boolean;
+  customPinActionButton: boolean;
+  customPinActionButtonWithTooltip: boolean;
+  onCustomPinActionsChange: (value: boolean) => void;
+  onCustomPinActionButtonChange: (value: boolean) => void;
+  onCustomPinActionButtonWithTooltipChange: (value: boolean) => void;
+
+  // SearchAndDiscoverySlideIn
+  customSearchAndDiscovery: boolean;
+  customTourInfoActionPart: boolean;
+  customScenarioPart: boolean;
+  customPromotionPart: boolean;
+  customPoiInfoActionPart: boolean;
+  customDisplayActionPart: boolean;
+  customHelpActionPart: boolean;
+  customContentItem: boolean;
+  customScenarioItem: boolean;
+  customCardItem: boolean;
+  onCustomSearchAndDiscoveryChange: (value: boolean) => void;
+  onCustomTourInfoActionPartChange: (value: boolean) => void;
+  onCustomScenarioPartChange: (value: boolean) => void;
+  onCustomPromotionPartChange: (value: boolean) => void;
+  onCustomPoiInfoActionPartChange: (value: boolean) => void;
+  onCustomDisplayActionPartChange: (value: boolean) => void;
+  onCustomHelpActionPartChange: (value: boolean) => void;
+  onCustomContentItemChange: (value: boolean) => void;
+  onCustomScenarioItemChange: (value: boolean) => void;
+  onCustomCardItemChange: (value: boolean) => void;
+
+  // HotspotCategorySlideIn
+  customHotspotCategorySlideIn: boolean;
+  customScenarioSlideIn: boolean;
+  customSpaceAndSceneSlideIn: boolean;
+  customFeatureSlideIn: boolean;
+  customProductSlideIn: boolean;
+  customPoiSlideIn: boolean;
+  onCustomHotspotCategorySlideInChange: (value: boolean) => void;
+  onCustomScenarioSlideInChange: (value: boolean) => void;
+  onCustomSpaceAndSceneSlideInChange: (value: boolean) => void;
+  onCustomFeatureSlideInChange: (value: boolean) => void;
+  onCustomProductSlideInChange: (value: boolean) => void;
+  onCustomPoiSlideInChange: (value: boolean) => void;
+
+  // PlayBar
+  customPlayBarTooltip: boolean;
+  customPlayBarButton: boolean;
+  onCustomPlayBarTooltipChange: (value: boolean) => void;
+  onCustomPlayBarButtonChange: (value: boolean) => void;
+
+  // PoiDetailSlideIn
+  customPoiDetailDrawer: boolean;
+  customPoiDetailBottomSheet: boolean;
+  customProductDetailHeader: boolean;
+  customGroupActionButton: boolean;
+  customTabs: boolean;
+  customTabsContent: boolean;
+  customInfo: boolean;
+  customGallery: boolean;
+  customArTab: boolean;
+  onCustomPoiDetailDrawerChange: (value: boolean) => void;
+  onCustomPoiDetailBottomSheetChange: (value: boolean) => void;
+  onCustomProductDetailHeaderChange: (value: boolean) => void;
+  onCustomGroupActionButtonChange: (value: boolean) => void;
+  onCustomTabsChange: (value: boolean) => void;
+  onCustomTabsContentChange: (value: boolean) => void;
+  onCustomInfoChange: (value: boolean) => void;
+  onCustomGalleryChange: (value: boolean) => void;
+  onCustomArTabChange: (value: boolean) => void;
+};
+
+const ControlPanel: FC<ControlPanelProps> = (props) => {
+  return (
+    <div
+      style={{
+        background: '#1a1a1a',
+        color: 'white',
+        padding: '16px',
+        maxHeight: '40vh',
+        overflowY: 'auto',
+        borderBottom: '2px solid #333',
+      }}
+    >
+      <h2 style={{ margin: '0 0 16px 0', fontSize: '18px' }}>
+        🎨 Custom UI Test Panel
+      </h2>
+
+      <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap' }}>
+        {/* General Settings */}
+        <div style={{ minWidth: '200px' }}>
+          <h3
+            style={{
+              fontSize: '14px',
+              marginBottom: '8px',
+              color: '#4ecdc4',
+            }}
+          >
+            ⚙️ General
+          </h3>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              marginBottom: '8px',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={props.enableCustomLayout}
+              onChange={(e) => props.onEnableCustomLayoutChange(e.target.checked)}
+            />
+            <span>Enable Custom Layout</span>
+          </label>
+          <label
+            style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
+          >
+            <select
+              value={props.language}
+              onChange={(e) =>
+                props.onLanguageChange(e.target.value as 'vi' | 'en')
+              }
+              style={{ padding: '4px 8px', borderRadius: '4px' }}
+            >
+              <option value="vi">Tiếng Việt</option>
+              <option value="en">English</option>
+            </select>
+          </label>
+        </div>
+
+        {/* Floorplan/Minimap Settings */}
+        <div style={{ minWidth: '200px' }}>
+          <h3
+            style={{
+              fontSize: '14px',
+              marginBottom: '8px',
+              color: '#9f7aea',
+            }}
+          >
+            🗺️ Floorplan/Minimap
+          </h3>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              marginBottom: '8px',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customMinimap}
+              onChange={(e) => props.onCustomMinimapChange(e.target.checked)}
+            />
+            <span>Custom Minimap</span>
+          </label>
+          <label
+            style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customMarker}
+              onChange={(e) => props.onCustomMarkerChange(e.target.checked)}
+              disabled={!props.customMinimap}
+            />
+            <span>Custom Marker</span>
+          </label>
+        </div>
+
+          {/* PinActions Settings */}
+          <div style={{ minWidth: '200px' }}>
+            <h3
+              style={{
+                fontSize: '14px',
+                marginBottom: '8px',
+                color: '#f6ad55',
+              }}
+            >
+              🎯 PinActions
+            </h3>
+            <label
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px',
+                marginBottom: '8px',
+              }}
+            >
+              <input
+                type="checkbox"
+                checked={props.customPinActions}
+                onChange={(e) => props.onCustomPinActionsChange(e.target.checked)}
+              />
+              <span>Custom PinActions</span>
+            </label>
+            <label
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px',
+                marginBottom: '8px',
+              }}
+            >
+              <input
+                type="checkbox"
+                checked={props.customPinActionButton}
+                onChange={(e) =>
+                  props.onCustomPinActionButtonChange(e.target.checked)
+                }
+              />
+              <span>Custom Button</span>
+            </label>
+            <label
+              style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
+            >
+              <input
+                type="checkbox"
+                checked={props.customPinActionButtonWithTooltip}
+                onChange={(e) =>
+                  props.onCustomPinActionButtonWithTooltipChange(e.target.checked)
+                }
+              />
+              <span>Custom ButtonWithTooltip</span>
+            </label>
+          </div>
+
+        {/* SearchAndDiscoverySlideIn Settings */}
+        <div style={{ minWidth: '200px' }}>
+          <h3
+            style={{
+              fontSize: '14px',
+              marginBottom: '8px',
+              color: '#38b2ac',
+            }}
+          >
+            🔍 SearchAndDiscovery
+          </h3>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              marginBottom: '8px',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customSearchAndDiscovery}
+              onChange={(e) =>
+                props.onCustomSearchAndDiscoveryChange(e.target.checked)
+              }
+            />
+            <span>Custom SlideIn</span>
+          </label>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              marginBottom: '8px',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customTourInfoActionPart}
+              onChange={(e) =>
+                props.onCustomTourInfoActionPartChange(e.target.checked)
+              }
+            />
+            <span>Custom TourInfo</span>
+          </label>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              marginBottom: '8px',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customScenarioPart}
+              onChange={(e) =>
+                props.onCustomScenarioPartChange(e.target.checked)
+              }
+            />
+            <span>Custom ScenarioPart</span>
+          </label>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              marginBottom: '8px',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customPromotionPart}
+              onChange={(e) =>
+                props.onCustomPromotionPartChange(e.target.checked)
+              }
+            />
+            <span>Custom PromotionPart</span>
+          </label>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              marginBottom: '8px',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customPoiInfoActionPart}
+              onChange={(e) =>
+                props.onCustomPoiInfoActionPartChange(e.target.checked)
+              }
+            />
+            <span>Custom PoiInfo</span>
+          </label>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              marginBottom: '8px',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customDisplayActionPart}
+              onChange={(e) =>
+                props.onCustomDisplayActionPartChange(e.target.checked)
+              }
+            />
+            <span>Custom DisplayPart</span>
+          </label>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              marginBottom: '8px',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customHelpActionPart}
+              onChange={(e) =>
+                props.onCustomHelpActionPartChange(e.target.checked)
+              }
+            />
+            <span>Custom HelpPart</span>
+          </label>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              marginBottom: '8px',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customContentItem}
+              onChange={(e) =>
+                props.onCustomContentItemChange(e.target.checked)
+              }
+            />
+            <span>Custom ContentItem</span>
+          </label>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              marginBottom: '8px',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customScenarioItem}
+              onChange={(e) =>
+                props.onCustomScenarioItemChange(e.target.checked)
+              }
+            />
+            <span>Custom ScenarioItem</span>
+          </label>
+          <label
+            style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customCardItem}
+              onChange={(e) => props.onCustomCardItemChange(e.target.checked)}
+            />
+            <span>Custom CardItem</span>
+          </label>
+        </div>
+
+        {/* HotspotCategorySlideIn Settings */}
+        <div style={{ minWidth: '200px' }}>
+          <h3
+            style={{
+              fontSize: '14px',
+              marginBottom: '8px',
+              color: '#fc8181',
+            }}
+          >
+            🏠 HotspotCategory
+          </h3>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              marginBottom: '8px',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customHotspotCategorySlideIn}
+              onChange={(e) =>
+                props.onCustomHotspotCategorySlideInChange(e.target.checked)
+              }
+            />
+            <span>Custom SlideIn</span>
+          </label>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              marginBottom: '8px',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customScenarioSlideIn}
+              onChange={(e) =>
+                props.onCustomScenarioSlideInChange(e.target.checked)
+              }
+            />
+            <span>Custom ScenarioSlideIn</span>
+          </label>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              marginBottom: '8px',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customSpaceAndSceneSlideIn}
+              onChange={(e) =>
+                props.onCustomSpaceAndSceneSlideInChange(e.target.checked)
+              }
+            />
+            <span>Custom SpaceAndScene</span>
+          </label>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              marginBottom: '8px',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customFeatureSlideIn}
+              onChange={(e) =>
+                props.onCustomFeatureSlideInChange(e.target.checked)
+              }
+            />
+            <span>Custom FeatureSlideIn</span>
+          </label>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              marginBottom: '8px',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customProductSlideIn}
+              onChange={(e) =>
+                props.onCustomProductSlideInChange(e.target.checked)
+              }
+            />
+            <span>Custom ProductSlideIn</span>
+          </label>
+          <label
+            style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customPoiSlideIn}
+              onChange={(e) =>
+                props.onCustomPoiSlideInChange(e.target.checked)
+              }
+            />
+            <span>Custom PoiSlideIn</span>
+          </label>
+        </div>
+
+        {/* PlayBar Settings */}
+        <div style={{ minWidth: '200px' }}>
+          <h3
+            style={{
+              fontSize: '14px',
+              marginBottom: '8px',
+              color: '#ff6b6b',
+            }}
+          >
+            🎵 PlayBar
+          </h3>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              marginBottom: '8px',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customPlayBarTooltip}
+              onChange={(e) =>
+                props.onCustomPlayBarTooltipChange(e.target.checked)
+              }
+            />
+            <span>Custom Tooltip</span>
+          </label>
+          <label
+            style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customPlayBarButton}
+              onChange={(e) =>
+                props.onCustomPlayBarButtonChange(e.target.checked)
+              }
+            />
+            <span>Custom Button</span>
+          </label>
+        </div>
+
+        {/* PoiDetailSlideIn Settings */}
+        <div style={{ minWidth: '200px' }}>
+          <h3
+            style={{
+              fontSize: '14px',
+              marginBottom: '8px',
+              color: '#48bb78',
+            }}
+          >
+            📦 PoiDetailSlideIn
+          </h3>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              marginBottom: '8px',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customPoiDetailDrawer}
+              onChange={(e) =>
+                props.onCustomPoiDetailDrawerChange(e.target.checked)
+              }
+            />
+            <span>Custom Drawer</span>
+          </label>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              marginBottom: '8px',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customPoiDetailBottomSheet}
+              onChange={(e) =>
+                props.onCustomPoiDetailBottomSheetChange(e.target.checked)
+              }
+            />
+            <span>Custom BottomSheet</span>
+          </label>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              marginBottom: '8px',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customProductDetailHeader}
+              onChange={(e) =>
+                props.onCustomProductDetailHeaderChange(e.target.checked)
+              }
+            />
+            <span>Custom Header</span>
+          </label>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              marginBottom: '8px',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customGroupActionButton}
+              onChange={(e) =>
+                props.onCustomGroupActionButtonChange(e.target.checked)
+              }
+            />
+            <span>Custom Action Buttons</span>
+          </label>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              marginBottom: '8px',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customTabs}
+              onChange={(e) => props.onCustomTabsChange(e.target.checked)}
+            />
+            <span>Custom Tabs</span>
+          </label>
+          <label
+            style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customTabsContent}
+              onChange={(e) =>
+                props.onCustomTabsContentChange(e.target.checked)
+              }
+            />
+            <span>Custom TabsContent</span>
+          </label>
+        </div>
+
+        {/* TabsContent Sub-components */}
+        <div style={{ minWidth: '200px' }}>
+          <h3
+            style={{
+              fontSize: '14px',
+              marginBottom: '8px',
+              color: '#ed8936',
+            }}
+          >
+            📄 TabsContent
+          </h3>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              marginBottom: '8px',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customInfo}
+              onChange={(e) => props.onCustomInfoChange(e.target.checked)}
+            />
+            <span>Custom Info</span>
+          </label>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              marginBottom: '8px',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customGallery}
+              onChange={(e) => props.onCustomGalleryChange(e.target.checked)}
+            />
+            <span>Custom Gallery</span>
+          </label>
+          <label
+            style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
+          >
+            <input
+              type="checkbox"
+              checked={props.customArTab}
+              onChange={(e) => props.onCustomArTabChange(e.target.checked)}
+            />
+            <span>Custom AR Tab</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ControlPanel;
+