@developer_tribe/react-builder 1.0.2 → 1.0.4

package/src/components/JsonTextEditor.tsx

@@ -0,0 +1,185 @@
+import React, { useEffect, useMemo, useState } from 'react';
+
+type JsonTextEditorProps = {
+  value: unknown;
+  onChange?: (next: unknown) => void;
+  rootName?: string;
+  readOnly?: boolean;
+  className?: string;
+};
+
+function safeStringify(value: unknown) {
+  try {
+    return JSON.stringify(value, null, 2) ?? '';
+  } catch {
+    // Fallback for circular structures or non-serializable values
+    return String(value ?? '');
+  }
+}
+
+export function JsonTextEditor({
+  value,
+  onChange,
+  rootName,
+  readOnly = false,
+  className,
+}: JsonTextEditorProps) {
+  const initialText = useMemo(() => safeStringify(value), [value]);
+  const [text, setText] = useState(initialText);
+  const [parseError, setParseError] = useState<string | null>(null);
+  const [applyError, setApplyError] = useState<string | null>(null);
+  const [parsedValue, setParsedValue] = useState<unknown>(value);
+
+  useEffect(() => {
+    setText(initialText);
+    setParseError(null);
+    setApplyError(null);
+    setParsedValue(value);
+  }, [initialText, value]);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      // ignore (e.g. non-secure context)
+    }
+  };
+
+  const handleFormat = () => {
+    try {
+      const parsed = JSON.parse(text);
+      setText(JSON.stringify(parsed, null, 2));
+      setParseError(null);
+      setApplyError(null);
+      setParsedValue(parsed);
+    } catch (e) {
+      setParseError(e instanceof Error ? e.message : 'Invalid JSON');
+    }
+  };
+
+  const handleApply = () => {
+    if (!onChange) return;
+    try {
+      const parsed = JSON.parse(text);
+      setParseError(null);
+      setApplyError(null);
+      setParsedValue(parsed);
+      try {
+        onChange(parsed);
+      } catch (e) {
+        setApplyError(e instanceof Error ? e.message : 'Failed to apply JSON');
+      }
+    } catch (e) {
+      setParseError(e instanceof Error ? e.message : 'Invalid JSON');
+    }
+  };
+
+  const headerLabel = rootName ? `${rootName}.json` : 'data.json';
+
+  return (
+    <div
+      className={className}
+      style={{
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 10,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 8,
+          flexWrap: 'wrap',
+        }}
+      >
+        <div style={{ fontSize: 12, opacity: 0.75 }}>{headerLabel}</div>
+        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+          <button type="button" className="editor-button" onClick={handleCopy}>
+            Copy
+          </button>
+          <button
+            type="button"
+            className="editor-button"
+            onClick={handleFormat}
+          >
+            Format
+          </button>
+          {!readOnly && (
+            <button
+              type="button"
+              className="editor-button"
+              onClick={handleApply}
+              disabled={!onChange}
+              title={onChange ? 'Apply JSON changes' : 'Read only'}
+            >
+              Apply
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'minmax(0, 1fr)',
+          gap: 10,
+          flex: 1,
+          minHeight: 0,
+        }}
+      >
+        <textarea
+          value={text}
+          onChange={(e) => {
+            const nextText = e.target.value;
+            setText(nextText);
+            setApplyError(null);
+            if (readOnly) return;
+            try {
+              const parsed = JSON.parse(nextText);
+              setParseError(null);
+              setParsedValue(parsed);
+            } catch (e) {
+              setParseError(e instanceof Error ? e.message : 'Invalid JSON');
+            }
+          }}
+          readOnly={readOnly}
+          spellCheck={false}
+          style={{
+            width: '100%',
+            height: '100%',
+            minHeight: 320,
+            resize: 'none',
+            border: '1px solid rgba(0,0,0,0.12)',
+            borderRadius: 10,
+            padding: 12,
+            fontFamily:
+              'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+            fontSize: 12,
+            lineHeight: 1.5,
+            background: 'transparent',
+            outline: 'none',
+          }}
+        />
+      </div>
+
+      {parseError ? (
+        <div style={{ fontSize: 12, color: '#d12f2f' }}>
+          Invalid JSON: {parseError}
+        </div>
+      ) : applyError ? (
+        <div style={{ fontSize: 12, color: '#d12f2f' }}>
+          Could not apply: {applyError}
+        </div>
+      ) : (
+        <div style={{ fontSize: 12, opacity: 0.7 }}>
+          Valid JSON ({safeStringify(parsedValue).length.toLocaleString()}{' '}
+          chars)
+        </div>
+      )}
+    </div>
+  );
+}

package/src/index.ts

@@ -3,7 +3,7 @@ import AttributesEditor from './AttributesEditor';
 
 export type { TargetedScreenSize } from './types/TargetedScreenSize';
 export type { Node, NodeData, NodeDefaultAttribute } from './types/Node';
-export type { Project } from './types/Project';
+export type { Project, ProjectColors } from './types/Project';
 export {
   isNodeNullOrUndefined,
   isNodeString,
@@ -28,7 +28,7 @@ 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 type { ProjectPageProps } from './pages/ProjectPage';
 export { copyNode } from './utils/copyNode';
 export { logger } from './utils/logger';
 export type { LogLevel } from './types/Project';

package/src/mockOS/components/MockOSRouter.tsx

@@ -1,6 +1,7 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useCallback, useEffect } from 'react';
 import { useMockOSContext } from '../context/MockOSContext';
 import { MockLaunchScreenComponent } from './MockLaunchScreenComponent';
+import { useRenderStore } from '../../store';
 // Note: We might use react-router or similar library in the future for more complex routing
 
 interface MockOSRouterProps {
@@ -85,6 +86,7 @@ export function MockOSRouter({
   appName = 'My App',
 }: MockOSRouterProps) {
   const context = useMockOSContext();
+  const incForceRender = useRenderStore((s) => s.incForceRender);
 
   if (!context) {
     throw new Error('MockOSRouter must be used within MockOSProvider');
@@ -92,11 +94,23 @@ export function MockOSRouter({
 
   const { currentRoute, navigation } = context;
 
-  function handleLaunchApp() {
+  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]);
+
+  useEffect(() => {
+    incForceRender();
+  }, [currentRoute, incForceRender]);
 
   return (
     <div className="mockos-router">

package/src/mockOS/context/MockOSContext.tsx

@@ -81,7 +81,6 @@ export function MockOSProvider({
   ]);
 
   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,
@@ -109,12 +108,10 @@ export function MockOSProvider({
       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]);
 
@@ -129,12 +126,10 @@ export function MockOSProvider({
   };
 
   const handleAllow = () => {
-    console.log(`[Mock OS] Permission granted: ${permission}`);
     setPermission(null);
   };
 
   const handleDeny = () => {
-    console.log(`[Mock OS] Permission denied: ${permission}`);
     setPermission(null);
   };
 

package/src/mockOS/managers/mockPermissionManager.ts

@@ -26,7 +26,6 @@ export class MockPermissionManager {
       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
@@ -39,7 +38,6 @@ export class MockPermissionManager {
       return 'not-determined';
     }
 
-    console.log(`[Mock OS] Permission checked: ${permission}`);
     return 'granted';
   }
 
@@ -48,7 +46,5 @@ export class MockPermissionManager {
       alert('Opening Settings\n(Mock OS context not available)');
       return;
     }
-
-    console.log('[Mock OS] Opening Settings');
   }
 }

package/src/mockOS/managers/navigationManager.ts

@@ -31,7 +31,6 @@ export class MockNavigationManager {
       timestamp: Date.now(),
     };
     this.stack.push(item);
-    console.log('[Mock OS] Navigate to Home', { stack: this.stack });
   }
 
   goToSubscriptions(): void {
@@ -45,7 +44,6 @@ export class MockNavigationManager {
       timestamp: Date.now(),
     };
     this.stack.push(item);
-    console.log('[Mock OS] Navigate to Subscriptions', { stack: this.stack });
   }
 
   goToLaunchApp(): void {
@@ -59,7 +57,6 @@ export class MockNavigationManager {
       timestamp: Date.now(),
     };
     this.stack.push(item);
-    console.log('[Mock OS] Navigate to Launch App', { stack: this.stack });
   }
 
   goBack(): boolean {
@@ -70,11 +67,9 @@ export class MockNavigationManager {
 
     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;
   }
 
@@ -85,7 +80,7 @@ export class MockNavigationManager {
   clearStack(): void {
     this.stack = [];
     if (this.context) {
-      console.log('[Mock OS] Navigation stack cleared');
+      console.info('[Mock OS] Navigation stack cleared');
     }
   }
 }