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

@@ -0,0 +1,150 @@
+import { useEffect, useState } from 'react';
+import { Node, RenderPage, Project } from '..';
+import { EditorHeader } from '../components/EditorHeader';
+import { AttributesEditorPanel } from '../components/AttributesEditorPanel';
+import { BuilderTab } from './tabs/BuilderTab';
+import { PreviewTab } from './tabs/PreviewTab';
+import { DebugTab } from './tabs/DebugTab';
+import { AppConfig, defaultAppConfig } from '../types/PreviewConfig';
+import { useRenderStore } from '../store';
+import { logger } from '../utils/logger';
+import { useLogRender } from '../utils/useLogRender';
+import type { LogLevel } from '../types/Project';
+import backgroundImage from '../assets/images/background.jpg';
+export type Tab = 'builder' | 'preview';
+
+export type ProjectPageProps = {
+  project: Project;
+  onSaveProject: (project: Project) => void;
+  appConfig?: AppConfig;
+  logLevel?: LogLevel;
+};
+
+export function ProjectPage({
+  project,
+  appConfig = defaultAppConfig,
+  onSaveProject,
+  logLevel,
+}: ProjectPageProps) {
+  useLogRender('ProjectPage');
+  const [current, setCurrent] = useState<Node>(project.data);
+  const [editorData, setEditorData] = useState<Node>(project.data);
+  const [tab, setTab] = useState<Tab>('builder');
+
+  useEffect(() => {
+    logger.info('ProjectPage', 'mount', { projectName: project.name });
+    useRenderStore.getState().setAppConfig(appConfig);
+    logger.verbose('ProjectPage', 'appConfig applied', appConfig);
+    return () => {
+      logger.info('ProjectPage', 'unmount');
+    };
+  }, [appConfig, project.name]);
+
+  useEffect(() => {
+    if (!logLevel) return;
+    logger.setLevel(logLevel);
+  }, [logLevel]);
+
+  return (
+    <div className="container-full">
+      <EditorHeader
+        onSaveProject={() => {
+          logger.info('ProjectPage', 'save project', { name: project.name });
+          onSaveProject({
+            ...project,
+            data: editorData,
+          });
+        }}
+        onRestoreProject={() => {
+          logger.info('ProjectPage', 'restore project', { name: project.name });
+          setEditorData(project.data);
+          setCurrent(project.data);
+        }}
+        current={current}
+        editorData={editorData}
+        setEditorData={setEditorData}
+      />
+      <div className="editor-container">
+        <div className="split-left">
+          <div>
+            <div
+              className="editor-tabs"
+              role="tablist"
+              aria-label="Editor tabs"
+            >
+              <button
+                className={`editor-tab ${tab === 'builder' ? 'editor-tab--active' : ''}`}
+                role="tab"
+                aria-selected={tab === 'builder'}
+                onClick={() => {
+                  setTab('builder');
+                  logger.info('ProjectPage', 'tab change', { to: 'builder' });
+                }}
+              >
+                <span className="editor-tab__label">Builder</span>
+              </button>
+              <button
+                className={`editor-tab ${tab === 'preview' ? 'editor-tab--active' : ''}`}
+                role="tab"
+                aria-selected={tab === 'preview'}
+                onClick={() => {
+                  setTab('preview');
+                  logger.info('ProjectPage', 'tab change', { to: 'preview' });
+                }}
+              >
+                <span className="editor-tab__label">Preview Config</span>
+              </button>
+            </div>
+
+            {tab === 'builder' && (
+              <BuilderTab
+                data={editorData}
+                setData={setEditorData}
+                current={current}
+                setCurrent={setCurrent}
+              />
+            )}
+
+            {tab === 'preview' && <PreviewTab />}
+          </div>
+        </div>
+        <div className="split-right">
+          <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
+            current={current}
+            attributes={editorData}
+            onChange={(data) => {
+              setEditorData(data);
+              let nodeKey: string | undefined = undefined;
+              if (
+                data &&
+                typeof data === 'object' &&
+                !Array.isArray(data) &&
+                'key' in (data as any)
+              ) {
+                nodeKey = (data as any).key as string | undefined;
+              }
+              logger.verbose(
+                'ProjectPage',
+                'attributes change',
+                nodeKey ? { nodeKey } : undefined,
+              );
+            }}
+            setCurrent={setCurrent}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/pages/tabs/BuilderTab.tsx

@@ -0,0 +1,33 @@
+import { Node } from '../..';
+import { useLogRender } from '../../utils/useLogRender';
+import { Builder } from '../../components/Builder';
+
+type BuilderTabProps = {
+  data: Node;
+  setData: (data: Node) => void;
+  current: Node;
+  setCurrent: (current: Node) => void;
+};
+
+export function BuilderTab({
+  data,
+  setData,
+  current,
+  setCurrent,
+}: BuilderTabProps) {
+  useLogRender('BuilderTab');
+  return (
+    <div
+      role="tabpanel"
+      className="editor-panel-builder editor-panel editor-panel--active"
+      aria-hidden={false}
+    >
+      <Builder
+        data={data}
+        setData={setData}
+        current={current}
+        setCurrent={setCurrent}
+      />
+    </div>
+  );
+}

package/src/pages/tabs/DebugTab.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { JsonEditor } from 'json-edit-react';
+import { Modal } from '../../modals';
+import { Node } from '../..';
+import { useLogRender } from '../../utils/useLogRender';
+
+type DebugTabProps = {
+  data: Node;
+  setData: (data: Node) => void;
+};
+
+export function DebugTab({ data, setData }: DebugTabProps) {
+  useLogRender('DebugTab');
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <>
+      <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

@@ -0,0 +1,206 @@
+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 = {};
+
+export function PreviewTab({}: PreviewTabProps) {
+  useLogRender('PreviewTab');
+  const { appConfig, setAppConfig } = useRenderStore((s) => ({
+    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"
+      className="editor-panel editor-panel--active"
+      aria-hidden={false}
+    >
+      <div style={{ padding: 12 }}>
+        <div
+          style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}
+        >
+          <div>Default Language</div>
+          <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>
+        </div>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+            gap: 12,
+            marginTop: 8,
+          }}
+        >
+          <div>Light Background Color</div>
+          <input
+            type="color"
+            value={appConfig.screenStyle?.light.backgroundColor ?? '#FDFDFD'}
+            onChange={(e) => {
+              const next = {
+                ...appConfig.screenStyle,
+                light: {
+                  ...(appConfig.screenStyle?.light ?? {
+                    color: '#161827',
+                  }),
+                  backgroundColor: e.target.value,
+                },
+              };
+
+              setAppConfig({
+                ...appConfig,
+                screenStyle: next,
+              });
+            }}
+            className="input input--color"
+          />
+          <div>Light Color</div>
+          <input
+            type="color"
+            value={appConfig.screenStyle?.light.color ?? '#161827'}
+            onChange={(e) => {
+              const next = {
+                ...appConfig.screenStyle,
+                light: {
+                  ...(appConfig.screenStyle?.light ?? {
+                    backgroundColor: '#FDFDFD',
+                  }),
+                  color: e.target.value,
+                },
+              };
+
+              setAppConfig({
+                ...appConfig,
+                screenStyle: next,
+              });
+            }}
+            className="input input--color"
+          />
+          <div>Dark Background Color</div>
+          <input
+            type="color"
+            value={appConfig.screenStyle?.dark.backgroundColor ?? '#12131A'}
+            onChange={(e) => {
+              const next = {
+                ...appConfig.screenStyle,
+                dark: {
+                  ...(appConfig.screenStyle?.dark ?? {
+                    color: '#E9EBF9',
+                  }),
+                  backgroundColor: e.target.value,
+                },
+              };
+
+              setAppConfig({
+                ...appConfig,
+                screenStyle: next,
+              });
+            }}
+            className="input input--color"
+          />
+          <div>Dark Color</div>
+          <input
+            type="color"
+            value={appConfig.screenStyle?.dark.color ?? '#E9EBF9'}
+            onChange={(e) => {
+              const next = {
+                ...appConfig.screenStyle,
+                dark: {
+                  ...(appConfig.screenStyle?.dark ?? {
+                    backgroundColor: '#12131A',
+                  }),
+                  color: e.target.value,
+                },
+              };
+              setAppConfig({
+                ...appConfig,
+                screenStyle: next,
+              });
+            }}
+            className="input input--color"
+          />
+        </div>
+        <div style={{ marginTop: 8 }}>
+          <Checkbox
+            label="Dark Mode"
+            checked={appConfig.theme === 'dark'}
+            onChange={(checked) => {
+              const nextTheme = checked ? 'dark' : 'light';
+              setAppConfig({
+                ...appConfig,
+                theme: nextTheme,
+              });
+            }}
+          />
+        </div>
+        <div style={{ marginTop: 8 }}>
+          <Checkbox
+            label="Is RTL"
+            checked={appConfig.isRtl ?? false}
+            onChange={(checked) => {
+              setAppConfig({
+                ...appConfig,
+                isRtl: checked,
+              });
+            }}
+          />
+        </div>
+        <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,14 +1,34 @@
 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.baseSize, shortDimension, longDimension };
+  return {
+    baseSize: { width: baseWidth, height: baseHeight },
+    shortDimension,
+    longDimension,
+  };
 }
 export function scale(size: number) {
   const { baseSize, shortDimension } = getBaseDimensions();

package/src/store.ts

@@ -1,56 +1,74 @@
 import { createWithEqualityFn } from 'zustand/traditional';
 import { shallow } from 'zustand/shallow';
 import type { Device } from './types/Device';
-import type { Localication } from './types/PreviewConfig';
+import {
+  defaultAppConfig,
+  type AppConfig,
+  type Localication,
+} from './types/PreviewConfig';
 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';
 
 type RenderStore = {
+  copiedNode: Node | null;
+  setCopiedNode: (node: Node | null) => void;
   device: Device;
-  localication: Localication | null;
-  defaultLanguage?: string;
-  baseSize: {
-    width: number;
-    height: number;
-  };
-  theme: 'dark' | 'light';
-  screenStyle: ScreenStyle;
-  setBaseSize: (baseSize: { width: number; height: number }) => void;
   setDevice: (device: Device) => void;
-  setLocalication: (localication: Localication | null) => void;
-  setDefaultLanguage: (defaultLanguage?: string) => void;
-  setTheme: (theme: 'dark' | 'light') => void;
-  setScreenStyle: (screenStyle: ScreenStyle) => void;
+  appConfig: AppConfig;
+  setAppConfig: (appConfig: AppConfig) => void;
+  // Logging
+  logs: LogEntry[];
+  logLevel: LogLevel;
+  setLogLevel: (level: LogLevel) => void;
+  addLog: (
+    entry: Omit<LogEntry, 'id' | 'timestamp'> & {
+      id?: string;
+      timestamp?: number;
+    },
+  ) => void;
+  clearLogs: () => void;
 };
 
 export const useRenderStore = createWithEqualityFn<RenderStore>()(
   (set) => ({
+    copiedNode: null,
+    setCopiedNode: (node) => set({ copiedNode: node }),
     device: getDefaultDevice(),
-    localication: null,
-    defaultLanguage: undefined,
-    baseSize: {
-      width: 390,
-      height: 844,
-    },
-    theme: 'light',
-    screenStyle: {
-      light: {
-        backgroundColor: '#FDFDFD',
-        color: '#161827',
-        seperatorColor: '#E5E7EB',
-      },
-      dark: {
-        backgroundColor: '#12131A',
-        color: '#E9EBF9',
-        seperatorColor: '#E5E7EB',
-      },
-    },
-    setBaseSize: (baseSize) => set({ baseSize }),
     setDevice: (device) => set({ device }),
-    setLocalication: (localication) => set({ localication }),
-    setDefaultLanguage: (defaultLanguage) => set({ defaultLanguage }),
-    setTheme: (theme) => set({ theme }),
-    setScreenStyle: (screenStyle) => set({ screenStyle }),
+    appConfig: defaultAppConfig,
+    setAppConfig: (appConfig) => set({ appConfig }),
+    // Logging defaults
+    logs: [],
+    logLevel: 'INFO',
+    setLogLevel: (level) => set({ logLevel: level }),
+    addLog: (entry) =>
+      set((state) => {
+        const now = Date.now();
+        const id =
+          entry.id ?? `${now}-${Math.random().toString(36).slice(2, 8)}`;
+        const timestamp = entry.timestamp ?? now;
+        const newEntry: LogEntry = {
+          id,
+          timestamp,
+          level: entry.level,
+          source: entry.source,
+          message: entry.message,
+          payload: entry.payload,
+        };
+        return { logs: [...state.logs, newEntry] };
+      }),
+    clearLogs: () => set({ logs: [] }),
+    persist: {
+      name: 'render-store',
+      partialize: (state: RenderStore) => ({
+        copiedNode: state.copiedNode ?? null,
+        logLevel: state.logLevel,
+      }),
+      storage: createJSONStorage(() => localStorage),
+    },
   }),
   shallow,
 );