@teambit/command-bar 0.0.707 → 0.0.710

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

@@ -1,89 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-require("core-js/modules/es.regexp.exec.js");
-
-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 _fuse() {
-  const data = _interopRequireDefault(require("fuse.js"));
-
-  _fuse = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _memoizeOne() {
-  const data = _interopRequireDefault(require("memoize-one"));
-
-  _memoizeOne = function () {
-    return data;
-  };
-
-  return data;
-}
-
-const searchedKeys = ['displayName', 'name'];
-
-class ComponentSearcher {
-  constructor(navigate) {
-    this.navigate = navigate;
-    (0, _defineProperty2().default)(this, "fuseCommands", new (_fuse().default)([], {
-      // weight can be included here.
-      // fields loses weight the longer they get, so it seems ok for now.
-      keys: searchedKeys
-    }));
-    (0, _defineProperty2().default)(this, "update", (0, _memoizeOne().default)(components => {
-      const {
-        navigate
-      } = this;
-      const searchResults = components.map(c => {
-        var _c$environment, _c$environment2;
-
-        return {
-          id: c.id.fullName,
-          displayName: c.id.fullName,
-          name: c.id.name,
-          handler: () => navigate(`/${c.id.fullName}`),
-          icon: (_c$environment = c.environment) === null || _c$environment === void 0 ? void 0 : _c$environment.icon,
-          iconAlt: (_c$environment2 = c.environment) === null || _c$environment2 === void 0 ? void 0 : _c$environment2.id
-        };
-      });
-      this.fuseCommands.setCollection(searchResults);
-    }));
-  } // this method can be called on every render. memoize to prevent redundant calls
-
-
-  search(term, limit) {
-    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) {
-    return !term.startsWith('>') && term.length > 0;
-  }
-
-}
-
-exports.ComponentSearcher = ComponentSearcher;
-
-//# sourceMappingURL=component-searcher.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["component-searcher.ts"],"names":["searchedKeys","ComponentSearcher","constructor","navigate","Fuse","keys","components","searchResults","map","c","id","fullName","displayName","name","handler","icon","environment","iconAlt","fuseCommands","setCollection","search","term","limit","x","item","test","startsWith","length"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAMA,MAAMA,YAA6C,GAAG,CAAC,aAAD,EAAgB,MAAhB,CAAtD;;AAEO,MAAMC,iBAAN,CAAkD;AAOvDC,EAAAA,WAAW,CAASC,QAAT,EAA2C;AAAA,SAAlCA,QAAkC,GAAlCA,QAAkC;AAAA,0DAN/B,KAAIC,eAAJ,EAAgC,EAAhC,EAAoC;AACzD;AACA;AACAC,MAAAA,IAAI,EAAEL;AAHmD,KAApC,CAM+B;AAAA,oDAG7C,2BAAYM,UAAD,IAAkC;AACpD,YAAM;AAAEH,QAAAA;AAAF,UAAe,IAArB;AAEA,YAAMI,aAAa,GAAGD,UAAU,CAACE,GAAX,CAAgBC,CAAD;AAAA;;AAAA,eAAQ;AAC3CC,UAAAA,EAAE,EAAED,CAAC,CAACC,EAAF,CAAKC,QADkC;AAE3CC,UAAAA,WAAW,EAAEH,CAAC,CAACC,EAAF,CAAKC,QAFyB;AAG3CE,UAAAA,IAAI,EAAEJ,CAAC,CAACC,EAAF,CAAKG,IAHgC;AAI3CC,UAAAA,OAAO,EAAE,MAAMX,QAAQ,CAAE,IAAGM,CAAC,CAACC,EAAF,CAAKC,QAAS,EAAnB,CAJoB;AAK3CI,UAAAA,IAAI,oBAAEN,CAAC,CAACO,WAAJ,mDAAE,eAAeD,IALsB;AAM3CE,UAAAA,OAAO,qBAAER,CAAC,CAACO,WAAJ,oDAAE,gBAAeN;AANmB,SAAR;AAAA,OAAf,CAAtB;AASA,WAAKQ,YAAL,CAAkBC,aAAlB,CAAgCZ,aAAhC;AACD,KAbQ,CAH6C;AAAE,GAPD,CASvD;;;AAgBAa,EAAAA,MAAM,CAACC,IAAD,EAAeC,KAAf,EAAuD;AAC3D,UAAMf,aAAa,GAAG,KAAKW,YAAL,CAAkBE,MAAlB,CAAyBC,IAAzB,EAA+B;AAAEC,MAAAA;AAAF,KAA/B,CAAtB,CAD2D,CAE3D;;AACA,WAAOf,aAAa,CAACC,GAAd,CAAmBe,CAAD,IAAOA,CAAC,CAACC,IAA3B,CAAP;AACD;;AAEDC,EAAAA,IAAI,CAACJ,IAAD,EAAwB;AAC1B,WAAO,CAACA,IAAI,CAACK,UAAL,CAAgB,GAAhB,CAAD,IAAyBL,IAAI,CAACM,MAAL,GAAc,CAA9C;AACD;;AAjCsD","sourcesContent":["import Fuse from 'fuse.js';\nimport memoizeOne from 'memoize-one';\nimport { ComponentModel } from '@teambit/component';\nimport { SearchProvider, CommanderSearchResult } from '../../types';\n\ntype ComponentSearchResult = CommanderSearchResult & { name: string };\n\nconst searchedKeys: (keyof ComponentSearchResult)[] = ['displayName', 'name'];\n\nexport class ComponentSearcher implements SearchProvider {\n  private fuseCommands = new Fuse<ComponentSearchResult>([], {\n    // weight can be included here.\n    // fields loses weight the longer they get, so it seems ok for now.\n    keys: searchedKeys,\n  });\n\n  constructor(private navigate: (path: string) => void) {}\n\n  // this method can be called on every render. memoize to prevent redundant calls\n  update = memoizeOne((components: ComponentModel[]) => {\n    const { navigate } = this;\n\n    const searchResults = components.map((c) => ({\n      id: c.id.fullName,\n      displayName: c.id.fullName,\n      name: c.id.name,\n      handler: () => navigate(`/${c.id.fullName}`),\n      icon: c.environment?.icon,\n      iconAlt: c.environment?.id,\n    }));\n\n    this.fuseCommands.setCollection(searchResults);\n  });\n\n  search(term: string, limit: number): ComponentSearchResult[] {\n    const searchResults = this.fuseCommands.search(term, { limit });\n    // @ts-ignore this shows error on Circle for some weird reason\n    return searchResults.map((x) => x.item);\n  }\n\n  test(term: string): boolean {\n    return !term.startsWith('>') && term.length > 0;\n  }\n}\n"]}

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

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

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

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

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

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/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';