@developer_tribe/react-builder 1.0.1 → 1.0.2

package/src/modals/Modal.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect } from 'react';
+
+type ModalProps = {
+  onClose: () => void;
+  ariaLabelledBy?: string;
+  children: React.ReactNode;
+  className?: string;
+  contentClassName?: string;
+  closeOnOverlayClick?: boolean;
+  closeOnEsc?: boolean;
+};
+
+export function Modal({
+  onClose,
+  ariaLabelledBy,
+  children,
+  className,
+  contentClassName,
+  closeOnOverlayClick = true,
+  closeOnEsc = true,
+}: ModalProps) {
+  useEffect(() => {
+    if (!closeOnEsc) return undefined;
+    if (typeof window === 'undefined') return undefined;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [closeOnEsc, onClose]);
+
+  return (
+    <div
+      className={`modal${className ? ` ${className}` : ''}`}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={ariaLabelledBy}
+    >
+      <div
+        className="modal__overlay"
+        onClick={closeOnOverlayClick ? onClose : undefined}
+      />
+      <div
+        className={`modal__content${contentClassName ? ` ${contentClassName}` : ''}`}
+        role="document"
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default Modal;

package/src/modals/index.ts

@@ -0,0 +1,5 @@
+export { default as Modal } from './Modal';
+export { AddComponentModal } from './AddComponentModal';
+export { DeviceSelectorModal } from './DeviceSelectorModal';
+export { ColorModal } from './ColorModal';
+export { LocalicationModal } from './LocalicationModal';

package/src/pages/ProjectPage.tsx

@@ -10,8 +10,8 @@ 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 backgroundImage from '../assets/images/background.jpg';
+export type Tab = 'builder' | 'preview';
 
 export type ProjectPageProps = {
   project: Project;
@@ -55,6 +55,11 @@ 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}
@@ -76,7 +81,7 @@ export function ProjectPage({
                   logger.info('ProjectPage', 'tab change', { to: 'builder' });
                 }}
               >
-                Builder
+                <span className="editor-tab__label">Builder</span>
               </button>
               <button
                 className={`editor-tab ${tab === 'preview' ? 'editor-tab--active' : ''}`}
@@ -87,18 +92,7 @@ export function ProjectPage({
                   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
+                <span className="editor-tab__label">Preview Config</span>
               </button>
             </div>
 
@@ -112,15 +106,19 @@ export function ProjectPage({
             )}
 
             {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 className="split-right__controls">
+            <DebugTab data={editorData} setData={setEditorData} />
+          </div>
+          <div
+            className="split-right-background"
+            style={{
+              backgroundImage: `url(${backgroundImage})`,
+            }}
+          />
+          <RenderPage data={editorData} name={project.name} />
         </div>
         <div className="split-third">
           <AttributesEditorPanel

package/src/pages/tabs/DebugTab.tsx

@@ -1,4 +1,6 @@
+import React, { useState } from 'react';
 import { JsonEditor } from 'json-edit-react';
+import { Modal } from '../../modals';
 import { Node } from '../..';
 import { useLogRender } from '../../utils/useLogRender';
 
@@ -9,15 +11,54 @@ type DebugTabProps = {
 
 export function DebugTab({ data, setData }: DebugTabProps) {
   useLogRender('DebugTab');
+  const [isOpen, setIsOpen] = useState(false);
   return (
-    <div
-      role="tabpanel"
-      className="editor-panel editor-panel--active editor-panels-debug"
-      aria-hidden={false}
-    >
-      <div style={{ flex: '1 1 auto', minHeight: 0, overflow: 'auto' }}>
-        <JsonEditor data={data as any} setData={setData as any} />
-      </div>
-    </div>
+    <>
+      <button
+        type="button"
+        className="editor-button debug-button"
+        title="Inspect raw JSON data"
+        onClick={() => setIsOpen(true)}
+      >
+        Debug JSON
+      </button>
+      {isOpen ? (
+        <Modal
+          onClose={() => setIsOpen(false)}
+          ariaLabelledBy="debug-json-editor-title"
+          className="modal--large modal--scrollable"
+          contentClassName="localication-modal__content"
+        >
+          <div className="modal__header localication-modal__header">
+            <div className="localication-modal__header-main">
+              <h3 id="debug-json-editor-title" className="modal__title">
+                Debug data
+              </h3>
+              <p className="localication-modal__description">
+                Inspect and edit the current node tree using the JSON editor.
+              </p>
+            </div>
+            <button
+              type="button"
+              className="editor-button"
+              onClick={() => setIsOpen(false)}
+            >
+              Close
+            </button>
+          </div>
+          <div className="localication-modal__body">
+            <div className="localication-modal__editor">
+              <JsonEditor
+                rootName="debug"
+                data={data as any}
+                setData={setData as any}
+                className="localication-modal__json-editor"
+                maxWidth={'100%'}
+              />
+            </div>
+          </div>
+        </Modal>
+      ) : null}
+    </>
   );
 }

package/src/pages/tabs/PreviewTab.tsx

@@ -1,7 +1,9 @@
-import { JsonEditor } from 'json-edit-react';
-import { Localication, TargetedScreenSize } from '../..';
+import React, { useCallback, useState } from 'react';
+import { Localication } from '../..';
 import { useLogRender } from '../../utils/useLogRender';
 import { useRenderStore } from '../../store';
+import { LocalicationModal } from '../../modals/LocalicationModal';
+import { Checkbox } from '../../components/Checkbox';
 
 type PreviewTabProps = {};
 
@@ -11,6 +13,18 @@ export function PreviewTab({}: PreviewTabProps) {
     appConfig: s.appConfig,
     setAppConfig: s.setAppConfig,
   }));
+  const [isLocalicationModalOpen, setIsLocalicationModalOpen] = useState(false);
+
+  const handleLocalicationChange = useCallback(
+    (data: Localication) => {
+      setAppConfig({
+        ...appConfig,
+        localication: data,
+      });
+    },
+    [appConfig, setAppConfig],
+  );
+
   return (
     <div
       role="tabpanel"
@@ -134,21 +148,12 @@ export function PreviewTab({}: PreviewTabProps) {
             className="input input--color"
           />
         </div>
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 8,
-            marginTop: 8,
-          }}
-        >
-          <div>Dark Mode</div>
-          <input
-            type="checkbox"
+        <div style={{ marginTop: 8 }}>
+          <Checkbox
+            label="Dark Mode"
             checked={appConfig.theme === 'dark'}
-            onChange={(e) => {
-              const nextTheme = e.target.checked ? 'dark' : 'light';
-
+            onChange={(checked) => {
+              const nextTheme = checked ? 'dark' : 'light';
               setAppConfig({
                 ...appConfig,
                 theme: nextTheme,
@@ -156,39 +161,46 @@ export function PreviewTab({}: PreviewTabProps) {
             }}
           />
         </div>
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 8,
-            marginTop: 8,
-          }}
-        >
-          <div>Is RTL</div>
-          <input
-            type="checkbox"
+        <div style={{ marginTop: 8 }}>
+          <Checkbox
+            label="Is RTL"
             checked={appConfig.isRtl ?? false}
-            onChange={(e) => {
+            onChange={(checked) => {
               setAppConfig({
                 ...appConfig,
-                isRtl: e.target.checked,
+                isRtl: checked,
               });
             }}
           />
         </div>
-        <div style={{ marginTop: 8 }}>
-          <JsonEditor
-            rootName="localication"
-            data={appConfig.localication ?? {}}
-            setData={(data) => {
-              setAppConfig({
-                ...appConfig,
-                localication: data as Localication,
-              });
-            }}
-          />
+        <div
+          style={{
+            marginTop: 16,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 8,
+          }}
+        >
+          <div style={{ fontWeight: 600 }}>Localization</div>
+          <p style={{ margin: 0, fontSize: 13, color: '#4b5563' }}>
+            Manage translations for each language configured in your preview.
+          </p>
+          <button
+            type="button"
+            className="editor-button"
+            onClick={() => setIsLocalicationModalOpen(true)}
+          >
+            Open localization editor
+          </button>
         </div>
       </div>
+      {isLocalicationModalOpen ? (
+        <LocalicationModal
+          data={appConfig.localication ?? {}}
+          onChange={handleLocalicationChange}
+          onClose={() => setIsLocalicationModalOpen(false)}
+        />
+      ) : null}
     </div>
   );
 }

package/src/size-matters/index.ts

@@ -1,15 +1,31 @@
 import { useRenderStore } from '../store';
+import { defaultAppConfig } from '../types/PreviewConfig';
+import { getDefaultDevice } from '../utils/getDevices';
+
+const fallbackDevice = getDefaultDevice();
+const fallbackBaseSize = defaultAppConfig.baseSize;
+
+function ensureNumber(value: number | undefined, fallback: number) {
+  return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+}
 
 function getBaseDimensions() {
   const currentState = useRenderStore.getState();
-  let device = currentState.device;
+  const device = currentState.device ?? fallbackDevice;
+  const baseSize = currentState.appConfig?.baseSize ?? fallbackBaseSize;
+
+  const deviceWidth = ensureNumber(device?.width, fallbackDevice.width);
+  const deviceHeight = ensureNumber(device?.height, fallbackDevice.height);
+  const baseWidth = ensureNumber(baseSize?.width, fallbackBaseSize.width);
+  const baseHeight = ensureNumber(baseSize?.height, fallbackBaseSize.height);
+
   const [shortDimension, longDimension] =
-    device.width < device.height
-      ? [device.width, device.height]
-      : [device.height, device.width];
+    deviceWidth < deviceHeight
+      ? [deviceWidth, deviceHeight]
+      : [deviceHeight, deviceWidth];
 
   return {
-    baseSize: currentState.appConfig.baseSize,
+    baseSize: { width: baseWidth, height: baseHeight },
     shortDimension,
     longDimension,
   };

package/src/store.ts

@@ -19,8 +19,6 @@ type RenderStore = {
   setDevice: (device: Device) => void;
   appConfig: AppConfig;
   setAppConfig: (appConfig: AppConfig) => void;
-  renderCount: number;
-  forceRender: () => void;
   // Logging
   logs: LogEntry[];
   logLevel: LogLevel;
@@ -38,8 +36,6 @@ export const useRenderStore = createWithEqualityFn<RenderStore>()(
   (set) => ({
     copiedNode: null,
     setCopiedNode: (node) => set({ copiedNode: node }),
-    renderCount: 0,
-    forceRender: () => set((state) => ({ renderCount: state.renderCount + 1 })),
     device: getDefaultDevice(),
     setDevice: (device) => set({ device }),
     appConfig: defaultAppConfig,

package/src/styles/{global.scss → base/_global.scss}

@@ -1,12 +1,13 @@
-@use './variables' as *;
-@use './mixins' as *;
-@use './reset';
+@use '../foundation/colors' as colors;
+@use '../foundation/sizes' as sizes;
+@use '../foundation/typography' as type;
+@use '../foundation/mixins' as *;
 
 /* Global utility classes */
 html,
 body,
 #root {
-  font-family: $font-sans;
+  font-family: type.$bodyFont;
 }
 
 .editor-container {
@@ -18,35 +19,30 @@ body,
 .editor-panel-builder {
   padding: 4px 8px;
 }
-.app-shell {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
 
 .app-main {
   flex: 1 1 auto;
-  background: $color-background;
+  background: colors.$canvasColor;
 }
 
 .page-bg {
-  background: $color-background;
+  background: colors.$canvasColor;
 }
 
 .grid-cards {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-  gap: $space-4;
+  gap: sizes.$spaceComfy;
 }
 
 .btn-add {
   height: 120px;
-  border: 2px dashed $color-muted;
-  border-radius: $radius-md;
+  border: 2px dashed colors.$mutedTextColor;
+  border-radius: sizes.$radiusRounded;
   background: #fff;
   cursor: pointer;
   font-weight: 600;
-  color: $color-text;
+  color: colors.$textColor;
   transition:
     border-color 0.2s ease,
     transform 0.1s ease,
@@ -54,7 +50,7 @@ body,
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 
   &:hover {
-    border-color: darken($color-muted, 10%);
+    border-color: darken(colors.$mutedTextColor, 10%);
     transform: translateY(-1px);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
   }
@@ -62,48 +58,67 @@ body,
 
 .split-left {
   @include thin-scrollbar;
-  flex: 1 1 30%;
+  flex: 1 1 10%;
   min-width: 0;
-  border-right: 1px solid $color-border;
+  border-right: 1px solid colors.$borderColor;
   overflow: auto;
 }
 
 .split-right {
   position: relative;
   flex: 1 1 45%;
-  min-width: 0;
-  max-height: calc(100vh - 120px);
+  max-height: calc(100vh + 60px);
+  //NOTE: Found by trial and error. We want it to make it full height of the screen with padding
+  padding: sizes.$spaceComfy;
+  padding-bottom: 120px;
   overflow: auto;
 }
 
+.split-right__controls {
+  position: sticky;
+  top: sizes.$spaceCozy;
+  z-index: 2;
+  display: flex;
+  margin-bottom: sizes.$spaceCozy;
+}
+
 .split-third {
   flex: 1 1 25%;
-  min-width: 0;
-  border-right: 1px solid $color-border;
+  min-width: 450px;
+  border-right: 1px solid colors.$borderColor;
   overflow: auto;
   max-height: calc(100vh - 120px);
 }
 
 .split-right-background {
   position: absolute;
-  inset: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: calc(100vh + 60px);
   background-size: cover;
   background-position: center;
   background-repeat: repeat;
   background-size: 500px auto;
   opacity: 0.2;
+  z-index: 0;
+  pointer-events: none;
 }
 
 .stage-wrapper {
   display: flex;
   justify-content: center;
-  background: $color-background;
-  padding: $space-4;
+  background: transparent;
+  padding: sizes.$spaceComfy;
+  position: relative;
+  z-index: 1;
 }
 
 .stage {
   @include card;
-  border: 1px solid $color-border;
+  border: 1px solid colors.$borderColor;
+  overflow: hidden;
 
   .scroll-container {
     /* Mobile-like scrollbar styling */
@@ -133,15 +148,15 @@ body,
   top: 0;
   z-index: 10;
   background: #fff;
-  border-bottom: 1px solid $color-border;
+  border-bottom: 1px solid colors.$borderColor;
   height: 60px;
-  padding: 0 $space-4;
+  padding: 0 sizes.$spaceComfy;
   display: flex;
   align-items: center;
   justify-content: space-between;
 
   a {
-    color: $color-text;
+    color: colors.$textColor;
     text-decoration: none;
   }
 }
@@ -152,20 +167,46 @@ body,
 
 .app-header__nav {
   display: flex;
-  gap: $space-4;
+  gap: sizes.$spaceComfy;
 }
 .warning {
-  color: $color-error;
+  color: colors.$dangerColor;
   font-size: 12px;
   font-weight: 600;
-  margin-bottom: $space-4;
+  margin-bottom: sizes.$spaceComfy;
 }
 
 /* Breadcrumb */
 .breadcrumb {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: sizes.$spaceCozy;
   font-size: 12px;
-  color: $color-muted;
+  color: colors.$mutedTextColor;
+}
+
+.breadcrumb__back {
+  display: inline-flex;
+  align-items: center;
+  gap: sizes.$spaceTight;
+  padding: 0;
+  border: none;
+  background: none;
+  color: colors.$textColor;
+  font-weight: 600;
+  cursor: pointer;
+  transition: color 0.2s ease;
+
+  &:hover,
+  &:focus-visible {
+    color: colors.$accentColor;
+    outline: none;
+  }
+}
+
+.breadcrumb__back-icon {
+  font-size: 14px;
+  line-height: 1;
 }
 
 .breadcrumb__list {
@@ -174,21 +215,24 @@ body,
   margin: 0;
   display: flex;
   align-items: center;
-  gap: $space-2;
+  gap: sizes.$spaceCompact;
 }
 
 .breadcrumb__item {
   display: inline-flex;
   align-items: center;
+  &--clickable {
+    cursor: pointer;
+  }
 }
 
 .breadcrumb__separator {
-  color: $color-border;
-  margin: 0 $space-1;
+  color: colors.$borderColor;
+  margin: 0 sizes.$spaceTight;
 }
 
 .breadcrumb__link {
-  color: $color-text;
+  color: colors.$textColor;
   text-decoration: none;
   &:hover {
     text-decoration: underline;
@@ -196,5 +240,14 @@ body,
 }
 
 .breadcrumb__current {
-  color: $color-muted;
+  color: colors.$mutedTextColor;
+}
+
+.device-status-bar {
+  position: relative;
+  z-index: 100;
+}
+.device-navigation-bar {
+  position: relative;
+  z-index: 100;
 }