fix: storybook fixes and cosmos upgrade (#523)

* feat: cosmos packages upgraded to v7 * fix: storybook fixes and cosmos upgrade
pegasystems · Oct 21, 2024 · dd60c9b · dd60c9b
1 parent f674910
commit dd60c9b
Show file tree

Hide file tree

Showing 6 changed files with 2,894 additions and 2,830 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -0,0 +1,45 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+import path from 'path';
+
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config: StorybookConfig = {
+  stories: process.env.STORYBOOK_CONSTELLATION
+    ? ['../src/components/custom-constellation/**/*.stories.@(js|jsx|ts|tsx)']
+    : ['../src/components/custom-sdk/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  framework: '@storybook/react-webpack5',
+  docs: {
+    autodocs: 'tag'
+  },
+  features: {
+    storyStoreV7: true
+  },
+  webpackFinal: async config => {
+    if (config.resolve?.alias) {
+      config.resolve.alias['@pega/react-sdk-components/lib/bridge/react_pconnect'] = path.resolve(__dirname, '../__mocks__/react_pconnect.jsx');
+      config.resolve.alias['@pega/react-sdk-components/lib/components/designSystemExtension/DetailsFields'] = path.resolve(
+        __dirname,
+        '../__mocks__/DetailsFields.js'
+      );
+      config.resolve.alias['@pega/react-sdk-components/lib/components/helpers/state-utils'] = path.resolve(__dirname, '../__mocks__/state-utils.tsx');
+      config.resolve.alias['@pega/auth/lib/sdk-auth-manager'] = path.resolve(__dirname, '../__mocks__/authManager.tsx');
+    }
+
+    if (config.module) {
+      config.module.rules?.push(
+        {
+          test: /\.(d.ts)$/,
+          loader: 'null-loader'
+        },
+        {
+          test: /\.(map)$/,
+          loader: 'null-loader'
+        }
+      );
+    }
+
+    return config;
+  }
+};
+
+export default config;
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,14 +1,22 @@
+import React from 'react';
+import { Preview } from '@storybook/react';
 import { Configuration, PopoverManager, Toaster, ModalManager, WorkTheme } from '@pega/cosmos-react-core';
-
+import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
+import { CssBaseline } from '@mui/material';
 import { getSdkComponentMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { theme } from '../src/theme';
 
 import { decorator } from '../__mocks__/react_pconnect';
 
-getSdkComponentMap();
+const isConstellation = process.env.STORYBOOK_CONSTELLATION;
+
+if (!isConstellation) {
+  getSdkComponentMap();
+}
 
-export const decorators = [
+const decorators = [
   (Story, context) => {
-    return (
+    return isConstellation ? (
       <Configuration>
         <PopoverManager>
           <Toaster dismissAfter={5000}>
@@ -18,12 +26,19 @@ export const decorators = [
           </Toaster>
         </PopoverManager>
       </Configuration>
+    ) : (
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <Story {...context} />
+        </ThemeProvider>
+      </StyledEngineProvider>
     );
   },
   decorator
 ];
 
-export const parameters = {
+const parameters = {
   backgrounds: {
     default: 'App',
     values: [
@@ -45,3 +60,10 @@ export const parameters = {
     source: { type: 'code' }
   }
 };
+
+const preview: Preview = {
+  decorators,
+  parameters
+};
+
+export default preview;