@developer_tribe/react-builder 1.0.1 → 1.0.3

package/src/pages/ProjectPage.tsx

@@ -1,35 +1,76 @@
-import { useEffect, useState } from 'react';
-import { Node, RenderPage, Project } from '..';
+import { useCallback, useEffect, useState } from 'react';
+import { Node, NodeData, RenderPage, Project, ProjectColors } from '..';
 import { EditorHeader } from '../components/EditorHeader';
 import { AttributesEditorPanel } from '../components/AttributesEditorPanel';
-import { BuilderTab } from './tabs/BuilderTab';
-import { PreviewTab } from './tabs/PreviewTab';
-import { DebugTab } from './tabs/DebugTab';
+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';
 import { useLogRender } from '../utils/useLogRender';
 import type { LogLevel } from '../types/Project';
-
-export type Tab = 'builder' | 'preview' | 'debug';
-
+import { analyseAndProccess } from '../utils/analyseNode';
+import backgroundImage from '../assets/images/background.jpg';
 export type ProjectPageProps = {
   project: Project;
   onSaveProject: (project: Project) => void;
   appConfig?: AppConfig;
   logLevel?: LogLevel;
+  projectColors?: ProjectColors;
 };
 
+const MOBILE_BREAKPOINT = 1000;
+
 export function ProjectPage({
   project,
   appConfig = defaultAppConfig,
   onSaveProject,
   logLevel,
+  projectColors,
 }: ProjectPageProps) {
   useLogRender('ProjectPage');
-  const [current, setCurrent] = useState<Node>(project.data);
-  const [editorData, setEditorData] = useState<Node>(project.data);
-  const [tab, setTab] = useState<Tab>('builder');
+  const resolvedProjectColors = projectColors ?? project.projectColors;
+  const { current, setCurrent, setProjectColors } = useRenderStore((s) => ({
+    current: s.current,
+    setCurrent: s.setCurrent,
+    setProjectColors: s.setProjectColors,
+  }));
+  const [editorData, setEditorData] = useState<Node>(null);
+  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(
+    (nodeToDelete: Node) => {
+      // Do not allow deleting the root node
+      if (nodeToDelete === editorData) {
+        return;
+      }
+      const updated: Node = deleteNodeFromTree(editorData, nodeToDelete);
+      //@ts-ignore
+      setEditorData(updated);
+
+      if (current === nodeToDelete) {
+        setCurrent(updated);
+        return;
+      }
+
+      if (isNodeRecord(current) && nodeHasChild(current, nodeToDelete)) {
+        const currentKey = current.key;
+        if (currentKey) {
+          const nextCurrent = findNodeByKey(updated, currentKey);
+          setCurrent(nextCurrent ?? updated);
+        } else {
+          setCurrent(updated);
+        }
+      }
+    },
+    [editorData, current],
+  );
 
   useEffect(() => {
     logger.info('ProjectPage', 'mount', { projectName: project.name });
@@ -40,11 +81,59 @@ export function ProjectPage({
     };
   }, [appConfig, project.name]);
 
+  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(() => {
+    try {
+      const processed = analyseAndProccess(project.data);
+      if (!processed) {
+        setEditorData(null);
+        setCurrent(null);
+        return;
+      }
+      setEditorData(processed);
+      setCurrent(processed);
+    } catch (error) {
+      // eslint-disable-next-line no-alert
+      alert('Duplicate node key detected. Please check your project data.');
+      setEditorData(null);
+      setCurrent(null);
+    }
+  }, [project.data]);
+
   return (
     <div className="container-full">
       <EditorHeader
@@ -55,77 +144,119 @@ export function ProjectPage({
             data: editorData,
           });
         }}
+        onRestoreProject={() => {
+          logger.info('ProjectPage', 'restore project', { name: project.name });
+          setEditorData(project.data);
+          setCurrent(project.data);
+        }}
         current={current}
         editorData={editorData}
         setEditorData={setEditorData}
       />
+      {isMobile && (
+        <div
+          className="mobile-panel-toggle"
+          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"
+            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"
+            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="split-left">
-          <div>
-            <div
-              className="editor-tabs"
-              role="tablist"
-              aria-label="Editor tabs"
+        <div
+          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"
+              onClick={closeMobilePanels}
             >
-              <button
-                className={`editor-tab ${tab === 'builder' ? 'editor-tab--active' : ''}`}
-                role="tab"
-                aria-selected={tab === 'builder'}
-                onClick={() => {
-                  setTab('builder');
-                  logger.info('ProjectPage', 'tab change', { to: 'builder' });
-                }}
-              >
-                Builder
-              </button>
-              <button
-                className={`editor-tab ${tab === 'preview' ? 'editor-tab--active' : ''}`}
-                role="tab"
-                aria-selected={tab === 'preview'}
-                onClick={() => {
-                  setTab('preview');
-                  logger.info('ProjectPage', 'tab change', { to: 'preview' });
-                }}
-              >
-                Preview Config
-              </button>
-              <button
-                className={`editor-tab ${tab === 'debug' ? 'editor-tab--active' : ''}`}
-                role="tab"
-                aria-selected={tab === 'debug'}
-                onClick={() => {
-                  setTab('debug');
-                  logger.info('ProjectPage', 'tab change', { to: 'debug' });
-                }}
-              >
-                Debug
-              </button>
-            </div>
-
-            {tab === 'builder' && (
-              <BuilderTab
-                data={editorData}
-                setData={setEditorData}
-                current={current}
-                setCurrent={setCurrent}
-              />
-            )}
-
-            {tab === 'preview' && <PreviewTab />}
-
-            {tab === 'debug' && (
-              <DebugTab data={editorData} setData={setEditorData} />
-            )}
+              Close
+            </button>
+          )}
+          <div>
+            <BuilderPanel
+              data={editorData}
+              setData={setEditorData}
+              onDeleteNode={handleDeleteNode}
+            />
           </div>
         </div>
         <div className="split-right">
-          <div className="split-right-background" />
-          <RenderPage data={editorData} />
+          <div className="split-right__controls">
+            <SideTool data={editorData} setData={setEditorData} />
+          </div>
+          <div
+            className="split-right-background"
+            style={{
+              backgroundImage: `url(${backgroundImage})`,
+            }}
+          />
+          {editorData && <RenderPage data={editorData} name={project.name} />}
         </div>
-        <div className="split-third">
+        <div
+          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"
+              onClick={closeMobilePanels}
+            >
+              Close
+            </button>
+          )}
           <AttributesEditorPanel
-            current={current}
             attributes={editorData}
+            projectColors={resolvedProjectColors}
             onChange={(data) => {
               setEditorData(data);
               let nodeKey: string | undefined = undefined;
@@ -143,10 +274,115 @@ export function ProjectPage({
                 nodeKey ? { nodeKey } : undefined,
               );
             }}
-            setCurrent={setCurrent}
           />
         </div>
+        {isMobile && mobilePanel && (
+          <button
+            type="button"
+            className="editor-container__overlay"
+            aria-label="Close active panel"
+            onClick={closeMobilePanels}
+          />
+        )}
       </div>
     </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/{BuilderTab.tsx → BuilderPanel.tsx}

@@ -1,24 +1,27 @@
 import { Node } from '../..';
 import { useLogRender } from '../../utils/useLogRender';
 import { Builder } from '../../components/Builder';
+import { useRenderStore } from '../../store';
 
-type BuilderTabProps = {
+type BuilderPanelProps = {
   data: Node;
   setData: (data: Node) => void;
-  current: Node;
-  setCurrent: (current: Node) => void;
+  onDeleteNode: (node: Node) => void;
 };
 
-export function BuilderTab({
+export function BuilderPanel({
   data,
   setData,
-  current,
-  setCurrent,
-}: BuilderTabProps) {
-  useLogRender('BuilderTab');
+  onDeleteNode,
+}: BuilderPanelProps) {
+  useLogRender('BuilderPanel');
+  const { current, setCurrent } = useRenderStore((s) => ({
+    current: s.current,
+    setCurrent: s.setCurrent,
+  }));
   return (
     <div
-      role="tabpanel"
+      role="region"
       className="editor-panel-builder editor-panel editor-panel--active"
       aria-hidden={false}
     >
@@ -27,6 +30,7 @@ export function BuilderTab({
         setData={setData}
         current={current}
         setCurrent={setCurrent}
+        onDeleteNode={onDeleteNode}
       />
     </div>
   );