@blinkpage/composer-tools 1.0.0

package/composer-base-components/ui/dropdown/Dropdown.tsx

@@ -0,0 +1,133 @@
+import React, { useState, useRef, useEffect } from 'react';
+import styles from './Dropdown.module.scss';
+import { Base } from "composer-tools/composer-base-components/base/base";
+import { TypeMediaInputValue } from 'composer-tools/editor-components/EditorComponent';
+
+
+export interface DropDownItem {
+  className?: string;
+  onClick?: () => void;
+  onClose?: () => void;
+  children: React.ReactNode;
+  divider?: boolean;
+}
+
+interface DropdownProps {
+  buttonLabel: string;
+  icon?: TypeMediaInputValue;
+  dropdownButtonClassName?: string;
+  labelClassName?: string;
+  iconClassName?: string;
+  dropdownContentClassName?: string;
+  disabled?: boolean;
+  children: React.ReactNode;
+  onClose?: () => void
+}
+
+const Dropdown: React.FC<DropdownProps> = ({ 
+  buttonLabel, 
+  icon,
+  dropdownButtonClassName, 
+  labelClassName,
+  iconClassName,
+  dropdownContentClassName,
+  disabled = false,
+  children,
+  onClose
+})=> {
+  const [isOpen, setIsOpen] = useState(false);
+  const [shouldOpenLeft, setShouldOpenLeft] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isOpen || !dropdownRef.current) return;
+
+    const checkPosition = () => {
+      const wrapperContainer = Base.Navigator.getWrapperContainer();
+      if (!wrapperContainer) return;
+      
+      const buttonRect = dropdownRef.current!.getBoundingClientRect();
+      const dropdownContent = dropdownRef.current!.querySelector(`.${styles.dropdownContent}`) as HTMLElement;
+      if (!dropdownContent) return;
+      
+      const contentRect = dropdownContent.getBoundingClientRect();
+      const viewportWidth = wrapperContainer.innerWidth;
+      
+      const wouldOverflowRight = buttonRect.left + contentRect.width > viewportWidth;
+      const hasSpaceOnLeft = buttonRect.right - contentRect.width >= 0;
+      
+      setShouldOpenLeft(wouldOverflowRight && hasSpaceOnLeft);
+    };
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(checkPosition);
+    });
+
+    const handleResize = () => checkPosition();
+
+    const wrapperContainer = Base.Navigator.getWrapperContainer();
+    if (wrapperContainer?.wrapper) {
+      wrapperContainer.wrapper.addEventListener('resize', handleResize);
+      
+      return () => {
+        wrapperContainer.wrapper.removeEventListener('resize', handleResize);
+      };
+    }
+  }, [isOpen]);
+
+  const toggleDropdown = () => {
+    if (!disabled) {
+      setIsOpen(!isOpen);
+    }
+  };
+  const closeDropdown = () => {
+    setIsOpen(false);
+    onClose?.();
+  };
+
+  return (
+    <div className={`${styles.dropdownContainer} ${dropdownButtonClassName || ''}`} ref={dropdownRef}>
+      <button 
+        className={styles.dropdownButton} 
+        onClick={toggleDropdown}
+        disabled={disabled}
+      >
+        <Base.P className={`${styles.label} ${labelClassName || ''}`}>{buttonLabel}</Base.P>
+        {icon && <Base.Media value={icon} className={`${styles.icon} ${iconClassName || ''}`}/>}
+      </button>
+      {isOpen && (
+        <div className={`${styles.dropdownContent} ${dropdownContentClassName || ''} ${shouldOpenLeft ? styles.openLeft : ''}`} onClick={closeDropdown}>
+          {children}
+      </div>
+      )}
+    </div>
+  );
+};
+
+export const DropDownItem: React.FC<DropDownItem> = ({ 
+  className,
+  onClick,
+  children,
+  divider,
+  onClose
+  }) => {
+  const handleClick = () => {
+    onClick?.();
+    onClose?.();
+  };
+
+  return (
+    <>
+      <div
+        className={`${styles.dropdownItem} ${className || ''}`}
+        onClick={handleClick} 
+      >
+        {children}
+      </div>
+      {divider && <div className={styles.divider} />}
+    </>
+  );
+};
+
+
+export default Dropdown;

package/context/DataContext.tsx

@@ -0,0 +1,79 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+interface ComposerToolsData {
+  composerToolsLanguages: Array<{code: string; name: string}>;
+  composerToolsCurrentLanguage: {code: string; name: string};
+  isProcessable: boolean;
+  isLocalizationChange: boolean;
+  setComposerToolsCurrentLanguage: (lang: {code: string; name: string}) => void;
+  setComposerToolsLanguages: (languages: Array<{code: string; name: string}>) => void;
+  addComposerToolsLanguage: (languageCode: string) => void;
+  removeComposerToolsLanguage: (languageCode: string) => void;
+  setIsProcessable: (isProcessable: boolean) => void;
+  setIsLocalizationChange: (isLocalizationChange: boolean) => void;
+}
+
+export const DataContext = createContext<ComposerToolsData | undefined>(undefined);
+
+interface DataProviderProps {
+  children: ReactNode;
+}
+
+export const DataContextProvider: React.FC<DataProviderProps> = ({ children }) => {
+  const [composerToolsLanguages, setComposerToolsLanguages] = useState<Array<{code: string; name: string}>>([]);
+  const [composerToolsCurrentLanguage, setComposerToolsCurrentLanguage] = useState<{code: string; name: string}>({code: "", name: ""});
+  const [isProcessable, setIsProcessable] = useState(false);
+  const [isLocalizationChange, setIsLocalizationChange] = useState(false);
+
+  const addComposerToolsLanguage = (languageCode: string) => {
+    if (!composerToolsLanguages.some(lang => lang.code === languageCode)) {
+      setComposerToolsLanguages(prev => [...prev, {code: languageCode, name: ""}]);
+
+      if (!composerToolsCurrentLanguage) {
+        setComposerToolsCurrentLanguage({code: languageCode, name: ""});
+      }
+    }
+  };
+
+  const removeComposerToolsLanguage = (languageCode: string) => {
+    setComposerToolsLanguages(prev => prev.filter(lang => lang.code !== languageCode));
+
+    if (composerToolsCurrentLanguage.code === languageCode && composerToolsLanguages.length > 1) {
+      const newCurrent = composerToolsLanguages.find(lang => lang.code !== languageCode);
+      if (newCurrent) {
+        setComposerToolsCurrentLanguage(newCurrent);
+      }
+    }
+  };
+
+  const setLanguageAsCurrent = (language: {code: string; name: string}) => {
+    setComposerToolsCurrentLanguage(language);
+  };
+
+  const value = {
+    composerToolsLanguages,
+    composerToolsCurrentLanguage,
+    isProcessable,
+    isLocalizationChange,
+    addComposerToolsLanguage,
+    removeComposerToolsLanguage,
+    setComposerToolsCurrentLanguage: setLanguageAsCurrent,
+    setComposerToolsLanguages,
+    setIsProcessable,
+    setIsLocalizationChange,
+  };
+
+  return (
+    <DataContext.Provider value={value}>
+      {children}
+    </DataContext.Provider>
+  );
+};
+
+export const useComposerToolsData = () => {
+  const context = useContext(DataContext);
+  if (context === undefined) {
+    throw new Error('useData must be used within a DataProvider');
+  }
+  return context;
+};

package/custom-component-loader.ts

@@ -0,0 +1,84 @@
+import ComponentsRegistery from "./editor-components/ComponentRegistery";
+import { Component } from "./editor-components/EditorComponent";
+
+export interface CustomComponentMeta {
+  _id: string;
+  name: string;
+  category: string;
+  version: string;
+  bundle_url: string;
+  styles_url: string;
+  props_schema: string;
+  status: string;
+}
+
+declare global {
+  interface Window {
+    __CUSTOM_COMPONENTS__: Record<string, typeof Component>;
+  }
+}
+
+if (typeof window !== "undefined" && !window.__CUSTOM_COMPONENTS__) {
+  window.__CUSTOM_COMPONENTS__ = {};
+}
+
+function loadScript(src: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const existing = document.querySelector(`script[src="${src}"]`);
+    if (existing) return resolve();
+
+    const script = document.createElement("script");
+    script.src = src;
+    script.async = true;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
+    document.head.appendChild(script);
+  });
+}
+
+function loadStylesheet(href: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const existing = document.querySelector(`link[href="${href}"]`);
+    if (existing) return resolve();
+
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = href;
+    link.onload = () => resolve();
+    link.onerror = () => reject(new Error(`Failed to load stylesheet: ${href}`));
+    document.head.appendChild(link);
+  });
+}
+
+export async function loadCustomComponentsFromMeta(
+  components: CustomComponentMeta[],
+  registry: ComponentsRegistery
+): Promise<void> {
+  if (!components || components.length === 0) return;
+
+  const prevKeys = new Set(Object.keys(window.__CUSTOM_COMPONENTS__ || {}));
+
+  const loadPromises = components
+    .filter((c) => c.status === "active" && c.bundle_url)
+    .map(async (comp) => {
+      try {
+        if (comp.styles_url) {
+          await loadStylesheet(comp.styles_url).catch(() => {});
+        }
+        await loadScript(comp.bundle_url);
+      } catch (err) {
+        console.warn(`Failed to load custom component "${comp.name}":`, err);
+      }
+    });
+
+  await Promise.all(loadPromises);
+
+  const allComponents = window.__CUSTOM_COMPONENTS__ || {};
+  const newComponents = Object.entries(allComponents)
+    .filter(([key]) => !prevKeys.has(key))
+    .map(([, value]) => value);
+
+  if (newComponents.length > 0) {
+    registry.registerDynamic(newComponents);
+  }
+}

package/custom-hooks/hex-to-rgb.tsx

@@ -0,0 +1,6 @@
+export function hexToRgb(hex: any) {
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? parseInt(result[1], 16) + "," + parseInt(result[2], 16) + "," + parseInt(result[3], 16)
+    : null;
+}

package/custom-hooks/input-templates.tsx

@@ -0,0 +1,243 @@
+import { TypeButton } from "composer-tools/composer-base-components/base/base";
+import { TypeUsableComponentProps } from "composer-tools/editor-components/EditorComponent";
+
+export namespace INPUTS {
+  export type CastedButton = {
+    text: React.JSX.Element;
+    url: string;
+    icon: string;
+    image: string;
+    type: TypeButton;
+  };
+
+  export const BUTTON = (
+    buttonKey: string,
+    displayer: string,
+    text: string,
+    url: string | null,
+    icon: string | null,
+    image: string | null,
+    type: TypeButton = "Primary"
+  ) => {
+    const button: TypeUsableComponentProps = {
+      type: "object",
+      key: buttonKey,
+      displayer: displayer,
+      value: [
+        {
+          type: "string",
+          key: "text",
+          displayer: "Text",
+          value: text,
+        },
+        {
+          type: "select",
+          key: "type",
+          displayer: "Type",
+          value: type,
+          additionalParams: {
+            selectItems: [
+              "Primary",
+              "Secondary",
+              "Tertiary",
+              "Link",
+              "White",
+              "Black",
+              "Bare"
+            ],
+          },
+        },
+      ],
+    };
+
+    if (url !== null) {
+      button.value.push({
+        type: "page",
+        key: "url",
+        displayer: "Navigate To",
+        value: url,
+      });
+    }
+
+    if (icon !== null) {
+      button.value.push({
+        type: "media",
+        key: "icon",
+        displayer: "Icon",
+        additionalParams: {
+          availableTypes: ["icon"],
+        },
+        value: {
+          type: "icon",
+          name: icon,
+        },
+      });
+    }
+
+    if (image !== null) {
+      button.value.push({
+        type: "media",
+        key: "image",
+        displayer: "Image",
+        additionalParams: {
+          availableTypes: ["image"],
+        },
+        value: {
+          type: "image",
+          url: image,
+        },
+      });
+    }
+
+    button["getPropValue"] = null;
+
+    return button;
+  };
+
+  export const LOGO = (
+    key: string,
+    displayer: string,
+    defaultImage?: string
+  ) => {
+    return {
+      type: "object",
+      key: key,
+      displayer: displayer,
+      value: [
+        {
+          type: "media",
+          key: "image",
+          displayer: "Media",
+          additionalParams: {
+            availableTypes: ["image", "video"],
+          },
+          value: {
+            type: "image",
+            url:
+              defaultImage ||
+              "https://storage.googleapis.com/download/storage/v1/b/hq-composer-0b0f0/o/645515d3f72de2002caaefff?alt=media&timestamp=1719584962573",
+          },
+        },
+        {
+          type: "page",
+          key: "imageLink",
+          value: "",
+          displayer: "Navigate To",
+        },
+      ],
+    } as TypeUsableComponentProps;
+  };
+  export const NAVBAR_POSITION = (
+    key: string,
+    displayer: string,
+    defaultValue: string = "Default"
+  ) => {
+    return {
+      type: "select",
+      key: key,
+      displayer: displayer,
+      value: defaultValue,
+      additionalParams: {
+        selectItems: [
+          "Absolute",
+          "Sticky Colorful",
+          "Sticky Transparent",
+          "Default",
+        ],
+      },
+    } as TypeUsableComponentProps;
+  };
+
+  export type TYPE_SLIDER_SETTINGS = {
+    dots?: boolean;
+    arrows?: boolean;
+    infinite?: boolean;
+    speed?: number;
+    autoplay?: boolean;
+    autoplaySpeed?: number;
+    slidesToShow?: number;
+    slidesToScroll?: number;
+    adaptiveHeight?: boolean;
+  };
+  export const SLIDER_SETTINGS = (
+    key: string,
+    displayer: string,
+    defaultValues: TYPE_SLIDER_SETTINGS = {
+      dots: false,
+      arrows: false,
+      infinite: true,
+      speed: 500,
+      autoplay: true,
+      autoplaySpeed: 3000,
+      slidesToShow: 1,
+      slidesToScroll: 1,
+      adaptiveHeight: false,
+    }
+  ): TypeUsableComponentProps => {
+    return {
+      type: "object",
+      key: key,
+      displayer: displayer,
+      value: [
+        {
+          type: "boolean",
+          key: "dots",
+          displayer: "Dots",
+          value: defaultValues.dots,
+        },
+        {
+          type: "boolean",
+          key: "arrows",
+          displayer: "Arrows",
+          value: defaultValues.arrows,
+        },
+        {
+          type: "boolean",
+          key: "infinite",
+          displayer: "Infinite",
+          value: defaultValues.infinite,
+        },
+        {
+          type: "number",
+          key: "speed",
+          displayer: "Speed",
+          value: defaultValues.speed,
+          min: 0
+        },
+        {
+          type: "boolean",
+          key: "autoplay",
+          displayer: "Autoplay",
+          value: defaultValues.autoplay,
+        },
+        {
+          type: "number",
+          key: "autoplaySpeed",
+          displayer: "Autoplay Speed",
+          value: defaultValues.autoplaySpeed,
+          min: 30
+        },
+        {
+          type: "number",
+          key: "slidesToShow",
+          displayer: "Slides to Show",
+          value: defaultValues.slidesToShow,
+          min: 1,
+        },
+        {
+          type: "number",
+          key: "slidesToScroll",
+          displayer: "Slides to Scroll",
+          value: defaultValues.slidesToScroll,
+          min: 1,
+        },
+        {
+          type: "boolean",
+          key: "adaptiveHeight",
+          displayer: "Adaptive Height",
+          value: defaultValues.adaptiveHeight,
+        },
+      ] as TypeUsableComponentProps[],
+    };
+  };
+}

package/custom-hooks/load-font.tsx

@@ -0,0 +1,9 @@
+export const loadFonts = (fonts: string[]) => {
+  import("webfontloader").then((WebFont) => {
+    WebFont.load({
+      google: {
+        families: fonts,
+      },
+    });
+  });
+};

package/custom-hooks/placeholder-filler.tsx

@@ -0,0 +1,23 @@
+export namespace PlaceholderFiller {
+  export const string = () => {
+    return "Lorem ipsum";
+  };
+  export const shortText = () => {
+    return "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
+  };
+  export const mediumText = () => {
+    return "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+  };
+  export const longText = () => {
+    return "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
+  };
+  export const extraLongText = () => {
+    return "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum luctus mauris. Integer ut ultricies tortor, non tincidunt eros. Aenean ac rutrum dui. Sed ut lorem nec metus fermentum fermentum. Maecenas et purus a mi blandit commodo. Nullam vitae justo eget ligula sodales semper faucibus sodales felis. Duis tristique cursus arcu, ut hendrerit augue volutpat non. Donec posuere malesuada libero. Curabitur non urna ornare, semper justo et, rhoncus mauris. Pellentesque vel ante scelerisque mauris ultrices sodales. Quisque imperdiet augue nulla, eget finibus urna tincidunt vitae. Duis vitae consequat nibh, at commodo urna. Nulla pharetra tellus ac est rhoncus, sit amet dictum dui iaculis. Suspendisse faucibus odio ut facilisis rutrum. Nullam ultricies libero ex, id tincidunt nisl condimentum ornare. Suspendisse potenti.";
+  };
+  export const number = () => {
+    return Math.floor(Math.random() * 10);
+  };
+  export const image = () => {
+    return "https://storage.googleapis.com/download/storage/v1/b/hq-composer-0b0f0/o/63ece783e682de002c20666b?alt=media&timestamp=1676470148166";
+  };
+}

package/custom-hooks/project.ts

@@ -0,0 +1,9 @@
+let _project: any;
+
+export function setProjectHook(project: any){
+    _project = project;
+}
+
+export function getProjectHook(){
+    return _project;
+}

package/editor-components/ComponentRegistery.tsx

@@ -0,0 +1,42 @@
+import { CATEGORIES, Component, iComponent } from "./EditorComponent";
+
+export type TRegistryState = { [key in CATEGORIES]: typeof Component[] };
+class ComponentsRegistery {
+  private availableComponents: TRegistryState = {} as TRegistryState;
+
+  constructor() {
+    Object.values(CATEGORIES).forEach((item) => {
+      this.availableComponents[item] = [];
+    });
+  }
+
+  getComponents(): TRegistryState  {
+    return this.availableComponents;
+  }
+  register(components: typeof Component[]) {
+    components.forEach((component: typeof Component) => {
+      this.availableComponents[component.getCategory()].push(component);
+    });
+  }
+
+  ensureCategory(category: string) {
+    if (!this.availableComponents[category as CATEGORIES]) {
+      this.availableComponents[category as CATEGORIES] = [];
+    }
+  }
+
+  registerDynamic(components: typeof Component[]) {
+    components.forEach((component: typeof Component) => {
+      const category = component.getCategory();
+      this.ensureCategory(category);
+      const exists = this.availableComponents[category].some(
+        (c) => c.getName() === component.getName()
+      );
+      if (!exists) {
+        this.availableComponents[category].push(component);
+      }
+    });
+  }
+}
+
+export default ComponentsRegistery;