Skip to content

Commit 66b85ee

Browse files
axelstudiosaxelstudios
committed
Signal improvements, auto-fix for unused imports
1 parent 1307192 commit 66b85ee

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+477
-589
lines changed

‎eslint.config.mjs

+4
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import angular from 'angular-eslint'
66
import github from 'eslint-plugin-github'
77
import importPlugin from 'eslint-plugin-import'
88
// import perfectionist from 'eslint-plugin-perfectionist'
9+
import unusedImports from 'eslint-plugin-unused-imports'
910
import tseslint from 'typescript-eslint'
1011

1112
export default tseslint.config(
@@ -37,6 +38,7 @@ export default tseslint.config(
3738
},
3839
plugins: {
3940
github,
41+
'unused-imports': unusedImports,
4042
},
4143
settings: {
4244
'import/resolver': {
@@ -96,6 +98,7 @@ export default tseslint.config(
9698
'@typescript-eslint/no-extraneous-class': 'off',
9799
'@typescript-eslint/no-for-in-array': 'error',
98100
'@typescript-eslint/no-non-null-assertion': 'error',
101+
'@typescript-eslint/no-unused-vars': 'off',
99102
'@typescript-eslint/no-use-before-define': 'error',
100103
'@typescript-eslint/prefer-for-of': 'error',
101104
'@typescript-eslint/restrict-template-expressions': ['error', {
@@ -137,6 +140,7 @@ export default tseslint.config(
137140
ignoreCase: true,
138141
ignoreDeclarationSort: true,
139142
}],
143+
'unused-imports/no-unused-imports': 'error',
140144
// TODO after enable strict
141145
'@typescript-eslint/no-unnecessary-condition': 'off',
142146
'@typescript-eslint/prefer-nullish-coalescing': 'off',

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@
8585
"eslint-plugin-github": "^5.1.5",
8686
"eslint-plugin-import": "^2.31.0",
8787
"eslint-plugin-perfectionist": "^4.7.0",
88+
"eslint-plugin-unused-imports": "^4.1.4",
8889
"jasmine-core": "~5.5.0",
8990
"karma": "~6.4.4",
9091
"karma-chrome-launcher": "~3.2.0",

‎pnpm-lock.yaml

+18
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/@seed/components/alert/alert.component.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
@if (!dismissible || (dismissible && !dismissed)) {
2-
<div class="seed-alert-container" [@fadeIn]="!dismissed" [@fadeOut]="!dismissed">
1+
@if (!dismissible() || (dismissible() && !dismissed())) {
2+
<div class="seed-alert-container" [@fadeIn]="!dismissed()" [@fadeOut]="!dismissed()">
33
<!-- Border -->
4-
@if (appearance === 'border') {
4+
@if (appearance() === 'border') {
55
<div class="seed-alert-border"></div>
66
}
77

88
<!-- Icon -->
9-
@if (showIcon) {
9+
@if (showIcon()) {
1010
<div class="seed-alert-icon">
1111
<!-- Custom icon -->
1212
<div class="seed-alert-custom-icon">
@@ -15,7 +15,7 @@
1515

1616
<!-- Default icons -->
1717
<div class="seed-alert-default-icon">
18-
@switch (type) {
18+
@switch (type()) {
1919
@case ('primary') {
2020
<mat-icon svgIcon="heroicons-solid:check-circle"></mat-icon>
2121
}

‎src/@seed/components/alert/alert.component.ts

+37-71
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
import type { BooleanInput } from '@angular/cdk/coercion'
2-
import { coerceBooleanProperty } from '@angular/cdk/coercion'
3-
import type { OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'
1+
import type { OnDestroy, OnInit } from '@angular/core'
42
import {
3+
booleanAttribute,
54
ChangeDetectionStrategy,
65
ChangeDetectorRef,
76
Component,
8-
EventEmitter,
97
HostBinding,
108
inject,
11-
Input,
12-
Output,
9+
input,
10+
model,
11+
output,
1312
ViewEncapsulation,
1413
} from '@angular/core'
1514
import { MatButtonModule } from '@angular/material/button'
@@ -30,75 +29,45 @@ import type { AlertAppearance, AlertType } from './alert.types'
3029
exportAs: 'seedAlert',
3130
imports: [MatButtonModule, MatIconModule],
3231
})
33-
export class AlertComponent implements OnChanges, OnInit, OnDestroy {
34-
static ngAcceptInputType_dismissible: BooleanInput
35-
static ngAcceptInputType_dismissed: BooleanInput
36-
static ngAcceptInputType_showIcon: BooleanInput
37-
38-
private _changeDetectorRef = inject(ChangeDetectorRef)
32+
export class AlertComponent implements OnInit, OnDestroy {
3933
private _alertService = inject(AlertService)
34+
private _changeDetectorRef = inject(ChangeDetectorRef)
4035

41-
@Input() appearance: AlertAppearance = 'soft'
42-
@Input() dismissed = false
43-
@Input() dismissible = false
44-
@Input() name: string = randomId()
45-
@Input() showIcon = true
46-
@Input() type: AlertType = 'primary'
47-
@Output() readonly dismissedChanged: EventEmitter<boolean> = new EventEmitter<boolean>()
36+
appearance = input<AlertAppearance>('soft')
37+
dismissed = model(false)
38+
dismissible = input(false, { transform: booleanAttribute })
39+
name = input(randomId())
40+
showIcon = input(true, { transform: booleanAttribute })
41+
type = input<AlertType>('primary')
42+
dismissedChanged = output<boolean>()
4843

4944
private readonly _unsubscribeAll$ = new Subject<void>()
5045

51-
/**
52-
* Host binding for component classes
53-
*/
5446
@HostBinding('class') get classList(): Record<string, boolean> {
5547
return {
56-
'seed-alert-appearance-border': this.appearance === 'border',
57-
'seed-alert-appearance-fill': this.appearance === 'fill',
58-
'seed-alert-appearance-outline': this.appearance === 'outline',
59-
'seed-alert-appearance-soft': this.appearance === 'soft',
60-
'seed-alert-dismissed': this.dismissed,
61-
'seed-alert-dismissible': this.dismissible,
62-
'seed-alert-show-icon': this.showIcon,
63-
'seed-alert-type-primary': this.type === 'primary',
64-
'seed-alert-type-accent': this.type === 'accent',
65-
'seed-alert-type-warn': this.type === 'warn',
66-
'seed-alert-type-basic': this.type === 'basic',
67-
'seed-alert-type-info': this.type === 'info',
68-
'seed-alert-type-success': this.type === 'success',
69-
'seed-alert-type-warning': this.type === 'warning',
70-
'seed-alert-type-error': this.type === 'error',
71-
}
72-
}
73-
74-
ngOnChanges(changes: SimpleChanges): void {
75-
// Dismissed
76-
if ('dismissed' in changes) {
77-
// Coerce the value to a boolean
78-
this.dismissed = coerceBooleanProperty(changes.dismissed.currentValue)
79-
80-
// Dismiss/show the alert
81-
this._toggleDismiss(this.dismissed)
82-
}
83-
84-
// Dismissible
85-
if ('dismissible' in changes) {
86-
// Coerce the value to a boolean
87-
this.dismissible = coerceBooleanProperty(changes.dismissible.currentValue)
88-
}
89-
90-
// Show icon
91-
if ('showIcon' in changes) {
92-
// Coerce the value to a boolean
93-
this.showIcon = coerceBooleanProperty(changes.showIcon.currentValue)
48+
'seed-alert-appearance-border': this.appearance() === 'border',
49+
'seed-alert-appearance-fill': this.appearance() === 'fill',
50+
'seed-alert-appearance-outline': this.appearance() === 'outline',
51+
'seed-alert-appearance-soft': this.appearance() === 'soft',
52+
'seed-alert-dismissed': this.dismissed(),
53+
'seed-alert-dismissible': this.dismissible(),
54+
'seed-alert-show-icon': this.showIcon(),
55+
'seed-alert-type-primary': this.type() === 'primary',
56+
'seed-alert-type-accent': this.type() === 'accent',
57+
'seed-alert-type-warn': this.type() === 'warn',
58+
'seed-alert-type-basic': this.type() === 'basic',
59+
'seed-alert-type-info': this.type() === 'info',
60+
'seed-alert-type-success': this.type() === 'success',
61+
'seed-alert-type-warning': this.type() === 'warning',
62+
'seed-alert-type-error': this.type() === 'error',
9463
}
9564
}
9665

9766
ngOnInit(): void {
9867
// Subscribe to the dismiss calls
9968
this._alertService.onDismiss
10069
.pipe(
101-
filter((name) => this.name === name),
70+
filter((name) => this.name() === name),
10271
takeUntil(this._unsubscribeAll$),
10372
)
10473
.subscribe(() => {
@@ -109,7 +78,7 @@ export class AlertComponent implements OnChanges, OnInit, OnDestroy {
10978
// Subscribe to the show calls
11079
this._alertService.onShow
11180
.pipe(
112-
filter((name) => this.name === name),
81+
filter((name) => this.name() === name),
11382
takeUntil(this._unsubscribeAll$),
11483
)
11584
.subscribe(() => {
@@ -128,7 +97,7 @@ export class AlertComponent implements OnChanges, OnInit, OnDestroy {
12897
*/
12998
dismiss(): void {
13099
// Return if the alert is already dismissed
131-
if (this.dismissed) {
100+
if (this.dismissed()) {
132101
return
133102
}
134103

@@ -141,7 +110,7 @@ export class AlertComponent implements OnChanges, OnInit, OnDestroy {
141110
*/
142111
show(): void {
143112
// Return if the alert is already showing
144-
if (!this.dismissed) {
113+
if (!this.dismissed()) {
145114
return
146115
}
147116

@@ -151,21 +120,18 @@ export class AlertComponent implements OnChanges, OnInit, OnDestroy {
151120

152121
/**
153122
* Dismiss/show the alert
154-
*
155-
* @param dismissed
156-
* @private
157123
*/
158124
private _toggleDismiss(dismissed: boolean): void {
159125
// Return if the alert is not dismissible
160-
if (!this.dismissible) {
126+
if (!this.dismissible()) {
161127
return
162128
}
163129

164130
// Set the dismissed
165-
this.dismissed = dismissed
131+
this.dismissed.set(dismissed)
166132

167-
// Execute the observable
168-
this.dismissedChanged.next(this.dismissed)
133+
// Emit the event
134+
this.dismissedChanged.emit(this.dismissed())
169135

170136
// Notify the change detector
171137
this._changeDetectorRef.markForCheck()

‎src/@seed/components/card/card.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@if (flippable) {
1+
@if (flippable()) {
22
<!-- Flippable card -->
33
<!-- Front -->
44
<div class="card-front">
@@ -15,7 +15,7 @@
1515
<ng-content></ng-content>
1616

1717
<!-- Expansion -->
18-
@if (expanded) {
18+
@if (expanded()) {
1919
<div class="card-expansion" [@expandCollapse]>
2020
<ng-content select="[cardExpansion]"></ng-content>
2121
</div>

‎src/@seed/components/card/card.component.ts

+9-32
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
import type { BooleanInput } from '@angular/cdk/coercion'
2-
import { coerceBooleanProperty } from '@angular/cdk/coercion'
3-
import type { OnChanges, SimpleChanges } from '@angular/core'
4-
import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core'
1+
import { booleanAttribute, Component, HostBinding, input, ViewEncapsulation } from '@angular/core'
52
import { Animations } from '@seed/animations'
63
import type { CardFace } from '@seed/components'
74

@@ -13,37 +10,17 @@ import type { CardFace } from '@seed/components'
1310
animations: Animations,
1411
exportAs: 'card',
1512
})
16-
export class CardComponent implements OnChanges {
17-
static ngAcceptInputType_expanded: BooleanInput
18-
static ngAcceptInputType_flippable: BooleanInput
13+
export class CardComponent {
14+
expanded = input(false, { transform: booleanAttribute })
15+
face = input<CardFace>('front')
16+
flippable = input(false, { transform: booleanAttribute })
1917

20-
@Input() expanded = false
21-
@Input() face: CardFace = 'front'
22-
@Input() flippable = false
23-
24-
/**
25-
* Host binding for component classes
26-
*/
2718
@HostBinding('class') get classList(): Record<string, boolean> {
2819
return {
29-
'card-expanded': this.expanded,
30-
'card-face-back': this.flippable && this.face === 'back',
31-
'card-face-front': this.flippable && this.face === 'front',
32-
'card-flippable': this.flippable,
33-
}
34-
}
35-
36-
ngOnChanges(changes: SimpleChanges): void {
37-
// Expanded
38-
if ('expanded' in changes) {
39-
// Coerce the value to a boolean
40-
this.expanded = coerceBooleanProperty(changes.expanded.currentValue)
41-
}
42-
43-
// Flippable
44-
if ('flippable' in changes) {
45-
// Coerce the value to a boolean
46-
this.flippable = coerceBooleanProperty(changes.flippable.currentValue)
20+
'card-expanded': this.expanded(),
21+
'card-face-back': this.flippable() && this.face() === 'back',
22+
'card-face-front': this.flippable() && this.face() === 'front',
23+
'card-flippable': this.flippable(),
4724
}
4825
}
4926
}

0 commit comments

Comments
 (0)