@developer_tribe/react-builder 1.1.0 → 1.2.0

package/src/pages/ProjectPage.tsx

@@ -1,112 +1,520 @@
-import { useEffect, useState } from 'react';
-import { Node, RenderPage, Project } from '..';
+import { useCallback, useEffect, useState } from 'react';
+import type { Node } from '../types/Node';
+import type { Project, ProjectColors } from '../types/Project';
+import { ToastContainer, toast } from 'react-toastify';
+import { RenderPage } from '../RenderPage';
 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 { BuilderProvider } from '../components/BuilderProvider';
+import { BuilderPanel } from './tabs/BuilderPanel';
+import { BottomBar } from '../components/BottomBar';
 import { AppConfig, defaultAppConfig } from '../types/PreviewConfig';
 import { useRenderStore } from '../store';
-
-type Tab = 'builder' | 'preview' | 'debug';
-
-type ProjectPageProps = {
+import { logger } from '../utils/logger';
+import { useLogRender } from '../utils/useLogRender';
+import type { LogLevel } from '../types/Project';
+import {
+  analyseAndProccess,
+  isEmptyObject,
+  isNodeNullOrUndefined,
+} from '../utils/analyseNode';
+import { getImage, TribeAssetName } from '../utils/getImage';
+import type { PaywallBenefits } from '../paywall/types/benefits';
+import { LoadingComponent } from '../components/LoadingComponent';
+import { ProjectValidationPage } from './ProjectValidationPage';
+import { ProjectMigrationPage } from './ProjectMigrationPage';
+import { useSyncHtmlThemeClass } from '../hooks/useSyncHtmlThemeClass';
+import {
+  getMigrationPipe,
+  runProjectMigrations,
+} from '../migrations/migratePipe';
+import {
+  deleteNodeFromTree,
+  findNodeByKey,
+  isNodeRecord,
+  nodeHasChild,
+} from '../utils/nodeTree';
+import type { Fonts } from '../types/Fonts';
+import { useProjectFonts } from '../hooks/useProjectFonts';
+export type ProjectPageProps = {
   project: Project;
   onSaveProject: (project: Project) => void;
   appConfig?: AppConfig;
+  logLevel?: LogLevel;
+  projectColors?: ProjectColors;
+  onSaveProjectColors?: (colors: ProjectColors) => void;
+  name?: string;
+  fonts: Fonts;
+  // NOTE: appFont is required as a prop to force the host to think about it.
+  appFont: string | undefined;
 };
 
+const MOBILE_BREAKPOINT = 1000;
+
 export function ProjectPage({
   project,
   appConfig = defaultAppConfig,
   onSaveProject,
+  logLevel,
+  projectColors,
+  onSaveProjectColors,
+  name,
+  fonts,
+  appFont,
 }: ProjectPageProps) {
-  const [current, setCurrent] = useState<Node>(project.data);
-  const [editorData, setEditorData] = useState<Node>(project.data);
-  const [tab, setTab] = useState<Tab>('builder');
+  useLogRender('ProjectPage');
+  useSyncHtmlThemeClass();
+  useProjectFonts({ fonts, appFont });
+  const resolvedName = name ?? project.name;
+  const resolvedProjectColors = projectColors ?? project.projectColors;
+  const isEmptyProjectData =
+    isNodeNullOrUndefined(project.data) || isEmptyObject(project.data);
+  const {
+    current,
+    setCurrent,
+    setProjectColors,
+    setProjectName,
+    products,
+    benefits,
+  } = useRenderStore((s) => ({
+    current: s.current,
+    setCurrent: s.setCurrent,
+    setProjectColors: s.setProjectColors,
+    setProjectName: s.setProjectName,
+    products: s.products,
+    benefits: s.benefits,
+  }));
+  const [editorData, setEditorData] = useState<Node>(() => {
+    if (!isEmptyProjectData) return null;
+    // Empty project should start in a usable state (no loader / no error).
+    return analyseAndProccess({ type: 'Main', children: [] }) as Node;
+  });
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const [validationErrorStack, setValidationErrorStack] = useState<
+    string | null
+  >(null);
+  const [bypassValidation, setBypassValidation] = useState<boolean>(false);
+  const [migrationGate, setMigrationGate] = useState<ReturnType<
+    typeof getMigrationPipe
+  > | null>(null);
+  const [isMigrating, setIsMigrating] = useState<boolean>(false);
+  const [minLoadingDelayDone, setMinLoadingDelayDone] = useState<boolean>(
+    () => isEmptyProjectData,
+  );
+  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) => {
+      // 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?',
+        );
+        if (!shouldDeleteRoot) return;
+        setEditorData(null);
+        setCurrent(null);
+        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 });
     useRenderStore.getState().setAppConfig(appConfig);
-  }, [appConfig]);
+    logger.verbose('ProjectPage', 'appConfig applied', appConfig);
+    return () => {
+      logger.info('ProjectPage', 'unmount');
+    };
+  }, [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(() => {
+    if (isEmptyProjectData) {
+      // Don't show loading for an empty project.
+      setMinLoadingDelayDone(true);
+      return;
+    }
+    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).
+      if (!isEmptyProjectData) {
+        setEditorData(null);
+        setCurrent(null);
+      }
+      setValidationError(null);
+      setValidationErrorStack(null);
+      // Version gate: if project is older than the current schema, show migration UI.
+      const pipe = getMigrationPipe(project);
+      if (!bypassValidation && pipe.required) {
+        setMigrationGate(pipe);
+        setEditorData(null);
+        setCurrent(null);
+        return;
+      }
+      setMigrationGate(null);
+      if (bypassValidation) {
+        // Best-effort: let the user continue with the raw data even if invalid.
+        // This may still crash the preview, but it unblocks users for debugging.
+        setEditorData(project.data as unknown as Node);
+        setCurrent(project.data as unknown as Node);
+        return;
+      }
+      const inputNode: Node = isEmptyProjectData
+        ? { type: 'Main', children: [] }
+        : (project.data as Node);
+
+      const processed = analyseAndProccess(inputNode);
+      if (!processed) return;
+      setEditorData(processed);
+      setCurrent(processed);
+    } catch (error) {
+      console.error(error);
+      setValidationError(
+        error instanceof Error ? error.message : 'Node is not valid',
+      );
+      setValidationErrorStack(
+        error instanceof Error ? (error.stack ?? null) : null,
+      );
+      setEditorData(null);
+      setCurrent(null);
+    }
+  }, [project, project.data, bypassValidation, setCurrent]);
+
+  const showLoading =
+    !isEmptyProjectData && (editorData === null || !minLoadingDelayDone);
 
   return (
     <div className="container-full">
+      <ToastContainer
+        position="bottom-right"
+        autoClose={2500}
+        hideProgressBar={false}
+        newestOnTop
+        closeOnClick
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme="colored"
+      />
       <EditorHeader
         onSaveProject={() => {
-          onSaveProject({
-            ...project,
-            data: editorData,
-          });
+          try {
+            logger.info('ProjectPage', 'save project', { name: project.name });
+            if (onSaveProjectColors && resolvedProjectColors) {
+              onSaveProjectColors(resolvedProjectColors);
+            }
+            onSaveProject({
+              ...project,
+              data: editorData,
+            });
+            toast.success('Saved');
+          } catch (e) {
+            logger.error('ProjectPage', 'save project failed', e);
+            toast.error('Save failed');
+          }
+        }}
+        onRestoreProject={() => {
+          logger.info('ProjectPage', 'restore project', { name: project.name });
+          setValidationError(null);
+          setValidationErrorStack(null);
+          setBypassValidation(false);
+          setEditorData(project.data);
+          setCurrent(project.data);
         }}
         current={current}
         editorData={editorData}
         setEditorData={setEditorData}
       />
-      <div className="editor-container">
-        <div className="split-left">
-          <div>
+      {migrationGate ? (
+        <ProjectMigrationPage
+          name={resolvedName}
+          rawData={project.data}
+          projectVersion={migrationGate.projectVersion}
+          requiredVersion={migrationGate.requiredVersion}
+          pendingMigrations={migrationGate.pending.map((m) => ({
+            id: m.id,
+            title: m.title,
+            fromVersion: m.fromVersion,
+            toVersion: m.toVersion,
+          }))}
+          products={products}
+          benefits={benefits}
+          canvasBg={`url(${getImage(TribeAssetName.Background)})`}
+          migrating={isMigrating}
+          onContinueWithoutValidation={() => {
+            setBypassValidation(true);
+            setMigrationGate(null);
+            setEditorData(project.data as unknown as Node);
+            setCurrent(project.data as unknown as Node);
+            setMinLoadingDelayDone(true);
+          }}
+          onMigrateNow={() => {
+            try {
+              setIsMigrating(true);
+              const { project: migratedProject } =
+                runProjectMigrations(project);
+              onSaveProject(migratedProject);
+              setBypassValidation(true);
+              setMigrationGate(null);
+              setEditorData(migratedProject.data as unknown as Node);
+              setCurrent(migratedProject.data as unknown as Node);
+              setMinLoadingDelayDone(true);
+            } finally {
+              setIsMigrating(false);
+            }
+          }}
+        />
+      ) : validationError ? (
+        <ProjectValidationPage
+          name={resolvedName}
+          rawData={project.data}
+          validationError={validationError}
+          validationErrorStack={validationErrorStack ?? undefined}
+          products={products}
+          benefits={benefits}
+          canvasBg={`url(${getImage(TribeAssetName.Background)})`}
+          onContinueWithoutValidation={() => {
+            setBypassValidation(true);
+            setValidationError(null);
+            setValidationErrorStack(null);
+            setEditorData(project.data as unknown as Node);
+            setCurrent(project.data as unknown as Node);
+            setMinLoadingDelayDone(true);
+          }}
+        />
+      ) : (
+        <>
+          {isMobile && (
             <div
-              className="editor-tabs"
-              role="tablist"
-              aria-label="Editor tabs"
+              className="mobile-panel-toggle"
+              role="group"
+              aria-label="Editor panels"
             >
               <button
-                className={`editor-tab ${tab === 'builder' ? 'editor-tab--active' : ''}`}
-                role="tab"
-                aria-selected={tab === 'builder'}
-                onClick={() => setTab('builder')}
+                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')}
               >
-                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
-                className={`editor-tab ${tab === 'preview' ? 'editor-tab--active' : ''}`}
-                role="tab"
-                aria-selected={tab === 'preview'}
-                onClick={() => setTab('preview')}
+                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')}
               >
-                Preview Config
-              </button>
-              <button
-                className={`editor-tab ${tab === 'debug' ? 'editor-tab--active' : ''}`}
-                role="tab"
-                aria-selected={tab === 'debug'}
-                onClick={() => setTab('debug')}
-              >
-                Debug
+                <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>
-
-            {tab === 'builder' && (
-              <BuilderTab
-                data={editorData}
-                setData={setEditorData}
-                current={current}
-                setCurrent={setCurrent}
+          )}
+          <div className="editor-container">
+            <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}
+                >
+                  Close
+                </button>
+              )}
+              <div>
+                <BuilderPanel
+                  data={editorData}
+                  setData={setEditorData}
+                  onDeleteNode={handleDeleteNode}
+                />
+              </div>
+            </div>
+            <div
+              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(${getImage(
+                  TribeAssetName.Background,
+                )})`,
+              }}
+              className="split-right"
+            >
+              {showLoading && (
+                <div className="rb-loading-overlay" aria-busy="true">
+                  <LoadingComponent />
+                </div>
+              )}
+              {/* NOTE: In React Native, `products` should come from an IAP wrapper (e.g. `react-native-iap`). */}
+              {!showLoading && editorData && (
+                <BuilderProvider
+                  params={{
+                    products,
+                    benefits:
+                      benefits && typeof benefits === 'object'
+                        ? (benefits as PaywallBenefits)
+                        : {},
+                  }}
+                >
+                  <RenderPage data={editorData} name={resolvedName} />
+                </BuilderProvider>
+              )}
+            </div>
+            {/* BOTOM BAR */}
+            <BottomBar data={editorData} setData={setEditorData} />
+            <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
+                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"
+                onClick={closeMobilePanels}
               />
-            )}
-
-            {tab === 'preview' && <PreviewTab />}
-
-            {tab === 'debug' && (
-              <DebugTab data={editorData} setData={setEditorData} />
             )}
           </div>
-        </div>
-        <div className="split-right">
-          <div className="split-right-background" />
-          <RenderPage data={editorData} />
-        </div>
-        <div className="split-third">
-          <AttributesEditorPanel
-            current={current}
-            attributes={editorData}
-            onChange={(data) => {
-              setEditorData(data);
-            }}
-            setCurrent={setCurrent}
-          />
-        </div>
-      </div>
+        </>
+      )}
     </div>
   );
 }

package/src/pages/ProjectValidationPage.tsx

@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react';
+import type { Product } from '../paywall/types/paywall-types';
+import type { PaywallBenefits } from '../paywall/types/benefits';
+import { ProjectDebug } from './ProjectDebug';
+
+export type ProjectValidationPageProps = {
+  name: string;
+  rawData: unknown;
+  validationError: string;
+  validationErrorStack?: string;
+  products: Product[];
+  benefits: PaywallBenefits;
+  canvasBg?: string;
+  belowName?: ReactNode;
+  onContinueWithoutValidation?: () => void;
+};
+
+export function ProjectValidationPage({
+  name,
+  rawData,
+  validationError,
+  validationErrorStack,
+  products,
+  benefits,
+  canvasBg,
+  belowName,
+  onContinueWithoutValidation,
+}: ProjectValidationPageProps) {
+  return (
+    <ProjectDebug
+      name={name}
+      rawData={rawData}
+      validationError={validationError}
+      validationErrorStack={validationErrorStack}
+      products={products}
+      benefits={benefits}
+      canvasBg={canvasBg}
+      belowName={
+        <>
+          <div className="rb-project-validation__actions">
+            <button
+              type="button"
+              className="editor-button"
+              onClick={() => onContinueWithoutValidation?.()}
+            >
+              Continue without validation
+            </button>
+          </div>
+          {belowName}
+        </>
+      }
+    />
+  );
+}

package/src/pages/tabs/BuilderPanel.tsx

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