@rork-ai/toolkit-dev-sdk 0.2.6 → 0.2.7

package/src/inspector.53.tsx

@@ -0,0 +1,467 @@
+/*
+The code here will is moved to our infrastructure (with ctrl+c ctrl+v)
+ where we add it in _layout.tsx as it is.
+
+It will be added at .rork/BundleInspector.tsx (web vestoin too).
+
+That is why:
+1. This file should never import other files
+2. This file should never import other modules that will not be on the device.
+We import react-native-safe-area-context and lucide-react-native 
+but we are confident it will be there. Still not great.
+
+*/
+
+import { BlurView } from "expo-blur";
+import {
+  requireOptionalNativeModule,
+  type EventSubscription,
+} from "expo-modules-core";
+import { X } from "lucide-react-native";
+import type { PropsWithChildren } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import type { ViewStyle } from "react-native";
+import {
+  Dimensions,
+  LogBox,
+  NativeModules,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+// @ts-ignore
+import DebuggingOverlay from "react-native/Libraries/Debugging/DebuggingOverlay.js";
+// @ts-ignore
+import useSubscribeToDebuggingOverlayRegistry from "react-native/Libraries/Debugging/useSubscribeToDebuggingOverlayRegistry";
+import type {
+  InspectorData,
+  TouchedViewDataAtPoint,
+  // @ts-ignore
+} from "react-native/Libraries/Renderer/shims/ReactNativeTypes";
+import ErrorUtils from "react-native/Libraries/vendor/core/ErrorUtils";
+
+const getInspectorDataForViewAtPoint =
+  require("react-native/src/private/inspector/getInspectorDataForViewAtPoint").default;
+const InspectorOverlay =
+  require("react-native/src/private/inspector/InspectorOverlay").default;
+// Removed InspectorPanel import - implementing inline
+
+type PanelPosition = "top" | "bottom";
+
+export type InspectedElementFrame = TouchedViewDataAtPoint["frame"];
+
+export type InspectedElement = Readonly<{
+  frame: InspectedElementFrame;
+  style?: ViewStyle;
+}>;
+
+export type ElementsHierarchy = InspectorData["hierarchy"];
+
+export type BundleInspectorRef = { enableDebuggingOverlay: () => void };
+export type BundleInspectorProps = PropsWithChildren<{}>;
+
+const BridgeModule = requireOptionalNativeModule("Bridge");
+
+export function isRorkSandbox() {
+  return !!NativeModules.RorkSandbox;
+}
+
+if (BridgeModule) {
+  LogBox.ignoreAllLogs();
+  LogBox.uninstall();
+
+  // @ts-ignore
+  ErrorUtils.setGlobalHandler((error) => {
+    sendBridgeMessage("runtime-error", {
+      stack: error.stack,
+      message: error.message,
+    });
+  });
+}
+
+export function sendBridgeMessage(
+  type:
+    | "inspector-element"
+    | "merge-inspector-state"
+    | "runtime-ready"
+    | "runtime-error",
+  data?: Record<string, any>,
+) {
+  if (data) {
+    return BridgeModule?.sendMessage({ type, data: JSON.stringify(data) });
+  }
+
+  return BridgeModule?.sendMessage({ type });
+}
+
+export function addBridgeListener(
+  listener: (data: Record<string, any>) => void,
+): EventSubscription {
+  return BridgeModule?.addListener("onMessage", (data: any) => {
+    if (typeof data !== "object") return;
+    if (data.data) {
+      listener({ ...data, data: JSON.parse(data.data) });
+    } else {
+      listener(data);
+    }
+  });
+}
+
+export function useBridge() {
+  const [state, setState] = useState({ inspectorEnabled: false });
+
+  useEffect(() => {
+    const subscription = addBridgeListener((data) => {
+      if (typeof data === "object" && data.type === "merge-inspector-state") {
+        setState((prev) => ({ ...prev, ...data.data }));
+      }
+    });
+
+    sendBridgeMessage("runtime-ready");
+
+    return () => subscription?.remove();
+  }, []);
+
+  const disableInspector = useCallback(() => {
+    setState((prev) => ({ ...prev, inspectorEnabled: false }));
+    sendBridgeMessage("merge-inspector-state", { inspectorEnabled: false });
+  }, []);
+
+  return { ...state, disableInspector };
+}
+
+export function BundleInspector(props: BundleInspectorProps) {
+  const innerViewRef = useRef(null);
+  const appContainerRootViewRef = useRef(null);
+  const debuggingOverlayRef = useRef(null);
+  const { inspectorEnabled, disableInspector } = useBridge();
+
+  const [panelPosition, setPanelPosition] = useState<PanelPosition>("bottom");
+  const [inspectedElement, setInspectedElement] =
+    useState<InspectedElement | null>(null);
+
+  const [lastPayload, setLastPayload] = useState<Record<string, any> | null>(
+    null,
+  );
+
+  useEffect(() => {
+    if (inspectorEnabled) return;
+    setInspectedElement(null);
+    setPanelPosition("bottom");
+  }, [inspectorEnabled]);
+
+  useSubscribeToDebuggingOverlayRegistry(
+    appContainerRootViewRef,
+    debuggingOverlayRef,
+  );
+
+  const handleInspectedElementChange = useCallback(
+    (viewData: TouchedViewDataAtPoint | null) => {
+      if (viewData) {
+        const payload = {
+          style: viewData.props.style,
+          frame: viewData.frame,
+          componentStack: viewData.componentStack,
+          hierarchy: viewData.hierarchy?.map((h: any) => ({
+            name: h.name ?? null,
+          })),
+        };
+
+        setLastPayload(payload);
+      }
+    },
+    [],
+  );
+
+  const onTouchPoint = (locationX: number, locationY: number) => {
+    getInspectorDataForViewAtPoint(
+      innerViewRef.current,
+      locationX,
+      locationY,
+      (viewData: TouchedViewDataAtPoint) => {
+        setPanelPosition(
+          viewData.pointerY > Dimensions.get("window").height * 0.8
+            ? "top"
+            : "bottom",
+        );
+
+        setInspectedElement({
+          frame: viewData.frame,
+          style: viewData.props.style,
+        });
+
+        handleInspectedElementChange(viewData);
+
+        return false;
+      },
+    );
+  };
+
+  const { top, bottom } = useSafeAreaInsets();
+
+  const panelContainerStyle =
+    panelPosition === "bottom"
+      ? { bottom: 0, marginBottom: bottom }
+      : { top: 0, marginTop: top };
+
+  return (
+    <View style={styles.container} ref={appContainerRootViewRef}>
+      <View style={styles.container} ref={innerViewRef}>
+        {props.children}
+      </View>
+
+      {inspectorEnabled && (
+        <DebuggingOverlay ref={debuggingOverlayRef} style={styles.absolute} />
+      )}
+
+      {inspectorEnabled && (
+        <View style={styles.inspectorContainer} pointerEvents="box-none">
+          <InspectorOverlay
+            inspected={inspectedElement}
+            onTouchPoint={onTouchPoint}
+          />
+
+          <BlurView
+            style={[
+              {
+                position: "absolute",
+                left: 0,
+                right: 0,
+                backgroundColor: "rgba(0, 0, 0, 0.85)",
+                borderRadius: 30,
+                marginHorizontal: 12,
+                padding: 12,
+                paddingLeft: 20,
+                overflow: "hidden",
+              },
+              panelContainerStyle,
+            ]}
+          >
+            {inspectedElement ? (
+              <View style={styles.floatingIsland}>
+                <Text style={styles.islandText}>Element selected</Text>
+                <View style={styles.buttonGroup}>
+                  <TouchableOpacity
+                    style={styles.selectButton}
+                    onPress={() => {
+                      if (lastPayload) {
+                        sendBridgeMessage("inspector-element", lastPayload);
+                        disableInspector();
+                      }
+                    }}
+                  >
+                    <Text style={styles.buttonText}>Select</Text>
+                  </TouchableOpacity>
+                  <TouchableOpacity
+                    activeOpacity={0.72}
+                    style={styles.cancelButton}
+                    onPress={disableInspector}
+                  >
+                    <X size={18} color="#808080" strokeWidth={2.5} />
+                  </TouchableOpacity>
+                </View>
+              </View>
+            ) : (
+              <View style={styles.floatingIsland}>
+                <Text style={styles.islandText}>
+                  Touch any element to inspect
+                </Text>
+                <TouchableOpacity
+                  activeOpacity={0.72}
+                  style={styles.cancelTextButton}
+                  onPress={disableInspector}
+                >
+                  <Text style={styles.buttonText}>Cancel</Text>
+                </TouchableOpacity>
+              </View>
+            )}
+          </BlurView>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  absolute: StyleSheet.absoluteFillObject,
+  inspectorContainer: {
+    position: "absolute",
+    backgroundColor: "transparent",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  properties: {
+    flexShrink: 1,
+  },
+  elementInfo: {
+    padding: 8,
+    gap: 3,
+  },
+  section: {
+    marginBottom: 15,
+  },
+  sectionTitle: {
+    color: "white",
+    fontSize: 11,
+    fontWeight: "600",
+    marginBottom: 4,
+    textTransform: "uppercase",
+    opacity: 0.7,
+  },
+  boxModel: {
+    backgroundColor: "rgba(255, 255, 255, 0.1)",
+    padding: 10,
+    borderRadius: 4,
+    alignItems: "center",
+  },
+  boxText: {
+    color: "white",
+    fontSize: 13,
+    fontWeight: "500",
+  },
+  layoutInfo: {
+    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    padding: 8,
+    borderRadius: 4,
+  },
+  layoutText: {
+    color: "white",
+    fontSize: 12,
+    marginBottom: 2,
+  },
+  styleInfo: {
+    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    padding: 8,
+    borderRadius: 4,
+  },
+  styleText: {
+    color: "white",
+    fontSize: 11,
+    marginBottom: 2,
+    fontFamily: "monospace",
+  },
+  waiting: {
+    height: 60,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  waitingContent: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  waitingText: {
+    fontSize: 14,
+    textAlign: "center",
+    color: "white",
+    opacity: 0.9,
+    fontWeight: "500",
+  },
+  waitingSubText: {
+    fontSize: 12,
+    textAlign: "center",
+    color: "white",
+    opacity: 0.6,
+    marginTop: 4,
+  },
+  floatingIsland: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: 16,
+  },
+  islandText: {
+    color: "white",
+    fontSize: 16,
+    fontWeight: "600",
+    flex: 1,
+  },
+  buttonGroup: {
+    flexDirection: "row",
+    gap: 8,
+  },
+  selectButton: {
+    backgroundColor: "#007AFF",
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 16,
+    minWidth: 60,
+  },
+  cancelButton: {
+    backgroundColor: "rgba(255, 255, 255, 0.15)",
+    borderRadius: 16,
+    aspectRatio: 1,
+    height: 28,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  cancelTextButton: {
+    backgroundColor: "rgba(255, 255, 255, 0.15)",
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 16,
+    minWidth: 60,
+  },
+  buttonText: {
+    color: "white",
+    fontSize: 14,
+    fontWeight: "600",
+    textAlign: "center",
+  },
+  panelTitle: {
+    color: "white",
+    fontSize: 14,
+    fontWeight: "600",
+    marginBottom: 8,
+    textAlign: "center",
+  },
+  editorSection: {
+    marginBottom: 10,
+  },
+  inputGrid: {
+    flexDirection: "row",
+    gap: 8,
+  },
+  inputCell: {
+    flex: 1,
+  },
+  inputLabel: {
+    color: "white",
+    fontSize: 10,
+    fontWeight: "500",
+    marginBottom: 2,
+    opacity: 0.8,
+  },
+  compactInput: {
+    backgroundColor: "rgba(255, 255, 255, 0.1)",
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4,
+    color: "white",
+    fontSize: 12,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.15)",
+    height: 28,
+  },
+  applyButton: {
+    backgroundColor: "#007AFF",
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    borderRadius: 6,
+    alignItems: "center",
+    marginTop: 8,
+    alignSelf: "flex-end",
+  },
+  applyButtonText: {
+    color: "white",
+    fontSize: 14,
+    fontWeight: "600",
+  },
+});