https://github.com/JhoanGon/magary
Library components
https://github.com/JhoanGon/magary
Last synced: 10 days ago
JSON representation
Library components
- Host: GitHub
- URL: https://github.com/JhoanGon/magary
- Owner: JhoanGon
- Created: 2025-08-01T04:48:01.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2026-05-20T07:52:41.000Z (22 days ago)
- Last Synced: 2026-05-20T08:13:42.771Z (22 days ago)
- Language: TypeScript
- Homepage: https://magary.pages.dev
- Size: 70.5 MB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
- fucking-awesome-angular - magary - A modern, standalone-first Angular UI library monorepo. (Third Party Components / UI Libraries)
- awesome-angular - magary - A modern, standalone-first Angular UI library monorepo. (Third Party Components / UI Libraries)
README
Magary
Standalone-first Angular UI library for real product teams.
---
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.
## At a glance
| 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 |
## Why Magary
- 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.
## Quick path
```bash
pnpm install
pnpm run build
pnpm run qa:all
```
Expected outcome:
- the library builds
- the demo app builds
- unit, visual smoke, and accessibility smoke gates pass
## Daily commands
| 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 |
## Quality model
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 |
## For library consumers
If you want to install and use the package in an Angular application, start here:
- npm package README: [`projects/ng-magary/README.md`](projects/ng-magary/README.md)
- public docs and demos: [magary.pages.dev](https://magary.pages.dev)
The package README is copied into `dist/ng-magary` during publish and becomes the README shown on npm.
## Release-facing docs
- [`CHANGELOG.md`](CHANGELOG.md)
- [`docs/MIGRATION_COMPATIBILITY.md`](docs/MIGRATION_COMPATIBILITY.md)
- [`docs/RELEASE_WORKFLOW.md`](docs/RELEASE_WORKFLOW.md)
- [`docs/SEMVER_POLICY.md`](docs/SEMVER_POLICY.md)
## Compliance and third-party notices
License copies and attribution records live here:
- [`THIRD_PARTY_NOTICES.md`](THIRD_PARTY_NOTICES.md)
- [`third_party/licenses/`](third_party/licenses/)
Validation command:
```bash
pnpm run check:third-party
```
## Tooltip stylesheet requirement
Components such as `magaryTooltip` render overlays at `document.body` level to escape stacking contexts. Consumers must load the shared tooltip stylesheet in their global styles:
```scss
@use 'ng-magary/styles/tooltip.scss';
```
---
Built for Angular teams shipping real products.