@teambit/graph 0.0.752 → 0.0.755

package/dist/ui/dependencies-compare/compare-graph-model.d.ts

@@ -0,0 +1,7 @@
+import { EdgeModel, GraphModel } from '@teambit/graph';
+import { CompareNodeModel } from './compare-node-model';
+export declare class CompareGraphModel extends GraphModel<CompareNodeModel, EdgeModel> {
+    nodes: CompareNodeModel[];
+    edges: EdgeModel[];
+    constructor(nodes: CompareNodeModel[], edges: EdgeModel[]);
+}

package/dist/ui/dependencies-compare/compare-graph-model.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CompareGraphModel = void 0;
+
+function _graph() {
+  const data = require("@teambit/graph");
+
+  _graph = function () {
+    return data;
+  };
+
+  return data;
+}
+
+class CompareGraphModel extends _graph().GraphModel {
+  constructor(nodes, edges) {
+    super(nodes, edges);
+    this.nodes = nodes;
+    this.edges = edges;
+  }
+
+}
+
+exports.CompareGraphModel = CompareGraphModel;
+
+//# sourceMappingURL=compare-graph-model.js.map

package/dist/ui/dependencies-compare/compare-graph-model.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CompareGraphModel","GraphModel","constructor","nodes","edges"],"sources":["compare-graph-model.ts"],"sourcesContent":["import { EdgeModel, GraphModel } from '@teambit/graph';\nimport { CompareNodeModel } from './compare-node-model';\n\nexport class CompareGraphModel extends GraphModel<CompareNodeModel, EdgeModel> {\n  constructor(public nodes: CompareNodeModel[], public edges: EdgeModel[]) {\n    super(nodes, edges);\n  }\n}\n"],"mappings":";;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAGO,MAAMA,iBAAN,SAAgCC,mBAAhC,CAAwE;EAC7EC,WAAW,CAAQC,KAAR,EAA0CC,KAA1C,EAA8D;IACvE,MAAMD,KAAN,EAAaC,KAAb;IADuE,KAAtDD,KAAsD,GAAtDA,KAAsD;IAAA,KAApBC,KAAoB,GAApBA,KAAoB;EAExE;;AAH4E"}

package/dist/ui/dependencies-compare/compare-node-model.d.ts

@@ -0,0 +1,9 @@
+import { ComponentModel } from '@teambit/component';
+import { NodeModel } from '@teambit/graph';
+export declare type CompareStatus = 'modified' | 'new' | 'deleted' | undefined;
+export declare class CompareNodeModel extends NodeModel {
+    id: string;
+    component: ComponentModel;
+    compareVersion: string;
+    status: CompareStatus;
+}

package/dist/ui/dependencies-compare/compare-node-model.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+require("core-js/modules/es.array.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CompareNodeModel = void 0;
+
+function _defineProperty2() {
+  const data = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+  _defineProperty2 = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _graph() {
+  const data = require("@teambit/graph");
+
+  _graph = function () {
+    return data;
+  };
+
+  return data;
+}
+
+class CompareNodeModel extends _graph().NodeModel {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2().default)(this, "id", void 0);
+    (0, _defineProperty2().default)(this, "component", void 0);
+    (0, _defineProperty2().default)(this, "compareVersion", void 0);
+    (0, _defineProperty2().default)(this, "status", void 0);
+  }
+
+}
+
+exports.CompareNodeModel = CompareNodeModel;
+
+//# sourceMappingURL=compare-node-model.js.map

package/dist/ui/dependencies-compare/compare-node-model.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CompareNodeModel","NodeModel"],"sources":["compare-node-model.ts"],"sourcesContent":["import { ComponentModel } from '@teambit/component';\nimport { NodeModel } from '@teambit/graph';\n\nexport type CompareStatus = 'modified' | 'new' | 'deleted' | undefined;\n\nexport class CompareNodeModel extends NodeModel {\n  id: string;\n  component: ComponentModel;\n  compareVersion: string;\n  status: CompareStatus;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAIO,MAAMA,gBAAN,SAA+BC,kBAA/B,CAAyC;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;;AAAA"}

package/dist/ui/dependencies-compare/dependencies-compare.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function DependenciesCompare(): JSX.Element;

package/dist/ui/dependencies-compare/dependencies-compare.js

@@ -0,0 +1,205 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+require("core-js/modules/es.array.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DependenciesCompare = DependenciesCompare;
+
+function _classnames() {
+  const data = _interopRequireDefault(require("classnames"));
+
+  _classnames = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _componentUi() {
+  const data = require("@teambit/component.ui.compare");
+
+  _componentUi = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _designUi() {
+  const data = require("@teambit/design.ui.round-loader");
+
+  _designUi = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _graph() {
+  const data = require("@teambit/graph");
+
+  _graph = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+
+  _react = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _reactFlowRenderer() {
+  const data = _interopRequireWildcard(require("react-flow-renderer"));
+
+  _reactFlowRenderer = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _dependenciesCompareModule() {
+  const data = _interopRequireDefault(require("./dependencies-compare.module.scss"));
+
+  _dependenciesCompareModule = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _dependencyCompareNode() {
+  const data = require("./dependency-compare-node");
+
+  _dependencyCompareNode = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _diffGraph2() {
+  const data = require("./diff-graph");
+
+  _diffGraph2 = 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; }
+
+function ComponentNodeContainer(props) {
+  const {
+    sourcePosition = _reactFlowRenderer().Position.Top,
+    targetPosition = _reactFlowRenderer().Position.Bottom,
+    data,
+    id
+  } = props;
+  return /*#__PURE__*/_react().default.createElement("div", {
+    key: id
+  }, /*#__PURE__*/_react().default.createElement(_reactFlowRenderer().Handle, {
+    type: "target",
+    position: targetPosition,
+    isConnectable: false
+  }), /*#__PURE__*/_react().default.createElement(_reactFlowRenderer().Handle, {
+    type: "source",
+    position: sourcePosition,
+    isConnectable: false
+  }), /*#__PURE__*/_react().default.createElement(_dependencyCompareNode().DependencyCompareNode, {
+    node: data.node,
+    type: data.type
+  }));
+}
+
+const NodeTypes = {
+  ComponentNode: ComponentNodeContainer
+};
+
+function DependenciesCompare() {
+  var _componentCompare$bas, _componentCompare$com, _diffGraph;
+
+  const graphRef = (0, _react().useRef)();
+  const componentCompare = (0, _componentUi().useComponentCompare)();
+  const baseId = componentCompare === null || componentCompare === void 0 ? void 0 : (_componentCompare$bas = componentCompare.base) === null || _componentCompare$bas === void 0 ? void 0 : _componentCompare$bas.id;
+  const compareId = componentCompare === null || componentCompare === void 0 ? void 0 : (_componentCompare$com = componentCompare.compare) === null || _componentCompare$com === void 0 ? void 0 : _componentCompare$com.id;
+  const [filter, setFilter] = (0, _react().useState)('runtimeOnly');
+  const isFiltered = filter === 'runtimeOnly';
+  const {
+    loading: baseLoading,
+    graph: baseGraph
+  } = (0, _graph().useGraphQuery)(baseId && [baseId.toString()], filter);
+  const {
+    loading: compareLoading,
+    graph: compareGraph
+  } = (0, _graph().useGraphQuery)(compareId && [compareId.toString()], filter);
+  const loading = baseLoading || compareLoading;
+  const graph = (_diffGraph = (0, _diffGraph2().diffGraph)(baseGraph, compareGraph, baseId)) !== null && _diffGraph !== void 0 ? _diffGraph : undefined;
+  const elements = (0, _graph().calcElements)(graph, {
+    rootNode: baseId
+  });
+  (0, _react().useEffect)(() => {
+    var _graphRef$current;
+
+    (_graphRef$current = graphRef.current) === null || _graphRef$current === void 0 ? void 0 : _graphRef$current.fitView();
+  }, [elements]);
+
+  function handleLoad(instance) {
+    var _graphRef$current2;
+
+    graphRef.current = instance;
+    (_graphRef$current2 = graphRef.current) === null || _graphRef$current2 === void 0 ? void 0 : _graphRef$current2.fitView();
+  }
+
+  const onCheckFilter = _isFiltered => {
+    setFilter(_isFiltered ? 'runtimeOnly' : undefined);
+  };
+
+  if (!loading && (!baseGraph || !compareGraph)) {
+    return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null);
+  }
+
+  return /*#__PURE__*/_react().default.createElement("div", {
+    className: (0, _classnames().default)([_dependenciesCompareModule().default.page, _graph().graphPageStyles.graph])
+  }, loading && /*#__PURE__*/_react().default.createElement("div", {
+    className: _dependenciesCompareModule().default.loader
+  }, /*#__PURE__*/_react().default.createElement(_designUi().RoundLoader, null)), /*#__PURE__*/_react().default.createElement(_reactFlowRenderer().ReactFlowProvider, null, /*#__PURE__*/_react().default.createElement(_reactFlowRenderer().default, {
+    draggable: false,
+    nodesDraggable: true,
+    selectNodesOnDrag: false,
+    nodesConnectable: false,
+    zoomOnDoubleClick: false,
+    elementsSelectable: false,
+    maxZoom: 1,
+    className: _graph().dependenciesGraphStyles.graph,
+    elements: elements,
+    nodeTypes: NodeTypes,
+    onLoad: handleLoad
+  }, /*#__PURE__*/_react().default.createElement(_reactFlowRenderer().Background, null), /*#__PURE__*/_react().default.createElement(_reactFlowRenderer().Controls, {
+    className: _graph().dependenciesGraphStyles.controls
+  }), /*#__PURE__*/_react().default.createElement(_reactFlowRenderer().MiniMap, {
+    nodeColor: _graph().calcMinimapColors,
+    className: _graph().dependenciesGraphStyles.minimap
+  }), /*#__PURE__*/_react().default.createElement(_graph().GraphFilters, {
+    className: _graph().graphPageStyles.filters,
+    disable: loading,
+    isFiltered: isFiltered,
+    onChangeFilter: onCheckFilter
+  }))));
+}
+
+//# sourceMappingURL=dependencies-compare.js.map

package/dist/ui/dependencies-compare/dependencies-compare.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ComponentNodeContainer","props","sourcePosition","Position","Top","targetPosition","Bottom","data","id","node","type","NodeTypes","ComponentNode","DependenciesCompare","graphRef","useRef","componentCompare","useComponentCompare","baseId","base","compareId","compare","filter","setFilter","useState","isFiltered","loading","baseLoading","graph","baseGraph","useGraphQuery","toString","compareLoading","compareGraph","diffGraph","undefined","elements","calcElements","rootNode","useEffect","current","fitView","handleLoad","instance","onCheckFilter","_isFiltered","classNames","styles","page","graphPageStyles","loader","dependenciesGraphStyles","controls","calcMinimapColors","minimap","filters"],"sources":["dependencies-compare.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useComponentCompare } from '@teambit/component.ui.compare';\nimport { RoundLoader } from '@teambit/design.ui.round-loader';\nimport {\n  calcElements,\n  calcMinimapColors,\n  dependenciesGraphStyles,\n  GraphFilter,\n  GraphFilters,\n  graphPageStyles,\n  useGraphQuery,\n} from '@teambit/graph';\nimport React, { useEffect, useRef, useState } from 'react';\nimport ReactFlow, {\n  Background,\n  Controls,\n  Handle,\n  MiniMap,\n  NodeProps,\n  NodeTypesType,\n  OnLoadParams,\n  Position,\n  ReactFlowProvider,\n} from 'react-flow-renderer';\nimport styles from './dependencies-compare.module.scss';\nimport { DependencyCompareNode } from './dependency-compare-node';\nimport { diffGraph } from './diff-graph';\n\nfunction ComponentNodeContainer(props: NodeProps) {\n  const { sourcePosition = Position.Top, targetPosition = Position.Bottom, data, id } = props;\n\n  return (\n    <div key={id}>\n      <Handle type=\"target\" position={targetPosition} isConnectable={false} />\n      <Handle type=\"source\" position={sourcePosition} isConnectable={false} />\n      <DependencyCompareNode node={data.node} type={data.type} />\n    </div>\n  );\n}\n\nconst NodeTypes: NodeTypesType = { ComponentNode: ComponentNodeContainer };\n\nexport function DependenciesCompare() {\n  const graphRef = useRef<OnLoadParams>();\n  const componentCompare = useComponentCompare();\n\n  const baseId = componentCompare?.base?.id;\n  const compareId = componentCompare?.compare?.id;\n\n  const [filter, setFilter] = useState<GraphFilter>('runtimeOnly');\n  const isFiltered = filter === 'runtimeOnly';\n  const { loading: baseLoading, graph: baseGraph } = useGraphQuery(baseId && [baseId.toString()], filter);\n  const { loading: compareLoading, graph: compareGraph } = useGraphQuery(compareId && [compareId.toString()], filter);\n  const loading = baseLoading || compareLoading;\n  const graph = diffGraph(baseGraph, compareGraph, baseId) ?? undefined;\n  const elements = calcElements(graph, { rootNode: baseId });\n\n  useEffect(() => {\n    graphRef.current?.fitView();\n  }, [elements]);\n\n  function handleLoad(instance: OnLoadParams) {\n    graphRef.current = instance;\n    graphRef.current?.fitView();\n  }\n\n  const onCheckFilter = (_isFiltered: boolean) => {\n    setFilter(_isFiltered ? 'runtimeOnly' : undefined);\n  };\n\n  if (!loading && (!baseGraph || !compareGraph)) {\n    return <></>;\n  }\n\n  return (\n    <div className={classNames([styles.page, graphPageStyles.graph])}>\n      {loading && (\n        <div className={styles.loader}>\n          <RoundLoader />\n        </div>\n      )}\n      <ReactFlowProvider>\n        <ReactFlow\n          draggable={false}\n          nodesDraggable={true}\n          selectNodesOnDrag={false}\n          nodesConnectable={false}\n          zoomOnDoubleClick={false}\n          elementsSelectable={false}\n          maxZoom={1}\n          className={dependenciesGraphStyles.graph}\n          elements={elements}\n          nodeTypes={NodeTypes}\n          onLoad={handleLoad}\n        >\n          <Background />\n          <Controls className={dependenciesGraphStyles.controls} />\n          <MiniMap nodeColor={calcMinimapColors} className={dependenciesGraphStyles.minimap} />\n          <GraphFilters\n            className={graphPageStyles.filters}\n            disable={loading}\n            isFiltered={isFiltered}\n            onChangeFilter={onCheckFilter}\n          />\n        </ReactFlow>\n      </ReactFlowProvider>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/ui/dependencies-compare/dependencies-compare.module.scss

@@ -0,0 +1,12 @@
+$d30: #878c9a;
+$b70: #0d2de3;
+
+.page {
+  margin-top: 16px; // not exported
+}
+
+.loader {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}

package/dist/ui/dependencies-compare/dependency-compare-node.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CompareNodeModel } from './compare-node-model';
+export declare type DependencyCompareNodeProps = {
+    node: CompareNodeModel;
+    type?: string;
+};
+export declare function DependencyCompareNode(props: DependencyCompareNodeProps): JSX.Element;

package/dist/ui/dependencies-compare/dependency-compare-node.js

@@ -0,0 +1,271 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DependencyCompareNode = DependencyCompareNode;
+
+function _extends2() {
+  const data = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+  _extends2 = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _objectWithoutProperties2() {
+  const data = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+  _objectWithoutProperties2 = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _baseUiRouting() {
+  const data = require("@teambit/base-ui.routing.nav-link");
+
+  _baseUiRouting = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _baseUiSurfaces() {
+  const data = require("@teambit/base-ui.surfaces.card");
+
+  _baseUiSurfaces = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _baseUiText() {
+  const data = require("@teambit/base-ui.text.muted-text");
+
+  _baseUiText = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _component() {
+  const data = require("@teambit/component");
+
+  _component = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _componentModules() {
+  const data = require("@teambit/component.modules.component-url");
+
+  _componentModules = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _componentUi() {
+  const data = require("@teambit/component.ui.compare");
+
+  _componentUi = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _componentUi2() {
+  const data = require("@teambit/component.ui.deprecation-icon");
+
+  _componentUi2 = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _designUiStyles() {
+  const data = require("@teambit/design.ui.styles.ellipsis");
+
+  _designUiStyles = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _envsUi() {
+  const data = require("@teambit/envs.ui.env-icon");
+
+  _envsUi = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _graph() {
+  const data = require("@teambit/graph");
+
+  _graph = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _classnames() {
+  const data = _interopRequireDefault(require("classnames"));
+
+  _classnames = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+
+  _react = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _semver() {
+  const data = require("semver");
+
+  _semver = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _dependencyCompareNodeModule() {
+  const data = _interopRequireDefault(require("./dependency-compare-node.module.scss"));
+
+  _dependencyCompareNodeModule = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _dependencyCompareVariantsModule() {
+  const data = _interopRequireDefault(require("./dependency-compare-variants.module.scss"));
+
+  _dependencyCompareVariantsModule = 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; }
+
+function getVariant(nodeType) {
+  switch (nodeType) {
+    case 'defaultNode':
+      return _graph().defaultNode;
+
+    case 'root':
+      return _dependencyCompareVariantsModule().default[nodeType];
+
+    case 'external':
+      return _graph().external;
+
+    default:
+      return null;
+  }
+}
+
+function DependencyCompareNode(props) {
+  const {
+    node,
+    type = 'defaultNode'
+  } = props;
+  const {
+    id: baseIdStr,
+    component: baseComponent,
+    compareVersion,
+    status
+  } = node;
+  const {
+    version: baseVersion
+  } = baseComponent;
+
+  const baseId = _component().ComponentID.fromString(baseIdStr);
+
+  const versionDiff = (0, _react().useMemo)(() => (0, _semver().valid)(baseVersion) && (0, _semver().valid)(compareVersion) && (0, _semver().compare)(baseVersion, compareVersion), [baseVersion, compareVersion]);
+  return /*#__PURE__*/_react().default.createElement(_baseUiSurfaces().Card, {
+    className: (0, _classnames().default)(_graph().componentNodeStyles.compNode, getVariant(type)),
+    elevation: "none"
+  }, /*#__PURE__*/_react().default.createElement("div", {
+    className: _graph().componentNodeStyles.firstRow
+  }, /*#__PURE__*/_react().default.createElement(_envsUi().EnvIcon, {
+    component: baseComponent,
+    className: _graph().componentNodeStyles.envIcon
+  }), /*#__PURE__*/_react().default.createElement(Breadcrumbs, {
+    componentId: baseId,
+    className: _baseUiText().mutedText
+  })), /*#__PURE__*/_react().default.createElement("div", {
+    className: _graph().componentNodeStyles.nameLine
+  }, /*#__PURE__*/_react().default.createElement(_baseUiRouting().NavLink, {
+    className: _dependencyCompareNodeModule().default.link,
+    external: true,
+    href: _componentModules().ComponentUrl.toUrl(baseId, {
+      includeVersion: false
+    })
+  }, /*#__PURE__*/_react().default.createElement("span", {
+    className: (0, _classnames().default)(_graph().componentNodeStyles.name, _designUiStyles().ellipsis)
+  }, baseId.name)), baseId.version && /*#__PURE__*/_react().default.createElement("span", {
+    className: (0, _classnames().default)(_graph().componentNodeStyles.version, _designUiStyles().ellipsis)
+  }, baseId.version), versionDiff !== 0 && /*#__PURE__*/_react().default.createElement("img", {
+    className: (0, _classnames().default)([_dependencyCompareNodeModule().default.arrowIcon, _dependencyCompareNodeModule().default.versionUp]),
+    src: "https://static.bit.dev/bit-icons/version-bump.svg"
+  }), compareVersion && versionDiff !== 0 && /*#__PURE__*/_react().default.createElement("span", {
+    className: (0, _classnames().default)(_dependencyCompareNodeModule().default.version, _graph().componentNodeStyles.version, _designUiStyles().ellipsis, versionDiff === -1 && _dependencyCompareNodeModule().default.versionUp, versionDiff === 1 && _dependencyCompareNodeModule().default.versionDown)
+  }, compareVersion), /*#__PURE__*/_react().default.createElement("div", {
+    className: _dependencyCompareNodeModule().default.buffs
+  }, /*#__PURE__*/_react().default.createElement(_componentUi2().DeprecationIcon, {
+    component: baseComponent
+  }), status !== undefined && /*#__PURE__*/_react().default.createElement(_componentUi().CompareStatusResolver, {
+    status: status
+  }))));
+}
+
+function Breadcrumbs(_ref) {
+  let {
+    componentId,
+    className
+  } = _ref,
+      rest = (0, _objectWithoutProperties2().default)(_ref, ["componentId", "className"]);
+  const {
+    scope,
+    namespace
+  } = componentId;
+  const showSep = !!scope && !!namespace;
+  return /*#__PURE__*/_react().default.createElement("div", (0, _extends2().default)({}, rest, {
+    className: (0, _classnames().default)(_dependencyCompareNodeModule().default.breadcrumbs, _designUiStyles().ellipsis, className)
+  }), scope, showSep && '/', namespace);
+}
+
+//# sourceMappingURL=dependency-compare-node.js.map

package/dist/ui/dependencies-compare/dependency-compare-node.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getVariant","nodeType","defaultNode","variants","external","DependencyCompareNode","props","node","type","id","baseIdStr","component","baseComponent","compareVersion","status","version","baseVersion","baseId","ComponentID","fromString","versionDiff","useMemo","valid","compare","classnames","componentNodeStyles","compNode","firstRow","envIcon","mutedText","nameLine","styles","link","ComponentUrl","toUrl","includeVersion","name","ellipsis","arrowIcon","versionUp","versionDown","buffs","undefined","Breadcrumbs","componentId","className","rest","scope","namespace","showSep","breadcrumbs"],"sources":["dependency-compare-node.tsx"],"sourcesContent":["import { NavLink } from '@teambit/base-ui.routing.nav-link';\nimport { Card } from '@teambit/base-ui.surfaces.card';\nimport { mutedText } from '@teambit/base-ui.text.muted-text';\nimport { ComponentID } from '@teambit/component';\nimport { ComponentUrl } from '@teambit/component.modules.component-url';\nimport { CompareStatusResolver } from '@teambit/component.ui.compare';\nimport { DeprecationIcon } from '@teambit/component.ui.deprecation-icon';\nimport { ellipsis } from '@teambit/design.ui.styles.ellipsis';\nimport { EnvIcon } from '@teambit/envs.ui.env-icon';\nimport { componentNodeStyles, defaultNode, external } from '@teambit/graph';\nimport classnames from 'classnames';\nimport React, { useMemo } from 'react';\nimport { compare, valid } from 'semver';\nimport { CompareNodeModel } from './compare-node-model';\nimport styles from './dependency-compare-node.module.scss';\nimport variants from './dependency-compare-variants.module.scss';\n\nfunction getVariant(nodeType?: string) {\n  switch (nodeType) {\n    case 'defaultNode':\n      return defaultNode;\n    case 'root':\n      return variants[nodeType];\n    case 'external':\n      return external;\n    default:\n      return null;\n  }\n}\n\nexport type DependencyCompareNodeProps = {\n  node: CompareNodeModel;\n  type?: string;\n};\n\nexport function DependencyCompareNode(props: DependencyCompareNodeProps) {\n  const { node, type = 'defaultNode' } = props;\n  const { id: baseIdStr, component: baseComponent, compareVersion, status } = node;\n  const { version: baseVersion } = baseComponent;\n  const baseId = ComponentID.fromString(baseIdStr);\n  const versionDiff = useMemo(\n    () => valid(baseVersion) && valid(compareVersion) && compare(baseVersion, compareVersion),\n    [baseVersion, compareVersion]\n  );\n\n  return (\n    <Card className={classnames(componentNodeStyles.compNode, getVariant(type))} elevation=\"none\">\n      <div className={componentNodeStyles.firstRow}>\n        <EnvIcon component={baseComponent} className={componentNodeStyles.envIcon} />\n        <Breadcrumbs componentId={baseId} className={mutedText} />\n      </div>\n      <div className={componentNodeStyles.nameLine}>\n        <NavLink className={styles.link} external={true} href={ComponentUrl.toUrl(baseId, { includeVersion: false })}>\n          <span className={classnames(componentNodeStyles.name, ellipsis)}>{baseId.name}</span>\n        </NavLink>\n        {baseId.version && <span className={classnames(componentNodeStyles.version, ellipsis)}>{baseId.version}</span>}\n        {versionDiff !== 0 && (\n          <img\n            className={classnames([styles.arrowIcon, styles.versionUp])}\n            src=\"https://static.bit.dev/bit-icons/version-bump.svg\"\n          />\n        )}\n        {compareVersion && versionDiff !== 0 && (\n          <span\n            className={classnames(\n              styles.version,\n              componentNodeStyles.version,\n              ellipsis,\n              versionDiff === -1 && styles.versionUp,\n              versionDiff === 1 && styles.versionDown\n            )}\n          >\n            {compareVersion}\n          </span>\n        )}\n\n        <div className={styles.buffs}>\n          <DeprecationIcon component={baseComponent} />\n          {status !== undefined && <CompareStatusResolver status={status} />}\n        </div>\n      </div>\n    </Card>\n  );\n}\n\ntype BreadcrumbsProps = { componentId: ComponentID } & React.HTMLAttributes<HTMLDivElement>;\n\nfunction Breadcrumbs({ componentId, className, ...rest }: BreadcrumbsProps) {\n  const { scope, namespace } = componentId;\n  const showSep = !!scope && !!namespace;\n\n  return (\n    <div {...rest} className={classnames(styles.breadcrumbs, ellipsis, className)}>\n      {scope}\n      {showSep && '/'}\n      {namespace}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/ui/dependencies-compare/dependency-compare-node.module.scss

@@ -0,0 +1,21 @@
+.arrowIcon {
+  height: 16px;
+  padding-right: 8px;
+}
+
+.versionUp {
+  color: var(--positive-color, #37b26c);
+}
+
+.versionDown {
+  color: var(--negative-color, #e62e5c);
+}
+
+.link {
+  text-decoration: none;
+  color: var(--bit-text-color-heavyed);
+
+  &:hover {
+    text-decoration: underline;
+  }
+}