@developer_tribe/react-builder 1.0.4 → 1.0.5

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,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[];

package/src/modals/BenefitEditModal.tsx

@@ -0,0 +1,160 @@
+import React, { useMemo, useState } from 'react';
+import Modal from './Modal';
+import type { PaywallBenefitValue } from '../paywall/types/benefits';
+
+type ValueKind = 'string' | 'number' | 'boolean';
+
+type BenefitEditModalProps = {
+  benefitKey: string;
+  benefitValue: PaywallBenefitValue;
+  index: number;
+  onSave: (next: { key: string; value: PaywallBenefitValue }) => void;
+  onClose: () => void;
+};
+
+function detectKind(value: PaywallBenefitValue): ValueKind {
+  if (typeof value === 'number') return 'number';
+  if (typeof value === 'boolean') return 'boolean';
+  return 'string';
+}
+
+function parseValue(
+  kind: ValueKind,
+  raw: string,
+  fallback: PaywallBenefitValue,
+) {
+  if (kind === 'boolean') return raw === 'true';
+  if (kind === 'number') {
+    const trimmed = raw.trim();
+    if (!trimmed) return fallback;
+    const normalized = trimmed.replace(',', '.');
+    const parsed = Number.parseFloat(normalized);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return raw;
+}
+
+export function BenefitEditModal({
+  benefitKey,
+  benefitValue,
+  index,
+  onSave,
+  onClose,
+}: BenefitEditModalProps) {
+  const initial = useMemo(() => {
+    const key = (benefitKey ?? '').toString();
+    const kind = detectKind(benefitValue);
+    const raw =
+      kind === 'boolean'
+        ? benefitValue
+          ? 'true'
+          : 'false'
+        : kind === 'number'
+          ? `${benefitValue ?? ''}`
+          : (benefitValue ?? '').toString();
+    return { key, kind, raw };
+  }, [benefitKey, benefitValue]);
+
+  const [draft, setDraft] = useState(initial);
+  const canSave = draft.key.trim().length > 0;
+
+  return (
+    <Modal
+      onClose={onClose}
+      ariaLabelledBy="benefit-edit-modal-title"
+      contentClassName="benefit-edit-modal"
+    >
+      <div className="modal__header">
+        <h3 id="benefit-edit-modal-title" className="modal__title">
+          Edit benefit #{index + 1}
+        </h3>
+        <button type="button" className="editor-button" onClick={onClose}>
+          Close
+        </button>
+      </div>
+
+      <div className="benefit-edit-modal__body">
+        <div className="form-row">
+          <label htmlFor="benefitKey">key</label>
+          <input
+            id="benefitKey"
+            className="input"
+            value={draft.key}
+            onChange={(e) =>
+              setDraft((prev) => ({ ...prev, key: e.target.value }))
+            }
+            placeholder="unlimited_access"
+          />
+        </div>
+
+        <div className="form-row">
+          <label htmlFor="benefitType">type</label>
+          <select
+            id="benefitType"
+            className="input"
+            value={draft.kind}
+            onChange={(e) =>
+              setDraft((prev) => ({
+                ...prev,
+                kind: e.target.value as ValueKind,
+              }))
+            }
+          >
+            <option value="string">string</option>
+            <option value="number">number</option>
+            <option value="boolean">boolean</option>
+          </select>
+        </div>
+
+        <div className="form-row">
+          <label htmlFor="benefitValue">value</label>
+          {draft.kind === 'boolean' ? (
+            <select
+              id="benefitValue"
+              className="input"
+              value={draft.raw}
+              onChange={(e) =>
+                setDraft((prev) => ({ ...prev, raw: e.target.value }))
+              }
+            >
+              <option value="true">true</option>
+              <option value="false">false</option>
+            </select>
+          ) : (
+            <input
+              id="benefitValue"
+              className="input"
+              value={draft.raw}
+              onChange={(e) =>
+                setDraft((prev) => ({ ...prev, raw: e.target.value }))
+              }
+              placeholder={draft.kind === 'number' ? '7' : 'Unlock everything'}
+            />
+          )}
+        </div>
+
+        <div className="form-actions">
+          <button
+            type="button"
+            className="editor-button"
+            onClick={() =>
+              onSave({
+                key: draft.key,
+                value: parseValue(draft.kind, draft.raw, benefitValue),
+              })
+            }
+            disabled={!canSave}
+            title={canSave ? 'Save' : 'key is required'}
+          >
+            Save
+          </button>
+          <button type="button" className="editor-button" onClick={onClose}>
+            Cancel
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+export default BenefitEditModal;