@teambit/graph 0.0.558 → 0.0.559

package/graph.docs.md

@@ -0,0 +1,7 @@
+---
+description: Generate Bit component dependency graphs.
+labels: ['dependency', 'graph', 'component', 'bit']
+---
+
+This is an extension that knows to build a graph of components from a component or a list of components.
+It uses the component-resolver extension in order to resolve the component dependencies during the graph building.

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/graph",
-  "version": "0.0.558",
+  "version": "0.0.559",
   "homepage": "https://bit.dev/teambit/component/graph",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "graph",
-    "version": "0.0.558"
+    "version": "0.0.559"
   },
   "dependencies": {
     "@teambit/harmony": "0.2.11",
@@ -23,17 +23,17 @@
     "@teambit/base-ui.text.muted-text": "1.0.1",
     "@teambit/evangelist.input.checkbox.label": "1.0.3",
     "@teambit/documenter.ui.heading": "4.1.1",
-    "@teambit/component": "0.0.558",
-    "@teambit/graphql": "0.0.558",
-    "@teambit/cli": "0.0.388",
-    "@teambit/ui": "0.0.558",
-    "@teambit/legacy-bit-id": "0.0.377",
-    "@teambit/component.ui.deprecation-icon": "0.0.471",
+    "@teambit/component": "0.0.559",
+    "@teambit/graphql": "0.0.559",
+    "@teambit/cli": "0.0.389",
+    "@teambit/ui": "0.0.559",
+    "@teambit/legacy-bit-id": "0.0.378",
+    "@teambit/component.ui.deprecation-icon": "0.0.472",
     "@teambit/design.ui.styles.ellipsis": "0.0.346",
-    "@teambit/envs.ui.env-icon": "0.0.465",
+    "@teambit/envs.ui.env-icon": "0.0.466",
     "@teambit/design.ui.pages.not-found": "0.0.352",
     "@teambit/design.ui.pages.server-error": "0.0.352",
-    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.466"
+    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.467"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -49,7 +49,7 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.174",
+    "@teambit/legacy": "1.0.175",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -77,7 +77,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.174",
+        "@teambit/legacy": "1.0.175",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }
@@ -86,10 +86,17 @@
   "files": [
     "dist",
     "!dist/tsconfig.tsbuildinfo",
-    "README.md",
-    "README.mdx",
-    "*.js",
-    "*.json"
+    "**/*.md",
+    "**/*.mdx",
+    "**/*.js",
+    "**/*.json",
+    "**/*.sass",
+    "**/*.scss",
+    "**/*.less",
+    "**/*.css",
+    "**/*.css",
+    "**/*.jpeg",
+    "**/*.gif"
   ],
   "private": false,
   "engines": {

package/ui/component-node/component-node.module.scss

@@ -0,0 +1,63 @@
+.compNode {
+  max-width: 300px;
+  min-width: 200px;
+  border-width: 2px;
+  border-style: solid;
+  padding: 16px;
+  background: white;
+
+  text-align: left;
+}
+
+.firstRow {
+  display: flex;
+  align-items: center;
+  margin-bottom: 4px;
+}
+
+.envIcon {
+  margin-right: 8px;
+}
+
+.breadcrumbs {
+  color: #6c707c;
+  font-size: 12px;
+}
+
+.nameLine {
+  display: flex;
+  align-items: center;
+}
+
+.name {
+  font-weight: bold;
+  margin-right: 8px;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.version {
+  margin-right: 8px;
+  max-width: 80px;
+}
+
+.buffs {
+  display: flex;
+  margin-left: auto;
+  line-height: 1;
+  font-size: 15px;
+  line-height: 16px;
+
+  > * {
+    margin-right: 8px;
+  }
+  > *:last-child {
+    margin-right: 0px;
+  }
+
+  &:empty {
+    display: none;
+  }
+}

package/ui/component-node/variants.module.scss

@@ -0,0 +1,43 @@
+$success: #37b26c;
+$regularNodeColor: #3a95ff;
+$br20: #f3faff;
+$d40: #6c707c;
+
+$borderLabelHeight: 20px;
+
+.root {
+  border-color: $success;
+  border-top-width: 20px;
+
+  border-radius: 10px;
+  box-shadow: 0px 0px 0px 2px #d0f1de, var(--bit-shadow-hover-medium);
+
+  &:before {
+    content: 'Current component';
+    position: absolute;
+    top: 1px;
+    left: 10px;
+
+    font-size: $borderLabelHeight / 2;
+    color: white;
+    line-height: $borderLabelHeight;
+  }
+}
+
+.defaultNode {
+  border-color: $regularNodeColor;
+
+  box-shadow: 0px 0px 0px 2px $br20;
+}
+
+.external {
+  border-color: $d40;
+
+  box-shadow: 0px 0px 0px 2px var(border--color);
+}
+
+:export {
+  rootNodeColor: $success;
+  defaultNodeColor: $regularNodeColor;
+  externalNodeColor: $d40;
+}

package/ui/dependencies-graph/dep-edge/edge.module.scss

@@ -0,0 +1,10 @@
+.runtime {
+}
+
+.peer {
+  stroke-dasharray: 5 5;
+}
+
+.dev {
+  stroke-dasharray: 10 5;
+}

package/ui/dependencies-graph/dependencies-graph.module.scss

@@ -0,0 +1,83 @@
+$d30: #878c9a;
+$b70: #0d2de3;
+
+.graph {
+  :global {
+    .react-flow__edge-path {
+      stroke: $d30;
+      stroke-width: 2px;
+    }
+
+    // creates space between the handles and lines
+    .react-flow__handle {
+      background: none;
+      border: none;
+
+      &-bottom {
+        bottom: -4px;
+      }
+      &-top {
+        top: -4px;
+      }
+      &-left {
+        left: -4px;
+      }
+      &-right {
+        right: -4px;
+      }
+    }
+
+    .react-flow__arrowhead polyline {
+      stroke: $d30;
+      stroke-width: 2px;
+    }
+
+    // show labels for labels, on hover
+    .react-flow__edge {
+      pointer-events: all !important;
+      &:hover {
+        .react-flow__edge-textbg,
+        .react-flow__edge-text {
+          transition: all 300ms;
+          opacity: 1;
+        }
+      }
+    }
+
+    .react-flow__edge-textbg {
+      fill: #414141;
+    }
+
+    .react-flow__edge-text {
+      fill: white;
+    }
+
+    .react-flow__edge-textbg,
+    .react-flow__edge-text {
+      opacity: 0;
+    }
+  }
+}
+
+.minimap {
+  right: 24px;
+  bottom: 24px;
+  box-shadow: var(--bit-shadow-faint);
+  background: white !important; // override inline styles from package
+  border-radius: 5px;
+
+  :global {
+    .react-flow__minimap-mask {
+      stroke: $b70;
+      stroke-width: 4px;
+      fill: transparent;
+    }
+  }
+}
+
+.controls {
+  box-shadow: var(--bit-shadow-faint);
+
+  left: 24px;
+  bottom: 24px;
+}

package/ui/graph-page/graph-page.module.scss

@@ -0,0 +1,35 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 24px;
+
+  h2 {
+    margin-bottom: 24px;
+  }
+}
+
+.graph {
+  flex-grow: 1;
+  height: 100%;
+  width: unset;
+
+  border-radius: 5px;
+  border: solid 1px var(--bit-border-color-lightest, #ededed);
+  background: var(--bit-bg-dent, #f6f6f6);
+}
+
+.summery {
+  margin-bottom: 24px;
+}
+
+.filters {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  padding: 8px;
+
+  font-size: 0.75em;
+  box-shadow: var(--bit-shadow-faint);
+  z-index: 8; // position above the abs positioned graph items
+}