@developer_tribe/react-builder 1.0.1 → 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

@@ -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,
   };
@@ -51,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,17 +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;
-  renderCount: number;
-  forceRender: () => void;
+  projectColors?: ProjectColors;
+  setProjectColors: (projectColors?: ProjectColors) => void;
+  previewMode: boolean;
+  setPreviewMode: (previewMode: boolean) => void;
   // Logging
   logs: LogEntry[];
   logLevel: LogLevel;
@@ -38,12 +42,16 @@ export const useRenderStore = createWithEqualityFn<RenderStore>()(
   (set) => ({
     copiedNode: null,
     setCopiedNode: (node) => set({ copiedNode: node }),
-    renderCount: 0,
-    forceRender: () => set((state) => ({ renderCount: state.renderCount + 1 })),
+    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',