@teambit/component 0.0.568 → 0.0.569

package/aspect.section.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { MenuWidgetIcon } from '@teambit/ui-foundation.ui.menu-widget-icon';
+import { Section } from './section';
+import { AspectPage } from './ui/aspect-page';
+
+export class AspectSection implements Section {
+  route = {
+    path: '~aspect',
+    children: <AspectPage />,
+  };
+  navigationLink = {
+    href: '~aspect',
+    children: <MenuWidgetIcon icon="configuration" tooltipContent="Configuration" />,
+  };
+  order = 50;
+}

package/component-map/component-map.ts

@@ -0,0 +1,106 @@
+import { ComponentID } from '@teambit/component-id';
+import { Component } from '../component';
+
+/**
+ * allows to index components -> values.
+ */
+export class ComponentMap<T> {
+  constructor(readonly hashMap: Map<string, [Component, T]>) {}
+
+  /**
+   * @deprecated please use `get` instead
+   */
+  byComponent(component: Component) {
+    return this.hashMap.get(component.id.toString());
+  }
+
+  get components() {
+    return this.toArray().map(([component]) => component);
+  }
+
+  /**
+   * get a value for a component.
+   */
+  get(component: Component) {
+    return this.hashMap.get(component.id.toString());
+  }
+
+  /**
+   * get a value by the component-id
+   */
+  getValueByComponentId(componentId: ComponentID): T | null {
+    const tuple = this.hashMap.get(componentId.toString());
+    if (!tuple) return null;
+    return tuple[1];
+  }
+
+  /**
+   * returns an array.
+   */
+  toArray() {
+    return Array.from(this.hashMap.values());
+  }
+
+  /**
+   * map entries and return a new component map.
+   */
+  map<NewType>(predicate: (value: T, component: Component) => NewType): ComponentMap<NewType> {
+    const tuples: [string, [Component, NewType]][] = this.toArray().map(([component, value]) => {
+      const newValue = predicate(value, component);
+      return [component.id.toString(), [component, newValue]];
+    });
+
+    return new ComponentMap(new Map(tuples));
+  }
+  /**
+   * flatten values of all components into a single array.
+   */
+  flattenValue(): T[] {
+    return this.toArray().reduce((acc: T[], [, value]) => {
+      acc = acc.concat(value);
+      return acc;
+    }, []);
+  }
+
+  /**
+   * filter all components with empty values and return a new map.
+   */
+  filter(predicate: (value: T) => boolean): ComponentMap<T> {
+    const tuples = this.toArray().filter(([, value]) => {
+      return predicate(value);
+    });
+
+    const asMap: [string, [Component, T]][] = tuples.map(([component, value]) => {
+      return [component.id.toString(), [component, value]];
+    });
+
+    return new ComponentMap(new Map(asMap));
+  }
+
+  /**
+   * get all component ids.
+   */
+  keys() {
+    return this.hashMap.keys();
+  }
+
+  static create<U>(rawMap: [Component, U][]) {
+    const newMap: [string, [Component, U]][] = rawMap.map(([component, data]) => {
+      return [component.id.toString(), [component, data]];
+    });
+    return new ComponentMap(new Map(newMap));
+  }
+
+  /**
+   * create a component map from components and a value predicate.
+   * @param components components to zip into the map.
+   * @param predicate predicate for returning desired value.
+   */
+  static as<U>(components: Component[], predicate: (component: Component) => U): ComponentMap<U> {
+    const tuples: [string, [Component, U]][] = components.map((component) => {
+      return [component.id.toString(), [component, predicate(component)]];
+    });
+
+    return new ComponentMap(new Map(tuples));
+  }
+}

package/component-map/index.ts

@@ -0,0 +1 @@
+export { ComponentMap } from './component-map';

package/component.ui.runtime.tsx

@@ -0,0 +1,216 @@
+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 { NavLinkProps } from '@teambit/base-ui.routing.nav-link';
+import { UIRuntime } from '@teambit/ui';
+import { isBrowser } from '@teambit/ui-foundation.ui.is-browser';
+import React from 'react';
+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 } from './ui/menu';
+import { AspectSection } from './aspect.section';
+import { ComponentModel } from './ui';
+
+export type Server = {
+  env: string;
+  url: string;
+};
+
+export type ComponentMeta = {
+  id: string;
+};
+
+export const componentIdUrlRegex = '[\\w\\/-]*[\\w-]';
+
+export class ComponentUI {
+  readonly routePath = `/:componentId(${componentIdUrlRegex})`;
+
+  constructor(
+    /**
+     * Pubsub aspects
+     */
+    private pubsub: PubsubUI,
+
+    private routeSlot: RouteSlot,
+
+    private navSlot: OrderedNavigationSlot,
+
+    /**
+     * slot for registering a new widget to the menu.
+     */
+    private widgetSlot: OrderedNavigationSlot,
+
+    private menuItemSlot: MenuItemSlot,
+
+    private pageItemSlot: ComponentPageSlot,
+
+    private commandBarUI: CommandBarUI
+  ) {
+    if (isBrowser) this.registerPubSub();
+  }
+
+  /**
+   * the current visible component
+   */
+  private activeComponent?: ComponentModel;
+
+  private copyNpmId = () => {
+    const packageName = this.activeComponent?.packageName;
+    if (packageName) {
+      const version = this.activeComponent?.id.version;
+      const versionString = version ? `@${version}` : '';
+      copy(`${packageName}${versionString}`);
+    }
+  };
+
+  /**
+   * key bindings used by component aspect
+   */
+  private keyBindings: CommandEntry[] = [
+    {
+      id: 'component.copyBitId', // TODO - extract to a component!
+      handler: () => {
+        copy(this.activeComponent?.id.toString() || '');
+      },
+      displayName: 'Copy component ID',
+      keybinding: '.',
+    },
+    {
+      id: 'component.copyNpmId', // TODO - extract to a component!
+      handler: this.copyNpmId,
+      displayName: 'Copy component package name',
+      keybinding: ',',
+    },
+  ];
+
+  private menuItems: MenuItem[] = [
+    {
+      category: 'general',
+      title: 'Open command bar',
+      keyChar: 'mod+k',
+      handler: () => this.commandBarUI?.run('command-bar.open'),
+    },
+    {
+      category: 'general',
+      title: 'Toggle component list',
+      keyChar: 'alt+s',
+      handler: () => this.commandBarUI?.run('sidebar.toggle'),
+    },
+    {
+      category: 'workflow',
+      title: 'Copy component ID',
+      keyChar: '.',
+      handler: () => this.commandBarUI?.run('component.copyBitId'),
+    },
+    {
+      category: 'workflow',
+      title: 'Copy component package name',
+      keyChar: ',',
+      handler: () => this.commandBarUI?.run('component.copyNpmId'),
+    },
+  ];
+
+  registerPubSub() {
+    this.pubsub.sub(PreviewAspect.id, (be: BitBaseEvent<any>) => {
+      if (be.type === ClickInsideAnIframeEvent.TYPE) {
+        const event = new MouseEvent('mousedown', {
+          view: window,
+          bubbles: true,
+          cancelable: true,
+        });
+
+        const body = document.body;
+        body?.dispatchEvent(event);
+      }
+    });
+  }
+
+  handleComponentChange = (activeComponent?: ComponentModel) => {
+    this.activeComponent = activeComponent;
+  };
+
+  getComponentUI(host: string) {
+    return (
+      <Component
+        routeSlot={this.routeSlot}
+        containerSlot={this.pageItemSlot}
+        onComponentChange={this.handleComponentChange}
+        host={host}
+      />
+    );
+  }
+
+  getMenu(host: string) {
+    return (
+      <Menu navigationSlot={this.navSlot} widgetSlot={this.widgetSlot} host={host} menuItemSlot={this.menuItemSlot} />
+    );
+  }
+
+  registerRoute(route: RouteProps) {
+    this.routeSlot.register(route);
+    return this;
+  }
+
+  registerNavigation(nav: NavLinkProps, order?: number) {
+    this.navSlot.register({
+      props: nav,
+      order,
+    });
+  }
+
+  registerWidget(widget: NavLinkProps, order?: number) {
+    this.widgetSlot.register({ props: widget, order });
+  }
+
+  registerMenuItem = (menuItems: MenuItem[]) => {
+    this.menuItemSlot.register(menuItems);
+  };
+
+  registerPageItem = (...items: ComponentPageElement[]) => {
+    this.pageItemSlot.register(items);
+  };
+
+  static dependencies = [PubsubAspect, CommandBarAspect];
+
+  static runtime = UIRuntime;
+
+  static slots = [
+    Slot.withType<RouteProps>(),
+    Slot.withType<NavPlugin>(),
+    Slot.withType<NavigationSlot>(),
+    Slot.withType<MenuItemSlot>(),
+    Slot.withType<ComponentPageSlot>(),
+  ];
+
+  static async provider(
+    [pubsub, commandBarUI]: [PubsubUI, CommandBarUI],
+    config,
+    [routeSlot, navSlot, widgetSlot, menuItemSlot, pageSlot]: [
+      RouteSlot,
+      OrderedNavigationSlot,
+      OrderedNavigationSlot,
+      MenuItemSlot,
+      ComponentPageSlot
+    ]
+  ) {
+    // 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, widgetSlot, menuItemSlot, pageSlot, commandBarUI);
+    const section = new AspectSection();
+
+    componentUI.commandBarUI.addCommand(...componentUI.keyBindings);
+    componentUI.registerMenuItem(componentUI.menuItems);
+    componentUI.registerRoute(section.route);
+    componentUI.registerWidget(section.navigationLink, section.order);
+    return componentUI;
+  }
+}
+
+export default ComponentUI;
+
+ComponentAspect.addRuntime(ComponentUI);

package/dependencies/dependencies.ts

@@ -0,0 +1,74 @@
+/* eslint-disable max-classes-per-file */
+import { BitError } from '@teambit/bit-error';
+import { BitId } from '@teambit/legacy-bit-id';
+
+const DEV_ENV = 'development';
+const RUNTIME_ENV = 'runtime';
+
+// type Environment = DEV_ENV | RUNTIME_ENV;
+type Environment = 'development' | 'runtime';
+// type WrappingMethod = 'component' | 'package';
+
+export class DependencyId extends BitId {}
+
+export class Dependency {
+  constructor(public id: DependencyId) {}
+}
+
+export class PackageDependency extends Dependency {}
+
+export class ComponentDependency extends Dependency {}
+
+export class DependencyList extends Array<Dependency> {
+  /**
+   * Get only package dependencies
+   *
+   * @readonly
+   * @memberof DependencyList
+   */
+  get packages(): PackageDependency[] {
+    return this.filter((dep) => dep instanceof PackageDependency);
+  }
+
+  get components(): ComponentDependency[] {
+    return this.filter((dep) => dep instanceof ComponentDependency);
+  }
+
+  static fromArray(dependencies: Dependency[]): DependencyList {
+    return new DependencyList(...dependencies);
+  }
+}
+
+export class Dependencies {
+  constructor(public runtime: DependencyList, public dev: DependencyList, public peer: DependencyList) {}
+
+  private getByEnvironment(env: Environment): DependencyList {
+    if (env === DEV_ENV) {
+      return DependencyList.fromArray(this.runtime.concat(this.dev).concat(this.peer));
+    }
+    if (env === RUNTIME_ENV) {
+      return DependencyList.fromArray(this.runtime.concat(this.peer));
+    }
+    throw new BitError(`env ${env} is not supported`);
+  }
+
+  /**
+   * Get dependencies needed for development environnement such as runtime, dev and peer
+   *
+   * @returns {DependencyList}
+   * @memberof Dependencies
+   */
+  computeDev(): DependencyList {
+    return this.getByEnvironment(DEV_ENV);
+  }
+
+  /**
+   * Get dependencies needed for runtime environnement such as runtime and peer
+   *
+   * @returns {DependencyList}
+   * @memberof Dependencies
+   */
+  computeRuntime(): DependencyList {
+    return this.getByEnvironment(RUNTIME_ENV);
+  }
+}

package/dependencies/index.ts

@@ -0,0 +1 @@
+export { Dependencies } from './dependencies';

package/exceptions/could-not-find-latest.ts

@@ -0,0 +1,8 @@
+export class CouldNotFindLatest extends Error {
+  constructor(semverArray: string[]) {
+    super(`could not find latest semver in array: ${semverArray.join(', ')}`);
+  }
+  report() {
+    return this.message;
+  }
+}

package/exceptions/host-not-found.ts

@@ -0,0 +1,14 @@
+export class HostNotFound extends Error {
+  constructor(
+    /**
+     * name of the host.
+     */
+    private hostName: string
+  ) {
+    super();
+  }
+
+  toString() {
+    return `[component] error: host '${this.hostName}' was not found`;
+  }
+}

package/exceptions/index.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as NothingToSnap } from './nothing-to-snap';
+export { HostNotFound } from './host-not-found';
+export { CouldNotFindLatest } from './could-not-find-latest';

package/exceptions/nothing-to-snap.ts

@@ -0,0 +1 @@
+export default class NothingToSnap extends Error {}

package/host/component-host-model.ts

@@ -0,0 +1,9 @@
+import { ComponentModel } from '../ui';
+
+export class ComponentHostModel {
+  constructor(readonly name: string, readonly components: ComponentModel[]) {}
+
+  static from(data: any) {
+    return new ComponentHostModel(data.getHost.name, ComponentModel.fromArray(data.getHost.list));
+  }
+}

package/host/index.ts

@@ -0,0 +1,2 @@
+export { useComponentHost } from './use-component-host';
+export * from './component-host-model';

package/host/use-component-host.ts

@@ -0,0 +1,39 @@
+import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
+import { gql } from '@apollo/client';
+
+import { ComponentHostModel } from './component-host-model';
+
+const COMPONENT_HOST = gql`
+  {
+    getHost {
+      id # used for GQL caching
+      name
+      list {
+        id {
+          name
+          version
+          scope
+        }
+        deprecation {
+          isDeprecate
+        }
+        env {
+          id
+          icon
+        }
+      }
+    }
+  }
+`;
+
+export function useComponentHost() {
+  const { data, loading } = useDataQuery(COMPONENT_HOST);
+
+  if (!data || loading) {
+    return {};
+  }
+
+  const host = ComponentHostModel.from(data);
+
+  return { host };
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/component",
-  "version": "0.0.568",
+  "version": "0.0.569",
   "homepage": "https://bit.dev/teambit/component/component",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "component",
-    "version": "0.0.568"
+    "version": "0.0.569"
   },
   "dependencies": {
     "lodash": "4.17.21",
@@ -26,38 +26,38 @@
     "@teambit/base-ui.routing.nav-link": "1.0.0",
     "@teambit/documenter.ui.heading": "4.1.1",
     "@teambit/documenter.ui.separator": "4.1.1",
-    "@teambit/component-id": "0.0.384",
-    "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.473",
-    "@teambit/aspect-loader": "0.0.568",
-    "@teambit/legacy-bit-id": "0.0.383",
-    "@teambit/toolbox.string.capitalize": "0.0.468",
-    "@teambit/cli": "0.0.394",
-    "@teambit/config": "0.0.406",
-    "@teambit/express": "0.0.484",
-    "@teambit/graphql": "0.0.568",
-    "@teambit/bit-error": "0.0.380",
-    "@teambit/command-bar": "0.0.568",
-    "@teambit/preview": "0.0.568",
-    "@teambit/pubsub": "0.0.568",
-    "@teambit/ui-foundation.ui.is-browser": "0.0.471",
-    "@teambit/ui-foundation.ui.main-dropdown": "0.0.471",
-    "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.473",
-    "@teambit/ui": "0.0.568",
-    "@teambit/component-issues": "0.0.29",
-    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.472",
-    "@teambit/cli-table": "0.0.17",
-    "@teambit/ui-foundation.ui.react-router.use-query": "0.0.471",
+    "@teambit/component-id": "0.0.385",
+    "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.474",
+    "@teambit/aspect-loader": "0.0.569",
+    "@teambit/legacy-bit-id": "0.0.384",
+    "@teambit/toolbox.string.capitalize": "0.0.469",
+    "@teambit/cli": "0.0.395",
+    "@teambit/config": "0.0.407",
+    "@teambit/express": "0.0.485",
+    "@teambit/graphql": "0.0.569",
+    "@teambit/bit-error": "0.0.381",
+    "@teambit/command-bar": "0.0.569",
+    "@teambit/preview": "0.0.569",
+    "@teambit/pubsub": "0.0.569",
+    "@teambit/ui-foundation.ui.is-browser": "0.0.472",
+    "@teambit/ui-foundation.ui.main-dropdown": "0.0.472",
+    "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.474",
+    "@teambit/ui": "0.0.569",
+    "@teambit/component-issues": "0.0.30",
+    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.473",
+    "@teambit/cli-table": "0.0.18",
+    "@teambit/ui-foundation.ui.react-router.use-query": "0.0.472",
     "@teambit/design.ui.empty-box": "0.0.352",
-    "@teambit/harmony.ui.aspect-box": "0.0.471",
+    "@teambit/harmony.ui.aspect-box": "0.0.472",
     "@teambit/design.ui.pages.not-found": "0.0.352",
     "@teambit/design.ui.pages.server-error": "0.0.352",
-    "@teambit/compositions": "0.0.568",
-    "@teambit/deprecation": "0.0.568",
-    "@teambit/envs": "0.0.568",
-    "@teambit/component.ui.version-dropdown": "0.0.475",
-    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.92",
-    "@teambit/ui-foundation.ui.use-box.menu": "0.0.92",
-    "@teambit/ui-foundation.ui.react-router.extend-path": "0.0.471"
+    "@teambit/compositions": "0.0.569",
+    "@teambit/deprecation": "0.0.569",
+    "@teambit/envs": "0.0.569",
+    "@teambit/component.ui.version-dropdown": "0.0.476",
+    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.93",
+    "@teambit/ui-foundation.ui.use-box.menu": "0.0.93",
+    "@teambit/ui-foundation.ui.react-router.extend-path": "0.0.472"
   },
   "devDependencies": {
     "@types/lodash": "4.14.165",
@@ -72,11 +72,11 @@
     "@types/jest": "^26.0.0",
     "@types/react-dom": "^17.0.5",
     "@types/node": "12.20.4",
-    "@teambit/component.aspect-docs.component": "0.0.114"
+    "@teambit/component.aspect-docs.component": "0.0.115"
   },
   "peerDependencies": {
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.180",
+    "@teambit/legacy": "1.0.181",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -104,27 +104,12 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.180",
+        "@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/section/index.ts

@@ -0,0 +1 @@
+export { Section } from './section';

package/section/section.tsx

@@ -0,0 +1,8 @@
+import { NavLinkProps } from '@teambit/base-ui.routing.nav-link';
+import { RouteProps } from 'react-router-dom';
+
+export interface Section {
+  route: RouteProps;
+  navigationLink: NavLinkProps;
+  order?: number;
+}

package/show/extensions.fragment.ts

@@ -0,0 +1,23 @@
+import { ShowFragment } from './show-fragment';
+import { Component } from '../component';
+
+export class ExtensionsFragment implements ShowFragment {
+  private renderList(component: Component) {
+    const aspects = component.state.aspects.entries.map((entry) => entry.id.toString());
+    return aspects.join('\n');
+  }
+
+  async renderRow(component: Component) {
+    return {
+      title: 'extensions',
+      content: this.renderList(component),
+    };
+  }
+
+  async json(component: Component) {
+    return {
+      title: 'configuration',
+      json: component.state.aspects.serialize() as any,
+    };
+  }
+}