@pega/custom-dx-components 0.0.1 → 0.23.1

package/src/tasks/generate-ai/aiPrompt.txt.mustache

@@ -0,0 +1,121 @@
+Your task is to generate a custom DX component based on the Pega Constellation architecture. A custom DX component is a React functional component that uses hooks.  Create the first iteration of this component using the code template below, delimited by the second set of triple backticks.
+
+Replace MyOrg, MyLib and MyComponent with the text specified in InputProperties called organization, library and name respectively that is provided in the in the json properties array delimited by the fourth set of triple backticks. Be aware that MyComponent should be derived from the last part of the componentKey text that is delimited by a '_'. Based on the example component definition delimited by the third set of three backticks, replace the component props and PropTypes with the properties defined in the properties json array delimited by the fourth set of backticks.
+
+DesignSystemComponents is an array of jsx React components.  Replace the DesignSystemComponents import with the comma delimited list of imported components from '@pega/cosmos-react-core' with the text specified in DesignSystemComponents, delimited by the first set of triple backticks.  Also add in the jsx components in the render function.
+
+{{COMPONENT_ADDITIONAL}}
+
+DesignSystemComponents:
+```{{COMPONENT_DSC}}```
+
+Template:
+```
+import PropTypes from 'prop-types';
+import { DesignSystemComponents } from '@pega/cosmos-react-core';
+import StyledMyOrgMyLibMyComponentWrapper from './styles';
+
+export default function MyOrgMyLibMyComponent(props) {
+	const { getPConnect, visibility, disabled, required, aNumber, aString, aBoolean } = props;
+
+	const pConn = getPConnect();
+
+	return (
+		<StyledMyOrgMyLibMyPageWidgetWrapper>
+			<DesignSystemComponent
+				input1 = {aNumber}
+				input2 = {aString}
+				input3 = {aBoolean}
+			/>
+		</StyledMyOrgMyLibMyPageWidgetWrapper>
+	);
+}
+
+MyOrgMyLibMyComponent.defaultProps = {
+	aString: '',
+	aNumber: 0,
+	aBoolean: false,
+	visibility: true,
+	disabled: false,
+	required: false
+}
+MyOrgMyLibMyComponent.propTypes = {
+	aString: PropTypes.string,
+	aNumber: PropTypes.number,
+	aBoolean: PropTypes.bool,
+	visibility: PropTypes.string.bool,
+	disabled: PropTypes.string.bool,
+	required: PropTypes.string.bool,
+	getPConnect: PropTypes.func.isRequired
+}
+```
+ExampleComponentDefinition:
+```
+{
+  "name": "MyOrg_MyLib_MyComponent",
+  "label": "My Component",
+  "description": "My Component",
+  "organization": "MyOrg",
+  "version": "01.01.01",
+  "library": "MyLib",
+  "allowedApplications": [],
+  "componentKey": "MyOrg_MyLib_MyComponent",
+  "type": "",
+  "subtype": "",
+  "properties": [
+    {
+      "name": "aString",
+      "label": "aString value",
+      "format": "TEXT"
+    },
+    {
+      "name": "aBoolean",
+      "label": "aBoolean value",
+      "format": "BOOLEAN"
+    },
+    {
+      "name": "aNumber",
+      "label": "aNumber value",
+      "format": "NUMBER",
+      "defaultValue": "0"
+    },
+    {
+      "name": "visibility",
+      "label": "Visible",
+      "format": "VISIBILITY"
+    },
+    {
+      "name": "disabled",
+      "label": "Disabled",
+      "format": "DISABLED",
+      "visibility": "(!$this.readOnly = true)"
+    },
+    {
+      "name": "required",
+      "label": "Required",
+      "format": "REQUIRED",
+      "visibility": "(!$this.readOnly = true)"
+    },
+    {
+      "label": "Advanced",
+      "format": "GROUP",
+      "collapsible": true,
+      "properties": [
+        {
+          "name": "testId",
+          "label": "Test ID",
+          "format": "TEXT",
+          "ignorePattern": "[^-_\\p{N}\\p{L}]",
+          "includeAnnotations": false
+        }
+      ]
+    }
+  ],
+  "defaultConfig": {
+  }
+}
+```
+InputProperties:
+```
+{{COMPONENT_CONFIG}}
+```

package/src/tasks/generate-ai/helper.js

@@ -0,0 +1,184 @@
+import chalk from 'chalk';
+import inquirer from 'inquirer';
+import ora from 'ora';
+import path from 'path';
+import { URL, fileURLToPath } from 'url';
+import { join } from 'path';
+import fs from 'fs';
+
+import { AI_PROMPT_FILENAME } from '../../constants.js';
+
+import _ from 'lodash';
+
+
+import {
+  getComponents,
+  getPegaConfig,
+  getAIPromptData,
+  getDirectoryFiles,
+  getAIComponent,
+  getComponentDirectoryPath,
+  compileMustacheTemplate,
+  getComponentConfigJson
+} from '../../util.js';
+import { str } from 'ajv';
+
+
+
+
+
+export const getComponentAndGenerateAI = async (enteredKey) => {
+  const localComponents = await getComponents();
+
+  let answers;
+
+  if (localComponents.length > 0) {
+
+    if (enteredKey && enteredKey != "") {
+      answers = await inquirer.prompt([
+        {
+          name: 'designSystemComponents',
+          message: 'Enter comma delimited string of Design system components (ie. Input, TextArea, etc.)'
+        },
+        {
+          name: 'additionalPromptInfo',
+          message: 'Enter any additional generation information',
+        }
+
+
+      ]);
+    }
+    else {
+      answers = await inquirer.prompt([
+        {
+          name: 'componentKey',
+          type: 'rawlist',
+          message: 'Select component to generateAI',
+          choices: localComponents,
+        },
+        {
+          name: 'designSystemComponents',
+          message: 'Enter comma delimited string of Design system components (ie. Input, TextArea, etc.)'
+        },
+        {
+          name: 'additionalPromptInfo',
+          message: 'Enter any additional generation information',
+        }
+
+
+      ]);
+    }
+
+
+    console.log("Generating component...");
+
+    await generateAIComponent(enteredKey || answers.componentKey, answers.designSystemComponents, answers.additionalPropmtInfo);
+
+  } else {
+    console.log(chalk.bold.redBright(`No custom components in ${sourceOfComponents}`));
+  }
+};
+
+export const renameFile = (oldFileName, newFileName) => {
+  try {
+    fs.renameSync(oldFileName, newFileName);
+
+  } catch(err) {
+    console.log(err)
+  }
+}
+
+export const generateAIComponent = async (componentKey, designSystemComponents, additionalPromptInfo) => {
+
+  const fileName = "." + path.sep + AI_PROMPT_FILENAME;
+
+  // get config file
+  //
+  const targetDirectory = await getComponentDirectoryPath(componentKey);
+  const configFile = await getComponentConfigJson(targetDirectory);
+
+  let strPrompt = compileMustacheTemplate(fileURLToPath(new URL(fileName, import.meta.url)), {
+    COMPONENT_CONFIG: configFile,
+    COMPONENT_DSC: designSystemComponents,
+    COMPONENT_ADDITIONAL: additionalPromptInfo
+  });
+
+  strPrompt = _.unescape(strPrompt);
+
+  //let strPrompt = await getAIPromptData(fileURLToPath(new URL(fileName, import.meta.url)));
+  let aiComponent = await getAIComponent(strPrompt);
+
+  //console.log(aiData);
+  const indexFile = join(targetDirectory, "index.jsx");
+
+  // remove enclosed ``` and "Answer:"
+  aiComponent = aiComponent.substring(aiComponent.indexOf("import"));
+  aiComponent = aiComponent.substring(0, aiComponent.lastIndexOf("```"));
+
+
+
+  // get directory list
+  // check for index-template.jsx.old
+  //    if not there, copy index.jsx to index-template.jsx.old and then copy aiComponent to index.jsx
+  //    if there, check if have index-genai-1.jsx.old, if not, then copy index.jsx, to index-genai-1.jsx.old
+  //    otherwise, find all index-genai-X and find biggest number and add one, and save index.jsx to that and then create index.jsx
+
+  const dirList = await getDirectoryFiles(targetDirectory);
+
+  if (dirList.includes("index-template.jsx.old")) {
+
+    const genList = dirList.map( (el) => {
+      if (el.indexOf("index-genai") >= 0) {
+        return el;
+      }
+      else {
+        return "";
+      }
+    });
+
+    if (genList.length > 0) {
+      let lastIndex = 0;
+
+      genList.forEach((el) => {
+        const theName = el.split(".")[0];
+        const theIndex = theName.split("-")[2];
+
+        if (parseInt(theIndex) > lastIndex) {
+          lastIndex = parseInt(theIndex);
+        }
+      });
+
+      lastIndex++;
+
+      const oldGenFileName = join(targetDirectory, "index.jsx");
+      const newGenFileName = join(targetDirectory, "index-genai-" + lastIndex + ".jsx.old");
+
+      renameFile(oldGenFileName, newGenFileName);
+    }
+    else {
+      const oldGenFileName = join(targetDirectory, "index.jsx");
+      const newGenFileName = join(targetDirectory, "index-genai-1.jsx.old");
+
+      renameFile(oldGenFileName, newGenFileName);
+    }
+  }
+  else {
+    // so only index.jsx, so rename index.jsx to index-template.jsx.old
+    // and create a new index.jsx
+    const oldFileName = join(targetDirectory, "index.jsx");
+    const newFileName = join(targetDirectory, "index-template.jsx.old");
+
+    renameFile(oldFileName, newFileName);
+  }
+
+  // creae new index.jsx
+  fs.writeFileSync(indexFile, aiComponent, err => {
+    if (err) {
+      Promise.reject(`${chalk.bold.red(err)}`);
+    }
+  });
+
+  console.log(`Updated file ${chalk.green('index.jsx')} in directory ${chalk.green(componentKey)} with AI generated code.`);
+
+
+}

package/src/tasks/generate-ai/index.js

@@ -0,0 +1,33 @@
+import inquirer from 'inquirer';
+import ora from 'ora';
+import chalk from 'chalk';
+
+import {
+  getComponentAndGenerateAI,
+  generateAIComponent
+} from './helper.js';
+
+import { showVersion } from '../../util.js';
+
+
+
+
+export default async options => {
+  showVersion();
+
+  if (options.params.length > 3 && options.params[3] != "") {
+    const sourceOfComponents = options.params[3];
+
+    //await generateAIComponent(sourceOfComponents);
+    await getComponentAndGenerateAI(sourceOfComponents);
+  }
+  else {
+
+    await getComponentAndGenerateAI();
+  }
+
+
+
+
+
+};

package/src/tasks/index.js

@@ -1,9 +1,16 @@
 export { default as createComponent } from './create/index.js';
+export { default as createAllComponents } from './create-all/index.js';
 export { default as deleteComponent } from './delete/index.js';
+export { default as deleteAllComponents } from './delete-all/index.js';
 export { default as initProject } from './init/index.js';
 export { default as publishComponent } from './publish/index.js';
+export { default as publishAllComponents } from './publish-all/index.js';
+export { default as renameComponent } from './rename/index.js';
 export { default as listComponents } from './list/index.js';
 export { default as updateComponent } from './update/index.js';
 export { default as validate } from './validator/index.js';
 export { default as authenticate } from './authenticate/index.js';
 export { default as upgrade } from './upgrade/index.js';
+export { default as buildComponent } from './build/index.js';
+export { default as buildAllComponents } from './build-all/index.js';
+export { default as generateWithAI } from './generate-ai/index.js';

package/src/tasks/init/index.js

@@ -47,6 +47,7 @@ const copyProjectTemplate = async options => {
     clobber: false
   });
   const packageJsonPath = path.join(options.targetDirectory, 'package.json.mustache');
+  const templateNPMRCPath = path.join(options.targetDirectory, 'templateNPMRC.txt');
 
   let { organization, projectName } = options;
 
@@ -65,6 +66,10 @@ const copyProjectTemplate = async options => {
   const output = compileMustacheTemplate(packageJsonPath, options);
   fs.writeFileSync(packageJsonPath, output);
   fs.renameSync(packageJsonPath, packageJsonPath.replace('.mustache', ''));
+
+  // rename template NPMRC to .npmrc, need to do this because npmjs won't publish an .npmrc file
+  fs.renameSync(templateNPMRCPath, templateNPMRCPath.replace('templateNPMRC.txt', '.npmrc'));
+
   await createLicense(options);
 };
 
@@ -123,7 +128,8 @@ export default async options => {
       },
       {
         title: installDependenciesText,
-        task: () => execPromise('npm i --production=false', { cwd: options.targetDirectory })
+        task: () =>
+          execPromise('npm i --force --production=false', { cwd: options.targetDirectory })
       }
     ],
     {
@@ -140,7 +146,7 @@ export default async options => {
     '\n',
     `Inside that directory, you can run several commands:`,
     '\n\n',
-    `${chalk.blueBright('npm start')}`,
+    `${chalk.blueBright('npm run startStorybook')}`,
     `\n  Start Storybook in development mode`,
     '\n\n',
     `${chalk.blueBright('npm run create')}`,
@@ -158,7 +164,7 @@ export default async options => {
     '\n\n',
     `${chalk.blueBright('cd')} ${chalk.bold(projectName)}`,
     '\n',
-    `${chalk.blueBright('npm start')}`,
+    `${chalk.blueBright('npm run startStorybook')}`,
     '\n'
   );
   return true;

package/src/tasks/init/template/.eslintignore

@@ -0,0 +1,8 @@
+webpack.config.js
+src/helpers/config_access.js
+*.html
+*.css
+*.json
+*.md
+*.svg
+*.zip

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

@@ -1,10 +1,191 @@
 {
-  "extends": ["@pega"],
-  "parserOptions": { "project": "tsconfig.json" },
   "root": true,
-  "ignorePatterns": ["node_modules", "lib", "!.storybook", ".storybook/public"],
+  "extends": ["@pega"],
+  "parserOptions": {
+    "project": "tsconfig.json",
+    "ecmaVersion": 13
+  },
+  "settings": {
+    "import/resolver": {
+      "typescript": {},
+      "node": {
+        "extensions": [".js", ".jsx"]
+      }
+    },
+    "react": {
+      "version": "detect"
+    }
+  },
+  "ignorePatterns": ["node_modules", "packages/*/lib", "!.storybook", ".storybook/public"],
   "rules": {
+    // Prettier recommends running separately from a linter.
+    // https://prettier.io/docs/en/integrating-with-linters.html#notes
     "prettier/prettier": "off",
-    "react/react-in-jsx-scope": "off"
-  }
+
+    // Disable rules from shared configs we're not ready for yet.
+    "sonarjs/cognitive-complexity": "off",
+    "sonarjs/no-identical-functions": "off",
+    "sonarjs/no-duplicate-string": "off",
+    "sonarjs/no-nested-template-literals": "off",
+
+    //
+    // JA - Override some default lint handling here
+    "@typescript-eslint/array-type": ["error", { "default": "generic" }],
+    // "import/extensions": ["warn", "never"],    // Turning off for now (see below)
+
+    //
+    // Initial release: turning these off; phase in to "warn" or "error" over time
+    //  For "quotes" and "@typescript-eslint/quotes", see override below for .ts/.tsx files
+    "import/extensions": ["off", "never"],
+    "import/named": "off",
+    "import/no-cycle": "off",
+    "import/no-duplicates": "off",
+    "import/no-extraneous-dependencies": "off",
+    "import/no-named-as-default": "off",
+    "import/no-named-as-default-member": "off",
+    "import/no-self-import": "off",
+    "import/no-unresolved": "off",
+    "import/no-useless-path-segments": "off",
+    "import/order": "off",
+
+    "no-else-return": "off",
+    "no-restricted-syntax": "off",
+    "no-underscore-dangle": "off",
+
+    "jsx-a11y/alt-text": "off",
+    "jsx-a11y/anchor-is-valid": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/label-has-associated-control": "off",
+    "jsx-a11y/no-static-element-interactions": "off",
+
+    "react/jsx-fragments": "off",
+    "react/jsx-no-bind": "off",
+    "react/self-closing-comp": "off",
+
+    "sonarjs/prefer-immediate-return": "off",
+
+    "@typescript-eslint/dot-notation": "off", // prefer warn but needs different parserOptions
+    "@typescript-eslint/naming-convention": "off", // prefer warn but needs different parserOptions
+    "@typescript-eslint/ban-types": "off", // also, see override below
+
+    //
+    // Initial release: set to error
+    "@typescript-eslint/no-inferrable-types": "error",
+    "eqeqeq": "error",
+    "no-alert": "error",
+    "no-console": "error",
+    "no-fallthrough": "error",
+    "no-undef": "error",
+    "no-unused-vars": "error",
+    "no-var": "error",
+    "prefer-const": "error",
+    "yoda": "error",
+
+    "import/no-mutable-exports": "error",
+    "sonarjs/max-switch-cases": "error",
+    "sonarjs/no-collapsible-if": "error",
+    "sonarjs/no-all-duplicated-branches": "error",
+    "sonarjs/no-duplicated-branches": "error",
+    "sonarjs/no-gratuitous-expressions": "error",
+    "sonarjs/no-ignored-return": "error",
+    "sonarjs/no-small-switch": "error",
+    "sonarjs/prefer-object-literal": "error",
+    "sonarjs/prefer-single-boolean-return": "error",
+    "@typescript-eslint/no-shadow": "error",
+    "react/default-props-match-prop-types": "error",
+    "react/no-unescaped-entities": "error",
+    "react/no-unused-prop-types": "error",
+    "react/static-property-placement": "error",
+    "array-callback-return": "error",
+    "camelcase": "error",
+    "default-case": "error",
+    "func-names": "error",
+    "no-case-declarations": "error",
+    "no-lonely-if": "error",
+    "no-nested-ternary": "error",
+    "no-plusplus": "error",
+    "no-restricted-globals": "error",
+    "no-restricted-properties": "error",
+    "no-shadow": "error",
+    "radix": "error",
+    "spaced-comment": "error",
+
+    "import/newline-after-import": "error",
+    "sonarjs/no-nested-switch": "error",
+    "@typescript-eslint/no-array-constructor": "error",
+    "@typescript-eslint/no-empty-function": "error",
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-useless-constructor": "error",
+    "react/button-has-type": "error",
+    "react/jsx-curly-brace-presence": "error",
+    "react/jsx-boolean-value": "error",
+    "react/no-array-index-key": "error",
+    "class-methods-use-this": "error",
+    "guard-for-in": "error",
+    "no-unneeded-ternary": "error",
+    "no-unused-expressions": "error",
+    "operator-assignment": "error",
+    "prefer-template": "error",
+    "vars-on-top": "error",
+
+    "no-use-before-define": "off", // doc for @typescript-eslint/no-use-before-define says to turn off the base implementation
+    "@typescript-eslint/no-use-before-define": "error"
+  },
+  "overrides": [
+    {
+      "files": "*.@(ts|tsx)",
+      "rules": {
+        "@typescript-eslint/method-signature-style": ["error", "property"],
+        // "@typescript-eslint/ban-types": [
+        //   "warn",
+        //   {
+        //     "types": {
+        //       "Omit": "Please use the 'OmitStrict' type from 'src/types/' instead.",
+        //       "object": false,
+        //       "Function": false
+        //     },
+        //     "extendDefaults": true
+        //   }
+        // ],
+
+        "quotes": "off",
+        "@typescript-eslint/quotes": "off"
+        // [
+        //   "error",
+        //   "single",
+        //   {
+        //     "avoidEscape": true,
+        //     "allowTemplateLiterals": false
+        //   }
+        // ]
+      }
+    },
+    {
+      "files": "*.@(jsx|tsx|mdx)",
+      "rules": {
+        "react/react-in-jsx-scope": "off",
+        // Set up configuration for future sweep
+        "react-hooks/exhaustive-deps": [
+          "off",
+          {
+            "additionalHooks": "useAfterInitialEffect"
+          }
+        ]
+      }
+    },
+    {
+      "files": "*.@(js|jsx|ts|tsx|mdx)",
+      "rules": {}
+    },
+    {
+      "files": ".storybook/*.js",
+      "extends": ["@pega/eslint-config/script"]
+    },
+    {
+      "files": "*/**/mocks/**.@(mocks|styles).@(tsx|ts)",
+      "rules": {
+        "import/prefer-default-export": ["off"]
+      }
+    }
+  ]
 }

package/src/tasks/init/template/.vscode/extensions.json

@@ -4,6 +4,6 @@
     "esbenp.prettier-vscode",
     "stylelint.vscode-stylelint",
     "streetsidesoftware.code-spell-checker",
-    "jpoissonnier.vscode-styled-components"
+    "styled-components.vscode-styled-components"
   ]
 }