refactor: migrate to kleur from chalk

Author: satya164

packages/create-react-native-library/package.json

@@ -42,12 +42,12 @@
     "prepare": "babel --extensions .ts,.tsx src --out-dir lib --ignore '**/__tests__/**' --source-maps --delete-dir-on-start"
   },
   "dependencies": {
-    "chalk": "^4.1.2",
     "cross-spawn": "^7.0.3",
     "dedent": "^0.7.0",
     "ejs": "^3.1.8",
     "fs-extra": "^10.1.0",
     "github-username": "^6.0.0",
+    "kleur": "^4.1.4",
     "prompts": "^2.4.2",
     "validate-npm-package-name": "^4.0.0",
     "yargs": "^17.5.1"
@@ -61,7 +61,6 @@
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-typescript": "^7.17.12",
     "@commitlint/config-conventional": "^17.0.2",
-    "@types/chalk": "^2.2.0",
     "@types/cross-spawn": "^6.0.2",
     "@types/dedent": "^0.7.0",
     "@types/ejs": "^3.1.1",

packages/create-react-native-library/src/index.ts

@@ -2,7 +2,7 @@ import path from 'path';
 import fs from 'fs-extra';
 import ejs from 'ejs';
 import dedent from 'dedent';
-import chalk from 'chalk';
+import kleur from 'kleur';
 import yargs from 'yargs';
 import spawn from 'cross-spawn';
 import validateNpmPackage from 'validate-npm-package-name';
@@ -128,7 +128,7 @@ async function create(argv: yargs.Arguments<any>) {
 
   if (await fs.pathExists(folder)) {
     console.log(
-      `A folder already exists at ${chalk.blue(
+      `A folder already exists at ${kleur.blue(
         folder
       )}! Please specify another folder name or delete the existing one.`
     );
@@ -427,29 +427,35 @@ async function create(argv: yargs.Arguments<any>) {
     // Ignore error
   }
 
-  const platforms: Record<string, { name: string; color: string }> = {
+  const platforms = {
     ios: { name: 'iOS', color: 'cyan' },
     android: { name: 'Android', color: 'green' },
-    ...(example === 'expo' ? { web: { name: 'Web', color: 'blue' } } : null),
-  };
+    ...(example === 'expo'
+      ? ({ web: { name: 'Web', color: 'blue' } } as const)
+      : null),
+  } as const;
 
   console.log(
-    dedent(chalk`
-      Project created successfully at {yellow ${argv.name}}!
+    dedent(`
+      Project created successfully at ${kleur.yellow(argv.name)}!
 
-      {magenta {bold Get started} with the project}{gray :}
+      ${kleur.magenta(
+        `${kleur.bold('Get started')} with the project`
+      )}${kleur.gray(':')}
 
-        {gray $} yarn
+        ${kleur.gray('$')} yarn
       ${Object.entries(platforms)
         .map(
-          ([script, { name, color }]) => chalk`
-      {${color} Run the example app on {bold ${name}}}{gray :}
+          ([script, { name, color }]) => `
+      ${kleur[color](`Run the example app on ${kleur.bold(name)}`)}${kleur.gray(
+            ':'
+          )}
 
-        {gray $} yarn example ${script}`
+        ${kleur.gray('$')} yarn example ${script}`
         )
         .join('\n')}
 
-      {yellow Good luck!}
+      ${kleur.yellow('Good luck!')}
     `)
   );
 }

packages/react-native-builder-bob/package.json

@@ -43,7 +43,6 @@
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
     "browserslist": "^4.20.4",
-    "chalk": "^4.1.2",
     "cosmiconfig": "^7.0.1",
     "cross-spawn": "^7.0.3",
     "dedent": "^0.7.0",
@@ -52,6 +51,7 @@
     "glob": "^8.0.3",
     "is-git-dirty": "^2.0.1",
     "json5": "^2.2.1",
+    "kleur": "^4.1.4",
     "prompts": "^2.4.2",
     "which": "^2.0.2",
     "yargs": "^17.5.1"
@@ -63,7 +63,6 @@
     "@babel/cli": "^7.17.10",
     "@types/babel__core": "^7.1.19",
     "@types/browserslist": "^4.15.0",
-    "@types/chalk": "^2.2.0",
     "@types/cross-spawn": "^6.0.2",
     "@types/dedent": "^0.7.0",
     "@types/del": "^4.0.0",

packages/react-native-builder-bob/src/index.ts

@@ -1,6 +1,6 @@
 import path from 'path';
 import fs from 'fs-extra';
-import chalk from 'chalk';
+import kleur from 'kleur';
 import dedent from 'dedent';
 import yargs from 'yargs';
 import { cosmiconfigSync } from 'cosmiconfig';
@@ -317,14 +317,16 @@ yargs
     }
 
     console.log(
-      dedent(chalk`
-      Project {yellow ${pkg.name}} configured successfully!
+      dedent(`
+      Project ${kleur.yellow(pkg.name)} configured successfully!
 
-      {magenta {bold Perform last steps} by running}{gray :}
+      ${kleur.magenta(
+        `${kleur.bold('Perform last steps')} by running`
+      )}${kleur.gray(':')}
 
-        {gray $} yarn
+        ${kleur.gray(':')} yarn
 
-      {yellow Good luck!}
+      ${kleur.yellow('Good luck!')}
     `)
     );
   })
@@ -381,7 +383,7 @@ yargs
       const targetName = Array.isArray(target) ? target[0] : target;
       const targetOptions = Array.isArray(target) ? target[1] : undefined;
 
-      report.info(`Building target ${chalk.blue(targetName)}`);
+      report.info(`Building target ${kleur.blue(targetName)}`);
 
       switch (targetName) {
         case 'aar':
@@ -421,28 +423,10 @@ yargs
           });
           break;
         default:
-          logger.exit(`Invalid target ${chalk.blue(targetName)}.`);
+          logger.exit(`Invalid target ${kleur.blue(targetName)}.`);
       }
     }
   })
-  .command(
-    'create <name>',
-    'create a react native library (deprecated)',
-    {},
-    (argv) => {
-      console.log(
-        dedent(chalk`
-        The {magenta create} command has been moved to {magenta create-react-native-library}!
-
-        Please run:
-
-          {gray $} npx create-react-native-library ${argv.name}
-
-        Good luck!
-      `)
-      );
-    }
-  )
   .demandCommand()
   .recommendCommands()
   .strict().argv;

packages/react-native-builder-bob/src/targets/aar.ts

@@ -1,5 +1,5 @@
 import path from 'path';
-import chalk from 'chalk';
+import kleur from 'kleur';
 import fs from 'fs-extra';
 import del from 'del';
 import androidAssemble from '../utils/androidAssemble';
@@ -42,7 +42,7 @@ export default async function build({
   };
 
   report.info(
-    `Cleaning up previous build at ${chalk.blue(path.relative(root, output))}`
+    `Cleaning up previous build at ${kleur.blue(path.relative(root, output))}`
   );
 
   await del([output]);
@@ -54,7 +54,7 @@ export default async function build({
   });
 
   report.info(
-    `Creating new output directory at ${chalk.blue(
+    `Creating new output directory at ${kleur.blue(
       path.relative(root, output)
     )}`
   );
@@ -70,22 +70,22 @@ export default async function build({
   const targetAar = path.join(output, targetOptions.androidBundleName);
 
   report.info(
-    `Copying AAR from ${chalk.blue(
+    `Copying AAR from ${kleur.blue(
       path.relative(root, sourceAar)
-    )} to ${chalk.blue(path.relative(root, targetAar))}`
+    )} to ${kleur.blue(path.relative(root, targetAar))}`
   );
   await fs.copyFile(sourceAar, targetAar);
 
   const gradleFile = path.join(output, 'build.gradle');
   report.info(
-    `Creating AAR Gradle file at ${chalk.blue(path.relative(root, gradleFile))}`
+    `Creating AAR Gradle file at ${kleur.blue(path.relative(root, gradleFile))}`
   );
   await createGradleFile(gradleFile);
 
   if (targetOptions.reverseJetify) {
     const supportOutputPath = path.join(output, 'support');
     report.info(
-      `Creating new support output directory at ${chalk.blue(
+      `Creating new support output directory at ${kleur.blue(
         path.relative(root, supportOutputPath)
       )}`
     );
@@ -96,7 +96,7 @@ export default async function build({
       targetOptions.androidBundleName
     );
     report.info(
-      `Using Jetifier to convert AAR from AndroidX to Support AAR at ${chalk.blue(
+      `Using Jetifier to convert AAR from AndroidX to Support AAR at ${kleur.blue(
         path.relative(root, supportAar)
       )}`
     );
@@ -111,12 +111,12 @@ export default async function build({
 
     const supportGradleFile = path.join(supportOutputPath, 'build.gradle');
     report.info(
-      `Creating Support AAR Gradle file at ${chalk.blue(
+      `Creating Support AAR Gradle file at ${kleur.blue(
         path.relative(root, supportGradleFile)
       )}`
     );
     await createGradleFile(supportGradleFile);
   }
 
-  report.success(`Wrote files to ${chalk.blue(path.relative(root, output))}`);
+  report.success(`Wrote files to ${kleur.blue(path.relative(root, output))}`);
 }

packages/react-native-builder-bob/src/targets/commonjs.ts

@@ -1,5 +1,5 @@
 import path from 'path';
-import chalk from 'chalk';
+import kleur from 'kleur';
 import del from 'del';
 import compile from '../utils/compile';
 import type { Input } from '../types';
@@ -20,7 +20,7 @@ export default async function build({
   report,
 }: Options) {
   report.info(
-    `Cleaning up previous build at ${chalk.blue(path.relative(root, output))}`
+    `Cleaning up previous build at ${kleur.blue(path.relative(root, output))}`
   );
 
   await del([output]);

packages/react-native-builder-bob/src/targets/module.ts

@@ -1,5 +1,5 @@
 import path from 'path';
-import chalk from 'chalk';
+import kleur from 'kleur';
 import del from 'del';
 import compile from '../utils/compile';
 import type { Input } from '../types';
@@ -20,7 +20,7 @@ export default async function build({
   report,
 }: Options) {
   report.info(
-    `Cleaning up previous build at ${chalk.blue(path.relative(root, output))}`
+    `Cleaning up previous build at ${kleur.blue(path.relative(root, output))}`
   );
 
   await del([output]);

packages/react-native-builder-bob/src/targets/typescript.ts

@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import kleur from 'kleur';
 import path from 'path';
 import fs from 'fs-extra';
 import which from 'which';
@@ -19,12 +19,12 @@ export default async function build({
   options,
 }: Options) {
   report.info(
-    `Cleaning up previous build at ${chalk.blue(path.relative(root, output))}`
+    `Cleaning up previous build at ${kleur.blue(path.relative(root, output))}`
   );
 
   await del([output]);
 
-  report.info(`Generating type definitions with ${chalk.blue('tsc')}`);
+  report.info(`Generating type definitions with ${kleur.blue('tsc')}`);
 
   const project = options?.project ? options.project : 'tsconfig.json';
   const tsconfig = path.join(root, project);
@@ -58,11 +58,11 @@ export default async function build({
 
           if (conflicts.length) {
             report.warn(
-              `Found following options in the config file which can conflict with the CLI options. Please remove them from ${chalk.blue(
+              `Found following options in the config file which can conflict with the CLI options. Please remove them from ${kleur.blue(
                 project
               )}:${conflicts.reduce(
                 (acc, curr) =>
-                  acc + `\n${chalk.gray('-')} ${chalk.yellow(curr)}`,
+                  acc + `\n${kleur.gray('-')} ${kleur.yellow(curr)}`,
                 ''
               )}`
             );
@@ -75,7 +75,7 @@ export default async function build({
       }
     } else {
       throw new Error(
-        `Couldn't find a ${chalk.blue('tsconfig.json')} in the project root.`
+        `Couldn't find a ${kleur.blue('tsconfig.json')} in the project root.`
       );
     }
 
@@ -89,11 +89,11 @@ export default async function build({
         tsc = await which('tsc');
 
         report.warn(
-          `Using a global version of ${chalk.blue(
+          `Using a global version of ${kleur.blue(
             'tsc'
-          )}. Consider adding ${chalk.blue('typescript')} to your ${chalk.blue(
+          )}. Consider adding ${kleur.blue('typescript')} to your ${kleur.blue(
             'devDependencies'
-          )} or specifying the ${chalk.blue(
+          )} or specifying the ${kleur.blue(
             'tsc'
           )} option for the typescript target.`
         );
@@ -104,13 +104,13 @@ export default async function build({
 
     if (!(await fs.pathExists(tsc))) {
       throw new Error(
-        `The ${chalk.blue(
+        `The ${kleur.blue(
           'tsc'
-        )} binary doesn't seem to be installed under ${chalk.blue(
+        )} binary doesn't seem to be installed under ${kleur.blue(
           'node_modules'
-        )} or present in $PATH. Make sure you have added ${chalk.blue(
+        )} or present in $PATH. Make sure you have added ${kleur.blue(
           'typescript'
-        )} to your ${chalk.blue('devDependencies')} or specify the ${chalk.blue(
+        )} to your ${kleur.blue('devDependencies')} or specify the ${kleur.blue(
           'tsc'
         )} option for typescript.`
       );
@@ -145,7 +145,7 @@ export default async function build({
       await del([tsbuildinfo]);
 
       report.success(
-        `Wrote definition files to ${chalk.blue(path.relative(root, output))}`
+        `Wrote definition files to ${kleur.blue(path.relative(root, output))}`
       );
     } else {
       throw new Error('Failed to build definition files.');