Skip to content

Commit 6654c58

Browse files
author
Szymon.Poltorak
committed
chore(): add tool / prompt testing component
1 parent e29b780 commit 6654c58

File tree

3 files changed

+296
-0
lines changed

3 files changed

+296
-0
lines changed

‎packages/minimal-repo/packages/application/src/app/components/refactoring-tests/group-4/multi-violation-test.component.html‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!-- Multi-violation test component using deprecated CSS classes from 4 DS components -->
2+
3+
<div class="test-container">
4+
<h2>Multi-Violation Test Component</h2>
5+
6+
<!-- ❌ BAD: DsButton violations - using deprecated 'btn', 'btn-primary', 'legacy-button' -->
7+
<div class="button-section">
8+
<h3>Button Violations (DsButton)</h3>
9+
<button class="btn btn-primary" (click)="handleButtonClick()">
10+
Primary Legacy Button
11+
</button>
12+
<button class="btn">
13+
Basic Legacy Button
14+
</button>
15+
<button class="legacy-button">
16+
Legacy Button Style
17+
</button>
18+
</div>
19+
20+
<!-- ❌ BAD: DsBadge violations - using deprecated 'offer-badge' -->
21+
<div class="badge-section">
22+
<h3>Badge Violations (DsBadge)</h3>
23+
<span class="offer-badge">50% OFF</span>
24+
<div class="product-item">
25+
<span>Special Product</span>
26+
<span class="offer-badge">NEW</span>
27+
</div>
28+
</div>
29+
30+
<!-- ❌ BAD: DsTabsModule violations - using deprecated 'tab-nav', 'nav-tabs', 'tab-nav-item' -->
31+
<div class="tabs-section">
32+
<h3>Tabs Violations (DsTabsModule)</h3>
33+
<ul class="nav-tabs tab-nav">
34+
<li class="tab-nav-item"
35+
[class.active]="activeTab === 0"
36+
(click)="switchTab(0)">
37+
Tab 1
38+
</li>
39+
<li class="tab-nav-item"
40+
[class.active]="activeTab === 1"
41+
(click)="switchTab(1)">
42+
Tab 2
43+
</li>
44+
<li class="tab-nav-item"
45+
[class.active]="activeTab === 2"
46+
(click)="switchTab(2)">
47+
Tab 3
48+
</li>
49+
</ul>
50+
<div class="tab-content">
51+
<div *ngIf="activeTab === 0">Content for Tab 1</div>
52+
<div *ngIf="activeTab === 1">Content for Tab 2</div>
53+
<div *ngIf="activeTab === 2">Content for Tab 3</div>
54+
</div>
55+
</div>
56+
57+
<!-- ❌ BAD: DsCard violations - using deprecated 'card' -->
58+
<div class="card-section">
59+
<h3>Card Violations (DsCard)</h3>
60+
<div class="card" *ngIf="showCard">
61+
<div class="card-header">
62+
<h4>Legacy Card Header</h4>
63+
<button class="btn" (click)="toggleCard()">×</button>
64+
</div>
65+
<div class="card-body">
66+
<p>This is a legacy card implementation using deprecated CSS classes.</p>
67+
<span class="offer-badge">FEATURED</span>
68+
</div>
69+
<div class="card-footer">
70+
<button class="legacy-button">Action</button>
71+
</div>
72+
</div>
73+
</div>
74+
75+
<!-- Mixed violations in a single section -->
76+
<div class="mixed-section">
77+
<h3>Mixed Violations</h3>
78+
<div class="card">
79+
<nav class="tab-nav">
80+
<span class="tab-nav-item">Settings</span>
81+
<span class="offer-badge">{{notifications}}</span>
82+
</nav>
83+
<div class="card-body">
84+
<button class="btn btn-primary">Save Settings</button>
85+
<button class="legacy-button">Cancel</button>
86+
</div>
87+
</div>
88+
</div>
89+
</div>

‎packages/minimal-repo/packages/application/src/app/components/refactoring-tests/group-4/multi-violation-test.component.scss‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
/* Multi-violation test component styles using deprecated CSS classes */
2+
3+
.test-container {
4+
padding: 20px;
5+
max-width: 800px;
6+
margin: 0 auto;
7+
}
8+
9+
/* ❌ BAD: DsButton deprecated styles - 'btn', 'btn-primary', 'legacy-button' */
10+
.btn {
11+
display: inline-block;
12+
padding: 8px 16px;
13+
margin: 4px;
14+
border: 1px solid #ccc;
15+
border-radius: 4px;
16+
background-color: #f8f9fa;
17+
color: #333;
18+
cursor: pointer;
19+
font-size: 14px;
20+
text-decoration: none;
21+
22+
&:hover {
23+
background-color: #e9ecef;
24+
}
25+
}
26+
27+
.btn-primary {
28+
background-color: #007bff;
29+
border-color: #007bff;
30+
color: white;
31+
32+
&:hover {
33+
background-color: #0056b3;
34+
}
35+
}
36+
37+
.legacy-button {
38+
background: linear-gradient(45deg, #ff6b6b, #feca57);
39+
border: none;
40+
padding: 10px 20px;
41+
color: white;
42+
border-radius: 8px;
43+
cursor: pointer;
44+
font-weight: bold;
45+
margin: 4px;
46+
47+
&:hover {
48+
transform: translateY(-2px);
49+
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
50+
}
51+
}
52+
53+
/* ❌ BAD: DsBadge deprecated styles - 'offer-badge' */
54+
.offer-badge {
55+
background-color: #ff4757;
56+
color: white;
57+
padding: 4px 8px;
58+
border-radius: 12px;
59+
font-size: 12px;
60+
font-weight: bold;
61+
text-transform: uppercase;
62+
margin-left: 8px;
63+
display: inline-block;
64+
65+
&:before {
66+
content: "🔥 ";
67+
}
68+
}
69+
70+
/* ❌ BAD: DsTabsModule deprecated styles - 'tab-nav', 'nav-tabs', 'tab-nav-item' */
71+
.nav-tabs {
72+
display: flex;
73+
list-style: none;
74+
padding: 0;
75+
margin: 0;
76+
border-bottom: 2px solid #dee2e6;
77+
}
78+
79+
.tab-nav {
80+
background-color: #f8f9fa;
81+
border-radius: 4px 4px 0 0;
82+
}
83+
84+
.tab-nav-item {
85+
padding: 12px 16px;
86+
cursor: pointer;
87+
border: 1px solid transparent;
88+
border-bottom: none;
89+
background-color: #f8f9fa;
90+
color: #495057;
91+
92+
&:hover {
93+
background-color: #e9ecef;
94+
}
95+
96+
&.active {
97+
background-color: white;
98+
border-color: #dee2e6;
99+
color: #007bff;
100+
border-bottom: 2px solid white;
101+
margin-bottom: -2px;
102+
}
103+
}
104+
105+
/* ❌ BAD: DsCard deprecated styles - 'card' */
106+
.card {
107+
border: 1px solid #dee2e6;
108+
border-radius: 8px;
109+
background-color: white;
110+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
111+
margin: 16px 0;
112+
overflow: hidden;
113+
}
114+
115+
.card-header {
116+
padding: 16px;
117+
background-color: #f8f9fa;
118+
border-bottom: 1px solid #dee2e6;
119+
display: flex;
120+
justify-content: space-between;
121+
align-items: center;
122+
123+
h4 {
124+
margin: 0;
125+
color: #495057;
126+
}
127+
}
128+
129+
.card-body {
130+
padding: 16px;
131+
132+
p {
133+
margin: 0 0 12px 0;
134+
color: #6c757d;
135+
}
136+
}
137+
138+
.card-footer {
139+
padding: 16px;
140+
background-color: #f8f9fa;
141+
border-top: 1px solid #dee2e6;
142+
text-align: right;
143+
}
144+
145+
/* Section styling */
146+
.button-section,
147+
.badge-section,
148+
.tabs-section,
149+
.card-section,
150+
.mixed-section {
151+
margin-bottom: 32px;
152+
153+
h3 {
154+
color: #495057;
155+
border-bottom: 1px solid #dee2e6;
156+
padding-bottom: 8px;
157+
margin-bottom: 16px;
158+
}
159+
}
160+
161+
.product-item {
162+
display: flex;
163+
align-items: center;
164+
justify-content: space-between;
165+
padding: 8px;
166+
border: 1px solid #dee2e6;
167+
border-radius: 4px;
168+
margin: 8px 0;
169+
background-color: #f8f9fa;
170+
}
171+
172+
.tab-content {
173+
padding: 20px;
174+
border: 1px solid #dee2e6;
175+
border-top: none;
176+
background-color: white;
177+
min-height: 100px;
178+
}

‎packages/minimal-repo/packages/application/src/app/components/refactoring-tests/group-4/multi-violation-test.component.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-multi-violation-test',
5+
templateUrl: './multi-violation-test.component.html',
6+
styleUrls: ['./multi-violation-test.component.scss'],
7+
standalone: true
8+
})
9+
export class MultiViolationTestComponent {
10+
activeTab = 0;
11+
showCard = true;
12+
notifications = 5;
13+
14+
constructor() {
15+
console.log('MultiViolationTestComponent initialized');
16+
}
17+
18+
switchTab(index: number) {
19+
this.activeTab = index;
20+
}
21+
22+
toggleCard() {
23+
this.showCard = !this.showCard;
24+
}
25+
26+
handleButtonClick() {
27+
console.log('Legacy button clicked');
28+
}
29+
}

0 commit comments

Comments
 (0)