@bravostudioai/react 0.1.28 → 0.1.29

package/src/components/EncoreContextProviders.tsx

@@ -0,0 +1,60 @@
+/**
+ * Context provider composition component
+ *
+ * Wraps children with all necessary Encore contexts in the correct order.
+ * This reduces nesting in the main EncoreApp component.
+ */
+
+import React from "react";
+import EncoreComponentIdContext from "../contexts/EncoreComponentIdContext";
+import EncoreActionContext, {
+  type EncoreActionPayload,
+} from "../contexts/EncoreActionContext";
+import EncoreRepeatingContainerContext from "../contexts/EncoreRepeatingContainerContext";
+import EncoreBindingContext from "../contexts/EncoreBindingContext";
+
+interface EncoreContextProvidersProps {
+  componentId?: string;
+  onAction?: (payload: EncoreActionPayload) => void | Promise<void>;
+  repeatingContainerContextValue: any;
+  bindingContextValue: any;
+  children: React.ReactNode;
+}
+
+/**
+ * Composes all Encore context providers
+ *
+ * Provides a cleaner way to wrap content with multiple contexts
+ * instead of deeply nested Provider components.
+ *
+ * @example
+ * <EncoreContextProviders
+ *   componentId={componentId}
+ *   onAction={onAction}
+ *   repeatingContainerContextValue={containerContextValue}
+ *   bindingContextValue={bindingContext}
+ * >
+ *   <DynamicComponent />
+ * </EncoreContextProviders>
+ */
+export function EncoreContextProviders({
+  componentId,
+  onAction,
+  repeatingContainerContextValue,
+  bindingContextValue,
+  children,
+}: EncoreContextProvidersProps) {
+  return (
+    <EncoreComponentIdContext.Provider value={{ componentId }}>
+      <EncoreActionContext.Provider value={{ onAction }}>
+        <EncoreRepeatingContainerContext.Provider
+          value={repeatingContainerContextValue}
+        >
+          <EncoreBindingContext.Provider value={bindingContextValue}>
+            {children}
+          </EncoreBindingContext.Provider>
+        </EncoreRepeatingContainerContext.Provider>
+      </EncoreActionContext.Provider>
+    </EncoreComponentIdContext.Provider>
+  );
+}

package/src/hooks/useFontLoader.ts

@@ -0,0 +1,84 @@
+/**
+ * Custom hook for loading fonts from app definition
+ *
+ * Handles FontFace API loading of custom fonts declared in the app JSON.
+ * Skips fonts marked as broken and provides debug logging in development.
+ */
+
+import { useEffect } from "react";
+import logger from "../lib/logger";
+
+interface EncoreFont {
+  id?: string;
+  url?: string;
+  broken?: boolean;
+  fontName?: { family?: string; postScriptName?: string };
+}
+
+interface AppDataWithFonts {
+  app?: { fonts?: EncoreFont[] };
+}
+
+/**
+ * Loads fonts declared in app definition using the FontFace API
+ *
+ * @param appData - App definition containing fonts array
+ *
+ * @example
+ * const { data: appData } = useSWR(appUrl, fetcher);
+ * useFontLoader(appData);
+ */
+export function useFontLoader(appData: unknown) {
+  useEffect(() => {
+    const fonts: EncoreFont[] =
+      (appData as AppDataWithFonts | undefined)?.app?.fonts ?? [];
+
+    logger.debug('Font loading check', { fontCount: fonts?.length || 0 });
+
+    if (!fonts || fonts.length === 0) return;
+    if (typeof window === "undefined" || !("FontFace" in window)) return;
+
+    fonts.forEach((f) => {
+      try {
+        const family = f?.fontName?.family;
+        const url = f?.url;
+        const postScriptName = f?.fontName?.postScriptName;
+
+        if (!family || !url) return;
+
+        if (f.broken) {
+          logger.warn('Skipping broken font', {
+            font: postScriptName || family,
+            url
+          });
+          return;
+        }
+
+        const familyName = postScriptName || family;
+        const fontFace = new FontFace(familyName, `url(${url})`, {
+          weight: "100 900",
+          style: "normal",
+        });
+
+        fontFace
+          .load()
+          .then((ff) => {
+            document.fonts.add(ff);
+            logger.debug('Font loaded', { familyName, url });
+
+            const isCheckPassed = document.fonts.check(`400 12px "${familyName}"`);
+            logger.debug('Font check result', { familyName, isCheckPassed });
+          })
+          .catch((err) => {
+            logger.warn('Failed to load font', {
+              font: postScriptName || family,
+              url,
+              error: err.message
+            });
+          });
+      } catch (err) {
+        logger.warn('Error processing font', err);
+      }
+    });
+  }, [appData]);
+}

package/src/hooks/usePusherUpdates.ts

@@ -4,6 +4,7 @@ import { useEffect, useRef } from "react";
 import Pusher from "pusher-js";
 import { mutate } from "swr";
 import { clearModuleCache } from "../lib/moduleRegistry";
+import logger from "../lib/logger";
 
 type PusherConfig = {
   key?: string;
@@ -51,7 +52,7 @@ export function usePusherUpdates({
 
     // Skip if Pusher key is not configured
     if (!config.key) {
-      console.warn("[Pusher] not configured. Pusher updates disabled.");
+      logger.warn('Pusher not configured - real-time updates disabled');
       return;
     }
 
@@ -63,9 +64,9 @@ export function usePusherUpdates({
 
     pusherRef.current = pusher;
 
-    // Channel name format: appId-pageId (e.g., "01KA23JMNBQ2V9NR7K0VXKT5TF-01KA23JMPBZSG2YRJ6M5X87SKJ")
+    // Channel name format: appId (e.g., "01KA23JMNBQ2V9NR7K0VXKT5TF")
     const channelName = `${appId}`;
-    console.log(`[Pusher] Subscribing to channel: ${channelName}`);
+    logger.debug('Subscribing to Pusher channel', { channelName });
 
     // Subscribe to the channel
     const channel = pusher.subscribe(channelName);
@@ -73,24 +74,18 @@ export function usePusherUpdates({
 
     // Handle subscription success
     channel.bind("pusher:subscription_succeeded", () => {
-      console.log(
-        `[Pusher] Successfully subscribed to channel: ${channelName}`
-      );
+      logger.debug('Pusher subscription succeeded', { channelName });
     });
 
     // Handle subscription error
     channel.bind("pusher:subscription_error", (status: number) => {
-      console.error(
-        `[Pusher] Subscription error for channel ${channelName}:`,
-        status
-      );
+      logger.error('Pusher subscription error', { channelName, status });
     });
 
     // Listen for update events
-    // You can customize the event name based on your backend's Pusher event names
-    // Common event names: 'update', 'component-updated', 'app-updated', etc.
+    // Common event names: 'update', 'component-updated', 'app-updated'
     const handleUpdate = (data: unknown) => {
-      console.log(`[Pusher] Update received for ${channelName}:`, data);
+      logger.debug('Pusher update received', { channelName, data });
 
       // Clear the module cache for the component to force reload
       const componentName = `${appId}/draft/components/${pageId}`;
@@ -102,19 +97,15 @@ export function usePusherUpdates({
 
       // Mutate both URLs to trigger refetch
       mutate(appUrl).catch((err) => {
-        console.error("[Pusher] Error invalidating app cache:", err);
+        logger.error('Error invalidating app cache', err);
       });
       mutate(pageUrl).catch((err) => {
-        console.error("[Pusher] Error invalidating page cache:", err);
+        logger.error('Error invalidating page cache', err);
       });
 
-      // Also invalidate URLs with useLocal query param if they exist
-      mutate(`${appUrl}?useLocal=1`).catch(() => {
-        // Ignore errors for optional URLs
-      });
-      mutate(`${pageUrl}?useLocal=1`).catch(() => {
-        // Ignore errors for optional URLs
-      });
+      // Also invalidate URLs with useLocal query param
+      mutate(`${appUrl}?useLocal=1`).catch(() => {});
+      mutate(`${pageUrl}?useLocal=1`).catch(() => {});
 
       // Call the onUpdate callback if provided
       onUpdate?.();
@@ -128,7 +119,7 @@ export function usePusherUpdates({
 
     // Cleanup function
     return () => {
-      console.log(`[Pusher] Unsubscribing from channel: ${channelName}`);
+      logger.debug('Unsubscribing from Pusher channel', { channelName });
 
       // Unbind all event handlers
       if (channelRef.current) {

package/src/hooks/useRepeatingContainers.ts

@@ -0,0 +1,147 @@
+/**
+ * Custom hook for managing repeating container controls
+ *
+ * Handles slider/list index management and synchronization between
+ * parent-provided controls and internal component state.
+ */
+
+import { useState, useCallback, useMemo, useEffect } from "react";
+import React from "react";
+import type { RepeatingContainerControl } from "../contexts/EncoreRepeatingContainerContext";
+
+interface ContainerControlProps {
+  currentIndex?: number;
+  onIndexChange?: (index: number) => void;
+}
+
+/**
+ * Manages repeating container (slider/list) controls
+ *
+ * @param externalControls - Optional controls passed from parent component
+ * @returns Context value for EncoreRepeatingContainerContext
+ *
+ * @example
+ * const containerContextValue = useRepeatingContainers(repeatingContainerControls);
+ * <EncoreRepeatingContainerContext.Provider value={containerContextValue}>
+ */
+export function useRepeatingContainers(
+  externalControls?: Record<string, ContainerControlProps>
+) {
+  const [containerControls, setContainerControls] = useState<
+    Map<string, RepeatingContainerControl>
+  >(new Map());
+
+  const [controlPropsMap, setControlPropsMap] = useState<
+    Map<string, ContainerControlProps>
+  >(new Map());
+
+  // Update control props from external prop
+  useEffect(() => {
+    if (externalControls) {
+      setControlPropsMap((prev) => {
+        // Check if content actually changed to avoid unnecessary updates
+        let changed = false;
+        if (prev.size !== Object.keys(externalControls).length) {
+          changed = true;
+        } else {
+          for (const [id, props] of Object.entries(externalControls)) {
+            const prevProps = prev.get(id);
+            if (!prevProps) {
+              changed = true;
+              break;
+            }
+            if (
+              prevProps.currentIndex !== props.currentIndex ||
+              prevProps.onIndexChange !== props.onIndexChange
+            ) {
+              changed = true;
+              break;
+            }
+          }
+        }
+
+        if (!changed) return prev;
+
+        const newMap = new Map();
+        Object.entries(externalControls).forEach(([id, props]) => {
+          newMap.set(id, props);
+        });
+        return newMap;
+      });
+    }
+  }, [externalControls]);
+
+  const registerContainer = useCallback(
+    (id: string, control: RepeatingContainerControl) => {
+      setContainerControls((prev) => {
+        const next = new Map(prev);
+        next.set(id, control);
+        return next;
+      });
+    },
+    []
+  );
+
+  const unregisterContainer = useCallback((id: string) => {
+    setContainerControls((prev) => {
+      const next = new Map(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+
+  const getControl = useCallback(
+    (id: string) => {
+      return containerControls.get(id);
+    },
+    [containerControls]
+  );
+
+  const setControlProps = useCallback(
+    (
+      id: string,
+      props:
+        | ContainerControlProps
+        | ((prev: ContainerControlProps) => ContainerControlProps)
+    ) => {
+      setControlPropsMap((prev) => {
+        const next = new Map(prev);
+        const current = next.get(id) || {};
+        const newProps = typeof props === "function" ? props(current) : props;
+        next.set(id, newProps);
+        return next;
+      });
+    },
+    []
+  );
+
+  const getControlProps = useCallback(
+    (id: string) => {
+      return controlPropsMap.get(id);
+    },
+    [controlPropsMap]
+  );
+
+  // Create context value - changes when controlPropsMap changes
+  const contextValue = useMemo(
+    () => ({
+      registerContainer,
+      unregisterContainer,
+      getControl,
+      setControlProps,
+      getControlProps,
+      // Include size to trigger re-renders when it changes
+      _propsVersion: controlPropsMap.size,
+    }),
+    [
+      registerContainer,
+      unregisterContainer,
+      getControl,
+      setControlProps,
+      getControlProps,
+      controlPropsMap.size,
+    ]
+  );
+
+  return contextValue;
+}

package/src/index.ts

@@ -1,4 +1,3 @@
-console.log("Encore Lib Loaded");
 import EncoreApp from "./components/EncoreApp";
 import EncoreErrorBoundary from "./components/EncoreErrorBoundary";
 import EncoreLoadingFallback from "./components/EncoreLoadingFallback";
@@ -17,4 +16,8 @@ export {
   PACKAGE_VERSION,
 };
 
+// Export types for TypeScript consumers
+export type { EncoreAppProps } from "./components/EncoreApp";
+export type { EncoreActionPayload } from "./contexts/EncoreActionContext";
+
 export * from "./codegen";

package/src/lib/dataPatching.ts

@@ -0,0 +1,78 @@
+/**
+ * Data patching utilities for fixing layout and component issues
+ *
+ * Applies heuristic-based fixes to page data to correct common layout problems
+ * that occur during the Figma-to-Encore conversion process.
+ */
+
+import logger from "./logger";
+
+/**
+ * Recursively patches page data to fix layout issues
+ *
+ * Current heuristics:
+ * 1. Horizontal layout detection - If children widths sum to ~100% or ~375px,
+ *    force HORIZONTAL layout mode to prevent vertical stacking
+ *
+ * @param clientData - The client data object from page definition
+ * @returns Patched client data (mutates in place)
+ */
+export function patchPageData(clientData: any): any {
+  if (!clientData) return clientData;
+
+  const patchNode = (node: any) => {
+    if (!node || typeof node !== "object") return;
+
+    // Heuristic: If children widths sum to ~100% or ~375px, force HORIZONTAL layout
+    if (
+      node.children &&
+      Array.isArray(node.children) &&
+      node.children.length > 1
+    ) {
+      let totalWidth = 0;
+      let childrenWithWidth = 0;
+
+      node.children.forEach((child: any) => {
+        if (child.style?.width) {
+          // Width might be percentage (sums to 100) or pixels (sums to 375)
+          totalWidth += child.style.width;
+          childrenWithWidth++;
+        }
+      });
+
+      // Check if widths sum to full width (100% or 375px)
+      const isFullWidthRow =
+        (Math.abs(totalWidth - 100) < 1 || Math.abs(totalWidth - 375) < 5) &&
+        childrenWithWidth >= 2;
+
+      if (isFullWidthRow) {
+        if (!node.style) node.style = {};
+        if (!node.style.layout) node.style.layout = {};
+
+        // Only apply if mode is missing or undefined
+        if (!node.style.layout.mode) {
+          logger.debug('Layout patch applied', {
+            nodeId: node.id,
+            childrenCount: childrenWithWidth,
+            totalWidth
+          });
+          node.style.layout.mode = "HORIZONTAL";
+          node.style.layout.primaryAxisAlignItems = "flex-start";
+          node.style.layout.counterAxisAlignItems = "flex-start";
+        }
+      }
+    }
+
+    // Recurse through children
+    if (node.children) {
+      if (Array.isArray(node.children)) {
+        node.children.forEach(patchNode);
+      } else {
+        patchNode(node.children);
+      }
+    }
+  };
+
+  patchNode(clientData);
+  return clientData;
+}

package/src/lib/dynamicModules.ts

@@ -2,6 +2,7 @@ import packages from "./packages";
 import { isLocalMode } from "./localMode";
 import { CONST_COMPONENTS_CDN_URL } from "../../constants";
 import { registerModule, getModuleExports, haveModule } from "./moduleRegistry";
+import logger from "./logger";
 
 // Initialize registry with default packages
 Object.keys(packages).forEach((p) => {
@@ -85,7 +86,7 @@ export function loadAMDModule(name: string, code: string) {
         try {
           ${patchedCode}\n//# sourceURL=dynamic-module://${name}.js
         } catch (error) {
-          console.error('[Module Evaluation Error]', {
+          console.error('[encore-lib] Module evaluation error', {
             moduleName: '${name}',
             error: error.message,
             stack: error.stack,
@@ -97,18 +98,16 @@ export function loadAMDModule(name: string, code: string) {
       `
       );
 
-      console.debug(`[Module Loading] Attempting to load module: ${name}`);
+      logger.debug('Loading AMD module', { name });
       wrapper(define);
-      console.debug(`[Module Loading] Successfully loaded module: ${name}`);
+      logger.debug('Module loaded successfully', { name });
     } catch (e: any) {
-      // Enhanced error logging
-      console.error("[Module Loading Failed]", {
+      logger.error('Module loading failed', {
         moduleName: name,
-        error: e,
         errorType: e.constructor.name,
         message: e.message,
         stack: e.stack,
-        code: code.slice(0, 500) + (code.length > 500 ? "..." : ""), // Show first 500 chars of code
+        codePreview: code.slice(0, 200) + (code.length > 200 ? "..." : "")
       });
       reject(e);
     }
@@ -117,7 +116,7 @@ export function loadAMDModule(name: string, code: string) {
 
 export async function fetchDep(name: string) {
   // Local mode: map Encore component name to local JSX/JS under /flex-layout
-  console.log(`🔍 fetchDep called for ${name}. isLocalMode: ${isLocalMode()}`);
+  logger.debug('Fetching dependency', { name, isLocal: isLocalMode() });
   if (isLocalMode()) {
     // Expecting `${appId}/draft/components/${pageId}`
     const m = name.match(/^([^/]+)\/draft\/components\/([^/]+)$/);
@@ -160,7 +159,7 @@ export async function fetchDep(name: string) {
   // Remote mode: use AMD loader
   const cacheBuster = Math.round(Date.now() / 1000);
   const url = `${CONST_COMPONENTS_CDN_URL}/${name}.js?cacheBuster=${cacheBuster}`;
-  console.log(`[Module Loading] Fetching remote component from: ${url}`);
+  logger.debug('Fetching remote component', { url });
   const text = await fetch(url).then(async (a) => {
     if (!a.ok) {
       if (a.status === 403) {

package/src/lib/fetcher.ts

@@ -1,6 +1,7 @@
 import axios from "axios";
 import { isLocalMode } from "./localMode";
 import useEncoreState from "../stores/useEncoreState";
+import logger from "./logger";
 
 // Get baseURL from store at runtime instead of build time
 const getAppsServiceUrl = () => {
@@ -86,19 +87,11 @@ const fetcher = (url: string) => {
   // Get baseURL at runtime from store
   const appsServiceUrl = getAppsServiceUrl();
 
-  console.log(
-    "[Fetcher] Requesting:",
-    url,
-    "BaseURL:",
-    appsServiceUrl,
-    "Headers:",
-    { "x-app-clientrendered": "disabled" }
-  );
+  logger.debug('Fetching from Encore service', { url, baseURL: appsServiceUrl });
 
   return axios({
     baseURL: appsServiceUrl,
     url,
-    // headers: { "x-app-clientrendered": "true" },
   }).then((res) => res.data);
 };
 

package/src/lib/logger.ts

@@ -0,0 +1,53 @@
+/**
+ * Centralized logging utility for encore-lib
+ *
+ * Provides conditional logging based on environment.
+ * Debug logs only appear in development mode.
+ */
+
+const isDev = typeof import.meta !== 'undefined'
+  ? import.meta.env?.DEV || import.meta.env?.MODE === 'development'
+  : process.env.NODE_ENV === 'development';
+
+/**
+ * Logger instance with environment-aware methods
+ */
+export const logger = {
+  /**
+   * Debug-level logging (only in development)
+   * Use for detailed diagnostic information
+   */
+  debug: (...args: any[]) => {
+    if (isDev) {
+      console.debug('[encore-lib]', ...args);
+    }
+  },
+
+  /**
+   * Info-level logging (only in development)
+   * Use for general informational messages
+   */
+  info: (...args: any[]) => {
+    if (isDev) {
+      console.info('[encore-lib]', ...args);
+    }
+  },
+
+  /**
+   * Warning-level logging (always shown)
+   * Use for recoverable issues that need attention
+   */
+  warn: (...args: any[]) => {
+    console.warn('[encore-lib]', ...args);
+  },
+
+  /**
+   * Error-level logging (always shown)
+   * Use for errors and exceptions
+   */
+  error: (...args: any[]) => {
+    console.error('[encore-lib]', ...args);
+  },
+};
+
+export default logger;

package/src/lib/moduleRegistry.ts

@@ -1,3 +1,5 @@
+import logger from "./logger";
+
 const registry: Record<string, any> = {};
 
 export function registerModule(name: string, module: any) {
@@ -19,6 +21,6 @@ export function haveModule(name: string): boolean {
 export function clearModuleCache(name: string): void {
   if (name in registry) {
     delete registry[name];
-    console.log(`[Module Cache] Cleared module: ${name}`);
+    logger.debug('Module cache cleared', { name });
   }
 }