@developer_tribe/react-builder 1.0.6 → 1.0.7

package/src/modals/ScreenColorsModal.tsx

@@ -1,90 +1,100 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { AppConfig } from '../types/PreviewConfig';
+import { defaultAppConfig } from '../types/PreviewConfig';
 import Modal from './Modal';
 
-const screenStyleDefaults = {
-  light: { backgroundColor: '#FDFDFD', color: '#161827' },
-  dark: { backgroundColor: '#12131A', color: '#E9EBF9' },
-} as const;
+type ScreenMode = 'light' | 'dark';
+type ScreenColorKey = keyof AppConfig['screenStyle']['light'];
 
-type ScreenMode = keyof typeof screenStyleDefaults;
-type ScreenColorKey = keyof (typeof screenStyleDefaults)['light'];
+type ScreenColorsModalProps = {
+  appConfig: AppConfig;
+  onChange: (next: AppConfig) => void;
+  onClose: () => void;
+};
 
-const colorFields = [
+type ColorField = {
+  id: string;
+  label: string;
+  mode: ScreenMode;
+  key: ScreenColorKey;
+};
+
+const colorFields: ColorField[] = [
   {
     id: 'light-bg',
-    label: 'Light Background Color',
-    mode: 'light' as ScreenMode,
-    key: 'backgroundColor' as ScreenColorKey,
+    label: 'Light Background',
+    mode: 'light',
+    key: 'backgroundColor',
   },
   {
     id: 'light-color',
-    label: 'Light Color',
-    mode: 'light' as ScreenMode,
-    key: 'color' as ScreenColorKey,
+    label: 'Light Text',
+    mode: 'light',
+    key: 'color',
   },
   {
     id: 'dark-bg',
-    label: 'Dark Background Color',
-    mode: 'dark' as ScreenMode,
-    key: 'backgroundColor' as ScreenColorKey,
+    label: 'Dark Background',
+    mode: 'dark',
+    key: 'backgroundColor',
   },
   {
     id: 'dark-color',
-    label: 'Dark Color',
-    mode: 'dark' as ScreenMode,
-    key: 'color' as ScreenColorKey,
+    label: 'Dark Text',
+    mode: 'dark',
+    key: 'color',
   },
-] as const;
-
-type ScreenColorsModalProps = {
-  appConfig: AppConfig;
-  onChange: (next: AppConfig) => void;
-  onClose: () => void;
-};
+];
 
 export function ScreenColorsModal({
   appConfig,
   onChange,
   onClose,
 }: ScreenColorsModalProps) {
-  const getScreenColorValue = (mode: ScreenMode, key: ScreenColorKey) =>
-    appConfig.screenStyle?.[mode]?.[key] ?? screenStyleDefaults[mode][key];
+  const defaults = defaultAppConfig.screenStyle;
 
-  const handleScreenStyleChange = (
-    mode: ScreenMode,
-    key: ScreenColorKey,
-    value: string,
-  ) => {
+  const getValue = (mode: ScreenMode, key: ScreenColorKey) =>
+    appConfig.screenStyle?.[mode]?.[key] ?? defaults[mode][key];
+
+  const handleChange = (mode: ScreenMode, key: ScreenColorKey, value: string) =>
     onChange({
       ...appConfig,
       screenStyle: {
-        ...screenStyleDefaults,
+        ...defaults,
         ...appConfig.screenStyle,
         [mode]: {
-          ...screenStyleDefaults[mode],
+          ...defaults[mode],
           ...appConfig.screenStyle?.[mode],
           [key]: value,
         },
       },
     });
-  };
+
+  const headerDescription = useMemo(
+    () =>
+      'Edit light/dark screen background & text colors used in the preview.',
+    [],
+  );
 
   return (
     <Modal
       onClose={onClose}
-      ariaLabelledBy="screen-colors-modal-title"
-      className="modal--large modal--scrollable"
+      ariaLabelledBy="screen-colors-title"
+      contentClassName="localication-modal__content"
     >
-      <div className="modal__header">
-        <h3 id="screen-colors-modal-title" className="modal__title">
-          Screen Colors
-        </h3>
+      <div className="modal__header localication-modal__header">
+        <div className="localication-modal__header-main">
+          <h3 id="screen-colors-title" className="modal__title">
+            Screen Colors
+          </h3>
+          <p className="localication-modal__description">{headerDescription}</p>
+        </div>
         <button type="button" className="editor-button" onClick={onClose}>
           Close
         </button>
       </div>
-      <div className="modal__body">
+
+      <div className="localication-modal__body">
         <div
           style={{
             display: 'grid',
@@ -94,15 +104,13 @@ export function ScreenColorsModal({
         >
           {colorFields.map(({ id, label, mode, key }) => (
             <React.Fragment key={id}>
-              <div>{label}</div>
+              <div style={{ alignSelf: 'center' }}>{label}</div>
               <input
                 id={id}
                 type="color"
                 className="input input--color"
-                value={getScreenColorValue(mode, key)}
-                onChange={(e) =>
-                  handleScreenStyleChange(mode, key, e.target.value)
-                }
+                value={String(getValue(mode, key))}
+                onChange={(e) => handleChange(mode, key, e.target.value)}
               />
             </React.Fragment>
           ))}
@@ -111,5 +119,3 @@ export function ScreenColorsModal({
     </Modal>
   );
 }
-
-export default ScreenColorsModal;

package/src/pages/ProjectPage.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import type { Node } from '../types/Node';
 import type { Project, ProjectColors } from '../types/Project';
 import { RenderPage } from '../RenderPage';
@@ -6,6 +6,7 @@ import { EditorHeader } from '../components/EditorHeader';
 import { AttributesEditorPanel } from '../components/AttributesEditorPanel';
 import { BuilderProvider } from '../components/BuilderProvider';
 import { BuilderPanel } from './tabs/BuilderPanel';
+import { BottomBar } from '../components/BottomBar';
 import { AppConfig, defaultAppConfig } from '../types/PreviewConfig';
 import { useRenderStore } from '../store';
 import { logger } from '../utils/logger';
@@ -15,11 +16,6 @@ import { analyseAndProccess } from '../utils/analyseNode';
 import backgroundImage from '../assets/images/background.jpg';
 import type { PaywallBenefits } from '../paywall/types/benefits';
 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,
@@ -32,57 +28,48 @@ export type ProjectPageProps = {
   appConfig?: AppConfig;
   logLevel?: LogLevel;
   projectColors?: ProjectColors;
-  name: string;
+  onSaveProjectColors?: (colors: ProjectColors) => void;
+  name?: string;
 };
 
+const MOBILE_BREAKPOINT = 1000;
+
 export function ProjectPage({
   project,
   appConfig = defaultAppConfig,
   onSaveProject,
   logLevel,
   projectColors,
+  onSaveProjectColors,
   name,
 }: ProjectPageProps) {
   useLogRender('ProjectPage');
+  const resolvedName = name ?? project.name;
   const resolvedProjectColors = projectColors ?? project.projectColors;
   const {
     current,
     setCurrent,
-    setAppConfig,
     setProjectColors,
     setProjectName,
-    editorData,
-    setEditorData,
     products,
     benefits,
-  } = useRenderStore((s) => ({
+  } = 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 minLoadingDelayDone = useMinimumDelay(1000, [project.data]);
-  const {
-    isMobile,
-    mobilePanel,
-    toggleMobilePanel,
-    closeMobilePanels,
-    leftPanelIsOpen,
-    attributesPanelIsOpen,
-  } = useMobileEditorPanels();
-
-  useSyncProjectPageStore({
-    appConfig,
-    name,
-    projectColors: resolvedProjectColors,
-    setAppConfig,
-    setProjectName,
-    setProjectColors,
+  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 handleDeleteNode = useCallback(
@@ -90,14 +77,17 @@ export function ProjectPage({
       // Extra warning for deleting the root node (editorData)
       if (nodeToDelete === editorData) {
         const shouldDeleteRoot = window.confirm(
-          'You are about to delete the root component. This will clear the entire screen. Continue?',
+          'You are about to delete the root component. This will clear the entire screen. Continue?'
         );
         if (!shouldDeleteRoot) return;
         setEditorData(null);
+        setCurrent(null);
         return;
       }
       const updated: Node = deleteNodeFromTree(editorData, nodeToDelete);
+      //@ts-ignore
       setEditorData(updated);
+
       if (current === nodeToDelete) {
         setCurrent(updated);
         return;
@@ -113,45 +103,94 @@ export function ProjectPage({
         }
       }
     },
-    [editorData, current],
+    [editorData, current]
   );
 
   useEffect(() => {
     logger.info('ProjectPage', 'mount', { projectName: project.name });
+    useRenderStore.getState().setAppConfig(appConfig);
+    logger.verbose('ProjectPage', 'appConfig applied', appConfig);
     return () => {
       logger.info('ProjectPage', 'unmount');
     };
-  }, [project.name]);
+  }, [appConfig, project.name]);
+
+  useEffect(() => {
+    setProjectName(resolvedName);
+  }, [resolvedName, setProjectName]);
+
+  useEffect(() => {
+    setProjectColors(resolvedProjectColors);
+    return () => setProjectColors(undefined);
+  }, [resolvedProjectColors, setProjectColors]);
 
   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]);
 
   const showLoading = editorData === null || !minLoadingDelayDone;
 
   return (
-    <div className="container-full">
+    <div className='container-full'>
       <EditorHeader
         onSaveProject={() => {
           logger.info('ProjectPage', 'save project', { name: project.name });
+          if (onSaveProjectColors && resolvedProjectColors) {
+            onSaveProjectColors(resolvedProjectColors);
+          }
           onSaveProject({
             ...project,
             data: editorData,
@@ -162,55 +201,94 @@ export function ProjectPage({
           setEditorData(project.data);
           setCurrent(project.data);
         }}
+        current={current}
+        editorData={editorData}
+        setEditorData={setEditorData}
       />
       {isMobile && (
         <div
-          className="mobile-panel-toggle"
-          role="group"
-          aria-label="Editor panels"
+          className='mobile-panel-toggle'
+          role='group'
+          aria-label='Editor panels'
         >
-          <MobilePanelToggleButton
-            label="Builder"
-            isActive={mobilePanel === 'builder'}
-            ariaLabel="Toggle builder panel"
-            ariaControls="split-left-panel"
+          <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'
             onClick={() => toggleMobilePanel('builder')}
-          />
-          <MobilePanelToggleButton
-            label="Attributes"
-            isActive={mobilePanel === 'attributes'}
-            ariaLabel="Toggle attributes panel"
-            ariaControls="split-attributes-panel"
+          >
+            <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'
             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">
+      <div className='editor-container'>
         <div
-          id="split-left-panel"
+          id='split-left-panel'
           className={`split-left${leftPanelIsOpen ? ' is-open' : ''}`}
           aria-hidden={isMobile && !leftPanelIsOpen}
         >
           {isMobile && (
             <button
-              type="button"
-              className="split-panel__close"
-              aria-label="Close builder panel"
+              type='button'
+              className='split-panel__close'
+              aria-label='Close builder panel'
               onClick={closeMobilePanels}
             >
               Close
             </button>
           )}
           <div>
-            <BuilderPanel onDeleteNode={handleDeleteNode} />
+            <BuilderPanel
+              data={editorData}
+              setData={setEditorData}
+              onDeleteNode={handleDeleteNode}
+            />
           </div>
         </div>
         <div
-          style={{ backgroundImage: `url(${backgroundImage})` }}
-          className="split-right"
+          style={{
+            // Set as a CSS variable so `.dark .split-right` can override it.
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            ['--rb-canvas-bg' as any]: `url(${backgroundImage})`,
+          }}
+          className='split-right'
         >
           {showLoading && (
-            <div className="rb-loading-overlay" aria-busy="true">
+            <div className='rb-loading-overlay' aria-busy='true'>
               <LoadingComponent />
             </div>
           )}
@@ -225,33 +303,54 @@ export function ProjectPage({
                     : {},
               }}
             >
-              <RenderPage data={editorData} name={project.name} />
-              <BottomBar />
+              <RenderPage data={editorData} name={resolvedName} />
             </BuilderProvider>
           )}
         </div>
+        {/* BOTOM BAR */}
+        <BottomBar data={editorData} setData={setEditorData} />
         <div
-          id="split-attributes-panel"
+          id='split-attributes-panel'
           className={`split-third${attributesPanelIsOpen ? ' is-open' : ''}`}
           aria-hidden={isMobile && !attributesPanelIsOpen}
         >
           {isMobile && (
             <button
-              type="button"
-              className="split-panel__close"
-              aria-label="Close attributes panel"
+              type='button'
+              className='split-panel__close'
+              aria-label='Close attributes panel'
               onClick={closeMobilePanels}
             >
               Close
             </button>
           )}
-          <AttributesEditorPanel projectColors={resolvedProjectColors} />
+          <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
+              );
+            }}
+          />
         </div>
         {isMobile && mobilePanel && (
           <button
-            type="button"
-            className="editor-container__overlay"
-            aria-label="Close active panel"
+            type='button'
+            className='editor-container__overlay'
+            aria-label='Close active panel'
             onClick={closeMobilePanels}
           />
         )}

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,16 +15,10 @@ export function BuilderPanel({
   onDeleteNode,
 }: BuilderPanelProps) {
   useLogRender('BuilderPanel');
-  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;
+  const { current, setCurrent } = useRenderStore((s) => ({
+    current: s.current,
+    setCurrent: s.setCurrent,
+  }));
   return (
     <div
       role="region"
@@ -32,8 +26,8 @@ export function BuilderPanel({
       aria-hidden={false}
     >
       <Builder
-        data={effectiveData}
-        setData={effectiveSetData}
+        data={data}
+        setData={setData}
         current={current}
         setCurrent={setCurrent}
         onDeleteNode={onDeleteNode}