@developer_tribe/react-builder 1.0.6 → 1.0.8

package/src/pages/tabs/SideTool.tsx

@@ -0,0 +1,253 @@
+import React, { useEffect, useState } from 'react';
+import { JsonTextEditor } from '../../components/JsonTextEditor';
+import { Modal } from '../../modals';
+import type { Node } from '../../types/Node';
+import type { Localication } from '../../types/PreviewConfig';
+import { useLogRender } from '../../utils/useLogRender';
+import { useRenderStore } from '../../store';
+import { Checkbox } from '../../components/Checkbox';
+import { LocalicationModal } from '../../modals/LocalicationModal';
+import { analyseAndProccess } from '../../utils/analyseNode';
+
+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'];
+
+type SideToolProps = {
+  data: Node;
+  setData: React.Dispatch<React.SetStateAction<Node>>;
+};
+
+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,
+  },
+];
+
+export function SideTool({ data, setData }: SideToolProps) {
+  useLogRender('SideTool');
+  const [isDebugModalOpen, setIsDebugModalOpen] = useState(false);
+  const [isLocalicationModalOpen, setIsLocalicationModalOpen] = useState(false);
+  const [isCompactMode, setIsCompactMode] = useState(() => {
+    if (typeof window === 'undefined') {
+      return false;
+    }
+    return window.innerWidth < 1000;
+  });
+  const [isCompactPanelVisible, setIsCompactPanelVisible] = useState(false);
+  const { appConfig, setAppConfig, previewMode, setPreviewMode } =
+    useRenderStore((s) => ({
+      appConfig: s.appConfig,
+      setAppConfig: s.setAppConfig,
+      previewMode: s.previewMode,
+      setPreviewMode: s.setPreviewMode,
+    }));
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const handleResize = () => {
+      const compact = window.innerWidth < 1000;
+      setIsCompactMode(compact);
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const getScreenColorValue = (mode: ScreenMode, key: ScreenColorKey) =>
+    appConfig.screenStyle?.[mode]?.[key] ?? screenStyleDefaults[mode][key];
+
+  const handleScreenStyleChange = (
+    mode: ScreenMode,
+    key: ScreenColorKey,
+    value: string,
+  ) => {
+    setAppConfig({
+      ...appConfig,
+      screenStyle: {
+        ...screenStyleDefaults,
+        ...appConfig.screenStyle,
+        [mode]: {
+          ...screenStyleDefaults[mode],
+          ...appConfig.screenStyle?.[mode],
+          [key]: value,
+        },
+      },
+    });
+  };
+
+  const handleLocalicationChange = (data: Localication) => {
+    setAppConfig({ ...appConfig, localication: data });
+  };
+
+  return (
+    <div className="side-tool-container">
+      <button
+        type="button"
+        className="editor-button"
+        onClick={() => setIsCompactPanelVisible((prev) => !prev)}
+        aria-pressed={isCompactPanelVisible}
+      >
+        {isCompactPanelVisible ? 'Hide tools' : 'Show tools'}
+      </button>
+
+      {isCompactPanelVisible && (
+        <div className="side-tool">
+          <select
+            value={appConfig.defaultLanguage ?? 'en'}
+            onChange={(e) =>
+              setAppConfig({ ...appConfig, defaultLanguage: e.target.value })
+            }
+          >
+            {Object.keys(appConfig.localication ?? {}).map((language) => (
+              <option key={language} value={language}>
+                {language}
+              </option>
+            ))}
+          </select>
+
+          <Checkbox
+            label="Dark Mode"
+            checked={appConfig.theme === 'dark'}
+            onChange={(checked) =>
+              setAppConfig({ ...appConfig, theme: checked ? 'dark' : 'light' })
+            }
+          />
+
+          <Checkbox
+            label="Is RTL"
+            checked={appConfig.isRtl ?? false}
+            onChange={(checked) =>
+              setAppConfig({ ...appConfig, isRtl: checked })
+            }
+          />
+
+          <Checkbox
+            label="Preview mode"
+            checked={previewMode}
+            onChange={setPreviewMode}
+          />
+
+          <div>
+            <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>
+
+          <div
+            style={{
+              marginTop: 'auto',
+              paddingTop: 16,
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 8,
+            }}
+          >
+            <button
+              type="button"
+              className="editor-button"
+              onClick={() => setIsLocalicationModalOpen(true)}
+            >
+              Open localization editor
+            </button>
+            <button
+              type="button"
+              className="editor-button debug-button"
+              title="Inspect raw JSON data"
+              onClick={() => setIsDebugModalOpen(true)}
+            >
+              Debug JSON
+            </button>
+          </div>
+
+          {isDebugModalOpen && (
+            <Modal
+              onClose={() => setIsDebugModalOpen(false)}
+              ariaLabelledBy="debug-json-editor-title"
+              className="modal--large modal--scrollable"
+              contentClassName="localication-modal__content"
+            >
+              <div className="modal__header localication-modal__header">
+                <button
+                  type="button"
+                  className="editor-button"
+                  onClick={() => setIsDebugModalOpen(false)}
+                >
+                  Close
+                </button>
+              </div>
+              <div className="localication-modal__body">
+                <div className="localication-modal__editor">
+                  <JsonTextEditor
+                    rootName="node"
+                    value={data ?? {}}
+                    onChange={(next) =>
+                      setData(analyseAndProccess(next as Node) as Node)
+                    }
+                    className="localication-modal__json-editor"
+                  />
+                </div>
+              </div>
+            </Modal>
+          )}
+
+          {isLocalicationModalOpen && (
+            <LocalicationModal
+              data={appConfig.localication ?? {}}
+              onChange={handleLocalicationChange}
+              onClose={() => setIsLocalicationModalOpen(false)}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/store.ts

@@ -1,8 +1,13 @@
 import { createWithEqualityFn } from 'zustand/traditional';
 import { shallow } from 'zustand/shallow';
 import type { Device } from './types/Device';
-import { defaultAppConfig, type AppConfig } from './types/PreviewConfig';
+import {
+  defaultAppConfig,
+  type AppConfig,
+  type Localication,
+} from './types/PreviewConfig';
 import { getDefaultDevice } from './utils/getDevices';
+import { ScreenStyle } from './RenderPage';
 import { createJSONStorage, persist } from 'zustand/middleware';
 import { Node } from './types/Node';
 import type { LogEntry, LogLevel, ProjectColors } from './types/Project';
@@ -15,12 +20,6 @@ import type {
 type RenderStore = {
   projectName: string;
   setProjectName: (name: string) => void;
-  /**
-   * Root node tree being edited (a.k.a. "editor data").
-   * Not persisted: it comes from the currently opened project.
-   */
-  editorData: Node | null;
-  setEditorData: (data: Node | null) => void;
   copiedNode: Node | null;
   setCopiedNode: (node: Node | null) => void;
   current: Node | null;
@@ -67,8 +66,6 @@ export const useRenderStore = createWithEqualityFn<RenderStore>()(
     (set) => ({
       projectName: '',
       setProjectName: (name) => set({ projectName: name }),
-      editorData: null,
-      setEditorData: (data) => set({ editorData: data, current: data }),
       copiedNode: null,
       setCopiedNode: (node) => set({ copiedNode: node }),
       current: null,
@@ -196,7 +193,6 @@ export const useRenderStore = createWithEqualityFn<RenderStore>()(
       name: 'render-store',
       partialize: (state) => ({
         // Explicitly DO NOT persist projectName (it comes from ProjectPage props)
-        // Explicitly DO NOT persist editorData/current (they come from the opened project)
         copiedNode: state.copiedNode ?? null,
         logLevel: state.logLevel,
         products: state.products,

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;
@@ -165,7 +170,6 @@ body,
   display: flex;
   align-items: center;
   gap: sizes.$spaceCozy;
-  flex-wrap: wrap;
   font-size: 12px;
   color: colors.$mutedTextColor;
 }
@@ -201,15 +205,11 @@ body,
   display: flex;
   align-items: center;
   gap: sizes.$spaceCompact;
-  flex-wrap: wrap;
-  row-gap: sizes.$spaceTight;
 }
 
 .breadcrumb__item {
   display: inline-flex;
   align-items: center;
-  max-width: 100%;
-  overflow-wrap: anywhere;
   &--clickable {
     cursor: pointer;
   }
@@ -217,7 +217,7 @@ body,
 
 .breadcrumb__separator {
   color: colors.$borderColor;
-  margin: 0;
+  margin: 0 sizes.$spaceTight;
 }
 
 .breadcrumb__link {
@@ -256,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;
@@ -274,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 {
@@ -301,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;
@@ -330,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;
@@ -375,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;
@@ -389,6 +389,9 @@ body,
     top: sizes.$spaceCozy;
     z-index: 5;
     padding-bottom: sizes.$spaceCozy;
+    .side-tool {
+      width: 100%;
+    }
   }
 }
 .screen-preview {
@@ -397,12 +400,6 @@ body,
   height: 100%;
 }
 
-// Custom blue/glow cursor while preview mode is enabled
-.screen-preview--preview {
-  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cdefs%3E%3Cfilter%20id='g'%20x='-50%25'%20y='-50%25'%20width='200%25'%20height='200%25'%3E%3CfeDropShadow%20dx='0'%20dy='0'%20stdDeviation='1.6'%20flood-color='%2360a5fa'%20flood-opacity='0.95'/%3E%3C/filter%3E%3C/defs%3E%3Cpath%20filter='url(%23g)'%20d='M6%202%20L6%2022%20L11%2017%20L15%2027%20L18%2026%20L14%2016%20L21%2016%20Z'%20fill='%2360a5fa'%20stroke='%231d4ed8'%20stroke-width='1'/%3E%3C/svg%3E") 6 2,
-    pointer;
-}
-
 /* ProjectPage loading overlay */
 .rb-loading-overlay {
   position: absolute;
@@ -412,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);
 }
 

package/src/styles/components/_attributes-editor.scss

@@ -1,3 +1,4 @@
+@use '../foundation/colors' as colors;
 @use '../foundation/sizes' as sizes;
 
 .attributes-editor {
@@ -5,8 +6,8 @@
     margin-bottom: sizes.$spaceRelaxed;
     padding: sizes.$spaceCozy sizes.$spaceComfy;
     border-radius: sizes.$radiusRounded;
-    border: sizes.$borderWidthHairline solid #eee;
-    background: #f8f8f8;
+    border: sizes.$borderWidthHairline solid colors.$borderColor;
+    background: colors.$canvasColor;
   }
 
   &__component-title,
@@ -23,7 +24,7 @@
   &__component-description {
     margin: sizes.$spaceSnug 0 0;
     font-size: sizes.$fontSizeBase;
-    color: #555;
+    color: colors.$mutedTextColor;
   }
 
   &__tabs {
@@ -36,9 +37,9 @@
   &__tab-button {
     padding: sizes.$spaceSnug sizes.$spaceCozy;
     border-radius: sizes.$radiusMid;
-    border: sizes.$borderWidthHairline solid #ddd;
-    background: #fff;
-    color: #222;
+    border: sizes.$borderWidthHairline solid colors.$borderColor;
+    background: colors.$surfaceColor;
+    color: colors.$textColor;
     cursor: pointer;
     font-weight: 600;
     transition:
@@ -51,8 +52,8 @@
     }
 
     &--active {
-      background: #222;
-      color: #fff;
+      background: colors.$textColor;
+      color: colors.$surfaceColor;
     }
   }
 
@@ -120,8 +121,8 @@
     margin-bottom: sizes.$spaceComfy;
     padding: sizes.$spaceCozy sizes.$spaceComfy;
     border-radius: sizes.$radiusRounded;
-    border: sizes.$borderWidthHairline solid #eee;
-    background: #fff;
+    border: sizes.$borderWidthHairline solid colors.$borderColor;
+    background: colors.$surfaceColor;
   }
 
   &__mockable-title {
@@ -135,7 +136,7 @@
   }
 
   &__mockable-row + &__mockable-row {
-    border-top: sizes.$borderWidthHairline solid #eee;
+    border-top: sizes.$borderWidthHairline solid colors.$borderColor;
   }
 
   &__mockable-name {
@@ -159,7 +160,7 @@
     right: 0;
     font-size: sizes.$fontSizeXs;
     line-height: 1.2;
-    color: #666;
+    color: colors.$mutedTextColor;
     cursor: pointer;
     font-weight: 600;
     white-space: nowrap;
@@ -175,7 +176,8 @@
   }
 
   &__trigger:focus-visible {
-    outline: sizes.$outlineWidthFocus solid rgba(17, 24, 39, 0.4);
+    outline: sizes.$outlineWidthFocus solid
+      hsl(var(--foreground, 220.9 39.3% 11%) / 0.4);
     outline-offset: sizes.$outlineWidthFocus;
   }
 
@@ -184,22 +186,14 @@
     top: 50%;
     right: 100%;
     transform: translate(calc(-1 * sizes.$spaceCompact), -50%);
-    background: #111;
-    color: #fff;
+    background: colors.$textColor;
+    color: colors.$surfaceColor;
     padding: sizes.$spaceSnug sizes.$spaceInset;
     border-radius: sizes.$radiusSoft;
     font-size: sizes.$fontSizeSm;
     line-height: 1.4;
-    // Prevent long descriptions (e.g. URLs or long tokens) from overflowing the tooltip bubble.
-    width: min(
-      sizes.$dimensionSizeGridMax,
-      calc(100vw - (2 * sizes.$spaceComfy))
-    );
+    width: sizes.$dimensionSizeGridMax;
     text-align: left;
-    white-space: normal;
-    overflow-wrap: anywhere;
-    word-break: break-word;
-    hyphens: auto;
     box-shadow: sizes.$shadowTooltip;
     z-index: sizes.$zIndexRaised;
     opacity: 0;
@@ -216,11 +210,11 @@
 }
 
 .special-category-section {
-  border: sizes.$borderWidthHairline solid #e0e0e0;
+  border: sizes.$borderWidthHairline solid colors.$borderColor;
   border-radius: sizes.$radiusRounded;
   padding: sizes.$spaceCozy;
   margin-bottom: sizes.$spaceComfy;
-  background: #fdfdfd;
+  background: colors.$surfaceColor;
 
   &__header {
     display: flex;
@@ -235,9 +229,9 @@
   }
 
   &__toggle {
-    border: sizes.$borderWidthHairline solid #ddd;
-    background: #fff;
-    color: #222;
+    border: sizes.$borderWidthHairline solid colors.$borderColor;
+    background: colors.$surfaceColor;
+    color: colors.$textColor;
     border-radius: sizes.$radiusSoft;
     padding: sizes.$spaceTight sizes.$spaceInset;
     cursor: pointer;
@@ -248,15 +242,15 @@
       border-color 0.15s ease;
 
     &[data-active='true'] {
-      background: #222;
-      color: #fff;
-      border-color: #222;
+      background: colors.$textColor;
+      color: colors.$surfaceColor;
+      border-color: colors.$textColor;
     }
   }
 
   &__description {
     margin: sizes.$spaceCompact 0 0;
-    color: #666;
+    color: colors.$mutedTextColor;
     font-size: sizes.$fontSizeSmPlus;
     padding-bottom: sizes.$spaceComfy;
   }