@developer_tribe/react-builder 0.1.32 → 1.0.2

package/src/DeviceMockFrame.tsx

@@ -1,29 +1,22 @@
 import React from 'react';
-import { Device } from './types/Device';
+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 = {
-  width: number;
-  height: number;
-  isRtl: boolean;
-  screenStyle: {
-    light: { backgroundColor: string; color: string };
-    dark: { backgroundColor: string; color: string };
-  };
-  theme: 'dark' | 'light';
   children: React.ReactNode;
-  device: Device;
+  appName?: string;
 };
 
-export function DeviceMockFrame({
-  width,
-  height,
-  isRtl,
-  screenStyle,
-  theme,
-  children,
-  device,
-}: DeviceMockFrameProps) {
-  const isDark = theme === 'dark';
+export function DeviceMockFrame({ children, appName }: DeviceMockFrameProps) {
+  useLogRender('DeviceMockFrame');
+  const { appConfig, device } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
+    device: s.device,
+  }));
+  const isDark = appConfig.theme === 'dark';
   const [insetTop, insetRight, insetBottom, insetLeft] = device.insets ?? [
     0, 0, 0, 0,
   ];
@@ -46,71 +39,53 @@ export function DeviceMockFrame({
         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' }}>
       <div
         className="stage"
         style={{
-          width: width,
-          height: height,
-          minWidth: width,
-          maxWidth: width,
-          minHeight: height,
-          maxHeight: height,
+          width: device.width,
+          height: device.height,
+          minWidth: device.width,
+          maxWidth: device.width,
+          minHeight: device.height,
+          maxHeight: device.height,
           overflow: 'hidden',
           position: 'relative',
           padding: 4,
-          direction: isRtl ? 'rtl' : 'ltr',
+          direction: appConfig.isRtl ? 'rtl' : 'ltr',
           backgroundColor:
-            theme === 'dark'
-              ? screenStyle.dark.backgroundColor
-              : screenStyle.light.backgroundColor,
+            appConfig.theme === 'dark'
+              ? appConfig.screenStyle.dark.backgroundColor
+              : appConfig.screenStyle.light.backgroundColor,
           color:
-            theme === 'dark' ? screenStyle.dark.color : screenStyle.light.color,
+            appConfig.theme === 'dark'
+              ? appConfig.screenStyle.dark.color
+              : appConfig.screenStyle.light.color,
           display: 'flex',
           flexDirection: 'column',
           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,33 +1,19 @@
-import { Localication } from './types/PreviewConfig';
-import { TargetedScreenSize } from './types/TargetedScreenSize';
 import { DeviceMockFrame } from './DeviceMockFrame';
 import { Node } from './types/Node';
 import { RenderNode } from './build-components';
-import { Device } from './types/Device';
-import { useEffect } from 'react';
 import { useRenderStore } from './store';
+import { useLogRender } from './utils/useLogRender';
 export type ScreenStyle = {
   light: { backgroundColor: string; color: string; seperatorColor?: string };
   dark: { backgroundColor: string; color: string; seperatorColor?: string };
 };
-type RenderPageProps = {
+interface RenderPageProps {
   data: Node;
-  isRtl: boolean;
-  screenStyle: ScreenStyle;
-  theme: 'dark' | 'light';
-  localication: Localication;
-  defaultLanguage?: string;
-  device: Device;
-};
-export function RenderPage({
-  data,
-  theme,
-  isRtl,
-  screenStyle,
-  localication,
-  defaultLanguage,
-  device,
-}: RenderPageProps) {
+  name: string;
+}
+export function RenderPage({ data, name }: RenderPageProps) {
+  useLogRender('RenderPage');
+  const { device } = useRenderStore((s) => ({ device: s.device }));
   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.
@@ -35,30 +21,8 @@ export function RenderPage({
   const height = screenPreviewHeight;
   const width = (height * device.width) / device.height;
 
-  useEffect(() => {
-    const {
-      setDevice,
-      setLocalication,
-      setDefaultLanguage,
-      setTheme,
-      setScreenStyle,
-    } = useRenderStore.getState();
-    setDevice(device);
-    setLocalication(localication);
-    setDefaultLanguage(defaultLanguage);
-    setTheme(theme);
-    setScreenStyle(screenStyle);
-  }, [device, localication, defaultLanguage, theme, screenStyle]);
-
   return (
-    <DeviceMockFrame
-      width={width}
-      height={height}
-      isRtl={isRtl}
-      screenStyle={screenStyle}
-      theme={theme}
-      device={device}
-    >
+    <DeviceMockFrame appName={name}>
       <RenderNode node={data} />
     </DeviceMockFrame>
   );

package/src/assets/images/android.svg

@@ -0,0 +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"/>
+</svg>

package/src/assets/images/apple.svg

@@ -0,0 +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"/>
+</svg>

package/src/assets/samples/carousel-sample.json

@@ -1,9 +1,8 @@
 {
   "name": "carousel-sample",
   "version": "1.0.0",
-  "previewConfig": {
-    "theme": "light",
-    "screenSize": { "width": 375, "height": 812 }
+  "appConfig": {
+    "theme": "light"
   },
   "data": {
     "type": "carouselProvider",

package/src/assets/samples/getSamples.ts

@@ -9,15 +9,34 @@ import vpnOnboard4 from './vpn-onboard-4.json';
 import vpnOnboard5 from './vpn-onboard-5.json';
 import vpnOnboard6 from './vpn-onboard-6.json';
 import { novaToJson } from '../../utils/novaToJson';
+import { defaultAppConfig } from '../../types/PreviewConfig';
 
 export function getSamples(): Project[] {
   const legacySamples = [
-    { ...vpnOnboard1 } as ProjectBase<unknown>,
-    { ...vpnOnboard2 } as ProjectBase<unknown>,
-    { ...vpnOnboard3 } as ProjectBase<unknown>,
-    { ...vpnOnboard4 } as ProjectBase<unknown>,
-    { ...vpnOnboard5 } as ProjectBase<unknown>,
-    { ...vpnOnboard6 } as ProjectBase<unknown>,
+    {
+      ...vpnOnboard1,
+      appConfig: { ...defaultAppConfig, ...vpnOnboard1.appConfig },
+    } as ProjectBase<unknown>,
+    {
+      ...vpnOnboard2,
+      appConfig: { ...defaultAppConfig, ...vpnOnboard2.appConfig },
+    } as ProjectBase<unknown>,
+    {
+      ...vpnOnboard3,
+      appConfig: { ...defaultAppConfig, ...vpnOnboard3.appConfig },
+    } as ProjectBase<unknown>,
+    {
+      ...vpnOnboard4,
+      appConfig: { ...defaultAppConfig, ...vpnOnboard4.appConfig },
+    } as ProjectBase<unknown>,
+    {
+      ...vpnOnboard5,
+      appConfig: { ...defaultAppConfig, ...vpnOnboard5.appConfig },
+    } as ProjectBase<unknown>,
+    {
+      ...vpnOnboard6,
+      appConfig: { ...defaultAppConfig, ...vpnOnboard6.appConfig },
+    } as ProjectBase<unknown>,
   ];
   legacySamples.forEach((sample) => {
     sample.data = novaToJson(sample);
@@ -37,12 +56,30 @@ export function getBasicSamples(): Project[] {
 
 export function getOnboardSamples(): Project[] {
   const legacySamples = [
-    vpnOnboard1 as Project,
-    vpnOnboard2 as Project,
-    vpnOnboard3 as Project,
-    vpnOnboard4 as Project,
-    vpnOnboard5 as Project,
-    vpnOnboard6 as Project,
+    {
+      ...vpnOnboard1,
+      appConfig: { ...defaultAppConfig, ...vpnOnboard1.appConfig },
+    } as ProjectBase<unknown>,
+    {
+      ...vpnOnboard2,
+      appConfig: { ...defaultAppConfig, ...vpnOnboard2.appConfig },
+    } as ProjectBase<unknown>,
+    {
+      ...vpnOnboard3,
+      appConfig: { ...defaultAppConfig, ...vpnOnboard3.appConfig },
+    } as ProjectBase<unknown>,
+    {
+      ...vpnOnboard4,
+      appConfig: { ...defaultAppConfig, ...vpnOnboard4.appConfig },
+    } as ProjectBase<unknown>,
+    {
+      ...vpnOnboard5,
+      appConfig: { ...defaultAppConfig, ...vpnOnboard5.appConfig },
+    } as ProjectBase<unknown>,
+    {
+      ...vpnOnboard6,
+      appConfig: { ...defaultAppConfig, ...vpnOnboard6.appConfig },
+    } as ProjectBase<unknown>,
   ];
   legacySamples.forEach((sample) => {
     sample.data = novaToJson(sample);

package/src/assets/samples/simple-1.json

@@ -1,9 +1,8 @@
 {
   "name": "hello-world",
   "version": "1.0.0",
-  "previewConfig": {
+  "appConfig": {
     "theme": "light",
-    "screenSize": { "width": 375, "height": 812 },
     "isRtl": false,
     "screenStyle": {
       "light": { "backgroundColor": "#FDFDFD", "color": "#161827" },

package/src/assets/samples/simple-2.json

@@ -1,9 +1,8 @@
 {
   "name": "hello-world-2-advanced",
   "version": "1.0.0",
-  "previewConfig": {
+  "appConfig": {
     "theme": "light",
-    "screenSize": { "width": 390, "height": 844 },
     "isRtl": false,
     "screenStyle": {
       "light": { "backgroundColor": "#FDFDFD", "color": "#161827" },

package/src/assets/samples/vpn-onboard-1.json

@@ -1,9 +1,8 @@
 {
   "name": "vpn-onboard-1 (legacy)",
   "version": "0.0.0",
-  "previewConfig": {
+  "appConfig": {
     "theme": "dark",
-    "screenSize": { "width": 375, "height": 812 },
     "isRtl": false,
     "screenStyle": {
       "light": { "backgroundColor": "#FDFDFD", "color": "#161827" },

package/src/assets/samples/vpn-onboard-2.json

@@ -1,9 +1,8 @@
 {
   "name": "vpn-onboard-2 (legacy)",
   "version": "0.0.0",
-  "previewConfig": {
+  "appConfig": {
     "theme": "light",
-    "screenSize": { "width": 375, "height": 812 },
     "isRtl": false,
     "screenStyle": {
       "light": { "backgroundColor": "#FDFDFD", "color": "#161827" },

package/src/assets/samples/vpn-onboard-3.json

@@ -1,9 +1,8 @@
 {
   "name": "vpn-onboard-3 (legacy)",
   "version": "0.0.0",
-  "previewConfig": {
+  "appConfig": {
     "theme": "light",
-    "screenSize": { "width": 375, "height": 812 },
     "isRtl": false,
     "screenStyle": {
       "light": { "backgroundColor": "#FDFDFD", "color": "#161827" },

package/src/assets/samples/vpn-onboard-4.json

@@ -2,9 +2,8 @@
   "name": "vpn-onboard-4 (legacy)",
   "version": "0.0.0",
   "type": "nova",
-  "previewConfig": {
+  "appConfig": {
     "theme": "dark",
-    "screenSize": { "width": 375, "height": 812 },
     "isRtl": false,
     "screenStyle": {
       "light": { "backgroundColor": "#FDFDFD", "color": "#161827" },

package/src/assets/samples/vpn-onboard-5.json

@@ -2,9 +2,8 @@
   "name": "vpn-onboard-5 (legacy)",
   "version": "0.0.0",
   "type": "nova",
-  "previewConfig": {
+  "appConfig": {
     "theme": "light",
-    "screenSize": { "width": 375, "height": 812 },
     "isRtl": false,
     "screenStyle": {
       "light": { "backgroundColor": "#FDFDFD", "color": "#161827" },

package/src/assets/samples/vpn-onboard-6.json

@@ -2,9 +2,8 @@
   "name": "vpn-onboard-6 (legacy)",
   "version": "0.0.0",
   "type": "nova",
-  "previewConfig": {
+  "appConfig": {
     "theme": "dark",
-    "screenSize": { "width": 375, "height": 812 },
     "isRtl": false,
     "screenStyle": {
       "light": { "backgroundColor": "#FDFDFD", "color": "#161827" },