Merge pull request #200 from pegasystems/bugfix/23-1-lib

update libs - lint and fix

Author: ricmars

.storybook/main.ts

@@ -2,18 +2,18 @@ import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
   core: {
-    disableTelemetry: true
+    disableTelemetry: true,
   },
   framework: '@storybook/react-webpack5',
   staticDirs: ['./static'],
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/addon-a11y', '@storybook/addon-essentials'],
   docs: {
-    autodocs: true
+    autodocs: true,
   },
   typescript: {
-    check: true
-  }
+    check: true,
+  },
 };
 
 export default config;

.storybook/manager.ts

@@ -6,6 +6,6 @@ addons.setConfig({
   enableShortcuts: false,
   showToolbar: true,
   sidebar: {
-    showRoots: false
-  }
+    showRoots: false,
+  },
 });

.storybook/preview.tsx

@@ -1,10 +1,7 @@
 import { useEffect as useReactEffect } from 'react';
 import { configureActions } from '@storybook/addon-actions';
 import { css } from '@storybook/theming';
-import {
-  useEffect as useStorybookEffect,
-  useMemo as useStorybookMemo
-} from '@storybook/preview-api';
+import { useEffect as useStorybookEffect, useMemo as useStorybookMemo } from '@storybook/preview-api';
 import type { Preview } from '@storybook/react';
 import {
   Configuration,
@@ -14,7 +11,7 @@ import {
   Aries2023Theme,
   Aries2023DarkTheme,
   ThemeMachine,
-  BaseThemeMachine
+  BaseThemeMachine,
 } from '@pega/cosmos-react-core';
 import type { DefaultSettableTheme, DefaultThemeDefinition } from '@pega/cosmos-react-core';
 import * as MantisTheme from './MantisTheme.json';
@@ -23,22 +20,22 @@ import * as HoneyFlowerTheme from './HoneyFlowerTheme.json';
 
 configureActions({
   depth: 5,
-  limit: 20
+  limit: 20,
 });
 
 const themes: Record<string, DefaultSettableTheme | undefined> = {
   Default: Aries2023Theme,
   Dark: Aries2023DarkTheme,
   Mantis: MantisTheme,
   Flame: FlameTheme,
-  HoneyFlower: HoneyFlowerTheme
+  HoneyFlower: HoneyFlowerTheme,
 };
 
 const themeMachines = Object.fromEntries(
   Object.entries(themes).map(([name, theme]) => [
     name,
-    new ThemeMachine<DefaultThemeDefinition>({ theme, parent: BaseThemeMachine })
-  ])
+    new ThemeMachine<DefaultThemeDefinition>({ theme, parent: BaseThemeMachine }),
+  ]),
 );
 
 window.addEventListener('error', console.error);
@@ -48,13 +45,13 @@ const preview: Preview = {
     backgrounds: {
       disable: true,
       grid: {
-        disable: true
-      }
+        disable: true,
+      },
     },
     outline: {
-      disable: true
+      disable: true,
     },
-    controls: { hideNoControlsWarning: true }
+    controls: { hideNoControlsWarning: true },
   },
 
   decorators: [
@@ -87,8 +84,7 @@ const preview: Preview = {
     // Sets up shadow DOM rendering
     (Story, context) => {
       const backgroundStyles = useStorybookMemo(() => {
-        const selector =
-          context.viewMode === 'docs' ? `#anchor--${context.id} .docs-story` : '.sb-show-main';
+        const selector = context.viewMode === 'docs' ? `#anchor--${context.id} .docs-story` : '.sb-show-main';
 
         const maxWidth = context.globals['fullscreen'] !== 'On' ? '1000px' : 'none';
 
@@ -126,12 +122,8 @@ const preview: Preview = {
           }
 
           :root {
-            --addon-backgrounds-gradient-primary: ${themeMachine.theme.base.palette[
-              'app-background'
-            ]};
-            --addon-backgrounds-gradient-secondary: ${themeMachine.theme.base.palette[
-              'primary-background'
-            ]};
+            --addon-backgrounds-gradient-primary: ${themeMachine.theme.base.palette['app-background']};
+            --addon-backgrounds-gradient-secondary: ${themeMachine.theme.base.palette['primary-background']};
             background: repeating-conic-gradient(
                 var(--addon-backgrounds-gradient-primary) 0% 25%,
                 var(--addon-backgrounds-gradient-secondary) 0% 50%
@@ -152,18 +144,10 @@ const preview: Preview = {
             max-width: ${maxWidth}!important;
           }
         `.styles;
-      }, [
-        context.viewMode,
-        context.globals['theme'],
-        context.globals['backgrounds'],
-        context.globals['fullscreen']
-      ]);
+      }, [context.viewMode, context.globals['theme'], context.globals['backgrounds'], context.globals['fullscreen']]);
 
       useStorybookEffect(() => {
-        const id =
-          context.viewMode === 'docs'
-            ? `addon-backgrounds-docs-${context.id}`
-            : 'addon-backgrounds-color';
+        const id = context.viewMode === 'docs' ? `addon-backgrounds-docs-${context.id}` : 'addon-backgrounds-color';
 
         const existingStyleEl = document.getElementById(id);
         if (existingStyleEl) {
@@ -181,7 +165,7 @@ const preview: Preview = {
       }, [backgroundStyles, context.viewMode, context.id]);
 
       return <Story {...context} />;
-    }
+    },
   ],
 
   globalTypes: {
@@ -191,26 +175,26 @@ const preview: Preview = {
       defaultValue: 'Default',
       toolbar: {
         icon: 'paintbrush',
-        items: Object.keys(themes)
-      }
+        items: Object.keys(themes),
+      },
     },
     backgrounds: {
       name: 'Backgrounds',
       description: 'Change the background of the preview',
       defaultValue: 'Clear',
       toolbar: {
         icon: 'photo',
-        items: ['Clear', 'App Background', 'Primary Background', 'Secondary Background']
-      }
+        items: ['Clear', 'App Background', 'Primary Background', 'Secondary Background'],
+      },
     },
     fullscreen: {
       name: 'Fullscreen',
       description: 'Use all space',
       defaultValue: 'Off',
       toolbar: {
         icon: 'grow',
-        items: ['Off', 'On']
-      }
+        items: ['Off', 'On'],
+      },
     },
     locale: {
       name: 'Locale',
@@ -222,9 +206,9 @@ const preview: Preview = {
           { value: 'en-US', right: '🇺🇸', title: 'English (US)' },
           { value: 'pl', right: '🇵🇱', title: 'Polish' },
           { value: 'fr', right: '🇫🇷', title: 'Français' },
-          { value: 'ar', right: '🇦🇪', title: 'عربي' }
-        ]
-      }
+          { value: 'ar', right: '🇦🇪', title: 'عربي' },
+        ],
+      },
     },
     direction: {
       name: 'Directionality',
@@ -233,11 +217,11 @@ const preview: Preview = {
       toolbar: {
         items: [
           { value: 'ltr', icon: 'arrowrightalt', title: 'Left to Right' },
-          { value: 'rtl', icon: 'arrowleftalt', title: 'Right to Left' }
-        ]
-      }
-    }
-  }
+          { value: 'rtl', icon: 'arrowleftalt', title: 'Right to Left' },
+        ],
+      },
+    },
+  },
 };
 
 export default preview;

.storybook/test-runner.ts

@@ -17,16 +17,16 @@ const config: TestRunnerConfig = {
 
     // Apply story-level a11y rules
     await configureAxe(page, {
-      rules: storyContext.parameters?.a11y?.config?.rules
+      rules: storyContext.parameters?.a11y?.config?.rules,
     });
 
     await checkA11y(page, '#storybook-root', {
       detailedReport: true,
       detailedReportOptions: {
-        html: true
-      }
+        html: true,
+      },
     });
-  }
+  },
 };
 
 export default config;

.storybook/theme.ts

@@ -39,5 +39,5 @@ export default create({
 
   brandTitle: 'Constellation UI Gallery',
   brandUrl: 'https://github.com/pegasystems/constellation-ui-gallery',
-  brandImage: './pega-logo.svg'
+  brandImage: './pega-logo.svg',
 });

babel.config.js

@@ -6,17 +6,17 @@ module.exports = function (api) {
       {
         targets: {
           esmodules: true,
-          node: true
-        }
-      }
+          node: true,
+        },
+      },
     ],
     '@babel/preset-typescript',
-    ['@babel/preset-react', { runtime: 'automatic' }]
+    ['@babel/preset-react', { runtime: 'automatic' }],
   ];
   const plugins = [];
 
   return {
     presets,
-    plugins
+    plugins,
   };
 };

jest.config.js

@@ -4,20 +4,17 @@ const packagesToTranspile = [
   '@pega/cosmos-react-rte',
   '@pega/cosmos-react-work',
   'shortcuts',
-  'preact'
+  'preact',
 ];
-const packagesToTranspileStr = packagesToTranspile.map(p => `${p}`).join('|');
+const packagesToTranspileStr = packagesToTranspile.map((p) => `${p}`).join('|');
 
 module.exports = {
   preset: 'ts-jest',
   verbose: true,
   moduleNameMapper: {
-    shortcuts: '<rootDir>/node_modules/shortcuts/dist/index.js'
+    shortcuts: '<rootDir>/node_modules/shortcuts/dist/index.js',
   },
-  collectCoverageFrom: [
-    'src/components/**/*.{ts,tsx,js,jsx}',
-    '!**/*.(test|stories).{ts,tsx,js,jsx}'
-  ],
+  collectCoverageFrom: ['src/components/**/*.{ts,tsx,js,jsx}', '!**/*.(test|stories).{ts,tsx,js,jsx}'],
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
   moduleDirectories: ['node_modules', 'src'],
   setupFiles: ['./setupFiles.ts'],
@@ -26,6 +23,6 @@ module.exports = {
   testEnvironment: 'jsdom',
   transform: {
     '\\.[jt]sx?$': 'babel-jest',
-    '^.+\\.(ts|tsx)?$': 'ts-jest'
-  }
+    '^.+\\.(ts|tsx)?$': 'ts-jest',
+  },
 };