chore: re-enable storybook, add support for mocking

.storybook/main.ts

@@ -0,0 +1,73 @@
+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) => {
+    // Update your babel configuration here
+    return options;
+  },
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+    },
+  },
+  core: {
+    builder: 'webpack5',
+  },
+  framework: '@storybook/react',
+  webpackFinal: async (config, { configType }) => {
+    // Make whatever fine-grained changes you need
+    // Return the altered config
+
+    const updatedConfig = merge(config, {
+      resolve: {
+        alias: {
+          '@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/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/'),
+        }
+      }
+    });
+
+    /**
+     * The first rule from the array it's the typescript one,
+     * it would be better to have a more deterministic way to ensure it*/
+    const [existingTypescriptConfig, ...rest] = updatedConfig.module.rules;
+
+    updatedConfig.module.rules = [
+      {
+        test: /\.(tsx|ts|jsx)?$/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+              experimentalWatchApi: true,
+            },
+          },
+        ],
+      },
+      ...rest,
+    ];
+
+    console.log(JSON.stringify(updatedConfig.module.rules, null, 4));
+
+    return updatedConfig;
+  },
+};

.storybook/preview.js → .storybook/preview.tsx

@@ -6,7 +6,13 @@ import '@patternfly/patternfly/utilities/Flex/flex.css';
 import '@patternfly/patternfly/utilities/Sizing/sizing.css';
 import '@patternfly/patternfly/utilities/Spacing/spacing.css';
 import 'reactflow/dist/style.css';
-import { AlertProvider } from "../src/layout";
+import { AlertProvider } from '../src/layout';
+import { worker } from '../src/__mocks__/browser';
+
+if (process.env.NODE_ENV === 'development') {
+  const { worker } = require('../src/__mocks__/browser');
+  worker.start();
+}
 
 export const decorators = [
   (Story) => (

package.json

@@ -130,6 +130,7 @@
     "jest-environment-jsdom": "^29.3.1",
     "lint-staged": "12.4.3",
     "mini-css-extract-plugin": "2.7.5",
+    "msw": "^1.1.0",
     "null-loader": "^4.0.1",
     "prettier": "2.8.7",
     "prop-types": "15.8.1",
@@ -193,5 +194,8 @@
     "dist",
     "src",
     "tsconfig.json"
-  ]
+  ],
+  "msw": {
+    "workerDirectory": "dist"
+  }
 }

src/App.tsx

@@ -1,3 +1,6 @@
+import './App.css';
+import { useIntegrationJsonStore } from './store';
+import { bindUndoRedo } from './utils';
 import { AlertProvider, AppLayout, MASLoading } from '@kaoto/layout';
 import { AppRoutes } from '@kaoto/routes';
 import '@patternfly/patternfly/patternfly-theme-dark.css';
@@ -12,9 +15,6 @@ import '@patternfly/patternfly/utilities/Text/text.css';
 import { Suspense } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import 'reactflow/dist/style.css';
-import './App.css';
-import { useIntegrationJsonStore } from './store';
-import { bindUndoRedo } from './utils';
 
 const { undo, redo } = useIntegrationJsonStore.temporal.getState();
 

src/__mocks__/browser.ts

@@ -0,0 +1,5 @@
+import { handlers } from './handlers';
+import { setupWorker } from 'msw';
+
+// This configures a Service Worker with the given request handlers.
+export const worker = setupWorker(...handlers);

src/__mocks__/handlers.ts

@@ -0,0 +1,18 @@
+// @ts-ignore
+import capabilitiesGet from './http/capabilities.get.json';
+import { rest } from 'msw';
+
+export const handlers = [
+  rest.get('http://localhost:8081/v1/capabilities', (_req, res, ctx) => {
+    return res(ctx.status(200), ctx.json(capabilitiesGet));
+  }),
+
+  rest.get('http://localhost:8081/v1/capabilities/namespace', (_req, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.json({
+        namespace: 'default',
+      })
+    );
+  }),
+];

src/__mocks__/http/capabilities.get.json

@@ -0,0 +1,41 @@
+{
+  "dsls": [
+    {
+      "output": "true",
+      "input": "true",
+      "validationSchema": "/v1/capabilities/Integration/schema",
+      "deployable": "true",
+      "name": "Integration",
+      "description": "An Integration defines a workflow of actions and steps.",
+      "step-kinds": "[CAMEL-CONNECTOR, EIP, EIP-BRANCH]"
+    },
+    {
+      "output": "true",
+      "input": "true",
+      "validationSchema": "/v1/capabilities/Camel Route/schema",
+      "deployable": "false",
+      "name": "Camel Route",
+      "description": "A camel route is a non deployable in cluster workflow of actions and steps.",
+      "step-kinds": "[CAMEL-CONNECTOR, EIP, EIP-BRANCH]"
+    },
+    {
+      "output": "true",
+      "input": "true",
+      "validationSchema": "/v1/capabilities/Kamelet/schema",
+      "deployable": "true",
+      "name": "Kamelet",
+      "description": "A Kamelet is a snippet of a route. It defines meta building blocks or steps that can be reused on integrations.",
+      "step-kinds": "[CAMEL-CONNECTOR, EIP, EIP-BRANCH]"
+    },
+    {
+      "output": "true",
+      "input": "true",
+      "default": "true",
+      "validationSchema": "/v1/capabilities/KameletBinding/schema",
+      "deployable": "true",
+      "name": "KameletBinding",
+      "description": "Kamelet Bindings are used to create simple integrations that link a start step to an end step with optional intermediate action steps.",
+      "step-kinds": "[KAMELET, KNATIVE]"
+    }
+  ]
+}

src/components/Catalog.stories.tsx

@@ -1,10 +1,28 @@
 import { Catalog } from './Catalog';
+import KaotoDrawer from './KaotoDrawer';
+import { DrawerContentBody } from '@patternfly/react-core';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
 export default {
   title: 'Catalog/Catalog',
   component: Catalog,
   argTypes: { handleClose: { action: 'clicked' } },
+  decorators: [
+    (Story) => (
+      <div style={{ height: 'calc(100vh - 29px)' }}>
+        <KaotoDrawer
+          isExpanded={true}
+          panelContent={
+            <DrawerContentBody style={{ padding: '10px' }}>
+              <Story />
+            </DrawerContentBody>
+          }
+          children={<></>}
+          position={'left'}
+        />
+      </div>
+    ),
+  ],
 } as ComponentMeta<typeof Catalog>;
 
 const Template: ComponentStory<typeof Catalog> = (args) => {