@developer_tribe/react-builder 1.0.1 → 1.0.3

package/src/mockOS/components/MockLaunchScreenComponent.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+interface MockLaunchScreenComponentProps {
+  appName: string;
+  onAppClick: () => void;
+}
+
+export function MockLaunchScreenComponent({
+  appName,
+  onAppClick,
+}: MockLaunchScreenComponentProps) {
+  return (
+    <div className="mockos-screen mockos-screen--launchscreen">
+      <div className="mockos-launcher">
+        <div className="mockos-launcher__grid">
+          <button
+            className="mockos-launcher__app"
+            onClick={onAppClick}
+            type="button"
+          >
+            <div className="mockos-launcher__app-icon">
+              <svg
+                viewBox="0 0 60 60"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <rect width="60" height="60" rx="13" fill="#007AFF" />
+                <path
+                  d="M30 15C21.716 15 15 21.716 15 30s6.716 15 15 15 15-6.716 15-15-6.716-15-15-15zm0 27c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12z"
+                  fill="white"
+                />
+                <circle cx="30" cy="30" r="5" fill="white" />
+              </svg>
+            </div>
+            <div className="mockos-launcher__app-name">{appName}</div>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default MockLaunchScreenComponent;

package/src/mockOS/components/MockOSRouter.tsx

@@ -0,0 +1,123 @@
+import React, { ReactNode, useCallback, useEffect } from 'react';
+import { useMockOSContext } from '../context/MockOSContext';
+import { MockLaunchScreenComponent } from './MockLaunchScreenComponent';
+// Note: We might use react-router or similar library in the future for more complex routing
+
+interface MockOSRouterProps {
+  children?: ReactNode;
+  childrenBelongTo?: 'launchscreen' | 'home' | 'onboard' | 'subscription';
+  appName?: string;
+}
+
+function HomeComponent() {
+  return (
+    <div className="mockos-screen mockos-screen--home">
+      <div className="mockos-screen__heading">Home</div>
+      <div className="mockos-screen__text">Welcome to the home screen</div>
+    </div>
+  );
+}
+
+function OnboardComponent() {
+  return (
+    <div className="mockos-screen mockos-screen--onboard">
+      <div className="mockos-screen__heading">Onboarding</div>
+      <div className="mockos-screen__text">Welcome! Let's get you started.</div>
+    </div>
+  );
+}
+
+function SubscriptionComponent() {
+  return (
+    <div className="mockos-screen mockos-screen--subscription">
+      <div className="mockos-screen__heading">Subscription</div>
+      <div className="mockos-screen__text">Choose your plan</div>
+      <div className="mockos-screen__plan mockos-screen__plan--premium">
+        Premium - $9.99/month
+      </div>
+      <div className="mockos-screen__plan mockos-screen__plan--basic">
+        Basic - Free
+      </div>
+    </div>
+  );
+}
+
+function ScreenRenderer({
+  currentRoute,
+  children,
+  childrenBelongTo,
+  appName,
+  onLaunchApp,
+}: {
+  currentRoute: string;
+  children?: ReactNode;
+  childrenBelongTo?: string;
+  appName: string;
+  onLaunchApp: () => void;
+}) {
+  // If children provided and current route matches childrenBelongTo, render children
+  if (children && childrenBelongTo && currentRoute === childrenBelongTo) {
+    return <>{children}</>;
+  }
+
+  // Otherwise render default screens based on route
+  switch (currentRoute) {
+    case 'launchscreen':
+      return (
+        <MockLaunchScreenComponent appName={appName} onAppClick={onLaunchApp} />
+      );
+    case 'home':
+      return <HomeComponent />;
+    case 'onboard':
+      return <OnboardComponent />;
+    case 'subscription':
+      return <SubscriptionComponent />;
+    default:
+      return (
+        <MockLaunchScreenComponent appName={appName} onAppClick={onLaunchApp} />
+      );
+  }
+}
+
+export function MockOSRouter({
+  children,
+  childrenBelongTo,
+  appName = 'My App',
+}: MockOSRouterProps) {
+  const context = useMockOSContext();
+
+  if (!context) {
+    throw new Error('MockOSRouter must be used within MockOSProvider');
+  }
+
+  const { currentRoute, navigation } = context;
+
+  const handleLaunchApp = useCallback(() => {
+    // Navigate to the route specified in childrenBelongTo or default to 'onboard'
+    const targetRoute = childrenBelongTo || 'onboard';
+    navigation(targetRoute);
+  }, [childrenBelongTo, navigation]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      handleLaunchApp();
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, [handleLaunchApp]);
+
+  return (
+    <div className="mockos-router">
+      <ScreenRenderer
+        currentRoute={currentRoute}
+        childrenBelongTo={childrenBelongTo}
+        appName={appName}
+        onLaunchApp={handleLaunchApp}
+      >
+        {children}
+      </ScreenRenderer>
+    </div>
+  );
+}
+
+export default MockOSRouter;

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';