{"id":49833027,"url":"https://github.com/dyingangel666/ng-prism","last_synced_at":"2026-05-13T22:02:04.553Z","repository":{"id":351986000,"uuid":"1213349222","full_name":"dyingangel666/ng-prism","owner":"dyingangel666","description":"Lightweight Angular-native component showcase — no story files needed.","archived":false,"fork":false,"pushed_at":"2026-05-11T20:11:15.000Z","size":2847,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-11T20:30:52.448Z","etag":null,"topics":["angular","angular-library","angular-storybook","angular-styleguide","component-explorer","component-showcase","design-system","living-styleguide","showcase-decorator","signal-inputs","standalone-components","storybook","storybook-alternative"],"latest_commit_sha":null,"homepage":"https://dyingangel666.github.io/ng-prism/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dyingangel666.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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-04-17T09:34:49.000Z","updated_at":"2026-05-11T20:11:22.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/dyingangel666/ng-prism","commit_stats":null,"previous_names":["dyingangel666/ng-prism"],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/dyingangel666/ng-prism","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dyingangel666%2Fng-prism","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dyingangel666%2Fng-prism/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dyingangel666%2Fng-prism/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dyingangel666%2Fng-prism/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dyingangel666","download_url":"https://codeload.github.com/dyingangel666/ng-prism/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dyingangel666%2Fng-prism/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33001377,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T13:14:54.681Z","status":"ssl_error","status_checked_at":"2026-05-13T13:14:51.610Z","response_time":115,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["angular","angular-library","angular-storybook","angular-styleguide","component-explorer","component-showcase","design-system","living-styleguide","showcase-decorator","signal-inputs","standalone-components","storybook","storybook-alternative"],"created_at":"2026-05-13T22:01:58.077Z","updated_at":"2026-05-13T22:02:04.531Z","avatar_url":"https://github.com/dyingangel666.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"docs/prism_cover.png\" alt=\"ng-prism — Angular components, refracted\" width=\"100%\" /\u003e\n\u003c/p\u003e\n\n# ng-prism\n\nLightweight, Angular-native component showcase tool. Annotate components with `@Showcase` — no separate story files needed.\n\n[![Angular](https://img.shields.io/badge/Angular-21+-dd0031)](https://angular.dev)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.5+-3178c6)](https://www.typescriptlang.org)\n[![License](https://img.shields.io/badge/license-MIT-green)](./LICENSE)\n\n**[Live Demo](https://dyingangel666.github.io/ng-prism/demo/)** · **[Documentation](https://dyingangel666.github.io/ng-prism/)**\n\n## Features\n\n- **Zero-config discovery** — TypeScript Compiler API scans your library at build time\n- **Signal-native** — works with `input()` / `output()` signals\n- **Directive support** — showcase directives with configurable host elements\n- **Plugin architecture** — JSDoc, A11y, Figma, Performance, Box Model, Coverage\n- **Live Controls** — auto-generated input controls with type-aware editors\n- **Code Snippets** — live-updating Angular template snippets per variant\n- **Component Pages** — free-form demo pages for complex components\n- **Deep-linking** — URL state sync for sharing specific component/variant/view\n- **Themeable** — full CSS custom property system, replaceable UI sections\n\n## Quick Start\n\n### 1. Install\n\n```bash\nnpm install @ng-prism/core\n```\n\n### 2. Add `@Showcase` to a component\n\n```typescript\nimport { Component, input, output } from '@angular/core';\nimport { Showcase } from '@ng-prism/core';\n\n@Showcase({\n  title: 'Button',\n  category: 'Atoms',\n  description: 'Primary action button',\n  variants: [\n    { name: 'Primary', inputs: { variant: 'primary', label: 'Click me' } },\n    { name: 'Danger', inputs: { variant: 'danger', disabled: true } },\n  ],\n})\n@Component({\n  selector: 'my-button',\n  standalone: true,\n  template: `\u003cbutton [class]=\"variant()\"\u003e{{ label() }}\u003c/button\u003e`,\n})\nexport class ButtonComponent {\n  variant = input\u003c'primary' | 'secondary' | 'danger'\u003e('primary');\n  label = input('Button');\n  disabled = input(false);\n  clicked = output\u003cvoid\u003e();\n}\n```\n\n### 3. Run the schematic\n\n```bash\nng add @ng-prism/core\n```\n\nThis creates the prism app project, configures Angular builders, and generates `ng-prism.config.ts`.\n\n### 4. Start the dev server\n\n```bash\nng run my-lib:prism\n```\n\nOpen `http://localhost:4400` — your component appears in the sidebar with live controls, code snippets, and variant tabs.\n\n## Configuration\n\n```typescript\n// ng-prism.config.ts\nimport { defineConfig } from '@ng-prism/core/config';\nimport { jsDocPlugin } from '@ng-prism/plugin-jsdoc';\n\nexport default defineConfig({\n  plugins: [jsDocPlugin()],\n\n  theme: {\n    '--prism-primary': '#00a67e',\n    '--prism-font-sans': \"'Inter', sans-serif\",\n  },\n\n  appProviders: [provideAnimationsAsync(), provideHttpClient()],\n});\n```\n\n## Directives\n\nDirectives need a host element. Use `host` to wrap them:\n\n```typescript\n@Showcase({\n  title: 'Tooltip',\n  host: {\n    selector: 'my-button',\n    import: { name: 'ButtonComponent', from: 'my-lib' },\n    inputs: { label: 'Hover me' },\n  },\n  variants: [\n    { name: 'Top', inputs: { position: 'top', text: 'Tooltip!' } },\n  ],\n})\n@Directive({ selector: '[myTooltip]' })\nexport class TooltipDirective { ... }\n```\n\n## Component Pages\n\nFor complex components that need template projections or mock data:\n\n```typescript\nprovidePrism(PRISM_RUNTIME_MANIFEST, config, {\n  componentPages: [\n    { title: 'Table Demo', category: 'Data', component: TableDemoPage },\n  ],\n});\n```\n\nLink to a `@Showcase`-decorated component for combined API docs + custom rendering:\n\n```typescript\n@Showcase({\n  title: 'Table',\n  renderPage: 'Table Demo',\n  variants: [{ name: 'Default', inputs: { height: '400px' } }],\n})\n```\n\n## Official Plugins\n\n| Plugin    | Package                      | Description                                  |\n| --------- | ---------------------------- | -------------------------------------------- |\n| JSDoc     | `@ng-prism/plugin-jsdoc`     | API documentation from JSDoc comments        |\n| Figma     | `@ng-prism/plugin-figma`     | Figma design embed + visual diff             |\n| Box Model | `@ng-prism/plugin-box-model` | CSS box model inspector                      |\n| Perf      | `@ng-prism/plugin-perf`      | Render performance profiling                 |\n| Coverage  | `@ng-prism/plugin-coverage`  | Per-component test coverage from Istanbul/v8 |\n\n\u003e **Note:** Accessibility auditing (axe-core) is built into ng-prism core — no plugin needed.\n\n## Requirements\n\n- Angular \u003e= 21\n- TypeScript \u003e= 5.5\n- Components must use `input()` / `output()` signals\n\n## Contributing\n\nSee [CONTRIBUTING.md](./CONTRIBUTING.md) for development setup, the test workspace workflow, and PR guidelines.\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdyingangel666%2Fng-prism","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdyingangel666%2Fng-prism","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdyingangel666%2Fng-prism/lists"}