Run template tag codemod, update types (#2327)

* renamed JS/TS to GJS/GTS

* renamed HBS to GJS/GTS

* applied codemod

* add codemod to ignore-revs

* Run prettier

* Fix some lint

* Try to fix some imports

* Update tsconfig.json

* Convert gts imports to ts

* Add ember-route-template addon

* Update contrast-checker-test.gjs

* Get tests running

* Fix some types

* Fix sound playing

* Fix some types

* Update color-utils.ts

* Remove loose mode declarations

* Update import sorting

* Keep fixing types

* Run prettier

* Update lint.yml

* More types

* Make glint happy

* Update kuler-palette-row.gts

Author: RobbieTheWagner

.git-blame-ignore-revs

@@ -0,0 +1 @@
+81b7041f27d5c5590d41ae634a1d2ba8854879f2

.github/workflows/lint.yml

@@ -8,7 +8,7 @@ on:
 
 jobs:
   lint:
-    name: JS and HBS
+    name: JS, HBS, Prettier, Types
     runs-on: ubuntu-22.04
     timeout-minutes: 10
     steps:
@@ -23,3 +23,7 @@ jobs:
         run: pnpm lint:js
       - name: Lint HBS
         run: pnpm lint:hbs
+      - name: Lint Prettier
+        run: pnpm lint:format
+      - name: Lint Types
+        run: pnpm lint:types

.prettierrc.js

@@ -33,18 +33,14 @@ const importOrder = [
   swachInternals,
 ];
 const importOrderParserPlugins = ['typescript', 'decorators-legacy'];
-const importOrderSeparation = true;
-const importOrderSortSpecifiers = true;
 
 module.exports = {
   plugins: [
     'prettier-plugin-ember-template-tag',
-    '@trivago/prettier-plugin-sort-imports',
+    '@ianvs/prettier-plugin-sort-imports',
   ],
   importOrder,
   importOrderParserPlugins,
-  importOrderSeparation,
-  importOrderSortSpecifiers,
   overrides: [
     {
       files: '*.{js,gjs,ts,gts,mjs,mts,cjs,cts}',

app/app.ts

@@ -1,11 +1,8 @@
 import Application from '@ember/application';
-
 import { InitSentryForEmber } from '@sentry/ember';
 import loadInitializers from 'ember-load-initializers';
 import Resolver from 'ember-resolver';
-
 import { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';
-
 import config from 'swach/config/environment';
 
 if (macroCondition(isDevelopingApp())) {

app/authenticators/cognito.js

@@ -1,5 +1,4 @@
 import { service } from '@ember/service';
-
 import CognitoAuthenticator from 'ember-cognito/authenticators/cognito';
 
 export default class CognitoAuthenticatorExtended extends CognitoAuthenticator {

app/components/about.ts app/components/about.gtsapp/components/about.ts renamed to app/components/about.gts

@@ -1,15 +1,43 @@
+import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import type Owner from '@ember/owner';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-
 import type { IpcRenderer } from 'electron';
 
 interface AboutSignature {
   Element: HTMLDivElement;
 }
 
 export default class AboutComponent extends Component<AboutSignature> {
+  <template>
+    <div class="text-xs">
+      <h6 class="font-semibold mt-4 text-heading text-sm">
+        About
+      </h6>
+
+      <p class="mt-2">
+        Version:
+        {{this.version}}
+      </p>
+
+      <p>
+        Copyright ©
+        {{this.copyrightYear}}
+        Ship Shape Consulting LLC.
+      </p>
+
+      <p>
+        All rights reserved.
+      </p>
+
+      <p>
+        <a href class="hover:text-alt-hover" {{on "click" this.visitWebsite}}>
+          https://swach.io/
+        </a>
+      </p>
+    </div>
+  </template>
   declare ipcRenderer: IpcRenderer;
 
   copyrightYear = new Date().getFullYear();
@@ -38,9 +66,3 @@ export default class AboutComponent extends Component<AboutSignature> {
     }
   }
 }
-
-declare module '@glint/environment-ember-loose/registry' {
-  export default interface Registry {
-    About: typeof AboutComponent;
-  }
-}

app/components/about.hbs

@@ -1,6 +1,9 @@
+import { hash } from '@ember/helper';
+import { on } from '@ember/modifier';
 import { action, set } from '@ember/object';
 import Component from '@glimmer/component';
-
+// @ts-expect-error TODO: fix this
+import OneWayInputMask from 'ember-inputmask/_app_/components/one-way-input-mask.js';
 import type { SelectedColorModel } from 'swach/components/rgb-input';
 import { rgbaToHex } from 'swach/data-models/color';
 
@@ -10,11 +13,37 @@ interface AlphaInputSignature {
     selectedColor: SelectedColorModel;
     update: (value: string | number) => void;
     updateColor: () => void;
-    value?: string;
+    value?: number;
   };
 }
 
 export default class AlphaInputComponent extends Component<AlphaInputSignature> {
+  <template>
+    <span class="input-prefix">
+      A:
+    </span>
+
+    <OneWayInputMask
+      ...attributes
+      maxlength={{4}}
+      @mask="9[.9[9]]"
+      @options={{hash
+        greedy=false
+        isComplete=this.isComplete
+        min=0
+        max=1
+        oncomplete=this.onComplete
+        onincomplete=this.onIncomplete
+        regex=this.alphaRegex
+        showMaskOnFocus=false
+        showMaskOnHover=false
+        unmaskAsNumber=false
+      }}
+      @update={{@update}}
+      @value={{@value}}
+      {{on "keypress" this.enterPress}}
+    />
+  </template>
   alphaRegex = /^[1]$|^[0]$|^(0\.[0-9]{1,2})$/;
 
   @action
@@ -63,9 +92,3 @@ export default class AlphaInputComponent extends Component<AlphaInputSignature>
     set(this.args.selectedColor, `_a`, this.args.selectedColor.a);
   }
 }
-
-declare module '@glint/environment-ember-loose/registry' {
-  export default interface Registry {
-    AlphaInput: typeof AlphaInputComponent;
-  }
-}

app/components/alpha-input.ts app/components/alpha-input.gtsapp/components/alpha-input.ts renamed to app/components/alpha-input.gts

@@ -1,12 +1,40 @@
 import { action, set } from '@ember/object';
-
-import type Sprite from 'ember-animated/-private/sprite';
+import TransitionContext from 'ember-animated/-private/transition-context';
+import AnimatedContainer from 'ember-animated/components/animated-container';
+import AnimatedEach from 'ember-animated/components/animated-each';
 import { easeOut } from 'ember-animated/easings/cosine';
 import move from 'ember-animated/motions/move';
 import { fadeOut } from 'ember-animated/motions/opacity';
+// @ts-expect-error TODO: fix this
+import DragSortItem from 'ember-drag-sort/components/drag-sort-item';
 import DragSortList from 'ember-drag-sort/components/drag-sort-list';
 
 export default class AnimatedDragSortList extends DragSortList {
+  <template>
+    {{!@glint-nocheck}}
+    <AnimatedContainer ...attributes>
+      {{#AnimatedEach @items duration=400 rules=this.rules as |item index|}}
+        <DragSortItem
+          @additionalArgs={{@additionalArgs}}
+          @item={{item}}
+          @index={{index}}
+          @items={{@items}}
+          @group={{@group}}
+          @handle={{@handle}}
+          @class={{@childClass}}
+          @tagName={{@childTagName}}
+          @isHorizontal={{@isHorizontal}}
+          @isRtl={{@isRtl}}
+          @draggingEnabled={{this.draggingEnabled}}
+          @dragEndAction={{@dragEndAction}}
+          @determineForeignPositionAction={{@determineForeignPositionAction}}
+          @sourceOnly={{@sourceOnly}}
+        >
+          {{yield item index}}
+        </DragSortItem>
+      {{/AnimatedEach}}
+    </AnimatedContainer>
+  </template>
   didDrag = false;
 
   dragEnter(event: Event): void {
@@ -31,11 +59,7 @@ export default class AnimatedDragSortList extends DragSortList {
     keptSprites,
     insertedSprites,
     removedSprites,
-  }: {
-    keptSprites: Array<Sprite>;
-    insertedSprites: Array<Sprite>;
-    removedSprites: Array<Sprite>;
-  }): unknown {
+  }: TransitionContext) {
     for (const sprite of insertedSprites) {
       if (sprite.finalBounds?.height) {
         sprite.startTranslatedBy(0, -sprite.finalBounds.height / 2);
@@ -53,9 +77,3 @@ export default class AnimatedDragSortList extends DragSortList {
     }
   }
 }
-
-declare module '@glint/environment-ember-loose/registry' {
-  export default interface Registry {
-    AnimatedDragSortList: typeof AnimatedDragSortList;
-  }
-}