@pega/custom-dx-components 26.1.11 → 26.1.12-alpha.0.2

package/src/tasks/init/index.js

@@ -1,16 +1,13 @@
 import path from 'path';
 import fs from 'fs';
 import { fileURLToPath } from 'url';
-import { promisify } from 'util';
 import chalk from 'chalk';
 import { execa } from 'execa';
-import { Listr } from 'listr2';
-import gitignore from 'gitignore';
+import { Listr, PRESET_TIMER } from 'listr2';
 import inquirer from 'inquirer';
 import { compileMustacheTemplate, isPascalCase, convertIntoPascalCase, sanitize } from '../../util.js';
 import { getInitProjectQuestions } from './helper.js';
-
-const writeGitignore = promisify(gitignore.writeFile);
+import { enableAgentFiles } from '../../ai/index.js';
 
 const copyProjectDir = async (src, dest) => {
   if (typeof fs.cp === 'function') {
@@ -18,24 +15,21 @@ const copyProjectDir = async (src, dest) => {
   }
 };
 
-const createGitignore = async options => {
-  const file = fs.createWriteStream(path.join(options.targetDirectory, '.gitignore'), {
-    flags: 'a'
-  });
-  return writeGitignore({
-    type: 'Node',
-    file
-  });
+const createGitignore = async (options) => {
+  // Bundled locally to avoid a network fetch (and the `gitignore` package) at init time.
+  const templatePath = path.resolve(path.dirname(fileURLToPath(import.meta.url)), 'Node.gitignore');
+  const content = await fs.promises.readFile(templatePath, 'utf8');
+  return fs.promises.appendFile(path.join(options.targetDirectory, '.gitignore'), content);
 };
 
-const createLicense = async options => {
+const createLicense = async (options) => {
   // Write LICENSE file directly
   const targetPath = path.join(options.targetDirectory, 'LICENSE');
   const licenseContent = 'Enter license text here';
   await fs.promises.writeFile(targetPath, licenseContent, 'utf8');
 };
 
-const copyProjectTemplate = async options => {
+const copyProjectTemplate = async (options) => {
   // Use fast copy
   await copyProjectDir(options.templateDirectory, options.targetDirectory);
   const packageJsonPath = path.join(options.targetDirectory, 'package.json.mustache');
@@ -57,31 +51,109 @@ const copyProjectTemplate = async options => {
   // Rename templateNPMRC.txt to .npmrc if exists
   try {
     await fs.promises.rename(templateNPMRCPath, templateNPMRCPath.replace('templateNPMRC.txt', '.npmrc'));
-  } catch (e) {
+  } catch {
     // ignore if not present
   }
 
   await createLicense(options);
 };
 
-const initGit = async options => {
+const initGit = async (options) => {
   // Use execa for async git init
   const result = await execa('git', ['init'], {
-    cwd: options.targetDirectory
+    cwd: options.targetDirectory,
   });
   if (result.failed) {
     throw new Error('Failed to initialize git');
   }
 };
 
-export default async options => {
+// Same heuristic listr2 itself uses to pick unicode vs ascii symbols, so our custom
+// bar degrades consistently with it on terminals that can't render unicode (e.g.
+// plain Windows cmd.exe outside Windows Terminal/VS Code).
+const supportsUnicode = () => {
+  if (process.platform !== 'win32') {
+    return process.env.TERM !== 'linux';
+  }
+  return (
+    Boolean(process.env.WT_SESSION) ||
+    process.env.TERM_PROGRAM === 'vscode' ||
+    process.env.TERM === 'xterm-256color' ||
+    process.env.TERM === 'alacritty'
+  );
+};
+
+const UNICODE = supportsUnicode();
+const FULL_BLOCK = UNICODE ? '█' : '#';
+const EMPTY_BLOCK = UNICODE ? '░' : '-';
+const BAR_OPEN = UNICODE ? '❰' : '[';
+const BAR_CLOSE = UNICODE ? '❱' : ']';
+
+// npm install has no observable progress, so fill the bar over an estimated typical
+// duration, capped short of 100% so it never falsely claims completion.
+const ESTIMATED_INSTALL_SECONDS = 40;
+const PROGRESS_BAR_WIDTH = 50;
+const PARTIAL_BLOCKS = UNICODE ? ['▏', '▎', '▍', '▌', '▋', '▊', '▉'] : [];
+
+// Interpolates amber -> green so the bar visibly warms up as install progresses.
+// chalk automatically downsamples this to the terminal's actual color support level
+// (256-color/16-color/none), so no separate fallback is needed here.
+const barColor = (fraction) => {
+  const from = { r: 0xff, g: 0x9d, b: 0x2f };
+  const to = { r: 0x35, g: 0xd0, b: 0x7f };
+  const mix = (a, b) => Math.round(a + (b - a) * fraction);
+  return chalk.rgb(mix(from.r, to.r), mix(from.g, to.g), mix(from.b, to.b));
+};
+
+const renderProgressBar = (fraction) => {
+  const exactFilled = fraction * PROGRESS_BAR_WIDTH;
+  const fullChars = Math.min(Math.floor(exactFilled), PROGRESS_BAR_WIDTH);
+  const remainder = exactFilled - fullChars;
+  const partialChar =
+    fullChars < PROGRESS_BAR_WIDTH && remainder > 0 && PARTIAL_BLOCKS.length > 0 ? PARTIAL_BLOCKS[Math.floor(remainder * PARTIAL_BLOCKS.length)] : '';
+  const emptyChars = PROGRESS_BAR_WIDTH - fullChars - (partialChar ? 1 : 0);
+
+  const color = barColor(fraction);
+  const bar = color(FULL_BLOCK.repeat(fullChars) + partialChar) + chalk.gray.dim(EMPTY_BLOCK.repeat(emptyChars));
+  const percentText = chalk.bold(`${Math.round(fraction * 100)}%`);
+  return `${chalk.dim(BAR_OPEN)}${bar}${chalk.dim(BAR_CLOSE)} ${percentText}`;
+};
+
+// Ramps linearly to 90% over the estimated duration, then keeps crawling toward 99%
+// for as long as the install actually takes. Uses a slow-tailed curve (rather than
+// exponential) so it keeps ticking upward even after several minutes instead of
+// visibly flatlining at one number.
+const OVERTIME_TAU_SECONDS = 150;
+const estimateFraction = (elapsedSeconds) => {
+  if (elapsedSeconds <= ESTIMATED_INSTALL_SECONDS) {
+    return (elapsedSeconds / ESTIMATED_INSTALL_SECONDS) * 0.9;
+  }
+  const overtimeSeconds = elapsedSeconds - ESTIMATED_INSTALL_SECONDS;
+  return 0.9 + 0.09 * (overtimeSeconds / (overtimeSeconds + OVERTIME_TAU_SECONDS));
+};
+
+const installDependencies = (options, task) => {
+  const startTime = Date.now();
+  const poll = setInterval(() => {
+    const elapsedSeconds = (Date.now() - startTime) / 1000;
+    const fraction = estimateFraction(elapsedSeconds);
+    task.output = renderProgressBar(fraction);
+  }, 1000);
+
+  return execa('npm', ['i', '--force', '--include=dev', '--no-audit', '--no-fund', '--loglevel=error'], {
+    cwd: options.targetDirectory,
+  }).finally(() => clearInterval(poll));
+};
+
+export default async (options) => {
   options.templateDirectory = path.resolve(path.dirname(fileURLToPath(import.meta.url)), 'template');
-  let projectName = 'test';
+  let projectName;
 
-  const questions = getInitProjectQuestions();
+  const questions = getInitProjectQuestions(options);
   const answers = await inquirer.prompt(questions);
   projectName = sanitize(answers.projectName).toLowerCase();
   options = { ...options, ...answers };
+  const includeAi = !options.noAi && options.includeAi !== false;
 
   const projectDirectory = `./${projectName}`;
   if (!fs.existsSync(projectDirectory)) {
@@ -103,16 +175,21 @@ export default async options => {
     [
       {
         title: `Creating a new custom component project in ${chalk.blue(options.targetDirectory)}`,
-        task: () => copyProjectTemplate(options)
+        task: () => copyProjectTemplate(options),
       },
       {
         title: 'Create gitignore',
-        task: () => createGitignore(options)
+        task: () => createGitignore(options),
+      },
+      {
+        title: `Enabling AI-assisted development ${chalk.blue('(Copilot, Claude Code, Cursor, Codex, Gemini)')}`,
+        task: () => enableAgentFiles(options.targetDirectory),
+        enabled: () => includeAi,
       },
       {
         title: 'Initialize git',
         task: () => initGit(options),
-        enabled: () => options.git
+        enabled: () => options.git,
       },
       /*
       {
@@ -123,10 +200,9 @@ export default async options => {
       */
       {
         title: installDependenciesText,
-        task: () =>
-          execa('npm', ['i', '--force', '--no-audit', '--no-fund', '--loglevel=error'], {
-            cwd: options.targetDirectory
-          })
+        outputBar: 1,
+        timer: PRESET_TIMER,
+        task: (ctx, task) => installDependencies(options, task),
       },
 
       /*
@@ -154,13 +230,17 @@ export default async options => {
       },
       */
 
+      /*
+      // Redundant: npm i above already resolves to the newest version satisfying
+      // each range since there's no committed package-lock.json in the template.
       {
         title: 'Updating',
         task: () =>
           execa('npm', ['update', '--dev', '--no-audit', '--no-fund', '--loglevel=error'], {
-            cwd: options.targetDirectory
-          })
-      }
+            cwd: options.targetDirectory,
+          }),
+      },
+      */
 
       /* {
         title: 'Installing quick run',
@@ -168,8 +248,8 @@ export default async options => {
       } */
     ],
     {
-      exitOnError: false
-    }
+      exitOnError: false,
+    },
   );
 
   await tasks.run();
@@ -198,7 +278,7 @@ export default async options => {
     '\n\n',
     `Publish component library\n`,
     ` ${chalk.blueBright('npm run publish')}`,
-    '\n'
+    '\n',
   );
 
   console.log(
@@ -207,7 +287,7 @@ export default async options => {
     `${chalk.blueBright('cd')} ${chalk.bold(projectName)}`,
     '\n',
     `${chalk.blueBright('npm run createLib')} or ${chalk.blueBright('npm run importLibVersion')}`,
-    '\n'
+    '\n',
   );
   return true;
 };

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

@@ -1 +1,4 @@
-"@pega/prettier-config"
+{
+  "printWidth": 120,
+  "singleQuote": true
+}

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

@@ -2,13 +2,10 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  addons: ['@storybook/addon-links'],
   framework: {
     name: '@storybook/react-vite',
     options: {},
   },
-  docs: {
-    autodocs: 'tag',
-  },
 };
 export default config;

package/src/tasks/init/template/.storybook/manager.ts

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/manager-api';
+import { addons } from 'storybook/manager-api';
 import Theme from './theme';
 
 addons.setConfig({

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

@@ -29,11 +29,11 @@ const preview: Preview = {
     // Sets up contexts
     (Story, context) => {
       return (
-        <Configuration disableDefaultFontLoading id='Preview'>
+        <Configuration disableDefaultFontLoading id="Preview">
           <ShortcutManager>
             <LiveLog maxLength={context.args.liveLogMaxLength || 50}>
               <PopoverManager>
-                <Toaster dismissAfter={5000}>
+                <Toaster>
                   <ModalManager>
                     <Story {...context} />
                   </ModalManager>

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

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming';
+import { create } from 'storybook/theming';
 
 import logo from './pega-logo.svg';
 

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

@@ -2,7 +2,6 @@
   "recommendations": [
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "stylelint.vscode-stylelint",
     "streetsidesoftware.code-spell-checker",
     "styled-components.vscode-styled-components"
   ]

package/src/tasks/init/template/README.md

@@ -37,9 +37,9 @@ Ensure you have access to the following in your system:
 
 - Git version 2.30 or later
 
-- System node version >= 24.4.1
+- System node version >= 24.22.1
 
-- System npm version 11.4.2
+- System npm version 11.19.1
 
 ## Latest Documentation
 

package/src/tasks/init/template/eslint.config.mjs

@@ -1,21 +1,17 @@
 import { globalIgnores } from 'eslint/config';
-import { fileURLToPath } from 'node:url';
 import eslint from '@eslint/js';
 import tseslint from 'typescript-eslint';
-import sonarjs from 'eslint-plugin-sonarjs';
-import importPlugin from 'eslint-plugin-import';
-import react from 'eslint-plugin-react';
-import reactHooks from 'eslint-plugin-react-hooks';
-// eslint.config.js
+import eslintReact from '@eslint-react/eslint-plugin';
 import { defineConfig } from 'eslint/config';
 
-const __filename = fileURLToPath(import.meta.url);
-
 export default defineConfig([
   eslint.configs.recommended,
   ...tseslint.configs.recommended,
+  eslintReact.configs['recommended-typescript'],
   globalIgnores([
     '**/node_modules',
+    // agent skills ship sample assets that are not part of the TypeScript project
+    '.claude/**',
     'packages/*/lib',
     '!**/.storybook',
     '.storybook/public',
@@ -51,10 +47,7 @@ export default defineConfig([
         document: true,
         fetch: true,
       },
-
-      ecmaVersion: 13,
-      sourceType: 'script',
-
+      ecmaVersion: 'latest',
       parserOptions: {
         project: 'tsconfig.json',
         ecmaFeatures: {
@@ -63,160 +56,25 @@ export default defineConfig([
       },
     },
 
-    settings: {
-      'import/resolver': {
-        typescript: {},
-        react: {
-          version: 'detect',
-        },
-        node: {
-          extensions: ['.js', '.jsx', '.ts', '.tsx'],
-        },
-      },
-
-      react: {
-        version: 'detect',
-      },
-    },
-
-    plugins: { sonarjs, import: importPlugin, react, 'react-hooks': reactHooks },
     rules: {
-      'prettier/prettier': 'off',
-      'sonarjs/cognitive-complexity': 'off',
-      'sonarjs/no-identical-functions': 'off',
-      'sonarjs/no-duplicate-string': 'off',
-      'sonarjs/no-nested-template-literals': 'off',
-      '@typescript-eslint/array-type': 'off',
-      '@typescript-eslint/no-wrapper-object-types': 'off',
-      '@typescript-eslint/no-explicit-any': 'off',
-      '@typescript-eslint/no-empty-object-type': 'off',
-      '@typescript-eslint/ban-ts-comment': 'off',
-      '@typescript-eslint/no-unsafe-function-type': 'off',
-      '@typescript-eslint/no-inferrable-types': 'off',
-      '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',
-      '@typescript-eslint/naming-convention': 'off',
-      '@typescript-eslint/ban-types': 'off',
-      eqeqeq: 'off',
-      'no-alert': 'off',
-      'no-console': 'error',
-      'no-fallthrough': 'error',
-      'no-unused-vars': 'off',
+      // Project-specific relaxations of the recommended presets above.
       'no-var': 'off',
-      yoda: 'error',
       'no-irregular-whitespace': 'off',
       'no-empty': 'off',
-      'no-new-object': 'off',
-      'import/no-relative-packages': 'off',
-      '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': 'off',
-      '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',
-      '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-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',
-      'prefer-regex-literals': 'off',
-      'no-use-before-define': 'off',
-      '@typescript-eslint/no-use-before-define': 'error',
+      'no-console': 'error',
+      '@typescript-eslint/ban-ts-comment': 'off',
+      '@typescript-eslint/no-empty-object-type': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unsafe-function-type': 'off',
+      '@typescript-eslint/no-wrapper-object-types': 'off',
     },
   },
   {
     files: ['**/*.@(ts|tsx)'],
-
     rules: {
       '@typescript-eslint/method-signature-style': ['error', 'property'],
-      quotes: 'off',
-      '@typescript-eslint/quotes': 'off',
-    },
-  },
-  {
-    files: ['**/*.@(jsx|tsx|mdx)'],
-
-    rules: {
-      'react/react-in-jsx-scope': 'off',
-      'react-hooks/rules-of-hooks': 'off',
-      'react-hooks/exhaustive-deps': 'off',
-    },
-  },
-  {
-    files: ['**/*.@(ts|tsx)'],
-    rules: {
+      // Generated components log to the console for diagnostics; only enforced for plain JS.
       'no-console': 'off',
-      'import/prefer-default-export': 'off',
-      'import/no-relative-packages': 'off',
-      'react/jsx-fragments': 'off',
-      'react/react-in-jsx-scope': 'off',
-      'react-hooks/exhaustive-deps': 'off',
-      'sonarjs/cognitive-complexity': ['warn', 45],
-    },
-  },
-  {
-    files: ['**/*.@(js|jsx|ts|tsx|mdx)'],
-    rules: {},
-  },
-
-  {
-    files: ['*/**/mocks/**.@(mocks|styles).@(tsx|ts)'],
-
-    rules: {
-      'import/prefer-default-export': ['off'],
     },
   },
 ]);

package/src/tasks/init/template/jest.config.cjs

@@ -4,6 +4,8 @@ const packagesToTranspile = [
   '@pega/cosmos-react-social',
   '@pega/cosmos-react-rte',
   '@pega/cosmos-react-work',
+  '@storybook',
+  'storybook',
   'shortcuts',
   'preact',
 ];