@teambit/scope 0.0.567 → 0.0.571

package/exceptions/component-not-found.ts

@@ -0,0 +1,13 @@
+import { BitError } from '@teambit/bit-error';
+import { ComponentID } from '@teambit/component';
+
+export class ComponentNotFound extends BitError {
+  constructor(
+    /**
+     * id of the missing component.
+     */
+    id: ComponentID
+  ) {
+    super(`component with id: ${id} was not found`);
+  }
+}

package/exceptions/index.ts

@@ -0,0 +1 @@
+export { ComponentNotFound } from './component-not-found';

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/scope",
-  "version": "0.0.567",
+  "version": "0.0.571",
   "homepage": "https://bit.dev/teambit/scope/scope",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.scope",
     "name": "scope",
-    "version": "0.0.567"
+    "version": "0.0.571"
   },
   "dependencies": {
     "semver": "7.3.4",
@@ -23,50 +23,50 @@
     "@teambit/base-ui.surfaces.split-pane.hover-splitter": "1.0.0",
     "@teambit/base-ui.surfaces.split-pane.split-pane": "1.0.0",
     "@teambit/base-ui.graph.tree.recursive-tree": "1.0.0",
-    "@teambit/scope.models.scope-model": "0.0.80",
-    "@teambit/scope.ui.hooks.scope-context": "0.0.80",
-    "@teambit/component": "0.0.567",
-    "@teambit/logger": "0.0.479",
-    "@teambit/aspect-loader": "0.0.567",
-    "@teambit/builder": "0.0.567",
-    "@teambit/cli": "0.0.393",
-    "@teambit/compiler": "0.0.567",
-    "@teambit/config": "0.0.405",
-    "@teambit/envs": "0.0.567",
-    "@teambit/express": "0.0.483",
-    "@teambit/graphql": "0.0.567",
-    "@teambit/harmony.modules.requireable-component": "0.0.468",
-    "@teambit/isolator": "0.0.567",
-    "@teambit/legacy-bit-id": "0.0.382",
-    "@teambit/ui": "0.0.567",
-    "@teambit/workspace.modules.match-pattern": "0.0.472",
-    "@teambit/command-bar": "0.0.567",
-    "@teambit/component-tree": "0.0.379",
+    "@teambit/scope.models.scope-model": "0.0.82",
+    "@teambit/scope.ui.hooks.scope-context": "0.0.82",
+    "@teambit/component": "0.0.571",
+    "@teambit/logger": "0.0.483",
+    "@teambit/aspect-loader": "0.0.571",
+    "@teambit/builder": "0.0.571",
+    "@teambit/cli": "0.0.395",
+    "@teambit/compiler": "0.0.571",
+    "@teambit/config": "0.0.407",
+    "@teambit/envs": "0.0.571",
+    "@teambit/express": "0.0.487",
+    "@teambit/graphql": "0.0.571",
+    "@teambit/harmony.modules.requireable-component": "0.0.470",
+    "@teambit/isolator": "0.0.571",
+    "@teambit/legacy-bit-id": "0.0.384",
+    "@teambit/ui": "0.0.571",
+    "@teambit/workspace.modules.match-pattern": "0.0.474",
+    "@teambit/command-bar": "0.0.571",
+    "@teambit/component-tree": "0.0.381",
     "@teambit/design.ui.surfaces.menu.link-item": "0.0.374",
-    "@teambit/react-router": "0.0.567",
-    "@teambit/sidebar": "0.0.567",
-    "@teambit/ui-foundation.ui.main-dropdown": "0.0.470",
-    "@teambit/ui-foundation.ui.menu": "0.0.470",
-    "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.472",
-    "@teambit/bit-error": "0.0.379",
-    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.471",
-    "@teambit/scope.ui.hooks.use-scope": "0.0.81",
-    "@teambit/ui-foundation.ui.buttons.collapser": "0.0.176",
-    "@teambit/ui-foundation.ui.corner": "0.0.477",
-    "@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.163",
-    "@teambit/ui-foundation.ui.top-bar": "0.0.473",
+    "@teambit/react-router": "0.0.571",
+    "@teambit/sidebar": "0.0.571",
+    "@teambit/ui-foundation.ui.main-dropdown": "0.0.472",
+    "@teambit/ui-foundation.ui.menu": "0.0.472",
+    "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.474",
+    "@teambit/bit-error": "0.0.381",
+    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.473",
+    "@teambit/scope.ui.hooks.use-scope": "0.0.83",
+    "@teambit/ui-foundation.ui.buttons.collapser": "0.0.178",
+    "@teambit/ui-foundation.ui.corner": "0.0.479",
+    "@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.165",
+    "@teambit/ui-foundation.ui.top-bar": "0.0.475",
     "@teambit/design.ui.styles.ellipsis": "0.0.346",
     "@teambit/design.ui.styles.muted-italic": "0.0.35",
-    "@teambit/ui-foundation.ui.full-loader": "0.0.470",
-    "@teambit/ui-foundation.ui.side-bar": "0.0.476",
-    "@teambit/ui-foundation.ui.tree.drawer": "0.0.470",
-    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.91",
-    "@teambit/ui-foundation.ui.use-box.scope-menu": "0.0.91",
-    "@teambit/explorer.ui.gallery.component-card": "0.0.474",
-    "@teambit/explorer.ui.gallery.component-grid": "0.0.470",
-    "@teambit/preview.ui.preview-placeholder": "0.0.470",
-    "@teambit/scope.ui.empty-scope": "0.0.473",
-    "@teambit/scope.ui.scope-details": "0.0.479"
+    "@teambit/ui-foundation.ui.full-loader": "0.0.472",
+    "@teambit/ui-foundation.ui.side-bar": "0.0.478",
+    "@teambit/ui-foundation.ui.tree.drawer": "0.0.472",
+    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.93",
+    "@teambit/ui-foundation.ui.use-box.scope-menu": "0.0.93",
+    "@teambit/explorer.ui.gallery.component-card": "0.0.476",
+    "@teambit/explorer.ui.gallery.component-grid": "0.0.472",
+    "@teambit/preview.ui.preview-placeholder": "0.0.472",
+    "@teambit/scope.ui.empty-scope": "0.0.475",
+    "@teambit/scope.ui.scope-details": "0.0.481"
   },
   "devDependencies": {
     "@types/semver": "7.3.4",
@@ -82,7 +82,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"
   },
@@ -110,27 +110,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/routes/action.route.ts

@@ -0,0 +1,22 @@
+import { Route, Verb, Request, Response } from '@teambit/express';
+import { action } from '@teambit/legacy/dist/api/scope/lib/action';
+import { getAuthDataFromHeader } from '@teambit/legacy/dist/scope/network/http/http';
+import { ScopeMain } from '../scope.main.runtime';
+
+export class ActionRoute implements Route {
+  constructor(private scope: ScopeMain) {}
+
+  method = 'post';
+  route = '/scope/action';
+  verb = Verb.WRITE;
+
+  middlewares = [
+    async (req: Request, res: Response) => {
+      req.setTimeout(this.scope.config.httpTimeOut);
+      const authData = getAuthDataFromHeader(req.headers.authorization);
+      const result = await action(this.scope.path, req.body.name, req.body.options, authData);
+      // in case the result is empty, send `{}` to make it a valid json.
+      res.json(result || {});
+    },
+  ];
+}

package/routes/delete.route.ts

@@ -0,0 +1,26 @@
+import { Route, Verb, Request, Response } from '@teambit/express';
+import { ScopeMain } from '../scope.main.runtime';
+
+export class DeleteRoute implements Route {
+  constructor(private scope: ScopeMain) {}
+
+  method = 'post';
+  route = '/scope/delete';
+  verb = Verb.WRITE;
+
+  middlewares = [
+    async (req: Request, res: Response) => {
+      const { headers } = req;
+      req.setTimeout(this.scope.config.httpTimeOut);
+      const result = await this.scope.delete(
+        {
+          ids: req.body.ids,
+          force: req.body.force,
+          lanes: req.body.lanes,
+        },
+        headers
+      );
+      res.json(result);
+    },
+  ];
+}

package/routes/fetch.route.ts

@@ -0,0 +1,45 @@
+import { Route, Verb, Request, Response } from '@teambit/express';
+import { fetch } from '@teambit/legacy/dist/api/scope';
+import { ObjectList } from '@teambit/legacy/dist/scope/objects/object-list';
+import { Logger } from '@teambit/logger';
+import { promisify } from 'util';
+import { pipeline } from 'stream';
+import { ScopeMain } from '../scope.main.runtime';
+
+export class FetchRoute implements Route {
+  constructor(private scope: ScopeMain, private logger: Logger) {}
+
+  route = '/scope/fetch';
+  method = 'post';
+  verb = Verb.READ;
+  middlewares = [
+    async (req: Request, res: Response) => {
+      req.setTimeout(this.scope.config.httpTimeOut);
+      const preFetchHookP = this.scope.preFetchObjects
+        .values()
+        .map((fn) => fn({ ids: req.body.ids, fetchOptions: req.body.fetchOptions }, { headers: req.headers }));
+
+      Promise.all(preFetchHookP).catch((err) => {
+        this.logger.error('fatal: onPreFetchObjects encountered an error (this error does not stop the process)', err);
+      });
+
+      const readable = await fetch(this.scope.path, req.body.ids, req.body.fetchOptions);
+      const pack = ObjectList.fromObjectStreamToTar(readable, this.scope.name);
+      const pipelinePromise = promisify(pipeline);
+      try {
+        await pipelinePromise(pack, res);
+        this.logger.info('fetch.router, the response has been sent successfully to the client', req.headers);
+      } catch (err: any) {
+        if (req.aborted) {
+          this.logger.warn('FetchRoute, the client aborted the request', err);
+        } else {
+          this.logger.error(
+            `FetchRoute encountered an error during the pipeline streaming, this should never happen.
+  make sure the error is caught in fromObjectStreamToTar and it streamed using the name "ERROR"`,
+            err
+          );
+        }
+      }
+    },
+  ];
+}

package/routes/index.ts

@@ -0,0 +1,4 @@
+export { FetchRoute } from './fetch.route';
+export { PutRoute } from './put.route';
+export { ActionRoute } from './action.route';
+export { DeleteRoute } from './delete.route';

package/routes/put.route.ts

@@ -0,0 +1,37 @@
+import { Route, Verb, Request, Response } from '@teambit/express';
+import { ObjectList } from '@teambit/legacy/dist/scope/objects/object-list';
+import { put } from '@teambit/legacy/dist/api/scope';
+import { OnPostPutSlot, ScopeMain } from '../scope.main.runtime';
+
+export class PutRoute implements Route {
+  constructor(private scope: ScopeMain, private postPutSlot: OnPostPutSlot) {}
+
+  method = 'post';
+  route = '/scope/put';
+  verb = Verb.WRITE;
+
+  middlewares = [
+    async (req: Request, res: Response) => {
+      req.setTimeout(this.scope.config.httpTimeOut);
+      const pushOptionsStr = req.headers['push-options'];
+      if (!pushOptionsStr) throw new Error('http is missing the push-options header');
+      const pushOptions = JSON.parse(pushOptionsStr as string);
+      const objectList = await ObjectList.fromTar(req);
+      const ids = await put(
+        {
+          path: this.scope.path,
+          objectList,
+        },
+        pushOptions
+      );
+
+      await Promise.all(
+        ids.map((id) => {
+          return this.scope.resolveComponentId(id);
+        })
+      );
+
+      res.json(ids);
+    },
+  ];
+}

package/scope.ui.runtime.tsx

@@ -0,0 +1,327 @@
+import type { ComponentUI, ComponentModel } from '@teambit/component';
+import { ComponentAspect } from '@teambit/component';
+import { Slot, SlotRegistry } from '@teambit/harmony';
+import ReactRouterAspect, { ReactRouterUI } from '@teambit/react-router';
+import { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';
+import { SidebarAspect, SidebarUI, SidebarItem, SidebarItemSlot } from '@teambit/sidebar';
+import { ComponentTreeNode } from '@teambit/component-tree';
+import { UIAspect, UIRootUI as UIRoot, UIRuntime, UiUI } from '@teambit/ui';
+import React, { ComponentType, ReactNode } from 'react';
+import { MenuItemSlot, MenuItem } from '@teambit/ui-foundation.ui.main-dropdown';
+import { RouteProps } from 'react-router-dom';
+import { MenuWidget, MenuWidgetSlot } from '@teambit/ui-foundation.ui.menu';
+import { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';
+import CommandBarAspect, { CommandBarUI, ComponentSearcher, CommandHandler } from '@teambit/command-bar';
+import { ScopeModel } from '@teambit/scope.models.scope-model';
+import { ScopeMenu, ScopeUseBox } from './ui/menu';
+import { ScopeAspect } from './scope.aspect';
+import { Scope } from './ui/scope';
+import { ComponentsDrawer } from './ui/components-drawer';
+
+export type ScopeBadge = ComponentType;
+
+export type ScopeBadgeSlot = SlotRegistry<ScopeBadge[]>;
+
+export type ScopeContextType = ComponentType<{ scope: ScopeModel; children: ReactNode }>;
+
+export type SidebarSlot = SlotRegistry<ComponentTreeNode>;
+
+export type ScopeOverview = ComponentType;
+
+export type ScopeOverviewSlot = SlotRegistry<ScopeOverview>;
+
+export type Corner = ComponentType;
+
+export type CornerSlot = SlotRegistry<Corner>;
+
+export type OverviewLine = ComponentType;
+
+export type OverviewLineSlot = SlotRegistry<OverviewLine[]>;
+
+export class ScopeUI {
+  constructor(
+    /**
+     * route slot.
+     */
+    private routeSlot: RouteSlot,
+
+    /**
+     * component ui extension.
+     */
+    private componentUi: ComponentUI,
+    /**
+     * menu slot
+     */
+    private menuSlot: RouteSlot,
+
+    private sidebar: SidebarUI,
+
+    private sidebarSlot: SidebarSlot,
+
+    private commandBarUI: CommandBarUI,
+
+    private componentSearcher: ComponentSearcher,
+
+    private scopeBadgeSlot: ScopeBadgeSlot,
+
+    private menuWidgetSlot: MenuWidgetSlot,
+
+    /**
+     * sidebar link slot
+     */
+    private sidebarItemSlot: SidebarItemSlot,
+
+    /**
+     * main dropdown item slot
+     */
+    private menuItemSlot: MenuItemSlot,
+
+    /**
+     * corner slot
+     */
+    private cornerSlot: CornerSlot,
+
+    /**
+     * overview line slot to add new lines beneath the overview section
+     */
+    private overviewSlot: OverviewLineSlot
+  ) {}
+
+  private setSidebarToggle: (updated: CommandHandler) => void = () => {};
+
+  /**
+   * register a new badge into the scope overview.
+   */
+  registerBadge(...badges: ScopeBadge[]) {
+    this.scopeBadgeSlot.register(badges);
+    return this;
+  }
+
+  /**
+   * register a new line beneath the scope overview section.
+   */
+  registerOverviewLine(...lines: OverviewLine[]) {
+    this.overviewSlot.register(lines);
+    return this;
+  }
+
+  /**
+   * register a route to the scope.
+   */
+  registerRoute(route: RouteProps) {
+    this.routeSlot.register(route);
+    return this;
+  }
+
+  private registerExplicitRoutes() {
+    this.routeSlot.register({
+      path: this.componentUi.routePath,
+      children: this.componentUi.getComponentUI(ScopeAspect.id),
+    });
+
+    this.menuSlot.register([
+      {
+        path: this.componentUi.routePath,
+        children: this.componentUi.getMenu(ScopeAspect.id),
+      },
+      {
+        exact: true,
+        path: '/',
+        children: <ScopeMenu widgetSlot={this.menuWidgetSlot} menuItemSlot={this.menuItemSlot} />,
+      },
+    ]);
+  }
+
+  registerMenuWidget(...menuItems: MenuWidget[]) {
+    this.menuWidgetSlot.register(menuItems);
+  }
+
+  registerCorner(corner: Corner) {
+    this.cornerSlot.register(corner);
+  }
+
+  /**
+   * register a scope overview.
+   */
+  replaceOverview() {}
+
+  /**
+   * register description.
+   */
+  replaceDescription() {}
+
+  /**
+   * register metadata section.
+   */
+  replaceMetadataSection() {}
+
+  /**
+   * register a metadata item.
+   */
+  registerMetadataItem() {}
+
+  replaceComponentGrid() {}
+
+  /**
+   * register metadata.
+   */
+  registerMetadata() {}
+
+  private _context: () => ScopeContextType;
+
+  /**
+   * add a new context to the scope.
+   */
+  addContext(context: ScopeContextType) {
+    this._context = () => context;
+  }
+
+  getContext() {
+    if (!this._context) return undefined;
+    return this._context();
+  }
+
+  registerMenuItem = (menuItems: MenuItem[]) => {
+    this.menuItemSlot.register(menuItems);
+  };
+
+  /**
+   * register a sidebar link to the section above the drawers
+   */
+  registerSidebarLink = (...links: SidebarItem[]) => {
+    this.sidebarItemSlot.register(links);
+  };
+
+  uiRoot(): UIRoot {
+    this.sidebar.registerDrawer(new ComponentsDrawer(this.sidebarSlot));
+    this.commandBarUI.addSearcher(this.componentSearcher);
+
+    const [setKeyBindHandler] = this.commandBarUI.addCommand({
+      id: 'sidebar.toggle', // TODO - extract to a component!
+      handler: () => {},
+      displayName: 'Toggle component list',
+      keybinding: 'alt+s',
+    });
+    this.setSidebarToggle = setKeyBindHandler;
+
+    return {
+      routes: [
+        {
+          path: '/',
+          children: (
+            <Scope
+              routeSlot={this.routeSlot}
+              menuSlot={this.menuSlot}
+              sidebar={<this.sidebar.render itemSlot={this.sidebarItemSlot} />}
+              scopeUi={this}
+              badgeSlot={this.scopeBadgeSlot}
+              overviewLineSlot={this.overviewSlot}
+              context={this.getContext()}
+              onSidebarTogglerChange={this.setSidebarToggle}
+              cornerSlot={this.cornerSlot}
+            />
+          ),
+        },
+      ],
+    };
+  }
+
+  /** registers available components */
+  setComponents = (components: ComponentModel[]) => {
+    this.componentSearcher.update(components);
+  };
+
+  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'),
+    },
+  ];
+
+  static dependencies = [UIAspect, ComponentAspect, SidebarAspect, CommandBarAspect, ReactRouterAspect];
+  static runtime = UIRuntime;
+  static slots = [
+    Slot.withType<RouteProps>(),
+    Slot.withType<RouteProps>(),
+    Slot.withType<ComponentTreeNode>(),
+    Slot.withType<ScopeBadge>(),
+    Slot.withType<ScopeOverview>(),
+    Slot.withType<MenuWidget[]>(),
+    Slot.withType<MenuItemSlot>(),
+    Slot.withType<CornerSlot>(),
+    Slot.withType<OverviewLineSlot>(),
+    Slot.withType<SidebarItemSlot>(),
+  ];
+
+  static async provider(
+    [ui, componentUi, sidebar, commandBarUI, reactRouterUI]: [
+      UiUI,
+      ComponentUI,
+      SidebarUI,
+      CommandBarUI,
+      ReactRouterUI
+    ],
+    config,
+    [
+      routeSlot,
+      menuSlot,
+      sidebarSlot,
+      scopeBadgeSlot,
+      menuWidgetSlot,
+      menuItemSlot,
+      sidebarItemSlot,
+      cornerSlot,
+      overviewSlot,
+    ]: [
+      RouteSlot,
+      RouteSlot,
+      SidebarSlot,
+      ScopeBadgeSlot,
+      MenuWidgetSlot,
+      MenuItemSlot,
+      SidebarItemSlot,
+      CornerSlot,
+      OverviewLineSlot
+    ]
+  ) {
+    const componentSearcher = new ComponentSearcher(reactRouterUI.navigateTo);
+    const scopeUi = new ScopeUI(
+      routeSlot,
+      componentUi,
+      menuSlot,
+      sidebar,
+      sidebarSlot,
+      commandBarUI,
+      componentSearcher,
+      scopeBadgeSlot,
+      menuWidgetSlot,
+      sidebarItemSlot,
+      menuItemSlot,
+      cornerSlot,
+      overviewSlot
+    );
+    scopeUi.registerExplicitRoutes();
+    scopeUi.registerMenuItem(scopeUi.menuItems);
+    scopeUi.registerMenuWidget(() => <ScopeUseBox />);
+    ui.registerRoot(scopeUi.uiRoot.bind(scopeUi));
+    scopeUi.registerSidebarLink(() => (
+      <MenuLinkItem exact href="/" icon="comps">
+        Gallery
+      </MenuLinkItem>
+    ));
+
+    return scopeUi;
+  }
+}
+
+export default ScopeUI;
+
+ScopeAspect.addRuntime(ScopeUI);

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/ui/components-drawer/components.drawer.tsx

@@ -0,0 +1,56 @@
+import React, { useCallback } from 'react';
+import classNames from 'classnames';
+import {
+  ComponentTree,
+  ComponentView,
+  NamespaceTreeNode,
+  PayloadType,
+  ScopePayload,
+} from '@teambit/ui-foundation.ui.side-bar';
+import { TreeNodeProps } from '@teambit/base-ui.graph.tree.recursive-tree';
+
+import { FullLoader } from '@teambit/ui-foundation.ui.full-loader';
+import { ComponentTreeSlot } from '@teambit/component-tree';
+import type { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';
+import { mutedItalic } from '@teambit/design.ui.styles.muted-italic';
+import { ellipsis } from '@teambit/design.ui.styles.ellipsis';
+import { useScopeQuery } from '@teambit/scope.ui.hooks.use-scope';
+import styles from './components-drawer.module.scss';
+
+export class ComponentsDrawer implements DrawerType {
+  constructor(private treeNodeSlot: ComponentTreeSlot) {}
+
+  name = 'COMPONENTS';
+
+  render = () => {
+    const { scope } = useScopeQuery();
+    const { treeNodeSlot } = this;
+
+    const TreeNodeRenderer = useCallback(
+      function TreeNode(props: TreeNodeProps<PayloadType>) {
+        const children = props.node.children;
+
+        if (!children) return <ComponentView {...props} treeNodeSlot={treeNodeSlot} />;
+
+        // skip over scope node and render only children
+        if (props.node.payload instanceof ScopePayload) {
+          return (
+            <>
+              {children.map((childNode) => (
+                <TreeNodeRenderer key={childNode.id} {...props} node={childNode}></TreeNodeRenderer>
+              ))}
+            </>
+          );
+        }
+
+        return <NamespaceTreeNode {...props} />;
+      },
+      [treeNodeSlot]
+    );
+
+    if (!scope) return <FullLoader />;
+    if (scope.components.length === 0)
+      return <span className={classNames(mutedItalic, ellipsis, styles.emptyScope)}>Scope is empty</span>;
+    return <ComponentTree components={scope.components} TreeNode={TreeNodeRenderer} />;
+  };
+}

package/ui/components-drawer/index.ts

@@ -0,0 +1 @@
+export { ComponentsDrawer } from './components.drawer';

package/ui/menu/index.ts

@@ -0,0 +1 @@
+export { ScopeMenu, ScopeUseBox } from './menu';

package/ui/menu/menu.tsx

@@ -0,0 +1,25 @@
+import { Menu, MenuProps } from '@teambit/ui-foundation.ui.menu';
+import { ScopeContext } from '@teambit/scope.ui.hooks.scope-context';
+import classNames from 'classnames';
+import React, { useContext } from 'react';
+import { UseBoxDropdown } from '@teambit/ui-foundation.ui.use-box.dropdown';
+import { Menu as ScopeUseBoxMenu } from '@teambit/ui-foundation.ui.use-box.scope-menu';
+import styles from './menu.module.scss';
+
+/**
+ * scope menu.
+ */
+export function ScopeMenu({ className, ...rest }: MenuProps) {
+  return <Menu {...rest} className={classNames(styles.scopMenu, className)} />;
+}
+
+export function ScopeUseBox() {
+  const scope = useContext(ScopeContext);
+  return (
+    <UseBoxDropdown
+      position="bottom-end"
+      className={styles.useBox}
+      Menu={() => <ScopeUseBoxMenu scopeName={scope.name} />}
+    />
+  );
+}

package/ui/scope-overview/index.ts

@@ -0,0 +1 @@
+export * from './scope-overview';

package/ui/scope-overview/scope-overview.tsx

@@ -0,0 +1,61 @@
+import React, { useContext } from 'react';
+import { ComponentCard } from '@teambit/explorer.ui.gallery.component-card';
+import { ComponentGrid } from '@teambit/explorer.ui.gallery.component-grid';
+import { ScopeDetails } from '@teambit/scope.ui.scope-details';
+import { PreviewPlaceholder } from '@teambit/preview.ui.preview-placeholder';
+import { EmptyScope } from '@teambit/scope.ui.empty-scope';
+import { ComponentModel } from '@teambit/component';
+import { ScopeContext } from '@teambit/scope.ui.hooks.scope-context';
+import styles from './scope-overview.module.scss';
+import type { ScopeBadgeSlot, OverviewLineSlot } from '../../scope.ui.runtime';
+
+export type ScopeOverviewProps = {
+  badgeSlot: ScopeBadgeSlot;
+  overviewSlot: OverviewLineSlot;
+};
+
+export function ScopeOverview({ badgeSlot, overviewSlot }: ScopeOverviewProps) {
+  const scope = useContext(ScopeContext);
+  const { components } = scope;
+  if (!components || components.length === 0) return <EmptyScope name={scope.name} />;
+
+  return (
+    <div className={styles.container}>
+      <ScopeDetails
+        scopeName={scope.name}
+        icon={scope.icon}
+        backgroundIconColor={scope.backgroundIconColor}
+        badgeSlot={badgeSlot}
+        overviewSlot={overviewSlot}
+        description={scope.description}
+        componentCount={scope.components.length}
+      />
+      <ComponentGrid>
+        {components.map((component, index) => {
+          return (
+            <div key={index}>
+              <ScopeComponentCard component={component} />
+            </div>
+          );
+        })}
+      </ComponentGrid>
+    </div>
+  );
+}
+
+type ScopeComponentCardProps = {
+  component: ComponentModel;
+};
+
+export function ScopeComponentCard({ component }: ScopeComponentCardProps) {
+  const shouldShowPreview = component.compositions.length > 0;
+  return (
+    <ComponentCard
+      id={component.id.fullName}
+      envIcon={component.environment?.icon}
+      description={component.description}
+      version={component.version}
+      preview={<PreviewPlaceholder component={component} shouldShowPreview={shouldShowPreview} />}
+    />
+  );
+}

package/ui/scope.tsx

@@ -0,0 +1,92 @@
+import 'reset-css';
+import { SplitPane, Pane, Layout } from '@teambit/base-ui.surfaces.split-pane.split-pane';
+import { RouteSlot, SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';
+import { Corner } from '@teambit/ui-foundation.ui.corner';
+import { Collapser } from '@teambit/ui-foundation.ui.buttons.collapser';
+import { HoverSplitter } from '@teambit/base-ui.surfaces.split-pane.hover-splitter';
+import { TopBar } from '@teambit/ui-foundation.ui.top-bar';
+import { FullLoader } from '@teambit/legacy/dist/to-eject/full-loader';
+import React, { useReducer } from 'react';
+import { Route } from 'react-router-dom';
+import { useIsMobile } from '@teambit/ui-foundation.ui.hooks.use-is-mobile';
+import { ScopeProvider } from '@teambit/scope.ui.hooks.scope-context';
+import { useScopeQuery } from '@teambit/scope.ui.hooks.use-scope';
+import { ScopeOverview } from './scope-overview';
+import styles from './scope.module.scss';
+import ScopeUI, { ScopeBadgeSlot, ScopeContextType, CornerSlot, OverviewLineSlot } from '../scope.ui.runtime';
+
+export type ScopeProps = {
+  routeSlot: RouteSlot;
+  menuSlot: RouteSlot;
+  sidebar: JSX.Element;
+  scopeUi: ScopeUI;
+  badgeSlot: ScopeBadgeSlot;
+  overviewLineSlot: OverviewLineSlot;
+  cornerSlot: CornerSlot;
+  context?: ScopeContextType;
+  onSidebarTogglerChange: (callback: () => void) => void;
+};
+
+/**
+ * root component of the scope
+ */
+export function Scope({
+  routeSlot,
+  menuSlot,
+  sidebar,
+  scopeUi,
+  badgeSlot,
+  overviewLineSlot,
+  cornerSlot,
+  context,
+  onSidebarTogglerChange,
+}: ScopeProps) {
+  const { scope } = useScopeQuery();
+  const isMobile = useIsMobile();
+  const [isSidebarOpen, handleSidebarToggle] = useReducer((x) => !x, !isMobile);
+  const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.right;
+  if (!scope) {
+    return <FullLoader />;
+  }
+  const CornerOverride = cornerSlot?.values()[0];
+  scopeUi.setComponents(scope.components);
+  const defaultContext = ({ children }) => <div>{children}</div>;
+  const Context = context || defaultContext;
+
+  onSidebarTogglerChange(handleSidebarToggle);
+
+  return (
+    <ScopeProvider scope={scope}>
+      <Context scope={scope}>
+        <div className={styles.scope}>
+          <TopBar
+            className={styles.topbar}
+            Corner={() => {
+              if (CornerOverride) return <CornerOverride />;
+              return <Corner name={scope.name} className={styles.whiteCorner} />;
+            }}
+            menu={menuSlot}
+          />
+
+          <SplitPane className={styles.main} size={264} layout={sidebarOpenness}>
+            <Pane className={styles.sidebar}>{sidebar}</Pane>
+            <HoverSplitter className={styles.splitter}>
+              <Collapser
+                isOpen={isSidebarOpen}
+                onMouseDown={(e) => e.stopPropagation()} // avoid split-pane drag
+                onClick={handleSidebarToggle}
+                tooltipContent={`${isSidebarOpen ? 'Hide' : 'Show'} side panel`}
+              />
+            </HoverSplitter>
+            <Pane>
+              <SlotRouter slot={routeSlot} />
+              <Route exact path="/">
+                <ScopeOverview badgeSlot={badgeSlot} overviewSlot={overviewLineSlot} />
+              </Route>
+            </Pane>
+          </SplitPane>
+        </div>
+      </Context>
+    </ScopeProvider>
+  );
+}