@adyen/eslint-plugin-bento 2.7.7 → 2.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +26 -0
- package/README.md +48 -15
- package/configs/tailwind.js +17 -0
- package/configs/vue-recommended.js +3 -0
- package/configs/vue-strict.js +3 -0
- package/index.js +5 -0
- package/package.json +1 -1
- package/rules/deprecation-bento-dropdown-size-prop/README.md +25 -0
- package/rules/deprecation-bento-dropdown-size-prop/__tests__/deprecation-bento-dropdown-size-prop.vue +9 -0
- package/rules/deprecation-bento-dropdown-size-prop/__tests__/eslint.config.js +26 -0
- package/rules/deprecation-bento-dropdown-size-prop/deprecation-bento-dropdown-size-prop.integration.test.ts +33 -0
- package/rules/deprecation-bento-dropdown-size-prop/deprecation-bento-dropdown-size-prop.js +78 -0
- package/rules/deprecation-bento-dropdown-size-prop/deprecation-bento-dropdown-size-prop.test.ts +101 -0
- package/rules/deprecation-components-error-prop/README.md +43 -0
- package/rules/deprecation-components-error-prop/__tests__/deprecation-components-error-prop.vue +17 -0
- package/rules/deprecation-components-error-prop/__tests__/eslint.config.js +26 -0
- package/rules/deprecation-components-error-prop/deprecation-components-error-prop.integration.test.ts +37 -0
- package/rules/deprecation-components-error-prop/deprecation-components-error-prop.js +79 -0
- package/rules/deprecation-components-error-prop/deprecation-components-error-prop.test.ts +120 -0
- package/rules/deprecation-components-input-emit/__tests__/eslint.config.js +1 -1
- package/rules/deprecation-components-input-emit/deprecation-components-input-emit.js +19 -4
- package/rules/deprecation-components-input-emit/deprecation-components-input-emit.test.ts +40 -0
- package/rules/deprecation-components-value-prop/__tests__/eslint.config.js +1 -1
- package/rules/deprecation-components-value-prop/deprecation-components-value-prop.js +24 -7
- package/rules/deprecation-components-value-prop/deprecation-components-value-prop.test.ts +56 -0
- package/rules/deprecation-filter-bar-deprecated-props/README.md +64 -0
- package/rules/deprecation-filter-bar-deprecated-props/__tests__/deprecation-filter-bar-deprecated-props.vue +48 -0
- package/rules/deprecation-filter-bar-deprecated-props/__tests__/eslint.config.js +25 -0
- package/rules/deprecation-filter-bar-deprecated-props/deprecation-filter-bar-deprecated-props.integration.test.ts +22 -0
- package/rules/deprecation-filter-bar-deprecated-props/deprecation-filter-bar-deprecated-props.js +187 -0
- package/rules/deprecation-filter-bar-deprecated-props/deprecation-filter-bar-deprecated-props.test.ts +421 -0
- package/rules/tailwind-v3-to-bento/README.md +114 -0
- package/rules/tailwind-v3-to-bento/__tests__/eslint.config.js +24 -0
- package/rules/tailwind-v3-to-bento/__tests__/tailwind-v3-to-bento.vue +15 -0
- package/rules/tailwind-v3-to-bento/tailwind-v3-to-bento.integration.test.ts +29 -0
- package/rules/tailwind-v3-to-bento/tailwind-v3-to-bento.js +377 -0
- package/rules/tailwind-v3-to-bento/tailwind-v3-to-bento.test.ts +403 -0
|
@@ -0,0 +1,403 @@
|
|
|
1
|
+
import { RuleTester } from 'eslint';
|
|
2
|
+
import vueParser from 'vue-eslint-parser';
|
|
3
|
+
import tsParser from '@typescript-eslint/parser';
|
|
4
|
+
import tailwindV3ToBento from './tailwind-v3-to-bento';
|
|
5
|
+
|
|
6
|
+
const ruleTester = new RuleTester({
|
|
7
|
+
languageOptions: {
|
|
8
|
+
ecmaVersion: 'latest',
|
|
9
|
+
sourceType: 'module',
|
|
10
|
+
parser: vueParser,
|
|
11
|
+
parserOptions: {
|
|
12
|
+
parser: tsParser,
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
describe('@adyen/bento/tailwind-v3-to-bento', () => {
|
|
18
|
+
ruleTester.run('tailwind-v3-to-bento', tailwindV3ToBento, {
|
|
19
|
+
valid: [
|
|
20
|
+
{
|
|
21
|
+
name: 'Bento spacing classes are valid',
|
|
22
|
+
filename: 'test.vue',
|
|
23
|
+
code: `
|
|
24
|
+
<template>
|
|
25
|
+
<div class="p-070 m-040 gap-100"></div>
|
|
26
|
+
</template>
|
|
27
|
+
`,
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
name: 'Bento border radius classes are valid',
|
|
31
|
+
filename: 'test.vue',
|
|
32
|
+
code: `
|
|
33
|
+
<template>
|
|
34
|
+
<div class="rounded-s rounded-m rounded-l"></div>
|
|
35
|
+
</template>
|
|
36
|
+
`,
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
name: 'Bento shadow classes are valid',
|
|
40
|
+
filename: 'test.vue',
|
|
41
|
+
code: `
|
|
42
|
+
<template>
|
|
43
|
+
<div class="shadow-low shadow-medium shadow-high"></div>
|
|
44
|
+
</template>
|
|
45
|
+
`,
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
name: 'Bento breakpoint classes are valid',
|
|
49
|
+
filename: 'test.vue',
|
|
50
|
+
code: `
|
|
51
|
+
<template>
|
|
52
|
+
<div class="s-min:p-070 l-min:p-100 xxl:m-040"></div>
|
|
53
|
+
</template>
|
|
54
|
+
`,
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
name: 'Bento color classes are valid',
|
|
58
|
+
filename: 'test.vue',
|
|
59
|
+
code: `
|
|
60
|
+
<template>
|
|
61
|
+
<div class="text-label-critical bg-secondary border-outline-primary"></div>
|
|
62
|
+
</template>
|
|
63
|
+
`,
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
name: 'Non-themed Tailwind utilities are valid',
|
|
67
|
+
filename: 'test.vue',
|
|
68
|
+
code: `
|
|
69
|
+
<template>
|
|
70
|
+
<div class="flex items-center justify-between"></div>
|
|
71
|
+
</template>
|
|
72
|
+
`,
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
name: 'Non-class attributes are ignored',
|
|
76
|
+
filename: 'test.vue',
|
|
77
|
+
code: `
|
|
78
|
+
<template>
|
|
79
|
+
<div data-test="p-4 shadow-lg rounded-md"></div>
|
|
80
|
+
</template>
|
|
81
|
+
`,
|
|
82
|
+
},
|
|
83
|
+
],
|
|
84
|
+
invalid: [
|
|
85
|
+
// Spacing
|
|
86
|
+
{
|
|
87
|
+
name: 'Replaces spacing utilities',
|
|
88
|
+
code: `
|
|
89
|
+
<template>
|
|
90
|
+
<div class="p-4 m-2 gap-8"></div>
|
|
91
|
+
</template>
|
|
92
|
+
`,
|
|
93
|
+
output: `
|
|
94
|
+
<template>
|
|
95
|
+
<div class="p-070 m-040 gap-100"></div>
|
|
96
|
+
</template>
|
|
97
|
+
`,
|
|
98
|
+
errors: [{ messageId: 'updateTailwindClass' }],
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
name: 'Replaces spacing variants (px, py, mt, etc.)',
|
|
102
|
+
code: `
|
|
103
|
+
<template>
|
|
104
|
+
<div class="px-4 py-2 mt-8 mb-3"></div>
|
|
105
|
+
</template>
|
|
106
|
+
`,
|
|
107
|
+
output: `
|
|
108
|
+
<template>
|
|
109
|
+
<div class="px-070 py-040 mt-100 mb-060"></div>
|
|
110
|
+
</template>
|
|
111
|
+
`,
|
|
112
|
+
errors: [{ messageId: 'updateTailwindClass' }],
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
name: 'Replaces fractional spacing',
|
|
116
|
+
code: `
|
|
117
|
+
<template>
|
|
118
|
+
<div class="p-0.5 m-1.5 gap-2.5"></div>
|
|
119
|
+
</template>
|
|
120
|
+
`,
|
|
121
|
+
output: `
|
|
122
|
+
<template>
|
|
123
|
+
<div class="p-010 m-030 gap-050"></div>
|
|
124
|
+
</template>
|
|
125
|
+
`,
|
|
126
|
+
errors: [{ messageId: 'updateTailwindClass' }],
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
name: 'Replaces negative spacing utilities',
|
|
130
|
+
code: `
|
|
131
|
+
<template>
|
|
132
|
+
<div class="-m-4 -mt-2 -inset-x-8"></div>
|
|
133
|
+
</template>
|
|
134
|
+
`,
|
|
135
|
+
output: `
|
|
136
|
+
<template>
|
|
137
|
+
<div class="-m-070 -mt-040 -inset-x-100"></div>
|
|
138
|
+
</template>
|
|
139
|
+
`,
|
|
140
|
+
errors: [{ messageId: 'updateTailwindClass' }],
|
|
141
|
+
},
|
|
142
|
+
// Border radius
|
|
143
|
+
{
|
|
144
|
+
name: 'Replaces bare rounded',
|
|
145
|
+
code: `
|
|
146
|
+
<template>
|
|
147
|
+
<div class="rounded"></div>
|
|
148
|
+
</template>
|
|
149
|
+
`,
|
|
150
|
+
output: `
|
|
151
|
+
<template>
|
|
152
|
+
<div class="rounded-s"></div>
|
|
153
|
+
</template>
|
|
154
|
+
`,
|
|
155
|
+
errors: [{ messageId: 'updateTailwindClass' }],
|
|
156
|
+
},
|
|
157
|
+
{
|
|
158
|
+
name: 'Replaces border radius utilities',
|
|
159
|
+
code: `
|
|
160
|
+
<template>
|
|
161
|
+
<div class="rounded-sm rounded-md rounded-lg"></div>
|
|
162
|
+
</template>
|
|
163
|
+
`,
|
|
164
|
+
output: `
|
|
165
|
+
<template>
|
|
166
|
+
<div class="rounded-xs rounded-m rounded-l"></div>
|
|
167
|
+
</template>
|
|
168
|
+
`,
|
|
169
|
+
errors: [{ messageId: 'updateTailwindClass' }],
|
|
170
|
+
},
|
|
171
|
+
// Border width
|
|
172
|
+
{
|
|
173
|
+
name: 'Replaces bare border',
|
|
174
|
+
code: `
|
|
175
|
+
<template>
|
|
176
|
+
<div class="border"></div>
|
|
177
|
+
</template>
|
|
178
|
+
`,
|
|
179
|
+
output: `
|
|
180
|
+
<template>
|
|
181
|
+
<div class="border-s"></div>
|
|
182
|
+
</template>
|
|
183
|
+
`,
|
|
184
|
+
errors: [{ messageId: 'updateTailwindClass' }],
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
name: 'Replaces border width utilities',
|
|
188
|
+
code: `
|
|
189
|
+
<template>
|
|
190
|
+
<div class="border-2 border-4"></div>
|
|
191
|
+
</template>
|
|
192
|
+
`,
|
|
193
|
+
output: `
|
|
194
|
+
<template>
|
|
195
|
+
<div class="border-m border-l"></div>
|
|
196
|
+
</template>
|
|
197
|
+
`,
|
|
198
|
+
errors: [{ messageId: 'updateTailwindClass' }],
|
|
199
|
+
},
|
|
200
|
+
// Box shadows
|
|
201
|
+
{
|
|
202
|
+
name: 'Replaces bare shadow',
|
|
203
|
+
code: `
|
|
204
|
+
<template>
|
|
205
|
+
<div class="shadow"></div>
|
|
206
|
+
</template>
|
|
207
|
+
`,
|
|
208
|
+
output: `
|
|
209
|
+
<template>
|
|
210
|
+
<div class="shadow-medium"></div>
|
|
211
|
+
</template>
|
|
212
|
+
`,
|
|
213
|
+
errors: [{ messageId: 'updateTailwindClass' }],
|
|
214
|
+
},
|
|
215
|
+
{
|
|
216
|
+
name: 'Replaces shadow utilities',
|
|
217
|
+
code: `
|
|
218
|
+
<template>
|
|
219
|
+
<div class="shadow-sm shadow-lg shadow-xl"></div>
|
|
220
|
+
</template>
|
|
221
|
+
`,
|
|
222
|
+
output: `
|
|
223
|
+
<template>
|
|
224
|
+
<div class="shadow-low shadow-high shadow-high"></div>
|
|
225
|
+
</template>
|
|
226
|
+
`,
|
|
227
|
+
errors: [{ messageId: 'updateTailwindClass' }],
|
|
228
|
+
},
|
|
229
|
+
// Breakpoints
|
|
230
|
+
{
|
|
231
|
+
name: 'Replaces breakpoint prefixes',
|
|
232
|
+
code: `
|
|
233
|
+
<template>
|
|
234
|
+
<div class="sm:p-4 lg:p-8 2xl:m-2"></div>
|
|
235
|
+
</template>
|
|
236
|
+
`,
|
|
237
|
+
output: `
|
|
238
|
+
<template>
|
|
239
|
+
<div class="s-min:p-070 l-min:p-100 xxl:m-040"></div>
|
|
240
|
+
</template>
|
|
241
|
+
`,
|
|
242
|
+
errors: [{ messageId: 'updateTailwindClass' }],
|
|
243
|
+
},
|
|
244
|
+
{
|
|
245
|
+
name: 'Replaces breakpoint with non-spacing class',
|
|
246
|
+
code: `
|
|
247
|
+
<template>
|
|
248
|
+
<div class="md:rounded-md xl:shadow-lg"></div>
|
|
249
|
+
</template>
|
|
250
|
+
`,
|
|
251
|
+
output: `
|
|
252
|
+
<template>
|
|
253
|
+
<div class="m-min:rounded-m xl-min:shadow-high"></div>
|
|
254
|
+
</template>
|
|
255
|
+
`,
|
|
256
|
+
errors: [{ messageId: 'updateTailwindClass' }],
|
|
257
|
+
},
|
|
258
|
+
{
|
|
259
|
+
name: 'Handles combined breakpoint and other variants',
|
|
260
|
+
code: `
|
|
261
|
+
<template>
|
|
262
|
+
<div class="md:hover:p-4 lg:focus:rounded-md"></div>
|
|
263
|
+
</template>
|
|
264
|
+
`,
|
|
265
|
+
output: `
|
|
266
|
+
<template>
|
|
267
|
+
<div class="m-min:hover:p-070 l-min:focus:rounded-m"></div>
|
|
268
|
+
</template>
|
|
269
|
+
`,
|
|
270
|
+
errors: [{ messageId: 'updateTailwindClass' }],
|
|
271
|
+
},
|
|
272
|
+
{
|
|
273
|
+
name: 'Preserves non-breakpoint variants without replacing',
|
|
274
|
+
code: `
|
|
275
|
+
<template>
|
|
276
|
+
<div class="hover:bg-gray-100 focus:border-gray-300"></div>
|
|
277
|
+
</template>
|
|
278
|
+
`,
|
|
279
|
+
output: `
|
|
280
|
+
<template>
|
|
281
|
+
<div class="hover:bg-secondary focus:border-outline-primary"></div>
|
|
282
|
+
</template>
|
|
283
|
+
`,
|
|
284
|
+
errors: [{ messageId: 'updateTailwindClass' }],
|
|
285
|
+
},
|
|
286
|
+
// Colors
|
|
287
|
+
{
|
|
288
|
+
name: 'Replaces text color utilities',
|
|
289
|
+
code: `
|
|
290
|
+
<template>
|
|
291
|
+
<div class="text-red-500 text-green-500 text-blue-500"></div>
|
|
292
|
+
</template>
|
|
293
|
+
`,
|
|
294
|
+
output: `
|
|
295
|
+
<template>
|
|
296
|
+
<div class="text-label-critical text-label-success text-label-highlight"></div>
|
|
297
|
+
</template>
|
|
298
|
+
`,
|
|
299
|
+
errors: [{ messageId: 'updateTailwindClass' }],
|
|
300
|
+
},
|
|
301
|
+
{
|
|
302
|
+
name: 'Replaces background color utilities',
|
|
303
|
+
code: `
|
|
304
|
+
<template>
|
|
305
|
+
<div class="bg-gray-100 bg-red-100 bg-green-100"></div>
|
|
306
|
+
</template>
|
|
307
|
+
`,
|
|
308
|
+
output: `
|
|
309
|
+
<template>
|
|
310
|
+
<div class="bg-secondary bg-critical-weak bg-success-weak"></div>
|
|
311
|
+
</template>
|
|
312
|
+
`,
|
|
313
|
+
errors: [{ messageId: 'updateTailwindClass' }],
|
|
314
|
+
},
|
|
315
|
+
{
|
|
316
|
+
name: 'Replaces border color utilities',
|
|
317
|
+
code: `
|
|
318
|
+
<template>
|
|
319
|
+
<div class="border-gray-300"></div>
|
|
320
|
+
</template>
|
|
321
|
+
`,
|
|
322
|
+
output: `
|
|
323
|
+
<template>
|
|
324
|
+
<div class="border-outline-primary"></div>
|
|
325
|
+
</template>
|
|
326
|
+
`,
|
|
327
|
+
errors: [{ messageId: 'updateTailwindClass' }],
|
|
328
|
+
},
|
|
329
|
+
// Typography (warn only, no fix)
|
|
330
|
+
{
|
|
331
|
+
name: 'Warns about typography with suggested variant',
|
|
332
|
+
code: `
|
|
333
|
+
<template>
|
|
334
|
+
<div class="text-sm font-bold leading-tight tracking-wide"></div>
|
|
335
|
+
</template>
|
|
336
|
+
`,
|
|
337
|
+
errors: [
|
|
338
|
+
{
|
|
339
|
+
message:
|
|
340
|
+
'Found Tailwind v3 typography class "text-sm, font-bold, leading-tight, tracking-wide" — use <bento-typography variant="caption" strongest> instead.',
|
|
341
|
+
},
|
|
342
|
+
],
|
|
343
|
+
},
|
|
344
|
+
{
|
|
345
|
+
name: 'Suggests body variant for text-base',
|
|
346
|
+
code: `
|
|
347
|
+
<template>
|
|
348
|
+
<div class="text-base font-medium"></div>
|
|
349
|
+
</template>
|
|
350
|
+
`,
|
|
351
|
+
errors: [
|
|
352
|
+
{
|
|
353
|
+
message:
|
|
354
|
+
'Found Tailwind v3 typography class "text-base, font-medium" — use <bento-typography variant="body" stronger> instead.',
|
|
355
|
+
},
|
|
356
|
+
],
|
|
357
|
+
},
|
|
358
|
+
{
|
|
359
|
+
name: 'Suggests title variant with large for text-2xl',
|
|
360
|
+
code: `
|
|
361
|
+
<template>
|
|
362
|
+
<div class="text-2xl font-semibold"></div>
|
|
363
|
+
</template>
|
|
364
|
+
`,
|
|
365
|
+
errors: [
|
|
366
|
+
{
|
|
367
|
+
message:
|
|
368
|
+
'Found Tailwind v3 typography class "text-2xl, font-semibold" — use <bento-typography variant="title" large stronger> instead.',
|
|
369
|
+
},
|
|
370
|
+
],
|
|
371
|
+
},
|
|
372
|
+
{
|
|
373
|
+
name: 'Suggests title medium for text-xl',
|
|
374
|
+
code: `
|
|
375
|
+
<template>
|
|
376
|
+
<div class="text-xl"></div>
|
|
377
|
+
</template>
|
|
378
|
+
`,
|
|
379
|
+
errors: [
|
|
380
|
+
{
|
|
381
|
+
message:
|
|
382
|
+
'Found Tailwind v3 typography class "text-xl" — use <bento-typography variant="title" medium> instead.',
|
|
383
|
+
},
|
|
384
|
+
],
|
|
385
|
+
},
|
|
386
|
+
// Mixed
|
|
387
|
+
{
|
|
388
|
+
name: 'Handles mixed classes',
|
|
389
|
+
code: `
|
|
390
|
+
<template>
|
|
391
|
+
<div class="p-4 rounded-md shadow-lg sm:p-8 text-red-500"></div>
|
|
392
|
+
</template>
|
|
393
|
+
`,
|
|
394
|
+
output: `
|
|
395
|
+
<template>
|
|
396
|
+
<div class="p-070 rounded-m shadow-high s-min:p-100 text-label-critical"></div>
|
|
397
|
+
</template>
|
|
398
|
+
`,
|
|
399
|
+
errors: [{ messageId: 'updateTailwindClass' }],
|
|
400
|
+
},
|
|
401
|
+
],
|
|
402
|
+
});
|
|
403
|
+
});
|