@blinkpage/composer-tools 1.0.0

package/composer-base-components/base/utitilities/iconList.ts

@@ -0,0 +1,65 @@
+import * as Icons from "react-icons/ai";
+import * as Icons2 from "react-icons/bi";
+import * as Icons3 from "react-icons/bs";
+import * as Icons4 from "react-icons/cg";
+import * as Icons5 from "react-icons/ci";
+import * as Icons6 from "react-icons/di";
+import * as Icons7 from "react-icons/fa";
+import * as Icons8 from "react-icons/fa6";
+import * as Icons9 from "react-icons/fc";
+import * as Icons10 from "react-icons/fi";
+import * as Icons11 from "react-icons/gi";
+import * as Icons12 from "react-icons/go";
+import * as Icons13 from "react-icons/gr";
+import * as Icons14 from "react-icons/hi";
+import * as Icons15 from "react-icons/hi2";
+import * as Icons16 from "react-icons/im";
+import * as Icons17 from "react-icons/io";
+import * as Icons18 from "react-icons/io5";
+import * as Icons19 from "react-icons/lia";
+import * as Icons20 from "react-icons/lu";
+import * as Icons21 from "react-icons/md";
+import * as Icons22 from "react-icons/pi";
+import * as Icons23 from "react-icons/ri";
+import * as Icons24 from "react-icons/rx";
+import * as Icons25 from "react-icons/si";
+import * as Icons26 from "react-icons/sl";
+import * as Icons27 from "react-icons/tb";
+import * as Icons28 from "react-icons/tfi";
+import * as Icons29 from "react-icons/ti";
+import * as Icons30 from "react-icons/vsc";
+import * as Icons31 from "react-icons/wi";
+
+export const iconLibraries: any = [
+    Icons,
+    Icons2,
+    Icons3,
+    Icons4,
+    Icons5,
+    Icons6,
+    Icons7,
+    Icons8,
+    Icons9,
+    Icons10,
+    // Icons11,
+    Icons12,
+    Icons13,
+    Icons14,
+    Icons15,
+    Icons16,
+    Icons17,
+    Icons18,
+    Icons19,
+    Icons20,
+    Icons21,
+    // Icons22,
+    Icons23,
+    Icons24,
+    Icons25,
+    Icons26,
+    // Icons27,
+    Icons28,
+    Icons29,
+    Icons30,
+    Icons31,
+]

package/composer-base-components/base/utitilities/viewports.module.scss

@@ -0,0 +1,2 @@
+$composer-phone-width: 640px;
+$composer-tablet-width: 1024px;

package/composer-base-components/close/close.module.scss

@@ -0,0 +1,16 @@
+.container{
+    text-decoration: unset;
+}
+
+.custom-modal{
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba($color: #000000, $alpha: 0.5);
+    z-index: 1000;
+}

package/composer-base-components/close/close.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { ModalService } from "../modal";
+
+interface iComposerModalClose {
+  children: React.ReactNode;
+}
+function ComposerModalClose({ children }: iComposerModalClose) {
+  const handleClose = () => {
+    ModalService.emit("close", true);
+  };
+  return <div onClick={handleClose}>{children}</div>;
+}
+
+export default ComposerModalClose;

package/composer-base-components/embeded-link/embeded-link.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useRef } from "react";
+
+type ComposerEmbededLinkProps = {
+  path: string;
+  className?: string;
+};
+
+export function ComposerEmbededLink({ path, className }: ComposerEmbededLinkProps): React.JSX.Element {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = ref.current;
+    if (!container) return;
+
+    container.innerHTML = "";
+
+    const temp = document.createElement("div");
+    temp.innerHTML = path;
+
+    Array.from(temp.childNodes).forEach((node) => {
+      container.appendChild(node.cloneNode(true));
+    });
+    const scripts = container.querySelectorAll("script");
+    scripts.forEach((oldScript) => {
+      const newScript = document.createElement("script");
+      for (let i = 0; i < oldScript.attributes.length; i++) {
+        const attr = oldScript.attributes[i];
+        newScript.setAttribute(attr.name, attr.value);
+      }
+      if (oldScript.textContent) {
+        newScript.textContent = oldScript.textContent;
+      }
+      oldScript.parentNode?.replaceChild(newScript, oldScript);
+    });
+  }, [path]);
+
+  return <div className={className} ref={ref} />;
+}

package/composer-base-components/map/map.tsx

@@ -0,0 +1,267 @@
+import { Map, Marker, useMap } from "@vis.gl/react-google-maps";
+import React, { memo, useEffect, useState, useRef } from "react";
+import { createRoot } from "react-dom/client";
+
+type Coordinate = {
+  icon: {
+    url: string;
+    scaledSize: {
+      width: number;
+      height: number;
+    };
+  };
+  content?: React.ReactNode;
+  lat: number;
+  lng: number;
+};
+
+interface ComposerMapProps {
+  markers: Coordinate[];
+  className: string;
+  defaultMarkerIcon?: string;
+  defaultZoom?: number;
+  handleMarkerZoom?: number;
+  allContentShow?: boolean;
+  styles?: google.maps.MapTypeStyle[];
+  customSelectedMarker?: any;
+}
+
+const ComposerMap = memo(({ markers, className, defaultMarkerIcon, defaultZoom, allContentShow, handleMarkerZoom, styles, customSelectedMarker }: ComposerMapProps) => {
+  const uniqueMapIdRef = useRef<string>(Math.random().toString());
+  const uniqueMapId = uniqueMapIdRef.current;
+  const map = useMap(uniqueMapId);
+
+  const [selectedMarkers, setSelectedMarkers] = useState<Coordinate[]>([]);
+  const overlayRefs = useRef<(any | null)[]>([]);
+  const prevMarkersRef = useRef<Coordinate[]>([]);
+
+  const getCenter = (bounds: { north: number; south: number; east: number; west: number }) => {
+    const lat = (bounds.north + bounds.south) / 2;
+    const lng = (bounds.east + bounds.west) / 2;
+    return { lat, lng };
+  };
+
+  const getBounds = () => {
+    if (markers.length === 0) return null;
+
+    const lngs = markers.map((marker) => marker.lng);
+    const lats = markers.map((marker) => marker.lat);
+
+    const north = Math.max(...lats);
+    const south = Math.min(...lats);
+    const east = Math.max(...lngs);
+    const west = Math.min(...lngs);
+
+    return { north, south, east, west };
+  };
+
+  useEffect(() => {
+    if (allContentShow) {
+      setSelectedMarkers(markers);
+    } else {
+      setSelectedMarkers([]);
+    }
+  }, [allContentShow]);
+
+  useEffect(() => {
+    if (!map || markers.length === 0) return;
+
+    const fitMapToMarkers = () => {
+      const bounds = new google.maps.LatLngBounds();
+      markers.forEach((marker) => bounds.extend(new google.maps.LatLng(marker.lat, marker.lng)));
+
+      map.fitBounds(bounds);
+
+      google.maps.event.addListenerOnce(map, "idle", () => {
+        const currentZoom = map.getZoom();
+        if (markers.length > 1) {
+          map.setZoom(defaultZoom !== undefined ? defaultZoom : currentZoom);
+        } else {
+          map.setZoom(defaultZoom !== undefined ? defaultZoom : 5);
+        }
+      });
+    };
+
+    fitMapToMarkers();
+
+    return () => {
+      google.maps.event.clearListeners(map, "idle");
+    };
+  }, [map, defaultZoom, JSON.stringify(markers.map((marker) => ({ lat: marker.lat, lng: marker.lng })))]);
+
+  useEffect(() => {
+    if (map) {
+      if (markers.length === 0) {
+        map.setCenter({ lat: 0, lng: 0 });
+        map.setZoom(1);
+      }
+    }
+  }, [map, markers]);
+
+  useEffect(() => {
+    if (map && defaultZoom !== undefined) {
+      const currentZoom = map.getZoom();
+      if (defaultZoom !== currentZoom) {
+        map.setZoom(defaultZoom || 5);
+      }
+    }
+  }, [map, defaultZoom]);
+
+  useEffect(() => {
+    if (!map) return;
+
+    const bounds = getBounds();
+    if (!bounds) return;
+
+    const calculatedCenter = getCenter(bounds);
+
+    const hasMarkersChanged = (markers: Coordinate[], prevMarkers: Coordinate[]) => {
+      if (markers.length !== prevMarkers.length) {
+        return true;
+      }
+
+      return markers.some((marker, index) => {
+        const prevMarker = prevMarkers[index];
+        return prevMarker && (marker.lat !== prevMarker.lat || marker.lng !== prevMarker.lng);
+      });
+    };
+
+    if (hasMarkersChanged(markers, prevMarkersRef.current)) {
+      map.fitBounds(bounds);
+      map.setCenter(calculatedCenter);
+      map.panTo(calculatedCenter);
+    }
+
+    prevMarkersRef.current = markers;
+  }, [map, markers]);
+
+  const defaultMarker = defaultMarkerIcon || "https://storage.googleapis.com/download/storage/v1/b/hq-composer-0b0f0/o/66dffd65343034002c462ded?alt=media&timestamp=1725955430378";
+
+  const createOverlayView = (marker: Coordinate) => {
+    const customStyle: React.CSSProperties = {
+      position: "absolute",
+      zIndex: 1000,
+      pointerEvents: "auto",
+      transform: "translate(-50%, -100%)",
+    };
+
+    class CustomOverlay extends google.maps.OverlayView {
+      div: HTMLDivElement | null = null;
+      position: google.maps.LatLng;
+
+      constructor(position: google.maps.LatLng) {
+        super();
+        this.position = position;
+      }
+
+      onAdd() {
+        this.div = document.createElement("div");
+        Object.assign(this.div.style, customStyle);
+
+        const root = createRoot(this.div);
+        if (marker.content) {
+          root.render(marker.content);
+        }
+
+        const panes = this.getPanes();
+        if (panes) panes.overlayMouseTarget.appendChild(this.div);
+      }
+
+      draw() {
+        if (this.div) {
+          const projection = this.getProjection();
+          if (projection) {
+            const point = projection.fromLatLngToDivPixel(this.position);
+            if (point) {
+              this.div.style.left = `${point.x}px`;
+              this.div.style.top = `${point.y - 35}px`;
+            }
+          }
+        }
+      }
+
+      onRemove() {
+        if (this.div && this.div.parentNode) {
+          this.div.parentNode.removeChild(this.div);
+          const root = createRoot(this.div);
+          root.unmount();
+        }
+      }
+    }
+
+    return CustomOverlay;
+  };
+
+  const prevSelectedMarkersCountRef = useRef<number>(0);
+
+  useEffect(() => {
+    if (map) {
+      map.setOptions({ styles });
+
+      if (selectedMarkers.length !== prevSelectedMarkersCountRef.current) {
+        overlayRefs.current.forEach((overlay) => overlay && overlay.setMap(null));
+        overlayRefs.current = [];
+
+        selectedMarkers.forEach((marker) => {
+          const overlayClass = createOverlayView(marker);
+          const overlay = new overlayClass(new google.maps.LatLng(marker.lat, marker.lng));
+          overlay.setMap(map);
+          overlayRefs.current.push(overlay);
+        });
+
+        prevSelectedMarkersCountRef.current = selectedMarkers.length;
+      }
+    }
+  }, [selectedMarkers, map, styles]);
+
+  useEffect(() => {
+    const activeMarkers = new Set(markers.map((m) => `${m.lat},${m.lng}`));
+
+    setSelectedMarkers((prev) => prev.filter((marker) => activeMarkers.has(`${marker.lat},${marker.lng}`)));
+  }, [markers]);
+
+  const handleMarkerClick = (marker: Coordinate) => {
+    setSelectedMarkers((prevSelectedMarkers) => {
+      const isMarkerSelected = prevSelectedMarkers.some((m) => m.lat === marker.lat && m.lng === marker.lng);
+      if (isMarkerSelected) {
+        return prevSelectedMarkers.filter((m) => !(m.lat === marker.lat && m.lng === marker.lng)); // Close
+      } else {
+        return [...prevSelectedMarkers, marker];
+      }
+    });
+
+    const offsetLat = -0.005;
+
+    map.setCenter({ lat: marker.lat - offsetLat, lng: marker.lng });
+    map.setZoom(handleMarkerZoom || 15);
+  };
+
+  useEffect(() => {
+    if (customSelectedMarker && map) {
+      const markerToSelect = markers.find((marker) => marker.lat === customSelectedMarker.lat && marker.lng === customSelectedMarker.lng);
+
+      if (markerToSelect) {
+        handleMarkerClick(markerToSelect);
+      }
+    }
+  }, [customSelectedMarker]);
+
+  return (
+    <Map id={uniqueMapId} className={className}>
+      {markers.map((marker, index) => (
+        <Marker
+          key={index}
+          position={{ lat: marker.lat, lng: marker.lng }}
+          title="Location"
+          icon={{
+            url: marker.icon.url || defaultMarker,
+            scaledSize: new google.maps.Size(marker.icon?.scaledSize.width || 32, marker.icon?.scaledSize.height || 32),
+          }}
+          onClick={() => handleMarkerClick(marker)}
+        />
+      ))}
+    </Map>
+  );
+});
+
+export default ComposerMap;

package/composer-base-components/modal/index.ts

@@ -0,0 +1,4 @@
+import ComposerModal from "./modal";
+import ModalService from "./modal.service"
+
+export {ComposerModal, ModalService}

package/composer-base-components/modal/modal.module.scss

@@ -0,0 +1,19 @@
+.custom-modal{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba($color: #000000, $alpha: 0.5);
+    z-index: 1000;
+    container-type: inline-size;
+    > div{
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}

package/composer-base-components/modal/modal.service.ts

@@ -0,0 +1,27 @@
+interface Events {
+  [key: string]: Function[];
+}
+
+class ModalService {
+  public events: Events;
+  constructor(events?: Events) {
+    this.events = events || {};
+  }
+
+  public subscribe(name: string, cb: Function) {
+    (this.events[name] || (this.events[name] = [])).push(cb);
+
+    return {
+      unsubscribe: () =>
+        this.events[name] &&
+        this.events[name].splice(this.events[name].indexOf(cb) >>> 0, 1),
+    };
+  }
+
+  public emit(name: string, ...args: any[]): void {
+    (this.events[name] || []).forEach((fn) => fn(...args));
+  }
+}
+const newModel = new ModalService()
+
+export default newModel;

package/composer-base-components/modal/modal.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import styles from "./modal.module.scss";
+
+interface iComposerModal {
+  children: React.ReactNode;
+  open: boolean;
+  onClose: () => void;
+  id: string;
+}
+function ComposerModal({ children, open, onClose, id }: iComposerModal) {
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <div onClick={onClose} className={styles["custom-modal"]}>
+      <div onClick={(event: any) => event.stopPropagation()} id={id}>{children}</div>
+    </div>
+  );
+}
+
+export default ComposerModal;

package/composer-base-components/slider/slider.tsx

@@ -0,0 +1,120 @@
+import React, { forwardRef, useEffect, useRef, useState, useCallback } from "react";
+import Slider, { Settings } from "react-slick";
+import { debounce } from "lodash";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+
+function shallowEqual(objA: any, objB: any) {
+  if (objA === objB) return true;
+  if (!objA || !objB) return false;
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) return false;
+  for (let key of keysA) {
+    if (objA[key] !== objB[key]) return false;
+  }
+  return true;
+}
+
+const ComposerSlider = forwardRef<Slider, Settings>((props, ref) => {
+  // Manual memoization for props
+  const memoizedPropsRef = useRef<Settings>({ ...props });
+  if (!shallowEqual(props, memoizedPropsRef.current)) {
+    memoizedPropsRef.current = { ...props };
+  }
+  const memoizedProps = memoizedPropsRef.current;
+
+  const [sliderSettings, setSliderSettings] = useState<Settings>({ ...memoizedProps, responsive: [] });
+  const sliderRef = useRef<Slider>(null);
+
+  // Combine the forwarded ref with our local ref
+  const setRef = (slider: Slider) => {
+    sliderRef.current = slider;
+
+    // Handle the forwarded ref
+    if (!ref) return;
+
+    if (typeof ref === "function") {
+      ref(slider);
+      return;
+    }
+
+    ref.current = slider;
+  };
+
+  const restartSlider = useCallback(
+    debounce(() => {
+      const newProps = {
+        ...memoizedProps,
+        slidesToShow: memoizedProps.slidesToShow || 1,
+        slidesToScroll: memoizedProps.slidesToScroll || 1
+      };
+      setSliderSettings({ ...newProps, responsive: [] });
+      if (memoizedProps.autoplay) {
+        sliderRef.current?.slickPlay();
+      }
+    }, 200),
+    [memoizedProps]
+  );
+
+  useEffect(() => {
+    if (!memoizedProps.responsive) {
+      restartSlider();return;
+    }
+
+    const sortedBreakpoints = [...memoizedProps.responsive].sort((a, b) => a.breakpoint - b.breakpoint);
+
+    const updateSlidesToShow = (width: number) => {
+      const matchedBreakpoint = sortedBreakpoints.find(({ breakpoint }) => width <= breakpoint);
+
+      if (matchedBreakpoint?.settings) {
+        setSliderSettings((prev) => ({
+          ...prev,
+          ...(matchedBreakpoint.settings as Settings),
+          autoplay: memoizedProps.autoplay,
+          autoplaySpeed: memoizedProps.autoplaySpeed,
+          responsive: []
+        }));
+        return;
+      }
+
+      setSliderSettings(memoizedProps);
+    };
+
+    const handleResize = (entries: ResizeObserverEntry[]) => {
+      if (entries.length > 0) {
+        updateSlidesToShow(sliderRef.current?.innerSlider?.list?.offsetWidth || entries[0].contentRect.width);
+      }
+    };
+
+    const observer = new ResizeObserver(handleResize);
+
+    // Observer on the slider element directly
+    const sliderElement = sliderRef.current && sliderRef.current.innerSlider?.list;
+
+    if (sliderElement) {
+      observer.observe(sliderElement);
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [memoizedProps, restartSlider]);
+
+  useEffect(() => {
+    setSliderSettings({ ...memoizedProps, responsive: [] });
+    if (memoizedProps.autoplay) {
+      sliderRef.current?.slickPlay?.();
+    } else {
+      sliderRef.current?.slickPause?.();
+    }
+  }, [memoizedProps.autoplay]);
+
+  return (
+    <Slider ref={setRef} {...sliderSettings}>
+      {memoizedProps.children}
+    </Slider>
+  );
+});
+
+export default ComposerSlider;

package/composer-base-components/ui/accordion/Accordion.module.scss

@@ -0,0 +1,46 @@
+@use "../../base/utitilities/viewports.module.scss" as *;
+
+.accordion {
+   display: flex;
+   flex-direction: column;
+
+   .accordionHeader {
+     display: flex;
+     align-items: center;
+     justify-content: space-between;
+     text-transform: capitalize;
+   }
+
+   .accordionTitle {
+    color: var(--composer-font-color-primary);
+     @container (max-width: #{$composer-tablet-width}) {
+       text-align: left !important;
+     }
+
+     @container (max-width: #{$composer-phone-width}) {
+       text-align: left !important;
+     }
+   }
+
+   .accordionContent {
+       max-height: 0;
+       overflow: hidden;
+       transition: max-height 0.4s ease-in-out;
+
+       &.open{
+        max-height: 500px;
+       }
+    }
+
+
+    .accordionIcon{
+      font-size: 1.5rem;
+      color: var(--composer-font-color-primary);
+      transform: rotate(-90deg);
+      transition: transform 0.3s ease;
+      &.open{
+        transform: rotate(0deg);
+      }
+
+    }
+}  

package/composer-base-components/ui/accordion/Accordion.tsx

@@ -0,0 +1,48 @@
+
+import React, { useState } from 'react'
+import styles from "./Accordion.module.scss";
+import { Base } from 'composer-tools/composer-base-components/base/base';
+import { TypeMediaInputValue } from 'composer-tools/editor-components/EditorComponent';
+interface AccordionProps {
+    title: string;
+    children: React.ReactNode;
+    icon?: TypeMediaInputValue;
+    headerClassName?: string;
+    contentClassName?: string;
+    openClassName?: string;
+    accordionIconClassName?: string;
+    titleClassName?: string;
+}
+
+const Accordion = ({
+    title, 
+    children, 
+    icon, 
+    headerClassName, 
+    contentClassName, 
+    openClassName="open",
+    accordionIconClassName,
+    titleClassName
+}: AccordionProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const handleToggle = () => {
+        setIsOpen(!isOpen);
+    }
+    const handleClose = () => {
+        setIsOpen(false);
+    };
+    return (
+        <div className={styles["accordion"]}>
+            <div className={`${styles["accordionHeader"]} ${headerClassName || ''}`} onClick={handleToggle}>
+                <Base.P className={`${styles["accordionTitle"]} ${titleClassName || ''}`}>{title}</Base.P>
+                {icon && <Base.Media value={icon} className={`${styles["accordionIcon"]} ${isOpen ? styles["open"] : ''} ${accordionIconClassName || ''}`}/>}
+            </div>
+            <Base.P className={`${styles["accordionContent"]} ${isOpen ? styles[openClassName] : ''} ${contentClassName || ''}`} onClick={handleClose}>
+                {children}
+            </Base.P>
+        </div>
+    )
+}
+
+export default Accordion