Merge pull request #463 from appuniversum/chore/ts-conversion

Partial TypeScript conversion

.eslintrc.js

@@ -20,7 +20,11 @@ module.exports = {
         'plugin:@typescript-eslint/eslint-recommended',
         'plugin:@typescript-eslint/recommended',
       ],
-      rules: {},
+      rules: {
+        // This works around an issue in Glint https://github.com/typed-ember/glint/issues/697
+        // It also makes adding state to a component easier, since no other code changes would be needed.
+        'ember/no-empty-glimmer-component-classes': 'off',
+      },
     },
     // node files
     {

.template-lintrc.js

@@ -7,4 +7,12 @@ module.exports = {
     'addon/components/au-data-table/**',
     'tests/dummy/app/components/docs*/**',
   ],
+  overrides: [
+    {
+      files: ['tests/integration/**'],
+      rules: {
+        'require-input-label': 'off',
+      },
+    },
+  ],
 };

addon/components/au-alert.gjs → addon/components/au-alert.gts

@@ -1,10 +1,26 @@
-import { AuIcon } from '@appuniversum/ember-appuniversum';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import AuIcon from './au-icon';
 
-export default class AuAlert extends Component {
+export interface AuAlertSignature {
+  Args: {
+    closable?: boolean;
+    icon?: string;
+    iconVisible?: boolean;
+    onClose?: () => void;
+    size?: 'tiny' | 'small';
+    skin?: 'info' | 'success' | 'warning' | 'error';
+    title?: string;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class AuAlert extends Component<AuAlertSignature> {
   @tracked isVisible = true;
 
   get skin() {

addon/components/au-app.gts

@@ -0,0 +1,16 @@
+import Component from '@glimmer/component';
+
+export interface AuAppSignature {
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class AuApp extends Component<AuAppSignature> {
+  <template>
+    <div class="au-c-app" ...attributes>
+      {{yield}}
+    </div>
+  </template>
+}

addon/components/au-badge.gjs → addon/components/au-badge.gts

@@ -1,5 +1,16 @@
-import { AuIcon } from '@appuniversum/ember-appuniversum';
 import Component from '@glimmer/component';
+import AuIcon from './au-icon';
+
+export interface AuBadgeSignature {
+  Args: {
+    icon?: string;
+    iconVisible?: boolean;
+    number?: number;
+    size?: 'small';
+    skin?: 'action' | 'border' | 'brand' | 'error' | 'success' | 'warning';
+  };
+  Element: HTMLSpanElement;
+}
 
 const SKIN_CLASSES = {
   border: 'au-c-badge--border',
@@ -8,12 +19,17 @@ const SKIN_CLASSES = {
   success: 'au-c-badge--success',
   warning: 'au-c-badge--warning',
   error: 'au-c-badge--error',
+  default: 'au-c-badge--default',
 };
 
-export default class AuBadge extends Component {
+export default class AuBadge extends Component<AuBadgeSignature> {
   get skin() {
+    if (!this.args.skin) {
+      return SKIN_CLASSES.default;
+    }
+
     const skin = SKIN_CLASSES[this.args.skin];
-    return skin ? skin : 'au-c-badge--default';
+    return skin ? skin : SKIN_CLASSES.default;
   }
 
   get size() {

addon/components/au-body-container.gjs → addon/components/au-body-container.gts

@@ -1,6 +1,16 @@
 import Component from '@glimmer/component';
 
-export default class AuBodyContainer extends Component {
+export interface AuBodyContainerSignature {
+  Args: {
+    scroll?: boolean;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class AuBodyContainer extends Component<AuBodyContainerSignature> {
   get scroll() {
     if (this.args.scroll) return 'au-c-body-container--scroll';
     else return '';

addon/components/au-brand.gjs → addon/components/au-brand.gts

@@ -1,7 +1,15 @@
 import { guidFor } from '@ember/object/internals';
 import Component from '@glimmer/component';
 
-export default class AuBrand extends Component {
+export interface AuBrandSignature {
+  Args: {
+    link?: string;
+    tagline?: string;
+  };
+  Element: HTMLDivElement | HTMLAnchorElement;
+}
+
+export default class AuBrand extends Component<AuBrandSignature> {
   id = guidFor(this);
 
   get tagline() {

addon/components/au-button-group.gjs → addon/components/au-button-group.gts

@@ -1,6 +1,16 @@
 import Component from '@glimmer/component';
 
-export default class AuButtonGroup extends Component {
+export interface AuButtonGroupSignature {
+  Args: {
+    inline?: boolean;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class AuButtonGroup extends Component<AuButtonGroupSignature> {
   get inline() {
     if (this.args.inline) return 'au-c-button-group--inline';
     else return '';

addon/components/au-button.gjs → addon/components/au-button.gts

@@ -1,15 +1,38 @@
-import { AuIcon, AuLoader } from '@appuniversum/ember-appuniversum';
 import Component from '@glimmer/component';
+import AuIcon from './au-icon';
+import AuLoader from './au-loader';
+
+const SKINS = [
+  'primary',
+  'secondary',
+  'naked',
+  'link',
+  'link-secondary',
+] as const;
+
+export interface AuButtonSignature {
+  Args: {
+    alert?: boolean;
+    disabled?: boolean;
+    hideText?: boolean;
+    icon?: string;
+    iconAlignment?: 'left' | 'right';
+    loading?: boolean;
+    loadingMessage?: string;
+    size?: 'large';
+    skin?: (typeof SKINS)[number];
+    width?: 'block';
+    wrap?: boolean;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLButtonElement;
+}
 
-// TODO: replace these with the named imports from ember-truth-helpers v4 once our dependencies support that version
-import and from 'ember-truth-helpers/helpers/and';
-import eq from 'ember-truth-helpers/helpers/eq';
-
-const SKINS = ['primary', 'secondary', 'naked', 'link', 'link-secondary'];
-
-export default class AuButton extends Component {
+export default class AuButton extends Component<AuButtonSignature> {
   get skin() {
-    if (SKINS.includes(this.args.skin)) return this.args.skin;
+    if (this.args.skin && SKINS.includes(this.args.skin)) return this.args.skin;
     else return 'primary';
   }
 
@@ -52,6 +75,14 @@ export default class AuButton extends Component {
     else return 'Aan het laden';
   }
 
+  get isIconLeft() {
+    return !!this.args.icon && this.iconAlignment === 'left';
+  }
+
+  get isIconRight() {
+    return !!this.args.icon && this.iconAlignment === 'right';
+  }
+
   get iconAlignment() {
     if (this.args.iconAlignment) return this.args.iconAlignment;
     else return 'left';
@@ -78,7 +109,8 @@ export default class AuButton extends Component {
       ...attributes
     >
       {{#unless @loading}}
-        {{#if (and @icon (eq this.iconAlignment "left"))}}
+        {{#if this.isIconLeft}}
+          {{! @glint-expect-error: this.isIconLeft ensures that @icon is set }}
           <AuIcon @icon={{@icon}} />
         {{/if}}
       {{/unless}}
@@ -100,7 +132,8 @@ export default class AuButton extends Component {
       {{/if}}
 
       {{#unless @loading}}
-        {{#if (and @icon (eq this.iconAlignment "right"))}}
+        {{#if this.isIconRight}}
+          {{! @glint-expect-error: this.isIconRight ensures that @icon is set }}
           <AuIcon @icon={{@icon}} />
         {{/if}}
       {{/unless}}