@teambit/workspace 0.0.627 → 0.0.629

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/workspace",
-  "version": "0.0.627",
+  "version": "0.0.629",
   "homepage": "https://bit.dev/teambit/workspace/workspace",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.workspace",
     "name": "workspace",
-    "version": "0.0.627"
+    "version": "0.0.629"
   },
   "dependencies": {
     "lodash": "4.17.21",
@@ -37,43 +37,42 @@
     "core-js": "^3.0.0",
     "@teambit/base-ui.surfaces.split-pane.hover-splitter": "1.0.0",
     "@teambit/base-ui.surfaces.split-pane.split-pane": "1.0.0",
-    "@teambit/base-ui.graph.tree.recursive-tree": "1.0.0",
-    "@teambit/component-id": "0.0.398",
+    "@teambit/component-id": "0.0.400",
     "@teambit/bit-error": "0.0.394",
     "@teambit/legacy-bit-id": "0.0.397",
-    "@teambit/logger": "0.0.520",
-    "@teambit/scope": "0.0.627",
-    "@teambit/cli": "0.0.431",
-    "@teambit/isolator": "0.0.627",
-    "@teambit/component-tree": "0.0.415",
+    "@teambit/logger": "0.0.522",
+    "@teambit/scope": "0.0.629",
+    "@teambit/cli": "0.0.433",
+    "@teambit/isolator": "0.0.629",
+    "@teambit/component-tree": "0.0.417",
     "@teambit/component.ui.component-status-resolver": "0.0.490",
     "@teambit/harmony.modules.resolved-component": "0.0.483",
-    "@teambit/dependency-resolver": "0.0.627",
-    "@teambit/compiler": "0.0.627",
-    "@teambit/component": "0.0.627",
-    "@teambit/graphql": "0.0.627",
-    "@teambit/aspect-loader": "0.0.627",
-    "@teambit/bundler": "0.0.627",
-    "@teambit/envs": "0.0.627",
-    "@teambit/pubsub": "0.0.627",
-    "@teambit/ui": "0.0.627",
-    "@teambit/variants": "0.0.522",
+    "@teambit/dependency-resolver": "0.0.629",
+    "@teambit/compiler": "0.0.629",
+    "@teambit/component": "0.0.629",
+    "@teambit/graphql": "0.0.629",
+    "@teambit/aspect-loader": "0.0.629",
+    "@teambit/bundler": "0.0.629",
+    "@teambit/envs": "0.0.629",
+    "@teambit/pubsub": "0.0.629",
+    "@teambit/ui": "0.0.629",
+    "@teambit/variants": "0.0.524",
     "@teambit/component-issues": "0.0.45",
-    "@teambit/config": "0.0.443",
+    "@teambit/config": "0.0.445",
     "@teambit/harmony.modules.requireable-component": "0.0.483",
-    "@teambit/importer": "0.0.56",
+    "@teambit/importer": "0.0.58",
     "@teambit/workspace.modules.match-pattern": "0.0.487",
-    "@teambit/command-bar": "0.0.627",
+    "@teambit/command-bar": "0.0.629",
     "@teambit/design.ui.surfaces.menu.link-item": "0.0.377",
-    "@teambit/graph": "0.0.627",
-    "@teambit/react-router": "0.0.627",
-    "@teambit/sidebar": "0.0.627",
+    "@teambit/graph": "0.0.629",
+    "@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/toolbox.time.time-format": "0.0.482",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.486",
-    "@teambit/deprecation": "0.0.627",
+    "@teambit/deprecation": "0.0.629",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.486",
     "@teambit/ui-foundation.ui.buttons.collapser": "0.0.192",
     "@teambit/ui-foundation.ui.corner": "0.0.493",
@@ -81,9 +80,10 @@
     "@teambit/ui-foundation.ui.top-bar": "0.0.488",
     "@teambit/design.ui.styles.ellipsis": "0.0.347",
     "@teambit/design.ui.styles.muted-italic": "0.0.35",
+    "@teambit/design.ui.tree": "0.0.2",
     "@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/explorer.ui.gallery.component-grid": "0.0.485",
     "@teambit/workspace.ui.empty-workspace": "0.0.488",
     "@teambit/workspace.ui.workspace-component-card": "0.0.492"
@@ -106,7 +106,7 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3.0.0",
-    "@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"
   },
@@ -134,7 +134,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/workspace-components-drawer/workspace-components-drawer.module.scss

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

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

@@ -8,10 +8,8 @@ import {
   NamespaceTreeNode,
   ScopePayload,
 } from '@teambit/ui-foundation.ui.side-bar';
-
-import type { TreeNodeProps } from '@teambit/base-ui.graph.tree.recursive-tree';
-
-import React, { useCallback, useContext } from 'react';
+import { TreeNodeProps } from '@teambit/design.ui.tree';
+import React, { useCallback, useContext, useState, createContext } from 'react';
 import classNames from 'classnames';
 import { ComponentTreeSlot } from '@teambit/component-tree';
 import { mutedItalic } from '@teambit/design.ui.styles.muted-italic';
@@ -19,20 +17,35 @@ import { ellipsis } from '@teambit/design.ui.styles.ellipsis';
 import { WorkspaceContext } from '../workspace/workspace-context';
 import styles from './workspace-components-drawer.module.scss';
 
+const WorkspaceTreeContext = createContext<{ collapsed: boolean; setCollapsed: (x: boolean) => void }>({
+  collapsed: true,
+  setCollapsed: () => {},
+});
+
 export class WorkspaceComponentsDrawer implements DrawerType {
   constructor(private treeNodeSlot: ComponentTreeSlot) {}
 
   name = 'COMPONENTS';
 
+  widget = (<Widget />);
+
+  Context = ({ children }) => {
+    const [collapsed, setCollapsed] = useState(true);
+    return (
+      <WorkspaceTreeContext.Provider value={{ collapsed, setCollapsed }}>{children}</WorkspaceTreeContext.Provider>
+    );
+  };
+
   render = () => {
     const workspace = useContext(WorkspaceContext);
+    const { collapsed } = useContext(WorkspaceTreeContext);
     const { treeNodeSlot } = this;
 
     const TreeNodeRenderer = useCallback(
       function TreeNode(props: TreeNodeProps<PayloadType>) {
         const children = props.node.children;
 
-        if (!children) return <ComponentView {...props} treeNodeSlot={treeNodeSlot} />;
+        if (!children) return <ComponentView {...props} treeNodeSlot={treeNodeSlot} />; // non collapse
 
         if (props.node.payload instanceof ScopePayload) return <ScopeTreeNode {...props} />;
 
@@ -42,8 +55,18 @@ export class WorkspaceComponentsDrawer implements DrawerType {
     );
 
     if (!workspace) return <FullLoader />;
-    if (workspace.components.length === 0)
+    if (workspace.components.length === 0) {
       return <span className={classNames(mutedItalic, ellipsis, styles.emptyWorkspace)}>Workspace is empty</span>;
-    return <ComponentTree components={workspace.components} TreeNode={TreeNodeRenderer} />;
+    }
+
+    return <ComponentTree components={workspace.components} isCollapsed={collapsed} TreeNode={TreeNodeRenderer} />;
   };
 }
+
+function Widget() {
+  const { collapsed, setCollapsed } = useContext(WorkspaceTreeContext);
+  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)} />;
+}