New Components for Form Elements

package.json

@@ -31,6 +31,7 @@
     "ember-source-channel-url": "^3.0.0",
     "ember-template-lint": "^5.13.0",
     "eslint": "^8.56.0",
+    "eslint-plugin-ember": "^12.0.2",
     "eslint-plugin-prettier": "^5.1.3",
     "lerna": "^8.1.2",
     "prettier": "^3.2.5",

packages/collections/src/components/dropdown.gts

@@ -153,7 +153,7 @@ class Trigger extends Component<TriggerSignature> {
 
 interface MenuArgs
   extends Pick<
-      ListboxSignature['Args'],
+      ListboxSignature<unknown>['Args'],
       | 'appearance'
       | 'intent'
       | 'class'

packages/collections/src/components/listbox/listbox.gts

@@ -14,7 +14,7 @@ import type { WithBoundArgs } from '@glint/template';
 
 type ItemCompBounded = WithBoundArgs<typeof ListboxItem, 'manager'>;
 
-interface ListboxSignature<T = unknown> {
+interface ListboxSignature<T> {
   Args: {
     /**
      * @default 'listbox'
@@ -50,7 +50,7 @@ interface ListboxSignature<T = unknown> {
   };
 }
 
-class Listbox extends Component<ListboxSignature> {
+class Listbox<T = unknown> extends Component<ListboxSignature<T>> {
   listManager = new ListManager({
     selectionMode: this.args.selectionMode,
     selectedKeys: this.args.selectedKeys,

packages/forms-legacy/src/components/form-field/checkbox.gts

@@ -38,7 +38,8 @@ export default class FormFieldCheckbox extends Component<FormFieldCheckboxSignat
     const { checkbox } = useStyles();
 
     return checkbox({
-      size: this.args.size,
+      size: this.args.size
+    }).input({
       class: this.args.class
     });
   }

packages/forms-legacy/src/components/form-field/feedback.gts

@@ -25,11 +25,11 @@ export default class FormFieldFeedback extends Component<FormFieldFeedbackSignat
   }
 
   get classes() {
-    const { feedback } = useStyles();
+    const { formFeedback } = useStyles();
 
-    return feedback({
+    return formFeedback({
       size: this.args.size,
-      isError: this.isError,
+      intent: this.isError ? 'danger' : 'primary',
       class: this.args.class
     });
   }

packages/forms-legacy/src/components/form-field/hint.gts

@@ -17,9 +17,9 @@ export interface FormFieldHintSignature {
 
 export default class FormFieldHint extends Component<FormFieldHintSignature> {
   get classes() {
-    const { hint } = useStyles();
+    const { formDescription } = useStyles();
 
-    return hint({
+    return formDescription({
       size: this.args.size,
       class: this.args.class
     });

packages/forms-legacy/src/components/form-field/input.gts

@@ -52,7 +52,8 @@ export default class FormFieldInput extends Component<FormFieldInputSignature> {
     const { input } = useStyles();
 
     return input({
-      size: this.args.size,
+      size: this.args.size
+    }).input({
       class: this.args.class
     });
   }

packages/forms-legacy/src/components/form-field/label.gts

@@ -19,7 +19,10 @@ export default class FormFieldLabel extends Component<FormFieldLabelSignature> {
   get classes() {
     const { label } = useStyles();
 
-    return label({ size: this.args.size, class: this.args.class });
+    const { base } = label({
+      size: this.args.size || 'md'
+    });
+    return base({ class: this.args.class });
   }
 
   <template>

packages/forms-legacy/src/components/form-field/radio.gts

@@ -37,7 +37,8 @@ export default class FormFieldRadio extends Component<FormFieldRadioSignature> {
     const { radio } = useStyles();
 
     return radio({
-      size: this.args.size,
+      size: this.args.size
+    }).input({
       class: this.args.class
     });
   }

packages/forms-legacy/src/components/form-field/textarea.gts

@@ -44,7 +44,8 @@ export default class FormFieldTextarea extends Component<FormFieldTextareaSignat
     const { textarea } = useStyles();
 
     return textarea({
-      size: this.args.size,
+      size: this.args.size
+    }).input({
       class: this.args.class
     });
   }

packages/forms/package.json

@@ -40,14 +40,14 @@
     "ember-source": "^4.0.0 || ^5.0.0"
   },
   "dependencies": {
+    "@ember/test-waiters": "^3.0.2",
     "@embroider/addon-shim": "^1.8.7",
     "@frontile/collections": "workspace:0.17.0-alpha.12",
     "@frontile/overlays": "workspace:0.17.0-alpha.12",
     "@frontile/theme": "workspace:0.17.0-alpha.12",
     "@frontile/utilities": "workspace:0.17.0-alpha.12",
     "@glint/template": "1.3.0",
-    "ember-basic-dropdown": "^7.3.0",
-    "ember-power-select": "^7.2.0"
+    "ember-modifier": "^4.1.0"
   },
   "devDependencies": {
     "@babel/core": "7.23.9",
@@ -85,8 +85,19 @@
     "type": "addon",
     "main": "addon-main.js",
     "app-js": {
+      "./components/checkbox-group.js": "./dist/_app_/components/checkbox-group.js",
+      "./components/checkbox.js": "./dist/_app_/components/checkbox.js",
+      "./components/form-control.js": "./dist/_app_/components/form-control.js",
+      "./components/form-description.js": "./dist/_app_/components/form-description.js",
+      "./components/form-feedback.js": "./dist/_app_/components/form-feedback.js",
+      "./components/form.js": "./dist/_app_/components/form.js",
+      "./components/input.js": "./dist/_app_/components/input.js",
+      "./components/label.js": "./dist/_app_/components/label.js",
       "./components/native-select.js": "./dist/_app_/components/native-select.js",
-      "./components/select.js": "./dist/_app_/components/select.js"
+      "./components/radio-group.js": "./dist/_app_/components/radio-group.js",
+      "./components/radio.js": "./dist/_app_/components/radio.js",
+      "./components/select.js": "./dist/_app_/components/select.js",
+      "./components/textarea.js": "./dist/_app_/components/textarea.js"
     }
   },
   "exports": {

packages/forms/src/components/checkbox-group.gts

@@ -0,0 +1,69 @@
+import Component from '@glimmer/component';
+import { Checkbox, type CheckboxSignature } from './checkbox';
+import { FormControl, type FormControlSharedArgs } from './form-control';
+import {
+  useStyles,
+  type CheckboxGroupVariants,
+  type CheckboxGroupSlots,
+  type SlotsToClasses
+} from '@frontile/theme';
+import type { WithBoundArgs } from '@glint/template';
+
+interface Args extends FormControlSharedArgs {
+  name?: string;
+  onChange?: CheckboxSignature['Args']['onChange'];
+  size?: CheckboxGroupVariants['size'];
+  classes?: SlotsToClasses<CheckboxGroupSlots>;
+
+  /*
+   *
+   * @defaultValue 'vertical'
+   */
+  orientation?: 'horizontal' | 'vertical';
+}
+
+interface CheckboxGroupSignature {
+  Args: Args;
+  Blocks: {
+    default: [Checkbox: WithBoundArgs<typeof Checkbox, 'name' | 'onChange'>];
+  };
+  Element: HTMLDivElement;
+}
+
+class CheckboxGroup extends Component<CheckboxGroupSignature> {
+  get classes() {
+    const { checkboxGroup } = useStyles();
+    return checkboxGroup({
+      size: this.args.size
+    });
+  }
+
+  <template>
+    <FormControl
+      @size={{@size}}
+      @isRequired={{@isRequired}}
+      @description={{@description}}
+      @errors={{@errors}}
+      @isInvalid={{@isInvalid}}
+      @class={{this.classes.base class=@classes.base}}
+      ...attributes
+      as |c|
+    >
+      <c.Label @class={{this.classes.label class=@classes.label}}>
+        {{@label}}
+      </c.Label>
+      <div
+        class={{this.classes.optionsContainer class=@classes.optionsContainer}}
+        data-orientation={{if @orientation @orientation "vertical"}}
+      >
+        {{yield
+          (component Checkbox name=@name onChange=@onChange size=@size)
+          to="default"
+        }}
+      </div>
+    </FormControl>
+  </template>
+}
+
+export { CheckboxGroup, type CheckboxGroupSignature };
+export default CheckboxGroup;

packages/forms/src/components/checkbox.gts

@@ -0,0 +1,91 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import { FormControl, type FormControlSharedArgs } from './form-control';
+import {
+  useStyles,
+  type CheckboxVariants,
+  type CheckboxSlots,
+  type SlotsToClasses
+} from '@frontile/theme';
+
+interface Args extends FormControlSharedArgs {
+  checked?: boolean;
+  name?: string;
+  size?: CheckboxVariants['size'];
+  classes?: SlotsToClasses<CheckboxSlots>;
+
+  /*
+   * Callback when onchange is triggered
+   */
+  onChange?: (value: boolean, event: Event) => void;
+}
+
+interface CheckboxSignature {
+  Args: Args;
+  Element: HTMLInputElement;
+}
+
+class Checkbox extends Component<CheckboxSignature> {
+  get isChecked(): boolean {
+    return !!this.args.checked;
+  }
+
+  @action handleChange(event: Event): void {
+    event.preventDefault();
+
+    const value = !this.args.checked;
+
+    if (typeof this.args.onChange === 'function') {
+      this.args.onChange(value, event);
+    }
+  }
+
+  get classes() {
+    const { checkbox } = useStyles();
+    return checkbox({
+      size: this.args.size
+    });
+  }
+
+  <template>
+    <FormControl
+      @isInvalid={{@isInvalid}}
+      @errors={{@errors}}
+      @size={{@size}}
+      @isRequired={{@isRequired}}
+      @class={{this.classes.base class=@classes.base}}
+      @preventErrorFeedback={{true}}
+      as |c|
+    >
+      <input
+        {{on "change" this.handleChange}}
+        id={{c.id}}
+        name={{@name}}
+        checked={{this.isChecked}}
+        type="checkbox"
+        class={{this.classes.input class=@classes.input}}
+        data-component="checkbox"
+        aria-invalid={{if c.isInvalid "true"}}
+        aria-describedby={{c.describedBy @description c.isInvalid}}
+        ...attributes
+      />
+      <div class={{this.classes.labelContainer class=@classes.labelContainer}}>
+        {{#if @label}}
+          <c.Label @class={{this.classes.label class=@classes.label}}>
+            {{@label}}
+          </c.Label>
+        {{/if}}
+        {{#if @description}}
+          <c.Description>{{@description}}</c.Description>
+        {{/if}}
+        {{#if c.isInvalid}}
+          <c.Feedback />
+        {{/if}}
+      </div>
+    </FormControl>
+  </template>
+}
+
+export { Checkbox, type CheckboxSignature };
+export default Checkbox;