@developer_tribe/react-builder 1.1.0 → 1.2.0

package/src/mockOS/context/MockOSContext.tsx

@@ -0,0 +1,201 @@
+import React, {
+  ReactNode,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import type { PermissionType } from '../managers/mockPermissionManager';
+import { PermissionModal } from '../components/PermissionModal';
+import { SubscriptionModal } from '../components/SubscriptionModal';
+import { MockOSRouter } from '../components/MockOSRouter';
+import { DeviceStatusBar } from '../../components/DeviceStatusBar';
+import { DeviceNavigationBar } from '../../components/DeviceNavigationBar';
+import type { Device } from '../../types/Device';
+import {
+  MockOSContext,
+  type MockOSContextValue,
+  type RouteStackItem,
+  type RouteType,
+  useMockOSContext,
+} from './MockOSContextBase';
+
+export type { RouteType, RouteStackItem, MockOSContextValue };
+export { useMockOSContext };
+
+interface MockOSProviderProps {
+  children: ReactNode;
+  defaultRoute?: RouteType;
+  appName?: string;
+  // Status Bar props
+  statusBarHeight: number;
+  statusBarBackgroundColor: string;
+  statusBarPlatform: Device['platform'];
+  statusBarIsDark: boolean;
+  // Navigation Bar props
+  navBarHeight: number;
+  navBarBackgroundColor: string;
+  navBarPlatform: Device['platform'];
+  navBarNavigationBarType: Device['navigationBarType'];
+  navBarIsDark: boolean;
+  // Insets
+  insetLeft: number;
+  insetRight: number;
+}
+
+export function MockOSProvider({
+  children,
+  defaultRoute = 'app',
+  appName,
+  statusBarHeight,
+  statusBarBackgroundColor,
+  statusBarPlatform,
+  statusBarIsDark,
+  navBarHeight,
+  navBarBackgroundColor,
+  navBarPlatform,
+  navBarNavigationBarType,
+  navBarIsDark,
+}: MockOSProviderProps) {
+  const [permission, setPermission] = useState<PermissionType | string | null>(
+    null,
+  );
+  const [subscriptionProductId, setSubscriptionProductId] = useState<
+    string | null
+  >(null);
+  const subscriptionResolverRef = useRef<((result: boolean) => void) | null>(
+    null,
+  );
+  const [currentRoute, setCurrentRoute] = useState<RouteType>(defaultRoute);
+  const [navigationStack, setNavigationStack] = useState<RouteStackItem[]>([
+    { route: defaultRoute, timestamp: Date.now() },
+  ]);
+
+  const navigation = useCallback((route: RouteType) => {
+    setCurrentRoute(route);
+
+    // If navigating from launchscreen and the last item in stack is launchscreen,
+    // replace it instead of adding new item
+    setNavigationStack((prev) => {
+      const lastItem = prev[prev.length - 1];
+      if (
+        lastItem &&
+        lastItem.route === 'launchscreen' &&
+        route !== 'launchscreen'
+      ) {
+        // Replace the last launchscreen item
+        const newStack = [...prev];
+        newStack[newStack.length - 1] = { route, timestamp: Date.now() };
+        return newStack;
+      }
+      // Otherwise add new item to stack
+      return [...prev, { route, timestamp: Date.now() }];
+    });
+  }, []);
+
+  const goBack = useCallback(() => {
+    if (navigationStack.length > 1) {
+      const newStack = [...navigationStack];
+      newStack.pop();
+      const previousRoute = newStack[newStack.length - 1];
+
+      setCurrentRoute(previousRoute.route);
+      setNavigationStack(newStack);
+      return true;
+    }
+    return false;
+  }, [navigationStack]);
+
+  const requestSubscriptionPurchase = useCallback((productId: string) => {
+    // Cancel any existing pending request (resolve false)
+    if (subscriptionResolverRef.current) {
+      subscriptionResolverRef.current(false);
+      subscriptionResolverRef.current = null;
+    }
+    setSubscriptionProductId(productId);
+
+    return new Promise<boolean>((resolve) => {
+      subscriptionResolverRef.current = resolve;
+    });
+  }, []);
+
+  const resolveSubscriptionPurchase = useCallback((result: boolean) => {
+    const resolver = subscriptionResolverRef.current;
+    subscriptionResolverRef.current = null;
+    setSubscriptionProductId(null);
+    resolver?.(result);
+  }, []);
+
+  const value: MockOSContextValue = useMemo(
+    () => ({
+      isEnabled: true,
+      permission,
+      setPermission,
+      requestSubscriptionPurchase,
+      currentRoute,
+      navigation,
+      goBack,
+      navigationStack,
+    }),
+    [
+      permission,
+      requestSubscriptionPurchase,
+      currentRoute,
+      navigation,
+      goBack,
+      navigationStack,
+    ],
+  );
+
+  const handleAllow = () => {
+    setPermission(null);
+  };
+
+  const handleDeny = () => {
+    setPermission(null);
+  };
+
+  return (
+    <MockOSContext.Provider value={value}>
+      {permission !== null && (
+        <PermissionModal
+          permission={permission}
+          onAllow={handleAllow}
+          onDeny={handleDeny}
+        />
+      )}
+      {subscriptionProductId !== null && (
+        <SubscriptionModal
+          productId={subscriptionProductId}
+          onBuy={() => resolveSubscriptionPurchase(true)}
+          onCancel={() => resolveSubscriptionPurchase(false)}
+        />
+      )}
+      <DeviceStatusBar
+        height={statusBarHeight}
+        backgroundColor={statusBarBackgroundColor}
+        platform={statusBarPlatform}
+        isDark={statusBarIsDark}
+      />
+      <div
+        className="device-content"
+        style={{
+          flex: 1,
+          overflow: 'hidden',
+          position: 'relative',
+        }}
+      >
+        <MockOSRouter childrenBelongTo="app" appName={appName}>
+          {children}
+        </MockOSRouter>
+      </div>
+      <DeviceNavigationBar
+        height={navBarHeight}
+        backgroundColor={navBarBackgroundColor}
+        platform={navBarPlatform}
+        navigationBarType={navBarNavigationBarType}
+        isDark={navBarIsDark}
+      />
+    </MockOSContext.Provider>
+  );
+}

package/src/mockOS/context/MockOSContextBase.ts

@@ -0,0 +1,36 @@
+import { createContext, useContext } from 'react';
+import type { PermissionType } from '../managers/mockPermissionManager';
+
+export type RouteType =
+  | 'launchscreen'
+  | 'app'
+  | 'home'
+  | 'onboard'
+  | 'subscription';
+
+export interface RouteStackItem {
+  route: RouteType;
+  timestamp: number;
+}
+
+export interface MockOSContextValue {
+  isEnabled: boolean;
+  permission: PermissionType | string | null;
+  setPermission: (permission: PermissionType | string | null) => void;
+  requestSubscriptionPurchase: (productId: string) => Promise<boolean>;
+  // Router
+  currentRoute: RouteType;
+  navigation: (route: RouteType) => void;
+  goBack: () => boolean;
+  navigationStack: RouteStackItem[];
+}
+
+/**
+ * Keep this module "pure" (no imports from mockOS/components or app components),
+ * so consumers can import `useMockOSContext` without creating circular deps in bundlers.
+ */
+export const MockOSContext = createContext<MockOSContextValue | null>(null);
+
+export const useMockOSContext = () => {
+  return useContext(MockOSContext);
+};

package/src/mockOS/hooks/useMockIap.ts

@@ -0,0 +1,11 @@
+import { useMemo } from 'react';
+import type { MockOSContextValue } from '../context/MockOSContext';
+import { MockOSIapManager } from '../managers/mockOSIapManager';
+
+export function useMockIap(context: MockOSContextValue | null) {
+  const iapManager = useMemo(() => {
+    return new MockOSIapManager(context);
+  }, [context]);
+
+  return iapManager;
+}

package/src/mockOS/hooks/useMockNavigation.ts

@@ -0,0 +1,11 @@
+import { useMemo } from 'react';
+import { MockOSContextValue } from '../context/MockOSContext';
+import { MockNavigationManager } from '../managers/navigationManager';
+
+export function useMockNavigation(context: MockOSContextValue | null) {
+  const navigationManager = useMemo(() => {
+    return new MockNavigationManager(context);
+  }, [context]);
+
+  return navigationManager;
+}

package/src/mockOS/hooks/useMockPermission.ts

@@ -0,0 +1,11 @@
+import { useMemo } from 'react';
+import { MockOSContextValue } from '../context/MockOSContext';
+import { MockPermissionManager } from '../managers/mockPermissionManager';
+
+export function useMockPermission(context: MockOSContextValue | null) {
+  const permissionManager = useMemo(() => {
+    return new MockPermissionManager(context);
+  }, [context]);
+
+  return permissionManager;
+}

package/src/mockOS/index.ts

@@ -0,0 +1,34 @@
+// Context
+export { MockOSProvider } from './context/MockOSContext';
+export { useMockOSContext } from './context/MockOSContextBase';
+export type {
+  MockOSContextValue,
+  RouteType,
+  RouteStackItem,
+} from './context/MockOSContextBase';
+
+// Components
+export { MockOSRouter } from './components/MockOSRouter';
+
+// Managers
+export { MockPermissionManager } from './managers/mockPermissionManager';
+export type {
+  PermissionType,
+  PermissionStatus,
+} from './managers/mockPermissionManager';
+export { MockNavigationManager } from './managers/navigationManager';
+export type {
+  NavigationDestination,
+  NavigationStackItem,
+} from './managers/navigationManager';
+export { MockOSIapManager } from './managers/mockOSIapManager';
+export { MockSubscriptionManager } from './managers/subscriptionManager';
+export type {
+  SubscriptionPurchaseListener,
+  SubscriptionPurchaseResult,
+} from './managers/subscriptionManager';
+
+// Hooks
+export { useMockPermission } from './hooks/useMockPermission';
+export { useMockNavigation } from './hooks/useMockNavigation';
+export { useMockIap } from './hooks/useMockIap';

package/src/mockOS/managers/mockOSIapManager.ts

@@ -0,0 +1,10 @@
+import type { MockOSContextValue } from '../context/MockOSContext';
+import { MockSubscriptionManager } from './subscriptionManager';
+
+export class MockOSIapManager {
+  public subscription: MockSubscriptionManager;
+
+  constructor(context: MockOSContextValue | null) {
+    this.subscription = new MockSubscriptionManager(context);
+  }
+}

package/src/mockOS/managers/mockPermissionManager.ts

@@ -0,0 +1,50 @@
+import { MockOSContextValue } from '../context/MockOSContext';
+
+export type PermissionType =
+  | 'camera'
+  | 'microphone'
+  | 'location'
+  | 'notifications'
+  | 'photos'
+  | 'contacts'
+  | 'att'; // App Tracking Transparency
+
+export type PermissionStatus = 'granted' | 'denied' | 'not-determined';
+
+export class MockPermissionManager {
+  private context: MockOSContextValue | null;
+
+  constructor(context: MockOSContextValue | null) {
+    this.context = context;
+  }
+
+  requestPermission(permission: PermissionType | string): PermissionStatus {
+    if (this.context === null) {
+      alert(
+        `Permission requested: ${permission}\n(Mock OS context not available)`,
+      );
+      return 'not-determined';
+    }
+
+    // Set permission to trigger modal display
+    this.context.setPermission(permission);
+    // Default behavior: grant all permissions in mock environment
+    return 'granted';
+  }
+
+  checkPermission(permission: PermissionType | string): PermissionStatus {
+    if (this.context === null) {
+      alert(`Permission check: ${permission}\n(Mock OS context not available)`);
+      return 'not-determined';
+    }
+
+    return 'granted';
+  }
+
+  openSettings(): void {
+    if (this.context === null) {
+      alert('Opening Settings\n(Mock OS context not available)');
+      return;
+    }
+  }
+}

package/src/mockOS/managers/navigationManager.ts

@@ -0,0 +1,86 @@
+import { MockOSContextValue } from '../context/MockOSContext';
+
+export type NavigationDestination =
+  | 'home'
+  | 'subscriptions'
+  | 'launchApp'
+  | 'settings'
+  | 'profile';
+
+export interface NavigationStackItem {
+  destination: NavigationDestination;
+  timestamp: number;
+}
+
+export class MockNavigationManager {
+  private context: MockOSContextValue | null;
+  private stack: NavigationStackItem[] = [];
+
+  constructor(context: MockOSContextValue | null) {
+    this.context = context;
+  }
+
+  goToHome(): void {
+    if (this.context === null) {
+      alert('Navigate to Home\n(Mock OS context not available)');
+      return;
+    }
+
+    const item: NavigationStackItem = {
+      destination: 'home',
+      timestamp: Date.now(),
+    };
+    this.stack.push(item);
+  }
+
+  goToSubscriptions(): void {
+    if (this.context === null) {
+      alert('Navigate to Subscriptions\n(Mock OS context not available)');
+      return;
+    }
+
+    const item: NavigationStackItem = {
+      destination: 'subscriptions',
+      timestamp: Date.now(),
+    };
+    this.stack.push(item);
+  }
+
+  goToLaunchApp(): void {
+    if (this.context === null) {
+      alert('Navigate to Launch App\n(Mock OS context not available)');
+      return;
+    }
+
+    const item: NavigationStackItem = {
+      destination: 'launchApp',
+      timestamp: Date.now(),
+    };
+    this.stack.push(item);
+  }
+
+  goBack(): boolean {
+    if (this.context === null) {
+      alert('Go Back\n(Mock OS context not available)');
+      return false;
+    }
+
+    if (this.stack.length > 0) {
+      const popped = this.stack.pop();
+      return true;
+    }
+
+    return false;
+  }
+
+  getStack(): NavigationStackItem[] {
+    return [...this.stack];
+  }
+
+  clearStack(): void {
+    this.stack = [];
+    if (this.context) {
+      console.info('[Mock OS] Navigation stack cleared');
+    }
+  }
+}

package/src/mockOS/managers/subscriptionManager.ts

@@ -0,0 +1,36 @@
+import type { MockOSContextValue } from '../context/MockOSContext';
+
+export type SubscriptionPurchaseResult = boolean;
+export type SubscriptionPurchaseListener = (
+  result: SubscriptionPurchaseResult,
+) => void;
+
+export class MockSubscriptionManager {
+  private context: MockOSContextValue | null;
+  private listeners = new Set<SubscriptionPurchaseListener>();
+
+  constructor(context: MockOSContextValue | null) {
+    this.context = context;
+  }
+
+  addListener(listener: SubscriptionPurchaseListener): () => void {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  async buy(productId: string): Promise<boolean> {
+    if (this.context === null) {
+      const ok =
+        typeof window !== 'undefined' &&
+        typeof window.confirm === 'function' &&
+        window.confirm(`Subscribe to ${productId}?`);
+      const result = Boolean(ok);
+      this.listeners.forEach((l) => l(result));
+      return result;
+    }
+
+    const result = await this.context.requestSubscriptionPurchase(productId);
+    this.listeners.forEach((l) => l(result));
+    return result;
+  }
+}