@teambit/scope 0.0.627 → 0.0.629

package/__preview-1642994756471.js

@@ -0,0 +1 @@
+

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

@@ -2,3 +2,7 @@
   padding: 8px 8px 0 28px;
   display: block;
 }
+
+.collapseIcon {
+  width: 16px;
+}

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

@@ -5,5 +5,9 @@ export declare class ComponentsDrawer implements DrawerType {
     private treeNodeSlot;
     constructor(treeNodeSlot: ComponentTreeSlot);
     name: string;
+    widget: JSX.Element;
+    Context: ({ children }: {
+        children: any;
+    }) => JSX.Element;
     render: () => JSX.Element;
 }

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

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+require("core-js/modules/es.array.iterator.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -111,14 +113,34 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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: () => {}
+});
+
 class ComponentsDrawer {
   constructor(treeNodeSlot) {
     this.treeNodeSlot = treeNodeSlot;
     (0, _defineProperty2().default)(this, "name", 'COMPONENTS');
+    (0, _defineProperty2().default)(this, "widget", /*#__PURE__*/_react().default.createElement(Widget, null));
+    (0, _defineProperty2().default)(this, "Context", ({
+      children
+    }) => {
+      const [collapsed, setCollapsed] = (0, _react().useState)(true);
+      return /*#__PURE__*/_react().default.createElement(ScopeTreeContext.Provider, {
+        value: {
+          collapsed,
+          setCollapsed
+        }
+      }, children);
+    });
     (0, _defineProperty2().default)(this, "render", () => {
       const {
         scope
       } = (0, _scopeUiHooks().useScopeQuery)();
+      const {
+        collapsed
+      } = (0, _react().useContext)(ScopeTreeContext);
       const {
         treeNodeSlot
       } = this;
@@ -144,6 +166,7 @@ class ComponentsDrawer {
       }, "Scope is empty");
       return /*#__PURE__*/_react().default.createElement(_uiFoundationUi().ComponentTree, {
         components: scope.components,
+        isCollapsed: collapsed,
         TreeNode: TreeNodeRenderer
       });
     });
@@ -153,4 +176,17 @@ class ComponentsDrawer {
 
 exports.ComponentsDrawer = ComponentsDrawer;
 
+function Widget() {
+  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("img", {
+    src: icon,
+    className: _componentsDrawerModule().default.collapseIcon,
+    onClick: () => setCollapsed(!collapsed)
+  });
+}
+
 //# sourceMappingURL=components.drawer.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components.drawer.tsx"],"names":["ComponentsDrawer","constructor","treeNodeSlot","scope","TreeNodeRenderer","TreeNode","props","children","node","payload","ScopePayload","map","childNode","id","components","length","mutedItalic","ellipsis","styles","emptyScope"],"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;;;;;;AAEO,MAAMA,gBAAN,CAA6C;AAClDC,EAAAA,WAAW,CAASC,YAAT,EAA0C;AAAA,SAAjCA,YAAiC,GAAjCA,YAAiC;AAAA,kDAE9C,YAF8C;AAAA,oDAI5C,MAAM;AACb,YAAM;AAAEC,QAAAA;AAAF,UAAY,oCAAlB;AACA,YAAM;AAAED,QAAAA;AAAF,UAAmB,IAAzB;AAEA,YAAME,gBAAgB,GAAG,0BACvB,SAASC,QAAT,CAAkBC,KAAlB,EAAqD;AACnD,cAAMC,QAAQ,GAAGD,KAAK,CAACE,IAAN,CAAWD,QAA5B;AAEA,YAAI,CAACA,QAAL,EAAe,oBAAO,+BAAC,+BAAD,+BAAmBD,KAAnB;AAA0B,UAAA,YAAY,EAAEJ;AAAxC,WAAP,CAHoC,CAKnD;;AACA,YAAII,KAAK,CAACE,IAAN,CAAWC,OAAX,YAA8BC,8BAAlC,EAAgD;AAC9C,8BACE,gEACGH,QAAQ,CAACI,GAAT,CAAcC,SAAD,iBACZ,+BAAC,gBAAD;AAAkB,YAAA,GAAG,EAAEA,SAAS,CAACC;AAAjC,aAAyCP,KAAzC;AAAgD,YAAA,IAAI,EAAEM;AAAtD,aADD,CADH,CADF;AAOD;;AAED,4BAAO,+BAAC,mCAAD,EAAuBN,KAAvB,CAAP;AACD,OAlBsB,EAmBvB,CAACJ,YAAD,CAnBuB,CAAzB;AAsBA,UAAI,CAACC,KAAL,EAAY,oBAAO,+BAAC,6BAAD,OAAP;AACZ,UAAIA,KAAK,CAACW,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,EAAEhB,KAAK,CAACW,UAAjC;AAA6C,QAAA,QAAQ,EAAEV;AAAvD,QAAP;AACD,KAlCoD;AAAE;;AADL","sourcesContent":["import React, { useCallback } 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\nexport class ComponentsDrawer implements DrawerType {\n  constructor(private treeNodeSlot: ComponentTreeSlot) {}\n\n  name = 'COMPONENTS';\n\n  render = () => {\n    const { scope } = useScopeQuery();\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} TreeNode={TreeNodeRenderer} />;\n  };\n}\n"]}
+{"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":"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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';\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  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"]}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/scope",
-  "version": "0.0.627",
+  "version": "0.0.629",
   "homepage": "https://bit.dev/teambit/scope/scope",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.scope",
     "name": "scope",
-    "version": "0.0.627"
+    "version": "0.0.629"
   },
   "dependencies": {
     "semver": "7.3.4",
@@ -27,32 +27,32 @@
     "@teambit/base-ui.graph.tree.recursive-tree": "1.0.0",
     "@teambit/scope.models.scope-model": "0.0.95",
     "@teambit/scope.ui.hooks.scope-context": "0.0.95",
-    "@teambit/component": "0.0.627",
-    "@teambit/logger": "0.0.520",
-    "@teambit/aspect-loader": "0.0.627",
-    "@teambit/builder": "0.0.627",
-    "@teambit/cli": "0.0.431",
-    "@teambit/compiler": "0.0.627",
-    "@teambit/config": "0.0.443",
-    "@teambit/envs": "0.0.627",
-    "@teambit/express": "0.0.524",
-    "@teambit/graphql": "0.0.627",
+    "@teambit/component": "0.0.629",
+    "@teambit/logger": "0.0.522",
+    "@teambit/aspect-loader": "0.0.629",
+    "@teambit/builder": "0.0.629",
+    "@teambit/cli": "0.0.433",
+    "@teambit/compiler": "0.0.629",
+    "@teambit/config": "0.0.445",
+    "@teambit/envs": "0.0.629",
+    "@teambit/express": "0.0.526",
+    "@teambit/graphql": "0.0.629",
     "@teambit/harmony.modules.requireable-component": "0.0.483",
-    "@teambit/isolator": "0.0.627",
+    "@teambit/isolator": "0.0.629",
     "@teambit/legacy-bit-id": "0.0.397",
-    "@teambit/ui": "0.0.627",
+    "@teambit/ui": "0.0.629",
     "@teambit/workspace.modules.match-pattern": "0.0.487",
-    "@teambit/command-bar": "0.0.627",
-    "@teambit/component-tree": "0.0.415",
+    "@teambit/command-bar": "0.0.629",
+    "@teambit/component-tree": "0.0.417",
     "@teambit/design.ui.surfaces.menu.link-item": "0.0.377",
-    "@teambit/react-router": "0.0.627",
-    "@teambit/sidebar": "0.0.627",
+    "@teambit/react-router": "0.0.629",
+    "@teambit/sidebar": "0.0.629",
     "@teambit/ui-foundation.ui.main-dropdown": "0.0.485",
     "@teambit/ui-foundation.ui.menu": "0.0.485",
     "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.487",
     "@teambit/bit-error": "0.0.394",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.486",
-    "@teambit/scope.ui.hooks.use-scope": "0.0.96",
+    "@teambit/scope.ui.hooks.use-scope": "0.0.98",
     "@teambit/ui-foundation.ui.buttons.collapser": "0.0.192",
     "@teambit/ui-foundation.ui.corner": "0.0.493",
     "@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.178",
@@ -60,8 +60,8 @@
     "@teambit/design.ui.styles.ellipsis": "0.0.347",
     "@teambit/design.ui.styles.muted-italic": "0.0.35",
     "@teambit/ui-foundation.ui.full-loader": "0.0.485",
-    "@teambit/ui-foundation.ui.side-bar": "0.0.492",
-    "@teambit/ui-foundation.ui.tree.drawer": "0.0.486",
+    "@teambit/ui-foundation.ui.side-bar": "0.0.494",
+    "@teambit/ui-foundation.ui.tree.drawer": "0.0.488",
     "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.108",
     "@teambit/ui-foundation.ui.use-box.scope-menu": "0.0.108",
     "@teambit/explorer.ui.gallery.component-card": "0.0.492",
@@ -85,7 +85,7 @@
     "@types/node": "12.20.4"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.208",
+    "@teambit/legacy": "1.0.209",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -113,7 +113,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.208",
+        "@teambit/legacy": "1.0.209",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

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

@@ -2,3 +2,7 @@
   padding: 8px 8px 0 28px;
   display: block;
 }
+
+.collapseIcon {
+  width: 16px;
+}

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

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState, useContext, createContext } from 'react';
 import classNames from 'classnames';
 import {
   ComponentTree,
@@ -17,13 +17,26 @@ import { ellipsis } from '@teambit/design.ui.styles.ellipsis';
 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 }>({
+  collapsed: true,
+  setCollapsed: () => {},
+});
+
 export class ComponentsDrawer implements DrawerType {
   constructor(private treeNodeSlot: ComponentTreeSlot) {}
 
   name = 'COMPONENTS';
 
+  widget = (<Widget />);
+
+  Context = ({ children }) => {
+    const [collapsed, setCollapsed] = useState(true);
+    return <ScopeTreeContext.Provider value={{ collapsed, setCollapsed }}>{children}</ScopeTreeContext.Provider>;
+  };
+
   render = () => {
     const { scope } = useScopeQuery();
+    const { collapsed } = useContext(ScopeTreeContext);
     const { treeNodeSlot } = this;
 
     const TreeNodeRenderer = useCallback(
@@ -51,6 +64,14 @@ export class ComponentsDrawer implements DrawerType {
     if (!scope) return <FullLoader />;
     if (scope.components.length === 0)
       return <span className={classNames(mutedItalic, ellipsis, styles.emptyScope)}>Scope is empty</span>;
-    return <ComponentTree components={scope.components} TreeNode={TreeNodeRenderer} />;
+    return <ComponentTree components={scope.components} isCollapsed={collapsed} TreeNode={TreeNodeRenderer} />;
   };
 }
+
+function Widget() {
+  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)} />;
+}