🚧 chore: Update project to Angular21#388
Merged
Luizgomess merged 4 commits intomasterfrom Dec 27, 2025
Merged
Conversation
|
Note
|
| Cohort / File(s) | Summary |
|---|---|
App & Router apps/web/src/app/app.component.ts, apps/web/src/app/app.config.ts |
AppComponent now injects PLATFORM_ID/DOCUMENT/Router/ViewportScroller, listens to Router Scroll events, applies a LOADING_TIMEOUT for docs/components paths, and performs header-aware anchored scrolling; router config: scrollPositionRestoration: 'disabled' and anchorScrolling removed. |
Scroll‑spy & Anchors apps/web/src/app/domain/directives/scroll-spy.directive.ts, apps/web/src/app/domain/directives/scroll-spy-item.directive.ts, apps/web/src/app/domain/components/dynamic-anchor/* |
Migration to input()/output() signals and inject() DI; added PLATFORM_ID/DOCUMENT guards; rAF-throttled onScroll() → handleScroll() with header-offset via getHeaderOffset; DOM lookups use injected DOCUMENT. |
Doc Content & Pages apps/web/src/app/domain/components/doc-content/*, apps/web/src/app/domain/pages/about/*, apps/web/src/app/domain/pages/component/*, apps/web/src/app/domain/pages/pre-processors/*, apps/web/src/app/domain/pages/roadmap/* |
Added ChangeDetectionStrategy.OnPush; converted props to signals (activeAnchor, componentData); templates use function-call bindings and @let async patterns; many standalone/CommonModule removals; fixed nav id mantainers → maintainers. |
Shared UI & Services apps/web/src/app/shared/components/code-highlight/*, apps/web/src/app/shared/components/simple-code-highlight/*, apps/web/src/app/shared/services/code-highlight.service.ts, apps/web/src/app/shared/services/markdown.service.ts, apps/web/src/app/shared/services/rehype-enhanced-code.ts, apps/web/src/app/shared/utils/code-tabs.ts |
Code highlight components set OnPush; initializeProcessor made idempotent; rehype visitor adds Tailwind classes for blockquote and a; copy button/overlay/tab selector and styling tweaks. |
Zard UI components libs/zard/src/lib/shared/components/tabs/*, libs/zard/src/lib/shared/components/icon/demo/searchable.ts, libs/zard/src/lib/shared/components/tooltip/*, libs/zard/src/lib/shared/components/table/table.variants.ts |
Replaced broad CommonModule with targeted imports (e.g., NgTemplateOutlet), added OnPush, added type="button" to interactive buttons, refactored throttle helper, adjusted variant selectors/classes. |
Directives / API shifts apps/web/src/app/domain/components/*, apps/web/src/app/domain/directives/* |
Broad migration from decorator-based @Input/@Output and constructor DI to inject() and signal-based input()/output(); HostBinding/HostListener usages replaced by host bindings or flagged; some lifecycle hooks removed. |
Server, Styles & Layout apps/web/src/server.ts, apps/web/src/styles.css, apps/web/src/app/core/layouts/documentation/documentation.layout.ts |
SSR catch‑all route changed from /**/'**' → '/*splat'; CSS adds --shiki--light/--shiki--dark and sets --shiki-theme with .dark override; minor layout formatting moves. |
TypeScript configs apps/web/tsconfig.json, apps/web/tsconfig.spec.json, libs/blocks/tsconfig*.json, libs/zard/tsconfig*.json, libs/zard/tsconfig.spec.json |
Added "module": "preserve", "moduleResolution": "bundler" across tsconfigs; spec tsconfigs set isolatedModules: true and changed module from commonjs → preserve. |
Sequence Diagram(s)
sequenceDiagram
autonumber
actor User as Browser
participant Router as Angular Router
participant App as AppComponent
participant Doc as Document (injected)
participant Viewport as ViewportScroller
participant Spy as ScrollSpyDirective
Note over User,Router: User navigates (may include `#anchor`)
User->>Router: navigate(url#anchor)
Router->>App: emit Scroll event
alt path includes docs/components
App->>App: wait LOADING_TIMEOUT
end
alt anchor present
App->>Doc: getElementById(anchor)
Doc-->>App: element (offsetTop)
App->>App: headerOffset = getHeaderOffset(isBrowser)
App->>Viewport: scrollToPosition([0, max(0, offsetTop - headerOffset)])
else no anchor
App->>Viewport: scrollToPosition([0,0])
end
Note over User,Spy: User scrolls page
User->>Spy: window:scroll -> onScroll()
Spy->>Spy: requestAnimationFrame -> handleScroll()
Spy->>App: emit scrollSpyChange when section changes
Estimated code review effort
🎯 4 (Complex) | ⏱️ ~50 minutes
Possibly related PRs
- ✨ feat: adding dynamic meta tags for doc pages, fixing ssr erros, add… #266 — similar SSR/browser-safe changes, app config and scroll/anchor handling overlap.
- 📦 refactor: breadcrumb code cleanup (#322) #324 — updates to tsconfig/module-resolution options akin to this PR.
- 🚧 chore: fixed two commit messages #357 — touches
apps/web/src/app/app.config.ts/ router options, related to router scroll behavior changes.
Suggested labels
priority
Suggested reviewers
- srizzon
- Luizgomess
- ribeiromatheuss
Poem
Signals rise, OnPush in command,
Anchors find their place beneath the header’s hand.
Modules preserved, styles pick their theme,
Server splats catch routes while scrolls find their seam. ✨
Pre-merge checks and finishing touches
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Docstring Coverage | Docstring coverage is 28.57% which is insufficient. The required threshold is 80.00%. | You can run @coderabbitai generate docstrings to improve docstring coverage. |
✅ Passed checks (4 passed)
| Check name | Status | Explanation |
|---|---|---|
| Title check | ✅ Passed | Title accurately reflects the main change: an Angular 21 migration with legacy decorator removal, the primary objective of this PR. |
| Description check | ✅ Passed | Description comprehensively covers all required sections: What was done (detailed modernization), Type of change (Chore), Breaking change (none), and Checklist (partially completed). Structure matches template. |
| Linked Issues check | ✅ Passed | PR successfully addresses all objectives in #387: Angular 21 core upgrade, dependency updates, deprecated API migration, component implementation updates, and feature compatibility verification completed. |
| Out of Scope Changes check | ✅ Passed | All changes are tightly scoped to Angular 21 migration: dependency updates, injection pattern modernization, decorator-to-function API conversions, tsconfig updates, and styling refinements align with linked issue requirements. |
✨ Finishing touches
- 📝 Generate docstrings
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Post copyable unit tests in a comment
- Commit unit tests in branch
update-project-angular21
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands and usage tips.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 12
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (9)
apps/web/src/app/core/layouts/documentation/documentation.layout.ts (2)
12-31: Add ChangeDetectionStrategy.OnPush for performance optimization.The component is missing the
changeDetection: ChangeDetectionStrategy.OnPushstrategy. This is essential for performance optimization and aligns with Angular 21 best practices, especially when using signals.🔎 Proposed fix
-import { Component, computed, inject, signal, afterNextRender, DestroyRef } from '@angular/core'; +import { Component, ChangeDetectionStrategy, computed, inject, signal, afterNextRender, DestroyRef } from '@angular/core'; import { RouterModule } from '@angular/router'; import { FooterComponent } from '@doc/domain/components/footer/footer.component'; @@ -12,6 +12,7 @@ import { DarkModeOptions, ZardDarkMode } from '@zard/services/dark-mode'; @Component({ selector: 'z-documentation', template: `...`, + changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [RouterModule, HeaderComponent, FooterComponent, SidebarComponent, ZardToastComponent], })As per coding guidelines, components in
libs/zard/src/lib/components/**must useChangeDetectionStrategy.OnPush, and this layout component should follow the same pattern for consistency.
29-29: Remove redundantstandalone: trueflag.In Angular 21, standalone components are the default. The
standalone: trueflag is redundant and should be omitted unless explicitly settingstandalone: falseto opt out.🔎 Proposed fix
@Component({ selector: 'z-documentation', template: `...`, changeDetection: ChangeDetectionStrategy.OnPush, - standalone: true, imports: [RouterModule, HeaderComponent, FooterComponent, SidebarComponent, ZardToastComponent], })apps/web/src/app/shared/services/markdown.service.ts (1)
19-19: Consider improving type safety throughout the service.The service uses
anyextensively for the processor, AST nodes, and visitor callback parameters. While functional, explicit types from theunistandrehypepackages (e.g.,Element,Root,Parent) would enhance type safety and catch potential errors at compile time.💡 Example type improvements
import type { Element, Parent, Root } from 'hast'; import type { Processor } from 'unified'; // Line 19 private processor: Processor | undefined; // Line 38 return (tree: Root) => { visit(tree, 'element', (node: Element, index: number, parent: Parent) => { // ... }); };Also applies to: 22-22, 38-38
apps/web/src/app/domain/pages/about/about.page.ts (2)
22-40: Add ChangeDetectionStrategy.OnPush for consistency.Other page components in this PR (e.g., PreProcessorsPage) use OnPush change detection. This page should follow the same pattern for consistent performance optimization across the application.
🔎 Suggested addition
+import { ChangeDetectionStrategy, Component, inject, type OnInit } from '@angular/core'; -import { Component, inject, type OnInit } from '@angular/core'; @Component({ selector: 'z-about', templateUrl: './about.page.html', standalone: true, + changeDetection: ChangeDetectionStrategy.OnPush, imports: [Based on learnings, OnPush is a best practice for components in this project.
26-27: Consider removing CommonModule for consistency.Other files in this PR (searchable.ts, file-tree.component.ts, pre-processors.page.ts) remove CommonModule from standalone components. Unless this page specifically requires CommonModule directives, consider removing it to align with the broader migration pattern.
Verify if any template directives (ngFor, ngIf, ngClass, etc.) require CommonModule. If using only Angular 21's native control flow (@if, @for), CommonModule can be safely removed.
apps/web/src/app/shared/components/simple-code-highlight/simple-code-highlight.component.ts (1)
6-38: Add ChangeDetectionStrategy.OnPush.This component uses signal-based state management (highlightedCode, copied signals) and inject() for dependencies, making it a perfect candidate for OnPush change detection. This would optimize performance by reducing unnecessary change detection cycles.
🔎 Suggested improvement
+import { Component, input, signal, effect, inject, ChangeDetectionStrategy } from '@angular/core'; -import { Component, input, signal, effect, inject } from '@angular/core'; @Component({ selector: 'z-simple-code-highlight', standalone: true, + changeDetection: ChangeDetectionStrategy.OnPush, template: `Based on learnings, OnPush is a best practice for performance optimization in components.
apps/web/src/app/shared/components/code-highlight/code-highlight.component.ts (1)
77-81: Potential SSR issue with direct DOM access.The
escapeHtmlmethod usesdocument.createElementdirectly, which will fail during server-side rendering. Consider using the injectedDOCUMENTtoken or adding a platform check.🔎 Proposed SSR-safe fix
+import { DOCUMENT, isPlatformBrowser } from '@angular/common'; +import { PLATFORM_ID } from '@angular/core'; export class CodeHighlightComponent { + private readonly document = inject(DOCUMENT); + private readonly platformId = inject(PLATFORM_ID); // ... private escapeHtml(text: string): string { + if (!isPlatformBrowser(this.platformId)) { + return text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); + } - const div = document.createElement('div'); + const div = this.document.createElement('div'); div.textContent = text; return div.innerHTML; } }apps/web/src/app/domain/components/doc-content/doc-content.component.ts (1)
5-13: Missing OnPush change detection strategy.This component should use
ChangeDetectionStrategy.OnPushfor performance optimization, consistent with the Angular 21 migration patterns applied elsewhere in this PR.Also,
activeAnchorandonAnchorClickinputs should be markedreadonlyfor consistency withnavigationConfig.🔎 Proposed fix
-import { Component, input } from '@angular/core'; +import { ChangeDetectionStrategy, Component, input } from '@angular/core'; import { DynamicAnchorComponent, NavigationConfig } from '../dynamic-anchor/dynamic-anchor.component'; @Component({ selector: 'z-content', imports: [DynamicAnchorComponent], templateUrl: './doc-content.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, }) export class DocContentComponent { readonly navigationConfig = input<NavigationConfig>(); - activeAnchor = input<string>(); - onAnchorClick = input<((anchorId: string) => void | Promise<void>) | null>(null); + readonly activeAnchor = input<string>(); + readonly onAnchorClick = input<((anchorId: string) => void | Promise<void>) | null>(null); }apps/web/src/app/domain/pages/roadmap/roadmap.page.ts (1)
22-28: Remove redundantstandalone: trueand confirm native control flow adoption.The CommonModule removal is correct—the template uses Angular's native control flow (
@for,@if,@else) throughout. However, in Angular 20, thestandalone: trueflag is redundant and should be removed; components are standalone by default.
- Remove
standalone: truefrom the component decorator- Template control flow migration is properly implemented ✓
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (9)
apps/web/public/components/icon/demo/searchable.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/components/tabs/doc/overview.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/tabs.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/tooltip.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/tabs.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/tooltip.jsonis excluded by!apps/web/public/**and included byapps/**migrations.jsonis excluded by none and included by nonepackage-lock.jsonis excluded by!**/package-lock.jsonand included by nonepackage.jsonis excluded by none and included by none
📒 Files selected for processing (33)
apps/web/src/app/app.component.tsapps/web/src/app/app.config.tsapps/web/src/app/core/layouts/documentation/documentation.layout.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.htmlapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/file-tree/file-tree.component.tsapps/web/src/app/domain/directives/scroll-spy-item.directive.tsapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/app/domain/pages/about/about.page.htmlapps/web/src/app/domain/pages/about/about.page.tsapps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/domain/pages/pre-processors/pre-processors.page.tsapps/web/src/app/domain/pages/roadmap/roadmap.page.tsapps/web/src/app/shared/components/code-highlight/code-highlight.component.tsapps/web/src/app/shared/components/simple-code-highlight/simple-code-highlight.component.tsapps/web/src/app/shared/services/code-highlight.service.tsapps/web/src/app/shared/services/markdown.service.tsapps/web/src/main.server.tsapps/web/src/server.tsapps/web/src/styles.cssapps/web/tsconfig.jsonapps/web/tsconfig.spec.jsonlibs/blocks/tsconfig.jsonlibs/blocks/tsconfig.spec.jsonlibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/tooltip/tooltip.tslibs/zard/tsconfig.jsonlibs/zard/tsconfig.spec.json
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use path aliases @zard/* to map to libs/zard/src/lib/* in imports
Files:
apps/web/src/app/shared/services/code-highlight.service.tsapps/web/src/app/shared/services/markdown.service.tslibs/zard/src/lib/shared/components/tooltip/tooltip.tsapps/web/src/app/domain/components/file-tree/file-tree.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/pages/pre-processors/pre-processors.page.tsapps/web/src/app/shared/components/code-highlight/code-highlight.component.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/directives/scroll-spy-item.directive.tsapps/web/src/app/shared/components/simple-code-highlight/simple-code-highlight.component.tsapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/server.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/app/domain/pages/about/about.page.tsapps/web/src/main.server.tsapps/web/src/app/core/layouts/documentation/documentation.layout.tsapps/web/src/app/domain/pages/roadmap/roadmap.page.tsapps/web/src/app/app.config.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
libs/zard/**/*.{css,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Use CSS custom properties for design tokens and theming in the component library
Files:
libs/zard/src/lib/shared/components/tooltip/tooltip.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
🧠 Learnings (63)
📓 Common learnings
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Follow PR checklist including: passing tests, code pattern compliance, updated documentation, working demos, no lint/typecheck warnings, linked issues, conventional commit in title
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs with `input()` in Angular components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: README.md:0-0
Timestamp: 2025-12-21T00:11:44.620Z
Learning: Use Angular, TailwindCSS, and TypeScript as the primary technology stack for component development
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use TailwindCSS utility classes for styling, following responsive design patterns with prefixes for breakpoints (sm:, lg:) and ensure accessibility with semantic HTML and ARIA guidelines
Applied to files:
apps/web/src/app/shared/services/markdown.service.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.html
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Implement TailwindCSS v4 with PostCSS for styling and use class merging with tailwind-merge to resolve conflicts
Applied to files:
apps/web/src/app/shared/services/markdown.service.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses()` utility with `clsx` and `tailwind-merge` to resolve class conflicts in component styling
Applied to files:
apps/web/src/app/shared/services/markdown.service.ts
📚 Learning: 2025-11-30T13:27:41.206Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/popover/popover.component.ts:28-29
Timestamp: 2025-11-30T13:27:41.206Z
Learning: In libs/zard/src/lib/components/core/**/*.ts files (core utilities, plugins, and providers), use relative imports for intra-core dependencies because the ZardUI CLI performs path transformations during component installation. The CLI expects specific relative path patterns and transforms them to the target project structure. For all other component imports and application code, use zard/* path aliases.
Applied to files:
apps/web/src/app/domain/pages/about/about.page.htmllibs/zard/src/lib/shared/components/tooltip/tooltip.tslibs/zard/tsconfig.spec.jsonapps/web/src/app/domain/components/file-tree/file-tree.component.tslibs/blocks/tsconfig.jsonlibs/zard/tsconfig.jsonapps/web/src/main.server.tsapps/web/src/app/domain/pages/roadmap/roadmap.page.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
Applied to files:
libs/zard/src/lib/shared/components/tooltip/tooltip.tsapps/web/src/app/domain/components/file-tree/file-tree.component.tslibs/zard/src/lib/shared/components/tabs/doc/overview.mdapps/web/src/app/domain/pages/component/component.page.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/roadmap/roadmap.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add barrel exports for all new components in libs/zard/src/lib/components/components.ts
Applied to files:
libs/zard/src/lib/shared/components/tooltip/tooltip.tsapps/web/src/app/domain/components/file-tree/file-tree.component.tslibs/zard/tsconfig.jsonlibs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/roadmap/roadmap.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-30T08:50:23.436Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/core/providezard.ts:0-0
Timestamp: 2025-11-30T08:50:23.436Z
Learning: In libs/zard/src/lib/components/core/providezard.ts, the import paths `../core/event-manager-plugins/...` are intentionally structured this way because the ZardUI CLI transforms them to 'shared/components/core/event-manager-plugins/...' format. Other relative path combinations don't work with the current CLI implementation. This path pattern should not be simplified until the CLI transformation logic is updated.
Applied to files:
libs/zard/src/lib/shared/components/tooltip/tooltip.tslibs/zard/tsconfig.spec.jsonapps/web/src/app/domain/components/file-tree/file-tree.component.tslibs/blocks/tsconfig.jsonlibs/zard/tsconfig.jsonapps/web/src/main.server.tsapps/web/src/app/domain/pages/roadmap/roadmap.page.ts
📚 Learning: 2025-12-15T11:43:06.831Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 373
File: libs/zard/src/lib/shared/components/select/select.component.ts:33-33
Timestamp: 2025-12-15T11:43:06.831Z
Learning: In files under libs/zard/src/lib/**/*.{ts,tsx,js}, prefer the @/ path alias for imports that map to libs/zard/src/lib/* directories. For example, write import { mergeClasses } from '@/shared/utils/merge-classes' instead of using the 'zard/' alias. This improves path readability and aligns with the project's alias configuration.
Applied to files:
libs/zard/src/lib/shared/components/tooltip/tooltip.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for typed variants in component styling
Applied to files:
libs/zard/src/lib/shared/components/tooltip/tooltip.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use path aliases zard/* to map to libs/zard/src/lib/* in imports
Applied to files:
libs/zard/src/lib/shared/components/tooltip/tooltip.tslibs/zard/tsconfig.spec.jsonlibs/blocks/tsconfig.jsonlibs/zard/tsconfig.json
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for type-safe styling variants in components
Applied to files:
libs/zard/src/lib/shared/components/tooltip/tooltip.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/**/*.{css,ts} : Use CSS custom properties for design tokens and theming in the component library
Applied to files:
libs/zard/src/lib/shared/components/tooltip/tooltip.tsapps/web/src/styles.css
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use mergeClasses utility from zard/shared/utils for combining CVA variants with custom classes
Applied to files:
libs/zard/src/lib/shared/components/tooltip/tooltip.tsapps/web/src/app/domain/components/file-tree/file-tree.component.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use computed properties in Angular components for reactive class calculations: `protected readonly classes = computed(() => ...)`
Applied to files:
libs/zard/src/lib/shared/components/tooltip/tooltip.tsapps/web/src/app/shared/components/code-highlight/code-highlight.component.tsapps/web/src/app/domain/pages/component/component.page.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-14T22:52:09.135Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Applied to files:
libs/zard/src/lib/shared/components/tooltip/tooltip.tsapps/web/src/app/domain/components/file-tree/file-tree.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/pages/pre-processors/pre-processors.page.tsapps/web/src/app/shared/components/code-highlight/code-highlight.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/directives/scroll-spy-item.directive.tsapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/directives/scroll-spy.directive.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-10T21:46:33.213Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 318
File: libs/zard/src/lib/components/select/demo/default.ts:21-21
Timestamp: 2025-11-10T21:46:33.213Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally showing different patterns (e.g., primitive values vs signals) across different demos is valuable for demonstrating the flexibility of Angular features like two-way binding.
Applied to files:
libs/zard/src/lib/shared/components/tooltip/tooltip.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Applied to files:
libs/zard/src/lib/shared/components/tooltip/tooltip.tsapps/web/src/app/domain/components/file-tree/file-tree.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/shared/components/code-highlight/code-highlight.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/directives/scroll-spy-item.directive.tsapps/web/src/app/domain/pages/component/component.page.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/directives/scroll-spy.directive.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs with `input()` in Angular components
Applied to files:
libs/zard/src/lib/shared/components/tooltip/tooltip.tsapps/web/src/app/domain/components/file-tree/file-tree.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/shared/components/code-highlight/code-highlight.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/directives/scroll-spy-item.directive.tsapps/web/src/app/domain/pages/component/component.page.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Use Angular TestBed and ComponentFixture utilities for testing components
Applied to files:
libs/zard/src/lib/shared/components/tooltip/tooltip.tsapps/web/src/app/domain/components/file-tree/file-tree.component.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-13T11:50:50.088Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:50.088Z
Learning: Do not flag or require removing standalone: true for test components (*.spec.ts) and demo components (demo/*.ts) within libs/zard/src/lib/shared/components/**.ts. In these contexts, an explicit standalone: true flag is acceptable; apply this exclusion when reviewing files under this path.
Applied to files:
libs/zard/src/lib/shared/components/tooltip/tooltip.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T21:17:39.497Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 383
File: libs/zard/src/lib/shared/components/carousel/carousel.component.ts:114-115
Timestamp: 2025-12-21T21:17:39.497Z
Learning: In Angular components that use signal inputs (Input()) with types from external libraries (e.g., Embla Carousel), add explicit type annotations to prevent TypeScript IDE errors about inferred types referencing non-portable node_modules paths. For example, declare a readonly typed input like: readonly zOptions: InputSignal<EmblaOptionsType> = input<EmblaOptionsType>(...). This explicit annotation helps avoid the error cannot be named without a reference to node_modules. Apply this pattern to components in the shared carousel area (and similar components) whenever an external library type is used in an InputSignal to ensure type safety and IDE compatibility.
Applied to files:
libs/zard/src/lib/shared/components/tooltip/tooltip.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Applied to files:
libs/zard/tsconfig.spec.jsonapps/web/src/app/domain/components/file-tree/file-tree.component.tsapps/web/tsconfig.spec.jsonapps/web/src/app/domain/pages/pre-processors/pre-processors.page.tsapps/web/src/app/shared/components/code-highlight/code-highlight.component.tslibs/zard/tsconfig.jsonapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/pages/component/component.page.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/roadmap/roadmap.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/tsconfig.json : Configure TypeScript path mappings in `tsconfig.json` with `@/*` alias pointing to `src/app/*` for clean imports
Applied to files:
libs/zard/tsconfig.spec.jsonapps/web/tsconfig.spec.jsonlibs/blocks/tsconfig.spec.jsonapps/web/tsconfig.jsonlibs/blocks/tsconfig.jsonlibs/zard/tsconfig.json
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Co-locate test files with components using `.spec.ts` suffix next to component files
Applied to files:
libs/zard/tsconfig.spec.jsonapps/web/tsconfig.spec.jsonlibs/blocks/tsconfig.spec.jsonlibs/zard/tsconfig.json
📚 Learning: 2025-12-15T11:43:10.889Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 373
File: libs/zard/src/lib/shared/components/select/select.component.ts:33-33
Timestamp: 2025-12-15T11:43:10.889Z
Learning: For files in libs/zard/src/lib/**/*.{ts,tsx,js}, use the `@/` path alias for imports mapping to libs/zard/src/lib/* directories. For example, use `import { mergeClasses } from '@/shared/utils/merge-classes'` instead of `import { mergeClasses } from 'zard/shared/utils/merge-classes'`.
Applied to files:
libs/zard/tsconfig.spec.jsonapps/web/src/app/domain/components/file-tree/file-tree.component.tslibs/blocks/tsconfig.jsonlibs/zard/tsconfig.json
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Use ES modules with `"type": "module"` in package.json configuration
Applied to files:
libs/zard/tsconfig.spec.jsonapps/web/tsconfig.spec.jsonlibs/blocks/tsconfig.spec.jsonapps/web/tsconfig.jsonlibs/blocks/tsconfig.jsonlibs/zard/tsconfig.json
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx} : Use TypeScript path mappings with clean import aliases (e.g., `@/shared/components`, `@/shared/utils`, `@/shared/services`) instead of relative imports
Applied to files:
libs/zard/tsconfig.spec.jsonapps/web/tsconfig.spec.jsonlibs/blocks/tsconfig.spec.jsonapps/web/tsconfig.jsonlibs/blocks/tsconfig.jsonlibs/zard/tsconfig.json
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Place tests co-located with components using the .spec.ts naming convention
Applied to files:
libs/zard/tsconfig.spec.jsonapps/web/tsconfig.spec.jsonlibs/blocks/tsconfig.spec.json
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to **/*.spec.ts : Use Jest with happy-dom/jest-environment and Angular TestBed utilities for testing
Applied to files:
libs/zard/tsconfig.spec.jsonapps/web/tsconfig.spec.jsonlibs/blocks/tsconfig.spec.json
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Ensure components are standalone Angular components
Applied to files:
apps/web/src/app/domain/components/file-tree/file-tree.component.tsapps/web/src/app/domain/pages/pre-processors/pre-processors.page.tsapps/web/src/app/shared/components/code-highlight/code-highlight.component.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/roadmap/roadmap.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block component files must use the .component.ts extension and should be standalone Angular components with explicit imports from ReactiveFormsModule and ZardUI components
Applied to files:
apps/web/src/app/domain/components/file-tree/file-tree.component.tsapps/web/src/app/domain/pages/pre-processors/pre-processors.page.tsapps/web/src/app/domain/pages/component/component.page.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/roadmap/roadmap.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-10-31T10:03:18.563Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Applied to files:
apps/web/src/app/domain/components/file-tree/file-tree.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/pages/pre-processors/pre-processors.page.tsapps/web/src/app/shared/components/code-highlight/code-highlight.component.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/directives/scroll-spy-item.directive.tsapps/web/src/app/shared/components/simple-code-highlight/simple-code-highlight.component.tsapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.htmlapps/web/src/app/domain/pages/roadmap/roadmap.page.tsapps/web/src/app/app.config.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Applied to files:
apps/web/src/app/domain/components/file-tree/file-tree.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/pages/pre-processors/pre-processors.page.tsapps/web/src/app/shared/components/code-highlight/code-highlight.component.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/pages/component/component.page.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/main.server.tsapps/web/src/app/domain/pages/roadmap/roadmap.page.tsapps/web/src/app/app.config.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Applied to files:
apps/web/src/app/domain/components/file-tree/file-tree.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/pages/pre-processors/pre-processors.page.tsapps/web/src/app/shared/components/code-highlight/code-highlight.component.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/main.server.tsapps/web/src/app/domain/pages/roadmap/roadmap.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Use path aliases `zard/*` pointing to `libs/zard/src/lib/*` for component imports
Applied to files:
apps/web/src/app/domain/components/file-tree/file-tree.component.tslibs/blocks/tsconfig.json
📚 Learning: 2025-12-25T11:10:09.078Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 384
File: apps/web/src/styles.css:213-213
Timestamp: 2025-12-25T11:10:09.078Z
Learning: In Tailwind CSS v4, max-width utilities support dynamic numeric values derived from the spacing scale (using the --spacing variable, default 0.25rem = 4px). Prefer using numeric classes like max-w-350 when the value aligns with the spacing scale, since 350 × 0.25rem = 87.5rem = 1400px. Avoid arbitrary values expressed with brackets (e.g., max-w-[1400px]) when a scale-based value is available and accurate. Apply this guidance to CSS files in the web app (e.g., apps/web/src/styles.css) and across the codebase where Tailwind is used.
Applied to files:
apps/web/src/styles.css
📚 Learning: 2025-11-30T19:07:11.572Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/directives/scroll-spy-item.directive.tsapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/app/app.config.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-13T11:50:56.310Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:56.310Z
Learning: Do not flag or suggest removing `standalone: true` from test components (*.spec.ts files) or demo components (demo/*.ts files) in libs/zard/src/lib/shared/components/**/*.ts, as it is not a significant concern and the explicit flag is acceptable in these contexts.
Applied to files:
apps/web/tsconfig.spec.jsonlibs/blocks/tsconfig.spec.jsonapps/web/src/app/shared/components/simple-code-highlight/simple-code-highlight.component.tsapps/web/src/app/domain/pages/roadmap/roadmap.page.ts
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx} : Build components with full type safety and TypeScript first, ensuring all components are properly typed
Applied to files:
apps/web/tsconfig.spec.jsonlibs/blocks/tsconfig.spec.json
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/components.json : Store CLI configuration in `components.json` with properties for style, tailwind configuration, baseUrl, and path aliases
Applied to files:
apps/web/tsconfig.spec.jsonapps/web/tsconfig.json
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/block.ts : The files array in block metadata must include all necessary code files with name, path, content, and language properties; supported languages are typescript, html, css, and json
Applied to files:
libs/blocks/tsconfig.spec.jsonlibs/blocks/tsconfig.json
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Refer to `docs/angular-llm.txt` for Angular best practices when developing components
Applied to files:
apps/web/src/app/domain/pages/pre-processors/pre-processors.page.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/pages/roadmap/roadmap.page.ts
📚 Learning: 2025-12-21T21:17:39.497Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 383
File: libs/zard/src/lib/shared/components/carousel/carousel.component.ts:114-115
Timestamp: 2025-12-21T21:17:39.497Z
Learning: In Angular components using signal inputs (input()) with types from external libraries like Embla Carousel, explicit type annotations (e.g., `readonly zOptions: InputSignal<EmblaOptionsType> = input<EmblaOptionsType>(...)`) may be necessary to prevent TypeScript IDE errors about inferred types referencing non-portable node_modules paths. This is not redundant when the annotation prevents the "cannot be named without a reference to node_modules" error.
Applied to files:
apps/web/src/app/shared/components/code-highlight/code-highlight.component.tsapps/web/src/app/domain/directives/scroll-spy-item.directive.ts
📚 Learning: 2025-11-15T21:22:05.244Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 328
File: libs/zard/src/lib/components/select/demo/multi-select.ts:1-1
Timestamp: 2025-11-15T21:22:05.244Z
Learning: In Angular components that use model() for inputs (like zValue in ZardSelectComponent), two-way binding with WritableSignals is fully supported. The pattern [(zValue)]="selectedValues" where selectedValues = signal<string[]>([]) works correctly because model() automatically handles unwrapping and updating the signal.
Applied to files:
apps/web/src/app/shared/components/code-highlight/code-highlight.component.ts
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/block.ts : Each block must follow a standardized directory structure with required files: block.ts (metadata), [block-name].component.ts (Angular component), and [block-name].component.html (template)
Applied to files:
libs/blocks/tsconfig.json
📚 Learning: 2025-12-21T00:11:44.620Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: README.md:0-0
Timestamp: 2025-12-21T00:11:44.620Z
Learning: Use Angular, TailwindCSS, and TypeScript as the primary technology stack for component development
Applied to files:
apps/web/src/app/app.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts
📚 Learning: 2025-11-13T18:05:35.468Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 324
File: libs/zard/src/lib/components/breadcrumb/breadcrumb.component.ts:34-60
Timestamp: 2025-11-13T18:05:35.468Z
Learning: In breadcrumb item components using RouterLink hostDirectives for host navigation, inject the RouterLink directive and use its `href` property for anchor elements to display URLs on hover, avoiding naming collisions between hostDirective inputs and component inputs.
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/directives/scroll-spy-item.directive.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.html
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx} : Components should be designed specifically for the Angular ecosystem and follow Angular conventions
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/*/doc/*.md : Write component documentation with overview.md for use cases and basic examples, and api.md for complete API reference
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/doc/**/*.md : Write component documentation in `doc/overview.md` and `doc/api.md` files
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-04T10:18:55.477Z
Learnt from: mihajm
Repo: zard-ui/zardui PR: 308
File: libs/zard/src/lib/components/button-group/doc/overview.md:1-3
Timestamp: 2025-11-04T10:18:55.477Z
Learning: In zardui repo, doc/overview.md files for components should contain only a brief overview description. Examples are provided through separate demo files and the api.md documentation, not in overview.md.
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding for dynamic classes in components: `host: { '[class]': 'classes()' }`
Applied to files:
apps/web/src/app/domain/directives/scroll-spy-item.directive.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block components should use Angular signals for state management (e.g., signal() for loading states) and ReactiveFormsModule for form handling with Validators
Applied to files:
apps/web/src/app/domain/pages/component/component.page.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-12-04T15:03:56.958Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 361
File: libs/zard/src/lib/components/pagination/demo/custom.ts:19-22
Timestamp: 2025-12-04T15:03:56.958Z
Learning: In pagination demos under libs/zard/src/lib/components/pagination/demo/*.ts, the pattern `<span class="sr-only">To page</span>{{ page }}` is correct for accessible button labels. Screen readers read both the sr-only text and the visible page number together, while visual users see only the page number. This approach is intentional and should not be flagged.
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/demo/**/*.ts : Create demo components in the `demo/` folder with a main export, default example, and variant examples
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/*/demo/*.ts : Create demo examples in the demo/ folder with structured exports containing name, code, and component properties
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-26T10:13:44.258Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Applied to files:
apps/web/src/main.server.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding with computed classes for dynamic class application
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-29T15:31:22.377Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 339
File: libs/zard/src/lib/components/carousel/carousel.component.ts:92-92
Timestamp: 2025-11-29T15:31:22.377Z
Learning: In libs/zard/src/lib/components/**/*.component.ts files using TailwindCSS, avoid suggesting individual class bindings like `[class.fill-primary]="condition"` because they can cause TailwindCSS issues. Prefer string concatenation or `[class]` binding with conditional expressions instead.
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.html
📚 Learning: 2025-11-04T20:46:01.373Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 309
File: libs/zard/src/lib/components/select/demo/multi-select.ts:23-27
Timestamp: 2025-11-04T20:46:01.373Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, console.log statements are acceptable and often intentional to demonstrate reactivity and help users understand how the component works.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-12-08T17:34:37.975Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 367
File: libs/zard/src/lib/components/progress-bar/demo/shape.ts:9-11
Timestamp: 2025-12-08T17:34:37.975Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally mixing different variants (e.g., zType and zShape in a shape demo) is acceptable when done to showcase additional features that might not be demonstrated elsewhere.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Block template files must use ZardUI form components (ZardFormFieldComponent, ZardFormLabelComponent, ZardFormControlComponent) for form validation and error handling
Applied to files:
libs/zard/src/lib/shared/components/tabs/tabs.component.ts
🧬 Code graph analysis (7)
apps/web/src/app/shared/components/code-highlight/code-highlight.component.ts (1)
apps/web/src/app/shared/components/simple-code-highlight/simple-code-highlight.component.ts (1)
Component(6-76)
apps/web/src/app/app.component.ts (1)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
HeaderOffset(5-5)
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (1)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
HeaderOffset(5-5)
apps/web/src/app/domain/directives/scroll-spy-item.directive.ts (1)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
Directive(7-52)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (2)
apps/web/src/app/domain/directives/scroll-spy-item.directive.ts (1)
Directive(3-10)libs/zard/src/lib/shared/components/tooltip/tooltip.ts (1)
Directive(57-231)
apps/web/src/main.server.ts (1)
apps/web/src/app/app.config.server.ts (1)
config(10-10)
apps/web/src/app/core/layouts/documentation/documentation.layout.ts (3)
apps/web/src/environments/environment.local.ts (1)
environment(1-9)apps/web/src/environments/environment.production.ts (1)
environment(1-9)apps/web/src/environments/environment.ts (1)
environment(1-9)
🪛 LanguageTool
libs/zard/src/lib/shared/components/tabs/doc/overview.md
[grammar] ~5-~5: Use a hyphen to join words.
Context: ...ime. > If you are looking for shadcn/ui like tabs component, please check [segme...
(QB_NEW_EN_HYPHEN)
apps/web/src/app/domain/components/doc-content/doc-content.component.html
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 10
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
libs/zard/src/lib/shared/components/table/table.variants.ts (1)
48-54: Invalid CSS selector syntax with double brackets.Same issue as line 41: the selector
*:[[role=checkbox]]uses invalid double-bracket notation and will not target checkbox elements.🔎 Proposed fix
export const tableCellVariants = cva( - 'p-2 align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5', + 'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&_[role=checkbox]]:translate-y-0.5', { variants: {}, defaultVariants: {}, }, );apps/web/src/app/domain/pages/about/about.page.ts (1)
1-1: Consider removing CommonModule import.With Angular 21's built-in control flow (@if, @for, @let) and the async pipe being natively available, CommonModule is likely redundant here. The new template syntax in the HTML file doesn't require CommonModule.
🔎 Verify CommonModule necessity
Run this script to check if any CommonModule-specific directives/pipes are used beyond the async pipe:
#!/bin/bash # Check for CommonModule-specific directives in the template rg -n "ngIf|ngFor|ngSwitch|ngClass|ngStyle|ngTemplateOutlet|DatePipe|CurrencyPipe|DecimalPipe|PercentPipe|JsonPipe|SlicePipe|LowerCasePipe|UpperCasePipe|TitleCasePipe|KeyValuePipe" apps/web/src/app/domain/pages/about/about.page.htmlIf only the async pipe is used (which is built-in), remove CommonModule from both imports array and the import statement.
Also applies to: 27-27
♻️ Duplicate comments (3)
libs/zard/src/lib/shared/components/tabs/tabs.component.ts (1)
53-53: Imports array correctly updated.The
importsarray properly specifiesNgTemplateOutlet,ZardButtonComponent, andZardIconComponent, aligning with the migration away fromCommonModuleand ensuring explicit, tree-shakeable dependencies.libs/zard/src/lib/shared/components/tabs/doc/overview.md (1)
5-5: Grammar fix needed: compound adjective hyphenation.The phrase "shadcn/ui like tabs component" should be "shadcn/ui-like tabs component" for correct English grammar when forming a compound adjective.
🔎 Proposed fix
-> If you are looking for shadcn/ui like tabs component, please check [segmented](docs/components/segmented) component. +> If you are looking for shadcn/ui-like tabs component, please check [segmented](docs/components/segmented) component.apps/web/src/app/domain/pages/about/about.page.html (1)
42-42: Typo fix applied correctly.The correction from "mantainers" to "maintainers" in both
scrollSpyItemandidattributes resolves the navigation issue flagged in the previous review.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (16)
apps/web/public/components/icon/demo/searchable.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/components/tabs/doc/overview.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/table.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/accordion.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/breadcrumb.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/carousel.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/command.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/form.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/layout.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/pagination.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/registry.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/resizable.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/select.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/sheet.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/table.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/tabs.jsonis excluded by!apps/web/public/**and included byapps/**
📒 Files selected for processing (14)
apps/web/src/app/app.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/app/domain/pages/about/about.page.htmlapps/web/src/app/domain/pages/about/about.page.tsapps/web/src/main.server.tsapps/web/src/server.tsapps/web/src/styles.csslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/tabs/tabs.component.ts
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use path aliases @zard/* to map to libs/zard/src/lib/* in imports
Files:
apps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/main.server.tsapps/web/src/app/domain/pages/about/about.page.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/server.tsapps/web/src/app/app.component.ts
libs/zard/**/*.{css,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Use CSS custom properties for design tokens and theming in the component library
Files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
🧠 Learnings (51)
📓 Common learnings
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Follow PR checklist including: passing tests, code pattern compliance, updated documentation, working demos, no lint/typecheck warnings, linked issues, conventional commit in title
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: README.md:0-0
Timestamp: 2025-12-21T00:11:44.620Z
Learning: Use Angular, TailwindCSS, and TypeScript as the primary technology stack for component development
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block components should use Angular signals for state management (e.g., signal() for loading states) and ReactiveFormsModule for form handling with Validators
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Implement TailwindCSS v4 with PostCSS for styling and use class merging with tailwind-merge to resolve conflicts
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use TailwindCSS utility classes for styling, following responsive design patterns with prefixes for breakpoints (sm:, lg:) and ensure accessibility with semantic HTML and ARIA guidelines
Applied to files:
apps/web/src/app/domain/pages/about/about.page.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-11-30T13:27:41.206Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/popover/popover.component.ts:28-29
Timestamp: 2025-11-30T13:27:41.206Z
Learning: In libs/zard/src/lib/components/core/**/*.ts files (core utilities, plugins, and providers), use relative imports for intra-core dependencies because the ZardUI CLI performs path transformations during component installation. The CLI expects specific relative path patterns and transforms them to the target project structure. For all other component imports and application code, use zard/* path aliases.
Applied to files:
apps/web/src/app/domain/pages/about/about.page.htmllibs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-14T22:52:09.135Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Refer to `docs/angular-llm.txt` for Angular best practices when developing components
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/server.tsapps/web/src/app/app.component.ts
📚 Learning: 2025-12-21T21:17:39.497Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 383
File: libs/zard/src/lib/shared/components/carousel/carousel.component.ts:114-115
Timestamp: 2025-12-21T21:17:39.497Z
Learning: In Angular components using signal inputs (input()) with types from external libraries like Embla Carousel, explicit type annotations (e.g., `readonly zOptions: InputSignal<EmblaOptionsType> = input<EmblaOptionsType>(...)`) may be necessary to prevent TypeScript IDE errors about inferred types referencing non-portable node_modules paths. This is not redundant when the annotation prevents the "cannot be named without a reference to node_modules" error.
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-11-19T20:03:29.205Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 320
File: libs/zard/src/lib/components/tooltip/tooltip.ts:82-105
Timestamp: 2025-11-19T20:03:29.205Z
Learning: In the zard-ui/zardui repository, non-null assertion operator (!) is forbidden by ESLint rule "Forbidden non-null assertion". Use type assertions (e.g., `(value as Type)`) instead when narrowing types after null/undefined checks.
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-11-29T15:31:22.377Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 339
File: libs/zard/src/lib/components/carousel/carousel.component.ts:92-92
Timestamp: 2025-11-29T15:31:22.377Z
Learning: In libs/zard/src/lib/components/**/*.component.ts files using TailwindCSS, avoid suggesting individual class bindings like `[class.fill-primary]="condition"` because they can cause TailwindCSS issues. Prefer string concatenation or `[class]` binding with conditional expressions instead.
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs with `input()` in Angular components
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/server.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/server.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding for dynamic classes in components: `host: { '[class]': 'classes()' }`
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding with computed classes for dynamic class application
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Ensure components are standalone Angular components
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/app.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for typed variants in component styling
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-11-30T19:07:11.572Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/app.component.ts
📚 Learning: 2025-11-13T18:05:35.468Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 324
File: libs/zard/src/lib/components/breadcrumb/breadcrumb.component.ts:34-60
Timestamp: 2025-11-13T18:05:35.468Z
Learning: In breadcrumb item components using RouterLink hostDirectives for host navigation, inject the RouterLink directive and use its `href` property for anchor elements to display URLs on hover, avoiding naming collisions between hostDirective inputs and component inputs.
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts
📚 Learning: 2025-12-04T15:03:56.958Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 361
File: libs/zard/src/lib/components/pagination/demo/custom.ts:19-22
Timestamp: 2025-12-04T15:03:56.958Z
Learning: In pagination demos under libs/zard/src/lib/components/pagination/demo/*.ts, the pattern `<span class="sr-only">To page</span>{{ page }}` is correct for accessible button labels. Screen readers read both the sr-only text and the visible page number together, while visual users see only the page number. This approach is intentional and should not be flagged.
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/*/doc/*.md : Write component documentation with overview.md for use cases and basic examples, and api.md for complete API reference
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/doc/**/*.md : Write component documentation in `doc/overview.md` and `doc/api.md` files
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-11-04T10:18:55.477Z
Learnt from: mihajm
Repo: zard-ui/zardui PR: 308
File: libs/zard/src/lib/components/button-group/doc/overview.md:1-3
Timestamp: 2025-11-04T10:18:55.477Z
Learning: In zardui repo, doc/overview.md files for components should contain only a brief overview description. Examples are provided through separate demo files and the api.md documentation, not in overview.md.
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add barrel exports for all new components in libs/zard/src/lib/components/components.ts
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-30T08:50:23.436Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/core/providezard.ts:0-0
Timestamp: 2025-11-30T08:50:23.436Z
Learning: In libs/zard/src/lib/components/core/providezard.ts, the import paths `../core/event-manager-plugins/...` are intentionally structured this way because the ZardUI CLI transforms them to 'shared/components/core/event-manager-plugins/...' format. Other relative path combinations don't work with the current CLI implementation. This path pattern should not be simplified until the CLI transformation logic is updated.
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdapps/web/src/main.server.tsapps/web/src/server.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/main.server.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/server.tsapps/web/src/app/app.component.ts
📚 Learning: 2025-10-31T10:03:18.563Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/main.server.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/app.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/main.server.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/server.tsapps/web/src/app/app.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-13T11:50:50.088Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:50.088Z
Learning: Do not flag or require removing standalone: true for test components (*.spec.ts) and demo components (demo/*.ts) within libs/zard/src/lib/shared/components/**.ts. In these contexts, an explicit standalone: true flag is acceptable; apply this exclusion when reviewing files under this path.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-10T21:46:33.213Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 318
File: libs/zard/src/lib/components/select/demo/default.ts:21-21
Timestamp: 2025-11-10T21:46:33.213Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally showing different patterns (e.g., primitive values vs signals) across different demos is valuable for demonstrating the flexibility of Angular features like two-way binding.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/server.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/demo/**/*.ts : Create demo components in the `demo/` folder with a main export, default example, and variant examples
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block components should use Angular signals for state management (e.g., signal() for loading states) and ReactiveFormsModule for form handling with Validators
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use computed properties in Angular components for reactive class calculations: `protected readonly classes = computed(() => ...)`
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block component files must use the .component.ts extension and should be standalone Angular components with explicit imports from ReactiveFormsModule and ZardUI components
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/*/demo/*.ts : Create demo examples in the demo/ folder with structured exports containing name, code, and component properties
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-11-15T21:22:05.244Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 328
File: libs/zard/src/lib/components/select/demo/multi-select.ts:1-1
Timestamp: 2025-11-15T21:22:05.244Z
Learning: In Angular components that use model() for inputs (like zValue in ZardSelectComponent), two-way binding with WritableSignals is fully supported. The pattern [(zValue)]="selectedValues" where selectedValues = signal<string[]>([]) works correctly because model() automatically handles unwrapping and updating the signal.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-11-04T20:46:01.373Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 309
File: libs/zard/src/lib/components/select/demo/multi-select.ts:23-27
Timestamp: 2025-11-04T20:46:01.373Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, console.log statements are acceptable and often intentional to demonstrate reactivity and help users understand how the component works.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-12-21T21:17:39.497Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 383
File: libs/zard/src/lib/shared/components/carousel/carousel.component.ts:114-115
Timestamp: 2025-12-21T21:17:39.497Z
Learning: In Angular components that use signal inputs (Input()) with types from external libraries (e.g., Embla Carousel), add explicit type annotations to prevent TypeScript IDE errors about inferred types referencing non-portable node_modules paths. For example, declare a readonly typed input like: readonly zOptions: InputSignal<EmblaOptionsType> = input<EmblaOptionsType>(...). This explicit annotation helps avoid the error cannot be named without a reference to node_modules. Apply this pattern to components in the shared carousel area (and similar components) whenever an external library type is used in an InputSignal to ensure type safety and IDE compatibility.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-15T11:43:06.831Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 373
File: libs/zard/src/lib/shared/components/select/select.component.ts:33-33
Timestamp: 2025-12-15T11:43:06.831Z
Learning: In files under libs/zard/src/lib/**/*.{ts,tsx,js}, prefer the @/ path alias for imports that map to libs/zard/src/lib/* directories. For example, write import { mergeClasses } from '@/shared/utils/merge-classes' instead of using the 'zard/' alias. This improves path readability and aligns with the project's alias configuration.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-26T10:13:44.258Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Applied to files:
apps/web/src/main.server.ts
📚 Learning: 2025-12-13T11:50:56.310Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:56.310Z
Learning: Do not flag or suggest removing `standalone: true` from test components (*.spec.ts files) or demo components (demo/*.ts files) in libs/zard/src/lib/shared/components/**/*.ts, as it is not a significant concern and the explicit flag is acceptable in these contexts.
Applied to files:
apps/web/src/main.server.tsapps/web/src/server.ts
📚 Learning: 2025-12-21T00:11:44.620Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: README.md:0-0
Timestamp: 2025-12-21T00:11:44.620Z
Learning: Use Angular, TailwindCSS, and TypeScript as the primary technology stack for component development
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx} : Components should be designed specifically for the Angular ecosystem and follow Angular conventions
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for type-safe styling variants in components
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use mergeClasses utility from zard/shared/utils for combining CVA variants with custom classes
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/**/*.{css,ts} : Use CSS custom properties for design tokens and theming in the component library
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/styles.css
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Implement TailwindCSS v4 with PostCSS for styling and use class merging with tailwind-merge to resolve conflicts
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/server.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses()` utility with `clsx` and `tailwind-merge` to resolve class conflicts in component styling
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Block template files must use ZardUI form components (ZardFormFieldComponent, ZardFormLabelComponent, ZardFormControlComponent) for form validation and error handling
Applied to files:
libs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/src/styles.css : Set up `src/styles.css` with Tailwind CSS configuration and design tokens using CSS `theme` and `plugin` directives
Applied to files:
apps/web/src/styles.css
📚 Learning: 2025-12-25T11:10:09.078Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 384
File: apps/web/src/styles.css:213-213
Timestamp: 2025-12-25T11:10:09.078Z
Learning: In Tailwind CSS v4, max-width utilities support dynamic numeric values derived from the spacing scale (using the --spacing variable, default 0.25rem = 4px). Prefer using numeric classes like max-w-350 when the value aligns with the spacing scale, since 350 × 0.25rem = 87.5rem = 1400px. Avoid arbitrary values expressed with brackets (e.g., max-w-[1400px]) when a scale-based value is available and accurate. Apply this guidance to CSS files in the web app (e.g., apps/web/src/styles.css) and across the codebase where Tailwind is used.
Applied to files:
apps/web/src/styles.css
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Follow PR checklist including: passing tests, code pattern compliance, updated documentation, working demos, no lint/typecheck warnings, linked issues, conventional commit in title
Applied to files:
apps/web/src/server.ts
🧬 Code graph analysis (5)
apps/web/src/app/domain/components/doc-content/doc-content.component.ts (1)
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (1)
NavigationConfig(14-16)
apps/web/src/main.server.ts (1)
apps/web/src/app/app.config.server.ts (1)
config(10-10)
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (1)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
getHeaderOffset(7-23)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
apps/web/src/app/domain/directives/scroll-spy-item.directive.ts (1)
Directive(3-10)
apps/web/src/app/app.component.ts (1)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
getHeaderOffset(7-23)
🔇 Additional comments (38)
apps/web/src/app/domain/components/doc-content/doc-content.component.ts (1)
1-1: Excellent signal-based migration!The conversion from
@Input()decorators toinput()signals is clean and follows Angular 21 best practices. The removal ofOnInitandViewportScrollersimplifies the component by eliminating unnecessary lifecycle hooks.Notably, line 12 properly addresses the previous review concern by typing
activeAnchorasinput<string | undefined>(), which accurately reflects the runtime behavior where the input can be undefined. This resolves the strict TypeScript compliance issue.Based on learnings, signal-based inputs with
input()are the preferred pattern for Angular components.Also applies to: 10-13
apps/web/src/app/domain/components/doc-content/doc-content.component.html (2)
3-5: Clean formatting.Splitting the div tag across multiple lines improves readability without changing functionality.
10-16: Proper null-safety cleanup!Removing the non-null assertion (
!) fromnavigationConfig()on line 12 is correct, as the component class provides a default value{ items: [] }.Removing the empty string fallback (
|| '') fromactiveAnchor()on line 13 is now safe because the component properly typesactiveAnchorasinput<string | undefined>(), and thez-dynamic-anchorcomponent correctly handlesundefinedvalues with strict equality checks (as noted in the previous review).These changes resolve the previous type-safety concerns and align the template with the corrected TypeScript types.
Based on learnings, the non-null assertion operator (
!) should be avoided per ESLint rules in this repository.libs/zard/src/lib/shared/components/tabs/tabs.component.ts (6)
1-1: Excellent import optimization!Replacing
CommonModulewith the specificNgTemplateOutletimport follows Angular best practices for tree-shaking and bundle optimization. This precise import strategy is exactly what modern Angular encourages.
43-43: LGTM – OnPush applied correctly!Adding
ChangeDetectionStrategy.OnPushtoZardTabComponentaligns perfectly with the component library's performance standards and leverages signal-based reactivity.Based on learnings, OnPush change detection is a required pattern for components in this library.
85-85: Excellent addition oftype="button"attributes!Adding explicit
type="button"to all interactive button elements prevents unintended form submission behavior and follows HTML best practices. This ensures buttons behave correctly in all contexts.Also applies to: 94-94, 112-112, 131-131, 140-140
105-105: Modern [class] binding with signals – well done!Migrating from
[ngClass]to[class]bindings with computed signal values (navClasses(),buttonClassesSignal()[index]) follows Angular's modern reactive patterns and improves performance. This is exactly the right approach for signal-based components.Also applies to: 121-121
228-230: Improved SSR guard with explicit early return.Expanding the SSR/browser compatibility check into an explicit block with early return makes the guard more readable and clearly prevents browser-only code (ResizeObserver) from executing in SSR contexts. This defensive pattern enhances universal app compatibility.
235-237: Defensive unobserve pattern – excellent!Wrapping
resizeObserver.unobserve(observedEl)in a null check prevents potential runtime errors when the tab navigation reference changes. This defensive pattern ensures robust behavior during element lifecycle transitions.apps/web/src/app/app.component.ts (3)
1-8: LGTM: Modern Angular 21 imports.Excellent use of inject(), takeUntilDestroyed, and platform-aware utilities. Path alias usage is appropriate for the web app domain.
12-19: LGTM: Component follows Angular 21 best practices.Proper use of OnPush change detection, standalone component pattern, and minimal template. Based on learnings, OnPush is required for performance optimization.
20-25: LGTM: Exemplary use of inject() pattern.Perfect migration to function-based dependency injection. All dependencies are properly encapsulated and typed.
apps/web/src/app/domain/pages/about/about.page.ts (4)
47-53: LGTM!The multiline formatting of the SEO service call improves readability.
85-85: Excellent typo fix!Correcting "mantainers" to "maintainers" aligns with the template update and ensures proper anchor navigation.
98-99: LGTM!The multiline formatting of description strings improves readability and maintainability.
Also applies to: 103-104, 108-109, 117-118, 122-123
127-130: LGTM!The multiline formatting with trailing comma follows modern TypeScript conventions.
apps/web/src/app/domain/pages/about/about.page.html (8)
1-6: LGTM!The refactored z-content attributes with separated event binding and the standalone
scrollSpyattribute follow Angular 21's cleaner binding syntax. The multiline formatting improves readability.
12-12: LGTM!Self-closing tag syntax is consistent with modern Angular best practices.
17-21: LGTM!The paragraph text formatting is clear and maintains readability.
29-31: LGTM!The multiline paragraph formatting improves code readability.
Also applies to: 45-47, 62-64, 79-81
34-39: Excellent use of Angular 21 control flow!The @let/@if syntax with self-closing components is the recommended approach in Angular 21, replacing the older *ngIf with async pipe pattern. This improves template readability and performance.
50-55: LGTM!Consistent use of @let/@if control flow with self-closing components for the maintainers section.
67-72: LGTM!Consistent use of @let/@if control flow with self-closing components for the contributors section.
86-86: LGTM!Self-closing tag syntax is consistent with modern Angular best practices.
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (3)
1-5: Clean Angular 21 imports and signal-based patterns.Solid migration to
inject(),DOCUMENT, andPLATFORM_IDtokens for SSR-safe DOM access. ThegetHeaderOffsetimport from the scroll-spy directive enables consistent header-offset-aware scrolling across the app.
41-50: Header-offset-aware scrolling looks correct.The scroll calculation properly accounts for the header offset and clamps to a minimum position. Using
this.document.getElementByIdinstead of globaldocumentis the right approach for SSR compatibility.
23-31: Proper signal-based inputs and dependency injection.Using
inject()for all dependencies and signal-basedinput()for component inputs aligns with Angular best practices. TheisBrowserflag computed once at construction is efficient. The unidirectionalinput()pattern is appropriate here—no consumers use two-way binding; all use property binding with the output event, making this a clean separation of concerns.Likely an incorrect or invalid review comment.
apps/web/src/app/domain/directives/scroll-spy.directive.ts (3)
27-29: Good use ofhost: {}for event binding.Using the
hostproperty instead of@HostListenerdecorator aligns with Angular 21 best practices and project conventions. Based on learnings, this is the preferred pattern.
35-37: Signal-basedoutput()andinput()usage is correct.Clean migration to Angular 21 signal-based APIs. The
headerOffsetinput allows consumers to override the computed header height when needed.
66-77: Section detection and emission logic is correct.The iteration over
items()signal query and conditional emission only whencurrentSectionchanges is well-implemented. This avoids unnecessary emissions and follows signal-based patterns correctly.apps/web/src/server.ts (1)
227-227: LGTM! Correct Express 5 catch-all pattern.The
'/*splat'pattern is the proper named catch-all syntax for Express 5.x + path-to-regexp. The older'**'(glob-style) and unnamed'*'patterns are no longer supported—Express 5 requires an explicit parameter name for wildcards. This correctly handles SSR for all GET requests while maintaining the dedicated routes for sitemap.xml and llms.txt.libs/zard/src/lib/shared/components/icon/demo/searchable.ts (5)
1-1: Excellent OnPush migration!The ChangeDetectionStrategy import has been added to support OnPush change detection. This addresses the previous review feedback and aligns perfectly with the signal-based reactivity pattern used throughout the component.
13-13: LGTM: CommonModule correctly removed.With Angular 21's native control flow syntax (@if, @for), CommonModule is no longer required. The template correctly uses the new syntax.
52-52: Good practice: explicit button type.Adding
type="button"prevents the button from accidentally submitting forms and clearly indicates its purpose.
56-56: Improved Tailwind usage with spacing scale.Using
min-h-17.5(4.375rem) instead of an arbitrary value is more idiomatic and consistent with Tailwind's spacing scale.
74-74: Perfect OnPush implementation!The addition of
ChangeDetectionStrategy.OnPushis exactly what was requested in the previous review. The component's signal-based reactivity (signal()andcomputed()) works perfectly with OnPush, ensuring optimal rendering performance.Based on learnings, OnPush is a best practice for components in this project.
apps/web/src/styles.css (2)
57-59: Circular reference fixed correctly.The circular CSS variable dependency from the previous version has been resolved. Concrete theme values are now assigned to
--shiki--lightand--shiki--dark, and--shiki-themecorrectly references them.
103-103: Dark mode theme switching implemented correctly.The override of
--shiki-themeto usevar(--shiki--dark)in the.darkcontext follows the correct pattern for CSS-based theme switching.
mikij
force-pushed
the
update-project-angular21
branch
from
f3b4096 to
5e62410
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
libs/zard/src/lib/shared/components/table/table.variants.ts (1)
48-54: Invalid CSS selector syntax with double brackets.The selector
*:[[role=checkbox]]uses non-standard double-bracket notation. CSS attribute selectors require single brackets:[role=checkbox]. This will cause the checkbox translation styles to fail.🔎 Proposed fix
Use valid Tailwind arbitrary variant syntax:
export const tableCellVariants = cva( - 'p-2 align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5', + 'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&_[role=checkbox]]:translate-y-0.5', { variants: {}, defaultVariants: {}, }, );Alternatives depending on intended scope:
[&_[role=checkbox]]— any descendant with role=checkbox[&>*[role=checkbox]]— direct children with role=checkbox[&_*[role=checkbox]]— any descendant element with role=checkboxapps/web/src/app/domain/components/doc-content/doc-content.component.ts (1)
5-13: AddChangeDetectionStrategy.OnPushfor performance optimization.This component uses signal-based inputs correctly, but it's missing OnPush change detection which is required per project guidelines.
🔎 Proposed fix
-import { Component, input } from '@angular/core'; +import { ChangeDetectionStrategy, Component, input } from '@angular/core'; import { DynamicAnchorComponent, NavigationConfig } from '../dynamic-anchor/dynamic-anchor.component'; @Component({ selector: 'z-content', imports: [DynamicAnchorComponent], templateUrl: './doc-content.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, })Based on learnings: Use
ChangeDetectionStrategy.OnPushfor performance optimization in components.apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (1)
18-22: AddChangeDetectionStrategy.OnPushfor consistency.This component uses signal-based inputs but is missing OnPush change detection.
🔎 Proposed fix
-import { Component, DOCUMENT, inject, input, PLATFORM_ID } from '@angular/core'; +import { ChangeDetectionStrategy, Component, DOCUMENT, inject, input, PLATFORM_ID } from '@angular/core'; ... @Component({ selector: 'z-dynamic-anchor', imports: [TitleCasePipe, HyphenToSpacePipe], templateUrl: './dynamic-anchor.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, })Based on learnings: Use
ChangeDetectionStrategy.OnPushfor performance optimization in components.apps/web/src/app/domain/pages/about/about.page.ts (1)
71-80: Typo: "Mantainer" should be "Maintainer" in role strings.The
rolevalues contain a spelling error that would be visible to users.🔎 Proposed fix
private readonly maintainerMappings = { ribeiromatheuss: { name: 'Matheus Ribeiro', - role: 'Mantainer', + role: 'Maintainer', }, mikij: { name: 'Mickey Lazarevic', - role: 'Mantainer', + role: 'Maintainer', }, };
♻️ Duplicate comments (2)
libs/zard/src/lib/shared/components/table/table.variants.ts (1)
40-46: Invalid CSS selector syntax with double brackets.The selector
*:[[role=checkbox]]uses non-standard double-bracket notation that is not valid CSS. This will prevent the checkbox translation styles from applying correctly.The correct Tailwind arbitrary variant syntax should use single brackets. See the previous review comment for the recommended fix: replace with
[&_[role=checkbox]]:translate-y-0.5to target any descendant checkbox element.libs/zard/src/lib/shared/components/icon/demo/searchable.ts (1)
61-61: Fix: Replace invalid Tailwind utilitywrap-break-wordswithbreak-words.The class
wrap-break-wordsis not a valid Tailwind utility. This was flagged in a previous review but the fix wasn't applied. Use the standard Tailwind utilitybreak-wordsinstead.🔎 Proposed fix
<span - class="group-hover:text-foreground wrap-break-words w-full text-center text-xs leading-relaxed hyphens-auto transition-colors" + class="group-hover:text-foreground break-words w-full text-center text-xs leading-relaxed hyphens-auto transition-colors" >
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (17)
apps/web/public/components/icon/demo/searchable.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/components/tabs/doc/overview.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/table.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/tabs.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/accordion.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/breadcrumb.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/carousel.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/command.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/form.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/layout.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/pagination.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/registry.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/resizable.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/select.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/sheet.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/table.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/tabs.jsonis excluded by!apps/web/public/**and included byapps/**
📒 Files selected for processing (13)
apps/web/src/app/app.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/app/domain/pages/about/about.page.htmlapps/web/src/app/domain/pages/about/about.page.tsapps/web/src/server.tsapps/web/src/styles.csslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/tabs/tabs.component.ts
🧰 Additional context used
📓 Path-based instructions (2)
libs/zard/**/*.{css,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Use CSS custom properties for design tokens and theming in the component library
Files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/table/table.variants.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use path aliases @zard/* to map to libs/zard/src/lib/* in imports
Files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/server.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tslibs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/pages/about/about.page.ts
🧠 Learnings (53)
📓 Common learnings
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Follow PR checklist including: passing tests, code pattern compliance, updated documentation, working demos, no lint/typecheck warnings, linked issues, conventional commit in title
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs with `input()` in Angular components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: README.md:0-0
Timestamp: 2025-12-21T00:11:44.620Z
Learning: Use Angular, TailwindCSS, and TypeScript as the primary technology stack for component development
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block components should use Angular signals for state management (e.g., signal() for loading states) and ReactiveFormsModule for form handling with Validators
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Learnt from: mikij
Repo: zard-ui/zardui PR: 383
File: libs/zard/src/lib/shared/components/carousel/carousel.component.ts:114-115
Timestamp: 2025-12-21T21:17:39.497Z
Learning: In Angular components using signal inputs (input()) with types from external libraries like Embla Carousel, explicit type annotations (e.g., `readonly zOptions: InputSignal<EmblaOptionsType> = input<EmblaOptionsType>(...)`) may be necessary to prevent TypeScript IDE errors about inferred types referencing non-portable node_modules paths. This is not redundant when the annotation prevents the "cannot be named without a reference to node_modules" error.
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/*/doc/*.md : Write component documentation with overview.md for use cases and basic examples, and api.md for complete API reference
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/doc/**/*.md : Write component documentation in `doc/overview.md` and `doc/api.md` files
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-11-04T10:18:55.477Z
Learnt from: mihajm
Repo: zard-ui/zardui PR: 308
File: libs/zard/src/lib/components/button-group/doc/overview.md:1-3
Timestamp: 2025-11-04T10:18:55.477Z
Learning: In zardui repo, doc/overview.md files for components should contain only a brief overview description. Examples are provided through separate demo files and the api.md documentation, not in overview.md.
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add barrel exports for all new components in libs/zard/src/lib/components/components.ts
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-29T15:31:22.377Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 339
File: libs/zard/src/lib/components/carousel/carousel.component.ts:92-92
Timestamp: 2025-11-29T15:31:22.377Z
Learning: In libs/zard/src/lib/components/**/*.component.ts files using TailwindCSS, avoid suggesting individual class bindings like `[class.fill-primary]="condition"` because they can cause TailwindCSS issues. Prefer string concatenation or `[class]` binding with conditional expressions instead.
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Keep commit messages in present tense, single line format with scope and description (e.g., '✨ feat(popover): add popover component')
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use TailwindCSS utility classes for styling, following responsive design patterns with prefixes for breakpoints (sm:, lg:) and ensure accessibility with semantic HTML and ARIA guidelines
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/server.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/app.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/server.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Ensure components are standalone Angular components
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/app.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-11-14T22:52:09.135Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tslibs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.ts
📚 Learning: 2025-11-10T21:46:33.213Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 318
File: libs/zard/src/lib/components/select/demo/default.ts:21-21
Timestamp: 2025-11-10T21:46:33.213Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally showing different patterns (e.g., primitive values vs signals) across different demos is valuable for demonstrating the flexibility of Angular features like two-way binding.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/server.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/server.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/demo/**/*.ts : Create demo components in the `demo/` folder with a main export, default example, and variant examples
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-12-13T11:50:50.088Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:50.088Z
Learning: Do not flag or require removing standalone: true for test components (*.spec.ts) and demo components (demo/*.ts) within libs/zard/src/lib/shared/components/**.ts. In these contexts, an explicit standalone: true flag is acceptable; apply this exclusion when reviewing files under this path.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use computed properties in Angular components for reactive class calculations: `protected readonly classes = computed(() => ...)`
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs with `input()` in Angular components
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/server.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block components should use Angular signals for state management (e.g., signal() for loading states) and ReactiveFormsModule for form handling with Validators
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-10-31T10:03:18.563Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/app.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Implement TailwindCSS v4 with PostCSS for styling and use class merging with tailwind-merge to resolve conflicts
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/server.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses()` utility with `clsx` and `tailwind-merge` to resolve class conflicts in component styling
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Refer to `docs/angular-llm.txt` for Angular best practices when developing components
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/server.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/app.component.ts
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block component files must use the .component.ts extension and should be standalone Angular components with explicit imports from ReactiveFormsModule and ZardUI components
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/*/demo/*.ts : Create demo examples in the demo/ folder with structured exports containing name, code, and component properties
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-11-15T21:22:05.244Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 328
File: libs/zard/src/lib/components/select/demo/multi-select.ts:1-1
Timestamp: 2025-11-15T21:22:05.244Z
Learning: In Angular components that use model() for inputs (like zValue in ZardSelectComponent), two-way binding with WritableSignals is fully supported. The pattern [(zValue)]="selectedValues" where selectedValues = signal<string[]>([]) works correctly because model() automatically handles unwrapping and updating the signal.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-11-04T20:46:01.373Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 309
File: libs/zard/src/lib/components/select/demo/multi-select.ts:23-27
Timestamp: 2025-11-04T20:46:01.373Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, console.log statements are acceptable and often intentional to demonstrate reactivity and help users understand how the component works.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-12-21T21:17:39.497Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 383
File: libs/zard/src/lib/shared/components/carousel/carousel.component.ts:114-115
Timestamp: 2025-12-21T21:17:39.497Z
Learning: In Angular components that use signal inputs (Input()) with types from external libraries (e.g., Embla Carousel), add explicit type annotations to prevent TypeScript IDE errors about inferred types referencing non-portable node_modules paths. For example, declare a readonly typed input like: readonly zOptions: InputSignal<EmblaOptionsType> = input<EmblaOptionsType>(...). This explicit annotation helps avoid the error cannot be named without a reference to node_modules. Apply this pattern to components in the shared carousel area (and similar components) whenever an external library type is used in an InputSignal to ensure type safety and IDE compatibility.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-12-15T11:43:06.831Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 373
File: libs/zard/src/lib/shared/components/select/select.component.ts:33-33
Timestamp: 2025-12-15T11:43:06.831Z
Learning: In files under libs/zard/src/lib/**/*.{ts,tsx,js}, prefer the @/ path alias for imports that map to libs/zard/src/lib/* directories. For example, write import { mergeClasses } from '@/shared/utils/merge-classes' instead of using the 'zard/' alias. This improves path readability and aligns with the project's alias configuration.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/tsconfig.json : Configure TypeScript path mappings in `tsconfig.json` with `@/*` alias pointing to `src/app/*` for clean imports
Applied to files:
apps/web/src/server.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Follow PR checklist including: passing tests, code pattern compliance, updated documentation, working demos, no lint/typecheck warnings, linked issues, conventional commit in title
Applied to files:
apps/web/src/server.ts
📚 Learning: 2025-12-13T11:50:56.310Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:56.310Z
Learning: Do not flag or suggest removing `standalone: true` from test components (*.spec.ts files) or demo components (demo/*.ts files) in libs/zard/src/lib/shared/components/**/*.ts, as it is not a significant concern and the explicit flag is acceptable in these contexts.
Applied to files:
apps/web/src/server.ts
📚 Learning: 2025-11-30T08:50:23.436Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/core/providezard.ts:0-0
Timestamp: 2025-11-30T08:50:23.436Z
Learning: In libs/zard/src/lib/components/core/providezard.ts, the import paths `../core/event-manager-plugins/...` are intentionally structured this way because the ZardUI CLI transforms them to 'shared/components/core/event-manager-plugins/...' format. Other relative path combinations don't work with the current CLI implementation. This path pattern should not be simplified until the CLI transformation logic is updated.
Applied to files:
apps/web/src/server.ts
📚 Learning: 2025-11-30T13:27:41.206Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/popover/popover.component.ts:28-29
Timestamp: 2025-11-30T13:27:41.206Z
Learning: In libs/zard/src/lib/components/core/**/*.ts files (core utilities, plugins, and providers), use relative imports for intra-core dependencies because the ZardUI CLI performs path transformations during component installation. The CLI expects specific relative path patterns and transforms them to the target project structure. For all other component imports and application code, use zard/* path aliases.
Applied to files:
libs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.html
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use mergeClasses utility from zard/shared/utils for combining CVA variants with custom classes
Applied to files:
libs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding with computed classes for dynamic class application
Applied to files:
libs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding for dynamic classes in components: `host: { '[class]': 'classes()' }`
Applied to files:
libs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Block template files must use ZardUI form components (ZardFormFieldComponent, ZardFormLabelComponent, ZardFormControlComponent) for form validation and error handling
Applied to files:
libs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-04T15:03:56.958Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 361
File: libs/zard/src/lib/components/pagination/demo/custom.ts:19-22
Timestamp: 2025-12-04T15:03:56.958Z
Learning: In pagination demos under libs/zard/src/lib/components/pagination/demo/*.ts, the pattern `<span class="sr-only">To page</span>{{ page }}` is correct for accessible button labels. Screen readers read both the sr-only text and the visible page number together, while visual users see only the page number. This approach is intentional and should not be flagged.
Applied to files:
libs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-11-30T19:07:11.572Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Applied to files:
libs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-11-13T18:05:35.468Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 324
File: libs/zard/src/lib/components/breadcrumb/breadcrumb.component.ts:34-60
Timestamp: 2025-11-13T18:05:35.468Z
Learning: In breadcrumb item components using RouterLink hostDirectives for host navigation, inject the RouterLink directive and use its `href` property for anchor elements to display URLs on hover, avoiding naming collisions between hostDirective inputs and component inputs.
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-12-21T00:11:44.620Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: README.md:0-0
Timestamp: 2025-12-21T00:11:44.620Z
Learning: Use Angular, TailwindCSS, and TypeScript as the primary technology stack for component development
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx} : Components should be designed specifically for the Angular ecosystem and follow Angular conventions
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for typed variants in component styling
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for type-safe styling variants in components
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/**/*.{css,ts} : Use CSS custom properties for design tokens and theming in the component library
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/styles.css
📚 Learning: 2025-11-19T20:03:29.205Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 320
File: libs/zard/src/lib/components/tooltip/tooltip.ts:82-105
Timestamp: 2025-11-19T20:03:29.205Z
Learning: In the zard-ui/zardui repository, non-null assertion operator (!) is forbidden by ESLint rule "Forbidden non-null assertion". Use type assertions (e.g., `(value as Type)`) instead when narrowing types after null/undefined checks.
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-12-21T21:17:39.497Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 383
File: libs/zard/src/lib/shared/components/carousel/carousel.component.ts:114-115
Timestamp: 2025-12-21T21:17:39.497Z
Learning: In Angular components using signal inputs (input()) with types from external libraries like Embla Carousel, explicit type annotations (e.g., `readonly zOptions: InputSignal<EmblaOptionsType> = input<EmblaOptionsType>(...)`) may be necessary to prevent TypeScript IDE errors about inferred types referencing non-portable node_modules paths. This is not redundant when the annotation prevents the "cannot be named without a reference to node_modules" error.
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-11-26T11:20:45.264Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/select/select.component.spec.ts:79-88
Timestamp: 2025-11-26T11:20:45.264Z
Learning: In ZardUI select component tests (libs/zard/src/lib/components/select/select.component.spec.ts), use fakeAsync() with flush() instead of setTimeout because the component uses setTimeout(..., 0) for focus management, which requires advancing macrotasks in tests.
Applied to files:
apps/web/src/app/app.component.ts
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/src/styles.css : Set up `src/styles.css` with Tailwind CSS configuration and design tokens using CSS `theme` and `plugin` directives
Applied to files:
apps/web/src/styles.css
📚 Learning: 2025-12-25T11:10:09.078Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 384
File: apps/web/src/styles.css:213-213
Timestamp: 2025-12-25T11:10:09.078Z
Learning: In Tailwind CSS v4, max-width utilities support dynamic numeric values derived from the spacing scale (using the --spacing variable, default 0.25rem = 4px). Prefer using numeric classes like max-w-350 when the value aligns with the spacing scale, since 350 × 0.25rem = 87.5rem = 1400px. Avoid arbitrary values expressed with brackets (e.g., max-w-[1400px]) when a scale-based value is available and accurate. Apply this guidance to CSS files in the web app (e.g., apps/web/src/styles.css) and across the codebase where Tailwind is used.
Applied to files:
apps/web/src/styles.css
🧬 Code graph analysis (3)
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (1)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
getHeaderOffset(7-23)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
apps/web/src/app/domain/directives/scroll-spy-item.directive.ts (1)
Directive(3-10)
apps/web/src/app/app.component.ts (1)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
getHeaderOffset(7-23)
🔇 Additional comments (19)
apps/web/src/styles.css (1)
57-59: Circular reference fixed—Shiki theming now works correctly.The previous critical issue has been resolved. The CSS variables now follow a valid reference pattern:
--shiki--lightand--shiki--darkhold concrete theme identifiers--shiki-themereferences the appropriate token conditionally- No circular
var()dependenciesThe implementation correctly switches themes in dark mode and follows CSS identifier conventions.
Also applies to: 103-103
apps/web/src/app/domain/components/doc-content/doc-content.component.html (1)
10-16: Looks good—native control flow and signal bindings are correct.The
@ifblock with signal calls and the updated bindings without non-null assertions align well with Angular 21 patterns.apps/web/src/app/app.component.ts (1)
20-50: Well-implemented router scroll handling with proper cleanup.The implementation correctly:
- Uses
inject()for DI (Angular 21 pattern)- Guards browser-only code with
isPlatformBrowser- Cleans up subscriptions via
takeUntilDestroyed- Fixed the scroll calculation to use
Math.max(0, yScrollPosition)- Uses
getHeaderOffsetfor header-aware anchor scrollingThe loading timeout for
docs/componentsroutes is justified for waiting on async content to render before scrolling to anchors.apps/web/src/app/domain/pages/about/about.page.ts (1)
39-45: Nice migration to signal-based state with OnPush.The
activeAnchoris now a proper signal and the component usesChangeDetectionStrategy.OnPush. This aligns perfectly with Angular 21 patterns.apps/web/src/app/domain/pages/about/about.page.html (2)
1-6: Clean signal integration with scrollSpy directive.The template correctly binds
activeAnchor()and usesactiveAnchor.set($event)to update the signal. ThescrollSpyattribute directive integration looks solid.
34-39: Nice use of@letwith async pipe and native control flow.The pattern
@let founders = founders$ | async; @if (founders)is a clean way to handle async data with Angular's native control flow syntax.apps/web/src/app/domain/directives/scroll-spy.directive.ts (3)
27-29: Excellent use ofhostbinding instead of@HostListener.Using
host: { '(window:scroll)': 'onScroll()' }is the preferred Angular pattern over the deprecated@HostListenerdecorator. Well done!
36-37: Signal-basedoutput()andinput()are correctly applied.The migration from
@Output()decorator tooutput<string>()and the use ofinput<number>()forheaderOffsetfollow Angular 21 best practices.
43-51: RAF throttling is well-implemented.The
requestAnimationFramepattern withtickingflag properly debounces scroll events, preventing excessive processing and improving performance.libs/zard/src/lib/shared/components/icon/demo/searchable.ts (3)
1-14: LGTM: Proper Angular 21 migration.The component correctly implements OnPush change detection and removes the legacy CommonModule import in favor of explicit component imports. Signal-based APIs and modern Angular patterns are properly applied.
Based on learnings, OnPush is a best practice for components in this project.
49-56: LGTM: Proper button semantics.Adding
type="button"to the icon buttons prevents unintended form submission behavior. The grid layout and responsive classes follow Tailwind best practices.
74-114: LGTM: Signal-based reactivity with OnPush.The component properly implements signal-based state management with
signal()andcomputed(), paired with OnPush change detection for optimal performance. The clipboard API usage includes proper error handling.Based on learnings, signal-based inputs and OnPush are best practices for this project.
libs/zard/src/lib/shared/components/tabs/tabs.component.ts (5)
1-49: LGTM: Proper Angular 21 migration for ZardTabComponent.The component correctly replaces CommonModule with the minimal NgTemplateOutlet import. OnPush change detection is properly applied, and the component uses signal-based APIs (
input.required(),viewChild.required()) following best practices.Based on learnings, OnPush and signal-based inputs are best practices for components in this project.
51-112: LGTM: Proper template bindings and button semantics.The template correctly updates:
- Minimal imports (NgTemplateOutlet, specific components)
type="button"on all interactive buttons to prevent form submission[class]bindings instead of[ngClass]for cleaner, more performant binding
121-148: LGTM: Consistent button semantics throughout.All navigation and scroll control buttons now have explicit
type="button"attributes, and class bindings consistently use[class]over[ngClass]. These changes improve both correctness and performance.
226-250: LGTM: Improved SSR safety and ResizeObserver cleanup.The enhanced guard at lines 228-230 properly checks for both
windowandResizeObserveravailability before executing browser-specific code. The explicit unobserve block (lines 235-237) ensures proper cleanup when the observed element changes. These defensive patterns prevent runtime errors in SSR contexts.Based on learnings, defensive guards for browser APIs are necessary for SSR compatibility.
173-343: LGTM: Exemplary use of Angular 21 signal APIs.The component implementation demonstrates excellent use of modern Angular patterns:
inject()for dependency injectionsignal()andcomputed()for reactive stateinput()andoutput()for component APIscontentChildren()andviewChild()for template queries- OnPush change detection paired with signals
No legacy decorators (
@HostBinding,@HostListener) present. This is exactly how Angular 21 components should be written.Based on learnings, signal-based APIs, inject(), and OnPush are best practices for this project.
libs/zard/src/lib/shared/components/tabs/doc/overview.md (1)
4-5: LGTM: Helpful documentation with correct grammar.The note properly guides users to the segmented component for shadcn/ui-style tabs. The hyphen in "shadcn/ui-like" is correctly applied, making it a proper compound adjective.
apps/web/src/server.ts (1)
227-240: LGTM! Correct pattern for modern Express/path-to-regexp.The change from
app.get('**', ...)toapp.get('/*splat', ...)correctly addresses the path-to-regexp upgrade compatibility. The named wildcard parameter (splat) is required in modern versions—unnamed wildcards like'*'throw the "Missing parameter name" error you encountered.The implementation is sound:
- ✅ Uses
app.get()to handle only GET requests (appropriate for SSR)- ✅ Handler logic unchanged and properly structured with error handling
- ✅ Correct route order: specific routes → static assets → SSR catch-all
Minor note: If you notice issues with the root path
/not rendering via SSR, consider using the more explicit pattern'/:splat*'(zero or more segments), which guarantees root path matching. However, since you've tested and confirmed the server works, the current pattern is functioning correctly.
apps/web/src/app/domain/components/doc-content/doc-content.component.html
Outdated
Show resolved
Hide resolved
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts
Outdated
Show resolved
Hide resolved
mikij
force-pushed
the
update-project-angular21
branch
from
5e62410 to
aa55c91
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
apps/web/src/app/domain/pages/about/about.page.ts (1)
71-80: Typo: "Mantainer" should be "Maintainer".Lines 74 and 78 still have "Mantainer" instead of "Maintainer" in the role strings. The navigation config item was corrected (line 86), but the
maintainerMappingsroles were not.🔎 Proposed fix
private readonly maintainerMappings = { ribeiromatheuss: { name: 'Matheus Ribeiro', - role: 'Mantainer', + role: 'Maintainer', }, mikij: { name: 'Mickey Lazarevic', - role: 'Mantainer', + role: 'Maintainer', }, };apps/web/src/app/domain/components/doc-content/doc-content.component.ts (1)
1-14: Clean signal-based component with proper types.Simplified to pure signal inputs with
readonlymodifiers. TheactiveAnchortype is correctlystring | undefined, and scroll handling is appropriately delegated toAppComponent.Consider adding
ChangeDetectionStrategy.OnPushfor consistency with other components in this PR:+import { ChangeDetectionStrategy, Component, input } from '@angular/core'; -import { Component, input } from '@angular/core'; ... @Component({ selector: 'z-content', imports: [DynamicAnchorComponent], templateUrl: './doc-content.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, })libs/zard/src/lib/shared/components/tabs/tabs.component.ts (1)
29-30: Consider using @/ path alias for internal imports.Per project learnings, prefer
@/path aliases over relative imports for better readability and alignment with the alias configuration:import { ZardButtonComponent } from '@/shared/components/button/button.component'; import { ZardIconComponent } from '@/shared/components/icon/icon.component';However, if these shared components are also installed via the ZardUI CLI (similar to core utilities), relative imports may be intentional for path transformation. In that case, the current approach is correct.
Based on learnings, @/ path alias is preferred for internal imports within libs/zard/src/lib/.
♻️ Duplicate comments (3)
libs/zard/src/lib/shared/components/table/table.variants.ts (1)
40-54: Invalid CSS selector syntax with double brackets (applies to both variants).Both
tableHeadVariants(line 41) andtableCellVariants(line 49) use the non-standard*:[[role=checkbox]]selector. CSS attribute selectors require single brackets. This issue was previously flagged for line 41, and the same fix applies to line 49.🔎 Proposed fix for both variants
export const tableHeadVariants = cva( - 'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5', + 'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&_[role=checkbox]]:translate-y-0.5', { variants: {}, defaultVariants: {}, }, ); export const tableCellVariants = cva( - 'p-2 align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5', + 'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&_[role=checkbox]]:translate-y-0.5', { variants: {}, defaultVariants: {}, }, );Alternative selectors depending on intended scope:
[&_[role=checkbox]]— any descendant with role=checkbox[&>*[role=checkbox]]— direct children with role=checkbox[&_*[role=checkbox]]— any nested descendant element with role=checkboxlibs/zard/src/lib/shared/components/icon/demo/searchable.ts (1)
61-61: Replace invalidwrap-break-wordswith standard Tailwindbreak-words.The class
wrap-break-wordsis not a valid Tailwind utility. Replace it with the standardbreak-wordsutility for proper word-breaking behavior.🔎 Proposed fix
- class="group-hover:text-foreground wrap-break-words w-full text-center text-xs leading-relaxed hyphens-auto transition-colors" + class="group-hover:text-foreground break-words w-full text-center text-xs leading-relaxed hyphens-auto transition-colors"apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (1)
47-49: Inconsistent scroll position calculation with AppComponent.Line 49 uses
Math.max(headerOffset, yScrollPosition)butAppComponent(line 42) usesMath.max(0, yScrollPosition). This creates inconsistent anchor scrolling behavior—this component may overshoot targets near the top of the page.🔎 Proposed fix for consistency
const headerOffset = getHeaderOffset(this.isBrowser); const yScrollPosition = anchorElement.offsetTop - headerOffset; - this.viewportScroller.scrollToPosition([0, Math.max(headerOffset, yScrollPosition)]); + this.viewportScroller.scrollToPosition([0, Math.max(0, yScrollPosition)]);
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (17)
apps/web/public/components/icon/demo/searchable.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/components/tabs/doc/overview.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/table.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/tabs.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/accordion.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/breadcrumb.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/carousel.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/command.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/form.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/layout.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/pagination.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/registry.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/resizable.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/select.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/sheet.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/table.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/tabs.jsonis excluded by!apps/web/public/**and included byapps/**
📒 Files selected for processing (13)
apps/web/src/app/app.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/app/domain/pages/about/about.page.htmlapps/web/src/app/domain/pages/about/about.page.tsapps/web/src/server.tsapps/web/src/styles.csslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/tabs/tabs.component.ts
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use path aliases @zard/* to map to libs/zard/src/lib/* in imports
Files:
apps/web/src/server.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/app.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/app/domain/pages/about/about.page.ts
libs/zard/**/*.{css,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Use CSS custom properties for design tokens and theming in the component library
Files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
🧠 Learnings (53)
📓 Common learnings
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Follow PR checklist including: passing tests, code pattern compliance, updated documentation, working demos, no lint/typecheck warnings, linked issues, conventional commit in title
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: README.md:0-0
Timestamp: 2025-12-21T00:11:44.620Z
Learning: Use Angular, TailwindCSS, and TypeScript as the primary technology stack for component development
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs with `input()` in Angular components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block components should use Angular signals for state management (e.g., signal() for loading states) and ReactiveFormsModule for form handling with Validators
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Refer to `docs/angular-llm.txt` for Angular best practices when developing components
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Learnt from: mikij
Repo: zard-ui/zardui PR: 318
File: libs/zard/src/lib/components/select/demo/default.ts:21-21
Timestamp: 2025-11-10T21:46:33.213Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally showing different patterns (e.g., primitive values vs signals) across different demos is valuable for demonstrating the flexibility of Angular features like two-way binding.
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/tsconfig.json : Configure TypeScript path mappings in `tsconfig.json` with `@/*` alias pointing to `src/app/*` for clean imports
Applied to files:
apps/web/src/server.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Applied to files:
apps/web/src/server.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/app.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Follow PR checklist including: passing tests, code pattern compliance, updated documentation, working demos, no lint/typecheck warnings, linked issues, conventional commit in title
Applied to files:
apps/web/src/server.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Applied to files:
apps/web/src/server.tsapps/web/src/app/app.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-11-10T21:46:33.213Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 318
File: libs/zard/src/lib/components/select/demo/default.ts:21-21
Timestamp: 2025-11-10T21:46:33.213Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally showing different patterns (e.g., primitive values vs signals) across different demos is valuable for demonstrating the flexibility of Angular features like two-way binding.
Applied to files:
apps/web/src/server.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Applied to files:
apps/web/src/server.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Refer to `docs/angular-llm.txt` for Angular best practices when developing components
Applied to files:
apps/web/src/server.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/app.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-12-13T11:50:56.310Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:56.310Z
Learning: Do not flag or suggest removing `standalone: true` from test components (*.spec.ts files) or demo components (demo/*.ts files) in libs/zard/src/lib/shared/components/**/*.ts, as it is not a significant concern and the explicit flag is acceptable in these contexts.
Applied to files:
apps/web/src/server.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs with `input()` in Angular components
Applied to files:
apps/web/src/server.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Implement TailwindCSS v4 with PostCSS for styling and use class merging with tailwind-merge to resolve conflicts
Applied to files:
apps/web/src/server.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-30T08:50:23.436Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/core/providezard.ts:0-0
Timestamp: 2025-11-30T08:50:23.436Z
Learning: In libs/zard/src/lib/components/core/providezard.ts, the import paths `../core/event-manager-plugins/...` are intentionally structured this way because the ZardUI CLI transforms them to 'shared/components/core/event-manager-plugins/...' format. Other relative path combinations don't work with the current CLI implementation. This path pattern should not be simplified until the CLI transformation logic is updated.
Applied to files:
apps/web/src/server.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/*/doc/*.md : Write component documentation with overview.md for use cases and basic examples, and api.md for complete API reference
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/doc/**/*.md : Write component documentation in `doc/overview.md` and `doc/api.md` files
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-11-04T10:18:55.477Z
Learnt from: mihajm
Repo: zard-ui/zardui PR: 308
File: libs/zard/src/lib/components/button-group/doc/overview.md:1-3
Timestamp: 2025-11-04T10:18:55.477Z
Learning: In zardui repo, doc/overview.md files for components should contain only a brief overview description. Examples are provided through separate demo files and the api.md documentation, not in overview.md.
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add barrel exports for all new components in libs/zard/src/lib/components/components.ts
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-29T15:31:22.377Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 339
File: libs/zard/src/lib/components/carousel/carousel.component.ts:92-92
Timestamp: 2025-11-29T15:31:22.377Z
Learning: In libs/zard/src/lib/components/**/*.component.ts files using TailwindCSS, avoid suggesting individual class bindings like `[class.fill-primary]="condition"` because they can cause TailwindCSS issues. Prefer string concatenation or `[class]` binding with conditional expressions instead.
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Keep commit messages in present tense, single line format with scope and description (e.g., '✨ feat(popover): add popover component')
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use TailwindCSS utility classes for styling, following responsive design patterns with prefixes for breakpoints (sm:, lg:) and ensure accessibility with semantic HTML and ARIA guidelines
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-11-30T19:07:11.572Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-10-31T10:03:18.563Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/app.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-11-14T22:52:09.135Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.ts
📚 Learning: 2025-11-13T18:05:35.468Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 324
File: libs/zard/src/lib/components/breadcrumb/breadcrumb.component.ts:34-60
Timestamp: 2025-11-13T18:05:35.468Z
Learning: In breadcrumb item components using RouterLink hostDirectives for host navigation, inject the RouterLink directive and use its `href` property for anchor elements to display URLs on hover, avoiding naming collisions between hostDirective inputs and component inputs.
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-12-21T00:11:44.620Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: README.md:0-0
Timestamp: 2025-12-21T00:11:44.620Z
Learning: Use Angular, TailwindCSS, and TypeScript as the primary technology stack for component development
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Ensure components are standalone Angular components
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/app.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx} : Components should be designed specifically for the Angular ecosystem and follow Angular conventions
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding for dynamic classes in components: `host: { '[class]': 'classes()' }`
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-26T11:20:45.264Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/select/select.component.spec.ts:79-88
Timestamp: 2025-11-26T11:20:45.264Z
Learning: In ZardUI select component tests (libs/zard/src/lib/components/select/select.component.spec.ts), use fakeAsync() with flush() instead of setTimeout because the component uses setTimeout(..., 0) for focus management, which requires advancing macrotasks in tests.
Applied to files:
apps/web/src/app/app.component.ts
📚 Learning: 2025-12-13T11:50:50.088Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:50.088Z
Learning: Do not flag or require removing standalone: true for test components (*.spec.ts) and demo components (demo/*.ts) within libs/zard/src/lib/shared/components/**.ts. In these contexts, an explicit standalone: true flag is acceptable; apply this exclusion when reviewing files under this path.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/demo/**/*.ts : Create demo components in the `demo/` folder with a main export, default example, and variant examples
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block components should use Angular signals for state management (e.g., signal() for loading states) and ReactiveFormsModule for form handling with Validators
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use computed properties in Angular components for reactive class calculations: `protected readonly classes = computed(() => ...)`
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses()` utility with `clsx` and `tailwind-merge` to resolve class conflicts in component styling
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block component files must use the .component.ts extension and should be standalone Angular components with explicit imports from ReactiveFormsModule and ZardUI components
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/*/demo/*.ts : Create demo examples in the demo/ folder with structured exports containing name, code, and component properties
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-11-15T21:22:05.244Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 328
File: libs/zard/src/lib/components/select/demo/multi-select.ts:1-1
Timestamp: 2025-11-15T21:22:05.244Z
Learning: In Angular components that use model() for inputs (like zValue in ZardSelectComponent), two-way binding with WritableSignals is fully supported. The pattern [(zValue)]="selectedValues" where selectedValues = signal<string[]>([]) works correctly because model() automatically handles unwrapping and updating the signal.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-11-04T20:46:01.373Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 309
File: libs/zard/src/lib/components/select/demo/multi-select.ts:23-27
Timestamp: 2025-11-04T20:46:01.373Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, console.log statements are acceptable and often intentional to demonstrate reactivity and help users understand how the component works.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-12-21T21:17:39.497Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 383
File: libs/zard/src/lib/shared/components/carousel/carousel.component.ts:114-115
Timestamp: 2025-12-21T21:17:39.497Z
Learning: In Angular components that use signal inputs (Input()) with types from external libraries (e.g., Embla Carousel), add explicit type annotations to prevent TypeScript IDE errors about inferred types referencing non-portable node_modules paths. For example, declare a readonly typed input like: readonly zOptions: InputSignal<EmblaOptionsType> = input<EmblaOptionsType>(...). This explicit annotation helps avoid the error cannot be named without a reference to node_modules. Apply this pattern to components in the shared carousel area (and similar components) whenever an external library type is used in an InputSignal to ensure type safety and IDE compatibility.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-15T11:43:06.831Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 373
File: libs/zard/src/lib/shared/components/select/select.component.ts:33-33
Timestamp: 2025-12-15T11:43:06.831Z
Learning: In files under libs/zard/src/lib/**/*.{ts,tsx,js}, prefer the @/ path alias for imports that map to libs/zard/src/lib/* directories. For example, write import { mergeClasses } from '@/shared/utils/merge-classes' instead of using the 'zard/' alias. This improves path readability and aligns with the project's alias configuration.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding with computed classes for dynamic class application
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T21:17:39.497Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 383
File: libs/zard/src/lib/shared/components/carousel/carousel.component.ts:114-115
Timestamp: 2025-12-21T21:17:39.497Z
Learning: In Angular components using signal inputs (input()) with types from external libraries like Embla Carousel, explicit type annotations (e.g., `readonly zOptions: InputSignal<EmblaOptionsType> = input<EmblaOptionsType>(...)`) may be necessary to prevent TypeScript IDE errors about inferred types referencing non-portable node_modules paths. This is not redundant when the annotation prevents the "cannot be named without a reference to node_modules" error.
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-11-19T20:03:29.205Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 320
File: libs/zard/src/lib/components/tooltip/tooltip.ts:82-105
Timestamp: 2025-11-19T20:03:29.205Z
Learning: In the zard-ui/zardui repository, non-null assertion operator (!) is forbidden by ESLint rule "Forbidden non-null assertion". Use type assertions (e.g., `(value as Type)`) instead when narrowing types after null/undefined checks.
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-12-04T15:03:56.958Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 361
File: libs/zard/src/lib/components/pagination/demo/custom.ts:19-22
Timestamp: 2025-12-04T15:03:56.958Z
Learning: In pagination demos under libs/zard/src/lib/components/pagination/demo/*.ts, the pattern `<span class="sr-only">To page</span>{{ page }}` is correct for accessible button labels. Screen readers read both the sr-only text and the visible page number together, while visual users see only the page number. This approach is intentional and should not be flagged.
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for typed variants in component styling
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for type-safe styling variants in components
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use mergeClasses utility from zard/shared/utils for combining CVA variants with custom classes
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/**/*.{css,ts} : Use CSS custom properties for design tokens and theming in the component library
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/styles.css
📚 Learning: 2025-11-30T13:27:41.206Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/popover/popover.component.ts:28-29
Timestamp: 2025-11-30T13:27:41.206Z
Learning: In libs/zard/src/lib/components/core/**/*.ts files (core utilities, plugins, and providers), use relative imports for intra-core dependencies because the ZardUI CLI performs path transformations during component installation. The CLI expects specific relative path patterns and transforms them to the target project structure. For all other component imports and application code, use zard/* path aliases.
Applied to files:
libs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.html
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Block template files must use ZardUI form components (ZardFormFieldComponent, ZardFormLabelComponent, ZardFormControlComponent) for form validation and error handling
Applied to files:
libs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/src/styles.css : Set up `src/styles.css` with Tailwind CSS configuration and design tokens using CSS `theme` and `plugin` directives
Applied to files:
apps/web/src/styles.css
📚 Learning: 2025-12-25T11:10:09.078Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 384
File: apps/web/src/styles.css:213-213
Timestamp: 2025-12-25T11:10:09.078Z
Learning: In Tailwind CSS v4, max-width utilities support dynamic numeric values derived from the spacing scale (using the --spacing variable, default 0.25rem = 4px). Prefer using numeric classes like max-w-350 when the value aligns with the spacing scale, since 350 × 0.25rem = 87.5rem = 1400px. Avoid arbitrary values expressed with brackets (e.g., max-w-[1400px]) when a scale-based value is available and accurate. Apply this guidance to CSS files in the web app (e.g., apps/web/src/styles.css) and across the codebase where Tailwind is used.
Applied to files:
apps/web/src/styles.css
🧬 Code graph analysis (4)
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (1)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
getHeaderOffset(7-23)
apps/web/src/app/app.component.ts (1)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
getHeaderOffset(7-23)
apps/web/src/app/domain/components/doc-content/doc-content.component.ts (1)
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (1)
NavigationConfig(14-16)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
apps/web/src/app/domain/directives/scroll-spy-item.directive.ts (1)
Directive(3-10)
🔇 Additional comments (30)
libs/zard/src/lib/shared/components/icon/demo/searchable.ts (3)
1-1: OnPush change detection properly implemented.Excellent work addressing the previous feedback! The component now uses
ChangeDetectionStrategy.OnPush, which pairs perfectly with the signal-based reactivity throughout this component.Also applies to: 13-13, 74-74
52-52: Good defensive coding with explicit button type.Adding
type="button"prevents accidental form submission if this component is ever used within a form context. This is a solid best practice.
76-114: Clean signal-based implementation with proper error handling.The component implementation follows Angular best practices:
- Signal-based state management (
signal(),computed())- Modern template syntax (
@for,@if)- Proper async error handling in
copyIconCode()- No legacy decorators
apps/web/src/server.ts (1)
227-240: Correct Express 5 SSR catch-all pattern.The
/*splatnamed wildcard is the proper migration from the old**pattern for Express 5's updated path-to-regexp. This ensures SSR rendering viaCommonEngineworks correctly for all GET requests.apps/web/src/styles.css (2)
57-59: Well-structured Shiki theme token system.The circular reference issue is properly resolved.
--shiki--lightand--shiki--darknow hold concrete theme identifiers, and--shiki-themereferences the appropriate token. The unquoted values follow CSS conventions for hyphenated identifiers.
103-103: Dark mode theme switching correctly implemented.The
.darkselector properly overrides--shiki-themeto reference--shiki--dark, enabling seamless syntax highlighting theme switching.apps/web/src/app/domain/components/doc-content/doc-content.component.html (2)
2-5: Signal invocation fix looks good.Correctly calling
activeAnchor()now properly evaluates the signal's value for the conditional class binding, rather than incorrectly checkingFunction.lengthon the signal function itself.
10-16: Clean signal-based template bindings.The removal of non-null assertions (
!) and empty string fallbacks (|| '') aligns with the updatedinput<string | undefined>()types. Thez-dynamic-anchorcomponent correctly handlesundefinedvalues internally.apps/web/src/app/app.component.ts (3)
1-10: Excellent Angular 21 patterns throughout.Modern
inject()DI,takeUntilDestroyed()for subscription cleanup, and proper imports. ThegetHeaderOffsetutility import enables header-aware anchor scrolling across the app.
18-25: Proper OnPush and inject() usage.
ChangeDetectionStrategy.OnPushfor performance optimization, and all dependencies useinject()rather than constructor injection. This is the modern Angular way.
27-50: Well-implemented header-aware scroll handling.The platform check guards SSR,
takeUntilDestroyedhandles cleanup, and the timeout fordocs/componentsroutes correctly waits for dynamic content before computing anchor positions. TheMath.max(0, yScrollPosition)clamp is correct.apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (2)
1-5: Modern Angular imports with platform awareness.Proper usage of
inject(),input(),DOCUMENT, andPLATFORM_IDtokens. ThegetHeaderOffsetimport enables consistent header-offset calculations across the app.
23-31: Signal-based inputs and inject() pattern.Clean separation with
inject()for all dependencies. TheisBrowsercomputation at construction time avoids repeated platform checks.activeAnchorcorrectly usesinput<string | undefined>()for optional values.apps/web/src/app/domain/pages/about/about.page.ts (2)
39-45: Excellent signal-based state and OnPush adoption.
ChangeDetectionStrategy.OnPushandsignal<string | undefined>()foractiveAnchorfollow Angular 21 best practices. This enables fine-grained reactivity and optimal change detection.
82-90: Navigation config item ID correction.Good catch on fixing
mantainers→maintainersin the navigation config. This ensures proper anchor linking.apps/web/src/app/domain/directives/scroll-spy.directive.ts (5)
1-4: Modern Angular directive imports.Excellent adoption of
isPlatformBrowser,inject(),input(),output(), andcontentChildren(). This is the Angular 21 way.
6-23: Header offset utility with caching.The
getHeaderOffsetfunction correctly caches the header height for performance. TheisBrowserparameter guards DOM access, making this SSR-safe. The fallback to56on the server is reasonable.
25-38: Proper host:{} syntax and signal-based APIs.The
host: { '(window:scroll)': 'onScroll()' }pattern replaces@HostListener, aligning with Angular best practices. Signal-basedoutput<string>()andinput<number>()complete the modernization. ThecontentChildren()query is the correct signal-based replacement.
40-51: Well-implemented RAF throttling.The
requestAnimationFramethrottling with atickingguard prevents excessive scroll processing. This is a standard, performant pattern for scroll handlers.
53-78: Clean scroll handling with proper null checks.Direct
this.document.scrollingElementaccess (via injectedDOCUMENT) is more robust than castingevent.target. The optional chaining and early return handle edge cases. Emission occurs only whencurrentSectionactually changes, avoiding unnecessary updates.apps/web/src/app/domain/pages/about/about.page.html (4)
1-6: LGTM! Proper signal-based reactive binding.The z-content component correctly uses signal patterns:
activeAnchor()for reading andactiveAnchor.set($event)for writing. This is the modern Angular 21 approach for reactive state management.
34-39: LGTM! Modern Angular control flow syntax.The
@letwith async pipe pattern combined with@if/@elsefor loading states is the correct Angular 21 approach. Self-closing component tags maintain consistency.
50-55: LGTM! Consistent loading state pattern.The maintainers section follows the same modern pattern as the founders section with proper
@letand@if/@elsesyntax.
85-87: LGTM! Proper @for with track function.The
@forloop correctly includes a track function (track item.title), which is required for Angular's control flow and optimizes rendering performance.libs/zard/src/lib/shared/components/tabs/doc/overview.md (1)
4-5: LGTM: Helpful user guidance added.The note provides clear direction to users seeking shadcn/ui-style tabs, improving discoverability of the segmented component.
libs/zard/src/lib/shared/components/tabs/tabs.component.ts (5)
1-1: LGTM: Optimized import for better tree-shaking.Replacing
CommonModulewith the specificNgTemplateOutletimport reduces bundle size and follows Angular best practices for granular imports.
43-43: LGTM: OnPush change detection added.The addition of
ChangeDetectionStrategy.OnPushimproves performance and aligns with project coding guidelines. The component's signal-based architecture is fully compatible with OnPush.Based on learnings, OnPush change detection is required for component performance optimization.
85-146: LGTM: Explicit button types prevent form submission issues.Adding
type="button"to all interactive buttons is excellent defensive coding. Without explicit types, buttons default totype="submit", which can cause unexpected form submissions when tabs are used within form contexts.
228-230: LGTM: Robust SSR and browser compatibility guard.The enhanced guard checking both
windowandResizeObserveravailability is excellent defensive coding for SSR environments and older browsers. Thetypeof ResizeObserver === 'undefined'check correctly handles the case where the API isn't available globally.
235-240: LGTM: Proper ResizeObserver lifecycle management.The explicit null check before unobserving prevents runtime errors and ensures proper cleanup when the observed element reference changes. This pattern prevents memory leaks by unobserving the old element before observing the new one.
mikij
force-pushed
the
update-project-angular21
branch
from
aa55c91 to
1a7f80f
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (6)
libs/zard/src/lib/shared/components/table/table.variants.ts (1)
48-54: Invalid CSS selector syntax with double brackets.The selector
*:[[role=checkbox]]uses non-standard double-bracket notation. CSS attribute selectors require single brackets. This selector will not match checkbox elements and thetranslate-y-0.5transform won't apply.🔎 Proposed fix
Use valid Tailwind arbitrary variant syntax consistent with line 4:
export const tableCellVariants = cva( - 'p-2 align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5', + 'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&_[role=checkbox]]:translate-y-0.5', { variants: {}, defaultVariants: {}, }, );Alternatives depending on intended scope:
[&_[role=checkbox]]— any descendant with role=checkbox[&>[role=checkbox]]— direct child with role=checkbox[&_*[role=checkbox]]— any descendant element with role=checkboxlibs/zard/src/lib/shared/components/tabs/tabs.component.ts (5)
85-91: Critical:[class]binding overrides all static classes.The
[class]binding on line 87 replaces the entireclassattribute from line 86, removingscroll-btn,scroll-left,cursor-pointer, andpr-4classes. This breaks button styling and functionality.🔎 Proposed fix: merge static and dynamic classes
<button type="button" - class="scroll-btn scroll-left cursor-pointer pr-4" - [class]="zTabsPosition() === 'top' ? 'mb-4' : 'mt-4'" + [class]="'scroll-btn scroll-left cursor-pointer pr-4 ' + (zTabsPosition() === 'top' ? 'mb-4' : 'mt-4')" (click)="scrollNav('left')" >
94-101: Critical:[class]binding overrides all static classes.The
[class]binding on line 96 replaces the entireclassattribute from line 95, removingscroll-btn,scroll-up,cursor-pointer, andpb-4classes. This breaks button styling and functionality.🔎 Proposed fix: merge static and dynamic classes
<button type="button" - class="scroll-btn scroll-up cursor-pointer pb-4" - [class]="zTabsPosition() === 'left' ? 'mr-4' : 'ml-4'" + [class]="'scroll-btn scroll-up cursor-pointer pb-4 ' + (zTabsPosition() === 'left' ? 'mr-4' : 'ml-4')" (click)="scrollNav('up')" >
131-137: Critical:[class]binding overrides all static classes.The
[class]binding on line 133 replaces the entireclassattribute from line 132, removingscroll-btn,scroll-right,cursor-pointer, andpl-4classes. This breaks button styling and functionality.🔎 Proposed fix: merge static and dynamic classes
<button type="button" - class="scroll-btn scroll-right cursor-pointer pl-4" - [class]="zTabsPosition() === 'top' ? 'mb-4' : 'mt-4'" + [class]="'scroll-btn scroll-right cursor-pointer pl-4 ' + (zTabsPosition() === 'top' ? 'mb-4' : 'mt-4')" (click)="scrollNav('right')" >
140-146: Critical:[class]binding overrides all static classes.The
[class]binding on line 142 replaces the entireclassattribute from line 141, removingscroll-btn,scroll-down,cursor-pointer, andpt-4classes. This breaks button styling and functionality.🔎 Proposed fix: merge static and dynamic classes
<button type="button" - class="scroll-btn scroll-down cursor-pointer pt-4" - [class]="zTabsPosition() === 'left' ? 'mr-4' : 'ml-4'" + [class]="'scroll-btn scroll-down cursor-pointer pt-4 ' + (zTabsPosition() === 'left' ? 'mr-4' : 'ml-4')" (click)="scrollNav('down')" >
111-125: Merge tab and button variant classes usingmergeClasses()to prevent class conflicts.The
[class]binding on line 121 applies onlytabButtonVariants(), which doesn't include base button styling from the z-button component's host binding. While Angular merges multiple[class]bindings, relying on automatic merging with TailwindCSS can cause conflicts. Follow the established pattern used inZardButtonGroupTextDirective(which usesmergeClasses(buttonGroupTextVariants(), this.class())) by explicitly combining variants:protected readonly buttonClassesSignal = computed(() => { const activeIndex = this.activeTabIndex(); const position = this.zActivePosition(); return this.tabs().map((_, index) => { const isActive = activeIndex === index; return mergeClasses( buttonVariants(), tabButtonVariants({ zActivePosition: position, isActive }) ); }); });This ensures all necessary button classes are preserved while applying tab-specific overrides.
♻️ Duplicate comments (2)
libs/zard/src/lib/shared/components/table/table.variants.ts (1)
40-46: Invalid CSS selector syntax—already flagged.This selector
*:[[role=checkbox]]uses invalid double-bracket notation and was flagged in the previous review. Apply the suggested fix to use valid Tailwind arbitrary variant syntax like[&_[role=checkbox]]:translate-y-0.5.libs/zard/src/lib/shared/components/icon/demo/searchable.ts (1)
61-61: Invalid Tailwind utility: usebreak-wordsorwrap-break-wordinstead.The class
wrap-break-wordsis not a valid Tailwind utility in either v3 or v4. According to Tailwind v4 documentation:
- Standard utilities:
break-words,break-all,break-normal,break-keep- New v4 utilities:
wrap-break-word(singular),wrap-anywhereUse
break-wordsfor standard word-breaking behavior.🔎 Proposed fix
- class="group-hover:text-foreground wrap-break-words w-full text-center text-xs leading-relaxed hyphens-auto transition-colors" + class="group-hover:text-foreground break-words w-full text-center text-xs leading-relaxed hyphens-auto transition-colors"
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (17)
apps/web/public/components/icon/demo/searchable.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/components/tabs/doc/overview.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/table.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/tabs.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/accordion.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/breadcrumb.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/carousel.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/command.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/form.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/layout.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/pagination.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/registry.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/resizable.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/select.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/sheet.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/table.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/tabs.jsonis excluded by!apps/web/public/**and included byapps/**
📒 Files selected for processing (13)
apps/web/src/app/app.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/app/domain/pages/about/about.page.htmlapps/web/src/app/domain/pages/about/about.page.tsapps/web/src/server.tsapps/web/src/styles.csslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/tabs/tabs.component.ts
🧰 Additional context used
📓 Path-based instructions (2)
libs/zard/**/*.{css,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Use CSS custom properties for design tokens and theming in the component library
Files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use path aliases @zard/* to map to libs/zard/src/lib/* in imports
Files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tslibs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/server.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/app/domain/pages/about/about.page.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/app.component.ts
🧠 Learnings (55)
📓 Common learnings
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Follow PR checklist including: passing tests, code pattern compliance, updated documentation, working demos, no lint/typecheck warnings, linked issues, conventional commit in title
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs with `input()` in Angular components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block components should use Angular signals for state management (e.g., signal() for loading states) and ReactiveFormsModule for form handling with Validators
Learnt from: mikij
Repo: zard-ui/zardui PR: 324
File: libs/zard/src/lib/components/breadcrumb/breadcrumb.component.ts:34-60
Timestamp: 2025-11-13T18:05:35.468Z
Learning: In breadcrumb item components using RouterLink hostDirectives for host navigation, inject the RouterLink directive and use its `href` property for anchor elements to display URLs on hover, avoiding naming collisions between hostDirective inputs and component inputs.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: README.md:0-0
Timestamp: 2025-12-21T00:11:44.620Z
Learning: Use Angular, TailwindCSS, and TypeScript as the primary technology stack for component development
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/*/doc/*.md : Write component documentation with overview.md for use cases and basic examples, and api.md for complete API reference
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/doc/**/*.md : Write component documentation in `doc/overview.md` and `doc/api.md` files
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-11-04T10:18:55.477Z
Learnt from: mihajm
Repo: zard-ui/zardui PR: 308
File: libs/zard/src/lib/components/button-group/doc/overview.md:1-3
Timestamp: 2025-11-04T10:18:55.477Z
Learning: In zardui repo, doc/overview.md files for components should contain only a brief overview description. Examples are provided through separate demo files and the api.md documentation, not in overview.md.
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-12-13T11:50:56.310Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:56.310Z
Learning: Do not flag or suggest removing `standalone: true` from test components (*.spec.ts files) or demo components (demo/*.ts files) in libs/zard/src/lib/shared/components/**/*.ts, as it is not a significant concern and the explicit flag is acceptable in these contexts.
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdapps/web/src/server.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/pages/about/about.page.html
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add barrel exports for all new components in libs/zard/src/lib/components/components.ts
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-29T15:31:22.377Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 339
File: libs/zard/src/lib/components/carousel/carousel.component.ts:92-92
Timestamp: 2025-11-29T15:31:22.377Z
Learning: In libs/zard/src/lib/components/**/*.component.ts files using TailwindCSS, avoid suggesting individual class bindings like `[class.fill-primary]="condition"` because they can cause TailwindCSS issues. Prefer string concatenation or `[class]` binding with conditional expressions instead.
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Keep commit messages in present tense, single line format with scope and description (e.g., '✨ feat(popover): add popover component')
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use TailwindCSS utility classes for styling, following responsive design patterns with prefixes for breakpoints (sm:, lg:) and ensure accessibility with semantic HTML and ARIA guidelines
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/server.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/app.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/server.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/app.component.ts
📚 Learning: 2025-11-14T22:52:09.135Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/app/domain/components/doc-content/doc-content.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Ensure components are standalone Angular components
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/app.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/server.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.tsapps/web/src/app/domain/components/doc-content/doc-content.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-11-10T21:46:33.213Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 318
File: libs/zard/src/lib/components/select/demo/default.ts:21-21
Timestamp: 2025-11-10T21:46:33.213Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally showing different patterns (e.g., primitive values vs signals) across different demos is valuable for demonstrating the flexibility of Angular features like two-way binding.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/server.ts
📚 Learning: 2025-12-13T11:50:50.088Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:50.088Z
Learning: Do not flag or require removing standalone: true for test components (*.spec.ts) and demo components (demo/*.ts) within libs/zard/src/lib/shared/components/**.ts. In these contexts, an explicit standalone: true flag is acceptable; apply this exclusion when reviewing files under this path.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/demo/**/*.ts : Create demo components in the `demo/` folder with a main export, default example, and variant examples
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs with `input()` in Angular components
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/server.tsapps/web/src/app/domain/pages/about/about.page.tsapps/web/src/app/domain/components/doc-content/doc-content.component.ts
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block components should use Angular signals for state management (e.g., signal() for loading states) and ReactiveFormsModule for form handling with Validators
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use computed properties in Angular components for reactive class calculations: `protected readonly classes = computed(() => ...)`
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-10-31T10:03:18.563Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/app.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Implement TailwindCSS v4 with PostCSS for styling and use class merging with tailwind-merge to resolve conflicts
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/server.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses()` utility with `clsx` and `tailwind-merge` to resolve class conflicts in component styling
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Refer to `docs/angular-llm.txt` for Angular best practices when developing components
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/server.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/app.component.ts
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block component files must use the .component.ts extension and should be standalone Angular components with explicit imports from ReactiveFormsModule and ZardUI components
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/*/demo/*.ts : Create demo examples in the demo/ folder with structured exports containing name, code, and component properties
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-11-15T21:22:05.244Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 328
File: libs/zard/src/lib/components/select/demo/multi-select.ts:1-1
Timestamp: 2025-11-15T21:22:05.244Z
Learning: In Angular components that use model() for inputs (like zValue in ZardSelectComponent), two-way binding with WritableSignals is fully supported. The pattern [(zValue)]="selectedValues" where selectedValues = signal<string[]>([]) works correctly because model() automatically handles unwrapping and updating the signal.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-11-04T20:46:01.373Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 309
File: libs/zard/src/lib/components/select/demo/multi-select.ts:23-27
Timestamp: 2025-11-04T20:46:01.373Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, console.log statements are acceptable and often intentional to demonstrate reactivity and help users understand how the component works.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-12-21T21:17:39.497Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 383
File: libs/zard/src/lib/shared/components/carousel/carousel.component.ts:114-115
Timestamp: 2025-12-21T21:17:39.497Z
Learning: In Angular components that use signal inputs (Input()) with types from external libraries (e.g., Embla Carousel), add explicit type annotations to prevent TypeScript IDE errors about inferred types referencing non-portable node_modules paths. For example, declare a readonly typed input like: readonly zOptions: InputSignal<EmblaOptionsType> = input<EmblaOptionsType>(...). This explicit annotation helps avoid the error cannot be named without a reference to node_modules. Apply this pattern to components in the shared carousel area (and similar components) whenever an external library type is used in an InputSignal to ensure type safety and IDE compatibility.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-15T11:43:06.831Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 373
File: libs/zard/src/lib/shared/components/select/select.component.ts:33-33
Timestamp: 2025-12-15T11:43:06.831Z
Learning: In files under libs/zard/src/lib/**/*.{ts,tsx,js}, prefer the @/ path alias for imports that map to libs/zard/src/lib/* directories. For example, write import { mergeClasses } from '@/shared/utils/merge-classes' instead of using the 'zard/' alias. This improves path readability and aligns with the project's alias configuration.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-30T19:07:11.572Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/app.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding for dynamic classes in components: `host: { '[class]': 'classes()' }`
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-13T18:05:35.468Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 324
File: libs/zard/src/lib/components/breadcrumb/breadcrumb.component.ts:34-60
Timestamp: 2025-11-13T18:05:35.468Z
Learning: In breadcrumb item components using RouterLink hostDirectives for host navigation, inject the RouterLink directive and use its `href` property for anchor elements to display URLs on hover, avoiding naming collisions between hostDirective inputs and component inputs.
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-12-21T00:11:44.620Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: README.md:0-0
Timestamp: 2025-12-21T00:11:44.620Z
Learning: Use Angular, TailwindCSS, and TypeScript as the primary technology stack for component development
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx} : Components should be designed specifically for the Angular ecosystem and follow Angular conventions
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding with computed classes for dynamic class application
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T21:17:39.497Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 383
File: libs/zard/src/lib/shared/components/carousel/carousel.component.ts:114-115
Timestamp: 2025-12-21T21:17:39.497Z
Learning: In Angular components using signal inputs (input()) with types from external libraries like Embla Carousel, explicit type annotations (e.g., `readonly zOptions: InputSignal<EmblaOptionsType> = input<EmblaOptionsType>(...)`) may be necessary to prevent TypeScript IDE errors about inferred types referencing non-portable node_modules paths. This is not redundant when the annotation prevents the "cannot be named without a reference to node_modules" error.
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-11-19T20:03:29.205Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 320
File: libs/zard/src/lib/components/tooltip/tooltip.ts:82-105
Timestamp: 2025-11-19T20:03:29.205Z
Learning: In the zard-ui/zardui repository, non-null assertion operator (!) is forbidden by ESLint rule "Forbidden non-null assertion". Use type assertions (e.g., `(value as Type)`) instead when narrowing types after null/undefined checks.
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-12-04T15:03:56.958Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 361
File: libs/zard/src/lib/components/pagination/demo/custom.ts:19-22
Timestamp: 2025-12-04T15:03:56.958Z
Learning: In pagination demos under libs/zard/src/lib/components/pagination/demo/*.ts, the pattern `<span class="sr-only">To page</span>{{ page }}` is correct for accessible button labels. Screen readers read both the sr-only text and the visible page number together, while visual users see only the page number. This approach is intentional and should not be flagged.
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for typed variants in component styling
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for type-safe styling variants in components
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use mergeClasses utility from zard/shared/utils for combining CVA variants with custom classes
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/**/*.{css,ts} : Use CSS custom properties for design tokens and theming in the component library
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/styles.css
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/src/styles.css : Set up `src/styles.css` with Tailwind CSS configuration and design tokens using CSS `theme` and `plugin` directives
Applied to files:
apps/web/src/styles.css
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx,css} : Components should include built-in dark mode support
Applied to files:
apps/web/src/styles.css
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/apps/web/public/blocks/**/*.png : Block preview images must be provided in both light and dark theme variants as PNG files at the specified paths (apps/web/public/blocks/[block-id]/light.png and dark.png) with minimum resolution of 1920x1080
Applied to files:
apps/web/src/styles.css
📚 Learning: 2025-12-25T11:10:09.078Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 384
File: apps/web/src/styles.css:213-213
Timestamp: 2025-12-25T11:10:09.078Z
Learning: In Tailwind CSS v4, max-width utilities support dynamic numeric values derived from the spacing scale (using the --spacing variable, default 0.25rem = 4px). Prefer using numeric classes like max-w-350 when the value aligns with the spacing scale, since 350 × 0.25rem = 87.5rem = 1400px. Avoid arbitrary values expressed with brackets (e.g., max-w-[1400px]) when a scale-based value is available and accurate. Apply this guidance to CSS files in the web app (e.g., apps/web/src/styles.css) and across the codebase where Tailwind is used.
Applied to files:
apps/web/src/styles.css
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/tsconfig.json : Configure TypeScript path mappings in `tsconfig.json` with `@/*` alias pointing to `src/app/*` for clean imports
Applied to files:
apps/web/src/server.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Follow PR checklist including: passing tests, code pattern compliance, updated documentation, working demos, no lint/typecheck warnings, linked issues, conventional commit in title
Applied to files:
apps/web/src/server.ts
📚 Learning: 2025-11-30T08:50:23.436Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/core/providezard.ts:0-0
Timestamp: 2025-11-30T08:50:23.436Z
Learning: In libs/zard/src/lib/components/core/providezard.ts, the import paths `../core/event-manager-plugins/...` are intentionally structured this way because the ZardUI CLI transforms them to 'shared/components/core/event-manager-plugins/...' format. Other relative path combinations don't work with the current CLI implementation. This path pattern should not be simplified until the CLI transformation logic is updated.
Applied to files:
apps/web/src/server.ts
📚 Learning: 2025-11-30T13:27:41.206Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/popover/popover.component.ts:28-29
Timestamp: 2025-11-30T13:27:41.206Z
Learning: In libs/zard/src/lib/components/core/**/*.ts files (core utilities, plugins, and providers), use relative imports for intra-core dependencies because the ZardUI CLI performs path transformations during component installation. The CLI expects specific relative path patterns and transforms them to the target project structure. For all other component imports and application code, use zard/* path aliases.
Applied to files:
libs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.html
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Block template files must use ZardUI form components (ZardFormFieldComponent, ZardFormLabelComponent, ZardFormControlComponent) for form validation and error handling
Applied to files:
libs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-26T11:20:45.264Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/select/select.component.spec.ts:79-88
Timestamp: 2025-11-26T11:20:45.264Z
Learning: In ZardUI select component tests (libs/zard/src/lib/components/select/select.component.spec.ts), use fakeAsync() with flush() instead of setTimeout because the component uses setTimeout(..., 0) for focus management, which requires advancing macrotasks in tests.
Applied to files:
apps/web/src/app/app.component.ts
🧬 Code graph analysis (4)
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (1)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
getHeaderOffset(7-23)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
apps/web/src/app/domain/directives/scroll-spy-item.directive.ts (1)
Directive(3-10)
apps/web/src/app/domain/components/doc-content/doc-content.component.ts (1)
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (1)
NavigationConfig(14-16)
apps/web/src/app/app.component.ts (1)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
getHeaderOffset(7-23)
🔇 Additional comments (26)
apps/web/src/server.ts (1)
227-227: LGTM! Correct Express v5+ catch-all pattern.The
/*splatpattern is the proper solution for Express v5+ with the newer path-to-regexp library. This resolves the "Missing parameter name at index 1: *" error you encountered because:
- Express v5+ requires named wildcards for catch-all routes (e.g.,
/*splat,/*catchAll)- The unnamed
*pattern is no longer supported**is glob syntax, not valid Express routingapp.get()correctly restricts this to GET requests only (proper for SSR)This pattern will match all routes and pass them to Angular's SSR engine as intended.
libs/zard/src/lib/shared/components/icon/demo/searchable.ts (6)
1-1: LGTM! OnPush change detection added correctly.The component now uses
ChangeDetectionStrategy.OnPush, which is the recommended pattern for signal-based reactivity. This optimizes rendering performance by only checking for changes when inputs change or events fire.Based on learnings, OnPush is required for all components in this project.
Also applies to: 74-74
13-13: LGTM! CommonModule correctly removed.The component uses Angular's built-in control flow (
@for,@if) and doesn't need CommonModule. The imports are clean and contain only the required standalone components and directives.
49-49: LGTM! Consistent use of Tailwind numeric scale.The change from
max-h-[600px]tomax-h-150uses Tailwind's standard numeric scale (150 × 0.25rem = 37.5rem = 600px) and is more consistent with the framework's conventions.
52-52: LGTM! Explicit button type prevents form submission.Adding
type="button"is an excellent practice that prevents the button from accidentally submitting a form if this component is used within a form context.
56-56: LGTM! Consistent use of Tailwind fractional numeric scale.The change from
min-h-[70px]tomin-h-17.5uses Tailwind's fractional numeric scale (17.5 × 0.25rem = 4.375rem = 70px) and aligns with the framework's conventions.
76-114: LGTM! Signal-based reactivity and error handling are well implemented.The component correctly uses:
signal()for mutable state (searchQuery)computed()for derived state (filteredIcons)- Modern Clipboard API with proper error handling
- User-friendly toast notifications for feedback
The implementation is clean, reactive, and handles edge cases appropriately.
apps/web/src/app/domain/components/doc-content/doc-content.component.html (1)
2-15: LGTM! Signal-based bindings correctly implemented.The template properly calls signal functions (
activeAnchor(),navigationConfig()) and the truthiness check on line 2 correctly handles thestring | undefinedtype. All previous issues have been addressed.apps/web/src/styles.css (2)
57-60: LGTM! Shiki theme configuration is correct.The CSS variable structure properly establishes concrete theme identifiers (
github-light,github-dark) and wires them through a single--shiki-themevariable. The circular reference and unnecessary quotes issues from previous reviews have been resolved.
103-103: LGTM! Dark mode theme override properly configured.The
.darkclass correctly overrides--shiki-themeto use the dark variant, completing the theme-switching logic.apps/web/src/app/domain/components/doc-content/doc-content.component.ts (1)
1-14: LGTM! Component properly modernized for Angular 21.The component correctly uses signal-based inputs with
input(), provides sensible defaults fornavigationConfig, and properly typesactiveAnchorasstring | undefined. The removal of lifecycle hooks and ViewportScroller simplifies the component appropriately.apps/web/src/app/app.component.ts (1)
20-51: LGTM! Router scroll restoration properly implemented.The component correctly:
- Uses
inject()for dependency injection following Angular 21 patterns- Guards scroll logic with
isPlatformBrowserfor SSR safety- Applies header-aware offset via
getHeaderOffset(true)- Uses
Math.max(0, yScrollPosition)to prevent negative scroll positions (previous bug fixed)- Properly cleans up with
takeUntilDestroyedThe
LOADING_TIMEOUTlogic is appropriate for waiting for async content to render on component documentation pages before calculating anchor positions.apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (1)
23-51: LGTM! Component properly modernized with platform-safe scrolling.The component correctly:
- Uses
inject()for all dependencies- Guards DOM access with
isPlatformBrowser- Changes
activeAnchorfrommodel()toinput<string | undefined>()for unidirectional data flow- Implements header-aware scrolling with
getHeaderOffset(this.isBrowser)- Uses
Math.max(0, yScrollPosition)to prevent negative scroll positions (previous issue resolved)apps/web/src/app/domain/pages/about/about.page.ts (2)
39-45: LGTM! OnPush strategy and signal-based state correctly implemented.The component properly adopts
ChangeDetectionStrategy.OnPushfor performance and uses a signal foractiveAnchorstate management, aligning with Angular 21 best practices.
86-86: LGTM! Typo fixed in navigation config.The ID correctly changed from
mantainerstomaintainers, ensuring consistency with the template and proper anchor navigation.apps/web/src/app/domain/directives/scroll-spy.directive.ts (2)
6-23: LGTM! Header offset utility correctly implemented with caching.The
getHeaderOffsetfunction properly:
- Caches the header height for performance
- Guards DOM access with the
isBrowsercheck for SSR safety- Falls back to a sensible default (56px) during SSR
- Optimizes by assuming constant header height
The direct
documentaccess on line 14 is acceptable since it's guarded by theisBrowsercheck, and all current callers (AppComponent, DynamicAnchorComponent) correctly pass the platform state.
25-78: LGTM! Directive modernized with signals and best practices.The directive correctly:
- Uses
output<string>()instead of EventEmitter for Angular 21 patterns- Moves event handling to
hostbinding (line 28)- Injects
DOCUMENTand platform tokens for SSR safety- Implements rAF throttling in
onScroll()to prevent excessive processing- Makes
headerOffsetconfigurable viainput()with fallback togetHeaderOffset- Uses
this.documentinstead of globaldocumentfor DOM access- Tracks current section to emit only on changes
apps/web/src/app/domain/pages/about/about.page.html (2)
1-6: LGTM! Signal bindings and native directives properly implemented.The template correctly:
- Calls
activeAnchor()to read the signal value- Uses
activeAnchor.set($event)for updates- Applies the
scrollSpydirective for scroll tracking
34-39: LGTM! Modern control flow with @let and async pipe.The template properly uses Angular 21's native control flow:
@letdeclarations for async observable results@if/@elsefor conditional rendering- Self-closing component tags for consistency
The maintainers section ID was correctly updated from
mantainerstomaintainers, matching the TypeScript navigation config.Also applies to: 50-55, 67-72
libs/zard/src/lib/shared/components/tabs/tabs.component.ts (6)
1-1: LGTM: Specific import improves tree-shaking.Importing
NgTemplateOutletdirectly instead ofCommonModulereduces bundle size and aligns with Angular best practices.
43-43: LGTM: OnPush strategy added for optimal performance.Adding
ChangeDetectionStrategy.OnPushaligns with project guidelines and improves component performance by reducing unnecessary change detection cycles.
53-53: LGTM: Updated imports align with template requirements.The imports array correctly specifies
NgTemplateOutlet,ZardButtonComponent, andZardIconComponentfor the component's template dependencies.
112-112: LGTM: Explicit button type prevents form submission.Adding
type="button"prevents unintended form submissions when buttons are clicked inside forms.
228-230: LGTM: Robust SSR/browser compatibility guard.The explicit checks for
windowandResizeObserveravailability with an early return ensure the component handles SSR and older browsers gracefully.
235-237: LGTM: Proper cleanup before reobserving.Explicitly unobserving the previous element before observing the new one prevents memory leaks and multiple simultaneous observations.
libs/zard/src/lib/shared/components/tabs/doc/overview.md (1)
4-5: LGTM: Helpful UX guidance for component selection.The note appropriately directs users to the segmented component for a shadcn/ui-like experience, improving discoverability. The grammar correction from the previous review has been applied.
mikij
force-pushed
the
update-project-angular21
branch
from
1a7f80f to
72547e6
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
libs/zard/src/lib/shared/components/table/table.variants.ts (1)
48-54: Invalid CSS selector syntax with double brackets.The selector
*:[[role=checkbox]]uses non-standard double-bracket notation. CSS attribute selectors require single brackets:[attribute=value]. This will prevent the translate-y-0.5 transform from applying to checkbox elements.🔎 Proposed fix
export const tableCellVariants = cva( - 'p-2 align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5', + 'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&_[role=checkbox]]:translate-y-0.5', { variants: {}, defaultVariants: {}, }, );Alternative selectors depending on intended scope:
[&_[role=checkbox]]— any descendant with role=checkbox[&>*[role=checkbox]]— direct children with role=checkbox[&_*[role=checkbox]]— any descendant element with role=checkboxapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (1)
18-22: AddChangeDetectionStrategy.OnPushfor consistency.This component uses signal-based inputs with
input()but is missingOnPushchange detection. All sibling components in this PR (AppComponent,DocContentComponent,AboutPage) have adoptedOnPush.🔎 Proposed fix
+import { ChangeDetectionStrategy } from '@angular/core'; + @Component({ selector: 'z-dynamic-anchor', imports: [TitleCasePipe, HyphenToSpacePipe], templateUrl: './dynamic-anchor.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, })Based on learnings: Use
ChangeDetectionStrategy.OnPushfor performance optimization in components.
♻️ Duplicate comments (3)
libs/zard/src/lib/shared/components/table/table.variants.ts (1)
40-46: Invalid CSS selector syntax remains unresolved.This issue was previously flagged: the selector
*:[[role=checkbox]]uses double-bracket notation, which is not valid CSS syntax. Attribute selectors require single brackets. This will prevent the translate-y-0.5 style from applying to checkbox elements.🔎 Proposed fix
export const tableHeadVariants = cva( - 'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5', + 'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&_[role=checkbox]]:translate-y-0.5', { variants: {}, defaultVariants: {}, }, );apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
6-23: Module-leveldocumentaccess bypasses Angular's DI.The
getHeaderOffsetfunction uses the globaldocumentdirectly (line 14) rather than the injectedDOCUMENTtoken. While theisBrowserguard prevents SSR crashes, this creates inconsistency—the directive itself properly injectsDOCUMENT(line 32).🔎 Optional: Accept document as parameter for consistency
-export const getHeaderOffset = (isBrowser: boolean): number => { +export const getHeaderOffset = (isBrowser: boolean, doc: Document = document): number => { // optimization assumes that header have constant height if (headerHeight !== -1) { return headerHeight; } if (isBrowser) { - const headerElement = document.querySelector('header'); + const headerElement = doc.querySelector('header'); if (headerElement) { headerHeight = headerElement.offsetHeight; }Then callers can pass
this.documentwhen available.This is a minor consistency nit—the current code is SSR-safe due to the
isBrowserguard.libs/zard/src/lib/shared/components/icon/demo/searchable.ts (1)
61-61: Replace invalidwrap-break-wordwith standardbreak-wordsutility.The class
wrap-break-wordis not a valid Tailwind utility and will have no effect. Use the standardbreak-wordsutility to enable word wrapping on long icon names.🔎 Proposed fix
- class="group-hover:text-foreground w-full text-center text-xs leading-relaxed wrap-break-word hyphens-auto transition-colors" + class="group-hover:text-foreground w-full text-center text-xs leading-relaxed break-words hyphens-auto transition-colors"
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (17)
apps/web/public/components/icon/demo/searchable.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/components/tabs/doc/overview.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/table.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/tabs.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/accordion.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/breadcrumb.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/carousel.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/command.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/form.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/layout.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/pagination.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/registry.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/resizable.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/select.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/sheet.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/table.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/tabs.jsonis excluded by!apps/web/public/**and included byapps/**
📒 Files selected for processing (13)
apps/web/src/app/app.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/app/domain/pages/about/about.page.htmlapps/web/src/app/domain/pages/about/about.page.tsapps/web/src/server.tsapps/web/src/styles.csslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/tabs/tabs.component.ts
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use path aliases @zard/* to map to libs/zard/src/lib/* in imports
Files:
apps/web/src/server.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tslibs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
libs/zard/**/*.{css,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Use CSS custom properties for design tokens and theming in the component library
Files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
🧠 Learnings (54)
📓 Common learnings
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Follow PR checklist including: passing tests, code pattern compliance, updated documentation, working demos, no lint/typecheck warnings, linked issues, conventional commit in title
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: README.md:0-0
Timestamp: 2025-12-21T00:11:44.620Z
Learning: Use Angular, TailwindCSS, and TypeScript as the primary technology stack for component development
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Learnt from: mikij
Repo: zard-ui/zardui PR: 324
File: libs/zard/src/lib/components/breadcrumb/breadcrumb.component.ts:34-60
Timestamp: 2025-11-13T18:05:35.468Z
Learning: In breadcrumb item components using RouterLink hostDirectives for host navigation, inject the RouterLink directive and use its `href` property for anchor elements to display URLs on hover, avoiding naming collisions between hostDirective inputs and component inputs.
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/tsconfig.json : Configure TypeScript path mappings in `tsconfig.json` with `@/*` alias pointing to `src/app/*` for clean imports
Applied to files:
apps/web/src/server.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Applied to files:
apps/web/src/server.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Follow PR checklist including: passing tests, code pattern compliance, updated documentation, working demos, no lint/typecheck warnings, linked issues, conventional commit in title
Applied to files:
apps/web/src/server.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Applied to files:
apps/web/src/server.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-11-10T21:46:33.213Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 318
File: libs/zard/src/lib/components/select/demo/default.ts:21-21
Timestamp: 2025-11-10T21:46:33.213Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally showing different patterns (e.g., primitive values vs signals) across different demos is valuable for demonstrating the flexibility of Angular features like two-way binding.
Applied to files:
apps/web/src/server.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Applied to files:
apps/web/src/server.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Refer to `docs/angular-llm.txt` for Angular best practices when developing components
Applied to files:
apps/web/src/server.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/app.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-12-13T11:50:56.310Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:56.310Z
Learning: Do not flag or suggest removing `standalone: true` from test components (*.spec.ts files) or demo components (demo/*.ts files) in libs/zard/src/lib/shared/components/**/*.ts, as it is not a significant concern and the explicit flag is acceptable in these contexts.
Applied to files:
apps/web/src/server.tsapps/web/src/app/domain/pages/about/about.page.html
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs with `input()` in Angular components
Applied to files:
apps/web/src/server.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Implement TailwindCSS v4 with PostCSS for styling and use class merging with tailwind-merge to resolve conflicts
Applied to files:
apps/web/src/server.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-11-30T08:50:23.436Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/core/providezard.ts:0-0
Timestamp: 2025-11-30T08:50:23.436Z
Learning: In libs/zard/src/lib/components/core/providezard.ts, the import paths `../core/event-manager-plugins/...` are intentionally structured this way because the ZardUI CLI transforms them to 'shared/components/core/event-manager-plugins/...' format. Other relative path combinations don't work with the current CLI implementation. This path pattern should not be simplified until the CLI transformation logic is updated.
Applied to files:
apps/web/src/server.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-30T19:07:11.572Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-14T22:52:09.135Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tslibs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/app.component.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-10-31T10:03:18.563Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding for dynamic classes in components: `host: { '[class]': 'classes()' }`
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-13T18:05:35.468Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 324
File: libs/zard/src/lib/components/breadcrumb/breadcrumb.component.ts:34-60
Timestamp: 2025-11-13T18:05:35.468Z
Learning: In breadcrumb item components using RouterLink hostDirectives for host navigation, inject the RouterLink directive and use its `href` property for anchor elements to display URLs on hover, avoiding naming collisions between hostDirective inputs and component inputs.
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding with computed classes for dynamic class application
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:11:44.620Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: README.md:0-0
Timestamp: 2025-12-21T00:11:44.620Z
Learning: Use Angular, TailwindCSS, and TypeScript as the primary technology stack for component development
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Ensure components are standalone Angular components
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx} : Components should be designed specifically for the Angular ecosystem and follow Angular conventions
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for typed variants in component styling
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for type-safe styling variants in components
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use mergeClasses utility from zard/shared/utils for combining CVA variants with custom classes
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-29T15:31:22.377Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 339
File: libs/zard/src/lib/components/carousel/carousel.component.ts:92-92
Timestamp: 2025-11-29T15:31:22.377Z
Learning: In libs/zard/src/lib/components/**/*.component.ts files using TailwindCSS, avoid suggesting individual class bindings like `[class.fill-primary]="condition"` because they can cause TailwindCSS issues. Prefer string concatenation or `[class]` binding with conditional expressions instead.
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/about/about.page.html
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use TailwindCSS utility classes for styling, following responsive design patterns with prefixes for breakpoints (sm:, lg:) and ensure accessibility with semantic HTML and ARIA guidelines
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses()` utility with `clsx` and `tailwind-merge` to resolve class conflicts in component styling
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/**/*.{css,ts} : Use CSS custom properties for design tokens and theming in the component library
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/styles.css
📚 Learning: 2025-11-19T20:03:29.205Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 320
File: libs/zard/src/lib/components/tooltip/tooltip.ts:82-105
Timestamp: 2025-11-19T20:03:29.205Z
Learning: In the zard-ui/zardui repository, non-null assertion operator (!) is forbidden by ESLint rule "Forbidden non-null assertion". Use type assertions (e.g., `(value as Type)`) instead when narrowing types after null/undefined checks.
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-12-13T11:50:50.088Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:50.088Z
Learning: Do not flag or require removing standalone: true for test components (*.spec.ts) and demo components (demo/*.ts) within libs/zard/src/lib/shared/components/**.ts. In these contexts, an explicit standalone: true flag is acceptable; apply this exclusion when reviewing files under this path.
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-12-21T21:17:39.497Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 383
File: libs/zard/src/lib/shared/components/carousel/carousel.component.ts:114-115
Timestamp: 2025-12-21T21:17:39.497Z
Learning: In Angular components that use signal inputs (Input()) with types from external libraries (e.g., Embla Carousel), add explicit type annotations to prevent TypeScript IDE errors about inferred types referencing non-portable node_modules paths. For example, declare a readonly typed input like: readonly zOptions: InputSignal<EmblaOptionsType> = input<EmblaOptionsType>(...). This explicit annotation helps avoid the error cannot be named without a reference to node_modules. Apply this pattern to components in the shared carousel area (and similar components) whenever an external library type is used in an InputSignal to ensure type safety and IDE compatibility.
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-12-15T11:43:06.831Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 373
File: libs/zard/src/lib/shared/components/select/select.component.ts:33-33
Timestamp: 2025-12-15T11:43:06.831Z
Learning: In files under libs/zard/src/lib/**/*.{ts,tsx,js}, prefer the @/ path alias for imports that map to libs/zard/src/lib/* directories. For example, write import { mergeClasses } from '@/shared/utils/merge-classes' instead of using the 'zard/' alias. This improves path readability and aligns with the project's alias configuration.
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-12-21T21:17:39.497Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 383
File: libs/zard/src/lib/shared/components/carousel/carousel.component.ts:114-115
Timestamp: 2025-12-21T21:17:39.497Z
Learning: In Angular components using signal inputs (input()) with types from external libraries like Embla Carousel, explicit type annotations (e.g., `readonly zOptions: InputSignal<EmblaOptionsType> = input<EmblaOptionsType>(...)`) may be necessary to prevent TypeScript IDE errors about inferred types referencing non-portable node_modules paths. This is not redundant when the annotation prevents the "cannot be named without a reference to node_modules" error.
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-12-04T15:03:56.958Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 361
File: libs/zard/src/lib/components/pagination/demo/custom.ts:19-22
Timestamp: 2025-12-04T15:03:56.958Z
Learning: In pagination demos under libs/zard/src/lib/components/pagination/demo/*.ts, the pattern `<span class="sr-only">To page</span>{{ page }}` is correct for accessible button labels. Screen readers read both the sr-only text and the visible page number together, while visual users see only the page number. This approach is intentional and should not be flagged.
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-26T11:20:45.264Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/select/select.component.spec.ts:79-88
Timestamp: 2025-11-26T11:20:45.264Z
Learning: In ZardUI select component tests (libs/zard/src/lib/components/select/select.component.spec.ts), use fakeAsync() with flush() instead of setTimeout because the component uses setTimeout(..., 0) for focus management, which requires advancing macrotasks in tests.
Applied to files:
apps/web/src/app/app.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/*/doc/*.md : Write component documentation with overview.md for use cases and basic examples, and api.md for complete API reference
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/doc/**/*.md : Write component documentation in `doc/overview.md` and `doc/api.md` files
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-11-04T10:18:55.477Z
Learnt from: mihajm
Repo: zard-ui/zardui PR: 308
File: libs/zard/src/lib/components/button-group/doc/overview.md:1-3
Timestamp: 2025-11-04T10:18:55.477Z
Learning: In zardui repo, doc/overview.md files for components should contain only a brief overview description. Examples are provided through separate demo files and the api.md documentation, not in overview.md.
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Keep commit messages in present tense, single line format with scope and description (e.g., '✨ feat(popover): add popover component')
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block components should use Angular signals for state management (e.g., signal() for loading states) and ReactiveFormsModule for form handling with Validators
Applied to files:
apps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-11-15T21:22:05.244Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 328
File: libs/zard/src/lib/components/select/demo/multi-select.ts:1-1
Timestamp: 2025-11-15T21:22:05.244Z
Learning: In Angular components that use model() for inputs (like zValue in ZardSelectComponent), two-way binding with WritableSignals is fully supported. The pattern [(zValue)]="selectedValues" where selectedValues = signal<string[]>([]) works correctly because model() automatically handles unwrapping and updating the signal.
Applied to files:
apps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use computed properties in Angular components for reactive class calculations: `protected readonly classes = computed(() => ...)`
Applied to files:
apps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block component files must use the .component.ts extension and should be standalone Angular components with explicit imports from ReactiveFormsModule and ZardUI components
Applied to files:
apps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-11-30T13:27:41.206Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/popover/popover.component.ts:28-29
Timestamp: 2025-11-30T13:27:41.206Z
Learning: In libs/zard/src/lib/components/core/**/*.ts files (core utilities, plugins, and providers), use relative imports for intra-core dependencies because the ZardUI CLI performs path transformations during component installation. The CLI expects specific relative path patterns and transforms them to the target project structure. For all other component imports and application code, use zard/* path aliases.
Applied to files:
libs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
Applied to files:
libs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add barrel exports for all new components in libs/zard/src/lib/components/components.ts
Applied to files:
libs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Block template files must use ZardUI form components (ZardFormFieldComponent, ZardFormLabelComponent, ZardFormControlComponent) for form validation and error handling
Applied to files:
libs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/demo/**/*.ts : Create demo components in the `demo/` folder with a main export, default example, and variant examples
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/*/demo/*.ts : Create demo examples in the demo/ folder with structured exports containing name, code, and component properties
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-11-04T20:46:01.373Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 309
File: libs/zard/src/lib/components/select/demo/multi-select.ts:23-27
Timestamp: 2025-11-04T20:46:01.373Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, console.log statements are acceptable and often intentional to demonstrate reactivity and help users understand how the component works.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx,css} : Components should include built-in dark mode support
Applied to files:
apps/web/src/styles.css
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/src/styles.css : Set up `src/styles.css` with Tailwind CSS configuration and design tokens using CSS `theme` and `plugin` directives
Applied to files:
apps/web/src/styles.css
📚 Learning: 2025-12-25T11:10:09.078Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 384
File: apps/web/src/styles.css:213-213
Timestamp: 2025-12-25T11:10:09.078Z
Learning: In Tailwind CSS v4, max-width utilities support dynamic numeric values derived from the spacing scale (using the --spacing variable, default 0.25rem = 4px). Prefer using numeric classes like max-w-350 when the value aligns with the spacing scale, since 350 × 0.25rem = 87.5rem = 1400px. Avoid arbitrary values expressed with brackets (e.g., max-w-[1400px]) when a scale-based value is available and accurate. Apply this guidance to CSS files in the web app (e.g., apps/web/src/styles.css) and across the codebase where Tailwind is used.
Applied to files:
apps/web/src/styles.css
🧬 Code graph analysis (4)
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (1)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
getHeaderOffset(7-23)
apps/web/src/app/app.component.ts (1)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
getHeaderOffset(7-23)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
apps/web/src/app/domain/directives/scroll-spy-item.directive.ts (1)
Directive(3-10)
apps/web/src/app/domain/pages/about/about.page.ts (1)
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (1)
NavigationConfig(14-16)
🔇 Additional comments (19)
apps/web/src/styles.css (1)
57-59: LGTM! Shiki theme configuration is correct.The explicit
--shiki--lightand--shiki--darkvariables with unquoted identifiers properly resolve the circular reference issue flagged in previous reviews. The cascade is clean::rootdefaults to light via line 59, and.darkoverrides to dark via line 103.Also applies to: 103-103
libs/zard/src/lib/shared/components/tabs/tabs.component.ts (4)
1-1: LGTM: Import optimization and path aliases applied correctly.Excellent migration work:
- Switched from
CommonModuleto the specificNgTemplateOutletimport (lighter bundle)- Updated to
@/path aliases for internal components per project guidelines- All imports properly typed and organized
Also applies to: 28-35
40-54: LGTM: Clean Angular 21 migration with OnPush strategy.ZardTabComponent correctly implements Angular 21 best practices:
ChangeDetectionStrategy.OnPushfor performance ✓- Signal-based
input()for reactive properties ✓viewChild()for template reference ✓standalone: truecorrectly removed (Angular 21 default) ✓
56-152: LGTM: Exemplary Angular 21 template modernization.ZardTabGroupComponent demonstrates excellent Angular 21 patterns:
- Updated imports to
NgTemplateOutletwith specific component imports ✓- Native
@if/@forcontrol flow syntax ✓[class]bindings replace[ngClass](recommended pattern) ✓type="button"on all interactive buttons (prevents form submission) ✓- Proper ARIA attributes and role="tab"/"tabpanel" semantics ✓
- String concatenation for conditional Tailwind classes (recommended for compatibility) ✓
174-251: LGTM: Robust signal-based reactivity with proper SSR guards.Component logic implements Angular 21 best practices:
inject()for dependency injection (no constructor) ✓- Signal-based reactivity:
signal(),computed(),input(),output()✓- Lines 229-231: Proper SSR guard checking
windowandResizeObserveravailability ✓- Lines 236-238: Correct ResizeObserver lifecycle (unobserve before re-observing) ✓
- CVA variants with
twMerge/clsxfor type-safe styling ✓- Proper cleanup with
destroyRef.onDestroy()✓apps/web/src/server.ts (1)
227-240: LGTM! Correct Express 5 catch-all pattern.
/*splatis the proper Express 5 / path-to-regexp syntax for catch-all routes since unnamed wildcards (*) are no longer supported. The SSR rendering logic withCommonEngineremains intact and correctly providesAPP_BASE_HREF.apps/web/src/app/domain/components/doc-content/doc-content.component.html (1)
1-18: Excellent signal-based template bindings!The template correctly adopts Angular 21 patterns:
activeAnchor()properly invokes the signal instead of accessing.lengthon the functionnavigationConfig()andonAnchorClick()bindings align with the updatedinput()declarations- The
@ifcontrol flow is used appropriately for conditional renderingClean migration to signal-based reactivity. 🎯
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (1)
23-51: Clean DI and scroll handling implementation.Solid Angular 21 patterns:
inject()for all dependencies instead of constructor injection ✓- Platform-aware DOM access via
DOCUMENTtoken ✓isBrowsercheck computed once at initialization ✓- Correct scroll calculation with
Math.max(0, yScrollPosition)✓The
getHeaderOffsetintegration aligns with the shared utility inscroll-spy.directive.ts.apps/web/src/app/app.component.ts (1)
12-50: Excellent Angular 21 migration with proper SSR handling.This implementation hits all the marks:
ChangeDetectionStrategy.OnPush✓inject()for all dependencies ✓takeUntilDestroyed()for automatic subscription cleanup ✓isPlatformBrowser()guard prevents SSR issues ✓getHeaderOffset(true)aligns with the shared utility ✓Math.max(0, yScrollPosition)correctly prevents negative scroll positions ✓The
LOADING_TIMEOUTfordocs/componentsroutes is intentional to allow async content to render before calculating anchor positions.apps/web/src/app/domain/pages/about/about.page.ts (2)
39-45: Signal-based state and OnPush detection—nicely done!The migration to Angular 21 patterns is clean:
ChangeDetectionStrategy.OnPush✓inject()for service dependencies ✓signal<string | undefined>(undefined)for reactive state ✓This pairs perfectly with the template's
activeAnchor()call andactiveAnchor.set($event)pattern.
82-90: Typo fix applied correctly.The navigation config
id: 'maintainers'now matches the correctedscrollSpyItem="maintainers"andid="maintainers"in the template.apps/web/src/app/domain/pages/about/about.page.html (2)
1-6: Perfect signal integration in template bindings.The
z-contentbindings demonstrate proper Angular 21 signal usage:
[activeAnchor]="activeAnchor()"— reads the signal value(scrollSpyChange)="activeAnchor.set($event)"— updates via signal's.set()methodCombined with
scrollSpyattribute directive, this creates a clean reactive flow.
34-72: Modern control flow with@letand@ifblocks.Clean Angular 17+ native control flow:
@let founders = founders$ | async;cleanly unwraps observables@if (founders) { ... } @else { ... }replaces*ngIfstructural directives- Self-closing loading components (
<z-founders-loading />) maintain consistencyThis is the recommended pattern for Angular 21.
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
25-77: Solid directive modernization withhost: {}and signal APIs.Excellent Angular 21 patterns throughout:
host: { '(window:scroll)': 'onScroll()' }replaces@HostListener✓inject(DOCUMENT)andinject(PLATFORM_ID)for safe DI ✓output<string>()signal-based output replaces@Output()✓input<number>()signal-based input replaces@Input()✓contentChildren()for descendant queries ✓- RAF throttling prevents excessive scroll processing ✓
- Change detection: emits only when
currentSectionactually changes ✓Based on learnings: Move HostListener to the Component decorator's host property.
apps/web/src/app/domain/components/doc-content/doc-content.component.ts (1)
1-15: Beautifully simplified component with signal inputs.This is a textbook Angular 21 presentational component:
ChangeDetectionStrategy.OnPush✓- Pure
input()signal-based inputs with sensible defaults ✓- No lifecycle hooks needed—purely reactive ✓
readonlymodifiers enforce immutability ✓The removal of
OnInitandViewportScrollerinjection shows good judgment—scroll handling has been lifted to the appropriate level (AppComponentandDynamicAnchorComponent).libs/zard/src/lib/shared/components/icon/demo/searchable.ts (4)
1-9: LGTM! Imports follow Angular 21 patterns.The imports correctly use signal primitives, ChangeDetectionStrategy, and component-based imports without CommonModule. This aligns with the PR's modernization goals.
11-14: LGTM! Component decorator follows Angular 21 best practices.The component correctly uses OnPush change detection with signal-based reactivity and component imports. The OnPush strategy was properly addressed from the previous review.
Also applies to: 74-74
76-114: LGTM! Component class demonstrates excellent Angular 21 patterns.The implementation correctly uses:
- Signal-based state (
signal()andcomputed())- Reactive filtering with computed signals
- Proper error handling for the Clipboard API
- Type-safe icon name inference with
Array<keyof typeof ZARD_ICONS>The code is clean, type-safe, and follows Angular 21 best practices.
49-49: These are valid Tailwind v4 numeric utilities—no custom definition required.The classes
max-h-150andmin-h-17.5are native Tailwind v4 numeric utilities that automatically scale with the--spacingvariable (default0.25rem). They do not require custom configuration and will work correctly:max-h-150= 150 × 0.25rem = 600px;min-h-17.5= 17.5 × 0.25rem = 70px. Remove this concern.Likely an incorrect or invalid review comment.
mikij
force-pushed
the
update-project-angular21
branch
from
72547e6 to
73c5f80
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
libs/zard/src/lib/shared/components/table/table.variants.ts (1)
48-54: Critical: Same invalid CSS selector syntax in cell variants.The selector
*:[[role=checkbox]]is invalid CSS (double brackets). This breaks checkbox alignment in table cells, mirroring the issue intableHeadVariants.🔎 Correct syntax
export const tableCellVariants = cva( - 'p-2 align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5', + 'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', { variants: {}, defaultVariants: {}, }, );Or for any descendant:
- 'p-2 align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5', + 'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&_[role=checkbox]]:translate-y-0.5',Ensure consistency with the fix applied to
tableHeadVariants.
♻️ Duplicate comments (2)
libs/zard/src/lib/shared/components/table/table.variants.ts (1)
40-46: Critical: Invalid CSS selector syntax remains unresolved.The selector
*:[[role=checkbox]]uses invalid double-bracket notation. As flagged in the previous review, CSS attribute selectors require single brackets:[attribute=value]. This will cause the selector to fail completely, breaking checkbox alignment in table headers.🔎 Correct syntax options
export const tableHeadVariants = cva( - 'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5', + 'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', { variants: {}, defaultVariants: {}, }, );Or for any descendant (not just direct children):
- 'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5', + 'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&_[role=checkbox]]:translate-y-0.5',Choose based on whether checkboxes are direct children (
>) or any descendants (_).apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
6-23: Module-level cache and globaldocumentaccess—SSR-safe but inconsistent.The
getHeaderOffsetfunction:
- Uses global
document(line 14) while the directive injectsDOCUMENTtoken- Has module-level mutable state (
headerHeight) that persists across callsPer the past review discussion, this is SSR-safe because the
isBrowserguard prevents thedocumentaccess path during SSR. However, the inconsistency between using theDOCUMENTtoken in the directive and the globaldocumentin the exported function could be confusing for maintainability.🔎 Optional: Accept optional Document parameter for consistency
-export const getHeaderOffset = (isBrowser: boolean): number => { +export const getHeaderOffset = (isBrowser: boolean, doc?: Document): number => { // optimization assumes that header have constant height if (headerHeight !== -1) { return headerHeight; } if (isBrowser) { - const headerElement = document.querySelector('header'); + const targetDoc = doc ?? document; + const headerElement = targetDoc.querySelector('header'); if (headerElement) { headerHeight = headerElement.offsetHeight; } } else { headerHeight = 56; } return headerHeight; };
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (17)
apps/web/public/components/icon/demo/searchable.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/components/tabs/doc/overview.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/table.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/tabs.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/accordion.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/breadcrumb.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/carousel.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/command.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/form.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/layout.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/pagination.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/registry.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/resizable.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/select.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/sheet.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/table.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/tabs.jsonis excluded by!apps/web/public/**and included byapps/**
📒 Files selected for processing (15)
apps/web/src/app/app.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/app/domain/pages/about/about.page.htmlapps/web/src/app/domain/pages/about/about.page.tsapps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/server.tsapps/web/src/styles.csslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/tabs/tabs.component.ts
🧰 Additional context used
📓 Path-based instructions (2)
libs/zard/**/*.{css,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Use CSS custom properties for design tokens and theming in the component library
Files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use path aliases @zard/* to map to libs/zard/src/lib/* in imports
Files:
libs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/server.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/pages/component/component.page.ts
🧠 Learnings (57)
📓 Common learnings
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Follow PR checklist including: passing tests, code pattern compliance, updated documentation, working demos, no lint/typecheck warnings, linked issues, conventional commit in title
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Implement TailwindCSS v4 with PostCSS for styling and use class merging with tailwind-merge to resolve conflicts
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx} : Components should be designed specifically for the Angular ecosystem and follow Angular conventions
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Learnt from: mikij
Repo: zard-ui/zardui PR: 318
File: libs/zard/src/lib/components/select/demo/default.ts:21-21
Timestamp: 2025-11-10T21:46:33.213Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally showing different patterns (e.g., primitive values vs signals) across different demos is valuable for demonstrating the flexibility of Angular features like two-way binding.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: README.md:0-0
Timestamp: 2025-12-21T00:11:44.620Z
Learning: Use Angular, TailwindCSS, and TypeScript as the primary technology stack for component development
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block components should use Angular signals for state management (e.g., signal() for loading states) and ReactiveFormsModule for form handling with Validators
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for typed variants in component styling
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for type-safe styling variants in components
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use mergeClasses utility from zard/shared/utils for combining CVA variants with custom classes
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Implement TailwindCSS v4 with PostCSS for styling and use class merging with tailwind-merge to resolve conflicts
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/server.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-14T22:52:09.135Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/pages/component/component.page.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses()` utility with `clsx` and `tailwind-merge` to resolve class conflicts in component styling
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-29T15:31:22.377Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 339
File: libs/zard/src/lib/components/carousel/carousel.component.ts:92-92
Timestamp: 2025-11-29T15:31:22.377Z
Learning: In libs/zard/src/lib/components/**/*.component.ts files using TailwindCSS, avoid suggesting individual class bindings like `[class.fill-primary]="condition"` because they can cause TailwindCSS issues. Prefer string concatenation or `[class]` binding with conditional expressions instead.
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tslibs/zard/src/lib/shared/components/tabs/doc/overview.mdapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/pages/about/about.page.html
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use TailwindCSS utility classes for styling, following responsive design patterns with prefixes for breakpoints (sm:, lg:) and ensure accessibility with semantic HTML and ARIA guidelines
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/**/*.{css,ts} : Use CSS custom properties for design tokens and theming in the component library
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/styles.css
📚 Learning: 2025-11-19T20:03:29.205Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 320
File: libs/zard/src/lib/components/tooltip/tooltip.ts:82-105
Timestamp: 2025-11-19T20:03:29.205Z
Learning: In the zard-ui/zardui repository, non-null assertion operator (!) is forbidden by ESLint rule "Forbidden non-null assertion". Use type assertions (e.g., `(value as Type)`) instead when narrowing types after null/undefined checks.
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-12-13T11:50:50.088Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:50.088Z
Learning: Do not flag or require removing standalone: true for test components (*.spec.ts) and demo components (demo/*.ts) within libs/zard/src/lib/shared/components/**.ts. In these contexts, an explicit standalone: true flag is acceptable; apply this exclusion when reviewing files under this path.
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T21:17:39.497Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 383
File: libs/zard/src/lib/shared/components/carousel/carousel.component.ts:114-115
Timestamp: 2025-12-21T21:17:39.497Z
Learning: In Angular components that use signal inputs (Input()) with types from external libraries (e.g., Embla Carousel), add explicit type annotations to prevent TypeScript IDE errors about inferred types referencing non-portable node_modules paths. For example, declare a readonly typed input like: readonly zOptions: InputSignal<EmblaOptionsType> = input<EmblaOptionsType>(...). This explicit annotation helps avoid the error cannot be named without a reference to node_modules. Apply this pattern to components in the shared carousel area (and similar components) whenever an external library type is used in an InputSignal to ensure type safety and IDE compatibility.
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-15T11:43:06.831Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 373
File: libs/zard/src/lib/shared/components/select/select.component.ts:33-33
Timestamp: 2025-12-15T11:43:06.831Z
Learning: In files under libs/zard/src/lib/**/*.{ts,tsx,js}, prefer the @/ path alias for imports that map to libs/zard/src/lib/* directories. For example, write import { mergeClasses } from '@/shared/utils/merge-classes' instead of using the 'zard/' alias. This improves path readability and aligns with the project's alias configuration.
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/tsconfig.json : Configure TypeScript path mappings in `tsconfig.json` with `@/*` alias pointing to `src/app/*` for clean imports
Applied to files:
apps/web/src/server.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Applied to files:
apps/web/src/server.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/pages/component/component.page.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Follow PR checklist including: passing tests, code pattern compliance, updated documentation, working demos, no lint/typecheck warnings, linked issues, conventional commit in title
Applied to files:
apps/web/src/server.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Applied to files:
apps/web/src/server.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/component/component.page.ts
📚 Learning: 2025-11-10T21:46:33.213Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 318
File: libs/zard/src/lib/components/select/demo/default.ts:21-21
Timestamp: 2025-11-10T21:46:33.213Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally showing different patterns (e.g., primitive values vs signals) across different demos is valuable for demonstrating the flexibility of Angular features like two-way binding.
Applied to files:
apps/web/src/server.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Applied to files:
apps/web/src/server.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/pages/component/component.page.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Refer to `docs/angular-llm.txt` for Angular best practices when developing components
Applied to files:
apps/web/src/server.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-12-13T11:50:56.310Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:56.310Z
Learning: Do not flag or suggest removing `standalone: true` from test components (*.spec.ts files) or demo components (demo/*.ts files) in libs/zard/src/lib/shared/components/**/*.ts, as it is not a significant concern and the explicit flag is acceptable in these contexts.
Applied to files:
apps/web/src/server.tsapps/web/src/app/domain/pages/about/about.page.html
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs with `input()` in Angular components
Applied to files:
apps/web/src/server.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/pages/about/about.page.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/pages/component/component.page.ts
📚 Learning: 2025-11-30T08:50:23.436Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/core/providezard.ts:0-0
Timestamp: 2025-11-30T08:50:23.436Z
Learning: In libs/zard/src/lib/components/core/providezard.ts, the import paths `../core/event-manager-plugins/...` are intentionally structured this way because the ZardUI CLI transforms them to 'shared/components/core/event-manager-plugins/...' format. Other relative path combinations don't work with the current CLI implementation. This path pattern should not be simplified until the CLI transformation logic is updated.
Applied to files:
apps/web/src/server.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Ensure components are standalone Angular components
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/pages/component/component.page.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/pages/component/component.page.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use computed properties in Angular components for reactive class calculations: `protected readonly classes = computed(() => ...)`
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/component/component.page.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/demo/**/*.ts : Create demo components in the `demo/` folder with a main export, default example, and variant examples
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block components should use Angular signals for state management (e.g., signal() for loading states) and ReactiveFormsModule for form handling with Validators
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/about/about.page.tsapps/web/src/app/domain/pages/component/component.page.ts
📚 Learning: 2025-10-31T10:03:18.563Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/pages/component/component.page.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/component/component.page.ts
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block component files must use the .component.ts extension and should be standalone Angular components with explicit imports from ReactiveFormsModule and ZardUI components
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/component/component.page.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/*/demo/*.ts : Create demo examples in the demo/ folder with structured exports containing name, code, and component properties
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add barrel exports for all new components in libs/zard/src/lib/components/components.ts
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-15T21:22:05.244Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 328
File: libs/zard/src/lib/components/select/demo/multi-select.ts:1-1
Timestamp: 2025-11-15T21:22:05.244Z
Learning: In Angular components that use model() for inputs (like zValue in ZardSelectComponent), two-way binding with WritableSignals is fully supported. The pattern [(zValue)]="selectedValues" where selectedValues = signal<string[]>([]) works correctly because model() automatically handles unwrapping and updating the signal.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-11-04T20:46:01.373Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 309
File: libs/zard/src/lib/components/select/demo/multi-select.ts:23-27
Timestamp: 2025-11-04T20:46:01.373Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, console.log statements are acceptable and often intentional to demonstrate reactivity and help users understand how the component works.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/*/doc/*.md : Write component documentation with overview.md for use cases and basic examples, and api.md for complete API reference
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Organize component files in the following structure: main component, variants, demo/, and doc/
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx} : Components should be built with accessibility in mind, ensuring they are accessible to all users
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-12-04T15:03:56.958Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 361
File: libs/zard/src/lib/components/pagination/demo/custom.ts:19-22
Timestamp: 2025-12-04T15:03:56.958Z
Learning: In pagination demos under libs/zard/src/lib/components/pagination/demo/*.ts, the pattern `<span class="sr-only">To page</span>{{ page }}` is correct for accessible button labels. Screen readers read both the sr-only text and the visible page number together, while visual users see only the page number. This approach is intentional and should not be flagged.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-11-30T19:07:11.572Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/app.component.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-12-08T17:34:37.975Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 367
File: libs/zard/src/lib/components/progress-bar/demo/shape.ts:9-11
Timestamp: 2025-12-08T17:34:37.975Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally mixing different variants (e.g., zType and zShape in a shape demo) is acceptable when done to showcase additional features that might not be demonstrated elsewhere.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-04T10:18:55.477Z
Learnt from: mihajm
Repo: zard-ui/zardui PR: 308
File: libs/zard/src/lib/components/button-group/doc/overview.md:1-3
Timestamp: 2025-11-04T10:18:55.477Z
Learning: In zardui repo, doc/overview.md files for components should contain only a brief overview description. Examples are provided through separate demo files and the api.md documentation, not in overview.md.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/doc/**/*.md : Write component documentation in `doc/overview.md` and `doc/api.md` files
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding for dynamic classes in components: `host: { '[class]': 'classes()' }`
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-12-21T00:11:44.620Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: README.md:0-0
Timestamp: 2025-12-21T00:11:44.620Z
Learning: Use Angular, TailwindCSS, and TypeScript as the primary technology stack for component development
Applied to files:
apps/web/src/app/app.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts
📚 Learning: 2025-11-26T11:20:45.264Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/select/select.component.spec.ts:79-88
Timestamp: 2025-11-26T11:20:45.264Z
Learning: In ZardUI select component tests (libs/zard/src/lib/components/select/select.component.spec.ts), use fakeAsync() with flush() instead of setTimeout because the component uses setTimeout(..., 0) for focus management, which requires advancing macrotasks in tests.
Applied to files:
apps/web/src/app/app.component.ts
📚 Learning: 2025-12-21T21:17:39.497Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 383
File: libs/zard/src/lib/shared/components/carousel/carousel.component.ts:114-115
Timestamp: 2025-12-21T21:17:39.497Z
Learning: In Angular components using signal inputs (input()) with types from external libraries like Embla Carousel, explicit type annotations (e.g., `readonly zOptions: InputSignal<EmblaOptionsType> = input<EmblaOptionsType>(...)`) may be necessary to prevent TypeScript IDE errors about inferred types referencing non-portable node_modules paths. This is not redundant when the annotation prevents the "cannot be named without a reference to node_modules" error.
Applied to files:
apps/web/src/app/domain/pages/about/about.page.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-11-30T13:27:41.206Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/popover/popover.component.ts:28-29
Timestamp: 2025-11-30T13:27:41.206Z
Learning: In libs/zard/src/lib/components/core/**/*.ts files (core utilities, plugins, and providers), use relative imports for intra-core dependencies because the ZardUI CLI performs path transformations during component installation. The CLI expects specific relative path patterns and transforms them to the target project structure. For all other component imports and application code, use zard/* path aliases.
Applied to files:
libs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.html
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding with computed classes for dynamic class application
Applied to files:
libs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Block template files must use ZardUI form components (ZardFormFieldComponent, ZardFormLabelComponent, ZardFormControlComponent) for form validation and error handling
Applied to files:
libs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-13T18:05:35.468Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 324
File: libs/zard/src/lib/components/breadcrumb/breadcrumb.component.ts:34-60
Timestamp: 2025-11-13T18:05:35.468Z
Learning: In breadcrumb item components using RouterLink hostDirectives for host navigation, inject the RouterLink directive and use its `href` property for anchor elements to display URLs on hover, avoiding naming collisions between hostDirective inputs and component inputs.
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx} : Components should be designed specifically for the Angular ecosystem and follow Angular conventions
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Keep commit messages in present tense, single line format with scope and description (e.g., '✨ feat(popover): add popover component')
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx,css} : Components should include built-in dark mode support
Applied to files:
apps/web/src/styles.css
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/src/styles.css : Set up `src/styles.css` with Tailwind CSS configuration and design tokens using CSS `theme` and `plugin` directives
Applied to files:
apps/web/src/styles.css
📚 Learning: 2025-12-25T11:10:09.078Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 384
File: apps/web/src/styles.css:213-213
Timestamp: 2025-12-25T11:10:09.078Z
Learning: In Tailwind CSS v4, max-width utilities support dynamic numeric values derived from the spacing scale (using the --spacing variable, default 0.25rem = 4px). Prefer using numeric classes like max-w-350 when the value aligns with the spacing scale, since 350 × 0.25rem = 87.5rem = 1400px. Avoid arbitrary values expressed with brackets (e.g., max-w-[1400px]) when a scale-based value is available and accurate. Apply this guidance to CSS files in the web app (e.g., apps/web/src/styles.css) and across the codebase where Tailwind is used.
Applied to files:
apps/web/src/styles.css
🧬 Code graph analysis (6)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
apps/web/src/app/domain/directives/scroll-spy-item.directive.ts (1)
Directive(3-10)
apps/web/src/app/domain/components/doc-content/doc-content.component.ts (2)
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (2)
Component(18-56)NavigationConfig(14-16)apps/web/src/app/domain/pages/json/json.page.ts (1)
Component(20-92)
apps/web/src/app/app.component.ts (1)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
getHeaderOffset(7-23)
apps/web/src/app/domain/pages/about/about.page.ts (1)
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (1)
NavigationConfig(14-16)
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (1)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
getHeaderOffset(7-23)
apps/web/src/app/domain/pages/component/component.page.ts (1)
apps/web/src/app/shared/constants/components.constant.ts (1)
ComponentData(48-53)
🔇 Additional comments (29)
apps/web/src/server.ts (1)
227-227: LGTM! Correct Express v5+ catch-all pattern.The
/*splatnamed wildcard pattern is the proper Express v5+ / path-to-regexp v8+ syntax for catch-all routes. The previous**glob pattern and unnamed*wildcard are no longer supported after the dependency upgrade.This pattern correctly:
- Uses
app.get()to handle only GET requests (appropriate for SSR)- Captures all remaining routes for Angular server-side rendering
- Complies with the stricter path-to-regexp requirements in the upgraded Express version
apps/web/src/styles.css (2)
57-59: LGTM! Shiki theme variables correctly implemented.The explicit
--shiki--lightand--shiki--darkdefinitions with unquoted theme identifiers, combined with the default--shiki-themereference, establish a clean theming architecture that eliminates the previous circular dependency. This pattern enables proper theme switching via the.darkselector override.
103-103: LGTM! Dark mode override completes the theme system.The
--shiki-themeoverride in the.darkblock correctly switches to the dark variant, completing the responsive theming implementation without introducing circular dependencies.libs/zard/src/lib/shared/components/tabs/tabs.component.ts (5)
1-35: Excellent signal-first imports and modern path aliases!The migration correctly adopts:
NgTemplateOutletinstead of the heavierCommonModule@/path aliases per project conventions- All necessary Angular signal primitives (
input,output,computed,signal,contentChildren,viewChild)This aligns perfectly with Angular 21's signal-based architecture. Based on learnings, the
@/path alias preference is correctly applied here.
40-54: Signal-powered tab component with OnPush — perfect!
ZardTabComponentnow features:
ChangeDetectionStrategy.OnPushas required by coding guidelines- Signal-based
input.required<string>()for the labelviewChild.requiredfor template referenceClean, minimal, and reactive. As per coding guidelines, OnPush is correctly applied for performance optimization.
56-151: Template modernization hits all the right notes!Key improvements:
type="button"on all interactive buttons prevents unintended form submissions (accessibility win)[class]binding with string concatenation avoids TailwindCSS issues (per learnings, this is preferred over individual class bindings)- Native
@if/@for/@letcontrol flow replaces structural directiveshost: { '[class]': 'containerClasses()' }pattern follows the recommended host binding approachNo
@HostBindingor@HostListenerdecorators in sight — exactly as it should be!
174-251: inject() pattern and SSR-safe lifecycle — solid implementation!The component demonstrates:
- Modern
inject()for all dependencies (no constructor injection)DOCUMENTtoken for SSR-safe window access- Defensive SSR guard checking both
windowandResizeObserveravailability- Proper
ResizeObserverlifecycle: unobserve previous element before observing new onetakeUntilDestroyedfor automatic subscription cleanupThe
afterNextRendercallback ensures DOM operations only run in the browser context.
298-321: CVA + signals + tailwind-merge = chef's kiss!The computed class signals demonstrate the recommended pattern:
tabContainerVariants,tabNavVariants,tabButtonVariantsleverage CVA for type-safe stylingtwMergeresolves TailwindCSS class conflictsbuttonClassesSignalreactively computes classes for all tabs based on active stateThis is exactly how Angular 21 components should handle dynamic styling with TailwindCSS v4.
libs/zard/src/lib/shared/components/tabs/doc/overview.md (1)
1-5: Documentation update looks good!The overview correctly:
- Provides a brief component description (per learnings, overview.md should be concise)
- Includes a helpful tip directing users to the
segmentedcomponent for shadcn/ui-like tabs- Grammar fix from previous review is applied ("shadcn/ui-like" with hyphen)
libs/zard/src/lib/shared/components/icon/demo/searchable.ts (7)
1-1: LGTM! OnPush import added correctly.The ChangeDetectionStrategy import enables the OnPush optimization applied at line 74, which pairs perfectly with this component's signal-based reactivity.
13-13: LGTM! Properly trimmed imports for standalone component.Removing CommonModule is correct—Angular 21's native control flow (@if, @for) doesn't require it. The imports array now contains only the necessary Zard UI components.
49-49: LGTM! Using Tailwind scale value instead of arbitrary value.Replacing
max-h-[600px]withmax-h-150improves consistency with Tailwind's spacing scale while maintaining the same height (37.5rem = 600px).
52-56: LGTM! Button improvements applied correctly.Two good changes here:
- Adding
type="button"prevents unintended form submissions- Using
min-h-17.5(fractional scale value) instead ofmin-h-[70px]aligns with Tailwind v4's support for fractional spacing
61-61: LGTM! Correct Tailwind v4 text wrapping utility.The
wrap-break-wordclass is a valid Tailwind v4 utility for text wrapping control. This correctly addresses the previous concern about invalid class names—wrap-break-wordis the modern v4 syntax for controlling word breaks in text content.Based on library documentation, Tailwind v4 introduces
wrap-break-wordas a new text wrapping utility.
74-74: LGTM! OnPush change detection correctly implemented.The addition of
ChangeDetectionStrategy.OnPushperfectly complements this component's signal-based reactivity pattern (signal, computed), delivering optimized rendering performance. This addresses the previous review feedback.
76-114: LGTM! Exemplary Angular 21 migration.The component logic demonstrates best practices:
- Signal-based reactivity with
signal()andcomputed()- Proper async/await error handling in clipboard operations
- Native control flow in template
- Type-safe event handling
- Clean, focused implementation
All Angular 21 patterns correctly applied throughout.
apps/web/src/app/app.component.ts (1)
1-50: Clean Angular 21 migration with modern patterns.Excellent adoption of Angular 21 best practices:
inject()for all dependencies ✓ChangeDetectionStrategy.OnPush✓takeUntilDestroyedfor subscription cleanup ✓- Platform-aware browser checks ✓
- Correct scroll position calculation with
Math.max(0, yScrollPosition)✓The router-based scroll handling with the timeout for component pages is well-reasoned for waiting on async content.
apps/web/src/app/domain/pages/component/component.page.ts (2)
56-91: Solid WCAG-compliant keyboard navigation implementation.This addresses the accessibility concern from past reviews. The handler properly supports:
- Arrow keys for tab navigation with wrap-around
- Home/End for first/last tab
- Enter/Space delegation (returns early, letting default behavior occur)
The implementation follows the WAI-ARIA tab pattern correctly.
1-51: Strong Angular 21 migration with signal-based reactivity.Clean adoption of modern patterns:
inject()for all dependencies ✓ChangeDetectionStrategy.OnPush✓signal()forcomponentDataandactiveTab✓takeUntilDestroyedfor subscription cleanup ✓The
OnInitlifecycle with route param subscription is appropriate for data loading that depends on route changes.apps/web/src/app/domain/pages/component/component.page.html (2)
24-61: Well-implemented accessible tab interface with ARIA compliance.The tab implementation follows WAI-ARIA authoring practices:
role="tablist"on container ✓role="tab"witharia-selected,aria-controls,tabindexon buttons ✓role="tabpanel"witharia-labelledbyon panels ✓- Keyboard navigation via
onInstallKeyDown✓
1-7: Clean data-driven template with signal integration.Good use of Angular 21 control flow:
@let data = componentData()for local binding ✓@if (data)guard before rendering ✓- Signal function calls in template bindings ✓
apps/web/src/app/domain/components/doc-content/doc-content.component.html (1)
1-19: Template correctly migrated to signal-based bindings.All past review issues addressed:
activeAnchor()function call instead of property access ✓- Removed non-null assertion on
navigationConfig()✓- Proper conditional rendering with
@if (navigationConfig())✓Signal bindings are clean and consistent throughout.
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (1)
23-51: Properly migrated to Angular 21 patterns with consistent scroll behavior.Well-implemented changes:
inject()for all dependencies ✓input()for signal-based inputs ✓- Platform-aware DOM access via injected
DOCUMENT✓- Scroll position calculation:
Math.max(0, yScrollPosition)✓ (consistent withAppComponent)The
activeAnchorchange frommodel()toinput()is appropriate since this component only reads the value.apps/web/src/app/domain/pages/about/about.page.ts (2)
39-45: Well-migrated to Angular 21 with signal-based state.Clean implementation:
ChangeDetectionStrategy.OnPush✓signal<string | undefined>(undefined)foractiveAnchor✓- Properly addresses past review suggestion for signal-based state
71-90: Good catch on the typo corrections.Fixed both the role text ("Mantainer" → "Maintainer") and navigation item ("mantainers" → "maintainers"). This ensures consistency across the UI and navigation config.
apps/web/src/app/domain/components/doc-content/doc-content.component.ts (1)
1-15: Beautifully simplified component with Angular 21 patterns.Excellent refactoring:
ChangeDetectionStrategy.OnPush✓input()for all signal-based inputs ✓readonlymodifiers for immutability ✓- Removed unnecessary lifecycle hooks and dependencies
- Clean, minimal surface area
This is a great example of the Angular 21 component pattern—declarative inputs with no imperative lifecycle management.
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
25-78: Excellent Angular 21 directive migration.Strong adoption of modern patterns:
inject()for all dependencies ✓output<string>()signal-based output ✓input<number>()for optional header offset ✓contentChildren()signal query ✓host: { '(window:scroll)': 'onScroll()' }instead of@HostListener✓requestAnimationFramethrottling for performance ✓- Injected
DOCUMENTfor DOM access ✓The scroll handling logic is clean and the emission only triggers on actual section changes.
apps/web/src/app/domain/pages/about/about.page.html (2)
1-6: Excellent signal migration!The signal-based
activeAnchor()binding andactiveAnchor.set($event)event handler correctly follow Angular 21 patterns. The addition of thescrollSpyboolean input completes the reactive scroll spy functionality.
34-39: Clean migration to Angular 21 control flow!All three sections (Founders, Maintainers, Contributors) correctly implement the new
@let,@if, and@elsesyntax with async pipes. The pattern is consistent, handles loading states elegantly, and uses self-closing component syntax throughout.Also applies to: 50-55, 67-72
mikij
force-pushed
the
update-project-angular21
branch
from
73c5f80 to
fcd25fd
Compare
There was a problem hiding this comment.
Actionable comments posted: 4
♻️ Duplicate comments (2)
libs/zard/src/lib/shared/components/table/table.variants.ts (2)
48-54: Invalid CSS selector syntax persists — double brackets are not valid.The selector
*:[[role=checkbox]]uses non-standard double-bracket notation. CSS attribute selectors require single brackets. This will not match checkbox elements and prevents the translation styling from applying.🔎 Proposed fix
Use valid Tailwind arbitrary variant syntax:
export const tableCellVariants = cva( - 'p-2 align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5', + 'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&_[role=checkbox]]:translate-y-0.5', { variants: {}, defaultVariants: {}, }, );Alternative selectors depending on scope:
[&_[role=checkbox]]— any descendant with role=checkbox[&>*[role=checkbox]]— direct children with role=checkbox[&_*[role=checkbox]]— any nested descendant element with role=checkbox
40-46: Invalid CSS selector syntax persists — double brackets are not valid.The selector
*:[[role=checkbox]]uses non-standard double-bracket notation. CSS attribute selectors require single brackets. This will not match checkbox elements and prevents the translation styling from applying.🔎 Proposed fix
Use valid Tailwind arbitrary variant syntax:
export const tableHeadVariants = cva( - 'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5', + 'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&_[role=checkbox]]:translate-y-0.5', { variants: {}, defaultVariants: {}, }, );Alternative selectors depending on scope:
[&_[role=checkbox]]— any descendant with role=checkbox[&>*[role=checkbox]]— direct children with role=checkbox[&_*[role=checkbox]]— any nested descendant element with role=checkbox
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (17)
apps/web/public/components/icon/demo/searchable.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/components/tabs/doc/overview.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/table.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/tabs.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/accordion.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/breadcrumb.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/carousel.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/command.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/form.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/layout.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/pagination.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/registry.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/resizable.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/select.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/sheet.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/table.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/tabs.jsonis excluded by!apps/web/public/**and included byapps/**
📒 Files selected for processing (15)
apps/web/src/app/app.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/app/domain/pages/about/about.page.htmlapps/web/src/app/domain/pages/about/about.page.tsapps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/server.tsapps/web/src/styles.csslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/tabs/tabs.component.ts
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use path aliases @zard/* to map to libs/zard/src/lib/* in imports
Files:
apps/web/src/server.tsapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.ts
libs/zard/**/*.{css,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Use CSS custom properties for design tokens and theming in the component library
Files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
🧠 Learnings (59)
📓 Common learnings
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Follow PR checklist including: passing tests, code pattern compliance, updated documentation, working demos, no lint/typecheck warnings, linked issues, conventional commit in title
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: README.md:0-0
Timestamp: 2025-12-21T00:11:44.620Z
Learning: Use Angular, TailwindCSS, and TypeScript as the primary technology stack for component development
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Implement TailwindCSS v4 with PostCSS for styling and use class merging with tailwind-merge to resolve conflicts
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx} : Components should be designed specifically for the Angular ecosystem and follow Angular conventions
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx,css} : Components must be responsive with mobile-first design approach
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/tsconfig.json : Configure TypeScript path mappings in `tsconfig.json` with `@/*` alias pointing to `src/app/*` for clean imports
Applied to files:
apps/web/src/server.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Applied to files:
apps/web/src/server.tsapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Follow PR checklist including: passing tests, code pattern compliance, updated documentation, working demos, no lint/typecheck warnings, linked issues, conventional commit in title
Applied to files:
apps/web/src/server.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Applied to files:
apps/web/src/server.tsapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/app.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-11-10T21:46:33.213Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 318
File: libs/zard/src/lib/components/select/demo/default.ts:21-21
Timestamp: 2025-11-10T21:46:33.213Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally showing different patterns (e.g., primitive values vs signals) across different demos is valuable for demonstrating the flexibility of Angular features like two-way binding.
Applied to files:
apps/web/src/server.tsapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Applied to files:
apps/web/src/server.tsapps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Refer to `docs/angular-llm.txt` for Angular best practices when developing components
Applied to files:
apps/web/src/server.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-12-13T11:50:56.310Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:56.310Z
Learning: Do not flag or suggest removing `standalone: true` from test components (*.spec.ts files) or demo components (demo/*.ts files) in libs/zard/src/lib/shared/components/**/*.ts, as it is not a significant concern and the explicit flag is acceptable in these contexts.
Applied to files:
apps/web/src/server.tslibs/zard/src/lib/shared/components/tabs/doc/overview.mdapps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/domain/pages/about/about.page.html
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs with `input()` in Angular components
Applied to files:
apps/web/src/server.tsapps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Implement TailwindCSS v4 with PostCSS for styling and use class merging with tailwind-merge to resolve conflicts
Applied to files:
apps/web/src/server.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-30T08:50:23.436Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/core/providezard.ts:0-0
Timestamp: 2025-11-30T08:50:23.436Z
Learning: In libs/zard/src/lib/components/core/providezard.ts, the import paths `../core/event-manager-plugins/...` are intentionally structured this way because the ZardUI CLI transforms them to 'shared/components/core/event-manager-plugins/...' format. Other relative path combinations don't work with the current CLI implementation. This path pattern should not be simplified until the CLI transformation logic is updated.
Applied to files:
apps/web/src/server.tsapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/*/doc/*.md : Write component documentation with overview.md for use cases and basic examples, and api.md for complete API reference
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/doc/**/*.md : Write component documentation in `doc/overview.md` and `doc/api.md` files
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-04T10:18:55.477Z
Learnt from: mihajm
Repo: zard-ui/zardui PR: 308
File: libs/zard/src/lib/components/button-group/doc/overview.md:1-3
Timestamp: 2025-11-04T10:18:55.477Z
Learning: In zardui repo, doc/overview.md files for components should contain only a brief overview description. Examples are provided through separate demo files and the api.md documentation, not in overview.md.
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add barrel exports for all new components in libs/zard/src/lib/components/components.ts
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-29T15:31:22.377Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 339
File: libs/zard/src/lib/components/carousel/carousel.component.ts:92-92
Timestamp: 2025-11-29T15:31:22.377Z
Learning: In libs/zard/src/lib/components/**/*.component.ts files using TailwindCSS, avoid suggesting individual class bindings like `[class.fill-primary]="condition"` because they can cause TailwindCSS issues. Prefer string concatenation or `[class]` binding with conditional expressions instead.
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Keep commit messages in present tense, single line format with scope and description (e.g., '✨ feat(popover): add popover component')
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use TailwindCSS utility classes for styling, following responsive design patterns with prefixes for breakpoints (sm:, lg:) and ensure accessibility with semantic HTML and ARIA guidelines
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx} : Components should be built with accessibility in mind, ensuring they are accessible to all users
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-12-04T15:03:56.958Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 361
File: libs/zard/src/lib/components/pagination/demo/custom.ts:19-22
Timestamp: 2025-12-04T15:03:56.958Z
Learning: In pagination demos under libs/zard/src/lib/components/pagination/demo/*.ts, the pattern `<span class="sr-only">To page</span>{{ page }}` is correct for accessible button labels. Screen readers read both the sr-only text and the visible page number together, while visual users see only the page number. This approach is intentional and should not be flagged.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-30T19:07:11.572Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/app.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-14T22:52:09.135Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-27T09:27:44.604Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 388
File: apps/web/src/app/domain/pages/component/component.page.html:29-29
Timestamp: 2025-12-27T09:27:44.604Z
Learning: In templates under apps/web/src, this project uses a custom ZardEventManagerPlugin to extend Angular's event system, enabling multi-key filters with curly-brace syntax (e.g., (keydown.{arrowleft,arrowright,home,end,space,enter}.prevent)) and modifiers like .prevent, .stop, .stop-immediate, and .prevent-with-stop. Ensure code reviews check for correct usage of this syntax, verify that the plugin is registered via provideZard(), and ensure tests cover these patterns. This guidance is specific to the zard-ui/zardui repository.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/pages/about/about.page.html
📚 Learning: 2025-11-30T08:29:35.869Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/combobox/combobox.component.ts:227-229
Timestamp: 2025-11-30T08:29:35.869Z
Learning: In the zard-ui/zardui repository, the "curly" ESLint rule is enforced (configured as 'warn' in libs/zard/eslint.config.mjs). Always use explicit braces around control flow statements (if, else, for, while, etc.) even for single-statement blocks. Do not suggest one-line early returns or removing braces.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-26T10:13:44.258Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-30T13:27:41.206Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/popover/popover.component.ts:28-29
Timestamp: 2025-11-30T13:27:41.206Z
Learning: In libs/zard/src/lib/components/core/**/*.ts files (core utilities, plugins, and providers), use relative imports for intra-core dependencies because the ZardUI CLI performs path transformations during component installation. The CLI expects specific relative path patterns and transforms them to the target project structure. For all other component imports and application code, use zard/* path aliases.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-04T20:46:01.373Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 309
File: libs/zard/src/lib/components/select/demo/multi-select.ts:23-27
Timestamp: 2025-11-04T20:46:01.373Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, console.log statements are acceptable and often intentional to demonstrate reactivity and help users understand how the component works.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/*/demo/*.ts : Create demo examples in the demo/ folder with structured exports containing name, code, and component properties
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/demo/**/*.ts : Create demo components in the `demo/` folder with a main export, default example, and variant examples
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-12-08T17:34:37.975Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 367
File: libs/zard/src/lib/components/progress-bar/demo/shape.ts:9-11
Timestamp: 2025-12-08T17:34:37.975Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally mixing different variants (e.g., zType and zShape in a shape demo) is acceptable when done to showcase additional features that might not be demonstrated elsewhere.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Ensure components are standalone Angular components
Applied to files:
apps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block components should use Angular signals for state management (e.g., signal() for loading states) and ReactiveFormsModule for form handling with Validators
Applied to files:
apps/web/src/app/domain/pages/component/component.page.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-10-31T10:03:18.563Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Applied to files:
apps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
Applied to files:
apps/web/src/app/domain/pages/component/component.page.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block component files must use the .component.ts extension and should be standalone Angular components with explicit imports from ReactiveFormsModule and ZardUI components
Applied to files:
apps/web/src/app/domain/pages/component/component.page.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use computed properties in Angular components for reactive class calculations: `protected readonly classes = computed(() => ...)`
Applied to files:
apps/web/src/app/domain/pages/component/component.page.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-11-26T11:20:45.264Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/select/select.component.spec.ts:79-88
Timestamp: 2025-11-26T11:20:45.264Z
Learning: In ZardUI select component tests (libs/zard/src/lib/components/select/select.component.spec.ts), use fakeAsync() with flush() instead of setTimeout because the component uses setTimeout(..., 0) for focus management, which requires advancing macrotasks in tests.
Applied to files:
apps/web/src/app/app.component.ts
📚 Learning: 2025-11-13T18:05:35.468Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 324
File: libs/zard/src/lib/components/breadcrumb/breadcrumb.component.ts:34-60
Timestamp: 2025-11-13T18:05:35.468Z
Learning: In breadcrumb item components using RouterLink hostDirectives for host navigation, inject the RouterLink directive and use its `href` property for anchor elements to display URLs on hover, avoiding naming collisions between hostDirective inputs and component inputs.
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding for dynamic classes in components: `host: { '[class]': 'classes()' }`
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding with computed classes for dynamic class application
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:11:44.620Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: README.md:0-0
Timestamp: 2025-12-21T00:11:44.620Z
Learning: Use Angular, TailwindCSS, and TypeScript as the primary technology stack for component development
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx} : Components should be designed specifically for the Angular ecosystem and follow Angular conventions
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for typed variants in component styling
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for type-safe styling variants in components
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use mergeClasses utility from zard/shared/utils for combining CVA variants with custom classes
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses()` utility with `clsx` and `tailwind-merge` to resolve class conflicts in component styling
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/**/*.{css,ts} : Use CSS custom properties for design tokens and theming in the component library
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/styles.css
📚 Learning: 2025-11-19T20:03:29.205Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 320
File: libs/zard/src/lib/components/tooltip/tooltip.ts:82-105
Timestamp: 2025-11-19T20:03:29.205Z
Learning: In the zard-ui/zardui repository, non-null assertion operator (!) is forbidden by ESLint rule "Forbidden non-null assertion". Use type assertions (e.g., `(value as Type)`) instead when narrowing types after null/undefined checks.
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-12-13T11:50:50.088Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:50.088Z
Learning: Do not flag or require removing standalone: true for test components (*.spec.ts) and demo components (demo/*.ts) within libs/zard/src/lib/shared/components/**.ts. In these contexts, an explicit standalone: true flag is acceptable; apply this exclusion when reviewing files under this path.
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T21:17:39.497Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 383
File: libs/zard/src/lib/shared/components/carousel/carousel.component.ts:114-115
Timestamp: 2025-12-21T21:17:39.497Z
Learning: In Angular components that use signal inputs (Input()) with types from external libraries (e.g., Embla Carousel), add explicit type annotations to prevent TypeScript IDE errors about inferred types referencing non-portable node_modules paths. For example, declare a readonly typed input like: readonly zOptions: InputSignal<EmblaOptionsType> = input<EmblaOptionsType>(...). This explicit annotation helps avoid the error cannot be named without a reference to node_modules. Apply this pattern to components in the shared carousel area (and similar components) whenever an external library type is used in an InputSignal to ensure type safety and IDE compatibility.
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-15T11:43:06.831Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 373
File: libs/zard/src/lib/shared/components/select/select.component.ts:33-33
Timestamp: 2025-12-15T11:43:06.831Z
Learning: In files under libs/zard/src/lib/**/*.{ts,tsx,js}, prefer the @/ path alias for imports that map to libs/zard/src/lib/* directories. For example, write import { mergeClasses } from '@/shared/utils/merge-classes' instead of using the 'zard/' alias. This improves path readability and aligns with the project's alias configuration.
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-15T21:22:05.244Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 328
File: libs/zard/src/lib/components/select/demo/multi-select.ts:1-1
Timestamp: 2025-11-15T21:22:05.244Z
Learning: In Angular components that use model() for inputs (like zValue in ZardSelectComponent), two-way binding with WritableSignals is fully supported. The pattern [(zValue)]="selectedValues" where selectedValues = signal<string[]>([]) works correctly because model() automatically handles unwrapping and updating the signal.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-12-21T21:17:39.497Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 383
File: libs/zard/src/lib/shared/components/carousel/carousel.component.ts:114-115
Timestamp: 2025-12-21T21:17:39.497Z
Learning: In Angular components using signal inputs (input()) with types from external libraries like Embla Carousel, explicit type annotations (e.g., `readonly zOptions: InputSignal<EmblaOptionsType> = input<EmblaOptionsType>(...)`) may be necessary to prevent TypeScript IDE errors about inferred types referencing non-portable node_modules paths. This is not redundant when the annotation prevents the "cannot be named without a reference to node_modules" error.
Applied to files:
apps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Block template files must use ZardUI form components (ZardFormFieldComponent, ZardFormLabelComponent, ZardFormControlComponent) for form validation and error handling
Applied to files:
libs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/src/styles.css : Set up `src/styles.css` with Tailwind CSS configuration and design tokens using CSS `theme` and `plugin` directives
Applied to files:
apps/web/src/styles.css
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx,css} : Components should include built-in dark mode support
Applied to files:
apps/web/src/styles.css
📚 Learning: 2025-12-25T11:10:09.078Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 384
File: apps/web/src/styles.css:213-213
Timestamp: 2025-12-25T11:10:09.078Z
Learning: In Tailwind CSS v4, max-width utilities support dynamic numeric values derived from the spacing scale (using the --spacing variable, default 0.25rem = 4px). Prefer using numeric classes like max-w-350 when the value aligns with the spacing scale, since 350 × 0.25rem = 87.5rem = 1400px. Avoid arbitrary values expressed with brackets (e.g., max-w-[1400px]) when a scale-based value is available and accurate. Apply this guidance to CSS files in the web app (e.g., apps/web/src/styles.css) and across the codebase where Tailwind is used.
Applied to files:
apps/web/src/styles.css
🧬 Code graph analysis (4)
apps/web/src/app/domain/pages/component/component.page.ts (1)
apps/web/src/app/shared/constants/components.constant.ts (1)
ComponentData(48-53)
apps/web/src/app/app.component.ts (1)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
getHeaderOffset(7-23)
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (1)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
getHeaderOffset(7-23)
apps/web/src/app/domain/components/doc-content/doc-content.component.ts (4)
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (2)
Component(18-56)NavigationConfig(14-16)apps/web/src/app/core/layouts/documentation/documentation.layout.ts (1)
Component(12-61)apps/web/src/app/domain/pages/dark-mode/dark-mode.page.ts (1)
Component(18-60)apps/web/src/app/domain/pages/json/json.page.ts (1)
Component(20-92)
🔇 Additional comments (36)
apps/web/src/styles.css (1)
57-59: LGTM! Shiki theme variables correctly implemented.The Shiki theme system now follows CSS best practices:
- Theme identifiers are defined directly without circular references
- Unquoted values are used for standard hyphenated identifiers
- Light theme is the default in
:root- Dark mode properly overrides via the
.darkselectorThis resolves the previous circular reference issue and correctly enables theme switching for Shiki syntax highlighting.
Also applies to: 103-103
libs/zard/src/lib/shared/components/tabs/tabs.component.ts (4)
1-35: LGTM! Clean import modernization.The migration from CommonModule to the specific NgTemplateOutlet import improves tree-shaking, and the consistent use of @/ path aliases aligns with project conventions.
40-54: LGTM! Exemplary Angular 21 migration.ZardTabComponent now uses OnPush change detection with signal-based
input()andviewChild()APIs, perfectly aligned with modern Angular patterns.
90-143: Excellent template improvements!Adding
type="button"to all interactive buttons prevents unintended form submissions and improves accessibility. The migration from[ngClass]to[class]bindings with string concatenation is more performant and aligns with modern Angular practices.
227-251: Robust SSR guard and memory management!The explicit return statement when ResizeObserver is unavailable improves SSR safety, and the explicit unobserve-before-observe pattern prevents memory leaks when the tabNav reference changes. Excellent defensive programming.
libs/zard/src/lib/shared/components/tabs/doc/overview.md (1)
4-5: LGTM! Helpful user guidance.The note appropriately directs users to the segmented component as a shadcn/ui-like alternative, and the grammar issue from the previous review has been addressed.
apps/web/src/app/app.component.ts (2)
1-8: Clean modern Angular imports — nicely done!All the right pieces in place:
inject()from core,takeUntilDestroyedfrom rxjs-interop, proper platform detection utilities. The@docpath alias is appropriate here since this lives inapps/web, notlibs/zard.
10-19: OnPush and standalone-by-default — Angular 21 style!
ChangeDetectionStrategy.OnPushis in place as per guidelines, and correctly omittingstandalone: truesince Angular 21 defaults to standalone components. The constant extraction forLOADING_TIMEOUTis a nice touch for maintainability.libs/zard/src/lib/shared/components/icon/demo/searchable.ts (2)
1-1: LGTM! OnPush and streamlined imports applied correctly.The addition of
ChangeDetectionStrategy.OnPushpairs perfectly with the signal-based reactivity in this component (searchQuery,filteredIconscomputed). RemovingCommonModulealigns with the Angular 21 migration pattern across the codebase.Based on learnings, OnPush is a best practice for performance optimization in this project's components.
Also applies to: 13-13, 74-74
52-52: Good addition of explicit button type.Adding
type="button"prevents accidental form submissions and makes the button's intent explicit.apps/web/src/server.ts (1)
227-227: LGTM! Correct Express 5 catch-all pattern for SSR.The
/*splatpattern is the proper Express 5 syntax for a named catch-all route, resolving thepath-to-regexpv8+ requirement that rejected unnamed wildcards. This correctly:
- ✅ Handles only GET requests (appropriate for SSR page rendering)
- ✅ Matches all paths including the root
/- ✅ Runs after specific route handlers and static middleware
The past review concerns have been properly resolved—the Express upgrade necessitated this pattern change.
apps/web/src/app/domain/pages/component/component.page.html (3)
1-2: LGTM! Clean signal usage and null-safety.The
@letsyntax with signal invocationcomponentData()is the correct pattern, and the@if (data)guard ensures type-safe access throughout the template. This aligns with Angular 21 best practices.
20-94: Excellent ARIA and keyboard navigation implementation!The tab interface follows WCAG 2.1 requirements perfectly:
- ✅ Proper ARIA roles and relationships (
role="tablist",role="tab",role="tabpanel")- ✅ Correct
tabindexmanagement (0 for active, -1 for inactive)- ✅ Full keyboard support (Arrow keys, Home/End, Enter/Space)
- ✅ Proper use of custom ZardEventManagerPlugin syntax for multi-key handling
The implementation addresses the previous accessibility concern and provides a robust, keyboard-accessible tab interface.
Based on learnings: Custom ZardEventManagerPlugin enables the curly-brace multi-key syntax used here.
10-17: Consistent signal access pattern throughout.All data bindings correctly use the
data.*pattern after establishing the local@let data = componentData(). This ensures consistent signal access and maintains type safety throughout the template.Also applies to: 99-111
apps/web/src/app/domain/directives/scroll-spy.directive.ts (5)
6-23: Header offset caching is SSR-safe and well-optimized.The
getHeaderOffsetfunction correctly:
- Uses
isBrowserguard to preventdocumentaccess during SSR- Caches header height for performance (constant height assumption is reasonable)
- Falls back to sensible default (56px) for SSR
The implementation is safe for the current usage pattern where
isBrowseris always correctly computed viaisPlatformBrowser(platformId).
27-29: LGTM! Proper host binding pattern.Moving the window scroll listener to the
hostproperty follows Angular 21 best practices and project conventions.Based on learnings: HostListener should be moved to Component decorator's host property.
32-38: Excellent modern Angular patterns!Perfect use of:
- ✅
inject()for dependency injection- ✅
output<string>()for signal-based output- ✅
input<number>()for signal-based input- ✅
contentChildren()for querying child directives- ✅
isPlatformBrowser()for platform detectionThis aligns perfectly with Angular 21 migration goals and project standards.
Based on learnings: Signal-based inputs/outputs and inject() pattern are enforced.
43-51: Well-implemented scroll throttling.The
requestAnimationFramethrottling pattern efficiently prevents excessive scroll calculations while ensuring smooth updates aligned with browser repaints.
53-78: Scroll calculation logic is sound.The implementation correctly:
- Uses injected
documentfor SSR compatibility- Falls back from input to computed header offset
- Efficiently iterates items to determine active section
- Only emits when the section actually changes (prevents unnecessary updates)
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (2)
24-32: Perfect dependency injection and signal-based inputs.Excellent use of:
- ✅
inject()pattern for all dependencies- ✅ Platform detection with
isPlatformBrowser()- ✅ Signal-based
input()with correct types- ✅ Proper
activeAnchortype (string | undefined)Based on learnings: inject() and signal-based inputs are project standards.
34-51: Scroll calculation is now correct!The scroll position calculation properly:
- Uses injected
documentfor SSR safety- Gets header offset with platform-aware
getHeaderOffset(this.isBrowser)- Calculates position as
offsetTop - headerOffset- Prevents negative values with
Math.max(0, yScrollPosition)This ensures anchors near the top of the page scroll correctly without overshooting.
apps/web/src/app/domain/pages/component/component.page.ts (3)
1-1: Excellent adoption of Angular 21 patterns!The component correctly:
- ✅ Uses
ChangeDetectionStrategy.OnPushfor performance- ✅ Implements
OnInitlifecycle- ✅ Removed redundant
standalone: true(default in Angular 19+)- ✅ Imports necessary APIs (
signal,OnInit)Based on learnings: OnPush change detection and standalone defaults are project standards.
Also applies to: 31-33
54-89: Well-implemented ARIA keyboard navigation!The
onInstallKeyDownmethod correctly implements the standard tab keyboard pattern:
- ✅ Arrow keys navigate between tabs with wrapping
- ✅ Home/End jump to first/last tab
- ✅ Enter/Space handled appropriately
- ✅ Focus management synchronized with
activeTabsignal- ✅ Early returns for invalid targets
The implementation follows WCAG 2.1 keyboard navigation requirements.
91-134: Clean lifecycle and data management.The component correctly:
- ✅ Uses
ngOnInitfor initialization- ✅ Properly manages subscriptions with
takeUntilDestroyed- ✅ Updates signals with
.set()method- ✅ Reads signals with function call syntax
componentData()- ✅ Guards against undefined values before use
apps/web/src/app/domain/components/doc-content/doc-content.component.html (2)
2-2: LGTM! Signal access corrected.The conditional now correctly calls
activeAnchor()instead of accessing the signal function's properties. The truthiness check properly handles both empty strings andundefined.
10-15: Clean signal-based bindings.All input bindings correctly:
- ✅ Call signals with
()syntax- ✅ Removed unnecessary non-null assertions
- ✅ Removed defensive defaults (handled by component inputs)
apps/web/src/app/domain/pages/about/about.page.ts (4)
2-2: Excellent OnPush adoption!Adding
ChangeDetectionStrategy.OnPushimproves performance by reducing unnecessary change detection cycles. This aligns with Angular 21 best practices and project standards.Based on learnings: OnPush change detection is enforced for performance optimization.
Also applies to: 39-39
45-45: Perfect signal-based state management!Converting
activeAnchorto a signal:
- ✅ Enables reactive updates
- ✅ Properly typed (
string | undefined)- ✅ Initialized with sensible default
- ✅ Marked
readonlyfor immutabilityThis aligns with the Angular 21 migration and project signal-first approach.
Based on learnings: Signal-based state management should be used throughout components.
71-79: Good catch on typo corrections!Fixed spelling errors:
- ✅ "Mantainer" → "Maintainer" (lines 74, 78)
- ✅ Navigation config id "mantainers" → "maintainers" (line 86)
These corrections improve professionalism and ensure consistent anchor navigation.
Also applies to: 82-90
92-131: Clean formatting improvements.The multi-line string formatting enhances readability without changing functionality. This follows common TypeScript/Prettier patterns.
apps/web/src/app/domain/components/doc-content/doc-content.component.ts (2)
1-1: Excellent simplification and OnPush adoption!The component is now a cleaner presentation component:
- ✅ Added
ChangeDetectionStrategy.OnPushfor performance- ✅ Removed
OnInit(no longer needed)- ✅ Removed
ViewportScroller(delegated to child component)- ✅ Simplified to pure input-based component
Based on learnings: OnPush change detection is enforced, and component simplification improves maintainability.
Also applies to: 9-11
12-14: Perfect signal-based inputs!All inputs correctly:
- ✅ Use
input()function- ✅ Marked
readonly- ✅ Proper types (
NavigationConfig,string | undefined, function or null)- ✅ Sensible defaults where appropriate
This fully embraces Angular 21's signal-based APIs.
Based on learnings: Signal-based inputs with input() are project standards.
apps/web/src/app/domain/pages/about/about.page.html (4)
1-6: Perfect signal integration in template!The bindings correctly:
- ✅ Read signal with
activeAnchor()- ✅ Update signal with
activeAnchor.set($event)- ✅ Enable scroll tracking with
scrollSpydirectiveThis demonstrates proper signal-based reactive patterns in templates.
34-72: Excellent async data handling with modern control flow!The template correctly uses Angular 21's new control flow:
- ✅
@letfor local variable assignment- ✅
@iffor conditional rendering- ✅ Async pipe with proper null handling
- ✅ Loading states for better UX
- ✅ Consistent pattern across all sections
Based on learnings: Modern control flow syntax (@if/@for/@let) is part of Angular 21 migration.
42-42: Good typo correction!Fixed spelling from "mantainers" to "maintainers" in both
scrollSpyItemandidattributes, ensuring:
- ✅ Correct anchor navigation
- ✅ Consistency with TypeScript configuration
- ✅ Professional presentation
12-12: Consistent self-closing tag usage!All childless components now use self-closing syntax, improving template consistency and readability throughout the file.
Also applies to: 36-36, 38-38, 52-52, 54-54, 69-69, 71-71, 86-86
mikij
force-pushed
the
update-project-angular21
branch
from
fcd25fd to
71decad
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
libs/zard/src/lib/shared/components/table/table.variants.ts (1)
48-54: Invalid CSS selector syntax with double brackets.The selector
*:[[role=checkbox]]uses non-standard double-bracket notation. CSS attribute selectors require single brackets:[attribute=value]. This selector will not match checkbox elements and will cause parsing errors.🔎 Proposed fix
Use valid Tailwind arbitrary variant syntax:
export const tableCellVariants = cva( - 'p-2 align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5', + 'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&_[role=checkbox]]:translate-y-0.5', { variants: {}, defaultVariants: {}, }, );Alternative selectors depending on intended scope:
[&_[role=checkbox]]— any descendant with role=checkbox[&>[role=checkbox]]— direct child with role=checkbox[&_*[role=checkbox]]— any nested element with role=checkbox
♻️ Duplicate comments (3)
libs/zard/src/lib/shared/components/table/table.variants.ts (1)
40-46: Invalid CSS selector syntax with double brackets.The selector
*:[[role=checkbox]]uses non-standard double-bracket notation. CSS attribute selectors require single brackets:[attribute=value]. This selector will not match checkbox elements and will cause parsing errors.🔎 Proposed fix
Use valid Tailwind arbitrary variant syntax:
export const tableHeadVariants = cva( - 'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5', + 'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&_[role=checkbox]]:translate-y-0.5', { variants: {}, defaultVariants: {}, }, );Alternative selectors depending on intended scope:
[&_[role=checkbox]]— any descendant with role=checkbox[&>[role=checkbox]]— direct child with role=checkbox[&_*[role=checkbox]]— any nested element with role=checkboxapps/web/src/app/domain/pages/component/component.page.html (1)
62-92: Consider simplifying tab panel class bindings.The tab panels use multiple individual
[class.*]bindings for visibility and transitions. While functional, computed class strings would improve maintainability.Based on learnings: Use computed properties with TailwindCSS for dynamic class application.
apps/web/src/app/domain/pages/component/component.page.ts (1)
40-41: Consider making activeAnchor a signal for consistency.While
componentDatacorrectly uses a signal,activeAnchorremains a plain string property. Converting it to a signal would align with the signal-based reactivity pattern used throughout the component.Based on learnings: Use signal-based state management throughout components.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (17)
apps/web/public/components/icon/demo/searchable.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/components/tabs/doc/overview.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/table.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/tabs.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/accordion.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/breadcrumb.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/carousel.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/command.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/form.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/layout.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/pagination.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/registry.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/resizable.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/select.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/sheet.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/table.jsonis excluded by!apps/web/public/**and included byapps/**apps/web/public/r/tabs.jsonis excluded by!apps/web/public/**and included byapps/**
📒 Files selected for processing (15)
apps/web/src/app/app.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/app/domain/pages/about/about.page.htmlapps/web/src/app/domain/pages/about/about.page.tsapps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/server.tsapps/web/src/styles.csslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/tabs/tabs.component.ts
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use path aliases @zard/* to map to libs/zard/src/lib/* in imports
Files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/app.component.tsapps/web/src/server.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/domain/directives/scroll-spy.directive.ts
libs/zard/**/*.{css,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Use CSS custom properties for design tokens and theming in the component library
Files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
🧠 Learnings (60)
📓 Common learnings
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Follow PR checklist including: passing tests, code pattern compliance, updated documentation, working demos, no lint/typecheck warnings, linked issues, conventional commit in title
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: README.md:0-0
Timestamp: 2025-12-21T00:11:44.620Z
Learning: Use Angular, TailwindCSS, and TypeScript as the primary technology stack for component development
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Implement TailwindCSS v4 with PostCSS for styling and use class merging with tailwind-merge to resolve conflicts
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx} : Components should be designed specifically for the Angular ecosystem and follow Angular conventions
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx,css} : Components must be responsive with mobile-first design approach
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/*/doc/*.md : Write component documentation with overview.md for use cases and basic examples, and api.md for complete API reference
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/doc/**/*.md : Write component documentation in `doc/overview.md` and `doc/api.md` files
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-04T10:18:55.477Z
Learnt from: mihajm
Repo: zard-ui/zardui PR: 308
File: libs/zard/src/lib/components/button-group/doc/overview.md:1-3
Timestamp: 2025-11-04T10:18:55.477Z
Learning: In zardui repo, doc/overview.md files for components should contain only a brief overview description. Examples are provided through separate demo files and the api.md documentation, not in overview.md.
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add barrel exports for all new components in libs/zard/src/lib/components/components.ts
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdlibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-29T15:31:22.377Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 339
File: libs/zard/src/lib/components/carousel/carousel.component.ts:92-92
Timestamp: 2025-11-29T15:31:22.377Z
Learning: In libs/zard/src/lib/components/**/*.component.ts files using TailwindCSS, avoid suggesting individual class bindings like `[class.fill-primary]="condition"` because they can cause TailwindCSS issues. Prefer string concatenation or `[class]` binding with conditional expressions instead.
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/domain/pages/about/about.page.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Keep commit messages in present tense, single line format with scope and description (e.g., '✨ feat(popover): add popover component')
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.md
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use TailwindCSS utility classes for styling, following responsive design patterns with prefixes for breakpoints (sm:, lg:) and ensure accessibility with semantic HTML and ARIA guidelines
Applied to files:
libs/zard/src/lib/shared/components/tabs/doc/overview.mdapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-11-30T19:07:11.572Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-11-14T22:52:09.135Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-10-31T10:03:18.563Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding for dynamic classes in components: `host: { '[class]': 'classes()' }`
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-11-13T18:05:35.468Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 324
File: libs/zard/src/lib/components/breadcrumb/breadcrumb.component.ts:34-60
Timestamp: 2025-11-13T18:05:35.468Z
Learning: In breadcrumb item components using RouterLink hostDirectives for host navigation, inject the RouterLink directive and use its `href` property for anchor elements to display URLs on hover, avoiding naming collisions between hostDirective inputs and component inputs.
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding with computed classes for dynamic class application
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-12-21T00:11:44.620Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: README.md:0-0
Timestamp: 2025-12-21T00:11:44.620Z
Learning: Use Angular, TailwindCSS, and TypeScript as the primary technology stack for component development
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Ensure components are standalone Angular components
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/app.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Refer to `docs/angular-llm.txt` for Angular best practices when developing components
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/app.component.tsapps/web/src/server.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs with `input()` in Angular components
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/app.component.tsapps/web/src/server.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/about/about.page.tsapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/server.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tsapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/domain/directives/scroll-spy.directive.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/component/component.page.ts
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx} : Components should be designed specifically for the Angular ecosystem and follow Angular conventions
Applied to files:
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.tsapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Applied to files:
apps/web/src/app/app.component.tsapps/web/src/server.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Applied to files:
apps/web/src/app/app.component.tsapps/web/src/server.tsapps/web/src/app/domain/components/doc-content/doc-content.component.tslibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/component/component.page.ts
📚 Learning: 2025-11-26T11:20:45.264Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/select/select.component.spec.ts:79-88
Timestamp: 2025-11-26T11:20:45.264Z
Learning: In ZardUI select component tests (libs/zard/src/lib/components/select/select.component.spec.ts), use fakeAsync() with flush() instead of setTimeout because the component uses setTimeout(..., 0) for focus management, which requires advancing macrotasks in tests.
Applied to files:
apps/web/src/app/app.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Follow PR checklist including: passing tests, code pattern compliance, updated documentation, working demos, no lint/typecheck warnings, linked issues, conventional commit in title
Applied to files:
apps/web/src/server.ts
📚 Learning: 2025-11-10T21:46:33.213Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 318
File: libs/zard/src/lib/components/select/demo/default.ts:21-21
Timestamp: 2025-11-10T21:46:33.213Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally showing different patterns (e.g., primitive values vs signals) across different demos is valuable for demonstrating the flexibility of Angular features like two-way binding.
Applied to files:
apps/web/src/server.tsapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-12-13T11:50:56.310Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:56.310Z
Learning: Do not flag or suggest removing `standalone: true` from test components (*.spec.ts files) or demo components (demo/*.ts files) in libs/zard/src/lib/shared/components/**/*.ts, as it is not a significant concern and the explicit flag is acceptable in these contexts.
Applied to files:
apps/web/src/server.tsapps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/domain/pages/about/about.page.html
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Implement TailwindCSS v4 with PostCSS for styling and use class merging with tailwind-merge to resolve conflicts
Applied to files:
apps/web/src/server.tsapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-30T08:50:23.436Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/core/providezard.ts:0-0
Timestamp: 2025-11-30T08:50:23.436Z
Learning: In libs/zard/src/lib/components/core/providezard.ts, the import paths `../core/event-manager-plugins/...` are intentionally structured this way because the ZardUI CLI transforms them to 'shared/components/core/event-manager-plugins/...' format. Other relative path combinations don't work with the current CLI implementation. This path pattern should not be simplified until the CLI transformation logic is updated.
Applied to files:
apps/web/src/server.tsapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/**/*.{css,ts} : Use CSS custom properties for design tokens and theming in the component library
Applied to files:
apps/web/src/styles.csslibs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/src/styles.css : Set up `src/styles.css` with Tailwind CSS configuration and design tokens using CSS `theme` and `plugin` directives
Applied to files:
apps/web/src/styles.css
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx,css} : Components should include built-in dark mode support
Applied to files:
apps/web/src/styles.css
📚 Learning: 2025-12-25T11:10:09.078Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 384
File: apps/web/src/styles.css:213-213
Timestamp: 2025-12-25T11:10:09.078Z
Learning: In Tailwind CSS v4, max-width utilities support dynamic numeric values derived from the spacing scale (using the --spacing variable, default 0.25rem = 4px). Prefer using numeric classes like max-w-350 when the value aligns with the spacing scale, since 350 × 0.25rem = 87.5rem = 1400px. Avoid arbitrary values expressed with brackets (e.g., max-w-[1400px]) when a scale-based value is available and accurate. Apply this guidance to CSS files in the web app (e.g., apps/web/src/styles.css) and across the codebase where Tailwind is used.
Applied to files:
apps/web/src/styles.css
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/components.json : Store CLI configuration in `components.json` with properties for style, tailwind configuration, baseUrl, and path aliases
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx} : Components should be built with accessibility in mind, ensuring they are accessible to all users
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-12-04T15:03:56.958Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 361
File: libs/zard/src/lib/components/pagination/demo/custom.ts:19-22
Timestamp: 2025-12-04T15:03:56.958Z
Learning: In pagination demos under libs/zard/src/lib/components/pagination/demo/*.ts, the pattern `<span class="sr-only">To page</span>{{ page }}` is correct for accessible button labels. Screen readers read both the sr-only text and the visible page number together, while visual users see only the page number. This approach is intentional and should not be flagged.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-12-27T09:27:44.604Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 388
File: apps/web/src/app/domain/pages/component/component.page.html:29-29
Timestamp: 2025-12-27T09:27:44.604Z
Learning: In templates under apps/web/src, this project uses a custom ZardEventManagerPlugin to extend Angular's event system, enabling multi-key filters with curly-brace syntax (e.g., (keydown.{arrowleft,arrowright,home,end,space,enter}.prevent)) and modifiers like .prevent, .stop, .stop-immediate, and .prevent-with-stop. Ensure code reviews check for correct usage of this syntax, verify that the plugin is registered via provideZard(), and ensure tests cover these patterns. This guidance is specific to the zard-ui/zardui repository.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/domain/pages/about/about.page.htmlapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-11-30T08:29:35.869Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/combobox/combobox.component.ts:227-229
Timestamp: 2025-11-30T08:29:35.869Z
Learning: In the zard-ui/zardui repository, the "curly" ESLint rule is enforced (configured as 'warn' in libs/zard/eslint.config.mjs). Always use explicit braces around control flow statements (if, else, for, while, etc.) even for single-statement blocks. Do not suggest one-line early returns or removing braces.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-26T10:13:44.258Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-30T13:27:41.206Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/popover/popover.component.ts:28-29
Timestamp: 2025-11-30T13:27:41.206Z
Learning: In libs/zard/src/lib/components/core/**/*.ts files (core utilities, plugins, and providers), use relative imports for intra-core dependencies because the ZardUI CLI performs path transformations during component installation. The CLI expects specific relative path patterns and transforms them to the target project structure. For all other component imports and application code, use zard/* path aliases.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/about/about.page.html
📚 Learning: 2025-11-04T20:46:01.373Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 309
File: libs/zard/src/lib/components/select/demo/multi-select.ts:23-27
Timestamp: 2025-11-04T20:46:01.373Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, console.log statements are acceptable and often intentional to demonstrate reactivity and help users understand how the component works.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses()` utility with `clsx` and `tailwind-merge` to resolve class conflicts in component styling
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use computed properties in Angular components for reactive class calculations: `protected readonly classes = computed(() => ...)`
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/component/component.page.ts
📚 Learning: 2025-12-21T00:12:15.303Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx} : Components should be modular and self-contained, allowing users to add only the components they need
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/*/demo/*.ts : Create demo examples in the demo/ folder with structured exports containing name, code, and component properties
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/demo/**/*.ts : Create demo components in the `demo/` folder with a main export, default example, and variant examples
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/icon/demo/searchable.ts
📚 Learning: 2025-12-08T17:34:37.975Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 367
File: libs/zard/src/lib/components/progress-bar/demo/shape.ts:9-11
Timestamp: 2025-12-08T17:34:37.975Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally mixing different variants (e.g., zType and zShape in a shape demo) is acceptable when done to showcase additional features that might not be demonstrated elsewhere.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-12-13T11:50:50.088Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:50.088Z
Learning: Do not flag or require removing standalone: true for test components (*.spec.ts) and demo components (demo/*.ts) within libs/zard/src/lib/shared/components/**.ts. In these contexts, an explicit standalone: true flag is acceptable; apply this exclusion when reviewing files under this path.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block components should use Angular signals for state management (e.g., signal() for loading states) and ReactiveFormsModule for form handling with Validators
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/about/about.page.tsapps/web/src/app/domain/pages/component/component.page.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use mergeClasses utility from zard/shared/utils for combining CVA variants with custom classes
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for type-safe styling variants in components
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for typed variants in component styling
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.ts
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block component files must use the .component.ts extension and should be standalone Angular components with explicit imports from ReactiveFormsModule and ZardUI components
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/about/about.page.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/component/component.page.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/tabs/tabs.component.tsapps/web/src/app/domain/pages/component/component.page.ts
📚 Learning: 2025-11-15T21:22:05.244Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 328
File: libs/zard/src/lib/components/select/demo/multi-select.ts:1-1
Timestamp: 2025-11-15T21:22:05.244Z
Learning: In Angular components that use model() for inputs (like zValue in ZardSelectComponent), two-way binding with WritableSignals is fully supported. The pattern [(zValue)]="selectedValues" where selectedValues = signal<string[]>([]) works correctly because model() automatically handles unwrapping and updating the signal.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tsapps/web/src/app/domain/pages/about/about.page.ts
📚 Learning: 2025-12-21T21:17:39.497Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 383
File: libs/zard/src/lib/shared/components/carousel/carousel.component.ts:114-115
Timestamp: 2025-12-21T21:17:39.497Z
Learning: In Angular components that use signal inputs (Input()) with types from external libraries (e.g., Embla Carousel), add explicit type annotations to prevent TypeScript IDE errors about inferred types referencing non-portable node_modules paths. For example, declare a readonly typed input like: readonly zOptions: InputSignal<EmblaOptionsType> = input<EmblaOptionsType>(...). This explicit annotation helps avoid the error cannot be named without a reference to node_modules. Apply this pattern to components in the shared carousel area (and similar components) whenever an external library type is used in an InputSignal to ensure type safety and IDE compatibility.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-12-15T11:43:06.831Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 373
File: libs/zard/src/lib/shared/components/select/select.component.ts:33-33
Timestamp: 2025-12-15T11:43:06.831Z
Learning: In files under libs/zard/src/lib/**/*.{ts,tsx,js}, prefer the @/ path alias for imports that map to libs/zard/src/lib/* directories. For example, write import { mergeClasses } from '@/shared/utils/merge-classes' instead of using the 'zard/' alias. This improves path readability and aligns with the project's alias configuration.
Applied to files:
libs/zard/src/lib/shared/components/icon/demo/searchable.tslibs/zard/src/lib/shared/components/table/table.variants.tslibs/zard/src/lib/shared/components/tabs/tabs.component.ts
📚 Learning: 2025-11-19T20:03:29.205Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 320
File: libs/zard/src/lib/components/tooltip/tooltip.ts:82-105
Timestamp: 2025-11-19T20:03:29.205Z
Learning: In the zard-ui/zardui repository, non-null assertion operator (!) is forbidden by ESLint rule "Forbidden non-null assertion". Use type assertions (e.g., `(value as Type)`) instead when narrowing types after null/undefined checks.
Applied to files:
libs/zard/src/lib/shared/components/table/table.variants.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-12-21T21:17:39.497Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 383
File: libs/zard/src/lib/shared/components/carousel/carousel.component.ts:114-115
Timestamp: 2025-12-21T21:17:39.497Z
Learning: In Angular components using signal inputs (input()) with types from external libraries like Embla Carousel, explicit type annotations (e.g., `readonly zOptions: InputSignal<EmblaOptionsType> = input<EmblaOptionsType>(...)`) may be necessary to prevent TypeScript IDE errors about inferred types referencing non-portable node_modules paths. This is not redundant when the annotation prevents the "cannot be named without a reference to node_modules" error.
Applied to files:
apps/web/src/app/domain/pages/about/about.page.tsapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/domain/components/doc-content/doc-content.component.html
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Block template files must use ZardUI form components (ZardFormFieldComponent, ZardFormLabelComponent, ZardFormControlComponent) for form validation and error handling
Applied to files:
libs/zard/src/lib/shared/components/tabs/tabs.component.ts
🧬 Code graph analysis (5)
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (1)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
getHeaderOffset(7-23)
apps/web/src/app/app.component.ts (1)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
getHeaderOffset(7-23)
apps/web/src/app/domain/pages/about/about.page.ts (1)
apps/web/src/app/domain/components/dynamic-anchor/dynamic-anchor.component.ts (1)
NavigationConfig(14-16)
apps/web/src/app/domain/pages/component/component.page.ts (1)
apps/web/src/app/shared/constants/components.constant.ts (1)
ComponentData(48-53)
apps/web/src/app/domain/directives/scroll-spy.directive.ts (1)
apps/web/src/app/domain/directives/scroll-spy-item.directive.ts (1)
Directive(3-10)
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/web/src/app/shared/services/rehype-enhanced-code.ts (1)
385-388: Critical: Variable shadowing causes incorrect copy button behavior.Line 386 redeclares
hasTitle, which shadows the variable declared at line 287. This creates a logic error:
- Line 385 checks
!hasTitle(from line 287: whether 'title' is in meta)- Line 386 redefines
hasTitle(whether filename/icon exists for display)- Line 387 passes the redeclared value to
createCopyButtonThis inconsistency means the copy button receives conflicting information about whether a title exists.
🔎 Proposed fix
// Add copy button only if copyButton parameter is present if (hasCopyButton && !hasTitle) { - const hasTitle = !!(filename || (language && icon)); - codeBlockContent.children.push(createCopyButton(codeContent, hasTitle)); + const hasDisplayTitle = !!(filename || (language && icon)); + codeBlockContent.children.push(createCopyButton(codeContent, hasDisplayTitle)); }Or clarify the logic by using the correct variable directly:
// Add copy button only if copyButton parameter is present if (hasCopyButton && !hasTitle) { - const hasTitle = !!(filename || (language && icon)); - codeBlockContent.children.push(createCopyButton(codeContent, hasTitle)); + codeBlockContent.children.push(createCopyButton(codeContent, false)); }The second option assumes that when entering this block (
!hasTitleis true), you always want to passfalsetocreateCopyButton. Choose based on the intended behavior.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (4)
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/shared/services/rehype-enhanced-code.tsapps/web/src/app/shared/utils/code-tabs.ts
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use path aliases @zard/* to map to libs/zard/src/lib/* in imports
Files:
apps/web/src/app/shared/utils/code-tabs.tsapps/web/src/app/shared/services/rehype-enhanced-code.tsapps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
🧠 Learnings (16)
📓 Common learnings
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Follow PR checklist including: passing tests, code pattern compliance, updated documentation, working demos, no lint/typecheck warnings, linked issues, conventional commit in title
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: README.md:0-0
Timestamp: 2025-12-21T00:11:44.620Z
Learning: Use Angular, TailwindCSS, and TypeScript as the primary technology stack for component development
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block components should use Angular signals for state management (e.g., signal() for loading states) and ReactiveFormsModule for form handling with Validators
Learnt from: mikij
Repo: zard-ui/zardui PR: 318
File: libs/zard/src/lib/components/select/demo/default.ts:21-21
Timestamp: 2025-11-10T21:46:33.213Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally showing different patterns (e.g., primitive values vs signals) across different demos is valuable for demonstrating the flexibility of Angular features like two-way binding.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Implement TailwindCSS v4 with PostCSS for styling and use class merging with tailwind-merge to resolve conflicts
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-12-21T00:12:15.303Z
Learning: Applies to packages/cli/**/*.{ts,tsx} : Components should be designed specifically for the Angular ecosystem and follow Angular conventions
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use TailwindCSS utility classes for styling, following responsive design patterns with prefixes for breakpoints (sm:, lg:) and ensure accessibility with semantic HTML and ARIA guidelines
Applied to files:
apps/web/src/app/shared/services/rehype-enhanced-code.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-10-31T10:03:18.563Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Ensure components are standalone Angular components
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-11-14T22:52:09.135Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-12-21T00:12:01.332Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.332Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block component files must use the .component.ts extension and should be standalone Angular components with explicit imports from ReactiveFormsModule and ZardUI components
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-12-13T11:50:56.310Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:56.310Z
Learning: Do not flag or suggest removing `standalone: true` from test components (*.spec.ts files) or demo components (demo/*.ts files) in libs/zard/src/lib/shared/components/**/*.ts, as it is not a significant concern and the explicit flag is acceptable in these contexts.
Applied to files:
apps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use computed properties in Angular components for reactive class calculations: `protected readonly classes = computed(() => ...)`
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-12-21T00:11:39.443Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.443Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs with `input()` in Angular components
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-11-30T13:27:41.206Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/popover/popover.component.ts:28-29
Timestamp: 2025-11-30T13:27:41.206Z
Learning: In libs/zard/src/lib/components/core/**/*.ts files (core utilities, plugins, and providers), use relative imports for intra-core dependencies because the ZardUI CLI performs path transformations during component installation. The CLI expects specific relative path patterns and transforms them to the target project structure. For all other component imports and application code, use zard/* path aliases.
Applied to files:
apps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Use Angular TestBed and ComponentFixture utilities for testing components
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-11-13T18:05:35.468Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 324
File: libs/zard/src/lib/components/breadcrumb/breadcrumb.component.ts:34-60
Timestamp: 2025-11-13T18:05:35.468Z
Learning: In breadcrumb item components using RouterLink hostDirectives for host navigation, inject the RouterLink directive and use its `href` property for anchor elements to display URLs on hover, avoiding naming collisions between hostDirective inputs and component inputs.
Applied to files:
apps/web/src/app/domain/components/step/step.component.ts
🧬 Code graph analysis (1)
apps/web/src/app/domain/components/step/step.component.ts (1)
apps/web/src/app/domain/components/steps/steps.component.ts (1)
Component(6-22)
🔇 Additional comments (8)
apps/web/src/app/domain/components/step/step.component.ts (3)
1-1: Clean migration: ChangeDetectionStrategy import added.The addition of
ChangeDetectionStrategyimport aligns with the OnPush strategy applied in the component metadata (line 45).
4-7: Path aliases correctly applied.Import paths have been updated to use the
@doc/*and@zard/*aliases, which aligns with the project's coding guidelines for path mapping.
45-46: OnPush change detection strategy applied correctly.The migration from
standalone: truetochangeDetection: ChangeDetectionStrategy.OnPushfollows Angular best practices for performance optimization. The removal of the explicitstandaloneflag is correct since Angular 19+ components are standalone by default.apps/web/src/app/domain/components/steps/steps.component.ts (3)
1-1: ChangeDetectionStrategy import added for OnPush migration.The import supports the OnPush strategy applied at line 17, completing the performance optimization pattern.
3-3: StepComponent import updated to path alias.The import has been correctly updated from a relative path to use the
@doc/*alias, ensuring consistency with the project's path mapping strategy.
17-18: OnPush change detection applied correctly.The component now uses
ChangeDetectionStrategy.OnPushfor performance optimization. The removal of the explicitstandalone: trueflag is appropriate since Angular 19+ defaults to standalone components. The component correctly declares its dependency onStepComponentin the imports array.apps/web/src/app/shared/services/rehype-enhanced-code.ts (2)
70-71: LGTM! Copy button UX improvements.The addition of
cursor-pointerand the positioning adjustment withtop-3enhance the copy button's accessibility and visual feedback, aligning with the commit message objective of keeping the copy button available.
116-116: Integration testing required to validate overlay positioning across code block scenarios.The
top-10positioning in the expandable overlay is intentional—it overrides the top value frominset-0to create a 40px offset, allowing code visibility while the gradient overlay fades in. However, this design cannot be verified through code analysis alone:
- Fixed height
h-[250px]is hardcoded without responsive adjustments- No conditional logic differentiates positioning based on title/copy button presence
- Button alignment relies on flex
items-end+pb-8(bottom padding)Verify the overlay displays correctly in actual usage with:
- Varying code block lengths (both under and over 250px)
- With and without titles
- With and without copy buttons
- Across mobile and desktop viewports
mikij
force-pushed
the
update-project-angular21
branch
2 times, most recently
from
7a1e6de to
ddcf3a3
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (4)
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/shared/services/rehype-enhanced-code.tsapps/web/src/app/shared/utils/code-tabs.ts
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use path aliases @zard/* to map to libs/zard/src/lib/* in imports
Files:
apps/web/src/app/shared/utils/code-tabs.tsapps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/shared/services/rehype-enhanced-code.ts
🧠 Learnings (17)
📓 Common learnings
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.450Z
Learning: Follow PR checklist including: passing tests, code pattern compliance, updated documentation, working demos, no lint/typecheck warnings, linked issues, conventional commit in title
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: README.md:0-0
Timestamp: 2025-12-21T00:11:44.633Z
Learning: Use Angular, TailwindCSS, and TypeScript as the primary technology stack for component development
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.450Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.342Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block components should use Angular signals for state management (e.g., signal() for loading states) and ReactiveFormsModule for form handling with Validators
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Learnt from: mikij
Repo: zard-ui/zardui PR: 324
File: libs/zard/src/lib/components/breadcrumb/breadcrumb.component.ts:34-60
Timestamp: 2025-11-13T18:05:35.468Z
Learning: In breadcrumb item components using RouterLink hostDirectives for host navigation, inject the RouterLink directive and use its `href` property for anchor elements to display URLs on hover, avoiding naming collisions between hostDirective inputs and component inputs.
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.450Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Implement TailwindCSS v4 with PostCSS for styling and use class merging with tailwind-merge to resolve conflicts
📚 Learning: 2025-11-29T15:31:22.377Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 339
File: libs/zard/src/lib/components/carousel/carousel.component.ts:92-92
Timestamp: 2025-11-29T15:31:22.377Z
Learning: In libs/zard/src/lib/components/**/*.component.ts files using TailwindCSS, avoid suggesting individual class bindings like `[class.fill-primary]="condition"` because they can cause TailwindCSS issues. Prefer string concatenation or `[class]` binding with conditional expressions instead.
Applied to files:
apps/web/src/app/shared/utils/code-tabs.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-12-21T00:11:39.450Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.450Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-11-14T22:52:09.135Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-12-21T00:11:39.450Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.450Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Ensure components are standalone Angular components
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-10-31T10:03:18.563Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use computed properties in Angular components for reactive class calculations: `protected readonly classes = computed(() => ...)`
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-12-21T00:12:01.342Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.342Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block component files must use the .component.ts extension and should be standalone Angular components with explicit imports from ReactiveFormsModule and ZardUI components
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-12-21T00:11:39.450Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.450Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs with `input()` in Angular components
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-11-30T13:27:41.206Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/popover/popover.component.ts:28-29
Timestamp: 2025-11-30T13:27:41.206Z
Learning: In libs/zard/src/lib/components/core/**/*.ts files (core utilities, plugins, and providers), use relative imports for intra-core dependencies because the ZardUI CLI performs path transformations during component installation. The CLI expects specific relative path patterns and transforms them to the target project structure. For all other component imports and application code, use zard/* path aliases.
Applied to files:
apps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Use Angular TestBed and ComponentFixture utilities for testing components
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-11-13T18:05:35.468Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 324
File: libs/zard/src/lib/components/breadcrumb/breadcrumb.component.ts:34-60
Timestamp: 2025-11-13T18:05:35.468Z
Learning: In breadcrumb item components using RouterLink hostDirectives for host navigation, inject the RouterLink directive and use its `href` property for anchor elements to display URLs on hover, avoiding naming collisions between hostDirective inputs and component inputs.
Applied to files:
apps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-12-13T11:50:56.310Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:56.310Z
Learning: Do not flag or suggest removing `standalone: true` from test components (*.spec.ts files) or demo components (demo/*.ts files) in libs/zard/src/lib/shared/components/**/*.ts, as it is not a significant concern and the explicit flag is acceptable in these contexts.
Applied to files:
apps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-12-21T00:12:01.342Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.342Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use TailwindCSS utility classes for styling, following responsive design patterns with prefixes for breakpoints (sm:, lg:) and ensure accessibility with semantic HTML and ARIA guidelines
Applied to files:
apps/web/src/app/shared/services/rehype-enhanced-code.ts
🔇 Additional comments (6)
apps/web/src/app/shared/utils/code-tabs.ts (1)
105-107: LGTM! Active tab selector now matches the applied class.This change correctly addresses the previous review concern. The selector now queries for
.bg-code-tab, which aligns with the class added in line 27 when a tab becomes active. The fallback to.text-foregroundprovides additional safety if the primary selector doesn't match.apps/web/src/app/shared/services/rehype-enhanced-code.ts (2)
116-116: Verify the expandable overlay positioning.The
top-10class shifts the overlay down by 2.5rem. Ensure this positioning works correctly with the expandable code blocks and doesn't overlap with other UI elements (e.g., title bars or copy buttons).
386-387: Good variable rename for clarity.The rename from
hasTitletohasDisplayTitlebetter conveys that this variable checks for the presence of displayable title content (filename or language icon), rather than thehasTitlemeta parameter. This improves code readability.apps/web/src/app/domain/components/step/step.component.ts (2)
1-7: Excellent migration to Angular 21 patterns!The imports are correctly structured with
ChangeDetectionStrategyadded and alias paths (@doc/*and@zard/*) properly utilized per coding guidelines.
45-46: Perfect! OnPush strategy and signal-based inputs applied.The component correctly implements
ChangeDetectionStrategy.OnPushwith signal-based inputs (input<Step>(),input<number>()), standalone pattern with explicit imports, and native control flow (@if). All import paths resolve correctly via the configured path aliases. This follows Angular best practices and project standards.apps/web/src/app/domain/components/steps/steps.component.ts (1)
1-22: Stellar Angular 21 migration!This component exemplifies best practices:
- ✅
ChangeDetectionStrategy.OnPushfor optimal performance- ✅ Signal-based inputs with
input<Step[]>()- ✅ Alias path imports (
@doc/*) for consistency- ✅ Modern control flow (
@if,@for,track)- ✅ No legacy decorators
The migration is clean, consistent with the companion
StepComponent, and follows all project standards.Based on learnings and coding guidelines.
mikij
force-pushed
the
update-project-angular21
branch
from
ddcf3a3 to
05ada2c
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/web/src/app/shared/utils/code-tabs.ts (1)
77-83: Fix class name mismatch in success feedback cleanup.Line 77 adds
bg-green-50but line 83 attempts to removebg-green-500. This mismatch prevents proper cleanup of the success styling.🔎 Proposed fix
setTimeout(() => { button.innerHTML = originalHTML; - button.classList.remove('bg-green-500', 'border-green-200', 'text-green-600'); + button.classList.remove('bg-green-50', 'border-green-200', 'text-green-600'); button.classList.add('text-muted-foreground'); }, 2000);
♻️ Duplicate comments (1)
apps/web/src/app/shared/services/rehype-enhanced-code.ts (1)
70-71: Redundant cursor-pointer class (previously flagged).The
cursor-pointerclass remains redundant for native<button>elements, which display a pointer cursor by default unless overridden by a CSS reset.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (4)
.amazonq/rules/memory-bank/guidelines.mdis excluded by none and included by none.amazonq/rules/memory-bank/product.mdis excluded by none and included by none.amazonq/rules/memory-bank/structure.mdis excluded by none and included by none.amazonq/rules/memory-bank/tech.mdis excluded by none and included by none
📒 Files selected for processing (4)
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/shared/services/rehype-enhanced-code.tsapps/web/src/app/shared/utils/code-tabs.ts
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use path aliases @zard/* to map to libs/zard/src/lib/* in imports
Files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/shared/utils/code-tabs.tsapps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/shared/services/rehype-enhanced-code.ts
🧠 Learnings (17)
📓 Common learnings
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.450Z
Learning: Follow PR checklist including: passing tests, code pattern compliance, updated documentation, working demos, no lint/typecheck warnings, linked issues, conventional commit in title
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.450Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.342Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block components should use Angular signals for state management (e.g., signal() for loading states) and ReactiveFormsModule for form handling with Validators
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: README.md:0-0
Timestamp: 2025-12-21T00:11:44.633Z
Learning: Use Angular, TailwindCSS, and TypeScript as the primary technology stack for component development
Learnt from: mikij
Repo: zard-ui/zardui PR: 318
File: libs/zard/src/lib/components/select/demo/default.ts:21-21
Timestamp: 2025-11-10T21:46:33.213Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally showing different patterns (e.g., primitive values vs signals) across different demos is valuable for demonstrating the flexibility of Angular features like two-way binding.
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Refer to `docs/angular-llm.txt` for Angular best practices when developing components
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-12-21T00:11:39.450Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.450Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-11-14T22:52:09.135Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-12-21T00:11:39.450Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.450Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Ensure components are standalone Angular components
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-10-31T10:03:18.563Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use computed properties in Angular components for reactive class calculations: `protected readonly classes = computed(() => ...)`
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-12-21T00:12:01.342Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.342Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block component files must use the .component.ts extension and should be standalone Angular components with explicit imports from ReactiveFormsModule and ZardUI components
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-12-13T11:50:56.310Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:56.310Z
Learning: Do not flag or suggest removing `standalone: true` from test components (*.spec.ts files) or demo components (demo/*.ts files) in libs/zard/src/lib/shared/components/**/*.ts, as it is not a significant concern and the explicit flag is acceptable in these contexts.
Applied to files:
apps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-12-21T00:11:39.450Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.450Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs with `input()` in Angular components
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-11-30T13:27:41.206Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/popover/popover.component.ts:28-29
Timestamp: 2025-11-30T13:27:41.206Z
Learning: In libs/zard/src/lib/components/core/**/*.ts files (core utilities, plugins, and providers), use relative imports for intra-core dependencies because the ZardUI CLI performs path transformations during component installation. The CLI expects specific relative path patterns and transforms them to the target project structure. For all other component imports and application code, use zard/* path aliases.
Applied to files:
apps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Use Angular TestBed and ComponentFixture utilities for testing components
Applied to files:
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.ts
📚 Learning: 2025-11-13T18:05:35.468Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 324
File: libs/zard/src/lib/components/breadcrumb/breadcrumb.component.ts:34-60
Timestamp: 2025-11-13T18:05:35.468Z
Learning: In breadcrumb item components using RouterLink hostDirectives for host navigation, inject the RouterLink directive and use its `href` property for anchor elements to display URLs on hover, avoiding naming collisions between hostDirective inputs and component inputs.
Applied to files:
apps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-11-29T15:31:22.377Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 339
File: libs/zard/src/lib/components/carousel/carousel.component.ts:92-92
Timestamp: 2025-11-29T15:31:22.377Z
Learning: In libs/zard/src/lib/components/**/*.component.ts files using TailwindCSS, avoid suggesting individual class bindings like `[class.fill-primary]="condition"` because they can cause TailwindCSS issues. Prefer string concatenation or `[class]` binding with conditional expressions instead.
Applied to files:
apps/web/src/app/shared/utils/code-tabs.ts
📚 Learning: 2025-12-21T00:12:01.342Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.342Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use TailwindCSS utility classes for styling, following responsive design patterns with prefixes for breakpoints (sm:, lg:) and ensure accessibility with semantic HTML and ARIA guidelines
Applied to files:
apps/web/src/app/shared/services/rehype-enhanced-code.ts
🧬 Code graph analysis (1)
apps/web/src/app/domain/components/step/step.component.ts (1)
apps/web/src/app/domain/components/steps/steps.component.ts (1)
Component(6-22)
🔇 Additional comments (6)
apps/web/src/app/domain/components/step/step.component.ts (2)
1-1: Excellent Angular 21 compliance: OnPush and signals confirmed.The addition of
ChangeDetectionStrategy.OnPushoptimizes performance, and the component already uses signal-based inputs (input<Step>(),input<number>()). Native control flow (@if) in the template and the removal ofstandalone: true(redundant in Angular 21) are correct. Well done.Also applies to: 45-45
4-5: Path aliases correctly applied.The import paths use
@doc/*and@zard/*aliases, which aligns with the project's coding guidelines for path mapping.Also applies to: 7-7
apps/web/src/app/domain/components/steps/steps.component.ts (2)
1-1: Perfect Angular 21 modernization: OnPush and signal input.The addition of
ChangeDetectionStrategy.OnPushand the new signal-based inputreadonly steps = input<Step[]>()follow best practices. The template's@forwithtrack step.titleand@ifnative control flow are correct. Removal ofstandalone: trueis appropriate for Angular 21.Also applies to: 17-17, 21-21
3-3: Import alias correctly applied.The change from a relative import to the
@doc/*alias path forStepComponentaligns with project coding guidelines.apps/web/src/app/shared/services/rehype-enhanced-code.ts (1)
116-116: Verify expandable overlay positioning.The overlay now starts at
top-10instead of the previous position. Ensure this doesn't cause overlap issues with the title area or copy button, especially when both expandable and title features are used together.apps/web/src/app/shared/utils/code-tabs.ts (1)
105-107: Previous selector issue resolved.The selector now correctly queries for
.bg-code-tab, which matches the class applied to active tabs in line 27. The fallback to.text-foregroundprovides additional resilience.
mikij
force-pushed
the
update-project-angular21
branch
from
05ada2c to
253b0fb
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (3)
apps/web/src/app/shared/services/rehype-enhanced-code.ts (3)
70-71: Redundantcursor-pointerclass (duplicate concern).This was already flagged in a previous review. The
cursor-pointerclass is redundant for<button>elements unless overridden by a CSS reset.
375-376: Good refactoring (duplicate praise).The rename from
hasTitletohasDisplayTitlewas already noted in a previous review as improving clarity between the meta parameter and the computed display state.
171-180: Inconsistent icon handling vs.createTabsWrapper.This function always renders an
<img>element for the icon, butcreateTabsWrapperat line 566 conditionally checksicon?.includes('/')before rendering. If non-image icons (e.g., font icon classes) ornullvalues can be passed, this could render broken images.Verify that all code paths guarantee
iconis eithernullor a valid image path. If not, add defensive logic:🔎 Suggested defensive check
- titleChildren.push({ - type: 'element', - tagName: 'img', - properties: { - src: icon, - alt: '', - class: ['h-4', 'w-4', 'shrink-0', 'invert-0', 'dark:invert'], - }, - children: [], - }); + if (icon?.includes('/')) { + titleChildren.push({ + type: 'element', + tagName: 'img', + properties: { + src: icon, + alt: '', + class: ['h-4', 'w-4', 'shrink-0', 'invert-0', 'dark:invert'], + }, + children: [], + }); + }
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (4)
.amazonq/rules/memory-bank/guidelines.mdis excluded by none and included by none.amazonq/rules/memory-bank/product.mdis excluded by none and included by none.amazonq/rules/memory-bank/structure.mdis excluded by none and included by none.amazonq/rules/memory-bank/tech.mdis excluded by none and included by none
📒 Files selected for processing (4)
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/shared/services/rehype-enhanced-code.tsapps/web/src/app/shared/utils/code-tabs.ts
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use path aliases @zard/* to map to libs/zard/src/lib/* in imports
Files:
apps/web/src/app/shared/utils/code-tabs.tsapps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/shared/services/rehype-enhanced-code.ts
🧠 Learnings (19)
📓 Common learnings
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.450Z
Learning: Follow PR checklist including: passing tests, code pattern compliance, updated documentation, working demos, no lint/typecheck warnings, linked issues, conventional commit in title
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.450Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Learnt from: mikij
Repo: zard-ui/zardui PR: 324
File: libs/zard/src/lib/components/breadcrumb/breadcrumb.component.ts:34-60
Timestamp: 2025-11-13T18:05:35.468Z
Learning: In breadcrumb item components using RouterLink hostDirectives for host navigation, inject the RouterLink directive and use its `href` property for anchor elements to display URLs on hover, avoiding naming collisions between hostDirective inputs and component inputs.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.342Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block components should use Angular signals for state management (e.g., signal() for loading states) and ReactiveFormsModule for form handling with Validators
Learnt from: mikij
Repo: zard-ui/zardui PR: 318
File: libs/zard/src/lib/components/select/demo/default.ts:21-21
Timestamp: 2025-11-10T21:46:33.213Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally showing different patterns (e.g., primitive values vs signals) across different demos is valuable for demonstrating the flexibility of Angular features like two-way binding.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: README.md:0-0
Timestamp: 2025-12-21T00:11:44.633Z
Learning: Use Angular, TailwindCSS, and TypeScript as the primary technology stack for component development
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Refer to `docs/angular-llm.txt` for Angular best practices when developing components
📚 Learning: 2025-11-29T15:31:22.377Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 339
File: libs/zard/src/lib/components/carousel/carousel.component.ts:92-92
Timestamp: 2025-11-29T15:31:22.377Z
Learning: In libs/zard/src/lib/components/**/*.component.ts files using TailwindCSS, avoid suggesting individual class bindings like `[class.fill-primary]="condition"` because they can cause TailwindCSS issues. Prefer string concatenation or `[class]` binding with conditional expressions instead.
Applied to files:
apps/web/src/app/shared/utils/code-tabs.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Applied to files:
apps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-12-21T00:11:39.450Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.450Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Applied to files:
apps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-12-21T00:11:39.450Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.450Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Ensure components are standalone Angular components
Applied to files:
apps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Applied to files:
apps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-10-31T10:03:18.563Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Applied to files:
apps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Applied to files:
apps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use computed properties in Angular components for reactive class calculations: `protected readonly classes = computed(() => ...)`
Applied to files:
apps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-11-14T22:52:09.135Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Applied to files:
apps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-12-21T00:11:39.450Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.450Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs with `input()` in Angular components
Applied to files:
apps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-12-21T00:12:01.342Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.342Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block component files must use the .component.ts extension and should be standalone Angular components with explicit imports from ReactiveFormsModule and ZardUI components
Applied to files:
apps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Use Angular TestBed and ComponentFixture utilities for testing components
Applied to files:
apps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-12-21T00:11:39.450Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.450Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add barrel exports for all new components in libs/zard/src/lib/components/components.ts
Applied to files:
apps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-11-30T13:27:41.206Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/popover/popover.component.ts:28-29
Timestamp: 2025-11-30T13:27:41.206Z
Learning: In libs/zard/src/lib/components/core/**/*.ts files (core utilities, plugins, and providers), use relative imports for intra-core dependencies because the ZardUI CLI performs path transformations during component installation. The CLI expects specific relative path patterns and transforms them to the target project structure. For all other component imports and application code, use zard/* path aliases.
Applied to files:
apps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-11-13T18:05:35.468Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 324
File: libs/zard/src/lib/components/breadcrumb/breadcrumb.component.ts:34-60
Timestamp: 2025-11-13T18:05:35.468Z
Learning: In breadcrumb item components using RouterLink hostDirectives for host navigation, inject the RouterLink directive and use its `href` property for anchor elements to display URLs on hover, avoiding naming collisions between hostDirective inputs and component inputs.
Applied to files:
apps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-12-13T11:50:56.310Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:56.310Z
Learning: Do not flag or suggest removing `standalone: true` from test components (*.spec.ts files) or demo components (demo/*.ts files) in libs/zard/src/lib/shared/components/**/*.ts, as it is not a significant concern and the explicit flag is acceptable in these contexts.
Applied to files:
apps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-12-21T00:11:39.450Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.450Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Implement TailwindCSS v4 with PostCSS for styling and use class merging with tailwind-merge to resolve conflicts
Applied to files:
apps/web/src/app/shared/services/rehype-enhanced-code.ts
📚 Learning: 2025-12-21T00:12:01.342Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.342Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use TailwindCSS utility classes for styling, following responsive design patterns with prefixes for breakpoints (sm:, lg:) and ensure accessibility with semantic HTML and ARIA guidelines
Applied to files:
apps/web/src/app/shared/services/rehype-enhanced-code.ts
🔇 Additional comments (7)
apps/web/src/app/domain/components/step/step.component.ts (1)
1-51: LGTM! Clean Angular 21 migration.The component properly adopts
OnPushchange detection, uses signal-based inputs withinput(), removes the redundantstandalone: trueflag (default in Angular 21), and maintains native control flow syntax (@if). Import paths updated correctly with alias usage.apps/web/src/app/domain/components/steps/steps.component.ts (2)
1-22: LGTM! OnPush and alias imports correctly applied.The migration properly adds
OnPushchange detection (line 17), uses the@doc/domain/components/step/step.componentalias import path (line 3), and removes redundantstandalone: true. Signal-based inputs and native@forcontrol flow already in place.
21-21: AI summary inconsistency detected.The AI summary states that
readonly steps = input<Step[]>()was added in this PR, but the code shows this line without a~marker, indicating it was not modified. This input likely existed before the migration.apps/web/src/app/shared/services/rehype-enhanced-code.ts (3)
116-116: LGTM: Intentional spacing adjustment.The
top-10class positions the expandable overlay below the code title area (which occupies the top portion). This ensures proper visual layering.
479-479: LGTM: Cleaner truthiness check.Simplifying to
elementsToRemove.lengthis idiomatic JavaScript. Functionally equivalent to the explicit> 0comparison.
566-577: LGTM: Defensive icon check.The conditional
icon?.includes('/')ensures only valid image paths are rendered. This is the correct pattern that should also be applied increateCodeTitle(see related comment on lines 171-180).apps/web/src/app/shared/utils/code-tabs.ts (1)
105-107: LGTM! Active tab selector correctly updated.The selector now correctly uses
.bg-code-tabto match the class applied inswitchCodeTab()(line 27), resolving the critical issue flagged in previous review. The fallback to.text-foregroundprovides additional robustness.
mikij
force-pushed
the
update-project-angular21
branch
from
253b0fb to
f0d0fa1
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/web/src/app/shared/services/rehype-enhanced-code.ts (1)
566-577: Good defensive check for icon paths.This code correctly validates that
iconcontains/before rendering the<img>element, ensuring only valid icon paths are rendered.However, note that
createCodeTitle(lines 171-180) doesn't perform this same check and unconditionally renders the icon. Consider applying the same defensive pattern there for consistency.🔎 Suggested improvement for createCodeTitle
function createCodeTitle(filename: string, icon: string | null, copyButton: boolean, codeContent: string): any { const titleChildren = []; - titleChildren.push({ - type: 'element', - tagName: 'img', - properties: { - src: icon, - alt: '', - class: ['h-4', 'w-4', 'shrink-0', 'invert-0', 'dark:invert'], - }, - children: [], - }); + if (icon?.includes('/')) { + titleChildren.push({ + type: 'element', + tagName: 'img', + properties: { + src: icon, + alt: '', + class: ['h-4', 'w-4', 'shrink-0', 'invert-0', 'dark:invert'], + }, + children: [], + }); + }
♻️ Duplicate comments (3)
apps/web/src/app/shared/utils/code-tabs.ts (1)
74-74: Remove ineffectivetext-green-500class from img element.The
text-green-500utility has no effect on<img>elements loading external SVGs. Text color classes only apply to text content or inline SVG withfill-current/stroke-current.🔎 Proposed fix
- button.innerHTML = `<img src="/icons/check.svg" alt="Copied" class="h-4 w-4 text-green-500" />`; + button.innerHTML = `<img src="/icons/check.svg" alt="Copied" class="h-4 w-4" />`;apps/web/src/app/shared/services/rehype-enhanced-code.ts (2)
70-71: Previously flagged: redundantcursor-pointerclass.This was already noted in a previous review. HTML
<button>elements display a pointer cursor by default unless overridden by a CSS reset.
375-376: Previously approved:hasDisplayTitlerename.This renaming was already reviewed and approved in a previous review as improving clarity by distinguishing from the
hasTitlemeta parameter.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (4)
.amazonq/rules/memory-bank/guidelines.mdis excluded by none and included by none.amazonq/rules/memory-bank/product.mdis excluded by none and included by none.amazonq/rules/memory-bank/structure.mdis excluded by none and included by none.amazonq/rules/memory-bank/tech.mdis excluded by none and included by none
📒 Files selected for processing (4)
apps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/shared/services/rehype-enhanced-code.tsapps/web/src/app/shared/utils/code-tabs.ts
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use path aliases @zard/* to map to libs/zard/src/lib/* in imports
Files:
apps/web/src/app/shared/utils/code-tabs.tsapps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/domain/components/step/step.component.tsapps/web/src/app/shared/services/rehype-enhanced-code.ts
🧠 Learnings (19)
📓 Common learnings
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.450Z
Learning: Follow PR checklist including: passing tests, code pattern compliance, updated documentation, working demos, no lint/typecheck warnings, linked issues, conventional commit in title
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.450Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Learnt from: mikij
Repo: zard-ui/zardui PR: 324
File: libs/zard/src/lib/components/breadcrumb/breadcrumb.component.ts:34-60
Timestamp: 2025-11-13T18:05:35.468Z
Learning: In breadcrumb item components using RouterLink hostDirectives for host navigation, inject the RouterLink directive and use its `href` property for anchor elements to display URLs on hover, avoiding naming collisions between hostDirective inputs and component inputs.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.342Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block components should use Angular signals for state management (e.g., signal() for loading states) and ReactiveFormsModule for form handling with Validators
Learnt from: mikij
Repo: zard-ui/zardui PR: 318
File: libs/zard/src/lib/components/select/demo/default.ts:21-21
Timestamp: 2025-11-10T21:46:33.213Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally showing different patterns (e.g., primitive values vs signals) across different demos is valuable for demonstrating the flexibility of Angular features like two-way binding.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: README.md:0-0
Timestamp: 2025-12-21T00:11:44.633Z
Learning: Use Angular, TailwindCSS, and TypeScript as the primary technology stack for component development
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Refer to `docs/angular-llm.txt` for Angular best practices when developing components
📚 Learning: 2025-11-29T15:31:22.377Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 339
File: libs/zard/src/lib/components/carousel/carousel.component.ts:92-92
Timestamp: 2025-11-29T15:31:22.377Z
Learning: In libs/zard/src/lib/components/**/*.component.ts files using TailwindCSS, avoid suggesting individual class bindings like `[class.fill-primary]="condition"` because they can cause TailwindCSS issues. Prefer string concatenation or `[class]` binding with conditional expressions instead.
Applied to files:
apps/web/src/app/shared/utils/code-tabs.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses()` utility with `clsx` and `tailwind-merge` to resolve class conflicts in component styling
Applied to files:
apps/web/src/app/shared/utils/code-tabs.ts
📚 Learning: 2025-12-13T11:50:56.310Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:56.310Z
Learning: Do not flag or suggest removing `standalone: true` from test components (*.spec.ts files) or demo components (demo/*.ts files) in libs/zard/src/lib/shared/components/**/*.ts, as it is not a significant concern and the explicit flag is acceptable in these contexts.
Applied to files:
apps/web/src/app/shared/utils/code-tabs.tsapps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-12-21T00:11:39.450Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.450Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Implement TailwindCSS v4 with PostCSS for styling and use class merging with tailwind-merge to resolve conflicts
Applied to files:
apps/web/src/app/shared/utils/code-tabs.tsapps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Applied to files:
apps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-12-21T00:11:39.450Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.450Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use ChangeDetectionStrategy.OnPush for performance optimization in components
Applied to files:
apps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Applied to files:
apps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-10-31T10:03:18.563Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Applied to files:
apps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-12-21T00:11:39.450Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.450Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Ensure components are standalone Angular components
Applied to files:
apps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Applied to files:
apps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use computed properties in Angular components for reactive class calculations: `protected readonly classes = computed(() => ...)`
Applied to files:
apps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-11-14T22:52:09.135Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Applied to files:
apps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-12-21T00:12:01.342Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.342Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Block component files must use the .component.ts extension and should be standalone Angular components with explicit imports from ReactiveFormsModule and ZardUI components
Applied to files:
apps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-12-21T00:11:39.450Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-12-21T00:11:39.450Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs with `input()` in Angular components
Applied to files:
apps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Use Angular TestBed and ComponentFixture utilities for testing components
Applied to files:
apps/web/src/app/domain/components/steps/steps.component.tsapps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-11-30T13:27:41.206Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/popover/popover.component.ts:28-29
Timestamp: 2025-11-30T13:27:41.206Z
Learning: In libs/zard/src/lib/components/core/**/*.ts files (core utilities, plugins, and providers), use relative imports for intra-core dependencies because the ZardUI CLI performs path transformations during component installation. The CLI expects specific relative path patterns and transforms them to the target project structure. For all other component imports and application code, use zard/* path aliases.
Applied to files:
apps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-11-13T18:05:35.468Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 324
File: libs/zard/src/lib/components/breadcrumb/breadcrumb.component.ts:34-60
Timestamp: 2025-11-13T18:05:35.468Z
Learning: In breadcrumb item components using RouterLink hostDirectives for host navigation, inject the RouterLink directive and use its `href` property for anchor elements to display URLs on hover, avoiding naming collisions between hostDirective inputs and component inputs.
Applied to files:
apps/web/src/app/domain/components/step/step.component.ts
📚 Learning: 2025-12-21T00:12:01.342Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-12-21T00:12:01.342Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use TailwindCSS utility classes for styling, following responsive design patterns with prefixes for breakpoints (sm:, lg:) and ensure accessibility with semantic HTML and ARIA guidelines
Applied to files:
apps/web/src/app/shared/services/rehype-enhanced-code.ts
🧬 Code graph analysis (1)
apps/web/src/app/domain/components/step/step.component.ts (1)
apps/web/src/app/domain/components/steps/steps.component.ts (1)
Component(6-22)
🔇 Additional comments (3)
apps/web/src/app/domain/components/step/step.component.ts (1)
1-51: Excellent Angular 21 migration!The component successfully adopts modern Angular patterns:
- ✅ OnPush change detection for optimal performance
- ✅ Signal-based inputs retained (input() function)
- ✅ RouterLink properly integrated for internal navigation (line 32)
- ✅ Path aliases (@doc/, @zard/) used consistently
- ✅ No legacy decorators
The migration is clean and follows all current best practices.
apps/web/src/app/domain/components/steps/steps.component.ts (1)
1-22: LGTM! Clean OnPush adoption.The component correctly implements:
- ✅ ChangeDetectionStrategy.OnPush for performance
- ✅ Path alias (@doc/*) replacing relative import
- ✅ Signal-based input() maintained
- ✅ Modern control flow syntax (@if/@for)
Solid Angular 21 migration.
apps/web/src/app/shared/utils/code-tabs.ts (1)
83-83: LGTM! Fixes correctly address previous issues.Line 83 now removes the correct
bg-green-50class (matching line 77's addition), resolving the contrast issue while maintaining WCAG AA compliance. Lines 105-107 now query for.bg-code-tab(matching the class applied on line 27 inswitchCodeTab()), fixing the selector mismatch.Also applies to: 105-107
Comment on lines
+171
to
+180
| titleChildren.push({ | ||
| type: 'element', | ||
| tagName: 'img', | ||
| properties: { | ||
| src: icon, | ||
| alt: '', | ||
| class: ['h-4', 'w-4', 'shrink-0', 'invert-0', 'dark:invert'], | ||
| }, | ||
| children: [], | ||
| }); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Search for calls to createCodeTitle and icon definitions
echo "=== Searching for createCodeTitle calls ==="
rg -n 'createCodeTitle' apps/web/src/app/shared/services/rehype-enhanced-code.ts
echo ""
echo "=== Checking context around line 171-180 ==="
sed -n '160,190p' apps/web/src/app/shared/services/rehype-enhanced-code.ts
echo ""
echo "=== Searching for FILE_ICONS and LANGUAGE_ICONS definitions ==="
rg -n -A2 'FILE_ICONS|LANGUAGE_ICONS' apps/web/src/app/shared/services/rehype-enhanced-code.ts | head -50Repository: zard-ui/zardui
Length of output: 1673
🏁 Script executed:
#!/bin/bash
# Search for how icon parameter is used in the function and where createCodeTitle is called
echo "=== Find createCodeTitle function signature ==="
rg -n 'function createCodeTitle|const createCodeTitle' apps/web/src/app/shared/services/rehype-enhanced-code.ts
echo ""
echo "=== Look for callers of createCodeTitle ==="
rg -n 'createCodeTitle(' apps/web/src/app/shared/services/rehype-enhanced-code.ts
echo ""
echo "=== Check icon parameter handling before rendering ==="
sed -n '160,185p' apps/web/src/app/shared/services/rehype-enhanced-code.tsRepository: zard-ui/zardui
Length of output: 936
🏁 Script executed:
#!/bin/bash
# Get the full createCodeTitle function
echo "=== Full createCodeTitle function ==="
sed -n '168,250p' apps/web/src/app/shared/services/rehype-enhanced-code.ts
echo ""
echo "=== Check how icon is determined before calling createCodeTitle ==="
sed -n '320,345p' apps/web/src/app/shared/services/rehype-enhanced-code.tsRepository: zard-ui/zardui
Length of output: 3359
🏁 Script executed:
#!/bin/bash
# Check the icon resolution logic
echo "=== Icon resolution function ==="
sed -n '38,60p' apps/web/src/app/shared/services/rehype-enhanced-code.tsRepository: zard-ui/zardui
Length of output: 723
🏁 Script executed:
#!/bin/bash
# Get the full context of how icon is determined and used
echo "=== Full context around icon resolution and createCodeTitle call ==="
sed -n '300,350p' apps/web/src/app/shared/services/rehype-enhanced-code.tsRepository: zard-ui/zardui
Length of output: 1731
🏁 Script executed:
#!/bin/bash
# Check the beginning of the visit function to see where icon is set
echo "=== Icon determination logic ==="
sed -n '280,315p' apps/web/src/app/shared/services/rehype-enhanced-code.tsRepository: zard-ui/zardui
Length of output: 1565
Conditionally render the icon element only when icon is not null.
The icon is rendered unconditionally in createCodeTitle, but the icon parameter accepts null. When no icon is found (e.g., getIconForFile returns null for a filename), the rendered HTML includes an invalid <img src={null}>. Either check if (icon) before pushing the img element to titleChildren, or validate the icon at the call site before invoking createCodeTitle.
🤖 Prompt for AI Agents
In apps/web/src/app/shared/services/rehype-enhanced-code.ts around lines 171 to
180, the createCodeTitle function unconditionally pushes an <img> element using
the icon variable which can be null, producing an invalid <img src={null}>;
update the function to only push the img element when icon is truthy (e.g., wrap
the push in if (icon) { ... }) or otherwise validate/normalize icon before use
so that no <img> is created when icon is null.
|
|
||
| // Remove empty elements between tabs if we're creating a tab group | ||
| if (tabGroup.length > 1 && elementsToRemove.length > 0) { | ||
| if (tabGroup.length > 1 && elementsToRemove.length) { |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider explicit comparison for clarity.
While the truthy check on elementsToRemove.length is functionally equivalent to > 0, the explicit comparison is slightly more self-documenting and clear about intent.
🔎 Proposed change
- if (tabGroup.length > 1 && elementsToRemove.length) {
+ if (tabGroup.length > 1 && elementsToRemove.length > 0) {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| if (tabGroup.length > 1 && elementsToRemove.length) { | |
| if (tabGroup.length > 1 && elementsToRemove.length > 0) { |
🤖 Prompt for AI Agents
In apps/web/src/app/shared/services/rehype-enhanced-code.ts around line 479, the
conditional uses a truthy check on elementsToRemove.length; change it to an
explicit numeric comparison (elementsToRemove.length > 0) so the intent is clear
and self-documenting while preserving the same behavior.
Luizgomess
approved these changes
Dec 27, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What was done? 📝
🚀 Angular 21 Migration & Legacy Decorator Removal
This PR modernizes the Zard UI codebase to Angular 21 and eliminates all legacy Angular decorators, bringing the project to cutting-edge Angular standards.
Framework & Dependencies
Code Modernization
inject()function calls@Input()/@Output()decorators toinput()/output()functions@HostBinding/@HostListenerwithhost: {}object syntax@ContentChildren()tocontentChildren()function@if/@for/@switchsyntaxConfiguration Updates
Quality Assurance
ChangeDetectionStrategy.OnPushacross all componentsFiles Changed
The codebase now follows Angular 21 best practices with zero legacy decorator usage, positioning Zard UI as a reference implementation for modern Angular development.
Screenshots or GIFs 📸
|-----Figma-----|
|-----Implementation-----|
Link to Issue 🔗
closes #387
Type of change 🏗
Breaking change 🚨
Checklist 🧐
Summary by CodeRabbit
New Features
Bug Fixes
Style
Chores
✏️ Tip: You can customize this high-level summary in your review settings.