@developer_tribe/react-builder 0.1.32 → 1.0.1

package/src/components/Builder.tsx

@@ -0,0 +1,272 @@
+import { useMemo, useState } from 'react';
+import {
+  isNodeArray,
+  isNodeNullOrUndefined,
+  isNodeString,
+  Node,
+  NodeData,
+  NodeDefaultAttribute,
+  allcomponentNames,
+} from '..';
+import { Breadcrumb } from './Breadcrumb';
+import { useLogRender } from '../utils/useLogRender';
+import { getDefaultsForType, getPatternByType } from '../utils/patterns';
+
+type BuilderEditorProps = {
+  data: Node;
+  setData: (data: Node) => void;
+  current: Node;
+  setCurrent: (current: Node) => void;
+};
+
+interface BuilderEditorComponentProps {
+  node: Node;
+  onClick: (node: Node) => void;
+}
+
+function BuilderButton({ node, onClick }: { node: Node; onClick: () => void }) {
+  if (isNodeNullOrUndefined(node)) {
+    return <div className="builder__placeholder">Null or undefined</div>;
+  }
+  if (isNodeString(node)) {
+    return <div className="builder__text">{node as string}</div>;
+  }
+  const nodeData = node as NodeData<NodeDefaultAttribute>;
+
+  let extra = '';
+  if (nodeData.attributes?.condition) {
+    extra = ` (${nodeData.attributes.condition} ${nodeData.attributes.conditionVariable})`;
+  }
+  return (
+    <a onClick={onClick} className="builder__button">
+      {nodeData.type} {extra}
+    </a>
+  );
+}
+
+function BuilderComponent({ node, onClick }: BuilderEditorComponentProps) {
+  if (isNodeNullOrUndefined(node)) {
+    return <div className="builder__placeholder">Null or undefined</div>;
+  }
+  if (isNodeString(node)) {
+    return (
+      <div className="builder__text">
+        {node as string} (Please define a node)
+      </div>
+    );
+  }
+
+  if (isNodeArray(node)) {
+    return (
+      <div className="builder__list">
+        {(node as Node[]).map((item, index) => (
+          <BuilderButton
+            onClick={() => {
+              onClick(item);
+            }}
+            key={index}
+            node={item}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  const nodeData = node as NodeData<NodeDefaultAttribute>;
+  const children = nodeData.children
+    ? isNodeArray(nodeData.children)
+      ? (nodeData.children as Node[])
+      : [nodeData.children]
+    : null;
+
+  return (
+    <div className="builder__node">
+      <p className="builder__node-type">{nodeData.type}</p>
+      <div className="builder__children">
+        {children &&
+          children.map((child, index) => (
+            <BuilderButton
+              onClick={() => {
+                onClick(child);
+              }}
+              key={index}
+              node={child}
+            />
+          ))}
+      </div>
+    </div>
+  );
+}
+
+export function Builder({
+  data,
+  setData,
+  current,
+  setCurrent,
+}: BuilderEditorProps) {
+  useLogRender('Builder');
+  const [crumbs, setCrumbs] = useState<string[]>(['root']);
+  const breadcrumbItems = useMemo(
+    () => crumbs.map((c, idx) => ({ label: c })),
+    [crumbs],
+  );
+
+  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;
+  }
+
+  function createDefaultNode(type: string): NodeData<NodeDefaultAttribute> {
+    const pattern = getPatternByType(type)?.pattern;
+    const defaults = getDefaultsForType(type) ?? {};
+    let children: Node = '';
+    const childrenSchema = pattern?.children as unknown;
+    if (childrenSchema === 'never') {
+      children = '';
+    } else if (childrenSchema === 'string') {
+      children = '';
+    } else if (
+      childrenSchema === 'node' ||
+      (Array.isArray(childrenSchema) && childrenSchema.includes('node'))
+    ) {
+      children = [];
+    } else if (typeof childrenSchema === 'string') {
+      // Specific child type like 'carouselItem' – initialize as empty array to allow multiple
+      children = [];
+    } else {
+      children = '';
+    }
+    return {
+      type,
+      children,
+      attributes: { ...defaults },
+    } as NodeData<NodeDefaultAttribute>;
+  }
+
+  function getAllowedChildTypes(parent: Node): string[] {
+    if (
+      isNodeNullOrUndefined(parent) ||
+      isNodeString(parent) ||
+      isNodeArray(parent)
+    )
+      return [];
+    const parentData = parent as NodeData;
+    const parentType = parentData.type;
+    // Special rule: limit OnboardButtons to OnboardButton only
+    if (parentType === 'OnboardButtons') return ['OnboardButton'];
+    const childrenSchema = getPatternByType(parentType)?.pattern
+      ?.children as unknown;
+    if (!childrenSchema) return [];
+    if (childrenSchema === 'never' || childrenSchema === 'string') return [];
+    if (
+      childrenSchema === 'node' ||
+      (Array.isArray(childrenSchema) && childrenSchema.includes('node'))
+    ) {
+      return [...allcomponentNames];
+    }
+    if (typeof childrenSchema === 'string') {
+      return [childrenSchema];
+    }
+    return [];
+  }
+
+  return (
+    <div className="builder">
+      <Breadcrumb items={breadcrumbItems} />
+
+      <div className="builder__current">
+        {crumbs[crumbs.length - 1] + ' ( ' + crumbs.length + '. level )'}
+      </div>
+      <BuilderComponent
+        onClick={(node: Node) => {
+          setCurrent(node);
+          setCrumbs((crumbs) => [
+            ...crumbs,
+            typeof node === 'string'
+              ? node
+              : (node as NodeData<NodeDefaultAttribute>).type,
+          ]);
+        }}
+        node={current}
+      />
+      {!isNodeNullOrUndefined(current) &&
+        !isNodeString(current) &&
+        !isNodeArray(current) &&
+        (() => {
+          const allowed = getAllowedChildTypes(current);
+          if (allowed.length === 0) return null;
+          return (
+            <div
+              style={{
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: 8,
+                paddingTop: 12,
+              }}
+            >
+              {allowed.map((t) => (
+                <button
+                  key={t}
+                  className="editor-button"
+                  onClick={() => {
+                    const parent = current as NodeData<NodeDefaultAttribute>;
+                    const nextChild = createDefaultNode(t);
+                    let nextChildren: Node;
+                    if (Array.isArray(parent.children)) {
+                      nextChildren = [
+                        ...(parent.children as Node[]),
+                        nextChild,
+                      ];
+                    } else if (
+                      parent.children === null ||
+                      parent.children === undefined ||
+                      typeof parent.children === 'string'
+                    ) {
+                      nextChildren = [nextChild];
+                    } else {
+                      nextChildren = [parent.children as Node, nextChild];
+                    }
+                    const updatedParent: NodeData<NodeDefaultAttribute> = {
+                      ...parent,
+                      children: nextChildren,
+                    };
+                    const updatedRoot = replaceNode(
+                      data,
+                      current,
+                      updatedParent,
+                    );
+                    setData(updatedRoot);
+                    setCurrent(updatedParent);
+                  }}
+                >
+                  Add {t}
+                </button>
+              ))}
+            </div>
+          );
+        })()}
+    </div>
+  );
+}

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>
+  );
+}