@developer_tribe/react-builder 1.0.1 → 1.0.2

package/src/components/DeviceNavigationBar.tsx

@@ -0,0 +1,201 @@
+import React from 'react';
+import { Device } from '../types/Device';
+import { useMockOSContext } from '../mockOS';
+
+type DeviceNavigationBarProps = {
+  height: number;
+  backgroundColor: string;
+  platform?: Device['platform'];
+  navigationBarType?: Device['navigationBarType'];
+  isDark: boolean;
+};
+
+const basePillStyle: React.CSSProperties = {
+  height: 5,
+  borderRadius: 999,
+  width: 120,
+};
+
+const tabItems = ['Today', 'Search', 'Profile'];
+
+export function DeviceNavigationBar({
+  height,
+  backgroundColor,
+  platform = 'android',
+  navigationBarType = 'gesture',
+  isDark,
+}: DeviceNavigationBarProps) {
+  const context = useMockOSContext();
+
+  if (!height) {
+    return null;
+  }
+
+  const barColor = isDark ? 'rgba(255, 255, 255, 0.85)' : 'rgba(0, 0, 0, 0.7)';
+  const mutedColor = isDark
+    ? 'rgba(255, 255, 255, 0.55)'
+    : 'rgba(0, 0, 0, 0.4)';
+
+  function handleBackButton() {
+    console.log('handleBackButton', context);
+    if (context) {
+      const canGoBack = context.goBack();
+      // If can't go back, go to launchscreen
+      if (!canGoBack) {
+        context.navigation('launchscreen');
+      }
+    } else {
+      alert('Navigation: Back\n(Mock OS context not available)');
+    }
+  }
+
+  function handleHomeButton() {
+    if (context) {
+      context.navigation('launchscreen');
+    } else {
+      alert('Navigation: Home\n(Mock OS context not available)');
+    }
+  }
+
+  const containerStyle: React.CSSProperties = {
+    height,
+    backgroundColor,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '0 16px',
+  };
+
+  if (platform === 'ios') {
+    switch (navigationBarType) {
+      case 'homeIndicator':
+        return (
+          <div className="device-navigation-bar" style={containerStyle}>
+            <div
+              style={{
+                ...basePillStyle,
+                backgroundColor: barColor,
+              }}
+            />
+          </div>
+        );
+      case 'tabBar':
+        return (
+          <div className="device-navigation-bar" style={containerStyle}>
+            <div
+              style={{
+                display: 'flex',
+                width: '100%',
+                maxWidth: 280,
+                justifyContent: 'space-between',
+                fontSize: 11,
+                textTransform: 'uppercase',
+                letterSpacing: 0.4,
+                gap: 20,
+              }}
+            >
+              {tabItems.map((item) => (
+                <div
+                  key={item}
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: 4,
+                    color: item === 'Today' ? barColor : mutedColor,
+                  }}
+                >
+                  <div
+                    style={{
+                      width: 20,
+                      height: 20,
+                      borderRadius: 6,
+                      backgroundColor: item === 'Today' ? barColor : mutedColor,
+                      opacity: 0.9,
+                    }}
+                  />
+                  <span>{item}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        );
+      default:
+        return null;
+    }
+  }
+
+  // Android styles
+  if (navigationBarType === 'threeButtons') {
+    const buttonStyle: React.CSSProperties = {
+      position: 'relative',
+      width: 40,
+      height: 40,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: 18,
+      color: barColor,
+      cursor: 'pointer',
+      userSelect: 'none',
+    };
+
+    return (
+      <div className="device-navigation-bar" style={containerStyle}>
+        <div
+          style={{
+            display: 'flex',
+            gap: 64,
+          }}
+        >
+          <div
+            style={{ ...buttonStyle, fontSize: 24 }}
+            onClick={handleBackButton}
+            role="button"
+            aria-label="Back"
+          >
+            ◁
+          </div>
+          <div
+            style={{ ...buttonStyle, fontSize: 32, top: -3 }}
+            onClick={handleHomeButton}
+            role="button"
+            aria-label="Home"
+          >
+            ⌂
+          </div>
+          <div
+            style={{
+              ...buttonStyle,
+              fontSize: 20,
+              fontWeight: 1000,
+            }}
+            onClick={handleHomeButton}
+            role="button"
+            aria-label="Recent Apps"
+          >
+            ▢
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (navigationBarType === 'gesture') {
+    return (
+      <div className="device-navigation-bar" style={containerStyle}>
+        <div
+          style={{
+            ...basePillStyle,
+            width: 90,
+            backgroundColor: barColor,
+          }}
+        />
+      </div>
+    );
+  }
+
+  return null;
+}
+
+export default DeviceNavigationBar;

package/src/components/DeviceStatusBar.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from 'react';
+import { Device } from '../types/Device';
+
+type DeviceStatusBarProps = {
+  height: number;
+  backgroundColor: string;
+  platform?: Device['platform'];
+  isDark: boolean;
+};
+
+const formatTime = () =>
+  new Date().toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+const iosIndicators = ['5G', 'Wi-Fi', '92%'];
+const androidIndicators = ['Alarm', 'Wi-Fi', '84%'];
+
+export function DeviceStatusBar({
+  height,
+  backgroundColor,
+  platform = 'android',
+  isDark,
+}: DeviceStatusBarProps) {
+  const [time, setTime] = useState(() => formatTime());
+
+  useEffect(() => {
+    const intervalId = setInterval(() => setTime(formatTime()), 60_000);
+    return () => clearInterval(intervalId);
+  }, []);
+
+  const textColor = isDark ? 'rgb(255, 255, 255)' : 'rgb(0, 0, 0)';
+  const iconStyle: React.CSSProperties = {
+    fontSize: 10,
+    letterSpacing: 0.5,
+    textTransform: 'uppercase',
+  };
+
+  const containerStyle: React.CSSProperties = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height,
+    backgroundColor,
+    color: textColor,
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: 12,
+    fontWeight: 500,
+    padding: '0 12px',
+  };
+
+  if (platform === 'ios') {
+    return (
+      <div className="device-status-bar" style={containerStyle}>
+        <span style={{ fontWeight: 600 }}>{time}</span>
+        <div style={{ flex: 1 }} />
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          {iosIndicators.map((indicator) => (
+            <span key={indicator} style={iconStyle}>
+              {indicator}
+            </span>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="device-status-bar" style={containerStyle}>
+      <span style={{ flex: 1 }}>{time}</span>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        {androidIndicators.map((indicator) => (
+          <span key={indicator} style={iconStyle}>
+            {indicator}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default DeviceStatusBar;

package/src/components/EditorHeader.tsx

@@ -1,41 +1,22 @@
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 import { Device, getDevices, Node, copyNode } from '..';
 import { useRenderStore } from '../store';
-import { Breadcrumb, BreadcrumbItem } from './Breadcrumb';
 import { useLogRender } from '../utils/useLogRender';
+import { DeviceButton } from './DeviceButton';
+import { DeviceSelectorModal } from '../modals/DeviceSelectorModal';
 
 const devices = getDevices();
-
 interface EditorHeaderProps {
   onSaveProject?: () => void;
+  onRestoreProject?: () => void;
   current?: Node;
   editorData?: Node;
   setEditorData?: (data: Node) => void;
 }
 
-interface DeviceButtonProps {
-  device: Device;
-  selectedDevice: Device | null;
-  setSelectedDevice: (device: Device) => void;
-}
-export function DeviceButton({
-  device,
-  selectedDevice,
-  setSelectedDevice,
-}: DeviceButtonProps) {
-  return (
-    <button
-      className={`editor-device-button ${selectedDevice === device ? 'editor-device-button--selected' : ''}`}
-      onClick={() => setSelectedDevice(device)}
-    >
-      {device.name} <br />
-      {device.width}x{device.height}
-    </button>
-  );
-}
-
 export function EditorHeader({
   onSaveProject,
+  onRestoreProject,
   current,
   editorData,
   setEditorData,
@@ -43,7 +24,7 @@ export function EditorHeader({
   useLogRender('EditorHeader');
   const [isDevicesModalOpen, setIsDevicesModalOpen] = useState(false);
   const copiedNode = useRenderStore((s) => s.copiedNode);
-  const { device, setDevice } = useRenderStore((s) => ({
+  const { device: selectedDevice, setDevice } = useRenderStore((s) => ({
     device: s.device,
     setDevice: s.setDevice,
   }));
@@ -85,7 +66,6 @@ export function EditorHeader({
     useRenderStore.setState({
       copiedNode: null,
     });
-    useRenderStore.getState().forceRender();
     setEditorData(updated);
   };
   return (
@@ -95,12 +75,12 @@ export function EditorHeader({
       aria-label="Editor utility header"
     >
       <div className="editor-header__devices">
-        {devices.slice(0, 5).map((device: Device) => (
+        {devices.slice(0, 5).map((deviceOption: Device) => (
           <DeviceButton
-            key={device.name}
-            selectedDevice={device}
-            setSelectedDevice={setDevice}
-            device={device}
+            key={deviceOption.name}
+            selectedDevice={selectedDevice}
+            onSelect={setDevice}
+            device={deviceOption}
           />
         ))}
         <button
@@ -119,13 +99,15 @@ export function EditorHeader({
         >
           Save
         </button>
-        <button
-          className="editor-button editor-save-previewconfig-button"
-          aria-label="Save previewConfig"
-          onClick={() => useRenderStore.getState().forceRender()}
-        >
-          Force Render
-        </button>
+        {onRestoreProject && (
+          <button
+            className="editor-button editor-save-previewconfig-button"
+            aria-label="Restore project data"
+            onClick={() => onRestoreProject()}
+          >
+            Restore
+          </button>
+        )}
         <button
           className="editor-button"
           aria-label="Copy node"
@@ -144,42 +126,12 @@ export function EditorHeader({
         )}
       </div>
       {isDevicesModalOpen && (
-        <div
-          className="editor-modal"
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby="device-selector-title"
-        >
-          <div
-            className="editor-modal__overlay"
-            onClick={() => setIsDevicesModalOpen(false)}
-          />
-          <div className="editor-modal__content">
-            <div className="editor-modal__header">
-              <h3 id="device-selector-title">Select a device</h3>
-              <button
-                className="editor-button"
-                aria-label="Close device selector"
-                onClick={() => setIsDevicesModalOpen(false)}
-              >
-                Close
-              </button>
-            </div>
-            <div className="editor-device-grid" role="list">
-              {devices.map((device: Device) => (
-                <DeviceButton
-                  key={device.name}
-                  selectedDevice={device}
-                  setSelectedDevice={(d: Device) => {
-                    setDevice(d);
-                    setIsDevicesModalOpen(false);
-                  }}
-                  device={device}
-                />
-              ))}
-            </div>
-          </div>
-        </div>
+        <DeviceSelectorModal
+          devices={devices}
+          selectedDevice={selectedDevice}
+          onSelect={setDevice}
+          onClose={() => setIsDevicesModalOpen(false)}
+        />
       )}
     </div>
   );

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,115 @@
+import React, { ReactNode } 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;
+
+  function handleLaunchApp() {
+    // Navigate to the route specified in childrenBelongTo or default to 'onboard'
+    const targetRoute = childrenBelongTo || 'onboard';
+    navigation(targetRoute);
+  }
+
+  return (
+    <div className="mockos-router">
+      <ScreenRenderer
+        currentRoute={currentRoute}
+        childrenBelongTo={childrenBelongTo}
+        appName={appName}
+        onLaunchApp={handleLaunchApp}
+      >
+        {children}
+      </ScreenRenderer>
+    </div>
+  );
+}
+
+export default MockOSRouter;