feat: add experimental skyux-eslint package for custom ESLint rules (…

…#2852)
blackbaud · Oct 29, 2024 · 659d628 · 659d628
1 parent 26f9841
commit 659d628
Show file tree

Hide file tree

Showing 92 changed files with 3,102 additions and 1,418 deletions.
diff --git a/.cspell.json b/.cspell.json
@@ -8,6 +8,8 @@
     "novalidate",
     "pillarbox",
     "tabindex",
+    "Tmpl",
+    "TSES",
     "xlink"
   ]
 }
diff --git a/.github/workflows/validate-pr.yml b/.github/workflows/validate-pr.yml
@@ -90,4 +90,5 @@ jobs:
             sdk/e2e-schematics
             sdk/eslint-config
             sdk/prettier-schematics
+            sdk/skyux-eslint
             sdk/testing
diff --git a/.prettierignore b/.prettierignore
@@ -3,6 +3,8 @@
 /.nyc_output
 /coverage
 /dist
+/libs/sdk/skyux-eslint/**/*.md
+/libs/sdk/skyux-eslint/**/__deprecations.json
 /node_modules
 /temp
 /tmp
@@ -18,4 +20,4 @@ CHANGELOG.md
 
 /.nx/cache
 
-/.nx/workspace-data
+/.nx/workspace-data
diff --git a/.skyuxdev.json b/.skyuxdev.json
@@ -9,6 +9,7 @@
     "packages",
     "prettier-schematics",
     "router",
+    "skyux-eslint",
     "storybook",
     "testing"
   ],

diff --git a/apps/code-examples/eslint.config.js b/apps/code-examples/eslint.config.js
@@ -1,44 +1,24 @@
-const { FlatCompat } = require('@eslint/eslintrc');
-const js = require('@eslint/js');
-const path = require('node:path');
+// @ts-check
+const tsEslint = require('typescript-eslint');
+const skyux = require('../../libs/sdk/skyux-eslint/dev-transpiler.cjs');
 const config = require('../../eslint-apps.config');
 
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-});
-
-module.exports = [
+module.exports = tsEslint.config(
   ...config,
-  ...compat
-    .config({
-      extends: ['../../libs/sdk/eslint-config/recommended'],
-    })
-    .map((config) => ({
-      files: ['**/src/app/code-examples/**/*.ts'],
-      languageOptions: {
-        ...config.languageOptions,
-        parserOptions: {
-          project: [path.join(__dirname, 'tsconfig.editor.json')],
-          tsconfigRootDir: '.',
-        },
-      },
-      linterOptions: { reportUnusedDisableDirectives: true },
-      rules: {
-        ...config.rules,
-        'no-alert': 'warn',
-        'no-console': 'warn',
-        'no-restricted-imports': [
-          'error',
-          {
-            patterns: [
-              {
-                group: ['../*'],
-                message: 'Make sure to import from local files only.',
-              },
-            ],
-          },
-        ],
-      },
-    })),
-];
+  {
+    files: ['**/src/app/code-examples/**/*.ts'],
+    extends: [...skyux.configs.tsAll],
+    rules: {
+      '@typescript-eslint/no-deprecated': 'warn',
+      'no-alert': 'warn',
+      'no-console': 'warn',
+    },
+  },
+  {
+    files: ['**/src/app/code-examples/**/*.html'],
+    extends: [...skyux.configs.templateAll],
+    rules: {
+      'skyux-eslint-template/no-deprecated-directives': 'warn',
+    },
+  },
+);
diff --git a/...-examples/src/app/code-examples/action-bars/summary-action-bar/modal/modal.component.html b/...-examples/src/app/code-examples/action-bars/summary-action-bar/modal/modal.component.html
@@ -1,5 +1,4 @@
-<sky-modal>
-  <sky-modal-header> Modal with summary action bar </sky-modal-header>
+<sky-modal headingText="Modal with summary action bar">
   <sky-modal-content> Hello world! </sky-modal-content>
   <sky-modal-footer>
     <sky-summary-action-bar>

diff --git a/...de-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/edit-modal.component.html b/...de-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/edit-modal.component.html
@@ -1,5 +1,4 @@
-<sky-modal>
-  <sky-modal-header> Edit employee information </sky-modal-header>
+<sky-modal headingText="Edit employee information">
   <sky-modal-content>
     <sky-ag-grid-wrapper>
       <ag-grid-angular

diff --git a/...rc/app/code-examples/ag-grid/data-entry-grid/data-manager-added/edit-modal.component.html b/...rc/app/code-examples/ag-grid/data-entry-grid/data-manager-added/edit-modal.component.html
@@ -1,5 +1,4 @@
-<sky-modal>
-  <sky-modal-header> Edit employee information </sky-modal-header>
+<sky-modal headingText="Edit employee information">
   <sky-modal-content>
     <sky-ag-grid-wrapper>
       <ag-grid-angular

diff --git a/.../app/code-examples/ag-grid/data-entry-grid/data-manager-added/filter-modal.component.html b/.../app/code-examples/ag-grid/data-entry-grid/data-manager-added/filter-modal.component.html
@@ -1,5 +1,4 @@
-<sky-modal>
-  <sky-modal-header> Filter employees </sky-modal-header>
+<sky-modal headingText="Filter employees">
   <sky-modal-content>
     <label [for]="jobTitleInput.id">Job Title</label>
     <select
@@ -13,9 +12,7 @@
       <option value="Software Engineer">Software Engineer</option>
     </select>
     <div class="sky-margin-stacked-lg">
-      <sky-checkbox [(ngModel)]="hideSales">
-        <sky-checkbox-label> Hide Sales employees </sky-checkbox-label>
-      </sky-checkbox>
+      <sky-checkbox labelText="Hide Sales employees" [(ngModel)]="hideSales" />
     </div>
   </sky-modal-content>
   <sky-modal-footer>

diff --git a/...mples/src/app/code-examples/ag-grid/data-entry-grid/inline-help/edit-modal.component.html b/...mples/src/app/code-examples/ag-grid/data-entry-grid/inline-help/edit-modal.component.html
@@ -1,5 +1,4 @@
-<sky-modal>
-  <sky-modal-header> Edit employee information </sky-modal-header>
+<sky-modal headingText="Edit employee information">
   <sky-modal-content>
     <sky-ag-grid-wrapper>
       <ag-grid-angular

diff --git a/...ples/src/app/code-examples/ag-grid/data-entry-grid/inline-help/inline-help.component.html b/...ples/src/app/code-examples/ag-grid/data-entry-grid/inline-help/inline-help.component.html
@@ -1,5 +1,5 @@
 <sky-help-inline
   class="sky-control-help"
-  ariaLabel="Information about {{ displayName }}"
+  [ariaLabel]="'Information about ' + displayName"
   (actionClick)="onHelpClick()"
 />
diff --git a/.../app/code-examples/ag-grid/data-grid/data-manager-multiselect/filter-modal.component.html b/.../app/code-examples/ag-grid/data-grid/data-manager-multiselect/filter-modal.component.html
@@ -1,5 +1,4 @@
-<sky-modal>
-  <sky-modal-header> Filter employees </sky-modal-header>
+<sky-modal headingText="Filter employees">
   <sky-modal-content>
     <label [for]="jobTitleInput.id">Job Title</label>
     <select
@@ -13,9 +12,7 @@
       <option value="Software Engineer">Software Engineer</option>
     </select>
     <div class="sky-margin-stacked-lg">
-      <sky-checkbox [(ngModel)]="hideSales">
-        <sky-checkbox-label> Hide Sales employees </sky-checkbox-label>
-      </sky-checkbox>
+      <sky-checkbox labelText="Hide Sales employees" [(ngModel)]="hideSales" />
     </div>
   </sky-modal-content>
   <sky-modal-footer>

diff --git a/...examples/src/app/code-examples/ag-grid/data-grid/data-manager/filter-modal.component.html b/...examples/src/app/code-examples/ag-grid/data-grid/data-manager/filter-modal.component.html
@@ -1,5 +1,4 @@
-<sky-modal>
-  <sky-modal-header> Filter employees </sky-modal-header>
+<sky-modal headingText="Filter employees">
   <sky-modal-content>
     <label [for]="jobTitleInput.id">Job Title</label>
     <select
@@ -13,9 +12,7 @@
       <option value="Software Engineer">Software Engineer</option>
     </select>
     <div class="sky-margin-stacked-lg">
-      <sky-checkbox [(ngModel)]="hideSales">
-        <sky-checkbox-label> Hide Sales employees </sky-checkbox-label>
-      </sky-checkbox>
+      <sky-checkbox labelText="Hide Sales employees" [(ngModel)]="hideSales" />
     </div>
   </sky-modal-content>
   <sky-modal-footer>

diff --git a/apps/code-examples/src/app/code-examples/core/id/demo.component.html b/apps/code-examples/src/app/code-examples/core/id/demo.component.html
@@ -1,11 +1 @@
-<sky-input-box>
-  <label class="sky-control-label" [for]="input1.id"> Label </label>
-  <input #input1="skyId" class="sky-form-control" type="text" skyId />
-</sky-input-box>
-
-<sky-input-box>
-  <label class="sky-control-label" [for]="input2.id"> Label </label>
-  <select #input2="skyId" class="sky-form-control" skyId>
-    <option>Value</option>
-  </select>
-</sky-input-box>
+<div #myDiv="skyId" skyId>This DIV's id is '{{ myDiv.id }}'</div>
diff --git a/apps/code-examples/src/app/code-examples/core/id/demo.component.ts b/apps/code-examples/src/app/code-examples/core/id/demo.component.ts
@@ -1,11 +1,10 @@
 import { Component } from '@angular/core';
 import { SkyIdModule } from '@skyux/core';
-import { SkyInputBoxModule } from '@skyux/forms';
 
 @Component({
   standalone: true,
   selector: 'app-demo',
   templateUrl: './demo.component.html',
-  imports: [SkyIdModule, SkyInputBoxModule],
+  imports: [SkyIdModule],
 })
 export class DemoComponent {}
diff --git a/...xamples/src/app/code-examples/data-manager/data-manager/basic/filter-modal.component.html b/...xamples/src/app/code-examples/data-manager/data-manager/basic/filter-modal.component.html
@@ -1,5 +1,4 @@
-<sky-modal>
-  <sky-modal-header> Filter your fruit </sky-modal-header>
+<sky-modal headingText="Filter your fruit">
   <sky-modal-content>
     <sky-input-box labelText="Fruit type" stacked="true">
       <select class="sky-form-control" [(ngModel)]="fruitType">
@@ -8,9 +7,7 @@
         <option value="berry">Berry</option>
       </select>
     </sky-input-box>
-    <sky-checkbox [(ngModel)]="hideOrange">
-      <sky-checkbox-label> Hide orange fruits </sky-checkbox-label>
-    </sky-checkbox>
+    <sky-checkbox labelText="Hide orange fruits" [(ngModel)]="hideOrange" />
   </sky-modal-content>
   <sky-modal-footer>
     <button

diff --git a/apps/code-examples/src/app/code-examples/forms/character-count/demo.component.html b/apps/code-examples/src/app/code-examples/forms/character-count/demo.component.html
@@ -1,39 +1,33 @@
-<div style="width: 50%">
-  <form [formGroup]="formGroup">
-    <sky-input-box stacked="true">
-      <label class="sky-control-label" [for]="descriptionInput.id">
-        Transaction description
-      </label>
+<form [formGroup]="formGroup">
+  <sky-input-box stacked="true" labelText="Transaction description">
+    <sky-character-counter-indicator
+      #descriptionIndicator
+      data-sky-id="description-indicator"
+    />
 
-      <sky-character-counter-indicator
-        #descriptionIndicator
-        data-sky-id="description-indicator"
-      />
+    <input
+      #descriptionInput="skyId"
+      class="sky-form-control description-input"
+      formControlName="description"
+      skyCharacterCounter
+      skyId
+      type="text"
+      [attr.aria-describedby]="characterCountError.id"
+      [skyCharacterCounterIndicator]="descriptionIndicator"
+      [skyCharacterCounterLimit]="maxDescriptionCharacterCount"
+    />
 
-      <input
-        #descriptionInput="skyId"
-        class="sky-form-control description-input"
-        formControlName="description"
-        skyCharacterCounter
-        skyId
-        type="text"
-        [attr.aria-describedby]="characterCountError.id"
-        [skyCharacterCounterIndicator]="descriptionIndicator"
-        [skyCharacterCounterLimit]="maxDescriptionCharacterCount"
-      />
-
-      <span #characterCountError="skyId" class="sky-error-indicator" skyId>
-        @if (description.errors?.['skyCharacterCounter']) {
-          <sky-status-indicator
-            data-sky-id="description-status-indicator-over-limit"
-            descriptionType="error"
-            indicatorType="danger"
-          >
-            Limit Transaction description to
-            {{ maxDescriptionCharacterCount }} characters.
-          </sky-status-indicator>
-        }
-      </span>
-    </sky-input-box>
-  </form>
-</div>
+    <span #characterCountError="skyId" class="sky-error-indicator" skyId>
+      @if (description.errors?.['skyCharacterCounter']) {
+        <sky-status-indicator
+          data-sky-id="description-status-indicator-over-limit"
+          descriptionType="error"
+          indicatorType="danger"
+        >
+          Limit Transaction description to
+          {{ maxDescriptionCharacterCount }} characters.
+        </sky-status-indicator>
+      }
+    </span>
+  </sky-input-box>
+</form>
diff --git a/apps/code-examples/src/app/code-examples/forms/toggle-switch/inline-help/demo.component.html b/apps/code-examples/src/app/code-examples/forms/toggle-switch/inline-help/demo.component.html
@@ -2,10 +2,9 @@
   <div class="sky-font-heading-2 sky-margin-stacked-lg">Annual fundraiser</div>
   <div class="sky-margin-stacked-lg">
     <sky-toggle-switch
-      ariaLabel="Activate annual fundraiser"
       formControlName="controlToggle"
+      labelText="Activate annual fundraiser"
     >
-      <sky-toggle-switch-label> Active </sky-toggle-switch-label>
       <sky-help-inline
         class="sky-control-help"
         ariaLabel="Information about top toggle switch"
@@ -15,10 +14,9 @@
   </div>
   <div class="sky-margin-stacked-lg">
     <sky-toggle-switch
-      ariaLabel="Annual fundraiser is accepting donations"
       formControlName="dynamicToggle"
+      labelText="Annual fundraiser is accepting donations"
     >
-      <sky-toggle-switch-label> Accepting donations </sky-toggle-switch-label>
       <sky-help-inline
         class="sky-control-help"
         ariaLabel="Information about bottom toggle switch"

diff --git a/apps/code-examples/src/app/code-examples/indicators/text-highlight/basic/demo.component.html b/apps/code-examples/src/app/code-examples/indicators/text-highlight/basic/demo.component.html
@@ -5,9 +5,10 @@
 </div>
 
 <div class="sky-margin-stacked-lg">
-  <sky-checkbox [(ngModel)]="showAdditionalContent">
-    <sky-checkbox-label> Display additional content </sky-checkbox-label>
-  </sky-checkbox>
+  <sky-checkbox
+    labelText="Display additional content"
+    [(ngModel)]="showAdditionalContent"
+  />
 </div>
 
 <div [skyHighlight]="searchTerm">

diff --git a/apps/code-examples/src/app/code-examples/layout/card/basic/demo.component.html b/apps/code-examples/src/app/code-examples/layout/card/basic/demo.component.html
@@ -48,23 +48,15 @@
 
 <ul class="sky-list-unstyled">
   <li>
-    <sky-checkbox [(ngModel)]="showTitle">
-      <sky-checkbox-label>Show title</sky-checkbox-label>
-    </sky-checkbox>
+    <sky-checkbox labelText="Show title" [(ngModel)]="showTitle" />
   </li>
   <li>
-    <sky-checkbox [(ngModel)]="showContent">
-      <sky-checkbox-label>Show content</sky-checkbox-label>
-    </sky-checkbox>
+    <sky-checkbox labelText="Show content" [(ngModel)]="showContent" />
   </li>
   <li>
-    <sky-checkbox [(ngModel)]="showAction">
-      <sky-checkbox-label>Show action</sky-checkbox-label>
-    </sky-checkbox>
+    <sky-checkbox labelText="Show action" [(ngModel)]="showAction" />
   </li>
   <li>
-    <sky-checkbox [(ngModel)]="showCheckbox">
-      <sky-checkbox-label>Show checkbox</sky-checkbox-label>
-    </sky-checkbox>
+    <sky-checkbox labelText="Show checkbox" [(ngModel)]="showCheckbox" />
   </li>
 </ul>