@developer_tribe/react-builder 1.0.7 → 1.0.9

package/src/pages/ProjectPage.tsx

@@ -1,6 +1,7 @@
 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';
@@ -12,10 +13,21 @@ import { useRenderStore } from '../store';
 import { logger } from '../utils/logger';
 import { useLogRender } from '../utils/useLogRender';
 import type { LogLevel } from '../types/Project';
-import { analyseAndProccess } from '../utils/analyseNode';
-import backgroundImage from '../assets/images/background.jpg';
+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,
@@ -44,8 +56,11 @@ export function ProjectPage({
   name,
 }: ProjectPageProps) {
   useLogRender('ProjectPage');
+  useSyncHtmlThemeClass();
   const resolvedName = name ?? project.name;
   const resolvedProjectColors = projectColors ?? project.projectColors;
+  const isEmptyProjectData =
+    isNodeNullOrUndefined(project.data) || isEmptyObject(project.data);
   const {
     current,
     setCurrent,
@@ -53,7 +68,7 @@ export function ProjectPage({
     setProjectName,
     products,
     benefits,
-  } = useRenderStore(s => ({
+  } = useRenderStore((s) => ({
     current: s.current,
     setCurrent: s.setCurrent,
     setProjectColors: s.setProjectColors,
@@ -61,9 +76,23 @@ export function ProjectPage({
     products: s.products,
     benefits: s.benefits,
   }));
-  const [editorData, setEditorData] = useState<Node>(null);
-  const [minLoadingDelayDone, setMinLoadingDelayDone] =
-    useState<boolean>(false);
+  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);
@@ -77,7 +106,7 @@ 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);
@@ -103,7 +132,7 @@ export function ProjectPage({
         }
       }
     },
-    [editorData, current]
+    [editorData, current],
   );
 
   useEffect(() => {
@@ -144,7 +173,7 @@ export function ProjectPage({
   }, [isMobile]);
 
   const toggleMobilePanel = (panel: 'builder' | 'attributes') => {
-    setMobilePanel(prev => (prev === panel ? null : panel));
+    setMobilePanel((prev) => (prev === panel ? null : panel));
   };
 
   const closeMobilePanels = () => {
@@ -155,6 +184,11 @@ export function ProjectPage({
   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);
@@ -164,40 +198,87 @@ export function ProjectPage({
     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) {
+      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.data]);
+  }, [project, project.data, bypassValidation, setCurrent]);
 
-  const showLoading = editorData === null || !minLoadingDelayDone;
+  const showLoading =
+    !isEmptyProjectData && (editorData === null || !minLoadingDelayDone);
 
   return (
-    <div className='container-full'>
+    <div className="container-full">
+      <ToastContainer
+        position="bottom-right"
+        autoClose={2500}
+        hideProgressBar={false}
+        newestOnTop
+        closeOnClick
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme="colored"
+      />
       <EditorHeader
         onSaveProject={() => {
-          logger.info('ProjectPage', 'save project', { name: project.name });
-          if (onSaveProjectColors && resolvedProjectColors) {
-            onSaveProjectColors(resolvedProjectColors);
+          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');
           }
-          onSaveProject({
-            ...project,
-            data: editorData,
-          });
         }}
         onRestoreProject={() => {
           logger.info('ProjectPage', 'restore project', { name: project.name });
+          setValidationError(null);
+          setValidationErrorStack(null);
+          setBypassValidation(false);
           setEditorData(project.data);
           setCurrent(project.data);
         }}
@@ -205,156 +286,227 @@ export function ProjectPage({
         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
-          id='split-left-panel'
-          className={`split-left${leftPanelIsOpen ? ' is-open' : ''}`}
-          aria-hidden={isMobile && !leftPanelIsOpen}
-        >
+      {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 && (
-            <button
-              type='button'
-              className='split-panel__close'
-              aria-label='Close builder panel'
-              onClick={closeMobilePanels}
+            <div
+              className="mobile-panel-toggle"
+              role="group"
+              aria-label="Editor panels"
             >
-              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(${backgroundImage})`,
-          }}
-          className='split-right'
-        >
-          {showLoading && (
-            <div className='rb-loading-overlay' aria-busy='true'>
-              <LoadingComponent />
+              <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>
           )}
-          {/* 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)
-                    : {},
+          <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"
             >
-              <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}
+              {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}
             >
-              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}
-          />
-        )}
-      </div>
+              {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}
+              />
+            )}
+          </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}
+        </>
+      }
+    />
+  );
+}