@teambit/graph 0.0.554 → 0.0.558

package/types/style.d.ts

@@ -1,42 +0,0 @@
-declare module '*.module.css' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-declare module '*.module.scss' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-declare module '*.module.sass' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.module.less' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.less' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.css' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.sass' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.scss' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.mdx' {
-  const component: any;
-  export default component;
-}

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

@@ -1,63 +0,0 @@
-.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/component-node.tsx

@@ -1,61 +0,0 @@
-import React, { useContext } from 'react';
-import classnames from 'classnames';
-import { mutedText } from '@teambit/base-ui.text.muted-text';
-import { ComponentID } from '@teambit/component';
-import { DeprecationIcon } from '@teambit/component.ui.deprecation-icon';
-import { EnvIcon } from '@teambit/envs.ui.env-icon';
-import { ellipsis } from '@teambit/design.ui.styles.ellipsis';
-import { Card, CardProps } from '@teambit/base-ui.surfaces.card';
-import { NodeModel } from '../query/node-model';
-import { ComponentGraphContext } from '../dependencies-graph/';
-
-// keep order: styles, then variants
-import styles from './component-node.module.scss';
-import variants from './variants.module.scss';
-
-export interface ComponentNode extends CardProps {
-  node: NodeModel;
-  type: string;
-}
-
-export function ComponentNode({ node, type = 'defaultNode', ...rest }: ComponentNode) {
-  const graphContext = useContext(ComponentGraphContext);
-  const { component } = node;
-  const { id } = component;
-
-  return (
-    <Card className={classnames(styles.compNode, variants[type])} elevation="none" {...rest}>
-      <div className={styles.firstRow}>
-        <EnvIcon component={component} className={styles.envIcon} />
-        <Breadcrumbs componentId={id} className={mutedText} />
-      </div>
-      <div className={styles.nameLine}>
-        <span className={classnames(styles.name, ellipsis)}>{id.name}</span>
-        {id.version && <span className={classnames(styles.version, ellipsis)}>{id.version}</span>}
-
-        <div className={styles.buffs}>
-          <DeprecationIcon component={component} />
-          {graphContext &&
-            graphContext.componentWidgets
-              .toArray()
-              .map(([widgetId, Widget]) => <Widget key={widgetId} component={component} />)}
-        </div>
-      </div>
-    </Card>
-  );
-}
-
-type BreadcrumbsProps = { componentId: ComponentID } & React.HTMLAttributes<HTMLDivElement>;
-
-function Breadcrumbs({ componentId, className, ...rest }: BreadcrumbsProps) {
-  const { scope, namespace } = componentId;
-  const showSep = !!scope && !!namespace;
-
-  return (
-    <div {...rest} className={classnames(styles.breadcrumbs, ellipsis, className)}>
-      {scope}
-      {showSep && '/'}
-      {namespace}
-    </div>
-  );
-}

package/ui/component-node/index.ts

@@ -1,3 +0,0 @@
-export { ComponentNode } from './component-node';
-
-export { defaultNodeColor, rootNodeColor, externalNodeColor } from './variants';

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

@@ -1,43 +0,0 @@
-$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/component-node/variants.ts

@@ -1,5 +0,0 @@
-import variants from './variants.module.scss';
-
-const { root, defaultNode, rootNodeColor, defaultNodeColor, externalNodeColor } = variants;
-
-export { root, defaultNode, rootNodeColor, defaultNodeColor, externalNodeColor };

package/ui/dependencies-graph/calc-elements.tsx

@@ -1,47 +0,0 @@
-import { useMemo } from 'react';
-import { Node, Edge, ArrowHeadType } from 'react-flow-renderer';
-import { ComponentID } from '@teambit/component';
-import { calcLayout } from './calc-layout';
-import { GraphModel } from '../query';
-
-import { depTypeToClass, depTypeToLabel } from './dep-edge';
-
-type ElementsOptions = {
-  rootNode?: ComponentID;
-};
-
-/**
- * generate Nodes and Edges for the ReactFlowRenderer graph renderer
- */
-export function calcElements(graph: GraphModel | undefined, { rootNode }: ElementsOptions) {
-  return useMemo(() => {
-    if (!graph) return [];
-
-    const positions = calcLayout(graph);
-
-    const nodes: Node[] = Array.from(graph.nodes.values()).map((x) => {
-      return {
-        id: x.id,
-        type: 'ComponentNode',
-        data: {
-          node: x,
-          type: rootNode && x.component.id.isEqual(rootNode, { ignoreVersion: true }) ? 'root' : undefined,
-        },
-        position: positions.get(x.id) || { x: 0, y: 0 },
-      };
-    });
-
-    const edges: Edge[] = graph.edges.map((e) => ({
-      id: `_${e.sourceId}__${e.targetId}`,
-      source: e.sourceId,
-      target: e.targetId,
-      label: depTypeToLabel(e.dependencyLifecycleType),
-      labelBgPadding: [4, 4],
-      type: 'smoothstep',
-      className: depTypeToClass(e.dependencyLifecycleType),
-      arrowHeadType: ArrowHeadType.Arrow,
-    }));
-
-    return [...nodes, ...edges];
-  }, [graph]);
-}

package/ui/dependencies-graph/calc-layout.tsx

@@ -1,36 +0,0 @@
-import dagre, { graphlib } from 'dagre';
-import { GraphModel } from '../query';
-
-const NODE_WIDTH = 260;
-const NODE_HEIGHT = 90;
-
-const BOTTOM_TO_TOP = 'BT';
-
-/**
- * calculate the specific location of each node in the graph
- */
-export function calcLayout(graph: GraphModel) {
-  const g = new graphlib.Graph();
-  g.setGraph({ rankdir: BOTTOM_TO_TOP });
-  g.setDefaultEdgeLabel(() => ({}));
-
-  // make a new instance of { width, height } per node, or dagre will get confused and place all nodes in the same spot
-  graph.nodes.forEach((n) => g.setNode(n.id, { width: NODE_WIDTH, height: NODE_HEIGHT }));
-  graph.edges.forEach((e) => g.setEdge({ v: e.sourceId, w: e.targetId }));
-
-  // position items in graph
-  dagre.layout(g);
-
-  const positionsArr: [string, { x: number; y: number }][] = g.nodes().map((nodeId) => {
-    const node = g.node(nodeId);
-
-    const pos = {
-      x: node.x - node.width / 2,
-      y: node.y - node.height / 2,
-    };
-
-    return [nodeId, pos];
-  });
-
-  return new Map(positionsArr);
-}

package/ui/dependencies-graph/dep-edge/dep-edge.tsx

@@ -1,28 +0,0 @@
-import { EdgeType } from '@teambit/graph';
-import edgeStyles from './edge.module.scss';
-
-export function depTypeToClass(depType: string) {
-  switch (depType) {
-    case 'DEV':
-      return edgeStyles.dev;
-    case 'PEER':
-      return edgeStyles.peer;
-    case 'RUNTIME':
-      return edgeStyles.runtime;
-    default:
-      return undefined;
-  }
-}
-
-export function depTypeToLabel(type: EdgeType) {
-  switch (type) {
-    case EdgeType.peer:
-      return 'Peer Dependency';
-    case EdgeType.dev:
-      return 'Development Dependency';
-    case EdgeType.runtime:
-      return 'Dependency';
-    default:
-      return (type as string).toLowerCase();
-  }
-}

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

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

package/ui/dependencies-graph/dep-edge/index.ts

@@ -1 +0,0 @@
-export { depTypeToClass, depTypeToLabel } from './dep-edge';

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

@@ -1,83 +0,0 @@
-$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/dependencies-graph/dependencies-graph.tsx

@@ -1,98 +0,0 @@
-import React, { useMemo, useCallback, useRef, useEffect } from 'react';
-import classnames from 'classnames';
-import ReactFlow, {
-  Controls,
-  Background,
-  MiniMap,
-  OnLoadParams,
-  NodeTypesType,
-  Handle,
-  Position,
-  NodeProps,
-  ReactFlowProps,
-} from 'react-flow-renderer';
-import { ComponentID } from '@teambit/component';
-
-import { ComponentWidgetSlot } from '../../graph.ui.runtime';
-import { ComponentNode } from '../component-node';
-import { GraphModel } from '../query';
-import { calcElements } from './calc-elements';
-import { calcMinimapColors } from './minimap';
-import { ComponentGraphContext } from './graph-context';
-
-import styles from './dependencies-graph.module.scss';
-
-function ComponentNodeContainer(props: NodeProps) {
-  const { sourcePosition = Position.Top, targetPosition = Position.Bottom, data, id } = props;
-
-  return (
-    <div key={id}>
-      <Handle type="target" position={targetPosition} isConnectable={false} />
-      <Handle type="source" position={sourcePosition} isConnectable={false} />
-      <ComponentNode node={data.node} type={data.type} />
-    </div>
-  );
-}
-
-const NodeTypes: NodeTypesType = { ComponentNode: ComponentNodeContainer };
-
-export type DependenciesGraphProps = {
-  rootNode: ComponentID;
-  graph: GraphModel;
-  componentWidgets: ComponentWidgetSlot;
-  onLoad?: (instance: OnLoadParams) => void;
-} & Omit<ReactFlowProps, 'elements'>;
-
-export function DependenciesGraph({
-  graph,
-  rootNode,
-  componentWidgets,
-  className,
-  onLoad,
-  children,
-  ...rest
-}: DependenciesGraphProps) {
-  const graphRef = useRef<OnLoadParams>();
-  const elements = calcElements(graph, { rootNode });
-  const context = useMemo(() => ({ componentWidgets }), [componentWidgets]);
-
-  const handleLoad = useCallback(
-    (instance: OnLoadParams) => {
-      graphRef.current = instance;
-      instance.fitView();
-      onLoad?.(instance);
-    },
-    [onLoad]
-  );
-
-  // clear ref on unmount
-  useEffect(() => () => (graphRef.current = undefined), []);
-
-  useEffect(() => {
-    graphRef.current?.fitView();
-  }, [graph]);
-
-  return (
-    <ComponentGraphContext.Provider value={context}>
-      <ReactFlow
-        draggable={false}
-        nodesDraggable={true}
-        selectNodesOnDrag={false}
-        nodesConnectable={false}
-        zoomOnDoubleClick={false}
-        elementsSelectable={false}
-        maxZoom={1}
-        {...rest}
-        className={classnames(styles.graph, className)}
-        elements={elements}
-        nodeTypes={NodeTypes}
-        onLoad={handleLoad}
-      >
-        <Background />
-        <Controls className={styles.controls} />
-        <MiniMap nodeColor={calcMinimapColors} className={styles.minimap} />
-        {children}
-      </ReactFlow>
-    </ComponentGraphContext.Provider>
-  );
-}

package/ui/dependencies-graph/graph-context.ts

@@ -1,9 +0,0 @@
-import { createContext } from 'react';
-import { ComponentWidgetSlot } from '../../graph.ui.runtime';
-
-/** internal context, to pass shared information to all nodes */
-export type ComponentGraph = {
-  componentWidgets: ComponentWidgetSlot;
-};
-
-export const ComponentGraphContext = createContext<ComponentGraph | undefined>(undefined);

package/ui/dependencies-graph/index.ts

@@ -1,3 +0,0 @@
-export { DependenciesGraph } from './dependencies-graph';
-export { ComponentGraphContext, ComponentGraph } from './graph-context';
-export type { DependenciesGraphProps } from './dependencies-graph';

package/ui/dependencies-graph/minimap.ts

@@ -1,15 +0,0 @@
-import { Node } from 'react-flow-renderer';
-import { rootNodeColor, defaultNodeColor, externalNodeColor } from '../component-node';
-
-export function calcMinimapColors(node: Node) {
-  const type = node.data?.type;
-
-  switch (type) {
-    case 'root':
-      return rootNodeColor;
-    case 'external':
-      return externalNodeColor;
-    default:
-      return defaultNodeColor;
-  }
-}

package/ui/graph-page/graph-filters.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { Card, CardProps } from '@teambit/base-ui.surfaces.card';
-import { CheckboxLabel } from '@teambit/evangelist.input.checkbox.label';
-
-type GraphFilters = {
-  isFiltered: boolean;
-  onChangeFilter: (isFiltered: boolean) => void;
-  disable?: boolean;
-} & CardProps;
-
-export function GraphFilters({ onChangeFilter, isFiltered, disable, ...rest }: GraphFilters) {
-  return (
-    <Card {...rest}>
-      <div>
-        {/* show non-runtime === !isFiltered */}
-        <CheckboxLabel
-          checked={!isFiltered}
-          disabled={disable}
-          onInputChanged={(e) => onChangeFilter(!e.target.checked)}
-        >
-          {' '}
-          show non-runtime
-        </CheckboxLabel>
-      </div>
-    </Card>
-  );
-}

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

@@ -1,35 +0,0 @@
-.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
-}

package/ui/graph-page/graph-page.tsx

@@ -1,54 +0,0 @@
-import React, { useContext, useState } from 'react';
-
-import { H2 } from '@teambit/documenter.ui.heading';
-import { NotFoundPage } from '@teambit/design.ui.pages.not-found';
-import { ServerErrorPage } from '@teambit/design.ui.pages.server-error';
-import { ComponentContext } from '@teambit/component';
-import { FullLoader } from '@teambit/legacy/dist/to-eject/full-loader';
-
-import { useGraphQuery } from '../query';
-import { DependenciesGraph } from '../dependencies-graph';
-import { ComponentWidgetSlot } from '../../graph.ui.runtime';
-import type { GraphFilter } from '../../model/graph-filters';
-
-import { GraphFilters } from './graph-filters';
-
-import styles from './graph-page.module.scss';
-
-type GraphPageProps = {
-  componentWidgets: ComponentWidgetSlot;
-};
-
-export function GraphPage({ componentWidgets }: GraphPageProps) {
-  const component = useContext(ComponentContext);
-
-  const [filter, setFilter] = useState<GraphFilter>('runtimeOnly');
-  const onCheckFilter = (isFiltered: boolean) => {
-    setFilter(isFiltered ? 'runtimeOnly' : undefined);
-  };
-
-  const { graph, error, loading } = useGraphQuery([component.id.toString()], filter);
-  if (error) return error.code === 404 ? <NotFoundPage /> : <ServerErrorPage />;
-  if (!graph) return <FullLoader />;
-
-  const isFiltered = filter === 'runtimeOnly';
-
-  return (
-    <div className={styles.page}>
-      <H2 size="xs">Component Dependencies</H2>
-      <DependenciesGraph
-        componentWidgets={componentWidgets}
-        graph={graph}
-        rootNode={component.id}
-        className={styles.graph}
-      >
-        <GraphFilters
-          className={styles.filters}
-          disable={loading}
-          isFiltered={isFiltered}
-          onChangeFilter={onCheckFilter}
-        />
-      </DependenciesGraph>
-    </div>
-  );
-}

package/ui/graph-page/index.ts

@@ -1 +0,0 @@
-export { GraphPage } from './graph-page';