@developer_tribe/react-builder 1.2.39 → 1.2.41

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/CarouselDots/CarouselDots.tsx

@@ -34,7 +34,12 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
   const onboardApi = useContext(onboardContext);
   const emblaApi = isOnboard ? onboardApi?.emblaApi : carouselApi;
 
-  const { selectedTheme: theme, projectColors, baseSize } = useBuilderParams();
+  const {
+    selectedTheme: theme,
+    projectColors,
+    baseSize,
+    device,
+  } = useBuilderParams();
   const inactiveDotOpacity =
     (stylesBag?.inactive_dot_opacity as number | undefined) ??
     (attrRecord.inactive_dot_opacity as number | undefined) ??
@@ -59,12 +64,12 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
   );
 
   const dotSizeCss = useMemo(() => {
-    const parsed = parseSize(dotThicknessRaw, baseSize);
+    const parsed = parseSize(dotThicknessRaw, baseSize, device!);
     if (parsed === undefined) return '10px';
     if (typeof parsed === 'number') return `${parsed}px`;
     if (typeof parsed === 'string' && parsed.trim()) return parsed;
     return '10px';
-  }, [dotThicknessRaw, baseSize]);
+  }, [dotThicknessRaw, baseSize, device]);
 
   const dotGapCss = useMemo((): string => {
     const px =

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

@@ -4,6 +4,7 @@ import RenderNode from '../RenderNode.generated';
 import type { Node } from '../../types/Node';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
+import { useRenderStore } from '../../store';
 import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
@@ -19,11 +20,12 @@ function Main({ node }: MainComponentProps) {
   const attributeKey = node.key ?? generatedId;
 
   const { previewMode, selectedKey } = useBuilderParams();
+  const device = useRenderStore((s) => s.device);
 
   const baseStyle = useExtractViewStyle(node);
 
   const useSafeAreaView = node.attributes?.useSafeAreaView ?? true;
-  const layoutStyle = useSafeAreaViewStyle(baseStyle, useSafeAreaView);
+  const layoutStyle = useSafeAreaViewStyle(baseStyle, useSafeAreaView, device);
 
   const isSelected = isNodeSelected({
     previewMode: !!previewMode,

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

@@ -15,6 +15,9 @@ function NavigationBarColor({ node }: NavigationBarColorComponentProps) {
   const setNavBarOverrideColor = useRenderStore(
     (s) => s.setNavBarOverrideColor,
   );
+  const setNavBarOverrideTranslucent = useRenderStore(
+    (s) => s.setNavBarOverrideTranslucent,
+  );
 
   const rawBg = getStyleBag(node.attributes)?.backgroundColor as
     | string
@@ -24,14 +27,25 @@ function NavigationBarColor({ node }: NavigationBarColorComponentProps) {
     theme,
   });
 
+  const translucent = node.attributes?.translucent;
+
   useEffect(() => {
     if (resolvedColor) {
       setNavBarOverrideColor(resolvedColor);
     }
+    if (translucent !== undefined) {
+      setNavBarOverrideTranslucent(translucent);
+    }
     return () => {
       setNavBarOverrideColor(null);
+      setNavBarOverrideTranslucent(null);
     };
-  }, [resolvedColor, setNavBarOverrideColor]);
+  }, [
+    resolvedColor,
+    setNavBarOverrideColor,
+    translucent,
+    setNavBarOverrideTranslucent,
+  ]);
 
   return null;
 }

package/src/build-components/NavigationBarColor/NavigationBarColorProps.generated.ts

@@ -2,66 +2,15 @@
 
 import type { NodeData } from '../../types/Node';
 
-export type FlexDirectionOptionType = 'row' | 'column';
-export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
-export type AlignItemsOptionType =
-  | 'flex-start'
-  | 'center'
-  | 'flex-end'
-  | 'stretch'
-  | 'baseline';
-export type JustifyContentOptionType =
-  | 'flex-start'
-  | 'center'
-  | 'flex-end'
-  | 'space-between'
-  | 'space-around'
-  | 'space-evenly';
-export type PositionOptionType = 'relative' | 'absolute';
-
 export interface NavigationBarColorStyleGenerated {
-  flexDirection?: FlexDirectionOptionType;
-  flexWrap?: FlexWrapOptionType;
-  alignItems?: AlignItemsOptionType;
-  justifyContent?: JustifyContentOptionType;
-  gap?: string;
-  padding?: string;
-  paddingHorizontal?: string;
-  paddingVertical?: string;
-  paddingTop?: string;
-  paddingBottom?: string;
-  paddingLeft?: string;
-  paddingRight?: string;
-  margin?: string;
-  marginHorizontal?: string;
-  marginVertical?: string;
-  marginTop?: string;
-  marginBottom?: string;
-  marginLeft?: string;
-  marginRight?: string;
   backgroundColor?: string;
-  borderRadius?: string;
-  width?: string;
-  minWidth?: string;
-  maxWidth?: string;
-  height?: string;
-  minHeight?: string;
-  maxHeight?: string;
-  flex?: number;
-  position?: PositionOptionType;
-  top?: string;
-  bottom?: string;
-  left?: string;
-  right?: string;
-  zIndex?: number;
 }
 
 export interface NavigationBarColorPropsGenerated {
   child: string;
   attributes: {
     styles?: NavigationBarColorStyleGenerated;
-    scrollable?: boolean;
-    testID?: string;
+    translucent?: boolean;
   };
 }
 

package/src/build-components/NavigationBarColor/pattern.json

@@ -5,11 +5,11 @@
     "title": "title",
     "description": "description",
     "children": "never",
-    "extends": "View",
     "attributes": {
       "styles": {
         "backgroundColor": "color"
-      }
+      },
+      "translucent": "boolean"
     }
   },
   "meta": {
@@ -24,6 +24,15 @@
         "specialCategory": null,
         "sort": 1
       }
+    },
+    "attributes": {
+      "translucent": {
+        "label": "Translucent",
+        "description": "Sets the navigation bar to translucent.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 2
+      }
     }
   },
   "defaults": {

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

@@ -34,6 +34,7 @@ export function OnboardDot({ node }: OnboardDotComponentProps) {
     selectedTheme: theme,
     projectColors,
     baseSize,
+    device,
   } = useBuilderParams();
   // OnboardDot specific attributes
   const inactiveDotOpacity =
@@ -74,12 +75,12 @@ export function OnboardDot({ node }: OnboardDotComponentProps) {
     (attrRecord.dot_thickness as string | number | undefined) ??
     (stylesBag?.dot_thickness as string | number | undefined);
   const dotSizeCss = useMemo((): string => {
-    const parsed = parseSize(dotThicknessRaw, baseSize);
+    const parsed = parseSize(dotThicknessRaw, baseSize, device!);
     if (parsed === undefined) return '10px';
     if (typeof parsed === 'number') return `${parsed}px`;
     if (typeof parsed === 'string' && parsed.trim()) return parsed;
     return '10px';
-  }, [dotThicknessRaw, baseSize]);
+  }, [dotThicknessRaw, baseSize, device]);
   const dotGapCss = useMemo((): string => {
     // Prefer px math when possible; otherwise fall back to 10px/3.
     const px =

package/src/build-components/PaywallCloseButton/pattern.json

@@ -14,6 +14,7 @@
     "styles": {}
   },
   "defaults": {
+    "testID": "paywall-close-button",
     "iconType": "close",
     "size": 24,
     "styles": {

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

@@ -15,6 +15,9 @@ function StatusBarColor({ node }: StatusBarColorComponentProps) {
   const setStatusBarOverrideColor = useRenderStore(
     (s) => s.setStatusBarOverrideColor,
   );
+  const setStatusBarOverrideTranslucent = useRenderStore(
+    (s) => s.setStatusBarOverrideTranslucent,
+  );
 
   const rawBg = getStyleBag(node.attributes)?.backgroundColor as
     | string
@@ -24,14 +27,25 @@ function StatusBarColor({ node }: StatusBarColorComponentProps) {
     theme,
   });
 
+  const translucent = node.attributes?.translucent;
+
   useEffect(() => {
     if (resolvedColor) {
       setStatusBarOverrideColor(resolvedColor);
     }
+    if (translucent !== undefined) {
+      setStatusBarOverrideTranslucent(translucent);
+    }
     return () => {
       setStatusBarOverrideColor(null);
+      setStatusBarOverrideTranslucent(null);
     };
-  }, [resolvedColor, setStatusBarOverrideColor]);
+  }, [
+    resolvedColor,
+    setStatusBarOverrideColor,
+    translucent,
+    setStatusBarOverrideTranslucent,
+  ]);
 
   return null;
 }

package/src/build-components/StatusBarColor/StatusBarColorProps.generated.ts

@@ -10,7 +10,7 @@ export interface StatusBarColorPropsGenerated {
   child: string;
   attributes: {
     styles?: StatusBarColorStyleGenerated;
-    testID?: string;
+    translucent?: boolean;
   };
 }
 

package/src/build-components/StatusBarColor/pattern.json

@@ -9,7 +9,7 @@
       "styles": {
         "backgroundColor": "color"
       },
-      "testID": "string"
+      "translucent": "boolean"
     }
   },
   "meta": {
@@ -24,6 +24,15 @@
         "specialCategory": null,
         "sort": 1
       }
+    },
+    "attributes": {
+      "translucent": {
+        "label": "Translucent",
+        "description": "Sets the status bar to translucent.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 2
+      }
     }
   },
   "defaults": {