deps(create-catalyst): replace chalk with consola colorize utility function (#2591)

* deps(create-catalyst): lock chalk to 5.4.1

* deps(create-catalyst): replace chalk with consola colorize utility function

Author: matthewvolk

.changeset/mighty-pets-dream.md

@@ -0,0 +1,5 @@
+---
+'@bigcommerce/create-catalyst': patch
+---
+
+Removes `chalk` dependency in favor of `consola` "colorize" utility function (which only depends on `node:tty`)

packages/create-catalyst/package.json

@@ -26,9 +26,9 @@
     "@inquirer/type": "^3.0.7",
     "@segment/analytics-node": "^2.2.1",
     "ansi-escapes": "^7.0.0",
-    "chalk": "^5.4.1",
     "commander": "^14.0.0",
     "conf": "^13.1.0",
+    "consola": "^3.4.2",
     "cross-spawn": "^7.0.6",
     "dotenv": "^16.5.0",
     "fs-extra": "^11.3.0",

packages/create-catalyst/src/commands/create.ts

@@ -1,7 +1,7 @@
 import { Command, Option } from '@commander-js/extra-typings';
 import { input, select } from '@inquirer/prompts';
-import chalk from 'chalk';
 import { execSync } from 'child_process';
+import { colorize } from 'consola/utils';
 import { pathExistsSync } from 'fs-extra/esm';
 import kebabCase from 'lodash.kebabcase';
 import { join } from 'path';
@@ -68,7 +68,7 @@ async function handleChannelCreation(bc: Https, cliApi: CliApi) {
     availableLocales = await getAvailableLocales(bc);
   } catch (error) {
     if (error instanceof Error) {
-      console.error(chalk.red(error.message));
+      console.error(colorize('red', error.message));
     }
 
     process.exit(1);
@@ -80,7 +80,7 @@ async function handleChannelCreation(bc: Https, cliApi: CliApi) {
     choices: availableLocales,
     theme: {
       style: {
-        help: () => chalk.dim('(Select locale from the list or start typing the name)'),
+        help: () => colorize('dim', '(Select locale from the list or start typing the name)'),
       },
     },
   });
@@ -101,7 +101,7 @@ async function handleChannelCreation(bc: Https, cliApi: CliApi) {
       message: 'Which additional languages would you like to add to your channel?',
       theme: {
         style: {
-          help: () => chalk.dim('(Select locale from the list or start typing the name)'),
+          help: () => colorize('dim', '(Select locale from the list or start typing the name)'),
         },
       },
       validate: (selections) => {
@@ -131,15 +131,18 @@ async function handleChannelCreation(bc: Https, cliApi: CliApi) {
 
   if (!response.ok) {
     console.error(
-      chalk.red(`\nPOST /channels/catalyst failed: ${response.status} ${response.statusText}\n`),
+      colorize(
+        'red',
+        `\nPOST /channels/catalyst failed: ${response.status} ${response.statusText}\n`,
+      ),
     );
     process.exit(1);
   }
 
   const channelData: unknown = await response.json();
 
   if (!isCreateChannelResponse(channelData)) {
-    console.error(chalk.red('\nUnexpected response format from create channel endpoint\n'));
+    console.error(colorize('red', '\nUnexpected response format from create channel endpoint\n'));
     process.exit(1);
   }
 
@@ -156,7 +159,8 @@ async function handleChannelSelection(bc: Https) {
 
   if (!channelsResponse.ok) {
     console.error(
-      chalk.red(
+      colorize(
+        'red',
         `\nGET /v3/channels failed: ${channelsResponse.status} ${channelsResponse.statusText}\n`,
       ),
     );
@@ -166,7 +170,7 @@ async function handleChannelSelection(bc: Https) {
   const availableChannels: unknown = await channelsResponse.json();
 
   if (!isChannelsResponse(availableChannels)) {
-    console.error(chalk.red('\nUnexpected response format from channels endpoint\n'));
+    console.error(colorize('red', '\nUnexpected response format from channels endpoint\n'));
     process.exit(1);
   }
 
@@ -208,7 +212,8 @@ async function getChannelInit(cliApi: CliApi, channelId: number) {
 
   if (!initResponse.ok) {
     console.error(
-      chalk.red(
+      colorize(
+        'red',
         `\nGET /channels/${channelId}/init failed: ${initResponse.status} ${initResponse.statusText}\n`,
       ),
     );
@@ -218,7 +223,7 @@ async function getChannelInit(cliApi: CliApi, channelId: number) {
   const initData: unknown = await initResponse.json();
 
   if (!isInitResponse(initData)) {
-    console.error(chalk.red('\nUnexpected response format from init endpoint\n'));
+    console.error(colorize('red', '\nUnexpected response format from init endpoint\n'));
     process.exit(1);
   }
 
@@ -235,7 +240,7 @@ async function setupProject(options: {
   let { projectName, projectDir } = options;
 
   if (!pathExistsSync(projectDir)) {
-    console.error(chalk.red(`Error: --projectDir ${projectDir} is not a valid path\n`));
+    console.error(colorize('red', `Error: --projectDir ${projectDir} is not a valid path\n`));
     process.exit(1);
   }
 
@@ -244,7 +249,7 @@ async function setupProject(options: {
     projectDir = join(options.projectDir, projectName);
 
     if (pathExistsSync(projectDir)) {
-      console.error(chalk.red(`Error: ${projectDir} already exists\n`));
+      console.error(colorize('red', `Error: ${projectDir} already exists\n`));
       process.exit(1);
     }
   }
@@ -282,15 +287,15 @@ function checkRequiredTools() {
   try {
     execSync(getPlatformCheckCommand('git'), { stdio: 'ignore' });
   } catch {
-    console.error(chalk.red('Error: git is required to create a Catalyst project\n'));
+    console.error(colorize('red', 'Error: git is required to create a Catalyst project\n'));
     process.exit(1);
   }
 
   try {
     execSync(getPlatformCheckCommand('pnpm'), { stdio: 'ignore' });
   } catch {
-    console.error(chalk.red('Error: pnpm is required to create a Catalyst project\n'));
-    console.error(chalk.yellow('Tip: Enable it by running `corepack enable pnpm`\n'));
+    console.error(colorize('red', 'Error: pnpm is required to create a Catalyst project\n'));
+    console.error('Tip: Enable it by running `corepack enable pnpm`\n');
     process.exit(1);
   }
 }
@@ -383,13 +388,16 @@ export const create = new Command('create')
 
         console.log(
           [
-            `\n${chalk.green('Success!')} Created '${projectName}' at '${projectDir}'\n`,
+            colorize('green', `\nSuccess! Created '${projectName}' at '${projectDir}'\n`),
             `Next steps:`,
             Object.keys(envVars).length > 0
-              ? chalk.yellow(`\n- cd ${projectName} && pnpm run dev\n`)
+              ? colorize('yellow', `\n- cd ${projectName} && pnpm run dev\n`)
               : [
-                  chalk.yellow(`\n- cd ${projectName} && cp .env.example .env.local`),
-                  chalk.yellow(`\n- Populate .env.local with your BigCommerce API credentials\n`),
+                  colorize('yellow', `\n- cd ${projectName} && cp .env.example .env.local`),
+                  colorize(
+                    'yellow',
+                    `\n- Populate .env.local with your BigCommerce API credentials\n`,
+                  ),
                 ].join(''),
           ].join('\n'),
         );
@@ -423,7 +431,8 @@ export const create = new Command('create')
 
           if (!eligibilityResponse.ok) {
             console.error(
-              chalk.red(
+              colorize(
+                'red',
                 `\nGET /channels/catalyst/eligibility failed: ${eligibilityResponse.status} ${eligibilityResponse.statusText}\n`,
               ),
             );
@@ -433,12 +442,14 @@ export const create = new Command('create')
           const eligibilityData: unknown = await eligibilityResponse.json();
 
           if (!isEligibilityResponse(eligibilityData)) {
-            console.error(chalk.red('\nUnexpected response format from eligibility endpoint\n'));
+            console.error(
+              colorize('red', '\nUnexpected response format from eligibility endpoint\n'),
+            );
             process.exit(1);
           }
 
           if (!eligibilityData.data.eligible) {
-            console.warn(chalk.yellow(eligibilityData.data.message));
+            console.warn(colorize('yellow', eligibilityData.data.message));
           }
 
           let shouldCreateChannel;
@@ -460,9 +471,10 @@ export const create = new Command('create')
             storefrontToken = channelData.storefrontToken;
             envVars = { ...channelData.envVars };
 
-            console.log(chalk.green(`Channel created successfully`));
+            console.log(colorize('green', `Channel created successfully`));
             console.warn(
-              chalk.yellow(
+              colorize(
+                'yellow',
                 '\nNote: A preview storefront has been deployed in your BigCommerce control panel. This preview may look different from your local environment as it may be running different code.',
               ),
             );
@@ -525,9 +537,9 @@ export const create = new Command('create')
     }
 
     console.log(
-      `\n${chalk.green('Success!')} Created '${projectName}' at '${projectDir}'\n`,
+      colorize('green', `\nSuccess! Created '${projectName}' at '${projectDir}'\n`),
       '\nNext steps:\n',
-      chalk.yellow(`\ncd ${projectName} && pnpm run dev\n`),
+      colorize('yellow', `\ncd ${projectName} && pnpm run dev\n`),
     );
   });
 

packages/create-catalyst/src/commands/init.ts

@@ -1,6 +1,6 @@
 import { Command, Option } from '@commander-js/extra-typings';
 import { select } from '@inquirer/prompts';
-import chalk from 'chalk';
+import { colorize } from 'consola/utils';
 
 import { CliApi } from '../utils/cli-api';
 import { Config } from '../utils/config';
@@ -116,7 +116,8 @@ export const init = new Command('init')
 
     if (!channelsResponse.ok) {
       console.error(
-        chalk.red(
+        colorize(
+          'red',
           `\nGET /v3/channels failed: ${channelsResponse.status} ${channelsResponse.statusText}\n`,
         ),
       );
@@ -126,7 +127,7 @@ export const init = new Command('init')
     const availableChannels: unknown = await channelsResponse.json();
 
     if (!isChannelsResponse(availableChannels)) {
-      console.error(chalk.red('\nUnexpected response format from channels endpoint\n'));
+      console.error(colorize('red', '\nUnexpected response format from channels endpoint\n'));
       process.exit(1);
     }
 
@@ -155,7 +156,8 @@ export const init = new Command('init')
 
     if (!initResponse.ok) {
       console.error(
-        chalk.red(
+        colorize(
+          'red',
           `\nGET /channels/${channelId}/init failed: ${initResponse.status} ${initResponse.statusText}\n`,
         ),
       );
@@ -165,7 +167,7 @@ export const init = new Command('init')
     const initData: unknown = await initResponse.json();
 
     if (!isInitResponse(initData)) {
-      console.error(chalk.red('\nUnexpected response format from init endpoint\n'));
+      console.error(colorize('red', '\nUnexpected response format from init endpoint\n'));
       process.exit(1);
     }
 
@@ -188,7 +190,9 @@ export const init = new Command('init')
 
     writeEnv(projectDir, envVars);
 
-    console.log(chalk.green(`\n.env.local file created for channel ${existingChannel.name}!\n`));
-    console.log(chalk.green(`\nNext steps:\n`));
-    console.log(chalk.yellow(`\npnpm run dev\n`));
+    console.log(
+      colorize('green', `\n.env.local file created for channel ${existingChannel.name}!\n`),
+    );
+    console.log(colorize('green', `\nNext steps:\n`));
+    console.log(colorize('yellow', `\npnpm run dev\n`));
   });

packages/create-catalyst/src/index.ts

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 import { program } from '@commander-js/extra-typings';
-import chalk from 'chalk';
+import { colorize } from 'consola/utils';
 
 import PACKAGE_INFO from '../package.json';
 
@@ -11,7 +11,7 @@ import { integration } from './commands/integration';
 import { telemetry } from './commands/telemetry';
 import { telemetryPostHook, telemetryPreHook } from './hooks/telemetry';
 
-console.log(chalk.cyanBright(`\n◢ ${PACKAGE_INFO.name} v${PACKAGE_INFO.version}\n`));
+console.log(colorize('cyanBright', `\n◢ ${PACKAGE_INFO.name} v${PACKAGE_INFO.version}\n`));
 
 program
   .name(PACKAGE_INFO.name)

packages/create-catalyst/src/prompts/multi-select/helpers.ts

@@ -1,19 +1,19 @@
 import { Separator } from '@inquirer/core';
 import figures from '@inquirer/figures';
-import chalk from 'chalk';
+import { colorize } from 'consola/utils';
 
 import { Choice, Item, NormalizedChoice, SelectTheme } from './types';
 
 export const selectTheme: SelectTheme = {
   helpMode: 'auto',
   icon: {
-    checked: chalk.green(figures.circleFilled),
+    checked: colorize('green', figures.circleFilled),
     unchecked: figures.circle,
     cursor: figures.pointer,
   },
   style: {
-    description: (text: string) => chalk.cyan(text),
-    disabledChoice: (text: string) => chalk.dim(`- ${text}`),
+    description: (text: string) => colorize('cyan', text),
+    disabledChoice: (text: string) => colorize('dim', `- ${text}`),
     renderSelectedChoices: (selectedChoices) =>
       selectedChoices.map((choice) => choice.short).join(', '),
   },

packages/create-catalyst/src/utils/install-dependencies.ts

@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import { colorize } from 'consola/utils';
 import { installDependencies as installDeps } from 'nypm';
 
 import { spinner } from './spinner';
@@ -11,5 +11,5 @@ export const installDependencies = async (projectDir: string) =>
   spinner(installAllDeps(projectDir), {
     text: `Installing dependencies. This could take a minute...`,
     successText: `Dependencies installed successfully`,
-    failText: (err) => chalk.red(`Failed to install dependencies: ${err.message}`),
+    failText: (err) => colorize('red', `Failed to install dependencies: ${err.message}`),
   });

packages/create-catalyst/src/utils/login.ts

@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import { colorize } from 'consola/utils';
 import open from 'open';
 import { createInterface } from 'readline';
 
@@ -83,7 +83,8 @@ export async function login(baseUrl: string): Promise<LoginResult> {
   const deviceCode = await auth.getDeviceCode();
 
   console.log(
-    chalk.yellow('\n! First copy your one-time code: ') + chalk.bold(deviceCode.user_code),
+    colorize('yellow', '\n! First copy your one-time code: ') +
+      colorize('bold', deviceCode.user_code),
   );
   console.log(`Press Enter to open ${deviceCode.verification_uri} in your browser...`);
 

packages/create-catalyst/src/utils/telemetry/index.ts

@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import { colorize } from 'consola/utils';
 
 import { Telemetry } from './telemetry';
 
@@ -31,7 +31,7 @@ const catalystTelemetry = (options: CatalystTelemetryOptions, arg: string | unde
   }
 
   console.log(
-    `\nStatus: ${chalk.bold(isEnabled ? chalk.green('Enabled') : chalk.red('Disabled'))}`,
+    `\nStatus: ${colorize('bold', isEnabled ? colorize('green', 'Enabled') : colorize('red', 'Disabled'))}`,
   );
 
   if (!isEnabled) {