@developer_tribe/react-builder 1.0.3 → 1.0.4

package/src/components/Builder.tsx

@@ -41,9 +41,6 @@ function BuilderComponent({
   onMoveChildUp,
   onMoveChildDown,
 }: BuilderEditorComponentProps) {
-  if (isNodeNullOrUndefined(node)) {
-    return <div className="builder__placeholder">Null or undefined</div>;
-  }
   if (isNodeString(node)) {
     return (
       <div className="builder__text">
@@ -105,7 +102,7 @@ function BuilderComponent({
   }
 
   const nodeData = node as NodeData<NodeDefaultAttribute>;
-  const rawChildren = nodeData.children;
+  const rawChildren = nodeData?.children;
   const hasArrayChildren = isNodeArray(rawChildren);
   const children = rawChildren
     ? hasArrayChildren
@@ -195,16 +192,55 @@ export function Builder({
 
   const handleAddChild = useCallback(
     (type: string) => {
-      if (
-        isNodeNullOrUndefined(current) ||
-        isNodeString(current) ||
-        isNodeArray(current)
-      ) {
+      const nextChild = createDefaultNode(type);
+
+      // Root (or selection) can be empty/null-ish: allow creating the first node.
+      if (isNodeNullOrUndefined(current)) {
+        // If the project itself is empty (or a placeholder string), replace it with the first node.
+        if (isNodeNullOrUndefined(data) || isNodeString(data)) {
+          setData(nextChild);
+          setCurrent(nextChild);
+          return;
+        }
+
+        // If the project root is a list, append into it.
+        if (Array.isArray(data)) {
+          const nextList = [...data, nextChild];
+          setData(nextList);
+          setCurrent(nextList);
+          return;
+        }
+
+        // Otherwise default to adding into the root node.
+        const parent = data as NodeData<NodeDefaultAttribute>;
+        const updatedParent: NodeData<NodeDefaultAttribute> = {
+          ...parent,
+          children: appendChild(parent.children, nextChild),
+        };
+        setData(updatedParent);
+        setCurrent(updatedParent);
+        return;
+      }
+
+      // If the root is a list, allow adding to it directly.
+      if (isNodeArray(current)) {
+        const nextList = [...(current as Node[]), nextChild];
+        const updatedRoot = replaceNode(data, current, nextList);
+        setData(updatedRoot);
+        setCurrent(nextList);
+        return;
+      }
+
+      // If the root is a placeholder string, allow replacing it with the first node.
+      if (isNodeString(current)) {
+        if (current === data) {
+          setData(nextChild);
+          setCurrent(nextChild);
+        }
         return;
       }
 
       const parent = current as NodeData<NodeDefaultAttribute>;
-      const nextChild = createDefaultNode(type);
       const updatedParent: NodeData<NodeDefaultAttribute> = {
         ...parent,
         children: appendChild(parent.children, nextChild),
@@ -230,7 +266,11 @@ export function Builder({
     }
     return (current as NodeData<NodeDefaultAttribute>).type ?? null;
   }, [current]);
-  const canAddChild = allowedChildTypes.length > 0;
+  const canAddChild =
+    allowedChildTypes.length > 0 ||
+    data === undefined ||
+    data === null ||
+    (Array.isArray(data) && data.length === 0);
 
   const handleOpenAddModal = useCallback(() => {
     if (!canAddChild) return;
@@ -373,12 +413,16 @@ export function Builder({
   }
 
   function getAllowedChildTypes(parent: Node): string[] {
-    if (
-      isNodeNullOrUndefined(parent) ||
-      isNodeString(parent) ||
-      isNodeArray(parent)
-    )
-      return [];
+    // Treat non-node containers (root empty, root arrays) as "View-like" containers:
+    // allow inserting any component type as a child.
+    if (isNodeNullOrUndefined(parent)) return [...allcomponentNames];
+    if (isNodeArray(parent) && (parent as Node[]).length === 0)
+      return [...allcomponentNames];
+    if (isNodeString(parent)) {
+      // Only allow adding when the string is the root placeholder.
+      return parent === data ? [...allcomponentNames] : [];
+    }
+
     const parentData = parent as NodeData;
     const parentType = parentData.type;
     // Special rule: limit OnboardButtons to OnboardButton only

package/src/components/DeviceNavigationBar.tsx

@@ -37,7 +37,6 @@ export function DeviceNavigationBar({
     : '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

package/src/components/EditorHeader.tsx

@@ -24,9 +24,14 @@ export function EditorHeader({
   useLogRender('EditorHeader');
   const [isDevicesModalOpen, setIsDevicesModalOpen] = useState(false);
   const copiedNode = useRenderStore((s) => s.copiedNode);
-  const { device: selectedDevice, setDevice } = useRenderStore((s) => ({
+  const {
+    device: selectedDevice,
+    setDevice,
+    setCurrent,
+  } = useRenderStore((s) => ({
     device: s.device,
     setDevice: s.setDevice,
+    setCurrent: s.setCurrent,
   }));
 
   function replaceNode(root: Node, target: Node, next: Node): Node {
@@ -67,6 +72,11 @@ export function EditorHeader({
       copiedNode: null,
     });
     setEditorData(updated);
+    //TODO: current and editor must be sync!! and tested more
+    // Important: selection is stored by reference. After replacing `current` in the tree,
+    // we must point selection to the new (cloned) node reference to keep "current node"
+    // in sync with what’s rendered/edited.
+    setCurrent(cloned);
   };
   return (
     <div

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/mockOS/components/MockOSRouter.tsx

@@ -1,6 +1,7 @@
 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');
@@ -106,6 +108,10 @@ export function MockOSRouter({
     return () => clearTimeout(timer);
   }, [handleLaunchApp]);
 
+  useEffect(() => {
+    incForceRender();
+  }, [currentRoute, incForceRender]);
+
   return (
     <div className="mockos-router">
       <ScreenRenderer

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

package/src/modals/ColorModal.tsx

@@ -65,7 +65,11 @@ const readSavedColors = (): string[] => {
     const stored = window.localStorage.getItem(SAVED_COLORS_KEY);
     if (!stored) return [];
     const parsed = JSON.parse(stored);
-    return Array.isArray(parsed) ? parsed : [];
+    if (!Array.isArray(parsed)) return [];
+    return parsed
+      .filter((value) => typeof value === 'string')
+      .map((value) => value.trim().toLowerCase())
+      .filter(Boolean);
   } catch {
     return [];
   }
@@ -143,6 +147,7 @@ export function ColorModal({
   const [useColorNames, setUseColorNames] = useState(true);
   const colorInputRef = useRef<HTMLInputElement | null>(null);
   const colorNameToggleId = useId();
+  const colorPickerInputId = useId();
 
   const selectedColorPreview = useMemo(
     () => resolveProjectColorValue(value, projectColors) ?? value,
@@ -195,21 +200,10 @@ export function ColorModal({
     [savedColors],
   );
 
-  const handleAddColorClick = () => {
-    colorInputRef.current?.click();
-  };
-
-  const handlePreviewKeyDown = (
-    event: React.KeyboardEvent<HTMLSpanElement>,
-  ) => {
-    if (event.key !== 'Enter' && event.key !== ' ') return;
-    event.preventDefault();
-    handleAddColorClick();
-  };
-
-  const handleColorPicked = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const picked = event.target.value;
+  const applyPickedColor = (raw: string | undefined) => {
+    const picked = raw?.trim().toLowerCase();
     if (!picked) return;
+
     setSavedColors((prev) => {
       if (prev.includes(picked)) return prev;
       const next = [...prev, picked];
@@ -218,7 +212,85 @@ export function ColorModal({
     });
     onSelect(picked);
     onClose();
-    event.target.value = '';
+  };
+
+  const openPickerWithTempInput = () => {
+    if (typeof document === 'undefined') return;
+
+    const temp = document.createElement('input');
+    temp.type = 'color';
+    temp.value = selectedColorPreview?.toString() || '#000000';
+
+    // Keep it in the DOM and "not display:none" so Safari/iOS reliably opens it.
+    temp.style.position = 'fixed';
+    temp.style.left = '-1000px';
+    temp.style.top = '0';
+    temp.style.width = '40px';
+    temp.style.height = '40px';
+    temp.style.opacity = '0';
+
+    const cleanup = () => {
+      temp.removeEventListener('change', onChange);
+      temp.removeEventListener('input', onChange);
+      temp.removeEventListener('blur', cleanup);
+      temp.remove();
+    };
+
+    const onChange = () => {
+      applyPickedColor(temp.value);
+      cleanup();
+    };
+
+    temp.addEventListener('change', onChange);
+    temp.addEventListener('input', onChange);
+    temp.addEventListener('blur', cleanup);
+
+    document.body.appendChild(temp);
+    try {
+      temp.focus({ preventScroll: true });
+    } catch {
+      // no-op
+    }
+    // Next tick helps some browsers recognize it as a user-gesture flow.
+    requestAnimationFrame(() => temp.click());
+  };
+
+  const handleAddColorClick = () => {
+    const input = colorInputRef.current;
+
+    // Prefer showPicker when available (Chromium).
+    const maybeShowPicker = input
+      ? (
+          input as HTMLInputElement & {
+            showPicker?: () => void;
+          }
+        ).showPicker
+      : undefined;
+
+    if (input && typeof maybeShowPicker === 'function') {
+      try {
+        input.focus({ preventScroll: true });
+      } catch {
+        // no-op
+      }
+      maybeShowPicker.call(input);
+      return;
+    }
+
+    // Fallback: temporary input for Safari/iOS and browsers that block click on hidden inputs.
+    openPickerWithTempInput();
+  };
+
+  const handlePreviewKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (event.key !== 'Enter' && event.key !== ' ') return;
+    event.preventDefault();
+    handleAddColorClick();
+  };
+
+  const handleColorPicked = (event: React.ChangeEvent<HTMLInputElement>) => {
+    applyPickedColor(event.target.value);
+    // Keep the input value valid for type="color" (empty string can be invalid).
+    event.target.value = '#000000';
   };
 
   const handleSelectColor = (option: ColorOption) => {
@@ -245,16 +317,16 @@ export function ColorModal({
 
       <div className="color-modal__selected">
         <div className="color-modal__selected-info">
-          <span
+          <label
+            htmlFor={colorPickerInputId}
             role="button"
             aria-label="Open color picker"
             tabIndex={0}
             title="Pick a color"
             className="color-modal__selected-preview"
             style={{ background: selectedColorPreview ?? 'transparent' }}
-            onClick={handleAddColorClick}
             onKeyDown={handlePreviewKeyDown}
-          />
+          ></label>
           <div>
             <p className="color-modal__selected-label">Selected color</p>
             <p className="color-modal__selected-value">{value ?? 'None'}</p>
@@ -316,13 +388,16 @@ export function ColorModal({
         options={savedColorOptions}
         emptyMessage="Add colors you use often for quick access."
         action={
-          <button
-            type="button"
-            className="color-modal__link-button"
-            onClick={handleAddColorClick}
-          >
+          <span className="color-modal__link-button color-modal__add-color">
             Add color
-          </button>
+            <input
+              type="color"
+              className="color-modal__add-color-input"
+              onChange={handleColorPicked}
+              defaultValue="#000000"
+              aria-label="Add color"
+            />
+          </span>
         }
         activeValue={value}
         onSelect={handleSelectColor}
@@ -330,9 +405,12 @@ export function ColorModal({
 
       <input
         ref={colorInputRef}
+        id={colorPickerInputId}
         type="color"
         className="color-modal__input"
         onChange={handleColorPicked}
+        defaultValue="#000000"
+        tabIndex={-1}
       />
     </Modal>
   );

package/src/modals/LocalicationModal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { JsonEditor } from 'json-edit-react';
+import { JsonTextEditor } from '../components/JsonTextEditor';
 import { Localication } from '../types/PreviewConfig';
 import Modal from './Modal';
 
@@ -38,12 +38,11 @@ export function LocalicationModal({
       </div>
       <div className="localication-modal__body">
         <div className="localication-modal__editor">
-          <JsonEditor
+          <JsonTextEditor
             rootName="localication"
-            data={normalizedData}
-            setData={(next) => onChange(next as Localication)}
+            value={normalizedData}
+            onChange={(next) => onChange(next as Localication)}
             className="localication-modal__json-editor"
-            maxWidth={'100%'}
           />
         </div>
       </div>