feat: refactor all components to glimmer and use native classes

BREAKING CHANGE: While the public API won't change, there is a huge
chance that this will break implementations if someone's extending the
components of this addon. Components that do need to be refactored to
glimmer.

addon/components/validated-button.hbs

@@ -0,0 +1,7 @@
+{{#let (component this.buttonComponent onClick=@action loading=@loading disabled=@disabled label=@label type=@type) as |Button|}}
+  {{#if (has-block)}}
+    <Button ...attributes>{{yield}}</Button>
+  {{else}}
+    <Button ...attributes />
+  {{/if}}
+{{/let}}

addon/components/validated-button.js

@@ -1,11 +1,7 @@
-import Component from "@ember/component";
+import Component from "@glimmer/component";
 
 import themedComponent from "../-private/themed-component";
-import layout from "../templates/components/validated-button";
 
-export default Component.extend({
-  layout,
-  type: "button",
-  tagName: "",
-  buttonComponent: themedComponent("validated-button/button"),
-});
+export default class ValidatedButtonComponent extends Component {
+  @themedComponent("validated-button/button") buttonComponent;
+}

addon/components/validated-button/-themes/bootstrap/button.js

@@ -1,12 +1,10 @@
-import { computed } from "@ember/object";
-
 import Component from "../../button";
 
-export default Component.extend({
-  classNames: ["btn"],
-  classNameBindings: ["style"],
+export default class BootstrapButton extends Component {
+  get class() {
+    const style = this.args.type === "submit" ? "btn-primary" : "btn-default";
+    const loading = this.args.loading ? "loading" : "";
 
-  style: computed("type", function () {
-    return this.type === "submit" ? "btn-primary" : "btn-default";
-  }),
-});
+    return `btn ${style} ${loading}`;
+  }
+}

addon/components/validated-button/-themes/uikit/button.js

@@ -1,12 +1,10 @@
-import { computed } from "@ember/object";
-
 import Component from "../../button";
 
-export default Component.extend({
-  classNames: ["uk-button"],
-  classNameBindings: ["style"],
+export default class UikitButton extends Component {
+  get class() {
+    const style =
+      this.args.type === "submit" ? "uk-button-primary" : "uk-button-default";
 
-  style: computed("type", function () {
-    return this.type === "submit" ? "uk-button-primary" : "uk-button-default";
-  }),
-});
+    return `uk-button ${style}`;
+  }
+}

addon/components/validated-button/button.hbs

@@ -0,0 +1,9 @@
+<button
+  class={{this.class}}
+  type={{@type}}
+  disabled={{@disabled}}
+  {{on "click" @onClick}}
+  ...attributes
+>
+  {{#if (has-block)}}{{~yield~}}{{else}}{{~@label~}}{{/if}}
+</button>

addon/components/validated-button/button.js

@@ -1,9 +1,3 @@
-import Component from "@ember/component";
+import Component from "@glimmer/component";
 
-import layout from "../../templates/components/validated-button/button";
-
-export default Component.extend({
-  layout,
-  tagName: "button",
-  attributeBindings: ["disabled", "type", "action:onclick"],
-});
+export default class ButtonComponent extends Component {}

addon/components/validated-form.hbs

@@ -0,0 +1,20 @@
+<form
+  autocomplete={{@autocomplete}}
+  class={{if this.submitted "submitted"}}
+>
+  {{yield (hash
+    model=@model
+    loading=this.loading
+    input=(component "validated-input"
+      model=@model
+      submitted=this.submitted
+      validateBeforeSubmit=@validateBeforeSubmit
+    )
+    submit=(component "validated-button"
+      type="submit"
+      loading=this.loading
+      label="Save"
+      action=this.submit
+    )
+  )}}
+</form>

addon/components/validated-form.js

@@ -1,70 +1,56 @@
-import Component from "@ember/component";
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
 import { resolve } from "rsvp";
 
-import layout from "../templates/components/validated-form";
-
 const PROP_ON_SUBMIT = "on-submit";
 const PROP_ON_INVALID_SUBMIT = "on-invalid-submit";
 
-export default Component.extend({
-  tagName: "form",
-
-  classNameBindings: ["submitted"],
-  attributeBindings: ["autocomplete"],
-
-  loading: false,
-
-  submitted: false,
-
-  layout,
+export default class ValidatedFormComponent extends Component {
+  @tracked loading = false;
+  @tracked submitted = false;
+  @tracked validateBeforeSubmit = true;
 
-  validateBeforeSubmit: true,
+  constructor(...args) {
+    super(...args);
 
-  init(...args) {
-    this._super(...args);
-    if (this.model && this.model.validate) {
-      this.model.validate();
+    if (this.args.model && this.args.model.validate) {
+      this.args.model.validate();
     }
-  },
+  }
 
-  submit() {
-    this.set("submitted", true);
-    const model = this.model;
+  @action
+  async submit(event) {
+    event.preventDefault();
+
+    this.submitted = true;
+    const model = this.args.model;
 
     if (!model || !model.validate) {
       this.runCallback(PROP_ON_SUBMIT);
       return false;
     }
 
-    model.validate().then(() => {
-      if (!this.element) {
-        // We were removed from the DOM while validating
-        return;
-      }
+    await model.validate();
+
+    if (model.get("isInvalid")) {
+      this.runCallback(PROP_ON_INVALID_SUBMIT);
+    } else {
+      this.runCallback(PROP_ON_SUBMIT);
+    }
 
-      if (model.get("isInvalid")) {
-        this.runCallback(PROP_ON_INVALID_SUBMIT);
-      } else {
-        this.runCallback(PROP_ON_SUBMIT);
-      }
-    });
     return false;
-  },
+  }
 
   runCallback(callbackProp) {
-    const callback = this.get(callbackProp);
+    const callback = this.args[callbackProp];
     if (typeof callback !== "function") {
       return;
     }
-    const model = this.model;
 
-    this.set("loading", true);
-    resolve(callback(model)).finally(() => {
-      if (!this.element) {
-        // We were removed from the DOM while running on-submit()
-        return;
-      }
-      this.set("loading", false);
+    this.loading = true;
+    resolve(callback(this.args.model)).finally(() => {
+      this.loading = false;
     });
-  },
-});
+  }
+}

addon/components/validated-input.js

@@ -1,11 +1,9 @@
-import { setComponentTemplate } from "@ember/component";
 import { action, set, get } from "@ember/object";
 import { guidFor } from "@ember/object/internals";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 
 import themedComponent from "../-private/themed-component";
-import template from "../templates/components/validated-input";
 
 /**
  * This component wraps form inputs.
@@ -20,7 +18,7 @@ import template from "../templates/components/validated-input";
  * @class validated-input
  * @export default
  */
-export class ValidatedInput extends Component {
+export default class ValidatedInputComponent extends Component {
   inputId = guidFor(this);
 
   @tracked dirty;
@@ -97,5 +95,3 @@ export class ValidatedInput extends Component {
     }
   }
 }
-
-export default setComponentTemplate(template, ValidatedInput);

addon/components/validated-input/-themes/bootstrap/error.js

@@ -1,5 +1,5 @@
 import Component from "../../error";
 
-export default Component.extend({
-  classNames: ["invalid-feedback"],
-});
+export default class BootstrapErrorComponent extends Component {
+  class = "invalid-feedback";
+}

addon/components/validated-input/-themes/bootstrap/hint.js

@@ -1,5 +1,5 @@
 import Component from "../../hint";
 
-export default Component.extend({
-  classNames: ["form-text", "text-muted"],
-});
+export default class BootstrapHintComponent extends Component {
+  class = "form-text text-muted";
+}

addon/components/validated-input/-themes/bootstrap/label.js

@@ -1,3 +1,3 @@
 import Component from "../../label";
 
-export default Component.extend({});
+export default class BootstrapLabelComponent extends Component {}

addon/components/validated-input/-themes/bootstrap/render.js

@@ -1,5 +1,5 @@
 import Component from "../../render";
 
-export default Component.extend({
-  classNames: ["form-group"],
-});
+export default class BootstrapRenderComponent extends Component {
+  class = "form-group";
+}

addon/components/validated-input/-themes/uikit/error.hbs

@@ -0,0 +1 @@
+<small class="uk-text-danger" ...attributes>{{yield}}{{this.errorString}}</small>

addon/components/validated-input/-themes/uikit/error.js

@@ -1,6 +1,3 @@
 import Component from "../../error";
 
-export default Component.extend({
-  tagName: "small",
-  classNames: ["uk-text-danger"],
-});
+export default class UikitErrorComponent extends Component {}

addon/components/validated-input/-themes/uikit/hint.js

@@ -1,5 +1,5 @@
 import Component from "../../hint";
 
-export default Component.extend({
-  classNames: ["uk-text-muted"],
-});
+export default class UikitHintComponent extends Component {
+  class = "uk-text-muted";
+}

addon/components/validated-input/-themes/uikit/label.js

@@ -1,5 +1,5 @@
 import Component from "../../label";
 
-export default Component.extend({
-  classNames: ["uk-form-label"],
-});
+export default class UikitLabelComponent extends Component {
+  class = "uk-form-label";
+}