@teambit/component 0.0.555 → 0.0.556

package/ui/component-model/component-model.ts

@@ -1,169 +0,0 @@
-import { Composition, CompositionProps } from '@teambit/compositions';
-import { DeprecationInfo } from '@teambit/deprecation';
-import { Descriptor } from '@teambit/envs';
-import { ComponentID, ComponentIdObj } from '@teambit/component-id';
-
-import { Tag } from '../../tag';
-import { TagMap } from '../../tag-map';
-import { TagProps } from '../../tag/tag';
-// import { Snap } from '../../snap';
-
-// ADDING MORE PROPERTIES HERE IS NOT ALLOWED!!! IF YOU NEED DATA PLEASE ADD A NEW
-// HOOK FROM YOUR ASPECT!!!
-// TODO: remove all properties from here to their rightful place in their aspects.
-export type ComponentModelProps = {
-  id: ComponentIdObj;
-  description: string;
-  buildStatus?: string;
-  server?: ComponentServer;
-  displayName: string;
-  packageName: string; // pkg aspect
-  elementsUrl?: string; // pkg aspect
-  compositions?: CompositionProps[];
-  tags?: TagProps[];
-  issuesCount?: number; // component/issues aspect
-  status?: any; // workspace aspect.
-  deprecation?: DeprecationInfo; // deprecation aspect
-  env?: Descriptor; // env aspect.
-  labels?: string[];
-  host?: string;
-};
-
-export type ComponentServer = {
-  env: string;
-  url: string;
-};
-
-export class ComponentModel {
-  constructor(
-    /**
-     * id of the component
-     */
-    readonly id: ComponentID,
-
-    /**
-     * display name of the component.
-     */
-    readonly displayName: string,
-
-    /**
-     * package name of the component.
-     */
-    readonly packageName: string,
-
-    /**
-     * the component server.
-     */
-    readonly server: ComponentServer | undefined,
-
-    /**
-     * array of compositions
-     */
-    readonly compositions: Composition[],
-
-    /**
-     * tags of the component.
-     */
-    readonly tags: TagMap,
-
-    /**
-     * component build status
-     */
-    readonly buildStatus?: string,
-
-    /**
-     * issues of component.
-     */
-    readonly issuesCount?: number,
-    /**
-     * elements url
-     */
-    readonly elementsUrl?: string,
-    /**
-     * status of component.
-     */
-    readonly status?: any,
-
-    /**
-     * deprecation info of the component.
-     */
-    readonly deprecation?: DeprecationInfo,
-
-    /**
-     * env descriptor.
-     */
-    readonly environment?: Descriptor,
-
-    /**
-     * description of the component.
-     */
-
-    readonly description = '',
-
-    readonly labels: string[] = [],
-
-    /**
-     * host of the component
-     */
-    readonly host?: string
-  ) {}
-
-  get version() {
-    if (!this.id.version) return 'new';
-    return this.id.version;
-  }
-
-  /**
-   * create an instance of a component from a plain object.
-   */
-  static from({
-    id,
-    server,
-    displayName,
-    compositions = [],
-    packageName,
-    elementsUrl,
-    tags = [],
-    deprecation,
-    buildStatus,
-    env,
-    status,
-    issuesCount,
-    description,
-    labels,
-    host,
-  }: ComponentModelProps) {
-    return new ComponentModel(
-      ComponentID.fromObject(id),
-      displayName,
-      packageName,
-      server,
-      Composition.fromArray(compositions),
-      TagMap.fromArray(tags.map((tag) => Tag.fromObject(tag))),
-      buildStatus,
-      issuesCount,
-      elementsUrl,
-      status,
-      deprecation,
-      env,
-      description,
-      labels,
-      host
-    );
-  }
-
-  static fromArray(componentsProps: ComponentModelProps[]) {
-    return componentsProps.map((rawComponent) => ComponentModel.from(rawComponent));
-  }
-
-  static empty() {
-    return new ComponentModel(
-      ComponentID.fromObject({ name: 'root', scope: 'temp' }),
-      '',
-      '',
-      { env: '', url: '' },
-      [],
-      TagMap.empty()
-    );
-  }
-}

package/ui/component-model/index.ts

@@ -1 +0,0 @@
-export { ComponentModel, ComponentModelProps } from './component-model';

package/ui/component.module.scss

@@ -1,7 +0,0 @@
-$topbarHeight: 64px;
-
-.container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}

package/ui/component.tsx

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

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

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

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

package/ui/index.ts

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

package/ui/menu/index.ts

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

package/ui/menu/menu-nav.tsx

@@ -1,37 +0,0 @@
-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.module.scss

@@ -1,62 +0,0 @@
-.topBar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-
-.leftSide {
-  display: flex;
-  align-items: center;
-  height: 100%;
-}
-
-.navigation {
-  display: flex;
-  list-style: none;
-  height: 100%;
-  padding-left: 28px;
-  @media screen and (max-width: 768px) {
-    padding-left: 6px;
-  }
-
-  > li {
-    display: block;
-    margin-right: 16px;
-    height: 100%;
-  }
-}
-
-.rightSide {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  > * {
-    margin-right: 12px;
-    &:last-child {
-      margin-right: 16px;
-    }
-  }
-  .widgets {
-    height: 100%;
-    margin-right: 20px;
-    display: flex;
-    align-items: center;
-    > nav {
-      > a {
-        padding: 0;
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-    }
-  }
-  .widget {
-    font-size: 17px;
-  }
-}
-
-.useBox {
-  --bit-drawer-margin: 14px;
-}

package/ui/menu/menu.tsx

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

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

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

package/ui/top-bar-nav/top-bar-nav.module.scss

@@ -1,52 +0,0 @@
-.topBarLink {
-  position: relative;
-  padding: 0 8px;
-
-  box-sizing: border-box;
-
-  display: flex;
-  align-items: center;
-
-  color: inherit;
-  text-decoration: none;
-
-  transition: color 300ms;
-  margin: 0 5px;
-
-  &:hover:not(.active) {
-    > div {
-      background-color: var(--bit-bg-heavy);
-    }
-  }
-
-  &.active {
-    color: var(--bit-accent-color, #6c5ce7);
-
-    &:after {
-      background-color: var(--bit-accent-color, #6c5ce7);
-      height: 4px;
-    }
-  }
-
-  &:after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: transparent;
-    height: 0;
-    border-top-right-radius: 2px;
-    border-top-left-radius: 2px;
-    transition: background-color 300ms, height 300ms;
-  }
-
-  > div {
-    border-radius: 6px;
-    padding: 0 8px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    transition: background-color 300ms ease-in-out;
-  }
-}

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

@@ -1,26 +0,0 @@
-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>
-  );
-}