@developer_tribe/react-builder 1.2.26 → 1.2.28

package/src/utils/extractTextStyle/extractTextStyleNative.ts

@@ -1,7 +1,7 @@
 import type { NodeData } from '../../types/Node';
 import type { TextPropsGenerated } from '../../build-components/Text/TextProps.generated';
-import type { AppConfig } from '../../types/PreviewConfig';
-import { defaultAppConfig } from '../../types/PreviewConfig';
+import type { Theme } from '../../types/PreviewConfig';
+import { defaultTheme } from '../../types/PreviewConfig';
 import type { ProjectColors } from '../../types/Project';
 import type { Fonts } from '../../types/Fonts';
 import { fs, parseSize } from '../../size-matters';
@@ -15,7 +15,7 @@ import {
 import { getStyleBag, toAttributeRecord } from '../attributeStyle';
 
 export type ExtractTextStyleNativeOptions = {
-  appConfig?: AppConfig;
+  theme?: Theme;
   projectColors?: ProjectColors;
   fonts?: Fonts;
 };
@@ -46,10 +46,12 @@ export function extractTextStyleNative<
     return styleBag?.[key];
   };
 
-  const resolvedAppConfig = options.appConfig ?? defaultAppConfig;
-  const { screenStyle, theme } = resolvedAppConfig;
+  const theme = options.theme ?? defaultTheme;
   const fallbackColor =
-    theme === 'light' ? screenStyle.light.color : screenStyle.dark.color;
+    parseColor('THEME_COLORS.TEXT', {
+      projectColors: options.projectColors,
+      theme,
+    }) ?? 'THEME_COLORS.TEXT';
 
   const style: Record<string, unknown> = {};
   if (!attributes) {

package/src/utils/logRenderStore.ts

@@ -84,7 +84,7 @@ export function logRenderStore(options: LogRenderStoreOptions = {}): void {
 
   if (isFn(groupCollapsed)) groupCollapsed(title);
   else {
-    console.log(title);
+    console.info(title);
   }
 
   const persistedRaw = includeLocalStorage
@@ -105,21 +105,17 @@ export function logRenderStore(options: LogRenderStoreOptions = {}): void {
   // NOTE: Logging objects in devtools can be confusing because they are "live" references.
   // This JSON string is a stable snapshot of this click, and is copy/paste-friendly.
 
-  console.log('json', json);
+  console.info('json', json);
 
-  console.log('state', snapshot);
+  console.info('state', snapshot);
 
-  console.log('actions', actions);
-
-  console.log('rawState (includes functions)', state);
+  console.info('actions', actions);
 
   if (includeLocalStorage) {
-    console.log('localStorage.render-store (raw)', persistedRaw);
-
-    console.log('localStorage.render-store (parsed)', persistedParsed);
+    console.info('localStorage.render-store (raw)', persistedRaw);
   }
   if (extra) {
-    console.log('extra', extra);
+    console.info('extra', extra);
   }
 
   if (isFn(groupEnd)) groupEnd();

package/src/utils/parseColor.ts

@@ -19,7 +19,6 @@ export function parseColor(value?: string, options: ParseColorOptions = {}) {
   if (trimmed.startsWith(STATIC_PREFIX)) {
     const token = trimmed.slice(STATIC_PREFIX.length);
     const resolved = projectColors.STATIC_COLORS?.[token];
-    console.log('resolved', value, resolved);
     return typeof resolved === 'string' && resolved.trim()
       ? resolved.trim()
       : trimmed;

package/src/utils/replaceLocalizationParams.ts

@@ -1,15 +1,19 @@
 export function replaceLocalizationParams(
   text: string,
-  params?: Record<string, string> | null,
+  params?: Record<string, string | undefined> | null
 ): string {
   if (!text) return text;
   if (!params) return text;
 
+  // Sort longest keys first to avoid prefix collisions
+  // (e.g. @trialPeriod matching inside @trialPeriodUnit)
+  const sorted = Object.entries(params).sort(([a], [b]) => b.length - a.length);
+
   return (
-    Object.entries(params).reduce((acc, [key, val]) => {
+    sorted.reduce((acc, [key, val]) => {
+      if (val == null) return acc;
       const needle = `@${key}`;
-      // Replace all occurrences without regex escaping pitfalls.
-      return acc.split(needle).join(String(val));
+      return acc.split(needle).join(val);
     }, text) || text
   );
 }

package/dist/modals/ScreenColorsModal.d.ts

@@ -1,8 +0,0 @@
-import type { AppConfig } from '../types/PreviewConfig';
-type ScreenColorsModalProps = {
-    appConfig: AppConfig;
-    onChange: (next: AppConfig) => void;
-    onClose: () => void;
-};
-export declare function ScreenColorsModal({ appConfig, onChange, onClose, }: ScreenColorsModalProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/src/assets/products.json

@@ -1,98 +0,0 @@
-{
-  "Embeded Paywall": [
-    {
-      "productId": "com.app.premium.monthly",
-      "title": "Premium Monthly",
-      "description": "Unlock all premium features for a month.",
-      "localizedPrice": "$4.99",
-      "price": "4.99",
-      "currency": "USD"
-    },
-    {
-      "productId": "com.app.pro.yearly",
-      "title": "Pro Yearly",
-      "description": "Best value: full access for a year.",
-      "localizedPrice": "€39.99",
-      "price": "39.99",
-      "currency": "EUR"
-    },
-    {
-      "productId": "com.app.plus.weekly",
-      "title": "Plus Weekly",
-      "description": "Try Plus with a flexible weekly plan.",
-      "localizedPrice": "£1.99",
-      "price": "1.99",
-      "currency": "GBP"
-    }
-  ],
-  "type-1": [
-    {
-      "productId": "com.app.premium.monthly",
-      "title": "Premium Monthly",
-      "description": "Unlock all premium features for a month.",
-      "localizedPrice": "$4.99",
-      "price": "4.99",
-      "currency": "USD"
-    },
-    {
-      "productId": "com.app.pro.yearly",
-      "title": "Pro Yearly",
-      "description": "Best value: full access for a year.",
-      "localizedPrice": "€39.99",
-      "price": "39.99",
-      "currency": "EUR"
-    },
-    {
-      "productId": "com.app.plus.weekly",
-      "title": "Plus Weekly",
-      "description": "Try Plus with a flexible weekly plan.",
-      "localizedPrice": "£1.99",
-      "price": "1.99",
-      "currency": "GBP"
-    }
-  ],
-  "type-2": [
-    {
-      "productId": "com.app.starter.monthly",
-      "title": "Starter Monthly",
-      "description": "Basic access to get started.",
-      "localizedPrice": "$2.99",
-      "price": "2.99",
-      "currency": "USD"
-    },
-    {
-      "productId": "com.app.gold.monthly",
-      "title": "Gold Monthly",
-      "description": "Gold tier with extra perks.",
-      "localizedPrice": "₺149.99",
-      "price": "149.99",
-      "currency": "TRY"
-    },
-    {
-      "productId": "com.app.premium.yearly",
-      "title": "Premium Yearly",
-      "description": "Unlock premium for a year.",
-      "localizedPrice": "$49.99",
-      "price": "49.99",
-      "currency": "USD"
-    },
-    {
-      "productId": "com.app.pro.lifetime",
-      "title": "Pro Lifetime",
-      "description": "One-time purchase for lifetime access.",
-      "localizedPrice": "€99.99",
-      "price": "99.99",
-      "currency": "EUR"
-    }
-  ],
-  "type-3": [
-    {
-      "productId": "com.app.plus.yearly",
-      "title": "Plus Yearly",
-      "description": "Yearly plan with a big discount.",
-      "localizedPrice": "$24.99",
-      "price": "24.99",
-      "currency": "USD"
-    }
-  ]
-}

package/src/modals/ScreenColorsModal.tsx

@@ -1,121 +0,0 @@
-import React, { useMemo } from 'react';
-import type { AppConfig } from '../types/PreviewConfig';
-import { defaultAppConfig } from '../types/PreviewConfig';
-import Modal from './Modal';
-
-type ScreenMode = 'light' | 'dark';
-type ScreenColorKey = keyof AppConfig['screenStyle']['light'];
-
-type ScreenColorsModalProps = {
-  appConfig: AppConfig;
-  onChange: (next: AppConfig) => void;
-  onClose: () => void;
-};
-
-type ColorField = {
-  id: string;
-  label: string;
-  mode: ScreenMode;
-  key: ScreenColorKey;
-};
-
-const colorFields: ColorField[] = [
-  {
-    id: 'light-bg',
-    label: 'Light Background',
-    mode: 'light',
-    key: 'backgroundColor',
-  },
-  {
-    id: 'light-color',
-    label: 'Light Text',
-    mode: 'light',
-    key: 'color',
-  },
-  {
-    id: 'dark-bg',
-    label: 'Dark Background',
-    mode: 'dark',
-    key: 'backgroundColor',
-  },
-  {
-    id: 'dark-color',
-    label: 'Dark Text',
-    mode: 'dark',
-    key: 'color',
-  },
-];
-
-export function ScreenColorsModal({
-  appConfig,
-  onChange,
-  onClose,
-}: ScreenColorsModalProps) {
-  const defaults = defaultAppConfig.screenStyle;
-
-  const getValue = (mode: ScreenMode, key: ScreenColorKey) =>
-    appConfig.screenStyle?.[mode]?.[key] ?? defaults[mode][key];
-
-  const handleChange = (mode: ScreenMode, key: ScreenColorKey, value: string) =>
-    onChange({
-      ...appConfig,
-      screenStyle: {
-        ...defaults,
-        ...appConfig.screenStyle,
-        [mode]: {
-          ...defaults[mode],
-          ...appConfig.screenStyle?.[mode],
-          [key]: value,
-        },
-      },
-    });
-
-  const headerDescription = useMemo(
-    () =>
-      'Edit light/dark screen background & text colors used in the preview.',
-    [],
-  );
-
-  return (
-    <Modal
-      onClose={onClose}
-      ariaLabelledBy="screen-colors-title"
-      contentClassName="localication-modal__content"
-    >
-      <div className="modal__header localication-modal__header">
-        <div className="localication-modal__header-main">
-          <h3 id="screen-colors-title" className="modal__title">
-            Screen Colors
-          </h3>
-          <p className="localication-modal__description">{headerDescription}</p>
-        </div>
-        <button type="button" className="editor-button" onClick={onClose}>
-          Close
-        </button>
-      </div>
-
-      <div className="localication-modal__body">
-        <div
-          style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
-            gap: 12,
-          }}
-        >
-          {colorFields.map(({ id, label, mode, key }) => (
-            <React.Fragment key={id}>
-              <div style={{ alignSelf: 'center' }}>{label}</div>
-              <input
-                id={id}
-                type="color"
-                className="input input--color"
-                value={String(getValue(mode, key))}
-                onChange={(e) => handleChange(mode, key, e.target.value)}
-              />
-            </React.Fragment>
-          ))}
-        </div>
-      </div>
-    </Modal>
-  );
-}