Added the ability to run Constellation Storybooks

Author: Sharma

.storybook-constellation/main.ts

@@ -0,0 +1,41 @@
+import path from 'path';
+
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: ['../src/app/_components//custom-constellation/**/*.stories.@(js|jsx|ts|tsx)'],
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
+  },
+
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', '@chromatic-com/storybook'],
+  framework: '@storybook/react-webpack5',
+
+  webpackFinal: async config => {
+    if (config.resolve?.alias) {
+      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'
+        },
+        {
+          test: /\.tsx?$/,
+          use: 'ts-loader',
+          exclude: /node_modules/
+        }
+      );
+    }
+
+    return config;
+  }
+};
+
+export default config;

.storybook-constellation/preview.tsx

@@ -0,0 +1,49 @@
+import { Preview } from '@storybook/react';
+import { Configuration, PopoverManager, Toaster, ModalManager, WorkTheme } from '@pega/cosmos-react-core';
+import setPCoreMocks from '../__mocks__/pcoreMocks';
+
+setPCoreMocks();
+
+const decorators = [
+  (Story, context) => {
+    return (
+      <Configuration>
+        <PopoverManager>
+          <Toaster dismissAfter={5000}>
+            <ModalManager>
+              <Story {...context} />
+            </ModalManager>
+          </Toaster>
+        </PopoverManager>
+      </Configuration>
+    );
+  }
+];
+
+const parameters = {
+  backgrounds: {
+    default: 'App',
+    values: [
+      {
+        name: 'App',
+        value: WorkTheme.base.palette['app-background']
+      },
+      {
+        name: 'Primary',
+        value: WorkTheme.base.palette['primary-background']
+      },
+      {
+        name: 'Secondary',
+        value: WorkTheme.base.palette['secondary-background']
+      }
+    ]
+  },
+  tags: ['!autodocs']
+};
+
+const preview: Preview = {
+  decorators,
+  parameters
+};
+
+export default preview;

.storybook/main.ts .storybook-sdk/main.ts.storybook/main.ts renamed to .storybook-sdk/main.ts

@@ -6,7 +6,7 @@
     "resolveJsonModule": true,
     "emitDecoratorMetadata": false
   },
-  "exclude": ["../src/test.ts", "../src/**/*.spec.ts", "../src/app/_components/custom-constellation/**"],
+  "exclude": ["../src/test.ts", "../src/**/*.spec.ts"],
   "include": ["../src/**/*", "./preview.ts", "../__mocks__/*"],
   "files": ["./typings.d.ts"]
 }

.storybook/preview.ts .storybook-sdk/preview.ts.storybook/preview.ts renamed to .storybook-sdk/preview.ts

@@ -0,0 +1,70 @@
+// /* eslint-disable react/jsx-filename-extension */
+
+// import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
+// import AutoComplete from '@pega/react-sdk-components/lib/components/field/AutoComplete';
+// import Email from '@pega/react-sdk-components/lib/components/field/Email';
+// import Phone from '@pega/react-sdk-components/lib/components/field/Phone';
+// import Operator from '@pega/react-sdk-components/lib/components/designSystemExtension/Operator';
+// import Currency from '@pega/react-sdk-components/lib/components/field/Currency';
+// import RadioButtons from '@pega/react-sdk-components/lib/components/field/RadioButtons';
+
+// // Making TextInput the default component
+// let compType = TextInput;
+// let formIndex = 0;
+// let detailsIndex = 0;
+// let detailsRegionIndex = 0;
+
+// const createPConnectComponent = () => {
+//   const formComponents = [TextInput, TextInput, TextInput, Phone, AutoComplete, Email];
+//   const detailsComponents = [TextInput, TextInput, TextInput, Email, Phone, Currency, RadioButtons, Operator];
+//   const detailsRegionComponents = [
+//     TextInput,
+//     TextInput,
+//     TextInput,
+//     Email,
+//     Phone,
+//     Currency,
+//     RadioButtons,
+//     TextInput,
+//     TextInput,
+//     TextInput,
+//     Email,
+//     Phone,
+//     Currency,
+//     Operator
+//   ];
+
+//   let component;
+
+//   switch (compType) {
+//     case 'Details':
+//       if (detailsIndex >= detailsComponents.length) {
+//         detailsIndex = 0;
+//       }
+//       component = detailsComponents[detailsIndex++];
+//       break;
+
+//     case 'DetailsRegion':
+//       if (detailsRegionIndex >= detailsRegionComponents.length) {
+//         detailsRegionIndex = 0;
+//       }
+//       component = detailsRegionComponents[detailsRegionIndex++];
+//       break;
+
+//     default:
+//       if (formIndex >= formComponents.length) {
+//         formIndex = 0;
+//       }
+//       component = formComponents[formIndex++];
+//   }
+
+//   return component;
+// };
+// export default createPConnectComponent;
+
+// // The decorator to be used in ./storybook/preview to apply the mock to all stories
+
+// export function decorator(story, parameters) {
+//   compType = parameters.parameters?.type;
+//   return story();
+// }

.storybook/tsconfig.json .storybook-sdk/tsconfig.json.storybook/tsconfig.json renamed to .storybook-sdk/tsconfig.json

@@ -0,0 +1,40 @@
+// import { connect, Provider, shallowEqual } from 'react-redux';
+
+// const connectToState = (mapStateToProps = () => {}) => {
+//   return Component => {
+//     const ConnectedComponent = connect(mapStateToProps, null, null, {
+//       areStatePropsEqual: (next, prev: any) => {
+//         // Compare visibility
+//         const prevWasVisible = prev.visibility !== false;
+//         if (next.visibility !== undefined && next.visibility !== prevWasVisible) {
+//           return false;
+//         }
+//         // Compare start props
+//         const c11nEnv = next.getPConnect();
+//         const allStateProps = c11nEnv.getStateProps();
+//         for (const key of Object.keys(allStateProps)) {
+//           if (!shallowEqual(next[key], prev[key]) || (next.routingInfo && !PCore.isDeepEqual(next.routingInfo, prev.routingInfo))) {
+//             return false;
+//           }
+//         }
+//         /* TODO For some rawConfig we are not getting routingInfo under allStateProps */
+//         return !(
+//           'routingInfo' in next &&
+//           (!shallowEqual(next.routingInfo, prev.routingInfo) || !PCore.isDeepEqual(next.routingInfo, prev.routingInfo))
+//         );
+//       }
+//     })(Component);
+
+//     return (ownProps = {}) => {
+//       const store = { getState: () => {}, subscribe: () => {}, dispatch: () => {} };
+
+//       return (
+//         <Provider store={store}>
+//           <ConnectedComponent {...ownProps} />
+//         </Provider>
+//       );
+//     };
+//   };
+// };
+
+// export default connectToState;