@blinkpage/composer-tools 1.0.0

package/editor-components/location/location7/location7.tsx

@@ -0,0 +1,347 @@
+import React from "react";
+import { Location } from "../../EditorComponent";
+import styles from "./location7.module.scss";
+import { Base } from "../../../composer-base-components/base/base";
+
+// Types
+
+type Address = {
+  type: string;
+  key: string;
+  value: Array<Marker>;
+};
+
+type Marker = {
+  type: string;
+  key: string;
+  value: any;
+};
+
+type MarkerObject = {
+  content: React.ReactNode;
+  leftPercent: string;
+  topPercent: string;
+  popupTitle: string;
+  description: string;
+  markerImage: string;
+};
+
+class Location7 extends Location {
+  constructor(props?: any) {
+    super(props, styles);
+    this.addProp({
+      type: "string",
+      key: "title",
+      displayer: "Title",
+      value: "We Are Worldwide",
+    });
+    this.addProp({
+      type: "array",
+      displayer: "addresses",
+      key: "addresses",
+      value: [
+        {
+          type: "object",
+          key: "marker",
+          displayer: "Marker",
+          value: [
+            {
+              type: "number",
+              displayer: "Left %",
+              key: "leftPercent",
+              value: 30,
+            },
+            {
+              type: "number",
+              displayer: "Top %",
+              key: "topPercent",
+              value: 40,
+            },
+            {
+              type: "string",
+              displayer: "Popup Title",
+              key: "popupTitle",
+              value: "NEW YORK",
+            },
+            {
+              type: "string",
+              displayer: "Description",
+              key: "description",
+              value: "+0 595-510-1352\nflatley.don@weissnat.me\n713 Dibbert Bridge",
+            },
+          ],
+        },
+        {
+          type: "object",
+          key: "marker",
+          displayer: "Marker",
+          value: [
+            {
+              type: "number",
+              displayer: "Left %",
+              key: "leftPercent",
+              value: 60,
+            },
+            {
+              type: "number",
+              displayer: "Top %",
+              key: "topPercent",
+              value: 30,
+            },
+            {
+              type: "string",
+              displayer: "Popup Title",
+              key: "popupTitle",
+              value: "MOSCOW",
+            },
+            {
+              type: "string",
+              displayer: "Description",
+              key: "description",
+              value: "+7 495-123-4567\nmoscow.office@example.com\nRed Square",
+            },
+          ],
+        },
+        {
+          type: "object",
+          key: "marker",
+          displayer: "Marker",
+          value: [
+            {
+              type: "number",
+              displayer: "Left %",
+              key: "leftPercent",
+              value: 80,
+            },
+            {
+              type: "number",
+              displayer: "Top %",
+              key: "topPercent",
+              value: 60,
+            },
+            {
+              type: "string",
+              displayer: "Popup Title",
+              key: "popupTitle",
+              value: "TOKYO",
+            },
+            {
+              type: "string",
+              displayer: "Description",
+              key: "description",
+              value: "+81 3-1234-5678\ntokyo.office@example.com\nShinjuku",
+            },
+          ],
+        },
+        {
+          type: "object",
+          key: "marker",
+          displayer: "Marker",
+          value: [
+            {
+              type: "number",
+              displayer: "Left %",
+              key: "leftPercent",
+              value: 30,
+            },
+            {
+              type: "number",
+              displayer: "Top %",
+              key: "topPercent",
+              value: 70,
+            },
+            {
+              type: "string",
+              displayer: "Popup Title",
+              key: "popupTitle",
+              value: "SYDNEY",
+            },
+            {
+              type: "string",
+              displayer: "Description",
+              key: "description",
+              value: "+61 2-1234-5678\nsydney.office@example.com\nOpera House",
+            },
+          ],
+        },
+        {
+          type: "object",
+          key: "marker",
+          displayer: "Marker",
+          value: [
+            {
+              type: "number",
+              displayer: "Left %",
+              key: "leftPercent",
+              value: 50,
+            },
+            {
+              type: "number",
+              displayer: "Top %",
+              key: "topPercent",
+              value: 80,
+            },
+            {
+              type: "string",
+              displayer: "Popup Title",
+              key: "popupTitle",
+              value: "SAO PAULO",
+            },
+            {
+              type: "string",
+              displayer: "Description",
+              key: "description",
+              value: "+55 11-1234-5678\nsaopaulo.office@example.com\nPaulista Avenue",
+            },
+          ],
+        },
+        {
+          type: "object",
+          key: "marker",
+          displayer: "Marker",
+          value: [
+            {
+              type: "number",
+              displayer: "Left %",
+              key: "leftPercent",
+              value: 45,
+            },
+            {
+              type: "number",
+              displayer: "Top %",
+              key: "topPercent",
+              value: 20,
+            },
+            {
+              type: "string",
+              displayer: "Popup Title",
+              key: "popupTitle",
+              value: "PARIS",
+            },
+            {
+              type: "string",
+              displayer: "Description",
+              key: "description",
+              value: "+33 1-2345-6789\nparis.office@example.com\nEiffel Tower",
+            },
+          ],
+        },
+      ],
+    });
+
+    this.addProp({
+      type: "boolean",
+      key: "showTooltipLine",
+      displayer: "Tooltip Line",
+      value: true,
+    });
+
+    this.addProp({
+      type: "image",
+      key: "background-image",
+      displayer: "Background Image",
+      value: "https://storage.googleapis.com/download/storage/v1/b/hq-blinkpage-staging-bbc49/o/6880cd78a85f1c002bbc65c9?alt=media",
+    });
+    this.setComponentState("activeMarkerIndex", null);
+  }
+
+  static getName(): string {
+    return "Location 7";
+  }
+
+  handleMarkerClick = (index: number) => {
+    const currentActiveIndex = this.getComponentState("activeMarkerIndex");
+    if (currentActiveIndex === index) {
+      this.setComponentState("activeMarkerIndex", null);
+    } else {
+      this.setComponentState("activeMarkerIndex", index);
+    }
+  };
+
+  handleClosePopover = () => {
+    this.setComponentState("activeMarkerIndex", null);
+  };
+
+  render() {
+    const addresses: Address[] = this.getPropValue("addresses");
+    const title = this.getPropValue("title");
+    const titleExist = this.castToString(title);
+    const activeMarkerIndex = this.getComponentState("activeMarkerIndex");
+    const bgImage = this.getPropValue("background-image");
+    const showTooltipLine = this.getPropValue("showTooltipLine");
+
+    // Prepare markers
+    const markers = addresses.reduce((acc: MarkerObject[], address: any) => {
+      if (address.type === "object" && Array.isArray(address.value)) {
+        const leftPercent = address.getPropValue("leftPercent");
+        const topPercent = address.getPropValue("topPercent");
+        const popupTitle = address.getPropValue("popupTitle");
+        const description = address.getPropValue("description");
+        acc.push({
+          leftPercent,
+          topPercent,
+          popupTitle,
+          description,
+          markerImage: "", // not used
+          content: null,
+        });
+      }
+      return acc;
+    }, []);
+
+    return (
+      <Base.Container className={this.decorateCSS("container")}> 
+        <Base.MaxContent className={this.decorateCSS("max-content")}> 
+          <Base.VerticalContent className={this.decorateCSS("wrapper")}> 
+            {titleExist && (
+              <div className={this.decorateCSS("title-row")}> 
+                <Base.SectionTitle className={this.decorateCSS("title")}>{title}</Base.SectionTitle>
+              </div>
+            )}
+            <section className={this.decorateCSS("map-container")}> 
+              <div
+                className={this.decorateCSS("custom-map")}>
+                {bgImage && (
+                  <img src={bgImage} alt="World Map" className={this.decorateCSS("background-image")}/>
+                )}
+                {markers.map((marker, idx) => {
+                  const popupTitle = this.castToString(marker.popupTitle);
+                  const description = this.castToString(marker.description);
+                  const tooltipExist = popupTitle || description ;
+
+                  return (
+                    <React.Fragment key={idx}>
+                      <div
+                        className={this.decorateCSS("marker") + (activeMarkerIndex === idx ? " active" : "")}
+                        style={{
+                          left: `${marker.leftPercent}%`,
+                          top: `${marker.topPercent}%`,
+                        }}
+                        onClick={() => this.handleMarkerClick(idx)}
+                      />
+                      {activeMarkerIndex === idx && tooltipExist && (
+                        <div
+                          className={this.decorateCSS("tooltip")}
+                          style={{
+                            left: `${parseFloat(marker.leftPercent) + 2}%`,
+                            top: `${marker.topPercent}%`,
+                          }}
+                        >
+                          {popupTitle && <div className={this.decorateCSS("tooltip-header")}>{marker.popupTitle}</div>}
+                          {showTooltipLine && <div className={this.decorateCSS("tooltip-divider")}></div>}
+                          {description && <div className={this.decorateCSS("tooltip-content")}>{marker.description}</div>}
+                        </div>
+                      )}
+                    </React.Fragment>
+                  );
+                })}
+              </div>
+            </section>
+          </Base.VerticalContent>
+        </Base.MaxContent>
+      </Base.Container>
+    );
+  }
+}
+
+export default Location7;

package/editor-components/location/themes.tsx

@@ -0,0 +1,229 @@
+export type TTheme = {
+  name: string;
+  colors: {
+    featureType?: string;
+    elementType?: string;
+    stylers: { color?: string; visibility?: string }[];
+  }[];
+};
+
+export const THEMES = [
+  {
+    name: "Theme-0",
+    colors: [],
+  },
+  {
+    name: "Theme-1",
+    colors: [
+      {
+        elementType: "geometry",
+        stylers: [{ color: "#1d2c4d" }],
+      },
+      {
+        elementType: "labels.text.fill",
+        stylers: [{ color: "#8ec3b9" }],
+      },
+      {
+        elementType: "labels.text.stroke",
+        stylers: [{ color: "#1a3646" }],
+      },
+      {
+        featureType: "administrative.country",
+        elementType: "geometry.stroke",
+        stylers: [{ color: "#333" }],
+      },
+      {
+        featureType: "administrative.land_parcel",
+        elementType: "labels.text.fill",
+        stylers: [{ color: "#333" }],
+      },
+      {
+        featureType: "administrative.province",
+        elementType: "geometry.stroke",
+        stylers: [{ color: "#333" }],
+      },
+      {
+        featureType: "landscape.man_made",
+        elementType: "geometry.stroke",
+        stylers: [{ color: "#334e87" }],
+      },
+      {
+        featureType: "landscape.natural",
+        elementType: "geometry",
+        stylers: [{ color: "#023e58" }],
+      },
+      {
+        featureType: "poi",
+        elementType: "geometry",
+        stylers: [{ color: "#283d6a" }],
+      },
+      {
+        featureType: "poi.park",
+        elementType: "geometry.fill",
+        stylers: [{ color: "#023e58" }],
+      },
+      {
+        featureType: "road",
+        elementType: "geometry",
+        stylers: [{ color: "#304a7d" }],
+      },
+      {
+        featureType: "road",
+        elementType: "labels.text.fill",
+        stylers: [{ color: "#98a5be" }],
+      },
+      {
+        featureType: "road",
+        elementType: "labels.text.stroke",
+        stylers: [{ color: "#1d2c4d" }],
+      },
+      {
+        featureType: "road.highway",
+        elementType: "geometry",
+        stylers: [{ color: "#2c6675" }],
+      },
+      {
+        featureType: "road.highway",
+        elementType: "geometry.stroke",
+        stylers: [{ color: "#255763" }],
+      },
+      {
+        featureType: "water",
+        elementType: "geometry",
+        stylers: [{ color: "#0e1626" }],
+      },
+      {
+        featureType: "water",
+        elementType: "labels.text.fill",
+        stylers: [{ color: "#4e6d70" }],
+      },
+    ],
+  },
+  {
+    name: "Theme-2",
+    colors: [
+      {
+        elementType: "geometry",
+        stylers: [{ color: "#212121" }],
+      },
+      {
+        elementType: "labels.icon",
+        stylers: [{ visibility: "off" }],
+      },
+      {
+        featureType: "administrative",
+        elementType: "geometry",
+        stylers: [{ color: "#757575" }],
+      },
+      {
+        featureType: "administrative.country",
+        elementType: "geometry.stroke",
+        stylers: [{ color: "#bdbdbd" }],
+      },
+      {
+        featureType: "landscape",
+        elementType: "geometry",
+        stylers: [{ color: "#F9F9F9" }],
+      },
+      {
+        featureType: "poi",
+        elementType: "geometry",
+        stylers: [{ color: "#eeeeee" }],
+      },
+      {
+        featureType: "road",
+        elementType: "geometry",
+        stylers: [{ color: "#ffffff" }],
+      },
+      {
+        featureType: "water",
+        elementType: "geometry",
+        stylers: [{ color: "#F1F1F1" }],
+      },
+    ],
+  },
+  {
+    name: "Theme-3",
+    colors: [
+      {
+        elementType: "geometry",
+        stylers: [{ color: "#fbe4d3" }],
+      },
+      {
+        featureType: "poi",
+        elementType: "geometry",
+        stylers: [{ color: "#ffcba4" }],
+      },
+      {
+        featureType: "water",
+        elementType: "geometry",
+        stylers: [{ color: "#a4d4ff" }],
+      },
+      {
+        featureType: "road",
+        elementType: "geometry",
+        stylers: [{ color: "#f9dcc4" }],
+      },
+      {
+        elementType: "labels.text.fill",
+        stylers: [{ color: "#704214" }],
+      },
+    ],
+  },
+  {
+    name: "Theme-4",
+    colors: [
+      {
+        elementType: "geometry",
+        stylers: [{ color: "#eaeaea" }],
+      },
+      {
+        featureType: "water",
+        elementType: "geometry",
+        stylers: [{ color: "#a2d9ff" }],
+      },
+      {
+        featureType: "landscape",
+        elementType: "geometry",
+        stylers: [{ color: "#d6e6c3" }],
+      },
+      {
+        featureType: "road",
+        elementType: "geometry",
+        stylers: [{ color: "#ffffff" }],
+      },
+      {
+        elementType: "labels.text.fill",
+        stylers: [{ color: "#333" }],
+      },
+    ],
+  },
+  {
+    name: "Theme-5",
+    colors: [
+      {
+        elementType: "geometry",
+        stylers: [{ color: "#e8f8f5" }],
+      },
+      {
+        featureType: "poi",
+        elementType: "geometry",
+        stylers: [{ color: "#d5f4e6" }],
+      },
+      {
+        featureType: "water",
+        elementType: "geometry",
+        stylers: [{ color: "#cce5ff" }],
+      },
+      {
+        featureType: "road",
+        elementType: "geometry",
+        stylers: [{ color: "#ffffff" }],
+      },
+      {
+        elementType: "labels.text.fill",
+        stylers: [{ color: "#2c3e50" }],
+      },
+    ],
+  },
+];

package/editor-components/logo-clouds/logo-comp1/logo-comp1.module.scss

@@ -0,0 +1,36 @@
+@use "../../../composer-base-components/base/utitilities/viewports.module.scss" as *;
+
+.container {
+    .max-content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--composer-gap-xl);
+        .heading{
+           .subtitle, .title, .description {
+            content: ""
+            }
+        }
+        .images-container{
+            .image-item {
+                background: color-mix(in srgb, var(--composer-html-background), var(--composer-font-color-primary) 5%);
+                padding: var(--composer-gap-md);
+                border-radius: var(--composer-border-radius-sm);
+                .image {
+                    object-fit: contain;
+                    width: 100%;
+                    height: auto;
+                    aspect-ratio: 3/1;
+                }
+            }
+        }
+    }
+}
+
+
+@container (max-width: #{$composer-tablet-width}) {
+    .container {
+        .max-content {
+            gap: var(--composer-gap-md);
+        }
+    }
+}