@developer_tribe/react-builder 1.2.40 → 1.2.42

package/src/assets/samples/paywall-1.json

@@ -389,7 +389,7 @@
                   },
                   {
                     "type": "PaywallSubscribeButton",
-                    "children": "Subscribe",
+                    "children": "@subscribe",
                     "attributes": {
                       "description": "Abonelik onay butonu. (#1)",
                       "title": "Subscribe",
@@ -404,6 +404,23 @@
                       "testID": "Promo-test-id-1"
                     },
                     "children": "@baseLocalizedPromoText"
+                  },
+                  {
+                    "type": "PaywallFooter",
+                    "attributes": {
+                      "textLocalizationKey": "base.builder.paywall.footer.description",
+                      "linkedWordFirstLocalizationKey": "base.builder.paywall.btnPrivacy",
+                      "linkedWordFirstColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
+                      "linkedWordFirstPage": "privacy",
+                      "linkedWordSecondLocalizationKey": "base.builder.paywall.btnTerms",
+                      "linkedWordSecondColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
+                      "linkedWordSecondPage": "terms",
+                      "styles": {
+                        "gap": 8,
+                        "color": "THEME_COLORS.ONBOARD_FOOTER_TEXT"
+                      },
+                      "testID": "PaywallFooter-test-id-1"
+                    }
                   }
                 ]
               }

package/src/assets/samples/paywall-2.json

@@ -349,9 +349,9 @@
                 "children": [
                   {
                     "type": "PaywallSubscribeButton",
-                    "children": "Subscribe Now",
+                    "children": "@subscribe",
                     "attributes": {
-                      "description": "Subscription confirm button.",
+                      "description": "Abonelik onay butonu. (#1)",
                       "title": "Subscribe",
                       "testID": "PaywallSubscribeButton-test-id-1"
                     }

package/src/assets/samples/paywall-app-delete-offer.json

@@ -363,9 +363,9 @@
                 "children": [
                   {
                     "type": "PaywallSubscribeButton",
-                    "children": "Subscribe Now",
+                    "children": "@subscribe",
                     "attributes": {
-                      "description": "Subscription confirm button.",
+                      "description": "Abonelik onay butonu. (#1)",
                       "title": "Subscribe",
                       "testID": "PaywallSubscribeButton-test-id-1"
                     }

package/src/assets/samples/paywall-app-open-offer.json

@@ -363,9 +363,9 @@
                 "children": [
                   {
                     "type": "PaywallSubscribeButton",
-                    "children": "Subscribe Now",
+                    "children": "@subscribe",
                     "attributes": {
-                      "description": "Subscription confirm button.",
+                      "description": "Abonelik onay butonu. (#1)",
                       "title": "Subscribe",
                       "testID": "PaywallSubscribeButton-test-id-1"
                     }

package/src/assets/samples/paywall-back-offer.json

@@ -363,7 +363,7 @@
                 "children": [
                   {
                     "type": "PaywallSubscribeButton",
-                    "children": "Subscribe Now",
+                    "children": "@subscribe",
                     "attributes": {
                       "description": "Subscription confirm button.",
                       "title": "Subscribe",

package/src/assets/samples/paywall-notification-offer.json

@@ -363,7 +363,7 @@
                 "children": [
                   {
                     "type": "PaywallSubscribeButton",
-                    "children": "Subscribe Now",
+                    "children": "@subscribe",
                     "attributes": {
                       "description": "Subscription confirm button.",
                       "title": "Subscribe",

package/src/assets/samples/vpn-onboard-1.json

@@ -522,11 +522,11 @@
               {
                 "type": "OnboardFooter",
                 "attributes": {
-                  "textLocalizationKey": "view.onboarding.footer.description",
-                  "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
+                  "textLocalizationKey": "base.onboard.footer.description",
+                  "linkedWordFirstLocalizationKey": "base.onboard.btnPrivacy",
                   "linkedWordFirstColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
                   "linkedWordFirstPage": "privacy",
-                  "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
+                  "linkedWordSecondLocalizationKey": "base.onboard.btnTerms",
                   "linkedWordSecondColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
                   "linkedWordSecondPage": "terms",
                   "styles": {

package/src/assets/samples/vpn-onboard-2.json

@@ -525,11 +525,11 @@
               {
                 "type": "OnboardFooter",
                 "attributes": {
-                  "textLocalizationKey": "view.onboarding.footer.description",
-                  "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
+                  "textLocalizationKey": "base.onboard.footer.description",
+                  "linkedWordFirstLocalizationKey": "base.onboard.btnPrivacy",
                   "linkedWordFirstColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
                   "linkedWordFirstPage": "privacy",
-                  "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
+                  "linkedWordSecondLocalizationKey": "base.onboard.btnTerms",
                   "linkedWordSecondColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
                   "linkedWordSecondPage": "terms",
                   "styles": {

package/src/assets/samples/vpn-onboard-3.json

@@ -486,11 +486,11 @@
               {
                 "type": "OnboardFooter",
                 "attributes": {
-                  "textLocalizationKey": "view.onboarding.footer.description",
-                  "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
+                  "textLocalizationKey": "base.onboard.footer.description",
+                  "linkedWordFirstLocalizationKey": "base.onboard.btnPrivacy",
                   "linkedWordFirstColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
                   "linkedWordFirstPage": "privacy",
-                  "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
+                  "linkedWordSecondLocalizationKey": "base.onboard.btnTerms",
                   "linkedWordSecondColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
                   "linkedWordSecondPage": "terms",
                   "styles": {

package/src/assets/samples/vpn-onboard-4.json

@@ -486,11 +486,11 @@
               {
                 "type": "OnboardFooter",
                 "attributes": {
-                  "textLocalizationKey": "view.onboarding.footer.description",
-                  "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
+                  "textLocalizationKey": "base.onboard.footer.description",
+                  "linkedWordFirstLocalizationKey": "base.onboard.btnPrivacy",
                   "linkedWordFirstColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
                   "linkedWordFirstPage": "privacy",
-                  "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
+                  "linkedWordSecondLocalizationKey": "base.onboard.btnTerms",
                   "linkedWordSecondColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
                   "linkedWordSecondPage": "terms",
                   "styles": {

package/src/assets/samples/vpn-onboard-5.json

@@ -710,11 +710,11 @@
               {
                 "type": "OnboardFooter",
                 "attributes": {
-                  "textLocalizationKey": "view.onboarding.footer.description",
-                  "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
+                  "textLocalizationKey": "base.onboard.footer.description",
+                  "linkedWordFirstLocalizationKey": "base.onboard.btnPrivacy",
                   "linkedWordFirstColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
                   "linkedWordFirstPage": "privacy",
-                  "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
+                  "linkedWordSecondLocalizationKey": "base.onboard.btnTerms",
                   "linkedWordSecondColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
                   "linkedWordSecondPage": "terms",
                   "styles": {

package/src/assets/samples/vpn-onboard-6.json

@@ -498,11 +498,11 @@
               {
                 "type": "OnboardFooter",
                 "attributes": {
-                  "textLocalizationKey": "view.onboarding.footer.description",
-                  "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
+                  "textLocalizationKey": "base.onboard.footer.description",
+                  "linkedWordFirstLocalizationKey": "base.onboard.btnPrivacy",
                   "linkedWordFirstColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
                   "linkedWordFirstPage": "privacy",
-                  "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
+                  "linkedWordSecondLocalizationKey": "base.onboard.btnTerms",
                   "linkedWordSecondColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
                   "linkedWordSecondPage": "terms",
                   "styles": {

package/src/assets/samples/vpn-onboard-7.json

@@ -536,11 +536,11 @@
               {
                 "type": "OnboardFooter",
                 "attributes": {
-                  "textLocalizationKey": "view.onboarding.footer.description",
-                  "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
+                  "textLocalizationKey": "base.onboard.footer.description",
+                  "linkedWordFirstLocalizationKey": "base.onboard.btnPrivacy",
                   "linkedWordFirstColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
                   "linkedWordFirstPage": "privacy",
-                  "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
+                  "linkedWordSecondLocalizationKey": "base.onboard.btnTerms",
                   "linkedWordSecondColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
                   "linkedWordSecondPage": "terms",
                   "styles": {

package/src/attributes-editor/AttributesEditorFields.tsx

@@ -5,7 +5,7 @@ import { IconPickerModal } from '../modals/IconPickerModal';
 import Modal from '../modals/Modal';
 import { loadFontFamily } from '../utils/loadFontFamily';
 import { fontsDebug } from '../utils/fontsDebug';
-import type { IconsType } from '../types/Icons.generated';
+import type { IconsType } from '../types/Icons';
 
 type IconTypePickerFieldProps = {
   name: string;

package/src/attributes-editor/AttributesEditorView.tsx

@@ -9,6 +9,8 @@ import {
   FontFamilyPickerField,
   IconTypePickerField,
 } from './AttributesEditorFields';
+import { useRenderStore } from '../store';
+import { FallbackLocalizationField } from './FallbackLocalizationField';
 import type {
   AttributesEditorModel,
   AttributesEditorSpecialSection,
@@ -192,15 +194,24 @@ export function AttributesEditorView(props: AttributesEditorViewProps) {
     </div>
   );
 
+  const CustomChildrenField = useRenderStore(
+    (s) => s.renderStringChildrenField,
+  );
+
   const childrenSection = hasStringChildren ? (
     <div className="attributes-editor__field-wrapper attributes-editor__field-wrapper--children">
       <p className="attributes-editor__field-label">Text</p>
-      <input
-        type="text"
-        className="attributes-editor__text-input"
-        value={childrenValue}
-        onChange={(e) => handleChildrenChange(e.target.value)}
-      />
+      {CustomChildrenField ? (
+        <CustomChildrenField
+          value={childrenValue}
+          onChange={handleChildrenChange}
+        />
+      ) : (
+        <FallbackLocalizationField
+          value={childrenValue}
+          onChange={handleChildrenChange}
+        />
+      )}
     </div>
   ) : null;
 

package/src/attributes-editor/FallbackLocalizationField.tsx

@@ -0,0 +1,384 @@
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { useRenderStore } from '../store';
+
+/**
+ * Self-contained fallback localization field for react-builder.
+ *
+ * Uses the localizationApiConfig from the store to:
+ * 1. Pre-load ALL keys on first open (per_page=100, auto-paginate)
+ * 2. Filter locally — no subsequent API calls for search
+ * 3. Works independently of the host app
+ *
+ * API: GET {forgeUrl}/api/manage/localization/{platform}?per_page=100&page=N&app_id=X
+ * Header: X-Authorization: {forgeToken}
+ */
+
+type LocalizationRecord = {
+  key: string;
+  translations: Record<string, { value: string | null }>;
+};
+
+type FallbackLocalizationFieldProps = {
+  value: string;
+  onChange: (v: string) => void;
+};
+
+export function FallbackLocalizationField({
+  value,
+  onChange,
+}: FallbackLocalizationFieldProps) {
+  const config = useRenderStore((s) => s.localizationApiConfig);
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [allRecords, setAllRecords] = useState<LocalizationRecord[]>([]);
+  const [filteredRecords, setFilteredRecords] = useState<LocalizationRecord[]>(
+    [],
+  );
+  const [preloadDone, setPreloadDone] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const preloadVersionRef = useRef(0);
+
+  const canSearch = !!config?.forgeUrl && !!config?.forgeToken;
+  const platform = 'ios'; // default platform for fallback
+
+  // --- Forge API helpers ---
+  const buildUrl = useCallback(
+    (page: number) => {
+      if (!config) return '';
+      const base = `${config.forgeUrl.replace(/\/$/, '')}/api/manage/localization/${platform}`;
+      const params = new URLSearchParams({
+        per_page: '1000',
+        page: String(page),
+      });
+      if (config.forgeAppId) {
+        params.append('app_id', String(config.forgeAppId));
+      }
+      return `${base}?${params.toString()}`;
+    },
+    [config],
+  );
+
+  const fetchPage = useCallback(
+    async (page: number) => {
+      const url = buildUrl(page);
+      const res = await fetch(url, {
+        headers: {
+          'Content-Type': 'application/json',
+          Accept: 'application/json',
+          'X-Authorization': config!.forgeToken,
+        },
+      });
+      if (!res.ok) return { data: [] as LocalizationRecord[], hasMore: false };
+      const json = await res.json();
+      const records: LocalizationRecord[] = json.data ?? [];
+      const pagination = json.pagination;
+      const hasMore =
+        pagination && pagination.current_page < pagination.last_page;
+      return { data: records, hasMore };
+    },
+    [buildUrl, config],
+  );
+
+  // --- Pre-load all records on first dialog open ---
+  useEffect(() => {
+    if (!open || !canSearch || preloadDone) return;
+
+    const version = ++preloadVersionRef.current;
+    setLoading(true);
+
+    const loadAll = async () => {
+      const all: LocalizationRecord[] = [];
+      let page = 1;
+      let hasMore = true;
+      while (hasMore) {
+        const result = await fetchPage(page);
+        if (version !== preloadVersionRef.current) return;
+        all.push(...result.data);
+        hasMore = result.hasMore;
+        page++;
+      }
+      if (version === preloadVersionRef.current) {
+        setAllRecords(all);
+        setFilteredRecords(all);
+        setPreloadDone(true);
+        setLoading(false);
+      }
+    };
+
+    void loadAll();
+  }, [open, canSearch, preloadDone, fetchPage]);
+
+  // --- Local filter ---
+  useEffect(() => {
+    if (!preloadDone) return;
+    const q = query.trim().toLowerCase();
+    if (!q) {
+      setFilteredRecords(allRecords);
+      return;
+    }
+    setFilteredRecords(
+      allRecords.filter((r) => {
+        if (r.key.toLowerCase().includes(q)) return true;
+        return Object.values(r.translations).some(
+          (t) => t?.value && t.value.toLowerCase().includes(q),
+        );
+      }),
+    );
+  }, [query, allRecords, preloadDone]);
+
+  const invalidate = () => {
+    setPreloadDone(false);
+    setAllRecords([]);
+    setFilteredRecords([]);
+  };
+
+  return (
+    <>
+      <div style={styles.row}>
+        <input
+          type="text"
+          className="attributes-editor__text-input"
+          value={value ?? ''}
+          onChange={(e) => onChange(e.target.value)}
+          style={{ flex: 1 }}
+        />
+        {canSearch ? (
+          <button
+            type="button"
+            onClick={() => setOpen(true)}
+            title="Browse localization keys"
+            style={styles.browseBtn}
+          >
+            🔍
+          </button>
+        ) : (
+          <span title="Localization API yapılandırılmadı" style={styles.dot} />
+        )}
+      </div>
+      {open && (
+        <div onClick={() => setOpen(false)} style={styles.overlay}>
+          <div onClick={(e) => e.stopPropagation()} style={styles.modal}>
+            {/* Header */}
+            <div style={styles.header}>
+              <span style={{ fontWeight: 600, fontSize: 14 }}>
+                Localization Anahtarı Seç
+              </span>
+              <button
+                type="button"
+                onClick={() => setOpen(false)}
+                style={styles.closeBtn}
+              >
+                ✕
+              </button>
+            </div>
+            {/* Search */}
+            <div style={{ padding: '10px 16px 6px' }}>
+              <input
+                autoFocus
+                type="text"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="Anahtar veya çeviri ara…"
+                style={styles.searchInput}
+              />
+            </div>
+            {/* Info */}
+            {preloadDone && (
+              <div style={styles.infoBar}>
+                {filteredRecords.length} / {allRecords.length} anahtar
+              </div>
+            )}
+            {/* Results */}
+            <div style={styles.resultsList}>
+              {loading && <div style={styles.emptyMsg}>Yükleniyor…</div>}
+              {!loading && preloadDone && filteredRecords.length === 0 && (
+                <div style={styles.emptyMsg}>Sonuç bulunamadı</div>
+              )}
+              {filteredRecords.map((entry) => {
+                const isSelected = entry.key === value;
+                const translations = Object.entries(entry.translations);
+                return (
+                  <button
+                    key={entry.key}
+                    type="button"
+                    onClick={() => {
+                      onChange(entry.key);
+                      setOpen(false);
+                    }}
+                    style={{
+                      ...styles.resultItem,
+                      background: isSelected ? '#333' : 'transparent',
+                      border: isSelected
+                        ? '1px solid #6366f1'
+                        : '1px solid #333',
+                    }}
+                    onMouseEnter={(e) => {
+                      if (!isSelected)
+                        e.currentTarget.style.background = '#2a2a2a';
+                    }}
+                    onMouseLeave={(e) => {
+                      if (!isSelected)
+                        e.currentTarget.style.background = 'transparent';
+                    }}
+                  >
+                    <div
+                      style={{
+                        fontWeight: 600,
+                        fontSize: 12,
+                        color: '#e0e0e0',
+                      }}
+                    >
+                      {entry.key}
+                    </div>
+                    {translations.slice(0, 3).map(([lang, cell]) => (
+                      <div key={lang} style={styles.translationRow}>
+                        <span style={styles.langBadge}>{lang}</span>
+                        <span style={styles.translationText}>
+                          {cell?.value && cell.value.length > 80
+                            ? cell.value.slice(0, 80) + '…'
+                            : cell?.value || (
+                                <span style={{ color: '#ef4444' }}>Eksik</span>
+                              )}
+                        </span>
+                      </div>
+                    ))}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+const styles: Record<string, React.CSSProperties> = {
+  row: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 4,
+  },
+  browseBtn: {
+    width: 28,
+    height: 28,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    border: '1px solid hsl(0 0% 40%)',
+    borderRadius: 4,
+    background: '#2a2a2a',
+    color: '#fff',
+    cursor: 'pointer',
+    fontSize: 13,
+    flexShrink: 0,
+  },
+  dot: {
+    display: 'inline-block',
+    width: 8,
+    height: 8,
+    borderRadius: '50%',
+    backgroundColor: '#ef4444',
+    flexShrink: 0,
+    cursor: 'help',
+  },
+  overlay: {
+    position: 'fixed',
+    inset: 0,
+    background: 'rgba(0,0,0,0.6)',
+    zIndex: 9999,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  modal: {
+    background: '#1e1e1e',
+    borderRadius: 10,
+    width: 460,
+    maxHeight: '75vh',
+    display: 'flex',
+    flexDirection: 'column',
+    boxShadow: '0 12px 40px rgba(0,0,0,0.5)',
+    color: '#e0e0e0',
+    border: '1px solid #333',
+    overflow: 'hidden',
+  },
+  header: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '14px 18px',
+    borderBottom: '1px solid #333',
+  },
+  closeBtn: {
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    fontSize: 18,
+    color: '#999',
+    padding: 4,
+  },
+  searchInput: {
+    width: '100%',
+    padding: '8px 10px',
+    border: '1px solid #444',
+    borderRadius: 6,
+    background: '#2a2a2a',
+    color: '#e0e0e0',
+    fontSize: 13,
+    outline: 'none',
+    boxSizing: 'border-box' as const,
+  },
+  infoBar: {
+    padding: '2px 18px 4px',
+    fontSize: 11,
+    color: '#666',
+    textAlign: 'right' as const,
+  },
+  resultsList: {
+    overflowY: 'auto' as const,
+    flex: 1,
+    padding: '6px 10px 10px',
+  },
+  emptyMsg: {
+    padding: 20,
+    textAlign: 'center' as const,
+    color: '#888',
+    fontSize: 13,
+  },
+  resultItem: {
+    display: 'block',
+    width: '100%',
+    textAlign: 'left' as const,
+    borderRadius: 6,
+    padding: '8px 10px',
+    cursor: 'pointer',
+    marginBottom: 3,
+    transition: 'background 0.15s',
+  },
+  translationRow: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 6,
+    marginTop: 3,
+    fontSize: 11,
+  },
+  langBadge: {
+    display: 'inline-block',
+    background: '#333',
+    border: '1px solid #444',
+    borderRadius: 3,
+    padding: '1px 5px',
+    fontSize: 10,
+    fontWeight: 600,
+    color: '#aaa',
+    flexShrink: 0,
+  },
+  translationText: {
+    color: '#999',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap' as const,
+    textOverflow: 'ellipsis',
+    flex: 1,
+  },
+};

package/src/build-components/BIcon/BIcon.tsx

@@ -6,7 +6,7 @@ import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { Icon } from '../../components/Icon.generated';
-import { IconsType } from '../../types/Icons.generated';
+import { IconsType } from '../../types/Icons';
 import { useExtractTextStyle } from '../../attribute-analyser/style/web/useExtractTextStyle';
 
 export function BIcon({ node }: BIconComponentProps) {

package/src/build-components/OnboardButton/OnboardButton.tsx

@@ -56,7 +56,7 @@ export function OnboardButton({ node }: OnboardButtonComponentProps) {
             if (context) {
               context.navigation(eventTarget as any);
             } else {
-              alert('Mock OS context not available for navigation.');
+              console.warn('Mock OS context not available for navigation.');
             }
           }
         }