@developer_tribe/react-builder 1.2.26 → 1.2.28

package/src/components/BottomBar.tsx

@@ -3,7 +3,7 @@ import { Icon } from './Icon.generated';
 import type { IconsType } from '../types/Icons';
 import { useRenderStore } from '../store';
 import type { Localication } from '../types/PreviewConfig';
-import { LocalicationModal, Modal, ScreenColorsModal } from '../modals';
+import { InspectModal, LocalicationModal, Modal } from '../modals';
 import type { Node } from '../types/Node';
 import type { Project } from '../types/Project';
 import { DebugJsonPage } from '../pages/DebugJsonPage';
@@ -28,29 +28,45 @@ export function BottomBar({
   const magicCursorIcon: IconsType = 'magicpen';
   const debugIcon: IconsType = 'speedometer-03';
   const localizationIcon: IconsType = 'globe-01';
-  const colorIcon: IconsType = 'colors';
-
-  const { appConfig, setAppConfig, previewMode, setPreviewMode } =
-    useRenderStore((s) => ({
-      appConfig: s.appConfig,
-      setAppConfig: s.setAppConfig,
-      previewMode: s.previewMode,
-      setPreviewMode: s.setPreviewMode,
-    }));
+  const inspectIcon: IconsType = 'info-circle';
+
+  const {
+    appConfig,
+    setAppConfig,
+    theme,
+    setTheme,
+    defaultLanguage,
+    setDefaultLanguage,
+    previewMode,
+    setPreviewMode,
+    isRtl,
+    setIsRtl,
+  } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
+    setAppConfig: s.setAppConfig,
+    theme: s.theme,
+    setTheme: s.setTheme,
+    defaultLanguage: s.defaultLanguage,
+    setDefaultLanguage: s.setDefaultLanguage,
+    previewMode: s.previewMode,
+    setPreviewMode: s.setPreviewMode,
+    isRtl: s.isRtl,
+    setIsRtl: s.setIsRtl,
+  }));
 
   const [isDebugOpen, setIsDebugOpen] = useState(false);
   const [isLocalizationOpen, setIsLocalizationOpen] = useState(false);
-  const [isColorsOpen, setIsColorsOpen] = useState(false);
+  const [isInspectOpen, setIsInspectOpen] = useState(false);
 
   const languages = useMemo(() => ['en', 'tr', 'ar'], []);
-  const activeLanguage = appConfig.defaultLanguage ?? 'en';
+  const activeLanguage = defaultLanguage;
 
   const handleLocalicationChange = (next: Localication) => {
     setAppConfig({ ...appConfig, localication: next });
   };
 
-  const themeIsActive = appConfig.theme === 'dark';
-  const rtlIsActive = appConfig.isRtl ?? false;
+  const themeIsActive = theme === 'dark';
+  const rtlIsActive = isRtl;
   const previewIsActive = previewMode;
   const themeIcon: IconsType = themeIsActive ? 'moon-bold' : 'sun';
 
@@ -62,12 +78,7 @@ export function BottomBar({
           className={`rb-bottom-bar__button${themeIsActive ? ' is-active' : ''}`}
           aria-label="Theme"
           aria-pressed={themeIsActive}
-          onClick={() =>
-            setAppConfig({
-              ...appConfig,
-              theme: appConfig.theme === 'dark' ? 'light' : 'dark',
-            })
-          }
+          onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
         >
           <Icon iconType={themeIcon} size={20} color="currentColor" alt="" />
         </button>
@@ -79,9 +90,7 @@ export function BottomBar({
           }`}
           aria-label="RTL"
           aria-pressed={rtlIsActive}
-          onClick={() =>
-            setAppConfig({ ...appConfig, isRtl: !(appConfig.isRtl ?? false) })
-          }
+          onClick={() => setIsRtl(!isRtl)}
         >
           <Icon iconType={rtlIcon} size={18} color="currentColor" alt="" />
           <span className="rb-bottom-bar__rtl-text">RTL</span>
@@ -133,12 +142,12 @@ export function BottomBar({
 
         <button
           type="button"
-          className={`rb-bottom-bar__button${isColorsOpen ? ' is-active' : ''}`}
-          aria-label="Color"
-          aria-pressed={isColorsOpen}
-          onClick={() => setIsColorsOpen(true)}
+          className={`rb-bottom-bar__button${isInspectOpen ? ' is-active' : ''}`}
+          aria-label="Inspect"
+          aria-pressed={isInspectOpen}
+          onClick={() => setIsInspectOpen(true)}
         >
-          <Icon iconType={colorIcon} size={20} color="currentColor" alt="" />
+          <Icon iconType={inspectIcon} size={20} color="currentColor" alt="" />
         </button>
 
         <div className="rb-bottom-bar__spacer" />
@@ -151,9 +160,7 @@ export function BottomBar({
               className={`rb-bottom-bar__lang${
                 activeLanguage === language ? ' is-active' : ''
               }`}
-              onClick={() =>
-                setAppConfig({ ...appConfig, defaultLanguage: language })
-              }
+              onClick={() => setDefaultLanguage(language)}
             >
               {language}
             </button>
@@ -169,14 +176,6 @@ export function BottomBar({
         />
       )}
 
-      {isColorsOpen && (
-        <ScreenColorsModal
-          appConfig={appConfig}
-          onChange={setAppConfig}
-          onClose={() => setIsColorsOpen(false)}
-        />
-      )}
-
       {isDebugOpen && (
         <Modal
           onClose={() => setIsDebugOpen(false)}
@@ -198,6 +197,10 @@ export function BottomBar({
           />
         </Modal>
       )}
+
+      {isInspectOpen && (
+        <InspectModal onClose={() => setIsInspectOpen(false)} />
+      )}
     </>
   );
 }

package/src/components/BuilderProvider.tsx

@@ -1,7 +1,13 @@
 import React, { createContext, useContext, useMemo } from 'react';
 import type { Product } from '../paywall/types/paywall-types';
 import type { PaywallBenefits } from '../paywall/types/benefits';
-import type { AppConfig } from '../types/PreviewConfig';
+import {
+  type AppConfig,
+  type Theme,
+  defaultLocalization,
+  defaultTheme,
+  mergeLocalization,
+} from '../types/PreviewConfig';
 import type { Fonts } from '../types/Fonts';
 import type { ProjectColors } from '../types/Project';
 import { defaultProjectColors, mergeProjectColors } from '../utils';
@@ -9,13 +15,12 @@ import { defaultProjectColors, mergeProjectColors } from '../utils';
 // NOTE: We keep this context intentionally tiny.
 // IMPORTANT: This provider may be mounted once but consumed by multiple `build-components`
 // on the same screen. Keep the value minimal + stable to avoid unnecessary rerenders.
-// In React Native, `products` should be sourced from an IAP wrapper (e.g. `react-native-iap`)
-// and passed in via `params` from the host app.
+// In React Native, pass real IAP products here; in the web builder they come from mock presets.
 export type Products = Product;
 
 export type BuilderProviderParams = {
-  products: Products[];
-  benefits: PaywallBenefits;
+  mockProducts: Products[];
+  mockBenefits: PaywallBenefits;
   /**
    * Render platform for style extraction + meta filtering.
    * - 'web' (default): returns CSS-friendly styles for DOM rendering.
@@ -28,6 +33,8 @@ export type BuilderProviderParams = {
    * These are intentionally passed down via BuilderProvider so `build-components`
    * never need to touch `useRenderStore`.
    */
+  theme?: Theme;
+  defaultLanguage?: string;
   appConfig?: AppConfig;
   projectColors?: ProjectColors;
   fonts?: Fonts;
@@ -51,18 +58,34 @@ const builderContext = createContext<BuilderProviderParams | undefined>(
 export function BuilderProvider({ params, children }: BuilderProviderProps) {
   const value = useMemo<BuilderProviderParams>(
     () => ({
-      products: Array.isArray(params?.products) ? params.products : [],
-      benefits:
-        params?.benefits && typeof params.benefits === 'object'
-          ? (params.benefits as PaywallBenefits)
+      mockProducts: Array.isArray(params?.mockProducts)
+        ? params.mockProducts
+        : [],
+      mockBenefits:
+        params?.mockBenefits && typeof params.mockBenefits === 'object'
+          ? (params.mockBenefits as PaywallBenefits)
           : {},
       onPaywallSubscribe:
         typeof params?.onPaywallSubscribe === 'function'
           ? params.onPaywallSubscribe
           : undefined,
+      theme:
+        params?.theme === 'light' || params?.theme === 'dark'
+          ? params.theme
+          : defaultTheme,
+      defaultLanguage:
+        typeof params?.defaultLanguage === 'string'
+          ? params.defaultLanguage
+          : 'en',
       appConfig:
         params?.appConfig && typeof params.appConfig === 'object'
-          ? (params.appConfig as AppConfig)
+          ? {
+              ...(params.appConfig as AppConfig),
+              localication: mergeLocalization(
+                defaultLocalization,
+                (params.appConfig as AppConfig).localication ?? {},
+              ),
+            }
           : undefined,
       projectColors:
         params?.projectColors && typeof params.projectColors === 'object'
@@ -78,10 +101,12 @@ export function BuilderProvider({ params, children }: BuilderProviderProps) {
           : undefined,
     }),
     [
-      params?.benefits,
-      params?.products,
+      params?.mockBenefits,
+      params?.mockProducts,
       params?.platform,
       params?.onPaywallSubscribe,
+      params?.theme,
+      params?.defaultLanguage,
       params?.appConfig,
       params?.projectColors,
       params?.fonts,
@@ -99,9 +124,11 @@ export function BuilderProvider({ params, children }: BuilderProviderProps) {
 export function useBuilderParams(): Readonly<BuilderProviderParams> {
   return (
     useContext(builderContext) ?? {
-      products: [],
-      benefits: {},
+      mockProducts: [],
+      mockBenefits: {},
       platform: 'web',
+      theme: defaultTheme,
+      defaultLanguage: 'en',
       projectColors: defaultProjectColors,
     }
   );

package/src/components/LocalizationParamsProvider.tsx

@@ -15,7 +15,7 @@ export function LocalizationParamsProvider({
   children,
 }: LocalizationParamsProviderProps) {
   return (
-    <ParamsProvider localizationParams={params} otherParams={{}}>
+    <ParamsProvider localizationParams={params} nestedLocalizationParams={{}}>
       {children}
     </ParamsProvider>
   );

package/src/components/ParamsProvider.tsx

@@ -1,44 +1,69 @@
-import React, { createContext, useMemo } from 'react';
+import React, { createContext, useEffect, useMemo } from 'react';
+import type { ProductParams, SingleProductParams } from '../product-base/types';
 
-export type LocalizationParams = Record<string, string>;
-export type OtherParams = Record<string, string | boolean | number>;
+/** Provider-level params not tied to a single product. */
+export type ContextLocalizationParams = {
+  platform?: string;
+  [key: `benefit${number}`]: string | undefined;
+};
+
+export type LocalizationParams = Partial<ProductParams> &
+  ContextLocalizationParams;
+export type NestedLocalizationParams = Partial<SingleProductParams>;
+
+export type OtherParams = {
+  singleProductIsSelected?: boolean;
+};
 
 export type ParamsContextValue = {
   localizationParams: LocalizationParams;
+  nestedLocalizationParams: NestedLocalizationParams;
   otherParams: OtherParams;
-  /**
-   * `true` when the value comes from an actual `<ParamsProvider />` in the tree.
-   * Used to detect nesting vs the default context value.
-   */
-  isProvided: boolean;
 };
 
 export type ParamsProviderProps = {
   localizationParams?: LocalizationParams;
+  nestedLocalizationParams?: NestedLocalizationParams;
   otherParams?: OtherParams;
   children: React.ReactNode;
 };
 
 export const ParamsContext = createContext<ParamsContextValue>({
   localizationParams: {},
+  nestedLocalizationParams: {},
   otherParams: {},
-  isProvided: false,
 });
 
+let _lastParamsSnapshot: ParamsContextValue = {
+  localizationParams: {},
+  nestedLocalizationParams: {},
+  otherParams: {},
+};
+
+/** Read-only snapshot of the most recent ParamsProvider value (for debug UIs rendered outside the context tree). */
+export function getLastParamsSnapshot(): Readonly<ParamsContextValue> {
+  return _lastParamsSnapshot;
+}
+
 export function ParamsProvider({
   localizationParams,
+  nestedLocalizationParams,
   otherParams,
   children,
 }: ParamsProviderProps) {
   const value = useMemo<ParamsContextValue>(
     () => ({
       localizationParams: localizationParams ?? {},
+      nestedLocalizationParams: nestedLocalizationParams ?? {},
       otherParams: otherParams ?? {},
-      isProvided: true,
     }),
-    [localizationParams, otherParams],
+    [localizationParams, nestedLocalizationParams, otherParams],
   );
 
+  useEffect(() => {
+    _lastParamsSnapshot = value;
+  }, [value]);
+
   return (
     <ParamsContext.Provider value={value}>{children}</ParamsContext.Provider>
   );

package/src/hooks/useLocalize.ts

@@ -8,15 +8,18 @@ import { replaceLocalizationParams } from '../utils/replaceLocalizationParams';
 export type LocalizeFn = (keyOrText: string) => string;
 
 export function useLocalize(options?: { appConfig?: AppConfig }): LocalizeFn {
-  const { appConfig: builderAppConfig } = useBuilderParams();
+  const {
+    appConfig: builderAppConfig,
+    defaultLanguage: builderDefaultLanguage,
+  } = useBuilderParams();
   const appConfig = options?.appConfig ?? builderAppConfig ?? defaultAppConfig;
-  const { defaultLanguage, localication } = appConfig;
+  const defaultLanguage = builderDefaultLanguage ?? 'en';
+  const { localication } = appConfig;
   const params = useLocalizationParams();
 
   return useCallback(
     (keyOrText: string) => {
-      const raw =
-        localication?.[defaultLanguage ?? 'en']?.[keyOrText] ?? keyOrText;
+      const raw = localication?.[defaultLanguage]?.[keyOrText] ?? keyOrText;
       return replaceLocalizationParams(raw, params);
     },
     [defaultLanguage, localication, params],

package/src/hooks/useParams.ts

@@ -5,8 +5,8 @@ export function useParams() {
   return (
     useContext(ParamsContext) ?? {
       localizationParams: {},
+      nestedLocalizationParams: {},
       otherParams: {},
-      isProvided: false,
     }
   );
 }

package/src/hooks/useSyncHtmlThemeClass.ts

@@ -2,13 +2,13 @@ import { useEffect } from 'react';
 import { useRenderStore } from '../store';
 
 /**
- * Syncs the builder's `appConfig.theme` to the DOM so CSS can react to `.dark`.
+ * Syncs the builder's `theme` to the DOM so CSS can react to `.dark`.
  *
  * - Uses `html.dark` as the toggle (shadcn/tailwind convention).
  * - Also toggles `html.light` so system dark can be overridden back to light.
  */
 export function useSyncHtmlThemeClass() {
-  const theme = useRenderStore((s) => s.appConfig.theme);
+  const theme = useRenderStore((s) => s.theme);
 
   useEffect(() => {
     if (typeof document === 'undefined') return;

package/src/index.ts

@@ -15,8 +15,18 @@ export type { TargetedScreenSize } from './types/TargetedScreenSize';
 export type { Node, NodeData, NodeDefaultAttribute } from './types/Node';
 export type { Project, ProjectColors, ProjectMeta } from './types/Project';
 export type { Device } from './types/Device';
-export type { AppConfig, Localication } from './types/PreviewConfig';
-export { defaultAppConfig } from './types/PreviewConfig';
+export type {
+  AppConfig,
+  Theme,
+  Localication,
+  LocalizationKey,
+} from './types/PreviewConfig';
+export {
+  defaultAppConfig,
+  defaultTheme,
+  defaultLocalization,
+  mergeLocalization,
+} from './types/PreviewConfig';
 export type { Fonts, FontDefinition } from './types/Fonts';
 export type {
   PaywallBenefitValue,
@@ -25,13 +35,51 @@ export type {
   PaywallModel,
 } from './paywall/types/paywall-types';
 
-// Paywall hooks (RN-safe placeholders)
+// Paywall hooks (RN-safe)
 export {
   useCalculateLocalizedPrice,
   useDiscountRate,
   useChangeDelayByPaywall,
 } from './paywall/hooks';
 
+// Product base — centralized product utilities (RN-safe)
+export type {
+  Product,
+  PurchaseType,
+  ProductInput,
+  PricingPhase,
+  SubscriptionOffer,
+  IOSDiscount,
+  IOSIntroductoryPrice,
+  AndroidOfferDetails,
+  PeriodUnit,
+  IOSPeriodUnit,
+  RecurrenceMode,
+} from './product-base';
+export type { AndroidParams } from './product-base';
+export type { IOSParams } from './product-base';
+export type { ProductParams, SingleProductParams } from './product-base';
+/** @deprecated Use ProductParams instead */
+export type { ProductParams as PaywallLocalizationParams } from './product-base';
+export type { PaywallLocalizationConfig } from './product-base';
+export {
+  extractPrice,
+  calculateDiscount,
+  calculatePricePerMonth,
+  calculatePricePerYear,
+} from './product-base';
+export {
+  PERIOD_LOCALIZATION_KEYS,
+  getPeriodLocalizationKey,
+  parseBillingPeriod,
+  convertIOSPeriodUnit,
+} from './product-base';
+export { extractAndroidParams, extractIOSParams } from './product-base';
+export {
+  buildPaywallLocalizationParams,
+  usePaywallLocalizationParams,
+} from './product-base';
+
 // 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 {
@@ -84,13 +132,13 @@ export type * from './build-components';
 export { default as useNode } from './build-components/useNode';
 
 // Static sample data helpers (RN-safe)
-export {
-  getSamples,
-  getBasicSamples,
-  getOnboardSamples,
-} from './assets/samples/getSamples';
+export { getSamples } from './assets/samples/getSamples';
 export { getDefaultProject } from './utils/getDefaultProject';
 export type { EventObjectGenerated } from './build-components/OnboardButton/OnboardButtonProps.generated';
 
 export { parseColor } from './utils/parseColor';
 export type { ParseColorOptions } from './utils/parseColor';
+export {
+  defaultProjectColors,
+  mergeProjectColors,
+} from './utils/projectColors';

package/src/logger.ts

@@ -0,0 +1,39 @@
+/**
+ * IAP logger shim — delegates to console.
+ *
+ * The core project replaces this with a richer logger (Bugsnag remote, etc.).
+ * This minimal version keeps product-base compilable in the builder context.
+ */
+
+type LogPayload = Record<string, unknown>;
+type LogOptions = { remote?: boolean };
+
+function noop() {}
+
+export const iapLogger = {
+  error(
+    _tags: string[],
+    message: string,
+    payload?: LogPayload,
+    _opts?: LogOptions,
+  ) {
+    console.error(`[iap] ${message}`, payload);
+  },
+  warn(
+    _tags: string[],
+    message: string,
+    payload?: LogPayload,
+    _opts?: LogOptions,
+  ) {
+    console.warn(`[iap] ${message}`, payload);
+  },
+  info(
+    _tags: string[],
+    message: string,
+    payload?: LogPayload,
+    _opts?: LogOptions,
+  ) {
+    console.info(`[iap] ${message}`, payload);
+  },
+  debug: noop,
+};