@developer_tribe/react-builder 1.0.5 → 1.0.7

package/src/modals/ScreenColorsModal.tsx

@@ -0,0 +1,121 @@
+import React, { useMemo } from 'react';
+import type { AppConfig } from '../types/PreviewConfig';
+import { defaultAppConfig } from '../types/PreviewConfig';
+import Modal from './Modal';
+
+type ScreenMode = 'light' | 'dark';
+type ScreenColorKey = keyof AppConfig['screenStyle']['light'];
+
+type ScreenColorsModalProps = {
+  appConfig: AppConfig;
+  onChange: (next: AppConfig) => void;
+  onClose: () => void;
+};
+
+type ColorField = {
+  id: string;
+  label: string;
+  mode: ScreenMode;
+  key: ScreenColorKey;
+};
+
+const colorFields: ColorField[] = [
+  {
+    id: 'light-bg',
+    label: 'Light Background',
+    mode: 'light',
+    key: 'backgroundColor',
+  },
+  {
+    id: 'light-color',
+    label: 'Light Text',
+    mode: 'light',
+    key: 'color',
+  },
+  {
+    id: 'dark-bg',
+    label: 'Dark Background',
+    mode: 'dark',
+    key: 'backgroundColor',
+  },
+  {
+    id: 'dark-color',
+    label: 'Dark Text',
+    mode: 'dark',
+    key: 'color',
+  },
+];
+
+export function ScreenColorsModal({
+  appConfig,
+  onChange,
+  onClose,
+}: ScreenColorsModalProps) {
+  const defaults = defaultAppConfig.screenStyle;
+
+  const getValue = (mode: ScreenMode, key: ScreenColorKey) =>
+    appConfig.screenStyle?.[mode]?.[key] ?? defaults[mode][key];
+
+  const handleChange = (mode: ScreenMode, key: ScreenColorKey, value: string) =>
+    onChange({
+      ...appConfig,
+      screenStyle: {
+        ...defaults,
+        ...appConfig.screenStyle,
+        [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-title"
+      contentClassName="localication-modal__content"
+    >
+      <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="localication-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 style={{ alignSelf: 'center' }}>{label}</div>
+              <input
+                id={id}
+                type="color"
+                className="input input--color"
+                value={String(getValue(mode, key))}
+                onChange={(e) => handleChange(mode, key, e.target.value)}
+              />
+            </React.Fragment>
+          ))}
+        </div>
+      </div>
+    </Modal>
+  );
+}

package/src/modals/index.ts

@@ -4,6 +4,7 @@ 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';

package/src/pages/ProjectPage.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useEffect, useState } from 'react';
-import type { Node, NodeData } from '../types/Node';
+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 { BottomBar } from '../components/BottomBar';
 import { AppConfig, defaultAppConfig } from '../types/PreviewConfig';
 import { useRenderStore } from '../store';
 import { logger } from '../utils/logger';
@@ -15,15 +15,21 @@ 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 Lottie from 'lottie-react';
-import loadingAnimation from '../assets/loading_animation.json';
+import { LoadingComponent } from '../components/LoadingComponent';
+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;
+  onSaveProjectColors?: (colors: ProjectColors) => void;
+  name?: string;
 };
 
 const MOBILE_BREAKPOINT = 1000;
@@ -34,9 +40,11 @@ export function ProjectPage({
   onSaveProject,
   logLevel,
   projectColors,
+  onSaveProjectColors,
   name,
 }: ProjectPageProps) {
   useLogRender('ProjectPage');
+  const resolvedName = name ?? project.name;
   const resolvedProjectColors = projectColors ?? project.projectColors;
   const {
     current,
@@ -45,7 +53,7 @@ export function ProjectPage({
     setProjectName,
     products,
     benefits,
-  } = useRenderStore((s) => ({
+  } = useRenderStore(s => ({
     current: s.current,
     setCurrent: s.setCurrent,
     setProjectColors: s.setProjectColors,
@@ -69,7 +77,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);
@@ -95,7 +103,7 @@ export function ProjectPage({
         }
       }
     },
-    [editorData, current],
+    [editorData, current]
   );
 
   useEffect(() => {
@@ -108,8 +116,8 @@ export function ProjectPage({
   }, [appConfig, project.name]);
 
   useEffect(() => {
-    setProjectName(name);
-  }, [name, setProjectName]);
+    setProjectName(resolvedName);
+  }, [resolvedName, setProjectName]);
 
   useEffect(() => {
     setProjectColors(resolvedProjectColors);
@@ -136,7 +144,7 @@ export function ProjectPage({
   }, [isMobile]);
 
   const toggleMobilePanel = (panel: 'builder' | 'attributes') => {
-    setMobilePanel((prev) => (prev === panel ? null : panel));
+    setMobilePanel(prev => (prev === panel ? null : panel));
   };
 
   const closeMobilePanels = () => {
@@ -176,10 +184,13 @@ export function ProjectPage({
   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,
@@ -196,65 +207,65 @@ export function ProjectPage({
       />
       {isMobile && (
         <div
-          className="mobile-panel-toggle"
-          role="group"
-          aria-label="Editor panels"
+          className='mobile-panel-toggle'
+          role='group'
+          aria-label='Editor panels'
         >
           <button
-            type="button"
+            type='button'
             className={`mobile-panel-toggle__button${mobilePanel === 'builder' ? ' mobile-panel-toggle__button--active' : ''}`}
-            aria-label="Toggle builder panel"
+            aria-label='Toggle builder panel'
             aria-expanded={mobilePanel === 'builder'}
-            aria-controls="split-left-panel"
+            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">
+            <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"
+                  d='M1 1h14M1 6h14M1 11h14'
+                  stroke='currentColor'
+                  strokeWidth='2'
+                  strokeLinecap='round'
+                  fill='none'
                 />
               </svg>
             </span>
-            <span className="mobile-panel-toggle__label">Builder</span>
+            <span className='mobile-panel-toggle__label'>Builder</span>
           </button>
           <button
-            type="button"
+            type='button'
             className={`mobile-panel-toggle__button${mobilePanel === 'attributes' ? ' mobile-panel-toggle__button--active' : ''}`}
-            aria-label="Toggle attributes panel"
+            aria-label='Toggle attributes panel'
             aria-expanded={mobilePanel === 'attributes'}
-            aria-controls="split-attributes-panel"
+            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">
+            <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"
+                  d='M1 1h14M1 6h14M1 11h14'
+                  stroke='currentColor'
+                  strokeWidth='2'
+                  strokeLinecap='round'
+                  fill='none'
                 />
               </svg>
             </span>
-            <span className="mobile-panel-toggle__label">Attributes</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
@@ -269,13 +280,15 @@ export function ProjectPage({
           </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'
         >
-          <SideTool data={editorData} setData={setEditorData} />
-
           {showLoading && (
-            <div className="rb-loading-overlay" aria-busy="true">
+            <div className='rb-loading-overlay' aria-busy='true'>
               <LoadingComponent />
             </div>
           )}
@@ -290,20 +303,22 @@ export function ProjectPage({
                     : {},
               }}
             >
-              <RenderPage data={editorData} name={project.name} />
+              <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
@@ -312,7 +327,7 @@ export function ProjectPage({
           <AttributesEditorPanel
             attributes={editorData}
             projectColors={resolvedProjectColors}
-            onChange={(data) => {
+            onChange={data => {
               setEditorData(data);
               let nodeKey: string | undefined = undefined;
               if (
@@ -326,16 +341,16 @@ export function ProjectPage({
               logger.verbose(
                 'ProjectPage',
                 'attributes change',
-                nodeKey ? { nodeKey } : undefined,
+                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}
           />
         )}
@@ -343,109 +358,3 @@ export function ProjectPage({
     </div>
   );
 }
-
-function LoadingComponent() {
-  return (
-    <div className="rb-loading">
-      <Lottie animationData={loadingAnimation as any} loop autoplay />
-    </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/styles/base/_global.scss

@@ -2,7 +2,6 @@
 @use '../foundation/sizes' as sizes;
 @use '../foundation/typography' as type;
 @use '../foundation/mixins' as *;
-@use 'sass:color';
 
 /* Global utility classes */
 html,
@@ -37,7 +36,7 @@ body,
   height: 120px;
   border: 2px dashed colors.$mutedTextColor;
   border-radius: sizes.$radiusRounded;
-  background: #fff;
+  background: colors.$surfaceColor;
   cursor: pointer;
   font-weight: 600;
   color: colors.$textColor;
@@ -45,12 +44,12 @@ body,
     border-color 0.2s ease,
     transform 0.1s ease,
     box-shadow 0.2s ease;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 1px 2px hsl(var(--foreground, 220.9 39.3% 11%) / 0.04);
 
   &:hover {
-    border-color: color.adjust(colors.$mutedTextColor, $lightness: -10%);
+    border-color: colors.$mutedTextColor;
     transform: translateY(-1px);
-    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 6px 16px hsl(var(--foreground, 220.9 39.3% 11%) / 0.1);
   }
 }
 
@@ -72,6 +71,7 @@ body,
   max-height: calc(100vh - 120px);
   overflow: auto;
   padding: sizes.$spaceComfy;
+  background-image: var(--rb-canvas-bg, none);
   background-size: cover;
   background-position: center;
   background-repeat: repeat;
@@ -82,6 +82,11 @@ body,
   }
 }
 
+/* Hide the canvas grid background in dark theme (Tailwind/shadcn convention). */
+.dark .split-right {
+  --rb-canvas-bg: none !important;
+}
+
 .split-third {
   flex: 1 1 25%;
   border-right: 1px solid colors.$borderColor;
@@ -94,10 +99,10 @@ body,
 .stage {
   @include card;
   align-self: center;
-  border: 1px solid color.adjust(colors.$borderColor, $lightness: -10%);
+  border: 1px solid colors.$borderColor;
   box-shadow:
-    0 18px 50px rgba(0, 0, 0, 0.16),
-    0 6px 16px rgba(0, 0, 0, 0.1);
+    0 18px 50px hsl(var(--foreground, 220.9 39.3% 11%) / 0.16),
+    0 6px 16px hsl(var(--foreground, 220.9 39.3% 11%) / 0.1);
   overflow: hidden;
   .scroll-container {
     /* Mobile-like scrollbar styling */
@@ -111,19 +116,19 @@ body,
     }
 
     &::-webkit-scrollbar-thumb {
-      background: rgba(0, 0, 0, 0.25);
+      background: hsl(var(--foreground, 220.9 39.3% 11%) / 0.25);
       border-radius: 8px;
     }
 
     /* For Firefox */
     scrollbar-width: thin;
-    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
+    scrollbar-color: hsl(var(--foreground, 220.9 39.3% 11%) / 0.25) transparent;
   }
 }
 
 /* Builder preview selection helpers */
 .rb-node-selected {
-  border: 1px solid #2684ff;
+  border: 1px solid colors.$accentColor;
 }
 
 /* Header */
@@ -131,7 +136,7 @@ body,
   position: sticky;
   top: 0;
   z-index: 10;
-  background: #fff;
+  background: colors.$surfaceColor;
   border-bottom: 1px solid colors.$borderColor;
   height: 60px;
   padding: 0 sizes.$spaceComfy;
@@ -251,7 +256,7 @@ body,
   padding: sizes.$spaceCozy;
   border-radius: sizes.$radiusRounded;
   border: 1px solid colors.$borderColor;
-  background: #fff;
+  background: colors.$surfaceColor;
   color: colors.$textColor;
   font-weight: 600;
   cursor: pointer;
@@ -269,9 +274,9 @@ body,
 
 .mobile-panel-toggle__button--active {
   background: colors.$textColor;
-  color: #fff;
+  color: colors.$surfaceColor;
   border-color: colors.$textColor;
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 6px 16px hsl(var(--foreground, 220.9 39.3% 11%) / 0.15);
 }
 
 .mobile-panel-toggle__icon {
@@ -296,8 +301,8 @@ body,
   right: sizes.$spaceCozy;
   border: none;
   border-radius: sizes.$radiusRounded;
-  background: rgba(0, 0, 0, 0.7);
-  color: #fff;
+  background: hsl(var(--foreground, 220.9 39.3% 11%) / 0.7);
+  color: colors.$surfaceColor;
   padding: sizes.$spaceSnug sizes.$spaceComfy;
   font-weight: 600;
   cursor: pointer;
@@ -325,7 +330,7 @@ body,
     width: 100%;
     height: 100%;
     background: colors.$canvasColor;
-    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 25px 60px hsl(var(--foreground, 220.9 39.3% 11%) / 0.15);
     transition:
       transform 0.3s ease,
       opacity 0.3s ease;
@@ -370,7 +375,7 @@ body,
     display: block;
     position: absolute;
     inset: 0;
-    background: rgba(17, 24, 39, 0.35);
+    background: hsl(var(--foreground, 220.9 39.3% 11%) / 0.35);
     border: none;
     padding: 0;
     margin: 0;
@@ -404,7 +409,7 @@ body,
   align-items: center;
   justify-content: center;
   pointer-events: none;
-  background: rgba(255, 255, 255, 0.55);
+  background: hsl(var(--card, 0 0% 100%) / 0.55);
   backdrop-filter: blur(1px);
 }