@developer_tribe/react-builder 1.1.0 → 1.2.1

package/src/components/JsonTextEditor.tsx

@@ -0,0 +1,185 @@
+import React, { useEffect, useMemo, useState } from 'react';
+
+type JsonTextEditorProps = {
+  value: unknown;
+  onChange?: (next: unknown) => void;
+  rootName?: string;
+  readOnly?: boolean;
+  className?: string;
+};
+
+function safeStringify(value: unknown) {
+  try {
+    return JSON.stringify(value, null, 2) ?? '';
+  } catch {
+    // Fallback for circular structures or non-serializable values
+    return String(value ?? '');
+  }
+}
+
+export function JsonTextEditor({
+  value,
+  onChange,
+  rootName,
+  readOnly = false,
+  className,
+}: JsonTextEditorProps) {
+  const initialText = useMemo(() => safeStringify(value), [value]);
+  const [text, setText] = useState(initialText);
+  const [parseError, setParseError] = useState<string | null>(null);
+  const [applyError, setApplyError] = useState<string | null>(null);
+  const [parsedValue, setParsedValue] = useState<unknown>(value);
+
+  useEffect(() => {
+    setText(initialText);
+    setParseError(null);
+    setApplyError(null);
+    setParsedValue(value);
+  }, [initialText, value]);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      // ignore (e.g. non-secure context)
+    }
+  };
+
+  const handleFormat = () => {
+    try {
+      const parsed = JSON.parse(text);
+      setText(JSON.stringify(parsed, null, 2));
+      setParseError(null);
+      setApplyError(null);
+      setParsedValue(parsed);
+    } catch (e) {
+      setParseError(e instanceof Error ? e.message : 'Invalid JSON');
+    }
+  };
+
+  const handleApply = () => {
+    if (!onChange) return;
+    try {
+      const parsed = JSON.parse(text);
+      setParseError(null);
+      setApplyError(null);
+      setParsedValue(parsed);
+      try {
+        onChange(parsed);
+      } catch (e) {
+        setApplyError(e instanceof Error ? e.message : 'Failed to apply JSON');
+      }
+    } catch (e) {
+      setParseError(e instanceof Error ? e.message : 'Invalid JSON');
+    }
+  };
+
+  const headerLabel = rootName ? `${rootName}.json` : 'data.json';
+
+  return (
+    <div
+      className={className}
+      style={{
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 10,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 8,
+          flexWrap: 'wrap',
+        }}
+      >
+        <div style={{ fontSize: 12, opacity: 0.75 }}>{headerLabel}</div>
+        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+          <button type="button" className="editor-button" onClick={handleCopy}>
+            Copy
+          </button>
+          <button
+            type="button"
+            className="editor-button"
+            onClick={handleFormat}
+          >
+            Format
+          </button>
+          {!readOnly && (
+            <button
+              type="button"
+              className="editor-button"
+              onClick={handleApply}
+              disabled={!onChange}
+              title={onChange ? 'Apply JSON changes' : 'Read only'}
+            >
+              Apply
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'minmax(0, 1fr)',
+          gap: 10,
+          flex: 1,
+          minHeight: 0,
+        }}
+      >
+        <textarea
+          value={text}
+          onChange={(e) => {
+            const nextText = e.target.value;
+            setText(nextText);
+            setApplyError(null);
+            if (readOnly) return;
+            try {
+              const parsed = JSON.parse(nextText);
+              setParseError(null);
+              setParsedValue(parsed);
+            } catch (e) {
+              setParseError(e instanceof Error ? e.message : 'Invalid JSON');
+            }
+          }}
+          readOnly={readOnly}
+          spellCheck={false}
+          style={{
+            width: '100%',
+            height: '100%',
+            minHeight: 320,
+            resize: 'none',
+            border: '1px solid rgba(0,0,0,0.12)',
+            borderRadius: 10,
+            padding: 12,
+            fontFamily:
+              'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+            fontSize: 12,
+            lineHeight: 1.5,
+            background: 'transparent',
+            outline: 'none',
+          }}
+        />
+      </div>
+
+      {parseError ? (
+        <div style={{ fontSize: 12, color: '#d12f2f' }}>
+          Invalid JSON: {parseError}
+        </div>
+      ) : applyError ? (
+        <div style={{ fontSize: 12, color: '#d12f2f' }}>
+          Could not apply: {applyError}
+        </div>
+      ) : (
+        <div style={{ fontSize: 12, opacity: 0.7 }}>
+          Valid JSON ({safeStringify(parsedValue).length.toLocaleString()}{' '}
+          chars)
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/LoadingComponent.tsx

@@ -0,0 +1,10 @@
+import Lottie from 'lottie-react';
+import loadingAnimation from '../assets/loading_animation.json';
+
+export function LoadingComponent() {
+  return (
+    <div className="rb-loading">
+      <Lottie animationData={loadingAnimation as any} loop autoplay />
+    </div>
+  );
+}

package/src/components/LocalizationParamsProvider.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ParamsProvider, type LocalizationParams } from './ParamsProvider';
+
+/**
+ * Backward-compatible wrapper.
+ * Prefer `ParamsProvider` instead.
+ */
+export type LocalizationParamsProviderProps = {
+  params: LocalizationParams;
+  children: React.ReactNode;
+};
+
+export function LocalizationParamsProvider({
+  params,
+  children,
+}: LocalizationParamsProviderProps) {
+  return (
+    <ParamsProvider localizationParams={params} otherParams={{}}>
+      {children}
+    </ParamsProvider>
+  );
+}

package/src/components/ParamsProvider.tsx

@@ -0,0 +1,45 @@
+import React, { createContext, useMemo } from 'react';
+
+export type LocalizationParams = Record<string, string>;
+export type OtherParams = Record<string, string | boolean | number>;
+
+export type ParamsContextValue = {
+  localizationParams: LocalizationParams;
+  otherParams: OtherParams;
+  /**
+   * `true` when the value comes from an actual `<ParamsProvider />` in the tree.
+   * Used to detect nesting vs the default context value.
+   */
+  isProvided: boolean;
+};
+
+export type ParamsProviderProps = {
+  localizationParams?: LocalizationParams;
+  otherParams?: OtherParams;
+  children: React.ReactNode;
+};
+
+export const ParamsContext = createContext<ParamsContextValue>({
+  localizationParams: {},
+  otherParams: {},
+  isProvided: false,
+});
+
+export function ParamsProvider({
+  localizationParams,
+  otherParams,
+  children,
+}: ParamsProviderProps) {
+  const value = useMemo<ParamsContextValue>(
+    () => ({
+      localizationParams: localizationParams ?? {},
+      otherParams: otherParams ?? {},
+      isProvided: true,
+    }),
+    [localizationParams, otherParams],
+  );
+
+  return (
+    <ParamsContext.Provider value={value}>{children}</ParamsContext.Provider>
+  );
+}

package/src/components/RenderErrorBoundary.tsx

@@ -0,0 +1,200 @@
+import React from 'react';
+
+export type RenderErrorBoundaryProps = {
+  children: React.ReactNode;
+  /**
+   * Optional label to show under the title, to help identify which preview crashed
+   * (e.g. "caught by BuilderProvider" vs "caught by ProjectDebug").
+   */
+  subtitle?: string;
+  /** Optional callback invoked when an error is caught. */
+  onError?: (error: Error, componentStack?: string) => void;
+};
+
+type RenderErrorBoundaryState = {
+  error: Error | null;
+  errorStack?: string;
+  componentStack?: string;
+  copied?: boolean;
+  copyError?: string | null;
+};
+
+export class RenderErrorBoundary extends React.Component<
+  RenderErrorBoundaryProps,
+  RenderErrorBoundaryState
+> {
+  state: RenderErrorBoundaryState = {
+    error: null,
+    errorStack: undefined,
+    componentStack: undefined,
+    copied: false,
+    copyError: null,
+  };
+
+  static getDerivedStateFromError(
+    error: Error,
+  ): Partial<RenderErrorBoundaryState> {
+    return {
+      error,
+      errorStack: error?.stack,
+      copied: false,
+      copyError: null,
+    };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    const componentStack =
+      (info as unknown as { componentStack?: string })?.componentStack ??
+      undefined;
+
+    this.setState({
+      error,
+      errorStack: error?.stack,
+      componentStack,
+    });
+
+    this.props.onError?.(error, componentStack);
+  }
+
+  private buildDetails(): string {
+    const { error, errorStack, componentStack } = this.state;
+    return [
+      `Error: ${error?.message ?? ''}`,
+      '',
+      errorStack ? `Stack:\n${errorStack}` : 'Stack: (missing)',
+      '',
+      componentStack
+        ? `React component stack:\n${componentStack}`
+        : 'React component stack: (missing)',
+    ].join('\n');
+  }
+
+  private copyDetails = async () => {
+    const details = this.buildDetails();
+
+    try {
+      if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(details);
+        this.setState({ copied: true, copyError: null });
+        window.setTimeout(() => this.setState({ copied: false }), 900);
+        return;
+      }
+    } catch {
+      // fall through to legacy method
+    }
+
+    try {
+      if (typeof document === 'undefined') {
+        this.setState({ copied: false, copyError: 'Copy failed' });
+        return;
+      }
+      const el = document.createElement('textarea');
+      el.value = details;
+      el.setAttribute('readonly', 'true');
+      el.style.position = 'fixed';
+      el.style.opacity = '0';
+      document.body.appendChild(el);
+      el.select();
+      const ok = document.execCommand('copy');
+      document.body.removeChild(el);
+      if (!ok) {
+        this.setState({ copied: false, copyError: 'Copy failed' });
+        return;
+      }
+      this.setState({ copied: true, copyError: null });
+      window.setTimeout(() => this.setState({ copied: false }), 900);
+    } catch (e) {
+      this.setState({
+        copied: false,
+        copyError: e instanceof Error ? e.message : 'Copy failed',
+      });
+    }
+  };
+
+  private reset = () => {
+    this.setState({
+      error: null,
+      errorStack: undefined,
+      componentStack: undefined,
+      copied: false,
+      copyError: null,
+    });
+  };
+
+  render() {
+    const { error, copied, copyError } = this.state;
+    if (!error) return this.props.children;
+
+    const details = this.buildDetails();
+
+    return (
+      <div
+        role="alert"
+        style={{
+          padding: 16,
+          borderRadius: 12,
+          background: 'hsl(var(--card, var(--rb-card, 0 0% 100%)))',
+          color:
+            'hsl(var(--card-foreground, var(--rb-card-foreground, 220.9 39.3% 11%)))',
+          border:
+            '1px solid hsl(var(--border, var(--rb-border, 220 13% 91%)) / 0.9)',
+        }}
+      >
+        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+          <div style={{ fontWeight: 700 }}>Preview crashed</div>
+          {this.props.subtitle && (
+            <div style={{ opacity: 0.8, fontSize: 12 }}>
+              ({this.props.subtitle})
+            </div>
+          )}
+          <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
+            <button
+              type="button"
+              className="editor-button"
+              onClick={this.copyDetails}
+            >
+              {copied ? 'Copied' : 'Copy details'}
+            </button>
+            <button
+              type="button"
+              className="editor-button"
+              onClick={this.reset}
+            >
+              Try again
+            </button>
+          </div>
+        </div>
+
+        {copyError && (
+          <div
+            style={{
+              marginTop: 8,
+              color:
+                'hsl(var(--destructive, var(--rb-destructive, 0 84.2% 60.2%)))',
+              fontSize: 12,
+            }}
+          >
+            {copyError}
+          </div>
+        )}
+
+        <pre
+          style={{
+            marginTop: 12,
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word',
+            fontSize: 12,
+            lineHeight: 1.4,
+            background: 'hsl(var(--muted, var(--rb-muted, 220 14.3% 95.9%)))',
+            padding: 12,
+            borderRadius: 10,
+            overflow: 'auto',
+            maxHeight: 360,
+          }}
+        >
+          {details}
+        </pre>
+      </div>
+    );
+  }
+}

package/src/hooks/useLocalizationParams.ts

@@ -0,0 +1,5 @@
+import { useParams } from './useParams';
+
+export function useLocalizationParams() {
+  return useParams().localizationParams ?? {};
+}

package/src/hooks/useLocalize.ts

@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+import { useRenderStore } from '../store';
+import { useLocalizationParams } from './useLocalizationParams';
+import { replaceLocalizationParams } from '../utils/replaceLocalizationParams';
+
+export type LocalizeFn = (keyOrText: string) => string;
+
+export function useLocalize(): LocalizeFn {
+  const { defaultLanguage, localication } = useRenderStore((s) => ({
+    defaultLanguage: s.appConfig?.defaultLanguage,
+    localication: s.appConfig?.localication,
+  }));
+  const params = useLocalizationParams();
+
+  return useCallback(
+    (keyOrText: string) => {
+      const raw =
+        localication?.[defaultLanguage ?? 'en']?.[keyOrText] ?? keyOrText;
+      return replaceLocalizationParams(raw, params);
+    },
+    [defaultLanguage, localication, params],
+  );
+}

package/src/hooks/useParams.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { ParamsContext } from '../components/ParamsProvider';
+
+export function useParams() {
+  return (
+    useContext(ParamsContext) ?? {
+      localizationParams: {},
+      otherParams: {},
+      isProvided: false,
+    }
+  );
+}

package/src/hooks/useProjectFonts.ts

@@ -0,0 +1,130 @@
+import { useEffect } from 'react';
+import type { Fonts } from '../types/Fonts';
+import { useRenderStore } from '../store';
+import { loadFontFamily } from '../utils/loadFontFamily';
+import { fontsDebug } from '../utils/fontsDebug';
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function loadWithDeadline<T>(
+  task: Promise<T>,
+  deadlineMs: number,
+): Promise<T> {
+  if (!Number.isFinite(deadlineMs) || deadlineMs <= 0) {
+    return await task;
+  }
+  return (await Promise.race([
+    task,
+    sleep(deadlineMs).then(() => {
+      throw new Error('timeout');
+    }),
+  ])) as T;
+}
+
+type UseProjectFontsParams = {
+  fonts: Fonts;
+  appFont: string | undefined;
+};
+
+/**
+ * Syncs project-provided fonts into the library store and ensures appFont is loaded (web).
+ * Loading behavior:
+ * - keep waiting while the load is in-flight
+ * - stop only when it loads, an error is thrown, or 10s deadline passes
+ */
+export function useProjectFonts({ fonts, appFont }: UseProjectFontsParams) {
+  useEffect(() => {
+    fontsDebug.info('useProjectFonts: effect start', {
+      appFont,
+      fontsCount: Array.isArray(fonts) ? fonts.length : 'not-array',
+    });
+    const {
+      setFonts,
+      setAppFont,
+      setErrors,
+      addError,
+      loadedFonts,
+      markFontLoaded,
+    } = useRenderStore.getState();
+
+    fontsDebug.info('useProjectFonts: storing fonts/appFont in store', {
+      appFont,
+      fontsCount: Array.isArray(fonts) ? fonts.length : 'not-array',
+    });
+    setFonts(fonts);
+    setAppFont(appFont);
+    setErrors([]);
+
+    let cancelled = false;
+
+    const run = async () => {
+      const normalizedAppFont =
+        typeof appFont === 'string' ? appFont.trim() : '';
+      if (!normalizedAppFont) {
+        fontsDebug.warn('useProjectFonts: appFont missing/empty');
+        setErrors(['appFont is undefined']);
+        return;
+      }
+
+      if (cancelled) return;
+
+      const exists =
+        Array.isArray(fonts) &&
+        fonts.some(
+          (f) =>
+            f?.name === normalizedAppFont &&
+            f?.family &&
+            typeof f.family === 'object' &&
+            Object.keys(f.family).length > 0,
+        );
+
+      if (!exists) {
+        fontsDebug.warn('useProjectFonts: appFont not found in fonts', {
+          normalizedAppFont,
+        });
+        setErrors([`appFont "${normalizedAppFont}" not found in fonts`]);
+        return;
+      }
+
+      if (
+        Array.isArray(loadedFonts) &&
+        loadedFonts.includes(normalizedAppFont)
+      ) {
+        fontsDebug.info(
+          'useProjectFonts: appFont already loaded (store cache)',
+          {
+            normalizedAppFont,
+          },
+        );
+        return;
+      }
+
+      fontsDebug.info('useProjectFonts: loading appFont', {
+        normalizedAppFont,
+        deadlineMs: 10_000,
+      });
+      await loadWithDeadline(
+        loadFontFamily(fonts, normalizedAppFont, { forceFetch: true }),
+        10_000,
+      );
+      if (cancelled) return;
+      markFontLoaded(normalizedAppFont);
+      fontsDebug.info('useProjectFonts: appFont loaded', { normalizedAppFont });
+    };
+
+    void run().catch((e) => {
+      if (cancelled) return;
+      fontsDebug.compactError('useProjectFonts: failed', e, { appFont });
+      addError(
+        `Failed to initialize fonts: ${e instanceof Error ? e.message : String(e)}`,
+      );
+    });
+
+    return () => {
+      fontsDebug.info('useProjectFonts: cleanup');
+      cancelled = true;
+    };
+  }, [fonts, appFont]);
+}

package/src/hooks/useSafeAreaViewStyle.ts

@@ -0,0 +1,67 @@
+import { useMemo } from 'react';
+import { useRenderStore } from '../store';
+
+function addInset(
+  base: React.CSSProperties['paddingTop'],
+  insetPx: number,
+): React.CSSProperties['paddingTop'] {
+  if (!insetPx) return base;
+  if (base === undefined) return insetPx;
+  if (typeof base === 'number') return base + insetPx;
+  if (typeof base === 'string' && base.trim())
+    return `calc(${base.trim()} + ${insetPx}px)`;
+  return insetPx;
+}
+
+function subtractInset(
+  base: React.CSSProperties['width'],
+  insetPx: number,
+): React.CSSProperties['width'] {
+  if (!insetPx) return base;
+  if (base === undefined) return `calc(100% - ${insetPx}px)`;
+  if (typeof base === 'number') return Math.max(0, base - insetPx);
+  if (typeof base === 'string' && base.trim())
+    return `calc(${base.trim()} - ${insetPx}px)`;
+  return `calc(100% - ${insetPx}px)`;
+}
+
+export function useSafeAreaViewStyle(
+  baseStyle: React.CSSProperties,
+  enabled: boolean,
+) {
+  const device = useRenderStore((s) => s.device);
+
+  return useMemo(() => {
+    if (!enabled) return baseStyle;
+
+    const [insetTop, insetRight, insetBottom, insetLeft] = device.insets ?? [
+      0, 0, 0, 0,
+    ];
+
+    // Match DeviceMockFrame fallbacks: status bar overlays content, so we treat it as top safe area.
+    const top =
+      insetTop || (device.platform === 'ios' ? 20 : device.platform ? 24 : 0);
+
+    // Bottom safe area is handled visually by the mock navigation bar area, which takes layout space.
+    // So we intentionally don't add bottom padding here to avoid double-spacing.
+    const right = insetRight ?? 0;
+    const left = insetLeft ?? 0;
+    const bottom = 0;
+
+    const horizontal = left + right;
+    const vertical = top + bottom;
+
+    return {
+      ...baseStyle,
+      // Use margins to "push" the view into the safe area (instead of shrinking content via padding).
+      // Since in this project these wrappers are typically full-size (100% x 100%),
+      // we also subtract the insets from width/height to avoid overflow.
+      marginTop: addInset(baseStyle.marginTop, top),
+      marginRight: addInset(baseStyle.marginRight, right),
+      marginBottom: addInset(baseStyle.marginBottom, bottom),
+      marginLeft: addInset(baseStyle.marginLeft, left),
+      width: subtractInset(baseStyle.width ?? '100%', horizontal),
+      height: subtractInset(baseStyle.height ?? '100%', vertical),
+    };
+  }, [enabled, baseStyle, device]);
+}