@protomarkdown/parser 1.0.0 → 1.0.1

package/README.md

@@ -1,14 +1,29 @@
-# proto-markdown-parser
+# @protomarkdown/parser
 
-Parser and rendeder for proto markdown syntax
+Parser and renderer for Proto Markdown syntax - A UI prototyping markdown language for rapid React component generation.
 
 [Proto Markdown Syntax Documentation](https://www.protomarkdown.org/documentation)
 
-## Usage
+## Features
+
+- 🎨 Parse Proto Markdown syntax into an Abstract Syntax Tree (AST)
+- ⚛️ Generate React components with Shadcn UI
+- 🔄 Multi-screen workflow navigation system
+- 📋 Form elements (inputs, dropdowns, checkboxes, textareas)
+- 🎯 Cards, grids, and flexible layouts
+- 📊 Tables and data display
+- ✨ Text formatting (bold, italic)
+
+## Installation
+
+```bash
+npm install @protomarkdown/parser
+```
+
+## Quick Start
 
 ```ts
-import { MarkdownParser } from "@protomarkdown/parser";
-import { ShadcnCodeGenerator } from "@protomarkdown/parser";
+import { MarkdownParser, ShadcnCodeGenerator } from "@protomarkdown/parser";
 
 const parser = new MarkdownParser();
 const codeGenerator = new ShadcnCodeGenerator();
@@ -22,4 +37,199 @@ Password __*
 
 const ast = parser.parse(markdown);
 const code = codeGenerator.generate(ast.nodes);
-```
+```
+
+## Workflows - Multi-Screen Navigation
+
+Create complete multi-screen workflows with clickable navigation between screens:
+
+```ts
+const workflowMarkdown = `
+[workflow
+  [screen welcome
+    # Welcome to My App
+    Get started with your journey!
+    [(Get Started) -> login]
+    [Skip to Dashboard -> dashboard]
+  ]
+
+  [screen login
+    # Login
+    Email ___
+    Password __*
+    Remember me __[]
+    [(Login) -> dashboard]
+    [Back -> welcome]
+  ]
+
+  [screen dashboard
+    # Dashboard
+    Welcome to your dashboard!
+
+    [grid cols-2 gap-4
+      [-- Stats
+        Total Users: 150
+      --]
+      [-- Activity
+        Recent activity here
+      --]
+    ]
+
+    [Logout -> welcome]
+  ]
+]`;
+
+const ast = parser.parse(workflowMarkdown);
+const reactCode = codeGenerator.generate(ast.nodes);
+```
+
+### Button Navigation Syntax
+
+- **Default button with navigation:** `[(Button Text) -> targetScreen]`
+- **Outline button with navigation:** `[Button Text -> targetScreen]`
+- **Multiple navigation buttons:** `[(Next) -> step2][Back -> step1]`
+
+The generated component includes:
+- `useState` hook for screen state management
+- Conditional rendering of screens
+- `onClick` handlers for seamless navigation
+
+## Supported Elements
+
+### Form Fields
+
+```markdown
+Email ___                              # Text input
+Password __*                           # Password input
+Description |___|                      # Textarea
+Country __> [USA, Canada, Mexico]      # Dropdown with options
+Remember me __[]                       # Checkbox
+Gender __() [Male, Female, Other]      # Radio group
+```
+
+### Layouts
+
+```markdown
+[-- Card Title                         # Card
+Content here
+--]
+
+[grid cols-2 gap-4                     # Grid layout
+  [-- Card 1 --]
+  [-- Card 2 --]
+]
+
+[ flex gap-2                           # Custom div with classes
+  Content
+]
+```
+
+### Buttons
+
+```markdown
+[(Submit)]                             # Default button
+[Cancel]                               # Outline button
+[(Save)][Reset]                        # Multiple buttons
+[(Next) -> step2]                      # Navigation button (workflows)
+```
+
+### Tables
+
+```markdown
+| Name | Age | City |
+|------|-----|------|
+| John | 30  | NYC  |
+| Jane | 25  | LA   |
+```
+
+### Text Formatting
+
+```markdown
+This is *bold* text
+This is _italic_ text
+This is _*bold and italic*_ text
+```
+
+## API Reference
+
+### MarkdownParser
+
+```ts
+const parser = new MarkdownParser(options?: ParserOptions);
+const result = parser.parse(markdown: string);
+```
+
+**Options:**
+- `strict?: boolean` - Enable strict parsing mode
+- `preserveWhitespace?: boolean` - Preserve leading/trailing whitespace
+
+**Returns:** `ParseResult` containing `nodes` (AST) and optional `errors`
+
+### ShadcnCodeGenerator
+
+```ts
+const generator = new ShadcnCodeGenerator();
+const code = generator.generate(nodes: MarkdownNode[]);
+```
+
+**Returns:** Complete React component code as a string with necessary Shadcn UI imports
+
+## Examples
+
+### Login Form
+
+```markdown
+[-- Login
+  # Welcome Back
+  Email ___
+  Password __*
+  Remember me __[]
+  [(Login)][Forgot Password]
+--]
+```
+
+### Multi-Step Form Workflow
+
+```markdown
+[workflow
+  [screen step1
+    # Step 1: Personal Info
+    First Name ___ Last Name ___
+    Email ___
+    [(Next) -> step2]
+  ]
+  [screen step2
+    # Step 2: Address
+    Street ___
+    City ___ State ___
+    [(Back) -> step1][(Next) -> step3]
+  ]
+  [screen step3
+    # Step 3: Review
+    Please review your information
+    [(Submit) -> confirmation][(Back) -> step2]
+  ]
+  [screen confirmation
+    # Success!
+    Your form has been submitted.
+    [Start Over -> step1]
+  ]
+]
+```
+
+## Testing
+
+```bash
+npm test          # Run all tests
+npm run build     # Build the library
+```
+
+## License
+
+Apache-2.0
+
+## Links
+
+- [Proto Markdown Documentation](https://www.protomarkdown.org/documentation)
+- [GitHub Repository](https://github.com/georgii-sh/proto-markdown-parser)
+- [Shadcn UI](https://ui.shadcn.com/)

package/dist/ShadcnCodeGenerator.d.ts

@@ -41,5 +41,7 @@ export declare class ShadcnCodeGenerator {
     private generateBold;
     private generateItalic;
     private generateImage;
+    private generateWorkflow;
+    private generateScreen;
 }
 //# sourceMappingURL=ShadcnCodeGenerator.d.ts.map

package/dist/ShadcnCodeGenerator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShadcnCodeGenerator.d.ts","sourceRoot":"","sources":["../src/ShadcnCodeGenerator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C;;GAEG;AACH,qBAAa,mBAAmB;IAC9B,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAK;IAChC,OAAO,CAAC,eAAe,CAAqB;IAE5C;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,MAAM;IA4BvC;;OAEG;IACH,OAAO,CAAC,eAAe;IAkCvB;;OAEG;IACH,OAAO,CAAC,aAAa;IAIrB;;OAEG;IACH,OAAO,CAAC,YAAY;IAuCpB,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,SAAS;IAUjB,OAAO,CAAC,cAAc;IAetB,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,gBAAgB;IAmBxB,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,kBAAkB;IAoB1B,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,YAAY;IAiCpB,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,aAAa;CAMtB"}
+{"version":3,"file":"ShadcnCodeGenerator.d.ts","sourceRoot":"","sources":["../src/ShadcnCodeGenerator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C;;GAEG;AACH,qBAAa,mBAAmB;IAC9B,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAK;IAChC,OAAO,CAAC,eAAe,CAAqB;IAE5C;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,MAAM;IAgCvC;;OAEG;IACH,OAAO,CAAC,eAAe;IAkCvB;;OAEG;IACH,OAAO,CAAC,aAAa;IAIrB;;OAEG;IACH,OAAO,CAAC,YAAY;IA2CpB,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,SAAS;IAUjB,OAAO,CAAC,cAAc;IAetB,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,gBAAgB;IAmBxB,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,kBAAkB;IAoB1B,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,YAAY;IAiCpB,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,gBAAgB;IAoCxB,OAAO,CAAC,cAAc;CAWvB"}

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,6 +961,46 @@ ${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>`;
+    }
 }
 
 export { MarkdownParser, ShadcnCodeGenerator };