Refactor <WizardField> to .gjs

Move field components into subfolders, remove dependency on string
resolution with the runtime resolver.

app/assets/javascripts/wizard/addon/components/fields/component.gjs

@@ -0,0 +1,21 @@
+import Component from "@glimmer/component";
+import { assert } from "@ember/debug";
+import { dasherize } from "@ember/string";
+import components from "./components";
+
+export default class ComponentField extends Component {
+  <template>
+    <this.component
+      @wizard={{@wizard}}
+      @step={{@step}}
+      @field={{@field}}
+      @fieldClass={{this.fieldClass}}
+    />
+  </template>
+
+  get component() {
+    let id = dasherize(this.args.field.id);
+    assert(`"${id}" is not a valid wizard component`, id in components);
+    return components[id];
+  }
+}

app/assets/javascripts/wizard/addon/components/homepage-preview.js → app/assets/javascripts/wizard/addon/components/fields/components/-homepage-preview.js

@@ -1,7 +1,7 @@
-import { darkLightDiff, LOREM } from "wizard/lib/preview";
-import WizardPreviewBaseComponent from "./wizard-preview-base";
+import { darkLightDiff, LOREM } from "../../../lib/preview";
+import PreviewBaseComponent from "./-preview-base";
 
-export default WizardPreviewBaseComponent.extend({
+export default PreviewBaseComponent.extend({
   width: 628,
   height: 322,
   logo: null,

app/assets/javascripts/wizard/addon/components/wizard-preview-base.js → app/assets/javascripts/wizard/addon/components/fields/components/-preview-base.js

@@ -6,7 +6,7 @@ import { htmlSafe } from "@ember/template";
 import { Promise } from "rsvp";
 import PreloadStore from "discourse/lib/preload-store";
 import getUrl from "discourse-common/lib/get-url";
-import { darkLightDiff, drawHeader } from "wizard/lib/preview";
+import { darkLightDiff, drawHeader } from "../../../lib/preview";
 
 export const LOREM = `
 Lorem ipsum dolor sit amet,

app/assets/javascripts/wizard/addon/components/fields/components/index.js

@@ -0,0 +1,5 @@
+import StylingPreview from "./styling-preview";
+
+export default {
+  "styling-preview": StylingPreview,
+};

app/assets/javascripts/wizard/addon/components/styling-preview.hbs → app/assets/javascripts/wizard/addon/components/fields/components/styling-preview.hbs

@@ -8,7 +8,7 @@
     </canvas>
   </div>
   <div class="wizard-container__preview homepage-preview">
-    <HomepagePreview @wizard={{this.wizard}} @step={{this.step}} />
+    <this.HomepagePreview @wizard={{this.wizard}} @step={{this.step}} />
   </div>
 </div>
 

app/assets/javascripts/wizard/addon/components/styling-preview.js → app/assets/javascripts/wizard/addon/components/fields/components/styling-preview.js

@@ -1,16 +1,17 @@
 import { action } from "@ember/object";
 import { bind, observes } from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
-import { chooseDarker, darkLightDiff } from "wizard/lib/preview";
-import WizardPreviewBaseComponent from "./wizard-preview-base";
+import { chooseDarker, darkLightDiff } from "../../../lib/preview";
+import HomepagePreview from "./-homepage-preview";
+import PreviewBaseComponent from "./-preview-base";
 
 const LOREM = `
 Lorem ipsum dolor sit amet, consectetur adipiscing.
 Nullam eget sem non elit tincidunt rhoncus. Fusce
 velit nisl, porttitor sed nisl ac, consectetur interdum
 metus. Fusce in consequat augue, vel facilisis felis.`;
 
-export default WizardPreviewBaseComponent.extend({
+export default PreviewBaseComponent.extend({
   width: 628,
   height: 322,
   logo: null,
@@ -19,6 +20,7 @@ export default WizardPreviewBaseComponent.extend({
   draggingActive: false,
   startX: 0,
   scrollLeft: 0,
+  HomepagePreview,
 
   init() {
     this._super(...arguments);

app/assets/javascripts/wizard/addon/components/wizard-field-dropdown.hbs → app/assets/javascripts/wizard/addon/components/fields/dropdown.hbs

@@ -1,5 +1,5 @@
 {{component
-  this.componentName
+  this.component
   class="wizard-container__dropdown"
   value=this.field.value
   content=this.field.choices

app/assets/javascripts/wizard/addon/components/wizard-field-dropdown.js → app/assets/javascripts/wizard/addon/components/fields/dropdown.js

@@ -1,6 +1,8 @@
 import Component from "@ember/component";
 import { action, set } from "@ember/object";
 import discourseComputed from "discourse-common/utils/decorators";
+import ColorPalettes from "select-kit/components/color-palettes";
+import ComboBox from "select-kit/components/combo-box";
 
 export default Component.extend({
   init() {
@@ -16,8 +18,8 @@ export default Component.extend({
   },
 
   @discourseComputed("field.id")
-  componentName(id) {
-    return id === "color_scheme" ? "color-palettes" : "combo-box";
+  component(id) {
+    return id === "color_scheme" ? ColorPalettes : ComboBox;
   },
 
   keyPress(e) {

app/assets/javascripts/wizard/addon/components/fields/image-previews/index.js

@@ -0,0 +1,9 @@
+import Generic from "./generic";
+import Logo from "./logo";
+import LogoSmall from "./logo-small";
+
+export default {
+  generic: Generic,
+  logo: Logo,
+  "logo-small": LogoSmall,
+};

app/assets/javascripts/wizard/addon/components/image-preview-logo-small.js → app/assets/javascripts/wizard/addon/components/fields/image-previews/logo-small.js

@@ -1,8 +1,8 @@
 import { action } from "@ember/object";
-import { drawHeader, LOREM } from "wizard/lib/preview";
-import WizardPreviewBaseComponent from "./wizard-preview-base";
+import { drawHeader, LOREM } from "../../../lib/preview";
+import PreviewBaseComponent from "../components/-preview-base";
 
-export default WizardPreviewBaseComponent.extend({
+export default PreviewBaseComponent.extend({
   width: 375,
   height: 100,
   image: null,

app/assets/javascripts/wizard/addon/components/image-preview-logo.js → app/assets/javascripts/wizard/addon/components/fields/image-previews/logo.js

@@ -1,8 +1,8 @@
 import { action } from "@ember/object";
-import { drawHeader } from "wizard/lib/preview";
-import WizardPreviewBaseComponent from "./wizard-preview-base";
+import { drawHeader } from "../../../lib/preview";
+import PreviewBaseComponent from "../components/-preview-base";
 
-export default WizardPreviewBaseComponent.extend({
+export default PreviewBaseComponent.extend({
   width: 400,
   height: 100,
   image: null,

app/assets/javascripts/wizard/addon/components/wizard-field-image.js → app/assets/javascripts/wizard/addon/components/fields/image.js

@@ -5,10 +5,10 @@ import { dasherize } from "@ember/string";
 import Uppy from "@uppy/core";
 import DropTarget from "@uppy/drop-target";
 import XHRUpload from "@uppy/xhr-upload";
-import { getOwnerWithFallback } from "discourse-common/lib/get-owner";
 import getUrl from "discourse-common/lib/get-url";
 import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
+import imagePreviews from "./image-previews";
 
 export default Component.extend({
   classNames: ["wizard-container__image-upload"],
@@ -17,11 +17,7 @@ export default Component.extend({
 
   @discourseComputed("field.id")
   previewComponent(id) {
-    const componentName = `image-preview-${dasherize(id)}`;
-    const exists = getOwnerWithFallback(this).lookup(
-      `component:${componentName}`
-    );
-    return exists ? componentName : "wizard-image-preview";
+    return imagePreviews[dasherize(id)] ?? imagePreviews.generic;
   },
 
   didInsertElement() {

app/assets/javascripts/wizard/addon/components/fields/index.js

@@ -0,0 +1,15 @@
+import Checkbox from "./checkbox";
+import Checkboxes from "./checkboxes";
+import Component from "./component";
+import Dropdown from "./dropdown";
+import Image from "./image";
+import Text from "./text";
+
+export default {
+  checkbox: Checkbox,
+  checkboxes: Checkboxes,
+  component: Component,
+  dropdown: Dropdown,
+  image: Image,
+  text: Text,
+};

app/assets/javascripts/wizard/addon/components/wizard-field.gjs

@@ -0,0 +1,83 @@
+import Component from "@glimmer/component";
+import { assert } from "@ember/debug";
+import { dasherize } from "@ember/string";
+import { htmlSafe } from "@ember/template";
+import fields from "./fields";
+
+export default class WizardFieldComponent extends Component {
+  <template>
+    <div class={{this.classes}}>
+      {{#if @field.label}}
+        <label for={{@field.id}}>
+          <span class="wizard-container__label">
+            {{@field.label}}
+          </span>
+
+          {{#if @field.required}}
+            <span class="wizard-container__label required">*</span>
+          {{/if}}
+
+          {{#if @field.description}}
+            <div class="wizard-container__description">
+              {{htmlSafe @field.description}}
+            </div>
+          {{/if}}
+        </label>
+      {{/if}}
+
+      <div class="wizard-container__input">
+        <this.component
+          @wizard={{@wizard}}
+          @step={{@step}}
+          @field={{@field}}
+          @fieldClass={{this.fieldClass}}
+        />
+      </div>
+
+      {{#if @field.errorDescription}}
+        <div class="wizard-container__description error">
+          {{htmlSafe this.field.errorDescription}}
+        </div>
+      {{/if}}
+
+      {{#if @field.extraDescription}}
+        <div class="wizard-container__description extra">
+          {{htmlSafe this.field.extraDescription}}
+        </div>
+      {{/if}}
+    </div>
+  </template>
+
+  get field() {
+    return this.args.field;
+  }
+
+  get classes() {
+    let classes = ["wizard-container__field"];
+
+    let { type, id, invalid, disabled } = this.field;
+
+    classes.push(`${dasherize(type)}-field`);
+    classes.push(`${dasherize(type)}-${dasherize(id)}`);
+
+    if (invalid) {
+      classes.push("invalid");
+    }
+
+    if (disabled) {
+      classes.push("disabled");
+    }
+
+    return classes.join(" ");
+  }
+
+  get fieldClass() {
+    return `field-${dasherize(this.field.id)} wizard-focusable`;
+  }
+
+  get component() {
+    let { type } = this.field;
+    assert(`"${type}" is not a valid wizard field type`, type in fields);
+    return fields[type];
+  }
+}