@developer_tribe/react-builder 1.2.32 → 1.2.34

package/src/modals/PromptManagerModal.tsx

@@ -0,0 +1,270 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import Modal from './Modal';
+import { useRenderStore } from '../store';
+import type { Node } from '../types/Node';
+import { nodeToXml, xmlToNode } from '../utils/nodeXml';
+import { analyseAndProccess } from '../utils/analyseNode';
+import { onboardPromptScheme } from '../assets/prompt-scheme-onboard.generated';
+import { paywallPromptScheme } from '../assets/prompt-scheme-paywall.generated';
+
+type PromptManagerTab = 'xml-editor' | 'prompt-schema';
+
+type PromptManagerModalProps = {
+  data: Node;
+  setData: React.Dispatch<React.SetStateAction<Node>>;
+  onClose: () => void;
+};
+
+export function PromptManagerModal({
+  data,
+  setData,
+  onClose,
+}: PromptManagerModalProps) {
+  const [activeTab, setActiveTab] = useState<PromptManagerTab>('xml-editor');
+
+  return (
+    <Modal
+      onClose={onClose}
+      ariaLabelledBy="prompt-manager-modal-title"
+      className="modal--large modal--scrollable"
+      contentClassName="prompt-manager-modal__content"
+    >
+      <div className="modal__header prompt-manager-modal__header">
+        <h3 id="prompt-manager-modal-title" className="modal__title">
+          Prompt Manager
+        </h3>
+        <button type="button" className="editor-button" onClick={onClose}>
+          Close
+        </button>
+      </div>
+
+      <div className="prompt-manager-modal__tabs">
+        <button
+          type="button"
+          className={`prompt-manager-modal__tab${
+            activeTab === 'xml-editor' ? ' is-active' : ''
+          }`}
+          onClick={() => setActiveTab('xml-editor')}
+        >
+          XML Editor
+        </button>
+        <button
+          type="button"
+          className={`prompt-manager-modal__tab${
+            activeTab === 'prompt-schema' ? ' is-active' : ''
+          }`}
+          onClick={() => setActiveTab('prompt-schema')}
+        >
+          Prompt Şeması
+        </button>
+      </div>
+
+      <div className="prompt-manager-modal__body">
+        {activeTab === 'xml-editor' && (
+          <XmlEditorTab data={data} setData={setData} />
+        )}
+        {activeTab === 'prompt-schema' && <PromptSchemaTab />}
+      </div>
+    </Modal>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Tab 1 – XML Editor                                                */
+/* ------------------------------------------------------------------ */
+
+function XmlEditorTab({
+  data,
+  setData,
+}: {
+  data: Node;
+  setData: React.Dispatch<React.SetStateAction<Node>>;
+}) {
+  const setCurrent = useRenderStore((s) => s.setCurrent);
+
+  const initialXml = useMemo(() => {
+    try {
+      return nodeToXml(data);
+    } catch {
+      return '';
+    }
+  }, [data]);
+
+  const [text, setText] = useState(initialXml);
+  const [parseError, setParseError] = useState<string | null>(null);
+  const [applyError, setApplyError] = useState<string | null>(null);
+  const [applySuccess, setApplySuccess] = useState(false);
+
+  useEffect(() => {
+    setText(initialXml);
+    setParseError(null);
+    setApplyError(null);
+    setApplySuccess(false);
+  }, [initialXml]);
+
+  const handleChange = useCallback((value: string) => {
+    setText(value);
+    setApplyError(null);
+    setApplySuccess(false);
+  }, []);
+
+  const handleApply = () => {
+    try {
+      const parsed = xmlToNode(text);
+      setParseError(null);
+      setApplyError(null);
+      setApplySuccess(false);
+      try {
+        const processed = analyseAndProccess(parsed as Node) as Node;
+        setData(processed);
+        // Keep selection in sync with the new root.
+        setCurrent(processed);
+        setApplySuccess(true);
+      } catch (e) {
+        setApplyError(e instanceof Error ? e.message : 'Failed to apply XML');
+      }
+    } catch (e) {
+      setParseError(e instanceof Error ? e.message : 'Invalid XML');
+    }
+  };
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      // ignore
+    }
+  };
+
+  return (
+    <div className="prompt-manager-modal__editor-wrap">
+      <div className="prompt-manager-modal__toolbar">
+        <div style={{ fontSize: 12, opacity: 0.75 }}>node.xml</div>
+        <div style={{ display: 'flex', gap: 8 }}>
+          <button type="button" className="editor-button" onClick={handleCopy}>
+            Copy
+          </button>
+          <button type="button" className="editor-button" onClick={handleApply}>
+            Apply
+          </button>
+        </div>
+      </div>
+
+      <textarea
+        className="prompt-manager-modal__editor"
+        value={text}
+        onChange={(e) => {
+          setText(e.target.value);
+          setApplyError(null);
+          setApplySuccess(false);
+        }}
+        spellCheck={false}
+      />
+
+      {parseError ? (
+        <div style={{ fontSize: 12, color: '#d12f2f' }}>
+          Invalid XML: {parseError}
+        </div>
+      ) : applyError ? (
+        <div style={{ fontSize: 12, color: '#d12f2f' }}>
+          Could not apply: {applyError}
+        </div>
+      ) : applySuccess ? (
+        <div style={{ fontSize: 12, color: '#2e7d32' }}>
+          ✓ Applied successfully
+        </div>
+      ) : (
+        <div style={{ fontSize: 12, opacity: 0.7 }}>
+          Edit XML and press Apply to update the node tree.
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Tab 2 – Prompt Şeması                                            */
+/* ------------------------------------------------------------------ */
+
+type PromptSchemaSubTab = 'onboard' | 'paywall';
+
+function PromptSchemaTab() {
+  const [subTab, setSubTab] = useState<PromptSchemaSubTab>('onboard');
+  const [copied, setCopied] = useState(false);
+
+  const activeScheme =
+    subTab === 'onboard' ? onboardPromptScheme : paywallPromptScheme;
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(activeScheme);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      // ignore
+    }
+  };
+
+  return (
+    <div className="prompt-manager-modal__editor-wrap">
+      {/* Sub-tab selector + copy */}
+      <div className="prompt-manager-modal__toolbar">
+        <div style={{ display: 'flex', gap: 4 }}>
+          <button
+            type="button"
+            className="editor-button"
+            onClick={() => {
+              setSubTab('onboard');
+              setCopied(false);
+            }}
+            style={
+              subTab === 'onboard'
+                ? {
+                    background: '#1565c0',
+                    color: '#fff',
+                    borderColor: '#1565c0',
+                  }
+                : undefined
+            }
+          >
+            Onboard
+          </button>
+          <button
+            type="button"
+            className="editor-button"
+            onClick={() => {
+              setSubTab('paywall');
+              setCopied(false);
+            }}
+            style={
+              subTab === 'paywall'
+                ? {
+                    background: '#6a1b9a',
+                    color: '#fff',
+                    borderColor: '#6a1b9a',
+                  }
+                : undefined
+            }
+          >
+            Paywall
+          </button>
+        </div>
+        <button type="button" className="editor-button" onClick={handleCopy}>
+          {copied ? '✓ Copied' : 'Copy'}
+        </button>
+      </div>
+
+      <textarea
+        className="prompt-manager-modal__editor"
+        value={activeScheme}
+        readOnly
+        spellCheck={false}
+      />
+
+      <div style={{ fontSize: 12, opacity: 0.7 }}>
+        {activeScheme.length.toLocaleString()} chars · read-only
+        (auto-generated)
+      </div>
+    </div>
+  );
+}

package/src/modals/index.ts

@@ -10,3 +10,4 @@ export { ProductPresetsModal } from './ProductPresetsModal';
 export { BenefitEditModal } from './BenefitEditModal';
 export { BenefitPresetsModal } from './BenefitPresetsModal';
 export { InspectModal } from './InspectModal';
+export { PromptManagerModal } from './PromptManagerModal';

package/src/styles/index.scss

@@ -28,5 +28,6 @@
 @use './modals/benefit-edit-modal';
 @use './modals/benefit-presets-modal';
 @use './modals/inspect-modal';
+@use './modals/prompt-manager-modal';
 
 @use './utilities/carousel';

package/src/styles/modals/_prompt-manager-modal.scss

@@ -0,0 +1,95 @@
+@use '../foundation/colors' as colors;
+@use '../foundation/sizes' as sizes;
+@use '../foundation/typography' as typography;
+
+.prompt-manager-modal__content {
+  width: calc(100vw - 32px);
+  height: calc(100vh - 32px);
+  max-width: 1400px;
+  max-height: calc(100vh - 32px);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.prompt-manager-modal__header {
+  padding: sizes.$spaceComfy sizes.$spaceRoomy;
+  border-bottom: 1px solid colors.$borderColor;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.prompt-manager-modal__tabs {
+  display: flex;
+  padding: 0 sizes.$spaceRoomy;
+  border-bottom: 1px solid colors.$borderColor;
+  background: colors.$canvasColor;
+}
+
+.prompt-manager-modal__tab {
+  padding: sizes.$spaceComfy sizes.$spaceRoomy;
+  font-size: 14px;
+  font-weight: 500;
+  color: colors.$mutedTextColor;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: colors.$textColor;
+  }
+
+  &.is-active {
+    color: colors.$primary;
+    border-bottom-color: colors.$primary;
+  }
+}
+
+.prompt-manager-modal__body {
+  flex: 1;
+  min-height: 0;
+  padding: sizes.$spaceRoomy;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.prompt-manager-modal__editor-wrap {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$spaceComfy;
+  min-height: 0;
+}
+
+.prompt-manager-modal__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.prompt-manager-modal__editor {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  resize: none;
+  border: 1px solid colors.$borderColor;
+  border-radius: sizes.$radiusRounded;
+  padding: sizes.$spaceComfy;
+  font-family:
+    'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas',
+    'Liberation Mono', 'Courier New', monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  background: colors.$muted;
+  color: colors.$textColor;
+  outline: none;
+
+  &:focus {
+    border-color: colors.$primary;
+    box-shadow: 0 0 0 2px color-mix(in srgb, colors.$primary, transparent 90%);
+  }
+}

package/src/utils/nodeXml.ts

@@ -0,0 +1,196 @@
+import type { Node, NodeData } from '../types/Node';
+
+/* ------------------------------------------------------------------ */
+/*  Node → XML                                                        */
+/* ------------------------------------------------------------------ */
+
+function escapeXmlAttr(str: string, quote: '"' | "'"): string {
+  let result = str
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+  if (quote === '"') {
+    result = result.replace(/"/g, '&quot;');
+  } else {
+    result = result.replace(/'/g, '&apos;');
+  }
+  return result;
+}
+
+function attrValueToString(value: unknown): string {
+  if (value === null || value === undefined) return '';
+  if (typeof value === 'string') return value;
+  if (typeof value === 'number' || typeof value === 'boolean')
+    return String(value);
+  return JSON.stringify(value);
+}
+
+function nodeToXmlInner(node: Node, indent: number): string {
+  const pad = '  '.repeat(indent);
+
+  if (node === null || node === undefined) return '';
+  if (typeof node === 'string')
+    return `${pad}${escapeXmlAttr(node, '"').replace(/"/g, '"')}`; // Text content doesn't need to escape quotes
+
+  if (Array.isArray(node)) {
+    return node.map((child) => nodeToXmlInner(child, indent)).join('\n');
+  }
+
+  if (typeof node !== 'object') return '';
+
+  const record = node as NodeData;
+  const type = record.type;
+  if (!type) return '';
+
+  // Build attribute string
+  const attrs: string[] = [];
+
+  const addAttr = (key: string, val: unknown) => {
+    const strValue = attrValueToString(val);
+    // Smart quote selection:
+    // If value contains double quotes but NOT single quotes, use single quotes.
+    // Otherwise default to double quotes (and escape internal double quotes).
+    const useSingle = strValue.includes('"') && !strValue.includes("'");
+    const quote = useSingle ? "'" : '"';
+    const escaped = escapeXmlAttr(strValue, quote);
+    attrs.push(`${key}=${quote}${escaped}${quote}`);
+  };
+
+  if (record.key) addAttr('key', record.key);
+  if (record.sourceType) addAttr('sourceType', record.sourceType);
+  if (record.isMain) addAttr('isMain', 'true');
+
+  if (record.attributes && typeof record.attributes === 'object') {
+    for (const [k, v] of Object.entries(record.attributes)) {
+      addAttr(k, v);
+    }
+  }
+
+  const attrStr = attrs.length > 0 ? ' ' + attrs.join(' ') : '';
+
+  // Children
+  const children = record.children;
+  if (
+    children === null ||
+    children === undefined ||
+    (Array.isArray(children) && children.length === 0)
+  ) {
+    return `${pad}<${type}${attrStr} />`;
+  }
+
+  const childXml = nodeToXmlInner(children, indent + 1);
+  return `${pad}<${type}${attrStr}>\n${childXml}\n${pad}</${type}>`;
+}
+
+/**
+ * Serialize a Node tree to an XML string.
+ */
+export function nodeToXml(node: Node): string {
+  if (node === null || node === undefined) return '';
+  return nodeToXmlInner(node, 0);
+}
+
+/* ------------------------------------------------------------------ */
+/*  XML → Node                                                        */
+/* ------------------------------------------------------------------ */
+
+function unescapeXml(str: string): string {
+  return str
+    .replace(/&quot;/g, '"')
+    .replace(/&gt;/g, '>')
+    .replace(/&lt;/g, '<')
+    .replace(/&amp;/g, '&');
+}
+
+function parseAttrValue(raw: string): unknown {
+  const str = unescapeXml(raw);
+
+  // Boolean
+  if (str === 'true') return true;
+  if (str === 'false') return false;
+
+  // Number
+  if (str !== '' && !Number.isNaN(Number(str))) return Number(str);
+
+  // JSON object / array
+  if (
+    (str.startsWith('{') && str.endsWith('}')) ||
+    (str.startsWith('[') && str.endsWith(']'))
+  ) {
+    try {
+      return JSON.parse(str);
+    } catch {
+      // fall through to string
+    }
+  }
+
+  return str;
+}
+
+function domElementToNode(el: Element): NodeData {
+  const type = el.tagName;
+  const nodeData: NodeData = { type, children: null };
+
+  // Reserved XML attributes → NodeData fields
+  const reserved = new Set(['key', 'sourceType', 'isMain']);
+  const attributes: Record<string, unknown> = {};
+
+  for (let i = 0; i < el.attributes.length; i++) {
+    const attr = el.attributes[i];
+    if (reserved.has(attr.name)) {
+      if (attr.name === 'key') nodeData.key = attr.value;
+      else if (attr.name === 'sourceType') nodeData.sourceType = attr.value;
+      else if (attr.name === 'isMain') nodeData.isMain = attr.value === 'true';
+    } else {
+      attributes[attr.name] = parseAttrValue(attr.value);
+    }
+  }
+
+  if (Object.keys(attributes).length > 0) {
+    nodeData.attributes = attributes;
+  }
+
+  // Children
+  const childNodes: Node[] = [];
+  for (let i = 0; i < el.childNodes.length; i++) {
+    const child = el.childNodes[i];
+    if (child.nodeType === 1) {
+      // Element
+      childNodes.push(domElementToNode(child as Element));
+    } else if (child.nodeType === 3) {
+      // Text
+      const text = (child.textContent ?? '').trim();
+      if (text) childNodes.push(text);
+    }
+  }
+
+  if (childNodes.length === 0) {
+    nodeData.children = null;
+  } else if (childNodes.length === 1) {
+    nodeData.children = childNodes[0];
+  } else {
+    nodeData.children = childNodes;
+  }
+
+  return nodeData;
+}
+
+/**
+ * Parse an XML string back into a Node tree.
+ *
+ * Uses the browser's built-in DOMParser.
+ */
+export function xmlToNode(xml: string): Node {
+  if (!xml.trim()) return null;
+
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(xml, 'text/xml');
+
+  const parseError = doc.querySelector('parsererror');
+  if (parseError) {
+    throw new Error(parseError.textContent ?? 'XML parse error');
+  }
+
+  const root = doc.documentElement;
+  return domElementToNode(root);
+}