@pega/custom-dx-components 0.0.1 → 0.23.2

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

@@ -0,0 +1,357 @@
+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,
+  AI_DAVINCI_PROMPT_FILENAME
+} from '../../constants.js';
+
+import _ from 'lodash';
+
+
+import {
+  getComponents,
+  getComponentsOfType,
+  getPegaConfig,
+  getAIPromptData,
+  getDirectoryFiles,
+  getAIComponent,
+  getInfinityAIComponent,
+  getComponentDirectoryPath,
+  compileMustacheTemplate,
+  getComponentConfigJson,
+  getComponentConfigType
+} from '../../util.js';
+import { str } from 'ajv';
+
+
+export const getSelectAComponent = async() => {
+  //let localComponents = await getComponents();
+  const localComponents = await getComponentsOfType("Widget,Template");
+
+  let answers;
+
+  if (localComponents.length > 0) {
+    answers = await inquirer.prompt([
+      {
+        name: 'componentKey',
+        type: 'rawlist',
+        message: 'Select component to generateAI',
+        choices: localComponents
+      }]);
+  }
+
+  return answers;
+}
+
+export const determineAndGenerateAI = async (enteredKey) => {
+
+  if (!enteredKey) {
+    let answer = await getSelectAComponent();
+    if (answer) {
+      enteredKey = answer.componentKey;
+    }
+    else {
+      console.log(chalk.bold.redBright(`No custom components to generate AI. Please create a Widget or Template component first.`));
+      process.exit(1);
+    }
+
+  }
+
+  const targetDirectory = await getComponentDirectoryPath(enteredKey);
+  const configType = await getComponentConfigType(targetDirectory);
+
+  switch (configType.toLowerCase()) {
+    case "widget":
+    case "template":
+      await getWidgetTemplateAndGenerateAI(enteredKey);
+      break;
+    case "field":
+      await getFieldAndGenerateAI(enteredKey);
+      break;
+  }
+
+
+}
+
+export const getWidgetTemplateAndGenerateAI = async (enteredKey) => {
+  const localComponents = await getComponents();
+
+  let answers;
+
+  if (localComponents.length > 0) {
+
+    answers = await inquirer.prompt([
+
+      {
+        name: 'additionalPromptInfo',
+        message: 'Enter what you would like this component to do? ',
+      }
+
+
+    ]);
+
+    console.log("Generating component...");
+
+    await generateInfinityAIComponent(enteredKey, answers.additionalPromptInfo);
+
+  } else {
+    console.log(chalk.bold.redBright(`No custom components in ${sourceOfComponents}`));
+  }
+};
+
+
+export const getFieldAndGenerateAI = async (enteredKey) => {
+  const localComponents = await getComponents();
+
+  let answers;
+
+  if (localComponents.length > 0) {
+
+    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',
+      }
+
+    ]);
+
+
+    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);
+  let configFileData = await getComponentConfigJson(targetDirectory);
+
+ // let data = JSON.parse(configFileData);
+ // data.properties = [];
+ // configFileData  = JSON.stringify(data);
+
+
+  let strPrompt = compileMustacheTemplate(fileURLToPath(new URL(fileName, import.meta.url)), {
+    COMPONENT_CONFIG: configFileData,
+    COMPONENT_DSC: designSystemComponents,
+    COMPONENT_ADDITIONAL: additionalPromptInfo
+  });
+
+  strPrompt = strPrompt.replaceAll("$", "//$");
+
+  strPrompt = _.unescape(strPrompt);
+
+
+  //let strPrompt = await getAIPromptData(fileURLToPath(new URL(fileName, import.meta.url)));
+  //let aiComponent = await getAIComponent(strPrompt);
+  let aiComponent = await getInfinityAIComponent(strPrompt);
+
+  if (aiComponent) {
+    //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.`);
+  }
+
+
+
+
+}
+
+export const generateInfinityAIComponent = async (componentKey, additionalPromptInfo) => {
+
+  const fileName = "." + path.sep + AI_DAVINCI_PROMPT_FILENAME;
+
+  // get config file
+  //
+  const targetDirectory = await getComponentDirectoryPath(componentKey);
+  let configFileData = await getComponentConfigJson(targetDirectory);
+
+  // need to escape $
+  configFileData = configFileData.replaceAll("$", "\\$");
+
+  let strPrompt = compileMustacheTemplate(fileURLToPath(new URL(fileName, import.meta.url)), {
+    COMPONENT_CONFIG: configFileData,
+    COMPONENT_ADDITIONAL: additionalPromptInfo
+  });
+
+  strPrompt = _.unescape(strPrompt);
+
+  //let strPrompt = await getAIPromptData(fileURLToPath(new URL(fileName, import.meta.url)));
+  let aiComponent = await getInfinityAIComponent(strPrompt);
+
+  //console.log(aiData);
+
+  if (aiComponent) {
+    const indexFile = join(targetDirectory, "index-genai.jsx.tmp");
+
+    // remove enclosed ``` and "Answer:"
+    if (aiComponent.indexOf("```") >= 0) {
+      aiComponent = aiComponent.substring(aiComponent.indexOf("```"));
+      aiComponent = aiComponent.substring(0, aiComponent.lastIndexOf("```"));
+    }
+    else if (aiComponent.indexOf("'") == 0) {
+      aiComponent = aiComponent.substring(aiComponent.indexOf("'"));
+      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);
+
+
+
+      const genList = dirList.map( (el) => {
+        if (el.indexOf("index-genai") >= 0) {
+          return el;
+        }
+        else {
+          return "";
+        }
+      });
+
+    if (genList.length > 0) {
+      let lastIndex = -1;
+
+      genList.forEach((el) => {
+        const theName = el.split(".")[0];
+
+        if (theName.indexOf("index-genai") >=0) {
+          if (lastIndex === -1) {
+            lastIndex = 0;
+          }
+          const theIndex = theName.split("-")[2];
+
+          if (parseInt(theIndex) > lastIndex) {
+            lastIndex = parseInt(theIndex);
+          }
+        }
+
+      });
+
+      lastIndex++;
+
+      if (lastIndex > 0) {
+        const oldGenFileName = join(targetDirectory, "index-genai.jsx.tmp");
+        const newGenFileName = join(targetDirectory, "index-genai-" + lastIndex + ".jsx.tmp");
+
+        renameFile(oldGenFileName, newGenFileName);
+      }
+
+    }
+
+
+    // creae new index.jsx
+    fs.writeFileSync(indexFile, aiComponent, err => {
+      if (err) {
+        Promise.reject(`${chalk.bold.red(err)}`);
+      }
+    });
+
+    console.log(`Updated file ${chalk.green('index-genai.jsx.tmp')} in directory ${chalk.green(componentKey)} with AI generated code.`);
+  }
+
+
+
+}

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

@@ -0,0 +1,34 @@
+import inquirer from 'inquirer';
+import ora from 'ora';
+import chalk from 'chalk';
+
+import {
+  determineAndGenerateAI
+} 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);
+    await determineAndGenerateAI(sourceOfComponents);
+  }
+  else {
+
+    //await getComponentAndGenerateAI();
+    await determineAndGenerateAI();
+  }
+
+
+
+
+
+};

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"
   ]
 }