Merge pull request #55 from pegasystems/fix/withconfig

use WithConfiguration
pegasystems · Apr 29, 2024 · 7cd0a4a · 7cd0a4a
2 parents 2fada2f + 7a7e8e1
commit 7cd0a4a
Show file tree

Hide file tree

Showing 55 changed files with 2,629 additions and 2,368 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -22,6 +22,7 @@
   "ignorePatterns": [
     "node_modules",
     "lib",
+    "storybook-static",
     "!.storybook",
     ".storybook/public",
     "**/demo.stories.jsx",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,74 +37,74 @@
     "fix:pkg": "sort-package-json package.json packages/*/package.json"
   },
   "dependencies": {
-    "@fullcalendar/core": "^6.1.10",
-    "@fullcalendar/daygrid": "^6.1.10",
-    "@fullcalendar/react": "^6.1.10",
-    "@fullcalendar/timegrid": "^6.1.10",
-    "@hello-pangea/dnd": "^16.5.0",
-    "@pega/cosmos-react-core": "^4.1.2",
-    "@pega/cosmos-react-social": "^4.1.2",
-    "@pega/cosmos-react-work": "^4.2.2",
+    "@fullcalendar/core": "^6.1.11",
+    "@fullcalendar/daygrid": "^6.1.11",
+    "@fullcalendar/react": "^6.1.11",
+    "@fullcalendar/timegrid": "^6.1.11",
+    "@hello-pangea/dnd": "^16.6.0",
+    "@pega/cosmos-react-core": "^4.2.3",
+    "@pega/cosmos-react-social": "^4.2.3",
+    "@pega/cosmos-react-work": "^4.2.3",
     "dagre": "^0.8.5",
     "gantt-task-react": "^0.3.9",
-    "imask": "^7.3.0",
+    "imask": "^7.6.0",
     "jsbarcode": "^3.11.6",
     "polished": "^4.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "reactflow": "^11.10.1",
-    "signature_pad": "^4.1.7",
-    "styled-components": "^5.3.5"
+    "reactflow": "^11.11.2",
+    "signature_pad": "^4.2.0",
+    "styled-components": "^5.3.11"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.23.8",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
-    "@pega/configs": "^0.7.1",
-    "@pega/custom-dx-components": "^23.1.11",
-    "@pega/eslint-config": "^0.7.1",
-    "@pega/pcore-pconnect-typedefs": "^2.1.1",
-    "@pega/tsconfig": "^0.7.1",
-    "@storybook/addon-a11y": "^7.6.8",
-    "@storybook/addon-essentials": "^7.6.8",
-    "@storybook/manager-api": "^7.6.8",
-    "@storybook/react": "^7.6.16",
-    "@storybook/react-webpack5": "^7.6.7",
-    "@storybook/test-runner": "^0.16.0",
-    "@storybook/theming": "^7.6.8",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
+    "@pega/configs": "^0.10.0",
+    "@pega/custom-dx-components": "^23.1.12",
+    "@pega/eslint-config": "^0.10.0",
+    "@pega/pcore-pconnect-typedefs": "^3.0.0",
+    "@pega/tsconfig": "^0.10.0",
+    "@storybook/addon-a11y": "^7.6.18",
+    "@storybook/addon-essentials": "^7.6.18",
+    "@storybook/manager-api": "^7.6.18",
+    "@storybook/react": "^7.6.18",
+    "@storybook/react-webpack5": "^7.6.18",
+    "@storybook/test-runner": "^0.17.0",
+    "@storybook/theming": "^7.6.18",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^12.1.5",
     "@types/dagre": "^0.7.52",
     "@types/jest": "^29.5.12",
-    "@types/react": "^17.0.75",
+    "@types/react": "^17.0.80",
     "@types/react-dom": "^17.0.25",
-    "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@types/styled-components": "^5.1.34",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
     "axe-playwright": "^2.0.1",
-    "cspell": "^8.3.2",
+    "cspell": "^8.7.0",
     "cspell-dict-lorem-ipsum": "^1.1.2",
-    "eslint": "^8.4.1",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-jest": "^27.6.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jest": "^28.3.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-mdx": "^3.1.4",
-    "eslint-plugin-prettier": "^5.1.2",
-    "eslint-plugin-react": "^7.27.1",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-sonarjs": "^0.25.0",
+    "eslint-plugin-mdx": "^3.1.5",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-sonarjs": "^0.25.1",
     "eslint-plugin-storybook": "^0.8.0",
     "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^29.3.1",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
-    "npm-quick-run": "^1.16.0",
+    "npm-quick-run": "^1.18.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.2.4",
-    "sort-package-json": "^2.6.0",
-    "storybook": "^7.6.7",
-    "stylelint": "^16.1.0",
+    "prettier": "^3.2.5",
+    "sort-package-json": "^2.10.0",
+    "storybook": "^7.6.18",
+    "stylelint": "^16.4.0",
     "ts-jest": "^29.1.2",
-    "typescript": "^5.3.3"
+    "typescript": "^5.4.5"
   },
   "organization": "Pega"
 }
diff --git a/src/components/Pega_Extensions_ActionableButton/demo.stories.tsx b/src/components/Pega_Extensions_ActionableButton/demo.stories.tsx
@@ -1,5 +1,5 @@
 import type { StoryObj } from '@storybook/react';
-import PegaExtensionsActionableButton from './index';
+import { PegaExtensionsActionableButton } from './index';
 
 export default {
   title: 'Fields/Actionable button',

diff --git a/src/components/Pega_Extensions_ActionableButton/index.tsx b/src/components/Pega_Extensions_ActionableButton/index.tsx
@@ -1,4 +1,4 @@
-import { Flex, Button, Configuration } from '@pega/cosmos-react-core';
+import { withConfiguration, Flex, Button } from '@pega/cosmos-react-core';
 
 type ActionableButtonProps = {
   label: string;
@@ -7,7 +7,7 @@ type ActionableButtonProps = {
   getPConnect: any;
 };
 
-const PegaExtensionsActionableButton = (props: ActionableButtonProps) => {
+export const PegaExtensionsActionableButton = (props: ActionableButtonProps) => {
   const { getPConnect, label, value, localAction } = props;
   if (value && localAction) {
     const LaunchLocalAction = () => {
@@ -20,14 +20,12 @@ const PegaExtensionsActionableButton = (props: ActionableButtonProps) => {
       });
     };
     return (
-      <Configuration>
-        <Flex container={{ direction: 'row' }}>
-          <Button onClick={LaunchLocalAction}>{label}</Button>
-        </Flex>
-      </Configuration>
+      <Flex container={{ direction: 'row' }}>
+        <Button onClick={LaunchLocalAction}>{label}</Button>
+      </Flex>
     );
   }
   return null;
 };
 
-export default PegaExtensionsActionableButton;
+export default withConfiguration(PegaExtensionsActionableButton);
diff --git a/src/components/Pega_Extensions_Banner/demo.stories.tsx b/src/components/Pega_Extensions_Banner/demo.stories.tsx
@@ -1,5 +1,5 @@
 import type { StoryObj } from '@storybook/react';
-import PegaExtensionsBanner from './index';
+import { PegaExtensionsBanner } from './index';
 
 export default {
   title: 'Widgets/Banner',

diff --git a/src/components/Pega_Extensions_Banner/index.tsx b/src/components/Pega_Extensions_Banner/index.tsx
@@ -1,4 +1,4 @@
-import { Banner, Configuration } from '@pega/cosmos-react-core';
+import { withConfiguration, Banner } from '@pega/cosmos-react-core';
 import { useCallback, useEffect, useState } from 'react';
 import MainContent from './styles';
 
@@ -12,7 +12,7 @@ type BannerProps = {
   getPConnect: any;
 };
 
-export default function PegaExtensionsBanner(props: BannerProps) {
+export const PegaExtensionsBanner = (props: BannerProps) => {
   const { variant = 'success', dataPage = '', getPConnect } = props;
   const [messages, setMessages] = useState<Array<string>>([]);
 
@@ -65,10 +65,10 @@ export default function PegaExtensionsBanner(props: BannerProps) {
 
   if (messages?.length === 0) return null;
   return (
-    <Configuration>
-      <MainContent>
-        <Banner variant={variant} messages={messages}></Banner>
-      </MainContent>
-    </Configuration>
+    <MainContent>
+      <Banner variant={variant} messages={messages}></Banner>
+    </MainContent>
   );
-}
+};
+
+export default withConfiguration(PegaExtensionsBanner);
diff --git a/src/components/Pega_Extensions_BarCode/demo.stories.tsx b/src/components/Pega_Extensions_BarCode/demo.stories.tsx
@@ -1,5 +1,5 @@
 import type { StoryObj } from '@storybook/react';
-import PegaExtensionsBarCode, { BarcodeType } from './index';
+import { PegaExtensionsBarCode, BarcodeType } from './index';
 
 export default {
   title: 'Fields/Barcode',

diff --git a/src/components/Pega_Extensions_BarCode/index.tsx b/src/components/Pega_Extensions_BarCode/index.tsx
@@ -1,5 +1,11 @@
 import JsBarcode from 'jsbarcode';
-import { Configuration, Flex, FormControl, FormField, ErrorState } from '@pega/cosmos-react-core';
+import {
+  withConfiguration,
+  Flex,
+  FormControl,
+  FormField,
+  ErrorState
+} from '@pega/cosmos-react-core';
 import { useEffect, useRef, useState } from 'react';
 import StyledWrapper from './styles';
 
@@ -15,7 +21,7 @@ export enum BarcodeType {
   PHARMACODE = 'pharmacode'
 }
 
-interface BarCodeExtProps {
+type BarCodeExtProps = {
   format: BarcodeType;
   label: string;
   value: string;
@@ -27,9 +33,9 @@ interface BarCodeExtProps {
   readOnly?: boolean;
   testId?: string;
   getPConnect: any;
-}
+};
 
-export default function PegaExtensionsBarcode(props: BarCodeExtProps) {
+export const PegaExtensionsBarCode = (props: BarCodeExtProps) => {
   const {
     value,
     label,
@@ -106,27 +112,21 @@ export default function PegaExtensionsBarcode(props: BarCodeExtProps) {
   ]);
 
   return (
-    <Configuration>
-      <Flex container={{ direction: 'column', justify: 'center', alignItems: 'center' }}>
-        <FormField
-          label={label}
-          labelHidden={hideLabel}
-          info={info}
-          status={status}
-          testId={testId}
-        >
-          <FormControl ariaLabel={label}>
-            {readOnly ? (
-              <img src={outputValue} />
-            ) : (
-              <StyledWrapper>
-                {status === 'error' ? <ErrorState message='Invalid barcode' /> : null}
-                <svg ref={BarcodeRef} />
-              </StyledWrapper>
-            )}
-          </FormControl>
-        </FormField>
-      </Flex>
-    </Configuration>
+    <Flex container={{ direction: 'column', justify: 'center', alignItems: 'center' }}>
+      <FormField label={label} labelHidden={hideLabel} info={info} status={status} testId={testId}>
+        <FormControl ariaLabel={label}>
+          {readOnly ? (
+            <img src={outputValue} />
+          ) : (
+            <StyledWrapper>
+              {status === 'error' ? <ErrorState message='Invalid barcode' /> : null}
+              <svg ref={BarcodeRef} />
+            </StyledWrapper>
+          )}
+        </FormControl>
+      </FormField>
+    </Flex>
   );
-}
+};
+
+export default withConfiguration(PegaExtensionsBarCode);
diff --git a/src/components/Pega_Extensions_Calendar/demo.stories.tsx b/src/components/Pega_Extensions_Calendar/demo.stories.tsx
@@ -1,5 +1,5 @@
 import type { StoryObj } from '@storybook/react';
-import PegaExtensionsCalendar from './index';
+import { PegaExtensionsCalendar } from './index';
 
 export default {
   title: 'Widgets/Calendar',