{"id":50893887,"url":"https://github.com/antuuanyf/prettier-modals","last_synced_at":"2026-06-18T02:00:58.106Z","repository":{"id":359419547,"uuid":"1245954959","full_name":"antuuanyf/prettier-modals","owner":"antuuanyf","description":null,"archived":false,"fork":false,"pushed_at":"2026-06-07T13:23:03.000Z","size":382,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-07T14:20:05.880Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"srdavo/pretty-modal","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/antuuanyf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-05-21T18:17:28.000Z","updated_at":"2026-06-07T13:22:47.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/antuuanyf/prettier-modals","commit_stats":null,"previous_names":["antuuanyf/pretty-modal","antuuanyf/prettier-modals"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/antuuanyf/prettier-modals","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antuuanyf%2Fprettier-modals","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antuuanyf%2Fprettier-modals/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antuuanyf%2Fprettier-modals/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antuuanyf%2Fprettier-modals/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/antuuanyf","download_url":"https://codeload.github.com/antuuanyf/prettier-modals/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antuuanyf%2Fprettier-modals/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34472826,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-18T02:00:06.871Z","response_time":128,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-15T23:00:25.069Z","updated_at":"2026-06-18T02:00:58.086Z","avatar_url":"https://github.com/antuuanyf.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Modals"],"readme":"# Prettier Modals\n\n[![npm core](https://img.shields.io/npm/v/prettier-modals?label=core)](https://www.npmjs.com/package/prettier-modals)\n[![npm angular](https://img.shields.io/npm/v/prettier-modals-angular?label=angular)](https://www.npmjs.com/package/prettier-modals-angular)\n[![GitHub Release](https://img.shields.io/github/v/release/antuuanyf/prettier-modals)](https://github.com/antuuanyf/prettier-modals/releases)\n[![CI](https://github.com/antuuanyf/prettier-modals/actions/workflows/ci.yml/badge.svg)](https://github.com/antuuanyf/prettier-modals/actions/workflows/ci.yml)\n[![License](https://img.shields.io/github/license/antuuanyf/prettier-modals)](LICENSE)\n\nBeautiful open/close animations for native `\u003cdialog\u003e` elements, powered by [GSAP](https://gsap.com/) and its [Flip plugin](https://gsap.com/docs/v3/Plugins/Flip/). The modal morphs **from** its trigger and collapses **back into it** — with elastic easing, blur, and fade.\n\nThis is a monorepo with two packages:\n\n| Package | Description |\n|---|---|\n| [`prettier-modals`](packages/core) | Framework-agnostic vanilla JS core. |\n| [`prettier-modals-angular`](packages/angular) | Standalone Angular directives + service over the core. |\n\n## Installation\n\n### From npm (recommended)\n\n```bash\n# Vanilla\nnpm install prettier-modals gsap\n```\n\n```bash\n# Angular\nnpm install prettier-modals-angular prettier-modals gsap\n```\n\nGSAP is a peer dependency (`\u003e=3.12`) in both packages.\n\nSee [`packages/core/README.md`](packages/core/README.md) and [`packages/angular/README.md`](packages/angular/README.md) for full usage.\n\n### From a GitHub Release\n\nEach [GitHub Release](https://github.com/antuuanyf/prettier-modals/releases) includes the publishable tarballs. Download them and install directly:\n\n```bash\n# vanilla\nnpm install prettier-modals-0.1.0.tgz gsap\n\n# Angular — install both tarballs together so the wrapper's peer dependency resolves\nnpm install prettier-modals-0.1.0.tgz prettier-modals-angular-0.1.0.tgz gsap\n```\n\n### From local tarballs (offline / air-gapped)\n\nIf you have the repo cloned, build the tarballs locally:\n\n```bash\nnpm run pack:all   # builds both packages → artifacts/*.tgz\n```\n\nThen install the `.tgz` files:\n\n```bash\n# vanilla\nnpm install artifacts/prettier-modals-0.1.0.tgz gsap\n\n# Angular\nnpm install artifacts/prettier-modals-0.1.0.tgz artifacts/prettier-modals-angular-0.1.0.tgz gsap\n```\n\n## Demo\n\nThe vanilla demo loads the source directly (no build). Serve the repo over HTTP — ES modules and import maps don't work from `file://`:\n\n```bash\nnpx serve .\n# then open http://localhost:3000/demo/\n```\n\n## Development\n\nThis is an npm-workspaces monorepo. The two packages (`packages/core`, `packages/angular`) are workspaces, so a single install at the repo root covers both:\n\n```bash\nnpm install            # root: installs both packages (workspaces)\nnpm run build:core     # build prettier-modals (tsup → ESM + CJS + .d.ts)\nnpm run build:angular  # build prettier-modals-angular (ng-packagr → APF)\nnpm run build          # build everything\nnpm test               # run the unit tests across workspaces\nnpm run test:e2e       # run the Playwright e2e suite\n```\n\n### Running the Angular demo\n\nThe Angular demo (`demos/angular`) is **not** part of the workspaces — it consumes the **built** packages via `file:` dependencies (`packages/angular/dist`). So it needs its own install, and the Angular package must be built first or its `file:` path won't exist:\n\n```bash\nnpm install            # 1. root workspaces\nnpm run build:core     # 2. build the core (peer of the wrapper)\nnpm run build:angular  # 3. build the wrapper → packages/angular/dist\ncd demos/angular\nnpm install            # 4. demo deps (use `npm ci` for a reproducible install)\nnpm start              # 5. ng serve\n```\n\nThe vanilla demo (see [Demo](#demo) above) needs no build or install — just serve the repo over HTTP.\n\n## Contributing\n\nContributions are welcome! The full repo conventions live in [`AGENTS.md`](AGENTS.md); the essentials:\n\n- **Branch + PR to `main`** — never commit directly to `main`. Branch from an up-to-date `main`:\n  ```bash\n  git switch -c \u003ctype\u003e/\u003cshort-desc\u003e   # e.g. feat/anchor-offsets, fix/escape-close, docs/readme\n  ```\n- **Keep PRs focused** — one concern per PR; open it against `main` with `gh pr create`.\n- **Before pushing**, make sure the build and tests pass:\n  ```bash\n  npm run build \u0026\u0026 npm test \u0026\u0026 npm run test:e2e\n  ```\n- **Conventions**:\n  - GSAP stays a **peer dependency** — never bundle it.\n  - The core is **SSR-safe**: guard every `document`/`window` access.\n  - Public types come from **JSDoc** in `packages/core` — keep it accurate, it *is* the type surface.\n  - The Angular wrapper is **standalone only** (no `NgModule`) and runs animations outside the Angular zone.\n\nSpotted a bug or have an idea? Open an issue before a large change so we can align on the approach.\n\n## License\n\nMIT © Antonio Monreal Diaz\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantuuanyf%2Fprettier-modals","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fantuuanyf%2Fprettier-modals","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantuuanyf%2Fprettier-modals/lists"}