@teambit/command-bar 0.0.706 → 0.0.709

package/command-bar.module.scss

@@ -0,0 +1,11 @@
+.commanderUi {
+  position: fixed;
+  top: 130px;
+  left: 50%;
+  transform: translate(-50%, 0);
+
+  width: 643px;
+  max-width: 90%;
+
+  font-size: 20px;
+}

package/command-bar.ui.runtime.tsx

@@ -1,28 +1,31 @@
-import React, { ReactNode } from 'react';
-import { Slot, SlotRegistry } from '@teambit/harmony';
+import React, { useState } from 'react';
+import flatten from 'lodash.flatten';
 import Mousetrap from 'mousetrap';
 
+import { Slot, SlotRegistry } from '@teambit/harmony';
 import UIAspect, { UIRuntime, UiUI } from '@teambit/ui';
 import { PubsubAspect, PubsubUI } from '@teambit/pubsub';
+import { ReactRouterAspect } from '@teambit/react-router';
 import { isBrowser } from '@teambit/ui-foundation.ui.is-browser';
-import { CommandBar } from './ui/command-bar';
-import { CommandSearcher } from './ui/command-searcher';
+import { CommandBar } from '@teambit/explorer.ui.command-bar';
 import { CommandBarAspect } from './command-bar.aspect';
 import { commandBarCommands } from './command-bar.commands';
-import { SearchProvider, Keybinding, CommandHandler, CommandId } from './types';
+import { CommandSearcher, SearchProvider } from './searchers';
+import { Keybinding, CommandHandler, CommandId } from './types';
 import { DuplicateCommandError } from './duplicate-command-error';
 import { KeyEvent } from './model/key-event';
-import { CommandBarContext } from './ui/command-bar-context';
 import { MousetrapStub } from './mousetrap-stub';
 import { openCommandBarKeybinding } from './keybinding';
 
+import styles from './command-bar.module.scss';
+
 const RESULT_LIMIT = 5;
-type SearcherSlot = SlotRegistry<SearchProvider>;
+type SearcherSlot = SlotRegistry<SearchProvider[]>;
 type CommandSlot = SlotRegistry<CommandEntry[]>;
 
 export type CommandEntry = {
   id: CommandId;
-  handler: CommandHandler;
+  action: CommandHandler;
   keybinding?: Keybinding;
   displayName: string;
 };
@@ -44,7 +47,7 @@ export class CommandBarUI {
   };
 
   /** Add and autocomplete provider. To support keyboard navigation, each result should have a props `active: boolean`, and `exectue: () => any` */
-  addSearcher(commandSearcher: SearchProvider) {
+  addSearcher(...commandSearcher: SearchProvider[]) {
     this.searcherSlot.register(commandSearcher);
     return this;
   }
@@ -61,7 +64,7 @@ export class CommandBarUI {
     const commands = originalCommands.map((x) => ({
       id: x.id,
       displayName: x.displayName,
-      handler: x.handler,
+      action: x.action,
       keybinding: x.keybinding,
     }));
 
@@ -76,7 +79,7 @@ export class CommandBarUI {
     this.updateCommandsSearcher();
 
     const updaters = commands.map((command) => (next: CommandHandler) => {
-      command.handler = next;
+      command.action = next;
     });
     return updaters;
   }
@@ -89,7 +92,7 @@ export class CommandBarUI {
     const commandEntry = this.getCommand(commandId);
     if (!commandEntry) return undefined;
 
-    return commandEntry.handler();
+    return commandEntry.action();
   }
 
   /**
@@ -100,7 +103,7 @@ export class CommandBarUI {
   };
 
   private search = (term: string, limit: number = RESULT_LIMIT) => {
-    const searchers = this.searcherSlot.values();
+    const searchers = flatten(this.searcherSlot.values());
 
     const searcher = searchers.find((x) => x.test(term));
     return searcher?.search(term, limit) || [];
@@ -124,51 +127,60 @@ export class CommandBarUI {
     this.mousetrap.bind(key, this.run.bind(this, command));
   }
 
-  private renderContext = ({ children }: { children: ReactNode }) => {
-    return <CommandBarContext.Provider value={this}>{children}</CommandBarContext.Provider>;
-  };
-
   /**
-   * internal. Opens and closes the command bar UI.
+   * Opens and closes the command bar UI.
    */
-  setVisibility?: (visible: boolean) => void;
+  private setVisibility?: (visible: boolean) => void;
 
   /**
    * generate the ui for command bar
    */
-  getCommandBar = () => {
-    return <CommandBar key="CommandBarUI" search={this.search} commander={this} />;
+  private CommandBar = () => {
+    const [visible, setVisibility] = useState(false);
+    this.setVisibility = setVisibility;
+
+    return (
+      <CommandBar
+        key="CommandBarUI"
+        className={styles.commanderUi}
+        searcher={this.search}
+        placeholder="Search anything or type > to only search commands"
+        visible={visible}
+        onVisibilityChange={setVisibility}
+      />
+    );
   };
 
-  constructor(private searcherSlot: SearcherSlot, private commandSlot: CommandSlot, pubSub: PubsubUI) {
-    this.addSearcher(this.commandSearcher);
-    pubSub.sub(CommandBarAspect.id, (e: KeyEvent) => {
-      const keyboardEvent = new KeyboardEvent(e.type, e.data);
-      document.dispatchEvent(keyboardEvent);
-    });
-  }
+  constructor(private searcherSlot: SearcherSlot, private commandSlot: CommandSlot) {}
 
-  static dependencies = [UIAspect, PubsubAspect];
+  static dependencies = [UIAspect, PubsubAspect, ReactRouterAspect];
   static slots = [Slot.withType<SearchProvider>(), Slot.withType<CommandEntry[]>()];
   static runtime = UIRuntime;
   static async provider(
-    [uiUi, pubsubUI]: [UiUI, PubsubUI],
+    [uiUi, pubsubUI]: [UiUI | undefined, PubsubUI | undefined],
     config,
     [searcherSlot, commandSlots]: [SearcherSlot, CommandSlot]
   ) {
-    const commandBar = new CommandBarUI(searcherSlot, commandSlots, pubsubUI);
+    const commandBar = new CommandBarUI(searcherSlot, commandSlots);
 
+    commandBar.addSearcher(commandBar.commandSearcher);
     commandBar.addCommand({
       id: commandBarCommands.open,
-      handler: commandBar.open,
+      action: commandBar.open,
       displayName: 'Open command bar',
       keybinding: openCommandBarKeybinding,
     });
 
-    uiUi.registerHudItem(commandBar.getCommandBar());
-    uiUi.registerRenderHooks({
-      reactContext: commandBar.renderContext,
-    });
+    if (pubsubUI) {
+      pubsubUI.sub(CommandBarAspect.id, (e: KeyEvent) => {
+        const keyboardEvent = new KeyboardEvent(e.type, e.data);
+        document.dispatchEvent(keyboardEvent);
+      });
+    }
+
+    if (uiUi) {
+      uiUi.registerHudItem(<commandBar.CommandBar />);
+    }
 
     return commandBar;
   }

package/dist/command-bar.module.scss

@@ -0,0 +1,11 @@
+.commanderUi {
+  position: fixed;
+  top: 130px;
+  left: 50%;
+  transform: translate(-50%, 0);
+
+  width: 643px;
+  max-width: 90%;
+
+  font-size: 20px;
+}

package/dist/command-bar.ui.runtime.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
 import { SlotRegistry } from '@teambit/harmony';
 import { UiUI } from '@teambit/ui';
 import { PubsubUI } from '@teambit/pubsub';
-import { SearchProvider, Keybinding, CommandHandler, CommandId } from './types';
-declare type SearcherSlot = SlotRegistry<SearchProvider>;
+import { SearchProvider } from './searchers';
+import { Keybinding, CommandHandler, CommandId } from './types';
+declare type SearcherSlot = SlotRegistry<SearchProvider[]>;
 declare type CommandSlot = SlotRegistry<CommandEntry[]>;
 export declare type CommandEntry = {
     id: CommandId;
-    handler: CommandHandler;
+    action: CommandHandler;
     keybinding?: Keybinding;
     displayName: string;
 };
@@ -22,7 +22,7 @@ export declare class CommandBarUI {
     /** Closes the command bar */
     close: () => void;
     /** Add and autocomplete provider. To support keyboard navigation, each result should have a props `active: boolean`, and `exectue: () => any` */
-    addSearcher(commandSearcher: SearchProvider): this;
+    addSearcher(...commandSearcher: SearchProvider[]): this;
     /**
      * registers a command
      */
@@ -40,19 +40,18 @@ export declare class CommandBarUI {
     private getCommand;
     private updateCommandsSearcher;
     private addKeybinding;
-    private renderContext;
     /**
-     * internal. Opens and closes the command bar UI.
+     * Opens and closes the command bar UI.
      */
-    setVisibility?: (visible: boolean) => void;
+    private setVisibility?;
     /**
      * generate the ui for command bar
      */
-    getCommandBar: () => JSX.Element;
-    constructor(searcherSlot: SearcherSlot, commandSlot: CommandSlot, pubSub: PubsubUI);
+    private CommandBar;
+    constructor(searcherSlot: SearcherSlot, commandSlot: CommandSlot);
     static dependencies: import("@teambit/harmony").Aspect[];
     static slots: (((registerFn: () => string) => SlotRegistry<SearchProvider>) | ((registerFn: () => string) => SlotRegistry<CommandEntry[]>))[];
     static runtime: import("@teambit/harmony").RuntimeDefinition;
-    static provider([uiUi, pubsubUI]: [UiUI, PubsubUI], config: any, [searcherSlot, commandSlots]: [SearcherSlot, CommandSlot]): Promise<CommandBarUI>;
+    static provider([uiUi, pubsubUI]: [UiUI | undefined, PubsubUI | undefined], config: any, [searcherSlot, commandSlots]: [SearcherSlot, CommandSlot]): Promise<CommandBarUI>;
 }
 export {};

package/dist/command-bar.ui.runtime.js

@@ -28,7 +28,7 @@ function _defineProperty2() {
 }
 
 function _react() {
-  const data = _interopRequireDefault(require("react"));
+  const data = _interopRequireWildcard(require("react"));
 
   _react = function () {
     return data;
@@ -37,10 +37,10 @@ function _react() {
   return data;
 }
 
-function _harmony() {
-  const data = require("@teambit/harmony");
+function _lodash() {
+  const data = _interopRequireDefault(require("lodash.flatten"));
 
-  _harmony = function () {
+  _lodash = function () {
     return data;
   };
 
@@ -57,6 +57,16 @@ function _mousetrap() {
   return data;
 }
 
+function _harmony() {
+  const data = require("@teambit/harmony");
+
+  _harmony = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _ui() {
   const data = _interopRequireWildcard(require("@teambit/ui"));
 
@@ -77,70 +87,70 @@ function _pubsub() {
   return data;
 }
 
-function _uiFoundationUi() {
-  const data = require("@teambit/ui-foundation.ui.is-browser");
+function _reactRouter() {
+  const data = require("@teambit/react-router");
 
-  _uiFoundationUi = function () {
+  _reactRouter = function () {
     return data;
   };
 
   return data;
 }
 
-function _commandBar() {
-  const data = require("./ui/command-bar");
+function _uiFoundationUi() {
+  const data = require("@teambit/ui-foundation.ui.is-browser");
 
-  _commandBar = function () {
+  _uiFoundationUi = function () {
     return data;
   };
 
   return data;
 }
 
-function _commandSearcher() {
-  const data = require("./ui/command-searcher");
+function _explorerUi() {
+  const data = require("@teambit/explorer.ui.command-bar");
 
-  _commandSearcher = function () {
+  _explorerUi = function () {
     return data;
   };
 
   return data;
 }
 
-function _commandBar2() {
+function _commandBar() {
   const data = require("./command-bar.aspect");
 
-  _commandBar2 = function () {
+  _commandBar = function () {
     return data;
   };
 
   return data;
 }
 
-function _commandBar3() {
+function _commandBar2() {
   const data = require("./command-bar.commands");
 
-  _commandBar3 = function () {
+  _commandBar2 = function () {
     return data;
   };
 
   return data;
 }
 
-function _duplicateCommandError() {
-  const data = require("./duplicate-command-error");
+function _searchers() {
+  const data = require("./searchers");
 
-  _duplicateCommandError = function () {
+  _searchers = function () {
     return data;
   };
 
   return data;
 }
 
-function _commandBarContext() {
-  const data = require("./ui/command-bar-context");
+function _duplicateCommandError() {
+  const data = require("./duplicate-command-error");
 
-  _commandBarContext = function () {
+  _duplicateCommandError = function () {
     return data;
   };
 
@@ -167,6 +177,16 @@ function _keybinding() {
   return data;
 }
 
+function _commandBarModule() {
+  const data = _interopRequireDefault(require("./command-bar.module.scss"));
+
+  _commandBarModule = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -180,7 +200,7 @@ class CommandBarUI {
   /** Closes the command bar */
 
   /** Add and autocomplete provider. To support keyboard navigation, each result should have a props `active: boolean`, and `exectue: () => any` */
-  addSearcher(commandSearcher) {
+  addSearcher(...commandSearcher) {
     this.searcherSlot.register(commandSearcher);
     return this;
   }
@@ -199,7 +219,7 @@ class CommandBarUI {
     const commands = originalCommands.map(x => ({
       id: x.id,
       displayName: x.displayName,
-      handler: x.handler,
+      action: x.action,
       keybinding: x.keybinding
     }));
     this.commandSlot.register(commands);
@@ -210,7 +230,7 @@ class CommandBarUI {
     });
     this.updateCommandsSearcher();
     const updaters = commands.map(command => next => {
-      command.handler = next;
+      command.action = next;
     });
     return updaters;
   }
@@ -223,7 +243,7 @@ class CommandBarUI {
   run(commandId) {
     const commandEntry = this.getCommand(commandId);
     if (!commandEntry) return undefined;
-    return commandEntry.handler();
+    return commandEntry.action();
   }
   /**
    * executes a keyboard shortcut manually
@@ -243,12 +263,16 @@ class CommandBarUI {
   addKeybinding(key, command) {
     this.mousetrap.bind(key, this.run.bind(this, command));
   }
+  /**
+   * Opens and closes the command bar UI.
+   */
 
-  constructor(searcherSlot, commandSlot, pubSub) {
+
+  constructor(searcherSlot, commandSlot) {
     this.searcherSlot = searcherSlot;
     this.commandSlot = commandSlot;
     (0, _defineProperty2().default)(this, "mousetrap", _uiFoundationUi().isBrowser ? new (_mousetrap().default)() : new (_mousetrapStub().MousetrapStub)());
-    (0, _defineProperty2().default)(this, "commandSearcher", new (_commandSearcher().CommandSearcher)([]));
+    (0, _defineProperty2().default)(this, "commandSearcher", new (_searchers().CommandSearcher)([]));
     (0, _defineProperty2().default)(this, "open", () => {
       var _this$setVisibility;
 
@@ -264,54 +288,56 @@ class CommandBarUI {
       this.mousetrap.trigger(key);
     });
     (0, _defineProperty2().default)(this, "search", (term, limit = RESULT_LIMIT) => {
-      const searchers = this.searcherSlot.values();
+      const searchers = (0, _lodash().default)(this.searcherSlot.values());
       const searcher = searchers.find(x => x.test(term));
       return (searcher === null || searcher === void 0 ? void 0 : searcher.search(term, limit)) || [];
     });
-    (0, _defineProperty2().default)(this, "renderContext", ({
-      children
-    }) => {
-      return /*#__PURE__*/_react().default.createElement(_commandBarContext().CommandBarContext.Provider, {
-        value: this
-      }, children);
-    });
     (0, _defineProperty2().default)(this, "setVisibility", void 0);
-    (0, _defineProperty2().default)(this, "getCommandBar", () => {
-      return /*#__PURE__*/_react().default.createElement(_commandBar().CommandBar, {
+    (0, _defineProperty2().default)(this, "CommandBar", () => {
+      const [visible, setVisibility] = (0, _react().useState)(false);
+      this.setVisibility = setVisibility;
+      return /*#__PURE__*/_react().default.createElement(_explorerUi().CommandBar, {
         key: "CommandBarUI",
-        search: this.search,
-        commander: this
+        className: _commandBarModule().default.commanderUi,
+        searcher: this.search,
+        placeholder: "Search anything or type > to only search commands",
+        visible: visible,
+        onVisibilityChange: setVisibility
       });
     });
-    this.addSearcher(this.commandSearcher);
-    pubSub.sub(_commandBar2().CommandBarAspect.id, e => {
-      const keyboardEvent = new KeyboardEvent(e.type, e.data);
-      document.dispatchEvent(keyboardEvent);
-    });
   }
 
   static async provider([uiUi, pubsubUI], config, [searcherSlot, commandSlots]) {
-    const commandBar = new CommandBarUI(searcherSlot, commandSlots, pubsubUI);
+    const commandBar = new CommandBarUI(searcherSlot, commandSlots);
+    commandBar.addSearcher(commandBar.commandSearcher);
     commandBar.addCommand({
-      id: _commandBar3().commandBarCommands.open,
-      handler: commandBar.open,
+      id: _commandBar2().commandBarCommands.open,
+      action: commandBar.open,
       displayName: 'Open command bar',
       keybinding: _keybinding().openCommandBarKeybinding
     });
-    uiUi.registerHudItem(commandBar.getCommandBar());
-    uiUi.registerRenderHooks({
-      reactContext: commandBar.renderContext
-    });
+
+    if (pubsubUI) {
+      pubsubUI.sub(_commandBar().CommandBarAspect.id, e => {
+        const keyboardEvent = new KeyboardEvent(e.type, e.data);
+        document.dispatchEvent(keyboardEvent);
+      });
+    }
+
+    if (uiUi) {
+      uiUi.registerHudItem( /*#__PURE__*/_react().default.createElement(commandBar.CommandBar, null));
+    }
+
     return commandBar;
   }
 
 }
 
 exports.CommandBarUI = CommandBarUI;
-(0, _defineProperty2().default)(CommandBarUI, "dependencies", [_ui().default, _pubsub().PubsubAspect]);
+(0, _defineProperty2().default)(CommandBarUI, "dependencies", [_ui().default, _pubsub().PubsubAspect, _reactRouter().ReactRouterAspect]);
 (0, _defineProperty2().default)(CommandBarUI, "slots", [_harmony().Slot.withType(), _harmony().Slot.withType()]);
 (0, _defineProperty2().default)(CommandBarUI, "runtime", _ui().UIRuntime);
 
-_commandBar2().CommandBarAspect.addRuntime(CommandBarUI);
+_commandBar().CommandBarAspect.addRuntime(CommandBarUI);
 
 //# sourceMappingURL=command-bar.ui.runtime.js.map

package/dist/command-bar.ui.runtime.js.map

@@ -1 +1 @@
-{"version":3,"sources":["command-bar.ui.runtime.tsx"],"names":["RESULT_LIMIT","CommandBarUI","addSearcher","commandSearcher","searcherSlot","register","addCommand","originalCommands","forEach","id","commandId","getCommand","undefined","DuplicateCommandError","commands","map","x","displayName","handler","keybinding","commandSlot","command","addKeybinding","updateCommandsSearcher","updaters","next","run","commandEntry","relevantCommands","values","find","filter","pop","flat","update","key","mousetrap","bind","constructor","pubSub","isBrowser","Mousetrap","MousetrapStub","CommandSearcher","setVisibility","trigger","term","limit","searchers","searcher","test","search","children","sub","CommandBarAspect","e","keyboardEvent","KeyboardEvent","type","data","document","dispatchEvent","provider","uiUi","pubsubUI","config","commandSlots","commandBar","commandBarCommands","open","openCommandBarKeybinding","registerHudItem","getCommandBar","registerRenderHooks","reactContext","renderContext","UIAspect","PubsubAspect","Slot","withType","UIRuntime","addRuntime"],"mappings":"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","sourcesContent":["import React, { ReactNode } from 'react';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport Mousetrap from 'mousetrap';\n\nimport UIAspect, { UIRuntime, UiUI } from '@teambit/ui';\nimport { PubsubAspect, PubsubUI } from '@teambit/pubsub';\nimport { isBrowser } from '@teambit/ui-foundation.ui.is-browser';\nimport { CommandBar } from './ui/command-bar';\nimport { CommandSearcher } from './ui/command-searcher';\nimport { CommandBarAspect } from './command-bar.aspect';\nimport { commandBarCommands } from './command-bar.commands';\nimport { SearchProvider, Keybinding, CommandHandler, CommandId } from './types';\nimport { DuplicateCommandError } from './duplicate-command-error';\nimport { KeyEvent } from './model/key-event';\nimport { CommandBarContext } from './ui/command-bar-context';\nimport { MousetrapStub } from './mousetrap-stub';\nimport { openCommandBarKeybinding } from './keybinding';\n\nconst RESULT_LIMIT = 5;\ntype SearcherSlot = SlotRegistry<SearchProvider>;\ntype CommandSlot = SlotRegistry<CommandEntry[]>;\n\nexport type CommandEntry = {\n  id: CommandId;\n  handler: CommandHandler;\n  keybinding?: Keybinding;\n  displayName: string;\n};\n\n/** Quick launch actions. Use the `addSearcher` slot to extend the available actions */\nexport class CommandBarUI {\n  private mousetrap = isBrowser ? new Mousetrap() : new MousetrapStub();\n  private commandSearcher = new CommandSearcher([]);\n\n  /** Opens the command bar */\n  open = () => {\n    this.setVisibility?.(true);\n    return false; // aka prevent default\n  };\n\n  /** Closes the command bar */\n  close = () => {\n    this.setVisibility?.(false);\n  };\n\n  /** Add and autocomplete provider. To support keyboard navigation, each result should have a props `active: boolean`, and `exectue: () => any` */\n  addSearcher(commandSearcher: SearchProvider) {\n    this.searcherSlot.register(commandSearcher);\n    return this;\n  }\n\n  /**\n   * registers a command\n   */\n  addCommand(...originalCommands: CommandEntry[]) {\n    originalCommands.forEach(({ id: commandId }) => {\n      if (this.getCommand(commandId) !== undefined) throw new DuplicateCommandError(commandId);\n    });\n\n    // commands could mutate later on, clone to ensure immutability 👌\n    const commands = originalCommands.map((x) => ({\n      id: x.id,\n      displayName: x.displayName,\n      handler: x.handler,\n      keybinding: x.keybinding,\n    }));\n\n    this.commandSlot.register(commands);\n\n    commands.forEach((command) => {\n      if (command.keybinding) {\n        this.addKeybinding(command.keybinding, command.id);\n      }\n    });\n\n    this.updateCommandsSearcher();\n\n    const updaters = commands.map((command) => (next: CommandHandler) => {\n      command.handler = next;\n    });\n    return updaters;\n  }\n\n  /**\n   * executes command by name, if exists.\n   * @param commandId\n   */\n  run(commandId: CommandId) {\n    const commandEntry = this.getCommand(commandId);\n    if (!commandEntry) return undefined;\n\n    return commandEntry.handler();\n  }\n\n  /**\n   * executes a keyboard shortcut manually\n   */\n  trigger = (key: string) => {\n    this.mousetrap.trigger(key);\n  };\n\n  private search = (term: string, limit: number = RESULT_LIMIT) => {\n    const searchers = this.searcherSlot.values();\n\n    const searcher = searchers.find((x) => x.test(term));\n    return searcher?.search(term, limit) || [];\n  };\n\n  private getCommand(id: CommandId) {\n    const relevantCommands = this.commandSlot\n      .values()\n      .map((commands) => commands.find((command) => command.id === id))\n      .filter((x) => !!x);\n\n    return relevantCommands.pop();\n  }\n\n  private updateCommandsSearcher() {\n    const commands = this.commandSlot.values().flat();\n    this.commandSearcher.update(commands);\n  }\n\n  private addKeybinding(key: Keybinding, command: CommandId) {\n    this.mousetrap.bind(key, this.run.bind(this, command));\n  }\n\n  private renderContext = ({ children }: { children: ReactNode }) => {\n    return <CommandBarContext.Provider value={this}>{children}</CommandBarContext.Provider>;\n  };\n\n  /**\n   * internal. Opens and closes the command bar UI.\n   */\n  setVisibility?: (visible: boolean) => void;\n\n  /**\n   * generate the ui for command bar\n   */\n  getCommandBar = () => {\n    return <CommandBar key=\"CommandBarUI\" search={this.search} commander={this} />;\n  };\n\n  constructor(private searcherSlot: SearcherSlot, private commandSlot: CommandSlot, pubSub: PubsubUI) {\n    this.addSearcher(this.commandSearcher);\n    pubSub.sub(CommandBarAspect.id, (e: KeyEvent) => {\n      const keyboardEvent = new KeyboardEvent(e.type, e.data);\n      document.dispatchEvent(keyboardEvent);\n    });\n  }\n\n  static dependencies = [UIAspect, PubsubAspect];\n  static slots = [Slot.withType<SearchProvider>(), Slot.withType<CommandEntry[]>()];\n  static runtime = UIRuntime;\n  static async provider(\n    [uiUi, pubsubUI]: [UiUI, PubsubUI],\n    config,\n    [searcherSlot, commandSlots]: [SearcherSlot, CommandSlot]\n  ) {\n    const commandBar = new CommandBarUI(searcherSlot, commandSlots, pubsubUI);\n\n    commandBar.addCommand({\n      id: commandBarCommands.open,\n      handler: commandBar.open,\n      displayName: 'Open command bar',\n      keybinding: openCommandBarKeybinding,\n    });\n\n    uiUi.registerHudItem(commandBar.getCommandBar());\n    uiUi.registerRenderHooks({\n      reactContext: commandBar.renderContext,\n    });\n\n    return commandBar;\n  }\n}\n\nCommandBarAspect.addRuntime(CommandBarUI);\n"]}
+{"version":3,"sources":["command-bar.ui.runtime.tsx"],"names":["RESULT_LIMIT","CommandBarUI","addSearcher","commandSearcher","searcherSlot","register","addCommand","originalCommands","forEach","id","commandId","getCommand","undefined","DuplicateCommandError","commands","map","x","displayName","action","keybinding","commandSlot","command","addKeybinding","updateCommandsSearcher","updaters","next","run","commandEntry","relevantCommands","values","find","filter","pop","flat","update","key","mousetrap","bind","constructor","isBrowser","Mousetrap","MousetrapStub","CommandSearcher","setVisibility","trigger","term","limit","searchers","searcher","test","search","visible","styles","commanderUi","provider","uiUi","pubsubUI","config","commandSlots","commandBar","commandBarCommands","open","openCommandBarKeybinding","sub","CommandBarAspect","e","keyboardEvent","KeyboardEvent","type","data","document","dispatchEvent","registerHudItem","UIAspect","PubsubAspect","ReactRouterAspect","Slot","withType","UIRuntime","addRuntime"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport flatten from 'lodash.flatten';\nimport Mousetrap from 'mousetrap';\n\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport UIAspect, { UIRuntime, UiUI } from '@teambit/ui';\nimport { PubsubAspect, PubsubUI } from '@teambit/pubsub';\nimport { ReactRouterAspect } from '@teambit/react-router';\nimport { isBrowser } from '@teambit/ui-foundation.ui.is-browser';\nimport { CommandBar } from '@teambit/explorer.ui.command-bar';\nimport { CommandBarAspect } from './command-bar.aspect';\nimport { commandBarCommands } from './command-bar.commands';\nimport { CommandSearcher, SearchProvider } from './searchers';\nimport { Keybinding, CommandHandler, CommandId } from './types';\nimport { DuplicateCommandError } from './duplicate-command-error';\nimport { KeyEvent } from './model/key-event';\nimport { MousetrapStub } from './mousetrap-stub';\nimport { openCommandBarKeybinding } from './keybinding';\n\nimport styles from './command-bar.module.scss';\n\nconst RESULT_LIMIT = 5;\ntype SearcherSlot = SlotRegistry<SearchProvider[]>;\ntype CommandSlot = SlotRegistry<CommandEntry[]>;\n\nexport type CommandEntry = {\n  id: CommandId;\n  action: CommandHandler;\n  keybinding?: Keybinding;\n  displayName: string;\n};\n\n/** Quick launch actions. Use the `addSearcher` slot to extend the available actions */\nexport class CommandBarUI {\n  private mousetrap = isBrowser ? new Mousetrap() : new MousetrapStub();\n  private commandSearcher = new CommandSearcher([]);\n\n  /** Opens the command bar */\n  open = () => {\n    this.setVisibility?.(true);\n    return false; // aka prevent default\n  };\n\n  /** Closes the command bar */\n  close = () => {\n    this.setVisibility?.(false);\n  };\n\n  /** Add and autocomplete provider. To support keyboard navigation, each result should have a props `active: boolean`, and `exectue: () => any` */\n  addSearcher(...commandSearcher: SearchProvider[]) {\n    this.searcherSlot.register(commandSearcher);\n    return this;\n  }\n\n  /**\n   * registers a command\n   */\n  addCommand(...originalCommands: CommandEntry[]) {\n    originalCommands.forEach(({ id: commandId }) => {\n      if (this.getCommand(commandId) !== undefined) throw new DuplicateCommandError(commandId);\n    });\n\n    // commands could mutate later on, clone to ensure immutability 👌\n    const commands = originalCommands.map((x) => ({\n      id: x.id,\n      displayName: x.displayName,\n      action: x.action,\n      keybinding: x.keybinding,\n    }));\n\n    this.commandSlot.register(commands);\n\n    commands.forEach((command) => {\n      if (command.keybinding) {\n        this.addKeybinding(command.keybinding, command.id);\n      }\n    });\n\n    this.updateCommandsSearcher();\n\n    const updaters = commands.map((command) => (next: CommandHandler) => {\n      command.action = next;\n    });\n    return updaters;\n  }\n\n  /**\n   * executes command by name, if exists.\n   * @param commandId\n   */\n  run(commandId: CommandId) {\n    const commandEntry = this.getCommand(commandId);\n    if (!commandEntry) return undefined;\n\n    return commandEntry.action();\n  }\n\n  /**\n   * executes a keyboard shortcut manually\n   */\n  trigger = (key: string) => {\n    this.mousetrap.trigger(key);\n  };\n\n  private search = (term: string, limit: number = RESULT_LIMIT) => {\n    const searchers = flatten(this.searcherSlot.values());\n\n    const searcher = searchers.find((x) => x.test(term));\n    return searcher?.search(term, limit) || [];\n  };\n\n  private getCommand(id: CommandId) {\n    const relevantCommands = this.commandSlot\n      .values()\n      .map((commands) => commands.find((command) => command.id === id))\n      .filter((x) => !!x);\n\n    return relevantCommands.pop();\n  }\n\n  private updateCommandsSearcher() {\n    const commands = this.commandSlot.values().flat();\n    this.commandSearcher.update(commands);\n  }\n\n  private addKeybinding(key: Keybinding, command: CommandId) {\n    this.mousetrap.bind(key, this.run.bind(this, command));\n  }\n\n  /**\n   * Opens and closes the command bar UI.\n   */\n  private setVisibility?: (visible: boolean) => void;\n\n  /**\n   * generate the ui for command bar\n   */\n  private CommandBar = () => {\n    const [visible, setVisibility] = useState(false);\n    this.setVisibility = setVisibility;\n\n    return (\n      <CommandBar\n        key=\"CommandBarUI\"\n        className={styles.commanderUi}\n        searcher={this.search}\n        placeholder=\"Search anything or type > to only search commands\"\n        visible={visible}\n        onVisibilityChange={setVisibility}\n      />\n    );\n  };\n\n  constructor(private searcherSlot: SearcherSlot, private commandSlot: CommandSlot) {}\n\n  static dependencies = [UIAspect, PubsubAspect, ReactRouterAspect];\n  static slots = [Slot.withType<SearchProvider>(), Slot.withType<CommandEntry[]>()];\n  static runtime = UIRuntime;\n  static async provider(\n    [uiUi, pubsubUI]: [UiUI | undefined, PubsubUI | undefined],\n    config,\n    [searcherSlot, commandSlots]: [SearcherSlot, CommandSlot]\n  ) {\n    const commandBar = new CommandBarUI(searcherSlot, commandSlots);\n\n    commandBar.addSearcher(commandBar.commandSearcher);\n    commandBar.addCommand({\n      id: commandBarCommands.open,\n      action: commandBar.open,\n      displayName: 'Open command bar',\n      keybinding: openCommandBarKeybinding,\n    });\n\n    if (pubsubUI) {\n      pubsubUI.sub(CommandBarAspect.id, (e: KeyEvent) => {\n        const keyboardEvent = new KeyboardEvent(e.type, e.data);\n        document.dispatchEvent(keyboardEvent);\n      });\n    }\n\n    if (uiUi) {\n      uiUi.registerHudItem(<commandBar.CommandBar />);\n    }\n\n    return commandBar;\n  }\n}\n\nCommandBarAspect.addRuntime(CommandBarUI);\n"]}

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { CommandBarAspect, CommandBarAspect as default } from './command-bar.aspect';
 export { commandBarCommands } from './command-bar.commands';
-export { ComponentSearcher } from './ui/component-searcher';
-export { CommandBarContext } from './ui/command-bar-context';
+export type { SearchProvider } from './searchers';
 export type { CommandBarUI, CommandEntry } from './command-bar.ui.runtime';
-export type { CommandHandler, CommanderSearchResult, CommandId, Keybinding, SearchProvider } from './types';
+export type { CommandHandler, CommandId, Keybinding } from './types';
+export type { SearchResult } from '@teambit/explorer.ui.command-bar';

package/dist/index.js

@@ -9,18 +9,6 @@ Object.defineProperty(exports, "CommandBarAspect", {
     return _commandBar().CommandBarAspect;
   }
 });
-Object.defineProperty(exports, "CommandBarContext", {
-  enumerable: true,
-  get: function () {
-    return _commandBarContext().CommandBarContext;
-  }
-});
-Object.defineProperty(exports, "ComponentSearcher", {
-  enumerable: true,
-  get: function () {
-    return _componentSearcher().ComponentSearcher;
-  }
-});
 Object.defineProperty(exports, "commandBarCommands", {
   enumerable: true,
   get: function () {
@@ -54,24 +42,4 @@ function _commandBar2() {
   return data;
 }
 
-function _componentSearcher() {
-  const data = require("./ui/component-searcher");
-
-  _componentSearcher = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _commandBarContext() {
-  const data = require("./ui/command-bar-context");
-
-  _commandBarContext = function () {
-    return data;
-  };
-
-  return data;
-}
-
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA","sourcesContent":["export { CommandBarAspect, CommandBarAspect as default } from './command-bar.aspect';\nexport { commandBarCommands } from './command-bar.commands';\nexport { ComponentSearcher } from './ui/component-searcher';\nexport { CommandBarContext } from './ui/command-bar-context';\nexport type { CommandBarUI, CommandEntry } from './command-bar.ui.runtime';\nexport type { CommandHandler, CommanderSearchResult, CommandId, Keybinding, SearchProvider } from './types';\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA","sourcesContent":["export { CommandBarAspect, CommandBarAspect as default } from './command-bar.aspect';\nexport { commandBarCommands } from './command-bar.commands';\nexport type { SearchProvider } from './searchers';\nexport type { CommandBarUI, CommandEntry } from './command-bar.ui.runtime';\nexport type { CommandHandler, CommandId, Keybinding } from './types';\nexport type { SearchResult } from '@teambit/explorer.ui.command-bar';\n"]}

package/dist/searchers/command-searcher/command-result.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Command } from './command';
+declare type CommandResultProps = {
+    command: Command;
+};
+export declare function CommandResult({ command }: CommandResultProps): JSX.Element;
+export {};