chore(workspace): enabling eslint rules (#648)

* chore(workspace): eslint rules * keep prettier stories * setup conflicts * a11y rules * no-template-bind * restored bind fn * fixed linting issues in carousel and picker * removing and fixing some of the relaxations * lit lint rules * proposed fix for a11y and handling input events * fixing the snapshots * config updates * Merge branch 'master' into format-eslint * lint pass * 99% pass Co-authored-by: Yuri Guller <[email protected]>
Vonage · Feb 17, 2021 · e1f47d4 · e1f47d4
1 parent 9ab5d17
commit e1f47d4
Show file tree

Hide file tree

Showing 35 changed files with 145 additions and 112 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -8,7 +8,9 @@ module.exports = {
 		'plugin:@typescript-eslint/eslint-recommended',
 		'plugin:@typescript-eslint/recommended',
 		'plugin:wc/recommended',
+		'@open-wc/eslint-config',
 		'plugin:compat/recommended',
+		'plugin:lit/recommended',
 		'plugin:lit-a11y/recommended',
 	],
 	parser: '@typescript-eslint/parser',
@@ -56,38 +58,21 @@ module.exports = {
 		camelcase: 'off', //! should remove after PR merge
 		'no-return-assign': 'off', //! should remove after PR merge
 		'no-plusplus': 'off', //! should remove after PR merge
-		'no-nested-ternary': 'off', //! should remove after PR merge
 		'class-methods-use-this': 'off', //! should remove after PR merge
-		'lit/attribute-value-entities': 'off', //! should remove after PR merge
 		'lines-between-class-members': 'off', //! should remove after PR merge
 		'prefer-object-spread': 'off', //! should remove after PR merge
 		'no-multi-assign': 'off', //! should remove after PR merge
-		'import/first': 'off', //! should remove after PR merge
 		'no-unused-expressions': 'off', //! should remove after PR merge
 		eqeqeq: 'off', //! should remove after PR merge
 		'wc/guard-super-call': 'off', //! should remove after PR merge
-		'lit/no-template-bind': 'off', //! should remove after PR merge
 		'no-bitwise': 'off', //! should remove after PR merge
 		radix: 'off', //! should remove after PR merge
-		'lit-a11y/anchor-is-valid': 'off', //! should remove after PR merge
 		'no-else-return': 'off', //! should remove after PR merge
-		'lit-a11y/click-events-have-key-events': 'off', //! should remove after PR merge
-		'lit-a11y/iframe-title': 'off', //! should remove after PR merge
-		'lit-a11y/alt-text': 'off', //! should remove after PR merge
-		'no-unneeded-ternary': 'off', //! should remove after PR merge
-		'@typescript-eslint/no-unused-vars': 'off', //! should remove after PR merge
-		'lit/no-invalid-html': 'off', //! should remove after PR merge
-		'wc/attach-shadow-constructor': 'off', //! should remove after PR merge
-		'no-void': 'off', //! should remove after PR merge
-		'no-unused-vars':
-			'off', /*[
-			'error',
-			{
-				'varsIgnorePattern': '^(?:(?:MDC(?:(?:[A-Z][a-z0-9]+)+)Adapter)|(?:(?:(?:[A-Z][a-z0-9]+)+)Type))$'
-			}
-		]*/ //! should ENABLE after PR merge
-		'object-curly-newline': 'off',
-		'arrow-parens': 'off',
+		'no-unused-vars': 'error',
+		'no-undef': 'off',
+		'lit/no-template-bind': 'off',
+		'lit/binding-positions': 'off',
+		'@typescript-eslint/no-extra-semi': 'off',
 		'@typescript-eslint/explicit-function-return-type': 'off',
 		'@typescript-eslint/indent': 'off',
 		'@typescript-eslint/explicit-member-accessibility': [

diff --git a/.lintstagedrc.js b/.lintstagedrc.js
@@ -1,7 +1,7 @@
 module.exports = {
-	"{common,components}/**/*.scss": ["stylelint --fix"],
+	"{common,components}/**/*.scss": ["stylelint --quiet --fix"],
 	"{common,components}/*/src/**/*.{js,ts}": [
 		"eslint --no-error-on-unmatched-pattern --quiet --fix",
 	],
-	'{common,components}/*/src/**/*.ts': ["lit-analyzer  --rules.no-incompatible-type-binding off --strict --quiet --format"],
+	'{common,components}/*/src/**/*.ts': ["lit-analyzer --rules.no-incompatible-type-binding off --strict --quiet --format"],
 };
diff --git a/__snapshots__/file picker.md b/__snapshots__/file picker.md
@@ -7,7 +7,10 @@
   aria-describedby="helper"
   class="wrapper"
 >
-  <div class="content drop-zone part">
+  <div
+    class="content drop-zone part"
+    tabindex="0"
+  >
     <slot name="dd-hint">
       <span class="dd-hint">
         Drag & Drop files here

diff --git a/common/context/src/vvd-context.ts b/common/context/src/vvd-context.ts
@@ -53,7 +53,7 @@ async function obtainStyleElement(
 
 async function obtainStyleContent(): Promise<CSSResult> {
 	if (!STYLE_FETCHED_PROMISE) {
-		STYLE_FETCHED_PROMISE = import('./vvd-context.css.js').then((d) => d.style);
+		STYLE_FETCHED_PROMISE = import('./vvd-context.css.js').then(d => d.style);
 	}
 	return STYLE_FETCHED_PROMISE;
 }
diff --git a/common/core/src/vvd-core.ts b/common/core/src/vvd-core.ts
@@ -66,7 +66,7 @@ function _buildConfiguration(): InitialConfiguration {
 
 function _validateConfiguration(configuration: Partial<Configuration>) {
 	const extraParams = Object.keys(configuration).filter(
-		(k) => !VALID_CONFIGURATION_KEYS.includes(k)
+		k => !VALID_CONFIGURATION_KEYS.includes(k)
 	);
 
 	if (extraParams.length) {

diff --git a/common/fonts/src/vvd-fonts.ts b/common/fonts/src/vvd-fonts.ts
@@ -43,11 +43,11 @@ function setupInitTestElements(): HTMLElement[] {
 		return e;
 	});
 	if (document.body) {
-		result.forEach((e) => document.body.appendChild(e));
+		result.forEach(e => document.body.appendChild(e));
 	} else {
 		document.addEventListener(
 			'DOMContentLoaded',
-			() => result.forEach((e) => document.body.appendChild(e)),
+			() => result.forEach(e => document.body.appendChild(e)),
 			{ once: true }
 		);
 	}
@@ -74,5 +74,5 @@ async function ensureInit(
 }
 
 function cleanInitTestElements(testElements: HTMLElement[]): void {
-	testElements.forEach((e) => e.remove());
+	testElements.forEach(e => e.remove());
 }
diff --git a/common/foundation/src/class-utils.ts b/common/foundation/src/class-utils.ts
@@ -14,6 +14,6 @@ export function mapToClasses(input: Record<string, unknown>): Array<string> {
 		return [];
 	}
 	return Object.entries(input)
-		.filter((entryPair) => entryPair[1])
-		.map((entryPair) => entryPair[0]);
+		.filter(entryPair => entryPair[1])
+		.map(entryPair => entryPair[0]);
 }
diff --git a/common/scheme/src/vvd-scheme.ts b/common/scheme/src/vvd-scheme.ts
@@ -1,24 +1,24 @@
 import { applySchemeCSS } from './vvd-scheme-style-tag-handler';
-
 import {
 	pcs,
 	getPreferedColorScheme,
 	// prefersColorSchemeSupported,
 } from './os-sync.utils';
-
 import {
 	SelectedDetail,
 	PredefinedScheme,
 	AutoScheme,
 	SchemeOption,
 } from './vvd-scheme-foundation';
+import { Emitter } from '@vonage/vvd-foundation/general-utils';
+
 export {
 	SelectedDetail,
 	PredefinedScheme,
 	AutoScheme,
 	SchemeOption,
 } from './vvd-scheme-foundation';
-import { Emitter } from '@vonage/vvd-foundation/general-utils';
+
 const eventBus = new Emitter(); // !refactored due to lack of support of EventTarget as a constructor (new EventTarget()) in safari 12
 
 let _selectedScheme: PredefinedScheme;
@@ -43,11 +43,7 @@ function getDefaultSchemeOption(): SchemeOption {
 function getEffectiveSchemeOption(
 	destOption: SchemeOption | null = null
 ): SchemeOption {
-	return destOption
-		? destOption
-		: _selectedSchemeOption
-			? _selectedSchemeOption
-			: getDefaultSchemeOption();
+	return destOption || _selectedSchemeOption || getDefaultSchemeOption();
 }
 
 async function syncWithOSSettings() {

diff --git a/components/audio/src/vwc-audio.ts b/components/audio/src/vwc-audio.ts
@@ -80,7 +80,7 @@ class VWCAudio extends HTMLElement {
 					kefir
 						.merge([
 							kefir.fromEvents(audioEl, 'pause'),
-							playerAudioLoadedProperty.filter((loaded) => !loaded),
+							playerAudioLoadedProperty.filter(loaded => !loaded),
 						])
 						.map(() => false),
 				])
@@ -104,7 +104,7 @@ class VWCAudio extends HTMLElement {
 				(position: number) => (audioEl.currentTime = audioEl.duration * position)
 			);
 		connectedProperty
-			.filter((connected) => !connected)
+			.filter(connected => !connected)
 			.onValue(() => audioEl.pause());
 	}
 

diff --git a/components/badge/src/vwc-badge-base.ts b/components/badge/src/vwc-badge-base.ts
@@ -1,4 +1,6 @@
-import { html, LitElement, property, TemplateResult } from 'lit-element';
+import {
+	html, LitElement, property, TemplateResult
+} from 'lit-element';
 import { Connotation, Shape, Layout } from '@vonage/vvd-foundation/constants';
 import { handleMultipleDenseProps } from '@vonage/vvd-foundation/general-utils';
 

diff --git a/components/button/src/vwc-button.ts b/components/button/src/vwc-button.ts
@@ -68,6 +68,7 @@ export class VWCButton extends MWCButton {
 			return super.createRenderRoot();
 		}
 		// don't set delegatesFocus: true due to https://bugs.webkit.org/show_bug.cgi?id=215732
+		/* eslint-disable wc/attach-shadow-constructor */
 		return this.attachShadow({ mode: 'open' });
 	}
 

diff --git a/components/calendar/src/vwc-calendar.ts b/components/calendar/src/vwc-calendar.ts
@@ -1,5 +1,7 @@
 import '@vonage/vvd-core';
-import { customElement, html, LitElement, TemplateResult } from 'lit-element';
+import {
+	customElement, html, LitElement, TemplateResult
+} from 'lit-element';
 import { style } from './vwc-calendar.css';
 
 declare global {
@@ -94,7 +96,7 @@ export class VWCCalendar extends LitElement {
 			<div class="container">
 				<ol class="headline">
 					${this.getWeekdaysByDate(new Date(Date.UTC(2021, 1, 1))).map(
-		(date) => html`<li>
+		date => html`<li>
 								<time datetime=${this.getValidDateString(date)}
 									>${this.getStyledWeekday(date)}</time
 								>
@@ -104,7 +106,7 @@ export class VWCCalendar extends LitElement {
 				<ol class="time">
 					<!-- TODO: align to convention of generation from first hour in day and a length of hours. -->
 					<!-- TODO: get styled hour and datetime value -->
-					${this.#hoursOfDay.map((h) => html`<li><time>${h}</time></li>`)}
+					${this.#hoursOfDay.map(h => html`<li><time>${h}</time></li>`)}
 				</ol>
 				<ol class="calendar">
 					${this.renderTimeCells()}

diff --git a/components/carousel/src/vwc-carousel.ts b/components/carousel/src/vwc-carousel.ts
@@ -30,7 +30,7 @@ export class VWCCarousel extends LitElement {
 	@property({
 		type: Boolean,
 		reflect: true,
-		converter: (v) => (v && v === 'false' ? false : true),
+		converter: v => !(v && v === 'false'),
 	})
 	autoplay = true;
 	@query('.swiper-container')

diff --git a/components/carousel/stories/carousel-basic.stories.js b/components/carousel/stories/carousel-basic.stories.js
@@ -24,7 +24,7 @@ export const basic = () => html`
 
 	<vwc-carousel class="carousel">
 		<vwc-carousel-item>
-			<div class="item text" style="padding:24px;background-color:lightblue;width:100%;" @click="${onClick}">
+			<div class="item text" style="padding:24px;background-color:lightblue;width:100%;" @click="${onClick}" @keyPress=${onKeyed}>
 				Some textual explanation of what's going on here...
 			</div>
 		</vwc-carousel-item>
@@ -44,7 +44,11 @@ export const basic = () => html`
 `;
 
 function onClick() {
-	console.log('something');
+	console.log('slide clicked');
+}
+
+function onKeyed() {
+	console.log('slide keyed');
 }
 
 export const events = () => html`
@@ -59,17 +63,17 @@ export const events = () => html`
 
 	<vwc-carousel class="carousel" autoplay="true">
 		<vwc-carousel-item>
-			<div class="item text" style="padding:24px;background-color:lightblue;width:100%;" @click="${onClick1}">
+			<div class="item text" style="padding:24px;background-color:lightblue;width:100%;" @click="${onClick1}" @keyPress=${onKeyed}>
 				Slide 1
 			</div>
 		</vwc-carousel-item>
 		<vwc-carousel-item>
-			<div class="item text" style="padding:24px;background-color:lightblue;width:100%;" @click="${onClick2}">
+			<div class="item text" style="padding:24px;background-color:lightblue;width:100%;" @click="${onClick2}" @keyPress=${onKeyed}>
 				Slide 2
 			</div>
 		</vwc-carousel-item>
 		<vwc-carousel-item>
-			<div class="item text" style="padding:24px;background-color:lightblue;width:100%;" @click="${onClick3}">
+			<div class="item text" style="padding:24px;background-color:lightblue;width:100%;" @click="${onClick3}" @keyPress=${onKeyed}>
 				Slide 3
 			</div>
 		</vwc-carousel-item>

diff --git a/components/carousel/test/carousel.test.js b/components/carousel/test/carousel.test.js
@@ -164,7 +164,7 @@ describe('carousel', () => {
 		});
 	});
 
-	describe('styling applyed', () => {
+	describe('styling applied', () => {
 		it('should have the pagination bullets colored', async () => {
 			const carousel = await initCarousel(['a', 'b', 'c']);
 			const bullets = extractBullets(carousel);

diff --git a/components/chips/src/mwc-chips/mwc-chip-base.ts b/components/chips/src/mwc-chips/mwc-chip-base.ts
@@ -31,6 +31,7 @@ import { nothing, TemplateResult } from 'lit-html';
 import { classMap } from 'lit-html/directives/class-map';
 import { ifDefined } from 'lit-html/directives/if-defined';
 
+/* eslint-disable no-void */
 function NOOP(): void {
 	void 0;
 }

diff --git a/components/chips/src/vwc-chip.ts b/components/chips/src/vwc-chip.ts
@@ -77,8 +77,10 @@ export class VWCChip extends MWCChip {
 					aria-hidden=${ifDefined(this.removeIconFocusable ? undefined : 'true')}
 					@click=${this.clickHandler}
 					@keydown=${this.clickHandler}
-					><vwc-icon size="small" class="trailing" type="cross-circle-negative"
-			  /></i>`
+			  >
+					<vwc-icon size="small" class="trailing" type="cross-circle-negative">
+					</vwc-icon>
+			  </i>`
 			: nothing}`;
 
 		if (this.removeIconFocusable) {

diff --git a/components/datepicker/src/vwc-datepicker.ts b/components/datepicker/src/vwc-datepicker.ts
@@ -197,7 +197,7 @@ export class VWCDatepicker extends LitFlatpickr {
 			this._instance.currentMonth
 		];
 		if (currentMonthContainer) {
-			currentMonthContainer.textContent = currentMonth ? currentMonth : '';
+			currentMonthContainer.textContent = currentMonth || '';
 		}
 	}
 
@@ -207,7 +207,7 @@ export class VWCDatepicker extends LitFlatpickr {
 		);
 		const currentYear = this._instance?.currentYear.toString();
 		if (currentYearContainer) {
-			currentYearContainer.textContent = currentYear ? currentYear : '';
+			currentYearContainer.textContent = currentYear || '';
 		}
 	}
 

diff --git a/components/file-picker/src/vwc-file-picker.scss b/components/file-picker/src/vwc-file-picker.scss
@@ -35,6 +35,7 @@
 	border: 1px dashed #ccc;
 	background-color: var(#{scheme-variables.$vvd-color-base});
 	border-radius: 6px;
+	outline: none;
 
 	.files-count {
 		position: absolute;