@developer_tribe/react-builder 1.0.4 → 1.0.6

package/src/modals/ScreenColorsModal.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import type { AppConfig } from '../types/PreviewConfig';
+import Modal from './Modal';
+
+const screenStyleDefaults = {
+  light: { backgroundColor: '#FDFDFD', color: '#161827' },
+  dark: { backgroundColor: '#12131A', color: '#E9EBF9' },
+} as const;
+
+type ScreenMode = keyof typeof screenStyleDefaults;
+type ScreenColorKey = keyof (typeof screenStyleDefaults)['light'];
+
+const colorFields = [
+  {
+    id: 'light-bg',
+    label: 'Light Background Color',
+    mode: 'light' as ScreenMode,
+    key: 'backgroundColor' as ScreenColorKey,
+  },
+  {
+    id: 'light-color',
+    label: 'Light Color',
+    mode: 'light' as ScreenMode,
+    key: 'color' as ScreenColorKey,
+  },
+  {
+    id: 'dark-bg',
+    label: 'Dark Background Color',
+    mode: 'dark' as ScreenMode,
+    key: 'backgroundColor' as ScreenColorKey,
+  },
+  {
+    id: 'dark-color',
+    label: 'Dark Color',
+    mode: 'dark' as ScreenMode,
+    key: 'color' as ScreenColorKey,
+  },
+] 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 handleScreenStyleChange = (
+    mode: ScreenMode,
+    key: ScreenColorKey,
+    value: string,
+  ) => {
+    onChange({
+      ...appConfig,
+      screenStyle: {
+        ...screenStyleDefaults,
+        ...appConfig.screenStyle,
+        [mode]: {
+          ...screenStyleDefaults[mode],
+          ...appConfig.screenStyle?.[mode],
+          [key]: value,
+        },
+      },
+    });
+  };
+
+  return (
+    <Modal
+      onClose={onClose}
+      ariaLabelledBy="screen-colors-modal-title"
+      className="modal--large modal--scrollable"
+    >
+      <div className="modal__header">
+        <h3 id="screen-colors-modal-title" className="modal__title">
+          Screen Colors
+        </h3>
+        <button type="button" className="editor-button" onClick={onClose}>
+          Close
+        </button>
+      </div>
+      <div className="modal__body">
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+            gap: 12,
+          }}
+        >
+          {colorFields.map(({ id, label, mode, key }) => (
+            <React.Fragment key={id}>
+              <div>{label}</div>
+              <input
+                id={id}
+                type="color"
+                className="input input--color"
+                value={getScreenColorValue(mode, key)}
+                onChange={(e) =>
+                  handleScreenStyleChange(mode, key, e.target.value)
+                }
+              />
+            </React.Fragment>
+          ))}
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+export default ScreenColorsModal;

package/src/modals/index.ts

@@ -2,4 +2,11 @@ export { default as Modal } from './Modal';
 export { AddComponentModal } from './AddComponentModal';
 export { DeviceSelectorModal } from './DeviceSelectorModal';
 export { ColorModal } from './ColorModal';
+export { IconPickerModal } from './IconPickerModal';
 export { LocalicationModal } from './LocalicationModal';
+export { ScreenColorsModal } from './ScreenColorsModal';
+export { MockableFeatureModal } from './MockableFeatureModal';
+export { ProductEditModal } from './ProductEditModal';
+export { ProductPresetsModal } from './ProductPresetsModal';
+export { BenefitEditModal } from './BenefitEditModal';
+export { BenefitPresetsModal } from './BenefitPresetsModal';

package/src/pages/ProjectPage.tsx

@@ -1,9 +1,11 @@
-import { useCallback, useEffect, useState } from 'react';
-import { Node, NodeData, RenderPage, Project, ProjectColors } from '..';
+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';
@@ -11,37 +13,76 @@ import { useLogRender } from '../utils/useLogRender';
 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 { 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;
   appConfig?: AppConfig;
   logLevel?: LogLevel;
   projectColors?: ProjectColors;
+  name: string;
 };
 
-const MOBILE_BREAKPOINT = 1000;
-
 export function ProjectPage({
   project,
   appConfig = defaultAppConfig,
   onSaveProject,
   logLevel,
   projectColors,
+  name,
 }: ProjectPageProps) {
   useLogRender('ProjectPage');
   const resolvedProjectColors = projectColors ?? project.projectColors;
-  const { current, setCurrent, setProjectColors } = useRenderStore((s) => ({
+  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 [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(
@@ -53,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;
@@ -80,66 +118,35 @@ 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(() => {
-    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(() => {
     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);
       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.');
+      console.error(error);
       setEditorData(null);
-      setCurrent(null);
     }
   }, [project.data]);
 
+  const showLoading = editorData === null || !minLoadingDelayDone;
+
   return (
     <div className="container-full">
       <EditorHeader
@@ -155,9 +162,6 @@ export function ProjectPage({
           setEditorData(project.data);
           setCurrent(project.data);
         }}
-        current={current}
-        editorData={editorData}
-        setEditorData={setEditorData}
       />
       {isMobile && (
         <div
@@ -165,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">
@@ -226,24 +202,33 @@ export function ProjectPage({
             </button>
           )}
           <div>
-            <BuilderPanel
-              data={editorData}
-              setData={setEditorData}
-              onDeleteNode={handleDeleteNode}
-            />
+            <BuilderPanel onDeleteNode={handleDeleteNode} />
           </div>
         </div>
-        <div className="split-right">
-          <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
+          style={{ backgroundImage: `url(${backgroundImage})` }}
+          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={project.name} />
+              <BottomBar />
+            </BuilderProvider>
+          )}
         </div>
         <div
           id="split-attributes-panel"
@@ -260,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
@@ -294,101 +259,3 @@ export function ProjectPage({
     </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

@@ -1,11 +1,11 @@
-import { Node } from '../..';
+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;
+  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/paywall/hooks/index.ts

@@ -0,0 +1,5 @@
+export { usePaywallCounter } from './usePaywallCounter';
+export { useCloseStatusPaywall } from './useCloseStatusPaywall';
+export { useCarouselOptionsSeperator } from './useCarouselOptionsSeperator';
+export { useCalculateLocalizedPrice } from './useCalculateLocalizedPrice';
+export { useDiscountRate } from './useDiscountRate';

package/src/paywall/hooks/useCalculateLocalizedPrice.ts

@@ -0,0 +1,6 @@
+/**
+ * Placeholder hook — will be implemented later.
+ */
+export function useCalculateLocalizedPrice(): string {
+  return '';
+}

package/src/paywall/hooks/useCarouselOptionsSeperator.ts

@@ -0,0 +1,8 @@
+/**
+ * Placeholder hook — will be implemented later.
+ *
+ * NOTE: name kept as `Seperator` to match existing external API usage.
+ */
+export function useCarouselOptionsSeperator(): string {
+  return '';
+}

package/src/paywall/hooks/useCloseStatusPaywall.ts

@@ -0,0 +1,6 @@
+/**
+ * Placeholder hook — will be implemented later.
+ */
+export function useCloseStatusPaywall(): boolean {
+  return false;
+}

package/src/paywall/hooks/useDiscountRate.ts

@@ -0,0 +1,6 @@
+/**
+ * Placeholder hook — will be implemented later.
+ */
+export function useDiscountRate(): number {
+  return 0;
+}

package/src/paywall/hooks/usePaywallCounter.ts

@@ -0,0 +1,6 @@
+/**
+ * Placeholder hook — will be implemented later.
+ */
+export function usePaywallCounter(): number {
+  return 0;
+}