Merge branch 'main' into wmaj/nanospinner

Author: wojtekmaj

docs/commands.md

@@ -26,7 +26,7 @@ React Native CLI comes with following commands:
 Usage (with `npx`):
 
 ```sh
-npx react-native@latest init <projectName> [options]
+npx @react-native-community/cli@latest init <projectName> [options]
 ```
 
 Initialize a new React Native project named <projectName> in a directory of the same name. You can find out more use cases in [init docs](./init.md).

docs/init.md

@@ -3,7 +3,7 @@
 There are couple of ways to initialize new React Native projects.
 
 ```sh
-npx react-native-community/cli@latest init ProjectName
+npx @react-native-community/cli@latest init ProjectName
 ```
 
 > Note: If you have both `yarn` and `npm` installed on your machine, React Native CLI will always try to use `npm`. You can force usage of `yarn` by adding `--pm yarn` flag to the command.
@@ -20,7 +20,7 @@ yarn init && yarn add react-native && yarn react-native init ProjectName
 
 ```sh
 # This will use the latest init command but will install react-native@VERSION and use its template
-npx react-native-community/cli@latest init ProjectName --version ${VERSION}
+npx @react-native-community/cli@latest init ProjectName --version ${VERSION}
 
 # This will use init command from react-native@VERSION through react-native-community/cli@${VERSION} (e.g. X.XX.X) automatically
 npx react-native-community/cli@${VERSION} init ProjectName
@@ -43,7 +43,7 @@ For all available options, please check [Yarn documentation](https://classic.yar
 
 ```sh
 # This will initialize new project using template from `react-native-template-typescript` package
-npx react-native-community/cli@latest init ProjectName --template ${TEMPLATE_NAME}
+npx @react-native-community/cli@latest init ProjectName --template ${TEMPLATE_NAME}
 
 # This will initialize new project using init command from react-native@VERSION but will use a custom template
 npx react-native-community/cli@${VERSION} init ProjectName --template ${TEMPLATE_NAME}
@@ -52,7 +52,7 @@ npx react-native-community/cli@${VERSION} init ProjectName --template ${TEMPLATE
 You can force usage of `yarn` if you have both `yarn` and `npm` installed on your machine:
 
 ```sh
-npx react-native-community/cli@latest init ProjectName --pm yarn
+npx @react-native-community/cli@latest init ProjectName --pm yarn
 ```
 
 ## Creating custom template

jest/helpers.ts

@@ -3,7 +3,7 @@ import os from 'os';
 import path from 'path';
 import {createDirectory} from 'jest-util';
 import execa from 'execa';
-import chalk from 'chalk';
+import pico from 'picocolors';
 import slash from 'slash';
 
 const CLI_PATH = path.resolve(__dirname, '../packages/cli/build/bin.js');
@@ -121,7 +121,7 @@ function getExecaOptions(options: SpawnOptions) {
 
   const cwd = isRelative ? path.resolve(__dirname, options.cwd) : options.cwd;
 
-  let env = Object.assign({}, process.env, {FORCE_COLOR: '0'}, options.env);
+  let env = Object.assign({}, process.env, {NO_COLOR: 1}, options.env);
 
   if (options.nodeOptions) {
     env.NODE_OPTIONS = options.nodeOptions;
@@ -147,12 +147,12 @@ function handleTestFailure(
 ) {
   if (!options.expectedFailure && result.exitCode !== 0) {
     console.log(`Running ${cmd} command failed for unexpected reason. Here's more info:
-${chalk.bold('cmd:')}     ${cmd}
-${chalk.bold('options:')} ${JSON.stringify(options)}
-${chalk.bold('args:')}    ${(args || []).join(' ')}
-${chalk.bold('stderr:')}  ${result.stderr}
-${chalk.bold('stdout:')}  ${result.stdout}
-${chalk.bold('exitCode:')}${result.exitCode}`);
+${pico.bold('cmd:')}     ${cmd}
+${pico.bold('options:')} ${JSON.stringify(options)}
+${pico.bold('args:')}    ${(args || []).join(' ')}
+${pico.bold('stderr:')}  ${result.stderr}
+${pico.bold('stdout:')}  ${result.stdout}
+${pico.bold('exitCode:')}${result.exitCode}`);
   } else if (options.expectedFailure && result.exitCode === 0) {
     throw new Error("Expected command to fail, but it didn't");
   }

package.json

@@ -33,7 +33,6 @@
     "@types/node": "^20.0.0",
     "babel-jest": "^26.6.2",
     "babel-plugin-module-resolver": "^3.2.0",
-    "chalk": "^4.1.2",
     "chokidar": "^3.3.1",
     "eslint": "^8.23.1",
     "eslint-import-resolver-alias": "^1.1.2",
@@ -50,6 +49,7 @@
     "lint-staged": "^13.1.0",
     "metro-memory-fs": "0.78.0",
     "micromatch": "^4.0.4",
+    "picocolors": "^1.1.1",
     "prettier": "2.8.8",
     "slash": "^3.0.0",
     "string-length": "^2.0.0",

packages/cli-clean/package.json

@@ -9,9 +9,9 @@
   "types": "build/index.d.ts",
   "dependencies": {
     "@react-native-community/cli-tools": "20.0.2",
-    "chalk": "^4.1.2",
     "execa": "^5.0.0",
-    "fast-glob": "^3.3.2"
+    "fast-glob": "^3.3.2",
+    "picocolors": "^1.1.1"
   },
   "files": [
     "build",

packages/cli-clean/src/clean.ts

@@ -1,6 +1,6 @@
 import {getLoader, logger, prompt} from '@react-native-community/cli-tools';
 import type {Config as CLIConfig} from '@react-native-community/cli-types';
-import chalk from 'chalk';
+import pico from 'picocolors';
 import execa from 'execa';
 import {existsSync as fileExists, rm} from 'fs';
 import os from 'os';
@@ -62,7 +62,7 @@ async function promptForCaches(
     name: 'caches',
     message: 'Select all caches to clean',
     choices: Object.entries(groups).map(([cmd, group]) => ({
-      title: `${cmd} ${chalk.dim(`(${group.description})`)}`,
+      title: `${cmd} ${pico.dim(`(${group.description})`)}`,
       value: cmd,
       selected: DEFAULT_GROUPS.includes(cmd),
     })),

packages/cli-config-android/package.json

@@ -8,9 +8,9 @@
   },
   "dependencies": {
     "@react-native-community/cli-tools": "20.0.2",
-    "chalk": "^4.1.2",
     "fast-glob": "^3.3.2",
-    "fast-xml-parser": "^4.4.1"
+    "fast-xml-parser": "^4.4.1",
+    "picocolors": "^1.1.1"
   },
   "files": [
     "build",

packages/cli-config-android/src/config/findComponentDescriptors.ts

@@ -16,8 +16,8 @@ export function findComponentDescriptors(packageRoot: string) {
     // no jsSrcsDir, continue with default glob pattern
   }
   const globPattern = jsSrcsDir
-    ? `${jsSrcsDir}/**/+(*.js|*.jsx|*.ts|*.tsx)`
-    : '**/+(*.js|*.jsx|*.ts|*.tsx)';
+    ? `${jsSrcsDir}/**/*{.js,.jsx,.ts,.tsx}`
+    : '**/*{.js,.jsx,.ts,.tsx}';
   const files = glob.sync(globPattern, {
     cwd: unixifyPaths(packageRoot),
     onlyFiles: true,

packages/cli-config-android/src/config/findPackageClassName.ts

@@ -18,12 +18,12 @@ export function getMainActivityFiles(
   let patternArray = [];
 
   if (includePackage) {
-    patternArray.push('*Package.java', '*Package.kt');
+    patternArray.push('Package.java', 'Package.kt');
   } else {
-    patternArray.push('*.java', '*.kt');
+    patternArray.push('.java', '.kt');
   }
 
-  return glob.sync(`**/+(${patternArray.join('|')})`, {
+  return glob.sync(`**/*{${patternArray.join(',')}}`, {
     cwd: unixifyPaths(folder),
     onlyFiles: true,
     ignore: ['**/.cxx/**'],

packages/cli-config-android/src/config/getAndroidProject.ts

@@ -1,7 +1,7 @@
 import {Config} from '@react-native-community/cli-types';
 import {logger, CLIError} from '@react-native-community/cli-tools';
 import fs from 'fs';
-import chalk from 'chalk';
+import pico from 'picocolors';
 
 export function getAndroidProject(config: Config) {
   const androidProject = config.project.android;
@@ -48,11 +48,11 @@ function discoverPackageName(
 
   throw new CLIError(
     `Failed to build the app: No package name found. 
-    We couldn't parse the namespace from neither your build.gradle[.kts] file at ${chalk.underline.dim(
-      `${buildGradlePath}`,
+    We couldn't parse the namespace from neither your build.gradle[.kts] file at ${pico.underline(
+      pico.dim(`${buildGradlePath}`),
     )} 
-    nor your package in the AndroidManifest at ${chalk.underline.dim(
-      `${manifestPath}`,
+    nor your package in the AndroidManifest at ${pico.underline(
+      pico.dim(`${manifestPath}`),
     )}
     `,
   );
@@ -70,10 +70,10 @@ export function getPackageName(
   let packageName = discoverPackageName(manifestPath, buildGradlePath);
   if (!validatePackageName(packageName)) {
     logger.warn(
-      `Invalid application's package name "${chalk.bgRed(
+      `Invalid application's package name "${pico.bgRed(
         packageName,
-      )}" in either 'AndroidManifest.xml' or 'build.gradle'. Read guidelines for setting the package name here: ${chalk.underline.dim(
-        'https://developer.android.com/studio/build/application-id',
+      )}" in either 'AndroidManifest.xml' or 'build.gradle'. Read guidelines for setting the package name here: ${pico.underline(
+        pico.dim('https://developer.android.com/studio/build/application-id'),
       )}`,
     );
   }