@pega/custom-dx-components 0.23.7 → 0.23.9

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/styles.js.mustache

@@ -1,13 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-// to utilize theming, uncomment below
-// import { Configuration } from '@pega/cosmos-react-core';
-// export default styled(Configuration)``;
+export default styled(Configuration)``;
 
-
-// comment out this code if using theming
-export default styled.div(() => {
-  return css`
-    margin: 0px 0;
-  `;
-});
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create-all/index.js

@@ -341,7 +341,7 @@ export default async (options) => {
     await inquirer.prompt(questions).then(async (answers) => {
       const { library, version, allowedApplications } = answers;
       let { prefix } = answers;
-      prefix = prefix.replace(/\W+/g, '');
+      prefix = prefix.replace(/[^a-zA-Z0-9 ]/g, '');
       await validateCompileAll(
         {
           prefix,

package/src/tasks/init/index.js

@@ -126,6 +126,10 @@ export default async (options) => {
       {
         title: 'Installing tasks dependencies',
         task: () => execPromise('npm i --force --production=false', { cwd: options.componentDirectory })
+      },
+      {
+        title: 'Installing quick run',
+        task: () => execPromise('npm i -g npm-quick-run', { cwd: options.targetDirectory })
       }
     ],
     {

package/src/tasks/init/template/package.json.mustache

@@ -4,6 +4,7 @@
   "description": "{{description}}",
   "organization": "{{organization}}",
   "main": "src/index.js",
+  "type": "module",
   "scripts": {
     "startStorybook": "start-storybook --port 6040 --quiet",
     "lint": "run-p -cl lint:*",
@@ -64,7 +65,7 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.5.3",
-    "@pega/custom-dx-components": "^0.23.7",
+    "@pega/custom-dx-components": "^0.23.9",
     "@pega/eslint-config": "^0.3.2",
     "@storybook/addon-actions": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",
@@ -91,7 +92,6 @@
     "eslint-plugin-sonarjs": "^0.11.0",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
-    "npm-quick-run": "^1.18.0",
     "npm-run-all": "^4.1.5",
     "prettier": "2.7.1",
     "stylelint": "^14.11.0",

package/src/tasks/init/template/test/assets/components/create/Pega_DXIL_MyTestText/styles.js

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyBoolean/config.json

@@ -1,7 +1,7 @@
 {
   "name": "Pega_DXIL_MyBoolean",
-  "label": "My  Boolean",
-  "description": "My  Boolean",
+  "label": "My Boolean",
+  "description": "My Boolean",
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyBoolean/styles.js

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyCaseWidget/config.json

@@ -1,7 +1,7 @@
 {
   "name": "Pega_DXIL_MyCaseWidget",
-  "label": "My  Case Widget",
-  "description": "My  Case Widget",
+  "label": "My Case Widget",
+  "description": "My Case Widget",
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyCaseWidget/styles.js

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyCurrency/config.json

@@ -1,7 +1,7 @@
 {
   "name": "Pega_DXIL_MyCurrency",
-  "label": "My  Currency",
-  "description": "My  Currency",
+  "label": "My Currency",
+  "description": "My Currency",
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyCurrency/styles.js

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyDate/config.json

@@ -1,7 +1,7 @@
 {
   "name": "Pega_DXIL_MyDate",
-  "label": "My  Date",
-  "description": "My  Date",
+  "label": "My Date",
+  "description": "My Date",
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyDate/styles.js

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyDateTime/config.json

@@ -1,7 +1,7 @@
 {
   "name": "Pega_DXIL_MyDateTime",
-  "label": "My  DateTime",
-  "description": "My  DateTime",
+  "label": "My DateTime",
+  "description": "My DateTime",
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyDateTime/styles.js

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyDecimal/config.json

@@ -1,7 +1,7 @@
 {
   "name": "Pega_DXIL_MyDecimal",
-  "label": "My  Decimal",
-  "description": "My  Decimal",
+  "label": "My Decimal",
+  "description": "My Decimal",
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyDecimal/styles.js

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyDetails/config.json

@@ -1,7 +1,7 @@
 {
   "name": "Pega_DXIL_MyDetails",
-  "label": "My  Details",
-  "description": "My  Details",
+  "label": "My Details",
+  "description": "My Details",
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyDetails/styles.js

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyEmail/config.json

@@ -1,7 +1,7 @@
 {
   "name": "Pega_DXIL_MyEmail",
-  "label": "My  Email",
-  "description": "My  Email",
+  "label": "My Email",
+  "description": "My Email",
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyEmail/styles.js

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyForm/config.json

@@ -1,7 +1,7 @@
 {
   "name": "Pega_DXIL_MyForm",
-  "label": "My  Form",
-  "description": "My  Form",
+  "label": "My Form",
+  "description": "My Form",
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyForm/styles.js

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyInteger/config.json

@@ -1,7 +1,7 @@
 {
   "name": "Pega_DXIL_MyInteger",
-  "label": "My  Integer",
-  "description": "My  Integer",
+  "label": "My Integer",
+  "description": "My Integer",
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyInteger/styles.js

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyPage/config.json

@@ -1,7 +1,7 @@
 {
   "name": "Pega_DXIL_MyPage",
-  "label": "My  Page",
-  "description": "My  Page",
+  "label": "My Page",
+  "description": "My Page",
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyPage/styles.js

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyPageCaseWidget/config.json

@@ -1,7 +1,7 @@
 {
   "name": "Pega_DXIL_MyPageCaseWidget",
-  "label": "My  PageCase Widget",
-  "description": "My  PageCase Widget",
+  "label": "My PageCase Widget",
+  "description": "My PageCase Widget",
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyPageCaseWidget/styles.js

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyPageWidget/config.json

@@ -1,7 +1,7 @@
 {
   "name": "Pega_DXIL_MyPageWidget",
-  "label": "My  Page Widget",
-  "description": "My  Page Widget",
+  "label": "My Page Widget",
+  "description": "My Page Widget",
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyPageWidget/styles.js

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyParagraph/config.json

@@ -1,7 +1,7 @@
 {
   "name": "Pega_DXIL_MyParagraph",
-  "label": "My  Paragraph",
-  "description": "My  Paragraph",
+  "label": "My Paragraph",
+  "description": "My Paragraph",
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyParagraph/styles.js

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyPercentage/config.json

@@ -1,7 +1,7 @@
 {
   "name": "Pega_DXIL_MyPercentage",
-  "label": "My  Percentage",
-  "description": "My  Percentage",
+  "label": "My Percentage",
+  "description": "My Percentage",
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyPercentage/styles.js

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyPhone/config.json

@@ -1,7 +1,7 @@
 {
   "name": "Pega_DXIL_MyPhone",
-  "label": "My  Phone",
-  "description": "My  Phone",
+  "label": "My Phone",
+  "description": "My Phone",
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",

package/src/tasks/init/template/test/assets/components/createAll/Pega_DXIL_MyPhone/styles.js

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });