diff --git a/.claude/commands/commit.md b/.claude/commands/commit.md index a1a7fb65d..9e82c46ba 100644 --- a/.claude/commands/commit.md +++ b/.claude/commands/commit.md @@ -29,12 +29,33 @@ Create well-formatted commit: $ARGUMENTS 6. If multiple distinct changes are detected, suggests breaking the commit into multiple smaller commits 7. For each commit (or the single commit if not split), creates a commit message using emoji conventional commit format +## Determining the Scope + +The scope in commit messages MUST be the `name` field from the affected library's `project.json`: + +1. **Check the file path**: `libs/ui/label/src/...` → Look at `libs/ui/label/project.json` +2. **Read the project name**: The `"name"` field (e.g., `"name": "ui-label"`) +3. **Use that as scope**: `feat(ui-label): ...` + +**Examples:** +- File: `libs/remission/feature/remission-list/src/...` → Scope: `remission-feature-remission-list` +- File: `libs/ui/notice/src/...` → Scope: `ui-notice` +- File: `apps/isa-app/src/...` → Scope: `isa-app` + +**Multi-project changes:** +- If changes span 2-3 related projects, use the primary one or list them: `feat(ui-label, ui-notice): ...` +- If changes span many unrelated projects, split into separate commits + ## Best Practices for Commits - **Verify before committing**: Ensure code is linted, builds correctly, and documentation is updated - **Atomic commits**: Each commit should contain related changes that serve a single purpose - **Split large changes**: If changes touch multiple concerns, split them into separate commits -- **Conventional commit format**: Use the format `: ` where type is one of: +- **Conventional commit format**: Use the format `(): ` where: + - **scope**: The project name from `project.json` of the affected library (e.g., `ui-label`, `crm-feature-checkout`) + - Determine the scope by checking which library/project the changes belong to + - If changes span multiple projects, use the primary affected project or split into multiple commits + - type is one of: - `feat`: A new feature - `fix`: A bug fix - `docs`: Documentation changes @@ -122,33 +143,33 @@ When analyzing the diff, consider splitting commits based on these criteria: ## Examples -Good commit messages: -- ✨ feat: add user authentication system -- 🐛 fix: resolve memory leak in rendering process -- 📝 docs: update API documentation with new endpoints -- ♻️ refactor: simplify error handling logic in parser -- 🚨 fix: resolve linter warnings in component files -- 🧑‍💻 chore: improve developer tooling setup process -- 👔 feat: implement business logic for transaction validation -- 🩹 fix: address minor styling inconsistency in header -- 🚑️ fix: patch critical security vulnerability in auth flow -- 🎨 style: reorganize component structure for better readability -- 🔥 fix: remove deprecated legacy code -- 🦺 feat: add input validation for user registration form -- 💚 fix: resolve failing CI pipeline tests -- 📈 feat: implement analytics tracking for user engagement -- 🔒️ fix: strengthen authentication password requirements -- ♿️ feat: improve form accessibility for screen readers +Good commit messages (scope = project name from project.json): +- ✨ feat(auth-feature-login): add user authentication system +- 🐛 fix(ui-renderer): resolve memory leak in rendering process +- 📝 docs(crm-api): update API documentation with new endpoints +- ♻️ refactor(shared-utils): simplify error handling logic in parser +- 🚨 fix(ui-label): resolve linter warnings in component files +- 🧑‍💻 chore(dev-tools): improve developer tooling setup process +- 👔 feat(checkout-feature): implement business logic for transaction validation +- 🩹 fix(ui-header): address minor styling inconsistency in header +- 🚑️ fix(auth-core): patch critical security vulnerability in auth flow +- 🎨 style(ui-components): reorganize component structure for better readability +- 🔥 fix(legacy-module): remove deprecated legacy code +- 🦺 feat(user-registration): add input validation for user registration form +- 💚 fix(ci-config): resolve failing CI pipeline tests +- 📈 feat(analytics-feature): implement analytics tracking for user engagement +- 🔒️ fix(auth-password): strengthen authentication password requirements +- ♿️ feat(ui-forms): improve form accessibility for screen readers Example of splitting commits: -- First commit: ✨ feat: add new solc version type definitions -- Second commit: 📝 docs: update documentation for new solc versions -- Third commit: 🔧 chore: update package.json dependencies -- Fourth commit: 🏷️ feat: add type definitions for new API endpoints -- Fifth commit: 🧵 feat: improve concurrency handling in worker threads -- Sixth commit: 🚨 fix: resolve linting issues in new code -- Seventh commit: ✅ test: add unit tests for new solc version features -- Eighth commit: 🔒️ fix: update dependencies with security vulnerabilities +- First commit: ✨ feat(ui-label): add prio-label component with variant styles +- Second commit: 📝 docs(ui-label): update README with usage examples +- Third commit: 🔧 chore(ui-notice): scaffold new notice library +- Fourth commit: 🏷️ feat(shared-types): add type definitions for new API endpoints +- Fifth commit: ♻️ refactor(pickup-shelf): update components to use new label +- Sixth commit: 🚨 fix(remission-list): resolve linting issues in new code +- Seventh commit: ✅ test(ui-label): add unit tests for prio-label component +- Eighth commit: 🔒️ fix(deps): update dependencies with security vulnerabilities ## Command Options diff --git a/apps/isa-app/src/page/customer-order/customer-order-details/customer-order-details-item/customer-order-details-item.component.html b/apps/isa-app/src/page/customer-order/customer-order-details/customer-order-details-item/customer-order-details-item.component.html index 4df0d28e7..69bea42a1 100644 --- a/apps/isa-app/src/page/customer-order/customer-order-details/customer-order-details-item/customer-order-details-item.component.html +++ b/apps/isa-app/src/page/customer-order/customer-order-details/customer-order-details-item/customer-order-details-item.component.html @@ -1,29 +1,66 @@ @if (orderItem$ | async; as orderItem) {
@if (orderItem?.features?.prebooked) { - - + + Artikel wird für Sie vorgemerkt. } @if (notificationsSent$ | async; as notificationsSent) { @if (notificationsSent?.NOTIFICATION_EMAIL) { - - + + Per E-Mail benachrichtigt
- @for (notification of notificationsSent?.NOTIFICATION_EMAIL; track notification) { + @for ( + notification of notificationsSent?.NOTIFICATION_EMAIL; + track notification + ) { {{ notification | date: 'dd.MM.yyyy | HH:mm' }} Uhr
} } @if (notificationsSent?.NOTIFICATION_SMS) { - - + + Per SMS benachrichtigt
- @for (notification of notificationsSent?.NOTIFICATION_SMS; track notification) { + @for ( + notification of notificationsSent?.NOTIFICATION_SMS; + track notification + ) { {{ notification | date: 'dd.MM.yyyy | HH:mm' }} Uhr
} @@ -33,7 +70,10 @@
- +
@@ -42,19 +82,29 @@ #elementDistance="uiElementDistance" [style.max-width.px]="elementDistance.distanceChange | async" class="flex flex-col" - > -
{{ orderItem.product?.contributors }}
+ > + @if (hasRewardPoints$ | async) { + Prämie + } +
+ {{ orderItem.product?.contributors }} +
{{ orderItem.product?.name }}
- + @if (selectable$ | async) { + /> }
@@ -72,19 +122,26 @@ [showSpinner]="false" > } - (von {{ orderItem?.overallQuantity }}) + (von {{ orderItem?.overallQuantity }})
@if (!!orderItem.product?.formatDetail) {
Format
- @if (orderItem?.product?.format && orderItem?.product?.format !== 'UNKNOWN') { + @if ( + orderItem?.product?.format && + orderItem?.product?.format !== 'UNKNOWN' + ) { format icon + /> } {{ orderItem.product?.formatDetail }}
@@ -96,10 +153,17 @@
{{ orderItem.product?.ean }}
} - @if (orderItem.price !== undefined) { + @if (orderItem.price !== undefined || (hasRewardPoints$ | async)) {
-
Preis
-
{{ orderItem.price | currency: 'EUR' }}
+ @if (hasRewardPoints$ | async) { +
Prämie
+
+ {{ rewardPoints$ | async | number: '1.0-0' }} Lesepunkte +
+ } @else { +
Preis
+
{{ orderItem.price | currency: 'EUR' }}
+ }
} @if (!!orderItem.retailPrice?.vat?.inPercent) { @@ -133,14 +197,23 @@ orderItemFeature(orderItem) === 'Versand' || orderItemFeature(orderItem) === 'B2B-Versand' || orderItemFeature(orderItem) === 'DIG-Versand' - ) { - {{ orderItem?.estimatedDelivery ? 'Lieferung zwischen' : 'Lieferung ab' }} + ) { + {{ + orderItem?.estimatedDelivery + ? 'Lieferung zwischen' + : 'Lieferung ab' + }} } - @if (orderItemFeature(orderItem) === 'Abholung' || orderItemFeature(orderItem) === 'Rücklage') { + @if ( + orderItemFeature(orderItem) === 'Abholung' || + orderItemFeature(orderItem) === 'Rücklage' + ) { Abholung ab } - @if (!!orderItem?.estimatedDelivery || !!orderItem?.estimatedShippingDate) { + @if ( + !!orderItem?.estimatedDelivery || !!orderItem?.estimatedShippingDate + ) {
@if (!!orderItem?.estimatedDelivery) { {{ orderItem?.estimatedDelivery?.start | date: 'dd.MM.yy' }} und @@ -155,14 +228,22 @@
@if (getOrderItemTrackingData(orderItem); as trackingData) {
-
{{ trackingData.length > 1 ? 'Sendungsnummern' : 'Sendungsnummer' }}
+
+ {{ trackingData.length > 1 ? 'Sendungsnummern' : 'Sendungsnummer' }} +
@for (tracking of trackingData; track tracking) { @if (tracking.trackingProvider === 'DHL' && !isNative) { - + {{ tracking.trackingProvider }}: {{ tracking.trackingNumber }} } @else { -

{{ tracking.trackingProvider }}: {{ tracking.trackingNumber }}

+

+ {{ tracking.trackingProvider }}: {{ tracking.trackingNumber }} +

} }
@@ -206,7 +287,9 @@ @if (!!receipt?.printedDate) {
Erstellt am
-
{{ receipt?.printedDate | date: 'dd.MM.yy | HH:mm' }} Uhr
+
+ {{ receipt?.printedDate | date: 'dd.MM.yy | HH:mm' }} Uhr +
} @if (!!receipt?.receiptText) { @@ -219,12 +302,20 @@
Belegart
- {{ receipt?.receiptType === 1 ? 'Lieferschein' : receipt?.receiptType === 64 ? 'Zahlungsbeleg' : '-' }} + {{ + receipt?.receiptType === 1 + ? 'Lieferschein' + : receipt?.receiptType === 64 + ? 'Zahlungsbeleg' + : '-' + }}
} } -
+
Anmerkung
-
- @if (!!specialCommentControl.value?.length) { - - } - @if (specialCommentControl?.enabled && specialCommentControl.dirty) { - +
+
+ @if ( + orderItemFeature(orderItem) === 'Versand' || + orderItemFeature(orderItem) === 'B2B-Versand' || + orderItemFeature(orderItem) === 'DIG-Versand' + ) { + {{ + orderItem?.estimatedDelivery + ? 'Lieferung zwischen' + : 'Lieferung ab' + }} + } + @if ( + orderItemFeature(orderItem) === 'Abholung' || + orderItemFeature(orderItem) === 'Rücklage' + ) { + Abholung ab + } +
+ @if ( + !!orderItem?.estimatedDelivery || !!orderItem?.estimatedShippingDate + ) { +
+ @if (!!orderItem?.estimatedDelivery) { + {{ orderItem?.estimatedDelivery?.start | date: 'dd.MM.yy' }} und + {{ orderItem?.estimatedDelivery?.stop | date: 'dd.MM.yy' }} + } @else { + @if (!!orderItem?.estimatedShippingDate) { + {{ orderItem?.estimatedShippingDate | date: 'dd.MM.yy' }} + } }
+ } +
+
+ @if (!!orderItem?.compartmentCode) { +
+
Abholfachnr.
+
{{ orderItem?.compartmentCode }}
+
+ } +
+
Vormerker
+
{{ orderItem.isPrebooked ? 'Ja' : 'Nein' }}
+
+
+ @if (!!orderItem.paymentProcessing) { +
+
Zahlungsweg
+
{{ orderItem.paymentProcessing || '-' }}
+
+ } + @if (!!orderItem.paymentType) { +
+
Zahlungsart
+
{{ orderItem.paymentType | paymentType }}
+
+ } + @if (receiptCount$ | async; as count) { +

+ {{ count > 1 ? 'Belege' : 'Beleg' }} +

+ } + @for (receipt of receipts$ | async; track receipt) { + @if (!!receipt?.receiptNumber) { +
+
Belegnummer
+
{{ receipt?.receiptNumber }}
+
+ } + @if (!!receipt?.printedDate) { +
+
Erstellt am
+
+ {{ receipt?.printedDate | date: 'dd.MM.yy | HH:mm' }} Uhr +
+
+ } + @if (!!receipt?.receiptText) { +
+
Rechnungstext
+
{{ receipt?.receiptText || '-' }}
+
+ } + @if (!!receipt?.receiptType) { +
+
Belegart
+
+ {{ + receipt?.receiptType === 1 + ? 'Lieferschein' + : receipt?.receiptType === 64 + ? 'Zahlungsbeleg' + : '-' + }} +
+
+ } + } + @if ( + !!orderItem.paymentProcessing || + !!orderItem.paymentType || + !!(receiptCount$ | async) + ) { +
+ } + @if (expanded) { + + } + } +
+
Anmerkung
+
+ +
+ @if (!!specialCommentControl.value?.length) { + + } + @if ( + specialCommentControl?.enabled && specialCommentControl.dirty + ) { + + }
- } +
+} diff --git a/apps/isa-app/src/page/pickup-shelf/shared/pickup-shelf-details-item/pickup-shelf-details-item.component.ts b/apps/isa-app/src/page/pickup-shelf/shared/pickup-shelf-details-item/pickup-shelf-details-item.component.ts index d2d18a807..f641f1174 100644 --- a/apps/isa-app/src/page/pickup-shelf/shared/pickup-shelf-details-item/pickup-shelf-details-item.component.ts +++ b/apps/isa-app/src/page/pickup-shelf/shared/pickup-shelf-details-item/pickup-shelf-details-item.component.ts @@ -1,5 +1,10 @@ import { CdkTextareaAutosize, TextFieldModule } from '@angular/cdk/text-field'; -import { AsyncPipe, CurrencyPipe, DatePipe, DecimalPipe } from '@angular/common'; +import { + AsyncPipe, + CurrencyPipe, + DatePipe, + DecimalPipe, +} from '@angular/common'; import { ChangeDetectionStrategy, ChangeDetectorRef, @@ -11,12 +16,23 @@ import { inject, OnDestroy, } from '@angular/core'; -import { FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms'; -import { NavigateOnClickDirective, ProductImageModule } from '@cdn/product-image'; -import { DBHOrderItemListItemDTO, OrderDTO, ReceiptDTO } from '@generated/swagger/oms-api'; +import { + FormsModule, + ReactiveFormsModule, + UntypedFormControl, +} from '@angular/forms'; +import { + NavigateOnClickDirective, + ProductImageModule, +} from '@cdn/product-image'; +import { + DBHOrderItemListItemDTO, + OrderDTO, + ReceiptDTO, +} from '@generated/swagger/oms-api'; import { getOrderItemRewardFeature } from '@isa/oms/data-access'; import { UiCommonModule } from '@ui/common'; -import { LabelComponent, Labeltype, LabelPriority } from '@isa/ui/label'; +import { LabelComponent } from '@isa/ui/label'; import { UiTooltipModule } from '@ui/tooltip'; import { PickupShelfPaymentTypePipe } from '../pipes/payment-type.pipe'; import { IconModule } from '@shared/components/icon'; @@ -60,8 +76,8 @@ export interface PickUpShelfDetailsItemComponentState { NotificationTypePipe, NavigateOnClickDirective, MatomoModule, - LabelComponent -], + LabelComponent, + ], }) export class PickUpShelfDetailsItemComponent extends ComponentStore @@ -88,7 +104,11 @@ export class PickUpShelfDetailsItemComponent this._store.selectOrderItem(this.orderItem, false); } - this.patchState({ orderItem, quantity: orderItem?.quantity, more: false }); + this.patchState({ + orderItem, + quantity: orderItem?.quantity, + more: false, + }); this.specialCommentControl.reset(orderItem?.specialComment); // Add New OrderItem to selected list if selected was set to true by its input if (this.get((s) => s.selected)) { @@ -110,16 +130,24 @@ export class PickUpShelfDetailsItemComponent readonly orderItem$ = this.select((s) => s.orderItem); emailNotificationDates$ = this.orderItem$.pipe( - switchMap((orderItem) => this._store.getEmailNotificationDate$(orderItem?.orderItemSubsetId)), + switchMap((orderItem) => + this._store.getEmailNotificationDate$(orderItem?.orderItemSubsetId), + ), ); - hasEmailNotification$ = this.emailNotificationDates$.pipe(map((dates) => dates?.length > 0)); + hasEmailNotification$ = this.emailNotificationDates$.pipe( + map((dates) => dates?.length > 0), + ); smsNotificationDates$ = this.orderItem$.pipe( - switchMap((orderItem) => this._store.getSmsNotificationDate$(orderItem?.orderItemSubsetId)), + switchMap((orderItem) => + this._store.getSmsNotificationDate$(orderItem?.orderItemSubsetId), + ), ); - hasSmsNotification$ = this.smsNotificationDates$.pipe(map((dates) => dates?.length > 0)); + hasSmsNotification$ = this.smsNotificationDates$.pipe( + map((dates) => dates?.length > 0), + ); /** * Observable that indicates whether the order item has reward points (Lesepunkte). @@ -137,8 +165,15 @@ export class PickUpShelfDetailsItemComponent map((orderItem) => getOrderItemRewardFeature(orderItem)), ); - canChangeQuantity$ = combineLatest([this.orderItem$, this._store.fetchPartial$]).pipe( - map(([item, partialPickup]) => ([16, 8192].includes(item?.processingStatus) || partialPickup) && item.quantity > 1), + canChangeQuantity$ = combineLatest([ + this.orderItem$, + this._store.fetchPartial$, + ]).pipe( + map( + ([item, partialPickup]) => + ([16, 8192].includes(item?.processingStatus) || partialPickup) && + item.quantity > 1, + ), ); get quantity() { @@ -147,7 +182,10 @@ export class PickUpShelfDetailsItemComponent set quantity(quantity: number) { if (this.quantity !== quantity) { this.patchState({ quantity }); - this._store.setSelectedOrderItemQuantity({ orderItemSubsetId: this.orderItem.orderItemSubsetId, quantity }); + this._store.setSelectedOrderItemQuantity({ + orderItemSubsetId: this.orderItem.orderItemSubsetId, + quantity, + }); } } @@ -155,7 +193,9 @@ export class PickUpShelfDetailsItemComponent @Input() get selected() { - return this._store.selectedOrderItemIds.includes(this.orderItem?.orderItemSubsetId); + return this._store.selectedOrderItemIds.includes( + this.orderItem?.orderItemSubsetId, + ); } set selected(selected: boolean) { if (this.selected !== selected) { @@ -164,23 +204,40 @@ export class PickUpShelfDetailsItemComponent } } - readonly selected$ = combineLatest([this.orderItem$, this._store.selectedOrderItemIds$]).pipe( - map(([orderItem, selectedItems]) => selectedItems.includes(orderItem?.orderItemSubsetId)), + readonly selected$ = combineLatest([ + this.orderItem$, + this._store.selectedOrderItemIds$, + ]).pipe( + map(([orderItem, selectedItems]) => + selectedItems.includes(orderItem?.orderItemSubsetId), + ), ); @Output() selectedChange = new EventEmitter(); get isItemSelectable() { - return this._store.orderItems?.some((item) => !!item?.actions && item?.actions?.length > 0); + return this._store.orderItems?.some( + (item) => !!item?.actions && item?.actions?.length > 0, + ); } get selectable() { - return this.isItemSelectable && this._store.orderItems.length > 1 && this._store.fetchPartial; + return ( + this.isItemSelectable && + this._store.orderItems.length > 1 && + this._store.fetchPartial + ); } - readonly selectable$ = combineLatest([this._store.orderItems$, this._store.fetchPartial$]).pipe( - map(([orderItems, fetchPartial]) => orderItems.length > 1 && this.isItemSelectable && fetchPartial), + readonly selectable$ = combineLatest([ + this._store.orderItems$, + this._store.fetchPartial$, + ]).pipe( + map( + ([orderItems, fetchPartial]) => + orderItems.length > 1 && this.isItemSelectable && fetchPartial, + ), ); get receipts() { @@ -193,7 +250,9 @@ export class PickUpShelfDetailsItemComponent readonly receipts$ = this._store.receipts$; - readonly receiptCount$ = this.receipts$.pipe(map((receipts) => receipts?.length)); + readonly receiptCount$ = this.receipts$.pipe( + map((receipts) => receipts?.length), + ); specialCommentControl = new UntypedFormControl(); @@ -203,10 +262,6 @@ export class PickUpShelfDetailsItemComponent expanded = false; - // Expose to template - Labeltype = Labeltype; - LabelPriority = LabelPriority; - constructor(private _cdr: ChangeDetectorRef) { super({ more: false, @@ -239,8 +294,9 @@ export class PickUpShelfDetailsItemComponent orderItemFeature(orderItemListItem: DBHOrderItemListItemDTO) { const orderItems = this.order?.items; - return orderItems?.find((orderItem) => orderItem.data.id === orderItemListItem.orderItemId)?.data?.features - ?.orderType; + return orderItems?.find( + (orderItem) => orderItem.data.id === orderItemListItem.orderItemId, + )?.data?.features?.orderType; } triggerResize() { diff --git a/apps/isa-app/src/page/pickup-shelf/shared/pickup-shelf-list-item/pickup-shelf-list-item.component.html b/apps/isa-app/src/page/pickup-shelf/shared/pickup-shelf-list-item/pickup-shelf-list-item.component.html index b0dfc05f3..ebc6d4b35 100644 --- a/apps/isa-app/src/page/pickup-shelf/shared/pickup-shelf-list-item/pickup-shelf-list-item.component.html +++ b/apps/isa-app/src/page/pickup-shelf/shared/pickup-shelf-list-item/pickup-shelf-list-item.component.html @@ -4,12 +4,16 @@ [routerLinkActive]="!isTablet && !primaryOutletActive ? 'active' : ''" queryParamsHandling="preserve" (click)="onDetailsClick()" - > +>
+ [class.page-pickup-shelf-list-item__item-grid-container-main]=" + primaryOutletActive + " + [class.page-pickup-shelf-list-item__item-grid-container-secondary]=" + primaryOutletActive && isItemSelectable === undefined + " + >
@if (item?.product?.ean | productImage; as productImage) { - } - @if (hasRewardPoints) { - - Prämie - + /> }
+ [class.mr-32]=" + showCompartmentCode && + item.features?.paid && + (isTablet || isDesktopSmall || primaryOutletActive) + " + > + @if (hasRewardPoints) { + Prämie + } +
- @for (contributor of contributors; track contributor; let last = $last) { + > + @for ( + contributor of contributors; + track contributor; + let last = $last + ) { {{ contributor }}{{ last ? '' : ';' }} }
+ [class.page-pickup-shelf-list-item__item-title-bigger-text-size]=" + !primaryOutletActive + " + > {{ item?.product?.name }}
-
-
+
+
EAN
{{ item?.product?.ean }}
-
+
Menge
{{ item.quantity }} x
-
+
@if (showChangeDate) {
Geändert
-
{{ item?.processingStatusDate | date: 'dd.MM.yy | HH:mm' }} Uhr
+
+ {{ item?.processingStatusDate | date: 'dd.MM.yy | HH:mm' }} Uhr +
} @else {
Bestelldatum
-
{{ item?.orderDate | date: 'dd.MM.yy | HH:mm' }} Uhr
+
+ {{ item?.orderDate | date: 'dd.MM.yy | HH:mm' }} Uhr +
}
-
+
@if (showCompartmentCode) {
- {{ item?.compartmentCode }}{{ item?.compartmentInfo && '_' + item?.compartmentInfo }} + > + {{ item?.compartmentCode + }}{{ item?.compartmentInfo && '_' + item?.compartmentInfo }}
} -
+
+ > {{ item.processingStatus | processingStatus }}
-
- @if (item.features?.paid && (isTablet || isDesktopSmall || primaryOutletActive)) { +
+ @if ( + item.features?.paid && + (isTablet || isDesktopSmall || primaryOutletActive) + ) {
- + > + {{ item.features?.paid }}
} @@ -110,28 +152,35 @@ @if (isItemSelectable) {
+ [class.page-pickup-shelf-list-item__item-select-bullet-primary]=" + primaryOutletActive + " + > -
- } - -
- {{ item?.specialComment }} + />
+ } + +
+ {{ item?.specialComment }}
- +
+ diff --git a/apps/isa-app/src/page/pickup-shelf/shared/pickup-shelf-list-item/pickup-shelf-list-item.component.ts b/apps/isa-app/src/page/pickup-shelf/shared/pickup-shelf-list-item/pickup-shelf-list-item.component.ts index aad62af8a..6eb34b710 100644 --- a/apps/isa-app/src/page/pickup-shelf/shared/pickup-shelf-list-item/pickup-shelf-list-item.component.ts +++ b/apps/isa-app/src/page/pickup-shelf/shared/pickup-shelf-list-item/pickup-shelf-list-item.component.ts @@ -1,12 +1,21 @@ import { DatePipe } from '@angular/common'; -import { ChangeDetectionStrategy, Component, ElementRef, Input, inject } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + Input, + inject, +} from '@angular/core'; import { RouterLink, RouterLinkActive } from '@angular/router'; -import { NavigateOnClickDirective, ProductImageModule } from '@cdn/product-image'; +import { + NavigateOnClickDirective, + ProductImageModule, +} from '@cdn/product-image'; import { EnvironmentService } from '@core/environment'; import { IconModule } from '@shared/components/icon'; import { DBHOrderItemListItemDTO } from '@generated/swagger/oms-api'; import { getOrderItemRewardFeature } from '@isa/oms/data-access'; -import { LabelComponent, Labeltype, LabelPriority } from '@isa/ui/label'; +import { LabelComponent } from '@isa/ui/label'; import { UiCommonModule } from '@ui/common'; import { PickupShelfProcessingStatusPipe } from '../pipes/processing-status.pipe'; import { FormsModule } from '@angular/forms'; @@ -32,8 +41,8 @@ import { MatomoModule } from 'ngx-matomo-client'; PickupShelfProcessingStatusPipe, NavigateOnClickDirective, MatomoModule, - LabelComponent -], + LabelComponent, + ], providers: [PickupShelfProcessingStatusPipe], }) export class PickUpShelfListItemComponent { @@ -45,6 +54,7 @@ export class PickUpShelfListItemComponent { @Input() primaryOutletActive = false; + // eslint-disable-next-line @typescript-eslint/no-explicit-any @Input() itemDetailsLink: any[] = []; @Input() isItemSelectable?: boolean = undefined; @@ -64,7 +74,9 @@ export class PickUpShelfListItemComponent { } get contributors() { - return this.item?.product?.contributors?.split(';').map((val) => val.trim()); + return this.item?.product?.contributors + ?.split(';') + .map((val) => val.trim()); } get showChangeDate() { @@ -73,11 +85,19 @@ export class PickUpShelfListItemComponent { // Zeige nur CompartmentCode an wenn verfügbar get showCompartmentCode() { - return !!this.item?.compartmentCode && (this.isTablet || this.isDesktopSmall || this.primaryOutletActive); + return ( + !!this.item?.compartmentCode && + (this.isTablet || this.isDesktopSmall || this.primaryOutletActive) + ); } get processingStatusColor() { - return { 'background-color': this._processingStatusPipe.transform(this.item?.processingStatus, true) }; + return { + 'background-color': this._processingStatusPipe.transform( + this.item?.processingStatus, + true, + ), + }; } /** @@ -90,14 +110,12 @@ export class PickUpShelfListItemComponent { selected$ = this.store.selectedListItems$.pipe( map((selectedListItems) => - selectedListItems?.find((item) => item?.orderItemSubsetId === this.item?.orderItemSubsetId), + selectedListItems?.find( + (item) => item?.orderItemSubsetId === this.item?.orderItemSubsetId, + ), ), ); - // Expose to template - Labeltype = Labeltype; - LabelPriority = LabelPriority; - constructor( private _elRef: ElementRef, private _environment: EnvironmentService, @@ -125,7 +143,9 @@ export class PickUpShelfListItemComponent { store: 'PickupShelfDetailsStore', })) ?? []; - return items.some((i) => i.orderItemSubsetId === this.item.orderItemSubsetId); + return items.some( + (i) => i.orderItemSubsetId === this.item.orderItemSubsetId, + ); } addOrderItemIntoCache() { @@ -144,7 +164,10 @@ export class PickUpShelfListItemComponent { } scrollIntoView() { - this._elRef.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'center' }); + this._elRef.nativeElement.scrollIntoView({ + behavior: 'smooth', + block: 'center', + }); } setSelected() { diff --git a/apps/isa-app/src/tailwind.scss b/apps/isa-app/src/tailwind.scss index 8974eaecc..cad571f19 100644 --- a/apps/isa-app/src/tailwind.scss +++ b/apps/isa-app/src/tailwind.scss @@ -20,6 +20,7 @@ @import "../../../libs/ui/skeleton-loader/src/skeleton-loader.scss"; @import "../../../libs/ui/tooltip/src/tooltip.scss"; @import "../../../libs/ui/label/src/label.scss"; + @import "../../../libs/ui/notice/src/notice.scss"; @import "../../../libs/ui/switch/src/switch.scss"; .input-control { diff --git a/apps/isa-app/stories/ui/label/ui-label.stories.ts b/apps/isa-app/stories/ui/label/ui-label.stories.ts index 527069306..9f17ba218 100644 --- a/apps/isa-app/stories/ui/label/ui-label.stories.ts +++ b/apps/isa-app/stories/ui/label/ui-label.stories.ts @@ -1,33 +1,25 @@ import { argsToTemplate, type Meta, type StoryObj } from '@storybook/angular'; -import { Labeltype, LabelPriority, LabelComponent } from '@isa/ui/label'; +import { LabelComponent } from '@isa/ui/label'; -type UiLabelInputs = { - type: Labeltype; - priority: LabelPriority; +type LabelInputs = { + active: boolean; }; -const meta: Meta = { +const meta: Meta = { component: LabelComponent, title: 'ui/label/Label', argTypes: { - type: { - control: { type: 'select' }, - options: Object.values(Labeltype), - description: 'Determines the label type', - }, - priority: { - control: { type: 'select' }, - options: Object.values(LabelPriority), - description: 'Determines the label priority', + active: { + control: { type: 'boolean' }, + description: 'Determines if the label is active (hover/pressed state)', }, }, args: { - type: 'tag', - priority: 'high', + active: false, }, render: (args) => ({ props: args, - template: `Prio 1`, + template: `Prämie`, }), }; export default meta; @@ -37,3 +29,21 @@ type Story = StoryObj; export const Default: Story = { args: {}, }; + +export const Active: Story = { + args: { + active: true, + }, +}; + +export const RewardExample: Story = { + args: {}, + render: () => ({ + template: ` +
+ Prämie + Active +
+ `, + }), +}; diff --git a/apps/isa-app/stories/ui/label/ui-prio-label.stories.ts b/apps/isa-app/stories/ui/label/ui-prio-label.stories.ts new file mode 100644 index 000000000..28fd7cad0 --- /dev/null +++ b/apps/isa-app/stories/ui/label/ui-prio-label.stories.ts @@ -0,0 +1,59 @@ +import { argsToTemplate, type Meta, type StoryObj } from '@storybook/angular'; +import { PrioLabelComponent } from '@isa/ui/label'; + +type PrioLabelInputs = { + priority: 1 | 2; +}; + +const meta: Meta = { + component: PrioLabelComponent, + title: 'ui/label/PrioLabel', + argTypes: { + priority: { + control: { type: 'select' }, + options: [1, 2], + description: 'The priority level (1 = high, 2 = low)', + }, + }, + args: { + priority: 1, + }, + render: (args) => ({ + props: args, + template: `Pflicht`, + }), +}; +export default meta; + +type Story = StoryObj; + +export const Priority1: Story = { + args: { + priority: 1, + }, + render: (args) => ({ + props: args, + template: `Pflicht`, + }), +}; + +export const Priority2: Story = { + args: { + priority: 2, + }, + render: (args) => ({ + props: args, + template: `Prio 2`, + }), +}; + +export const AllPriorities: Story = { + render: () => ({ + template: ` +
+ Pflicht + Prio 2 +
+ `, + }), +}; diff --git a/apps/isa-app/stories/ui/notice/ui-notice.stories.ts b/apps/isa-app/stories/ui/notice/ui-notice.stories.ts new file mode 100644 index 000000000..39fe4da8d --- /dev/null +++ b/apps/isa-app/stories/ui/notice/ui-notice.stories.ts @@ -0,0 +1,70 @@ +import { argsToTemplate, type Meta, type StoryObj } from '@storybook/angular'; +import { NoticeComponent, NoticePriority } from '@isa/ui/notice'; + +type NoticeInputs = { + priority: NoticePriority; +}; + +const meta: Meta = { + component: NoticeComponent, + title: 'ui/notice/Notice', + argTypes: { + priority: { + control: { type: 'select' }, + options: Object.values(NoticePriority), + description: 'The priority level (high, medium, low)', + }, + }, + args: { + priority: NoticePriority.High, + }, + render: (args) => ({ + props: args, + template: `Important message`, + }), +}; +export default meta; + +type Story = StoryObj; + +export const High: Story = { + args: { + priority: NoticePriority.High, + }, + render: (args) => ({ + props: args, + template: `Action Required`, + }), +}; + +export const Medium: Story = { + args: { + priority: NoticePriority.Medium, + }, + render: (args) => ({ + props: args, + template: `Secondary Information`, + }), +}; + +export const Low: Story = { + args: { + priority: NoticePriority.Low, + }, + render: (args) => ({ + props: args, + template: `Info Message`, + }), +}; + +export const AllPriorities: Story = { + render: () => ({ + template: ` +
+ High Priority + Medium Priority + Low Priority +
+ `, + }), +}; diff --git a/docs/library-reference.md b/docs/library-reference.md index 8a9aa2638..bf6ad8ba5 100644 --- a/docs/library-reference.md +++ b/docs/library-reference.md @@ -1,11 +1,11 @@ # Library Reference Guide -> **Last Updated:** 2025-11-27 +> **Last Updated:** 2025-11-28 > **Angular Version:** 20.3.6 > **Nx Version:** 21.3.2 -> **Total Libraries:** 73 +> **Total Libraries:** 74 -All 73 libraries in the monorepo have comprehensive README.md documentation located at `libs/[domain]/[layer]/[feature]/README.md`. +All 74 libraries in the monorepo have comprehensive README.md documentation located at `libs/[domain]/[layer]/[feature]/README.md`. **IMPORTANT: Always use the `docs-researcher` subagent** to retrieve and analyze library documentation. This keeps the main context clean and prevents pollution. @@ -297,12 +297,7 @@ Enterprise-grade barcode scanning library for ISA-Frontend using the Scandit SDK --- -## UI Component Libraries (18 libraries) - -### `@isa/ui/label` -A flexible label component for displaying tags and notices with configurable priority levels across Angular applications. - -**Location:** `libs/ui/label/` +## UI Component Libraries (19 libraries) ### `@isa/ui/bullet-list` A lightweight bullet list component system for Angular applications supporting customizable icons and hierarchical content presentation. @@ -349,6 +344,11 @@ A collection of reusable row components for displaying structured data with cons **Location:** `libs/ui/item-rows/` +### `@isa/ui/label` +Label components for displaying tags, categories, and priority indicators. + +**Location:** `libs/ui/label/` + ### `@isa/ui/layout` This library provides utilities and directives for responsive design and viewport behavior in Angular applications. @@ -359,6 +359,11 @@ A lightweight Angular component library providing accessible menu components bui **Location:** `libs/ui/menu/` +### `@isa/ui/notice` +A notice component for displaying prominent notifications and alerts with configurable priority levels. + +**Location:** `libs/ui/notice/` + ### `@isa/ui/progress-bar` A lightweight Angular progress bar component supporting both determinate and indeterminate modes. diff --git a/libs/remission/feature/remission-list/src/lib/remission-list-item/remission-list-item.component.html b/libs/remission/feature/remission-list/src/lib/remission-list-item/remission-list-item.component.html index b6ed6025c..bee85346f 100644 --- a/libs/remission/feature/remission-list/src/lib/remission-list-item/remission-list-item.component.html +++ b/libs/remission/feature/remission-list/src/lib/remission-list-item/remission-list-item.component.html @@ -38,7 +38,7 @@ class="w-fit" [class.row-start-second]="desktopBreakpoint()" > - {{ impediment() }} + {{ impediment() }} } diff --git a/libs/remission/feature/remission-list/src/lib/remission-list-item/remission-list-item.component.ts b/libs/remission/feature/remission-list/src/lib/remission-list-item/remission-list-item.component.ts index 6d4b15ff8..041d2b0f7 100644 --- a/libs/remission/feature/remission-list/src/lib/remission-list-item/remission-list-item.component.ts +++ b/libs/remission/feature/remission-list/src/lib/remission-list-item/remission-list-item.component.ts @@ -28,7 +28,7 @@ import { Breakpoint, breakpoint } from '@isa/ui/layout'; import { injectRemissionListType } from '../injects/inject-remission-list-type'; import { RemissionListItemSelectComponent } from './remission-list-item-select.component'; import { RemissionListItemActionsComponent } from './remission-list-item-actions.component'; -import { LabelComponent, Labeltype } from '@isa/ui/label'; +import { NoticeComponent } from '@isa/ui/notice'; /** * Component representing a single item in the remission list. @@ -58,16 +58,10 @@ import { LabelComponent, Labeltype } from '@isa/ui/label'; ItemRowDataImports, RemissionListItemSelectComponent, RemissionListItemActionsComponent, - LabelComponent, + NoticeComponent, ], }) export class RemissionListItemComponent implements OnDestroy { - /** - * Type of label to display for the item. - * Defaults to 'tag', can be changed to 'notice' or other types as needed. - */ - Labeltype = Labeltype; - /** * Store for managing selected remission quantities. * @private @@ -155,6 +149,7 @@ export class RemissionListItemComponent implements OnDestroy { * Uses the store's selected quantity for the item's ID. */ selectedStockToRemit = computed( + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion () => this.#store.selectedQuantity()?.[this.item().id!], ); diff --git a/libs/remission/shared/product/src/lib/product-info/product-info.component.html b/libs/remission/shared/product/src/lib/product-info/product-info.component.html index cf6b368b3..e14bf8a66 100644 --- a/libs/remission/shared/product/src/lib/product-info/product-info.component.html +++ b/libs/remission/shared/product/src/lib/product-info/product-info.component.html @@ -13,13 +13,10 @@ /> @if (tag) { - {{ tag }}{{ tag }} }
diff --git a/libs/remission/shared/product/src/lib/product-info/product-info.component.ts b/libs/remission/shared/product/src/lib/product-info/product-info.component.ts index 09ffe2f2a..42dbe0737 100644 --- a/libs/remission/shared/product/src/lib/product-info/product-info.component.ts +++ b/libs/remission/shared/product/src/lib/product-info/product-info.component.ts @@ -4,7 +4,7 @@ import { RemissionItem } from '@isa/remission/data-access'; import { ProductImageDirective } from '@isa/shared/product-image'; import { ProductRouterLinkDirective } from '@isa/shared/product-router-link'; import { ProductFormatComponent } from '@isa/shared/product-format'; -import { LabelComponent, LabelPriority, Labeltype } from '@isa/ui/label'; +import { PrioLabelComponent } from '@isa/ui/label'; export type ProductInfoItem = Pick< RemissionItem, @@ -28,7 +28,7 @@ export const RemissionItemTags = { ProductRouterLinkDirective, CurrencyPipe, ProductFormatComponent, - LabelComponent, + PrioLabelComponent, ], host: { '[class]': 'classList', @@ -38,8 +38,6 @@ export const RemissionItemTags = { }, }) export class ProductInfoComponent { - Labeltype = Labeltype; - LabelPriority = LabelPriority; RemissionItemTags = RemissionItemTags; readonly classList: ReadonlyArray = [ 'grid', diff --git a/libs/ui/label/README.md b/libs/ui/label/README.md index 26eae104b..4115fff9b 100644 --- a/libs/ui/label/README.md +++ b/libs/ui/label/README.md @@ -1,813 +1,88 @@ # @isa/ui/label -A flexible label component for displaying tags and notices with configurable priority levels across Angular applications. +Label components for displaying tags, categories, and priority indicators. -## Overview - -The Label UI library provides a standalone Angular component for displaying visual labels with semantic meaning. It supports two distinct label types (Tag and Notice) and three priority levels (High, Medium, Low), enabling consistent visual communication of information status, categorization, and importance throughout the ISA application. - -## Table of Contents - -- [Features](#features) -- [Quick Start](#quick-start) -- [Core Concepts](#core-concepts) -- [API Reference](#api-reference) -- [Usage Examples](#usage-examples) -- [Styling and Customization](#styling-and-customization) -- [Testing](#testing) -- [Architecture Notes](#architecture-notes) - -## Features - -- **Two label types** - Tag and Notice for different semantic contexts -- **Three priority levels** - High, Medium, and Low for visual hierarchy -- **Standalone component** - Modern Angular architecture with explicit imports -- **Signal-based reactivity** - Uses Angular signals for efficient updates -- **Type-safe API** - TypeScript enums for label type and priority configuration -- **CSS class composition** - Dynamic class generation based on type and priority -- **OnPush change detection** - Optimized rendering performance -- **ViewEncapsulation.None** - Flexible styling with global CSS classes -- **Content projection** - Full control over label content via ng-content -- **Computed classes** - Reactive CSS class computation using Angular signals - -## Quick Start - -### 1. Import the Component +## Installation ```typescript -import { Component } from '@angular/core'; -import { LabelComponent, Labeltype, LabelPriority } from '@isa/ui/label'; - -@Component({ - selector: 'app-product-status', - template: ` - - In Stock - - `, - imports: [LabelComponent] -}) -export class ProductStatusComponent { - Labeltype = Labeltype; - LabelPriority = LabelPriority; -} +import { LabelComponent, PrioLabelComponent } from '@isa/ui/label'; ``` -### 2. Basic Tag Label - -```typescript -@Component({ - template: ` - - New Arrival - - `, - imports: [LabelComponent] -}) -export class ProductBadgeComponent { - Labeltype = Labeltype; - LabelPriority = LabelPriority; -} -``` - -### 3. Notice Label - -```typescript -@Component({ - template: ` - - Action Required - - `, - imports: [LabelComponent] -}) -export class AlertComponent { - Labeltype = Labeltype; - LabelPriority = LabelPriority; -} -``` - -## Core Concepts - -### Label Types - -The component supports two distinct label types, each with specific semantic meaning: - -#### 1. Tag (Default) -- **Purpose**: Categorization, status indication, metadata display -- **Use Cases**: Product categories, order status, item tags, filters -- **Visual Style**: Typically compact, pill-shaped design -- **CSS Class**: `ui-label__tag` - -#### 2. Notice -- **Purpose**: Notifications, alerts, important messages -- **Use Cases**: Error messages, warnings, system notifications, user alerts -- **Visual Style**: Typically more prominent, attention-grabbing design -- **CSS Class**: `ui-label__notice` - -### Priority Levels - -Each label type can have one of three priority levels that control visual hierarchy: - -#### 1. High Priority (Default) -- **Purpose**: Critical information, urgent status, primary actions -- **Visual Characteristics**: Most prominent styling, often with bold colors -- **Use Cases**: Error states, critical alerts, primary status -- **CSS Classes**: - - `ui-label__tag-priority-high` (for Tag type) - - `ui-label__notice-priority-high` (for Notice type) - -#### 2. Medium Priority -- **Purpose**: Important but non-critical information -- **Visual Characteristics**: Moderate emphasis, balanced contrast -- **Use Cases**: Warnings, secondary status, informational notices -- **CSS Classes**: - - `ui-label__tag-priority-medium` (for Tag type) - - `ui-label__notice-priority-medium` (for Notice type) - -#### 3. Low Priority -- **Purpose**: Supplementary information, subtle indicators -- **Visual Characteristics**: Minimal emphasis, subtle colors -- **Use Cases**: Hints, optional metadata, background information -- **CSS Classes**: - - `ui-label__tag-priority-low` (for Tag type) - - `ui-label__notice-priority-low` (for Notice type) - -### Signal-Based Reactivity - -The component uses Angular signals for reactive CSS class computation: - -```typescript -// Signal inputs -type = input(Labeltype.Tag); -priority = input(LabelPriority.High); - -// Computed signal for type class -typeClass = computed(() => `ui-label__${this.type()}`); - -// Computed signal for priority class (combines type and priority) -priorityClass = computed(() => `${this.typeClass()}-priority-${this.priority()}`); -``` - -This approach provides: -- **Automatic updates** - Classes update when inputs change -- **Efficient rendering** - Only recomputes when dependencies change -- **Type safety** - TypeScript ensures valid type/priority combinations - -### CSS Class Structure - -The component applies a hierarchical class structure: - -``` -ui-label (base class) -├── ui-label__tag (type class for Tag) -│ ├── ui-label__tag-priority-high (Tag + High priority) -│ ├── ui-label__tag-priority-medium (Tag + Medium priority) -│ └── ui-label__tag-priority-low (Tag + Low priority) -└── ui-label__notice (type class for Notice) - ├── ui-label__notice-priority-high (Notice + High priority) - ├── ui-label__notice-priority-medium (Notice + Medium priority) - └── ui-label__notice-priority-low (Notice + Low priority) -``` - -## API Reference +## Components ### LabelComponent -Standalone component for displaying labels with type and priority. +A badge-style label for tags, filters, and reward indicators. -#### Selector -```html -Content -``` +**Figma:** [ISA Design System - Label](https://www.figma.com/design/bK0IW6akzSjHxmMwQfVPRW/ISA-DESIGN-SYSTEM?node-id=2806-8052&m=dev) -#### Inputs - -##### `type` -- **Type**: `Labeltype` -- **Default**: `Labeltype.Tag` -- **Description**: The semantic type of the label -- **Values**: - - `Labeltype.Tag` - For categorization and status - - `Labeltype.Notice` - For notifications and alerts - -**Example:** -```html -Important Notice -``` - -##### `priority` -- **Type**: `LabelPriority` -- **Default**: `LabelPriority.High` -- **Description**: The visual priority level of the label -- **Values**: - - `LabelPriority.High` - Highest visual emphasis - - `LabelPriority.Medium` - Moderate visual emphasis - - `LabelPriority.Low` - Subtle visual emphasis - -**Example:** -```html -Optional Info -``` - -#### Computed Properties - -##### `typeClass()` -- **Type**: `Signal` -- **Returns**: CSS class string based on current type -- **Format**: `ui-label__${type}` -- **Example**: `"ui-label__tag"` or `"ui-label__notice"` - -##### `priorityClass()` -- **Type**: `Signal` -- **Returns**: CSS class string combining type and priority -- **Format**: `ui-label__${type}-priority-${priority}` -- **Example**: `"ui-label__tag-priority-high"` - -#### Host Classes - -The component automatically applies the following classes to its host element: - -```typescript -['ui-label', typeClass(), priorityClass()] -``` - -Example rendered classes: -```html - - Content - -``` - -### Type Definitions - -#### Labeltype - -TypeScript enum for label type values: - -```typescript -export const Labeltype = { - Tag: 'tag', - Notice: 'notice', -} as const; - -export type Labeltype = (typeof Labeltype)[keyof typeof Labeltype]; -``` - -**Usage:** -```typescript -import { Labeltype } from '@isa/ui/label'; - -// In template -[type]="Labeltype.Tag" -[type]="Labeltype.Notice" - -// In component class -readonly labelType = Labeltype.Tag; -``` - -#### LabelPriority - -TypeScript enum for priority level values: - -```typescript -export const LabelPriority = { - High: 'high', - Medium: 'medium', - Low: 'low', -} as const; - -export type LabelPriority = (typeof LabelPriority)[keyof typeof LabelPriority]; -``` - -**Usage:** -```typescript -import { LabelPriority } from '@isa/ui/label'; - -// In template -[priority]="LabelPriority.High" -[priority]="LabelPriority.Medium" -[priority]="LabelPriority.Low" - -// In component class -readonly priority = LabelPriority.Medium; -``` - -## Usage Examples - -### Product Status Tags - -```typescript -import { Component } from '@angular/core'; -import { LabelComponent, Labeltype, LabelPriority } from '@isa/ui/label'; - -@Component({ - selector: 'app-product-card', - template: ` -
-

{{ product.name }}

- - - - In Stock - - - - - Electronics - - - - - New - -
- `, - imports: [LabelComponent] -}) -export class ProductCardComponent { - Labeltype = Labeltype; - LabelPriority = LabelPriority; - - product = { - name: 'Wireless Headphones', - inStock: true, - category: 'Electronics' - }; -} -``` - -### Order Status Indicators - -```typescript -import { Component, input, computed } from '@angular/core'; -import { LabelComponent, Labeltype, LabelPriority } from '@isa/ui/label'; - -@Component({ - selector: 'app-order-status', - template: ` - - {{ statusText() }} - - `, - imports: [LabelComponent] -}) -export class OrderStatusComponent { - Labeltype = Labeltype; - - status = input.required<'pending' | 'processing' | 'shipped' | 'delivered'>(); - - statusText = computed(() => { - const statusMap = { - pending: 'Pending', - processing: 'Processing', - shipped: 'Shipped', - delivered: 'Delivered' - }; - return statusMap[this.status()]; - }); - - statusPriority = computed(() => { - const priorityMap = { - pending: LabelPriority.High, - processing: LabelPriority.High, - shipped: LabelPriority.Medium, - delivered: LabelPriority.Low - }; - return priorityMap[this.status()]; - }); -} -``` - -### System Notifications - -```typescript -import { Component, input } from '@angular/core'; -import { LabelComponent, Labeltype, LabelPriority } from '@isa/ui/label'; - -interface Notification { - id: number; - message: string; - type: 'error' | 'warning' | 'info'; -} - -@Component({ - selector: 'app-notification-item', - template: ` -
- - {{ getNotificationLabel() }} - -

{{ notification().message }}

-
- `, - imports: [LabelComponent] -}) -export class NotificationItemComponent { - Labeltype = Labeltype; - LabelPriority = LabelPriority; - - notification = input.required(); - - getNotificationPriority(): LabelPriority { - const type = this.notification().type; - switch (type) { - case 'error': - return LabelPriority.High; - case 'warning': - return LabelPriority.Medium; - case 'info': - return LabelPriority.Low; - } - } - - getNotificationLabel(): string { - const type = this.notification().type; - return type.charAt(0).toUpperCase() + type.slice(1); - } -} -``` - -### Dynamic Labels with NgFor - -```typescript -import { Component } from '@angular/core'; -import { LabelComponent, Labeltype, LabelPriority } from '@isa/ui/label'; - -@Component({ - selector: 'app-product-tags', - template: ` -
- @for (tag of tags; track tag.id) { - - {{ tag.label }} - - } -
- `, - imports: [LabelComponent] -}) -export class ProductTagsComponent { - Labeltype = Labeltype; - - tags = [ - { id: 1, label: 'Sale', priority: LabelPriority.High }, - { id: 2, label: 'Free Shipping', priority: LabelPriority.Medium }, - { id: 3, label: 'Eco-Friendly', priority: LabelPriority.Low }, - ]; -} -``` - -### Conditional Label Display - -```typescript -import { Component, input, computed } from '@angular/core'; -import { LabelComponent, Labeltype, LabelPriority } from '@isa/ui/label'; - -@Component({ - selector: 'app-inventory-status', - template: ` - @if (showStockLabel()) { - - {{ stockLabel() }} - - } - `, - imports: [LabelComponent] -}) -export class InventoryStatusComponent { - Labeltype = Labeltype; - LabelPriority = LabelPriority; - - stockQuantity = input.required(); - - showStockLabel = computed(() => this.stockQuantity() < 10); - - stockLabel = computed(() => { - const qty = this.stockQuantity(); - if (qty === 0) return 'Out of Stock'; - if (qty < 5) return 'Low Stock'; - return 'Limited Stock'; - }); - - stockPriority = computed(() => { - const qty = this.stockQuantity(); - if (qty === 0) return LabelPriority.High; - if (qty < 5) return LabelPriority.High; - return LabelPriority.Medium; - }); -} -``` - -## Styling and Customization - -### CSS Class Hierarchy - -The component generates a predictable class structure for styling: - -```css -/* Base class applied to all labels */ -.ui-label { - display: inline-block; - font-family: var(--isa-font-family); - /* Base styles */ -} - -/* Type-specific base styles */ -.ui-label__tag { - /* Tag-specific base styles */ -} - -.ui-label__notice { - /* Notice-specific base styles */ -} - -/* Priority-specific styles for Tags */ -.ui-label__tag-priority-high { - background-color: var(--isa-accent-red); - color: white; - font-weight: 600; -} - -.ui-label__tag-priority-medium { - background-color: var(--isa-accent-yellow); - color: var(--isa-text-primary); - font-weight: 500; -} - -.ui-label__tag-priority-low { - background-color: var(--isa-neutral-200); - color: var(--isa-text-secondary); - font-weight: 400; -} - -/* Priority-specific styles for Notices */ -.ui-label__notice-priority-high { - border-left: 4px solid var(--isa-accent-red); - background-color: var(--isa-accent-red-light); - padding: 0.5rem 1rem; -} - -.ui-label__notice-priority-medium { - border-left: 4px solid var(--isa-accent-yellow); - background-color: var(--isa-accent-yellow-light); - padding: 0.5rem 1rem; -} - -.ui-label__notice-priority-low { - border-left: 4px solid var(--isa-neutral-300); - background-color: var(--isa-neutral-100); - padding: 0.5rem 1rem; -} -``` - -### Custom Styling Example - -```scss -// Override specific label styles -.product-card { - ui-label { - border-radius: 4px; - padding: 0.25rem 0.75rem; - font-size: 0.875rem; - text-transform: uppercase; - letter-spacing: 0.05em; - } - - // Custom high-priority tag style - .ui-label__tag-priority-high { - animation: pulse 2s infinite; - } - - // Custom notice styles - .ui-label__notice { - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - } -} -``` - -### Tailwind CSS Integration - -The component works seamlessly with Tailwind's design system: +#### Usage ```html - - - Featured - + +Prämie + + +Selected ``` -## Testing +#### API -The library uses **Vitest** with **Angular Testing Utilities** for testing. +| Input | Type | Default | Description | +| -------- | --------- | ------- | ------------------------------------ | +| `active` | `boolean` | `false` | Active state (adds background color) | -### Running Tests +### PrioLabelComponent -```bash -# Run tests for this library -npx nx test label --skip-nx-cache +A priority indicator label with two priority levels. -# Run tests with coverage -npx nx test label --code-coverage --skip-nx-cache +**Figma:** [ISA Design System - Prio Label](https://www.figma.com/design/bK0IW6akzSjHxmMwQfVPRW/ISA-DESIGN-SYSTEM?node-id=682-2836&m=dev) -# Run tests in watch mode -npx nx test label --watch +#### Usage + +```html + +Pflicht + + +Prio 2 ``` -### Test Structure +#### API -The library includes comprehensive unit tests covering: +| Input | Type | Default | Description | +| ---------- | -------- | ------- | ----------------------------------- | +| `priority` | `1 \| 2` | `1` | Priority level (1 = high, 2 = low ) | -- **Type input** - Validates correct CSS class generation for each type -- **Priority input** - Validates correct CSS class generation for each priority -- **Default values** - Tests default type and priority behavior -- **Content projection** - Tests ng-content rendering -- **Signal reactivity** - Tests computed class updates when inputs change -- **Class composition** - Tests correct combination of base, type, and priority classes +## CSS Classes -### Example Test +### LabelComponent + +- `.ui-label` - Base class +- `.ui-label--active` - Active state + +### PrioLabelComponent + +- `.ui-prio-label` - Base class +- `.ui-prio-label--1` - Priority 1 (dark background) +- `.ui-prio-label--2` - Priority 2 (light background) + +## Accessibility + +Both components include: + +- `role="status"` - Indicates status information +- E2E testing attributes (`data-what`, `data-which`) + +## E2E Testing ```typescript -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { describe, it, expect, beforeEach } from 'vitest'; -import { LabelComponent, Labeltype, LabelPriority } from './label.component'; +// Select all labels +page.locator('[data-what="label"]'); -describe('LabelComponent', () => { - let component: LabelComponent; - let fixture: ComponentFixture; +// Select all priority labels +page.locator('[data-what="prio-label"]'); - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [LabelComponent] - }); - fixture = TestBed.createComponent(LabelComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); - - it('should have default type as Tag', () => { - expect(component.type()).toBe(Labeltype.Tag); - }); - - it('should have default priority as High', () => { - expect(component.priority()).toBe(LabelPriority.High); - }); - - it('should generate correct type class for Tag', () => { - fixture.componentRef.setInput('type', Labeltype.Tag); - expect(component.typeClass()).toBe('ui-label__tag'); - }); - - it('should generate correct priority class', () => { - fixture.componentRef.setInput('type', Labeltype.Tag); - fixture.componentRef.setInput('priority', LabelPriority.Medium); - expect(component.priorityClass()).toBe('ui-label__tag-priority-medium'); - }); - - it('should apply all classes to host element', () => { - fixture.componentRef.setInput('type', Labeltype.Notice); - fixture.componentRef.setInput('priority', LabelPriority.Low); - fixture.detectChanges(); - - const element = fixture.nativeElement as HTMLElement; - expect(element.classList.contains('ui-label')).toBe(true); - expect(element.classList.contains('ui-label__notice')).toBe(true); - expect(element.classList.contains('ui-label__notice-priority-low')).toBe(true); - }); -}); +// Select specific priority +page.locator('[data-what="prio-label"][data-which="priority-1"]'); ``` - -## Architecture Notes - -### Current Architecture - -The library follows Angular standalone component architecture: - -``` -LabelComponent (Standalone) -├── Signal Inputs -│ ├── type: Signal -│ └── priority: Signal -├── Computed Signals -│ ├── typeClass(): string -│ └── priorityClass(): string -└── Host Binding - └── [class]: computed classes array -``` - -### Design Decisions - -#### 1. Standalone Component Architecture - -**Decision**: Use standalone component instead of NgModule -**Rationale**: -- Aligns with Angular 20.1.2 best practices -- Reduces boilerplate and complexity -- Improves tree-shaking and bundle optimization -- Enables explicit, localized imports - -**Impact**: Simpler consumption in feature modules - -#### 2. Signal-Based Reactivity - -**Decision**: Use `input()` and `computed()` signals instead of traditional inputs -**Rationale**: -- Modern Angular reactivity model -- Automatic dependency tracking -- Better performance with change detection -- Type-safe reactive transformations - -**Impact**: Efficient CSS class updates without manual change detection - -#### 3. ViewEncapsulation.None - -**Decision**: Use ViewEncapsulation.None instead of Emulated or ShadowDOM -**Rationale**: -- Enables global styling through BEM-like class naming -- Consistent with ISA design system approach -- Easier integration with Tailwind CSS -- Flexible theming capabilities - -**Impact**: Requires careful CSS class naming to avoid conflicts - -#### 4. OnPush Change Detection - -**Decision**: Use OnPush change detection strategy -**Rationale**: -- Optimal performance with signal-based inputs -- Reduces unnecessary change detection cycles -- Signals automatically trigger required updates -- Best practice for presentational components - -**Impact**: Better performance, especially in large lists - -#### 5. TypeScript Const Assertions for Enums - -**Decision**: Use const objects with type inference instead of traditional enums -**Rationale**: -- Better type safety with literal types -- Improved autocomplete in IDEs -- Smaller JavaScript bundle size -- More flexible than traditional TypeScript enums - -**Impact**: Type-safe API with minimal runtime overhead - -### Performance Considerations - -1. **Signal-based inputs** - Only recompute classes when inputs actually change -2. **OnPush change detection** - Minimal change detection overhead -3. **Computed signals** - Efficient memoization of class strings -4. **No template logic** - All computation in component class -5. **Lightweight DOM** - Simple ng-content projection with no wrapper elements - -### Future Enhancements - -Potential improvements identified: - -1. **Icon Support** - Add optional icon input for visual enhancement -2. **Dismissible Labels** - Add optional close button with output event -3. **Animation Support** - Add entry/exit animations for dynamic labels -4. **Theme Variants** - Support custom color themes via injection tokens -5. **Size Variants** - Add size input (small, medium, large) -6. **Accessibility Improvements** - Add ARIA attributes for screen readers -7. **Tooltip Integration** - Built-in tooltip support for truncated content - -## Dependencies - -### Required Libraries - -- `@angular/core` - Angular framework (20.1.2) -- `@angular/common` - CommonModule for basic directives - -### Optional Libraries - -None - this is a pure presentation component with no external dependencies. - -### Path Alias - -Import from: `@isa/ui/label` - -## License - -Internal ISA Frontend library - not for external distribution. diff --git a/libs/ui/label/eslint.config.cjs b/libs/ui/label/eslint.config.cjs index d36ea77f0..956486e68 100644 --- a/libs/ui/label/eslint.config.cjs +++ b/libs/ui/label/eslint.config.cjs @@ -12,7 +12,7 @@ module.exports = [ 'error', { type: 'attribute', - prefix: 'lib', + prefix: 'ui', style: 'camelCase', }, ], @@ -20,7 +20,7 @@ module.exports = [ 'error', { type: 'element', - prefix: 'lib', + prefix: 'ui', style: 'kebab-case', }, ], diff --git a/libs/ui/label/project.json b/libs/ui/label/project.json index 63a2ae821..e40cb4ef3 100644 --- a/libs/ui/label/project.json +++ b/libs/ui/label/project.json @@ -1,30 +1,28 @@ -{ - "name": "label", - "$schema": "../../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/ui/label/src", - "prefix": "lib", - "projectType": "library", - "tags": [], - "targets": { - "test": { - "executor": "@nx/vite:test", - "outputs": [ - "{options.reportsDirectory}" - ], - "options": { - "reportsDirectory": "../../../coverage/libs/ui/label" - }, - "configurations": { - "ci": { - "mode": "run", - "coverage": { - "enabled": true - } - } - } - }, - "lint": { - "executor": "@nx/eslint:lint" - } - } -} +{ + "name": "ui-label", + "$schema": "../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/label/src", + "prefix": "ui", + "projectType": "library", + "tags": [], + "targets": { + "test": { + "executor": "@nx/vite:test", + "outputs": ["{options.reportsDirectory}"], + "options": { + "reportsDirectory": "../../../coverage/libs/ui/label" + }, + "configurations": { + "ci": { + "mode": "run", + "coverage": { + "enabled": true + } + } + } + }, + "lint": { + "executor": "@nx/eslint:lint" + } + } +} diff --git a/libs/ui/label/src/index.ts b/libs/ui/label/src/index.ts index b857c0d54..00a4cd4fc 100644 --- a/libs/ui/label/src/index.ts +++ b/libs/ui/label/src/index.ts @@ -1,2 +1,2 @@ export * from './lib/label.component'; -export * from './lib/types'; +export * from './lib/prio-label.component'; diff --git a/libs/ui/label/src/label.scss b/libs/ui/label/src/label.scss index 1f40e82a3..9b1085914 100644 --- a/libs/ui/label/src/label.scss +++ b/libs/ui/label/src/label.scss @@ -1 +1,2 @@ @use "lib/label"; +@use "lib/prio-label"; diff --git a/libs/ui/label/src/lib/_label.scss b/libs/ui/label/src/lib/_label.scss index 1f671d9c1..f505095b7 100644 --- a/libs/ui/label/src/lib/_label.scss +++ b/libs/ui/label/src/lib/_label.scss @@ -1,31 +1,8 @@ .ui-label { @apply flex items-center justify-center text-ellipsis whitespace-nowrap; + @apply bg-isa-white px-3 py-[0.125rem] min-w-16 rounded-[3.125rem] isa-text-caption-regular text-isa-neutral-900 border border-solid border-isa-neutral-900; } -.ui-label__tag { - @apply px-3 py-[0.125rem] min-w-14 rounded-[3.125rem] isa-text-caption-regular; -} - -.ui-label__tag-priority-high { - @apply bg-isa-neutral-700 text-isa-neutral-400; -} - -.ui-label__tag-priority-low { - @apply bg-isa-neutral-300 text-isa-neutral-600; -} - -.ui-label__notice { - @apply p-2 min-w-48 rounded-lg isa-text-body-2-bold text-isa-neutral-900; -} - -.ui-label__notice-priority-high { - @apply bg-isa-secondary-100; -} - -.ui-label__notice-priority-medium { - @apply bg-isa-neutral-100; -} - -.ui-label__notice-priority-low { - @apply bg-transparent; +.ui-label--active { + @apply bg-isa-neutral-200; } diff --git a/libs/ui/label/src/lib/_prio-label.scss b/libs/ui/label/src/lib/_prio-label.scss new file mode 100644 index 000000000..3110b140a --- /dev/null +++ b/libs/ui/label/src/lib/_prio-label.scss @@ -0,0 +1,12 @@ +.ui-prio-label { + @apply flex items-center justify-center text-ellipsis whitespace-nowrap; + @apply px-3 py-[0.125rem] min-w-14 rounded-[3.125rem] isa-text-caption-regular; +} + +.ui-prio-label--1 { + @apply bg-isa-neutral-700 text-isa-neutral-400; +} + +.ui-prio-label--2 { + @apply bg-isa-neutral-300 text-isa-neutral-600; +} diff --git a/libs/ui/label/src/lib/label.component.spec.ts b/libs/ui/label/src/lib/label.component.spec.ts index 1c905aecd..713350d6e 100644 --- a/libs/ui/label/src/lib/label.component.spec.ts +++ b/libs/ui/label/src/lib/label.component.spec.ts @@ -1,7 +1,6 @@ import { describe, it, expect, beforeEach } from 'vitest'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { LabelComponent } from './label.component'; -import { LabelPriority, Labeltype } from './types'; describe('LabelComponent', () => { let component: LabelComponent; @@ -22,127 +21,47 @@ describe('LabelComponent', () => { expect(component).toBeTruthy(); }); - it('should have default type as tag', () => { - expect(component.type()).toBe(Labeltype.Tag); + it('should have default active as false', () => { + expect(component.active()).toBe(false); }); - it('should have default priority as high', () => { - expect(component.priority()).toBe(LabelPriority.High); - }); - - it('should accept notice type', () => { - fixture.componentRef.setInput('type', Labeltype.Notice); + it('should accept active input', () => { + fixture.componentRef.setInput('active', true); fixture.detectChanges(); - expect(component.type()).toBe(Labeltype.Notice); + expect(component.active()).toBe(true); }); - it('should accept different priority levels', () => { - fixture.componentRef.setInput('priority', LabelPriority.Medium); - fixture.detectChanges(); - expect(component.priority()).toBe(LabelPriority.Medium); - - fixture.componentRef.setInput('priority', LabelPriority.Low); - fixture.detectChanges(); - expect(component.priority()).toBe(LabelPriority.Low); + it('should return null for activeClass when not active', () => { + expect(component.activeClass()).toBeNull(); }); - it('should have correct CSS classes for default type and priority', () => { - expect(component.typeClass()).toBe('ui-label__tag'); - expect(component.priorityClass()).toBe('ui-label__tag-priority-high'); - }); - - it('should have correct CSS classes for notice type', () => { - fixture.componentRef.setInput('type', Labeltype.Notice); + it('should return active class when active is true', () => { + fixture.componentRef.setInput('active', true); fixture.detectChanges(); - expect(component.typeClass()).toBe('ui-label__notice'); - expect(component.priorityClass()).toBe('ui-label__notice-priority-high'); - }); - - it('should have correct CSS classes for different priorities', () => { - fixture.componentRef.setInput('priority', LabelPriority.Medium); - fixture.detectChanges(); - expect(component.priorityClass()).toBe('ui-label__tag-priority-medium'); - - fixture.componentRef.setInput('priority', LabelPriority.Low); - fixture.detectChanges(); - expect(component.priorityClass()).toBe('ui-label__tag-priority-low'); - }); - - it('should set host classes correctly', () => { - const hostElement = fixture.debugElement.nativeElement; - expect(hostElement.classList.contains('ui-label')).toBe(true); - expect(hostElement.classList.contains('ui-label__tag')).toBe(true); - expect( - hostElement.classList.contains('ui-label__tag-priority-high'), - ).toBe(true); + expect(component.activeClass()).toBe('ui-label--active'); }); }); describe('Template Rendering', () => { - it('should display content with default type and priority classes', () => { - const labelElement = fixture.debugElement.nativeElement; - expect(labelElement.classList.contains('ui-label')).toBe(true); - expect(labelElement.classList.contains('ui-label__tag')).toBe(true); - expect( - labelElement.classList.contains('ui-label__tag-priority-high'), - ).toBe(true); + it('should display content with default classes', () => { + const hostElement = fixture.debugElement.nativeElement; + expect(hostElement.classList.contains('ui-label')).toBe(true); }); - it('should display content with notice type', () => { - fixture.componentRef.setInput('type', Labeltype.Notice); + it('should display active class when active is true', () => { + fixture.componentRef.setInput('active', true); fixture.detectChanges(); - const labelElement = fixture.debugElement.nativeElement; - expect(labelElement.classList.contains('ui-label')).toBe(true); - expect(labelElement.classList.contains('ui-label__notice')).toBe(true); - expect( - labelElement.classList.contains('ui-label__notice-priority-high'), - ).toBe(true); + const hostElement = fixture.debugElement.nativeElement; + expect(hostElement.classList.contains('ui-label--active')).toBe(true); }); - it('should display content with different priority levels', () => { - fixture.componentRef.setInput('priority', LabelPriority.Low); + it('should not display active class when active is false', () => { + fixture.componentRef.setInput('active', false); fixture.detectChanges(); - const labelElement = fixture.debugElement.nativeElement; - expect(labelElement.classList.contains('ui-label')).toBe(true); - expect(labelElement.classList.contains('ui-label__tag')).toBe(true); - expect( - labelElement.classList.contains('ui-label__tag-priority-low'), - ).toBe(true); - }); - }); - - describe('Input Validation', () => { - it('should handle type input changes', () => { - fixture.componentRef.setInput('type', Labeltype.Tag); - fixture.detectChanges(); - expect(component.type()).toBe(Labeltype.Tag); - expect(component.typeClass()).toBe('ui-label__tag'); - expect(component.priorityClass()).toBe('ui-label__tag-priority-high'); - - fixture.componentRef.setInput('type', Labeltype.Notice); - fixture.detectChanges(); - expect(component.type()).toBe(Labeltype.Notice); - expect(component.typeClass()).toBe('ui-label__notice'); - expect(component.priorityClass()).toBe('ui-label__notice-priority-high'); - }); - - it('should handle priority input changes', () => { - fixture.componentRef.setInput('priority', LabelPriority.High); - fixture.detectChanges(); - expect(component.priority()).toBe(LabelPriority.High); - expect(component.priorityClass()).toBe('ui-label__tag-priority-high'); - - fixture.componentRef.setInput('priority', LabelPriority.Medium); - fixture.detectChanges(); - expect(component.priority()).toBe(LabelPriority.Medium); - expect(component.priorityClass()).toBe('ui-label__tag-priority-medium'); - - fixture.componentRef.setInput('priority', LabelPriority.Low); - fixture.detectChanges(); - expect(component.priority()).toBe(LabelPriority.Low); - expect(component.priorityClass()).toBe('ui-label__tag-priority-low'); + const hostElement = fixture.debugElement.nativeElement; + expect(hostElement.classList.contains('ui-label--active')).toBe(false); }); }); @@ -150,72 +69,36 @@ describe('LabelComponent', () => { it('should have proper host class binding', () => { const hostElement = fixture.debugElement.nativeElement; expect(hostElement.classList.contains('ui-label')).toBe(true); - expect(hostElement.classList.length).toBeGreaterThan(0); }); - it('should update classes when type changes', () => { + it('should have E2E testing attributes', () => { const hostElement = fixture.debugElement.nativeElement; - - // Initial state - expect(hostElement.classList.contains('ui-label__tag')).toBe(true); - expect(hostElement.classList.contains('ui-label__notice')).toBe(false); - expect( - hostElement.classList.contains('ui-label__tag-priority-high'), - ).toBe(true); - - // Change to notice - fixture.componentRef.setInput('type', Labeltype.Notice); - fixture.detectChanges(); - - expect(hostElement.classList.contains('ui-label__tag')).toBe(false); - expect(hostElement.classList.contains('ui-label__notice')).toBe(true); - expect( - hostElement.classList.contains('ui-label__tag-priority-high'), - ).toBe(false); - expect( - hostElement.classList.contains('ui-label__notice-priority-high'), - ).toBe(true); + expect(hostElement.getAttribute('data-what')).toBe('label'); + expect(hostElement.getAttribute('data-which')).toBe('label'); }); - it('should update classes when priority changes', () => { + it('should have accessibility role', () => { const hostElement = fixture.debugElement.nativeElement; - - // Initial state - expect( - hostElement.classList.contains('ui-label__tag-priority-high'), - ).toBe(true); - expect( - hostElement.classList.contains('ui-label__tag-priority-medium'), - ).toBe(false); - - // Change to medium priority - fixture.componentRef.setInput('priority', LabelPriority.Medium); - fixture.detectChanges(); - - expect( - hostElement.classList.contains('ui-label__tag-priority-high'), - ).toBe(false); - expect( - hostElement.classList.contains('ui-label__tag-priority-medium'), - ).toBe(true); + expect(hostElement.getAttribute('role')).toBe('status'); }); - it('should maintain both type and priority classes simultaneously', () => { + it('should update classes when active changes', () => { const hostElement = fixture.debugElement.nativeElement; - fixture.componentRef.setInput('type', Labeltype.Notice); - fixture.componentRef.setInput('priority', LabelPriority.Low); + // Initial state (not active) + expect(hostElement.classList.contains('ui-label--active')).toBe(false); + + // Change to active + fixture.componentRef.setInput('active', true); fixture.detectChanges(); - expect(hostElement.classList.contains('ui-label')).toBe(true); - expect(hostElement.classList.contains('ui-label__notice')).toBe(true); - expect( - hostElement.classList.contains('ui-label__notice-priority-low'), - ).toBe(true); - expect(hostElement.classList.contains('ui-label__tag')).toBe(false); - expect( - hostElement.classList.contains('ui-label__tag-priority-high'), - ).toBe(false); + expect(hostElement.classList.contains('ui-label--active')).toBe(true); + + // Change back to not active + fixture.componentRef.setInput('active', false); + fixture.detectChanges(); + + expect(hostElement.classList.contains('ui-label--active')).toBe(false); }); }); }); diff --git a/libs/ui/label/src/lib/label.component.ts b/libs/ui/label/src/lib/label.component.ts index 955a4a449..b81e74244 100644 --- a/libs/ui/label/src/lib/label.component.ts +++ b/libs/ui/label/src/lib/label.component.ts @@ -5,35 +5,35 @@ import { input, ViewEncapsulation, } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { LabelPriority, Labeltype } from './types'; /** - * A component that displays a label with a specific type and priority. - * The label can be used to indicate tags or notices with different priorities. + * A component that displays a label badge. + * Used for tags, filters, and reward indicators. + * + * @example + * ```html + * Prämie + * Selected + * ``` + * + * @see https://www.figma.com/design/bK0IW6akzSjHxmMwQfVPRW/ISA-DESIGN-SYSTEM?node-id=2806-8052&m=dev */ @Component({ selector: 'ui-label', - imports: [CommonModule], templateUrl: './label.component.html', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { - '[class]': '["ui-label", typeClass(), priorityClass()]', + '[class]': '["ui-label", activeClass()]', + 'data-what': 'label', + 'data-which': 'label', + 'role': 'status', }, }) export class LabelComponent { - /** The type of the label. */ - type = input(Labeltype.Tag); + /** Whether the label is active (hover/pressed state). */ + active = input(false); - /** A computed CSS class based on the current type. */ - typeClass = computed(() => `ui-label__${this.type()}`); - - /** The priority of the label. */ - priority = input(LabelPriority.High); - - /** A computed CSS class based on the current priority and typeClass. */ - priorityClass = computed( - () => `${this.typeClass()}-priority-${this.priority()}`, - ); + /** A computed CSS class for the active state of the label. */ + activeClass = computed(() => (this.active() ? 'ui-label--active' : null)); } diff --git a/libs/ui/label/src/lib/prio-label.component.spec.ts b/libs/ui/label/src/lib/prio-label.component.spec.ts new file mode 100644 index 000000000..a2c928123 --- /dev/null +++ b/libs/ui/label/src/lib/prio-label.component.spec.ts @@ -0,0 +1,102 @@ +import { describe, it, expect, beforeEach } from 'vitest'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { PrioLabelComponent } from './prio-label.component'; + +describe('PrioLabelComponent', () => { + let component: PrioLabelComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [PrioLabelComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(PrioLabelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + describe('Component Setup and Initialization', () => { + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should have default priority as 1', () => { + expect(component.priority()).toBe(1); + }); + + it('should accept priority 2', () => { + fixture.componentRef.setInput('priority', 2); + fixture.detectChanges(); + expect(component.priority()).toBe(2); + }); + + it('should have correct CSS class for priority 1', () => { + expect(component.priorityClass()).toBe('ui-prio-label--1'); + }); + + it('should have correct CSS class for priority 2', () => { + fixture.componentRef.setInput('priority', 2); + fixture.detectChanges(); + expect(component.priorityClass()).toBe('ui-prio-label--2'); + }); + }); + + describe('Template Rendering', () => { + it('should display content with priority 1 classes', () => { + const hostElement = fixture.debugElement.nativeElement; + expect(hostElement.classList.contains('ui-prio-label')).toBe(true); + expect(hostElement.classList.contains('ui-prio-label--1')).toBe(true); + }); + + it('should display content with priority 2 classes', () => { + fixture.componentRef.setInput('priority', 2); + fixture.detectChanges(); + + const hostElement = fixture.debugElement.nativeElement; + expect(hostElement.classList.contains('ui-prio-label')).toBe(true); + expect(hostElement.classList.contains('ui-prio-label--2')).toBe(true); + }); + + it('should update classes when priority changes', () => { + const hostElement = fixture.debugElement.nativeElement; + + expect(hostElement.classList.contains('ui-prio-label--1')).toBe(true); + expect(hostElement.classList.contains('ui-prio-label--2')).toBe(false); + + fixture.componentRef.setInput('priority', 2); + fixture.detectChanges(); + + expect(hostElement.classList.contains('ui-prio-label--1')).toBe(false); + expect(hostElement.classList.contains('ui-prio-label--2')).toBe(true); + }); + }); + + describe('Component Structure', () => { + it('should have proper host class binding', () => { + const hostElement = fixture.debugElement.nativeElement; + expect(hostElement.classList.contains('ui-prio-label')).toBe(true); + }); + + it('should have E2E testing attributes', () => { + const hostElement = fixture.debugElement.nativeElement; + expect(hostElement.getAttribute('data-what')).toBe('prio-label'); + expect(hostElement.getAttribute('data-which')).toBe('priority-1'); + }); + + it('should have correct data-which for different priorities', () => { + const hostElement = fixture.debugElement.nativeElement; + + expect(hostElement.getAttribute('data-which')).toBe('priority-1'); + + fixture.componentRef.setInput('priority', 2); + fixture.detectChanges(); + expect(hostElement.getAttribute('data-which')).toBe('priority-2'); + }); + + it('should have accessibility role', () => { + const hostElement = fixture.debugElement.nativeElement; + expect(hostElement.getAttribute('role')).toBe('status'); + }); + }); +}); diff --git a/libs/ui/label/src/lib/prio-label.component.ts b/libs/ui/label/src/lib/prio-label.component.ts new file mode 100644 index 000000000..340a5e715 --- /dev/null +++ b/libs/ui/label/src/lib/prio-label.component.ts @@ -0,0 +1,39 @@ +import { + ChangeDetectionStrategy, + Component, + computed, + input, + ViewEncapsulation, +} from '@angular/core'; + +/** + * Priority label component for displaying priority indicators. + * Supports priority levels 1 (high) and 2 (low) with custom text content. + * + * @example + * ```html + * Pflicht + * Prio 2 + * ``` + * + * @see https://www.figma.com/design/bK0IW6akzSjHxmMwQfVPRW/ISA-DESIGN-SYSTEM?node-id=682-2836&m=dev + */ +@Component({ + selector: 'ui-prio-label', + template: '', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { + '[class]': '["ui-prio-label", priorityClass()]', + 'data-what': 'prio-label', + '[attr.data-which]': '"priority-" + priority()', + 'role': 'status', + }, +}) +export class PrioLabelComponent { + /** The priority level of the label (1 = high, 2 = low). */ + priority = input<1 | 2>(1); + + /** A computed CSS class based on the current priority. */ + priorityClass = computed(() => `ui-prio-label--${this.priority()}`); +} diff --git a/libs/ui/label/src/lib/types.ts b/libs/ui/label/src/lib/types.ts deleted file mode 100644 index 2359c26e3..000000000 --- a/libs/ui/label/src/lib/types.ts +++ /dev/null @@ -1,14 +0,0 @@ -export const Labeltype = { - Tag: 'tag', - Notice: 'notice', -} as const; - -export type Labeltype = (typeof Labeltype)[keyof typeof Labeltype]; - -export const LabelPriority = { - High: 'high', - Medium: 'medium', - Low: 'low', -} as const; - -export type LabelPriority = (typeof LabelPriority)[keyof typeof LabelPriority]; diff --git a/libs/ui/notice/README.md b/libs/ui/notice/README.md new file mode 100644 index 000000000..063ad5cf2 --- /dev/null +++ b/libs/ui/notice/README.md @@ -0,0 +1,83 @@ +# @isa/ui/notice + +A notice component for displaying prominent notifications and alerts with configurable priority levels. + +## Installation + +```typescript +import { NoticeComponent, NoticePriority } from '@isa/ui/notice'; +``` + +## Component + +### NoticeComponent + +**Figma:** [ISA Design System - Notice](https://www.figma.com/design/bK0IW6akzSjHxmMwQfVPRW/ISA-DESIGN-SYSTEM?node-id=2551-4407&m=dev) + +## Priority Levels + +| Priority | Description | Background | +| -------- | ---------------- | ---------------- | +| `high` | Most prominent | Secondary color | +| `medium` | Moderate | Neutral color | +| `low` | Subtle (no fill) | Transparent | + +## Usage + +```html + +Action Required + + +Secondary message + + +Info message +``` + +### Component Example + +```typescript +import { Component } from '@angular/core'; +import { NoticeComponent, NoticePriority } from '@isa/ui/notice'; + +@Component({ + selector: 'app-alert', + template: ` + Action Required + Limited Stock + `, + imports: [NoticeComponent], +}) +export class AlertComponent { + NoticePriority = NoticePriority; +} +``` + +## API + +| Input | Type | Default | Description | +| ---------- | ---------------- | -------------------- | --------------------------------- | +| `priority` | `NoticePriority` | `NoticePriority.High`| Visual priority level | + +## CSS Classes + +- `.ui-notice` - Base class +- `.ui-notice--high` - High priority (secondary background) +- `.ui-notice--medium` - Medium priority (neutral background) +- `.ui-notice--low` - Low priority (transparent) + +## Accessibility + +- `role="status"` - Indicates status information +- E2E testing attributes (`data-what`, `data-which`) + +## E2E Testing + +```typescript +// Select all notices +page.locator('[data-what="notice"]'); + +// Select specific priority +page.locator('[data-what="notice"][data-which="priority-high"]'); +``` diff --git a/libs/ui/notice/eslint.config.cjs b/libs/ui/notice/eslint.config.cjs new file mode 100644 index 000000000..956486e68 --- /dev/null +++ b/libs/ui/notice/eslint.config.cjs @@ -0,0 +1,34 @@ +const nx = require('@nx/eslint-plugin'); +const baseConfig = require('../../../eslint.config.js'); + +module.exports = [ + ...baseConfig, + ...nx.configs['flat/angular'], + ...nx.configs['flat/angular-template'], + { + files: ['**/*.ts'], + rules: { + '@angular-eslint/directive-selector': [ + 'error', + { + type: 'attribute', + prefix: 'ui', + style: 'camelCase', + }, + ], + '@angular-eslint/component-selector': [ + 'error', + { + type: 'element', + prefix: 'ui', + style: 'kebab-case', + }, + ], + }, + }, + { + files: ['**/*.html'], + // Override or add rules here + rules: {}, + }, +]; diff --git a/libs/ui/notice/project.json b/libs/ui/notice/project.json new file mode 100644 index 000000000..c2c87d392 --- /dev/null +++ b/libs/ui/notice/project.json @@ -0,0 +1,20 @@ +{ + "name": "ui-notice", + "$schema": "../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/ui/notice/src", + "prefix": "ui", + "projectType": "library", + "tags": ["scope:ui", "type:ui"], + "targets": { + "test": { + "executor": "@nx/vite:test", + "outputs": ["{options.reportsDirectory}"], + "options": { + "reportsDirectory": "../../../coverage/libs/ui/notice" + } + }, + "lint": { + "executor": "@nx/eslint:lint" + } + } +} diff --git a/libs/ui/notice/src/index.ts b/libs/ui/notice/src/index.ts new file mode 100644 index 000000000..82061e472 --- /dev/null +++ b/libs/ui/notice/src/index.ts @@ -0,0 +1,2 @@ +export * from './lib/notice/notice.component'; +export * from './lib/notice/types'; diff --git a/libs/ui/notice/src/lib/notice/_notice.scss b/libs/ui/notice/src/lib/notice/_notice.scss new file mode 100644 index 000000000..2d605ca5d --- /dev/null +++ b/libs/ui/notice/src/lib/notice/_notice.scss @@ -0,0 +1,16 @@ +.ui-notice { + @apply inline-flex flex-col items-start; + @apply p-2 min-w-48 rounded-lg isa-text-body-2-bold text-isa-neutral-900; +} + +.ui-notice--high { + @apply bg-isa-secondary-100; +} + +.ui-notice--medium { + @apply bg-isa-neutral-100; +} + +.ui-notice--low { + @apply bg-transparent; +} diff --git a/libs/ui/notice/src/lib/notice/notice.component.html b/libs/ui/notice/src/lib/notice/notice.component.html new file mode 100644 index 000000000..6dbc74306 --- /dev/null +++ b/libs/ui/notice/src/lib/notice/notice.component.html @@ -0,0 +1 @@ + diff --git a/libs/ui/notice/src/lib/notice/notice.component.spec.ts b/libs/ui/notice/src/lib/notice/notice.component.spec.ts new file mode 100644 index 000000000..f2ef4601f --- /dev/null +++ b/libs/ui/notice/src/lib/notice/notice.component.spec.ts @@ -0,0 +1,128 @@ +import { describe, it, expect, beforeEach } from 'vitest'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoticeComponent } from './notice.component'; +import { NoticePriority } from './types'; + +describe('NoticeComponent', () => { + let component: NoticeComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NoticeComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(NoticeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + describe('Component Setup and Initialization', () => { + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should have default priority as high', () => { + expect(component.priority()).toBe(NoticePriority.High); + }); + + it('should accept medium priority', () => { + fixture.componentRef.setInput('priority', NoticePriority.Medium); + fixture.detectChanges(); + expect(component.priority()).toBe(NoticePriority.Medium); + }); + + it('should accept low priority', () => { + fixture.componentRef.setInput('priority', NoticePriority.Low); + fixture.detectChanges(); + expect(component.priority()).toBe(NoticePriority.Low); + }); + + it('should have correct CSS class for high priority', () => { + expect(component.priorityClass()).toBe('ui-notice--high'); + }); + + it('should have correct CSS class for medium priority', () => { + fixture.componentRef.setInput('priority', NoticePriority.Medium); + fixture.detectChanges(); + expect(component.priorityClass()).toBe('ui-notice--medium'); + }); + + it('should have correct CSS class for low priority', () => { + fixture.componentRef.setInput('priority', NoticePriority.Low); + fixture.detectChanges(); + expect(component.priorityClass()).toBe('ui-notice--low'); + }); + }); + + describe('Template Rendering', () => { + it('should display content with high priority classes', () => { + const hostElement = fixture.debugElement.nativeElement; + expect(hostElement.classList.contains('ui-notice')).toBe(true); + expect(hostElement.classList.contains('ui-notice--high')).toBe(true); + }); + + it('should display content with medium priority classes', () => { + fixture.componentRef.setInput('priority', NoticePriority.Medium); + fixture.detectChanges(); + + const hostElement = fixture.debugElement.nativeElement; + expect(hostElement.classList.contains('ui-notice')).toBe(true); + expect(hostElement.classList.contains('ui-notice--medium')).toBe(true); + }); + + it('should display content with low priority classes', () => { + fixture.componentRef.setInput('priority', NoticePriority.Low); + fixture.detectChanges(); + + const hostElement = fixture.debugElement.nativeElement; + expect(hostElement.classList.contains('ui-notice')).toBe(true); + expect(hostElement.classList.contains('ui-notice--low')).toBe(true); + }); + + it('should update classes when priority changes', () => { + const hostElement = fixture.debugElement.nativeElement; + + expect(hostElement.classList.contains('ui-notice--high')).toBe(true); + expect(hostElement.classList.contains('ui-notice--medium')).toBe(false); + + fixture.componentRef.setInput('priority', NoticePriority.Medium); + fixture.detectChanges(); + + expect(hostElement.classList.contains('ui-notice--high')).toBe(false); + expect(hostElement.classList.contains('ui-notice--medium')).toBe(true); + }); + }); + + describe('Component Structure', () => { + it('should have proper host class binding', () => { + const hostElement = fixture.debugElement.nativeElement; + expect(hostElement.classList.contains('ui-notice')).toBe(true); + }); + + it('should have E2E testing attributes', () => { + const hostElement = fixture.debugElement.nativeElement; + expect(hostElement.getAttribute('data-what')).toBe('notice'); + expect(hostElement.getAttribute('data-which')).toBe('priority-high'); + }); + + it('should have correct data-which for different priorities', () => { + const hostElement = fixture.debugElement.nativeElement; + + expect(hostElement.getAttribute('data-which')).toBe('priority-high'); + + fixture.componentRef.setInput('priority', NoticePriority.Medium); + fixture.detectChanges(); + expect(hostElement.getAttribute('data-which')).toBe('priority-medium'); + + fixture.componentRef.setInput('priority', NoticePriority.Low); + fixture.detectChanges(); + expect(hostElement.getAttribute('data-which')).toBe('priority-low'); + }); + + it('should have accessibility role', () => { + const hostElement = fixture.debugElement.nativeElement; + expect(hostElement.getAttribute('role')).toBe('status'); + }); + }); +}); diff --git a/libs/ui/notice/src/lib/notice/notice.component.ts b/libs/ui/notice/src/lib/notice/notice.component.ts new file mode 100644 index 000000000..c774054e6 --- /dev/null +++ b/libs/ui/notice/src/lib/notice/notice.component.ts @@ -0,0 +1,41 @@ +import { + ChangeDetectionStrategy, + Component, + computed, + input, + ViewEncapsulation, +} from '@angular/core'; +import { NoticePriority } from './types'; + +/** + * Notice component for displaying prominent notifications and alerts. + * Supports high, medium, and low priority variants. + * + * @example + * ```html + * Important message + * Secondary message + * Info message + * ``` + * + * @see https://www.figma.com/design/bK0IW6akzSjHxmMwQfVPRW/ISA-DESIGN-SYSTEM?node-id=2551-4407&m=dev + */ +@Component({ + selector: 'ui-notice', + template: '', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { + '[class]': '["ui-notice", priorityClass()]', + 'data-what': 'notice', + '[attr.data-which]': '"priority-" + priority()', + 'role': 'status', + }, +}) +export class NoticeComponent { + /** The priority level of the notice (high, medium, low). */ + priority = input(NoticePriority.High); + + /** A computed CSS class based on the current priority. */ + priorityClass = computed(() => `ui-notice--${this.priority()}`); +} diff --git a/libs/ui/notice/src/lib/notice/types.ts b/libs/ui/notice/src/lib/notice/types.ts new file mode 100644 index 000000000..e3fcb13bc --- /dev/null +++ b/libs/ui/notice/src/lib/notice/types.ts @@ -0,0 +1,7 @@ +export const NoticePriority = { + High: 'high', + Medium: 'medium', + Low: 'low', +} as const; + +export type NoticePriority = (typeof NoticePriority)[keyof typeof NoticePriority]; diff --git a/libs/ui/notice/src/notice.scss b/libs/ui/notice/src/notice.scss new file mode 100644 index 000000000..9a8696f84 --- /dev/null +++ b/libs/ui/notice/src/notice.scss @@ -0,0 +1 @@ +@use "lib/notice/notice"; diff --git a/libs/ui/notice/src/test-setup.ts b/libs/ui/notice/src/test-setup.ts new file mode 100644 index 000000000..cebf5ae72 --- /dev/null +++ b/libs/ui/notice/src/test-setup.ts @@ -0,0 +1,13 @@ +import '@angular/compiler'; +import '@analogjs/vitest-angular/setup-zone'; + +import { + BrowserTestingModule, + platformBrowserTesting, +} from '@angular/platform-browser/testing'; +import { getTestBed } from '@angular/core/testing'; + +getTestBed().initTestEnvironment( + BrowserTestingModule, + platformBrowserTesting(), +); diff --git a/libs/ui/notice/tsconfig.json b/libs/ui/notice/tsconfig.json new file mode 100644 index 000000000..3268ed4dc --- /dev/null +++ b/libs/ui/notice/tsconfig.json @@ -0,0 +1,30 @@ +{ + "extends": "../../../tsconfig.base.json", + "compilerOptions": { + "importHelpers": true, + "moduleResolution": "bundler", + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "module": "preserve" + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "typeCheckHostBindings": true, + "strictTemplates": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/libs/ui/notice/tsconfig.lib.json b/libs/ui/notice/tsconfig.lib.json new file mode 100644 index 000000000..312ee86bb --- /dev/null +++ b/libs/ui/notice/tsconfig.lib.json @@ -0,0 +1,27 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": [ + "src/**/*.spec.ts", + "src/test-setup.ts", + "jest.config.ts", + "src/**/*.test.ts", + "vite.config.ts", + "vite.config.mts", + "vitest.config.ts", + "vitest.config.mts", + "src/**/*.test.tsx", + "src/**/*.spec.tsx", + "src/**/*.test.js", + "src/**/*.spec.js", + "src/**/*.test.jsx", + "src/**/*.spec.jsx" + ], + "include": ["src/**/*.ts"] +} diff --git a/libs/ui/notice/tsconfig.spec.json b/libs/ui/notice/tsconfig.spec.json new file mode 100644 index 000000000..5785a8a5f --- /dev/null +++ b/libs/ui/notice/tsconfig.spec.json @@ -0,0 +1,29 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "types": [ + "vitest/globals", + "vitest/importMeta", + "vite/client", + "node", + "vitest" + ] + }, + "include": [ + "vite.config.ts", + "vite.config.mts", + "vitest.config.ts", + "vitest.config.mts", + "src/**/*.test.ts", + "src/**/*.spec.ts", + "src/**/*.test.tsx", + "src/**/*.spec.tsx", + "src/**/*.test.js", + "src/**/*.spec.js", + "src/**/*.test.jsx", + "src/**/*.spec.jsx", + "src/**/*.d.ts" + ], + "files": ["src/test-setup.ts"] +} diff --git a/libs/ui/notice/vite.config.mts b/libs/ui/notice/vite.config.mts new file mode 100644 index 000000000..2ab1eeb17 --- /dev/null +++ b/libs/ui/notice/vite.config.mts @@ -0,0 +1,29 @@ +/// +import { defineConfig } from 'vite'; +import angular from '@analogjs/vite-plugin-angular'; +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; +import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin'; + +export default +// @ts-expect-error - Vitest reporter tuple types have complex inference issues +defineConfig(() => ({ + root: __dirname, + cacheDir: '../../../node_modules/.vite/libs/ui/notice', + plugins: [angular(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])], + test: { + watch: false, + globals: true, + environment: 'jsdom', + include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], + setupFiles: ['src/test-setup.ts'], + reporters: [ + 'default', + ['junit', { outputFile: '../../../testresults/junit-ui-notice.xml' }], + ], + coverage: { + reportsDirectory: '../../../coverage/libs/ui/notice', + provider: 'v8' as const, + reporter: ['text', 'cobertura'], + }, + }, +})); diff --git a/tsconfig.base.json b/tsconfig.base.json index cfe72c918..9985c12e0 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -153,6 +153,7 @@ "@isa/ui/label": ["libs/ui/label/src/index.ts"], "@isa/ui/layout": ["libs/ui/layout/src/index.ts"], "@isa/ui/menu": ["libs/ui/menu/src/index.ts"], + "@isa/ui/notice": ["libs/ui/notice/src/index.ts"], "@isa/ui/progress-bar": ["libs/ui/progress-bar/src/index.ts"], "@isa/ui/search-bar": ["libs/ui/search-bar/src/index.ts"], "@isa/ui/skeleton-loader": ["libs/ui/skeleton-loader/src/index.ts"],