@teambit/command-bar 0.0.554 → 0.0.558

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

@@ -10,23 +10,43 @@ export declare type CommandEntry = {
     keybinding?: Keybinding;
     displayName: string;
 };
+/** Quick launch actions. Use the `addSearcher` slot to extend the available actions */
 export declare class CommandBarUI {
     private searcherSlot;
     private commandSlot;
     private mousetrap;
     private commandSearcher;
+    /** Opens the command bar */
     open: () => boolean;
+    /** 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;
+    /**
+     * registers a command
+     */
     addCommand(...originalCommands: CommandEntry[]): ((next: CommandHandler) => void)[];
+    /**
+     * executes command by name, if exists.
+     * @param commandId
+     */
     run(commandId: CommandId): any;
+    /**
+     * executes a keyboard shortcut manually
+     */
     trigger: (key: string) => void;
     private search;
     private getCommand;
     private updateCommandsSearcher;
     private addKeybinding;
     private renderContext;
+    /**
+     * internal. Opens and closes the command bar UI.
+     */
     setVisibility?: (visible: boolean) => void;
+    /**
+     * generate the ui for command bar
+     */
     getCommandBar: () => JSX.Element;
     constructor(searcherSlot: SearcherSlot, commandSlot: CommandSlot, pubSub: PubsubUI);
     static dependencies: import("@teambit/harmony").Aspect[];

package/dist/types.d.ts

@@ -9,7 +9,9 @@ export declare type CommanderSearchResult = {
     keybinding?: Keybinding;
 };
 export interface SearchProvider {
+    /** provide completions for this search term */
     search(term: string, limit: number): CommanderSearchResult[];
+    /** determines what terms are handled by this searcher. */
     test(term: string): boolean;
 }
 export declare type Keybinding = string | string[];

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/command-bar",
-  "version": "0.0.554",
+  "version": "0.0.558",
   "homepage": "https://bit.dev/teambit/explorer/command-bar",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.explorer",
     "name": "command-bar",
-    "version": "0.0.554"
+    "version": "0.0.558"
   },
   "dependencies": {
     "@teambit/harmony": "0.2.11",
@@ -19,14 +19,14 @@
     "core-js": "^3.0.0",
     "@teambit/base-ui.surfaces.card": "1.0.1",
     "@teambit/base-ui.text.muted-text": "1.0.1",
-    "@teambit/preview": "0.0.554",
-    "@teambit/pubsub": "0.0.554",
-    "@teambit/ui-foundation.ui.is-browser": "0.0.462",
-    "@teambit/ui": "0.0.554",
-    "@teambit/bit-error": "0.0.371",
-    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.462",
-    "@teambit/ui-foundation.ui.keycap": "0.0.462",
-    "@teambit/component": "0.0.554"
+    "@teambit/preview": "0.0.558",
+    "@teambit/pubsub": "0.0.558",
+    "@teambit/ui-foundation.ui.is-browser": "0.0.465",
+    "@teambit/ui": "0.0.558",
+    "@teambit/bit-error": "0.0.374",
+    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.465",
+    "@teambit/ui-foundation.ui.keycap": "0.0.465",
+    "@teambit/component": "0.0.558"
   },
   "devDependencies": {
     "@types/mousetrap": "1.6.5",
@@ -39,7 +39,7 @@
     "@types/node": "12.20.4"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.171",
+    "@teambit/legacy": "1.0.174",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -67,12 +67,20 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.171",
+        "@teambit/legacy": "1.0.174",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }
     }
   },
+  "files": [
+    "dist",
+    "!dist/tsconfig.tsbuildinfo",
+    "README.md",
+    "README.mdx",
+    "*.js",
+    "*.json"
+  ],
   "private": false,
   "engines": {
     "node": ">=12.22.0"

package/tsconfig.json

@@ -15,9 +15,9 @@
     "skipLibCheck": true,
     "moduleResolution": "node",
     "esModuleInterop": true,
-    "outDir": "dist",
     "composite": true,
     "emitDeclarationOnly": true,
+    "outDir": "dist",
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "allowSyntheticDefaultImports": true,
@@ -25,7 +25,6 @@
     "strict": true,
     "noImplicitAny": false,
     "rootDir": ".",
-    "removeComments": true,
     "preserveConstEnums": true,
     "resolveJsonModule": true
   },

package/command-bar.aspect.ts

@@ -1,7 +0,0 @@
-import { Aspect } from '@teambit/harmony';
-
-export const CommandBarAspect = Aspect.create({
-  id: 'teambit.explorer/command-bar',
-  dependencies: [],
-  defaultConfig: {},
-});

package/command-bar.commands.ts

@@ -1,3 +0,0 @@
-export const commandBarCommands = {
-  open: 'command-bar.open',
-};

package/command-bar.preview.runtime.tsx

@@ -1,40 +0,0 @@
-import { PreviewRuntime } from '@teambit/preview';
-import { PubsubAspect, PubsubPreview } from '@teambit/pubsub';
-import { isOpenCommandBarKeybinding } from './keybinding';
-import { CommandBarAspect } from './command-bar.aspect';
-import { KeyEvent } from './model/key-event';
-
-export class CommandBarPreview {
-  constructor(private pubSub: PubsubPreview) {
-    document.addEventListener('keydown', this.handleKeyEvent);
-    document.addEventListener('keypress', this.handleKeyEvent);
-    document.addEventListener('keyup', this.handleKeyEvent);
-  }
-
-  handleKeyEvent = (e: KeyboardEvent) => {
-    const { target } = e;
-    if (!target || isEditable(target as HTMLElement)) return;
-    if (isDenyListed(e)) e.preventDefault();
-
-    this.pubSub.pub(CommandBarAspect.id, new KeyEvent(e));
-  };
-
-  static dependencies = [PubsubAspect];
-  static runtime = PreviewRuntime;
-  static async provider([pubSub]: [PubsubPreview]) {
-    const pubsubPreview = new CommandBarPreview(pubSub);
-    return pubsubPreview;
-  }
-}
-
-const editableTags = ['INPUT', 'SELECT', 'TEXTAREA'];
-function isEditable(element: HTMLElement) {
-  return editableTags.includes(element.tagName) || element.isContentEditable;
-}
-
-CommandBarAspect.addRuntime(CommandBarPreview);
-
-// block default browser behavior that would override our keybinding.
-function isDenyListed(e: KeyboardEvent) {
-  return isOpenCommandBarKeybinding(e);
-}

package/command-bar.ui.runtime.tsx

@@ -1,177 +0,0 @@
-import React, { ReactNode } from 'react';
-import { Slot, SlotRegistry } from '@teambit/harmony';
-import Mousetrap from 'mousetrap';
-
-import UIAspect, { UIRuntime, UiUI } from '@teambit/ui';
-import { PubsubAspect, PubsubUI } from '@teambit/pubsub';
-import { isBrowser } from '@teambit/ui-foundation.ui.is-browser';
-import { CommandBar } from './ui/command-bar';
-import { CommandSearcher } from './ui/command-searcher';
-import { CommandBarAspect } from './command-bar.aspect';
-import { commandBarCommands } from './command-bar.commands';
-import { SearchProvider, 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';
-
-const RESULT_LIMIT = 5;
-type SearcherSlot = SlotRegistry<SearchProvider>;
-type CommandSlot = SlotRegistry<CommandEntry[]>;
-
-export type CommandEntry = {
-  id: CommandId;
-  handler: CommandHandler;
-  keybinding?: Keybinding;
-  displayName: string;
-};
-
-/** Quick launch actions. Use the `addSearcher` slot to extend the available actions */
-export class CommandBarUI {
-  private mousetrap = isBrowser ? new Mousetrap() : new MousetrapStub();
-  private commandSearcher = new CommandSearcher([]);
-
-  /** Opens the command bar */
-  open = () => {
-    this.setVisibility?.(true);
-    return false; // aka prevent default
-  };
-
-  /** Closes the command bar */
-  close = () => {
-    this.setVisibility?.(false);
-  };
-
-  /** Add and autocomplete provider. To support keyboard navigation, each result should have a props `active: boolean`, and `exectue: () => any` */
-  addSearcher(commandSearcher: SearchProvider) {
-    this.searcherSlot.register(commandSearcher);
-    return this;
-  }
-
-  /**
-   * registers a command
-   */
-  addCommand(...originalCommands: CommandEntry[]) {
-    originalCommands.forEach(({ id: commandId }) => {
-      if (this.getCommand(commandId) !== undefined) throw new DuplicateCommandError(commandId);
-    });
-
-    // commands could mutate later on, clone to ensure immutability 👌
-    const commands = originalCommands.map((x) => ({
-      id: x.id,
-      displayName: x.displayName,
-      handler: x.handler,
-      keybinding: x.keybinding,
-    }));
-
-    this.commandSlot.register(commands);
-
-    commands.forEach((command) => {
-      if (command.keybinding) {
-        this.addKeybinding(command.keybinding, command.id);
-      }
-    });
-
-    this.updateCommandsSearcher();
-
-    const updaters = commands.map((command) => (next: CommandHandler) => {
-      command.handler = next;
-    });
-    return updaters;
-  }
-
-  /**
-   * executes command by name, if exists.
-   * @param commandId
-   */
-  run(commandId: CommandId) {
-    const commandEntry = this.getCommand(commandId);
-    if (!commandEntry) return undefined;
-
-    return commandEntry.handler();
-  }
-
-  /**
-   * executes a keyboard shortcut manually
-   */
-  trigger = (key: string) => {
-    this.mousetrap.trigger(key);
-  };
-
-  private search = (term: string, limit: number = RESULT_LIMIT) => {
-    const searchers = this.searcherSlot.values();
-
-    const searcher = searchers.find((x) => x.test(term));
-    return searcher?.search(term, limit) || [];
-  };
-
-  private getCommand(id: CommandId) {
-    const relevantCommands = this.commandSlot
-      .values()
-      .map((commands) => commands.find((command) => command.id === id))
-      .filter((x) => !!x);
-
-    return relevantCommands.pop();
-  }
-
-  private updateCommandsSearcher() {
-    const commands = this.commandSlot.values().flat();
-    this.commandSearcher.update(commands);
-  }
-
-  private addKeybinding(key: Keybinding, command: CommandId) {
-    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.
-   */
-  setVisibility?: (visible: boolean) => void;
-
-  /**
-   * generate the ui for command bar
-   */
-  getCommandBar = () => {
-    return <CommandBar key="CommandBarUI" search={this.search} commander={this} />;
-  };
-
-  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);
-    });
-  }
-
-  static dependencies = [UIAspect, PubsubAspect];
-  static slots = [Slot.withType<SearchProvider>(), Slot.withType<CommandEntry[]>()];
-  static runtime = UIRuntime;
-  static async provider(
-    [uiUi, pubsubUI]: [UiUI, PubsubUI],
-    config,
-    [searcherSlot, commandSlots]: [SearcherSlot, CommandSlot]
-  ) {
-    const commandBar = new CommandBarUI(searcherSlot, commandSlots, pubsubUI);
-
-    commandBar.addCommand({
-      id: commandBarCommands.open,
-      handler: commandBar.open,
-      displayName: 'Open command bar',
-      keybinding: openCommandBarKeybinding,
-    });
-
-    uiUi.registerHudItem(commandBar.getCommandBar());
-    uiUi.registerRenderHooks({
-      reactContext: commandBar.renderContext,
-    });
-
-    return commandBar;
-  }
-}
-
-CommandBarAspect.addRuntime(CommandBarUI);

package/duplicate-command-error.ts

@@ -1,8 +0,0 @@
-import { BitError } from '@teambit/bit-error';
-import { CommandId } from './types';
-
-export class DuplicateCommandError extends BitError {
-  constructor(commandId: CommandId) {
-    super(`Command "${commandId}" is already added.`);
-  }
-}

package/index.ts

@@ -1,6 +0,0 @@
-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 { CommandBarUI, CommandEntry } from './command-bar.ui.runtime';
-export type { CommandHandler, CommanderSearchResult, CommandId, Keybinding, SearchProvider } from './types';

package/keybinding.ts

@@ -1,5 +0,0 @@
-export const openCommandBarKeybinding = 'mod+k';
-export const isOpenCommandBarKeybinding = (e: KeyboardEvent) => {
-  // TODO - use a keybinding matcher.
-  return (e.ctrlKey || e.metaKey) && e.key === 'k';
-};

package/model/key-event/index.ts

@@ -1 +0,0 @@
-export { KeyEvent } from './key-event';

package/model/key-event/key-event.tsx

@@ -1,9 +0,0 @@
-import { BitBaseEvent } from '@teambit/pubsub';
-import { serializeKeyboardEvent } from './serialize-keyboard-event';
-
-export class KeyEvent extends BitBaseEvent<KeyboardEventInit> {
-  constructor(event: KeyboardEvent, timestamp = Date.now()) {
-    const serialized = serializeKeyboardEvent(event);
-    super(event.type, '0.0.1', timestamp, serialized);
-  }
-}

package/model/key-event/serialize-keyboard-event.ts

@@ -1,16 +0,0 @@
-import isPrimitive from 'is-primitive';
-
-export function serializeKeyboardEvent(e: KeyboardEvent): KeyboardEventInit {
-  const serialized = {};
-
-  // 'for ... in' includes properties from prototype (which we want)
-  // eslint-disable-next-line no-restricted-syntax, guard-for-in
-  for (const key in e) {
-    const val = e[key];
-    if (isPrimitive(val)) {
-      serialized[key] = val;
-    }
-  }
-
-  return serialized;
-}

package/mousetrap-stub.ts

@@ -1,20 +0,0 @@
-import { MousetrapInstance } from 'mousetrap';
-
-export class MousetrapStub implements MousetrapInstance {
-  stopCallback() {
-    return false;
-  }
-  bind() {
-    return this;
-  }
-  unbind() {
-    return this;
-  }
-  trigger() {
-    return this;
-  }
-  handleKey() {}
-  reset() {
-    return this;
-  }
-}

package/types/asset.d.ts

@@ -1,29 +0,0 @@
-declare module '*.png' {
-  const value: any;
-  export = value;
-}
-declare module '*.svg' {
-  import type { FunctionComponent, SVGProps } from 'react';
-
-  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
-  const src: string;
-  export default src;
-}
-
-// @TODO Gilad
-declare module '*.jpg' {
-  const value: any;
-  export = value;
-}
-declare module '*.jpeg' {
-  const value: any;
-  export = value;
-}
-declare module '*.gif' {
-  const value: any;
-  export = value;
-}
-declare module '*.bmp' {
-  const value: any;
-  export = value;
-}

package/types/style.d.ts

@@ -1,42 +0,0 @@
-declare module '*.module.css' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-declare module '*.module.scss' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-declare module '*.module.sass' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.module.less' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.less' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.css' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.sass' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.scss' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.mdx' {
-  const component: any;
-  export default component;
-}

package/types.tsx

@@ -1,20 +0,0 @@
-export type CommandId = string;
-export type CommandHandler = (...arg: any[]) => any;
-
-export type CommanderSearchResult = {
-  id: string;
-  displayName: string;
-  handler: CommandHandler;
-  icon?: string;
-  iconAlt?: string;
-  keybinding?: Keybinding;
-};
-
-export interface SearchProvider {
-  /** provide completions for this search term */
-  search(term: string, limit: number): CommanderSearchResult[];
-  /** determines what terms are handled by this searcher. */
-  test(term: string): boolean;
-}
-
-export type Keybinding = string | string[];

package/ui/autocomplete-input/autocomplete-input.module.scss

@@ -1,13 +0,0 @@
-.input {
-  font-size: inherit;
-  font-family: inherit;
-  color: inherit;
-  border: none;
-
-  // command bar is open iff input is focused, so outline is not needed
-  outline: none;
-
-  &::placeholder {
-    color: var(--bit-text-inactive, #babec9);
-  }
-}

package/ui/autocomplete-input/autocomplete-input.tsx

@@ -1,62 +0,0 @@
-import React, { useCallback, useEffect, createRef, InputHTMLAttributes } from 'react';
-import classNames from 'classnames';
-import styles from './autocomplete-input.module.scss';
-
-type AutoCompleteInputProps = InputHTMLAttributes<HTMLInputElement> & {
-  onEscape?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-  onDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-  onUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-  onEnter?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-  focus?: Truthy;
-};
-
-type Truthy = boolean | number | string | null | undefined;
-
-export function AutoCompleteInput({
-  className,
-  onEscape,
-  onDown,
-  onUp,
-  onEnter,
-  onKeyDown,
-  focus,
-  ...rest
-}: AutoCompleteInputProps) {
-  const inputRef = createRef<HTMLInputElement>();
-
-  useEffect(() => {
-    if (focus) inputRef.current?.focus();
-  }, [focus]);
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      onKeyDown?.(e);
-      if (e.defaultPrevented) return;
-
-      const handlers = {
-        Escape: () => {
-          e.preventDefault();
-          onEscape?.(e);
-        },
-        ArrowDown: () => {
-          e.preventDefault();
-          onDown?.(e);
-        },
-        ArrowUp: () => {
-          e.preventDefault();
-          onUp?.(e);
-        },
-        Enter: () => {
-          e.preventDefault();
-          onEnter?.(e);
-        },
-      };
-
-      if (e.key in handlers) handlers[e.key]();
-    },
-    [onEscape, onDown, onUp, onEnter]
-  );
-
-  // @ts-ignore (https://github.com/teambit/bit/issues/4908)
-  return <input {...rest} ref={inputRef} className={classNames(styles.input, className)} onKeyDown={handleKeyDown} />;
-}

package/ui/autocomplete-input/index.ts

@@ -1 +0,0 @@
-export * from './autocomplete-input';

package/ui/command-bar/command-bar.module.scss

@@ -1,44 +0,0 @@
-@import '~@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
-
-.commandBar {
-  display: none;
-  flex-direction: column;
-
-  position: fixed;
-  top: 130px;
-  left: 50%;
-  transform: translate(-50%, 0);
-  width: 643px;
-  border: 1px solid var(--bit-border-color, #babec9);
-  max-width: 90%;
-
-  overflow: hidden; // enforce border-radius
-
-  color: var(--bit-text-color-heavy, #2b2b2b);
-  box-shadow: 0 40px 60px 0 rgba(0, 0, 0, 0.32);
-
-  &.visible {
-    display: flex;
-  }
-}
-
-.commandBar {
-  padding: 0px;
-  z-index: $modal-z-index;
-}
-
-.input {
-  padding: 0 24px;
-  font-size: 20px;
-  height: 56px;
-  line-height: 56px;
-}
-
-.results {
-  font-size: 14px;
-
-  &:not(:empty) {
-    margin-bottom: 8px;
-    border-top: solid 1px var(--bit-border-color, #babec9);
-  }
-}

package/ui/command-bar/command-bar.tsx

@@ -1,66 +0,0 @@
-import React, { useCallback, useEffect, useState, useMemo } from 'react';
-import classNames from 'classnames';
-import { Card, CardProps } from '@teambit/base-ui.surfaces.card';
-import type { CommandBarUI } from '../../command-bar.ui.runtime';
-import { CommanderSearchResult } from '../../types';
-import { AutoCompleteInput } from '../autocomplete-input';
-import { CommandBarItem } from '../command-bar-item';
-import styles from './command-bar.module.scss';
-
-export type CommandBarProps = {
-  search: (term: string, limit?: number) => CommanderSearchResult[];
-  commander: CommandBarUI;
-} & CardProps;
-
-const MIN_IDX = 0;
-
-export function CommandBar({ search, commander, elevation = 'high', className, ...rest }: CommandBarProps) {
-  const [term, setTerm] = useState('');
-  const options = useMemo(() => search(term), [term, search]);
-  const [activeIdx, setActive] = useState(MIN_IDX);
-  const increment = useCallback(() => setActive((x) => Math.min(x + 1, options.length - 1)), [options.length]);
-  const decrement = useCallback(() => setActive((x) => Math.max(x - 1, MIN_IDX)), []);
-  const [visible, setVisibility] = useState(false);
-
-  commander.setVisibility = setVisibility;
-
-  const handleEnter = useCallback(() => {
-    setVisibility(false);
-    options[activeIdx]?.handler();
-  }, [options, activeIdx]);
-
-  useEffect(() => setTerm(''), [visible]);
-  useEffect(() => setActive(MIN_IDX), [options]);
-
-  return (
-    <Card
-      {...rest}
-      elevation={elevation}
-      className={classNames(className, styles.commandBar, visible && styles.visible)}
-    >
-      <AutoCompleteInput
-        value={term}
-        focus={visible}
-        className={styles.input}
-        placeholder="Search anything or type > to only search commands"
-        onChange={(e) => setTerm(e.target.value)}
-        onDown={increment}
-        onUp={decrement}
-        onEnter={handleEnter}
-        onEscape={() => setVisibility(false)}
-        onBlur={() => setVisibility(false)}
-      />
-      <div className={styles.results}>
-        {options.map((x, idx) => (
-          <CommandBarItem
-            key={idx} // use index instead of id to avoid duplicate keys
-            entry={x}
-            active={idx === activeIdx}
-            // mouseDown happens before blur, which closes the command bar
-            onMouseDown={x.handler}
-          />
-        ))}
-      </div>
-    </Card>
-  );
-}

package/ui/command-bar/index.ts

@@ -1 +0,0 @@
-export { CommandBar, CommandBarProps } from './command-bar';

package/ui/command-bar-context/command-bar-context.tsx

@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-import { CommandBarUI } from '../../command-bar.ui.runtime';
-
-export const CommandBarContext = createContext<CommandBarUI | undefined>(undefined);

package/ui/command-bar-context/index.ts

@@ -1 +0,0 @@
-export { CommandBarContext } from './command-bar-context';

package/ui/command-bar-item/command-bar-item.module.scss

@@ -1,38 +0,0 @@
-.commandBarOption {
-  display: flex;
-  align-items: center;
-
-  height: 40px;
-  padding: 0 24px;
-  transition: all 180ms;
-
-  user-select: none;
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--bit-bg-heavy, #f6f6f6);
-  }
-
-  &.active,
-  &.active:hover {
-    background-color: var(--bit-accent-bg, #eceaff);
-  }
-}
-
-.name {
-  flex: 1 1;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.commandKeys {
-  float: right;
-  font-size: 15px;
-}
-
-.icon {
-  width: 16px;
-  height: 16px;
-  margin-right: 8px;
-}

package/ui/command-bar-item/command-bar-item.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import { KeySequence } from '@teambit/ui-foundation.ui.keycap';
-import { mutedText } from '@teambit/base-ui.text.muted-text';
-import { CommanderSearchResult } from '../../types';
-import styles from './command-bar-item.module.scss';
-
-export type CommandItemProps = {
-  active?: boolean;
-  entry: CommanderSearchResult;
-} & React.HTMLAttributes<HTMLDivElement>;
-
-export function CommandBarItem({ entry, className, active, ...rest }: CommandItemProps) {
-  const { handler, displayName: name, icon, iconAlt, keybinding } = entry;
-  const firstKeybinding = Array.isArray(keybinding) ? keybinding[0] : keybinding;
-
-  return (
-    <div
-      {...rest}
-      className={classnames(className, styles.commandBarOption, active && styles.active)}
-      onMouseDown={handler}
-    >
-      {icon && <img src={icon} alt={iconAlt} className={styles.icon} />}
-      <div className={styles.name}>{name}</div>
-      {firstKeybinding && (
-        <KeySequence className={classnames(styles.commandKeys, mutedText)}>{firstKeybinding}</KeySequence>
-      )}
-    </div>
-  );
-}

package/ui/command-bar-item/index.ts

@@ -1 +0,0 @@
-export { CommandBarItem, CommandItemProps } from './command-bar-item';

package/ui/command-searcher/command-searcher.ts

@@ -1,31 +0,0 @@
-import Fuse from 'fuse.js';
-import { CommanderSearchResult, SearchProvider } from '../../types';
-
-const searchedKeys: (keyof CommanderSearchResult)[] = ['displayName'];
-
-export class CommandSearcher implements SearchProvider {
-  private fuseCommands = new Fuse<CommanderSearchResult>([], {
-    // weight can be included here.
-    // fields loses weight the longer they get, so it seems ok for now.
-    keys: searchedKeys,
-  });
-
-  constructor(commands: CommanderSearchResult[]) {
-    this.fuseCommands.setCollection(commands);
-  }
-
-  update(commands: CommanderSearchResult[]) {
-    this.fuseCommands.setCollection(commands);
-  }
-
-  search(term: string, limit: number): CommanderSearchResult[] {
-    const unprefixedPattern = term.replace(/^>/, '');
-    const searchResults = this.fuseCommands.search(unprefixedPattern, { limit });
-    // @ts-ignore this shows error on Circle for some weird reason
-    return searchResults.map((x) => x.item);
-  }
-
-  test(term: string): boolean {
-    return term.startsWith('>');
-  }
-}

package/ui/command-searcher/index.ts

@@ -1 +0,0 @@
-export { CommandSearcher } from './command-searcher';

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

@@ -1,44 +0,0 @@
-import Fuse from 'fuse.js';
-import memoizeOne from 'memoize-one';
-import { ComponentModel } from '@teambit/component';
-import { SearchProvider, CommanderSearchResult } from '../../types';
-
-type ComponentSearchResult = CommanderSearchResult & { name: string };
-
-const searchedKeys: (keyof ComponentSearchResult)[] = ['displayName', 'name'];
-
-export class ComponentSearcher implements SearchProvider {
-  private fuseCommands = new Fuse<ComponentSearchResult>([], {
-    // weight can be included here.
-    // fields loses weight the longer they get, so it seems ok for now.
-    keys: searchedKeys,
-  });
-
-  constructor(private navigate: (path: string) => void) {}
-
-  // this method can be called on every render. memoize to prevent redundant calls
-  update = memoizeOne((components: ComponentModel[]) => {
-    const { navigate } = this;
-
-    const searchResults = components.map((c) => ({
-      id: c.id.fullName,
-      displayName: c.id.fullName,
-      name: c.id.name,
-      handler: () => navigate(`/${c.id.fullName}`),
-      icon: c.environment?.icon,
-      iconAlt: c.environment?.id,
-    }));
-
-    this.fuseCommands.setCollection(searchResults);
-  });
-
-  search(term: string, limit: number): ComponentSearchResult[] {
-    const searchResults = this.fuseCommands.search(term, { limit });
-    // @ts-ignore this shows error on Circle for some weird reason
-    return searchResults.map((x) => x.item);
-  }
-
-  test(term: string): boolean {
-    return !term.startsWith('>') && term.length > 0;
-  }
-}

package/ui/component-searcher/index.ts

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