@developer_tribe/react-builder 1.2.40 → 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/components/BottomBar.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useCallback, useRef } from 'react';
 import { Icon } from './Icon.generated';
 import type { IconsType } from '../types/Icons.generated';
 import { useRenderStore } from '../store';
@@ -29,7 +29,6 @@ export function BottomBar({
   setData,
   project,
 }: BottomBarProps) {
-  const rtlIcon: IconsType = 'translate';
   const magicCursorIcon: IconsType = 'magicpen';
   const debugIcon: IconsType = 'speedometer-03';
   const localizationIcon: IconsType = 'globe-01';
@@ -45,8 +44,8 @@ export function BottomBar({
     setDefaultLanguage,
     previewMode,
     setPreviewMode,
-    isRtl,
     setIsRtl,
+    languageColumns,
   } = useRenderStore((s) => ({
     localization: s.localization,
     setLocalization: s.setLocalization,
@@ -56,24 +55,55 @@ export function BottomBar({
     setDefaultLanguage: s.setDefaultLanguage,
     previewMode: s.previewMode,
     setPreviewMode: s.setPreviewMode,
-    isRtl: s.isRtl,
     setIsRtl: s.setIsRtl,
+    languageColumns: s.languageColumns,
   }));
 
   const [isDebugOpen, setIsDebugOpen] = useState(false);
   const [isLocalizationOpen, setIsLocalizationOpen] = useState(false);
   const [isInspectOpen, setIsInspectOpen] = useState(false);
   const [isPromptManagerOpen, setIsPromptManagerOpen] = useState(false);
+  const [langDropdownOpen, setLangDropdownOpen] = useState(false);
+  const langTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+
+  // Use languageColumns from API, fallback to localization object keys
+  const availableLanguages = useMemo(() => {
+    if (languageColumns.length > 0) return languageColumns;
+    const locKeys = Object.keys(localization ?? {});
+    return locKeys.map((code) => ({
+      id: 0,
+      code: code.toUpperCase(),
+      title: code,
+      iso_code: code.toUpperCase(),
+      is_right_alignment: false,
+    }));
+  }, [languageColumns, localization]);
 
-  const languages = useMemo(() => ['en', 'tr', 'ar'], []);
   const activeLanguage = defaultLanguage;
 
+  const handleSelectLanguage = useCallback(
+    (lang: { code: string; is_right_alignment: boolean }) => {
+      const code = lang.code.toLowerCase();
+      setDefaultLanguage(code);
+      setIsRtl(lang.is_right_alignment);
+      setLangDropdownOpen(false);
+    },
+    [setDefaultLanguage, setIsRtl],
+  );
+
+  const handleLangMouseEnter = () => {
+    if (langTimeoutRef.current) clearTimeout(langTimeoutRef.current);
+    setLangDropdownOpen(true);
+  };
+  const handleLangMouseLeave = () => {
+    langTimeoutRef.current = setTimeout(() => setLangDropdownOpen(false), 200);
+  };
+
   const handleLocalicationChange = (next: Localication) => {
     setLocalization(next);
   };
 
   const themeIsActive = theme === 'dark';
-  const rtlIsActive = isRtl;
   const previewIsActive = previewMode;
   const themeIcon: IconsType = themeIsActive ? 'moon-bold' : 'sun';
 
@@ -90,19 +120,6 @@ export function BottomBar({
           <Icon iconType={themeIcon} size={20} color="currentColor" alt="" />
         </button>
 
-        <button
-          type="button"
-          className={`rb-bottom-bar__button rb-bottom-bar__button--rtl${
-            rtlIsActive ? ' is-active' : ''
-          }`}
-          aria-label="RTL"
-          aria-pressed={rtlIsActive}
-          onClick={() => setIsRtl(!isRtl)}
-        >
-          <Icon iconType={rtlIcon} size={18} color="currentColor" alt="" />
-          <span className="rb-bottom-bar__rtl-text">RTL</span>
-        </button>
-
         <button
           type="button"
           className={`rb-bottom-bar__button rb-bottom-bar__button--preview${
@@ -171,19 +188,106 @@ export function BottomBar({
 
         <div className="rb-bottom-bar__spacer" />
 
-        <div className="rb-bottom-bar__langs" aria-label="Language">
-          {languages.map((language) => (
-            <button
-              key={language}
-              type="button"
-              className={`rb-bottom-bar__lang${
-                activeLanguage === language ? ' is-active' : ''
-              }`}
-              onClick={() => setDefaultLanguage(language)}
+        {/* Language selector with hover-up dropdown */}
+        <div
+          className="rb-bottom-bar__lang-selector"
+          onMouseEnter={handleLangMouseEnter}
+          onMouseLeave={handleLangMouseLeave}
+          style={{ position: 'relative' }}
+        >
+          <button
+            type="button"
+            className="rb-bottom-bar__lang is-active"
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 4,
+            }}
+          >
+            {activeLanguage.toUpperCase()}
+            <span style={{ fontSize: 8, opacity: 0.6 }}>▲</span>
+          </button>
+
+          {langDropdownOpen && availableLanguages.length > 0 && (
+            <div
+              className="rb-bottom-bar__lang-dropdown"
+              style={{
+                position: 'absolute',
+                bottom: '100%',
+                right: 0,
+                marginBottom: 4,
+                background: 'var(--rb-bg-secondary, #2a2a2a)',
+                border: '1px solid var(--rb-border, #444)',
+                borderRadius: 6,
+                padding: '4px 0',
+                minWidth: 150,
+                maxHeight: 260,
+                overflowY: 'auto',
+                boxShadow: '0 -4px 16px rgba(0,0,0,0.3)',
+                zIndex: 100,
+              }}
             >
-              {language}
-            </button>
-          ))}
+              {availableLanguages.map((lang) => {
+                const isActive =
+                  lang.code.toLowerCase() === activeLanguage.toLowerCase();
+                return (
+                  <button
+                    key={lang.code}
+                    type="button"
+                    onClick={() => handleSelectLanguage(lang)}
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 6,
+                      width: '100%',
+                      padding: '5px 10px',
+                      border: 'none',
+                      background: isActive
+                        ? 'var(--rb-accent, #6366f1)'
+                        : 'transparent',
+                      color: isActive
+                        ? '#fff'
+                        : 'var(--rb-text-primary, #e0e0e0)',
+                      cursor: 'pointer',
+                      fontSize: 12,
+                      textAlign: 'left',
+                    }}
+                    onMouseEnter={(e) => {
+                      if (!isActive)
+                        e.currentTarget.style.background =
+                          'var(--rb-bg-hover, #333)';
+                    }}
+                    onMouseLeave={(e) => {
+                      if (!isActive)
+                        e.currentTarget.style.background = 'transparent';
+                    }}
+                  >
+                    <span
+                      style={{
+                        fontWeight: 600,
+                        width: 24,
+                        flexShrink: 0,
+                      }}
+                    >
+                      {lang.code}
+                    </span>
+                    <span style={{ opacity: 0.7, flex: 1 }}>{lang.title}</span>
+                    {lang.is_right_alignment && (
+                      <span
+                        style={{
+                          fontSize: 9,
+                          opacity: 0.5,
+                          flexShrink: 0,
+                        }}
+                      >
+                        RTL
+                      </span>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+          )}
         </div>
       </div>
 

package/src/hooks/useLocalize.ts

@@ -23,7 +23,9 @@ export function useLocalize(options?: {
 
   return useCallback(
     (keyOrText: string) => {
-      const raw = localization?.[defaultLanguage]?.[keyOrText] ?? keyOrText;
+      const langMap = localization?.[defaultLanguage];
+      const raw = langMap?.[keyOrText] ?? keyOrText;
+
       return replaceLocalizationParams(raw, params);
     },
     [defaultLanguage, localization, params],

package/src/index.web.ts

@@ -11,3 +11,22 @@ export * from './index';
 export * from './build-components';
 export { default as useNode } from './build-components/useNode';
 export type { EventObjectGenerated } from './build-components/OnboardButton/OnboardButtonProps.generated';
+
+// Host-app API: let parent apps inject a custom "Text" field renderer.
+import { useRenderStore } from './store';
+import type { ComponentType } from 'react';
+import type { LocalizationApiConfig, LanguageColumn } from './store';
+
+export function setBuilderStringChildrenField(
+  comp?: ComponentType<{ value: string; onChange: (v: string) => void }>,
+) {
+  useRenderStore.getState().setRenderStringChildrenField(comp);
+}
+
+export function setBuilderLocalizationConfig(config?: LocalizationApiConfig) {
+  useRenderStore.getState().setLocalizationApiConfig(config);
+}
+
+export function setBuilderLanguageColumns(cols: LanguageColumn[]) {
+  useRenderStore.getState().setLanguageColumns(cols);
+}