@protomarkdown/parser 1.0.0 → 1.0.2

package/dist/index.esm.js

@@ -56,6 +56,13 @@ class MarkdownParser {
                 });
                 continue;
             }
+            // Check for workflow start
+            if (line === '[workflow' || line.startsWith('[workflow ')) {
+                const result = this.parseWorkflow(lines, i);
+                nodes.push(result.node);
+                i = result.nextIndex;
+                continue;
+            }
             // Check for card start
             const cardMatch = line.match(/^\[--\s*(.*)$/);
             if (cardMatch) {
@@ -91,6 +98,100 @@ class MarkdownParser {
         }
         return { nodes, errors: errors.length > 0 ? errors : undefined };
     }
+    parseWorkflow(lines, startIndex) {
+        const screens = [];
+        let i = startIndex + 1;
+        let depth = 1;
+        let initialScreen;
+        // Parse workflow content until we find the matching closing ]
+        while (i < lines.length && depth > 0) {
+            const workflowLine = this.options.preserveWhitespace ? lines[i] : lines[i].trim();
+            // Check for workflow closing
+            if (workflowLine === "]") {
+                depth--;
+                if (depth === 0) {
+                    break;
+                }
+            }
+            // Check for screen opening ([screen id)
+            const screenMatch = workflowLine.match(/^\[screen\s+(.+)$/);
+            if (screenMatch) {
+                const screenId = screenMatch[1].trim();
+                const result = this.parseScreen(lines, i, screenId);
+                screens.push(result.node);
+                // First screen becomes the initial screen
+                if (!initialScreen) {
+                    initialScreen = screenId;
+                }
+                i = result.nextIndex;
+                continue;
+            }
+            i++;
+        }
+        return {
+            node: {
+                type: "workflow",
+                children: screens,
+                initialScreen: initialScreen || (screens[0]?.id),
+            },
+            nextIndex: i + 1,
+        };
+    }
+    parseScreen(lines, startIndex, screenId) {
+        const screenChildren = [];
+        let i = startIndex + 1;
+        let depth = 1;
+        // Parse screen content until we find the matching closing ]
+        while (i < lines.length && depth > 0) {
+            const screenLine = this.options.preserveWhitespace ? lines[i] : lines[i].trim();
+            // Check for screen closing
+            if (screenLine === "]") {
+                depth--;
+                if (depth === 0) {
+                    break;
+                }
+            }
+            // Check for nested card opening
+            if (screenLine.match(/^\[--\s*(.*)$/)) {
+                const nestedTitle = screenLine.match(/^\[--\s*(.*)$/)?.[1] || undefined;
+                const result = this.parseCard(lines, i, nestedTitle);
+                screenChildren.push(result.node);
+                i = result.nextIndex;
+                continue;
+            }
+            // Check for nested grid opening
+            if (screenLine.match(/^\[grid\s+(.*)$/)) {
+                const nestedConfig = screenLine.match(/^\[grid\s+(.*)$/)?.[1] || '';
+                const result = this.parseContainer(lines, i, 'grid', nestedConfig);
+                screenChildren.push(result.node);
+                i = result.nextIndex;
+                continue;
+            }
+            // Check for nested div opening
+            if (screenLine.match(/^\[\s*(.*)$/) && !screenLine.includes("]")) {
+                const nestedConfig = screenLine.match(/^\[\s*(.*)$/)?.[1] || '';
+                const result = this.parseContainer(lines, i, 'div', nestedConfig);
+                screenChildren.push(result.node);
+                i = result.nextIndex;
+                continue;
+            }
+            if (screenLine) {
+                const childNode = this.parseLine(screenLine);
+                if (childNode) {
+                    screenChildren.push(childNode);
+                }
+            }
+            i++;
+        }
+        return {
+            node: {
+                type: "screen",
+                id: screenId,
+                children: screenChildren,
+            },
+            nextIndex: i + 1,
+        };
+    }
     parseCard(lines, startIndex, title) {
         const cardChildren = [];
         let i = startIndex + 1;
@@ -355,13 +456,26 @@ class MarkdownParser {
             };
         }
         // Parse multiple buttons on one line ([btn1][(btn2)])
-        const multiButtonMatch = line.match(/^(\[\(?[^\[\]|]+\)?\]\s*)+$/);
+        const multiButtonMatch = line.match(/^(\[\(?[^\[\]]+\)?\]\s*)+$/);
         if (multiButtonMatch) {
-            const buttons = line.match(/\[(\(?)[^\[\]|]+?(\)?)\]/g);
+            const buttons = line.match(/\[(\(?)[^\[\]]+?(\)?)\]/g);
             if (buttons && buttons.length > 1) {
                 return {
                     type: "container",
                     children: buttons.map((btn) => {
+                        // Check for navigation syntax: [(text) -> target] or [text -> target]
+                        const navMatch = btn.match(/\[(\(?)(.+?)(\)?)\s*->\s*([^\]]+)\]/);
+                        if (navMatch) {
+                            const isDefault = navMatch[1] === "(" && navMatch[3] === ")";
+                            const content = navMatch[2].trim();
+                            const navigateTo = navMatch[4].trim();
+                            return {
+                                type: "button",
+                                content,
+                                variant: isDefault ? "default" : "outline",
+                                navigateTo,
+                            };
+                        }
                         const innerMatch = btn.match(/\[(\(?)(.+?)(\)?)\]/);
                         if (innerMatch) {
                             const isDefault = innerMatch[1] === "(" && innerMatch[3] === ")";
@@ -381,6 +495,18 @@ class MarkdownParser {
                 };
             }
         }
+        // Parse default button with navigation [(button text) -> target]
+        const defaultButtonNavMatch = line.match(/^\[\((.+?)\)\s*->\s*([^\]]+)\]$/);
+        if (defaultButtonNavMatch) {
+            const content = defaultButtonNavMatch[1].trim();
+            const navigateTo = defaultButtonNavMatch[2].trim();
+            return {
+                type: "button",
+                content,
+                variant: "default",
+                navigateTo,
+            };
+        }
         // Parse default button [(button text)] or [(button text) | classes]
         const defaultButtonMatch = line.match(/^\[\((.+?)\)(?:\s*\|\s*(.+))?\]$/);
         if (defaultButtonMatch) {
@@ -393,6 +519,18 @@ class MarkdownParser {
                 ...(className && { className }),
             };
         }
+        // Parse outline button with navigation [button text -> target]
+        const buttonNavMatch = line.match(/^\[([^|]+?)\s*->\s*([^\]]+)\]$/);
+        if (buttonNavMatch) {
+            const content = buttonNavMatch[1].trim();
+            const navigateTo = buttonNavMatch[2].trim();
+            return {
+                type: "button",
+                content,
+                variant: "outline",
+                navigateTo,
+            };
+        }
         // Parse outline button [button text] or [button text | classes]
         const buttonMatch = line.match(/^\[([^|]+?)(?:\s*\|\s*(.+))?\]$/);
         if (buttonMatch) {
@@ -501,6 +639,8 @@ class ShadcnCodeGenerator {
     generate(nodes) {
         this.indentLevel = 0;
         this.requiredImports.clear();
+        // Check if the component contains a workflow
+        const hasWorkflow = nodes.some(node => node.type === 'workflow');
         // Generate component body
         const componentBody = this.generateNodes(nodes);
         // Add base indentation (6 spaces = 3 levels for proper JSX nesting)
@@ -510,7 +650,8 @@ class ShadcnCodeGenerator {
             .join('\n');
         // Collect imports
         const imports = this.generateImports();
-        return `${imports}
+        const reactImport = hasWorkflow ? "import { useState } from 'react';\n" : "";
+        return `${reactImport}${imports}
 
 export function GeneratedComponent() {
   return (
@@ -598,6 +739,10 @@ ${indentedBody}
                 return this.generateItalic(node, index);
             case "image":
                 return this.generateImage(node, index);
+            case "workflow":
+                return this.generateWorkflow(node, index);
+            case "screen":
+                return this.generateScreen(node, index);
             default:
                 return "";
         }
@@ -713,7 +858,9 @@ ${this.indent()}</div>`;
         this.requiredImports.add("Button");
         const variant = node.variant || "default";
         const className = node.className ? ` className="${node.className}"` : "";
-        return `${this.indent()}<Button key={${index}} variant="${variant}"${className}>${this.escapeJSX(node.content || "")}</Button>`;
+        // Add onClick handler if button has navigation
+        const onClick = node.navigateTo ? ` onClick={() => setCurrentScreen('${node.navigateTo}')}` : "";
+        return `${this.indent()}<Button key={${index}} variant="${variant}"${className}${onClick}>${this.escapeJSX(node.content || "")}</Button>`;
     }
     generateContainer(node, index) {
         this.indentLevel++;
@@ -814,7 +961,312 @@ ${this.indent()}</div>`;
         const alt = node.alt || "";
         return `${this.indent()}<img key={${index}} src="${src}" alt="${this.escapeJSX(alt)}" className="max-w-full h-auto" />`;
     }
+    generateWorkflow(node, index) {
+        const screens = node.children || [];
+        const initialScreen = node.initialScreen || screens[0]?.id || "home";
+        // Generate state management
+        const stateDeclaration = `${this.indent()}const [currentScreen, setCurrentScreen] = useState('${initialScreen}');`;
+        // Generate screen rendering
+        this.indentLevel++;
+        const screenCases = screens.map((screen, i) => {
+            const screenId = screen.id || `screen-${i}`;
+            const screenContent = screen.children ? this.generateNodes(screen.children) : "";
+            return `${this.indent()}${i === 0 ? '' : 'else '}if (currentScreen === '${screenId}') {
+${this.indent()}  return (
+${this.indent()}    <div className="space-y-2">
+${screenContent}
+${this.indent()}    </div>
+${this.indent()}  );
+${this.indent()}}`;
+        }).join('\n');
+        this.indentLevel--;
+        // Return fallback if no screen matches
+        const fallback = `${this.indent()}return <div>Screen not found</div>;`;
+        return `${this.indent()}<div key={${index}}>
+${this.indent()}  {(() => {
+${stateDeclaration}
+
+${screenCases}
+${fallback}
+${this.indent()}  })()}
+${this.indent()}</div>`;
+    }
+    generateScreen(node, index) {
+        // Screens are handled within workflow generation
+        // This method is for standalone screen nodes (if used outside workflow)
+        this.indentLevel++;
+        const children = node.children ? this.generateNodes(node.children) : "";
+        this.indentLevel--;
+        return `${this.indent()}<div key={${index}} data-screen-id="${node.id || index}" className="space-y-2">
+${children}
+${this.indent()}</div>`;
+    }
+}
+
+/**
+ * Generates HTML from a Proto Markdown AST
+ * Used for VS Code extension preview rendering
+ */
+class HtmlGenerator {
+    /**
+     * Generate HTML from markdown AST
+     */
+    generate(nodes) {
+        return nodes.map((node) => this.renderNode(node)).join("\n");
+    }
+    renderNode(node) {
+        switch (node.type) {
+            case "header":
+                return this.renderHeader(node);
+            case "text":
+                return this.renderText(node);
+            case "bold":
+                return this.renderBold(node);
+            case "italic":
+                return this.renderItalic(node);
+            case "input":
+                return this.renderInput(node);
+            case "textarea":
+                return this.renderTextarea(node);
+            case "checkbox":
+                return this.renderCheckbox(node);
+            case "radiogroup":
+                return this.renderRadioGroup(node);
+            case "dropdown":
+                return this.renderDropdown(node);
+            case "button":
+                return this.renderButton(node);
+            case "card":
+                return this.renderCard(node);
+            case "container":
+                return this.renderContainer(node);
+            case "grid":
+                return this.renderGrid(node);
+            case "div":
+                return this.renderDiv(node);
+            case "table":
+                return this.renderTable(node);
+            case "image":
+                return this.renderImage(node);
+            case "workflow":
+                return this.renderWorkflow(node);
+            case "screen":
+                return this.renderScreen(node);
+            default:
+                return `<div class="proto-unknown">${JSON.stringify(node)}</div>`;
+        }
+    }
+    renderHeader(node) {
+        const level = node.level || 1;
+        let content;
+        if (node.children && node.children.length > 0) {
+            content = this.renderInlineNodes(node.children);
+        }
+        else {
+            content = this.escapeHtml(node.content || "");
+        }
+        return `<h${level} class="proto-header">${content}</h${level}>`;
+    }
+    renderText(node) {
+        if (node.children && node.children.length > 0) {
+            const content = this.renderInlineNodes(node.children);
+            return `<p class="proto-text">${content}</p>`;
+        }
+        return `<p class="proto-text">${this.escapeHtml(node.content || "")}</p>`;
+    }
+    renderBold(node) {
+        if (node.children && node.children.length > 0) {
+            return `<strong>${this.renderInlineNodes(node.children)}</strong>`;
+        }
+        return `<strong>${this.escapeHtml(node.content || "")}</strong>`;
+    }
+    renderItalic(node) {
+        if (node.children && node.children.length > 0) {
+            return `<em>${this.renderInlineNodes(node.children)}</em>`;
+        }
+        return `<em>${this.escapeHtml(node.content || "")}</em>`;
+    }
+    renderInlineNodes(nodes) {
+        return nodes.map((node) => this.renderInlineNode(node)).join("");
+    }
+    renderInlineNode(node) {
+        switch (node.type) {
+            case "bold":
+                if (node.children && node.children.length > 0) {
+                    return `<strong>${this.renderInlineNodes(node.children)}</strong>`;
+                }
+                return `<strong>${this.escapeHtml(node.content || "")}</strong>`;
+            case "italic":
+                if (node.children && node.children.length > 0) {
+                    return `<em>${this.renderInlineNodes(node.children)}</em>`;
+                }
+                return `<em>${this.escapeHtml(node.content || "")}</em>`;
+            case "text":
+                if (node.children && node.children.length > 0) {
+                    return this.renderInlineNodes(node.children);
+                }
+                return this.escapeHtml(node.content || "");
+            default:
+                return this.escapeHtml(node.content || "");
+        }
+    }
+    renderInput(node) {
+        const placeholder = node.inputType === "password" ? "••••••••" : "";
+        return `
+      <div class="proto-field">
+        <label class="proto-label">${this.escapeHtml(node.label || "")}</label>
+        <input type="${node.inputType || "text"}" class="proto-input" placeholder="${placeholder}" disabled />
+      </div>`;
+    }
+    renderTextarea(node) {
+        return `
+      <div class="proto-field">
+        <label class="proto-label">${this.escapeHtml(node.label || "")}</label>
+        <textarea class="proto-textarea" disabled></textarea>
+      </div>`;
+    }
+    renderCheckbox(node) {
+        return `
+      <div class="proto-checkbox">
+        <input type="checkbox" class="proto-checkbox-input" disabled />
+        <label class="proto-checkbox-label">${this.escapeHtml(node.label || "")}</label>
+      </div>`;
+    }
+    renderRadioGroup(node) {
+        const options = (node.options || [])
+            .map((opt) => `
+        <div class="proto-radio-option">
+          <input type="radio" class="proto-radio-input" name="${this.escapeHtml(node.label || "")}" disabled />
+          <label class="proto-radio-label">${this.escapeHtml(opt)}</label>
+        </div>`)
+            .join("");
+        return `
+      <div class="proto-radiogroup">
+        <label class="proto-label">${this.escapeHtml(node.label || "")}</label>
+        <div class="proto-radio-options">${options}</div>
+      </div>`;
+    }
+    renderDropdown(node) {
+        const options = (node.options || ["Select an option"])
+            .map((opt) => `<option>${this.escapeHtml(opt)}</option>`)
+            .join("");
+        return `
+      <div class="proto-field">
+        <label class="proto-label">${this.escapeHtml(node.label || "")}</label>
+        <select class="proto-select" disabled>${options}</select>
+      </div>`;
+    }
+    renderButton(node) {
+        const btnClass = node.variant === "default"
+            ? "proto-button-default"
+            : "proto-button-outline";
+        const navIndicator = node.navigateTo
+            ? ` <span class="proto-nav-indicator">→ ${this.escapeHtml(node.navigateTo)}</span>`
+            : "";
+        return `<button class="proto-button ${btnClass}" disabled>${this.escapeHtml(node.content || "")}${navIndicator}</button>`;
+    }
+    renderCard(node) {
+        let cardTitle = "";
+        if (node.titleChildren && node.titleChildren.length > 0) {
+            cardTitle = `<div class="proto-card-header">${this.renderInlineNodes(node.titleChildren)}</div>`;
+        }
+        else if (node.title) {
+            cardTitle = `<div class="proto-card-header">${this.escapeHtml(node.title)}</div>`;
+        }
+        const cardChildren = node.children ? this.generate(node.children) : "";
+        return `
+      <div class="proto-card">
+        ${cardTitle}
+        <div class="proto-card-content">${cardChildren}</div>
+      </div>`;
+    }
+    renderContainer(node) {
+        const children = node.children ? this.generate(node.children) : "";
+        return `<div class="proto-container">${children}</div>`;
+    }
+    renderGrid(node) {
+        const children = node.children ? this.generate(node.children) : "";
+        const gridConfig = this.parseGridConfig(node.gridConfig || "");
+        return `<div class="proto-grid" style="${gridConfig}">${children}</div>`;
+    }
+    renderDiv(node) {
+        const children = node.children ? this.generate(node.children) : "";
+        return `<div class="proto-div ${this.escapeHtml(node.className || "")}">${children}</div>`;
+    }
+    renderTable(node) {
+        const headerCells = (node.headers || [])
+            .map((h) => `<th class="proto-table-th">${this.escapeHtml(h)}</th>`)
+            .join("");
+        const bodyRows = (node.rows || [])
+            .map((row) => `<tr>${row
+            .map((cell) => `<td class="proto-table-td">${this.escapeHtml(cell)}</td>`)
+            .join("")}</tr>`)
+            .join("");
+        return `
+      <table class="proto-table">
+        <thead><tr>${headerCells}</tr></thead>
+        <tbody>${bodyRows}</tbody>
+      </table>`;
+    }
+    renderImage(node) {
+        return `<img class="proto-image" src="${this.escapeHtml(node.src || "")}" alt="${this.escapeHtml(node.alt || "")}" />`;
+    }
+    renderWorkflow(node) {
+        const screens = (node.children || [])
+            .map((screen, idx) => {
+            const isInitial = screen.id === node.initialScreen || idx === 0;
+            const screenContent = screen.children
+                ? this.generate(screen.children)
+                : "";
+            const screenId = screen.id || "";
+            return `
+          <div class="proto-screen${isInitial ? " proto-screen-active" : ""}" data-screen-id="${this.escapeHtml(screenId)}">
+            <div class="proto-screen-header">
+              <span class="proto-screen-badge">${this.escapeHtml(screenId)}</span>
+              ${isInitial
+                ? '<span class="proto-screen-initial">Initial</span>'
+                : ""}
+            </div>
+            <div class="proto-screen-content">${screenContent}</div>
+          </div>`;
+        })
+            .join("");
+        return `<div class="proto-workflow">${screens}</div>`;
+    }
+    renderScreen(node) {
+        const screenChildren = node.children ? this.generate(node.children) : "";
+        const screenId = node.id || "";
+        return `
+      <div class="proto-screen" data-screen-id="${this.escapeHtml(screenId)}">
+        <div class="proto-screen-header">
+          <span class="proto-screen-badge">${this.escapeHtml(screenId)}</span>
+        </div>
+        <div class="proto-screen-content">${screenChildren}</div>
+      </div>`;
+    }
+    parseGridConfig(config) {
+        const styles = [];
+        // Parse cols-N
+        const colsMatch = config.match(/cols-(\d+)/);
+        if (colsMatch) {
+            styles.push(`grid-template-columns: repeat(${colsMatch[1]}, 1fr)`);
+        }
+        // Parse gap-N
+        const gapMatch = config.match(/gap-(\d+)/);
+        if (gapMatch) {
+            styles.push(`gap: ${parseInt(gapMatch[1]) * 4}px`);
+        }
+        return styles.join("; ");
+    }
+    escapeHtml(text) {
+        return text
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;")
+            .replace(/'/g, "&#039;");
+    }
 }
 
-export { MarkdownParser, ShadcnCodeGenerator };
+export { HtmlGenerator, MarkdownParser, ShadcnCodeGenerator };
 //# sourceMappingURL=index.esm.js.map