@teambit/scope 0.0.866 → 0.0.868

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/scope",
-  "version": "0.0.866",
+  "version": "0.0.868",
   "homepage": "https://bit.dev/teambit/scope/scope",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.scope",
     "name": "scope",
-    "version": "0.0.866"
+    "version": "0.0.868"
   },
   "dependencies": {
     "chalk": "2.4.2",
@@ -16,8 +16,8 @@
     "fs-extra": "10.0.0",
     "lodash": "4.17.21",
     "multimatch": "5.0.0",
-    "reset-css": "5.0.1",
     "classnames": "2.2.6",
+    "reset-css": "5.0.1",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
     "@teambit/harmony": "0.3.3",
@@ -25,41 +25,44 @@
     "@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.utils.composer": "1.0.0",
-    "@teambit/scope.models.scope-model": "0.0.234",
-    "@teambit/scope.ui.hooks.scope-context": "0.0.234",
-    "@teambit/cli": "0.0.577",
-    "@teambit/component": "0.0.866",
-    "@teambit/logger": "0.0.670",
-    "@teambit/aspect-loader": "0.0.866",
+    "@teambit/scope.models.scope-model": "0.0.236",
+    "@teambit/scope.ui.hooks.scope-context": "0.0.236",
+    "@teambit/cli": "0.0.579",
+    "@teambit/component": "0.0.868",
+    "@teambit/logger": "0.0.672",
+    "@teambit/aspect-loader": "0.0.868",
     "@teambit/bit-error": "0.0.400",
-    "@teambit/builder": "0.0.866",
-    "@teambit/compiler": "0.0.866",
-    "@teambit/envs": "0.0.866",
-    "@teambit/express": "0.0.675",
-    "@teambit/graphql": "0.0.866",
+    "@teambit/builder": "0.0.868",
+    "@teambit/compiler": "0.0.868",
+    "@teambit/envs": "0.0.868",
+    "@teambit/express": "0.0.677",
+    "@teambit/graphql": "0.0.868",
     "@teambit/harmony.modules.requireable-component": "0.0.490",
-    "@teambit/isolator": "0.0.866",
+    "@teambit/isolator": "0.0.868",
     "@teambit/legacy-bit-id": "0.0.414",
-    "@teambit/ui": "0.0.866",
+    "@teambit/ui": "0.0.868",
     "@teambit/workspace.modules.match-pattern": "0.0.495",
     "@teambit/component-id": "0.0.417",
-    "@teambit/component.ui.component-drawer": "0.0.131",
+    "@teambit/component.ui.component-drawer": "0.0.133",
     "@teambit/design.ui.tree": "0.0.12",
-    "@teambit/ui-foundation.ui.side-bar": "0.0.648",
-    "@teambit/command-bar": "0.0.866",
-    "@teambit/component-tree": "0.0.654",
+    "@teambit/lanes.hooks.use-lane-components": "0.0.38",
+    "@teambit/lanes.hooks.use-lanes": "0.0.39",
+    "@teambit/ui-foundation.ui.side-bar": "0.0.650",
+    "@teambit/command-bar": "0.0.868",
+    "@teambit/component-tree": "0.0.656",
     "@teambit/component.modules.component-url": "0.0.140",
-    "@teambit/component.ui.component-filters.component-filter-context": "0.0.7",
-    "@teambit/component.ui.component-filters.deprecate-filter": "0.0.7",
-    "@teambit/component.ui.component-filters.env-filter": "0.0.13",
-    "@teambit/sidebar": "0.0.866",
+    "@teambit/component.ui.component-filters.component-filter-context": "0.0.8",
+    "@teambit/component.ui.component-filters.deprecate-filter": "0.0.8",
+    "@teambit/component.ui.component-filters.env-filter": "0.0.14",
+    "@teambit/component.ui.component-filters.show-main-filter": "0.0.1",
+    "@teambit/sidebar": "0.0.868",
     "@teambit/ui-foundation.ui.main-dropdown": "0.0.493",
     "@teambit/ui-foundation.ui.menu": "0.0.493",
     "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.496",
     "@teambit/ui-foundation.ui.tree.drawer": "0.0.505",
-    "@teambit/lane-id": "0.0.95",
+    "@teambit/lane-id": "0.0.97",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.494",
-    "@teambit/scope.ui.hooks.use-scope": "0.0.239",
+    "@teambit/scope.ui.hooks.use-scope": "0.0.241",
     "@teambit/ui-foundation.ui.buttons.collapser": "0.0.201",
     "@teambit/ui-foundation.ui.corner": "0.0.504",
     "@teambit/ui-foundation.ui.full-loader": "0.0.492",
@@ -88,7 +91,7 @@
   },
   "peerDependencies": {
     "react-router-dom": "^6.0.0",
-    "@teambit/legacy": "1.0.358",
+    "@teambit/legacy": "1.0.360",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },

package/{preview-1664710331381.js → preview-1664735485436.js}

@@ -1,5 +1,5 @@
-import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.scope_scope@0.0.866/dist/scope.composition.js';
-import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.scope_scope@0.0.866/dist/scope.docs.mdx';
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.scope_scope@0.0.868/dist/scope.composition.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.scope_scope@0.0.868/dist/scope.docs.mdx';
 
 export const compositions = [compositions_0];
 export const overview = [overview_0];

package/scope.ui.drawer.tsx

@@ -1,8 +1,18 @@
 import React, { useContext } from 'react';
 import { ComponentsDrawer, ComponentFiltersSlot, DrawerWidgetSlot } from '@teambit/component.ui.component-drawer';
-import { ScopeContext } from '@teambit/scope.ui.hooks.scope-context';
-import { ComponentView, NamespaceTreeNode, PayloadType, ScopePayload } from '@teambit/ui-foundation.ui.side-bar';
-import { TreeNodeProps } from '@teambit/design.ui.tree';
+import {
+  ComponentView,
+  NamespaceTreeNode,
+  PayloadType,
+  ScopePayload,
+  ScopeTreeNode,
+} from '@teambit/ui-foundation.ui.side-bar';
+import { TreeNode as TreeNodeType, TreeNodeProps } from '@teambit/design.ui.tree';
+import { useLanes } from '@teambit/lanes.hooks.use-lanes';
+import { useLaneComponents } from '@teambit/lanes.hooks.use-lane-components';
+import { ComponentModel } from '@teambit/component';
+import { useScope, ScopeContext } from '@teambit/scope.ui.hooks.scope-context';
+// import { WorkspaceModel } from '@teambit/workspace';
 import { SidebarSlot } from './scope.ui.runtime';
 
 export type ScopeDrawerProps = {
@@ -10,6 +20,7 @@ export type ScopeDrawerProps = {
   filtersSlot: ComponentFiltersSlot;
   drawerWidgetSlot: DrawerWidgetSlot;
   assumeScopeInUrl?: boolean;
+  overrideUseComponents?: () => { components: ComponentModel[] };
 };
 
 export const scopeDrawer = ({
@@ -17,8 +28,9 @@ export const scopeDrawer = ({
   filtersSlot,
   drawerWidgetSlot,
   assumeScopeInUrl = false,
+  overrideUseComponents,
 }: ScopeDrawerProps) => {
-  const customScopeTreeNodeRenderer = (treeNodeSlot) =>
+  const customScopeTreeNodeRenderer = (treeNodeSlot, host?: any) =>
     function TreeNode(props: TreeNodeProps<PayloadType>) {
       const children = props.node.children;
 
@@ -26,6 +38,18 @@ export const scopeDrawer = ({
 
       // skip over scope node and render only children
       if (props.node.payload instanceof ScopePayload) {
+        const scopeNameFromNode = props.node.id.slice(0, -1);
+        const scope = host?.name;
+
+        /**
+         * this is only valid when viewing component from a lane
+         * if the lane component is from a different scope than the current scope
+         * show the scope node
+         */
+        if (scopeNameFromNode !== scope) {
+          return <ScopeTreeNode {...props} />;
+        }
+
         return (
           <>
             {children.map((childNode) => (
@@ -51,13 +75,54 @@ export const scopeDrawer = ({
       filters: filtersSlot,
       drawerWidgets: drawerWidgetSlot,
     },
+    useHost: () => useScope(),
     emptyMessage: 'Scope is empty',
-    useComponents: () => {
-      const scope = useContext(ScopeContext);
-      return {
-        loading: !scope,
-        components: scope.components || [],
+    // TODO: create an interface for Component host.
+    transformTree: (host?: any) => {
+      return (rootNode: TreeNodeType) => {
+        const thisScopeIndex = rootNode.children?.findIndex((node) => {
+          if (!(node.payload instanceof ScopePayload)) return undefined;
+          const scopeNameFromNode = node.id.slice(0, -1);
+          return scopeNameFromNode === host?.name;
+        });
+
+        const thisScope = rootNode.children ? rootNode.children[thisScopeIndex || ''] : undefined;
+
+        if (thisScopeIndex && thisScopeIndex !== -1 && rootNode.children) {
+          delete rootNode.children[thisScopeIndex];
+          const children = rootNode.children.concat(thisScope.children);
+          rootNode.children = children;
+        }
+
+        return rootNode;
       };
     },
+    useComponents:
+      overrideUseComponents ||
+      (() => {
+        const { lanesModel, loading: lanesLoading } = useLanes();
+        const viewedLaneId = lanesModel?.viewedLane?.id;
+
+        const { components: laneComponents = [], loading: laneCompsLoading } = useLaneComponents(
+          viewedLaneId?.isDefault() ? undefined : viewedLaneId
+        );
+        const { components: mainComponents } = useContext(ScopeContext);
+        // lane components + main components
+        const components = mergeComponents(mainComponents, laneComponents);
+
+        return {
+          loading: lanesLoading || laneCompsLoading,
+          components,
+        };
+      }),
   });
 };
+
+function mergeComponents(mainComponents: ComponentModel[], laneComponents: ComponentModel[]): ComponentModel[] {
+  const mainComponentsThatAreNotOnLane = mainComponents.filter((mainComponent) => {
+    return !laneComponents.find(
+      (laneComponent) => laneComponent.id.toStringWithoutVersion() === mainComponent.id.toStringWithoutVersion()
+    );
+  });
+  return laneComponents.concat(mainComponentsThatAreNotOnLane);
+}

package/scope.ui.runtime.tsx

@@ -24,6 +24,7 @@ import { ComponentFilters } from '@teambit/component.ui.component-filters.compon
 import { DeprecateFilter } from '@teambit/component.ui.component-filters.deprecate-filter';
 import { EnvsFilter } from '@teambit/component.ui.component-filters.env-filter';
 import { ComponentUrlResolver, ComponentUrlProvider } from '@teambit/component.modules.component-url';
+import { ShowMainFilter } from '@teambit/component.ui.component-filters.show-main-filter';
 import { ScopeMenu, ScopeUseBox } from './ui/menu';
 import { ScopeAspect } from './scope.aspect';
 import { Scope } from './ui/scope';
@@ -124,6 +125,7 @@ export class ScopeUI {
     return (
       <Scope
         TargetScopeOverview={options.TargetScopeOverview}
+        scopeClassName={options.scopeClassName}
         TargetCorner={options.Corner}
         routeSlot={this.routeSlot}
         menuSlot={this.menuSlot}
@@ -136,6 +138,7 @@ export class ScopeUI {
         onSidebarTogglerChange={this.setSidebarToggle}
         cornerSlot={this.cornerSlot}
         paneClassName={options.paneClassName}
+        PaneWrapper={options.PaneWrapper}
       />
     );
   }
@@ -281,13 +284,14 @@ export class ScopeUI {
     this.drawerWidgetSlot.register(widgets);
   };
 
-  registerDefaultDrawers(assumeScopeInUrl = false) {
+  registerDefaultDrawers(assumeScopeInUrl = false, overrideUseComponents?: () => { components: ComponentModel[] }) {
     this.sidebar.registerDrawer(
       scopeDrawer({
         treeWidgets: this.sidebarSlot,
         filtersSlot: this.drawerComponentsFiltersSlot,
         drawerWidgetSlot: this.drawerWidgetSlot,
         assumeScopeInUrl,
+        overrideUseComponents,
       })
     );
   }
@@ -332,9 +336,11 @@ export class ScopeUI {
       return aWeight - bWeight;
     });
 
-    return compact(sorted.map((link) => {
-      return link.component;
-    }));
+    return compact(
+      sorted.map((link) => {
+        return link.component;
+      })
+    );
   }
 
   /** registers available components */
@@ -427,7 +433,7 @@ export class ScopeUI {
       drawerWidgetSlot,
       componentFiltersSlot
     );
-    scopeUi.registerDrawerComponentFilters([DeprecateFilter, EnvsFilter]);
+    scopeUi.registerDrawerComponentFilters([DeprecateFilter, EnvsFilter, ShowMainFilter(false)]);
     scopeUi.registerDrawerWidgets([
       <FilterWidget key={'workspace-filter-widget'} />,
       <TreeToggleWidget key={'workspace-tree-toggle-widget'} />,
@@ -440,7 +446,7 @@ export class ScopeUI {
         component: function Gallery() {
           return (
             <MenuLinkItem exact href="/" icon="comps">
-              Gallery
+              Overview
             </MenuLinkItem>
           );
         },

package/ui/scope.module.scss

@@ -40,3 +40,7 @@
 
   height: 100%;
 }
+
+.pane {
+  height: 100%;
+}

package/ui/scope.tsx

@@ -1,4 +1,6 @@
+import React, { useReducer, ComponentType, ReactNode } from 'react';
 import 'reset-css';
+import classNames from 'classnames';
 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';
@@ -7,7 +9,6 @@ import { HoverSplitter } from '@teambit/base-ui.surfaces.split-pane.hover-splitt
 import { TopBar } from '@teambit/ui-foundation.ui.top-bar';
 import { Composer, ComponentTuple } from '@teambit/base-ui.utils.composer';
 import { FullLoader } from '@teambit/ui-foundation.ui.full-loader';
-import React, { useReducer, ComponentType } 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';
@@ -31,6 +32,8 @@ export type ScopeProps = {
   onSidebarTogglerChange: (callback: () => void) => void;
   TargetCorner?: ComponentType;
   paneClassName?: string;
+  scopeClassName?: string;
+  PaneWrapper?: ComponentType<{ children: ReactNode }>;
 };
 
 /**
@@ -44,12 +47,14 @@ export function Scope({
   badgeSlot,
   overviewLineSlot,
   cornerSlot,
+  PaneWrapper,
   context = [],
   paneClassName,
-TargetScopeOverview,
+  TargetScopeOverview,
   TargetCorner,
   onSidebarTogglerChange,
   userUseScopeQuery,
+  scopeClassName,
 }: ScopeProps) {
   const { scope } = userUseScopeQuery ? userUseScopeQuery() : useScopeQuery();
   const isMobile = useIsMobile();
@@ -67,7 +72,7 @@ TargetScopeOverview,
   return (
     <ScopeProvider scope={scope}>
       <Composer components={Context}>
-        <div className={styles.scope}>
+        <div className={classNames(styles.scope, scopeClassName)}>
           <TopBar
             className={styles.topbar}
             Corner={() => {
@@ -87,23 +92,36 @@ TargetScopeOverview,
                 tooltipContent={`${isSidebarOpen ? 'Hide' : 'Show'} side panel`}
               />
             </HoverSplitter>
-            <Pane className={paneClassName}>
-              <SlotRouter slot={routeSlot}>
-                <Route
-                  index
-                  element={
-                    <ScopeOverview
-                      badgeSlot={badgeSlot}
-                      overviewSlot={overviewLineSlot}
-                      TargetOverview={TargetScopeOverview}
-                    />
-                  }
-                />
-              </SlotRouter>
-            </Pane>
+            <PaneContainer Wrapper={PaneWrapper}>
+              <Pane className={classNames(paneClassName, styles.pane)}>
+                <SlotRouter slot={routeSlot}>
+                  <Route
+                    index
+                    element={
+                      <ScopeOverview
+                        badgeSlot={badgeSlot}
+                        overviewSlot={overviewLineSlot}
+                        TargetOverview={TargetScopeOverview}
+                      />
+                    }
+                  />
+                </SlotRouter>
+              </Pane>
+            </PaneContainer>
           </SplitPane>
         </div>
       </Composer>
     </ScopeProvider>
   );
 }
+
+function PaneContainer({
+  children,
+  Wrapper,
+}: {
+  children: ReactNode;
+  Wrapper?: ComponentType<{ children: ReactNode }>;
+}) {
+  if (!Wrapper) return <>{children}</>;
+  return <Wrapper>{children}</Wrapper>;
+}