@developer_tribe/react-builder 0.1.31 → 1.0.1

package/src/components/EditorHeader.tsx

@@ -0,0 +1,186 @@
+import { useMemo, useState } from 'react';
+import { Device, getDevices, Node, copyNode } from '..';
+import { useRenderStore } from '../store';
+import { Breadcrumb, BreadcrumbItem } from './Breadcrumb';
+import { useLogRender } from '../utils/useLogRender';
+
+const devices = getDevices();
+
+interface EditorHeaderProps {
+  onSaveProject?: () => void;
+  current?: Node;
+  editorData?: Node;
+  setEditorData?: (data: Node) => void;
+}
+
+interface DeviceButtonProps {
+  device: Device;
+  selectedDevice: Device | null;
+  setSelectedDevice: (device: Device) => void;
+}
+export function DeviceButton({
+  device,
+  selectedDevice,
+  setSelectedDevice,
+}: DeviceButtonProps) {
+  return (
+    <button
+      className={`editor-device-button ${selectedDevice === device ? 'editor-device-button--selected' : ''}`}
+      onClick={() => setSelectedDevice(device)}
+    >
+      {device.name} <br />
+      {device.width}x{device.height}
+    </button>
+  );
+}
+
+export function EditorHeader({
+  onSaveProject,
+  current,
+  editorData,
+  setEditorData,
+}: EditorHeaderProps) {
+  useLogRender('EditorHeader');
+  const [isDevicesModalOpen, setIsDevicesModalOpen] = useState(false);
+  const copiedNode = useRenderStore((s) => s.copiedNode);
+  const { device, setDevice } = useRenderStore((s) => ({
+    device: s.device,
+    setDevice: s.setDevice,
+  }));
+
+  function replaceNode(root: Node, target: Node, next: Node): Node {
+    if (root === target) return next;
+    if (root === null || root === undefined) return root;
+    if (typeof root === 'string') return root;
+    if (Array.isArray(root)) {
+      let changed = false;
+      const arr = root.map((item) => {
+        const r = replaceNode(item, target, next);
+        if (r !== item) changed = true;
+        return r;
+      });
+      return changed ? arr : root;
+    }
+    const data = root as any;
+    if ('children' in data) {
+      const prev = data.children;
+      const replaced = Array.isArray(prev)
+        ? prev.map((c: Node) => replaceNode(c, target, next))
+        : replaceNode(prev as Node, target, next);
+      if (replaced !== prev) {
+        data.children = replaced;
+        return { ...data, children: replaced } as Node;
+      }
+    }
+    return root;
+  }
+  const handleCopy = () => {
+    if (current) copyNode(current);
+  };
+  const handlePaste = () => {
+    if (!current || !editorData || !setEditorData) return;
+    if (!copiedNode) return;
+    const cloned = JSON.parse(JSON.stringify(copiedNode)) as Node;
+    const updated = replaceNode(editorData, current, cloned);
+    useRenderStore.setState({
+      copiedNode: null,
+    });
+    useRenderStore.getState().forceRender();
+    setEditorData(updated);
+  };
+  return (
+    <div
+      className="editor-header"
+      role="region"
+      aria-label="Editor utility header"
+    >
+      <div className="editor-header__devices">
+        {devices.slice(0, 5).map((device: Device) => (
+          <DeviceButton
+            key={device.name}
+            selectedDevice={device}
+            setSelectedDevice={setDevice}
+            device={device}
+          />
+        ))}
+        <button
+          className="editor-device-button"
+          aria-label="More devices"
+          onClick={() => setIsDevicesModalOpen(true)}
+        >
+          More devices
+        </button>
+      </div>
+      <div className="editor-header__actions">
+        <button
+          className="editor-button editor-save-button"
+          aria-label="Save project data"
+          onClick={() => onSaveProject && onSaveProject()}
+        >
+          Save
+        </button>
+        <button
+          className="editor-button editor-save-previewconfig-button"
+          aria-label="Save previewConfig"
+          onClick={() => useRenderStore.getState().forceRender()}
+        >
+          Force Render
+        </button>
+        <button
+          className="editor-button"
+          aria-label="Copy node"
+          onClick={handleCopy}
+        >
+          Copy
+        </button>
+        {copiedNode && (
+          <button
+            className="editor-button"
+            aria-label="Paste node"
+            onClick={handlePaste}
+          >
+            Paste
+          </button>
+        )}
+      </div>
+      {isDevicesModalOpen && (
+        <div
+          className="editor-modal"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="device-selector-title"
+        >
+          <div
+            className="editor-modal__overlay"
+            onClick={() => setIsDevicesModalOpen(false)}
+          />
+          <div className="editor-modal__content">
+            <div className="editor-modal__header">
+              <h3 id="device-selector-title">Select a device</h3>
+              <button
+                className="editor-button"
+                aria-label="Close device selector"
+                onClick={() => setIsDevicesModalOpen(false)}
+              >
+                Close
+              </button>
+            </div>
+            <div className="editor-device-grid" role="list">
+              {devices.map((device: Device) => (
+                <DeviceButton
+                  key={device.name}
+                  selectedDevice={device}
+                  setSelectedDevice={(d: Device) => {
+                    setDevice(d);
+                    setIsDevicesModalOpen(false);
+                  }}
+                  device={device}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/index.ts

@@ -1,9 +1,9 @@
 import './styles/index.scss';
 import AttributesEditor from './AttributesEditor';
 
-export { TargetedScreenSize } from './types/TargetedScreenSize';
-export { Node, NodeData, NodeDefaultAttribute } from './types/Node';
-export { Project } from './types/Project';
+export type { TargetedScreenSize } from './types/TargetedScreenSize';
+export type { Node, NodeData, NodeDefaultAttribute } from './types/Node';
+export type { Project } from './types/Project';
 export {
   isNodeNullOrUndefined,
   isNodeString,
@@ -14,7 +14,6 @@ export {
 export { getSamples } from './assets/samples/getSamples';
 export { getBasicSamples } from './assets/samples/getSamples';
 export { getOnboardSamples } from './assets/samples/getSamples';
-export { PreviewConfig } from './types/PreviewConfig';
 export { RenderPage } from './RenderPage';
 export { DeviceMockFrame } from './DeviceMockFrame';
 export { novaToJson } from './utils/novaToJson';
@@ -28,3 +27,8 @@ export { querySelector } from './utils/querySelector';
 export { extractViewStyle } from './utils/extractViewStyle';
 export { extractImageStyle } from './utils/extractImageStyle';
 export { extractTextStyle } from './utils/extractTextStyle';
+export { ProjectPage } from './pages/ProjectPage';
+export type { ProjectPageProps, Tab } from './pages/ProjectPage';
+export { copyNode } from './utils/copyNode';
+export { logger } from './utils/logger';
+export type { LogLevel } from './types/Project';

package/src/pages/ProjectPage.tsx

@@ -0,0 +1,152 @@
+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';
+
+export type Tab = 'builder' | 'preview' | 'debug';
+
+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,
+          });
+        }}
+        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' });
+                }}
+              >
+                Builder
+              </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' });
+                }}
+              >
+                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
+              </button>
+            </div>
+
+            {tab === 'builder' && (
+              <BuilderTab
+                data={editorData}
+                setData={setEditorData}
+                current={current}
+                setCurrent={setCurrent}
+              />
+            )}
+
+            {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>
+        <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,23 @@
+import { JsonEditor } from 'json-edit-react';
+import { Node } from '../..';
+import { useLogRender } from '../../utils/useLogRender';
+
+type DebugTabProps = {
+  data: Node;
+  setData: (data: Node) => void;
+};
+
+export function DebugTab({ data, setData }: DebugTabProps) {
+  useLogRender('DebugTab');
+  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>
+  );
+}

package/src/pages/tabs/PreviewTab.tsx

@@ -0,0 +1,194 @@
+import { JsonEditor } from 'json-edit-react';
+import { Localication, TargetedScreenSize } from '../..';
+import { useLogRender } from '../../utils/useLogRender';
+import { useRenderStore } from '../../store';
+
+type PreviewTabProps = {};
+
+export function PreviewTab({}: PreviewTabProps) {
+  useLogRender('PreviewTab');
+  const { appConfig, setAppConfig } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
+    setAppConfig: s.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={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            marginTop: 8,
+          }}
+        >
+          <div>Dark Mode</div>
+          <input
+            type="checkbox"
+            checked={appConfig.theme === 'dark'}
+            onChange={(e) => {
+              const nextTheme = e.target.checked ? 'dark' : 'light';
+
+              setAppConfig({
+                ...appConfig,
+                theme: nextTheme,
+              });
+            }}
+          />
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            marginTop: 8,
+          }}
+        >
+          <div>Is RTL</div>
+          <input
+            type="checkbox"
+            checked={appConfig.isRtl ?? false}
+            onChange={(e) => {
+              setAppConfig({
+                ...appConfig,
+                isRtl: e.target.checked,
+              });
+            }}
+          />
+        </div>
+        <div style={{ marginTop: 8 }}>
+          <JsonEditor
+            rootName="localication"
+            data={appConfig.localication ?? {}}
+            setData={(data) => {
+              setAppConfig({
+                ...appConfig,
+                localication: data as Localication,
+              });
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/size-matters/index.ts

@@ -8,7 +8,11 @@ function getBaseDimensions() {
       ? [device.width, device.height]
       : [device.height, device.width];
 
-  return { baseSize: currentState.baseSize, shortDimension, longDimension };
+  return {
+    baseSize: currentState.appConfig.baseSize,
+    shortDimension,
+    longDimension,
+  };
 }
 export function scale(size: number) {
   const { baseSize, shortDimension } = getBaseDimensions();