@developer_tribe/react-builder 1.0.1 → 1.0.2

package/src/mockOS/components/PermissionModal.tsx

@@ -0,0 +1,270 @@
+import React from 'react';
+import { useRenderStore } from '../../store';
+import type { PermissionType } from '../managers/mockPermissionManager';
+
+interface PermissionModalProps {
+  permission: PermissionType | string;
+  onAllow: () => void;
+  onDeny: () => void;
+}
+
+const getPermissionText = (permission: PermissionType | string) => {
+  const texts: Record<string, { title: string; message: string }> = {
+    camera: {
+      title: 'Camera Access',
+      message:
+        'This app would like to access your camera to take photos and videos.',
+    },
+    microphone: {
+      title: 'Microphone Access',
+      message: 'This app would like to access your microphone to record audio.',
+    },
+    location: {
+      title: 'Location Access',
+      message:
+        'This app would like to access your location to provide location-based services.',
+    },
+    notifications: {
+      title: 'Allow Notifications',
+      message: 'This app would like to send you notifications.',
+    },
+    photos: {
+      title: 'Photo Library Access',
+      message: 'This app would like to access your photos.',
+    },
+    contacts: {
+      title: 'Contacts Access',
+      message: 'This app would like to access your contacts.',
+    },
+    att: {
+      title: 'Allow Tracking',
+      message:
+        "This app would like to track your activity across other companies' apps and websites.",
+    },
+  };
+  return (
+    texts[permission] || {
+      title: 'Permission Required',
+      message: `This app would like to access ${permission}.`,
+    }
+  );
+};
+
+export const PermissionModal: React.FC<PermissionModalProps> = ({
+  permission,
+  onAllow,
+  onDeny,
+}) => {
+  const device = useRenderStore((s) => s.device);
+  const isIOS = device.platform === 'ios';
+  const { title, message } = getPermissionText(permission);
+
+  // iOS Style
+  if (isIOS) {
+    return (
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: 'rgba(0, 0, 0, 0.4)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          zIndex: 9999,
+          padding: 20,
+        }}
+        onClick={(e) => {
+          if (e.target === e.currentTarget) {
+            onDeny();
+          }
+        }}
+      >
+        <div
+          style={{
+            backgroundColor: 'rgba(255, 255, 255, 0.95)',
+            borderRadius: 14,
+            width: '100%',
+            maxWidth: 270,
+            overflow: 'hidden',
+            backdropFilter: 'blur(20px)',
+          }}
+        >
+          <div
+            style={{
+              padding: '20px 16px',
+              textAlign: 'center',
+            }}
+          >
+            <div
+              style={{
+                fontSize: 17,
+                fontWeight: 600,
+                color: '#000',
+                marginBottom: 8,
+                lineHeight: 1.3,
+              }}
+            >
+              {title}
+            </div>
+            <div
+              style={{
+                fontSize: 13,
+                color: '#000',
+                lineHeight: 1.4,
+                opacity: 0.6,
+              }}
+            >
+              {message}
+            </div>
+          </div>
+          <div
+            style={{
+              borderTop: '0.5px solid rgba(0, 0, 0, 0.2)',
+              display: 'flex',
+            }}
+          >
+            <button
+              onClick={onDeny}
+              style={{
+                flex: 1,
+                padding: '11px 0',
+                fontSize: 17,
+                fontWeight: 400,
+                color: '#007AFF',
+                background: 'transparent',
+                border: 'none',
+                borderRight: '0.5px solid rgba(0, 0, 0, 0.2)',
+                cursor: 'pointer',
+              }}
+            >
+              Don't Allow
+            </button>
+            <button
+              onClick={onAllow}
+              style={{
+                flex: 1,
+                padding: '11px 0',
+                fontSize: 17,
+                fontWeight: 600,
+                color: '#007AFF',
+                background: 'transparent',
+                border: 'none',
+                cursor: 'pointer',
+              }}
+            >
+              Allow
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Android Material Design Style
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 9999,
+        padding: 24,
+      }}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) {
+          onDeny();
+        }
+      }}
+    >
+      <div
+        style={{
+          backgroundColor: '#FFFFFF',
+          borderRadius: 4,
+          width: '100%',
+          maxWidth: 280,
+          boxShadow:
+            '0 11px 15px -7px rgba(0,0,0,0.2), 0 24px 38px 3px rgba(0,0,0,0.14)',
+        }}
+      >
+        <div
+          style={{
+            padding: '24px 24px 20px',
+          }}
+        >
+          <div
+            style={{
+              fontSize: 20,
+              fontWeight: 500,
+              color: 'rgba(0, 0, 0, 0.87)',
+              marginBottom: 16,
+              lineHeight: 1.2,
+            }}
+          >
+            {title}
+          </div>
+          <div
+            style={{
+              fontSize: 16,
+              color: 'rgba(0, 0, 0, 0.6)',
+              lineHeight: 1.5,
+            }}
+          >
+            {message}
+          </div>
+        </div>
+        <div
+          style={{
+            padding: '8px 8px 8px 0',
+            display: 'flex',
+            justifyContent: 'flex-end',
+            gap: 8,
+          }}
+        >
+          <button
+            onClick={onDeny}
+            style={{
+              padding: '8px 16px',
+              fontSize: 14,
+              fontWeight: 500,
+              color: '#5F6368',
+              background: 'transparent',
+              border: 'none',
+              borderRadius: 4,
+              cursor: 'pointer',
+              textTransform: 'uppercase',
+              letterSpacing: 0.5,
+            }}
+          >
+            Deny
+          </button>
+          <button
+            onClick={onAllow}
+            style={{
+              padding: '8px 16px',
+              fontSize: 14,
+              fontWeight: 500,
+              color: '#1A73E8',
+              background: 'transparent',
+              border: 'none',
+              borderRadius: 4,
+              cursor: 'pointer',
+              textTransform: 'uppercase',
+              letterSpacing: 0.5,
+            }}
+          >
+            Allow
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/mockOS/context/MockOSContext.tsx

@@ -0,0 +1,179 @@
+import React, {
+  createContext,
+  useContext,
+  ReactNode,
+  useState,
+  useCallback,
+} from 'react';
+import type { PermissionType } from '../managers/mockPermissionManager';
+import { PermissionModal } from '../components/PermissionModal';
+import { MockOSRouter } from '../components/MockOSRouter';
+import { DeviceStatusBar } from '../../components/DeviceStatusBar';
+import { DeviceNavigationBar } from '../../components/DeviceNavigationBar';
+import type { Device } from '../../types/Device';
+
+export type RouteType = 'launchscreen' | '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;
+  // Router
+  currentRoute: RouteType;
+  navigation: (route: RouteType) => void;
+  goBack: () => boolean;
+  navigationStack: RouteStackItem[];
+}
+
+const MockOSContext = createContext<MockOSContextValue | null>(null);
+
+export const useMockOSContext = () => {
+  return useContext(MockOSContext);
+};
+
+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 = 'launchscreen',
+  appName,
+  statusBarHeight,
+  statusBarBackgroundColor,
+  statusBarPlatform,
+  statusBarIsDark,
+  navBarHeight,
+  navBarBackgroundColor,
+  navBarPlatform,
+  navBarNavigationBarType,
+  navBarIsDark,
+  insetLeft,
+  insetRight,
+}: MockOSProviderProps) {
+  const [permission, setPermission] = useState<PermissionType | string | null>(
+    null,
+  );
+  const [currentRoute, setCurrentRoute] = useState<RouteType>(defaultRoute);
+  const [navigationStack, setNavigationStack] = useState<RouteStackItem[]>([
+    { route: defaultRoute, timestamp: Date.now() },
+  ]);
+
+  const navigation = useCallback((route: RouteType) => {
+    console.log(`[Mock OS] Navigating to: ${route}`);
+    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];
+
+      console.log(`[Mock OS] Going back to: ${previousRoute.route}`);
+      setCurrentRoute(previousRoute.route);
+      setNavigationStack(newStack);
+      return true;
+    }
+    console.log('[Mock OS] Cannot go back - at root');
+    return false;
+  }, [navigationStack]);
+
+  const value: MockOSContextValue = {
+    isEnabled: true,
+    permission,
+    setPermission,
+    currentRoute,
+    navigation,
+    goBack,
+    navigationStack,
+  };
+
+  const handleAllow = () => {
+    console.log(`[Mock OS] Permission granted: ${permission}`);
+    setPermission(null);
+  };
+
+  const handleDeny = () => {
+    console.log(`[Mock OS] Permission denied: ${permission}`);
+    setPermission(null);
+  };
+
+  return (
+    <MockOSContext.Provider value={value}>
+      {permission !== null && (
+        <PermissionModal
+          permission={permission}
+          onAllow={handleAllow}
+          onDeny={handleDeny}
+        />
+      )}
+      <DeviceStatusBar
+        height={statusBarHeight}
+        backgroundColor={statusBarBackgroundColor}
+        platform={statusBarPlatform}
+        isDark={statusBarIsDark}
+      />
+      <div
+        className="device-content"
+        style={{
+          flex: 1,
+          overflow: 'hidden',
+          position: 'relative',
+          paddingLeft: insetLeft,
+          paddingRight: insetRight,
+        }}
+      >
+        <MockOSRouter childrenBelongTo="onboard" appName={appName}>
+          {children}
+        </MockOSRouter>
+      </div>
+      <DeviceNavigationBar
+        height={navBarHeight}
+        backgroundColor={navBarBackgroundColor}
+        platform={navBarPlatform}
+        navigationBarType={navBarNavigationBarType}
+        isDark={navBarIsDark}
+      />
+    </MockOSContext.Provider>
+  );
+}

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,26 @@
+// Context
+export { MockOSProvider, useMockOSContext } from './context/MockOSContext';
+export type {
+  MockOSContextValue,
+  RouteType,
+  RouteStackItem,
+} from './context/MockOSContext';
+
+// 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';
+
+// Hooks
+export { useMockPermission } from './hooks/useMockPermission';
+export { useMockNavigation } from './hooks/useMockNavigation';

package/src/mockOS/managers/mockPermissionManager.ts

@@ -0,0 +1,54 @@
+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';
+    }
+
+    console.log(`[Mock OS] Permission requested: ${permission}`);
+    // 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';
+    }
+
+    console.log(`[Mock OS] Permission checked: ${permission}`);
+    return 'granted';
+  }
+
+  openSettings(): void {
+    if (this.context === null) {
+      alert('Opening Settings\n(Mock OS context not available)');
+      return;
+    }
+
+    console.log('[Mock OS] Opening Settings');
+  }
+}

package/src/mockOS/managers/navigationManager.ts

@@ -0,0 +1,91 @@
+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);
+    console.log('[Mock OS] Navigate to Home', { stack: this.stack });
+  }
+
+  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);
+    console.log('[Mock OS] Navigate to Subscriptions', { stack: this.stack });
+  }
+
+  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);
+    console.log('[Mock OS] Navigate to Launch App', { stack: this.stack });
+  }
+
+  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();
+      console.log('[Mock OS] Go Back', { popped, stack: this.stack });
+      return true;
+    }
+
+    console.log('[Mock OS] Cannot go back - stack is empty');
+    return false;
+  }
+
+  getStack(): NavigationStackItem[] {
+    return [...this.stack];
+  }
+
+  clearStack(): void {
+    this.stack = [];
+    if (this.context) {
+      console.log('[Mock OS] Navigation stack cleared');
+    }
+  }
+}