Updated docs and test apps (#212)

* refactor: Extracted validation logic to a utility

* refactor: Documented how to use composes

* refactor: Replaced custom helpers with ember-truth-helpers

* chore: Replaced {{local-class}} helper (deprecated) with {{local}}

* chore: Created <Ui::Form::Number> component

* chore: Updated data files

* refactor: Standardized tests (docs-app)

* refactor: Standardized tests (test-app)

* refactor: Converted Glimmer components to <template> tag components

---------

Co-authored-by: ijlee2 <ijlee2@users.noreply.github.com>

docs-app/app/assets/app.css

@@ -92,6 +92,12 @@ ul {
   list-style-type: none;
 }
 
+:global(.input-disabled) {
+  background-color: #9ea4b0 !important;
+  color: #546e7a !important;
+  cursor: not-allowed !important;
+}
+
 :global(#ember-testing-container) {
   background-color: #020e1c !important;
   border: 0.0625rem solid rgb(211 211 211 / 15%) !important;

docs-app/app/components/navigation-menu.gts

@@ -1,5 +1,6 @@
 import type { TOC } from '@ember/component/template-only';
 import { LinkTo } from '@ember/routing';
+import { local } from 'embroider-css-modules';
 
 import styles from './navigation-menu.css';
 
@@ -23,7 +24,7 @@ const NavigationMenuComponent: TOC<NavigationMenuSignature> =
           <li>
             <LinkTo
               @route={{menuItem.route}}
-              class={{styles.link}}
+              class={{local styles "link"}}
               data-test-link={{menuItem.label}}
             >
               {{menuItem.label}}

docs-app/app/components/products/product/card.gts

@@ -3,7 +3,7 @@ import { hash } from '@ember/helper';
 import { LinkTo } from '@ember/routing';
 import { ContainerQuery, width } from 'ember-container-query';
 
-import type { Product } from '../../../data/products';
+import type { Product } from '../../../data';
 import styles from './card.css';
 import ProductsProductImage from './image';
 

docs-app/app/components/tracks.gts

@@ -0,0 +1,50 @@
+import type { TOC } from '@ember/component/template-only';
+import { hash } from '@ember/helper';
+import { ContainerQuery, height, width } from 'ember-container-query';
+import { and } from 'ember-truth-helpers';
+
+import type { Track } from '../data';
+import TracksList from './tracks/list';
+import TracksTable from './tracks/table';
+
+interface TracksSignature {
+  Args: {
+    tracks?: Track[];
+  };
+}
+
+const TracksComponent: TOC<TracksSignature> =
+  <template>
+    <ContainerQuery
+      @features={{hash
+        small=(width max=480)
+        medium=(width min=480 max=640)
+        large=(width min=640)
+        tall=(height min=320)
+      }}
+      as |CQ|
+    >
+      {{#if (and CQ.features.large CQ.features.tall)}}
+        <TracksTable @tracks={{@tracks}} />
+
+      {{else}}
+        <TracksList
+          @numColumns={{if
+            CQ.features.small
+            1
+            (if CQ.features.medium 2 3)
+          }}
+          @tracks={{@tracks}}
+        />
+
+      {{/if}}
+    </ContainerQuery>
+  </template>
+
+export default TracksComponent;
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    Tracks: typeof TracksComponent;
+  }
+}

docs-app/app/components/tracks/list.ts

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 
-import type { Track } from '../../data/album';
+import type { Track } from '../../data';
 import styles from './list.css';
 
 interface TracksListSignature {

docs-app/app/components/tracks/table.gts

@@ -1,6 +1,6 @@
 import type { TOC } from '@ember/component/template-only';
 
-import type { Track } from '../../data/album';
+import type { Track } from '../../data';
 import add from '../../helpers/add';
 import styles from './table.css';
 

docs-app/app/components/ui/form.hbs

@@ -33,6 +33,12 @@
           isWide=CQ.features.wide
           onUpdate=this.updateChangeset
         )
+        Number=(component
+          "ui/form/number"
+          changeset=this.changeset
+          isWide=CQ.features.wide
+          onUpdate=this.updateChangeset
+        )
         Textarea=(component
           "ui/form/textarea"
           changeset=this.changeset

docs-app/app/components/ui/form.ts

@@ -2,17 +2,19 @@ import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { WithBoundArgs } from '@glint/template';
+import type { WithBoundArgs } from '@glint/template';
 
 import styles from './form.css';
 import type UiFormCheckboxComponent from './form/checkbox';
 import type UiFormInputComponent from './form/input';
+import type UiFormNumberComponent from './form/number';
 import type UiFormTextareaComponent from './form/textarea';
 
 interface UiFormSignature {
   Args: {
     data?: Record<string, any>;
     instructions?: string;
+    onSubmit: (data: Record<string, any>) => Promise<void>;
     title?: string;
   };
   Blocks: {
@@ -26,6 +28,10 @@ interface UiFormSignature {
           typeof UiFormInputComponent,
           'changeset' | 'isWide' | 'onUpdate'
         >;
+        Number: WithBoundArgs<
+          typeof UiFormNumberComponent,
+          'changeset' | 'isWide' | 'onUpdate'
+        >;
         Textarea: WithBoundArgs<
           typeof UiFormTextareaComponent,
           'changeset' | 'isWide' | 'onUpdate'
@@ -41,10 +47,10 @@ export default class UiFormComponent extends Component<UiFormSignature> {
 
   @tracked changeset = this.args.data ?? ({} as Record<string, any>);
 
-  @action submitForm(event: SubmitEvent): void {
+  @action async submitForm(event: SubmitEvent): Promise<void> {
     event.preventDefault();
 
-    console.table(this.changeset);
+    await this.args.onSubmit(this.changeset);
   }
 
   @action updateChangeset({ key, value }: { key: string; value: any }): void {

docs-app/app/components/ui/form/checkbox.css

@@ -19,19 +19,18 @@
   border-color: transparent;
 }
 
-.checkbox.is-checked {
-  background-color: #1976d2;
+.checkmark-icon {
+  color: white;
 }
 
-.checkbox.is-disabled {
-  background-color: #b2c9d4;
-  cursor: not-allowed;
+.checkbox.is-checked {
+  background-color: #1976d2;
 }
 
-.checkmark-icon {
-  color: white;
+.is-disabled {
+  composes: input-disabled from global;
 }
 
-.checkbox.is-disabled .checkmark-icon {
+.is-disabled .checkmark-icon {
   color: #546e7a;
 }

docs-app/app/components/ui/form/checkbox.hbs

@@ -22,11 +22,11 @@
       aria-labelledby={{concat f.inputId "-label"}}
       aria-readonly={{if @isReadOnly "true" "false"}}
       aria-required={{if @isRequired "true" "false"}}
-      class={{local-class
+      class={{local
         this.styles
         "checkbox"
         (if this.isChecked "is-checked")
-        (if (strict-or @isDisabled @isReadOnly) "is-disabled")
+        (if (or @isDisabled @isReadOnly) "is-disabled")
       }}
       data-test-field={{@label}}
       role="checkbox"

docs-app/app/components/ui/form/checkbox.ts

@@ -1,6 +1,7 @@
 import { action, get } from '@ember/object';
 import Component from '@glimmer/component';
 
+import { generateErrorMessage } from '../../../utils/components/ui/form';
 import styles from './checkbox.css';
 
 interface UiFormCheckboxSignature {
@@ -23,15 +24,11 @@ export default class UiFormCheckboxComponent extends Component<UiFormCheckboxSig
   get errorMessage(): string | undefined {
     const { isRequired } = this.args;
 
-    if (!isRequired) {
-      return undefined;
-    }
-
-    if (!this.isChecked) {
-      return 'Please select the checkbox.';
-    }
-
-    return undefined;
+    return generateErrorMessage({
+      isRequired,
+      value: this.isChecked,
+      valueType: 'boolean',
+    });
   }
 
   get isChecked(): boolean {

docs-app/app/components/ui/form/field.gts

@@ -4,7 +4,7 @@ import Component from '@glimmer/component';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore: Could not find a declaration file for module 'ember-svg-jar/helpers/svg-jar'.
 import svgJar from 'ember-svg-jar/helpers/svg-jar';
-import { localClass } from 'embroider-css-modules';
+import { local } from 'embroider-css-modules';
 
 import styles from './field.css';
 
@@ -33,7 +33,7 @@ export default class UiFormFieldComponent extends Component<UiFormFieldSignature
 
   <template>
     <div
-      class={{localClass
+      class={{local
         styles
         "container"
         (if @isInline "is-inline")
@@ -52,7 +52,7 @@ export default class UiFormFieldComponent extends Component<UiFormFieldSignature
 
       {{#if @errorMessage}}
         <div
-          class={{localClass styles "feedback" "is-error"}}
+          class={{local styles "feedback" "is-error"}}
         >
           {{svgJar
             "alert"

docs-app/app/components/ui/form/information.gts

@@ -1,7 +1,7 @@
 import type { TOC } from '@ember/component/template-only';
 import { concat } from '@ember/helper';
+import { or } from 'ember-truth-helpers';
 
-import strictOr from '../../../helpers/strict-or';
 import styles from './information.css';
 
 interface UiFormInformationSignature {
@@ -14,7 +14,7 @@ interface UiFormInformationSignature {
 
 const UiFormInformationComponent: TOC<UiFormInformationSignature> =
   <template>
-    {{#if (strictOr @title @instructions)}}
+    {{#if (or @title @instructions)}}
       <div class={{styles.container}}>
         {{#if @title}}
           <div

docs-app/app/components/ui/form/input.css

@@ -17,8 +17,6 @@
   font-style: italic;
 }
 
-.input.is-disabled {
-  background-color: #b2c9d4;
-  color: #546e7a;
-  cursor: not-allowed;
+.is-disabled {
+  composes: input-disabled from global;
 }

docs-app/app/components/ui/form/input.hbs

@@ -16,10 +16,10 @@
 
   <:field as |f|>
     <input
-      class={{local-class
+      class={{local
         this.styles
         "input"
-        (if (strict-or @isDisabled @isReadOnly) "is-disabled")
+        (if (or @isDisabled @isReadOnly) "is-disabled")
       }}
       data-test-field={{@label}}
       disabled={{@isDisabled}}

docs-app/app/components/ui/form/input.ts

@@ -1,6 +1,8 @@
+import { assert } from '@ember/debug';
 import { action, get } from '@ember/object';
 import Component from '@glimmer/component';
 
+import { generateErrorMessage } from '../../../utils/components/ui/form';
 import styles from './input.css';
 
 interface UiFormInputSignature {
@@ -24,18 +26,21 @@ export default class UiFormInputComponent extends Component<UiFormInputSignature
   get errorMessage(): string | undefined {
     const { isRequired } = this.args;
 
-    if (!isRequired) {
-      return undefined;
-    }
-
-    if (!this.value) {
-      return 'Please provide a value.';
-    }
-
-    return undefined;
+    return generateErrorMessage({
+      isRequired,
+      value: this.value,
+      valueType: 'string',
+    });
   }
 
   get type(): string {
+    const { type } = this.args;
+
+    assert(
+      'To render a number input, please use <Ui::Form::Number> instead.',
+      type !== 'number',
+    );
+
     return this.args.type ?? 'text';
   }
 

docs-app/app/components/ui/form/number.css

@@ -0,0 +1,7 @@
+.input {
+  composes: input from "./input.css";
+}
+
+.is-disabled {
+  composes: input-disabled from global;
+}