dlg-ui 1.0.27 → 1.0.29

package/addon/components/checkbox-group.hbs

@@ -0,0 +1,15 @@
+<div class={{@class}} {{did-insert this.initCheckboxGroup}}>
+    <div class="label">
+        {{this.args.label}}
+    </div>
+    <div>
+        {{#each this.args.options as |option|}}
+            <Checkbox 
+                @model={{this.value}}
+                @valuePath={{option.label}}
+                @option={{option}}
+                @onChange={{this.onChange}}
+            />
+        {{/each}}
+    </div>
+</div>

package/addon/components/checkbox-group.js

@@ -0,0 +1,31 @@
+import Component from '@glimmer/component';
+import { get, set } from '@ember/object';
+
+export default class CheckboxGroupComponent extends Component {
+    get value() {
+      const value = get(this.args.model, this.args.valuePath);
+      return value !== undefined ? value : this.placeholder;
+    }
+    
+    set value(newValue) {
+      set(this.args.model, this.args.valuePath, newValue);
+      return newValue;
+    }
+    
+    initCheckboxGroup = () => {
+        if (typeof this.value !== 'object') {
+            this.value = {};
+        }
+        this.args.options.forEach(option => {
+            if (this.value[option.label] === undefined) {
+                set(this.value, option.label, false);
+            } else {
+                set(this.value, option.label, this.value[option.label]);
+            }
+        });
+    }
+
+    onChange = (value) => {
+        this.args.onChange?.(value);
+    }
+}

package/addon/components/checkbox.hbs

@@ -0,0 +1,11 @@
+<div class={{@class}}>
+    <div class="label">
+        {{this.args.label}}
+    </div>
+  <div class="checkbox-container">
+    <div>
+      <input type="checkbox" id="checkboxId" checked={{this.value}} {{on "change" (fn this.onChange)}} />
+      <label for="checkboxId">{{@option.label}}</label>
+    </div>
+  </div>
+</div>

package/addon/components/checkbox.js

@@ -0,0 +1,23 @@
+import Component from '@glimmer/component';
+import { get, set } from '@ember/object';
+
+export default class CheckboxComponent extends Component {
+    get value() {
+      const value = get(this.args.model, this.args.valuePath);
+      return value !== undefined ? value : this.placeholder;
+    }
+    
+    set value(newValue) {
+      set(this.args.model, this.args.valuePath, newValue);
+      return newValue;
+    }
+
+    onChange = () => {
+        if (this.value === undefined) {
+            this.value = true;
+        } else {
+            this.value = !this.value;
+        }
+        this.args.onChange?.(this.value);
+    }
+}

package/addon/components/date-picker.hbs

@@ -0,0 +1,13 @@
+<div class="date-picker-wrapper {{@class}}">
+  <div class="label">
+    {{this.args.label}}
+  </div>
+  <input
+    class="date-picker"
+    type="date"
+    id="start"
+    name="trip-start"
+    value={{this.value}}
+    {{on "input" this.onChange}} 
+  />
+</div>

package/addon/components/date-picker.js

@@ -0,0 +1,19 @@
+import Component from '@glimmer/component';
+import { get, set } from '@ember/object';
+
+export default class DatePickerComponent extends Component {
+    get value() {
+      const value = get(this.args.model, this.args.valuePath);
+      return value !== undefined ? value : this.placeholder;
+    }
+    
+    set value(newValue) {
+      set(this.args.model, this.args.valuePath, newValue);
+      return newValue;
+    }
+
+    onChange = (event) => {
+      this.value = event.target.value;
+      this.args.onChange?.(this.value);
+    }
+}

package/addon/components/dropdown.hbs

@@ -1,7 +1,10 @@
 <div class='dropdown-wrapper {{@class}}' {{did-insert this.loadClickListener}}>
+  <div class='label'>
+    {{this.args.label}}
+  </div>
   <div class='dropdown-select {{if this.isOpen "open"}}'>
-    {{#if this.selectedOption}}
-      {{this.selectedOption.label}}
+    {{#if this.value.label}}
+      {{this.value.label}}
       {{! TODO - If there is no label, then they submitted just strings and we can use those for a dropdown }}
     {{else}}
       <span class='dropdown-placeholder'>
@@ -10,7 +13,7 @@
     {{/if}}
   </div>
   <div class={{this.dropdownClass}}>
-    {{#each @options as |option|}}
+    {{#each this.options as |option|}}
       <div
         class='dropdown-option'
         {{on 'click' (fn this.makeSelection option)}}

package/addon/components/dropdown.js

@@ -1,10 +1,9 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
+import { action, get, set } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
 export default class DropdownComponent extends Component {
   @tracked isOpen = false;
-  @tracked _selectedOption = this.args.selectedOption;
 
   get dropdownClass() {
     if (this.isOpen) {
@@ -14,12 +13,13 @@ export default class DropdownComponent extends Component {
     }
   }
 
-  get selectedOption() {
-    if (this.args.selectedOption) {
-      return this.args.selectedOption;
-    } else {
-      null;
-    }
+  get options() {
+    let options = [];
+    options.push({ label: null });
+    this.args.options.forEach((option) => {
+      options.push(option);
+    });
+    return options;
   }
 
   get placeholder() {
@@ -30,26 +30,28 @@ export default class DropdownComponent extends Component {
     }
   }
 
+  get value() {
+    const value = get(this.args.model, this.args.valuePath);
+    return value !== undefined ? value : this.placeholder;
+  }
+  
+  set value(newValue) {
+    set(this.args.model, this.args.valuePath, newValue);
+    return newValue;
+  }
+
   constructor() {
     super(...arguments);
-    if (!this.args.onSelect) {
-      console.warn('Dropdown 2-way binding needs an onSelect action');
-    }
     if (!this.args.options) {
       throw new Error('Dropdown requires an options array');
     }
-    if (this.args.forceSelection && !this.args.selectedOption) {
-      throw new Error(
-        'Dropdown requires a selected option when forceSelection is true'
-      );
-    }
   }
 
   saveSelection(value) {
     if (!this.args.preventDefault) {
-      this._selectedOption = value;
+      this.value = value;
     }
-    this.args.onSelect(value);
+    this.args.onSelect?.(value);
   }
 
   @action
@@ -75,12 +77,12 @@ export default class DropdownComponent extends Component {
 
   @action
   makeSelection(option) {
-    if (!this.args.forceSelection && option === this.selectedOption) {
+    if (option === this.value) {
       this.saveSelection(null);
-      this.isOpen = false;
     } else {
       this.saveSelection(option);
-      this.isOpen = false;
     }
+    this.isOpen = false;
+    this.args.onChange?.(this.value);
   }
 }

package/addon/components/form/field.hbs

@@ -0,0 +1,18 @@
+<div class="form-field">
+    <div class="label">
+        {{@label}} {{#if @required}}<span class="required">*</span>{{/if}}
+    </div>
+    <div class="field-input {{if this.error "has-error"}}">
+      {{yield (hash
+      Checkbox=(component "checkbox" valuePath=@valuePath class="field-border" onChange=this.onChange)
+      CheckboxGroup=(component "checkbox-group" valuePath=@valuePath class="field-border" onChange=this.onChange)
+      DatePicker=(component "date-picker" valuePath=@valuePath onChange=this.onChange)
+      Dropdown=(component "dropdown" valuePath=@valuePath onChange=this.onChange)
+      Radio=(component "radio" valuePath=@valuePath class="field-border" onChange=this.onChange)
+      TextInput=(component "text-input" valuePath=@valuePath onChange=this.onChange)
+      )}}
+    </div>
+    <div class="field-validation">
+      {{this.error}}
+    </div>
+</div>

package/addon/components/form/field.js

@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+import PresenceValidator from '../../validations/presence';
+
+export default class FormFieldComponent extends Component {
+    get error() {
+        return this.args.errors?.[this.args.valuePath] || null;
+    }
+
+    get fieldType() {
+        return this.args.field?.constructor?.name || null;
+    }
+
+    get didValidate() {
+        return this.args.didValidate;
+    }
+
+    constructor() {
+        super(...arguments);
+        if (this.args.required) {
+            this.args.addValidator(new PresenceValidator(this.args.valuePath));
+        }
+    }
+
+    onChange = () => {
+        if (this.didValidate) {
+            this.args.validate();
+        }
+    }
+}

package/addon/components/form.hbs

@@ -0,0 +1,8 @@
+<div class="form-wrapper {{@class}}">
+    <form>
+        {{yield (hash Field=(component "form/field" addValidator=this.addValidator didValidate=this.didValidate errors=this.errors validate=this.validate))}}
+    </form>
+    <ButtonPrimary @onClick={{this.submitForm}}>
+        Submit
+    </ButtonPrimary>
+</div>

package/addon/components/form.js

@@ -0,0 +1,26 @@
+import Component from '@glimmer/component';
+import ValidationBuilder from '../validations/validation-builder';
+import { tracked } from '@glimmer/tracking';
+
+export default class FormComponent extends Component {
+    @tracked validations = new ValidationBuilder();
+    @tracked errors = null;
+
+    get didValidate() {
+        return this.validations.didValidate;
+    }
+
+    addValidator = (validator) => {
+        this.validations.addValidation(validator);
+    }
+
+    submitForm = () => {
+        this.validate();
+    }
+
+    validate = () => {
+        let res = this.validations.validate(this.args.model);
+        console.log(res);
+        this.errors = res;
+    }
+}

package/addon/components/header-dropdown.js

@@ -1,27 +1,18 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
+import { action, get, set } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
 export default class DropdownComponent extends Component {
   @tracked isOpen = false;
-  @tracked _selectedOption = this.selectedOption;
 
   get displaySelectedOption() {
-    if (this._selectedOption) {
-      return this._selectedOption.label;
+    if (this.value?.label) {
+      return this.value.label;
     } else {
       return this.placeholder;
     }
   }
 
-  get selectedOption() {
-    if (this.args.selectedOption) {
-      return this.args.selectedOption;
-    } else {
-      null;
-    }
-  }
-
   get placeholder() {
     if (this.args.placeholder) {
       return this.args.placeholder;
@@ -30,11 +21,21 @@ export default class DropdownComponent extends Component {
     }
   }
 
+  get value() {
+    if (!this.args.model || !this.args.valuePath) {
+      return undefined;
+    }
+    const value = get(this.args.model, this.args.valuePath);
+    return value !== undefined ? value : this.placeholder;
+  }
+  
+  set value(newValue) {
+    set(this.args.model, this.args.valuePath, newValue);
+    return newValue;
+  }
+
   constructor() {
     super(...arguments);
-    if (!this.args.onSelect) {
-      console.warn('Dropdown 2-way binding needs an onSelect action');
-    }
     if (!this.args.options) {
       throw new Error('Dropdown requires an options array');
     }
@@ -42,9 +43,9 @@ export default class DropdownComponent extends Component {
 
   saveSelection(value) {
     if (!this.args.preventDefault) {
-      this._selectedOption = value;
+      this.value = value;
     }
-    this.args.onSelect(value);
+    this.args.onSelect?.(value);
   }
 
   @action
@@ -71,12 +72,11 @@ export default class DropdownComponent extends Component {
 
   @action
   makeSelection(option) {
-    if (option === this.selectedOption) {
-      this.isOpen = false;
+    if (option === this.value) {
     } else {
       this.saveSelection(option);
-      this.isOpen = false;
     }
+    this.isOpen = false;
   }
 
   @action

package/addon/components/modal.hbs

@@ -0,0 +1,20 @@
+<div class="modal-backdrop {{if this.isOpen "modal-open" "modal-closed"}}">
+    <div class="modal">
+            <a {{on "click" this.toggleModal}}><FaIcon @icon={{this.icon}} class="modal-x"/></a>
+        <div class="modal-header">
+            <h1 style="margin-top: 0;">{{yield to="header"}}</h1>
+        </div>
+        <div class="modal-body">
+            {{yield to="body"}}
+        </div>
+        <div class="modal-footer">
+            <ButtonPrimary @onClick={{this.toggleModal}}>
+                Cancel
+            </ButtonPrimary>
+            <ButtonPrimary @onClick={{this.acceptAndClose}} style="margin-left: 1em;">
+                Done
+            </ButtonPrimary>
+            {{yield to="footer"}}
+        </div>
+    </div>
+</div>

package/addon/components/modal.js

@@ -0,0 +1,25 @@
+import Component from '@glimmer/component';
+import { faCircleXmark } from '@fortawesome/free-solid-svg-icons';
+
+export default class ModalComponent extends Component {
+    get isOpen() {
+        return this.args.isOpen ?? false;
+    }
+
+    get icon() {
+        return faCircleXmark;
+    }
+
+    acceptAndClose = () => {
+        if (this.args.onAccept) {
+            this.args.onAccept();
+        }
+        this.toggleModal();
+    }
+
+    toggleModal = () => {
+        if (this.args.toggleModal) {
+            this.args.toggleModal();
+        }
+    }
+}

package/addon/components/radio.hbs

@@ -1,5 +1,5 @@
-<div class="radio-container">
-    <div class="radio-label">
+<div class="radio-container {{@class}}">
+    <div class="label">
         {{this.args.label}}
     </div>
     <div class="radio-options">
@@ -8,9 +8,8 @@
                 <input 
                     type="radio"
                     id={{option.label}}
-                    checked={{option.isChecked}}
+                    checked={{eq option.label this.value.label}}
                     name={{this.args.name}}
-                    checked={{option.isChecked}}
                     {{on "change" (fn this.onChange option)}}
                 />
                 <label for={{option.label}}>

package/addon/components/radio.js

@@ -1,25 +1,26 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
+import { get, set } from '@ember/object';
 
 export default class RadioComponent extends Component {
-  @tracked
-  selectedOption = this.args.defaultOption || {};
-
   get options() {
-    let options = [];
-    this.args.options.forEach((option) => {
-      if (option.label === this.selectedOption.label) {
-        option.isChecked = true;
-      }
-      options.push(option);
-    });
     return this.args.options || [];
   }
 
-  @action
-  onChange(option) {
-    this.selectedOption = option;
-    this.args.onChange(option);
+  get value() {
+    if (!this.args.model || !this.args.valuePath) {
+      return undefined;
+    }
+    const value = get(this.args.model, this.args.valuePath);
+    return value !== undefined ? value : this.placeholder;
+  }
+  
+  set value(newValue) {
+    set(this.args.model, this.args.valuePath, newValue);
+    return newValue;
+  }
+
+  onChange = (option) => {
+    this.value = option;
+    this.args.onChange?.(option);
   }
 }

package/addon/components/text-input.hbs

@@ -0,0 +1,12 @@
+<div class="text-input-wrapper">
+    <div class="label">
+        {{this.args.label}}
+    </div>
+    <input
+        type="text"
+        class="text-input"
+        placeholder={{this.args.placeholder}}
+        value={{this.value}}
+        {{on "input" this.updateValue}}
+    />
+</div>

package/addon/components/text-input.js

@@ -0,0 +1,24 @@
+import Component from '@glimmer/component';
+import { get, set } from '@ember/object';
+
+export default class TextInputComponent extends Component {
+
+    get placeholder() {
+        return this.args.placeholder || 'Enter text...';
+    }
+
+    get value() {
+      const value = get(this.args.model, this.args.valuePath);
+      return value !== undefined ? value : this.placeholder;
+    }
+
+    set value(newValue) {
+      set(this.args.model, this.args.valuePath, newValue);
+      return newValue;
+    }
+
+    updateValue = (event) => {
+      this.value = event.target.value;
+      this.args.onChange?.(this.value);
+    }
+}

package/addon/styles/addon.css

@@ -17,8 +17,9 @@
   height: fit-content;
 }
 
-.radio-label {
+.label {
   font-weight: bold;
+  margin-bottom: 0.25em;
 }
 
 .radio-options {

package/addon/styles/button.css

@@ -1,7 +1,7 @@
 .btn-primary {
     background-color: #eee;
     color: black;
-    border: solid;
+    border: 2px solid;
     padding: 10px 20px;
     cursor: pointer;
     width: fit-content;

package/addon/styles/checkbox.css

@@ -0,0 +1,5 @@
+.checkbox-container {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 5px;
+}

package/addon/styles/date-picker.css

@@ -0,0 +1,16 @@
+.date-picker {
+    min-height: 2.375em;
+    width: 100%;
+    border: 2px solid;
+    padding: 8px 20px 8px 8px;
+    box-sizing: border-box;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    border-color: inherit;
+    background-color: #eee;
+}
+
+.date-picker-wrapper {
+    border-color: inherit;
+}

package/addon/styles/dropdown.css

@@ -1,6 +1,7 @@
 .dropdown-option {
   border-bottom-style: solid;
   border-width: 2px;
+  border-color: inherit;
   width: 100%;
   padding-left: 8px;
   padding-right: 8px;
@@ -8,6 +9,9 @@
   padding-bottom: 6px;
   box-sizing: border-box;
   cursor: pointer;
+  min-height: 2.375em;
+  display: flex;
+  align-items: center;
 }
 
 .dropdown-option:hover {
@@ -23,6 +27,7 @@
   border-style: solid;
   border-top-style: none;
   border-bottom-style: none;
+  border-color: inherit;
   border-width: 2px;
   background-color: #f6f6f6;
   transform: scaleY(0);
@@ -60,8 +65,10 @@
   cursor: pointer;
   border-style: solid;
   border-width: 2px;
+  border-color: inherit;
   background-color: #eee;
   user-select: none;
+  min-height: 2.375em;
 }
 
 .dropdown-select::after {
@@ -85,6 +92,7 @@
 .dropdown-wrapper {
   width: 100%;
   position: relative;
+  border-color: inherit;
 }
 
 .header-dropdown-options {
@@ -118,7 +126,7 @@
   max-width: 100%;
   padding-top: 8px;
   padding-bottom: 2px;
-  padding-right: 25px;
+  padding-right: 20px;
   box-sizing: border-box;
   position: relative;
   overflow: hidden;

package/addon/styles/form.css

@@ -0,0 +1,34 @@
+.field-border {
+    border: 2px solid transparent;
+}
+
+.has-error > .field-border {
+    border: red solid 2px;
+}
+
+.field-validation {
+    position: absolute;
+    color: red;
+    font-style: italic;
+}
+
+.field-input {
+  box-sizing: border-box;
+  margin-bottom: 0.25em;
+}
+
+.form-field {
+    margin-bottom: 2.25em;
+}
+
+.form-wrapper {
+    margin-bottom: 2em;
+}
+
+.has-error {
+    border-color: red;
+}
+
+.required {
+    color: red;
+}

package/addon/styles/modal.css

@@ -0,0 +1,49 @@
+.modal {
+    position: absolute;
+    top: 25%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    background: white;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    padding: 1em;
+}
+
+.modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+}
+
+.modal-backdrop.modal-closed {
+    display: none;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    margin-right: 100px;
+}
+
+.modal-body {
+    margin-bottom: 1em;
+}
+
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.modal-x {
+    cursor: pointer;
+    min-height: 2em;
+    min-width: 2em;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}

package/addon/styles/navbar.css

@@ -12,7 +12,6 @@
   height: fit-content;
   display: flex;
   justify-content: space-between;
-  align-items: center;
   z-index: 10;
   padding: 0 1em;
 }
@@ -73,6 +72,8 @@
   width: fit-content;
   white-space: nowrap;
   font-weight: bold;
+  display: flex;
+  align-items: center;
 }
 
 .navbar-wrapper {

package/addon/styles/text-input.css

@@ -0,0 +1,21 @@
+.text-input {
+    min-height: 2.375em;
+    width: 100%;
+    border: 2px solid;
+    border-color: inherit;
+    padding: 8px 20px 8px 8px;
+    box-sizing: border-box;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    background-color: #eee;
+}
+
+.text-input:focus-visible {
+    border-radius: 0 !important;
+    outline: none;
+}
+
+.text-input-wrapper {
+    border-color: inherit;
+}

package/addon/validations/base-validator.js

@@ -0,0 +1,11 @@
+import { tracked } from '@glimmer/tracking';
+
+export default class BaseValidator {
+    @tracked errorMessage = '';
+    @tracked isValid = false;
+    @tracked valuePath = '';
+
+    validate(value) {
+        throw new Error('The validate method must be implemented by subclasses');
+    }
+}

package/addon/validations/presence.js

@@ -0,0 +1,24 @@
+import BaseValidator from './base-validator';
+
+export default class PresenceValidator extends BaseValidator {
+    constructor(valuePath) {
+        super();
+        this.valuePath = valuePath;
+    }
+    
+    validate(value) {
+        if (value === ''
+            || value === null
+            || value === undefined
+            || (typeof value === 'boolean' && value === false)
+            || (typeof value === 'object' && !Object.values(value).some(v => v ? true : false))) {
+            this.errorMessage = 'This field is required';
+            this.isValid = false;
+            return this.errorMessage;
+        }
+
+        this.isValid = true;
+        this.errorMessage = null;
+        return null;
+    }
+}

package/addon/validations/validation-builder.js

@@ -0,0 +1,28 @@
+import { tracked } from '@glimmer/tracking';
+import { get } from '@ember/object';
+
+export default class ValidationBuilder {
+    @tracked validations;
+    @tracked didValidate = false;
+
+    constructor() {
+        this.validations = [];
+    }
+
+    addValidation(validator) {
+        this.validations.push(validator);
+    }
+
+    validate(model) {
+        let errors = {};
+        for (let validator of this.validations) {
+            const value = get(model, validator.valuePath);
+            validator.validate(value);
+            if (!validator.isValid) {
+                errors[validator.valuePath] = validator.errorMessage;
+            }
+        }
+        this.didValidate = true;
+        return Object.keys(errors).length ? errors : null;
+    }
+}

package/app/components/checkbox-group.js

@@ -0,0 +1 @@
+export { default } from 'dlg-ui/components/checkbox-group';

package/app/components/checkbox.js

@@ -0,0 +1 @@
+export { default } from 'dlg-ui/components/checkbox';

package/app/components/date-picker.js

@@ -0,0 +1 @@
+export { default } from 'dlg-ui/components/date-picker';

package/app/components/form/field.js

@@ -0,0 +1 @@
+export { default } from 'dlg-ui/components/form/field';

package/app/components/form.js

@@ -0,0 +1 @@
+export { default } from 'dlg-ui/components/form';

package/app/components/modal.js

@@ -0,0 +1 @@
+export { default } from 'dlg-ui/components/modal';

package/app/components/text-input.js

@@ -0,0 +1 @@
+export { default } from 'dlg-ui/components/text-input';

package/index.js

@@ -27,11 +27,16 @@ module.exports = {
     const addonCssPath = path.join(stylesDir, 'addon.css');
 
     const cssFiles = [
+      'button.css',
+      'checkbox.css',
+      'date-picker.css',
       'dropdown.css',
       'fly-in.css',
+      'form.css',
+      'modal.css',
       'navbar.css',
       'player-card.css',
-      'button.css',
+      'text-input.css',
     ];
 
     // Start with existing addon.css content (without the @import statements)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dlg-ui",
-  "version": "1.0.27",
+  "version": "1.0.29",
   "description": "The default blueprint for ember-cli addons.",
   "keywords": [
     "ember-addon"
@@ -27,6 +27,10 @@
   },
   "dependencies": {
     "@ember/string": "^3.1.1",
+    "@fortawesome/ember-fontawesome": "^3.1.0",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "ember-auto-import": "^2.4.3",
     "ember-cli-babel": "^8.2.0",
     "ember-cli-htmlbars": "^6.3.0"
   },
@@ -38,15 +42,11 @@
     "@ember/render-modifiers": "^3.0.0",
     "@ember/test-helpers": "^2.8.1",
     "@embroider/test-setup": "^1.8.3",
-    "@fortawesome/ember-fontawesome": "^3.1.0",
-    "@fortawesome/fontawesome-svg-core": "^7.1.0",
-    "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@glimmer/component": "^1.1.2",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
     "broccoli-funnel": "^3.0.8",
     "broccoli-merge-trees": "^4.2.0",
-    "ember-auto-import": "^2.4.3",
     "ember-cli": "~4.12.0",
     "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-inject-live-reload": "^2.1.0",