@developer_tribe/react-builder 0.1.32 → 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

@@ -0,0 +1,138 @@
+import { useState } from 'react';
+import { Device, getDevices, Node, copyNode } from '..';
+import { useRenderStore } from '../store';
+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;
+}
+
+export function EditorHeader({
+  onSaveProject,
+  onRestoreProject,
+  current,
+  editorData,
+  setEditorData,
+}: EditorHeaderProps) {
+  useLogRender('EditorHeader');
+  const [isDevicesModalOpen, setIsDevicesModalOpen] = useState(false);
+  const copiedNode = useRenderStore((s) => s.copiedNode);
+  const { device: selectedDevice, setDevice } = useRenderStore((s) => ({
+    device: s.device,
+    setDevice: s.setDevice,
+  }));
+
+  function replaceNode(root: Node, target: Node, next: Node): Node {
+    if (root === target) return next;
+    if (root === null || root === undefined) return root;
+    if (typeof root === 'string') return root;
+    if (Array.isArray(root)) {
+      let changed = false;
+      const arr = root.map((item) => {
+        const r = replaceNode(item, target, next);
+        if (r !== item) changed = true;
+        return r;
+      });
+      return changed ? arr : root;
+    }
+    const data = root as any;
+    if ('children' in data) {
+      const prev = data.children;
+      const replaced = Array.isArray(prev)
+        ? prev.map((c: Node) => replaceNode(c, target, next))
+        : replaceNode(prev as Node, target, next);
+      if (replaced !== prev) {
+        data.children = replaced;
+        return { ...data, children: replaced } as Node;
+      }
+    }
+    return root;
+  }
+  const handleCopy = () => {
+    if (current) copyNode(current);
+  };
+  const handlePaste = () => {
+    if (!current || !editorData || !setEditorData) return;
+    if (!copiedNode) return;
+    const cloned = JSON.parse(JSON.stringify(copiedNode)) as Node;
+    const updated = replaceNode(editorData, current, cloned);
+    useRenderStore.setState({
+      copiedNode: null,
+    });
+    setEditorData(updated);
+  };
+  return (
+    <div
+      className="editor-header"
+      role="region"
+      aria-label="Editor utility header"
+    >
+      <div className="editor-header__devices">
+        {devices.slice(0, 5).map((deviceOption: Device) => (
+          <DeviceButton
+            key={deviceOption.name}
+            selectedDevice={selectedDevice}
+            onSelect={setDevice}
+            device={deviceOption}
+          />
+        ))}
+        <button
+          className="editor-device-button"
+          aria-label="More devices"
+          onClick={() => setIsDevicesModalOpen(true)}
+        >
+          More devices
+        </button>
+      </div>
+      <div className="editor-header__actions">
+        <button
+          className="editor-button editor-save-button"
+          aria-label="Save project data"
+          onClick={() => onSaveProject && onSaveProject()}
+        >
+          Save
+        </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"
+          onClick={handleCopy}
+        >
+          Copy
+        </button>
+        {copiedNode && (
+          <button
+            className="editor-button"
+            aria-label="Paste node"
+            onClick={handlePaste}
+          >
+            Paste
+          </button>
+        )}
+      </div>
+      {isDevicesModalOpen && (
+        <DeviceSelectorModal
+          devices={devices}
+          selectedDevice={selectedDevice}
+          onSelect={setDevice}
+          onClose={() => setIsDevicesModalOpen(false)}
+        />
+      )}
+    </div>
+  );
+}

package/src/index.ts

@@ -1,9 +1,9 @@
 import './styles/index.scss';
 import AttributesEditor from './AttributesEditor';
 
-export { TargetedScreenSize } from './types/TargetedScreenSize';
-export { Node, NodeData, NodeDefaultAttribute } from './types/Node';
-export { Project } from './types/Project';
+export type { TargetedScreenSize } from './types/TargetedScreenSize';
+export type { Node, NodeData, NodeDefaultAttribute } from './types/Node';
+export type { Project } from './types/Project';
 export {
   isNodeNullOrUndefined,
   isNodeString,
@@ -14,7 +14,6 @@ export {
 export { getSamples } from './assets/samples/getSamples';
 export { getBasicSamples } from './assets/samples/getSamples';
 export { getOnboardSamples } from './assets/samples/getSamples';
-export { PreviewConfig } from './types/PreviewConfig';
 export { RenderPage } from './RenderPage';
 export { DeviceMockFrame } from './DeviceMockFrame';
 export { novaToJson } from './utils/novaToJson';
@@ -28,3 +27,8 @@ export { querySelector } from './utils/querySelector';
 export { extractViewStyle } from './utils/extractViewStyle';
 export { extractImageStyle } from './utils/extractImageStyle';
 export { extractTextStyle } from './utils/extractTextStyle';
+export { ProjectPage } from './pages/ProjectPage';
+export type { ProjectPageProps, Tab } from './pages/ProjectPage';
+export { copyNode } from './utils/copyNode';
+export { logger } from './utils/logger';
+export type { LogLevel } from './types/Project';

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;