@bravostudioai/react 0.1.0 → 0.1.2

package/src/codegen/types.ts

@@ -0,0 +1,58 @@
+export interface ComponentInfo {
+  id: string;
+  name: string;
+  type: string;
+  tags: string[];
+  propName: string; // Sanitized name for prop
+  propType: string; // TypeScript type for the prop
+}
+
+export interface ArrayContainerInfo {
+  id: string;
+  name: string;
+  propName: string;
+  components: ComponentInfo[];
+}
+
+export interface SliderInfo {
+  id: string;
+  name: string;
+  arrayContainer: ArrayContainerInfo | null;
+}
+
+export interface InputGroupInfo {
+  groupName: string;
+  groupType: string; // "single" for radio button behavior
+  elements: Array<{
+    id: string;
+    name: string;
+  }>;
+}
+
+export interface FormInfo {
+  formId: string;
+  formName: string;
+  submitButtonId?: string;
+  inputs: Array<{
+    id: string;
+    name: string;
+    type: string;
+    propName: string; // Sanitized and qualified prop name
+    _parentPath?: string[]; // Temporary: parent path for qualification
+  }>;
+}
+
+export interface SelectInputInfo {
+  id: string;
+  name: string;
+  propName: string; // e.g., "contractType" for value prop, generates onContractTypeChange handler
+  _parentPath?: string[]; // For qualification if duplicates
+}
+
+export interface ActionButtonInfo {
+  id: string;
+  name: string;
+  propName: string; // e.g., "bookButton" generates onBookButtonClick handler
+  actionType: string; // "remote", "link", etc.
+  _parentPath?: string[];
+}

package/src/components/EncoreApp.tsx

@@ -19,15 +19,35 @@ import EncoreRepeatingContainerContext, {
   type RepeatingContainerControl,
 } from "../contexts/EncoreRepeatingContainerContext";
 import DynamicComponent from "./DynamicComponent";
-import { Link } from "react-router-dom";
+// import { Link } from "react-router-dom"; // Removed dependency
+import { useEncoreRouter } from "../contexts/EncoreRouterContext";
 import { usePusherUpdates } from "../hooks/usePusherUpdates";
 
+// Simple internal Link component that uses our router context
+const Link = ({ to, children, style, ...props }: any) => {
+  const { navigate } = useEncoreRouter();
+  return (
+    <a
+      href={to}
+      onClick={(e) => {
+        e.preventDefault();
+        navigate(to);
+      }}
+      style={{ cursor: "pointer", ...style }}
+      {...props}
+    >
+      {children}
+    </a>
+  );
+};
+
 type Props = {
   appId: string;
   pageId?: string;
   componentId?: string;
   fallback?: React.ReactNode;
   onSizeChange?: (size: { width: number; height: number }) => void;
+  onContentSizeChange?: (size: { width: number; height: number }) => void;
   onAction?: (payload: EncoreActionPayload) => void | Promise<void>;
   data?: Record<string, string | number | any[]>;
   // When provided, force the runtime to load from either remote or local sources
@@ -66,6 +86,7 @@ const EncoreApp = ({
   componentId,
   fallback,
   onSizeChange,
+  onContentSizeChange,
   onAction,
   data,
   source,
@@ -102,6 +123,31 @@ const EncoreApp = ({
   const setPageId = useEncoreState(setPageIdSelector);
   const assetsById = useEncoreState(assetsByIdSelector);
   const containerRef = useRef<HTMLDivElement | null>(null);
+  const contentWrapperRef = useRef<HTMLDivElement | null>(null);
+
+  // Monitor content size changes
+  useEffect(() => {
+    if (!onContentSizeChange) return;
+    const element = contentWrapperRef.current;
+    if (!element) return;
+
+    const notify = () => {
+      // Use scroll dimensions to get full size including overflow
+      onContentSizeChange({
+        width: element.scrollWidth,
+        height: element.scrollHeight,
+      });
+    };
+
+    const observer = new ResizeObserver(() => {
+      notify();
+    });
+
+    // Emit initial size
+    notify();
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [onContentSizeChange]);
 
   // State to force DynamicComponent reload when updates are received
   const [reloadKey, setReloadKey] = useState<string | number>(0);
@@ -730,28 +776,35 @@ const EncoreApp = ({
   return (
     <div
       ref={containerRef}
-      style={{ width: "100%", height: "100%", position: "relative" }}
+      style={{
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        overflow: "hidden",
+      }}
     >
-      <Suspense fallback={fallback || <div />}>
-        <EncoreComponentIdContext.Provider value={{ componentId }}>
-          <EncoreActionContext.Provider value={{ onAction }}>
-            <EncoreRepeatingContainerContext.Provider
-              value={repeatingContainerContextValue}
-            >
-              <EncoreBindingContext.Provider value={context}>
-                <DynamicComponent
-                  name={`${appId}/draft/components/${pageId}`}
-                  fallback={fallback}
-                  reloadKey={reloadKey}
-                  componentCode={componentCode}
-                >
-                  {" "}
-                </DynamicComponent>
-              </EncoreBindingContext.Provider>
-            </EncoreRepeatingContainerContext.Provider>
-          </EncoreActionContext.Provider>
-        </EncoreComponentIdContext.Provider>
-      </Suspense>
+      <div ref={contentWrapperRef} style={{ width: "100%", minHeight: "100%" }}>
+        <Suspense fallback={fallback || <div />}>
+          <EncoreComponentIdContext.Provider value={{ componentId }}>
+            <EncoreActionContext.Provider value={{ onAction }}>
+              <EncoreRepeatingContainerContext.Provider
+                value={repeatingContainerContextValue}
+              >
+                <EncoreBindingContext.Provider value={context}>
+                  <DynamicComponent
+                    name={`${appId}/draft/components/${pageId}`}
+                    fallback={fallback}
+                    reloadKey={reloadKey}
+                    componentCode={componentCode}
+                  >
+                    {" "}
+                  </DynamicComponent>
+                </EncoreBindingContext.Provider>
+              </EncoreRepeatingContainerContext.Provider>
+            </EncoreActionContext.Provider>
+          </EncoreComponentIdContext.Provider>
+        </Suspense>
+      </div>
     </div>
   );
 };

package/src/contexts/EncoreRouterContext.ts

@@ -0,0 +1,28 @@
+import React, { useContext } from "react";
+
+export type EncoreRouterContextType = {
+  navigate: (path: string) => void;
+  pathname: string;
+  searchParams: URLSearchParams;
+};
+
+// Default implementation using window for basic fallback
+const defaultRouter: EncoreRouterContextType = {
+  navigate: (path: string) => {
+    if (typeof window !== "undefined") {
+      window.location.href = path;
+    }
+  },
+  pathname: typeof window !== "undefined" ? window.location.pathname : "",
+  searchParams:
+    typeof window !== "undefined"
+      ? new URLSearchParams(window.location.search)
+      : new URLSearchParams(),
+};
+
+const EncoreRouterContext =
+  React.createContext<EncoreRouterContextType>(defaultRouter);
+
+export const useEncoreRouter = () => useContext(EncoreRouterContext);
+
+export default EncoreRouterContext;

package/src/hooks/useAuthRedirect.ts

@@ -1,63 +1,64 @@
 import EncoreAppContext from "../contexts/EncoreAppContext";
 import useEncoreState from "../stores/useEncoreState";
-import { useSearchParams, useNavigate, useLocation } from "react-router-dom";
+import { useEncoreRouter } from "../contexts/EncoreRouterContext";
 import { useContext, useEffect, useMemo } from "react";
 
 const useAuthRedirect = () => {
-    const [searchParams] = useSearchParams();
-    const location = useLocation();
-    const navigate = useNavigate();
-
-    const appId =
-        searchParams.get("appId") ||
-        location.pathname.split("/apps/")[1]?.split("/")[0];
-    const pageId =
-        searchParams.get("pageId") ||
-        location.pathname.split("/pages/")[1]?.split("/")[0];
-    const noRedirect = searchParams.get("noRedirect");
-
-    const { app } = useContext(EncoreAppContext);
-    const accessToken = useEncoreState((state) => state.accessToken);
-
-    const navMap = app.data?.app?.navigationMap;
-    const loginPageId = app.data?.app?.loginPageId;
-    const isAuthenticated = accessToken && accessToken?.expireAt > Date.now();
-
-    // Some apps have multiple pages in the signin flow.
-    // Existing apps don't have a "page requires auth" declaration (or the inverse) so we must infer it.
-    // We infer it using pages linked from the tagged login page
-    const loginPages = useMemo(() => {
-        if (!navMap) return [];
-
-        const findConnectedPages = (
-            pageMap: Record<string, { linksTo: string[] }>,
-            currentPage: string,
-            visited = new Set(),
-        ): string[] => {
-            if (visited.has(currentPage)) return [];
-            visited.add(currentPage);
-
-            const directLinks = pageMap[currentPage]?.linksTo || [];
-            const indirectLinks = directLinks.flatMap((link) =>
-                findConnectedPages(pageMap, link, visited),
-            );
-
-            return [...directLinks, ...indirectLinks];
-        };
-
-        const result = new Set(findConnectedPages(navMap.pages, loginPageId));
-        result.add(loginPageId);
-
-        return Array.from(result);
-    }, [navMap]);
-
-    useEffect(() => {
-        if (noRedirect) return;
-        if (isAuthenticated) return;
-        if (!loginPageId || loginPages.includes(pageId as string)) return;
-
-        navigate(`/apps/${appId}/pages/${loginPageId}`);
-    }, [loginPageId, pageId, isAuthenticated, noRedirect]);
+  const { searchParams, pathname, navigate } = useEncoreRouter();
+
+  // Polyfill location object style access if needed, or just use pathname directly since that's all that WAS used
+  const location = { pathname };
+
+  const appId =
+    searchParams.get("appId") ||
+    location.pathname.split("/apps/")[1]?.split("/")[0];
+  const pageId =
+    searchParams.get("pageId") ||
+    location.pathname.split("/pages/")[1]?.split("/")[0];
+  const noRedirect = searchParams.get("noRedirect");
+
+  const { app } = useContext(EncoreAppContext);
+  const accessToken = useEncoreState((state) => state.accessToken);
+
+  const navMap = app.data?.app?.navigationMap;
+  const loginPageId = app.data?.app?.loginPageId;
+  const isAuthenticated = accessToken && accessToken?.expireAt > Date.now();
+
+  // Some apps have multiple pages in the signin flow.
+  // Existing apps don't have a "page requires auth" declaration (or the inverse) so we must infer it.
+  // We infer it using pages linked from the tagged login page
+  const loginPages = useMemo(() => {
+    if (!navMap) return [];
+
+    const findConnectedPages = (
+      pageMap: Record<string, { linksTo: string[] }>,
+      currentPage: string,
+      visited = new Set()
+    ): string[] => {
+      if (visited.has(currentPage)) return [];
+      visited.add(currentPage);
+
+      const directLinks = pageMap[currentPage]?.linksTo || [];
+      const indirectLinks = directLinks.flatMap((link) =>
+        findConnectedPages(pageMap, link, visited)
+      );
+
+      return [...directLinks, ...indirectLinks];
+    };
+
+    const result = new Set(findConnectedPages(navMap.pages, loginPageId));
+    result.add(loginPageId);
+
+    return Array.from(result);
+  }, [navMap]);
+
+  useEffect(() => {
+    if (noRedirect) return;
+    if (isAuthenticated) return;
+    if (!loginPageId || loginPages.includes(pageId as string)) return;
+
+    navigate(`/apps/${appId}/pages/${loginPageId}`);
+  }, [loginPageId, pageId, isAuthenticated, noRedirect]);
 };
 
 export default useAuthRedirect;

package/src/lib/packages.ts

@@ -1,33 +1,26 @@
 import React from "react";
-// import {
-//     Link,
-//     useSearchParams,
-//     useNavigate,
-//     useLocation,
-// } from "react-router-dom";
+// React router dom dependency removed
 import axios from "axios";
 import EncoreComponents from "../components";
-import * as EncoreApp from "../app"
+import * as EncoreApp from "../app";
 // Note: ../app module doesn't exist in encore-lib, commenting out for now
 
 export type Package = {
-    exports: unknown;
+  exports: unknown;
 };
 
 // These are the packages that will be available to remotely loaded code
 const Packages: Record<string, () => Package> = {
-    "@/bravo/app": () => ({ exports: EncoreApp }), // Disabled: app module doesn't exist
-    // "react-router-dom": () => ({
-    //     exports: { Link, useSearchParams, useNavigate, useLocation },
-    // }),
-    axios: () => ({ exports: axios }),
-    react: () => ({ exports: React }),
+  "@/bravo/app": () => ({ exports: EncoreApp }), // Disabled: app module doesn't exist
+  // React router dom removed
+  axios: () => ({ exports: axios }),
+  react: () => ({ exports: React }),
 };
 
 // Enable this if you want to use components from local project
 const USE_LOCAL_BRAVO_RN = true;
 if (USE_LOCAL_BRAVO_RN) {
-    Packages["@/bravo/components"] = () => ({ exports: EncoreComponents });
+  Packages["@/bravo/components"] = () => ({ exports: EncoreComponents });
 }
 
 export default Packages;