updated the storybook to support the new themeing changes (#583)

Author: SambhuPega

.storybook/preview.tsx

@@ -5,6 +5,9 @@ import { CssBaseline } from '@mui/material';
 import { getSdkComponentMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { theme } from '../src/theme';
 
+import sdkConfig from '../sdk-config.json';
+import { themes as sbThemes } from '@storybook/theming';
+
 import { decorator } from '../__mocks__/react_pconnect';
 import setPCoreMocks from '../__mocks__/pcoreMocks';
 
@@ -16,6 +19,10 @@ if (!isConstellation) {
 
 setPCoreMocks();
 
+const isDark = String(sdkConfig?.theme).toLowerCase() === 'dark';
+
+const CANVAS_COLOR = (theme as any).backgroundColor || (isDark ? '#060326' : 'whitesmoke');
+
 const decorators = [
   (Story, context) => {
     return isConstellation ? (
@@ -40,25 +47,14 @@ const decorators = [
   decorator
 ];
 
-const parameters = {
+// 3) Set canvas and Docs chrome
+const parameters: Preview['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']
-      }
-    ]
+    values: [{ name: 'App', value: CANVAS_COLOR }]
   },
   docs: {
+    theme: isDark ? sbThemes.dark : sbThemes.light,
     source: { type: 'code' },
     codePanel: true
   }

tsconfig.json

@@ -13,6 +13,7 @@
     "noImplicitAny": false,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
+    "resolveJsonModule": true,
 
     // Need to specify typeRoots to find the types and types to constrain
     //  where to look in @pega (to only get pcore-pconnect-typedefs)