Extract graph components and utils to separate package

.storybook/Container.scss

@@ -13,5 +13,5 @@ limitations under the License.
 
 @import '../src/scss/App';
 
-@import '@tektoncd/dashboard-components/src/components/Graph/Graph.scss';
-@import '@tektoncd/dashboard-components/src/components/Graph/ZoomablePipelineGraph.scss';
+@import '@tektoncd/dashboard-graph/src/components/Graph.scss';
+@import '@tektoncd/dashboard-graph/src/components/ZoomablePipelineGraph.scss';

.storybook/main.js

@@ -27,7 +27,7 @@ module.exports = {
   },
   stories: [
     '../src/**/*.stories.js',
-    '../packages/components/src/**/*.stories.js'
+    '../packages/**/*.stories.js'
   ],
   webpackFinal: async (config, { configType }) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'

package.json

@@ -113,6 +113,7 @@
   "//": "Workspaces must be listed explicitly to ensure they're processed in the correct order until npm natively supports detecting the topological order",
   "workspaces": [
     "packages/utils",
-    "packages/components"
+    "packages/components",
+    "packages/graph"
   ]
 }

packages/components/package.json

@@ -19,10 +19,6 @@
   },
   "dependencies": {
     "@tektoncd/dashboard-utils": "file:../utils",
-    "@visx/event": "^2.1.0",
-    "@visx/network": "^2.1.0",
-    "d3-path": "^1.0.8",
-    "elkjs": "^0.5.1",
     "js-yaml": "^3.13.0",
     "linkify-it": "^3.0.2",
     "prop-types": "^15.7.2",

packages/components/src/components/index.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2021 The Tekton Authors
+Copyright 2019-2022 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -19,7 +19,6 @@ export { default as DotSpinner } from './DotSpinner';
 export { default as ErrorBoundary } from './ErrorBoundary';
 export { default as FormattedDate } from './FormattedDate';
 export { default as FormattedDuration } from './FormattedDuration';
-export { default as Graph } from './Graph/Graph';
 export { default as Header } from './Header';
 export { default as KeyValueList } from './KeyValueList';
 export { default as LabelFilter } from './LabelFilter';
@@ -31,7 +30,6 @@ export { default as LogsToolbar } from './LogsToolbar';
 export { default as Modal } from './Modal';
 export { default as PageErrorBoundary } from './PageErrorBoundary';
 export { default as Param } from './Param';
-export { default as PipelineGraph } from './Graph/PipelineGraph';
 export { default as PipelineResources } from './PipelineResources';
 export { default as PipelineRun } from './PipelineRun';
 export { default as PipelineRuns } from './PipelineRuns';

packages/graph/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@tektoncd/dashboard-graph",
+  "version": "0.1.0",
+  "author": {
+    "name": "The Tekton Authors"
+  },
+  "keywords": [
+    "tekton",
+    "tektoncd",
+    "components",
+    "graph",
+    "visualization",
+    "react"
+  ],
+  "license": "Apache-2.0",
+  "private": false,
+  "main": "./src/index.js",
+  "scripts": {
+    "version": "npm pkg set \"dependencies.@tektoncd/dashboard-utils=$npm_new_version\"",
+    "postpublish": "npm pkg set \"dependencies.@tektoncd/dashboard-utils=file:../utils\""
+  },
+  "dependencies": {
+    "@tektoncd/dashboard-utils": "file:../utils",
+    "@visx/event": "^2.1.0",
+    "@visx/network": "^2.1.0",
+    "classnames": "^2.2.6",
+    "d3-path": "^1.0.8",
+    "elkjs": "^0.5.1"
+  },
+  "peerDependencies": {
+    "@carbon/icons-react": "^10.44.0",
+    "carbon-components-react": "^7.50.0",
+    "react": "^16.14.0 || ^17.0.1",
+    "react-intl": "^5.10.2"
+  },
+  "engines": {
+    "node": "^16.13.2",
+    "npm": "^8.1.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tektoncd/dashboard.git",
+    "directory": "packages/graph"
+  }
+}

packages/utils/src/utils/buildGraphData.js → packages/graph/src/buildGraphData.js

@@ -11,7 +11,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 /* istanbul ignore file */
-import { getStatus } from './status';
+import { getStatus } from '@tektoncd/dashboard-utils';
 
 const defaultHeight = 30;
 const defaultWidth = 200;

packages/components/src/components/Graph/Graph.stories.js → packages/graph/src/components/Graph.stories.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2020 The Tekton Authors
+Copyright 2019-2022 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -23,7 +23,7 @@ export default {
       default: 'white'
     }
   },
-  title: 'Experimental/Components/Graph/Graph'
+  title: 'Experimental/Graph/Graph'
 };
 
 export const Base = () => <Graph graph={graph} />;

packages/components/src/components/Graph/Node.stories.js → packages/graph/src/components/Node.stories.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2021 The Tekton Authors
+Copyright 2019-2022 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -69,7 +69,7 @@ export default {
       default: 'white'
     }
   },
-  title: 'Experimental/Components/Graph/Node'
+  title: 'Experimental/Graph/Node'
 };
 
 export const Start = () => <Node type="Start" width="60" height="60" />;

packages/components/src/components/Graph/PipelineGraph.js → packages/graph/src/components/PipelineGraph.js

@@ -12,7 +12,7 @@ limitations under the License.
 */
 /* istanbul ignore file */
 import React, { Component } from 'react';
-import { buildGraphData } from '@tektoncd/dashboard-utils';
+import buildGraphData from '../buildGraphData';
 
 import Graph from './Graph';
 

packages/components/src/components/Graph/PipelineGraph.stories.js → packages/graph/src/components/PipelineGraph.stories.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2020 The Tekton Authors
+Copyright 2019-2022 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -26,7 +26,7 @@ export default {
       default: 'white'
     }
   },
-  title: 'Experimental/Components/Graph/PipelineGraph'
+  title: 'Experimental/Graph/PipelineGraph'
 };
 
 export const Base = () => (

packages/components/src/components/Graph/ZoomablePipelineGraph.stories.js → packages/graph/src/components/ZoomablePipelineGraph.stories.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2020 The Tekton Authors
+Copyright 2019-2022 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -26,7 +26,7 @@ export default {
       default: 'white'
     }
   },
-  title: 'Experimental/Components/Graph/ZoomablePipelineGraph'
+  title: 'Experimental/Graph/ZoomablePipelineGraph'
 };
 
 export const Base = () => (

packages/graph/src/index.js

@@ -0,0 +1,18 @@
+/*
+Copyright 2022 The Tekton Authors
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+/* istanbul ignore file */
+
+export { default as buildGraphData } from './buildGraphData';
+
+export { default as Graph } from './components/Graph';
+export { default as PipelineGraph } from './components/PipelineGraph';

packages/utils/src/utils/index.js

@@ -14,7 +14,6 @@ limitations under the License.
 import { labels as labelConstants } from './constants';
 import { getStatus } from './status';
 
-export { default as buildGraphData } from './buildGraphData';
 export * from './constants';
 export * from './hooks';
 export { paths, urls } from './router';