Update graph package to Carbon 11 and latest @carbon/charts-react

Re-enable stories and re-org slightly to make it clear in the source tree which components are considered legacy.
LyndseyBu · Jul 23, 2024 · 4098e93 · 4098e93
1 parent 585bed1
commit 4098e93
Show file tree

Hide file tree

Showing 23 changed files with 155 additions and 316 deletions.
diff --git a/.storybook/Container.scss b/.storybook/Container.scss
@@ -15,10 +15,10 @@ limitations under the License.
 @use '@carbon/react/scss/theme' as *;
 @import './welcome';
 
-// @import '@tektoncd/dashboard-graph/src/components/Graph.scss';
-// @import '@tektoncd/dashboard-graph/src/components/ZoomablePipelineGraph.scss';
+@import '@tektoncd/dashboard-graph/src/components/legacy/Graph.scss';
+@import '@tektoncd/dashboard-graph/src/components/legacy/ZoomablePipelineGraph.scss';
 
-// @import '@tektoncd/dashboard-graph/src/components/newGraph.scss';
+@import '@tektoncd/dashboard-graph/src/components/newGraph.scss';
 
 .tkn--storybook-theme {
   background-color: $background;

diff --git a/.storybook/Welcome.mdx b/.storybook/Welcome.mdx
@@ -16,8 +16,8 @@ import LinkTo from '@storybook/addon-links/react';
 
 import PackageInfo from '../packages/components/package.json';
 import * as DetailsHeaderStories from '../packages/components/src/components/DetailsHeader/DetailsHeader.stories';
-// import * as GraphStories from '../packages/graph/src/components/Graph/Graph.stories';
-// import * as NodeStories from '../packages/graph/src/components/Node/Node.stories';
+import * as GraphStories from '../packages/graph/src/components/Graph/Graph.stories';
+import * as NodeStories from '../packages/graph/src/components/Node/Node.stories';
 import * as RunHeaderStories from '../packages/components/src/components/RunHeader/RunHeader.stories';
 
 import tektonDashboardLogo from '../src/images/tekton-dashboard-color.svg';
@@ -103,9 +103,7 @@ import tektonDashboardLogo from '../src/images/tekton-dashboard-color.svg';
 
       An example of these are the <LinkTo className="storylink" kind="Experimental/Graph/Graph" story="Detailed-1">`Graph`</LinkTo> components published in `@tektoncd/dashboard-graph` which provide a visualisation of a pipeline's structure.
 
-      {/*
       <Canvas className="tkn-graph-story" of={GraphStories.Condensed1} withToolbar />
       <Canvas className="tkn-graph-story" of={GraphStories.Detailed1} showToolbar />
-      */}
     </div>
 </Unstyled>
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -46,8 +46,8 @@ const config = {
   stories: (_config, { configType }) => ([
     { directory: '.', files: 'Welcome.mdx' },
     configType === 'DEVELOPMENT' ? { directory: '../src', files: '**/*.stories.@(js|jsx)', titlePrefix: 'Containers' } : null,
-    { directory: '../packages/components', files: '**/*.stories.@(js|jsx)', titlePrefix: 'Components' }
-    // { directory: '../packages/graph', files: '**/*.stories.@(js|jsx)', titlePrefix: 'Experimental/Graph' }
+    { directory: '../packages/components', files: '**/*.stories.@(js|jsx)', titlePrefix: 'Components' },
+    { directory: '../packages/graph', files: '**/*.stories.@(js|jsx)', titlePrefix: 'Experimental/Graph' }
   ].filter(Boolean)),
   async viteFinal(config, { configType }) {
     // fallback to default to resolve issue with MDX rendering