Updated demo app (#137)

* refactor: Made <Tracks> a template-only component * bugfix: Fixed visual regression in <Widgets::Widget-2::Captions> component * refactor: Improved code readability of <Widgets::Widget-2::Captions> component * chore: Called resizeObserver.unobserve and resizeObserver.observe in the same order as they are in the {{container-query}} modifier * refactor: Improved code readability * chore: Renamed {{draw-chart}} modifier to {{draw-stacked-chart}} * refactor: Used the {{container-query}} modifier to set the best-fitting image * refactor: Created a temporary variable in <Widgets::Widget-4::Memo::Header> component * chore: Installed ember-template-lint-plugin-prettier * chore: Ran yarn lint:hbs:fix to fix formatting issues * bugfix: Fixed visual regressions * chore: Temporarily removed overrides for test files, to illustrate an (unintended?) effect of ember-template-lint@v5 * Revert "chore: Temporarily removed overrides for test files, to illustrate an (unintended?) effect of ember-template-lint@v5" This reverts commit 7f3de43. * chore: Updated LICENSE Co-authored-by: ijlee2 <ijlee2@users.noreply.github.com>
ijlee2 · Dec 13, 2022 · dcbbeaa · dcbbeaa
1 parent 3e6717f
commit dcbbeaa
Show file tree

Hide file tree

Showing 42 changed files with 399 additions and 332 deletions.
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -1,5 +1,16 @@
 'use strict';
 
 module.exports = {
+  printWidth: 80,
   singleQuote: true,
+
+  overrides: [
+    {
+      files: '*.hbs',
+      options: {
+        printWidth: 64,
+        singleQuote: false,
+      },
+    },
+  ],
 };
diff --git a/.template-lintrc.js b/.template-lintrc.js
@@ -1,5 +1,14 @@
 'use strict';
 
 module.exports = {
-  extends: 'recommended',
+  plugins: ['ember-template-lint-plugin-prettier'],
+  extends: ['recommended', 'ember-template-lint-plugin-prettier:recommended'],
+  overrides: [
+    {
+      files: ['addon/**/*.hbs', 'tests/**/*-test.{js,ts}'],
+      rules: {
+        prettier: 'off',
+      },
+    },
+  ],
 };
diff --git a/LICENSE.md b/LICENSE.md
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2022
+Copyright (c) 2023 Isaac J. Lee
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

diff --git a/addon/components/container-query.hbs b/addon/components/container-query.hbs
@@ -10,9 +10,11 @@
     }}
     ...attributes
   >
-    {{yield (hash
-      dimensions=this.dimensions
-      features=this.queryResults
-    )}}
+    {{yield
+      (hash
+        dimensions=this.dimensions
+        features=this.queryResults
+      )
+    }}
   </Tag>
 {{/let}}
diff --git a/package.json b/package.json
@@ -124,6 +124,7 @@
     "ember-source-channel-url": "^3.0.0",
     "ember-svg-jar": "^2.4.2",
     "ember-template-lint": "^5.0.2",
+    "ember-template-lint-plugin-prettier": "^4.1.0",
     "ember-truth-helpers": "^3.1.1",
     "ember-try": "^2.0.0",
     "eslint": "^8.28.0",

diff --git a/tests/dummy/app/components/navigation-menu.hbs b/tests/dummy/app/components/navigation-menu.hbs
@@ -1,7 +1,4 @@
-<nav
-  aria-label={{@name}}
-  data-test-nav={{@name}}
->
+<nav aria-label={{@name}} data-test-nav={{@name}}>
   <ul local-class="list">
     {{#each @menuItems as |menuItem|}}
       <li local-class="item">

diff --git a/tests/dummy/app/components/tracks.d.ts b/tests/dummy/app/components/tracks.d.ts
@@ -0,0 +1,5 @@
+import type { Track } from 'dummy/data/album';
+
+export interface TracksComponentArgs {
+  tracks?: Array<Track>;
+}
diff --git a/tests/dummy/app/components/tracks.hbs b/tests/dummy/app/components/tracks.hbs
@@ -8,17 +8,16 @@
   as |CQ|
 >
   {{#if (and CQ.features.large CQ.features.tall)}}
-    <Tracks::Table
-      @tracks={{this.tracks}}
-    />
+    <Tracks::Table @tracks={{@tracks}} />
 
   {{else}}
     <Tracks::List
-      @numColumns={{
-        if CQ.features.small 1
+      @numColumns={{if
+        CQ.features.small
+        1
         (if CQ.features.medium 2 3)
       }}
-      @tracks={{this.tracks}}
+      @tracks={{@tracks}}
     />
 
   {{/if}}

diff --git a/tests/dummy/app/components/tracks.ts b/tests/dummy/app/components/tracks.ts
diff --git a/tests/dummy/app/components/tracks/list.hbs b/tests/dummy/app/components/tracks/list.hbs
@@ -8,10 +8,7 @@
   }}
 >
   {{#each @tracks as |track index|}}
-    <li
-      data-test-item
-      local-class="item"
-    >
+    <li data-test-item local-class="item">
       <div>
         {{add index 1}}.
         <span data-test-field="Title">
@@ -25,7 +22,11 @@
           data-test-field="Explicit"
           role="img"
         >
-          {{svg-jar "alpha-e-box" aria-hidden="true" local-class="icon-explicit"}}
+          {{svg-jar
+            "alpha-e-box"
+            aria-hidden="true"
+            local-class="icon-explicit"
+          }}
         </span>
       {{/if}}
     </li>

diff --git a/tests/dummy/app/components/tracks/list.ts b/tests/dummy/app/components/tracks/list.ts
@@ -3,15 +3,23 @@ import type { Track } from 'dummy/data/album';
 
 interface TracksListComponentArgs {
   numColumns?: number;
-  tracks: Array<Track>;
+  tracks?: Array<Track>;
 }
 
 export default class TracksListComponent extends Component<TracksListComponentArgs> {
   get numColumns(): number {
-    return this.args.numColumns ?? 1;
+    const { numColumns } = this.args;
+
+    return numColumns ?? 1;
   }
 
   get numRows(): number {
-    return Math.ceil(this.args.tracks.length / this.numColumns);
+    const { tracks } = this.args;
+
+    if (!tracks) {
+      return 0;
+    }
+
+    return Math.ceil(tracks.length / this.numColumns);
   }
 }
diff --git a/tests/dummy/app/components/tracks/table.d.ts b/tests/dummy/app/components/tracks/table.d.ts
@@ -1,5 +1,5 @@
 import type { Track } from 'dummy/data/album';
 
 export interface TracksTableComponentArgs {
-  tracks: Array<Track>;
+  tracks?: Array<Track>;
 }
diff --git a/tests/dummy/app/components/ui/form.hbs b/tests/dummy/app/components/ui/form.hbs
@@ -1,5 +1,8 @@
 <form
-  aria-describedby={{if @instructions (concat this.formId "-instructions")}}
+  aria-describedby={{if
+    @instructions
+    (concat this.formId "-instructions")
+  }}
   aria-labelledby={{if @title (concat this.formId "-title")}}
   data-test-form={{or @title ""}}
   local-class="form"
@@ -12,27 +15,26 @@
   />
 
   <ContainerQuery
-    @features={{hash
-      wide=(cq-width min=480)
-    }}
+    @features={{hash wide=(cq-width min=480)}}
     as |CQ|
   >
     {{yield
       (hash
-        Checkbox=(component "ui/form/checkbox"
+        Checkbox=(component
+          "ui/form/checkbox"
           changeset=this.changeset
           isInline=true
           isWide=CQ.features.wide
           onUpdate=this.updateChangeset
         )
-
-        Input=(component "ui/form/input"
+        Input=(component
+          "ui/form/input"
           changeset=this.changeset
           isWide=CQ.features.wide
           onUpdate=this.updateChangeset
         )
-
-        Textarea=(component "ui/form/textarea"
+        Textarea=(component
+          "ui/form/textarea"
           changeset=this.changeset
           isWide=CQ.features.wide
           onUpdate=this.updateChangeset

diff --git a/tests/dummy/app/components/ui/form/checkbox.hbs b/tests/dummy/app/components/ui/form/checkbox.hbs
@@ -4,10 +4,7 @@
   @isWide={{@isWide}}
 >
   <:label as |l|>
-    <label
-      data-test-label
-      id="{{l.inputId}}-label"
-    >
+    <label data-test-label id="{{l.inputId}}-label">
       {{@label}}
 
       {{#if @isRequired}}
@@ -27,16 +24,20 @@
       aria-required={{if @isRequired "true" "false"}}
       data-test-field={{@label}}
       local-class="checkbox
-        {{if this.isChecked "is-checked"}}
-        {{if (or @isDisabled @isReadOnly) "is-disabled"}}
+        {{if this.isChecked 'is-checked'}}
+        {{if (or @isDisabled @isReadOnly) 'is-disabled'}}
       "
       role="checkbox"
       tabindex={{unless @isDisabled "0"}}
       {{on "click" this.updateValue}}
       {{on "keypress" this.updateValueByPressingSpace}}
     >
       {{#if this.isChecked}}
-        {{svg-jar "check" aria-hidden="true" local-class="checkmark-icon"}}
+        {{svg-jar
+          "check"
+          aria-hidden="true"
+          local-class="checkmark-icon"
+        }}
       {{/if}}
     </span>
   </:field>

diff --git a/tests/dummy/app/components/ui/form/input.hbs b/tests/dummy/app/components/ui/form/input.hbs
@@ -3,10 +3,7 @@
   @isWide={{@isWide}}
 >
   <:label as |l|>
-    <label
-      data-test-label
-      for={{l.inputId}}
-    >
+    <label data-test-label for={{l.inputId}}>
       {{@label}}
 
       {{#if @isRequired}}
@@ -23,7 +20,7 @@
       disabled={{@isDisabled}}
       id={{f.inputId}}
       local-class="input
-        {{if (or @isDisabled @isReadOnly) "is-disabled"}}
+        {{if (or @isDisabled @isReadOnly) 'is-disabled'}}
       "
       placeholder={{@placeholder}}
       readonly={{@isReadOnly}}

diff --git a/tests/dummy/app/components/ui/form/textarea.hbs b/tests/dummy/app/components/ui/form/textarea.hbs
@@ -3,10 +3,7 @@
   @isWide={{@isWide}}
 >
   <:label as |l|>
-    <label
-      data-test-label
-      for={{l.inputId}}
-    >
+    <label data-test-label for={{l.inputId}}>
       {{@label}}
 
       {{#if @isRequired}}
@@ -23,14 +20,14 @@
       disabled={{@isDisabled}}
       id={{f.inputId}}
       local-class="textarea
-        {{if (or @isDisabled @isReadOnly) "is-disabled"}}
+        {{if (or @isDisabled @isReadOnly) 'is-disabled'}}
       "
       placeholder={{@placeholder}}
       readonly={{@isReadOnly}}
       required={{@isRequired}}
       rows="4"
       value={{this.value}}
       {{on "input" this.updateValue}}
-    />
+    ></textarea>
   </:field>
 </Ui::Form::Field>
diff --git a/tests/dummy/app/components/ui/page.hbs b/tests/dummy/app/components/ui/page.hbs
@@ -3,11 +3,7 @@
     {{@title}}
   </h1>
 
-  <div
-    id="main-content"
-    local-class="body"
-    tabindex="-1"
-  >
+  <div id="main-content" local-class="body" tabindex="-1">
     {{yield}}
   </div>
 </div>
diff --git a/tests/dummy/app/components/widgets/widget-1.hbs b/tests/dummy/app/components/widgets/widget-1.hbs
@@ -13,21 +13,15 @@
 
   <div local-class="items">
     <div local-class="item-1">
-      <Widgets::Widget-1::Item
-        @title="Item 1"
-      />
+      <Widgets::Widget-1::Item @title="Item 1" />
     </div>
 
     <div local-class="item-2">
-      <Widgets::Widget-1::Item
-        @title="Item 2"
-      />
+      <Widgets::Widget-1::Item @title="Item 2" />
     </div>
 
     <div local-class="item-3">
-      <Widgets::Widget-1::Item
-        @title="Item 3"
-      />
+      <Widgets::Widget-1::Item @title="Item 3" />
     </div>
   </div>
 </ContainerQuery>
diff --git a/tests/dummy/app/components/widgets/widget-2.hbs b/tests/dummy/app/components/widgets/widget-2.hbs
@@ -13,20 +13,12 @@
   </header>
 
   {{#unless CQ.features.short}}
-    <div
-      data-test-visualization
-      local-class="visualization"
-    >
-      <Widgets::Widget-2::StackedChart
-        @data={{this.data}}
-      />
+    <div data-test-visualization local-class="visualization">
+      <Widgets::Widget-2::StackedChart @data={{this.data}} />
     </div>
   {{/unless}}
 
-  <div
-    data-test-captions
-    local-class="captions"
-  >
+  <div data-test-captions local-class="captions">
     <Widgets::Widget-2::Captions
       @summaries={{this.summaries}}
     />