Skip to content

feat: enhance regex tester with interactive playground features #126

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
peckz merged 6 commits into from
Dec 8, 2025
Merged

feat: enhance regex tester with interactive playground features #126

peckz merged 6 commits into from
Dec 8, 2025

Conversation

@devin-ai-integration
Copy link
Contributor

@devin-ai-integration devin-ai-integration bot commented Dec 3, 2025 •
edited by peckz
Loading

feat: enhance regex tester with interactive playground features

Summary

Transforms the basic regex tester into an interactive playground inspired by regexer. The enhancement adds several features to make regex more accessible to junior developers:

Core Features:

  • Toggleable pattern flags (g, i, m, s, u, y) with hover card explanations
  • Preset regex patterns (email, URL, phone, date, IP, hex color, HTML tag, credit card) for quick demos
  • Real-time pattern explanation with color-coded components (hover for details)
  • Capture group visualization in CSS box model style with nested indentation (collapsible section)
  • Match statistics dashboard showing total/unique matches, average length, and execution time
  • Collapsible regex cheat sheet with click-to-insert functionality
  • Enhanced match highlighting with hover cards showing position and length

Technical Changes:

  • Added 6 new React components in components/regex/
  • Extended regex-tester.utils.ts with pattern parsing, explanation, and stats functions
  • Added @radix-ui/react-hover-card and @radix-ui/react-tooltip dependencies via shadcn
  • Updated main page to use tabs for Pattern Explanation and Statistics

Layout & UX Improvements:

  • Widened layout from max-w-2xl to max-w-4xl for more breathing room
  • Moved capture groups to a collapsible section in the main card for easier access
  • Replaced Radix Tooltip with HoverCard (fixes content not updating when moving mouse quickly)
  • All hover cards use sans-serif fonts consistently with bg-muted background highlighting for code values
  • Email preset includes gm flags for multi-line matching
  • Clear button resets all fields

Review & Testing Checklist for Human

  • Test capture groups collapsible section: Enter a pattern with groups like /(a)(b)/g with test string ab ab, expand the "Capture Groups" section, verify visualization displays correctly
  • Test preset patterns: Click through presets (especially Email), verify they load correctly with proper flags and show matches
  • Verify font consistency: Hover over flags, pattern components, capture groups, and match highlights - all should use sans-serif fonts with background highlighting for code values
  • Test clear button: Fill in pattern and test string, click Clear, verify all fields reset including flags

Recommended test plan:

  1. Load page fresh, select Email preset - verify it matches emails in the test string
  2. Enter a pattern with capture groups, expand the collapsible section, verify groups display
  3. Hover over various elements (flags, pattern components, matches) and verify consistent styling
  4. Click Clear and verify everything resets
  5. Check the wider layout looks good on different screen sizes

Notes

  • Capture groups are now in a collapsible section in the main card rather than a separate tab
  • The tabs section contains only Pattern Explanation and Statistics

Link to Devin run: https://app.devin.ai/sessions/93dfd4f1aa4649e7917bfc1f71f62694
Requested by: @peckz

@devin-ai-integration @peckz
feat: enhance regex tester with interactive playground features
568ad79 
- Add toggleable pattern flags (g, i, m, s, u, y) with tooltips
- Add preset regex patterns (email, URL, phone, date, IP, hex color, HTML tag, credit card)
- Add real-time pattern explanation with color-coded components
- Add capture group visualization with CSS box model style
- Add match statistics dashboard (total matches, unique, avg length, exec time)
- Add collapsible regex cheat sheet with click-to-insert functionality
- Enhance RegexHighlightText with hover effects and match info tooltips
- Add Tooltip component via shadcn/ui

Co-Authored-By: petar@jam.dev <pekiseven@gmail.com>
@devin-ai-integration
Copy link
Contributor Author

devin-ai-integration bot commented Dec 3, 2025

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

@devin-ai-integration @peckz
style: fix prettier formatting
c3ad69b 
Co-Authored-By: petar@jam.dev <pekiseven@gmail.com>
@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Dec 3, 2025 •
edited
Loading

Deploying jam-dev-utilities with  Cloudflare Pages  Cloudflare Pages

Latest commit: 807535f
Status: ✅  Deploy successful!
Preview URL: https://65116c04.jam-dev-utilities.pages.dev
Branch Preview URL: https://devin-1764774676-regex-playg.jam-dev-utilities.pages.dev

View logs

devin-ai-integration bot and others added 4 commits December 3, 2025 15:54
@devin-ai-integration @peckz
fix: email preset flags and add clear button
3c52d34 
- Add gm flags to email preset pattern so it matches emails on each line
- Add Clear button to reset pattern, test string, result, and flags

Co-Authored-By: petar@jam.dev <pekiseven@gmail.com>
@devin-ai-integration @peckz
refactor: replace tooltips with hover cards for better UX
b8e7125 
- Replace Radix Tooltip with HoverCard to fix content not updating when moving mouse quickly
- Add @radix-ui/react-hover-card dependency via shadcn
- Unify hover card styles: monospace font only for code values (match indices, access patterns)
- Apply consistent styling across all regex components

Co-Authored-By: petar@jam.dev <pekiseven@gmail.com>
@devin-ai-integration @peckz
feat: add history feature with favorites, notes, and stats preview
1ab7019 
- Add local-first history storing last 10 regexes with localStorage
- Implement smart history tracking (only save modified patterns, not preset clicks)
- Add 3 creative history features: favorites, pattern notes, and match stats preview
- Move capture groups from tabs to collapsible section in main card
- Replace Capture Groups tab with History tab
- Standardize all hover card fonts to sans-serif
- Make layout wider (max-w-4xl)
- Add localStorage note to UI

Co-Authored-By: petar@jam.dev <pekiseven@gmail.com>
@devin-ai-integration @peckz
revert: remove history feature per user request
807535f 
- Remove history tab and all history-related code
- Keep other improvements: wider layout, collapsible capture groups, sans-serif fonts

Co-Authored-By: petar@jam.dev <pekiseven@gmail.com>
@peckz peckz merged commit e30ab59 into main Dec 8, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@peckz peckz peckz approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@peckz