feat: command component

[ashley-hunter]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our
  guidelines: https://github.com/goetzrobin/spartan/blob/main/CONTRIBUTING.md#-commit-message-guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

Which package are you modifying?

• accordion
• alert
• alert-dialog
• aspect-ratio
• avatar
• badge
• button
• calendar
• card
• checkbox
• collapsible
• combobox
• command
• context-menu
• data-table
• date-picker
• dialog
• dropdown-menu
• hover-card
• icon
• input
• label
• menubar
• navigation-menu
• pagination
• popover
• progress
• radio-group
• scroll-area
• select
• separator
• sheet
• skeleton
• slider
• sonner
• spinner
• switch
• table
• tabs
• textarea
• toast
• toggle
• tooltip
• typography

What is the current behavior?

Closes #414

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

This is our own implementation of the command feature, removing several third party dependencies. Unfortunately this change is too complex to automate with migrations.

[marcjulian]

Looks really awesome your implementation. Do you think this could be used as a base for an autocomplete component too?

I tested it locally and when I refresh the page on the command page an error is thrown in the terminal - probably ssr!?

ERROR TypeError: this._elementRef.nativeElement.scrollIntoView is not a function
    at BrnCommandItemDirective.setActiveStyles (/Users/m/Dev/forkes/spartan/libs/brain/command/src/lib/brn-command-item.directive.ts:45:40)
    at ActiveDescendantKeyManager.setActiveItem (/Users/m/Dev/forkes/spartan/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]__r_6cirxdnkqtiqwuvz7434fepkem/node_modules/@angular/cdk/fesm2022/a11y.mjs:723:29)
    at BrnCommandDirective.ngAfterViewInit (/Users/m/Dev/forkes/spartan/libs/brain/command/src/lib/brn-command.directive.ts:46:29)
    at callHookInternal (/Users/m/Dev/forkes/spartan/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@angular/core/fesm2022/core.mjs:5159:14)
    at callHook (/Users/m/Dev/forkes/spartan/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@angular/core/fesm2022/core.mjs:5186:13)
    at callHooks (/Users/m/Dev/forkes/spartan/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@angular/core/fesm2022/core.mjs:5140:17)
    at executeInitAndCheckHooks (/Users/m/Dev/forkes/spartan/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@angular/core/fesm2022/core.mjs:5090:9)
    at refreshView (/Users/m/Dev/forkes/spartan/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@angular/core/fesm2022/core.mjs:13868:21)
    at detectChangesInView (/Users/m/Dev/forkes/spartan/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@angular/core/fesm2022/core.mjs:14009:9)
    at detectChangesInViewIfAttached (/Users/m/Dev/forkes/spartan/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@angular/core/fesm2022/core.mjs:13969:5)

[goetzrobin]

Couple minor things, but love love love this!!! As always, incredible work @ashley-hunter!!! Thanks so much!

[goetzrobin]

Looks really awesome your implementation. Do you think this could be used as a base for an autocomplete component too?

I tested it locally and when I refresh the page on the command page an error is thrown in the terminal - probably ssr!?

ERROR TypeError: this._elementRef.nativeElement.scrollIntoView is not a function
    at BrnCommandItemDirective.setActiveStyles (/Users/m/Dev/forkes/spartan/libs/brain/command/src/lib/brn-command-item.directive.ts:45:40)
    at ActiveDescendantKeyManager.setActiveItem (/Users/m/Dev/forkes/spartan/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]__r_6cirxdnkqtiqwuvz7434fepkem/node_modules/@angular/cdk/fesm2022/a11y.mjs:723:29)
    at BrnCommandDirective.ngAfterViewInit (/Users/m/Dev/forkes/spartan/libs/brain/command/src/lib/brn-command.directive.ts:46:29)
    at callHookInternal (/Users/m/Dev/forkes/spartan/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@angular/core/fesm2022/core.mjs:5159:14)
    at callHook (/Users/m/Dev/forkes/spartan/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@angular/core/fesm2022/core.mjs:5186:13)
    at callHooks (/Users/m/Dev/forkes/spartan/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@angular/core/fesm2022/core.mjs:5140:17)
    at executeInitAndCheckHooks (/Users/m/Dev/forkes/spartan/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@angular/core/fesm2022/core.mjs:5090:9)
    at refreshView (/Users/m/Dev/forkes/spartan/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@angular/core/fesm2022/core.mjs:13868:21)
    at detectChangesInView (/Users/m/Dev/forkes/spartan/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@angular/core/fesm2022/core.mjs:14009:9)
    at detectChangesInViewIfAttached (/Users/m/Dev/forkes/spartan/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@angular/core/fesm2022/core.mjs:13969:5)

This is related to my comment in setActiveStyles!

[ashley-hunter]

Thank you very much for all the great feedback! Hopefully that should be those issue resloved now!

[marcjulian]

LGTM! Do you think this could be used for an autocomplete component too?