chore(storybook): re-enable for pull requests (#1805)

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

fix(storybook): fix typescript ide errors

chore(storybook): migrate to Meta, StoryFn

* fix(storybook): fix KaotoToolbar story

* fix(storybook): fix PlusButtonEdge story by refactoring component to move biz logic out

fix(test): fix edge tests for updated data structure

fix: fix issue with plus button edge

update yarn.lock

minor changes

chore: rebase

chore: rebase

add storybook-static to gitignore

.babelrc.json

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

.env.example

@@ -1 +1,2 @@
+CHROMATIC_PROJECT_TOKEN=14f589a59855
 KAOTO_API=http://localhost:8081

.github/workflows/chromatic.yml

@@ -0,0 +1,27 @@
+# .github/workflows/chromatic.yml
+
+# Workflow name
+name: 📖 Storybook (via Chromatic)
+
+# Event for the workflow
+on: push
+
+# List of jobs
+jobs:
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install dependencies
+        # 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm
+        run: yarn
+        # 👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Chromatic GitHub Action options
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: 14f589a59855
+          buildScriptName: build:storybook

.gitignore

@@ -17,6 +17,9 @@ dist
 # production
 /build
 
+# storybook
+storybook-static
+
 # misc
 .DS_Store
 .env

.storybook/main.ts

@@ -1,29 +1,36 @@
-const { merge } = require('webpack-merge');
+const {
+  merge
+} = require('webpack-merge');
 const prod = require('../webpack.prod.js');
 const path = require('path');
+const webpack = require('webpack');
+const { version } = require('../package.json');
 
 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;
   },
+  docs: {
+    autodocs: true
+  },
   typescript: {
     check: false,
     checkOptions: {},
     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 +40,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/')
         }
       }
     });
@@ -58,6 +65,12 @@ module.exports = {
       ],
     });
 
+    updatedConfig.plugins.push(
+      new webpack.DefinePlugin({
+        KAOTO_VERSION: JSON.stringify(version),
+      }),
+    );
+
     return updatedConfig;
-  },
+  }
 };

.storybook/preview.tsx

@@ -14,7 +14,7 @@ if (process.env.NODE_ENV === 'development') {
 }
 
 export const decorators = [
-  (Story) => (
+  (Story: any) => (
     <AlertProvider>
       <Story />
     </AlertProvider>

README.md

@@ -95,6 +95,14 @@ yarn e2e --browser firefox
 
 See the [Cypress docs](https://docs.cypress.io) for more information. There are also GitHub Actions workflows in `.github/workflows` that run the tests automatically on opening a pull request.
 
+### Storybook
+
+Storybook builds are enabled for all non-Dependabot pull requests to `kaoto-ui`, thanks to [Chromatic](https://main--61040cd029d0ce003b570dad.chromatic.com/). It gives you the ability to view stories for each pull request, which makes it easy to share development of new UI components with team members. Storybook also makes it easy to keep presentational components isolated. You can learn more about how to create a story for your UI component [here](https://storybook.js.org/docs/react/writing-stories/introduction).
+
+To run Storybook locally: `yarn storybook`
+
+To publish to Chromatic: `yarn chromatic`
+
 ## Build
 
 ```bash

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 --build-script-name 'build:storybook' --skip 'dependabot/**' --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-actions": "^7.0.8",
     "@storybook/addon-essentials": "^7.0.12",
     "@storybook/addon-interactions": "^7.0.12",
-    "@storybook/addon-links": "^6.5.16",
+    "@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.6",
     "@typescript-eslint/parser": "5.59.6",
     "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} />;
 };