chore(code-quality): upgrade linter and implement stricter rules (#215)

* update linter and tsconfig

* update tsconfig to include tests

* update scripts

* hard ignore tests by linter

Author: mimshins

.prettierrc

@@ -0,0 +1,15 @@
+{
+  "bracketSpacing": true,
+  "printWidth": 80,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "arrowParens": "avoid",
+  "bracketSameLine": false,
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "css",
+  "jsxSingleQuote": false,
+  "singleAttributePerLine": true,
+  "plugins": ["prettier-plugin-organize-imports"]
+}

.prettierrc.json

@@ -1,17 +1,17 @@
-import {defineConfig} from 'vitepress';
+import { defineConfig } from "vitepress";
+import nav from "./nav";
 import sidebar from "./sidebar";
 import socialLinks from "./socialLinks";
-import nav from "./nav";
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
-  title: 'Tapsi components',
-  description: 'A set of components based on Tapsi design system.',
+  title: "Tapsi components",
+  description: "A set of components based on Tapsi design system.",
   base: "/web-components/",
-  vite:{},
+  vite: {},
   themeConfig: {
     sidebar,
     socialLinks,
-    nav
+    nav,
   },
 });

docs/.vitepress/config.ts

@@ -2,21 +2,25 @@ import { DefaultTheme } from "vitepress";
 
 export default [
   {
-    text: 'Getting Started',
-    link: '/dev/getting-started',
+    text: "Getting Started",
+    link: "/dev/getting-started",
   },
   {
-    text: 'Components',
-    link: '/dev/components/tap-avatar',
+    text: "Components",
+    link: "/dev/components/tap-avatar",
   },
   {
-    text: 'Design Guidelines',
-    link: '/design/guidelines',
+    text: "Design Guidelines",
+    link: "/design/guidelines",
   },
   {
-    text: 'Related Links',
+    text: "Related Links",
     items: [
-      {text: 'Icon Library', link: 'https://tap30.github.io/icons', target: '_blank'},
+      {
+        text: "Icon Library",
+        link: "https://tap30.github.io/icons",
+        target: "_blank",
+      },
     ],
-  }
-] as DefaultTheme.NavItem[]
+  },
+] as DefaultTheme.NavItem[];

docs/.vitepress/nav.ts

@@ -1,84 +1,90 @@
-import fs from 'fs';
-import { DefaultTheme } from "vitepress";
 import type { Package } from "custom-elements-manifest";
+import fs from "fs";
+import { DefaultTheme } from "vitepress";
 
-const getComponentsDevItems = ()  => {
-  const file = fs.readFileSync('dist/custom-elements.json');
+const getComponentsDevItems = () => {
+  const file = fs.readFileSync("dist/custom-elements.json");
   const manifest = JSON.parse(file.toString()) as Package;
   return manifest.modules
-    .filter((module) => !!module.declarations?.length)
-    .map((module) => {
+    .filter(module => !!module.declarations?.length)
+    .map(module => {
       if (!module.exports)
         throw new Error(`Module has no export: ${module.path}`);
 
       const components = module.exports.filter(
-        (exp) => exp.kind === 'custom-element-definition',
+        exp => exp.kind === "custom-element-definition",
       );
 
       // For now, we assume we have only one custom element per module
       const component = components[0];
 
-    return {
-      link: '/components/' + component.name,
-      text: component.name,
-    };
-  });
-}
+      return {
+        link: "/components/" + component.name,
+        text: component.name,
+      };
+    });
+};
 
 const getSidebarDevContents = (): DefaultTheme.Sidebar => {
   return [
-    {text: 'Getting Started', link: '/getting-started'},
+    { text: "Getting Started", link: "/getting-started" },
     {
-      text: 'Design System Guidelines',
-      base: '/design/',
-      link: '/guidelines'
+      text: "Design System Guidelines",
+      base: "/design/",
+      link: "/guidelines",
     },
     {
-      text: 'Components',
+      text: "Components",
       collapsed: false,
       items: getComponentsDevItems(),
     },
     {
-      text: 'API References',
+      text: "API References",
       collapsed: false,
       items: [
-        {text: 'CSS Parts', link: '/references/css-parts'},
+        { text: "CSS Parts", link: "/references/css-parts" },
         {
-          text: 'Design Tokens', items: [
-            {text: 'Colors', link: '/references/color-tokens'},
-            {text: 'Radius', link: '/references/radius-tokens'},
-            {text: 'Spacing', link: '/references/spacing-tokens'},
-            {text: 'Stroke', link: '/references/stroke-tokens'},
-            {text: 'Typography', link: '/references/typography-tokens'},
-            {text: 'Components', link: '/references/components-tokens'},
-          ]
+          text: "Design Tokens",
+          items: [
+            { text: "Colors", link: "/references/color-tokens" },
+            { text: "Radius", link: "/references/radius-tokens" },
+            { text: "Spacing", link: "/references/spacing-tokens" },
+            { text: "Stroke", link: "/references/stroke-tokens" },
+            { text: "Typography", link: "/references/typography-tokens" },
+            { text: "Components", link: "/references/components-tokens" },
+          ],
         },
       ],
     },
   ];
-}
+};
 
-const getComponentsDesignItems = ()  => {
-  const componentGuidelinesBasePath = 'docs/design/components'
-  const files = fs.readdirSync(componentGuidelinesBasePath)
-    .filter((file) => file.endsWith('.md'))
-    .map((file) => file.replace('.md', ''));
-  return files.map((file) => {
+const getComponentsDesignItems = () => {
+  const componentGuidelinesBasePath = "docs/design/components";
+  const files = fs
+    .readdirSync(componentGuidelinesBasePath)
+    .filter(file => file.endsWith(".md"))
+    .map(file => file.replace(".md", ""));
+  return files.map(file => {
     return {
-      link: 'components/' + file,
+      link: "components/" + file,
       text: file,
     };
   });
 };
 
 const getSidebarDesignContents = (): DefaultTheme.Sidebar => {
   return [
-    {text: 'Introduction', link: '/guidelines'},
-    {text: 'Component Guidelines', base: '/design/', items: getComponentsDesignItems()}
+    { text: "Introduction", link: "/guidelines" },
+    {
+      text: "Component Guidelines",
+      base: "/design/",
+      items: getComponentsDesignItems(),
+    },
   ];
-}
+};
 
 export default {
-  '/dev/': { base: '/dev/', items: getSidebarDevContents() },
-  '/design/': { base: '/design/', items: getSidebarDesignContents() },
-} as DefaultTheme.Sidebar
+  "/dev/": { base: "/dev/", items: getSidebarDevContents() },
+  "/design/": { base: "/design/", items: getSidebarDesignContents() },
+} as DefaultTheme.Sidebar;

docs/.vitepress/sidebar.ts

@@ -1,6 +1,6 @@
 import { DefaultTheme } from "vitepress";
 
 export default [
-  { icon: 'github', link: 'https://github.com/Tap30/web-components' },
-  { icon: 'linkedin', link: 'https://www.linkedin.com/company/tapsi' },
-] as DefaultTheme.SocialLink[]
+  { icon: "github", link: "https://github.com/Tap30/web-components" },
+  { icon: "linkedin", link: "https://www.linkedin.com/company/tapsi" },
+] as DefaultTheme.SocialLink[];

docs/.vitepress/socialLinks.ts

@@ -1,4 +1,4 @@
-import {css} from "lit";
+import { css } from "lit";
 
 export default css`
   :host {

docs/components/doc-guideline-card/doc-guideline-card.style.ts

@@ -1,48 +1,54 @@
-import {html, LitElement, nothing} from 'lit';
-import {property} from 'lit/decorators.js';
+import { html, LitElement, nothing } from "lit";
+import { property } from "lit/decorators.js";
 
 export class GuidelineCard extends LitElement {
-  @property({ attribute: 'image-url' }) imageUrl = '';
+  @property({ attribute: "image-url" })
+  public imageUrl? = "";
 
-  @property() variant?: 'do' | 'dont' | 'caution';
-
-  private renderBadge () {
+  @property()
+  public variant?: "do" | "dont" | "caution";
 
+  private _renderBadge() {
     const badgeConfig = {
       do: {
-        title: 'Do',
-        class: 'do'
+        title: "Do",
+        class: "do",
       },
       dont: {
-        title: 'Don\'t',
-        class: 'dont'
+        title: "Don't",
+        class: "dont",
       },
       caution: {
-        title: 'Caution',
-        class: 'caution'
+        title: "Caution",
+        class: "caution",
       },
-    }
-
+    };
 
     if (this.variant && Object.keys(badgeConfig).includes(this.variant)) {
       const selectedBadge = badgeConfig[this.variant];
-      return html`<div class="badge ${selectedBadge.class}">${selectedBadge.title}</div>`
+
+      return html`<div class="badge ${selectedBadge.class}">
+        ${selectedBadge.title}
+      </div>`;
     }
-    return nothing
+
+    return nothing;
   }
 
-  render() {
+  protected override render() {
     return html`
-      <div part="guideline-card" class="guideline-card ">
+      <div
+        part="guideline-card"
+        class="guideline-card "
+      >
         <div class="image">
           <slot name="card-image"></slot>
         </div>
-        ${this.renderBadge()}
+        ${this._renderBadge()}
         <div class="content">
           <slot></slot>
         </div>
       </div>
     `;
   }
 }
-

docs/components/doc-guideline-card/doc-guideline-card.ts

@@ -1,14 +1,14 @@
-import { customElement } from 'lit/decorators.js';
-import styles from './doc-guideline-card.style';
-import {GuidelineCard} from "./doc-guideline-card";
+import { customElement } from "lit/decorators.js";
+import { GuidelineCard } from "./doc-guideline-card";
+import styles from "./doc-guideline-card.style";
 
-@customElement('doc-guideline-card')
+@customElement("doc-guideline-card")
 export class DocGuidelineCard extends GuidelineCard {
-  static readonly styles = [styles];
+  public static override readonly styles = [styles];
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    'doc-guideline-card': DocGuidelineCard;
+    "doc-guideline-card": DocGuidelineCard;
   }
 }

docs/components/doc-guideline-card/index.ts

@@ -1,4 +1,4 @@
-import {css} from "lit";
+import { css } from "lit";
 
 export default css`
   :host {
@@ -33,7 +33,6 @@ export default css`
     width: 100%;
   }
 
-
   @media (max-width: 1100px) {
     .guideline-section {
       flex-direction: column;
@@ -49,4 +48,4 @@ export default css`
       margin: auto;
     }
   }
-`
+`;

docs/components/doc-guideline-section/doc-guideline-section.style.ts

@@ -1,18 +1,22 @@
-import {html, LitElement} from 'lit';
-import {property} from 'lit/decorators.js';
+import { html, LitElement } from "lit";
+import { property } from "lit/decorators.js";
 
 export class GuidelineSection extends LitElement {
-  @property({ type: Boolean }) reverse = false;
+  @property({ type: Boolean })
+  public reverse = false;
 
-  render() {
+  protected override render() {
     return html`
-      <div part="guideline-section" class="guideline-section ${this.reverse ? 'reverse' : ''}">
+      <div
+        part="guideline-section"
+        class="guideline-section ${this.reverse ? "reverse" : ""}"
+      >
         <div class="content">
           <slot></slot>
         </div>
-          <div class="image">
-            <slot name="image"></slot>
-          </div>
+        <div class="image">
+          <slot name="image"></slot>
+        </div>
       </div>
     `;
   }

docs/components/doc-guideline-section/doc-guideline-section.ts

@@ -1,14 +1,14 @@
-import { customElement } from 'lit/decorators.js';
-import {GuidelineSection} from "./doc-guideline-section.js";
-import styles from './doc-guideline-section.style.js';
+import { customElement } from "lit/decorators.js";
+import { GuidelineSection } from "./doc-guideline-section.js";
+import styles from "./doc-guideline-section.style.js";
 
-@customElement('doc-guideline-section')
+@customElement("doc-guideline-section")
 export class DocGuidelineSection extends GuidelineSection {
-  static readonly styles = [styles];
+  public static override readonly styles = [styles];
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    'doc-guideline-section': DocGuidelineSection;
+    "doc-guideline-section": DocGuidelineSection;
   }
 }