@developer_tribe/react-builder 1.0.2 → 1.0.3

package/src/pages/tabs/SideTool.tsx

@@ -0,0 +1,259 @@
+import React, { useEffect, useState } from 'react';
+import { JsonEditor } from 'json-edit-react';
+import { Modal } from '../../modals';
+import { Localication, Node } from '../..';
+import { useLogRender } from '../../utils/useLogRender';
+import { useRenderStore } from '../../store';
+import { Checkbox } from '../../components/Checkbox';
+import { LocalicationModal } from '../../modals/LocalicationModal';
+
+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: (data: Node) => void;
+};
+
+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
+      style={{
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 8,
+        backgroundColor: isCompactMode ? '#fff' : undefined,
+      }}
+    >
+      <button
+        type="button"
+        className="editor-button"
+        onClick={() => setIsCompactPanelVisible((prev) => !prev)}
+        aria-pressed={isCompactPanelVisible}
+        style={{ alignSelf: 'flex-start' }}
+      >
+        {isCompactPanelVisible ? 'Hide tools' : 'Show tools'}
+      </button>
+
+      {isCompactPanelVisible && (
+        <div className="side-tool" style={{ display: 'flex', height: '100%' }}>
+          <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">
+                  <JsonEditor
+                    rootName="debug"
+                    data={data as any}
+                    setData={setData as any}
+                    className="localication-modal__json-editor"
+                    maxWidth="100%"
+                  />
+                </div>
+              </div>
+            </Modal>
+          )}
+
+          {isLocalicationModalOpen && (
+            <LocalicationModal
+              data={appConfig.localication ?? {}}
+              onChange={handleLocalicationChange}
+              onClose={() => setIsLocalicationModalOpen(false)}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/size-matters/index.ts

@@ -67,6 +67,12 @@ export function parseSize(value?: string | number) {
     return Number.isFinite(n) ? fs(n) : raw;
   }
 
+  // Preserve percentage values as-is
+  if (lower.endsWith('%')) {
+    const numericPortion = parseFloat(lower.slice(0, -1));
+    return Number.isFinite(numericPortion) ? `${numericPortion}%` : raw;
+  }
+
   // Handle px explicitly (treat as absolute, not scaled)
   if (lower.endsWith('px')) {
     const n = parseFloat(lower.replace('px', ''));

package/src/store.ts

@@ -10,15 +10,21 @@ import { getDefaultDevice } from './utils/getDevices';
 import { ScreenStyle } from './RenderPage';
 import { createJSONStorage } from 'zustand/middleware';
 import { Node } from './types/Node';
-import type { LogEntry, LogLevel } from './types/Project';
+import type { LogEntry, LogLevel, ProjectColors } from './types/Project';
 
 type RenderStore = {
   copiedNode: Node | null;
   setCopiedNode: (node: Node | null) => void;
+  current: Node | null;
+  setCurrent: (node: Node | null) => void;
   device: Device;
   setDevice: (device: Device) => void;
   appConfig: AppConfig;
   setAppConfig: (appConfig: AppConfig) => void;
+  projectColors?: ProjectColors;
+  setProjectColors: (projectColors?: ProjectColors) => void;
+  previewMode: boolean;
+  setPreviewMode: (previewMode: boolean) => void;
   // Logging
   logs: LogEntry[];
   logLevel: LogLevel;
@@ -36,10 +42,16 @@ export const useRenderStore = createWithEqualityFn<RenderStore>()(
   (set) => ({
     copiedNode: null,
     setCopiedNode: (node) => set({ copiedNode: node }),
+    current: null,
+    setCurrent: (node) => set({ current: node }),
     device: getDefaultDevice(),
     setDevice: (device) => set({ device }),
     appConfig: defaultAppConfig,
     setAppConfig: (appConfig) => set({ appConfig }),
+    projectColors: undefined,
+    setProjectColors: (projectColors) => set({ projectColors }),
+    previewMode: false,
+    setPreviewMode: (previewMode) => set({ previewMode }),
     // Logging defaults
     logs: [],
     logLevel: 'INFO',

package/src/styles/base/_global.scss

@@ -12,13 +12,10 @@ body,
 
 .editor-container {
   height: 100vh;
-  width: 100vw;
+  width: 100%;
   display: flex;
   overflow: hidden; /* Split panels manage their own scroll */
 }
-.editor-panel-builder {
-  padding: 4px 8px;
-}
 
 .app-main {
   flex: 1 1 auto;
@@ -59,7 +56,7 @@ body,
 .split-left {
   @include thin-scrollbar;
   flex: 1 1 10%;
-  min-width: 0;
+  min-width: 200px;
   border-right: 1px solid colors.$borderColor;
   overflow: auto;
 }
@@ -67,6 +64,7 @@ body,
 .split-right {
   position: relative;
   flex: 1 1 45%;
+  min-width: 450px;
   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;
@@ -75,7 +73,7 @@ body,
 }
 
 .split-right__controls {
-  position: sticky;
+  position: absolute;
   top: sizes.$spaceCozy;
   z-index: 2;
   display: flex;
@@ -84,7 +82,6 @@ body,
 
 .split-third {
   flex: 1 1 25%;
-  min-width: 450px;
   border-right: 1px solid colors.$borderColor;
   overflow: auto;
   max-height: calc(100vh - 120px);
@@ -251,3 +248,157 @@ body,
   position: relative;
   z-index: 100;
 }
+
+.mobile-panel-toggle {
+  display: none;
+  padding: 0 sizes.$spaceComfy sizes.$spaceCozy;
+  gap: sizes.$spaceCompact;
+}
+
+.mobile-panel-toggle__button {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: sizes.$spaceCompact;
+  padding: sizes.$spaceCozy;
+  border-radius: sizes.$radiusRounded;
+  border: 1px solid colors.$borderColor;
+  background: #fff;
+  color: colors.$textColor;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background 0.2s ease,
+    color 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:focus-visible {
+    outline: sizes.$outlineWidthFocus solid colors.$accentColor;
+    outline-offset: 2px;
+  }
+}
+
+.mobile-panel-toggle__button--active {
+  background: colors.$textColor;
+  color: #fff;
+  border-color: colors.$textColor;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+}
+
+.mobile-panel-toggle__icon {
+  width: 18px;
+  height: 12px;
+  display: inline-flex;
+}
+
+.mobile-panel-toggle__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.mobile-panel-toggle__label {
+  line-height: 1;
+}
+
+.split-panel__close {
+  display: none;
+  position: absolute;
+  top: sizes.$spaceCozy;
+  right: sizes.$spaceCozy;
+  border: none;
+  border-radius: sizes.$radiusRounded;
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  padding: sizes.$spaceSnug sizes.$spaceComfy;
+  font-weight: 600;
+  cursor: pointer;
+  z-index: 5;
+}
+
+.editor-container__overlay {
+  display: none;
+}
+
+@media (max-width: 1000px) {
+  .editor-container {
+    position: relative;
+    min-height: calc(100vh - 60px);
+    flex-direction: column;
+  }
+
+  .split-left,
+  .split-third {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background: colors.$canvasColor;
+    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
+    transition:
+      transform 0.3s ease,
+      opacity 0.3s ease;
+    opacity: 0;
+    pointer-events: none;
+    z-index: 4;
+  }
+
+  .split-left {
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  .split-third {
+    transform: translate3d(100%, 0, 0);
+  }
+
+  .split-left.is-open,
+  .split-third.is-open {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .split-right {
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: calc(100vh - 120px);
+    padding: sizes.$spaceComfy;
+    padding-bottom: 120px;
+    position: relative;
+  }
+
+  .mobile-panel-toggle {
+    display: flex;
+  }
+
+  .split-panel__close {
+    display: inline-flex;
+  }
+
+  .editor-container__overlay {
+    display: block;
+    position: absolute;
+    inset: 0;
+    background: rgba(17, 24, 39, 0.35);
+    border: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    z-index: 3;
+  }
+}
+
+@media (max-width: 900px) {
+  .split-right__controls {
+    top: sizes.$spaceCozy;
+    z-index: 5;
+    padding-bottom: sizes.$spaceCozy;
+    .side-tool {
+      width: 100%;
+    }
+  }
+}

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

@@ -247,6 +247,18 @@
         grid-area: bottom;
       }
     }
+
+    @media (max-width: 1400px) {
+      &--box {
+        /* Stack sections vertically on narrower viewports */
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-areas:
+          'top'
+          'left'
+          'right'
+          'bottom';
+      }
+    }
   }
 
   &__field {

package/src/styles/components/_editor-shell.scss

@@ -187,3 +187,26 @@
   background: #eef2ff;
   color: #111827;
 }
+
+.side-tool {
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceTight;
+  padding: sizes.$spaceTight;
+  border-radius: 4px;
+  border: 1px solid colors.$borderColor;
+  font-size: 11px;
+  max-width: 220px;
+}
+
+.side-tool select {
+  width: 100%;
+  font-size: 11px;
+  padding: 4px 6px;
+}
+
+.side-tool .debug-button {
+  border-radius: 0;
+  width: 100%;
+  justify-content: center;
+}

package/src/styles/foundation/_sizes.scss

@@ -28,10 +28,10 @@ $fontSizeLg: 18px;
 $letterSpacingTight: 0.5px;
 
 $controlHeightMd: 36px;
+$buttonHeight: 40px;
 $dimensionSelectMinWidth: 60px;
 $dimensionSelectWidth: 72px;
 $dimensionSizeGridMin: 140px;
 $dimensionSizeGridMax: 220px;
 
 $zIndexRaised: 20;
-

package/src/styles/layout/_builder.scss

@@ -29,25 +29,68 @@
   gap: sizes.$spaceCompact;
 }
 
+.builder__list-item {
+  flex: 1 1 220px;
+  min-width: 220px;
+}
+
 .builder__button {
-  @include card;
-  padding: sizes.$spaceCozy sizes.$spaceCozy;
-  background: colors.$accentColor;
-  color: #fff;
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  > .builder__button-link {
+    flex: 1;
+    min-width: 0; // allow text to shrink inside flex layout
+    display: flex;
+    align-items: center;
+    @include card;
+    height: sizes.$buttonHeight;
+    line-height: sizes.$buttonHeight - 3px; // simple adjustment to center the text
+    padding: 0 sizes.$spaceTight;
+    margin: 0;
+    background: colors.$accentColor;
+    color: #fff;
+    font-size: clamp(sizes.$fontSizeXs, 1.3vw, sizes.$fontSizeSmPlus);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
 }
 
-.builder__button-label {
-  font-size: 13px;
-  font-weight: 600;
+.builder__sort-controls {
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceTight;
+}
+
+.builder__sort-button {
+  width: 32px;
+  height: 18px;
+  border: none;
+  border-radius: sizes.$radiusSoft;
+  background: colors.$canvasColor;
+  color: colors.$mutedTextColor;
+  font-size: 14px;
+  cursor: pointer;
+  line-height: 1;
+  box-shadow: inset 0 0 0 1px colors.$borderColor;
+  padding: 0;
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
 }
 
 .builder__button-condition {
-  font-size: 10px;
+  position: absolute;
+  bottom: -10px;
+  font-size: 8px;
 }
 
 .builder__node {
   @include card;
-  padding: sizes.$spaceCozy;
+  padding: sizes.$spaceSnug;
 }
 
 .builder__node-type {
@@ -56,9 +99,22 @@
 }
 
 .builder__children {
+  position: relative;
   display: flex;
   flex-direction: column;
-  gap: sizes.$spaceCompact;
+  gap: sizes.$spaceComfy;
+  > :not(:first-child) {
+    margin-left: sizes.$spaceComfy;
+  }
+  &::before {
+    content: '';
+    position: absolute;
+    left: 6px;
+    top: 2 * sizes.$spaceTight + sizes.$spaceComfy;
+    bottom: 0;
+    width: 1px;
+    background: colors.$borderColor;
+  }
 }
 
 .builder__text,

package/src/styles/modals/_color-modal.scss

@@ -44,6 +44,35 @@
   font-weight: 600;
 }
 
+.color-modal__toggle {
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceSnug;
+  padding: 0 sizes.$spaceCompact;
+}
+
+.color-modal__toggle-label {
+  display: flex;
+  align-items: center;
+  gap: sizes.$spaceCompact;
+  font-size: 13px;
+  font-weight: 600;
+  color: colors.$textColor;
+  cursor: pointer;
+}
+
+.color-modal__toggle-input {
+  width: 16px;
+  height: 16px;
+  accent-color: colors.$accentColor;
+}
+
+.color-modal__toggle-description {
+  margin: 0;
+  font-size: 12px;
+  color: colors.$mutedTextColor;
+}
+
 .color-modal__link-button {
   border: none;
   background: none;