Extract graph components and utils to separate package

Upcoming changes to the pipeline graph components will be introducing new dependencies such as Carbon Charts which I'd like to keep separate from the rest of the application for now. Extracting the graph components to their own package makes this easier and allows consumers to opt-in to the heavier dependencies as needed. This change is mostly a move/rename with no functional impact. Also clean up some unwanted entries in the package-lock that were causing an unnecessary `node_modules/` to be created in the components package.
tektoncd · Mar 2, 2022 · bf3f51a · bf3f51a
1 parent 8913256
commit bf3f51a
Show file tree

Hide file tree

Showing 27 changed files with 124 additions and 40 deletions.
diff --git a/.storybook/Container.scss b/.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';
diff --git a/.storybook/main.js b/.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'

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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"
   ]
 }
diff --git a/packages/components/package.json b/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",

diff --git a/packages/components/src/components/index.js b/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';

diff --git a/packages/graph/package.json b/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"
+  }
+}
diff --git a/packages/utils/src/utils/buildGraphData.js → packages/graph/src/buildGraphData.js b/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;

diff --git a/.../components/src/components/Graph/Graph.js → packages/graph/src/components/Graph.js b/.../components/src/components/Graph/Graph.js → packages/graph/src/components/Graph.js
diff --git a/...omponents/src/components/Graph/Graph.scss → packages/graph/src/components/Graph.scss b/...omponents/src/components/Graph/Graph.scss → packages/graph/src/components/Graph.scss
diff --git a/...nts/src/components/Graph/Graph.stories.js → ...ges/graph/src/components/Graph.stories.js b/...nts/src/components/Graph/Graph.stories.js → ...ges/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} />;
diff --git a/...nts/src/components/Graph/InlineLoading.js → ...ges/graph/src/components/InlineLoading.js b/...nts/src/components/Graph/InlineLoading.js → ...ges/graph/src/components/InlineLoading.js
diff --git a/...s/components/src/components/Graph/Node.js → packages/graph/src/components/Node.js b/...s/components/src/components/Graph/Node.js → packages/graph/src/components/Node.js
diff --git a/...ents/src/components/Graph/Node.stories.js → ...ages/graph/src/components/Node.stories.js b/...ents/src/components/Graph/Node.stories.js → ...ages/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" />;

diff --git a/...mponents/src/components/Graph/NodeLink.js → packages/graph/src/components/NodeLink.js b/...mponents/src/components/Graph/NodeLink.js → packages/graph/src/components/NodeLink.js
diff --git a/...omponents/src/components/Graph/PanZoom.js → packages/graph/src/components/PanZoom.js b/...omponents/src/components/Graph/PanZoom.js → packages/graph/src/components/PanZoom.js
diff --git a/...nts/src/components/Graph/PipelineGraph.js → ...ges/graph/src/components/PipelineGraph.js b/...nts/src/components/Graph/PipelineGraph.js → ...ges/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';
 

diff --git a/...components/Graph/PipelineGraph.stories.js → ...h/src/components/PipelineGraph.stories.js b/...components/Graph/PipelineGraph.stories.js → ...h/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 = () => (

diff --git a/...components/Graph/ZoomablePipelineGraph.js → ...h/src/components/ZoomablePipelineGraph.js b/...components/Graph/ZoomablePipelineGraph.js → ...h/src/components/ZoomablePipelineGraph.js
diff --git a/...mponents/Graph/ZoomablePipelineGraph.scss → ...src/components/ZoomablePipelineGraph.scss b/...mponents/Graph/ZoomablePipelineGraph.scss → ...src/components/ZoomablePipelineGraph.scss
diff --git a/...ts/Graph/ZoomablePipelineGraph.stories.js → ...mponents/ZoomablePipelineGraph.stories.js b/...ts/Graph/ZoomablePipelineGraph.stories.js → ...mponents/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 = () => (

diff --git a/.../src/components/Graph/examples/graph.json → .../graph/src/components/examples/graph.json b/.../src/components/Graph/examples/graph.json → .../graph/src/components/examples/graph.json
diff --git a/...c/components/Graph/examples/pipeline.json → ...aph/src/components/examples/pipeline.json b/...c/components/Graph/examples/pipeline.json → ...aph/src/components/examples/pipeline.json
diff --git a/...omponents/Graph/examples/pipelineRun.json → .../src/components/examples/pipelineRun.json b/...omponents/Graph/examples/pipelineRun.json → .../src/components/examples/pipelineRun.json
diff --git a/.../src/components/Graph/examples/tasks.json → .../graph/src/components/examples/tasks.json b/.../src/components/Graph/examples/tasks.json → .../graph/src/components/examples/tasks.json
diff --git a/packages/graph/src/index.js b/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';
diff --git a/packages/utils/src/utils/index.js b/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';