@developer_tribe/react-builder 1.0.1 → 1.0.3

package/src/DeviceMockFrame.tsx

@@ -1,12 +1,16 @@
 import React from 'react';
 import { useRenderStore } from './store';
 import { useLogRender } from './utils/useLogRender';
+import { DeviceStatusBar } from './components/DeviceStatusBar';
+import { DeviceNavigationBar } from './components/DeviceNavigationBar';
+import { MockOSProvider } from './mockOS';
 
 type DeviceMockFrameProps = {
   children: React.ReactNode;
+  appName?: string;
 };
 
-export function DeviceMockFrame({ children }: DeviceMockFrameProps) {
+export function DeviceMockFrame({ children, appName }: DeviceMockFrameProps) {
   useLogRender('DeviceMockFrame');
   const { appConfig, device } = useRenderStore((s) => ({
     appConfig: s.appConfig,
@@ -35,12 +39,8 @@ export function DeviceMockFrame({ children }: DeviceMockFrameProps) {
         return insetBottom || 0;
     }
   })();
-  const statusBarColor = isDark
-    ? 'rgba(255, 255, 255, 0.08)'
-    : 'rgba(0, 0, 0, 0.06)';
-  const navBarColor = isDark
-    ? 'rgba(255, 255, 255, 0.06)'
-    : 'rgba(0, 0, 0, 0.04)';
+  const statusBarColor = isDark ? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)';
+  const navBarColor = isDark ? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)';
 
   return (
     <div className="stage-wrapper" style={{ overflow: 'auto' }}>
@@ -70,38 +70,22 @@ export function DeviceMockFrame({ children }: DeviceMockFrameProps) {
           borderRadius: device.radius ?? 0,
         }}
       >
-        <div
-          className="device-status-bar"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            height: statusBarHeight,
-            backgroundColor: statusBarColor,
-            flex: '0 0 auto',
-          }}
-        />
-        <div
-          className="device-content"
-          style={{
-            flex: 1,
-            overflow: 'hidden',
-            position: 'relative',
-            paddingLeft: insetLeft,
-            paddingRight: insetRight,
-          }}
+        <MockOSProvider
+          appName={appName}
+          statusBarHeight={statusBarHeight}
+          statusBarBackgroundColor={statusBarColor}
+          statusBarPlatform={device.platform}
+          statusBarIsDark={isDark}
+          navBarHeight={navBarHeight}
+          navBarBackgroundColor={navBarColor}
+          navBarPlatform={device.platform}
+          navBarNavigationBarType={device.navigationBarType}
+          navBarIsDark={isDark}
+          insetLeft={insetLeft}
+          insetRight={insetRight}
         >
           {children}
-        </div>
-        <div
-          className="device-navigation-bar"
-          style={{
-            height: navBarHeight,
-            backgroundColor: navBarColor,
-            flex: '0 0 auto',
-          }}
-        />
+        </MockOSProvider>
       </div>
     </div>
   );

package/src/RenderPage.tsx

@@ -1,5 +1,6 @@
+import { useEffect, useRef } from 'react';
 import { DeviceMockFrame } from './DeviceMockFrame';
-import { Node } from './types/Node';
+import { Node, NodeData } from './types/Node';
 import { RenderNode } from './build-components';
 import { useRenderStore } from './store';
 import { useLogRender } from './utils/useLogRender';
@@ -7,12 +8,88 @@ export type ScreenStyle = {
   light: { backgroundColor: string; color: string; seperatorColor?: string };
   dark: { backgroundColor: string; color: string; seperatorColor?: string };
 };
-type RenderPageProps = {
+interface RenderPageProps {
   data: Node;
-};
-export function RenderPage({ data }: RenderPageProps) {
+  name: string;
+  onSelectNode?: (node: Node | null) => void;
+}
+
+function findNodeByKeyNested(node: Node, key: string): Node | null {
+  if (node === null || node === undefined) {
+    return null;
+  }
+
+  if (typeof node === 'string') {
+    return null;
+  }
+
+  if (Array.isArray(node)) {
+    for (const child of node) {
+      const found = findNodeByKeyNested(child, key);
+      if (found) {
+        return found;
+      }
+    }
+    return null;
+  }
+
+  const recordData = node as NodeData;
+  if (recordData.key === key) {
+    return recordData;
+  }
+
+  if (recordData.children) {
+    return findNodeByKeyNested(recordData.children as Node, key);
+  }
+
+  return null;
+}
+
+export function RenderPage({ data, name, onSelectNode }: RenderPageProps) {
   useLogRender('RenderPage');
-  const { device } = useRenderStore((s) => ({ device: s.device }));
+  const { device, previewMode, setCurrent } = useRenderStore((s) => ({
+    device: s.device,
+    previewMode: s.previewMode,
+    setCurrent: s.setCurrent,
+  }));
+  const previewRootRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!previewMode) {
+      return;
+    }
+
+    const root = previewRootRef.current;
+    if (!root) return;
+
+    const handleClick = (event: MouseEvent) => {
+      const target = event.target as HTMLElement | null;
+      if (!target) return;
+
+      // Ignore clicks on carousel dots to avoid interfering with navigation
+      if (target.closest('.embla__dot')) {
+        return;
+      }
+
+      const element = target.closest('[attribute-key]') as HTMLElement | null;
+      if (!element) return;
+
+      const key = element.getAttribute('attribute-key');
+
+      if (!key) return;
+
+      const node = findNodeByKeyNested(data, key);
+      setCurrent(node);
+      onSelectNode?.(node);
+    };
+
+    root.addEventListener('click', handleClick);
+
+    return () => {
+      root.removeEventListener('click', handleClick);
+    };
+  }, [previewMode, data, onSelectNode, setCurrent]);
+
   const screenPreviewHeight = 800;
   // The calculation is correct for maintaining the aspect ratio of the target screen size.
   // It scales the width proportionally to a fixed preview height.
@@ -21,8 +98,10 @@ export function RenderPage({ data }: RenderPageProps) {
   const width = (height * device.width) / device.height;
 
   return (
-    <DeviceMockFrame>
-      <RenderNode node={data} />
+    <DeviceMockFrame appName={name}>
+      <div ref={previewRootRef}>
+        <RenderNode node={data} />
+      </div>
     </DeviceMockFrame>
   );
 }

package/src/assets/images/android.svg

@@ -1,43 +1,43 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 viewBox="0 0 502.857 502.857" xml:space="preserve">
-<g>
-	<path style="fill:#57C927;" d="M115.428,155.433v217.664c0,17,10.208,30.336,27.704,30.336h22.84c-0.784,0-2.544,5.768-2.544,8.6
-		v61.648c0,16.112,15.448,29.176,32,29.176c16.56,0,32-13.064,32-29.176v-61.648c0-2.832-3.088-8.6-3.848-8.6h55.712
-		c-0.76,0-3.864,5.768-3.864,8.6v61.648c0,16.112,15.416,29.176,31.968,29.176c16.592,0,32.032-13.064,32.032-29.176v-61.648
-		c0-2.832-1.752-8.6-2.536-8.6h22.872c17.496,0,27.664-13.336,27.664-30.336V155.433H113.596H115.428z"/>
-	<path style="fill:#57C927;" d="M59.428,158.977c-16.568,0-32,13.072-32,29.176v124.92c0,16.112,15.432,29.176,32,29.176
-		c16.56,0,32-13.064,32-29.176V188.161C91.428,172.049,75.988,158.977,59.428,158.977z"/>
-	<path style="fill:#57C927;" d="M320.3,42.057l5.584-8.192l5.592-8.096l12.456-18.2c1.56-2.256,0.912-5.264-1.384-6.744
-		c-2.272-1.512-5.416-0.88-6.904,1.36l-19.016,27.704l-5.72,8.344c-18.072-6.832-38.208-10.64-59.48-10.64
-		c-21.224,0-41.4,3.816-59.472,10.64l-5.688-8.336l-5.624-8.184l-13.36-19.512c-1.544-2.248-4.648-2.84-6.952-1.36
-		c-2.28,1.488-2.912,4.496-1.392,6.744l12.448,18.208l5.592,8.104l5.616,8.168c-42.432,19.24-71.144,57.368-71.144,97.368h279.96
-		C391.412,99.433,362.708,61.305,320.3,42.057z M191.436,100.593c-8.312,0-15.008-6.536-15.008-14.608s6.696-14.576,15.008-14.576
-		c8.288,0,15,6.504,15,14.576S199.732,100.593,191.436,100.593z M311.436,100.593c-8.304,0-15.016-6.536-15.016-14.608
-		s6.712-14.576,15.016-14.576c8.288,0,15,6.504,15,14.576S319.724,100.593,311.436,100.593z"/>
-</g>
-<path style="fill:#1CB71C;" d="M60.852,224.193c-12.472,0-25.424-11.768-33.424-30.432v119.32c0,16.112,15.432,29.176,32,29.176
-	c16.56,0,32-13.064,32-29.176V199.985C83.428,214.977,71.86,224.193,60.852,224.193z"/>
-<path style="fill:#57C927;" d="M443.428,158.977c-16.568,0-32,13.072-32,29.176v124.92c0,16.112,15.432,29.176,32,29.176
-	c16.56,0,32-13.064,32-29.176V188.161C475.428,172.049,459.988,158.977,443.428,158.977z"/>
-<g>
-	<path style="fill:#1CB71C;" d="M444.852,224.193c-12.472,0-25.424-11.768-33.424-30.432v119.32c0,16.112,15.432,29.176,32,29.176
-		c16.56,0,32-13.064,32-29.176V199.985C467.428,214.977,455.86,224.193,444.852,224.193z"/>
-	<path style="fill:#1CB71C;" d="M251.428,179.337c-63.28,0-120-7.32-136-17.712v211.472c0,17,10.208,30.336,27.704,30.336h22.84
-		c-0.784,0-2.544,5.768-2.544,8.6v61.648c0,16.112,15.448,29.176,32,29.176c16.56,0,32-13.064,32-29.176v-61.648
-		c0-2.832-3.088-8.6-3.848-8.6h55.712c-0.76,0-3.864,5.768-3.864,8.6v61.648c0,16.112,15.416,29.176,31.968,29.176
-		c16.592,0,32.032-13.064,32.032-29.176v-61.648c0-2.832-1.752-8.6-2.536-8.6h22.872c17.496,0,27.664-13.336,27.664-30.336v-211.48
-		C371.428,172.009,314.716,179.337,251.428,179.337z"/>
-	<path style="fill:#1CB71C;" d="M326.436,85.977c0,8.072-6.712,14.608-15,14.608c-8.304,0-15.016-6.536-15.016-14.608
-		c0-4.376,2.008-8.24,5.136-10.912c-15.816-2.64-32.64-4.088-50.128-4.088s-34.304,1.448-50.128,4.088
-		c3.136,2.664,5.144,6.536,5.144,10.912c0,8.072-6.712,14.608-15,14.608c-8.312,0-15.008-6.536-15.008-14.608
-		c0-2.064,0.456-4.024,1.248-5.808c-23.984,6.304-44.592,15.504-60.144,26.808c-3.92,10.296-6.088,24.456-6.088,32.456h279.96
-		c0-8-2.168-22.152-6.08-32.44c-15.544-11.32-36.16-20.536-60.128-26.84C325.988,81.937,326.436,83.921,326.436,85.977z"/>
-</g>
-<path style="fill:#049E42;" d="M251.428,262.817c-53.896,0-104-10.632-136-28.056v138.336c0,17,10.208,30.336,27.704,30.336h22.84
-	c-0.784,0-2.544,5.768-2.544,8.6v61.648c0,16.112,15.448,29.176,32,29.176c16.56,0,32-13.064,32-29.176v-61.648
-	c0-2.832-3.088-8.6-3.848-8.6h55.712c-0.76,0-3.864,5.768-3.864,8.6v61.648c0,16.112,15.416,29.176,31.968,29.176
-	c16.592,0,32.032-13.064,32.032-29.176v-61.648c0-2.832-1.752-8.6-2.536-8.6h22.872c17.496,0,27.664-13.336,27.664-30.336V234.761
-	C355.428,252.193,305.324,262.817,251.428,262.817z"/>
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 502.857 502.857" xml:space="preserve">
+<g>
+	<path style="fill:#57C927;" d="M115.428,155.433v217.664c0,17,10.208,30.336,27.704,30.336h22.84c-0.784,0-2.544,5.768-2.544,8.6
+		v61.648c0,16.112,15.448,29.176,32,29.176c16.56,0,32-13.064,32-29.176v-61.648c0-2.832-3.088-8.6-3.848-8.6h55.712
+		c-0.76,0-3.864,5.768-3.864,8.6v61.648c0,16.112,15.416,29.176,31.968,29.176c16.592,0,32.032-13.064,32.032-29.176v-61.648
+		c0-2.832-1.752-8.6-2.536-8.6h22.872c17.496,0,27.664-13.336,27.664-30.336V155.433H113.596H115.428z"/>
+	<path style="fill:#57C927;" d="M59.428,158.977c-16.568,0-32,13.072-32,29.176v124.92c0,16.112,15.432,29.176,32,29.176
+		c16.56,0,32-13.064,32-29.176V188.161C91.428,172.049,75.988,158.977,59.428,158.977z"/>
+	<path style="fill:#57C927;" d="M320.3,42.057l5.584-8.192l5.592-8.096l12.456-18.2c1.56-2.256,0.912-5.264-1.384-6.744
+		c-2.272-1.512-5.416-0.88-6.904,1.36l-19.016,27.704l-5.72,8.344c-18.072-6.832-38.208-10.64-59.48-10.64
+		c-21.224,0-41.4,3.816-59.472,10.64l-5.688-8.336l-5.624-8.184l-13.36-19.512c-1.544-2.248-4.648-2.84-6.952-1.36
+		c-2.28,1.488-2.912,4.496-1.392,6.744l12.448,18.208l5.592,8.104l5.616,8.168c-42.432,19.24-71.144,57.368-71.144,97.368h279.96
+		C391.412,99.433,362.708,61.305,320.3,42.057z M191.436,100.593c-8.312,0-15.008-6.536-15.008-14.608s6.696-14.576,15.008-14.576
+		c8.288,0,15,6.504,15,14.576S199.732,100.593,191.436,100.593z M311.436,100.593c-8.304,0-15.016-6.536-15.016-14.608
+		s6.712-14.576,15.016-14.576c8.288,0,15,6.504,15,14.576S319.724,100.593,311.436,100.593z"/>
+</g>
+<path style="fill:#1CB71C;" d="M60.852,224.193c-12.472,0-25.424-11.768-33.424-30.432v119.32c0,16.112,15.432,29.176,32,29.176
+	c16.56,0,32-13.064,32-29.176V199.985C83.428,214.977,71.86,224.193,60.852,224.193z"/>
+<path style="fill:#57C927;" d="M443.428,158.977c-16.568,0-32,13.072-32,29.176v124.92c0,16.112,15.432,29.176,32,29.176
+	c16.56,0,32-13.064,32-29.176V188.161C475.428,172.049,459.988,158.977,443.428,158.977z"/>
+<g>
+	<path style="fill:#1CB71C;" d="M444.852,224.193c-12.472,0-25.424-11.768-33.424-30.432v119.32c0,16.112,15.432,29.176,32,29.176
+		c16.56,0,32-13.064,32-29.176V199.985C467.428,214.977,455.86,224.193,444.852,224.193z"/>
+	<path style="fill:#1CB71C;" d="M251.428,179.337c-63.28,0-120-7.32-136-17.712v211.472c0,17,10.208,30.336,27.704,30.336h22.84
+		c-0.784,0-2.544,5.768-2.544,8.6v61.648c0,16.112,15.448,29.176,32,29.176c16.56,0,32-13.064,32-29.176v-61.648
+		c0-2.832-3.088-8.6-3.848-8.6h55.712c-0.76,0-3.864,5.768-3.864,8.6v61.648c0,16.112,15.416,29.176,31.968,29.176
+		c16.592,0,32.032-13.064,32.032-29.176v-61.648c0-2.832-1.752-8.6-2.536-8.6h22.872c17.496,0,27.664-13.336,27.664-30.336v-211.48
+		C371.428,172.009,314.716,179.337,251.428,179.337z"/>
+	<path style="fill:#1CB71C;" d="M326.436,85.977c0,8.072-6.712,14.608-15,14.608c-8.304,0-15.016-6.536-15.016-14.608
+		c0-4.376,2.008-8.24,5.136-10.912c-15.816-2.64-32.64-4.088-50.128-4.088s-34.304,1.448-50.128,4.088
+		c3.136,2.664,5.144,6.536,5.144,10.912c0,8.072-6.712,14.608-15,14.608c-8.312,0-15.008-6.536-15.008-14.608
+		c0-2.064,0.456-4.024,1.248-5.808c-23.984,6.304-44.592,15.504-60.144,26.808c-3.92,10.296-6.088,24.456-6.088,32.456h279.96
+		c0-8-2.168-22.152-6.08-32.44c-15.544-11.32-36.16-20.536-60.128-26.84C325.988,81.937,326.436,83.921,326.436,85.977z"/>
+</g>
+<path style="fill:#049E42;" d="M251.428,262.817c-53.896,0-104-10.632-136-28.056v138.336c0,17,10.208,30.336,27.704,30.336h22.84
+	c-0.784,0-2.544,5.768-2.544,8.6v61.648c0,16.112,15.448,29.176,32,29.176c16.56,0,32-13.064,32-29.176v-61.648
+	c0-2.832-3.088-8.6-3.848-8.6h55.712c-0.76,0-3.864,5.768-3.864,8.6v61.648c0,16.112,15.416,29.176,31.968,29.176
+	c16.592,0,32.032-13.064,32.032-29.176v-61.648c0-2.832-1.752-8.6-2.536-8.6h22.872c17.496,0,27.664-13.336,27.664-30.336V234.761
+	C355.428,252.193,305.324,262.817,251.428,262.817z"/>
 </svg>

package/src/assets/images/apple.svg

@@ -1,16 +1,16 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 viewBox="0 0 496.412 496.412" xml:space="preserve">
-<path d="M317.222,80.584C333.414,59.696,345.686,30.152,341.246,0c-26.472,1.84-57.384,18.768-75.432,40.832
-	c-16.456,20-29.976,49.728-24.688,78.608C270.054,120.344,299.91,103.008,317.222,80.584z"/>
-<path style="fill:#1B546B;" d="M445.838,166.544c-25.4-31.872-61.12-50.344-94.848-50.344c-44.512,0-63.352,21.312-94.264,21.312
-	c-31.896,0-56.12-21.248-94.624-21.248c-37.832,0-78.112,23.12-103.64,62.64C22.574,234.576,28.694,339.2,86.894,428.336
-	c20.808,31.904,48.592,67.744,84.952,68.072c32.36,0.32,41.488-20.752,85.336-20.992c43.832-0.256,52.16,21.264,84.456,20.896
-	c36.384-0.288,65.712-40.016,86.512-71.92c14.912-22.848,20.48-34.376,32.056-60.184
-	C376.014,332.184,362.518,212.488,445.838,166.544z"/>
-<path d="M394.774,228.08c-63.632,51.52-153.592,83.712-253.44,83.712c-35.776,0-70.288-4.144-102.768-11.808
-	c5.496,41.808,21.16,86.736,48.336,128.344c20.808,31.904,48.592,67.744,84.952,68.072c32.36,0.32,41.488-20.752,85.336-20.992
-	c43.832-0.256,52.16,21.264,84.456,20.896c36.384-0.288,65.712-40.016,86.512-71.92c14.912-22.848,20.48-34.376,32.056-60.184
-	C402.966,342.44,378.454,280.176,394.774,228.08z"/>
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 496.412 496.412" xml:space="preserve">
+<path d="M317.222,80.584C333.414,59.696,345.686,30.152,341.246,0c-26.472,1.84-57.384,18.768-75.432,40.832
+	c-16.456,20-29.976,49.728-24.688,78.608C270.054,120.344,299.91,103.008,317.222,80.584z"/>
+<path style="fill:#1B546B;" d="M445.838,166.544c-25.4-31.872-61.12-50.344-94.848-50.344c-44.512,0-63.352,21.312-94.264,21.312
+	c-31.896,0-56.12-21.248-94.624-21.248c-37.832,0-78.112,23.12-103.64,62.64C22.574,234.576,28.694,339.2,86.894,428.336
+	c20.808,31.904,48.592,67.744,84.952,68.072c32.36,0.32,41.488-20.752,85.336-20.992c43.832-0.256,52.16,21.264,84.456,20.896
+	c36.384-0.288,65.712-40.016,86.512-71.92c14.912-22.848,20.48-34.376,32.056-60.184
+	C376.014,332.184,362.518,212.488,445.838,166.544z"/>
+<path d="M394.774,228.08c-63.632,51.52-153.592,83.712-253.44,83.712c-35.776,0-70.288-4.144-102.768-11.808
+	c5.496,41.808,21.16,86.736,48.336,128.344c20.808,31.904,48.592,67.744,84.952,68.072c32.36,0.32,41.488-20.752,85.336-20.992
+	c43.832-0.256,52.16,21.264,84.456,20.896c36.384-0.288,65.712-40.016,86.512-71.92c14.912-22.848,20.48-34.376,32.056-60.184
+	C402.966,342.44,378.454,280.176,394.774,228.08z"/>
 </svg>