@pega/custom-dx-components 0.0.1

package/src/tasks/delete/helper.js

@@ -0,0 +1,105 @@
+import chalk from 'chalk';
+import inquirer from 'inquirer';
+import ora from 'ora';
+
+import { LIST_COMPONENT_SERVICE_REST_ENDPOINT } from '../../constants.js';
+import {
+  constructCompleteUrl,
+  deleteLocalComponent,
+  deleteServerComponent,
+  getComponents,
+  getPegaServerConfig,
+  nodeFetch
+} from '../../util.js';
+import { getComponentsFromServer } from '../list/helper.js';
+
+export const SOURCE_OF_COMPONENT_TYPES = {
+  SERVER: 'Server',
+  LOCAL: 'Local'
+};
+
+export const getDeleteComponentsQuestions = async (options, sourceOfComponentsOption) => {
+  const defaultPegaServerConfig = await getPegaServerConfig();
+
+  return [
+    {
+      name: 'sourceOfComponents',
+      type: 'rawlist',
+      message: 'Delete components from Server or Local ?',
+      choices: Object.values(SOURCE_OF_COMPONENT_TYPES),
+      default: defaultPegaServerConfig.sourceOfComponents,
+      when() {
+        return !options.params[3];
+      }
+    }
+  ];
+};
+
+export const deleteLocalComponents = async sourceOfComponents => {
+  const localComponents = await getComponents();
+
+  if (localComponents.length > 0) {
+    const answers = await inquirer.prompt([
+      {
+        name: 'componentKey',
+        type: 'rawlist',
+        message: 'Select component to delete',
+        choices: localComponents
+      },
+      {
+        name: 'confirmDeletion',
+        type: 'confirm',
+        message: 'Are you sure ?',
+        default: false
+      }
+    ]);
+    if (answers.confirmDeletion) {
+      await deleteLocalComponent(answers.componentKey);
+    }
+  } else {
+    console.log(chalk.bold.redBright(`No custom components in ${sourceOfComponents}`));
+  }
+};
+
+export const deleteServerComponents = async (sourceOfComponents, answers) => {
+  const spinner = ora('Fetching components from server').start();
+  const data = await getComponentsFromServer(answers);
+
+  const serverComponents = JSON.parse(data);
+  spinner.stop();
+  if (serverComponents && serverComponents.pxResults?.length > 0) {
+    const choicesArr = serverComponents.pxResults.map(({ label, pyRuleSet, pyRuleSetVersion }) => {
+      const name = `${standardizeStr(label, 45)} ${standardizeStr(pyRuleSet, 30)} ${standardizeStr(
+        pyRuleSetVersion,
+        20
+      )}`;
+
+      const value = `${label}~|~${pyRuleSet}~|~${pyRuleSetVersion}`;
+      const short = `Selected component : ${chalk.redBright(
+        `${label} ${pyRuleSet} : ${pyRuleSetVersion}`
+      )}`;
+
+      return { name, value, short };
+    });
+    const answers = await inquirer.prompt({
+      name: 'componentToDelete',
+      type: 'rawlist',
+      pageSize: 10,
+      message: `Select component to delete \n  ${standardizeStr('Rule name', 48)} ${standardizeStr(
+        'Ruleset name',
+        30
+      )} ${standardizeStr('Ruleset version', 22)}`,
+      choices: choicesArr
+    });
+    await deleteServerComponent(answers.componentToDelete);
+  } else {
+    console.log(chalk.bold.redBright(`No custom components in ${sourceOfComponents}`));
+  }
+};
+
+export const standardizeStr = (str, leng) => {
+  for (let i = str.length; i <= leng; i++) {
+    str += ' ';
+  }
+  return str;
+};

package/src/tasks/delete/index.js

@@ -0,0 +1,45 @@
+import inquirer from 'inquirer';
+import ora from 'ora';
+import chalk from 'chalk';
+
+import {
+  deleteLocalComponents,
+  SOURCE_OF_COMPONENT_TYPES,
+  deleteServerComponents,
+  getDeleteComponentsQuestions
+} from './helper.js';
+
+const deleteComponentsFn = async (sourceOfComponents, answers) => {
+  switch (sourceOfComponents) {
+    case SOURCE_OF_COMPONENT_TYPES.LOCAL: {
+      await deleteLocalComponents(sourceOfComponents);
+      break;
+    }
+    case SOURCE_OF_COMPONENT_TYPES.SERVER: {
+      await deleteServerComponents(sourceOfComponents, answers);
+      break;
+    }
+    default: {
+      console.log('Source of components needs to be either Local or Server');
+      break;
+    }
+  }
+};
+
+export default async options => {
+  let sourceOfComponentsOption = SOURCE_OF_COMPONENT_TYPES.LOCAL;
+  if (options.params[3] === SOURCE_OF_COMPONENT_TYPES.LOCAL) {
+    sourceOfComponentsOption = options.params[3];
+    await deleteComponentsFn(sourceOfComponentsOption);
+  } else if (options.params[3] === SOURCE_OF_COMPONENT_TYPES.SERVER) {
+    sourceOfComponentsOption = options.params[3];
+    const questions = await getDeleteComponentsQuestions(options, sourceOfComponentsOption);
+    const answers = await inquirer.prompt(questions);
+    await deleteComponentsFn(sourceOfComponentsOption, answers);
+  } else {
+    const questions = await getDeleteComponentsQuestions(options);
+    const answers = await inquirer.prompt(questions);
+    const { sourceOfComponents } = answers;
+    await deleteComponentsFn(sourceOfComponents, answers);
+  }
+};

package/src/tasks/index.js

@@ -0,0 +1,9 @@
+export { default as createComponent } from './create/index.js';
+export { default as deleteComponent } from './delete/index.js';
+export { default as initProject } from './init/index.js';
+export { default as publishComponent } from './publish/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';

package/src/tasks/init/helper.js

@@ -0,0 +1,63 @@
+/* eslint-disable import/prefer-default-export */
+import { sanitize, validateSemver } from '../../util.js';
+
+export const getInitProjectQuestions = () => {
+  return [
+    {
+      name: 'projectName',
+      message: 'Enter Project name (required)',
+      validate: value => {
+        /* value should not be empty
+          It should not have spaces
+          It should not start with a number
+          Only case-insensitive alphanumeric values are allowed
+        */
+        if (value && !/^\d/.test(value) && value === sanitize(value)) {
+          return true;
+        }
+        return 'Only alphanumeric values are allowed, starting with alphabets';
+      }
+    },
+    {
+      name: 'organization',
+      message: 'Enter Organization name (required)',
+      validate: value => {
+        /* value should not be empty
+          It should not have spaces
+          It should not start with a number
+          Only case-insensitive alphanumeric values are allowed
+        */
+        if (value && !/^\d/.test(value) && value === sanitize(value)) {
+          return true;
+        }
+        return 'Only alphanumeric values are allowed, starting with alphabets';
+      }
+    },
+    {
+      name: 'version',
+      message: 'Version',
+      default: '1.0.0',
+      validate: value => {
+        if (validateSemver(value)) {
+          return true;
+        }
+        return 'Please provide semver compatible version e.g 0.0.1';
+      }
+    },
+    {
+      name: 'description',
+      message: 'Description',
+      default: ''
+    },
+    {
+      name: 'gitRepositoryUrl',
+      message: 'Git repository url (optional)',
+      default: ''
+    },
+    {
+      name: 'author',
+      message: 'Author',
+      default: ''
+    }
+  ];
+};

package/src/tasks/init/index.js

@@ -0,0 +1,165 @@
+import path from 'path';
+import fs from 'fs';
+import { fileURLToPath } from 'url';
+import { promisify } from 'util';
+import { exec } from 'child_process';
+
+import chalk from 'chalk';
+import { execa } from 'execa';
+import ncp from 'ncp';
+import Listr from 'listr';
+import gitignore from 'gitignore';
+import inquirer from 'inquirer';
+
+import {
+  compileMustacheTemplate,
+  isPascalCase,
+  convertIntoPascalCase,
+  sanitize
+} from '../../util.js';
+
+import { getInitProjectQuestions } from './helper.js';
+
+const execPromise = promisify(exec);
+
+const copy = promisify(ncp);
+const writeGitignore = promisify(gitignore.writeFile);
+const writeFile = promisify(fs.writeFile);
+
+const createGitignore = async options => {
+  const file = fs.createWriteStream(path.join(options.targetDirectory, '.gitignore'), {
+    flags: 'a'
+  });
+  return writeGitignore({
+    type: 'Node',
+    file
+  });
+};
+
+const createLicense = async options => {
+  const targetPath = path.join(options.targetDirectory, 'LICENSE');
+  const licenseContent = 'Enter license text here';
+  return writeFile(targetPath, licenseContent, 'utf8');
+};
+
+const copyProjectTemplate = async options => {
+  await copy(options.templateDirectory, options.targetDirectory, {
+    clobber: false
+  });
+  const packageJsonPath = path.join(options.targetDirectory, 'package.json.mustache');
+
+  let { organization, projectName } = options;
+
+  projectName = sanitize(projectName).toLowerCase();
+
+  organization = sanitize(organization);
+  if (!isPascalCase(organization)) {
+    organization = convertIntoPascalCase(organization);
+  }
+
+  options = {
+    ...options,
+    organization,
+    projectName
+  };
+  const output = compileMustacheTemplate(packageJsonPath, options);
+  fs.writeFileSync(packageJsonPath, output);
+  fs.renameSync(packageJsonPath, packageJsonPath.replace('.mustache', ''));
+  await createLicense(options);
+};
+
+const initGit = async options => {
+  const result = await execa('git', ['init'], {
+    cwd: options.targetDirectory
+  });
+  if (result.failed) {
+    return Promise.reject(new Error('Failed to initialize git'));
+  }
+};
+
+export default async options => {
+  options.templateDirectory = path.resolve(
+    path.dirname(fileURLToPath(import.meta.url)),
+    'template'
+  );
+  let projectName = 'test';
+
+  const questions = getInitProjectQuestions();
+
+  await inquirer.prompt(questions).then(async answers => {
+    projectName = answers.projectName;
+    projectName = sanitize(projectName).toLowerCase();
+    options = { ...options, ...answers };
+
+    const projectDirectory = `./${projectName}`;
+
+    if (!fs.existsSync(projectDirectory)) {
+      fs.mkdirSync(projectDirectory);
+    } else {
+      console.log(chalk.bold.red(`A project with name ${projectName} already exists. Exiting...`));
+      process.exit(1);
+    }
+
+    const targetDirectory = options.targetDirectory || process.cwd();
+    options.targetDirectory = path.join(targetDirectory, projectName);
+  });
+
+  const installDependenciesText = `Installing dependencies. This will take a couple of minutes.`;
+
+  const tasks = new Listr(
+    [
+      {
+        title: `Creating a new custom component project in ${chalk.blue(options.targetDirectory)}`,
+        task: () => copyProjectTemplate(options)
+      },
+      {
+        title: 'Create gitignore',
+        task: () => createGitignore(options)
+      },
+      {
+        title: 'Initialize git',
+        task: () => initGit(options),
+        enabled: () => options.git
+      },
+      {
+        title: installDependenciesText,
+        task: () => execPromise('npm i --production=false', { cwd: options.targetDirectory })
+      }
+    ],
+    {
+      exitOnError: false
+    }
+  );
+
+  await tasks.run();
+  console.log('\n');
+  console.log(
+    `${chalk.green('Success!!')} Project created at ${chalk.blueBright(options.targetDirectory)}`
+  );
+  console.log(
+    '\n',
+    `Inside that directory, you can run several commands:`,
+    '\n\n',
+    `${chalk.blueBright('npm start')}`,
+    `\n  Start Storybook in development mode`,
+    '\n\n',
+    `${chalk.blueBright('npm run create')}`,
+    '\n',
+    `${chalk.blueBright('npm run list')}`,
+    `\n  Try out custom-component actions like create, list, publish, etc`,
+    '\n\n',
+    `${chalk.blueBright('npm run lint')}`,
+    `\n  Run eslint for component source files`,
+    '\n'
+  );
+
+  console.log(
+    `We suggest that you begin by typing:`,
+    '\n\n',
+    `${chalk.blueBright('cd')} ${chalk.bold(projectName)}`,
+    '\n',
+    `${chalk.blueBright('npm start')}`,
+    '\n'
+  );
+  return true;
+};

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

@@ -0,0 +1,10 @@
+{
+  "extends": ["@pega"],
+  "parserOptions": { "project": "tsconfig.json" },
+  "root": true,
+  "ignorePatterns": ["node_modules", "lib", "!.storybook", ".storybook/public"],
+  "rules": {
+    "prettier/prettier": "off",
+    "react/react-in-jsx-scope": "off"
+  }
+}

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

@@ -0,0 +1 @@
+"@pega/prettier-config"

package/src/tasks/init/template/.storybook/main.js

@@ -0,0 +1,6 @@
+module.exports = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  core: {
+    builder: 'webpack5'
+  }
+};

package/src/tasks/init/template/.storybook/pega-logo.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg viewBox="0 0 311 68" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.1 (44463) - http://www.bohemiancoding.com/sketch -->
+    <title>Logo</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Logo">
+            <g id="pega_logo_horizontal_positive_rgb">
+                <path d="M136.36,17.098 L136.173,17.009 C136.154,16.998 133.96,16.01 132.245,17.815 L132.026,18.046 L135.539,19.768 L136.36,17.098 Z M152.441,36.389 C152.441,36.389 150.91,39.13 150.224,40.143 C149.535,41.164 147.38,41.798 145.517,40.908 C144.665,40.503 136.694,35.854 133.644,36.12 C118.205,37.466 113.999,31.105 113.503,30.527 C113.005,29.949 112.077,30.218 112.74,31.355 C116.127,37.163 126.15,39.856 126.15,39.856 C128.771,46.172 129.085,50.597 129.085,50.597 C126.489,48.574 123.687,46.869 120.714,45.453 C112.768,40.121 100.329,33.518 83.207,29.379 C84.191,15.797 91.044,-3.837 123.092,0.806 C123.092,0.806 129.522,1.86 133.809,4.824 C133.809,4.824 132.779,5.904 131.425,7.256 C130.071,8.605 131.569,9.471 131.569,9.471 L138.338,14.792 C138.417,17.607 138.533,18.396 140.651,20.944 C142.769,23.487 151.004,32.112 152.081,33.266 C153.329,34.6 152.441,36.389 152.441,36.389 Z M78.633,9.915 C76.938,16.897 77.068,23.049 77.939,28.221 C76.33,27.901 74.697,27.594 73.014,27.32 C37.94,21.612 27.361,38.899 31.455,52.916 C19.86,57.274 8.963,62.263 0.214,67.162 C13.98,34.146 43.896,5.087 69.145,1.268 C77.389,0.181 79.708,5.529 78.633,9.915 L78.633,9.915 Z" id="Fill-1" fill="#1F2555"></path>
+                <path d="M83.492,40.09 C97.157,39.01 110.054,40.381 120.713,45.453 C112.768,40.121 100.329,33.518 83.206,29.379 C82.864,34.111 83.23,38.107 83.492,40.09 Z M81.52,40.262 C66.209,41.723 48.105,46.663 31.455,52.916 C27.361,38.899 37.941,21.612 73.014,27.32 C74.697,27.594 76.33,27.901 77.938,28.221 C78.77,33.166 80.276,37.228 81.52,40.262 L81.52,40.262 Z" id="Fill-2" fill="#00A6A7"></path>
+                <path d="M286.63,35.039 L291.379,23.446 L296.129,35.039 L286.63,35.039 Z M287.854,14 L272.536,50 L280.553,50 L283.819,41.985 L298.938,41.985 L302.204,50 L310.427,50 L295.108,14 L287.854,14 Z M188.647,26.704 C188.647,29.787 186.335,32.153 182.375,32.153 L176.1,32.153 L176.1,21.149 L182.219,21.149 C186.181,21.149 188.647,23.052 188.647,26.601 L188.647,26.704 Z M182.889,14 L168.18,14 L168.18,50 L176.1,50 L176.1,39.2 L182.115,39.2 C190.19,39.2 196.673,34.878 196.673,26.547 L196.673,26.444 C196.673,19.09 191.48,14 182.889,14 Z M239.764,18.02 C235.989,21.708 234.075,26.376 234.075,31.896 C234.075,37.421 235.953,42.054 239.663,45.675 C243.366,49.292 248.022,51.123 253.503,51.123 C259.992,51.123 265.064,49.159 268.587,45.284 L268.769,45.08 L268.769,28.556 L253.112,28.556 L253.112,35.244 L261.279,35.244 L261.279,41.993 C259.164,43.252 256.525,43.891 253.429,43.891 C250.221,43.891 247.454,42.792 245.203,40.62 C242.958,38.458 241.819,35.527 241.819,31.926 C241.819,28.322 242.992,25.379 245.304,23.18 C247.624,20.972 250.538,19.852 253.966,19.852 C255.769,19.852 257.366,20.074 258.711,20.512 C259.973,20.922 261.251,21.667 262.517,22.712 L266.897,17.183 C264.586,15.147 260.427,12.467 253.503,12.467 C248.162,12.467 243.539,14.336 239.764,18.02 Z M210.336,35.604 L225.842,35.604 L225.842,28.556 L210.336,28.556 L210.336,21.042 L229.623,21.042 L229.623,14 L202.466,14 L202.466,50 L229.879,50 L229.879,42.955 L210.336,42.955 L210.336,35.604 L210.336,35.604 Z" id="Fill-3" fill="#1F2555"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/tasks/init/template/.storybook/preview.tsx

@@ -0,0 +1,44 @@
+import type { DecoratorFn } from '@storybook/react';
+import {
+  Configuration,
+  PopoverManager,
+  Toaster,
+  ModalManager,
+  WorkTheme
+} from '@pega/cosmos-react-core';
+
+export const decorators: DecoratorFn[] = [
+  (Story, context) => {
+    return (
+      <Configuration>
+        <PopoverManager>
+          <Toaster dismissAfter={5000}>
+            <ModalManager>
+              <Story {...context} />
+            </ModalManager>
+          </Toaster>
+        </PopoverManager>
+      </Configuration>
+    );
+  }
+];
+
+export const parameters = {
+  backgrounds: {
+    default: 'App',
+    values: [
+      {
+        name: 'App',
+        value: WorkTheme.base.palette['app-background']
+      },
+      {
+        name: 'Primary',
+        value: WorkTheme.base.palette['primary-background']
+      },
+      {
+        name: 'Secondary',
+        value: WorkTheme.base.palette['secondary-background']
+      }
+    ]
+  }
+};

package/src/tasks/init/template/.storybook/theme.js

@@ -0,0 +1,44 @@
+import { create } from '@storybook/theming/create';
+
+import logo from './pega-logo.svg';
+
+const primaryColor = '#005EA7';
+const secondaryColor = '#0076D1';
+const purple = '#433254';
+const black = '#262626';
+const white = '#F0F0F0';
+
+export default create({
+  base: 'light',
+
+  colorPrimary: secondaryColor,
+  colorSecondary: purple,
+
+  // UI
+  appBg: 'white',
+  appContentBg: 'white',
+  appBorderColor: '#D6DBE1',
+  appBorderRadius: 4,
+
+  // Typography
+  fontBase: '"Open Sans", sans-serif',
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: black,
+  textInverseColor: white,
+
+  // Toolbar default and active colors
+  barTextColor: black,
+  barSelectedColor: secondaryColor,
+  barBg: white,
+
+  // Form colors
+  inputBg: 'white',
+  inputBorder: primaryColor,
+  inputTextColor: black,
+  inputBorderRadius: 4,
+
+  brandTitle: 'Pega Component System',
+  brandImage: logo
+});

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

@@ -0,0 +1,4 @@
+{
+  "extends": ["@pega/stylelint-config"],
+  "ignoreFiles": ["node_modules/**", "lib/**", "!.storybook", ".storybook/public"]
+}

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

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "stylelint.vscode-stylelint",
+    "streetsidesoftware.code-spell-checker",
+    "jpoissonnier.vscode-styled-components"
+  ]
+}

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

@@ -0,0 +1,48 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+
+  "files.insertFinalNewline": true,
+  "files.trimFinalNewlines": true,
+  "files.trimTrailingWhitespace": true,
+  "files.eol": "\n",
+  "files.encoding": "utf8",
+
+  "editor.insertSpaces": true,
+  "editor.tabSize": 2,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": ["source.fixAll.eslint"],
+
+  "[javascript]": {
+    "editor.formatOnSave": true
+  },
+  "[javascriptreact]": {
+    "editor.formatOnSave": true
+  },
+  "[typescript]": {
+    "editor.formatOnSave": true
+  },
+  "[typescriptreact]": {
+    "editor.formatOnSave": true
+  },
+  "[json]": {
+    "editor.formatOnSave": true
+  },
+  "[jsonc]": {
+    "editor.formatOnSave": true
+  },
+  "[html]": {
+    "editor.formatOnSave": true
+  },
+  "[markdown]": {
+    "editor.formatOnSave": true
+  },
+
+  "javascript.preferences.quoteStyle": "single",
+  "javascript.format.semicolons": "insert",
+  "typescript.preferences.quoteStyle": "single",
+  "typescript.format.semicolons": "insert",
+
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
+}