Merge pull request #190 from pegasystems/bugfix/libs

Bugfix/libs

Author: ricmars

.github/workflows/validatepr.yaml

@@ -25,10 +25,12 @@ jobs:
         run: npm ci
       - name: Install Playwright
         run: npx playwright install --with-deps
+        timeout-minutes: 10
       - name: Build Storybook
         run: npm run build-storybook
       - name: Run unit test
         run: npm run test
+        timeout-minutes: 10
       - uses: Eun/http-server-action@v1
         with:
           directory: ${{ github.workspace }}/storybook-static

.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: false
-  }
+    check: false,
+  },
 };
 
 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,41 +20,41 @@ 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 }),
+  ]),
 );
 
 const preview: Preview = {
   parameters: {
     options: {
       storySort: {
-        order: ['Getting Started', 'Libraries', 'Support and Contributing']
-      }
+        order: ['Getting Started', 'Libraries', 'Support and Contributing'],
+      },
     },
     backgrounds: {
       disable: true,
       grid: {
-        disable: true
-      }
+        disable: true,
+      },
     },
     outline: {
-      disable: true
+      disable: true,
     },
-    controls: { hideNoControlsWarning: true }
+    controls: { hideNoControlsWarning: true },
   },
 
   decorators: [
@@ -90,8 +87,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';
 
@@ -129,12 +125,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%
@@ -155,18 +147,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) {
@@ -184,7 +168,7 @@ const preview: Preview = {
       }, [backgroundStyles, context.viewMode, context.id]);
 
       return <Story {...context} />;
-    }
+    },
   ],
 
   globalTypes: {
@@ -194,26 +178,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',
@@ -225,9 +209,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',
@@ -236,11 +220,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',
 });

.stylelintrc.json

@@ -6,11 +6,5 @@
     "selector-max-combinators": null,
     "selector-max-compound-selectors": null
   },
-  "ignoreFiles": [
-    "node_modules/**",
-    "lib/**",
-    "!.storybook",
-    ".storybook/public",
-    "storybook-static/**"
-  ]
+  "ignoreFiles": ["node_modules/**", "lib/**", "!.storybook", ".storybook/public", "storybook-static/**"]
 }

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',
+  },
 };