@teambit/scope 0.0.670 → 0.0.673

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

@@ -6,3 +6,36 @@
 .collapseIcon {
   width: 16px;
 }
+
+.deprecateFilter {
+  display: flex;
+  flex-direction: row;
+  font-size: 14px;
+  justify-content: space-between;
+  padding: 8px;
+  margin: 4px 8px;
+
+  .filterIcon {
+    line-height: 16px;
+    display: flex;
+
+    .filterIconLabel {
+      margin: 0px 8px;
+      font-size: 12px;
+    }
+  }
+}
+
+.filterWidgetIcon {
+  margin-right: 12px;
+  padding: 4px;
+
+  &:hover {
+    background: white;
+  }
+
+  &.open {
+    color: var(--bit-accent-color, #6c5ce7);
+    background-color: var(--bit-bg-heavy, #f6f6f6);
+  }
+}

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

@@ -6,7 +6,8 @@ export declare class ComponentsDrawer implements DrawerType {
     constructor(treeNodeSlot: ComponentTreeSlot);
     id: string;
     name: string;
-    widget: JSX.Element;
+    widgets: JSX.Element[];
+    Filters: JSX.Element[];
     Context: ({ children }: {
         children: any;
     }) => JSX.Element;

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

@@ -59,6 +59,16 @@ function _uiFoundationUi() {
   return data;
 }
 
+function _evangelistElements() {
+  const data = require("@teambit/evangelist.elements.icon");
+
+  _evangelistElements = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _uiFoundationUi2() {
   const data = require("@teambit/ui-foundation.ui.full-loader");
 
@@ -89,6 +99,16 @@ function _designUiStyles2() {
   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");
 
@@ -115,7 +135,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const ScopeTreeContext = /*#__PURE__*/(0, _react().createContext)({
   collapsed: true,
-  setCollapsed: () => {}
+  setCollapsed: () => {},
+  activeFilters: [],
+  setActiveFilter: () => {},
+  filterOpen: false,
+  setFilterOpen: () => {}
 });
 
 class ComponentsDrawer {
@@ -123,15 +147,40 @@ class ComponentsDrawer {
     this.treeNodeSlot = treeNodeSlot;
     (0, _defineProperty2().default)(this, "id", 'components-drawer');
     (0, _defineProperty2().default)(this, "name", 'COMPONENTS');
-    (0, _defineProperty2().default)(this, "widget", /*#__PURE__*/_react().default.createElement(Widget, null));
+    (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
+          setCollapsed,
+          activeFilters,
+          setActiveFilter: handleActiveFilterToggle,
+          filterOpen,
+          setFilterOpen
         }
       }, children);
     });
@@ -140,11 +189,13 @@ class ComponentsDrawer {
         scope
       } = (0, _scopeUiHooks().useScopeQuery)();
       const {
-        collapsed
+        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, {
@@ -162,11 +213,16 @@ class ComponentsDrawer {
         return /*#__PURE__*/_react().default.createElement(_uiFoundationUi().NamespaceTreeNode, props);
       }, [treeNodeSlot]);
       if (!scope) return /*#__PURE__*/_react().default.createElement(_uiFoundationUi2().FullLoader, null);
-      if (scope.components.length === 0) return /*#__PURE__*/_react().default.createElement("span", {
+      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: scope.components,
+        components: components,
         isCollapsed: collapsed,
         TreeNode: TreeNodeRenderer
       });
@@ -177,7 +233,7 @@ class ComponentsDrawer {
 
 exports.ComponentsDrawer = ComponentsDrawer;
 
-function Widget() {
+function TreeToggleWidget() {
   const {
     collapsed,
     setCollapsed
@@ -190,4 +246,38 @@ function Widget() {
   });
 }
 
+function FilterWidget() {
+  const {
+    filterOpen,
+    setFilterOpen
+  } = (0, _react().useContext)(ScopeTreeContext);
+  return /*#__PURE__*/_react().default.createElement(_evangelistElements().Icon, {
+    className: (0, _classnames().default)(_componentsDrawerModule().default.filterWidgetIcon, filterOpen && _componentsDrawerModule().default.open),
+    of: "Ripple_filters",
+    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(_evangelistElements().Icon, {
+    of: "note-deprecated"
+  }), /*#__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 +1 @@
-{"version":3,"sources":["components.drawer.tsx"],"names":["ScopeTreeContext","collapsed","setCollapsed","ComponentsDrawer","constructor","treeNodeSlot","children","scope","TreeNodeRenderer","TreeNode","props","node","payload","ScopePayload","map","childNode","id","components","length","mutedItalic","ellipsis","styles","emptyScope","Widget","icon","collapseIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AASA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAGA;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;;;;;;AAEA,MAAMA,gBAAgB,gBAAG,4BAA0E;AACjGC,EAAAA,SAAS,EAAE,IADsF;AAEjGC,EAAAA,YAAY,EAAE,MAAM,CAAE;AAF2E,CAA1E,CAAzB;;AAKO,MAAMC,gBAAN,CAA6C;AAClDC,EAAAA,WAAW,CAASC,YAAT,EAA0C;AAAA,SAAjCA,YAAiC,GAAjCA,YAAiC;AAAA,gDAEhD,mBAFgD;AAAA,kDAI9C,YAJ8C;AAAA,iEAM3C,+BAAC,MAAD,OAN2C;AAAA,qDAQ3C,CAAC;AAAEC,MAAAA;AAAF,KAAD,KAAkB;AAC1B,YAAM,CAACL,SAAD,EAAYC,YAAZ,IAA4B,uBAAS,IAAT,CAAlC;AACA,0BAAO,+BAAC,gBAAD,CAAkB,QAAlB;AAA2B,QAAA,KAAK,EAAE;AAAED,UAAAA,SAAF;AAAaC,UAAAA;AAAb;AAAlC,SAAgEI,QAAhE,CAAP;AACD,KAXoD;AAAA,oDAa5C,MAAM;AACb,YAAM;AAAEC,QAAAA;AAAF,UAAY,oCAAlB;AACA,YAAM;AAAEN,QAAAA;AAAF,UAAgB,yBAAWD,gBAAX,CAAtB;AACA,YAAM;AAAEK,QAAAA;AAAF,UAAmB,IAAzB;AAEA,YAAMG,gBAAgB,GAAG,0BACvB,SAASC,QAAT,CAAkBC,KAAlB,EAAqD;AACnD,cAAMJ,QAAQ,GAAGI,KAAK,CAACC,IAAN,CAAWL,QAA5B;AAEA,YAAI,CAACA,QAAL,EAAe,oBAAO,+BAAC,+BAAD,+BAAmBI,KAAnB;AAA0B,UAAA,YAAY,EAAEL;AAAxC,WAAP,CAHoC,CAKnD;;AACA,YAAIK,KAAK,CAACC,IAAN,CAAWC,OAAX,YAA8BC,8BAAlC,EAAgD;AAC9C,8BACE,gEACGP,QAAQ,CAACQ,GAAT,CAAcC,SAAD,iBACZ,+BAAC,gBAAD;AAAkB,YAAA,GAAG,EAAEA,SAAS,CAACC;AAAjC,aAAyCN,KAAzC;AAAgD,YAAA,IAAI,EAAEK;AAAtD,aADD,CADH,CADF;AAOD;;AAED,4BAAO,+BAAC,mCAAD,EAAuBL,KAAvB,CAAP;AACD,OAlBsB,EAmBvB,CAACL,YAAD,CAnBuB,CAAzB;AAsBA,UAAI,CAACE,KAAL,EAAY,oBAAO,+BAAC,6BAAD,OAAP;AACZ,UAAIA,KAAK,CAACU,UAAN,CAAiBC,MAAjB,KAA4B,CAAhC,EACE,oBAAO;AAAM,QAAA,SAAS,EAAE,2BAAWC,6BAAX,EAAwBC,2BAAxB,EAAkCC,kCAAOC,UAAzC;AAAjB,0BAAP;AACF,0BAAO,+BAAC,+BAAD;AAAe,QAAA,UAAU,EAAEf,KAAK,CAACU,UAAjC;AAA6C,QAAA,WAAW,EAAEhB,SAA1D;AAAqE,QAAA,QAAQ,EAAEO;AAA/E,QAAP;AACD,KA5CoD;AAAE;;AADL;;;;AAgDpD,SAASe,MAAT,GAAkB;AAChB,QAAM;AAAEtB,IAAAA,SAAF;AAAaC,IAAAA;AAAb,MAA8B,yBAAWF,gBAAX,CAApC;AACA,QAAMwB,IAAI,GAAGvB,SAAS,GAClB,6CADkB,GAElB,+CAFJ;AAGA,sBAAO;AAAK,IAAA,GAAG,EAAEuB,IAAV;AAAgB,IAAA,SAAS,EAAEH,kCAAOI,YAAlC;AAAgD,IAAA,OAAO,EAAE,MAAMvB,YAAY,CAAC,CAACD,SAAF;AAA3E,IAAP;AACD","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';\n\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 { useScopeQuery } from '@teambit/scope.ui.hooks.use-scope';\nimport styles from './components-drawer.module.scss';\n\nconst ScopeTreeContext = createContext<{ collapsed: boolean; setCollapsed: (x: boolean) => void }>({\n  collapsed: true,\n  setCollapsed: () => {},\n});\n\nexport class ComponentsDrawer implements DrawerType {\n  constructor(private treeNodeSlot: ComponentTreeSlot) {}\n\n  id = 'components-drawer';\n\n  name = 'COMPONENTS';\n\n  widget = (<Widget />);\n\n  Context = ({ children }) => {\n    const [collapsed, setCollapsed] = useState(true);\n    return <ScopeTreeContext.Provider value={{ collapsed, setCollapsed }}>{children}</ScopeTreeContext.Provider>;\n  };\n\n  render = () => {\n    const { scope } = useScopeQuery();\n    const { collapsed } = useContext(ScopeTreeContext);\n    const { treeNodeSlot } = this;\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    if (scope.components.length === 0)\n      return <span className={classNames(mutedItalic, ellipsis, styles.emptyScope)}>Scope is empty</span>;\n    return <ComponentTree components={scope.components} isCollapsed={collapsed} TreeNode={TreeNodeRenderer} />;\n  };\n}\n\nfunction Widget() {\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 <img src={icon} className={styles.collapseIcon} onClick={() => setCollapsed(!collapsed)} />;\n}\n"]}
+{"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","collapseIcon","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 { Icon } from '@teambit/evangelist.elements.icon';\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 <img src={icon} className={styles.collapseIcon} onClick={() => setCollapsed(!collapsed)} />;\n}\n\nfunction FilterWidget() {\n  const { filterOpen, setFilterOpen } = useContext(ScopeTreeContext);\n  return (\n    <Icon\n      className={classNames(styles.filterWidgetIcon, filterOpen && styles.open)}\n      of=\"Ripple_filters\"\n      onClick={() => setFilterOpen(!filterOpen)}\n    />\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        <Icon of=\"note-deprecated\" />\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/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/scope",
-  "version": "0.0.670",
+  "version": "0.0.673",
   "homepage": "https://bit.dev/teambit/scope/scope",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.scope",
     "name": "scope",
-    "version": "0.0.670"
+    "version": "0.0.673"
   },
   "dependencies": {
     "semver": "7.3.4",
@@ -25,32 +25,34 @@
     "@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/evangelist.elements.icon": "1.0.2",
     "@teambit/scope.models.scope-model": "0.0.104",
     "@teambit/scope.ui.hooks.scope-context": "0.0.104",
-    "@teambit/component": "0.0.670",
+    "@teambit/component": "0.0.673",
     "@teambit/logger": "0.0.542",
-    "@teambit/aspect-loader": "0.0.670",
-    "@teambit/builder": "0.0.670",
+    "@teambit/aspect-loader": "0.0.673",
+    "@teambit/builder": "0.0.673",
     "@teambit/cli": "0.0.452",
-    "@teambit/compiler": "0.0.670",
+    "@teambit/compiler": "0.0.673",
     "@teambit/config": "0.0.465",
-    "@teambit/envs": "0.0.670",
+    "@teambit/envs": "0.0.673",
     "@teambit/express": "0.0.546",
-    "@teambit/graphql": "0.0.670",
+    "@teambit/graphql": "0.0.673",
     "@teambit/harmony.modules.requireable-component": "0.0.484",
-    "@teambit/isolator": "0.0.670",
+    "@teambit/isolator": "0.0.673",
     "@teambit/legacy-bit-id": "0.0.398",
-    "@teambit/ui": "0.0.670",
+    "@teambit/ui": "0.0.673",
     "@teambit/workspace.modules.match-pattern": "0.0.489",
-    "@teambit/command-bar": "0.0.670",
-    "@teambit/component-tree": "0.0.458",
+    "@teambit/command-bar": "0.0.673",
+    "@teambit/component-tree": "0.0.461",
     "@teambit/design.ui.surfaces.menu.link-item": "0.0.379",
-    "@teambit/react-router": "0.0.670",
-    "@teambit/sidebar": "0.0.670",
+    "@teambit/react-router": "0.0.673",
+    "@teambit/sidebar": "0.0.673",
     "@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.494",
+    "@teambit/ui-foundation.ui.tree.drawer": "0.0.495",
     "@teambit/bit-error": "0.0.394",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.487",
     "@teambit/scope.ui.hooks.use-scope": "0.0.107",
@@ -61,14 +63,14 @@
     "@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.509",
-    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.111",
-    "@teambit/ui-foundation.ui.use-box.scope-menu": "0.0.111",
+    "@teambit/ui-foundation.ui.side-bar": "0.0.510",
     "@teambit/explorer.ui.gallery.component-card": "0.0.494",
     "@teambit/explorer.ui.gallery.component-grid": "0.0.486",
     "@teambit/preview.ui.preview-placeholder": "0.0.487",
     "@teambit/scope.ui.empty-scope": "0.0.490",
-    "@teambit/scope.ui.scope-details": "0.0.496"
+    "@teambit/scope.ui.scope-details": "0.0.496",
+    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.111",
+    "@teambit/ui-foundation.ui.use-box.scope-menu": "0.0.111"
   },
   "devDependencies": {
     "@types/semver": "7.3.4",

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

@@ -6,3 +6,36 @@
 .collapseIcon {
   width: 16px;
 }
+
+.deprecateFilter {
+  display: flex;
+  flex-direction: row;
+  font-size: 14px;
+  justify-content: space-between;
+  padding: 8px;
+  margin: 4px 8px;
+
+  .filterIcon {
+    line-height: 16px;
+    display: flex;
+
+    .filterIconLabel {
+      margin: 0px 8px;
+      font-size: 12px;
+    }
+  }
+}
+
+.filterWidgetIcon {
+  margin-right: 12px;
+  padding: 4px;
+
+  &:hover {
+    background: white;
+  }
+
+  &.open {
+    color: var(--bit-accent-color, #6c5ce7);
+    background-color: var(--bit-bg-heavy, #f6f6f6);
+  }
+}

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

@@ -8,18 +8,32 @@ import {
   ScopePayload,
 } from '@teambit/ui-foundation.ui.side-bar';
 import { TreeNodeProps } from '@teambit/base-ui.graph.tree.recursive-tree';
-
+import { Icon } from '@teambit/evangelist.elements.icon';
 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';
 
-const ScopeTreeContext = createContext<{ collapsed: boolean; setCollapsed: (x: boolean) => void }>({
+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 {
@@ -29,17 +43,43 @@ export class ComponentsDrawer implements DrawerType {
 
   name = 'COMPONENTS';
 
-  widget = (<Widget />);
+  widgets = [<FilterWidget key={'filter-widget'} />, <TreeToggleWidget key={'tree-toggle-widget'} />];
+  Filters = [<DeprecateFilter key={'deprecate-filter'} />];
 
   Context = ({ children }) => {
     const [collapsed, setCollapsed] = useState(true);
-    return <ScopeTreeContext.Provider value={{ collapsed, setCollapsed }}>{children}</ScopeTreeContext.Provider>;
+    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 } = useContext(ScopeTreeContext);
+    const { collapsed, activeFilters } = useContext(ScopeTreeContext);
     const { treeNodeSlot } = this;
+    const showDeprecatedComponents = activeFilters.find((activeFilter) => activeFilter === 'deprecate');
 
     const TreeNodeRenderer = useCallback(
       function TreeNode(props: TreeNodeProps<PayloadType>) {
@@ -64,16 +104,52 @@ export class ComponentsDrawer implements DrawerType {
     );
 
     if (!scope) return <FullLoader />;
-    if (scope.components.length === 0)
+
+    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={scope.components} isCollapsed={collapsed} TreeNode={TreeNodeRenderer} />;
+
+    return <ComponentTree components={components} isCollapsed={collapsed} TreeNode={TreeNodeRenderer} />;
   };
 }
 
-function Widget() {
+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 <img src={icon} className={styles.collapseIcon} onClick={() => setCollapsed(!collapsed)} />;
 }
+
+function FilterWidget() {
+  const { filterOpen, setFilterOpen } = useContext(ScopeTreeContext);
+  return (
+    <Icon
+      className={classNames(styles.filterWidgetIcon, filterOpen && styles.open)}
+      of="Ripple_filters"
+      onClick={() => setFilterOpen(!filterOpen)}
+    />
+  );
+}
+
+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}>
+        <Icon of="note-deprecated" />
+        <span className={styles.filterIconLabel}>Deprecated</span>
+      </div>
+      <div>
+        <Toggle checked={isActive} onInputChanged={() => setActiveFilter('deprecate')} />
+      </div>
+    </div>
+  );
+}