@developer_tribe/react-builder 1.2.12 → 1.2.13

package/src/components/BottomBar.tsx

@@ -2,23 +2,28 @@ import React, { useMemo, useState } from 'react';
 import { Icon } from './Icon.generated';
 import type { IconsType } from '../types/Icons';
 import { useRenderStore } from '../store';
-import { Checkbox } from './Checkbox';
 import type { Localication } from '../types/PreviewConfig';
 import { LocalicationModal, Modal, ScreenColorsModal } from '../modals';
-import { JsonTextEditor } from './JsonTextEditor';
 import type { Node } from '../types/Node';
-import { analyseAndProccess } from '../utils/analyseNode';
+import type { Project } from '../types/Project';
+import { DebugJsonPage } from '../pages/DebugJsonPage';
 
 type BottomBarProps = {
   className?: string;
   data: Node;
   setData: React.Dispatch<React.SetStateAction<Node>>;
+  project?: Project;
 };
 
 /**
  * Bottom tool bar (Figma-like).
  */
-export function BottomBar({ className, data, setData }: BottomBarProps) {
+export function BottomBar({
+  className,
+  data,
+  setData,
+  project,
+}: BottomBarProps) {
   const rtlIcon: IconsType = 'translate';
   const magicCursorIcon: IconsType = 'magicpen';
   const debugIcon: IconsType = 'speedometer-03';
@@ -179,62 +184,18 @@ export function BottomBar({ className, data, setData }: BottomBarProps) {
           className="modal--large modal--scrollable"
           contentClassName="localication-modal__content"
         >
-          <div className="modal__header localication-modal__header">
-            <div className="localication-modal__header-main">
-              <h3 id="debug-json-editor-title" className="modal__title">
-                Debug JSON
-              </h3>
-              <p className="localication-modal__description">
-                Inspect and edit raw node JSON.
-              </p>
-            </div>
-            <button
-              type="button"
-              className="editor-button"
-              onClick={() => setIsDebugOpen(false)}
-            >
-              Close
-            </button>
-          </div>
-          <div className="localication-modal__body">
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-              <Checkbox
-                label="Preview mode"
-                checked={previewMode}
-                onChange={setPreviewMode}
-              />
-              <Checkbox
-                label="Dark Mode"
-                checked={appConfig.theme === 'dark'}
-                onChange={(checked) =>
-                  setAppConfig({
-                    ...appConfig,
-                    theme: checked ? 'dark' : 'light',
-                  })
-                }
-              />
-              <Checkbox
-                label="Is RTL"
-                checked={appConfig.isRtl ?? false}
-                onChange={(checked) =>
-                  setAppConfig({ ...appConfig, isRtl: checked })
-                }
-              />
-            </div>
-            <div
-              className="localication-modal__editor"
-              style={{ marginTop: 12 }}
-            >
-              <JsonTextEditor
-                rootName="node"
-                value={data ?? {}}
-                onChange={(next) =>
-                  setData(analyseAndProccess(next as Node) as Node)
-                }
-                className="localication-modal__json-editor"
-              />
-            </div>
-          </div>
+          <DebugJsonPage
+            project={project}
+            data={data}
+            setData={setData}
+            onClose={() => setIsDebugOpen(false)}
+            description="Inspect and edit raw node JSON."
+            previewMode={previewMode}
+            setPreviewMode={setPreviewMode}
+            appConfig={appConfig}
+            setAppConfig={setAppConfig}
+            logLabel="BottomBar Debug JSON"
+          />
         </Modal>
       )}
     </>

package/src/index.web.ts

@@ -2,6 +2,7 @@ import './styles/index.scss';
 
 // Web entrypoint.
 export { ProjectPage } from './pages/ProjectPage';
+export { DebugJsonPage } from './pages/DebugJsonPage';
 
 // Re-export the RN-safe/root entry so `react-builder/web` can also access shared APIs.
 export * from './index';

package/src/pages/DebugJsonPage.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import type { Node } from '../types/Node';
+import type { AppConfig } from '../types/PreviewConfig';
+import { Checkbox } from '../components/Checkbox';
+import { JsonTextEditor } from '../components/JsonTextEditor';
+import { analyseAndProccess } from '../utils/analyseNode';
+import { logRenderStore } from '../utils/logRenderStore';
+
+export type DebugJsonPageProps = {
+  data: Node | null | undefined;
+  setData: React.Dispatch<React.SetStateAction<Node>>;
+  project?: unknown;
+  onClose?: () => void;
+  title?: string;
+  description?: string;
+
+  previewMode?: boolean;
+  setPreviewMode?: (next: boolean) => void;
+
+  appConfig?: AppConfig;
+  setAppConfig?: (next: AppConfig) => void;
+
+  logLabel?: string;
+};
+
+export function DebugJsonPage({
+  data,
+  setData,
+  project,
+  onClose,
+  title = 'Debug JSON',
+  description,
+  previewMode,
+  setPreviewMode,
+  appConfig,
+  setAppConfig,
+  logLabel,
+}: DebugJsonPageProps) {
+  const canTogglePreviewMode = typeof setPreviewMode === 'function';
+  const canToggleTheme =
+    typeof setAppConfig === 'function' && typeof appConfig?.theme === 'string';
+  const canToggleRtl =
+    typeof setAppConfig === 'function' &&
+    typeof (appConfig as any)?.isRtl !== 'undefined';
+
+  return (
+    <>
+      <div className="modal__header localication-modal__header">
+        <div className="localication-modal__header-main">
+          <h3 id="debug-json-editor-title" className="modal__title">
+            {title}
+          </h3>
+          {description ? (
+            <p className="localication-modal__description">{description}</p>
+          ) : null}
+        </div>
+
+        <button
+          type="button"
+          className="editor-button"
+          title="Log render store to console"
+          onClick={() =>
+            logRenderStore({
+              label: logLabel,
+              extra: {
+                project: project ?? null,
+                projectData: data ?? null,
+              },
+            })
+          }
+        >
+          Log store
+        </button>
+
+        {onClose ? (
+          <button
+            type="button"
+            className="editor-button"
+            onClick={() => onClose()}
+          >
+            Close
+          </button>
+        ) : null}
+      </div>
+
+      <div className="localication-modal__body">
+        {canTogglePreviewMode || canToggleTheme || canToggleRtl ? (
+          <div className="localication-modal__controls">
+            {canTogglePreviewMode ? (
+              <Checkbox
+                label="Preview mode"
+                checked={Boolean(previewMode)}
+                onChange={setPreviewMode!}
+              />
+            ) : null}
+
+            {canToggleTheme ? (
+              <Checkbox
+                label="Dark Mode"
+                checked={(appConfig?.theme ?? 'light') === 'dark'}
+                onChange={(checked) =>
+                  setAppConfig!({
+                    ...(appConfig as AppConfig),
+                    theme: checked ? 'dark' : 'light',
+                  })
+                }
+              />
+            ) : null}
+
+            {canToggleRtl ? (
+              <Checkbox
+                label="Is RTL"
+                checked={Boolean((appConfig as any)?.isRtl)}
+                onChange={(checked) =>
+                  setAppConfig!({ ...(appConfig as AppConfig), isRtl: checked })
+                }
+              />
+            ) : null}
+          </div>
+        ) : null}
+
+        <div className="localication-modal__editor">
+          <JsonTextEditor
+            rootName="node"
+            value={data ?? ({} as any)}
+            onChange={(next) =>
+              setData(analyseAndProccess(next as Node) as Node)
+            }
+            className="localication-modal__json-editor"
+          />
+        </div>
+      </div>
+    </>
+  );
+}

package/src/pages/ProjectPage.tsx

@@ -35,6 +35,7 @@ import {
 } from '../utils/nodeTree';
 import type { Fonts } from '../types/Fonts';
 import { useProjectFonts } from '../hooks/useProjectFonts';
+import { resolveProjectForSave } from './projectPageUtils';
 export type ProjectPageProps = {
   project: Project;
   onSaveProject: (project: Project) => void;
@@ -101,6 +102,7 @@ export function ProjectPage({
     previewMode: s.previewMode,
   }));
   const resolvedAppConfig = appConfig ?? storeAppConfig ?? defaultAppConfig;
+  const [overrideProject, setOverrideProject] = useState<Project | null>(null);
   const [editorData, setEditorData] = useState<Node>(() => {
     if (!isEmptyProjectData) return null;
     // Empty project should start in a usable state (no loader / no error).
@@ -161,6 +163,7 @@ export function ProjectPage({
 
   useEffect(() => {
     logger.info('ProjectPage', 'mount', { projectName: project.name });
+    setOverrideProject(null);
     if (appConfig) {
       setAppConfig(appConfig);
       logger.verbose('ProjectPage', 'appConfig applied', appConfig);
@@ -290,10 +293,13 @@ export function ProjectPage({
             if (onSaveProjectColors && resolvedProjectColors) {
               onSaveProjectColors(resolvedProjectColors);
             }
-            onSaveProject({
-              ...project,
-              data: editorData,
-            });
+            onSaveProject(
+              resolveProjectForSave({
+                project,
+                overrideProject,
+                data: editorData,
+              }),
+            );
             toast.success('Saved');
           } catch (e) {
             logger.error('ProjectPage', 'save project failed', e);
@@ -302,6 +308,7 @@ export function ProjectPage({
         }}
         onRestoreProject={() => {
           logger.info('ProjectPage', 'restore project', { name: project.name });
+          setOverrideProject(null);
           setValidationError(null);
           setValidationErrorStack(null);
           setBypassValidation(false);
@@ -341,6 +348,7 @@ export function ProjectPage({
               const { project: migratedProject } =
                 runProjectMigrations(project);
               onSaveProject(migratedProject);
+              setOverrideProject(migratedProject);
               setBypassValidation(true);
               setMigrationGate(null);
               setEditorData(migratedProject.data as unknown as Node);
@@ -494,7 +502,11 @@ export function ProjectPage({
               )}
             </div>
             {/* BOTOM BAR */}
-            <BottomBar data={editorData} setData={setEditorData} />
+            <BottomBar
+              project={project}
+              data={editorData}
+              setData={setEditorData}
+            />
             <div
               id="split-attributes-panel"
               className={`split-third${attributesPanelIsOpen ? ' is-open' : ''}`}

package/src/pages/projectPageUtils.ts

@@ -0,0 +1,14 @@
+import type { Project } from '../types/Project';
+import type { Node } from '../types/Node';
+
+export function resolveProjectForSave(args: {
+  project: Project;
+  overrideProject?: Project | null;
+  data: Node;
+}): Project {
+  const base = args.overrideProject ?? args.project;
+  return {
+    ...base,
+    data: args.data,
+  };
+}

package/src/pages/tabs/SideTool.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { JsonTextEditor } from '../../components/JsonTextEditor';
 import { Modal } from '../../modals';
 import type { Node } from '../../types/Node';
 import type { Localication } from '../../types/PreviewConfig';
@@ -7,7 +6,7 @@ import { useLogRender } from '../../utils/useLogRender';
 import { useRenderStore } from '../../store';
 import { Checkbox } from '../../components/Checkbox';
 import { LocalicationModal } from '../../modals/LocalicationModal';
-import { analyseAndProccess } from '../../utils/analyseNode';
+import { DebugJsonPage } from '../DebugJsonPage';
 
 const screenStyleDefaults = {
   light: { backgroundColor: '#FDFDFD', color: '#161827' },
@@ -215,27 +214,13 @@ export function SideTool({ data, setData }: SideToolProps) {
               className="modal--large modal--scrollable"
               contentClassName="localication-modal__content"
             >
-              <div className="modal__header localication-modal__header">
-                <button
-                  type="button"
-                  className="editor-button"
-                  onClick={() => setIsDebugModalOpen(false)}
-                >
-                  Close
-                </button>
-              </div>
-              <div className="localication-modal__body">
-                <div className="localication-modal__editor">
-                  <JsonTextEditor
-                    rootName="node"
-                    value={data ?? {}}
-                    onChange={(next) =>
-                      setData(analyseAndProccess(next as Node) as Node)
-                    }
-                    className="localication-modal__json-editor"
-                  />
-                </div>
-              </div>
+              <DebugJsonPage
+                data={data}
+                setData={setData}
+                onClose={() => setIsDebugModalOpen(false)}
+                description="Inspect and edit raw node JSON."
+                logLabel="SideTool Debug JSON"
+              />
             </Modal>
           )}
 

package/src/styles/modals/_localication-modal.scss

@@ -42,6 +42,12 @@
   overflow: auto;
 }
 
+.localication-modal__controls {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
 .localication-modal__editor {
   flex: 1;
   min-height: 0;

package/src/utils/logRenderStore.ts

@@ -0,0 +1,128 @@
+import { useRenderStore } from '../store';
+
+export type LogRenderStoreOptions = {
+  label?: string;
+  includeLocalStorage?: boolean;
+  extra?: Record<string, unknown>;
+};
+
+function isFn(value: unknown): value is (...args: unknown[]) => unknown {
+  return typeof value === 'function';
+}
+
+function safeStringify(value: unknown): string {
+  try {
+    const seen = new WeakSet<object>();
+    return JSON.stringify(
+      value,
+      (_key, v) => {
+        if (typeof v === 'function') {
+          const name = (v as Function).name;
+          return `[Function${name ? `: ${name}` : ''}]`;
+        }
+        if (typeof v === 'bigint') return v.toString();
+        if (v instanceof Error) {
+          return { name: v.name, message: v.message, stack: v.stack };
+        }
+        if (v instanceof Map) {
+          return { __type: 'Map', entries: Array.from(v.entries()) };
+        }
+        if (v instanceof Set) {
+          return { __type: 'Set', values: Array.from(v.values()) };
+        }
+        if (typeof v === 'object' && v !== null) {
+          if (seen.has(v as object)) return '[Circular]';
+          seen.add(v as object);
+        }
+        return v;
+      },
+      2,
+    );
+  } catch (e) {
+    return `<< Unable to stringify value: ${String(e)} >>`;
+  }
+}
+
+function safeParseJson(text: unknown): unknown {
+  if (typeof text !== 'string' || !text.trim()) return null;
+  try {
+    return JSON.parse(text);
+  } catch {
+    return null;
+  }
+}
+
+function safeGetPersistedRenderStore(): unknown {
+  try {
+    if (typeof localStorage === 'undefined') return null;
+    return localStorage.getItem('render-store');
+  } catch (e) {
+    return { error: String(e) };
+  }
+}
+
+export function logRenderStore(options: LogRenderStoreOptions = {}): void {
+  const { label, includeLocalStorage = true, extra } = options;
+
+  const state = useRenderStore.getState();
+  const keys = Object.keys(state as Record<string, unknown>).sort();
+
+  const snapshot: Record<string, unknown> = {};
+  const actions: string[] = [];
+
+  for (const key of keys) {
+    const v = (state as any)[key];
+    if (isFn(v)) actions.push(key);
+    else snapshot[key] = v;
+  }
+
+  const title = `[RB Debug] Render store${label ? ` (${label})` : ''}`;
+  const groupCollapsed = (console as any).groupCollapsed as unknown;
+  const groupEnd = (console as any).groupEnd as unknown;
+
+  if (isFn(groupCollapsed)) groupCollapsed(title);
+  else {
+    // eslint-disable-next-line no-console
+    console.log(title);
+  }
+
+  const persistedRaw = includeLocalStorage
+    ? safeGetPersistedRenderStore()
+    : null;
+  const persistedParsed = includeLocalStorage
+    ? safeParseJson(persistedRaw)
+    : null;
+  const json = safeStringify({
+    snapshot,
+    actions,
+    extra: extra ?? null,
+    persisted: includeLocalStorage
+      ? { raw: persistedRaw, parsed: persistedParsed }
+      : null,
+  });
+
+  // NOTE: Logging objects in devtools can be confusing because they are "live" references.
+  // This JSON string is a stable snapshot of this click, and is copy/paste-friendly.
+  // eslint-disable-next-line no-console
+  console.log('json', json);
+
+  // eslint-disable-next-line no-console
+  console.log('state', snapshot);
+  // eslint-disable-next-line no-console
+  console.log('actions', actions);
+  // eslint-disable-next-line no-console
+  console.log('rawState (includes functions)', state);
+
+  if (includeLocalStorage) {
+    // eslint-disable-next-line no-console
+    console.log('localStorage.render-store (raw)', persistedRaw);
+    // eslint-disable-next-line no-console
+    console.log('localStorage.render-store (parsed)', persistedParsed);
+  }
+  if (extra) {
+    // eslint-disable-next-line no-console
+    console.log('extra', extra);
+  }
+
+  if (isFn(groupEnd)) groupEnd();
+}

package/src/utils/patterns.ts

@@ -211,14 +211,37 @@ export function getAttributeMeta(
   const styles = p?.meta?.styles;
   const attributes = p?.meta?.attributes;
 
+  // Some patterns store style meta under `meta.attributes.styles` (nested) instead of `meta.styles`.
+  const nestedStyles =
+    attributes &&
+    typeof attributes === 'object' &&
+    (attributes as any).styles &&
+    typeof (attributes as any).styles === 'object'
+      ? ((attributes as any).styles as Record<string, AttributeMeta>)
+      : undefined;
+
+  // When `meta.attributes.styles` exists, treat `meta.attributes` (minus `styles`) as non-style meta.
+  const attributesWithoutNestedStyles =
+    attributes && typeof attributes === 'object'
+      ? Object.fromEntries(
+          Object.entries(attributes as Record<string, unknown>).filter(
+            ([k]) => k !== 'styles',
+          ),
+        )
+      : attributes;
+
   // schemaVersion=2 prefers `meta.styles` but some repos split UI meta into:
   // - meta.styles: style-tab fields
   // - meta.attributes: non-style fields (container/other)
   // Merge both to keep the editor + platform adjustments working.
   const merged =
-    styles && attributes
-      ? { ...attributes, ...styles }
-      : (styles ?? attributes);
+    styles || attributesWithoutNestedStyles || nestedStyles
+      ? {
+          ...(attributesWithoutNestedStyles as Record<string, AttributeMeta>),
+          ...(styles as Record<string, AttributeMeta>),
+          ...(nestedStyles as Record<string, AttributeMeta>),
+        }
+      : undefined;
 
   return adjustMetaForPlatform(merged, platform);
 }