@developer_tribe/react-builder 1.0.3 → 1.0.5

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ParamsProvider, type LocalizationParams } from './ParamsProvider';
+
+/**
+ * Backward-compatible wrapper.
+ * Prefer `ParamsProvider` instead.
+ */
+export type LocalizationParamsProviderProps = {
+  params: LocalizationParams;
+  children: React.ReactNode;
+};
+
+export function LocalizationParamsProvider({
+  params,
+  children,
+}: LocalizationParamsProviderProps) {
+  return (
+    <ParamsProvider localizationParams={params} otherParams={{}}>
+      {children}
+    </ParamsProvider>
+  );
+}

package/src/components/ParamsProvider.tsx

@@ -0,0 +1,38 @@
+import React, { createContext, useMemo } from 'react';
+
+export type LocalizationParams = Record<string, string>;
+export type OtherParams = Record<string, string | boolean | number>;
+
+export type ParamsContextValue = {
+  localizationParams: LocalizationParams;
+  otherParams: OtherParams;
+};
+
+export type ParamsProviderProps = {
+  localizationParams?: LocalizationParams;
+  otherParams?: OtherParams;
+  children: React.ReactNode;
+};
+
+export const ParamsContext = createContext<ParamsContextValue>({
+  localizationParams: {},
+  otherParams: {},
+});
+
+export function ParamsProvider({
+  localizationParams,
+  otherParams,
+  children,
+}: ParamsProviderProps) {
+  const value = useMemo<ParamsContextValue>(
+    () => ({
+      localizationParams: localizationParams ?? {},
+      otherParams: otherParams ?? {},
+    }),
+    [localizationParams, otherParams],
+  );
+
+  return (
+    <ParamsContext.Provider value={value}>{children}</ParamsContext.Provider>
+  );
+}

package/src/hooks/useLocalizationParams.ts

@@ -0,0 +1,5 @@
+import { useParams } from './useParams';
+
+export function useLocalizationParams() {
+  return useParams().localizationParams ?? {};
+}

package/src/hooks/useLocalize.ts

@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+import { useRenderStore } from '../store';
+import { useLocalizationParams } from './useLocalizationParams';
+import { replaceLocalizationParams } from '../utils/replaceLocalizationParams';
+
+export type LocalizeFn = (keyOrText: string) => string;
+
+export function useLocalize(): LocalizeFn {
+  const { defaultLanguage, localication } = useRenderStore((s) => ({
+    defaultLanguage: s.appConfig?.defaultLanguage,
+    localication: s.appConfig?.localication,
+  }));
+  const params = useLocalizationParams();
+
+  return useCallback(
+    (keyOrText: string) => {
+      const raw =
+        localication?.[defaultLanguage ?? 'en']?.[keyOrText] ?? keyOrText;
+      return replaceLocalizationParams(raw, params);
+    },
+    [defaultLanguage, localication, params],
+  );
+}

package/src/hooks/useParams.ts

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { ParamsContext } from '../components/ParamsProvider';
+
+export function useParams() {
+  return (
+    useContext(ParamsContext) ?? { localizationParams: {}, otherParams: {} }
+  );
+}

package/src/hooks/useSafeAreaViewStyle.ts

@@ -0,0 +1,67 @@
+import { useMemo } from 'react';
+import { useRenderStore } from '../store';
+
+function addInset(
+  base: React.CSSProperties['paddingTop'],
+  insetPx: number,
+): React.CSSProperties['paddingTop'] {
+  if (!insetPx) return base;
+  if (base === undefined) return insetPx;
+  if (typeof base === 'number') return base + insetPx;
+  if (typeof base === 'string' && base.trim())
+    return `calc(${base.trim()} + ${insetPx}px)`;
+  return insetPx;
+}
+
+function subtractInset(
+  base: React.CSSProperties['width'],
+  insetPx: number,
+): React.CSSProperties['width'] {
+  if (!insetPx) return base;
+  if (base === undefined) return `calc(100% - ${insetPx}px)`;
+  if (typeof base === 'number') return Math.max(0, base - insetPx);
+  if (typeof base === 'string' && base.trim())
+    return `calc(${base.trim()} - ${insetPx}px)`;
+  return `calc(100% - ${insetPx}px)`;
+}
+
+export function useSafeAreaViewStyle(
+  baseStyle: React.CSSProperties,
+  enabled: boolean,
+) {
+  const device = useRenderStore((s) => s.device);
+
+  return useMemo(() => {
+    if (!enabled) return baseStyle;
+
+    const [insetTop, insetRight, insetBottom, insetLeft] = device.insets ?? [
+      0, 0, 0, 0,
+    ];
+
+    // Match DeviceMockFrame fallbacks: status bar overlays content, so we treat it as top safe area.
+    const top =
+      insetTop || (device.platform === 'ios' ? 20 : device.platform ? 24 : 0);
+
+    // Bottom safe area is handled visually by the mock navigation bar area, which takes layout space.
+    // So we intentionally don't add bottom padding here to avoid double-spacing.
+    const right = insetRight ?? 0;
+    const left = insetLeft ?? 0;
+    const bottom = 0;
+
+    const horizontal = left + right;
+    const vertical = top + bottom;
+
+    return {
+      ...baseStyle,
+      // Use margins to "push" the view into the safe area (instead of shrinking content via padding).
+      // Since in this project these wrappers are typically full-size (100% x 100%),
+      // we also subtract the insets from width/height to avoid overflow.
+      marginTop: addInset(baseStyle.marginTop, top),
+      marginRight: addInset(baseStyle.marginRight, right),
+      marginBottom: addInset(baseStyle.marginBottom, bottom),
+      marginLeft: addInset(baseStyle.marginLeft, left),
+      width: subtractInset(baseStyle.width ?? '100%', horizontal),
+      height: subtractInset(baseStyle.height ?? '100%', vertical),
+    };
+  }, [enabled, baseStyle, device]);
+}

package/src/index.native.ts

@@ -0,0 +1,75 @@
+/**
+ * React Native-safe entrypoint.
+ *
+ * IMPORTANT:
+ * - No SCSS imports
+ * - No `react-dom` imports
+ * - No web-only modules that touch `window`/`document`/`localStorage`
+ *
+ * This file is meant to be used via the package `react-native` entry (Metro)
+ * or explicit `@developer_tribe/react-builder/native` style imports.
+ */
+
+// Types
+export type { TargetedScreenSize } from './types/TargetedScreenSize';
+export type { Node, NodeData, NodeDefaultAttribute } from './types/Node';
+export type { Project, ProjectColors } from './types/Project';
+export type { Device } from './types/Device';
+export type { AppConfig, Localication } from './types/PreviewConfig';
+export { defaultAppConfig } from './types/PreviewConfig';
+export type {
+  PaywallBenefitValue,
+  PaywallBenefits,
+  Product as PaywallProduct,
+  PaywallModel,
+} from './paywall/types/paywall-types';
+
+// Paywall hooks (RN-safe placeholders)
+export {
+  usePaywallCounter,
+  useCloseStatusPaywall,
+  useCarouselOptionsSeperator,
+  useCalculateLocalizedPrice,
+  useDiscountRate,
+} from './paywall/hooks';
+
+// Context (RN-safe). In React Native, `products` should come from an IAP wrapper
+// (e.g. `react-native-iap`) and be passed into `BuilderProvider` by the host app.
+export {
+  BuilderProvider,
+  useBuilderParams,
+} from './components/BuilderProvider';
+export { ParamsProvider } from './components/ParamsProvider';
+export { LocalizationParamsProvider } from './components/LocalizationParamsProvider';
+export { useParams } from './hooks/useParams';
+export { useLocalizationParams } from './hooks/useLocalizationParams';
+export { useLocalize } from './hooks/useLocalize';
+
+// Pure utilities (RN-safe)
+export {
+  isNodeNullOrUndefined,
+  isNodeString,
+  isNodeArray,
+  isEmptyObject,
+  analyseNode,
+  analyseAndProccess,
+} from './utils/analyseNode';
+export { novaToJson } from './utils/novaToJson';
+export { getDevices, getDefaultDevice } from './utils/getDevices';
+export { querySelector } from './utils/querySelector';
+export {
+  getPatternByType,
+  getAttributeSchema,
+  getAttributeMeta,
+  getDefaultsForType,
+  getTypeSchema,
+  isPrimitiveType,
+  getArrayItemType,
+} from './utils/patterns';
+
+// Static sample data helpers (RN-safe)
+export {
+  getSamples,
+  getBasicSamples,
+  getOnboardSamples,
+} from './assets/samples/getSamples';

package/src/index.ts

@@ -1,5 +1,16 @@
 import './styles/index.scss';
 import AttributesEditor from './AttributesEditor';
+// NOTE: In React Native, `products` should be sourced from an IAP wrapper (e.g. `react-native-iap`)
+// and passed into `BuilderProvider` from the host app.
+export {
+  BuilderProvider,
+  useBuilderParams,
+} from './components/BuilderProvider';
+export { ParamsProvider } from './components/ParamsProvider';
+export { LocalizationParamsProvider } from './components/LocalizationParamsProvider';
+export { useParams } from './hooks/useParams';
+export { useLocalizationParams } from './hooks/useLocalizationParams';
+export { useLocalize } from './hooks/useLocalize';
 
 export type { TargetedScreenSize } from './types/TargetedScreenSize';
 export type { Node, NodeData, NodeDefaultAttribute } from './types/Node';
@@ -32,3 +43,18 @@ export type { ProjectPageProps } from './pages/ProjectPage';
 export { copyNode } from './utils/copyNode';
 export { logger } from './utils/logger';
 export type { LogLevel } from './types/Project';
+export type {
+  PaywallBenefitValue,
+  PaywallBenefits,
+  Product as PaywallProduct,
+  PaywallModel,
+} from './paywall/types/paywall-types';
+
+// Paywall hooks
+export {
+  usePaywallCounter,
+  useCloseStatusPaywall,
+  useCarouselOptionsSeperator,
+  useCalculateLocalizedPrice,
+  useDiscountRate,
+} from './paywall/hooks';

package/src/mockOS/components/MockOSRouter.tsx

@@ -1,11 +1,17 @@
 import React, { ReactNode, useCallback, useEffect } from 'react';
-import { useMockOSContext } from '../context/MockOSContext';
+import { useMockOSContext } from '../context/MockOSContextBase';
 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 {
   children?: ReactNode;
-  childrenBelongTo?: 'launchscreen' | 'home' | 'onboard' | 'subscription';
+  childrenBelongTo?:
+    | 'launchscreen'
+    | 'app'
+    | 'home'
+    | 'onboard'
+    | 'subscription';
   appName?: string;
 }
 
@@ -85,26 +91,21 @@ export function MockOSRouter({
   appName = 'My App',
 }: MockOSRouterProps) {
   const context = useMockOSContext();
-
   if (!context) {
     throw new Error('MockOSRouter must be used within MockOSProvider');
   }
-
+  const incForceRender = useRenderStore((s) => s.incForceRender);
   const { currentRoute, navigation } = context;
 
   const handleLaunchApp = useCallback(() => {
     // Navigate to the route specified in childrenBelongTo or default to 'onboard'
-    const targetRoute = childrenBelongTo || 'onboard';
+    const targetRoute = childrenBelongTo || 'app';
     navigation(targetRoute);
   }, [childrenBelongTo, navigation]);
 
   useEffect(() => {
-    const timer = setTimeout(() => {
-      handleLaunchApp();
-    }, 1000);
-
-    return () => clearTimeout(timer);
-  }, [handleLaunchApp]);
+    incForceRender();
+  }, [currentRoute, incForceRender]);
 
   return (
     <div className="mockos-router">

package/src/mockOS/context/MockOSContext.tsx

@@ -1,40 +1,20 @@
-import React, {
-  createContext,
-  useContext,
-  ReactNode,
-  useState,
-  useCallback,
-} from 'react';
+import React, { ReactNode, useState, useCallback } from 'react';
 import type { PermissionType } from '../managers/mockPermissionManager';
 import { PermissionModal } from '../components/PermissionModal';
 import { MockOSRouter } from '../components/MockOSRouter';
 import { DeviceStatusBar } from '../../components/DeviceStatusBar';
 import { DeviceNavigationBar } from '../../components/DeviceNavigationBar';
 import type { Device } from '../../types/Device';
+import {
+  MockOSContext,
+  type MockOSContextValue,
+  type RouteStackItem,
+  type RouteType,
+  useMockOSContext,
+} from './MockOSContextBase';
 
-export type RouteType = 'launchscreen' | 'home' | 'onboard' | 'subscription';
-
-export interface RouteStackItem {
-  route: RouteType;
-  timestamp: number;
-}
-
-export interface MockOSContextValue {
-  isEnabled: boolean;
-  permission: PermissionType | string | null;
-  setPermission: (permission: PermissionType | string | null) => void;
-  // Router
-  currentRoute: RouteType;
-  navigation: (route: RouteType) => void;
-  goBack: () => boolean;
-  navigationStack: RouteStackItem[];
-}
-
-const MockOSContext = createContext<MockOSContextValue | null>(null);
-
-export const useMockOSContext = () => {
-  return useContext(MockOSContext);
-};
+export type { RouteType, RouteStackItem, MockOSContextValue };
+export { useMockOSContext };
 
 interface MockOSProviderProps {
   children: ReactNode;
@@ -58,7 +38,7 @@ interface MockOSProviderProps {
 
 export function MockOSProvider({
   children,
-  defaultRoute = 'launchscreen',
+  defaultRoute = 'app',
   appName,
   statusBarHeight,
   statusBarBackgroundColor,
@@ -69,8 +49,6 @@ export function MockOSProvider({
   navBarPlatform,
   navBarNavigationBarType,
   navBarIsDark,
-  insetLeft,
-  insetRight,
 }: MockOSProviderProps) {
   const [permission, setPermission] = useState<PermissionType | string | null>(
     null,
@@ -81,7 +59,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 +86,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 +104,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);
   };
 
@@ -159,11 +132,9 @@ export function MockOSProvider({
           flex: 1,
           overflow: 'hidden',
           position: 'relative',
-          paddingLeft: insetLeft,
-          paddingRight: insetRight,
         }}
       >
-        <MockOSRouter childrenBelongTo="onboard" appName={appName}>
+        <MockOSRouter childrenBelongTo="app" appName={appName}>
           {children}
         </MockOSRouter>
       </div>

package/src/mockOS/context/MockOSContextBase.ts

@@ -0,0 +1,35 @@
+import { createContext, useContext } from 'react';
+import type { PermissionType } from '../managers/mockPermissionManager';
+
+export type RouteType =
+  | 'launchscreen'
+  | 'app'
+  | 'home'
+  | 'onboard'
+  | 'subscription';
+
+export interface RouteStackItem {
+  route: RouteType;
+  timestamp: number;
+}
+
+export interface MockOSContextValue {
+  isEnabled: boolean;
+  permission: PermissionType | string | null;
+  setPermission: (permission: PermissionType | string | null) => void;
+  // Router
+  currentRoute: RouteType;
+  navigation: (route: RouteType) => void;
+  goBack: () => boolean;
+  navigationStack: RouteStackItem[];
+}
+
+/**
+ * Keep this module "pure" (no imports from mockOS/components or app components),
+ * so consumers can import `useMockOSContext` without creating circular deps in bundlers.
+ */
+export const MockOSContext = createContext<MockOSContextValue | null>(null);
+
+export const useMockOSContext = () => {
+  return useContext(MockOSContext);
+};

package/src/mockOS/index.ts

@@ -1,10 +1,11 @@
 // Context
-export { MockOSProvider, useMockOSContext } from './context/MockOSContext';
+export { MockOSProvider } from './context/MockOSContext';
+export { useMockOSContext } from './context/MockOSContextBase';
 export type {
   MockOSContextValue,
   RouteType,
   RouteStackItem,
-} from './context/MockOSContext';
+} from './context/MockOSContextBase';
 
 // Components
 export { MockOSRouter } from './components/MockOSRouter';