@teambit/component 0.0.706 → 0.0.709

package/component.ui.runtime.tsx

@@ -1,21 +1,29 @@
-import PubsubAspect, { PubsubUI, BitBaseEvent } from '@teambit/pubsub';
-import PreviewAspect, { ClickInsideAnIframeEvent } from '@teambit/preview';
-import { MenuItemSlot, MenuItem } from '@teambit/ui-foundation.ui.main-dropdown';
-import { Slot } from '@teambit/harmony';
-import { NavigationSlot, RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';
+import React from 'react';
+import flatten from 'lodash.flatten';
+import copy from 'copy-to-clipboard';
+import type { RouteProps } from 'react-router-dom';
+
 import { NavLinkProps } from '@teambit/base-ui.routing.nav-link';
+import CommandBarAspect, { CommandBarUI, CommandEntry } from '@teambit/command-bar';
+import { DeprecationIcon } from '@teambit/component.ui.deprecation-icon';
+import { Slot, SlotRegistry } from '@teambit/harmony';
+import PreviewAspect, { ClickInsideAnIframeEvent } from '@teambit/preview';
+import PubsubAspect, { BitBaseEvent, PubsubUI } from '@teambit/pubsub';
+import ReactRouterAspect, { ReactRouterUI } from '@teambit/react-router';
 import { UIRuntime } from '@teambit/ui';
 import { isBrowser } from '@teambit/ui-foundation.ui.is-browser';
-import React from 'react';
+import { MenuItem, MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';
+import { NavigationSlot, RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';
 import { Import } from '@teambit/ui-foundation.ui.use-box.menu';
-import { RouteProps } from 'react-router-dom';
-import CommandBarAspect, { CommandBarUI, CommandEntry } from '@teambit/command-bar';
-import copy from 'copy-to-clipboard';
-import { ComponentAspect } from './component.aspect';
-import { Component, ComponentPageElement, ComponentPageSlot } from './ui/component';
-import { Menu, NavPlugin, OrderedNavigationSlot, ConsumeMethodSlot, ConsumePlugin } from './ui/menu';
+
 import { AspectSection } from './aspect.section';
+import { ComponentAspect } from './component.aspect';
 import { ComponentModel } from './ui';
+import { Component, ComponentPageElement, ComponentPageSlot } from './ui/component';
+import { ComponentResultPlugin, ComponentSearcher } from './ui/component-searcher';
+import { ConsumeMethodSlot, ConsumePlugin, Menu, NavPlugin, OrderedNavigationSlot } from './ui/menu';
+
+export type ComponentSearchResultSlot = SlotRegistry<ComponentResultPlugin[]>;
 
 export type Server = {
   env: string;
@@ -30,6 +38,7 @@ export const componentIdUrlRegex = '[\\w\\/-]*[\\w-]';
 
 export class ComponentUI {
   readonly routePath = `/:componentId(${componentIdUrlRegex})`;
+  private componentSearcher: ComponentSearcher;
 
   constructor(
     /**
@@ -52,8 +61,13 @@ export class ComponentUI {
 
     private pageItemSlot: ComponentPageSlot,
 
-    private commandBarUI: CommandBarUI
+    private componentSearchResultSlot: ComponentSearchResultSlot,
+
+    private commandBarUI: CommandBarUI,
+
+    reactRouterUi: ReactRouterUI
   ) {
+    this.componentSearcher = new ComponentSearcher({ navigate: reactRouterUi.navigateTo });
     if (isBrowser) this.registerPubSub();
   }
 
@@ -77,7 +91,7 @@ export class ComponentUI {
   private keyBindings: CommandEntry[] = [
     {
       id: 'component.copyBitId', // TODO - extract to a component!
-      handler: () => {
+      action: () => {
         copy(this.activeComponent?.id.toString() || '');
       },
       displayName: 'Copy component ID',
@@ -85,7 +99,7 @@ export class ComponentUI {
     },
     {
       id: 'component.copyNpmId', // TODO - extract to a component!
-      handler: this.copyNpmId,
+      action: this.copyNpmId,
       displayName: 'Copy component package name',
       keybinding: ',',
     },
@@ -204,7 +218,19 @@ export class ComponentUI {
     this.pageItemSlot.register(items);
   };
 
-  static dependencies = [PubsubAspect, CommandBarAspect];
+  /** register widgets to the components listed in the command bar */
+  registerSearchResultWidget = (...items: ComponentResultPlugin[]) => {
+    this.componentSearchResultSlot.register(items);
+    const totalPlugins = flatten(this.componentSearchResultSlot.values());
+
+    this.componentSearcher.updatePlugins(totalPlugins);
+  };
+
+  updateComponents = (components: ComponentModel[]) => {
+    this.componentSearcher.update(components);
+  };
+
+  static dependencies = [PubsubAspect, CommandBarAspect, ReactRouterAspect];
 
   static runtime = UIRuntime;
 
@@ -215,18 +241,20 @@ export class ComponentUI {
     Slot.withType<ConsumeMethodSlot>(),
     Slot.withType<MenuItemSlot>(),
     Slot.withType<ComponentPageSlot>(),
+    Slot.withType<ComponentSearchResultSlot>(),
   ];
 
   static async provider(
-    [pubsub, commandBarUI]: [PubsubUI, CommandBarUI],
+    [pubsub, commandBarUI, reactRouterUI]: [PubsubUI, CommandBarUI, ReactRouterUI],
     config,
-    [routeSlot, navSlot, consumeMethodSlot, widgetSlot, menuItemSlot, pageSlot]: [
+    [routeSlot, navSlot, consumeMethodSlot, widgetSlot, menuItemSlot, pageSlot, componentSearchResultSlot]: [
       RouteSlot,
       OrderedNavigationSlot,
       ConsumeMethodSlot,
       OrderedNavigationSlot,
       MenuItemSlot,
-      ComponentPageSlot
+      ComponentPageSlot,
+      ComponentSearchResultSlot
     ]
   ) {
     // TODO: refactor ComponentHost to a separate extension (including sidebar, host, graphql, etc.)
@@ -239,11 +267,16 @@ export class ComponentUI {
       widgetSlot,
       menuItemSlot,
       pageSlot,
-      commandBarUI
+      componentSearchResultSlot,
+      commandBarUI,
+      reactRouterUI
     );
     const section = new AspectSection();
 
+    componentUI.registerSearchResultWidget({ key: 'deprecation', end: DeprecationIcon });
+
     componentUI.commandBarUI.addCommand(...componentUI.keyBindings);
+    commandBarUI.addSearcher(componentUI.componentSearcher);
     componentUI.registerMenuItem(componentUI.menuItems);
     componentUI.registerRoute(section.route);
     componentUI.registerWidget(section.navigationLink, section.order);

package/dist/component.ui.runtime.d.ts

@@ -1,13 +1,17 @@
 /// <reference types="react" />
-import { PubsubUI } from '@teambit/pubsub';
-import { MenuItemSlot, MenuItem } from '@teambit/ui-foundation.ui.main-dropdown';
-import { NavigationSlot, RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';
+import type { RouteProps } from 'react-router-dom';
 import { NavLinkProps } from '@teambit/base-ui.routing.nav-link';
-import { RouteProps } from 'react-router-dom';
 import { CommandBarUI } from '@teambit/command-bar';
-import { ComponentPageElement, ComponentPageSlot } from './ui/component';
-import { NavPlugin, OrderedNavigationSlot, ConsumeMethodSlot, ConsumePlugin } from './ui/menu';
+import { SlotRegistry } from '@teambit/harmony';
+import { PubsubUI } from '@teambit/pubsub';
+import { ReactRouterUI } from '@teambit/react-router';
+import { MenuItem, MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';
+import { NavigationSlot, RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';
 import { ComponentModel } from './ui';
+import { ComponentPageElement, ComponentPageSlot } from './ui/component';
+import { ComponentResultPlugin } from './ui/component-searcher';
+import { ConsumeMethodSlot, ConsumePlugin, NavPlugin, OrderedNavigationSlot } from './ui/menu';
+export declare type ComponentSearchResultSlot = SlotRegistry<ComponentResultPlugin[]>;
 export declare type Server = {
     env: string;
     url: string;
@@ -30,8 +34,10 @@ export declare class ComponentUI {
     private widgetSlot;
     private menuItemSlot;
     private pageItemSlot;
+    private componentSearchResultSlot;
     private commandBarUI;
     readonly routePath: string;
+    private componentSearcher;
     constructor(
     /**
      * Pubsub aspects
@@ -40,7 +46,7 @@ export declare class ComponentUI {
     /**
      * slot for registering a new widget to the menu.
      */
-    widgetSlot: OrderedNavigationSlot, menuItemSlot: MenuItemSlot, pageItemSlot: ComponentPageSlot, commandBarUI: CommandBarUI);
+    widgetSlot: OrderedNavigationSlot, menuItemSlot: MenuItemSlot, pageItemSlot: ComponentPageSlot, componentSearchResultSlot: ComponentSearchResultSlot, commandBarUI: CommandBarUI, reactRouterUi: ReactRouterUI);
     /**
      * the current visible component
      */
@@ -62,18 +68,22 @@ export declare class ComponentUI {
     registerWidget(widget: NavLinkProps, order?: number): void;
     registerMenuItem: (menuItems: MenuItem[]) => void;
     registerPageItem: (...items: ComponentPageElement[]) => void;
+    /** register widgets to the components listed in the command bar */
+    registerSearchResultWidget: (...items: ComponentResultPlugin[]) => void;
+    updateComponents: (components: ComponentModel[]) => void;
     static dependencies: import("@teambit/harmony").Aspect[];
     static runtime: import("@teambit/harmony").RuntimeDefinition;
-    static slots: (((registerFn: () => string) => import("@teambit/harmony").SlotRegistry<RouteProps<string, {
+    static slots: (((registerFn: () => string) => SlotRegistry<RouteProps<string, {
         [x: string]: string | undefined;
-    }>>) | ((registerFn: () => string) => import("@teambit/harmony").SlotRegistry<MenuItemSlot>) | ((registerFn: () => string) => import("@teambit/harmony").SlotRegistry<NavigationSlot>) | ((registerFn: () => string) => import("@teambit/harmony").SlotRegistry<NavPlugin>) | ((registerFn: () => string) => import("@teambit/harmony").SlotRegistry<ConsumeMethodSlot>) | ((registerFn: () => string) => import("@teambit/harmony").SlotRegistry<ComponentPageSlot>))[];
-    static provider([pubsub, commandBarUI]: [PubsubUI, CommandBarUI], config: any, [routeSlot, navSlot, consumeMethodSlot, widgetSlot, menuItemSlot, pageSlot]: [
+    }>>) | ((registerFn: () => string) => SlotRegistry<MenuItemSlot>) | ((registerFn: () => string) => SlotRegistry<NavigationSlot>) | ((registerFn: () => string) => SlotRegistry<NavPlugin>) | ((registerFn: () => string) => SlotRegistry<ConsumeMethodSlot>) | ((registerFn: () => string) => SlotRegistry<ComponentPageSlot>) | ((registerFn: () => string) => SlotRegistry<ComponentSearchResultSlot>))[];
+    static provider([pubsub, commandBarUI, reactRouterUI]: [PubsubUI, CommandBarUI, ReactRouterUI], config: any, [routeSlot, navSlot, consumeMethodSlot, widgetSlot, menuItemSlot, pageSlot, componentSearchResultSlot]: [
         RouteSlot,
         OrderedNavigationSlot,
         ConsumeMethodSlot,
         OrderedNavigationSlot,
         MenuItemSlot,
-        ComponentPageSlot
+        ComponentPageSlot,
+        ComponentSearchResultSlot
     ]): Promise<ComponentUI>;
 }
 export default ComponentUI;

package/dist/component.ui.runtime.js

@@ -21,20 +21,50 @@ function _defineProperty2() {
   return data;
 }
 
-function _pubsub() {
-  const data = _interopRequireDefault(require("@teambit/pubsub"));
+function _react() {
+  const data = _interopRequireDefault(require("react"));
 
-  _pubsub = function () {
+  _react = function () {
     return data;
   };
 
   return data;
 }
 
-function _preview() {
-  const data = _interopRequireWildcard(require("@teambit/preview"));
+function _lodash() {
+  const data = _interopRequireDefault(require("lodash.flatten"));
 
-  _preview = function () {
+  _lodash = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _copyToClipboard() {
+  const data = _interopRequireDefault(require("copy-to-clipboard"));
+
+  _copyToClipboard = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _commandBar() {
+  const data = _interopRequireDefault(require("@teambit/command-bar"));
+
+  _commandBar = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _componentUi() {
+  const data = require("@teambit/component.ui.deprecation-icon");
+
+  _componentUi = function () {
     return data;
   };
 
@@ -51,60 +81,70 @@ function _harmony() {
   return data;
 }
 
-function _ui() {
-  const data = require("@teambit/ui");
+function _preview() {
+  const data = _interopRequireWildcard(require("@teambit/preview"));
 
-  _ui = function () {
+  _preview = function () {
     return data;
   };
 
   return data;
 }
 
-function _uiFoundationUi() {
-  const data = require("@teambit/ui-foundation.ui.is-browser");
+function _pubsub() {
+  const data = _interopRequireDefault(require("@teambit/pubsub"));
 
-  _uiFoundationUi = function () {
+  _pubsub = function () {
     return data;
   };
 
   return data;
 }
 
-function _react() {
-  const data = _interopRequireDefault(require("react"));
+function _reactRouter() {
+  const data = _interopRequireDefault(require("@teambit/react-router"));
 
-  _react = function () {
+  _reactRouter = function () {
     return data;
   };
 
   return data;
 }
 
-function _uiFoundationUiUseBox() {
-  const data = require("@teambit/ui-foundation.ui.use-box.menu");
+function _ui() {
+  const data = require("@teambit/ui");
 
-  _uiFoundationUiUseBox = function () {
+  _ui = function () {
     return data;
   };
 
   return data;
 }
 
-function _commandBar() {
-  const data = _interopRequireDefault(require("@teambit/command-bar"));
+function _uiFoundationUi() {
+  const data = require("@teambit/ui-foundation.ui.is-browser");
 
-  _commandBar = function () {
+  _uiFoundationUi = function () {
     return data;
   };
 
   return data;
 }
 
-function _copyToClipboard() {
-  const data = _interopRequireDefault(require("copy-to-clipboard"));
+function _uiFoundationUiUseBox() {
+  const data = require("@teambit/ui-foundation.ui.use-box.menu");
 
-  _copyToClipboard = function () {
+  _uiFoundationUiUseBox = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _aspect() {
+  const data = require("./aspect.section");
+
+  _aspect = function () {
     return data;
   };
 
@@ -131,20 +171,20 @@ function _component2() {
   return data;
 }
 
-function _menu() {
-  const data = require("./ui/menu");
+function _componentSearcher() {
+  const data = require("./ui/component-searcher");
 
-  _menu = function () {
+  _componentSearcher = function () {
     return data;
   };
 
   return data;
 }
 
-function _aspect() {
-  const data = require("./aspect.section");
+function _menu() {
+  const data = require("./ui/menu");
 
-  _aspect = function () {
+  _menu = function () {
     return data;
   };
 
@@ -167,7 +207,7 @@ class ComponentUI {
   /**
    * slot for registering a new widget to the menu.
    */
-  widgetSlot, menuItemSlot, pageItemSlot, commandBarUI) {
+  widgetSlot, menuItemSlot, pageItemSlot, componentSearchResultSlot, commandBarUI, reactRouterUi) {
     this.pubsub = pubsub;
     this.routeSlot = routeSlot;
     this.navSlot = navSlot;
@@ -175,8 +215,10 @@ class ComponentUI {
     this.widgetSlot = widgetSlot;
     this.menuItemSlot = menuItemSlot;
     this.pageItemSlot = pageItemSlot;
+    this.componentSearchResultSlot = componentSearchResultSlot;
     this.commandBarUI = commandBarUI;
     (0, _defineProperty2().default)(this, "routePath", `/:componentId(${componentIdUrlRegex})`);
+    (0, _defineProperty2().default)(this, "componentSearcher", void 0);
     (0, _defineProperty2().default)(this, "activeComponent", void 0);
     (0, _defineProperty2().default)(this, "copyNpmId", () => {
       var _this$activeComponent;
@@ -194,7 +236,7 @@ class ComponentUI {
     (0, _defineProperty2().default)(this, "keyBindings", [{
       id: 'component.copyBitId',
       // TODO - extract to a component!
-      handler: () => {
+      action: () => {
         var _this$activeComponent3;
 
         (0, _copyToClipboard().default)(((_this$activeComponent3 = this.activeComponent) === null || _this$activeComponent3 === void 0 ? void 0 : _this$activeComponent3.id.toString()) || '');
@@ -204,7 +246,7 @@ class ComponentUI {
     }, {
       id: 'component.copyNpmId',
       // TODO - extract to a component!
-      handler: this.copyNpmId,
+      action: this.copyNpmId,
       displayName: 'Copy component package name',
       keybinding: ','
     }]);
@@ -274,6 +316,17 @@ class ComponentUI {
     (0, _defineProperty2().default)(this, "registerPageItem", (...items) => {
       this.pageItemSlot.register(items);
     });
+    (0, _defineProperty2().default)(this, "registerSearchResultWidget", (...items) => {
+      this.componentSearchResultSlot.register(items);
+      const totalPlugins = (0, _lodash().default)(this.componentSearchResultSlot.values());
+      this.componentSearcher.updatePlugins(totalPlugins);
+    });
+    (0, _defineProperty2().default)(this, "updateComponents", components => {
+      this.componentSearcher.update(components);
+    });
+    this.componentSearcher = new (_componentSearcher().ComponentSearcher)({
+      navigate: reactRouterUi.navigateTo
+    });
     if (_uiFoundationUi().isBrowser) this.registerPubSub();
   }
   /**
@@ -337,12 +390,17 @@ class ComponentUI {
     });
   }
 
-  static async provider([pubsub, commandBarUI], config, [routeSlot, navSlot, consumeMethodSlot, widgetSlot, menuItemSlot, pageSlot]) {
+  static async provider([pubsub, commandBarUI, reactRouterUI], config, [routeSlot, navSlot, consumeMethodSlot, widgetSlot, menuItemSlot, pageSlot, componentSearchResultSlot]) {
     // TODO: refactor ComponentHost to a separate extension (including sidebar, host, graphql, etc.)
     // TODO: add contextual hook for ComponentHost @uri/@oded
-    const componentUI = new ComponentUI(pubsub, routeSlot, navSlot, consumeMethodSlot, widgetSlot, menuItemSlot, pageSlot, commandBarUI);
+    const componentUI = new ComponentUI(pubsub, routeSlot, navSlot, consumeMethodSlot, widgetSlot, menuItemSlot, pageSlot, componentSearchResultSlot, commandBarUI, reactRouterUI);
     const section = new (_aspect().AspectSection)();
+    componentUI.registerSearchResultWidget({
+      key: 'deprecation',
+      end: _componentUi().DeprecationIcon
+    });
     componentUI.commandBarUI.addCommand(...componentUI.keyBindings);
+    commandBarUI.addSearcher(componentUI.componentSearcher);
     componentUI.registerMenuItem(componentUI.menuItems);
     componentUI.registerRoute(section.route);
     componentUI.registerWidget(section.navigationLink, section.order);
@@ -353,9 +411,9 @@ class ComponentUI {
 }
 
 exports.ComponentUI = ComponentUI;
-(0, _defineProperty2().default)(ComponentUI, "dependencies", [_pubsub().default, _commandBar().default]);
+(0, _defineProperty2().default)(ComponentUI, "dependencies", [_pubsub().default, _commandBar().default, _reactRouter().default]);
 (0, _defineProperty2().default)(ComponentUI, "runtime", _ui().UIRuntime);
-(0, _defineProperty2().default)(ComponentUI, "slots", [_harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType()]);
+(0, _defineProperty2().default)(ComponentUI, "slots", [_harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType()]);
 var _default = ComponentUI;
 exports.default = _default;
 

package/dist/component.ui.runtime.js.map

@@ -1 +1 @@
-{"version":3,"sources":["component.ui.runtime.tsx"],"names":["componentIdUrlRegex","ComponentUI","constructor","pubsub","routeSlot","navSlot","consumeMethodSlot","widgetSlot","menuItemSlot","pageItemSlot","commandBarUI","packageName","activeComponent","version","id","versionString","handler","toString","displayName","keybinding","copyNpmId","category","title","keyChar","run","comp","options","latest","Title","width","Component","ignoreVersion","name","currentLane","order","menuItems","register","items","isBrowser","registerPubSub","sub","PreviewAspect","be","type","ClickInsideAnIframeEvent","TYPE","event","MouseEvent","view","window","bubbles","cancelable","body","document","dispatchEvent","getComponentUI","host","handleComponentChange","getMenu","registerRoute","route","registerNavigation","nav","props","registerConsumeMethod","consumeMethods","registerWidget","widget","provider","config","pageSlot","componentUI","section","AspectSection","addCommand","keyBindings","registerMenuItem","navigationLink","bitMethod","PubsubAspect","CommandBarAspect","UIRuntime","Slot","withType","ComponentAspect","addRuntime"],"mappings":"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","sourcesContent":["import PubsubAspect, { PubsubUI, BitBaseEvent } from '@teambit/pubsub';\nimport PreviewAspect, { ClickInsideAnIframeEvent } from '@teambit/preview';\nimport { MenuItemSlot, MenuItem } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { Slot } from '@teambit/harmony';\nimport { NavigationSlot, RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { NavLinkProps } from '@teambit/base-ui.routing.nav-link';\nimport { UIRuntime } from '@teambit/ui';\nimport { isBrowser } from '@teambit/ui-foundation.ui.is-browser';\nimport React from 'react';\nimport { Import } from '@teambit/ui-foundation.ui.use-box.menu';\nimport { RouteProps } from 'react-router-dom';\nimport CommandBarAspect, { CommandBarUI, CommandEntry } from '@teambit/command-bar';\nimport copy from 'copy-to-clipboard';\nimport { ComponentAspect } from './component.aspect';\nimport { Component, ComponentPageElement, ComponentPageSlot } from './ui/component';\nimport { Menu, NavPlugin, OrderedNavigationSlot, ConsumeMethodSlot, ConsumePlugin } from './ui/menu';\nimport { AspectSection } from './aspect.section';\nimport { ComponentModel } from './ui';\n\nexport type Server = {\n  env: string;\n  url: string;\n};\n\nexport type ComponentMeta = {\n  id: string;\n};\n\nexport const componentIdUrlRegex = '[\\\\w\\\\/-]*[\\\\w-]';\n\nexport class ComponentUI {\n  readonly routePath = `/:componentId(${componentIdUrlRegex})`;\n\n  constructor(\n    /**\n     * Pubsub aspects\n     */\n    private pubsub: PubsubUI,\n\n    private routeSlot: RouteSlot,\n\n    private navSlot: OrderedNavigationSlot,\n\n    private consumeMethodSlot: ConsumeMethodSlot,\n\n    /**\n     * slot for registering a new widget to the menu.\n     */\n    private widgetSlot: OrderedNavigationSlot,\n\n    private menuItemSlot: MenuItemSlot,\n\n    private pageItemSlot: ComponentPageSlot,\n\n    private commandBarUI: CommandBarUI\n  ) {\n    if (isBrowser) this.registerPubSub();\n  }\n\n  /**\n   * the current visible component\n   */\n  private activeComponent?: ComponentModel;\n\n  private copyNpmId = () => {\n    const packageName = this.activeComponent?.packageName;\n    if (packageName) {\n      const version = this.activeComponent?.id.version;\n      const versionString = version ? `@${version}` : '';\n      copy(`${packageName}${versionString}`);\n    }\n  };\n\n  /**\n   * key bindings used by component aspect\n   */\n  private keyBindings: CommandEntry[] = [\n    {\n      id: 'component.copyBitId', // TODO - extract to a component!\n      handler: () => {\n        copy(this.activeComponent?.id.toString() || '');\n      },\n      displayName: 'Copy component ID',\n      keybinding: '.',\n    },\n    {\n      id: 'component.copyNpmId', // TODO - extract to a component!\n      handler: this.copyNpmId,\n      displayName: 'Copy component package name',\n      keybinding: ',',\n    },\n  ];\n\n  private menuItems: MenuItem[] = [\n    {\n      category: 'general',\n      title: 'Open command bar',\n      keyChar: 'mod+k',\n      handler: () => this.commandBarUI?.run('command-bar.open'),\n    },\n    {\n      category: 'general',\n      title: 'Toggle component list',\n      keyChar: 'alt+s',\n      handler: () => this.commandBarUI?.run('sidebar.toggle'),\n    },\n    {\n      category: 'workflow',\n      title: 'Copy component ID',\n      keyChar: '.',\n      handler: () => this.commandBarUI?.run('component.copyBitId'),\n    },\n    {\n      category: 'workflow',\n      title: 'Copy component package name',\n      keyChar: ',',\n      handler: () => this.commandBarUI?.run('component.copyNpmId'),\n    },\n  ];\n\n  private bitMethod: ConsumePlugin = (comp, options) => {\n    const version = comp.version === comp.latest ? '' : `@${comp.version}`;\n    return {\n      Title: <img style={{ width: '20px' }} src=\"https://static.bit.dev/brands/bit-logo-text.svg\" />,\n      Component: (\n        <Import\n          componentId={`${comp.id.toString({ ignoreVersion: true })}${version}`}\n          packageName={`${comp.packageName}${version}`}\n          componentName={comp.id.name}\n          showInstallMethod={!options?.currentLane}\n        />\n      ),\n      order: 0,\n    };\n  };\n\n  registerPubSub() {\n    this.pubsub.sub(PreviewAspect.id, (be: BitBaseEvent<any>) => {\n      if (be.type === ClickInsideAnIframeEvent.TYPE) {\n        const event = new MouseEvent('mousedown', {\n          view: window,\n          bubbles: true,\n          cancelable: true,\n        });\n\n        const body = document.body;\n        body?.dispatchEvent(event);\n      }\n    });\n  }\n\n  handleComponentChange = (activeComponent?: ComponentModel) => {\n    this.activeComponent = activeComponent;\n  };\n\n  getComponentUI(host: string) {\n    return (\n      <Component\n        routeSlot={this.routeSlot}\n        containerSlot={this.pageItemSlot}\n        onComponentChange={this.handleComponentChange}\n        host={host}\n      />\n    );\n  }\n\n  getMenu(host: string) {\n    return (\n      <Menu\n        navigationSlot={this.navSlot}\n        consumeMethodSlot={this.consumeMethodSlot}\n        widgetSlot={this.widgetSlot}\n        host={host}\n        menuItemSlot={this.menuItemSlot}\n      />\n    );\n  }\n\n  registerRoute(route: RouteProps) {\n    this.routeSlot.register(route);\n    return this;\n  }\n\n  registerNavigation(nav: NavLinkProps, order?: number) {\n    this.navSlot.register({\n      props: nav,\n      order,\n    });\n  }\n\n  registerConsumeMethod(...consumeMethods: ConsumePlugin[]) {\n    this.consumeMethodSlot.register(consumeMethods);\n  }\n\n  registerWidget(widget: NavLinkProps, order?: number) {\n    this.widgetSlot.register({ props: widget, order });\n  }\n\n  registerMenuItem = (menuItems: MenuItem[]) => {\n    this.menuItemSlot.register(menuItems);\n  };\n\n  registerPageItem = (...items: ComponentPageElement[]) => {\n    this.pageItemSlot.register(items);\n  };\n\n  static dependencies = [PubsubAspect, CommandBarAspect];\n\n  static runtime = UIRuntime;\n\n  static slots = [\n    Slot.withType<RouteProps>(),\n    Slot.withType<NavPlugin>(),\n    Slot.withType<NavigationSlot>(),\n    Slot.withType<ConsumeMethodSlot>(),\n    Slot.withType<MenuItemSlot>(),\n    Slot.withType<ComponentPageSlot>(),\n  ];\n\n  static async provider(\n    [pubsub, commandBarUI]: [PubsubUI, CommandBarUI],\n    config,\n    [routeSlot, navSlot, consumeMethodSlot, widgetSlot, menuItemSlot, pageSlot]: [\n      RouteSlot,\n      OrderedNavigationSlot,\n      ConsumeMethodSlot,\n      OrderedNavigationSlot,\n      MenuItemSlot,\n      ComponentPageSlot\n    ]\n  ) {\n    // TODO: refactor ComponentHost to a separate extension (including sidebar, host, graphql, etc.)\n    // TODO: add contextual hook for ComponentHost @uri/@oded\n    const componentUI = new ComponentUI(\n      pubsub,\n      routeSlot,\n      navSlot,\n      consumeMethodSlot,\n      widgetSlot,\n      menuItemSlot,\n      pageSlot,\n      commandBarUI\n    );\n    const section = new AspectSection();\n\n    componentUI.commandBarUI.addCommand(...componentUI.keyBindings);\n    componentUI.registerMenuItem(componentUI.menuItems);\n    componentUI.registerRoute(section.route);\n    componentUI.registerWidget(section.navigationLink, section.order);\n    componentUI.registerConsumeMethod(componentUI.bitMethod);\n    return componentUI;\n  }\n}\n\nexport default ComponentUI;\n\nComponentAspect.addRuntime(ComponentUI);\n"]}
+{"version":3,"sources":["component.ui.runtime.tsx"],"names":["componentIdUrlRegex","ComponentUI","constructor","pubsub","routeSlot","navSlot","consumeMethodSlot","widgetSlot","menuItemSlot","pageItemSlot","componentSearchResultSlot","commandBarUI","reactRouterUi","packageName","activeComponent","version","id","versionString","action","toString","displayName","keybinding","copyNpmId","category","title","keyChar","handler","run","comp","options","latest","Title","width","Component","ignoreVersion","name","currentLane","order","menuItems","register","items","totalPlugins","values","componentSearcher","updatePlugins","components","update","ComponentSearcher","navigate","navigateTo","isBrowser","registerPubSub","sub","PreviewAspect","be","type","ClickInsideAnIframeEvent","TYPE","event","MouseEvent","view","window","bubbles","cancelable","body","document","dispatchEvent","getComponentUI","host","handleComponentChange","getMenu","registerRoute","route","registerNavigation","nav","props","registerConsumeMethod","consumeMethods","registerWidget","widget","provider","reactRouterUI","config","pageSlot","componentUI","section","AspectSection","registerSearchResultWidget","key","end","DeprecationIcon","addCommand","keyBindings","addSearcher","registerMenuItem","navigationLink","bitMethod","PubsubAspect","CommandBarAspect","ReactRouterAspect","UIRuntime","Slot","withType","ComponentAspect","addRuntime"],"mappings":"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","sourcesContent":["import React from 'react';\nimport flatten from 'lodash.flatten';\nimport copy from 'copy-to-clipboard';\nimport type { RouteProps } from 'react-router-dom';\n\nimport { NavLinkProps } from '@teambit/base-ui.routing.nav-link';\nimport CommandBarAspect, { CommandBarUI, CommandEntry } from '@teambit/command-bar';\nimport { DeprecationIcon } from '@teambit/component.ui.deprecation-icon';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport PreviewAspect, { ClickInsideAnIframeEvent } from '@teambit/preview';\nimport PubsubAspect, { BitBaseEvent, PubsubUI } from '@teambit/pubsub';\nimport ReactRouterAspect, { ReactRouterUI } from '@teambit/react-router';\nimport { UIRuntime } from '@teambit/ui';\nimport { isBrowser } from '@teambit/ui-foundation.ui.is-browser';\nimport { MenuItem, MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { NavigationSlot, RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { Import } from '@teambit/ui-foundation.ui.use-box.menu';\n\nimport { AspectSection } from './aspect.section';\nimport { ComponentAspect } from './component.aspect';\nimport { ComponentModel } from './ui';\nimport { Component, ComponentPageElement, ComponentPageSlot } from './ui/component';\nimport { ComponentResultPlugin, ComponentSearcher } from './ui/component-searcher';\nimport { ConsumeMethodSlot, ConsumePlugin, Menu, NavPlugin, OrderedNavigationSlot } from './ui/menu';\n\nexport type ComponentSearchResultSlot = SlotRegistry<ComponentResultPlugin[]>;\n\nexport type Server = {\n  env: string;\n  url: string;\n};\n\nexport type ComponentMeta = {\n  id: string;\n};\n\nexport const componentIdUrlRegex = '[\\\\w\\\\/-]*[\\\\w-]';\n\nexport class ComponentUI {\n  readonly routePath = `/:componentId(${componentIdUrlRegex})`;\n  private componentSearcher: ComponentSearcher;\n\n  constructor(\n    /**\n     * Pubsub aspects\n     */\n    private pubsub: PubsubUI,\n\n    private routeSlot: RouteSlot,\n\n    private navSlot: OrderedNavigationSlot,\n\n    private consumeMethodSlot: ConsumeMethodSlot,\n\n    /**\n     * slot for registering a new widget to the menu.\n     */\n    private widgetSlot: OrderedNavigationSlot,\n\n    private menuItemSlot: MenuItemSlot,\n\n    private pageItemSlot: ComponentPageSlot,\n\n    private componentSearchResultSlot: ComponentSearchResultSlot,\n\n    private commandBarUI: CommandBarUI,\n\n    reactRouterUi: ReactRouterUI\n  ) {\n    this.componentSearcher = new ComponentSearcher({ navigate: reactRouterUi.navigateTo });\n    if (isBrowser) this.registerPubSub();\n  }\n\n  /**\n   * the current visible component\n   */\n  private activeComponent?: ComponentModel;\n\n  private copyNpmId = () => {\n    const packageName = this.activeComponent?.packageName;\n    if (packageName) {\n      const version = this.activeComponent?.id.version;\n      const versionString = version ? `@${version}` : '';\n      copy(`${packageName}${versionString}`);\n    }\n  };\n\n  /**\n   * key bindings used by component aspect\n   */\n  private keyBindings: CommandEntry[] = [\n    {\n      id: 'component.copyBitId', // TODO - extract to a component!\n      action: () => {\n        copy(this.activeComponent?.id.toString() || '');\n      },\n      displayName: 'Copy component ID',\n      keybinding: '.',\n    },\n    {\n      id: 'component.copyNpmId', // TODO - extract to a component!\n      action: this.copyNpmId,\n      displayName: 'Copy component package name',\n      keybinding: ',',\n    },\n  ];\n\n  private menuItems: MenuItem[] = [\n    {\n      category: 'general',\n      title: 'Open command bar',\n      keyChar: 'mod+k',\n      handler: () => this.commandBarUI?.run('command-bar.open'),\n    },\n    {\n      category: 'general',\n      title: 'Toggle component list',\n      keyChar: 'alt+s',\n      handler: () => this.commandBarUI?.run('sidebar.toggle'),\n    },\n    {\n      category: 'workflow',\n      title: 'Copy component ID',\n      keyChar: '.',\n      handler: () => this.commandBarUI?.run('component.copyBitId'),\n    },\n    {\n      category: 'workflow',\n      title: 'Copy component package name',\n      keyChar: ',',\n      handler: () => this.commandBarUI?.run('component.copyNpmId'),\n    },\n  ];\n\n  private bitMethod: ConsumePlugin = (comp, options) => {\n    const version = comp.version === comp.latest ? '' : `@${comp.version}`;\n    return {\n      Title: <img style={{ width: '20px' }} src=\"https://static.bit.dev/brands/bit-logo-text.svg\" />,\n      Component: (\n        <Import\n          componentId={`${comp.id.toString({ ignoreVersion: true })}${version}`}\n          packageName={`${comp.packageName}${version}`}\n          componentName={comp.id.name}\n          showInstallMethod={!options?.currentLane}\n        />\n      ),\n      order: 0,\n    };\n  };\n\n  registerPubSub() {\n    this.pubsub.sub(PreviewAspect.id, (be: BitBaseEvent<any>) => {\n      if (be.type === ClickInsideAnIframeEvent.TYPE) {\n        const event = new MouseEvent('mousedown', {\n          view: window,\n          bubbles: true,\n          cancelable: true,\n        });\n\n        const body = document.body;\n        body?.dispatchEvent(event);\n      }\n    });\n  }\n\n  handleComponentChange = (activeComponent?: ComponentModel) => {\n    this.activeComponent = activeComponent;\n  };\n\n  getComponentUI(host: string) {\n    return (\n      <Component\n        routeSlot={this.routeSlot}\n        containerSlot={this.pageItemSlot}\n        onComponentChange={this.handleComponentChange}\n        host={host}\n      />\n    );\n  }\n\n  getMenu(host: string) {\n    return (\n      <Menu\n        navigationSlot={this.navSlot}\n        consumeMethodSlot={this.consumeMethodSlot}\n        widgetSlot={this.widgetSlot}\n        host={host}\n        menuItemSlot={this.menuItemSlot}\n      />\n    );\n  }\n\n  registerRoute(route: RouteProps) {\n    this.routeSlot.register(route);\n    return this;\n  }\n\n  registerNavigation(nav: NavLinkProps, order?: number) {\n    this.navSlot.register({\n      props: nav,\n      order,\n    });\n  }\n\n  registerConsumeMethod(...consumeMethods: ConsumePlugin[]) {\n    this.consumeMethodSlot.register(consumeMethods);\n  }\n\n  registerWidget(widget: NavLinkProps, order?: number) {\n    this.widgetSlot.register({ props: widget, order });\n  }\n\n  registerMenuItem = (menuItems: MenuItem[]) => {\n    this.menuItemSlot.register(menuItems);\n  };\n\n  registerPageItem = (...items: ComponentPageElement[]) => {\n    this.pageItemSlot.register(items);\n  };\n\n  /** register widgets to the components listed in the command bar */\n  registerSearchResultWidget = (...items: ComponentResultPlugin[]) => {\n    this.componentSearchResultSlot.register(items);\n    const totalPlugins = flatten(this.componentSearchResultSlot.values());\n\n    this.componentSearcher.updatePlugins(totalPlugins);\n  };\n\n  updateComponents = (components: ComponentModel[]) => {\n    this.componentSearcher.update(components);\n  };\n\n  static dependencies = [PubsubAspect, CommandBarAspect, ReactRouterAspect];\n\n  static runtime = UIRuntime;\n\n  static slots = [\n    Slot.withType<RouteProps>(),\n    Slot.withType<NavPlugin>(),\n    Slot.withType<NavigationSlot>(),\n    Slot.withType<ConsumeMethodSlot>(),\n    Slot.withType<MenuItemSlot>(),\n    Slot.withType<ComponentPageSlot>(),\n    Slot.withType<ComponentSearchResultSlot>(),\n  ];\n\n  static async provider(\n    [pubsub, commandBarUI, reactRouterUI]: [PubsubUI, CommandBarUI, ReactRouterUI],\n    config,\n    [routeSlot, navSlot, consumeMethodSlot, widgetSlot, menuItemSlot, pageSlot, componentSearchResultSlot]: [\n      RouteSlot,\n      OrderedNavigationSlot,\n      ConsumeMethodSlot,\n      OrderedNavigationSlot,\n      MenuItemSlot,\n      ComponentPageSlot,\n      ComponentSearchResultSlot\n    ]\n  ) {\n    // TODO: refactor ComponentHost to a separate extension (including sidebar, host, graphql, etc.)\n    // TODO: add contextual hook for ComponentHost @uri/@oded\n    const componentUI = new ComponentUI(\n      pubsub,\n      routeSlot,\n      navSlot,\n      consumeMethodSlot,\n      widgetSlot,\n      menuItemSlot,\n      pageSlot,\n      componentSearchResultSlot,\n      commandBarUI,\n      reactRouterUI\n    );\n    const section = new AspectSection();\n\n    componentUI.registerSearchResultWidget({ key: 'deprecation', end: DeprecationIcon });\n\n    componentUI.commandBarUI.addCommand(...componentUI.keyBindings);\n    commandBarUI.addSearcher(componentUI.componentSearcher);\n    componentUI.registerMenuItem(componentUI.menuItems);\n    componentUI.registerRoute(section.route);\n    componentUI.registerWidget(section.navigationLink, section.order);\n    componentUI.registerConsumeMethod(componentUI.bitMethod);\n    return componentUI;\n  }\n}\n\nexport default ComponentUI;\n\nComponentAspect.addRuntime(ComponentUI);\n"]}

package/dist/ui/component-searcher/component-result.d.ts

@@ -0,0 +1,16 @@
+import React, { ComponentType } from 'react';
+import { ComponentModel } from '@teambit/component';
+export declare type ComponentPluginProps = React.HTMLAttributes<HTMLDivElement> & {
+    component: ComponentModel;
+};
+export declare type ComponentResultPlugin = {
+    key: string;
+    start?: ComponentType<ComponentPluginProps>;
+    end?: ComponentType<ComponentPluginProps>;
+};
+declare type ComponentResultProps = {
+    component: ComponentModel;
+    plugins?: ComponentResultPlugin[];
+};
+export declare function ComponentResult({ component, plugins }: ComponentResultProps): JSX.Element;
+export {};

package/dist/ui/component-searcher/component-result.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComponentResult = ComponentResult;
+
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+
+  _react = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _lodash() {
+  const data = _interopRequireDefault(require("lodash.compact"));
+
+  _lodash = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _designUiStyles() {
+  const data = require("@teambit/design.ui.styles.ellipsis");
+
+  _designUiStyles = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _envsUi() {
+  const data = require("@teambit/envs.ui.env-icon");
+
+  _envsUi = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _classnames() {
+  const data = _interopRequireDefault(require("classnames"));
+
+  _classnames = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _componentResultModule() {
+  const data = _interopRequireDefault(require("./component-result.module.scss"));
+
+  _componentResultModule = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function ComponentResult({
+  component,
+  plugins
+}) {
+  const name = component.id.fullName;
+  const startPlugins = (0, _lodash().default)(plugins === null || plugins === void 0 ? void 0 : plugins.map(plugin => plugin.start && /*#__PURE__*/_react().default.createElement(plugin.start, {
+    key: plugin.key,
+    component: component
+  })));
+  const endPlugins = (0, _lodash().default)(plugins === null || plugins === void 0 ? void 0 : plugins.map(plugin => plugin.end && /*#__PURE__*/_react().default.createElement(plugin.end, {
+    key: plugin.key,
+    component: component
+  })));
+  return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, startPlugins, /*#__PURE__*/_react().default.createElement(_envsUi().EnvIcon, {
+    component: component,
+    className: _componentResultModule().default.icon
+  }), /*#__PURE__*/_react().default.createElement("div", {
+    className: (0, _classnames().default)(_componentResultModule().default.name, _designUiStyles().ellipsis)
+  }, name), endPlugins);
+}
+
+//# sourceMappingURL=component-result.js.map

package/dist/ui/component-searcher/component-result.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["component-result.tsx"],"names":["ComponentResult","component","plugins","name","id","fullName","startPlugins","map","plugin","start","key","endPlugins","end","styles","icon","ellipsis"],"mappings":";;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAcO,SAASA,eAAT,CAAyB;AAAEC,EAAAA,SAAF;AAAaC,EAAAA;AAAb,CAAzB,EAAuE;AAC5E,QAAMC,IAAI,GAAGF,SAAS,CAACG,EAAV,CAAaC,QAA1B;AAEA,QAAMC,YAAY,GAAG,uBACnBJ,OADmB,aACnBA,OADmB,uBACnBA,OAAO,CAAEK,GAAT,CAAcC,MAAD,IAAYA,MAAM,CAACC,KAAP,iBAAgB,+BAAC,MAAD,CAAQ,KAAR;AAAc,IAAA,GAAG,EAAED,MAAM,CAACE,GAA1B;AAA+B,IAAA,SAAS,EAAET;AAA1C,IAAzC,CADmB,CAArB;AAGA,QAAMU,UAAU,GAAG,uBACjBT,OADiB,aACjBA,OADiB,uBACjBA,OAAO,CAAEK,GAAT,CAAcC,MAAD,IAAYA,MAAM,CAACI,GAAP,iBAAc,+BAAC,MAAD,CAAQ,GAAR;AAAY,IAAA,GAAG,EAAEJ,MAAM,CAACE,GAAxB;AAA6B,IAAA,SAAS,EAAET;AAAxC,IAAvC,CADiB,CAAnB;AAIA,sBACE,gEACGK,YADH,eAEE,+BAAC,iBAAD;AAAS,IAAA,SAAS,EAAEL,SAApB;AAA+B,IAAA,SAAS,EAAEY,iCAAOC;AAAjD,IAFF,eAGE;AAAK,IAAA,SAAS,EAAE,2BAAWD,iCAAOV,IAAlB,EAAwBY,0BAAxB;AAAhB,KAAoDZ,IAApD,CAHF,EAIGQ,UAJH,CADF;AAQD","sourcesContent":["import React, { ComponentType } from 'react';\nimport compact from 'lodash.compact';\nimport { ComponentModel } from '@teambit/component';\nimport { ellipsis } from '@teambit/design.ui.styles.ellipsis';\nimport { EnvIcon } from '@teambit/envs.ui.env-icon';\nimport classnames from 'classnames';\n\nimport styles from './component-result.module.scss';\n\nexport type ComponentPluginProps = React.HTMLAttributes<HTMLDivElement> & { component: ComponentModel };\n\nexport type ComponentResultPlugin = {\n  key: string;\n  start?: ComponentType<ComponentPluginProps>;\n  end?: ComponentType<ComponentPluginProps>;\n};\ntype ComponentResultProps = {\n  component: ComponentModel;\n  plugins?: ComponentResultPlugin[];\n};\n\nexport function ComponentResult({ component, plugins }: ComponentResultProps) {\n  const name = component.id.fullName;\n\n  const startPlugins = compact(\n    plugins?.map((plugin) => plugin.start && <plugin.start key={plugin.key} component={component} />)\n  );\n  const endPlugins = compact(\n    plugins?.map((plugin) => plugin.end && <plugin.end key={plugin.key} component={component} />)\n  );\n\n  return (\n    <>\n      {startPlugins}\n      <EnvIcon component={component} className={styles.icon} />\n      <div className={classnames(styles.name, ellipsis)}>{name}</div>\n      {endPlugins}\n    </>\n  );\n}\n"]}

package/dist/ui/component-searcher/component-result.module.scss

@@ -0,0 +1,13 @@
+.name {
+  flex: 1 1;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  margin: 0 0.5em;
+}
+
+.icon {
+  font-size: 1.15em;
+  width: 1em;
+  height: 1em;
+}

package/dist/ui/component-searcher/component-searcher.d.ts

@@ -0,0 +1,22 @@
+import { ComponentModel } from '@teambit/component';
+import { Searcher, SearchResult, FuzzySearchItem } from '@teambit/explorer.ui.command-bar';
+import type { SearchProvider } from '@teambit/command-bar';
+import { ComponentResultPlugin } from './component-result';
+export type { ComponentResultPlugin };
+declare type ComponentSearchIdx = {
+    name: string;
+    displayName: string;
+    component: ComponentModel;
+};
+declare type ComponentSearcherOptions = {
+    navigate: (path: string) => void;
+    resultPlugins?: ComponentResultPlugin[];
+};
+export declare class ComponentSearcher extends Searcher<ComponentModel, ComponentSearchIdx> implements SearchProvider {
+    options: ComponentSearcherOptions;
+    constructor(options: ComponentSearcherOptions);
+    updatePlugins(plugins: ComponentResultPlugin[]): void;
+    test(term: string): boolean;
+    protected toSearchableItem(item: ComponentModel): ComponentSearchIdx;
+    protected toSearchResult: ({ item }: FuzzySearchItem<ComponentSearchIdx>) => SearchResult;
+}

package/dist/ui/component-searcher/component-searcher.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComponentSearcher = void 0;
+
+function _defineProperty2() {
+  const data = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+  _defineProperty2 = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+
+  _react = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _explorerUi() {
+  const data = require("@teambit/explorer.ui.command-bar");
+
+  _explorerUi = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _componentResult() {
+  const data = require("./component-result");
+
+  _componentResult = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2().default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const searchKeys = ['displayName', 'name'];
+
+class ComponentSearcher extends _explorerUi().Searcher {
+  constructor(options) {
+    super({
+      searchKeys
+    });
+    this.options = options;
+    (0, _defineProperty2().default)(this, "toSearchResult", ({
+      item
+    }) => {
+      const {
+        navigate,
+        resultPlugins
+      } = this.options;
+      const {
+        component
+      } = item;
+      return {
+        id: component.id.fullName,
+        action: () => navigate(`/${component.id.fullName}`),
+        children: /*#__PURE__*/_react().default.createElement(_componentResult().ComponentResult, {
+          component: component,
+          plugins: resultPlugins
+        })
+      };
+    });
+  }
+
+  updatePlugins(plugins) {
+    this.options = _objectSpread(_objectSpread({}, this.options), {}, {
+      resultPlugins: plugins
+    });
+  }
+
+  test(term) {
+    return !term.startsWith('>') && term.length > 0;
+  }
+
+  toSearchableItem(item) {
+    return {
+      name: item.id.name,
+      displayName: item.id.fullName,
+      component: item
+    };
+  }
+
+}
+
+exports.ComponentSearcher = ComponentSearcher;
+
+//# sourceMappingURL=component-searcher.js.map

package/dist/ui/component-searcher/component-searcher.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["component-searcher.tsx"],"names":["searchKeys","ComponentSearcher","Searcher","constructor","options","item","navigate","resultPlugins","component","id","fullName","action","children","updatePlugins","plugins","test","term","startsWith","length","toSearchableItem","name","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAGA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;;;;;AAUA,MAAMA,UAAwC,GAAG,CAAC,aAAD,EAAgB,MAAhB,CAAjD;;AAOO,MAAMC,iBAAN,SAAgCC,sBAAhC,CAAuG;AAC5GC,EAAAA,WAAW,CAAQC,OAAR,EAA2C;AACpD,UAAM;AAAEJ,MAAAA;AAAF,KAAN;AADoD,SAAnCI,OAAmC,GAAnCA,OAAmC;AAAA,4DAuBlB,CAAC;AAAEC,MAAAA;AAAF,KAAD,KAAiE;AACnG,YAAM;AAAEC,QAAAA,QAAF;AAAYC,QAAAA;AAAZ,UAA8B,KAAKH,OAAzC;AACA,YAAM;AAAEI,QAAAA;AAAF,UAAgBH,IAAtB;AAEA,aAAO;AACLI,QAAAA,EAAE,EAAED,SAAS,CAACC,EAAV,CAAaC,QADZ;AAELC,QAAAA,MAAM,EAAE,MAAML,QAAQ,CAAE,IAAGE,SAAS,CAACC,EAAV,CAAaC,QAAS,EAA3B,CAFjB;AAGLE,QAAAA,QAAQ,eAAE,+BAAC,kCAAD;AAAiB,UAAA,SAAS,EAAEJ,SAA5B;AAAuC,UAAA,OAAO,EAAED;AAAhD;AAHL,OAAP;AAKD,KAhCqD;AAErD;;AAEDM,EAAAA,aAAa,CAACC,OAAD,EAAmC;AAC9C,SAAKV,OAAL,mCACK,KAAKA,OADV;AAEEG,MAAAA,aAAa,EAAEO;AAFjB;AAID;;AAEQC,EAAAA,IAAI,CAACC,IAAD,EAAwB;AACnC,WAAO,CAACA,IAAI,CAACC,UAAL,CAAgB,GAAhB,CAAD,IAAyBD,IAAI,CAACE,MAAL,GAAc,CAA9C;AACD;;AAEkBC,EAAAA,gBAAgB,CAACd,IAAD,EAA2C;AAC5E,WAAO;AACLe,MAAAA,IAAI,EAAEf,IAAI,CAACI,EAAL,CAAQW,IADT;AAELC,MAAAA,WAAW,EAAEhB,IAAI,CAACI,EAAL,CAAQC,QAFhB;AAGLF,MAAAA,SAAS,EAAEH;AAHN,KAAP;AAKD;;AAtB2G","sourcesContent":["import React from 'react';\n\nimport { ComponentModel } from '@teambit/component';\nimport { Searcher, SearchResult, FuzzySearchItem } from '@teambit/explorer.ui.command-bar';\nimport type { SearchProvider } from '@teambit/command-bar';\nimport { ComponentResult, ComponentResultPlugin } from './component-result';\n\nexport type { ComponentResultPlugin };\n\ntype ComponentSearchIdx = {\n  name: string;\n  displayName: string;\n  component: ComponentModel;\n};\n\nconst searchKeys: (keyof ComponentSearchIdx)[] = ['displayName', 'name'];\n\ntype ComponentSearcherOptions = {\n  navigate: (path: string) => void;\n  resultPlugins?: ComponentResultPlugin[];\n};\n\nexport class ComponentSearcher extends Searcher<ComponentModel, ComponentSearchIdx> implements SearchProvider {\n  constructor(public options: ComponentSearcherOptions) {\n    super({ searchKeys });\n  }\n\n  updatePlugins(plugins: ComponentResultPlugin[]) {\n    this.options = {\n      ...this.options,\n      resultPlugins: plugins,\n    };\n  }\n\n  override test(term: string): boolean {\n    return !term.startsWith('>') && term.length > 0;\n  }\n\n  protected override toSearchableItem(item: ComponentModel): ComponentSearchIdx {\n    return {\n      name: item.id.name,\n      displayName: item.id.fullName,\n      component: item,\n    };\n  }\n\n  protected override toSearchResult = ({ item }: FuzzySearchItem<ComponentSearchIdx>): SearchResult => {\n    const { navigate, resultPlugins } = this.options;\n    const { component } = item;\n\n    return {\n      id: component.id.fullName,\n      action: () => navigate(`/${component.id.fullName}`),\n      children: <ComponentResult component={component} plugins={resultPlugins} />,\n    };\n  };\n}\n"]}

package/dist/ui/component-searcher/index.d.ts

@@ -0,0 +1,2 @@
+export { ComponentSearcher } from './component-searcher';
+export type { ComponentResultPlugin } from './component-searcher';

package/dist/ui/component-searcher/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ComponentSearcher", {
+  enumerable: true,
+  get: function () {
+    return _componentSearcher().ComponentSearcher;
+  }
+});
+
+function _componentSearcher() {
+  const data = require("./component-searcher");
+
+  _componentSearcher = function () {
+    return data;
+  };
+
+  return data;
+}
+
+//# sourceMappingURL=index.js.map

package/dist/ui/component-searcher/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA","sourcesContent":["export { ComponentSearcher } from './component-searcher';\nexport type { ComponentResultPlugin } from './component-searcher';\n"]}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/component",
-  "version": "0.0.706",
+  "version": "0.0.709",
   "homepage": "https://bit.dev/teambit/component/component",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "component",
-    "version": "0.0.706"
+    "version": "0.0.709"
   },
   "dependencies": {
     "@teambit/any-fs": "0.0.5",
@@ -17,52 +17,58 @@
     "lodash": "4.17.21",
     "semver": "7.3.4",
     "copy-to-clipboard": "3.3.1",
-    "react-router-dom": "5.2.0",
     "lodash.flatten": "4.4.0",
+    "react-router-dom": "5.2.0",
     "classnames": "2.2.6",
+    "lodash.compact": "3.0.1",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
     "@teambit/harmony": "0.3.3",
     "@teambit/base-ui.routing.nav-link": "1.0.0",
     "@teambit/documenter.ui.heading": "4.1.1",
     "@teambit/documenter.ui.separator": "4.1.1",
+    "@teambit/explorer.ui.command-bar": "1.0.2",
     "@teambit/base-ui.layout.breakpoints": "1.0.0",
     "@teambit/base-ui.routing.routing-provider": "1.0.0",
     "@teambit/design.elements.icon": "1.0.5",
     "@teambit/design.inputs.dropdown": "0.0.7",
     "@teambit/component-id": "0.0.402",
     "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.488",
-    "@teambit/aspect-loader": "0.0.706",
+    "@teambit/aspect-loader": "0.0.709",
     "@teambit/legacy-bit-id": "0.0.399",
     "@teambit/toolbox.string.capitalize": "0.0.483",
-    "@teambit/cli": "0.0.470",
-    "@teambit/config": "0.0.483",
-    "@teambit/express": "0.0.566",
-    "@teambit/graphql": "0.0.706",
+    "@teambit/cli": "0.0.472",
+    "@teambit/config": "0.0.485",
+    "@teambit/express": "0.0.568",
+    "@teambit/graphql": "0.0.709",
     "@teambit/bit-error": "0.0.394",
-    "@teambit/command-bar": "0.0.706",
-    "@teambit/preview": "0.0.706",
-    "@teambit/pubsub": "0.0.706",
+    "@teambit/command-bar": "0.0.709",
+    "@teambit/component.ui.deprecation-icon": "0.0.493",
+    "@teambit/preview": "0.0.709",
+    "@teambit/pubsub": "0.0.709",
+    "@teambit/react-router": "0.0.709",
     "@teambit/ui-foundation.ui.is-browser": "0.0.486",
     "@teambit/ui-foundation.ui.main-dropdown": "0.0.487",
     "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.489",
     "@teambit/ui-foundation.ui.use-box.menu": "0.0.114",
-    "@teambit/ui": "0.0.706",
+    "@teambit/ui": "0.0.709",
     "@teambit/component-issues": "0.0.50",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.487",
-    "@teambit/cli-table": "0.0.33",
-    "@teambit/component-descriptor": "0.0.33",
-    "@teambit/lanes.ui.lanes": "0.0.36",
+    "@teambit/cli-table": "0.0.34",
+    "@teambit/component-descriptor": "0.0.35",
+    "@teambit/lanes.ui.lanes": "0.0.38",
     "@teambit/ui-foundation.ui.react-router.use-query": "0.0.486",
     "@teambit/design.ui.empty-box": "0.0.353",
     "@teambit/harmony.ui.aspect-box": "0.0.486",
     "@teambit/design.ui.pages.not-found": "0.0.354",
     "@teambit/design.ui.pages.server-error": "0.0.354",
-    "@teambit/compositions": "0.0.706",
-    "@teambit/deprecation": "0.0.706",
-    "@teambit/envs": "0.0.706",
+    "@teambit/compositions": "0.0.709",
+    "@teambit/deprecation": "0.0.709",
+    "@teambit/envs": "0.0.709",
     "@teambit/legacy-component-log": "0.0.392",
-    "@teambit/component.ui.version-dropdown": "0.0.521",
+    "@teambit/design.ui.styles.ellipsis": "0.0.347",
+    "@teambit/envs.ui.env-icon": "0.0.486",
+    "@teambit/component.ui.version-dropdown": "0.0.523",
     "@teambit/ui-foundation.ui.full-loader": "0.0.486",
     "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.114",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.487",
@@ -73,9 +79,10 @@
     "@types/minimatch": "3.0.4",
     "@types/lodash": "4.14.165",
     "@types/semver": "7.3.4",
-    "@types/react-router-dom": "5.1.7",
     "@types/lodash.flatten": "4.4.6",
+    "@types/react-router-dom": "5.1.7",
     "@types/classnames": "2.2.11",
+    "@types/lodash.compact": "3.0.6",
     "@types/mocha": "9.1.0",
     "@types/testing-library__jest-dom": "5.9.5",
     "@types/jest": "^26.0.0",
@@ -85,7 +92,7 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.247",
+    "@teambit/legacy": "1.0.251",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -113,7 +120,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.247",
+        "@teambit/legacy": "1.0.251",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/{preview-1649647448813.js → preview-1650243425150.js}

@@ -1,2 +1,2 @@
-export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.706/dist/component.composition.js')]
-export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.706/dist/component.docs.mdx')]
+export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.709/dist/component.composition.js')]
+export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.709/dist/component.docs.mdx')]

package/ui/component-searcher/component-result.module.scss

@@ -0,0 +1,13 @@
+.name {
+  flex: 1 1;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  margin: 0 0.5em;
+}
+
+.icon {
+  font-size: 1.15em;
+  width: 1em;
+  height: 1em;
+}

package/ui/component-searcher/component-result.tsx

@@ -0,0 +1,40 @@
+import React, { ComponentType } from 'react';
+import compact from 'lodash.compact';
+import { ComponentModel } from '@teambit/component';
+import { ellipsis } from '@teambit/design.ui.styles.ellipsis';
+import { EnvIcon } from '@teambit/envs.ui.env-icon';
+import classnames from 'classnames';
+
+import styles from './component-result.module.scss';
+
+export type ComponentPluginProps = React.HTMLAttributes<HTMLDivElement> & { component: ComponentModel };
+
+export type ComponentResultPlugin = {
+  key: string;
+  start?: ComponentType<ComponentPluginProps>;
+  end?: ComponentType<ComponentPluginProps>;
+};
+type ComponentResultProps = {
+  component: ComponentModel;
+  plugins?: ComponentResultPlugin[];
+};
+
+export function ComponentResult({ component, plugins }: ComponentResultProps) {
+  const name = component.id.fullName;
+
+  const startPlugins = compact(
+    plugins?.map((plugin) => plugin.start && <plugin.start key={plugin.key} component={component} />)
+  );
+  const endPlugins = compact(
+    plugins?.map((plugin) => plugin.end && <plugin.end key={plugin.key} component={component} />)
+  );
+
+  return (
+    <>
+      {startPlugins}
+      <EnvIcon component={component} className={styles.icon} />
+      <div className={classnames(styles.name, ellipsis)}>{name}</div>
+      {endPlugins}
+    </>
+  );
+}

package/ui/component-searcher/component-searcher.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { ComponentModel } from '@teambit/component';
+import { Searcher, SearchResult, FuzzySearchItem } from '@teambit/explorer.ui.command-bar';
+import type { SearchProvider } from '@teambit/command-bar';
+import { ComponentResult, ComponentResultPlugin } from './component-result';
+
+export type { ComponentResultPlugin };
+
+type ComponentSearchIdx = {
+  name: string;
+  displayName: string;
+  component: ComponentModel;
+};
+
+const searchKeys: (keyof ComponentSearchIdx)[] = ['displayName', 'name'];
+
+type ComponentSearcherOptions = {
+  navigate: (path: string) => void;
+  resultPlugins?: ComponentResultPlugin[];
+};
+
+export class ComponentSearcher extends Searcher<ComponentModel, ComponentSearchIdx> implements SearchProvider {
+  constructor(public options: ComponentSearcherOptions) {
+    super({ searchKeys });
+  }
+
+  updatePlugins(plugins: ComponentResultPlugin[]) {
+    this.options = {
+      ...this.options,
+      resultPlugins: plugins,
+    };
+  }
+
+  override test(term: string): boolean {
+    return !term.startsWith('>') && term.length > 0;
+  }
+
+  protected override toSearchableItem(item: ComponentModel): ComponentSearchIdx {
+    return {
+      name: item.id.name,
+      displayName: item.id.fullName,
+      component: item,
+    };
+  }
+
+  protected override toSearchResult = ({ item }: FuzzySearchItem<ComponentSearchIdx>): SearchResult => {
+    const { navigate, resultPlugins } = this.options;
+    const { component } = item;
+
+    return {
+      id: component.id.fullName,
+      action: () => navigate(`/${component.id.fullName}`),
+      children: <ComponentResult component={component} plugins={resultPlugins} />,
+    };
+  };
+}

package/ui/component-searcher/index.ts

@@ -0,0 +1,2 @@
+export { ComponentSearcher } from './component-searcher';
+export type { ComponentResultPlugin } from './component-searcher';