fix(storybook): upgrade to 7.x, re-enable chromatic

fix(storybook): fix typescript ide errors

chore(storybook): migrate to Meta, StoryFn

.babelrc.json

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.storybook/main.ts

@@ -1,12 +1,13 @@
-const { merge } = require('webpack-merge');
+const {
+  merge
+} = require('webpack-merge');
 const prod = require('../webpack.prod.js');
 const path = require('path');
-
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   staticDirs: ['../public'],
   addons: ['@storybook/addon-essentials'],
-  babel: async (options) => {
+  babel: async (options: any) => {
     // Update your babel configuration here
     return options;
   },
@@ -16,14 +17,14 @@ module.exports = {
     reactDocgen: 'react-docgen-typescript',
     reactDocgenTypescriptOptions: {
       shouldExtractLiteralValuesFromEnum: true,
-      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
-    },
+      propFilter: (prop: { parent: { fileName: string; }; }) => prop.parent ? !/node_modules/.test(prop.parent.fileName) : true
+    }
   },
-  core: {
-    builder: 'webpack5',
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
   },
-  framework: '@storybook/react',
-  webpackFinal: async (config, { configType }) => {
+  webpackFinal: async (config: any, {}: any) => {
     // Make whatever fine-grained changes you need
     // Return the altered config
 
@@ -33,14 +34,14 @@ module.exports = {
           '@kaoto/api': path.resolve(__dirname, '../src/api/'),
           '@kaoto/assets': path.resolve(__dirname, '../src/assets/'),
           '@kaoto/components': path.resolve(__dirname, '../src/components/'),
-          '@kaoto/constants': path.resolve(__dirname, '../src/store/constants/'),
+          '@kaoto/constants': path.resolve(__dirname, '../src/constants/'),
           '@kaoto/hooks': path.resolve(__dirname, '../src/hooks/'),
           '@kaoto/layout': path.resolve(__dirname, '../src/layout/'),
           '@kaoto/types': path.resolve(__dirname, '../src/types/'),
           '@kaoto/routes': path.resolve(__dirname, '../src/routes/'),
           '@kaoto/services': path.resolve(__dirname, '../src/services/'),
           '@kaoto/store': path.resolve(__dirname, '../src/store/'),
-          '@kaoto/utils': path.resolve(__dirname, '../src/utils/'),
+          '@kaoto/utils': path.resolve(__dirname, '../src/utils/')
         }
       }
     });
@@ -60,4 +61,7 @@ module.exports = {
 
     return updatedConfig;
   },
+  docs: {
+    autodocs: true
+  }
 };

package.json

@@ -15,7 +15,8 @@
     "build:dev": "webpack --mode production --config webpack.dev.js",
     "build:lib": "rimraf dist/lib && yarn copy:css && yarn copy:images && tsc -p tsconfig.lib.json && node ./scripts/fixTsPathsAlias.js",
     "build:lib:watch": "tsc-watch --noClear -p tsconfig.lib.json",
-    "build:storybook": "build-storybook",
+    "build-storybook": "storybook build",
+    "chromatic": "chromatic --exit-zero-on-changes",
     "copy:css": "copyfiles -u 1 \"src/**/*.{sass,scss,css}\" dist/lib/",
     "copy:images": "cpr ./src/assets ./dist/lib/assets",
     "clean": "rimraf dist",
@@ -26,7 +27,7 @@
     "lint": "eslint --ext .ts,.tsx,.js ./src",
     "lint:fix": "yarn lint --fix",
     "lint-staged": "yarn lint:fix && yarn format:fix",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "storybook dev -p 6006",
     "test": "jest --coverage src/**/*.test.ts*",
     "test:watch": "jest --watch"
   },
@@ -82,14 +83,18 @@
   "devDependencies": {
     "@4tw/cypress-drag-drop": "^2.2.3",
     "@babel/core": "^7.21.8",
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.5",
     "@module-federation/typescript": "^2.3.0",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^7.0.10",
-    "@storybook/addon-interactions": "^7.0.10",
-    "@storybook/addon-links": "^6.5.16",
+    "@storybook/addon-actions": "^7.0.8",
+    "@storybook/addon-essentials": "^7.0.8",
+    "@storybook/addon-interactions": "^7.0.8",
+    "@storybook/addon-links": "^7.0.8",
     "@storybook/builder-webpack5": "^6.5.16",
     "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^6.5.16",
+    "@storybook/react": "^7.0.8",
+    "@storybook/react-webpack5": "^7.0.8",
     "@storybook/testing-library": "^0.1.0",
     "@testing-library/dom": "^9.3.0",
     "@testing-library/jest-dom": "^5.16.5",
@@ -107,6 +112,7 @@
     "@typescript-eslint/eslint-plugin": "^5.59.5",
     "@typescript-eslint/parser": "5.59.5",
     "babel-loader": "^9.1.2",
+    "chromatic": "^6.17.3",
     "copy-webpack-plugin": "^11.0.0",
     "copyfiles": "^2.4.1",
     "cpr": "^3.0.1",
@@ -138,6 +144,7 @@
     "react-refresh": "^0.14.0",
     "rimraf": "5.0.0",
     "source-map-loader": "4.0.1",
+    "storybook": "^7.0.8",
     "style-loader": "3.3.2",
     "tar-webpack-plugin": "^0.1.1",
     "ts-jest": "29.1.0",

setupTests.ts

@@ -1,7 +1,7 @@
+import { stepsCatalog } from './src/stubs';
 import '@testing-library/jest-dom';
 import { TextEncoder } from 'util';
 import 'whatwg-fetch';
-import { stepsCatalog } from './src/stubs/steps';
 
 global.TextEncoder = TextEncoder;
 global.KAOTO_VERSION = '1.0-test';

src/components/AppearanceModal.stories.tsx

@@ -1,6 +1,6 @@
 import { AppearanceModal } from './AppearanceModal';
 import { useArgs } from '@storybook/client-api';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 export default {
   title: 'Settings/AppearanceModal',
@@ -13,9 +13,9 @@ export default {
     ),
   ],
   argTypes: { handleCloseModal: { action: 'clicked' } },
-} as ComponentMeta<typeof AppearanceModal>;
+} as Meta<typeof AppearanceModal>;
 
-const Template: ComponentStory<typeof AppearanceModal> = (args) => {
+const Template: StoryFn<typeof AppearanceModal> = (args) => {
   const [{ isModalOpen }, updateArgs] = useArgs();
   const handleClose = () => updateArgs({ isModalOpen: !isModalOpen });
   return (

src/components/Catalog.stories.tsx

@@ -1,7 +1,7 @@
 import { Catalog } from './Catalog';
 import KaotoDrawer from './KaotoDrawer';
 import { DrawerContentBody } from '@patternfly/react-core';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 export default {
   title: 'Catalog/Catalog',
@@ -23,9 +23,9 @@ export default {
       </div>
     ),
   ],
-} as ComponentMeta<typeof Catalog>;
+} as Meta<typeof Catalog>;
 
-const Template: ComponentStory<typeof Catalog> = (args) => {
+const Template: StoryFn<typeof Catalog> = (args) => {
   return <Catalog {...args} />;
 };
 

src/components/ConfirmationModal.stories.tsx

@@ -1,6 +1,6 @@
 import { ConfirmationModal } from './ConfirmationModal';
 import { useArgs } from '@storybook/client-api';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 export default {
   title: 'Layout/ConfirmationModal',
@@ -13,9 +13,9 @@ export default {
     ),
   ],
   argTypes: { handleCloseModal: { action: 'clicked' } },
-} as ComponentMeta<typeof ConfirmationModal>;
+} as Meta<typeof ConfirmationModal>;
 
-const Template: ComponentStory<typeof ConfirmationModal> = (args) => {
+const Template: StoryFn<typeof ConfirmationModal> = (args) => {
   const [{ isModalOpen }, updateArgs] = useArgs();
   const handleClose = () => updateArgs({ isModalOpen: !isModalOpen });
   return (

src/components/Console.stories.tsx

@@ -1,13 +1,13 @@
 import { Console } from './Console';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 export default {
   title: 'Layout/Console',
   component: Console,
   argTypes: { handleCloseConsole: { action: 'closed' } },
-} as ComponentMeta<typeof Console>;
+} as Meta<typeof Console>;
 
-const Template: ComponentStory<typeof Console> = (args) => {
+const Template: StoryFn<typeof Console> = (args) => {
   return <Console {...args} />;
 };
 

src/components/DeploymentsModal.stories.tsx

@@ -1,6 +1,6 @@
 import { DeploymentsModal } from './DeploymentsModal';
 import { useArgs } from '@storybook/client-api';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 export default {
   title: 'Deployment/DeploymentsModal',
@@ -13,9 +13,9 @@ export default {
     ),
   ],
   argTypes: { handleCloseModal: { action: 'clicked' } },
-} as ComponentMeta<typeof DeploymentsModal>;
+} as Meta<typeof DeploymentsModal>;
 
-const Template: ComponentStory<typeof DeploymentsModal> = (args) => {
+const Template: StoryFn<typeof DeploymentsModal> = (args) => {
   const [{ isModalOpen }, updateArgs] = useArgs();
   const handleClose = () => updateArgs({ isModalOpen: !isModalOpen });
   return (

src/components/Extension.stories.tsx

@@ -1,12 +1,12 @@
 import { Extension } from './Extension';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 export default {
   title: 'Step Views/Extension',
   component: Extension,
-} as ComponentMeta<typeof Extension>;
+} as Meta<typeof Extension>;
 
-const Template: ComponentStory<typeof Extension> = (args) => {
+const Template: StoryFn<typeof Extension> = (args) => {
   return <Extension {...args} />;
 };
 

src/components/FieldLabelIcon.stories.tsx

@@ -1,5 +1,5 @@
 import { FieldLabelIcon } from './FieldLabelIcon';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 export default {
   title: 'Step Views/FieldLabelIcon',
@@ -11,9 +11,9 @@ export default {
       </div>
     ),
   ],
-} as ComponentMeta<typeof FieldLabelIcon>;
+} as Meta<typeof FieldLabelIcon>;
 
-const Template: ComponentStory<typeof FieldLabelIcon> = (args) => {
+const Template: StoryFn<typeof FieldLabelIcon> = (args) => {
   return <FieldLabelIcon {...args} disabled={false} />;
 };
 

src/components/Icons.stories.tsx

@@ -1,13 +1,13 @@
 import { CustomExclamationTriangleIcon } from './Icons';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 export default {
   title: 'Layout/Icons',
   component: CustomExclamationTriangleIcon,
   argTypes: { props: { color: 'orange' } },
-} as ComponentMeta<typeof CustomExclamationTriangleIcon>;
+} as Meta<typeof CustomExclamationTriangleIcon>;
 
-const Template: ComponentStory<typeof CustomExclamationTriangleIcon> = (args) => {
+const Template: StoryFn<typeof CustomExclamationTriangleIcon> = (args) => {
   return <CustomExclamationTriangleIcon {...args} />;
 };
 

src/components/KaotoToolbar.stories.tsx

@@ -1,5 +1,5 @@
 import { KaotoToolbar } from './KaotoToolbar';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 export default {
   title: 'Layout/KaotoToolbar',
@@ -9,9 +9,9 @@ export default {
     toggleCatalog: { action: 'toggled' },
     toggleCodeEditor: { action: 'toggled' },
   },
-} as ComponentMeta<typeof KaotoToolbar>;
+} as Meta<typeof KaotoToolbar>;
 
-const Template: ComponentStory<typeof KaotoToolbar> = (args) => {
+const Template: StoryFn<typeof KaotoToolbar> = (args) => {
   return <KaotoToolbar {...args} />;
 };
 

src/components/MiniCatalog.stories.tsx

@@ -1,6 +1,6 @@
 import { MiniCatalog } from './MiniCatalog';
 import { IStepQueryParams } from '@kaoto/types';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 export default {
   title: 'Catalog/MiniCatalog',
@@ -14,9 +14,9 @@ export default {
       type: 'START',
     } as IStepQueryParams,
   },
-} as ComponentMeta<typeof MiniCatalog>;
+} as Meta<typeof MiniCatalog>;
 
-const Template: ComponentStory<typeof MiniCatalog> = (args) => {
+const Template: StoryFn<typeof MiniCatalog> = (args) => {
   return <MiniCatalog {...args} />;
 };
 

src/components/PlusButtonEdge.stories.tsx

@@ -1,5 +1,5 @@
 import { PlusButtonEdge } from './PlusButtonEdge';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { ReactFlowProvider } from 'reactflow';
 
 export default {
@@ -23,9 +23,9 @@ export default {
       </ReactFlowProvider>
     ),
   ],
-} as ComponentMeta<typeof PlusButtonEdge>;
+} as Meta<typeof PlusButtonEdge>;
 
-const Template: ComponentStory<typeof PlusButtonEdge> = (args) => {
+const Template: StoryFn<typeof PlusButtonEdge> = (args) => {
   return <PlusButtonEdge {...args} />;
 };
 

src/components/SettingsModal.stories.tsx

@@ -1,6 +1,6 @@
 import { SettingsModal } from './SettingsModal';
 import { useArgs } from '@storybook/client-api';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 export default {
   title: 'Settings/SettingsModal',
@@ -13,9 +13,9 @@ export default {
     ),
   ],
   argTypes: { handleCloseModal: { action: 'clicked' } },
-} as ComponentMeta<typeof SettingsModal>;
+} as Meta<typeof SettingsModal>;
 
-const Template: ComponentStory<typeof SettingsModal> = (args) => {
+const Template: StoryFn<typeof SettingsModal> = (args) => {
   const [{ isModalOpen }, updateArgs] = useArgs();
   const handleClose = () => updateArgs({ isModalOpen: !isModalOpen });
   return (

src/components/SourceCodeEditor.stories.tsx

@@ -1,12 +1,12 @@
 import { SourceCodeEditor } from './SourceCodeEditor';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 export default {
   title: 'Code Editor/SourceCodeEditor',
   component: SourceCodeEditor,
-} as ComponentMeta<typeof SourceCodeEditor>;
+} as Meta<typeof SourceCodeEditor>;
 
-const Template: ComponentStory<typeof SourceCodeEditor> = (args) => {
+const Template: StoryFn<typeof SourceCodeEditor> = (args) => {
   return <SourceCodeEditor {...args} />;
 };