@teambit/scope 0.0.685 → 0.0.686

package/dist/scope.ui.drawer.d.ts

@@ -0,0 +1,8 @@
+import { ComponentsDrawer, ComponentFiltersSlot, DrawerWidgetSlot } from '@teambit/component.ui.component-drawer';
+import { SidebarSlot } from './scope.ui.runtime';
+export declare type ScopeDrawerProps = {
+    treeWidgets: SidebarSlot;
+    filtersSlot: ComponentFiltersSlot;
+    drawerWidgetSlot: DrawerWidgetSlot;
+};
+export declare const scopeDrawer: ({ treeWidgets, filtersSlot, drawerWidgetSlot }: ScopeDrawerProps) => ComponentsDrawer;

package/dist/scope.ui.drawer.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.scopeDrawer = void 0;
+
+function _extends2() {
+  const data = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+  _extends2 = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+
+  _react = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _componentUi() {
+  const data = require("@teambit/component.ui.component-drawer");
+
+  _componentUi = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _scopeUiHooks() {
+  const data = require("@teambit/scope.ui.hooks.scope-context");
+
+  _scopeUiHooks = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _uiFoundationUi() {
+  const data = require("@teambit/ui-foundation.ui.side-bar");
+
+  _uiFoundationUi = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const scopeDrawer = ({
+  treeWidgets,
+  filtersSlot,
+  drawerWidgetSlot
+}) => {
+  const customScopeTreeNodeRenderer = treeNodeSlot => function TreeNode(props) {
+    const children = props.node.children;
+    if (!children) return /*#__PURE__*/_react().default.createElement(_uiFoundationUi().ComponentView, (0, _extends2().default)({}, props, {
+      treeNodeSlot: treeNodeSlot
+    })); // skip over scope node and render only children
+
+    if (props.node.payload instanceof _uiFoundationUi().ScopePayload) {
+      return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, children.map(childNode => /*#__PURE__*/_react().default.createElement(TreeNode, (0, _extends2().default)({
+        key: childNode.id
+      }, props, {
+        node: childNode
+      }))));
+    }
+
+    return /*#__PURE__*/_react().default.createElement(_uiFoundationUi().NamespaceTreeNode, props);
+  };
+
+  return new (_componentUi().ComponentsDrawer)({
+    order: 0,
+    id: 'scope-components-drawer',
+    name: 'COMPONENTS',
+    plugins: {
+      tree: {
+        widgets: treeWidgets,
+        customRenderer: customScopeTreeNodeRenderer
+      },
+      filters: filtersSlot,
+      drawerWidgets: drawerWidgetSlot
+    },
+    emptyMessage: 'Scope is empty',
+    useComponents: () => {
+      const scope = (0, _react().useContext)(_scopeUiHooks().ScopeContext);
+      return {
+        loading: !scope,
+        components: scope.components || []
+      };
+    }
+  });
+};
+
+exports.scopeDrawer = scopeDrawer;
+
+//# sourceMappingURL=scope.ui.drawer.js.map

package/dist/scope.ui.drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["scope.ui.drawer.tsx"],"names":["scopeDrawer","treeWidgets","filtersSlot","drawerWidgetSlot","customScopeTreeNodeRenderer","treeNodeSlot","TreeNode","props","children","node","payload","ScopePayload","map","childNode","id","ComponentsDrawer","order","name","plugins","tree","widgets","customRenderer","filters","drawerWidgets","emptyMessage","useComponents","scope","ScopeContext","loading","components"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;;;;;AAUO,MAAMA,WAAW,GAAG,CAAC;AAAEC,EAAAA,WAAF;AAAeC,EAAAA,WAAf;AAA4BC,EAAAA;AAA5B,CAAD,KAAsE;AAC/F,QAAMC,2BAA2B,GAAIC,YAAD,IAClC,SAASC,QAAT,CAAkBC,KAAlB,EAAqD;AACnD,UAAMC,QAAQ,GAAGD,KAAK,CAACE,IAAN,CAAWD,QAA5B;AAEA,QAAI,CAACA,QAAL,EAAe,oBAAO,+BAAC,+BAAD,+BAAmBD,KAAnB;AAA0B,MAAA,YAAY,EAAEF;AAAxC,OAAP,CAHoC,CAKnD;;AACA,QAAIE,KAAK,CAACE,IAAN,CAAWC,OAAX,YAA8BC,8BAAlC,EAAgD;AAC9C,0BACE,gEACGH,QAAQ,CAACI,GAAT,CAAcC,SAAD,iBACZ,+BAAC,QAAD;AAAU,QAAA,GAAG,EAAEA,SAAS,CAACC;AAAzB,SAAiCP,KAAjC;AAAwC,QAAA,IAAI,EAAEM;AAA9C,SADD,CADH,CADF;AAOD;;AAED,wBAAO,+BAAC,mCAAD,EAAuBN,KAAvB,CAAP;AACD,GAlBH;;AAoBA,SAAO,KAAIQ,+BAAJ,EAAqB;AAC1BC,IAAAA,KAAK,EAAE,CADmB;AAE1BF,IAAAA,EAAE,EAAE,yBAFsB;AAG1BG,IAAAA,IAAI,EAAE,YAHoB;AAI1BC,IAAAA,OAAO,EAAE;AACPC,MAAAA,IAAI,EAAE;AACJC,QAAAA,OAAO,EAAEnB,WADL;AAEJoB,QAAAA,cAAc,EAAEjB;AAFZ,OADC;AAKPkB,MAAAA,OAAO,EAAEpB,WALF;AAMPqB,MAAAA,aAAa,EAAEpB;AANR,KAJiB;AAY1BqB,IAAAA,YAAY,EAAE,gBAZY;AAa1BC,IAAAA,aAAa,EAAE,MAAM;AACnB,YAAMC,KAAK,GAAG,yBAAWC,4BAAX,CAAd;AACA,aAAO;AACLC,QAAAA,OAAO,EAAE,CAACF,KADL;AAELG,QAAAA,UAAU,EAAEH,KAAK,CAACG,UAAN,IAAoB;AAF3B,OAAP;AAID;AAnByB,GAArB,CAAP;AAqBD,CA1CM","sourcesContent":["import React, { useContext } from 'react';\nimport { ComponentsDrawer, ComponentFiltersSlot, DrawerWidgetSlot } from '@teambit/component.ui.component-drawer';\nimport { ScopeContext } from '@teambit/scope.ui.hooks.scope-context';\nimport { ComponentView, NamespaceTreeNode, PayloadType, ScopePayload } from '@teambit/ui-foundation.ui.side-bar';\nimport { TreeNodeProps } from '@teambit/design.ui.tree';\nimport { SidebarSlot } from './scope.ui.runtime';\n\nexport type ScopeDrawerProps = {\n  treeWidgets: SidebarSlot;\n  filtersSlot: ComponentFiltersSlot;\n  drawerWidgetSlot: DrawerWidgetSlot;\n};\n\nexport const scopeDrawer = ({ treeWidgets, filtersSlot, drawerWidgetSlot }: ScopeDrawerProps) => {\n  const customScopeTreeNodeRenderer = (treeNodeSlot) =>\n    function TreeNode(props: TreeNodeProps<PayloadType>) {\n      const children = props.node.children;\n\n      if (!children) return <ComponentView {...props} treeNodeSlot={treeNodeSlot} />;\n\n      // skip over scope node and render only children\n      if (props.node.payload instanceof ScopePayload) {\n        return (\n          <>\n            {children.map((childNode) => (\n              <TreeNode key={childNode.id} {...props} node={childNode}></TreeNode>\n            ))}\n          </>\n        );\n      }\n\n      return <NamespaceTreeNode {...props} />;\n    };\n\n  return new ComponentsDrawer({\n    order: 0,\n    id: 'scope-components-drawer',\n    name: 'COMPONENTS',\n    plugins: {\n      tree: {\n        widgets: treeWidgets,\n        customRenderer: customScopeTreeNodeRenderer,\n      },\n      filters: filtersSlot,\n      drawerWidgets: drawerWidgetSlot,\n    },\n    emptyMessage: 'Scope is empty',\n    useComponents: () => {\n      const scope = useContext(ScopeContext);\n      return {\n        loading: !scope,\n        components: scope.components || [],\n      };\n    },\n  });\n};\n"]}

package/dist/scope.ui.runtime.d.ts

@@ -12,6 +12,8 @@ import { MenuWidget, MenuWidgetSlot } from '@teambit/ui-foundation.ui.menu';
 import { CommandBarUI, ComponentSearcher } from '@teambit/command-bar';
 import { ScopeModel } from '@teambit/scope.models.scope-model';
 import { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';
+import { DrawerWidgetSlot, ComponentFiltersSlot } from '@teambit/component.ui.component-drawer';
+import { ComponentFilters } from '@teambit/component.ui.component-filters';
 export declare type ScopeBadge = ComponentType;
 export declare type ScopeBadgeSlot = SlotRegistry<ScopeBadge[]>;
 export declare type ContextSlot = SlotRegistry<ScopeContextType[]>;
@@ -65,6 +67,8 @@ export declare class ScopeUI {
      * add a new context to ui
      */
     private contextSlot;
+    private drawerWidgetSlot;
+    private drawerComponentsFiltersSlot;
     constructor(
     /**
      * route slot.
@@ -97,7 +101,7 @@ export declare class ScopeUI {
     /**
      * add a new context to ui
      */
-    contextSlot: ContextSlot);
+    contextSlot: ContextSlot, drawerWidgetSlot: DrawerWidgetSlot, drawerComponentsFiltersSlot: ComponentFiltersSlot);
     private setSidebarToggle;
     /**
      * register a new badge into the scope overview.
@@ -151,6 +155,11 @@ export declare class ScopeUI {
      */
     registerSidebarLink: (...links: SidebarItem[]) => void;
     registerDrawers: (...drawer: DrawerType[]) => this;
+    /**
+     * register component filters
+     */
+    registerDrawerComponentFilters: (filters: ComponentFilters) => void;
+    registerDrawerWidgets: (widgets: ReactNode[]) => void;
     uiRoot(): UIRoot;
     /** registers available components */
     setComponents: (components: ComponentModel[]) => void;
@@ -159,14 +168,14 @@ export declare class ScopeUI {
     static runtime: import("@teambit/harmony").RuntimeDefinition;
     static slots: (((registerFn: () => string) => SlotRegistry<ComponentTreeNode>) | ((registerFn: () => string) => SlotRegistry<RouteProps<string, {
         [x: string]: string | undefined;
-    }>>) | ((registerFn: () => string) => SlotRegistry<MenuItemSlot>) | ((registerFn: () => string) => SlotRegistry<SidebarItemSlot>) | ((registerFn: () => string) => SlotRegistry<ScopeBadge>) | ((registerFn: () => string) => SlotRegistry<MenuWidget[]>) | ((registerFn: () => string) => SlotRegistry<CornerSlot>) | ((registerFn: () => string) => SlotRegistry<ContextSlot>))[];
+    }>>) | ((registerFn: () => string) => SlotRegistry<DrawerWidgetSlot>) | ((registerFn: () => string) => SlotRegistry<ScopeBadge>) | ((registerFn: () => string) => SlotRegistry<MenuWidget[]>) | ((registerFn: () => string) => SlotRegistry<CornerSlot>))[];
     static provider([ui, componentUi, sidebar, commandBarUI, reactRouterUI]: [
         UiUI,
         ComponentUI,
         SidebarUI,
         CommandBarUI,
         ReactRouterUI
-    ], config: any, [routeSlot, menuSlot, sidebarSlot, scopeBadgeSlot, menuWidgetSlot, menuItemSlot, sidebarItemSlot, cornerSlot, overviewSlot, contextSlot,]: [
+    ], config: any, [routeSlot, menuSlot, sidebarSlot, scopeBadgeSlot, menuWidgetSlot, menuItemSlot, sidebarItemSlot, cornerSlot, overviewSlot, contextSlot, drawerWidgetSlot, componentFiltersSlot,]: [
         RouteSlot,
         RouteSlot,
         SidebarSlot,
@@ -176,7 +185,9 @@ export declare class ScopeUI {
         SidebarItemSlot,
         CornerSlot,
         OverviewLineSlot,
-        ContextSlot
+        ContextSlot,
+        DrawerWidgetSlot,
+        ComponentFiltersSlot
     ]): Promise<ScopeUI>;
 }
 export default ScopeUI;

package/dist/scope.ui.runtime.js

@@ -111,6 +111,26 @@ function _commandBar() {
   return data;
 }
 
+function _componentUi() {
+  const data = require("@teambit/component.ui.component-drawer");
+
+  _componentUi = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _componentUi2() {
+  const data = require("@teambit/component.ui.component-filters");
+
+  _componentUi2 = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _menu() {
   const data = require("./ui/menu");
 
@@ -141,10 +161,10 @@ function _scope2() {
   return data;
 }
 
-function _componentsDrawer() {
-  const data = require("./ui/components-drawer");
+function _scopeUi() {
+  const data = require("./scope.ui.drawer");
 
-  _componentsDrawer = function () {
+  _scopeUi = function () {
     return data;
   };
 
@@ -188,7 +208,7 @@ class ScopeUI {
   /**
    * add a new context to ui
    */
-  contextSlot) {
+  contextSlot, drawerWidgetSlot, drawerComponentsFiltersSlot) {
     this.routeSlot = routeSlot;
     this.componentUi = componentUi;
     this.menuSlot = menuSlot;
@@ -203,6 +223,8 @@ class ScopeUI {
     this.cornerSlot = cornerSlot;
     this.overviewSlot = overviewSlot;
     this.contextSlot = contextSlot;
+    this.drawerWidgetSlot = drawerWidgetSlot;
+    this.drawerComponentsFiltersSlot = drawerComponentsFiltersSlot;
     (0, _defineProperty2().default)(this, "setSidebarToggle", () => {});
     (0, _defineProperty2().default)(this, "registerMenuRoutes", routes => {
       this.menuSlot.register(routes);
@@ -222,6 +244,12 @@ class ScopeUI {
       this.sidebar.registerDrawer(...drawer);
       return this;
     });
+    (0, _defineProperty2().default)(this, "registerDrawerComponentFilters", filters => {
+      this.drawerComponentsFiltersSlot.register(filters);
+    });
+    (0, _defineProperty2().default)(this, "registerDrawerWidgets", widgets => {
+      this.drawerWidgetSlot.register(widgets);
+    });
     (0, _defineProperty2().default)(this, "setComponents", components => {
       this.componentSearcher.update(components);
     });
@@ -346,7 +374,11 @@ class ScopeUI {
 
   uiRoot() {
     this.commandBarUI.addSearcher(this.componentSearcher);
-    this.sidebar.registerDrawer(new (_componentsDrawer().ComponentsDrawer)(this.sidebarSlot));
+    this.sidebar.registerDrawer((0, _scopeUi().scopeDrawer)({
+      treeWidgets: this.sidebarSlot,
+      filtersSlot: this.drawerComponentsFiltersSlot,
+      drawerWidgetSlot: this.drawerWidgetSlot
+    }));
     const [setKeyBindHandler] = this.commandBarUI.addCommand({
       id: 'sidebar.toggle',
       // TODO - extract to a component!
@@ -377,9 +409,15 @@ class ScopeUI {
   /** registers available components */
 
 
-  static async provider([ui, componentUi, sidebar, commandBarUI, reactRouterUI], config, [routeSlot, menuSlot, sidebarSlot, scopeBadgeSlot, menuWidgetSlot, menuItemSlot, sidebarItemSlot, cornerSlot, overviewSlot, contextSlot]) {
+  static async provider([ui, componentUi, sidebar, commandBarUI, reactRouterUI], config, [routeSlot, menuSlot, sidebarSlot, scopeBadgeSlot, menuWidgetSlot, menuItemSlot, sidebarItemSlot, cornerSlot, overviewSlot, contextSlot, drawerWidgetSlot, componentFiltersSlot]) {
     const componentSearcher = new (_commandBar().ComponentSearcher)(reactRouterUI.navigateTo);
-    const scopeUi = new ScopeUI(routeSlot, componentUi, menuSlot, sidebar, sidebarSlot, commandBarUI, componentSearcher, scopeBadgeSlot, menuWidgetSlot, sidebarItemSlot, menuItemSlot, cornerSlot, overviewSlot, contextSlot);
+    const scopeUi = new ScopeUI(routeSlot, componentUi, menuSlot, sidebar, sidebarSlot, commandBarUI, componentSearcher, scopeBadgeSlot, menuWidgetSlot, sidebarItemSlot, menuItemSlot, cornerSlot, overviewSlot, contextSlot, drawerWidgetSlot, componentFiltersSlot);
+    scopeUi.registerDrawerComponentFilters([_componentUi2().DeprecateFilter, _componentUi2().EnvsFilter]);
+    scopeUi.registerDrawerWidgets([/*#__PURE__*/_react().default.createElement(_componentUi().FilterWidget, {
+      key: 'workspace-filter-widget'
+    }), /*#__PURE__*/_react().default.createElement(_componentUi().TreeToggleWidget, {
+      key: 'workspace-tree-toggle-widget'
+    })]);
     ui.registerRoot(scopeUi.uiRoot.bind(scopeUi));
     scopeUi.registerMenuItem(scopeUi.menuItems);
     scopeUi.registerMenuWidget(() => /*#__PURE__*/_react().default.createElement(_menu().ScopeUseBox, null));
@@ -397,7 +435,7 @@ class ScopeUI {
 exports.ScopeUI = ScopeUI;
 (0, _defineProperty2().default)(ScopeUI, "dependencies", [_ui().UIAspect, _component().ComponentAspect, _sidebar().SidebarAspect, _commandBar().default, _reactRouter().default]);
 (0, _defineProperty2().default)(ScopeUI, "runtime", _ui().UIRuntime);
-(0, _defineProperty2().default)(ScopeUI, "slots", [_harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType()]);
+(0, _defineProperty2().default)(ScopeUI, "slots", [_harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType()]);
 var _default = ScopeUI;
 exports.default = _default;
 

package/dist/scope.ui.runtime.js.map

@@ -1 +1 @@
-{"version":3,"sources":["scope.ui.runtime.tsx"],"names":["ScopeUI","constructor","routeSlot","componentUi","menuSlot","sidebar","sidebarSlot","commandBarUI","componentSearcher","scopeBadgeSlot","menuWidgetSlot","sidebarItemSlot","menuItemSlot","cornerSlot","overviewSlot","contextSlot","routes","register","menuItems","componentTreeNodes","map","componentTreeNode","links","drawer","registerDrawer","components","update","category","title","keyChar","handler","run","registerBadge","badges","registerOverviewLine","lines","registerRoutes","registerExplicitRoutes","registerMenuRoutes","path","routePath","children","getMenu","ScopeAspect","id","exact","getComponentUI","registerMenuWidget","registerCorner","corner","replaceOverview","replaceDescription","replaceMetadataSection","registerMetadataItem","replaceComponentGrid","registerMetadata","addContext","context","getContext","contexts","values","uiRoot","addSearcher","ComponentsDrawer","setKeyBindHandler","addCommand","displayName","keybinding","setSidebarToggle","provider","ui","reactRouterUI","config","ComponentSearcher","navigateTo","scopeUi","registerRoot","bind","registerMenuItem","registerSidebarLink","UIAspect","ComponentAspect","SidebarAspect","CommandBarAspect","ReactRouterAspect","UIRuntime","Slot","withType","addRuntime"],"mappings":"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","sourcesContent":["import flatten from 'lodash.flatten';\nimport type { ComponentUI, ComponentModel } from '@teambit/component';\nimport { ComponentAspect } from '@teambit/component';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport ReactRouterAspect, { ReactRouterUI } from '@teambit/react-router';\nimport { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { SidebarAspect, SidebarUI, SidebarItem, SidebarItemSlot } from '@teambit/sidebar';\nimport { ComponentTreeNode } from '@teambit/component-tree';\nimport { UIAspect, UIRootUI as UIRoot, UIRuntime, UiUI } from '@teambit/ui';\nimport React, { ComponentType, ReactNode } from 'react';\nimport { MenuItemSlot, MenuItem } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { RouteProps } from 'react-router-dom';\nimport { MenuWidget, MenuWidgetSlot } from '@teambit/ui-foundation.ui.menu';\nimport { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';\nimport CommandBarAspect, { CommandBarUI, ComponentSearcher, CommandHandler } from '@teambit/command-bar';\nimport { ScopeModel } from '@teambit/scope.models.scope-model';\nimport { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';\nimport { ScopeMenu, ScopeUseBox } from './ui/menu';\nimport { ScopeAspect } from './scope.aspect';\nimport { Scope } from './ui/scope';\nimport { ComponentsDrawer } from './ui/components-drawer';\n\nexport type ScopeBadge = ComponentType;\n\nexport type ScopeBadgeSlot = SlotRegistry<ScopeBadge[]>;\n\nexport type ContextSlot = SlotRegistry<ScopeContextType[]>;\n\nexport type ScopeContextType = ComponentType<{ scope: ScopeModel; children: ReactNode }>;\n\nexport type SidebarSlot = SlotRegistry<ComponentTreeNode>;\n\nexport type ScopeOverview = ComponentType;\n\nexport type ScopeOverviewSlot = SlotRegistry<ScopeOverview>;\n\nexport type Corner = ComponentType;\n\nexport type CornerSlot = SlotRegistry<Corner>;\n\nexport type OverviewLine = ComponentType;\n\nexport type OverviewLineSlot = SlotRegistry<OverviewLine[]>;\n\nexport class ScopeUI {\n  constructor(\n    /**\n     * route slot.\n     */\n    private routeSlot: RouteSlot,\n\n    /**\n     * component ui extension.\n     */\n    private componentUi: ComponentUI,\n    /**\n     * menu slot\n     */\n    private menuSlot: RouteSlot,\n\n    private sidebar: SidebarUI,\n\n    private sidebarSlot: SidebarSlot,\n\n    private commandBarUI: CommandBarUI,\n\n    private componentSearcher: ComponentSearcher,\n\n    private scopeBadgeSlot: ScopeBadgeSlot,\n\n    private menuWidgetSlot: MenuWidgetSlot,\n\n    /**\n     * sidebar link slot\n     */\n    private sidebarItemSlot: SidebarItemSlot,\n\n    /**\n     * main dropdown item slot\n     */\n    private menuItemSlot: MenuItemSlot,\n\n    /**\n     * corner slot\n     */\n    private cornerSlot: CornerSlot,\n\n    /**\n     * overview line slot to add new lines beneath the overview section\n     */\n    private overviewSlot: OverviewLineSlot,\n\n    /**\n     * add a new context to ui\n     */\n    private contextSlot: ContextSlot\n  ) {}\n\n  private setSidebarToggle: (updated: CommandHandler) => void = () => {};\n\n  /**\n   * register a new badge into the scope overview.\n   */\n  registerBadge(...badges: ScopeBadge[]) {\n    this.scopeBadgeSlot.register(badges);\n    return this;\n  }\n\n  /**\n   * register a new line beneath the scope overview section.\n   */\n  registerOverviewLine(...lines: OverviewLine[]) {\n    this.overviewSlot.register(lines);\n    return this;\n  }\n\n  /**\n   * register a route to the scope.\n   */\n  registerRoutes(routes: RouteProps[]) {\n    this.routeSlot.register(routes);\n    return this;\n  }\n\n  registerMenuRoutes = (routes: RouteProps[]) => {\n    this.menuSlot.register(routes);\n    return this;\n  };\n\n  private registerExplicitRoutes() {\n    this.registerMenuRoutes([\n      {\n        path: this.componentUi.routePath,\n        children: this.componentUi.getMenu(ScopeAspect.id),\n      },\n      {\n        exact: true,\n        path: '/',\n        children: <ScopeMenu widgetSlot={this.menuWidgetSlot} menuItemSlot={this.menuItemSlot} />,\n      },\n    ]);\n    this.registerRoutes([\n      {\n        path: this.componentUi.routePath,\n        children: this.componentUi.getComponentUI(ScopeAspect.id),\n      },\n    ]);\n  }\n\n  registerMenuWidget(...menuItems: MenuWidget[]) {\n    this.menuWidgetSlot.register(menuItems);\n  }\n\n  registerCorner(corner: Corner) {\n    this.cornerSlot.register(corner);\n  }\n\n  /**\n   * register a scope overview.\n   */\n  replaceOverview() {}\n\n  /**\n   * register description.\n   */\n  replaceDescription() {}\n\n  /**\n   * register metadata section.\n   */\n  replaceMetadataSection() {}\n\n  /**\n   * register a metadata item.\n   */\n  registerMetadataItem() {}\n\n  replaceComponentGrid() {}\n\n  /**\n   * register metadata.\n   */\n  registerMetadata() {}\n\n  /**\n   * add a new context to the scope.\n   */\n  addContext(...context: ScopeContextType[]) {\n    this.contextSlot.register(context);\n    return this;\n  }\n\n  private getContext() {\n    const contexts = this.contextSlot.values();\n    return flatten(contexts);\n  }\n\n  registerMenuItem = (menuItems: MenuItem[]) => {\n    this.menuItemSlot.register(menuItems);\n  };\n\n  /**\n   * register a sidebar Widget for the scope\n   */\n  registerSidebarWidget = (componentTreeNodes: ComponentTreeNode[]) => {\n    componentTreeNodes.map((componentTreeNode) => this.sidebarSlot.register(componentTreeNode));\n    return this;\n  };\n\n  /**\n   * register a sidebar link to the section above the drawers\n   */\n  registerSidebarLink = (...links: SidebarItem[]) => {\n    this.sidebarItemSlot.register(links);\n  };\n\n  registerDrawers = (...drawer: DrawerType[]) => {\n    this.sidebar.registerDrawer(...drawer);\n    return this;\n  };\n\n  uiRoot(): UIRoot {\n    this.commandBarUI.addSearcher(this.componentSearcher);\n    this.sidebar.registerDrawer(new ComponentsDrawer(this.sidebarSlot));\n    const [setKeyBindHandler] = this.commandBarUI.addCommand({\n      id: 'sidebar.toggle', // TODO - extract to a component!\n      handler: () => {},\n      displayName: 'Toggle component list',\n      keybinding: 'alt+s',\n    });\n    this.setSidebarToggle = setKeyBindHandler;\n\n    return {\n      routes: [\n        {\n          path: '/',\n          children: (\n            <Scope\n              routeSlot={this.routeSlot}\n              menuSlot={this.menuSlot}\n              sidebar={<this.sidebar.render itemSlot={this.sidebarItemSlot} />}\n              scopeUi={this}\n              badgeSlot={this.scopeBadgeSlot}\n              overviewLineSlot={this.overviewSlot}\n              context={this.getContext()}\n              onSidebarTogglerChange={this.setSidebarToggle}\n              cornerSlot={this.cornerSlot}\n            />\n          ),\n        },\n      ],\n    };\n  }\n\n  /** registers available components */\n  setComponents = (components: ComponentModel[]) => {\n    this.componentSearcher.update(components);\n  };\n\n  private menuItems: MenuItem[] = [\n    {\n      category: 'general',\n      title: 'Open command bar',\n      keyChar: 'mod+k',\n      handler: () => this.commandBarUI?.run('command-bar.open'),\n    },\n    {\n      category: 'general',\n      title: 'Toggle component list',\n      keyChar: 'alt+s',\n      handler: () => this.commandBarUI?.run('sidebar.toggle'),\n    },\n  ];\n\n  static dependencies = [UIAspect, ComponentAspect, SidebarAspect, CommandBarAspect, ReactRouterAspect];\n  static runtime = UIRuntime;\n  static slots = [\n    Slot.withType<RouteProps>(),\n    Slot.withType<RouteProps>(),\n    Slot.withType<ComponentTreeNode>(),\n    Slot.withType<ScopeBadge>(),\n    Slot.withType<ScopeOverview>(),\n    Slot.withType<MenuWidget[]>(),\n    Slot.withType<MenuItemSlot>(),\n    Slot.withType<CornerSlot>(),\n    Slot.withType<OverviewLineSlot>(),\n    Slot.withType<SidebarItemSlot>(),\n    Slot.withType<ContextSlot>(),\n  ];\n\n  static async provider(\n    [ui, componentUi, sidebar, commandBarUI, reactRouterUI]: [\n      UiUI,\n      ComponentUI,\n      SidebarUI,\n      CommandBarUI,\n      ReactRouterUI\n    ],\n    config,\n    [\n      routeSlot,\n      menuSlot,\n      sidebarSlot,\n      scopeBadgeSlot,\n      menuWidgetSlot,\n      menuItemSlot,\n      sidebarItemSlot,\n      cornerSlot,\n      overviewSlot,\n      contextSlot,\n    ]: [\n      RouteSlot,\n      RouteSlot,\n      SidebarSlot,\n      ScopeBadgeSlot,\n      MenuWidgetSlot,\n      MenuItemSlot,\n      SidebarItemSlot,\n      CornerSlot,\n      OverviewLineSlot,\n      ContextSlot\n    ]\n  ) {\n    const componentSearcher = new ComponentSearcher(reactRouterUI.navigateTo);\n    const scopeUi = new ScopeUI(\n      routeSlot,\n      componentUi,\n      menuSlot,\n      sidebar,\n      sidebarSlot,\n      commandBarUI,\n      componentSearcher,\n      scopeBadgeSlot,\n      menuWidgetSlot,\n      sidebarItemSlot,\n      menuItemSlot,\n      cornerSlot,\n      overviewSlot,\n      contextSlot\n    );\n    ui.registerRoot(scopeUi.uiRoot.bind(scopeUi));\n    scopeUi.registerMenuItem(scopeUi.menuItems);\n    scopeUi.registerMenuWidget(() => <ScopeUseBox />);\n    scopeUi.registerSidebarLink(() => (\n      <MenuLinkItem exact href=\"/\" icon=\"comps\">\n        Gallery\n      </MenuLinkItem>\n    ));\n    scopeUi.registerExplicitRoutes();\n\n    return scopeUi;\n  }\n}\n\nexport default ScopeUI;\n\nScopeAspect.addRuntime(ScopeUI);\n"]}
+{"version":3,"sources":["scope.ui.runtime.tsx"],"names":["ScopeUI","constructor","routeSlot","componentUi","menuSlot","sidebar","sidebarSlot","commandBarUI","componentSearcher","scopeBadgeSlot","menuWidgetSlot","sidebarItemSlot","menuItemSlot","cornerSlot","overviewSlot","contextSlot","drawerWidgetSlot","drawerComponentsFiltersSlot","routes","register","menuItems","componentTreeNodes","map","componentTreeNode","links","drawer","registerDrawer","filters","widgets","components","update","category","title","keyChar","handler","run","registerBadge","badges","registerOverviewLine","lines","registerRoutes","registerExplicitRoutes","registerMenuRoutes","path","routePath","children","getMenu","ScopeAspect","id","exact","getComponentUI","registerMenuWidget","registerCorner","corner","replaceOverview","replaceDescription","replaceMetadataSection","registerMetadataItem","replaceComponentGrid","registerMetadata","addContext","context","getContext","contexts","values","uiRoot","addSearcher","treeWidgets","filtersSlot","setKeyBindHandler","addCommand","displayName","keybinding","setSidebarToggle","provider","ui","reactRouterUI","config","componentFiltersSlot","ComponentSearcher","navigateTo","scopeUi","registerDrawerComponentFilters","DeprecateFilter","EnvsFilter","registerDrawerWidgets","registerRoot","bind","registerMenuItem","registerSidebarLink","UIAspect","ComponentAspect","SidebarAspect","CommandBarAspect","ReactRouterAspect","UIRuntime","Slot","withType","addRuntime"],"mappings":"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","sourcesContent":["import flatten from 'lodash.flatten';\nimport type { ComponentUI, ComponentModel } from '@teambit/component';\nimport { ComponentAspect } from '@teambit/component';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport ReactRouterAspect, { ReactRouterUI } from '@teambit/react-router';\nimport { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { SidebarAspect, SidebarUI, SidebarItem, SidebarItemSlot } from '@teambit/sidebar';\nimport { ComponentTreeNode } from '@teambit/component-tree';\nimport { UIAspect, UIRootUI as UIRoot, UIRuntime, UiUI } from '@teambit/ui';\nimport React, { ComponentType, ReactNode } from 'react';\nimport { MenuItemSlot, MenuItem } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { RouteProps } from 'react-router-dom';\nimport { MenuWidget, MenuWidgetSlot } from '@teambit/ui-foundation.ui.menu';\nimport { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';\nimport CommandBarAspect, { CommandBarUI, ComponentSearcher, CommandHandler } from '@teambit/command-bar';\nimport { ScopeModel } from '@teambit/scope.models.scope-model';\nimport { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';\nimport {\n  DrawerWidgetSlot,\n  FilterWidget,\n  TreeToggleWidget,\n  ComponentFiltersSlot,\n} from '@teambit/component.ui.component-drawer';\nimport { ComponentFilters, DeprecateFilter, EnvsFilter } from '@teambit/component.ui.component-filters';\n\nimport { ScopeMenu, ScopeUseBox } from './ui/menu';\nimport { ScopeAspect } from './scope.aspect';\nimport { Scope } from './ui/scope';\nimport { scopeDrawer } from './scope.ui.drawer';\n\nexport type ScopeBadge = ComponentType;\n\nexport type ScopeBadgeSlot = SlotRegistry<ScopeBadge[]>;\n\nexport type ContextSlot = SlotRegistry<ScopeContextType[]>;\n\nexport type ScopeContextType = ComponentType<{ scope: ScopeModel; children: ReactNode }>;\n\nexport type SidebarSlot = SlotRegistry<ComponentTreeNode>;\n\nexport type ScopeOverview = ComponentType;\n\nexport type ScopeOverviewSlot = SlotRegistry<ScopeOverview>;\n\nexport type Corner = ComponentType;\n\nexport type CornerSlot = SlotRegistry<Corner>;\n\nexport type OverviewLine = ComponentType;\n\nexport type OverviewLineSlot = SlotRegistry<OverviewLine[]>;\n\nexport class ScopeUI {\n  constructor(\n    /**\n     * route slot.\n     */\n    private routeSlot: RouteSlot,\n\n    /**\n     * component ui extension.\n     */\n    private componentUi: ComponentUI,\n    /**\n     * menu slot\n     */\n    private menuSlot: RouteSlot,\n\n    private sidebar: SidebarUI,\n\n    private sidebarSlot: SidebarSlot,\n\n    private commandBarUI: CommandBarUI,\n\n    private componentSearcher: ComponentSearcher,\n\n    private scopeBadgeSlot: ScopeBadgeSlot,\n\n    private menuWidgetSlot: MenuWidgetSlot,\n\n    /**\n     * sidebar link slot\n     */\n    private sidebarItemSlot: SidebarItemSlot,\n\n    /**\n     * main dropdown item slot\n     */\n    private menuItemSlot: MenuItemSlot,\n\n    /**\n     * corner slot\n     */\n    private cornerSlot: CornerSlot,\n\n    /**\n     * overview line slot to add new lines beneath the overview section\n     */\n    private overviewSlot: OverviewLineSlot,\n\n    /**\n     * add a new context to ui\n     */\n    private contextSlot: ContextSlot,\n    private drawerWidgetSlot: DrawerWidgetSlot,\n    private drawerComponentsFiltersSlot: ComponentFiltersSlot\n  ) {}\n\n  private setSidebarToggle: (updated: CommandHandler) => void = () => {};\n\n  /**\n   * register a new badge into the scope overview.\n   */\n  registerBadge(...badges: ScopeBadge[]) {\n    this.scopeBadgeSlot.register(badges);\n    return this;\n  }\n\n  /**\n   * register a new line beneath the scope overview section.\n   */\n  registerOverviewLine(...lines: OverviewLine[]) {\n    this.overviewSlot.register(lines);\n    return this;\n  }\n\n  /**\n   * register a route to the scope.\n   */\n  registerRoutes(routes: RouteProps[]) {\n    this.routeSlot.register(routes);\n    return this;\n  }\n\n  registerMenuRoutes = (routes: RouteProps[]) => {\n    this.menuSlot.register(routes);\n    return this;\n  };\n\n  private registerExplicitRoutes() {\n    this.registerMenuRoutes([\n      {\n        path: this.componentUi.routePath,\n        children: this.componentUi.getMenu(ScopeAspect.id),\n      },\n      {\n        exact: true,\n        path: '/',\n        children: <ScopeMenu widgetSlot={this.menuWidgetSlot} menuItemSlot={this.menuItemSlot} />,\n      },\n    ]);\n    this.registerRoutes([\n      {\n        path: this.componentUi.routePath,\n        children: this.componentUi.getComponentUI(ScopeAspect.id),\n      },\n    ]);\n  }\n\n  registerMenuWidget(...menuItems: MenuWidget[]) {\n    this.menuWidgetSlot.register(menuItems);\n  }\n\n  registerCorner(corner: Corner) {\n    this.cornerSlot.register(corner);\n  }\n\n  /**\n   * register a scope overview.\n   */\n  replaceOverview() {}\n\n  /**\n   * register description.\n   */\n  replaceDescription() {}\n\n  /**\n   * register metadata section.\n   */\n  replaceMetadataSection() {}\n\n  /**\n   * register a metadata item.\n   */\n  registerMetadataItem() {}\n\n  replaceComponentGrid() {}\n\n  /**\n   * register metadata.\n   */\n  registerMetadata() {}\n\n  /**\n   * add a new context to the scope.\n   */\n  addContext(...context: ScopeContextType[]) {\n    this.contextSlot.register(context);\n    return this;\n  }\n\n  private getContext() {\n    const contexts = this.contextSlot.values();\n    return flatten(contexts);\n  }\n\n  registerMenuItem = (menuItems: MenuItem[]) => {\n    this.menuItemSlot.register(menuItems);\n  };\n\n  /**\n   * register a sidebar Widget for the scope\n   */\n  registerSidebarWidget = (componentTreeNodes: ComponentTreeNode[]) => {\n    componentTreeNodes.map((componentTreeNode) => this.sidebarSlot.register(componentTreeNode));\n    return this;\n  };\n\n  /**\n   * register a sidebar link to the section above the drawers\n   */\n  registerSidebarLink = (...links: SidebarItem[]) => {\n    this.sidebarItemSlot.register(links);\n  };\n\n  registerDrawers = (...drawer: DrawerType[]) => {\n    this.sidebar.registerDrawer(...drawer);\n    return this;\n  };\n\n  /**\n   * register component filters\n   */\n  registerDrawerComponentFilters = (filters: ComponentFilters) => {\n    this.drawerComponentsFiltersSlot.register(filters);\n  };\n\n  registerDrawerWidgets = (widgets: ReactNode[]) => {\n    this.drawerWidgetSlot.register(widgets);\n  };\n\n  uiRoot(): UIRoot {\n    this.commandBarUI.addSearcher(this.componentSearcher);\n    this.sidebar.registerDrawer(\n      scopeDrawer({\n        treeWidgets: this.sidebarSlot,\n        filtersSlot: this.drawerComponentsFiltersSlot,\n        drawerWidgetSlot: this.drawerWidgetSlot,\n      })\n    );\n    const [setKeyBindHandler] = this.commandBarUI.addCommand({\n      id: 'sidebar.toggle', // TODO - extract to a component!\n      handler: () => {},\n      displayName: 'Toggle component list',\n      keybinding: 'alt+s',\n    });\n    this.setSidebarToggle = setKeyBindHandler;\n\n    return {\n      routes: [\n        {\n          path: '/',\n          children: (\n            <Scope\n              routeSlot={this.routeSlot}\n              menuSlot={this.menuSlot}\n              sidebar={<this.sidebar.render itemSlot={this.sidebarItemSlot} />}\n              scopeUi={this}\n              badgeSlot={this.scopeBadgeSlot}\n              overviewLineSlot={this.overviewSlot}\n              context={this.getContext()}\n              onSidebarTogglerChange={this.setSidebarToggle}\n              cornerSlot={this.cornerSlot}\n            />\n          ),\n        },\n      ],\n    };\n  }\n\n  /** registers available components */\n  setComponents = (components: ComponentModel[]) => {\n    this.componentSearcher.update(components);\n  };\n\n  private menuItems: MenuItem[] = [\n    {\n      category: 'general',\n      title: 'Open command bar',\n      keyChar: 'mod+k',\n      handler: () => this.commandBarUI?.run('command-bar.open'),\n    },\n    {\n      category: 'general',\n      title: 'Toggle component list',\n      keyChar: 'alt+s',\n      handler: () => this.commandBarUI?.run('sidebar.toggle'),\n    },\n  ];\n\n  static dependencies = [UIAspect, ComponentAspect, SidebarAspect, CommandBarAspect, ReactRouterAspect];\n  static runtime = UIRuntime;\n  static slots = [\n    Slot.withType<RouteProps>(),\n    Slot.withType<RouteProps>(),\n    Slot.withType<ComponentTreeNode>(),\n    Slot.withType<ScopeBadge>(),\n    Slot.withType<ScopeOverview>(),\n    Slot.withType<MenuWidget[]>(),\n    Slot.withType<MenuItemSlot>(),\n    Slot.withType<CornerSlot>(),\n    Slot.withType<OverviewLineSlot>(),\n    Slot.withType<SidebarItemSlot>(),\n    Slot.withType<ContextSlot>(),\n    Slot.withType<DrawerWidgetSlot>(),\n    Slot.withType<ComponentFiltersSlot>(),\n  ];\n\n  static async provider(\n    [ui, componentUi, sidebar, commandBarUI, reactRouterUI]: [\n      UiUI,\n      ComponentUI,\n      SidebarUI,\n      CommandBarUI,\n      ReactRouterUI\n    ],\n    config,\n    [\n      routeSlot,\n      menuSlot,\n      sidebarSlot,\n      scopeBadgeSlot,\n      menuWidgetSlot,\n      menuItemSlot,\n      sidebarItemSlot,\n      cornerSlot,\n      overviewSlot,\n      contextSlot,\n      drawerWidgetSlot,\n      componentFiltersSlot,\n    ]: [\n      RouteSlot,\n      RouteSlot,\n      SidebarSlot,\n      ScopeBadgeSlot,\n      MenuWidgetSlot,\n      MenuItemSlot,\n      SidebarItemSlot,\n      CornerSlot,\n      OverviewLineSlot,\n      ContextSlot,\n      DrawerWidgetSlot,\n      ComponentFiltersSlot\n    ]\n  ) {\n    const componentSearcher = new ComponentSearcher(reactRouterUI.navigateTo);\n    const scopeUi = new ScopeUI(\n      routeSlot,\n      componentUi,\n      menuSlot,\n      sidebar,\n      sidebarSlot,\n      commandBarUI,\n      componentSearcher,\n      scopeBadgeSlot,\n      menuWidgetSlot,\n      sidebarItemSlot,\n      menuItemSlot,\n      cornerSlot,\n      overviewSlot,\n      contextSlot,\n      drawerWidgetSlot,\n      componentFiltersSlot\n    );\n    scopeUi.registerDrawerComponentFilters([DeprecateFilter, EnvsFilter]);\n    scopeUi.registerDrawerWidgets([\n      <FilterWidget key={'workspace-filter-widget'} />,\n      <TreeToggleWidget key={'workspace-tree-toggle-widget'} />,\n    ]);\n    ui.registerRoot(scopeUi.uiRoot.bind(scopeUi));\n    scopeUi.registerMenuItem(scopeUi.menuItems);\n    scopeUi.registerMenuWidget(() => <ScopeUseBox />);\n    scopeUi.registerSidebarLink(() => (\n      <MenuLinkItem exact href=\"/\" icon=\"comps\">\n        Gallery\n      </MenuLinkItem>\n    ));\n    scopeUi.registerExplicitRoutes();\n\n    return scopeUi;\n  }\n}\n\nexport default ScopeUI;\n\nScopeAspect.addRuntime(ScopeUI);\n"]}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/scope",
-  "version": "0.0.685",
+  "version": "0.0.686",
   "homepage": "https://bit.dev/teambit/scope/scope",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.scope",
     "name": "scope",
-    "version": "0.0.685"
+    "version": "0.0.686"
   },
   "dependencies": {
     "semver": "7.3.4",
@@ -24,45 +24,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/base-ui.graph.tree.recursive-tree": "1.0.0",
-    "@teambit/design.ui.input.toggle": "1.0.12",
-    "@teambit/scope.models.scope-model": "0.0.113",
-    "@teambit/scope.ui.hooks.scope-context": "0.0.113",
-    "@teambit/component": "0.0.685",
-    "@teambit/logger": "0.0.551",
-    "@teambit/aspect-loader": "0.0.685",
-    "@teambit/builder": "0.0.685",
-    "@teambit/cli": "0.0.459",
-    "@teambit/compiler": "0.0.685",
-    "@teambit/config": "0.0.472",
-    "@teambit/envs": "0.0.685",
-    "@teambit/express": "0.0.555",
-    "@teambit/graphql": "0.0.685",
+    "@teambit/scope.models.scope-model": "0.0.114",
+    "@teambit/scope.ui.hooks.scope-context": "0.0.114",
+    "@teambit/component": "0.0.686",
+    "@teambit/logger": "0.0.552",
+    "@teambit/aspect-loader": "0.0.686",
+    "@teambit/builder": "0.0.686",
+    "@teambit/cli": "0.0.460",
+    "@teambit/compiler": "0.0.686",
+    "@teambit/config": "0.0.473",
+    "@teambit/envs": "0.0.686",
+    "@teambit/express": "0.0.556",
+    "@teambit/graphql": "0.0.686",
     "@teambit/harmony.modules.requireable-component": "0.0.484",
-    "@teambit/isolator": "0.0.685",
+    "@teambit/isolator": "0.0.686",
     "@teambit/legacy-bit-id": "0.0.399",
-    "@teambit/ui": "0.0.685",
+    "@teambit/ui": "0.0.686",
     "@teambit/workspace.modules.match-pattern": "0.0.489",
-    "@teambit/command-bar": "0.0.685",
-    "@teambit/component-tree": "0.0.473",
+    "@teambit/component.ui.component-drawer": "0.0.1",
+    "@teambit/design.ui.tree": "0.0.5",
+    "@teambit/ui-foundation.ui.side-bar": "0.0.520",
+    "@teambit/command-bar": "0.0.686",
+    "@teambit/component-tree": "0.0.474",
+    "@teambit/component.ui.component-filters": "0.0.1",
     "@teambit/design.ui.surfaces.menu.link-item": "0.0.379",
-    "@teambit/react-router": "0.0.685",
-    "@teambit/sidebar": "0.0.685",
+    "@teambit/react-router": "0.0.686",
+    "@teambit/sidebar": "0.0.686",
     "@teambit/ui-foundation.ui.main-dropdown": "0.0.486",
     "@teambit/ui-foundation.ui.menu": "0.0.486",
     "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.488",
-    "@teambit/ui-foundation.ui.tree.drawer": "0.0.496",
+    "@teambit/ui-foundation.ui.tree.drawer": "0.0.497",
     "@teambit/bit-error": "0.0.394",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.487",
-    "@teambit/scope.ui.hooks.use-scope": "0.0.116",
+    "@teambit/scope.ui.hooks.use-scope": "0.0.117",
     "@teambit/ui-foundation.ui.buttons.collapser": "0.0.194",
     "@teambit/ui-foundation.ui.corner": "0.0.494",
     "@teambit/ui-foundation.ui.full-loader": "0.0.486",
     "@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.179",
     "@teambit/ui-foundation.ui.top-bar": "0.0.489",
-    "@teambit/design.ui.styles.ellipsis": "0.0.347",
-    "@teambit/design.ui.styles.muted-italic": "0.0.35",
-    "@teambit/ui-foundation.ui.side-bar": "0.0.519",
     "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.114",
     "@teambit/ui-foundation.ui.use-box.scope-menu": "0.0.114",
     "@teambit/explorer.ui.gallery.component-card": "0.0.494",
@@ -87,7 +86,7 @@
     "@teambit/scope.content.scope-overview": "1.95.0"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.238",
+    "@teambit/legacy": "1.0.239",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -115,7 +114,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.238",
+        "@teambit/legacy": "1.0.239",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/{preview-1648006106088.js → preview-1648092203429.js}

@@ -1,2 +1,2 @@
-export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.scope_scope@0.0.685/dist/scope.composition.js')]
-export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.scope_scope@0.0.685/dist/scope.docs.mdx')]
+export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.scope_scope@0.0.686/dist/scope.composition.js')]
+export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.scope_scope@0.0.686/dist/scope.docs.mdx')]

package/scope.ui.drawer.tsx

@@ -0,0 +1,56 @@
+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 { SidebarSlot } from './scope.ui.runtime';
+
+export type ScopeDrawerProps = {
+  treeWidgets: SidebarSlot;
+  filtersSlot: ComponentFiltersSlot;
+  drawerWidgetSlot: DrawerWidgetSlot;
+};
+
+export const scopeDrawer = ({ treeWidgets, filtersSlot, drawerWidgetSlot }: ScopeDrawerProps) => {
+  const customScopeTreeNodeRenderer = (treeNodeSlot) =>
+    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) => (
+              <TreeNode key={childNode.id} {...props} node={childNode}></TreeNode>
+            ))}
+          </>
+        );
+      }
+
+      return <NamespaceTreeNode {...props} />;
+    };
+
+  return new ComponentsDrawer({
+    order: 0,
+    id: 'scope-components-drawer',
+    name: 'COMPONENTS',
+    plugins: {
+      tree: {
+        widgets: treeWidgets,
+        customRenderer: customScopeTreeNodeRenderer,
+      },
+      filters: filtersSlot,
+      drawerWidgets: drawerWidgetSlot,
+    },
+    emptyMessage: 'Scope is empty',
+    useComponents: () => {
+      const scope = useContext(ScopeContext);
+      return {
+        loading: !scope,
+        components: scope.components || [],
+      };
+    },
+  });
+};

package/scope.ui.runtime.tsx

@@ -15,10 +15,18 @@ 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 { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';
+import {
+  DrawerWidgetSlot,
+  FilterWidget,
+  TreeToggleWidget,
+  ComponentFiltersSlot,
+} from '@teambit/component.ui.component-drawer';
+import { ComponentFilters, DeprecateFilter, EnvsFilter } from '@teambit/component.ui.component-filters';
+
 import { ScopeMenu, ScopeUseBox } from './ui/menu';
 import { ScopeAspect } from './scope.aspect';
 import { Scope } from './ui/scope';
-import { ComponentsDrawer } from './ui/components-drawer';
+import { scopeDrawer } from './scope.ui.drawer';
 
 export type ScopeBadge = ComponentType;
 
@@ -93,7 +101,9 @@ export class ScopeUI {
     /**
      * add a new context to ui
      */
-    private contextSlot: ContextSlot
+    private contextSlot: ContextSlot,
+    private drawerWidgetSlot: DrawerWidgetSlot,
+    private drawerComponentsFiltersSlot: ComponentFiltersSlot
   ) {}
 
   private setSidebarToggle: (updated: CommandHandler) => void = () => {};
@@ -219,9 +229,26 @@ export class ScopeUI {
     return this;
   };
 
+  /**
+   * register component filters
+   */
+  registerDrawerComponentFilters = (filters: ComponentFilters) => {
+    this.drawerComponentsFiltersSlot.register(filters);
+  };
+
+  registerDrawerWidgets = (widgets: ReactNode[]) => {
+    this.drawerWidgetSlot.register(widgets);
+  };
+
   uiRoot(): UIRoot {
     this.commandBarUI.addSearcher(this.componentSearcher);
-    this.sidebar.registerDrawer(new ComponentsDrawer(this.sidebarSlot));
+    this.sidebar.registerDrawer(
+      scopeDrawer({
+        treeWidgets: this.sidebarSlot,
+        filtersSlot: this.drawerComponentsFiltersSlot,
+        drawerWidgetSlot: this.drawerWidgetSlot,
+      })
+    );
     const [setKeyBindHandler] = this.commandBarUI.addCommand({
       id: 'sidebar.toggle', // TODO - extract to a component!
       handler: () => {},
@@ -286,6 +313,8 @@ export class ScopeUI {
     Slot.withType<OverviewLineSlot>(),
     Slot.withType<SidebarItemSlot>(),
     Slot.withType<ContextSlot>(),
+    Slot.withType<DrawerWidgetSlot>(),
+    Slot.withType<ComponentFiltersSlot>(),
   ];
 
   static async provider(
@@ -308,6 +337,8 @@ export class ScopeUI {
       cornerSlot,
       overviewSlot,
       contextSlot,
+      drawerWidgetSlot,
+      componentFiltersSlot,
     ]: [
       RouteSlot,
       RouteSlot,
@@ -318,7 +349,9 @@ export class ScopeUI {
       SidebarItemSlot,
       CornerSlot,
       OverviewLineSlot,
-      ContextSlot
+      ContextSlot,
+      DrawerWidgetSlot,
+      ComponentFiltersSlot
     ]
   ) {
     const componentSearcher = new ComponentSearcher(reactRouterUI.navigateTo);
@@ -336,8 +369,15 @@ export class ScopeUI {
       menuItemSlot,
       cornerSlot,
       overviewSlot,
-      contextSlot
+      contextSlot,
+      drawerWidgetSlot,
+      componentFiltersSlot
     );
+    scopeUi.registerDrawerComponentFilters([DeprecateFilter, EnvsFilter]);
+    scopeUi.registerDrawerWidgets([
+      <FilterWidget key={'workspace-filter-widget'} />,
+      <TreeToggleWidget key={'workspace-tree-toggle-widget'} />,
+    ]);
     ui.registerRoot(scopeUi.uiRoot.bind(scopeUi));
     scopeUi.registerMenuItem(scopeUi.menuItems);
     scopeUi.registerMenuWidget(() => <ScopeUseBox />);

package/dist/ui/components-drawer/components-drawer.module.scss

@@ -1,51 +0,0 @@
-.emptyScope {
-  padding: 8px 8px 0 28px;
-  display: block;
-}
-
-.widgetIcon {
-  padding: 4px;
-  border-radius: 8px;
-  align-items: center;
-  display: flex;
-  &:hover,
-  &.open {
-    background-color: var(--bit-border-color-lightest, #ededed);
-  }
-  img {
-    width: 16px;
-  }
-  &:active img,
-  &.open img {
-    filter: invert(38%) sepia(33%) saturate(7140%) hue-rotate(234deg) brightness(96%) contrast(87%);
-  }
-}
-
-.filterWidgetIcon {
-  margin-right: 8px;
-}
-
-.deprecateFilter {
-  display: flex;
-  flex-direction: row;
-  font-size: 14px;
-  justify-content: space-between;
-  padding: 8px;
-  margin: 4px 8px;
-
-  > div {
-    line-height: 16px;
-    display: flex;
-  }
-
-  .filterIcon {
-    img {
-      width: 16px;
-    }
-
-    .filterIconLabel {
-      margin: 0px 8px;
-      font-size: 14px;
-    }
-  }
-}

package/dist/ui/components-drawer/components.drawer.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-import { ComponentTreeSlot } from '@teambit/component-tree';
-import type { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';
-export declare class ComponentsDrawer implements DrawerType {
-    private treeNodeSlot;
-    constructor(treeNodeSlot: ComponentTreeSlot);
-    id: string;
-    name: string;
-    widgets: JSX.Element[];
-    Filters: JSX.Element[];
-    Context: ({ children }: {
-        children: any;
-    }) => JSX.Element;
-    render: () => JSX.Element;
-}

package/dist/ui/components-drawer/components.drawer.js

@@ -1,275 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-require("core-js/modules/es.array.iterator.js");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ComponentsDrawer = void 0;
-
-function _extends2() {
-  const data = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-  _extends2 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _defineProperty2() {
-  const data = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-  _defineProperty2 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _react() {
-  const data = _interopRequireWildcard(require("react"));
-
-  _react = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _classnames() {
-  const data = _interopRequireDefault(require("classnames"));
-
-  _classnames = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _uiFoundationUi() {
-  const data = require("@teambit/ui-foundation.ui.side-bar");
-
-  _uiFoundationUi = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _uiFoundationUi2() {
-  const data = require("@teambit/ui-foundation.ui.full-loader");
-
-  _uiFoundationUi2 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _designUiStyles() {
-  const data = require("@teambit/design.ui.styles.muted-italic");
-
-  _designUiStyles = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _designUiStyles2() {
-  const data = require("@teambit/design.ui.styles.ellipsis");
-
-  _designUiStyles2 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _designUiInput() {
-  const data = require("@teambit/design.ui.input.toggle");
-
-  _designUiInput = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _scopeUiHooks() {
-  const data = require("@teambit/scope.ui.hooks.use-scope");
-
-  _scopeUiHooks = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _componentsDrawerModule() {
-  const data = _interopRequireDefault(require("./components-drawer.module.scss"));
-
-  _componentsDrawerModule = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const ScopeTreeContext = /*#__PURE__*/(0, _react().createContext)({
-  collapsed: true,
-  setCollapsed: () => {},
-  activeFilters: [],
-  setActiveFilter: () => {},
-  filterOpen: false,
-  setFilterOpen: () => {}
-});
-
-class ComponentsDrawer {
-  constructor(treeNodeSlot) {
-    this.treeNodeSlot = treeNodeSlot;
-    (0, _defineProperty2().default)(this, "id", 'components-drawer');
-    (0, _defineProperty2().default)(this, "name", 'COMPONENTS');
-    (0, _defineProperty2().default)(this, "widgets", [/*#__PURE__*/_react().default.createElement(FilterWidget, {
-      key: 'filter-widget'
-    }), /*#__PURE__*/_react().default.createElement(TreeToggleWidget, {
-      key: 'tree-toggle-widget'
-    })]);
-    (0, _defineProperty2().default)(this, "Filters", [/*#__PURE__*/_react().default.createElement(DeprecateFilter, {
-      key: 'deprecate-filter'
-    })]);
-    (0, _defineProperty2().default)(this, "Context", ({
-      children
-    }) => {
-      const [collapsed, setCollapsed] = (0, _react().useState)(true);
-      const [activeFilters, setActiveFilters] = (0, _react().useState)([]);
-      const [filterOpen, setFilterOpen] = (0, _react().useState)(false);
-
-      const handleActiveFilterToggle = filterId => {
-        const isFilterActive = activeFilters.includes(filterId);
-
-        if (isFilterActive) {
-          setActiveFilters(list => list.filter(id => id !== filterId));
-          return;
-        }
-
-        setActiveFilters(list => list.concat(filterId));
-      };
-
-      return /*#__PURE__*/_react().default.createElement(ScopeTreeContext.Provider, {
-        value: {
-          collapsed,
-          setCollapsed,
-          activeFilters,
-          setActiveFilter: handleActiveFilterToggle,
-          filterOpen,
-          setFilterOpen
-        }
-      }, children);
-    });
-    (0, _defineProperty2().default)(this, "render", () => {
-      const {
-        scope
-      } = (0, _scopeUiHooks().useScopeQuery)();
-      const {
-        collapsed,
-        activeFilters
-      } = (0, _react().useContext)(ScopeTreeContext);
-      const {
-        treeNodeSlot
-      } = this;
-      const showDeprecatedComponents = activeFilters.find(activeFilter => activeFilter === 'deprecate');
-      const TreeNodeRenderer = (0, _react().useCallback)(function TreeNode(props) {
-        const children = props.node.children;
-        if (!children) return /*#__PURE__*/_react().default.createElement(_uiFoundationUi().ComponentView, (0, _extends2().default)({}, props, {
-          treeNodeSlot: treeNodeSlot
-        })); // skip over scope node and render only children
-
-        if (props.node.payload instanceof _uiFoundationUi().ScopePayload) {
-          return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, children.map(childNode => /*#__PURE__*/_react().default.createElement(TreeNodeRenderer, (0, _extends2().default)({
-            key: childNode.id
-          }, props, {
-            node: childNode
-          }))));
-        }
-
-        return /*#__PURE__*/_react().default.createElement(_uiFoundationUi().NamespaceTreeNode, props);
-      }, [treeNodeSlot]);
-      if (!scope) return /*#__PURE__*/_react().default.createElement(_uiFoundationUi2().FullLoader, null);
-      const components = showDeprecatedComponents ? scope.components : scope.components.filter(component => {
-        var _component$deprecatio;
-
-        return !((_component$deprecatio = component.deprecation) !== null && _component$deprecatio !== void 0 && _component$deprecatio.isDeprecate);
-      });
-      if (components.length === 0) return /*#__PURE__*/_react().default.createElement("span", {
-        className: (0, _classnames().default)(_designUiStyles().mutedItalic, _designUiStyles2().ellipsis, _componentsDrawerModule().default.emptyScope)
-      }, "Scope is empty");
-      return /*#__PURE__*/_react().default.createElement(_uiFoundationUi().ComponentTree, {
-        components: components,
-        isCollapsed: collapsed,
-        TreeNode: TreeNodeRenderer
-      });
-    });
-  }
-
-}
-
-exports.ComponentsDrawer = ComponentsDrawer;
-
-function TreeToggleWidget() {
-  const {
-    collapsed,
-    setCollapsed
-  } = (0, _react().useContext)(ScopeTreeContext);
-  const icon = collapsed ? 'https://static.bit.dev/bit-icons/expand.svg' : 'https://static.bit.dev/bit-icons/collapse.svg';
-  return /*#__PURE__*/_react().default.createElement("div", {
-    className: _componentsDrawerModule().default.widgetIcon
-  }, /*#__PURE__*/_react().default.createElement("img", {
-    src: icon,
-    onClick: () => setCollapsed(!collapsed)
-  }));
-}
-
-function FilterWidget() {
-  const {
-    filterOpen,
-    setFilterOpen
-  } = (0, _react().useContext)(ScopeTreeContext);
-  return /*#__PURE__*/_react().default.createElement("div", {
-    className: (0, _classnames().default)(_componentsDrawerModule().default.widgetIcon, _componentsDrawerModule().default.filterWidgetIcon, filterOpen && _componentsDrawerModule().default.open)
-  }, /*#__PURE__*/_react().default.createElement("img", {
-    src: "https://static.bit.dev/bit-icons/filter.svg",
-    onClick: () => setFilterOpen(!filterOpen)
-  }));
-}
-
-function DeprecateFilter() {
-  const {
-    activeFilters,
-    setActiveFilter,
-    filterOpen
-  } = (0, _react().useContext)(ScopeTreeContext);
-  const isActive = activeFilters.includes('deprecate');
-  if (!filterOpen) return null;
-  return /*#__PURE__*/_react().default.createElement("div", {
-    className: (0, _classnames().default)(_componentsDrawerModule().default.deprecateFilter, isActive && _componentsDrawerModule().default.active)
-  }, /*#__PURE__*/_react().default.createElement("div", {
-    className: _componentsDrawerModule().default.filterIcon
-  }, /*#__PURE__*/_react().default.createElement("img", {
-    src: "https://static.bit.dev/bit-icons/deprecated.svg"
-  }), /*#__PURE__*/_react().default.createElement("span", {
-    className: _componentsDrawerModule().default.filterIconLabel
-  }, "Deprecated")), /*#__PURE__*/_react().default.createElement("div", null, /*#__PURE__*/_react().default.createElement(_designUiInput().Toggle, {
-    checked: isActive,
-    onInputChanged: () => setActiveFilter('deprecate')
-  })));
-}
-
-//# sourceMappingURL=components.drawer.js.map

package/dist/ui/components-drawer/components.drawer.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["components.drawer.tsx"],"names":["ScopeTreeContext","collapsed","setCollapsed","activeFilters","setActiveFilter","filterOpen","setFilterOpen","ComponentsDrawer","constructor","treeNodeSlot","children","setActiveFilters","handleActiveFilterToggle","filterId","isFilterActive","includes","list","filter","id","concat","scope","showDeprecatedComponents","find","activeFilter","TreeNodeRenderer","TreeNode","props","node","payload","ScopePayload","map","childNode","components","component","deprecation","isDeprecate","length","mutedItalic","ellipsis","styles","emptyScope","TreeToggleWidget","icon","widgetIcon","FilterWidget","filterWidgetIcon","open","DeprecateFilter","isActive","deprecateFilter","active","filterIcon","filterIconLabel"],"mappings":"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","sourcesContent":["import React, { useCallback, useState, useContext, createContext } from 'react';\nimport classNames from 'classnames';\nimport {\n  ComponentTree,\n  ComponentView,\n  NamespaceTreeNode,\n  PayloadType,\n  ScopePayload,\n} from '@teambit/ui-foundation.ui.side-bar';\nimport { TreeNodeProps } from '@teambit/base-ui.graph.tree.recursive-tree';\nimport { FullLoader } from '@teambit/ui-foundation.ui.full-loader';\nimport { ComponentTreeSlot } from '@teambit/component-tree';\nimport type { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';\nimport { mutedItalic } from '@teambit/design.ui.styles.muted-italic';\nimport { ellipsis } from '@teambit/design.ui.styles.ellipsis';\nimport { Toggle } from '@teambit/design.ui.input.toggle';\nimport { useScopeQuery } from '@teambit/scope.ui.hooks.use-scope';\nimport styles from './components-drawer.module.scss';\n\ntype ScopeTreeContextType = {\n  collapsed: boolean;\n  setCollapsed: (x: boolean) => void;\n  filterOpen: boolean;\n  setFilterOpen: (open: boolean) => void;\n  activeFilters: string[];\n  setActiveFilter: (filterId: string) => void;\n};\n\nconst ScopeTreeContext = createContext<ScopeTreeContextType>({\n  collapsed: true,\n  setCollapsed: () => {},\n  activeFilters: [],\n  setActiveFilter: () => {},\n  filterOpen: false,\n  setFilterOpen: () => {},\n});\n\nexport class ComponentsDrawer implements DrawerType {\n  constructor(private treeNodeSlot: ComponentTreeSlot) {}\n\n  id = 'components-drawer';\n\n  name = 'COMPONENTS';\n\n  widgets = [<FilterWidget key={'filter-widget'} />, <TreeToggleWidget key={'tree-toggle-widget'} />];\n  Filters = [<DeprecateFilter key={'deprecate-filter'} />];\n\n  Context = ({ children }) => {\n    const [collapsed, setCollapsed] = useState(true);\n    const [activeFilters, setActiveFilters] = useState<string[]>([]);\n    const [filterOpen, setFilterOpen] = useState<boolean>(false);\n\n    const handleActiveFilterToggle = (filterId: string) => {\n      const isFilterActive = activeFilters.includes(filterId);\n      if (isFilterActive) {\n        setActiveFilters((list) => list.filter((id) => id !== filterId));\n        return;\n      }\n      setActiveFilters((list) => list.concat(filterId));\n    };\n    return (\n      <ScopeTreeContext.Provider\n        value={{\n          collapsed,\n          setCollapsed,\n          activeFilters,\n          setActiveFilter: handleActiveFilterToggle,\n          filterOpen,\n          setFilterOpen,\n        }}\n      >\n        {children}\n      </ScopeTreeContext.Provider>\n    );\n  };\n\n  render = () => {\n    const { scope } = useScopeQuery();\n    const { collapsed, activeFilters } = useContext(ScopeTreeContext);\n    const { treeNodeSlot } = this;\n    const showDeprecatedComponents = activeFilters.find((activeFilter) => activeFilter === 'deprecate');\n\n    const TreeNodeRenderer = useCallback(\n      function TreeNode(props: TreeNodeProps<PayloadType>) {\n        const children = props.node.children;\n\n        if (!children) return <ComponentView {...props} treeNodeSlot={treeNodeSlot} />;\n\n        // skip over scope node and render only children\n        if (props.node.payload instanceof ScopePayload) {\n          return (\n            <>\n              {children.map((childNode) => (\n                <TreeNodeRenderer key={childNode.id} {...props} node={childNode}></TreeNodeRenderer>\n              ))}\n            </>\n          );\n        }\n\n        return <NamespaceTreeNode {...props} />;\n      },\n      [treeNodeSlot]\n    );\n\n    if (!scope) return <FullLoader />;\n\n    const components = showDeprecatedComponents\n      ? scope.components\n      : scope.components.filter((component) => !component.deprecation?.isDeprecate);\n\n    if (components.length === 0)\n      return <span className={classNames(mutedItalic, ellipsis, styles.emptyScope)}>Scope is empty</span>;\n\n    return <ComponentTree components={components} isCollapsed={collapsed} TreeNode={TreeNodeRenderer} />;\n  };\n}\n\nfunction TreeToggleWidget() {\n  const { collapsed, setCollapsed } = useContext(ScopeTreeContext);\n  const icon = collapsed\n    ? 'https://static.bit.dev/bit-icons/expand.svg'\n    : 'https://static.bit.dev/bit-icons/collapse.svg';\n  return (\n    <div className={styles.widgetIcon}>\n      <img src={icon} onClick={() => setCollapsed(!collapsed)} />\n    </div>\n  );\n}\n\nfunction FilterWidget() {\n  const { filterOpen, setFilterOpen } = useContext(ScopeTreeContext);\n  return (\n    <div className={classNames(styles.widgetIcon, styles.filterWidgetIcon, filterOpen && styles.open)}>\n      <img src=\"https://static.bit.dev/bit-icons/filter.svg\" onClick={() => setFilterOpen(!filterOpen)} />\n    </div>\n  );\n}\n\nfunction DeprecateFilter() {\n  const { activeFilters, setActiveFilter, filterOpen } = useContext(ScopeTreeContext);\n  const isActive = activeFilters.includes('deprecate');\n\n  if (!filterOpen) return null;\n\n  return (\n    <div className={classNames(styles.deprecateFilter, isActive && styles.active)}>\n      <div className={styles.filterIcon}>\n        <img src=\"https://static.bit.dev/bit-icons/deprecated.svg\" />\n        <span className={styles.filterIconLabel}>Deprecated</span>\n      </div>\n      <div>\n        <Toggle checked={isActive} onInputChanged={() => setActiveFilter('deprecate')} />\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/ui/components-drawer/index.d.ts

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

package/dist/ui/components-drawer/index.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ComponentsDrawer", {
-  enumerable: true,
-  get: function () {
-    return _components().ComponentsDrawer;
-  }
-});
-
-function _components() {
-  const data = require("./components.drawer");
-
-  _components = function () {
-    return data;
-  };
-
-  return data;
-}
-
-//# sourceMappingURL=index.js.map

package/dist/ui/components-drawer/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA","sourcesContent":["export { ComponentsDrawer } from './components.drawer';\n"]}

package/ui/components-drawer/components-drawer.module.scss

@@ -1,51 +0,0 @@
-.emptyScope {
-  padding: 8px 8px 0 28px;
-  display: block;
-}
-
-.widgetIcon {
-  padding: 4px;
-  border-radius: 8px;
-  align-items: center;
-  display: flex;
-  &:hover,
-  &.open {
-    background-color: var(--bit-border-color-lightest, #ededed);
-  }
-  img {
-    width: 16px;
-  }
-  &:active img,
-  &.open img {
-    filter: invert(38%) sepia(33%) saturate(7140%) hue-rotate(234deg) brightness(96%) contrast(87%);
-  }
-}
-
-.filterWidgetIcon {
-  margin-right: 8px;
-}
-
-.deprecateFilter {
-  display: flex;
-  flex-direction: row;
-  font-size: 14px;
-  justify-content: space-between;
-  padding: 8px;
-  margin: 4px 8px;
-
-  > div {
-    line-height: 16px;
-    display: flex;
-  }
-
-  .filterIcon {
-    img {
-      width: 16px;
-    }
-
-    .filterIconLabel {
-      margin: 0px 8px;
-      font-size: 14px;
-    }
-  }
-}

package/ui/components-drawer/components.drawer.tsx

@@ -1,156 +0,0 @@
-import React, { useCallback, useState, useContext, createContext } 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 { Toggle } from '@teambit/design.ui.input.toggle';
-import { useScopeQuery } from '@teambit/scope.ui.hooks.use-scope';
-import styles from './components-drawer.module.scss';
-
-type ScopeTreeContextType = {
-  collapsed: boolean;
-  setCollapsed: (x: boolean) => void;
-  filterOpen: boolean;
-  setFilterOpen: (open: boolean) => void;
-  activeFilters: string[];
-  setActiveFilter: (filterId: string) => void;
-};
-
-const ScopeTreeContext = createContext<ScopeTreeContextType>({
-  collapsed: true,
-  setCollapsed: () => {},
-  activeFilters: [],
-  setActiveFilter: () => {},
-  filterOpen: false,
-  setFilterOpen: () => {},
-});
-
-export class ComponentsDrawer implements DrawerType {
-  constructor(private treeNodeSlot: ComponentTreeSlot) {}
-
-  id = 'components-drawer';
-
-  name = 'COMPONENTS';
-
-  widgets = [<FilterWidget key={'filter-widget'} />, <TreeToggleWidget key={'tree-toggle-widget'} />];
-  Filters = [<DeprecateFilter key={'deprecate-filter'} />];
-
-  Context = ({ children }) => {
-    const [collapsed, setCollapsed] = useState(true);
-    const [activeFilters, setActiveFilters] = useState<string[]>([]);
-    const [filterOpen, setFilterOpen] = useState<boolean>(false);
-
-    const handleActiveFilterToggle = (filterId: string) => {
-      const isFilterActive = activeFilters.includes(filterId);
-      if (isFilterActive) {
-        setActiveFilters((list) => list.filter((id) => id !== filterId));
-        return;
-      }
-      setActiveFilters((list) => list.concat(filterId));
-    };
-    return (
-      <ScopeTreeContext.Provider
-        value={{
-          collapsed,
-          setCollapsed,
-          activeFilters,
-          setActiveFilter: handleActiveFilterToggle,
-          filterOpen,
-          setFilterOpen,
-        }}
-      >
-        {children}
-      </ScopeTreeContext.Provider>
-    );
-  };
-
-  render = () => {
-    const { scope } = useScopeQuery();
-    const { collapsed, activeFilters } = useContext(ScopeTreeContext);
-    const { treeNodeSlot } = this;
-    const showDeprecatedComponents = activeFilters.find((activeFilter) => activeFilter === 'deprecate');
-
-    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 />;
-
-    const components = showDeprecatedComponents
-      ? scope.components
-      : scope.components.filter((component) => !component.deprecation?.isDeprecate);
-
-    if (components.length === 0)
-      return <span className={classNames(mutedItalic, ellipsis, styles.emptyScope)}>Scope is empty</span>;
-
-    return <ComponentTree components={components} isCollapsed={collapsed} TreeNode={TreeNodeRenderer} />;
-  };
-}
-
-function TreeToggleWidget() {
-  const { collapsed, setCollapsed } = useContext(ScopeTreeContext);
-  const icon = collapsed
-    ? 'https://static.bit.dev/bit-icons/expand.svg'
-    : 'https://static.bit.dev/bit-icons/collapse.svg';
-  return (
-    <div className={styles.widgetIcon}>
-      <img src={icon} onClick={() => setCollapsed(!collapsed)} />
-    </div>
-  );
-}
-
-function FilterWidget() {
-  const { filterOpen, setFilterOpen } = useContext(ScopeTreeContext);
-  return (
-    <div className={classNames(styles.widgetIcon, styles.filterWidgetIcon, filterOpen && styles.open)}>
-      <img src="https://static.bit.dev/bit-icons/filter.svg" onClick={() => setFilterOpen(!filterOpen)} />
-    </div>
-  );
-}
-
-function DeprecateFilter() {
-  const { activeFilters, setActiveFilter, filterOpen } = useContext(ScopeTreeContext);
-  const isActive = activeFilters.includes('deprecate');
-
-  if (!filterOpen) return null;
-
-  return (
-    <div className={classNames(styles.deprecateFilter, isActive && styles.active)}>
-      <div className={styles.filterIcon}>
-        <img src="https://static.bit.dev/bit-icons/deprecated.svg" />
-        <span className={styles.filterIconLabel}>Deprecated</span>
-      </div>
-      <div>
-        <Toggle checked={isActive} onInputChanged={() => setActiveFilter('deprecate')} />
-      </div>
-    </div>
-  );
-}

package/ui/components-drawer/index.ts

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