@developer_tribe/react-builder 1.1.0 → 1.2.0

package/src/utils/loadFontFamily.ts

@@ -0,0 +1,318 @@
+import type { Fonts, FontDefinition } from '../types/Fonts';
+import { fontsDebug } from './fontsDebug';
+
+function normalizeFamilyName(value: unknown): string {
+  return typeof value === 'string' ? value.trim() : '';
+}
+
+export function findFontDefinition(
+  fonts: Fonts,
+  familyName: string,
+): FontDefinition | undefined {
+  const name = normalizeFamilyName(familyName);
+  if (!name) return undefined;
+  if (!Array.isArray(fonts)) return undefined;
+  return fonts.find((f) => f?.name === name);
+}
+
+function parseWeightKey(value: unknown): number | null {
+  if (typeof value !== 'string') return null;
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  const n = Number(trimmed);
+  return Number.isFinite(n) ? n : null;
+}
+
+/**
+ * Given a family sources map (weightKey -> url) and a requested weight,
+ * returns the closest available weight key (or a sensible fallback).
+ */
+export function resolveClosestFontWeightKey(
+  family: Record<string, string>,
+  requestedWeight?: string,
+): string | undefined {
+  const entries = Object.entries(family ?? {}).filter(
+    ([k, v]) =>
+      typeof k === 'string' &&
+      k.trim().length > 0 &&
+      typeof v === 'string' &&
+      v.trim().length > 0,
+  );
+  if (entries.length === 0) return undefined;
+
+  const reqKey = normalizeFamilyName(requestedWeight);
+  if (reqKey && entries.some(([k]) => k === reqKey)) return reqKey;
+
+  // Prefer 400 if nothing exact matches.
+  if (entries.some(([k]) => k === '400')) return '400';
+
+  const reqNum = parseWeightKey(reqKey);
+  const numeric = entries
+    .map(([k]) => ({ k, n: parseWeightKey(k) }))
+    .filter((x): x is { k: string; n: number } => typeof x.n === 'number');
+  if (numeric.length === 0) return entries[0][0];
+
+  if (typeof reqNum !== 'number') {
+    // No requested weight: pick the smallest numeric weight as a stable default.
+    numeric.sort((a, b) => a.n - b.n);
+    return numeric[0].k;
+  }
+
+  // Pick closest numeric weight.
+  let best = numeric[0];
+  let bestDiff = Math.abs(best.n - reqNum);
+  for (const cand of numeric) {
+    const diff = Math.abs(cand.n - reqNum);
+    if (diff < bestDiff) {
+      best = cand;
+      bestDiff = diff;
+    }
+  }
+  return best.k;
+}
+
+export function resolveFontSourceForWeight(
+  family: Record<string, string>,
+  requestedWeight?: string,
+): { weight: string; url: string } | undefined {
+  const weight = resolveClosestFontWeightKey(family, requestedWeight);
+  if (!weight) return undefined;
+  const url = family?.[weight];
+  if (typeof url !== 'string' || !url.trim()) return undefined;
+  return { weight, url: url.trim() };
+}
+
+type LoadFontFamilyOptions = {
+  preferWeight?: string;
+  /**
+   * If true (default), fetch the font file via `fetch()` first so:
+   * - the request is visible in DevTools Network (Fetch/XHR)
+   * - we can log response status and surface CORS/404 clearly
+   *
+   * If false, falls back to `new FontFace(name, 'url(...)')`.
+   */
+  forceFetch?: boolean;
+};
+
+/**
+ * Web-only font loader.
+ * - Uses the `FontFace` API when available.
+ * - Loads a single preferred weight (default: 400) to keep it "lazy".
+ * - Caller is responsible for caching (e.g. via `loadedFonts` in the store).
+ */
+export async function loadFontFamily(
+  fonts: Fonts,
+  familyName: string,
+  options: LoadFontFamilyOptions = {},
+): Promise<void> {
+  const name = normalizeFamilyName(familyName);
+  if (!name) throw new Error('fontFamily is empty');
+
+  fontsDebug.info('loadFontFamily: start', {
+    familyName: name,
+    preferWeight: options.preferWeight,
+  });
+
+  const def = findFontDefinition(fonts, name);
+  if (!def) throw new Error(`fontFamily "${name}" not found in fonts`);
+
+  const family = def.family;
+  if (!family || typeof family !== 'object') {
+    throw new Error(`fontFamily "${name}" has no "family" sources`);
+  }
+
+  // Not a browser environment (SSR / RN): do nothing.
+  if (typeof document === 'undefined') return;
+
+  const fontsApi = (document as any).fonts as FontFaceSet | undefined;
+  if (!fontsApi || typeof (globalThis as any).FontFace !== 'function') {
+    throw new Error('Font loading is not supported in this environment');
+  }
+  const safeFontsApi = fontsApi as FontFaceSet;
+
+  function hasLoadedFace(familyName: string, weight: string): boolean {
+    try {
+      const set = safeFontsApi as unknown as Iterable<FontFace>;
+      for (const face of set) {
+        const f = face as unknown as {
+          family?: string;
+          weight?: string;
+          status?: string;
+        };
+        const fam =
+          typeof f.family === 'string' ? f.family.replace(/['"]/g, '') : '';
+        const w = typeof f.weight === 'string' ? f.weight.trim() : '';
+        if (fam === familyName && w === weight && f.status === 'loaded') {
+          return true;
+        }
+      }
+    } catch {
+      // ignore
+    }
+    return false;
+  }
+
+  const resolved = resolveFontSourceForWeight(
+    family as Record<string, string>,
+    normalizeFamilyName(options.preferWeight),
+  );
+  if (!resolved)
+    throw new Error(`fontFamily "${name}" has no usable source URLs`);
+  const { weight: preferWeight, url } = resolved;
+
+  fontsDebug.info('loadFontFamily: resolved source', {
+    familyName: name,
+    weight: preferWeight,
+    url,
+  });
+
+  // If the browser already has it (e.g. via global CSS), skip work.
+  try {
+    // Use a weight-aware check so we can lazily load additional weights on demand.
+    const checkQuery = `${preferWeight} 16px "${name}"`;
+    const already = fontsApi.check(checkQuery);
+    fontsDebug.info('loadFontFamily: document.fonts.check', {
+      familyName: name,
+      query: checkQuery,
+      result: already,
+    });
+    const loadedFace = hasLoadedFace(name, preferWeight);
+    fontsDebug.info('loadFontFamily: hasLoadedFace', {
+      familyName: name,
+      weight: preferWeight,
+      result: loadedFace,
+    });
+    // Only skip when the face is actually loaded.
+    if (loadedFace) {
+      fontsDebug.info(
+        'loadFontFamily: already available (document.fonts.check)',
+        {
+          familyName: name,
+          weight: preferWeight,
+        },
+      );
+      return;
+    }
+  } catch {
+    // ignore check failures; we'll try to load.
+  }
+
+  const forceFetch = options.forceFetch !== false;
+  let source: string | ArrayBuffer = `url(${url})`;
+  const urlSource = `url(${url})`;
+
+  if (forceFetch && typeof fetch === 'function') {
+    try {
+      fontsDebug.info('loadFontFamily: fetching font file', {
+        url,
+        familyName: name,
+        weight: preferWeight,
+      });
+      const res = await fetch(url, {
+        mode: 'cors',
+        cache: 'no-store',
+        credentials: 'omit',
+      });
+      fontsDebug.info('loadFontFamily: font fetch response', {
+        url,
+        ok: res.ok,
+        status: res.status,
+        statusText: res.statusText,
+      });
+      if (!res.ok) {
+        throw new Error(`Font fetch failed: ${res.status} ${res.statusText}`);
+      }
+      source = await res.arrayBuffer();
+      fontsDebug.info('loadFontFamily: font file downloaded', {
+        url,
+        bytes: (source as ArrayBuffer).byteLength,
+        familyName: name,
+        weight: preferWeight,
+      });
+    } catch (e) {
+      // Fallback to native font loading. This can still succeed in some environments where fetch is blocked.
+      fontsDebug.compactError(
+        'loadFontFamily: fetch failed; falling back to url()',
+        e,
+        {
+          url,
+          familyName: name,
+          weight: preferWeight,
+        },
+      );
+      source = urlSource;
+    }
+  } else {
+    fontsDebug.info('loadFontFamily: using url() source (no fetch)', {
+      url,
+      familyName: name,
+      weight: preferWeight,
+    });
+  }
+
+  async function loadAndAdd(src: string | ArrayBuffer, label: string) {
+    const face = new (globalThis as any).FontFace(name, src as any, {
+      weight: preferWeight,
+      display: 'swap',
+    }) as FontFace;
+    fontsDebug.info('loadFontFamily: FontFace.load() begin', {
+      familyName: name,
+      weight: preferWeight,
+      source: label,
+    });
+    const loaded = await face.load();
+    safeFontsApi.add(loaded);
+    fontsDebug.info('loadFontFamily: loaded + added to document.fonts', {
+      familyName: name,
+      weight: preferWeight,
+      source: label,
+    });
+  }
+
+  try {
+    // Preferred path (buffer if we fetched, else url()).
+    await loadAndAdd(
+      source,
+      typeof source === 'string' ? 'url()' : 'arrayBuffer',
+    );
+  } catch (e) {
+    // Some browsers can be picky about ArrayBuffer sources. Retry using url() as a last resort.
+    fontsDebug.compactError('loadFontFamily: FontFace.load failed', e, {
+      familyName: name,
+      weight: preferWeight,
+      tried: typeof source === 'string' ? 'url()' : 'arrayBuffer',
+    });
+    if (typeof source !== 'string') {
+      fontsDebug.info('loadFontFamily: retrying with url() source', {
+        familyName: name,
+        weight: preferWeight,
+        url,
+      });
+      await loadAndAdd(urlSource, 'url() retry');
+    } else {
+      throw e;
+    }
+  }
+
+  try {
+    const afterQuery = `${preferWeight} 16px "${name}"`;
+    const after = safeFontsApi.check(afterQuery);
+    fontsDebug.info('loadFontFamily: document.fonts.check after add', {
+      familyName: name,
+      weight: preferWeight,
+      result: after,
+    });
+    // Force the browser to "activate" the face for this query (and reveal errors if any).
+    if (typeof (safeFontsApi as any).load === 'function') {
+      fontsDebug.info('loadFontFamily: document.fonts.load begin', {
+        query: afterQuery,
+      });
+      await (safeFontsApi as any).load(afterQuery);
+      fontsDebug.info('loadFontFamily: document.fonts.load done', {
+        query: afterQuery,
+      });
+    }
+  } catch {
+    // ignore
+  }
+}

package/src/utils/logger.ts

@@ -0,0 +1,76 @@
+import { useRenderStore } from '../store';
+import type { LogLevel, LogSource } from '../types/Project';
+
+const levelPriority: Record<Exclude<LogLevel, 'NONE'>, number> = {
+  ERROR: 0,
+  WARN: 1,
+  INFO: 2,
+  VERBOSE: 3,
+};
+
+function shouldLog(currentLevel: LogLevel, level: LogLevel): boolean {
+  if (currentLevel === 'NONE' || level === 'NONE') return false;
+  const curr = levelPriority[currentLevel as Exclude<LogLevel, 'NONE'>];
+  const incoming = levelPriority[level as Exclude<LogLevel, 'NONE'>];
+  return incoming <= curr;
+}
+
+function consoleLog(
+  level: LogLevel,
+  source: LogSource,
+  message: string,
+  payload?: unknown,
+) {
+  const prefix = `[${source}] ${message}`;
+  switch (level) {
+    case 'ERROR':
+      // eslint-disable-next-line no-console
+      console.error(prefix, payload);
+      break;
+    case 'WARN':
+      // eslint-disable-next-line no-console
+      console.warn(prefix, payload);
+      break;
+    case 'INFO':
+      // eslint-disable-next-line no-console
+      console.info(prefix, payload);
+      break;
+    case 'VERBOSE':
+      // eslint-disable-next-line no-console
+      console.debug(prefix, payload);
+      break;
+    default:
+      break;
+  }
+}
+
+export const logger = {
+  setLevel(level: LogLevel) {
+    useRenderStore.getState().setLogLevel(level);
+    // eslint-disable-next-line no-console
+    console.info(`[Logger] level set to ${level}`);
+  },
+  log(level: LogLevel, source: LogSource, message: string, payload?: unknown) {
+    const { logLevel, addLog } = useRenderStore.getState();
+    if (!shouldLog(logLevel, level)) return;
+    addLog({ level, source, message, payload });
+    consoleLog(level, source, message, payload);
+  },
+  verbose(source: LogSource, message: string, payload?: unknown) {
+    this.log('VERBOSE', source, message, payload);
+  },
+  info(source: LogSource, message: string, payload?: unknown) {
+    this.log('INFO', source, message, payload);
+  },
+  warn(source: LogSource, message: string, payload?: unknown) {
+    this.log('WARN', source, message, payload);
+  },
+  error(source: LogSource, message: string, payload?: unknown) {
+    this.log('ERROR', source, message, payload);
+  },
+  clear() {
+    useRenderStore.getState().clearLogs();
+  },
+};
+
+export type { LogLevel };

package/src/utils/nodeGuards.ts

@@ -0,0 +1,26 @@
+import type { Node, NodeDefaultAttribute } from '../types/Node';
+
+export function isNodeNullOrUndefined<T = NodeDefaultAttribute>(
+  node: Node<T>,
+): boolean {
+  return node === null || node === undefined;
+}
+
+export function isNodeString<T = NodeDefaultAttribute>(node: Node<T>): boolean {
+  return typeof node === 'string';
+}
+
+export function isNodeArray<T = NodeDefaultAttribute>(node: Node<T>): boolean {
+  return node instanceof Array;
+}
+
+export function isEmptyObject<T = NodeDefaultAttribute>(
+  node: Node<T>,
+): boolean {
+  return (
+    typeof node === 'object' &&
+    node !== null &&
+    !Array.isArray(node) &&
+    Object.keys(node as object).length === 0
+  );
+}

package/src/utils/nodeTree.ts

@@ -0,0 +1,99 @@
+import type { Node, NodeData } from '../types/Node';
+
+export function deleteNodeFromTree(root: Node, target: Node): Node {
+  if (root === null || root === undefined) return root;
+  if (typeof root === 'string') return root;
+
+  if (Array.isArray(root)) {
+    let changed = false;
+    const nextChildren: Node[] = [];
+    for (const child of root) {
+      if (child === target) {
+        changed = true;
+        continue;
+      }
+      const nextChild = deleteNodeFromTree(child, target);
+      if (nextChild !== child) changed = true;
+      nextChildren.push(nextChild);
+    }
+    return changed ? nextChildren : root;
+  }
+
+  const data = root as any;
+  if ('children' in data) {
+    const prev = data.children as Node;
+    if (!prev) return root;
+
+    if (Array.isArray(prev)) {
+      let changed = false;
+      const nextChildren: Node[] = [];
+      for (const child of prev) {
+        if (child === target) {
+          changed = true;
+          continue;
+        }
+        const nextChild = deleteNodeFromTree(child, target);
+        if (nextChild !== child) changed = true;
+        nextChildren.push(nextChild);
+      }
+      if (changed) {
+        return { ...data, children: nextChildren } as Node;
+      }
+      return root;
+    }
+
+    if (prev === target) {
+      return { ...data, children: '' } as Node;
+    }
+
+    const nextChild = deleteNodeFromTree(prev, target);
+    if (nextChild !== prev) {
+      return { ...data, children: nextChild } as Node;
+    }
+  }
+
+  return root;
+}
+
+export function isNodeRecord(node: Node): node is NodeData {
+  return (
+    node !== null &&
+    node !== undefined &&
+    typeof node === 'object' &&
+    !Array.isArray(node)
+  );
+}
+
+export function nodeHasChild(parent: NodeData, potentialChild: Node): boolean {
+  const { children } = parent;
+  if (!children) return false;
+  if (Array.isArray(children)) {
+    return children.some((child) => child === potentialChild);
+  }
+  return children === potentialChild;
+}
+
+export function findNodeByKey(root: Node, key?: string): Node | null {
+  if (!key) return null;
+  if (root === null || root === undefined) return null;
+  if (typeof root === 'string') return null;
+
+  if (Array.isArray(root)) {
+    for (const child of root) {
+      const found = findNodeByKey(child, key);
+      if (found) return found;
+    }
+    return null;
+  }
+
+  const nodeData = root as NodeData;
+  if (nodeData.key === key) {
+    return nodeData;
+  }
+
+  if (nodeData.children) {
+    return findNodeByKey(nodeData.children as Node, key);
+  }
+
+  return null;
+}

package/src/utils/novaToJson.ts

@@ -1,9 +1,13 @@
 import { Node, NodeData } from '../types/Node';
 import { Project, ProjectBase } from '../types/Project';
-
+//TODO: deprecated olmasına rağmen snapshot testi ekle
+/**
+ * @deprecated Legacy converter for old "nova" onboard JSON formats.
+ * The built-in samples are now shipped in the new `Project<Node>` format,
+ * so this should no longer be needed in normal usage.
+ */
 export function novaToJson(nova: ProjectBase<unknown>): Node {
   const layout = (nova.data as any).data?.layout;
-  console.info('layout', layout);
   if (layout === 'onboard-layout') {
     return onboardNovaToJson(nova);
   }
@@ -26,7 +30,6 @@ function onboardNovaToJson(nova: ProjectBase<unknown>): Node {
 
   const providerNode: NodeData = {
     type: 'OnboardProvider',
-    isMain: true,
     key: (nova?.data as any)?.data?.key,
     children: [
       carouselNode,
@@ -37,15 +40,24 @@ function onboardNovaToJson(nova: ProjectBase<unknown>): Node {
     ],
     attributes: {
       theme: (nova?.data as any)?.theme,
-      // forward safe area inset preference; default to true when absent
-      use_safe_area_inset:
-        (attributes as any)?.use_safe_area_inset !== undefined
-          ? (attributes as any)?.use_safe_area_inset
-          : true,
     },
   };
 
-  return providerNode;
+  const mainNode: NodeData = {
+    type: 'Main',
+    isMain: true,
+    key: (nova?.data as any)?.data?.key,
+    children: [providerNode],
+    attributes: {
+      // default safe area view on; can be overridden in the editor
+      useSafeAreaView: true,
+    },
+  };
+
+  // Provider should have its own key if needed; avoid duplicating root key on child.
+  delete (providerNode as any).key;
+
+  return mainNode;
 }
 //@eslint-disable-next-line @typescript-eslint/no-explicit-any
 function buildCarouselFromPages(pages: any[]): {
@@ -527,7 +539,8 @@ function mapFooterFromGeneralComponents(generalComponents: any[]): Node | null {
 
   const attributes: Record<string, unknown> = { gap: 8 };
   if (baseTextKey) attributes.textLocalizationKey = baseTextKey;
-  if (baseTextColor) attributes.textColor = baseTextColor;
+  // OnboardFooter extends Text, so the canonical text color attribute is `color`.
+  if (baseTextColor) attributes.color = baseTextColor;
   const first = linkedWords[0];
   const second = linkedWords[1];
   if (first) {

package/src/utils/parseColor.ts

@@ -0,0 +1,43 @@
+import type { AppConfig } from '../types/PreviewConfig';
+import type { ProjectColors } from '../types/Project';
+
+const STATIC_PREFIX = 'STATIC_COLORS.';
+const THEME_PREFIX = 'THEME_COLORS.';
+
+export type ParseColorOptions = {
+  projectColors?: ProjectColors;
+  appConfig?: AppConfig;
+};
+
+export function parseColor(value?: string, options: ParseColorOptions = {}) {
+  if (typeof value !== 'string') return value;
+  const trimmed = value.trim();
+  if (!trimmed) return undefined;
+
+  const { projectColors, appConfig } = options;
+  if (!projectColors) return trimmed;
+
+  if (trimmed.startsWith(STATIC_PREFIX)) {
+    const token = trimmed.slice(STATIC_PREFIX.length);
+    const resolved = projectColors.STATIC_COLORS?.[token];
+    return typeof resolved === 'string' && resolved.trim()
+      ? resolved.trim()
+      : trimmed;
+  }
+
+  if (trimmed.startsWith(THEME_PREFIX)) {
+    const token = trimmed.slice(THEME_PREFIX.length);
+    if (!token) return trimmed;
+
+    const theme = appConfig?.theme ?? 'light';
+    const themeTokens = projectColors.THEME_COLORS?.[theme];
+    const resolved = themeTokens?.[token];
+    if (typeof resolved === 'string' && resolved.trim()) {
+      return resolved.trim();
+    }
+
+    return trimmed;
+  }
+
+  return trimmed;
+}