feat(create-release-branch): render the CLI output with clack

packages/create-release-branch/CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Show colors and progress spinners in the CLI output ([#154](https://github.com/MetaMask/release-tools/pull/154))
+- Show the CLI output in one block, with a spinner for long steps and the output of a failing Yarn step ([#159](https://github.com/MetaMask/release-tools/pull/159))
 
 ### Fixed
 

packages/create-release-branch/package.json

@@ -44,15 +44,14 @@
     "test:watch": "vitest --watch"
   },
   "dependencies": {
+    "@clack/prompts": "^1.8.1",
     "@metamask/action-utils": "^2.0.0",
     "@metamask/auto-changelog": "^7.1.0",
     "@metamask/utils": "^11.12.0",
-    "chalk": "^5.6.2",
     "debug": "^4.3.4",
     "execa": "^8.0.1",
     "express": "^4.21.2",
     "open": "^10.1.0",
-    "ora": "^9.4.1",
     "pony-cause": "^2.1.9",
     "semver": "^7.8.5",
     "shell-quote": "^1.8.4",

packages/create-release-branch/src/cli/main.test.ts

@@ -63,8 +63,8 @@ describe('main', () => {
       releaseType: 'backport',
       output: expect.any(Object) as CliOutput,
     });
-    expect(stdout.data()).toContain(
-      'Project appears to have workspaces. Following monorepo workflow.\n',
+    expect(stdout.data().join('')).toContain(
+      'Project appears to have workspaces. Following monorepo workflow.',
     );
   });
 

packages/create-release-branch/src/cli/main.ts

@@ -1,15 +1,14 @@
-import type { WriteStream } from 'fs';
-
 import { createCliOutput } from '../core/cli-output.js';
+import type { OutputStream } from '../core/cli-output.js';
 import { runRelease } from '../core/run-release.js';
 import { determineInitialParameters } from './initial-parameters.js';
 import { selectFrontEnd, selectMode } from './select.js';
 
 /**
  * The main function for this tool. Designed to not access `process.argv`,
  * `process.cwd()`, `process.stdout`, or `process.stderr` directly so as to be
- * more easily testable. The output still reads `NO_COLOR` and the color
- * support that chalk detects for the process streams.
+ * more easily testable. The output still reads `NO_COLOR`, `CI`, and `TERM`,
+ * and clack picks the colors of its symbols from `process.stdout`.
  *
  * @param args - The arguments.
  * @param args.argv - The name of this executable and its arguments (as obtained
@@ -26,8 +25,8 @@ export async function main({
 }: {
   argv: string[];
   cwd: string;
-  stdout: Pick<WriteStream, 'write'>;
-  stderr: NodeJS.WritableStream;
+  stdout: OutputStream;
+  stderr: OutputStream;
 }): Promise<void> {
   const output = createCliOutput({ stdout, stderr });
   const {