Store code snippets as JS variables in components.js and reference them
in the template. This avoids multi-line template literals in HTML
attributes while still providing copy functionality.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Added documentation and interactive examples for both confirm_modal
and confirm_modal_dynamic macros, showing danger, warning, info variants
and dynamic message capabilities.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create action_dropdown macro in dropdowns.html supporting:
- Loading/disabled state via loading_var parameter
- Custom loading label
- Icon support
- Primary/secondary variants
- Update code quality dashboard to use new macro
- Add Dropdowns section to components page with examples:
- Basic dropdown
- Action dropdown with loading state
- Context menu (3-dot)
- Variant showcase (primary, secondary, ghost)
Architecture validation now passes with 0 errors and 0 warnings.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The page starts with E-commerce section at the top, so the default
active section should match.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Icons:
- Add cloud-download, cloud-upload, and key icons
Notifications:
- Replace alert() with Utils.showToast() in companies.js
- Replace alert() with Utils.showToast() in content-pages.js
- Add noqa comment for intentional fallback in components.js
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add Details Modal (Table Layout) example to components page
- Shows header with icon and status badge
- Stats cards grid (imported, updated, errors, total)
- Key-value table with icon-labeled rows
- Add Log Details Modal example with live demo
- Level-based coloring (warning=yellow, error=red, critical=purple)
- Message, exception, and stack trace sections
- Copy-to-clipboard for stack traces
- Both error and warning log demo buttons
- Update jinja-macros.md with Details Modal Pattern documentation
- Document the pattern structure and key features
- Link to components library for live examples
- Add Alpine.js state variables for new modal demos
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add interactive demos for all new e-commerce macros:
Priority 4 - Navigation & Discovery:
- Category navigation with mega menu
- Breadcrumb variants
- Search bar with autocomplete
- Filter sidebar with all filter types
- Sort dropdown
Priority 5 - Social Proof & Trust:
- Star ratings (static, dynamic, sizes)
- Compact ratings for lists
- Interactive rating input
- Rating summary with distribution
- Review cards with helpful voting
- Review form
- Trust badges grid
- Trust banner variants
- Payment method icons
- Guarantee badges
- Security seals
- Checkout trust section
Demo state includes sample data for categories, filters,
reviews, and ratings to showcase all component features.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add live demos for:
- Product Gallery with image navigation and thumbnails
- Variant Selector with size buttons and color swatches
- Product Info with title, price, rating, stock status
- Product Tabs with description, specifications, reviews
Add demoProductDetail state with full product data including
images, sizes, colors, specifications, and sample reviews.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add E-commerce section with live demos for all shop macros
- Add demo products and cart state to components.js
- Add demo methods: demoAddToCart, demoToggleWishlist, demoRemoveFromCart
- Showcase product cards, mini cart, add-to-cart functionality
- Add Macros section navigation
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Update admin components page with documentation for:
- New Macros section listing all available shared macros with imports
- Pagination section with live interactive examples
- Copy-to-clipboard functionality for code snippets
- Dark mode support for all new sections
This serves as a living style guide for developers implementing
new admin pages using the shared component library.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
