@teardown/dev-client 2.0.44

package/src/components/dev-menu/dev-menu.tsx

@@ -0,0 +1,254 @@
+/**
+ * DevMenu Component
+ *
+ * A modal developer menu that provides quick access to
+ * development tools and actions.
+ */
+
+import type React from "react";
+import { useCallback, useMemo } from "react";
+import {
+	Modal,
+	ScrollView,
+	StyleSheet,
+	Text,
+	type TextStyle,
+	TouchableOpacity,
+	View,
+	type ViewStyle,
+} from "react-native";
+import type { BundlerStatus, DevMenuItem } from "../../types";
+
+/**
+ * DevMenu component props
+ */
+export interface DevMenuProps {
+	/** Whether the menu is visible */
+	visible: boolean;
+
+	/** Callback when menu should close */
+	onDismiss: () => void;
+
+	/** Menu items to display */
+	items: DevMenuItem[];
+
+	/** Current bundler status */
+	bundlerStatus?: BundlerStatus;
+
+	/** Whether an action is loading */
+	isLoading?: boolean;
+
+	/** Custom header component */
+	renderHeader?: () => React.ReactNode;
+
+	/** Theme variant */
+	theme?: "light" | "dark" | "auto";
+
+	/** Test ID for testing */
+	testID?: string;
+}
+
+/**
+ * Get theme colors
+ */
+function getThemeColors(theme: "light" | "dark" | "auto") {
+	// For auto, we'd typically check system appearance
+	// For now, default to light
+	const isDark = theme === "dark";
+
+	return {
+		overlay: "rgba(0, 0, 0, 0.5)",
+		background: isDark ? "#1a1a1a" : "#ffffff",
+		border: isDark ? "#333333" : "#e0e0e0",
+		text: isDark ? "#ffffff" : "#1a1a1a",
+		textSecondary: isDark ? "#aaaaaa" : "#666666",
+		itemBackground: isDark ? "#2a2a2a" : "#f5f5f5",
+		itemHover: isDark ? "#333333" : "#e8e8e8",
+		accent: "#007aff",
+		success: "#34c759",
+		error: "#ff3b30",
+	};
+}
+
+/**
+ * DevMenu component
+ */
+export function DevMenu(props: DevMenuProps): React.JSX.Element | null {
+	const { visible, onDismiss, items, bundlerStatus, isLoading = false, renderHeader, theme = "light", testID } = props;
+
+	const colors = useMemo(() => getThemeColors(theme), [theme]);
+
+	const handleItemPress = useCallback(
+		async (item: DevMenuItem) => {
+			if (isLoading) return;
+
+			try {
+				await item.onPress();
+			} catch (error) {
+				console.error(`[DevMenu] Action failed: ${item.label}`, error);
+			}
+		},
+		[isLoading]
+	);
+
+	// Filter items based on dev mode
+	const visibleItems = useMemo(() => {
+		return items.filter((item) => {
+			if (item.devOnly && !__DEV__) {
+				return false;
+			}
+			return true;
+		});
+	}, [items]);
+
+	const dynamicStyles = useMemo(
+		() => ({
+			container: {
+				backgroundColor: colors.background,
+			} as ViewStyle,
+			header: {
+				borderBottomColor: colors.border,
+			} as ViewStyle,
+			title: {
+				color: colors.text,
+			} as TextStyle,
+			subtitle: {
+				color: colors.textSecondary,
+			} as TextStyle,
+			menuItem: {
+				backgroundColor: colors.itemBackground,
+			} as ViewStyle,
+			menuItemText: {
+				color: colors.text,
+			} as TextStyle,
+			closeButton: {
+				backgroundColor: colors.itemBackground,
+			} as ViewStyle,
+			closeButtonText: {
+				color: colors.accent,
+			} as TextStyle,
+			statusDot: {
+				backgroundColor: bundlerStatus?.connected ? colors.success : colors.error,
+			} as ViewStyle,
+		}),
+		[colors, bundlerStatus?.connected]
+	);
+
+	if (!visible) {
+		return null;
+	}
+
+	return (
+		<Modal visible={visible} transparent animationType="fade" onRequestClose={onDismiss} testID={testID}>
+			<View style={styles.overlay}>
+				<View style={[styles.container, dynamicStyles.container]}>
+					{renderHeader ? (
+						renderHeader()
+					) : (
+						<View style={[styles.header, dynamicStyles.header]}>
+							<View style={styles.headerContent}>
+								<Text style={[styles.title, dynamicStyles.title]}>Developer Menu</Text>
+								<View style={styles.statusRow}>
+									<View style={[styles.statusDot, dynamicStyles.statusDot]} />
+									<Text style={[styles.subtitle, dynamicStyles.subtitle]}>
+										{bundlerStatus?.connected ? `Connected to ${bundlerStatus.url}` : "Disconnected"}
+									</Text>
+								</View>
+							</View>
+						</View>
+					)}
+
+					<ScrollView style={styles.menuList} showsVerticalScrollIndicator={false}>
+						{visibleItems.map((item) => (
+							<TouchableOpacity
+								key={item.id}
+								style={[styles.menuItem, dynamicStyles.menuItem]}
+								onPress={() => handleItemPress(item)}
+								disabled={isLoading}
+								activeOpacity={0.7}
+								testID={`dev-menu-item-${item.id}`}
+							>
+								<Text style={[styles.menuItemText, dynamicStyles.menuItemText]}>{item.label}</Text>
+							</TouchableOpacity>
+						))}
+					</ScrollView>
+
+					<TouchableOpacity
+						style={[styles.closeButton, dynamicStyles.closeButton]}
+						onPress={onDismiss}
+						activeOpacity={0.7}
+						testID="dev-menu-close"
+					>
+						<Text style={[styles.closeButtonText, dynamicStyles.closeButtonText]}>Close</Text>
+					</TouchableOpacity>
+				</View>
+			</View>
+		</Modal>
+	);
+}
+
+const styles = StyleSheet.create({
+	overlay: {
+		flex: 1,
+		backgroundColor: "rgba(0, 0, 0, 0.5)",
+		justifyContent: "center",
+		alignItems: "center",
+	},
+	container: {
+		width: "85%",
+		maxWidth: 400,
+		maxHeight: "70%",
+		borderRadius: 12,
+		overflow: "hidden",
+		shadowColor: "#000",
+		shadowOffset: { width: 0, height: 2 },
+		shadowOpacity: 0.25,
+		shadowRadius: 8,
+		elevation: 5,
+	},
+	header: {
+		padding: 16,
+		borderBottomWidth: 1,
+	},
+	headerContent: {
+		gap: 4,
+	},
+	title: {
+		fontSize: 18,
+		fontWeight: "600",
+	},
+	statusRow: {
+		flexDirection: "row",
+		alignItems: "center",
+		gap: 6,
+	},
+	statusDot: {
+		width: 8,
+		height: 8,
+		borderRadius: 4,
+	},
+	subtitle: {
+		fontSize: 12,
+	},
+	menuList: {
+		maxHeight: 300,
+	},
+	menuItem: {
+		padding: 16,
+		marginHorizontal: 12,
+		marginVertical: 4,
+		borderRadius: 8,
+	},
+	menuItemText: {
+		fontSize: 16,
+	},
+	closeButton: {
+		padding: 16,
+		alignItems: "center",
+		marginTop: 8,
+	},
+	closeButtonText: {
+		fontSize: 16,
+		fontWeight: "500",
+	},
+});

package/src/components/dev-menu/index.ts

@@ -0,0 +1,5 @@
+/**
+ * DevMenu component exports
+ */
+
+export { DevMenu, type DevMenuProps } from "./dev-menu";

package/src/components/error-overlay/error-overlay.tsx

@@ -0,0 +1,256 @@
+/**
+ * ErrorOverlay Component
+ *
+ * Displays error information in development mode with
+ * stack trace and action buttons.
+ */
+
+import type React from "react";
+import { useCallback, useState } from "react";
+import { ScrollView, StyleSheet, Text, type TextStyle, TouchableOpacity, View, type ViewStyle } from "react-native";
+import { reload } from "../../native/dev-settings";
+
+/**
+ * ErrorOverlay component props
+ */
+export interface ErrorOverlayProps {
+	/** Error to display */
+	error: Error | null;
+
+	/** Error info from React error boundary */
+	errorInfo?: React.ErrorInfo | null;
+
+	/** Callback when error is dismissed */
+	onDismiss?: () => void;
+
+	/** Callback when retry is pressed */
+	onRetry?: () => void;
+
+	/** Whether to show in production (default: false) */
+	showInProduction?: boolean;
+
+	/** Test ID for testing */
+	testID?: string;
+}
+
+/**
+ * Parse stack trace into formatted lines
+ */
+function parseStackTrace(stack: string | undefined): string[] {
+	if (!stack) return [];
+
+	return stack
+		.split("\n")
+		.map((line) => line.trim())
+		.filter((line) => line.length > 0);
+}
+
+/**
+ * ErrorOverlay component
+ *
+ * Displays a full-screen error overlay with:
+ * - Error message
+ * - Stack trace (collapsible)
+ * - Reload and Dismiss buttons
+ *
+ * @example
+ * ```tsx
+ * <ErrorOverlay
+ *   error={new Error('Something went wrong')}
+ *   onDismiss={() => setError(null)}
+ *   onRetry={() => fetchData()}
+ * />
+ * ```
+ */
+export function ErrorOverlay(props: ErrorOverlayProps): React.JSX.Element | null {
+	const { error, errorInfo, onDismiss, onRetry, showInProduction = false, testID = "error-overlay" } = props;
+
+	const [showStack, setShowStack] = useState(true);
+
+	const handleReload = useCallback(() => {
+		reload();
+	}, []);
+
+	const handleRetry = useCallback(() => {
+		onRetry?.();
+	}, [onRetry]);
+
+	const handleDismiss = useCallback(() => {
+		onDismiss?.();
+	}, [onDismiss]);
+
+	const toggleStack = useCallback(() => {
+		setShowStack((prev) => !prev);
+	}, []);
+
+	// Don't show in production unless explicitly enabled
+	if (!__DEV__ && !showInProduction) {
+		return null;
+	}
+
+	// Don't show if no error
+	if (!error) {
+		return null;
+	}
+
+	const stackLines = parseStackTrace(error.stack);
+	const componentStack = errorInfo?.componentStack?.split("\n").filter((line) => line.trim()) ?? [];
+
+	return (
+		<View style={styles.container} testID={testID}>
+			<View style={styles.header}>
+				<Text style={styles.title}>Error</Text>
+				<Text style={styles.message}>{error.message || "An unexpected error occurred"}</Text>
+			</View>
+
+			<TouchableOpacity style={styles.stackToggle} onPress={toggleStack} activeOpacity={0.7}>
+				<Text style={styles.stackToggleText}>{showStack ? "Hide Stack Trace ▼" : "Show Stack Trace ▶"}</Text>
+			</TouchableOpacity>
+
+			{showStack && (
+				<ScrollView style={styles.stackContainer} showsVerticalScrollIndicator>
+					<Text style={styles.stackTitle}>Stack Trace:</Text>
+					{stackLines.map((line, index) => (
+						<Text key={`stack-${index}`} style={styles.stackLine}>
+							{line}
+						</Text>
+					))}
+
+					{componentStack.length > 0 && (
+						<>
+							<Text style={[styles.stackTitle, styles.componentStackTitle]}>Component Stack:</Text>
+							{componentStack.map((line, index) => (
+								<Text key={`component-${index}`} style={styles.stackLine}>
+									{line}
+								</Text>
+							))}
+						</>
+					)}
+				</ScrollView>
+			)}
+
+			<View style={styles.actions}>
+				<TouchableOpacity
+					style={[styles.button, styles.reloadButton]}
+					onPress={handleReload}
+					activeOpacity={0.7}
+					testID="error-overlay-reload"
+				>
+					<Text style={styles.reloadButtonText}>Reload App</Text>
+				</TouchableOpacity>
+
+				{onRetry && (
+					<TouchableOpacity
+						style={[styles.button, styles.retryButton]}
+						onPress={handleRetry}
+						activeOpacity={0.7}
+						testID="error-overlay-retry"
+					>
+						<Text style={styles.retryButtonText}>Retry</Text>
+					</TouchableOpacity>
+				)}
+
+				{onDismiss && (
+					<TouchableOpacity
+						style={[styles.button, styles.dismissButton]}
+						onPress={handleDismiss}
+						activeOpacity={0.7}
+						testID="error-overlay-dismiss"
+					>
+						<Text style={styles.dismissButtonText}>Dismiss</Text>
+					</TouchableOpacity>
+				)}
+			</View>
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		...StyleSheet.absoluteFillObject,
+		backgroundColor: "#1a1a1a",
+		padding: 16,
+		zIndex: 10000,
+	} as ViewStyle,
+	header: {
+		marginBottom: 16,
+	} as ViewStyle,
+	title: {
+		fontSize: 24,
+		fontWeight: "bold",
+		color: "#ff3b30",
+		marginBottom: 8,
+	} as TextStyle,
+	message: {
+		fontSize: 16,
+		color: "#ffffff",
+		lineHeight: 22,
+	} as TextStyle,
+	stackToggle: {
+		paddingVertical: 8,
+		marginBottom: 8,
+	} as ViewStyle,
+	stackToggleText: {
+		fontSize: 14,
+		color: "#007aff",
+		fontWeight: "500",
+	} as TextStyle,
+	stackContainer: {
+		flex: 1,
+		backgroundColor: "#2a2a2a",
+		borderRadius: 8,
+		padding: 12,
+		marginBottom: 16,
+	} as ViewStyle,
+	stackTitle: {
+		fontSize: 12,
+		fontWeight: "600",
+		color: "#888888",
+		marginBottom: 8,
+		textTransform: "uppercase",
+	} as TextStyle,
+	componentStackTitle: {
+		marginTop: 16,
+	} as TextStyle,
+	stackLine: {
+		fontSize: 11,
+		fontFamily: "monospace",
+		color: "#cccccc",
+		lineHeight: 16,
+		marginBottom: 2,
+	} as TextStyle,
+	actions: {
+		flexDirection: "row",
+		gap: 12,
+	} as ViewStyle,
+	button: {
+		flex: 1,
+		paddingVertical: 14,
+		borderRadius: 8,
+		alignItems: "center",
+	} as ViewStyle,
+	reloadButton: {
+		backgroundColor: "#ff3b30",
+	} as ViewStyle,
+	reloadButtonText: {
+		color: "#ffffff",
+		fontWeight: "600",
+		fontSize: 16,
+	} as TextStyle,
+	retryButton: {
+		backgroundColor: "#007aff",
+	} as ViewStyle,
+	retryButtonText: {
+		color: "#ffffff",
+		fontWeight: "600",
+		fontSize: 16,
+	} as TextStyle,
+	dismissButton: {
+		backgroundColor: "#3a3a3a",
+	} as ViewStyle,
+	dismissButtonText: {
+		color: "#ffffff",
+		fontWeight: "600",
+		fontSize: 16,
+	} as TextStyle,
+});

package/src/components/error-overlay/index.ts

@@ -0,0 +1,5 @@
+/**
+ * ErrorOverlay component exports
+ */
+
+export { ErrorOverlay, type ErrorOverlayProps } from "./error-overlay";

package/src/components/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Component exports
+ */
+
+export { DevMenu, type DevMenuProps } from "./dev-menu";
+export { ErrorOverlay, type ErrorOverlayProps } from "./error-overlay";
+export { SplashScreen, type SplashScreenProps } from "./splash-screen";

package/src/components/splash-screen/index.ts

@@ -0,0 +1,5 @@
+/**
+ * SplashScreen component exports
+ */
+
+export { SplashScreen, type SplashScreenProps } from "./splash-screen";

package/src/components/splash-screen/splash-screen.tsx

@@ -0,0 +1,99 @@
+/**
+ * SplashScreen Component
+ *
+ * A customizable splash screen that displays while the app loads.
+ */
+
+import type React from "react";
+import { Animated, Image, type ImageSourcePropType, StyleSheet, View } from "react-native";
+
+/**
+ * SplashScreen component props
+ */
+export interface SplashScreenProps {
+	/** Whether the splash screen is visible */
+	visible: boolean;
+
+	/** Background color */
+	backgroundColor?: string;
+
+	/** Logo image source */
+	logo?: ImageSourcePropType;
+
+	/** Logo resize mode */
+	resizeMode?: "contain" | "cover" | "center";
+
+	/** Current opacity (for fade animation) */
+	opacity?: number;
+
+	/** Whether fade is in progress */
+	isFading?: boolean;
+
+	/** Test ID for testing */
+	testID?: string;
+}
+
+/**
+ * SplashScreen component
+ *
+ * Displays a customizable splash screen with optional logo.
+ * Supports fade-out animation via the opacity prop.
+ *
+ * @example
+ * ```tsx
+ * <SplashScreen
+ *   visible={true}
+ *   backgroundColor="#ffffff"
+ *   logo={require('./assets/logo.png')}
+ *   opacity={1}
+ * />
+ * ```
+ */
+export function SplashScreen(props: SplashScreenProps): React.JSX.Element | null {
+	const {
+		visible,
+		backgroundColor = "#ffffff",
+		logo,
+		resizeMode = "contain",
+		opacity = 1,
+		isFading = false,
+		testID = "splash-screen",
+	} = props;
+
+	if (!visible) {
+		return null;
+	}
+
+	return (
+		<Animated.View
+			style={[
+				styles.container,
+				{
+					backgroundColor,
+					opacity,
+				},
+			]}
+			testID={testID}
+			pointerEvents={isFading ? "none" : "auto"}
+		>
+			<View style={styles.content}>{logo && <Image source={logo} style={styles.logo} resizeMode={resizeMode} />}</View>
+		</Animated.View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		...StyleSheet.absoluteFillObject,
+		justifyContent: "center",
+		alignItems: "center",
+		zIndex: 9999,
+	},
+	content: {
+		justifyContent: "center",
+		alignItems: "center",
+	},
+	logo: {
+		width: 150,
+		height: 150,
+	},
+});