@teambit/command-bar 0.0.566 → 0.0.570

package/command-bar.preview.runtime.tsx

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,177 @@
+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/model/key-event/index.ts

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

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,16 @@
+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/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/command-bar",
-  "version": "0.0.566",
+  "version": "0.0.570",
   "homepage": "https://bit.dev/teambit/explorer/command-bar",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.explorer",
     "name": "command-bar",
-    "version": "0.0.566"
+    "version": "0.0.570"
   },
   "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.566",
-    "@teambit/pubsub": "0.0.566",
-    "@teambit/ui-foundation.ui.is-browser": "0.0.470",
-    "@teambit/ui": "0.0.566",
-    "@teambit/bit-error": "0.0.379",
-    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.471",
-    "@teambit/ui-foundation.ui.keycap": "0.0.470",
-    "@teambit/component": "0.0.566"
+    "@teambit/preview": "0.0.570",
+    "@teambit/pubsub": "0.0.570",
+    "@teambit/ui-foundation.ui.is-browser": "0.0.472",
+    "@teambit/ui": "0.0.570",
+    "@teambit/bit-error": "0.0.381",
+    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.473",
+    "@teambit/ui-foundation.ui.keycap": "0.0.472",
+    "@teambit/component": "0.0.570"
   },
   "devDependencies": {
     "@types/mousetrap": "1.6.5",
@@ -39,7 +39,7 @@
     "@types/node": "12.20.4"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.179",
+    "@teambit/legacy": "1.0.181",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -67,27 +67,12 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.179",
+        "@teambit/legacy": "1.0.181",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }
     }
   },
-  "files": [
-    "dist",
-    "!dist/tsconfig.tsbuildinfo",
-    "**/*.md",
-    "**/*.mdx",
-    "**/*.js",
-    "**/*.json",
-    "**/*.sass",
-    "**/*.scss",
-    "**/*.less",
-    "**/*.css",
-    "**/*.css",
-    "**/*.jpeg",
-    "**/*.gif"
-  ],
   "private": false,
   "engines": {
     "node": ">=12.22.0"

package/types/asset.d.ts

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,20 @@
+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.tsx

@@ -0,0 +1,62 @@
+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

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

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

@@ -0,0 +1,66 @@
+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

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

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

@@ -0,0 +1,4 @@
+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

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

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

@@ -0,0 +1,30 @@
+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

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

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

@@ -0,0 +1,31 @@
+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

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

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

@@ -0,0 +1,44 @@
+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

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