@developer_tribe/react-builder 1.0.5 → 1.0.6

package/src/pages/ProjectPage.tsx

@@ -1,12 +1,11 @@
-import { useCallback, useEffect, useState } from 'react';
-import type { Node, NodeData } from '../types/Node';
+import { useCallback, useEffect } from 'react';
+import type { Node } from '../types/Node';
 import type { Project, ProjectColors } from '../types/Project';
 import { RenderPage } from '../RenderPage';
 import { EditorHeader } from '../components/EditorHeader';
 import { AttributesEditorPanel } from '../components/AttributesEditorPanel';
 import { BuilderProvider } from '../components/BuilderProvider';
 import { BuilderPanel } from './tabs/BuilderPanel';
-import { SideTool } from './tabs/SideTool';
 import { AppConfig, defaultAppConfig } from '../types/PreviewConfig';
 import { useRenderStore } from '../store';
 import { logger } from '../utils/logger';
@@ -15,8 +14,18 @@ import type { LogLevel } from '../types/Project';
 import { analyseAndProccess } from '../utils/analyseNode';
 import backgroundImage from '../assets/images/background.jpg';
 import type { PaywallBenefits } from '../paywall/types/benefits';
-import Lottie from 'lottie-react';
-import loadingAnimation from '../assets/loading_animation.json';
+import { LoadingComponent } from '../components/LoadingComponent';
+import { MobilePanelToggleButton } from '../components/MobilePanelToggleButton';
+import { BottomBar } from '../components/BottomBar';
+import { useMobileEditorPanels } from '../hooks/useMobileEditorPanels';
+import { useSyncProjectPageStore } from '../hooks/useSyncProjectPageStore';
+import { useMinimumDelay } from '../hooks/useMinimumDelay';
+import {
+  deleteNodeFromTree,
+  findNodeByKey,
+  isNodeRecord,
+  nodeHasChild,
+} from '../utils/nodeTree';
 export type ProjectPageProps = {
   project: Project;
   onSaveProject: (project: Project) => void;
@@ -26,8 +35,6 @@ export type ProjectPageProps = {
   name: string;
 };
 
-const MOBILE_BREAKPOINT = 1000;
-
 export function ProjectPage({
   project,
   appConfig = defaultAppConfig,
@@ -41,27 +48,41 @@ export function ProjectPage({
   const {
     current,
     setCurrent,
+    setAppConfig,
     setProjectColors,
     setProjectName,
+    editorData,
+    setEditorData,
     products,
     benefits,
   } = useRenderStore((s) => ({
     current: s.current,
     setCurrent: s.setCurrent,
+    setAppConfig: s.setAppConfig,
     setProjectColors: s.setProjectColors,
     setProjectName: s.setProjectName,
+    editorData: s.editorData,
+    setEditorData: s.setEditorData,
     products: s.products,
     benefits: s.benefits,
   }));
-  const [editorData, setEditorData] = useState<Node>(null);
-  const [minLoadingDelayDone, setMinLoadingDelayDone] =
-    useState<boolean>(false);
-  const [mobilePanel, setMobilePanel] = useState<
-    'builder' | 'attributes' | null
-  >(null);
-  const [isMobile, setIsMobile] = useState<boolean>(() => {
-    if (typeof window === 'undefined') return false;
-    return window.innerWidth <= MOBILE_BREAKPOINT;
+  const minLoadingDelayDone = useMinimumDelay(1000, [project.data]);
+  const {
+    isMobile,
+    mobilePanel,
+    toggleMobilePanel,
+    closeMobilePanels,
+    leftPanelIsOpen,
+    attributesPanelIsOpen,
+  } = useMobileEditorPanels();
+
+  useSyncProjectPageStore({
+    appConfig,
+    name,
+    projectColors: resolvedProjectColors,
+    setAppConfig,
+    setProjectName,
+    setProjectColors,
   });
 
   const handleDeleteNode = useCallback(
@@ -73,13 +94,10 @@ export function ProjectPage({
         );
         if (!shouldDeleteRoot) return;
         setEditorData(null);
-        setCurrent(null);
         return;
       }
       const updated: Node = deleteNodeFromTree(editorData, nodeToDelete);
-      //@ts-ignore
       setEditorData(updated);
-
       if (current === nodeToDelete) {
         setCurrent(updated);
         return;
@@ -100,76 +118,30 @@ export function ProjectPage({
 
   useEffect(() => {
     logger.info('ProjectPage', 'mount', { projectName: project.name });
-    useRenderStore.getState().setAppConfig(appConfig);
-    logger.verbose('ProjectPage', 'appConfig applied', appConfig);
     return () => {
       logger.info('ProjectPage', 'unmount');
     };
-  }, [appConfig, project.name]);
-
-  useEffect(() => {
-    setProjectName(name);
-  }, [name, setProjectName]);
-
-  useEffect(() => {
-    setProjectColors(resolvedProjectColors);
-    return () => setProjectColors(undefined);
-  }, [resolvedProjectColors, setProjectColors]);
+  }, [project.name]);
 
   useEffect(() => {
     if (!logLevel) return;
     logger.setLevel(logLevel);
   }, [logLevel]);
 
-  useEffect(() => {
-    function handleResize() {
-      setIsMobile(window.innerWidth <= MOBILE_BREAKPOINT);
-    }
-
-    handleResize();
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  useEffect(() => {
-    setMobilePanel(null);
-  }, [isMobile]);
-
-  const toggleMobilePanel = (panel: 'builder' | 'attributes') => {
-    setMobilePanel((prev) => (prev === panel ? null : panel));
-  };
-
-  const closeMobilePanels = () => {
-    setMobilePanel(null);
-  };
-
-  const leftPanelIsOpen = !isMobile || mobilePanel === 'builder';
-  const attributesPanelIsOpen = !isMobile || mobilePanel === 'attributes';
-
-  useEffect(() => {
-    setMinLoadingDelayDone(false);
-    const timer = setTimeout(() => setMinLoadingDelayDone(true), 1000);
-    return () => clearTimeout(timer);
-  }, [project.data]);
-
   useEffect(() => {
     try {
       // Reset to "loading" immediately on project change so the loader is shown
       // until a valid node is available (and for at least 2 seconds).
       setEditorData(null);
-      setCurrent(null);
       const processed = analyseAndProccess(project.data);
       if (!processed) {
         setEditorData(null);
-        setCurrent(null);
         return;
       }
       setEditorData(processed);
-      setCurrent(processed);
     } catch (error) {
       console.error(error);
       setEditorData(null);
-      setCurrent(null);
     }
   }, [project.data]);
 
@@ -190,9 +162,6 @@ export function ProjectPage({
           setEditorData(project.data);
           setCurrent(project.data);
         }}
-        current={current}
-        editorData={editorData}
-        setEditorData={setEditorData}
       />
       {isMobile && (
         <div
@@ -200,48 +169,20 @@ export function ProjectPage({
           role="group"
           aria-label="Editor panels"
         >
-          <button
-            type="button"
-            className={`mobile-panel-toggle__button${mobilePanel === 'builder' ? ' mobile-panel-toggle__button--active' : ''}`}
-            aria-label="Toggle builder panel"
-            aria-expanded={mobilePanel === 'builder'}
-            aria-controls="split-left-panel"
+          <MobilePanelToggleButton
+            label="Builder"
+            isActive={mobilePanel === 'builder'}
+            ariaLabel="Toggle builder panel"
+            ariaControls="split-left-panel"
             onClick={() => toggleMobilePanel('builder')}
-          >
-            <span className="mobile-panel-toggle__icon" aria-hidden="true">
-              <svg viewBox="0 0 16 12" role="presentation" focusable="false">
-                <path
-                  d="M1 1h14M1 6h14M1 11h14"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  fill="none"
-                />
-              </svg>
-            </span>
-            <span className="mobile-panel-toggle__label">Builder</span>
-          </button>
-          <button
-            type="button"
-            className={`mobile-panel-toggle__button${mobilePanel === 'attributes' ? ' mobile-panel-toggle__button--active' : ''}`}
-            aria-label="Toggle attributes panel"
-            aria-expanded={mobilePanel === 'attributes'}
-            aria-controls="split-attributes-panel"
+          />
+          <MobilePanelToggleButton
+            label="Attributes"
+            isActive={mobilePanel === 'attributes'}
+            ariaLabel="Toggle attributes panel"
+            ariaControls="split-attributes-panel"
             onClick={() => toggleMobilePanel('attributes')}
-          >
-            <span className="mobile-panel-toggle__icon" aria-hidden="true">
-              <svg viewBox="0 0 16 12" role="presentation" focusable="false">
-                <path
-                  d="M1 1h14M1 6h14M1 11h14"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  fill="none"
-                />
-              </svg>
-            </span>
-            <span className="mobile-panel-toggle__label">Attributes</span>
-          </button>
+          />
         </div>
       )}
       <div className="editor-container">
@@ -261,19 +202,13 @@ export function ProjectPage({
             </button>
           )}
           <div>
-            <BuilderPanel
-              data={editorData}
-              setData={setEditorData}
-              onDeleteNode={handleDeleteNode}
-            />
+            <BuilderPanel onDeleteNode={handleDeleteNode} />
           </div>
         </div>
         <div
           style={{ backgroundImage: `url(${backgroundImage})` }}
           className="split-right"
         >
-          <SideTool data={editorData} setData={setEditorData} />
-
           {showLoading && (
             <div className="rb-loading-overlay" aria-busy="true">
               <LoadingComponent />
@@ -291,6 +226,7 @@ export function ProjectPage({
               }}
             >
               <RenderPage data={editorData} name={project.name} />
+              <BottomBar />
             </BuilderProvider>
           )}
         </div>
@@ -309,27 +245,7 @@ export function ProjectPage({
               Close
             </button>
           )}
-          <AttributesEditorPanel
-            attributes={editorData}
-            projectColors={resolvedProjectColors}
-            onChange={(data) => {
-              setEditorData(data);
-              let nodeKey: string | undefined = undefined;
-              if (
-                data &&
-                typeof data === 'object' &&
-                !Array.isArray(data) &&
-                'key' in (data as any)
-              ) {
-                nodeKey = (data as any).key as string | undefined;
-              }
-              logger.verbose(
-                'ProjectPage',
-                'attributes change',
-                nodeKey ? { nodeKey } : undefined,
-              );
-            }}
-          />
+          <AttributesEditorPanel projectColors={resolvedProjectColors} />
         </div>
         {isMobile && mobilePanel && (
           <button
@@ -343,109 +259,3 @@ export function ProjectPage({
     </div>
   );
 }
-
-function LoadingComponent() {
-  return (
-    <div className="rb-loading">
-      <Lottie animationData={loadingAnimation as any} loop autoplay />
-    </div>
-  );
-}
-
-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;
-}
-
-function isNodeRecord(node: Node): node is NodeData {
-  return (
-    node !== null &&
-    node !== undefined &&
-    typeof node === 'object' &&
-    !Array.isArray(node)
-  );
-}
-
-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;
-}
-
-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/pages/tabs/BuilderPanel.tsx

@@ -4,8 +4,8 @@ import { Builder } from '../../components/Builder';
 import { useRenderStore } from '../../store';
 
 type BuilderPanelProps = {
-  data: Node;
-  setData: (data: Node) => void;
+  data?: Node;
+  setData?: (data: Node) => void;
   onDeleteNode: (node: Node) => void;
 };
 
@@ -15,10 +15,16 @@ export function BuilderPanel({
   onDeleteNode,
 }: BuilderPanelProps) {
   useLogRender('BuilderPanel');
-  const { current, setCurrent } = useRenderStore((s) => ({
-    current: s.current,
-    setCurrent: s.setCurrent,
-  }));
+  const { current, setCurrent, editorData, setEditorData } = useRenderStore(
+    (s) => ({
+      current: s.current,
+      setCurrent: s.setCurrent,
+      editorData: s.editorData,
+      setEditorData: s.setEditorData,
+    }),
+  );
+  const effectiveData = data ?? editorData;
+  const effectiveSetData = setData ?? setEditorData;
   return (
     <div
       role="region"
@@ -26,8 +32,8 @@ export function BuilderPanel({
       aria-hidden={false}
     >
       <Builder
-        data={data}
-        setData={setData}
+        data={effectiveData}
+        setData={effectiveSetData}
         current={current}
         setCurrent={setCurrent}
         onDeleteNode={onDeleteNode}

package/src/store.ts

@@ -1,13 +1,8 @@
 import { createWithEqualityFn } from 'zustand/traditional';
 import { shallow } from 'zustand/shallow';
 import type { Device } from './types/Device';
-import {
-  defaultAppConfig,
-  type AppConfig,
-  type Localication,
-} from './types/PreviewConfig';
+import { defaultAppConfig, type AppConfig } from './types/PreviewConfig';
 import { getDefaultDevice } from './utils/getDevices';
-import { ScreenStyle } from './RenderPage';
 import { createJSONStorage, persist } from 'zustand/middleware';
 import { Node } from './types/Node';
 import type { LogEntry, LogLevel, ProjectColors } from './types/Project';
@@ -20,6 +15,12 @@ import type {
 type RenderStore = {
   projectName: string;
   setProjectName: (name: string) => void;
+  /**
+   * Root node tree being edited (a.k.a. "editor data").
+   * Not persisted: it comes from the currently opened project.
+   */
+  editorData: Node | null;
+  setEditorData: (data: Node | null) => void;
   copiedNode: Node | null;
   setCopiedNode: (node: Node | null) => void;
   current: Node | null;
@@ -66,6 +67,8 @@ export const useRenderStore = createWithEqualityFn<RenderStore>()(
     (set) => ({
       projectName: '',
       setProjectName: (name) => set({ projectName: name }),
+      editorData: null,
+      setEditorData: (data) => set({ editorData: data, current: data }),
       copiedNode: null,
       setCopiedNode: (node) => set({ copiedNode: node }),
       current: null,
@@ -193,6 +196,7 @@ export const useRenderStore = createWithEqualityFn<RenderStore>()(
       name: 'render-store',
       partialize: (state) => ({
         // Explicitly DO NOT persist projectName (it comes from ProjectPage props)
+        // Explicitly DO NOT persist editorData/current (they come from the opened project)
         copiedNode: state.copiedNode ?? null,
         logLevel: state.logLevel,
         products: state.products,

package/src/styles/base/_global.scss

@@ -165,6 +165,7 @@ body,
   display: flex;
   align-items: center;
   gap: sizes.$spaceCozy;
+  flex-wrap: wrap;
   font-size: 12px;
   color: colors.$mutedTextColor;
 }
@@ -200,11 +201,15 @@ body,
   display: flex;
   align-items: center;
   gap: sizes.$spaceCompact;
+  flex-wrap: wrap;
+  row-gap: sizes.$spaceTight;
 }
 
 .breadcrumb__item {
   display: inline-flex;
   align-items: center;
+  max-width: 100%;
+  overflow-wrap: anywhere;
   &--clickable {
     cursor: pointer;
   }
@@ -212,7 +217,7 @@ body,
 
 .breadcrumb__separator {
   color: colors.$borderColor;
-  margin: 0 sizes.$spaceTight;
+  margin: 0;
 }
 
 .breadcrumb__link {
@@ -384,9 +389,6 @@ body,
     top: sizes.$spaceCozy;
     z-index: 5;
     padding-bottom: sizes.$spaceCozy;
-    .side-tool {
-      width: 100%;
-    }
   }
 }
 .screen-preview {
@@ -395,6 +397,12 @@ body,
   height: 100%;
 }
 
+// Custom blue/glow cursor while preview mode is enabled
+.screen-preview--preview {
+  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cdefs%3E%3Cfilter%20id='g'%20x='-50%25'%20y='-50%25'%20width='200%25'%20height='200%25'%3E%3CfeDropShadow%20dx='0'%20dy='0'%20stdDeviation='1.6'%20flood-color='%2360a5fa'%20flood-opacity='0.95'/%3E%3C/filter%3E%3C/defs%3E%3Cpath%20filter='url(%23g)'%20d='M6%202%20L6%2022%20L11%2017%20L15%2027%20L18%2026%20L14%2016%20L21%2016%20Z'%20fill='%2360a5fa'%20stroke='%231d4ed8'%20stroke-width='1'/%3E%3C/svg%3E") 6 2,
+    pointer;
+}
+
 /* ProjectPage loading overlay */
 .rb-loading-overlay {
   position: absolute;

package/src/styles/components/_attributes-editor.scss

@@ -190,8 +190,16 @@
     border-radius: sizes.$radiusSoft;
     font-size: sizes.$fontSizeSm;
     line-height: 1.4;
-    width: sizes.$dimensionSizeGridMax;
+    // Prevent long descriptions (e.g. URLs or long tokens) from overflowing the tooltip bubble.
+    width: min(
+      sizes.$dimensionSizeGridMax,
+      calc(100vw - (2 * sizes.$spaceComfy))
+    );
     text-align: left;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+    hyphens: auto;
     box-shadow: sizes.$shadowTooltip;
     z-index: sizes.$zIndexRaised;
     opacity: 0;

package/src/styles/components/_bottom-bar.scss

@@ -0,0 +1,113 @@
+@use '../foundation/colors';
+
+.rb-bottom-bar {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-66%);
+  bottom: 10px;
+
+  height: 50px;
+  border-radius: 24px;
+
+  background-color: #fff;
+  color: colors.$textColor;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+
+  padding: 0 10px;
+  gap: 10px;
+
+  border: 1px solid rgba(colors.$textColor, 0.06);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+}
+
+.rb-bottom-bar__button {
+  appearance: none;
+  border: none;
+  background: transparent;
+  padding: 8px;
+  /* lighter icon color */
+  color: colors.$mutedTextColor;
+  cursor: pointer;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rb-bottom-bar__button.is-active {
+  color: colors.$accentColor;
+  background: rgba(colors.$accentColor, 0.08);
+  box-shadow: 0 0 18px rgba(colors.$accentColor, 0.28);
+}
+
+.rb-bottom-bar__button--preview.is-active {
+  // make preview cursor extra obvious
+  box-shadow:
+    0 0 0 3px rgba(colors.$accentColor, 0.18),
+    0 0 26px rgba(colors.$accentColor, 0.35);
+}
+
+.rb-bottom-bar__button:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 3px rgba(colors.$accentColor, 0.18),
+    0 0 18px rgba(colors.$accentColor, 0.22);
+}
+
+/* border between each tool button */
+.rb-bottom-bar__button + .rb-bottom-bar__button {
+  border-left: 1px solid rgba(colors.$textColor, 0.06);
+  padding-left: 14px;
+  margin-left: 4px;
+}
+
+.rb-bottom-bar__button--rtl {
+  gap: 6px;
+  padding-right: 10px;
+}
+
+.rb-bottom-bar__rtl-text {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+  color: colors.$textColor;
+}
+
+.rb-bottom-bar__spacer {
+  flex: 1 1 auto;
+}
+
+.rb-bottom-bar__langs {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  color: colors.$textColor;
+}
+
+.rb-bottom-bar__lang {
+  appearance: none;
+  border: none;
+  background: transparent;
+  padding: 6px 6px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: lowercase;
+  color: inherit;
+}
+
+.rb-bottom-bar__lang.is-active {
+  color: colors.$accentColor;
+  text-shadow: 0 0 12px rgba(colors.$accentColor, 0.25);
+}
+
+/* border between each language button */
+.rb-bottom-bar__lang + .rb-bottom-bar__lang {
+  border-left: 1px solid rgba(colors.$textColor, 0.06);
+  margin-left: 8px;
+  padding-left: 14px;
+}