More eslint

.eslintrc

@@ -7,6 +7,7 @@
     "plugin:jest/recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:unicorn/all",
+    "@open-wc/eslint-config",
     "prettier",
   ],
   "settings": {
@@ -35,6 +36,8 @@
     "no-eval": "error",
     "no-console": "error",
     "no-unused-vars": "error",
+    "import/extensions": "off",
+    "import/no-cycle": "off",
     "unicorn/template-indent": "off",
     "unicorn/prefer-string-replace-all": "off",
     "@typescript-eslint/explicit-member-accessibility": "error",

components/filter.ts

@@ -76,6 +76,7 @@ export default function filter(
     const start = (currentPage - 1) * pageSize;
     const end = currentPage * pageSize;
     if (index >= start && index < end) return true;
+    return false;
   });
 
   return [filteredData.length, paginated];

components/font-call.ts

@@ -1,6 +1,38 @@
 import { GeneratedData } from "./main-app";
 import rtlSubsets from "../data/rtl.json";
 
+export function fontCallVariant(
+  variants: GeneratedData[number]["variants"],
+): string {
+  if (variants.length === 0) {
+    return "";
+  }
+
+  const [firstVariant] = variants;
+  if (/\d+/g.test(firstVariant)) {
+    return `:wght@${firstVariant}`;
+  }
+  if (firstVariant.includes("italic")) {
+    return `:ital@1`;
+  }
+  return "";
+}
+
+export function fontCallSelectedVariant(selectedVariant: string): string {
+  const variantNumber = selectedVariant.match(/\d+/g); // get number from selectedVariant
+
+  const variants = [];
+  if (selectedVariant.includes("italic")) {
+    variants.push(selectedVariant === "italic" ? "ital@1" : "ital");
+  }
+  if (variantNumber && variantNumber[0]) {
+    variants.push(
+      `wght@${variants.includes("ital") ? "1," : ""}${variantNumber[0]}`,
+    );
+  }
+  return `:${variants.join(",")}`;
+}
+
 export default function fontCall({
   variants,
   slug,
@@ -27,31 +59,6 @@ export default function fontCall({
   return `https://fonts.googleapis.com/css2?family=${fontCallString}`;
 }
 
-function fontCallVariant(variants: GeneratedData[number]["variants"]): string {
-  const [firstVariant] = variants;
-  if (/\d+/g.test(firstVariant)) {
-    return `:wght@${firstVariant}`;
-  } else if (firstVariant.includes("italic")) {
-    return `:ital@1`;
-  }
-}
-
-function fontCallSelectedVariant(selectedVariant: string): string {
-  const hasItalic = selectedVariant.includes("italic");
-  const variantNumber = selectedVariant.match(/\d+/g); // get number from selectedVariant
-
-  const variants = [];
-  if (selectedVariant === "italic") {
-    variants.push("ital@1");
-  } else if (hasItalic) {
-    variants.push("ital");
-  }
-  if (variantNumber && variantNumber[0]) {
-    variants.push(`wght@${hasItalic ? "1," : ""}${variantNumber[0]}`);
-  }
-  return `:${variants.join(",")}`;
-}
-
 export function familyStyle({
   family,
   selectedVariant,
@@ -63,17 +70,17 @@ export function familyStyle({
   previewName: string;
   subset: string;
 }): string {
-  let style = `font-family: '${family}';`;
+  const styleParts = [`font-family: '${family}'`];
   if (rtlSubsets.includes(subset) && family !== previewName) {
-    style += "direction: rtl;";
+    styleParts.push("direction: rtl");
   }
   if (selectedVariant.includes("italic")) {
-    style += "font-style: italic;";
+    styleParts.push("font-style: italic");
   }
   // get variant number from selectedVariant
   const variantNumber = selectedVariant.match(/\d+/g);
   if (variantNumber && variantNumber[0]) {
-    style += `font-weight: ${variantNumber[0]};`;
+    styleParts.push(`font-weight: ${variantNumber[0]}`);
   }
-  return style;
+  return `${styleParts.join(";")};`;
 }

components/font-item.ts

@@ -35,7 +35,8 @@ class FontItem extends HTMLLIElement {
       (!subsets.includes("latin") || family.startsWith("Noto")) &&
       sampleSubsets[subsets[0] as keyof SampleSubsets]
     ) {
-      this.subset = subsets[0];
+      const [subset] = subsets;
+      this.subset = subset;
       return sampleSubsets[subsets[0] as keyof SampleSubsets];
     }
     return family;

components/font-list.ts

@@ -1,10 +1,6 @@
 import { setAttributes } from "./set-attributes";
 
 class FontList extends HTMLUListElement {
-  public constructor() {
-    super();
-  }
-
   public get selectedVariant(): string {
     return this.getAttribute("selected-variant");
   }

components/main-app.ts

@@ -1,6 +1,7 @@
 import customEvent from "./custom-event";
 import filter from "./filter";
 import generatedData from "../data/data.json";
+
 export type GeneratedData = typeof generatedData;
 
 type SelectTypes =
@@ -13,19 +14,22 @@ type SelectTypes =
 class MainApp extends HTMLElement {
   private paginationButtons: HTMLElement =
     this.querySelector("pagination-buttons");
+
   private searchStatus: HTMLElement = this.querySelector("search-status");
+
   private sortByElm: HTMLElement = this.querySelector("sort-by");
+
   private fontList: HTMLUListElement = this.querySelector("ul[is=font-list]");
+
   private content: HTMLElement = this.querySelector("#content");
+
   private selectedSearchElm: HTMLInputElement =
     this.querySelector("#selectedSearch");
 
-  public get pageSize(): number {
-    return 10;
-  }
+  public pageSize = 10;
 
   public get currentPage(): number {
-    return Number.parseInt(this.getAttribute("current-page"));
+    return Number.parseInt(this.getAttribute("current-page"), 10);
   }
 
   private set currentPage(value: number) {
@@ -48,7 +52,7 @@ class MainApp extends HTMLElement {
   }
 
   private get resultsLength(): number {
-    return Number.parseInt(this.getAttribute("results-length"));
+    return Number.parseInt(this.getAttribute("results-length"), 10);
   }
 
   public get selectedCategory(): string {
@@ -156,28 +160,28 @@ class MainApp extends HTMLElement {
     else this.removeAllFilters();
   }
 
-  private removeSingleFilter(filter: string): void {
-    switch (filter) {
+  private removeSingleFilter(currentFilter: string): void {
+    switch (currentFilter) {
       case "selectedSearch": {
         this.removeSearch();
         break;
       }
       case "selectedVariable": {
-        this.removeCheckbox();
+        MainApp.removeCheckbox();
         break;
       }
       default: {
-        this.removeSelect(filter);
+        MainApp.removeSelect(currentFilter);
       }
     }
   }
 
   private removeAllFilters(): void {
-    if (this.selectedCategory) this.removeSelect("selectedCategory");
-    if (this.selectedSubset) this.removeSelect("selectedSubset");
-    if (this.selectedVariant) this.removeSelect("selectedVariant");
-    if (this.selectedVariable) this.removeCheckbox();
-    if (this.selectedTag) this.removeSelect("selectedTag");
+    if (this.selectedCategory) MainApp.removeSelect("selectedCategory");
+    if (this.selectedSubset) MainApp.removeSelect("selectedSubset");
+    if (this.selectedVariant) MainApp.removeSelect("selectedVariant");
+    if (this.selectedVariable) MainApp.removeCheckbox();
+    if (this.selectedTag) MainApp.removeSelect("selectedTag");
     if (this.selectedSearch) this.removeSearch();
   }
 
@@ -186,15 +190,15 @@ class MainApp extends HTMLElement {
     (this.selectedSearchElm as HTMLInputElement).value = "";
   }
 
-  private removeSelect(value: string): void {
+  private static removeSelect(value: string): void {
     window.dispatchEvent(
       customEvent("remove-select", {
         value,
       }),
     );
   }
 
-  private removeCheckbox(): void {
+  private static removeCheckbox(): void {
     window.dispatchEvent(customEvent("remove-checkbox"));
   }
 

components/pagination-buttons.ts

@@ -3,14 +3,16 @@ export type ButtonType = MouseEvent & { target: HTMLButtonElement };
 class PaginationButtons extends HTMLElement {
   private mainApp = document.querySelector("main-app");
 
+  private pageSize = 10;
+
   public constructor() {
     super();
     this.handlePage = this.handlePage.bind(this);
     this.handleInitialValue();
   }
 
   public get currentPage(): number {
-    return Number.parseInt(this.getAttribute("current-page"));
+    return Number.parseInt(this.getAttribute("current-page"), 10);
   }
 
   private set currentPage(value: number) {
@@ -22,11 +24,7 @@ class PaginationButtons extends HTMLElement {
   }
 
   private get resultsLength(): number {
-    return Number.parseInt(this.getAttribute("results-length"));
-  }
-
-  private get pageSize(): number {
-    return 10;
+    return Number.parseInt(this.getAttribute("results-length"), 10);
   }
 
   private get totalPages(): number {
@@ -75,12 +73,11 @@ class PaginationButtons extends HTMLElement {
       event === "next-page" &&
       this.currentPage * this.pageSize < this.resultsLength
     ) {
-      this.currentPage++;
+      this.currentPage += 1;
       return;
     }
     if (event === "previous-page" && this.currentPage > 1) {
-      this.currentPage--;
-      return;
+      this.currentPage -= 1;
     }
   }
 
@@ -122,7 +119,7 @@ class PaginationButtons extends HTMLElement {
     const urlParameters = new URLSearchParams(window.location.search);
     const initialValue = urlParameters.get("page");
     if (initialValue) {
-      const parsedValue = Number.parseInt(initialValue);
+      const parsedValue = Number.parseInt(initialValue, 10);
       if (Number.isNaN(parsedValue)) {
         this.currentPage = 1;
         return;

components/search-status.ts

@@ -1,10 +1,6 @@
 import iconClose from "../svg/close.svg";
 
 class SearchStatus extends HTMLElement {
-  public constructor() {
-    super();
-  }
-
   private get resultsLength(): string {
     return this.getAttribute("results-length");
   }
@@ -60,7 +56,7 @@ class SearchStatus extends HTMLElement {
     if (hasSelectedFilters) {
       elm.push(
         this.selectedFilters
-          .map((filter) => this.renderFilter(filter))
+          .map((filter): string => SearchStatus.renderFilter(filter))
           .join(""),
         `<button is="clear-button" aria-label="remove all filters" class="btn btn-clear">Clear</button>`,
       );
@@ -69,7 +65,7 @@ class SearchStatus extends HTMLElement {
     this.innerHTML = `${elm.join("\n")}`;
   }
 
-  private renderFilter({
+  private static renderFilter({
     label,
     value,
     id,

components/set-attributes.ts

@@ -4,7 +4,7 @@ export function setAttributes(
     [x: string]: string;
   },
 ): void {
-  for (const key in attributes) {
+  for (const key of Object.keys(attributes)) {
     if (attributes[key] !== undefined && attributes[key] !== null) {
       element.setAttribute(key, attributes[key]);
     }

components/sort-by.ts

@@ -19,7 +19,7 @@ class SortBy extends HTMLElement {
   }
 
   private get resultsLength(): number {
-    return Number.parseInt(this.getAttribute("results-length"));
+    return Number.parseInt(this.getAttribute("results-length"), 10);
   }
 
   public render(): void {