feat: add user journey support + learn panel

Author: apinkert

.storybook/hooks/scalprum.js

@@ -0,0 +1,25 @@
+/**
+ * Mock @scalprum/react-core for Storybook
+ * Based on insights-rbac-ui pattern
+ */
+
+// Mock Models object for virtual assistant
+const mockModels = {
+  ASK_RED_HAT: 'mock-ask-red-hat-model',
+};
+
+// Mock useLoadModule hook - returns mock module and loading: false
+export const useLoadModule = () => [mockModels, { loading: false }];
+
+// Mock useRemoteHook - returns empty hook result and loading: false
+export const useRemoteHook = () => ({
+  hookResult: [null, () => {}], // Mock state and setState
+  loading: false
+});
+
+// Mock useGetState - returns empty state
+export const useGetState = () => ({});
+
+// Mock other exports that might be needed
+export const initialize = () => {};
+export const getScalprum = () => ({});

.storybook/hooks/unleash.js

@@ -0,0 +1,14 @@
+/**
+ * Mock @unleash/proxy-client-react for Storybook
+ * Based on insights-rbac-ui pattern
+ */
+
+// Mock useFlag hook - always returns false
+export const useFlag = () => false;
+
+// Mock other exports
+export const FlagProvider = ({ children }) => children;
+export const UnleashClient = class {};
+export const useUnleashContext = () => ({});
+export const useVariant = () => ({ name: 'disabled', enabled: false });
+export const useFlags = () => [];

.storybook/hooks/useChrome.tsx

@@ -0,0 +1,54 @@
+/**
+ * Mock useChrome for Storybook
+ * Based on insights-rbac-ui pattern
+ */
+
+export default function useChrome() {
+  // Return the mock chrome from window if available
+  if (typeof window !== 'undefined' && window.insights?.chrome) {
+    // @ts-ignore
+    return window.insights.chrome;
+  }
+
+  // Fallback mock
+  return {
+    auth: {
+      getUser: async () => ({
+        identity: {
+          account_number: '12345',
+          org_id: '67890',
+          user: {
+            username: 'testuser',
+            email: 'test@example.com',
+            first_name: 'Test',
+            last_name: 'User',
+            is_active: true,
+            is_org_admin: false,
+          },
+          internal: {
+            account_id: '12345',
+          },
+        },
+      }),
+    },
+    getBundleData: () => ({ bundleId: 'insights' }),
+    getAvailableBundles: () => [
+      { id: 'insights', title: 'Red Hat Insights' },
+      { id: 'ansible', title: 'Ansible Automation Platform' },
+      { id: 'openshift', title: 'OpenShift' },
+      { id: 'settings', title: 'Settings' },
+    ],
+    updateDocumentTitle: (title: string) => {
+      if (typeof document !== 'undefined') {
+        document.title = title;
+      }
+    },
+    hideGlobalFilter: () => {},
+    isBeta: () => false,
+    isProd: () => false,
+    getEnvironment: () => 'stage',
+  };
+}
+
+// Named export for compatibility
+export { useChrome };

.storybook/main.ts

@@ -1,5 +1,6 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
 import remarkGfm from 'remark-gfm';
+import path from 'path';
 
 const config: StorybookConfig = {
   stories: ['../src/docs/*.mdx', '../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -15,6 +16,7 @@ const config: StorybookConfig = {
         },
       },
     },
+    'msw-storybook-addon',
   ],
   framework: {
     name: '@storybook/react-webpack5',
@@ -24,6 +26,27 @@ const config: StorybookConfig = {
     defaultName: 'Documentation',
   },
   webpackFinal: async (config) => {
+    // Mock external dependencies for Storybook (same pattern as insights-rbac-ui)
+    config.resolve = {
+      ...config.resolve,
+      alias: {
+        ...config.resolve?.alias,
+        // External dependency mocks
+        '@redhat-cloud-services/frontend-components/useChrome': path.resolve(
+          process.cwd(),
+          '.storybook/hooks/useChrome.tsx'
+        ),
+        '@unleash/proxy-client-react': path.resolve(
+          process.cwd(),
+          '.storybook/hooks/unleash.js'
+        ),
+        '@scalprum/react-core': path.resolve(
+          process.cwd(),
+          '.storybook/hooks/scalprum.js'
+        ),
+      },
+    };
+
     // Add SCSS support
     config.module = config.module || {};
     config.module.rules = config.module.rules || [];
@@ -44,6 +67,7 @@ const config: StorybookConfig = {
       propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
     },
   },
+  staticDirs: ['../public'],
 };
 
 export default config;

.storybook/preview.tsx

@@ -1,13 +1,61 @@
 import type { Preview } from '@storybook/react-webpack5';
 import '@patternfly/react-core/dist/styles/base.css';
 import React from 'react';
+import { initialize, mswLoader } from 'msw-storybook-addon';
+
+// Set up global chrome mock immediately
+if (typeof window !== 'undefined') {
+  const defaultMockChrome = {
+    auth: {
+      getUser: async () => ({
+        identity: {
+          account_number: '12345',
+          org_id: '67890',
+          user: {
+            username: 'testuser',
+            email: 'test@example.com',
+            first_name: 'Test',
+            last_name: 'User',
+            is_active: true,
+            is_org_admin: false,
+          },
+          internal: {
+            account_id: '12345',
+          },
+        },
+      }),
+    },
+    getBundleData: () => ({ bundleId: 'insights' }),
+    getAvailableBundles: () => [
+      { id: 'insights', title: 'Red Hat Insights' },
+      { id: 'ansible', title: 'Ansible Automation Platform' },
+      { id: 'openshift', title: 'OpenShift' },
+      { id: 'settings', title: 'Settings' },
+    ],
+    updateDocumentTitle: (title: string) => {
+      document.title = title;
+    },
+    hideGlobalFilter: () => {},
+    isBeta: () => false,
+    isProd: () => false,
+    getEnvironment: () => 'stage',
+  };
+
+  // @ts-ignore
+  window.insights = { chrome: defaultMockChrome };
+}
 
 const preview: Preview = {
+  beforeAll: async () => {
+    // Initialize MSW with error on unhandled requests to catch missing mocks
+    initialize({ onUnhandledRequest: 'warn' });
+  },
+  loaders: [mswLoader],
   parameters: {
     options: {
       storySort: {
         method: 'alphabetical',
-        order: ['Documentation', '*'],
+        order: ['Documentation', 'User Journeys', 'Components', '*'],
       },
     },
     layout: 'fullscreen',