@protomarkdown/parser 1.0.0 → 1.0.2

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,208 @@ 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
+
+### HtmlGenerator
+
+```ts
+const generator = new HtmlGenerator();
+const html = generator.generate(nodes: MarkdownNode[]);
+```
+
+**Returns:** HTML string for VS Code extension preview rendering
+
+## 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/HtmlGenerator.d.ts

@@ -0,0 +1,35 @@
+import { MarkdownNode } from "./parser/types";
+/**
+ * Generates HTML from a Proto Markdown AST
+ * Used for VS Code extension preview rendering
+ */
+export declare class HtmlGenerator {
+    /**
+     * Generate HTML from markdown AST
+     */
+    generate(nodes: MarkdownNode[]): string;
+    private renderNode;
+    private renderHeader;
+    private renderText;
+    private renderBold;
+    private renderItalic;
+    private renderInlineNodes;
+    private renderInlineNode;
+    private renderInput;
+    private renderTextarea;
+    private renderCheckbox;
+    private renderRadioGroup;
+    private renderDropdown;
+    private renderButton;
+    private renderCard;
+    private renderContainer;
+    private renderGrid;
+    private renderDiv;
+    private renderTable;
+    private renderImage;
+    private renderWorkflow;
+    private renderScreen;
+    private parseGridConfig;
+    private escapeHtml;
+}
+//# sourceMappingURL=HtmlGenerator.d.ts.map

package/dist/HtmlGenerator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HtmlGenerator.d.ts","sourceRoot":"","sources":["../src/HtmlGenerator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C;;;GAGG;AACH,qBAAa,aAAa;IACxB;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,MAAM;IAIvC,OAAO,CAAC,UAAU;IA2ClB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,gBAAgB;IAsBxB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,gBAAgB;IAoBxB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,UAAU;IAsBlB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,WAAW;IAwBnB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,cAAc;IA+BtB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,UAAU;CAQnB"}

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.d.ts

@@ -1,4 +1,5 @@
 export { MarkdownParser } from "./parser";
 export type { MarkdownNode } from "./parser/types";
 export { ShadcnCodeGenerator } from "./ShadcnCodeGenerator";
+export { HtmlGenerator } from "./HtmlGenerator";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}