✨ feat(icons): adding dark mode icon to Zard icons #371
Merged
Luizgomess merged 1 commit intomasterfrom Dec 11, 2025
Merged
Conversation
|
Note
|
| Cohort / File(s) | Summary |
|---|---|
Header — template & behavior apps/web/src/app/domain/components/header/header.component.html, apps/web/src/app/domain/components/header/header.component.ts |
Replaced inline/SVG/Lucide icons with <z-icon ... /> usages. Removed local theme state and activateTheme(...); toggleTheme() now calls darkModeService.toggleTheme() directly and unused imports were removed. |
Dark-mode provider service libs/zard/src/lib/components/core/provider/services/dark-mode.ts |
theme exposed as themeSignal.asReadonly. toggleTheme() signature changed to toggleTheme(targetMode?: DarkModeOptions): void; activateTheme() removed. Logic updated to apply a provided target or compute next mode. |
Icon library libs/zard/src/lib/components/icon/icons.ts |
Added a new DarkMode icon constant and registered it in ZARD_ICONS as 'dark-mode'. |
Dark-mode page — template & page apps/web/src/app/domain/pages/dark-mode/dark-mode.page.html, apps/web/src/app/domain/pages/dark-mode/dark-mode.page.ts |
Template/button handlers updated to call darkModeService.toggleTheme(...) instead of activateTheme(...). Import of DarkModeOptions removed; method activateTheme(...) removed from page class. |
Tests / Mocks libs/zard/src/lib/components/accordion/accordion.component.spec.ts |
Extended Jest mock for ../../shared/utils/utils to include transform, generateId, and noopFun (all mocked), preserving mergeClasses mock. |
Misc / manifest package.json |
(manifest reference in diff) — no API changes described beyond above edits. |
Sequence Diagram(s)
sequenceDiagram
%% Participants
participant User as User
participant Header as HeaderComponent
participant Icon as ZardIconComponent
participant Service as ZardDarkMode
participant Signal as ThemeSignal
User->>Header: click theme toggle / select mode
Header->>Icon: render z-icon zType="dark-mode"
Header->>Service: toggleTheme() or toggleTheme(targetMode)
Service->>Signal: read current or apply target -> update signal
Signal-->>Service: emits new theme (readonly)
Service-->>Header: subscribers receive updated theme
Header-->>User: UI updates (bindings / classes reflect theme)
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~25 minutes
- Focus areas:
libs/zard/.../dark-mode.ts— verifythemeSignal.asReadonlytyping and optionaltargetModesemantics.header.component.ts/ template — ensure removal of properties/methods didn't break bindings; OnPush/signal usage correctness.icons.ts— validateDarkModeicon data and registration key.- Updated consumers (pages/templates) — ensure all usages moved from
activateThemetotoggleTheme. - Tests — confirm new mocks don't hide required utility behavior.
Possibly related PRs
- ✨ feat(CLI): improving CLI to support index.html update and adding appearance service to support theme switching #369 — Introduces/exports
ZardDarkModeservice and related types; closely connected to the new dark-mode API and consumer migration. - Task/#336 foutc #337 — Overlaps dark-mode API and header/theme changes; touches same service and UI wiring.
- 🚧 chore: fixed two commit messages #357 — Modifies theme APIs and header components; likely overlaps with toggle/activate refactor.
Suggested reviewers
- srizzon
- Luizgomess
Poem
🌒 New icon beams, old SVGs fade,
A readonly signal sets the shade.
Toggle now accepts a guiding hand,
Tests and templates in tidy band.
Night and day switch — seamless and grand. ✨
Pre-merge checks and finishing touches
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Docstring Coverage | Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. | You can run @coderabbitai generate docstrings to improve docstring coverage. |
✅ Passed checks (2 passed)
| Check name | Status | Explanation |
|---|---|---|
| Title check | ✅ Passed | The title accurately describes the main change: adding a dark mode icon to the Zard icons library, which aligns with the primary objective of making custom icons available. |
| Description check | ✅ Passed | The description covers the main objective and includes most required sections, though Figma/implementation screenshots are placeholders and the linked issue is empty. |
✨ 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
feat/custom-icons
📜 Recent review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (4)
apps/web/public/installation/manual/icon.mdis excluded by!apps/web/public/**and included byapps/**package-lock.jsonis excluded by!**/package-lock.jsonand included by nonepackage.jsonis excluded by none and included by nonepackages/cli/src/utils/templates.tsis excluded by!packages/**and included by none
📒 Files selected for processing (7)
apps/web/src/app/domain/components/header/header.component.html(1 hunks)apps/web/src/app/domain/components/header/header.component.ts(3 hunks)apps/web/src/app/domain/pages/dark-mode/dark-mode.page.html(4 hunks)apps/web/src/app/domain/pages/dark-mode/dark-mode.page.ts(1 hunks)libs/zard/src/lib/components/accordion/accordion.component.spec.ts(1 hunks)libs/zard/src/lib/components/core/provider/services/dark-mode.ts(2 hunks)libs/zard/src/lib/components/icon/icons.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use
@zard/*path aliases for imports mapping tolibs/zard/src/lib/*directories
Files:
apps/web/src/app/domain/pages/dark-mode/dark-mode.page.tslibs/zard/src/lib/components/icon/icons.tsapps/web/src/app/domain/components/header/header.component.tslibs/zard/src/lib/components/accordion/accordion.component.spec.tslibs/zard/src/lib/components/core/provider/services/dark-mode.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/components/icon/icons.tslibs/zard/src/lib/components/accordion/accordion.component.spec.tslibs/zard/src/lib/components/core/provider/services/dark-mode.ts
libs/zard/src/lib/components/**/*.spec.ts
📄 CodeRabbit inference engine (CLAUDE.md)
libs/zard/src/lib/components/**/*.spec.ts: Co-locate test files with components using.spec.tssuffix next to component files
Use Angular TestBed and ComponentFixture utilities for testing componentsWrite co-located Jest tests using TestBed and ComponentFixture next to components
Files:
libs/zard/src/lib/components/accordion/accordion.component.spec.ts
🧠 Learnings (33)
📓 Common learnings
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
📚 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/dark-mode/dark-mode.page.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/pages/dark-mode/dark-mode.page.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/dark-mode/dark-mode.page.tslibs/zard/src/lib/components/icon/icons.tsapps/web/src/app/domain/components/header/header.component.tslibs/zard/src/lib/components/core/provider/services/dark-mode.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/dark-mode/dark-mode.page.tslibs/zard/src/lib/components/icon/icons.tsapps/web/src/app/domain/components/header/header.component.tslibs/zard/src/lib/components/accordion/accordion.component.spec.tslibs/zard/src/lib/components/core/provider/services/dark-mode.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Angular standalone components as the base template for component architecture
Applied to files:
apps/web/src/app/domain/pages/dark-mode/dark-mode.page.tsapps/web/src/app/domain/components/header/header.component.tsapps/web/src/app/domain/components/header/header.component.html
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add new components to barrel export in `libs/zard/src/lib/components/components.ts`
Applied to files:
apps/web/src/app/domain/pages/dark-mode/dark-mode.page.tslibs/zard/src/lib/components/icon/icons.tsapps/web/src/app/domain/components/header/header.component.tslibs/zard/src/lib/components/accordion/accordion.component.spec.tsapps/web/src/app/domain/components/header/header.component.html
📚 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/app/domain/pages/dark-mode/dark-mode.page.tslibs/zard/src/lib/components/icon/icons.tslibs/zard/src/lib/components/accordion/accordion.component.spec.tslibs/zard/src/lib/components/core/provider/services/dark-mode.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use ZardUI form components (`ZardFormFieldComponent`, `ZardFormLabelComponent`, `ZardFormControlComponent`) for proper validation and error handling in templates
Applied to files:
apps/web/src/app/domain/pages/dark-mode/dark-mode.page.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/**/*.ts : Export demo and documentation components with proper naming for automatic site generation
Applied to files:
apps/web/src/app/domain/pages/dark-mode/dark-mode.page.tslibs/zard/src/lib/components/icon/icons.tslibs/zard/src/lib/components/accordion/accordion.component.spec.tsapps/web/src/app/domain/components/header/header.component.html
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use TailwindCSS v4 with PostCSS for component styling and utility-first approach
Applied to files:
apps/web/src/app/domain/pages/dark-mode/dark-mode.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:
apps/web/src/app/domain/pages/dark-mode/dark-mode.page.tslibs/zard/src/lib/components/accordion/accordion.component.spec.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/dark-mode/dark-mode.page.tsapps/web/src/app/domain/components/header/header.component.ts
📚 Learning: 2025-11-25T18:55:04.698Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-11-25T18:55:04.698Z
Learning: Components should support dark mode through built-in styling and configuration
Applied to files:
apps/web/src/app/domain/pages/dark-mode/dark-mode.page.tsapps/web/src/app/domain/pages/dark-mode/dark-mode.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:
libs/zard/src/lib/components/icon/icons.tsapps/web/src/app/domain/components/header/header.component.htmllibs/zard/src/lib/components/core/provider/services/dark-mode.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/*.ts : Create component demo files with `name`, `code`, and `component` properties following existing patterns
Applied to files:
libs/zard/src/lib/components/icon/icons.tslibs/zard/src/lib/components/accordion/accordion.component.spec.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to **/*.{ts,tsx,js} : Use `zard/*` path aliases for imports mapping to `libs/zard/src/lib/*` directories
Applied to files:
libs/zard/src/lib/components/icon/icons.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:
libs/zard/src/lib/components/icon/icons.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Implement standalone Angular components with explicit imports rather than using module declarations
Applied to files:
apps/web/src/app/domain/components/header/header.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses` utility with `tailwind-merge` to resolve class conflicts in components
Applied to files:
apps/web/src/app/domain/components/header/header.component.tslibs/zard/src/lib/components/accordion/accordion.component.spec.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/header/header.component.tsapps/web/src/app/domain/components/header/header.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/header/header.component.tsapps/web/src/app/domain/components/header/header.component.htmllibs/zard/src/lib/components/core/provider/services/dark-mode.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/header/header.component.tsapps/web/src/app/domain/components/header/header.component.html
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy for all Angular components
Applied to files:
apps/web/src/app/domain/components/header/header.component.tsapps/web/src/app/domain/components/header/header.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/**/*.spec.ts : Use Angular TestBed and ComponentFixture utilities for testing components
Applied to files:
apps/web/src/app/domain/components/header/header.component.tslibs/zard/src/lib/components/accordion/accordion.component.spec.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs (`input()`) for Angular component inputs in the ZardUI library
Applied to files:
apps/web/src/app/domain/components/header/header.component.tsapps/web/src/app/domain/components/header/header.component.htmllibs/zard/src/lib/components/core/provider/services/dark-mode.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Write co-located Jest tests using TestBed and ComponentFixture next to components
Applied to files:
libs/zard/src/lib/components/accordion/accordion.component.spec.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 : Co-locate test files with components using `.spec.ts` suffix next to component files
Applied to files:
libs/zard/src/lib/components/accordion/accordion.component.spec.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:
libs/zard/src/lib/components/accordion/accordion.component.spec.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 Jest with `happy-dom/jest-environment` for testing Angular components
Applied to files:
libs/zard/src/lib/components/accordion/accordion.component.spec.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/components/core/provider/services/dark-mode.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Use signals (`signal()` from `angular/core`) for reactive state management in block components, such as loading states and UI state
Applied to files:
libs/zard/src/lib/components/core/provider/services/dark-mode.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Always use the `protected` access modifier for component properties and methods that are accessed in templates (e.g., `protected readonly`, `protected onSubmit()`)
Applied to files:
libs/zard/src/lib/components/core/provider/services/dark-mode.ts
🔇 Additional comments (13)
libs/zard/src/lib/components/accordion/accordion.component.spec.ts (1)
10-15: LGTM - Mock improvements properly implemented.The mock now provides safe default implementations that mirror the real contracts:
transformreturns its input value (identity function)generateIdreturns a deterministic test IDnoopFunremains a plain mock, which is appropriate for a no-opThis addresses the previous review feedback and keeps tests isolated while preventing undefined-related runtime errors.
apps/web/src/app/domain/components/header/header.component.html (2)
40-40: Icon migration looks good.The migration from Lucide icon component to
z-iconwith[zType]="GalleryHorizontalIcon"binding is correct and follows the component library pattern.
45-45:size-4.5is valid Tailwind v4 syntax—no changes needed.In Tailwind v4, fractional numeric values like
4.5are supported as canonical classes in the default scale (e.g.,p-2.5,mt-4.5,size-4.5). This is the correct and preferred syntax over arbitrary bracket notation or splitting into separate utilities.libs/zard/src/lib/components/icon/icons.ts (2)
89-95: Clean icon data definition.Defining the
DarkModeicon directly asLucideIconDataarray is efficient and avoids SVG parsing overhead. The path data is properly structured for the Lucide icon system.
182-182: Icon registration correct.The
'dark-mode': DarkModeentry properly extends the icon set and is now available throughout the application via<z-icon zType="dark-mode" />.apps/web/src/app/domain/pages/dark-mode/dark-mode.page.html (2)
3-4: Binding reordering is fine.Reordering input bindings has no functional impact. Both bindings are still present and correctly typed.
95-95: Service-based theme control properly implemented.The template now calls
darkModeService.toggleTheme(...)with explicit mode arguments (EDarkModes.SYSTEM,LIGHT,DARK). This correctly uses the new service API and removes the component middleman, following best practices for service delegation.Also applies to: 106-106, 117-117
apps/web/src/app/domain/pages/dark-mode/dark-mode.page.ts (2)
8-8: Import cleanup is correct.Removing
DarkModeOptionsis appropriate since the component no longer has anactivateThememethod. The component now delegates all theme changes to the service.
40-40: Proper signal usage for reactive theme.Assigning
this.darkModeService.theme(the readonly signal itself, not calling it) is correct. The template then calls it reactively with@let theme = currentTheme(), ensuring the UI updates when the theme changes. This follows Angular signal best practices.apps/web/src/app/domain/components/header/header.component.ts (2)
5-5: Import cleanup aligns with simplified API.Removing
LucideAngularModule,DarkModeOptions, andEDarkModesis correct. The component now usesz-iconfor icons and delegates theme logic to the service without needing local theme enum values.Also applies to: 12-12
53-55: Simplified toggle delegates to service.Calling
this.darkModeService.toggleTheme()without arguments will cycle between LIGHT and DARK modes (not SYSTEM). This provides simpler UX for the header button compared to the full theme selector in the dark-mode settings page.Note: Users who set SYSTEM mode in settings will have it changed to an explicit LIGHT or DARK mode when clicking the header toggle. This is likely intentional design, but ensure it matches UX requirements.
Verify with UX/design that the header theme button should cycle between explicit LIGHT/DARK modes without returning to SYSTEM mode. If SYSTEM should be part of the cycle, the service API would need adjustment.
libs/zard/src/lib/components/core/provider/services/dark-mode.ts (2)
23-23: Readonly signal exposure is correct.Using
this.themeSignal.asReadonly()properly exposes a readonly signal for external consumption, preventing direct mutation while allowing reactive reads. This follows Angular signal best practices.
44-55: Flexible toggle API with clear behavior.The updated
toggleTheme(targetMode?: DarkModeOptions)signature provides two modes of operation:
- With
targetMode: Directly sets SYSTEM, LIGHT, or DARK (used by settings page)- Without
targetMode: Toggles between LIGHT and DARK based on currentthemeMode()(used by header button)The toggle logic on line 52 uses
themeMode()(the computed actual mode), notthemeSignal()(the stored preference). This means:
- If current theme is SYSTEM displaying as DARK → toggles to explicit LIGHT
- If current theme is SYSTEM displaying as LIGHT → toggles to explicit DARK
- SYSTEM mode can only be restored by explicitly passing
EDarkModes.SYSTEMThis design is consistent with the component usage patterns and provides clean separation between quick toggle vs. explicit mode selection.
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.
mikij
force-pushed
the
feat/custom-icons
branch
from
892ab95 to
5e585d4
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
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/domain/components/header/header.component.ts (1)
27-38: Remove duplicateZardIconComponentimport.The imports array contains
ZardIconComponenttwice (lines 30 and 33), which is unnecessary.Apply this diff to remove the duplicate:
imports: [ RouterModule, ZardButtonComponent, ZardIconComponent, ZardBadgeComponent, ZardDividerComponent, - ZardIconComponent, MobileMenuComponent, AsyncPipe, DocResearcherComponent, LucideAngularModule, ],
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (5)
apps/web/public/installation/manual/icon.mdis excluded by!apps/web/public/**and included byapps/**package-lock.jsonis excluded by!**/package-lock.jsonand included by nonepackage.jsonis excluded by none and included by nonepackages/cli/src/commands/init/dependencies.tsis excluded by!packages/**and included by nonepackages/cli/src/utils/templates.tsis excluded by!packages/**and included by none
📒 Files selected for processing (4)
apps/web/src/app/domain/components/header/header.component.html(1 hunks)apps/web/src/app/domain/components/header/header.component.ts(1 hunks)libs/zard/src/lib/components/icon/icons.ts(2 hunks)libs/zard/src/lib/shared/utils/utils.ts(2 hunks)
🧰 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/utils/utils.tslibs/zard/src/lib/components/icon/icons.ts
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use
@zard/*path aliases for imports mapping tolibs/zard/src/lib/*directories
Files:
libs/zard/src/lib/shared/utils/utils.tslibs/zard/src/lib/components/icon/icons.tsapps/web/src/app/domain/components/header/header.component.ts
🧠 Learnings (25)
📓 Common learnings
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
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-11-25T18:55:04.698Z
Learning: Components should support dark mode through built-in styling and configuration
📚 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/app/domain/components/header/header.component.htmllibs/zard/src/lib/components/icon/icons.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Angular standalone components as the base template for component architecture
Applied to files:
apps/web/src/app/domain/components/header/header.component.htmlapps/web/src/app/domain/components/header/header.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/header/header.component.htmlapps/web/src/app/domain/components/header/header.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add new components to barrel export in `libs/zard/src/lib/components/components.ts`
Applied to files:
apps/web/src/app/domain/components/header/header.component.htmllibs/zard/src/lib/components/icon/icons.tsapps/web/src/app/domain/components/header/header.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/utils/utils.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses` utility with `tailwind-merge` to resolve class conflicts in components
Applied to files:
libs/zard/src/lib/shared/utils/utils.tsapps/web/src/app/domain/components/header/header.component.ts
📚 Learning: 2025-11-25T18:55:04.698Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-11-25T18:55:04.698Z
Learning: Applies to packages/cli/src/app/shared/utils/**/*.{ts,tsx} : Create utility functions in src/app/shared/utils/ directory for reusable code like mergeClasses
Applied to files:
libs/zard/src/lib/shared/utils/utils.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/utils/utils.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/utils/utils.tslibs/zard/src/lib/components/icon/icons.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/components/icon/icons.tsapps/web/src/app/domain/components/header/header.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/components/icon/icons.tsapps/web/src/app/domain/components/header/header.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/**/*.ts : Export demo and documentation components with proper naming for automatic site generation
Applied to files:
libs/zard/src/lib/components/icon/icons.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/components/icon/icons.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/components/icon/icons.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to **/*.{ts,tsx,js} : Use `zard/*` path aliases for imports mapping to `libs/zard/src/lib/*` directories
Applied to files:
libs/zard/src/lib/components/icon/icons.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/*.ts : Create component demo files with `name`, `code`, and `component` properties following existing patterns
Applied to files:
libs/zard/src/lib/components/icon/icons.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Implement standalone Angular components with explicit imports rather than using module declarations
Applied to files:
apps/web/src/app/domain/components/header/header.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/header/header.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/header/header.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy for all Angular components
Applied to files:
apps/web/src/app/domain/components/header/header.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs (`input()`) for Angular component inputs in the ZardUI library
Applied to files:
apps/web/src/app/domain/components/header/header.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use ZardUI form components (`ZardFormFieldComponent`, `ZardFormLabelComponent`, `ZardFormControlComponent`) for proper validation and error handling in templates
Applied to files:
apps/web/src/app/domain/components/header/header.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/header/header.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/header/header.component.ts
🧬 Code graph analysis (1)
libs/zard/src/lib/components/icon/icons.ts (1)
libs/zard/src/lib/shared/utils/utils.ts (1)
svgToLucideIconData(21-24)
🪛 GitHub Actions: CI/Unit Tests
libs/zard/src/lib/components/icon/icons.ts
[error] 197-197: TypeError: (0 , utils_1.svgToLucideIconData) is not a function. Ensure svgToLucideIconData is exported correctly from utils and imported properly in icons.ts.
🔇 Additional comments (2)
apps/web/src/app/domain/components/header/header.component.html (1)
45-45: Clean refactor to use icon component.Replacing inline SVG with
<z-icon zType="dark-mode" />improves maintainability and aligns with the component architecture. Thesize-4.5TailwindCSS utility is appropriate for button icons.Note: This change depends on resolving the pipeline failure in
libs/zard/src/lib/components/icon/icons.ts. Once thesvgToLucideIconDatafunction is working correctly, verify the icon renders properly in both light and dark modes.libs/zard/src/lib/components/icon/icons.ts (1)
89-89: Import path is correct and follows the established codebase pattern.The import statement on line 89 uses the correct relative import path
../../shared/utils/utils, which is the standard pattern throughout the codebase. ThesvgToLucideIconDatafunction is properly exported asexport constin utils.ts (line 21), and thesvgsondependency is correctly imported within that file. No @zard/* path aliases are configured in the repository; all components consistently use relative imports to access shared utilities. No circular dependencies exist between the icon and utils modules.Likely an incorrect or invalid review comment.
mikij
force-pushed
the
feat/custom-icons
branch
2 times, most recently
from
56ba78d to
1c32fe0
Compare
mikij
changed the title
ribeiromatheuss
requested changes
Dec 10, 2025
Contributor
ribeiromatheuss
left a comment
ribeiromatheuss
left a comment
There was a problem hiding this comment.
When accessing the site for the first time, the value 'system' was set for the theme variable. On my system, this represents the dark theme. Upon clicking again, the variable is updated to 'dark', giving the impression that the button did not work.
mikij
force-pushed
the
feat/custom-icons
branch
from
1c32fe0 to
dc29050
Compare
Contributor
Author
|
okay even your comment was not intention of this PR, I found solution for the problem and added it |
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/domain/components/header/header.component.ts (1)
27-38: Remove duplicateZardIconComponentimport.
ZardIconComponentappears twice in the imports array (lines 30 and 33). This is redundant and should be cleaned up.imports: [ RouterModule, ZardButtonComponent, ZardIconComponent, ZardBadgeComponent, ZardDividerComponent, - ZardIconComponent, MobileMenuComponent, AsyncPipe, DocResearcherComponent, LucideAngularModule, ],
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (4)
apps/web/public/installation/manual/icon.mdis excluded by!apps/web/public/**and included byapps/**package-lock.jsonis excluded by!**/package-lock.jsonand included by nonepackage.jsonis excluded by none and included by nonepackages/cli/src/utils/templates.tsis excluded by!packages/**and included by none
📒 Files selected for processing (6)
apps/web/src/app/domain/components/header/header.component.html(1 hunks)apps/web/src/app/domain/components/header/header.component.ts(3 hunks)apps/web/src/app/domain/pages/dark-mode/dark-mode.page.ts(2 hunks)libs/zard/src/lib/components/accordion/accordion.component.spec.ts(1 hunks)libs/zard/src/lib/components/core/provider/services/dark-mode.ts(2 hunks)libs/zard/src/lib/components/icon/icons.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
libs/zard/src/lib/components/**/*.spec.ts
📄 CodeRabbit inference engine (CLAUDE.md)
libs/zard/src/lib/components/**/*.spec.ts: Co-locate test files with components using.spec.tssuffix next to component files
Use Angular TestBed and ComponentFixture utilities for testing componentsWrite co-located Jest tests using TestBed and ComponentFixture next to components
Files:
libs/zard/src/lib/components/accordion/accordion.component.spec.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/components/accordion/accordion.component.spec.tslibs/zard/src/lib/components/icon/icons.tslibs/zard/src/lib/components/core/provider/services/dark-mode.ts
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use
@zard/*path aliases for imports mapping tolibs/zard/src/lib/*directories
Files:
libs/zard/src/lib/components/accordion/accordion.component.spec.tslibs/zard/src/lib/components/icon/icons.tsapps/web/src/app/domain/components/header/header.component.tslibs/zard/src/lib/components/core/provider/services/dark-mode.tsapps/web/src/app/domain/pages/dark-mode/dark-mode.page.ts
🧠 Learnings (29)
📓 Common learnings
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
📚 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/app/domain/components/header/header.component.htmllibs/zard/src/lib/components/icon/icons.tsapps/web/src/app/domain/components/header/header.component.tslibs/zard/src/lib/components/core/provider/services/dark-mode.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Angular standalone components as the base template for component architecture
Applied to files:
apps/web/src/app/domain/components/header/header.component.htmlapps/web/src/app/domain/components/header/header.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/header/header.component.htmlapps/web/src/app/domain/components/header/header.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs (`input()`) for Angular component inputs in the ZardUI library
Applied to files:
apps/web/src/app/domain/components/header/header.component.htmlapps/web/src/app/domain/components/header/header.component.tslibs/zard/src/lib/components/core/provider/services/dark-mode.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Write co-located Jest tests using TestBed and ComponentFixture next to components
Applied to files:
libs/zard/src/lib/components/accordion/accordion.component.spec.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/components/accordion/accordion.component.spec.tsapps/web/src/app/domain/components/header/header.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 : Co-locate test files with components using `.spec.ts` suffix next to component files
Applied to files:
libs/zard/src/lib/components/accordion/accordion.component.spec.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:
libs/zard/src/lib/components/accordion/accordion.component.spec.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add new components to barrel export in `libs/zard/src/lib/components/components.ts`
Applied to files:
libs/zard/src/lib/components/accordion/accordion.component.spec.tslibs/zard/src/lib/components/icon/icons.tsapps/web/src/app/domain/components/header/header.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/*.ts : Create component demo files with `name`, `code`, and `component` properties following existing patterns
Applied to files:
libs/zard/src/lib/components/accordion/accordion.component.spec.tslibs/zard/src/lib/components/icon/icons.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/components/accordion/accordion.component.spec.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses` utility with `tailwind-merge` to resolve class conflicts in components
Applied to files:
libs/zard/src/lib/components/accordion/accordion.component.spec.tsapps/web/src/app/domain/components/header/header.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/components/accordion/accordion.component.spec.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/components/accordion/accordion.component.spec.tslibs/zard/src/lib/components/icon/icons.tsapps/web/src/app/domain/components/header/header.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 Jest with `happy-dom/jest-environment` for testing Angular components
Applied to files:
libs/zard/src/lib/components/accordion/accordion.component.spec.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/components/icon/icons.tsapps/web/src/app/domain/components/header/header.component.tslibs/zard/src/lib/components/core/provider/services/dark-mode.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/**/*.ts : Export demo and documentation components with proper naming for automatic site generation
Applied to files:
libs/zard/src/lib/components/icon/icons.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/components/icon/icons.tsapps/web/src/app/domain/components/header/header.component.tslibs/zard/src/lib/components/core/provider/services/dark-mode.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to **/*.{ts,tsx,js} : Use `zard/*` path aliases for imports mapping to `libs/zard/src/lib/*` directories
Applied to files:
libs/zard/src/lib/components/icon/icons.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:
libs/zard/src/lib/components/icon/icons.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/header/header.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/header/header.component.tslibs/zard/src/lib/components/core/provider/services/dark-mode.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy for all Angular components
Applied to files:
apps/web/src/app/domain/components/header/header.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use ZardUI form components (`ZardFormFieldComponent`, `ZardFormLabelComponent`, `ZardFormControlComponent`) for proper validation and error handling in templates
Applied to files:
apps/web/src/app/domain/components/header/header.component.ts
📚 Learning: 2025-11-25T18:55:04.698Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-11-25T18:55:04.698Z
Learning: Components should support dark mode through built-in styling and configuration
Applied to files:
apps/web/src/app/domain/components/header/header.component.tsapps/web/src/app/domain/pages/dark-mode/dark-mode.page.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use TailwindCSS v4 with PostCSS for component styling and utility-first approach
Applied to files:
apps/web/src/app/domain/components/header/header.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/header/header.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/header/header.component.ts
🔇 Additional comments (7)
libs/zard/src/lib/components/accordion/accordion.component.spec.ts (1)
10-15: LGTM! Mock expansion for shared utils.The additional mocks for
transform,generateId, andnoopFunensure test isolation when these utilities are transitively imported. Clean and minimal approach.libs/zard/src/lib/components/icon/icons.ts (2)
89-96: Nicely done! Clean LucideIconData definition.The icon is now defined directly as
LucideIconDataarray, avoiding the SVG parsing overhead. The invisible path has been removed as suggested in the previous review. This is the idiomatic approach for custom icons in the Lucide ecosystem.
182-182: LGTM! Icon registration.The
'dark-mode'key is properly registered inZARD_ICONS, making it available for<z-icon zType="dark-mode">usage throughout the application.libs/zard/src/lib/components/core/provider/services/dark-mode.ts (1)
44-55: LGTM! Clean API consolidation.The
toggleThememethod now serves dual purpose: direct theme application whentargetModeis provided, and toggle behavior otherwise. UsingthemeMode()for the toggle calculation correctly handles the SYSTEM preference resolution.apps/web/src/app/domain/components/header/header.component.html (1)
44-47: LGTM! Clean migration to z-icon component.Replacing the inline SVG with
<z-icon zType="dark-mode">leverages the centralized icon registry and keeps the template clean. Thesize-4.5class provides consistent sizing.apps/web/src/app/domain/pages/dark-mode/dark-mode.page.ts (1)
62-64: LGTM! Correct API usage.The
activateThememethod properly delegates totoggleTheme(theme)using the updated service API.apps/web/src/app/domain/components/header/header.component.ts (1)
55-57: LGTM! Clean service delegation.The
toggleTheme()method now properly delegates to the service without local theme computation. This aligns with the updatedZardDarkModeAPI and keeps the component focused on coordination rather than logic.
libs/zard/src/lib/components/core/provider/services/dark-mode.ts
Outdated
Show resolved
Hide resolved
mikij
force-pushed
the
feat/custom-icons
branch
2 times, most recently
from
3fa2c3b to
29acd14
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (4)
apps/web/public/installation/manual/icon.mdis excluded by!apps/web/public/**and included byapps/**package-lock.jsonis excluded by!**/package-lock.jsonand included by nonepackage.jsonis excluded by none and included by nonepackages/cli/src/utils/templates.tsis excluded by!packages/**and included by none
📒 Files selected for processing (6)
apps/web/src/app/domain/components/header/header.component.html(1 hunks)apps/web/src/app/domain/components/header/header.component.ts(3 hunks)apps/web/src/app/domain/pages/dark-mode/dark-mode.page.ts(1 hunks)libs/zard/src/lib/components/accordion/accordion.component.spec.ts(1 hunks)libs/zard/src/lib/components/core/provider/services/dark-mode.ts(2 hunks)libs/zard/src/lib/components/icon/icons.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
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/components/core/provider/services/dark-mode.tslibs/zard/src/lib/components/accordion/accordion.component.spec.tslibs/zard/src/lib/components/icon/icons.ts
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use
@zard/*path aliases for imports mapping tolibs/zard/src/lib/*directories
Files:
libs/zard/src/lib/components/core/provider/services/dark-mode.tsapps/web/src/app/domain/pages/dark-mode/dark-mode.page.tslibs/zard/src/lib/components/accordion/accordion.component.spec.tslibs/zard/src/lib/components/icon/icons.tsapps/web/src/app/domain/components/header/header.component.ts
libs/zard/src/lib/components/**/*.spec.ts
📄 CodeRabbit inference engine (CLAUDE.md)
libs/zard/src/lib/components/**/*.spec.ts: Co-locate test files with components using.spec.tssuffix next to component files
Use Angular TestBed and ComponentFixture utilities for testing componentsWrite co-located Jest tests using TestBed and ComponentFixture next to components
Files:
libs/zard/src/lib/components/accordion/accordion.component.spec.ts
🧠 Learnings (31)
📓 Common learnings
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
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-11-25T18:55:04.698Z
Learning: Components should support dark mode through built-in styling and configuration
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Angular standalone components as the base template for component architecture
Applied to files:
apps/web/src/app/domain/components/header/header.component.htmlapps/web/src/app/domain/components/header/header.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/header/header.component.htmllibs/zard/src/lib/components/core/provider/services/dark-mode.tsapps/web/src/app/domain/components/header/header.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add new components to barrel export in `libs/zard/src/lib/components/components.ts`
Applied to files:
apps/web/src/app/domain/components/header/header.component.htmllibs/zard/src/lib/components/accordion/accordion.component.spec.tslibs/zard/src/lib/components/icon/icons.tsapps/web/src/app/domain/components/header/header.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/header/header.component.htmlapps/web/src/app/domain/components/header/header.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs (`input()`) for Angular component inputs in the ZardUI library
Applied to files:
apps/web/src/app/domain/components/header/header.component.htmllibs/zard/src/lib/components/core/provider/services/dark-mode.tsapps/web/src/app/domain/components/header/header.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:
apps/web/src/app/domain/components/header/header.component.htmllibs/zard/src/lib/components/core/provider/services/dark-mode.tslibs/zard/src/lib/components/icon/icons.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/header/header.component.htmllibs/zard/src/lib/components/core/provider/services/dark-mode.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy for all Angular components
Applied to files:
apps/web/src/app/domain/components/header/header.component.htmlapps/web/src/app/domain/components/header/header.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/header/header.component.htmlapps/web/src/app/domain/components/header/header.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/**/*.ts : Export demo and documentation components with proper naming for automatic site generation
Applied to files:
apps/web/src/app/domain/components/header/header.component.htmllibs/zard/src/lib/components/accordion/accordion.component.spec.tslibs/zard/src/lib/components/icon/icons.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/components/core/provider/services/dark-mode.tslibs/zard/src/lib/components/icon/icons.tsapps/web/src/app/domain/components/header/header.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Use signals (`signal()` from `angular/core`) for reactive state management in block components, such as loading states and UI state
Applied to files:
libs/zard/src/lib/components/core/provider/services/dark-mode.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Always use the `protected` access modifier for component properties and methods that are accessed in templates (e.g., `protected readonly`, `protected onSubmit()`)
Applied to files:
libs/zard/src/lib/components/core/provider/services/dark-mode.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/dark-mode/dark-mode.page.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/pages/dark-mode/dark-mode.page.ts
📚 Learning: 2025-11-25T18:55:04.698Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: packages/cli/README.md:0-0
Timestamp: 2025-11-25T18:55:04.698Z
Learning: Components should support dark mode through built-in styling and configuration
Applied to files:
apps/web/src/app/domain/pages/dark-mode/dark-mode.page.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Write co-located Jest tests using TestBed and ComponentFixture next to components
Applied to files:
libs/zard/src/lib/components/accordion/accordion.component.spec.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 : Co-locate test files with components using `.spec.ts` suffix next to component files
Applied to files:
libs/zard/src/lib/components/accordion/accordion.component.spec.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/components/accordion/accordion.component.spec.tsapps/web/src/app/domain/components/header/header.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/components/accordion/accordion.component.spec.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/components/accordion/accordion.component.spec.tslibs/zard/src/lib/components/icon/icons.tsapps/web/src/app/domain/components/header/header.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/*.ts : Create component demo files with `name`, `code`, and `component` properties following existing patterns
Applied to files:
libs/zard/src/lib/components/accordion/accordion.component.spec.tslibs/zard/src/lib/components/icon/icons.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:
libs/zard/src/lib/components/accordion/accordion.component.spec.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses` utility with `tailwind-merge` to resolve class conflicts in components
Applied to files:
libs/zard/src/lib/components/accordion/accordion.component.spec.tsapps/web/src/app/domain/components/header/header.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 Jest with `happy-dom/jest-environment` for testing Angular components
Applied to files:
libs/zard/src/lib/components/accordion/accordion.component.spec.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/components/icon/icons.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to **/*.{ts,tsx,js} : Use `zard/*` path aliases for imports mapping to `libs/zard/src/lib/*` directories
Applied to files:
libs/zard/src/lib/components/icon/icons.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:
libs/zard/src/lib/components/icon/icons.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Implement standalone Angular components with explicit imports rather than using module declarations
Applied to files:
apps/web/src/app/domain/components/header/header.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:
apps/web/src/app/domain/components/header/header.component.ts
🔇 Additional comments (5)
libs/zard/src/lib/components/core/provider/services/dark-mode.ts (1)
23-55: Theme signal exposure and toggle behavior now look consistentExposing
themeviathis.themeSignal.asReadonly()and updatingtoggleTheme(targetMode?)to either apply an explicit mode or flip between resolved light/dark viathemeMode()aligns well with the new API and signal-based pattern. It also cleanly separates “selected mode” (themeSignal) from “effective mode” (themeMode).Please just double‑check that the new two‑state toggle (LIGHT ⇄ DARK, with SYSTEM only set via an explicit
targetMode) matches the intended UX in your docs and demos.apps/web/src/app/domain/components/header/header.component.html (1)
39-47: Using<z-icon>for layout and dark‑mode icons is a good consolidationSwitching to
<z-icon>with[zType]="GalleryHorizontalIcon"andzType="dark-mode"makes the header rely on the design‑system icon component instead of ad‑hoc SVGs, so sizing/theming stays consistent and the new dark‑mode registry entry is exercised.libs/zard/src/lib/components/icon/icons.ts (1)
89-95: Dark‑mode icon definition and registration match existing patternsDefining
DarkModeas a path/attrs tuple array and wiring it intoZARD_ICONSunder'dark-mode'keeps it consistent with the rest of the registry and makes it directly consumable via<z-icon zType="dark-mode">in the app.Also applies to: 182-183
apps/web/src/app/domain/components/header/header.component.ts (2)
5-5: Icon wiring into the header component looks solidImporting
GalleryHorizontal, exposing it asGalleryHorizontalIcon, and addingZardIconComponentplusAsyncPipe/RouterModuleto theimportsarray cleanly supports the new<z-icon [zType]="GalleryHorizontalIcon">usage and existing async bindings without dragging in extra modules.Also applies to: 28-36, 47-47
12-12: Header now correctly delegates theme toggling to the central dark‑mode serviceInjecting
ZardDarkModeand havingtoggleTheme()callthis.darkModeService.toggleTheme()removes local theme state from the header and centralizes behavior in the provider, which is preferable for consistency and future changes to theme logic.Also applies to: 49-55
mikij
force-pushed
the
feat/custom-icons
branch
from
29acd14 to
74a72fc
Compare
Luizgomess
approved these changes
Dec 11, 2025
8 tasks
This was referenced Mar 5, 2026
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
3 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? 📝
Added custom icon that are not part of Lucide icons package to be available to Zard icon component
Screenshots or GIFs 📸
|-----Figma-----|
|-----Implementation-----|
Link to Issue 🔗
Type of change 🏗
Breaking change 🚨
Checklist 🧐
Summary by CodeRabbit
New Features
Style
Behavior
Tests
✏️ Tip: You can customize this high-level summary in your review settings.