@developer_tribe/react-builder 1.0.4 → 1.0.6

package/src/components/LoadingComponent.tsx

@@ -0,0 +1,10 @@
+import Lottie from 'lottie-react';
+import loadingAnimation from '../assets/loading_animation.json';
+
+export function LoadingComponent() {
+  return (
+    <div className="rb-loading">
+      <Lottie animationData={loadingAnimation as any} loop autoplay />
+    </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/MobilePanelToggleButton.tsx

@@ -0,0 +1,39 @@
+export type MobilePanelToggleButtonProps = {
+  label: string;
+  isActive: boolean;
+  ariaLabel: string;
+  ariaControls: string;
+  onClick: () => void;
+};
+
+export function MobilePanelToggleButton({
+  label,
+  isActive,
+  ariaLabel,
+  ariaControls,
+  onClick,
+}: MobilePanelToggleButtonProps) {
+  return (
+    <button
+      type="button"
+      className={`mobile-panel-toggle__button${isActive ? ' mobile-panel-toggle__button--active' : ''}`}
+      aria-label={ariaLabel}
+      aria-expanded={isActive}
+      aria-controls={ariaControls}
+      onClick={onClick}
+    >
+      <span className="mobile-panel-toggle__icon" aria-hidden="true">
+        <svg viewBox="0 0 16 12" role="presentation" focusable="false">
+          <path
+            d="M1 1h14M1 6h14M1 11h14"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            fill="none"
+          />
+        </svg>
+      </span>
+      <span className="mobile-panel-toggle__label">{label}</span>
+    </button>
+  );
+}

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/useMinimumDelay.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Ensures a boolean becomes `true` only after a minimum delay.
+ * Resets to `false` whenever `deps` change.
+ *
+ * Common use-case: keep a loading indicator visible for at least N ms.
+ */
+export function useMinimumDelay(delayMs: number, deps: unknown[] = []) {
+  const [done, setDone] = useState<boolean>(false);
+
+  useEffect(() => {
+    setDone(false);
+    const timer = setTimeout(() => setDone(true), delayMs);
+    return () => clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [delayMs, ...deps]);
+
+  return done;
+}

package/src/hooks/useMobileEditorPanels.ts

@@ -0,0 +1,56 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export type MobileEditorPanel = 'builder' | 'attributes';
+
+export type UseMobileEditorPanelsOptions = {
+  breakpoint?: number;
+};
+
+export function useMobileEditorPanels(
+  options: UseMobileEditorPanelsOptions = {},
+) {
+  const { breakpoint = 1000 } = options;
+
+  const [mobilePanel, setMobilePanel] = useState<MobileEditorPanel | null>(
+    null,
+  );
+  const [isMobile, setIsMobile] = useState<boolean>(() => {
+    if (typeof window === 'undefined') return false;
+    return window.innerWidth <= breakpoint;
+  });
+
+  useEffect(() => {
+    function handleResize() {
+      setIsMobile(window.innerWidth <= breakpoint);
+    }
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [breakpoint]);
+
+  // Reset active panel when switching between mobile/desktop layouts
+  useEffect(() => {
+    setMobilePanel(null);
+  }, [isMobile]);
+
+  const toggleMobilePanel = useCallback((panel: MobileEditorPanel) => {
+    setMobilePanel((prev) => (prev === panel ? null : panel));
+  }, []);
+
+  const closeMobilePanels = useCallback(() => {
+    setMobilePanel(null);
+  }, []);
+
+  const leftPanelIsOpen = !isMobile || mobilePanel === 'builder';
+  const attributesPanelIsOpen = !isMobile || mobilePanel === 'attributes';
+
+  return {
+    isMobile,
+    mobilePanel,
+    toggleMobilePanel,
+    closeMobilePanels,
+    leftPanelIsOpen,
+    attributesPanelIsOpen,
+  };
+}

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/hooks/useSyncProjectPageStore.ts

@@ -0,0 +1,40 @@
+import { useEffect } from 'react';
+import type { AppConfig } from '../types/PreviewConfig';
+import type { ProjectColors } from '../types/Project';
+import { logger } from '../utils/logger';
+
+export type UseSyncProjectPageStoreArgs = {
+  appConfig: AppConfig;
+  name: string;
+  projectColors: ProjectColors | undefined;
+  setAppConfig: (appConfig: AppConfig) => void;
+  setProjectName: (name: string) => void;
+  setProjectColors: (colors: ProjectColors | undefined) => void;
+};
+
+/**
+ * Syncs ProjectPage props into the render store.
+ * Kept as a small hook to keep ProjectPage UI-focused.
+ */
+export function useSyncProjectPageStore({
+  appConfig,
+  name,
+  projectColors,
+  setAppConfig,
+  setProjectName,
+  setProjectColors,
+}: UseSyncProjectPageStoreArgs) {
+  useEffect(() => {
+    setAppConfig(appConfig);
+    logger.verbose('ProjectPage', 'appConfig applied', appConfig);
+  }, [appConfig, setAppConfig]);
+
+  useEffect(() => {
+    setProjectName(name);
+  }, [name, setProjectName]);
+
+  useEffect(() => {
+    setProjectColors(projectColors);
+    return () => setProjectColors(undefined);
+  }, [projectColors, setProjectColors]);
+}

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,12 +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;
 }
 
@@ -86,28 +91,18 @@ 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');
   }
-
+  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]);
-
   useEffect(() => {
     incForceRender();
   }, [currentRoute, incForceRender]);

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,
@@ -154,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';

package/src/modals/AddComponentModal.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import Modal from './Modal';
 import { getPatternByType } from '../utils/patterns';
+//TODO: filtreleme kısmları karıştığı için snapshot testi ekle
 
 type AddComponentModalProps = {
   allowedChildTypes: string[];