Add Listbox component

.eslintrc.js

@@ -7,15 +7,17 @@ module.exports = {
   ],
   rules: {
     '@typescript-eslint/no-empty-interface': 'off',
-    'ember/no-empty-glimmer-component-classes': 'off'
+    'ember/no-empty-glimmer-component-classes': 'off',
+    'ember/no-runloop': 'off'
   },
   overrides: [
     {
       files: ['packages/**/tests/**/*.ts', '**/*.gts'],
       rules: {
         '@typescript-eslint/explicit-function-return-type': 'off',
         '@typescript-eslint/no-non-null-assertion': 'off',
-        '@typescript-eslint/no-useless-constructor': 'off'
+        '@typescript-eslint/no-useless-constructor': 'off',
+        'lines-between-class-members': 'off'
       }
     },
 

package.json

@@ -16,8 +16,7 @@
     "try:one": "pnpm --filter test-app try:one"
   },
   "resolutions": {
-    "@ember/test-waiters": "^3.0.2",
-    "ember-element-helper": "^0.7.1"
+    "@ember/test-waiters": "^3.0.2"
   },
   "dependencies": {
     "@ember/test-waiters": "^3.1.0",
@@ -27,15 +26,15 @@
     "@glint/core": "1.3.0",
     "@glint/environment-ember-loose": "1.3.0",
     "@glint/environment-ember-template-imports": "1.3.0",
-    "@underline/eslint-config-ember-typescript": "^0.15.2",
-    "@underline/eslint-config-node": "^0.15.1",
+    "@underline/eslint-config-ember-typescript": "^0.16.0",
+    "@underline/eslint-config-node": "^0.16.0",
     "ember-source-channel-url": "^3.0.0",
     "ember-template-lint": "^5.13.0",
     "eslint": "^8.56.0",
     "eslint-plugin-prettier": "^5.1.3",
     "lerna": "^8.0.2",
     "prettier": "^3.2.4",
-    "prettier-plugin-ember-template-tag": "^1.1.0",
+    "prettier-plugin-ember-template-tag": "^2.0.0",
     "typescript": "^5.3.3"
   },
   "engines": {

packages/buttons/babel.config.js

@@ -20,6 +20,7 @@ module.exports = {
     ],
     ['@babel/plugin-proposal-decorators', { legacy: true }],
     '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-transform-class-static-block'
+    '@babel/plugin-transform-class-static-block',
+    '@babel/plugin-transform-private-methods'
   ]
 };

packages/buttons/package.json

@@ -40,15 +40,19 @@
     "ember-source": "^4.0.0 || ^5.0.0"
   },
   "dependencies": {
+    "@ember/render-modifiers": "^2.1.0",
     "@embroider/addon-shim": "^1.8.7",
-    "@frontile/core": "^0.17.0-alpha.3",
-    "@frontile/theme": "^0.17.0-alpha.3"
+    "@frontile/core": "workspace:0.17.0-alpha.3",
+    "@frontile/theme": "workspace:0.17.0-alpha.3",
+    "ember-element-helper": "^0.8.5",
+    "ember-modifier": "^4.1.0"
   },
   "devDependencies": {
-    "@babel/core": "7.23.6",
+    "@babel/core": "7.23.7",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/plugin-proposal-decorators": "7.23.6",
+    "@babel/plugin-proposal-decorators": "7.23.7",
     "@babel/plugin-transform-class-static-block": "^7.23.4",
+    "@babel/plugin-transform-private-methods": "^7.23.3",
     "@babel/preset-typescript": "7.23.3",
     "@embroider/addon-dev": "4.1.3",
     "@glimmer/component": "^1.1.2",
@@ -58,14 +62,14 @@
     "@glint/environment-ember-template-imports": "1.3.0",
     "@glint/template": "1.3.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@tsconfig/ember": "^3.0.0",
-    "babel-plugin-ember-template-compilation": "^2.1.1",
-    "concurrently": "^8.2.0",
+    "@tsconfig/ember": "^3.0.3",
+    "babel-plugin-ember-template-compilation": "^2.2.1",
+    "concurrently": "^8.2.2",
     "ember-source": "^5.5.0",
-    "rollup": "^4.9.5",
-    "rollup-plugin-ts": "^3.2.0",
+    "rollup": "^4.9.6",
+    "rollup-plugin-ts": "^3.4.5",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5.1.6"
+    "typescript": "^5.3.3"
   },
   "engines": {
     "node": "10.* || >= 12"
@@ -84,6 +88,8 @@
       "./components/button-group.js": "./dist/_app_/components/button-group.js",
       "./components/button.js": "./dist/_app_/components/button.js",
       "./components/chip.js": "./dist/_app_/components/chip.js",
+      "./components/divider.js": "./dist/_app_/components/divider.js",
+      "./components/listbox.js": "./dist/_app_/components/listbox.js",
       "./components/progress-bar.js": "./dist/_app_/components/progress-bar.js",
       "./components/toggle-button.js": "./dist/_app_/components/toggle-button.js"
     }

packages/buttons/rollup.config.mjs

@@ -17,7 +17,7 @@ export default {
     // These are the modules that users should be able to import from your
     // addon. Anything not listed here may get optimized away.
     addon.publicEntrypoints([
-      'components/**/*.js',
+      'components/*.js',
       'helpers/**/*.js',
       'utils/**/*.js',
       'index.js',
@@ -27,11 +27,7 @@ export default {
     // These are the modules that should get reexported into the traditional
     // "app" tree. Things in here should also be in publicEntrypoints above, but
     // not everything in publicEntrypoints necessarily needs to go here.
-    addon.appReexports([
-      'components/**/*.js',
-      'helpers/**/*.js',
-      'utils/**/*.js'
-    ]),
+    addon.appReexports(['components/*.js', 'helpers/**/*.js', 'utils/**/*.js']),
 
     // Follow the V2 Addon rules about dependencies. Your code can import from
     // `dependencies` and `peerDependencies` as well as standard Ember-provided

packages/buttons/src/components/button-group.gts

@@ -33,9 +33,18 @@ export default class ButtonGroup extends Component<ButtonGroupSignature> {
 
   <template>
     <div class={{this.classNames}} role="group" ...attributes>
-      {{yield (hash
-          Button=(component Button isInGroup=true appearance=@appearance intent=@intent size=@size)
-          ToggleButton=(component ToggleButton isInGroup=true intent=@intent size=@size)
+      {{yield
+        (hash
+          Button=(component
+            Button
+            isInGroup=true
+            appearance=@appearance
+            intent=@intent
+            size=@size
+          )
+          ToggleButton=(component
+            ToggleButton isInGroup=true intent=@intent size=@size
+          )
         )
       }}
     </div>

packages/buttons/src/components/divider.gts

@@ -0,0 +1,39 @@
+import { hash } from '@ember/helper';
+import { useStyles } from '@frontile/theme';
+import { element } from 'ember-element-helper';
+import type { TOC } from '@ember/component/template-only';
+
+function getTag(
+  orientation: string | undefined,
+  as?: string | undefined
+): string {
+  if (as) {
+    return as;
+  }
+
+  if (orientation === 'vertical') {
+    return 'div';
+  }
+  return 'hr';
+}
+
+const { divider } = useStyles();
+
+const Divider: TOC<{
+  Args: {
+    orientation?: 'horizontal' | 'vertical';
+    as: string;
+    class?: string;
+  };
+  Element: HTMLDivElement;
+}> = <template>
+  {{#let (element (getTag @orientation @as)) as |Tag|}}
+    <Tag
+      class={{(divider (hash class=@class))}}
+      role="separator"
+      data-test-id="divider"
+    />
+  {{/let}}
+</template>;
+
+export default Divider;

packages/buttons/src/components/listbox.md

@@ -0,0 +1,137 @@
+---
+label: New
+---
+# Listbox
+
+A listbox presents a collection of items, offering the user the option to select 
+or not, one or multiple items from the list. This component serves as the foundation 
+for Select, Dropdowns, and other similar components.
+
+## Import 
+
+```js
+import { Listbox } from '@frontile/buttons';
+```
+
+## Usage
+
+In the example below, the listbox is configured in a multi-select mode, featuring 
+a dynamic item list, and it permits an empty selection (no items chosen).
+
+```gts preview
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { Listbox } from '@frontile/buttons';
+
+export default class DemoComponent extends Component {
+  @tracked selectedKeys: string[] = [];
+
+  @action
+  onAction(key: string) {
+    console.log('Click on key', key);
+  }
+
+  @action
+  onSelectionChange(keys: string[]) {
+    this.selectedKeys = keys;
+  }
+
+  <template>
+    <div class="w-[260px] border px-1 py-2 rounded border-default-200 text-foreground not-prose">
+      <Listbox
+        @isKeyboardEventsEnabled={{true}}
+        @allowEmpty={{true}}
+        @selectionMode="multiple"
+        @items={{animals}}
+        @selectedKeys={{this.selectedKeys}}
+        @onSelectionChange={{this.onSelectionChange}}
+        @onAction={{this.onAction}}
+        @intent="primary"
+      />
+    </div>
+    <div class="py-2 px-1">
+      Selected Keys: "{{this.selectedKeys}}"
+    </div>
+  </template>
+}
+
+const animals = [
+  'cheetah',
+  'crocodile',
+  'elephant',
+  'giraffe',
+  'kangaroo',
+  'koala',
+  'lemming',
+  'lemur',
+  'lion',
+  'lobster',
+  'panda',
+  'penguin',
+  'tiger',
+  'zebra'
+];
+```
+
+## Static items
+
+
+In this example, static items are showcased, incorporating various features such as 
+shortcuts and distinct intents, all within a no-selection mode.
+
+```gts preview
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { Listbox } from '@frontile/buttons';
+
+const disabledKeys = ['reset']
+
+export default class DemoComponent extends Component {
+
+  @action
+  onAction(key: string) {
+    console.log('Click on key', key);
+  }
+
+  <template>
+    <div class="w-[260px] border px-1 py-2 rounded border-default-200 text-foreground not-prose">
+      <Listbox
+        @isKeyboardEventsEnabled={{true}}
+        @onAction={{this.onAction}}
+        @appearance="faded"
+        @disabledKeys={{disabledKeys}}
+        as |l|
+      >
+        <l.Item @key="profile" @description="View my profile">
+          My Provile
+        </l.Item>
+        <l.Item @key="settings" @shortcut="⌘⇧S">Settings</l.Item>
+        <l.Item @key="notifications" @shortcut="⌘⇧N" @withDivider={{true}}>
+          Notifications
+        </l.Item>
+        <l.Item
+          @key="reset"
+          @intent="danger"
+          @class="text-danger"
+        >
+          Reset Settings 
+        </l.Item>
+        <l.Item
+          @key="delete"
+          @shortcut="⌘⇧D"
+          @intent="danger"
+          @class="text-danger"
+        >
+          Delete Account
+        </l.Item>
+      </Listbox>
+    </div>
+  </template>
+}
+```
+
+Kindly be aware that the implementation of shortcut event handling is your responsibility.
+
+## API
+

packages/buttons/src/components/listbox.ts

@@ -0,0 +1,2 @@
+export { default } from './listbox/listbox';
+export type { ListboxSignature } from './listbox/listbox';