Status: Phase 2 Complete ✅ (WaPage Component with 18 sub-components, full test suite)
License: Apache 2
Java: 25 LTS | Build: Maven | Frameworks: JWebMP, WebAwesome, Angular, GuicedEE
WebAwesome Pro is a JWebMP plugin module that provides seamless Angular directive wrappers and integration for the WebAwesome open-source web components library. It enables developers to compose rich, responsive layouts and component-based UIs within the JWebMP ecosystem.
- 📋 PACT.md – Project charter and vision
- 📜 RULES.md – Project standards and technical constraints
- 📖 GUIDES.md – Step-by-step development guides
- 🗂️ IMPLEMENTATION.md – Code organization and module map
- 📚 GLOSSARY.md – Terminology index and prompt alignment
- 🏗️ Architecture Docs – C4 diagrams, sequences, ERD
- 🤖 Prompt Reference – AI configuration and MCP setup
- 💻 Copilot Instructions – GitHub Copilot workspace rules
✅ Complete:
- WaPage component (18 sub-components total)
- 11 layout containers (Banner, Header, Navigation, Main, Aside, Footer, etc.)
- 7 control components (SkipToContent, Menu, Toggle, DialogWrapper, etc.)
- Component test suite (13 comprehensive JUnit 5 tests)
- Component initialization tests (9 tests)
- Integration test (1 test)
- Full demonstration test (1 test)
- Angular property binding tests (1 test)
- Navigation control tests (1 test)
- Angular integration (via angular-awesome library)
- @NgImportReference and @NgImportModule annotations
- Property binding support (12 binding methods)
- CRTP fluent API for method chaining
- Slot projection with semantic HTML (18 slots)
- Documentation
- docs/AUDIT.md (Phase 2 implementation audit)
- Updated IMPLEMENTATION.md with WaPage details
- Architecture diagrams updated
⏳ Pending (Phase 3):
- Additional enterprise component wrappers (to be identified and prioritized)
- Component-specific test suites
- Enhanced documentation
✅ Complete:
- Architecture documentation (C4 Context, Container, Component diagrams)
- Sequence diagrams (page load, navigation toggle)
- Entity Relationship Diagram (ERD)
- PACT.md (project charter)
- RULES.md (project standards)
- GUIDES.md (development guides)
- GLOSSARY.md (terminology and LLM alignment)
- PROMPT_REFERENCE.md (AI configuration snapshot)
- GitHub Copilot workspace instructions
- ✅ Angular Directive Wrappers for WebAwesome components
- ✅ JWebMP Plugin Integration via IPageConfigurator and GuicedEE SPI
- ✅ Slot Projection with ng-content attribute selectors
- ✅ Input/Output Bindings following Angular conventions
- ✅ Native Method Access via @ViewChild and directive APIs
- ✅ CSS Custom Properties binding for styling
- ✅ Comprehensive Documentation (docs-as-code, C4 architecture, guides)
- Java 25 LTS
- Maven 3.9+
- Node.js (for Angular development)
# Clone the repository
git clone https://github.com/JWebMP/WebAwesomePro.git
cd webawesome-pro
# Build and test
mvn clean install
# Run tests with coverage
mvn test jacoco:report- Build:
mvn clean install - Test:
mvn test - Coverage:
mvn jacoco:report - Package:
mvn package
┌──────────────────────────────────────────┐
│ Developer Applications │
│ (Using Angular + WebAwesome Components) │
└──────────────┬───────────────────────────┘
│ imports
┌──────────────▼───────────────────────────┐
│ WebAwesome Pro Plugin (this repo) │
│ ├─ Angular Directives & Wrappers │
│ ├─ JWebMP Plugin Metadata │
│ └─ GuicedEE Integration │
└──────────────┬─────────┬────────┬────────┘
│ │ │
┌────────▼─┐ ┌───▼──┐ ┌──▼────────┐
│ WebAwesome │ JWebMP │ GuicedEE │
│ Library │ Core │ DI │
└────────────┘ └──────┘ └─────────┘
See Architecture Docs for detailed C4, sequence, and ERD diagrams.
All project documentation follows a documentation-first, modular approach:
- PACT.md – Project contract, vision, scope, phases, stakeholders
- RULES.md – Standards, constraints, links to enterprise rules
- GUIDES.md – How-to guides for component wrappers, testing, build, CI/CD
- IMPLEMENTATION.md – Code map, module structure, status, next steps
- GLOSSARY.md – Terminology index and LLM prompt alignment
- docs/architecture/c4-context.md – System context and external dependencies
- docs/architecture/c4-container.md – Major components and communication
- docs/architecture/c4-component-layout.md – wa-page component deep dive
- docs/architecture/sequence-page-load.md – Full page initialization flow
- docs/architecture/sequence-nav-toggle.md – Mobile navigation interaction
- docs/architecture/erd-domain.md – Core data model
- docs/architecture/dependencies.md – Maven, GuicedEE, Angular dependency tree
- rules/RULES.md – Enterprise rule reference (read-only submodule)
- rules/generative/ – Topic-specific rules (JWebMP, WebAwesome, Angular, GuicedEE, etc.)
Each WebAwesome component has modular, component-specific rules organized in docs/rules/:
- Component Rules Index – Master index with links to all component rules
- Phase 2 Components (✅ Complete):
- WaPage – Primary layout container with 18 sub-components
- WaPageHeader – Main page header
- And 9 more layout and control components (see index)
- Phase 3 Components (⏳ Planned):
- Find Your Component: See the Component Rules Index for a complete list
- Review the Rule File: Each
.rules.mdfile contains:- Overview and purpose
- JWebMP Java class details
- CRTP fluent API usage patterns
- Angular @Input/@Output properties
- Slot projection and styling
- Accessibility features
- Cross-links to enterprise rules
- Check Examples: Look for code examples in the rule file or docs/page.example.md
- Review Tests: See src/test/java/ for comprehensive test examples
This project uses enforced Prompt Language Alignment for AI systems. Use these canonical terms in all code, prompts, and documentation:
| Concept | Canonical Term |
|---|---|
| Button Component | WaButton |
| Input Component | WaInput |
| Page Layout | WaPage |
| Horizontal Layout | WaCluster |
| Vertical Layout | WaStack |
| Icon Button | WaIconButton |
See GLOSSARY.md for full terminology index and topic-first composition.
- Java Version: Java 25 LTS (enforced)
- Build Tool: Apache Maven
- Module System: JPMS module descriptors required (module-info.java)
- Logging: Log4j2 + Lombok
@Log4j2annotation - Fluent APIs: CRTP pattern (Curiously Recurring Template Pattern), no @Builder
- Strict Mode:
strict: truein tsconfig.json - Directives:
@Input/@Output/@HostListenerfor property/event binding - Slots:
ng-content select="[slotAttribute]"for content projection - Type Safety: Full TypeScript type annotations, no
any
- Forward-Only: Remove legacy docs; never keep compatibility stubs
- Modularity: Project docs outside
rules/submodule; link to enterprise rules - Reciprocal Links: PACT ↔ RULES ↔ GUIDES ↔ IMPLEMENTATION
- Docs-as-Code: Mermaid/PlantUML diagrams in version control
See RULES.md for full technical and behavioral rules.
- Framework: Java Micro Harness + JUnit 5
- Coverage Goal: ≥ 80% (Jacoco)
- Browser Testing: BrowserStack (optional, for cross-browser validation)
- CI/CD: GitHub Actions (build, test, coverage on push/PR)
See GUIDES.md for testing patterns.
- Architecture documentation and diagrams
- PACT, RULES, GUIDES, GLOSSARY, IMPLEMENTATION
- Skeleton implementations of configurators and inclusion modules
- WaPageDirective (primary layout component)
- WaButtonDirective, WaInputDirective, WaSelectDirective
- Layout directives (WaCluster, WaStack)
- Component-specific tests
- GUIDES updates with component examples
- Font Awesome Pro integration
- Theming & CSS custom property binding guide
- Reactive forms integration guide
- Additional component wrappers as needed
- Full test coverage (Jacoco 80%+)
- Javadoc for all public classes
- GitHub Actions CI/CD pipeline
- Release to Maven Central
See PACT.md for phase details and success criteria.
- Load docs/PROMPT_REFERENCE.md (AI configuration)
- Read PACT.md (project vision and scope)
- Review RULES.md (standards and constraints)
- Check GUIDES.md (development patterns)
- ✅ All tests pass (
mvn clean test) - ✅ Code compiles with JPMS enabled
- ✅ Coverage ≥ 80% (Jacoco)
- ✅ Reciprocal links updated and validated
- ✅ Architecture diagrams in sync (if applicable)
- ✅ Javadoc present for public APIs
- ✅ Canonical terminology used (WaButton, WaInput, etc.)
See .github/copilot-instructions.md for GitHub Copilot workspace rules.
- WebAwesome Documentation: https://www.webawesome.io/
- JWebMP Documentation: https://github.com/JWebMP
- GuicedEE Documentation: https://github.com/GuicedEE
- Angular Documentation: https://angular.io/
This project is licensed under the Apache License 2.0. See LICENSE for details.
For questions or issues:
- Check GUIDES.md for how-to guides
- Review RULES.md for standards and constraints
- Consult Architecture Docs for system design
- Open an issue on GitHub with detailed context
Last Updated: December 2, 2025
Status: Phase 1 Complete (Architecture & Foundations)