@teambit/component 0.0.568 → 0.0.569

package/ui/component.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect, ReactNode, useMemo } from 'react';
+import flatten from 'lodash.flatten';
+import { RouteSlot, SlotSubRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';
+import { SlotRegistry } from '@teambit/harmony';
+
+import styles from './component.module.scss';
+import { ComponentProvider } from './context';
+import { useComponent } from './use-component';
+import { ComponentModel } from './component-model';
+
+export type ComponentPageSlot = SlotRegistry<ComponentPageElement[]>;
+export type ComponentPageElement = {
+  type: 'before' | 'after';
+  content: ReactNode;
+};
+
+export type ComponentProps = {
+  containerSlot?: ComponentPageSlot;
+  routeSlot: RouteSlot;
+  host: string;
+  onComponentChange?: (activeComponent?: ComponentModel) => void;
+};
+
+/**
+ * main UI component of the Component extension.
+ */
+export function Component({ routeSlot, containerSlot, host, onComponentChange }: ComponentProps) {
+  const { component, error } = useComponent(host);
+  // trigger onComponentChange when component changes
+  useEffect(() => onComponentChange?.(component), [component]);
+  // cleanup when unmounting component
+  useEffect(() => () => onComponentChange?.(undefined), []);
+
+  const pageItems = useMemo(() => flatten(containerSlot?.values()), [containerSlot]);
+  const before = useMemo(() => pageItems.filter((x) => x.type === 'before').map((x) => x.content), [pageItems]);
+  const after = useMemo(() => pageItems.filter((x) => x.type === 'after').map((x) => x.content), [pageItems]);
+
+  if (error) return error.renderError();
+  if (!component) return <div></div>;
+
+  return (
+    <ComponentProvider component={component}>
+      {before}
+      <div className={styles.container}>{routeSlot && <SlotSubRouter slot={routeSlot} />}</div>
+      {after}
+    </ComponentProvider>
+  );
+}

package/ui/context/component-context.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+import { ComponentModel } from '../component-model';
+
+export const ComponentContext: React.Context<ComponentModel> = createContext<ComponentModel>(ComponentModel.empty());

package/ui/context/component-provider.tsx

@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react';
+
+import { ComponentModel } from '../component-model';
+import { ComponentContext } from './component-context';
+
+export type ComponentProviderProps = {
+  /**
+   * component model.
+   */
+  component: ComponentModel;
+
+  /**
+   * component children.
+   */
+  children: ReactNode;
+};
+
+export function ComponentProvider({ component, children }: ComponentProviderProps) {
+  return <ComponentContext.Provider value={component}>{children}</ComponentContext.Provider>;
+}

package/ui/context/index.ts

@@ -0,0 +1,2 @@
+export { ComponentContext } from './component-context';
+export { ComponentProvider } from './component-provider';

package/ui/index.ts

@@ -0,0 +1,3 @@
+export { Component } from './component';
+export { ComponentModel, ComponentModelProps } from './component-model';
+export { ComponentContext, ComponentProvider } from './context';

package/ui/menu/index.ts

@@ -0,0 +1,2 @@
+export { Menu } from './menu';
+export type { NavPlugin, OrderedNavigationSlot } from './nav-plugin';

package/ui/menu/menu-nav.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { TopBarNav } from '../top-bar-nav';
+import styles from './menu.module.scss';
+import { NavPlugin, OrderedNavigationSlot } from './nav-plugin';
+
+export function MenuNav({ navigationSlot }: { navigationSlot: OrderedNavigationSlot }) {
+  const plugins = navigationSlot.toArray().sort(sortFn);
+
+  return (
+    <nav className={styles.navigation}>
+      {plugins.map(([id, menuItem]) => (
+        <TopBarNav key={id} {...menuItem.props} />
+      ))}
+    </nav>
+  );
+}
+
+function sortFn([, { order: first }]: [string, NavPlugin], [, { order: second }]: [string, NavPlugin]) {
+  // 0  - equal
+  // <0 - first < second
+  // >0 - first > second
+
+  return (first ?? 0) - (second ?? 0);
+}
+
+// // this is the aspect-oriented and serialize-able way to sort plugins.
+// const pluginOrder = ['teambit.docs/docs', 'teambit.compositions/compositions', 'teambit.docs/docs'];
+// export function toSortedArray<T>(slot: SlotRegistry<T>, order: string[]) {
+//   // sort items according to the order
+//   const sorted = order.map((x) => [x, slot.get(x)]).filter(([, val]) => !!val) as [string, T][];
+//
+//   // add all other items
+//   const unsorted = slot.toArray().filter(([id]) => order.indexOf(id) < 0);
+//
+//   return sorted.concat(unsorted);
+// }

package/ui/menu/menu.tsx

@@ -0,0 +1,94 @@
+import { MainDropdown, MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';
+import { VersionDropdown } from '@teambit/component.ui.version-dropdown';
+import { FullLoader } from '@teambit/legacy/dist/to-eject/full-loader';
+import { flatten, groupBy } from 'lodash';
+import classnames from 'classnames';
+import React, { useMemo } from 'react';
+import { UseBoxDropdown } from '@teambit/ui-foundation.ui.use-box.dropdown';
+import { Menu as UseBoxMenu } from '@teambit/ui-foundation.ui.use-box.menu';
+import type { ComponentModel } from '../component-model';
+import { useComponent } from '../use-component';
+import { MenuNav } from './menu-nav';
+import styles from './menu.module.scss';
+import { OrderedNavigationSlot } from './nav-plugin';
+
+export type MenuProps = {
+  className?: string;
+  /**
+   * slot for top bar menu nav items
+   */
+  navigationSlot: OrderedNavigationSlot;
+  /**
+   * right side menu item slot
+   */
+  widgetSlot: OrderedNavigationSlot;
+  host: string;
+  /**
+   * main dropdown item slot
+   */
+  menuItemSlot: MenuItemSlot;
+};
+
+/**
+ * top bar menu.
+ */
+export function Menu({ navigationSlot, widgetSlot, className, host, menuItemSlot }: MenuProps) {
+  const { component } = useComponent(host);
+  const mainMenuItems = useMemo(() => groupBy(flatten(menuItemSlot.values()), 'category'), [menuItemSlot]);
+
+  if (!component) return <FullLoader />;
+
+  return (
+    <div className={classnames(styles.topBar, className)}>
+      <div className={styles.leftSide}>
+        <MenuNav navigationSlot={navigationSlot} />
+      </div>
+      <div className={styles.rightSide}>
+        <div className={styles.widgets}>
+          <MenuNav navigationSlot={widgetSlot} />
+        </div>
+        <VersionRelatedDropdowns component={component} />
+        <MainDropdown menuItems={mainMenuItems} />
+      </div>
+    </div>
+  );
+}
+
+function VersionRelatedDropdowns({ component }: { component: ComponentModel }) {
+  const versionList =
+    useMemo(
+      () =>
+        component.tags
+          ?.toArray()
+          .map((tag) => tag?.version?.version)
+          .filter((x) => x !== undefined)
+          .reverse(),
+      [component.tags]
+    ) || [];
+
+  const isLatestVersion = useMemo(() => component.version === versionList[0], [component.version]);
+  const packageVersion = useMemo(() => (isLatestVersion ? '' : `@${component.version}`), [component.version]);
+  const origin = typeof window !== undefined ? window.location.origin : undefined;
+  const finalElementsUrl = origin && component.elementsUrl ? `${origin}${component.elementsUrl}` : undefined;
+
+  return (
+    <>
+      {versionList.length > 0 && (
+        <UseBoxDropdown
+          position="bottom-end"
+          className={styles.useBox}
+          Menu={() => (
+            <UseBoxMenu
+              componentName={component.id.name}
+              componentId={component.id.toString({ ignoreVersion: isLatestVersion })}
+              packageName={`${component.packageName}${packageVersion}`}
+              elementsUrl={finalElementsUrl}
+              registryName={component.packageName.split('/')[0]}
+            />
+          )}
+        />
+      )}
+      <VersionDropdown versions={versionList} currentVersion={component.version} />
+    </>
+  );
+}

package/ui/menu/nav-plugin.tsx

@@ -0,0 +1,9 @@
+import { SlotRegistry } from '@teambit/harmony';
+import { NavLinkProps } from '@teambit/base-ui.routing.nav-link';
+
+export type NavPlugin = {
+  props: NavLinkProps;
+  order?: number;
+};
+
+export type OrderedNavigationSlot = SlotRegistry<NavPlugin>;

package/ui/top-bar-nav/index.ts

@@ -0,0 +1 @@
+export * from './top-bar-nav';

package/ui/top-bar-nav/top-bar-nav.tsx

@@ -0,0 +1,26 @@
+import { NavLink, NavLinkProps } from '@teambit/base-ui.routing.nav-link';
+import { extendPath } from '@teambit/ui-foundation.ui.react-router.extend-path';
+import classnames from 'classnames';
+import React from 'react';
+import { useRouteMatch, useLocation } from 'react-router-dom';
+
+import styles from './top-bar-nav.module.scss';
+
+export function TopBarNav(props: NavLinkProps) {
+  const { url } = useRouteMatch();
+  const { search } = useLocation(); // sticky query params
+  const { href } = props;
+
+  const target = `${extendPath(url, href)}${search}`;
+
+  return (
+    <NavLink
+      {...props}
+      className={classnames(props.className, styles.topBarLink)}
+      activeClassName={classnames(props.className, styles.active)}
+      href={target}
+    >
+      <div>{props.children}</div>
+    </NavLink>
+  );
+}

package/ui/use-component-query.ts

@@ -0,0 +1,195 @@
+import { useMemo, useEffect, useRef } from 'react';
+import { gql } from '@apollo/client';
+import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
+import { ComponentID, ComponentIdObj } from '@teambit/component-id';
+
+import { ComponentModel } from './component-model';
+import { ComponentError } from './component-error';
+
+const componentIdFields = gql`
+  fragment componentIdFields on ComponentID {
+    name
+    version
+    scope
+  }
+`;
+
+const componentFields = gql`
+  fragment componentFields on Component {
+    id {
+      ...componentIdFields
+    }
+    packageName
+    elementsUrl
+    displayName
+    server {
+      env
+      url
+    }
+    buildStatus
+    compositions {
+      identifier
+      displayName
+    }
+    tags {
+      version
+    }
+    env {
+      id
+      icon
+    }
+  }
+  ${componentIdFields}
+`;
+
+const GET_COMPONENT = gql`
+  query Component($id: String!, $extensionId: String!) {
+    getHost(id: $extensionId) {
+      id # used for GQL caching
+      get(id: $id) {
+        ...componentFields
+      }
+    }
+  }
+  ${componentFields}
+`;
+
+const SUB_SUBSCRIPTION_ADDED = gql`
+  subscription OnComponentAdded {
+    componentAdded {
+      component {
+        ...componentFields
+      }
+    }
+  }
+  ${componentFields}
+`;
+
+const SUB_COMPONENT_CHANGED = gql`
+  subscription OnComponentChanged {
+    componentChanged {
+      component {
+        ...componentFields
+      }
+    }
+  }
+  ${componentFields}
+`;
+
+const SUB_COMPONENT_REMOVED = gql`
+  subscription OnComponentRemoved {
+    componentRemoved {
+      componentIds {
+        ...componentIdFields
+      }
+    }
+  }
+  ${componentIdFields}
+`;
+
+/** provides data to component ui page, making sure both variables and return value are safely typed and memoized */
+export function useComponentQuery(componentId: string, host: string) {
+  const idRef = useRef(componentId);
+  idRef.current = componentId;
+  const { data, error, loading, subscribeToMore } = useDataQuery(GET_COMPONENT, {
+    variables: { id: componentId, extensionId: host },
+  });
+
+  useEffect(() => {
+    // @TODO @Kutner fix subscription for scope
+    if (host !== 'teambit.workspace/workspace') {
+      return () => {};
+    }
+
+    const unsubAddition = subscribeToMore({
+      document: SUB_SUBSCRIPTION_ADDED,
+      updateQuery: (prev, { subscriptionData }) => {
+        const prevComponent = prev?.getHost?.get;
+        const addedComponent = subscriptionData?.data?.componentAdded?.component;
+
+        if (!addedComponent || prevComponent) return prev;
+
+        if (idRef.current === addedComponent.id.name) {
+          return {
+            ...prev,
+            getHost: {
+              ...prev.getHost,
+              get: addedComponent,
+            },
+          };
+        }
+
+        return prev;
+      },
+    });
+
+    const unsubChanges = subscribeToMore({
+      document: SUB_COMPONENT_CHANGED,
+      updateQuery: (prev, { subscriptionData }) => {
+        if (!subscriptionData.data) return prev;
+
+        const prevComponent = prev?.getHost?.get;
+        const updatedComponent = subscriptionData?.data?.componentChanged?.component;
+
+        const isUpdated = updatedComponent && ComponentID.isEqualObj(prevComponent?.id, updatedComponent?.id);
+
+        if (isUpdated) {
+          return {
+            ...prev,
+            getHost: {
+              ...prev.getHost,
+              get: updatedComponent,
+            },
+          };
+        }
+
+        return prev;
+      },
+    });
+
+    const unsubRemoval = subscribeToMore({
+      document: SUB_COMPONENT_REMOVED,
+      updateQuery: (prev, { subscriptionData }) => {
+        if (!subscriptionData.data) return prev;
+
+        const prevComponent = prev?.getHost?.get;
+        const removedIds: ComponentIdObj[] | undefined = subscriptionData?.data?.componentRemoved?.componentIds;
+        if (!prevComponent || !removedIds?.length) return prev;
+
+        const isRemoved = removedIds.some((removedId) => ComponentID.isEqualObj(removedId, prevComponent.id));
+
+        if (isRemoved) {
+          return {
+            ...prev,
+            getHost: {
+              ...prev.getHost,
+              get: null,
+            },
+          };
+        }
+
+        return prev;
+      },
+    });
+
+    return () => {
+      unsubChanges();
+      unsubAddition();
+      unsubRemoval();
+    };
+  }, []);
+
+  const rawComponent = data?.getHost?.get;
+
+  return useMemo(() => {
+    return {
+      component: rawComponent ? ComponentModel.from({ ...rawComponent, host }) : undefined,
+      // eslint-disable-next-line
+      error: error
+        ? new ComponentError(500, error.message)
+        : !rawComponent && !loading
+        ? new ComponentError(404)
+        : undefined,
+    };
+  }, [rawComponent, host, error]);
+}

package/ui/use-component.tsx

@@ -0,0 +1,34 @@
+import { useRouteMatch } from 'react-router-dom';
+import { ComponentID } from '@teambit/component-id';
+import { useQuery } from '@teambit/ui-foundation.ui.react-router.use-query';
+import { ComponentModel } from './component-model';
+import { ComponentError } from './component-error';
+import { useComponentQuery } from './use-component-query';
+
+export type Component = {
+  component?: ComponentModel;
+  error?: ComponentError;
+};
+
+type ComponentRoute = {
+  componentId?: string;
+};
+
+export function useComponent(host: string, id?: ComponentID): Component {
+  const {
+    params: { componentId },
+  } = useRouteMatch<ComponentRoute>();
+  const query = useQuery();
+  const version = query.get('version') || undefined;
+
+  const targetId = id?.toString({ ignoreVersion: true }) || componentId;
+  if (!targetId) throw new TypeError('useComponent received no component id');
+
+  return useComponentQuery(withVersion(targetId, version), host);
+}
+
+function withVersion(id: string, version?: string) {
+  if (!version) return id;
+  if (id.includes('@')) return id;
+  return `${id}@${version}`;
+}