Upgrade typedefs, storybook, removed vulnerabilities (#558)

* Upgrade typedefs, storybook, removed vulnerabilities

* Fix package.lock

* Remove oveerides

* Moved Storybook to 8 and moved tinymce to 6.8

* Fix for __docgenInfo property missing and having to add ts-nocheck

---------

Co-authored-by: Sharma <[email protected]>

Author: vishalshrm539

.npmrc

@@ -2,6 +2,5 @@
 registry = https://registry.npmjs.org/
 # For now, turn off npm auto-install of peer dependencies to get rid of warnings
 legacy-peer-deps=true
-# Turn off messages such as > [email protected] list and > dx-component-builder-sdk list
-loglevel=silent
+loglevel=notice
 #

.storybook/main.ts

@@ -1,19 +1,25 @@
-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
+const config = {
+  stories:
+    process.env.STORYBOOK === 'constellation'
+      ? ['../src/components/custom-constellation/**/*.stories.@(js|jsx|ts|tsx)']
+      : ['../src/components/custom-sdk/**/*.stories.@(js|jsx|ts|tsx)'],
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
   },
+
+  addons: [
+    '@storybook/addon-links',
+    {
+      name: '@storybook/addon-docs',
+      options: { mdxBabelOptions: { babelrc: true, configFile: true } }
+    }
+  ],
+  framework: '@storybook/react-webpack5',
+
   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');
@@ -34,6 +40,11 @@ const config: StorybookConfig = {
         {
           test: /\.(map)$/,
           loader: 'null-loader'
+        },
+        {
+          test: /\.tsx?$/,
+          use: 'ts-loader',
+          exclude: /node_modules/
         }
       );
     }

.storybook/preview.tsx

@@ -1,4 +1,3 @@
-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';
@@ -8,7 +7,7 @@ import { theme } from '../src/theme';
 
 import { decorator } from '../__mocks__/react_pconnect';
 
-const isConstellation = process.env.STORYBOOK_CONSTELLATION;
+const isConstellation = process.env.STORYBOOK === 'constellation';
 
 if (!isConstellation) {
   getSdkComponentMap();
@@ -57,7 +56,8 @@ const parameters = {
     ]
   },
   docs: {
-    source: { type: 'code' }
+    source: { type: 'code' },
+    codePanel: true
   }
 };
 

.storybook/theme.js .storybook/theme.mjs.storybook/theme.js renamed to .storybook/theme.mjs

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-array-index-key */
 import React, { createElement, isValidElement } from 'react';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
@@ -46,7 +47,6 @@ export default function DetailsFields(props) {
     fieldComponents.push({
       type: theCompType,
       label,
-      // eslint-disable-next-line react/no-array-index-key
       value: <React.Fragment key={index}>{createElement(createPConnectComponent(), thePConn.getReferencedViewPConnect())}</React.Fragment>
     });
   });
@@ -115,14 +115,12 @@ export default function DetailsFields(props) {
       }
       if (isValidElement(field?.value)) {
         return (
-          // eslint-disable-next-line react/no-array-index-key
           <Grid container spacing={1} style={{ padding: '4px 0px' }} key={index}>
             {getGridItem(field, `${index}-item`)}
           </Grid>
         );
       }
       return (
-        // eslint-disable-next-line react/no-array-index-key
         <Grid container spacing={1} style={{ padding: '4px 0px' }} key={index}>
           {getGridItemLabel(field, `${index}-label`)}
           {getGridItemValue(field, `${index}-value`)}

__mocks__/DetailsFields.jsx

@@ -1,7 +1,7 @@
 import { connect, Provider, shallowEqual } from 'react-redux';
 
 const connectToState = (mapStateToProps = () => {}) => {
-  return (Component: any) => {
+  return Component => {
     const ConnectedComponent = connect(mapStateToProps, null, null, {
       areStatePropsEqual: (next, prev: any) => {
         // Compare visibility
@@ -29,7 +29,6 @@ const connectToState = (mapStateToProps = () => {}) => {
       const store = { getState: () => {}, subscribe: () => {}, dispatch: () => {} };
 
       return (
-        // @ts-ignore
         <Provider store={store}>
           <ConnectedComponent {...ownProps} />
         </Provider>

__mocks__/state-utils.tsx

@@ -8,7 +8,8 @@
     "../src/components/override-sdk/**/**/*.ts",
     "../src/components/override-sdk/**/**/*.tsx",
     "../src/components/override-sdk/**/**/*.js",
-    "../src/components/override-sdk/**/**/*.jsx"
+    "../src/components/override-sdk/**/**/*.jsx",
+    ".stroybook"
   ],
   "exclude": ["node_modules", "../src/**/*.stories.ts", "../src/**/*.stories.tsx", "../src/**/*.stories.js", "../src/**/*.stories.jsx"],
   "compilerOptions": {