Skip to content

feat(monaco,codemirror): add Storybook demos with sample prompts#522

Merged
yesudeep merged 4 commits intomainfrom
feat/monaco-prebuilt-dist
Feb 4, 2026
Merged

feat(monaco,codemirror): add Storybook demos with sample prompts#522
yesudeep merged 4 commits intomainfrom
feat/monaco-prebuilt-dist

Conversation

@yesudeep
Copy link
Collaborator

@yesudeep yesudeep commented Feb 4, 2026

Summary

Screenshot 2026-02-04 at 2 19 57 AM Screenshot 2026-02-04 at 2 19 36 AM

This PR adds Storybook.js integration to both the Monaco Editor and CodeMirror editor packages, along with comprehensive sample prompts that exercise all Dotprompt features.

Changes

Storybook Integration

  • Added Storybook v10 to both @dotprompt/monaco and @dotprompt/codemirror packages
  • 17+ stories per package organized by features and display variants
  • Editor modes: Standard, Vim, and Emacs (CodeMirror only) keybindings
  • Dynamic sample selector dropdown in Controls panel

Sample Prompts (11 comprehensive examples)

Sample Feature Demonstrated
01-basic.prompt Minimal frontmatter with model and simple conditionals
02-schema-and-config.prompt Config options, Picoschema with optional fields/enums, JSON output
03-multimodal-media.prompt Media helper for images and audio with array iteration
04-tools.prompt Tools array with detailed system instructions
05-handlebars-helpers.prompt if/else/unless, each with @index/@first/@last, with, nested conditionals
06-partials.prompt Partial inclusion, hash parameters, partial blocks
07-multi-turn-history.prompt History helper for conversation memory
08-sections-thinking.prompt Section helper for Chain-of-Thought reasoning
09-complex-schema.prompt Deeply nested JSON Schema definitions
10-kitchen-sink.prompt ALL features combined - comprehensive example
11-multilingual-unicode.prompt CJK, Arabic, Cyrillic, Thai, emoji, and special characters

Editor Keybinding Modes

  • Standard: Default editing mode
  • Vim: Vi keybindings via monaco-vim / @replit/codemirror-vim
  • Emacs: Emacs keybindings via @replit/codemirror-emacs (CodeMirror only)

GitHub-Ready Package Pattern

  • @dotprompt/monaco and @dotprompt/codemirror now have dist/ checked in
  • Enables direct GitHub installation without requiring a build step:
    pnpm add @dotprompt/monaco@github:google/dotprompt#path:/packages/monaco
    pnpm add @dotprompt/codemirror@github:google/dotprompt#path:/packages/codemirror

pnpm Workspace Configuration

  • Added public-hoist-pattern for Storybook packages in root .npmrc
  • Maintains hoist=false for Bazel compatibility while allowing Storybook to resolve correctly

Running Storybook

# Monaco editor stories (port 6006)
pnpm -C packages/monaco storybook

# CodeMirror editor stories
pnpm -C packages/codemirror storybook

Screenshots

The Storybook demos include:

  • Syntax highlighting for YAML frontmatter and Handlebars templates
  • Vim/Emacs mode status indicators
  • Sample selector dropdown to switch between prompt examples
  • Theme toggling (dark/light)
  • Feature toggles (line numbers, word wrap, read-only, etc.)

Testing

  • Verified both Monaco and CodeMirror Storybooks start and render correctly
  • Confirmed sample loading and switching works via the Controls panel
  • Confirmed Vim and Emacs mode keybindings work in CodeMirror
  • Confirmed Vim mode works in Monaco

This enables @dotprompt/monaco to be installed directly from GitHub
without requiring a build step.

Changes:
- Remove dist/ from .gitignore
- Include pre-built dist files (index.js, index.mjs, index.d.ts, index.d.mts)

This allows users to install via:
  pnpm add @dotprompt/monaco@github:google/dotprompt#path:/packages/monaco

Previously, installing from GitHub would fail because the dist folder
was not checked in and npm/pnpm don't run build scripts for Git
dependencies.
@yesudeep yesudeep force-pushed the feat/monaco-prebuilt-dist branch from 000e176 to b376009 Compare February 4, 2026 09:55
@github-actions github-actions bot added the root label Feb 4, 2026
@yesudeep yesudeep changed the title feat(monaco): include pre-built dist for GitHub installation feat(monaco,codemirror): add Storybook demos with sample prompts Feb 4, 2026
- Add vite-env.d.ts for TypeScript to understand ?raw imports
- Add multilingual/Unicode sample with CJK, Arabic, Cyrillic, emoji
- Disable Vim mode by default (still available via toggle and VimMode story)
- Add Multilingual and VimMode stories
- Update story descriptions to reflect default settings

Also applies to @dotprompt/codemirror package.
- Add @replit/codemirror-emacs for Emacs keybindings
- Change vimMode boolean to editorMode select ('standard', 'vim', 'emacs')
- Add EmacsMode story to demonstrate Emacs keybindings
- Update all stories to use new editorMode prop
- Set default height to calc(100vh - 40px) for full viewport
- Enable fullscreen layout in Storybook preview
- Remove explicit height overrides from individual stories
@yesudeep yesudeep merged commit e863a79 into main Feb 4, 2026
75 checks passed
@yesudeep yesudeep deleted the feat/monaco-prebuilt-dist branch February 4, 2026 10:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants