Magary is an Angular UI library and documentation workspace built for teams that care about consistency, maintainability, release discipline, and delivery quality. The repository includes the published ng-magary package, the public demo/documentation app, and the validation tooling used to keep the library stable.
| Area | Purpose |
|---|---|
projects/ng-magary |
Published Angular UI library distributed on npm as ng-magary |
projects/demo-app |
Documentation and live demos used for product review, QA, and accessibility verification |
e2e/playwright |
Visual and accessibility smoke coverage for critical flows |
tools/ci |
Contract, compatibility, compliance, and quality-gate tooling |
docs |
Supporting guidance, recipes, and release-facing documentation |
- Standalone-first API designed for modern Angular applications.
- Curated public root API with stable naming and explicit exports.
- Components shaped for real dashboards, product surfaces, and internal tools.
- Documentation, smoke tests, accessibility checks, and release governance in the same workspace.
- Consumer compatibility checks across Angular 17 through 21.
pnpm install
pnpm run build
pnpm run qa:allExpected outcome:
- the library builds
- the demo app builds
- unit, visual smoke, and accessibility smoke gates pass
| Command | What it does |
|---|---|
pnpm run build:lib |
Build the published ng-magary package |
pnpm run build:demo |
Build the documentation and demo application |
pnpm run lint |
Lint TypeScript and Angular templates |
pnpm run test:unit |
Run all Angular unit tests |
pnpm run test:unit:ci |
Run the CI unit gate with warning checks |
pnpm run test:visual:smoke |
Run Playwright smoke coverage for key UI flows |
pnpm run test:a11y:smoke |
Run Playwright + AXE accessibility smoke coverage |
pnpm run check:consumer-matrix |
Validate compatibility against Angular 17-21 consumer apps |
pnpm run qa:all |
Run the full local release gate |
Magary is maintained with explicit release controls rather than informal best effort.
| Gate | Intent |
|---|---|
| API contract | Prevent accidental public API drift |
| No-any check | Keep library and spec surfaces type-safe |
| Third-party compliance | Validate notices and license inventory |
| Unit tests | Protect component behavior and contracts |
| Visual smoke | Catch critical UX regressions quickly |
| A11y smoke | Catch serious and critical accessibility regressions |
| Consumer matrix | Validate real install/build scenarios across Angular majors |
If you want to install and use the package in an Angular application, start here:
- npm package README:
projects/ng-magary/README.md - public docs and demos: magary.pages.dev
The package README is copied into dist/ng-magary during publish and becomes the README shown on npm.
License copies and attribution records live here:
Validation command:
pnpm run check:third-partyComponents such as magaryTooltip render overlays at document.body level to escape stacking contexts. Consumers must load the shared tooltip stylesheet in their global styles:
@use 'ng-magary/styles/tooltip.scss';Built for Angular teams shipping real products.