feat(cli): replace @poppinss/cliui sticker for upload hints

Author: matejchalk

packages/cli/src/lib/collect/collect-command.ts

@@ -4,7 +4,11 @@ import {
   type CollectAndPersistReportsOptions,
   collectAndPersistReports,
 } from '@code-pushup/core';
-import { formatAsciiLink, logger, ui } from '@code-pushup/utils';
+import {
+  formatAsciiLink,
+  formatAsciiSticker,
+  logger,
+} from '@code-pushup/utils';
 import { CLI_NAME } from '../constants.js';
 import {
   collectSuccessfulLog,
@@ -40,28 +44,20 @@ export function yargsCollectCommandObject(): CommandModule {
 }
 
 export function renderUploadAutorunHint(): void {
-  // TODO: replace @poppinss/cliui
-  ui()
-    .sticker()
-    .add(ansis.bold.gray('💡 Visualize your reports'))
-    .add('')
-    .add(
+  logger.info(
+    formatAsciiSticker([
+      ansis.bold.gray('💡 Visualize your reports'),
+      '',
       `${ansis.gray('❯')} npx code-pushup upload - ${ansis.gray(
         'Run upload to upload the created report to the server',
       )}`,
-    )
-    .add(
       `  ${formatAsciiLink(
         'https://github.com/code-pushup/cli/tree/main/packages/cli#upload-command',
       )}`,
-    )
-    .add(
       `${ansis.gray('❯')} npx code-pushup autorun - ${ansis.gray('Run collect & upload')}`,
-    )
-    .add(
       `  ${formatAsciiLink(
         'https://github.com/code-pushup/cli/tree/main/packages/cli#autorun-command',
       )}`,
-    )
-    .render();
+    ]),
+  );
 }

packages/cli/src/lib/implementation/logging.ts

@@ -1,5 +1,9 @@
 import ansis from 'ansis';
-import { formatAsciiLink, logger, ui } from '@code-pushup/utils';
+import {
+  formatAsciiLink,
+  formatAsciiSticker,
+  logger,
+} from '@code-pushup/utils';
 
 export function renderConfigureCategoriesHint(): void {
   logger.debug(
@@ -19,30 +23,22 @@ export function collectSuccessfulLog(): void {
 }
 
 export function renderIntegratePortalHint(): void {
-  // TODO: replace @poppinss/cliui
-  ui()
-    .sticker()
-    .add(ansis.bold.gray('💡 Integrate the portal'))
-    .add('')
-    .add(
+  logger.info(
+    formatAsciiSticker([
+      ansis.bold.gray('💡 Integrate the portal'),
+      '',
       `${ansis.gray('❯')} Upload a report to the server - ${ansis.gray(
         'npx code-pushup upload',
       )}`,
-    )
-    .add(
       `  ${formatAsciiLink(
         'https://github.com/code-pushup/cli/tree/main/packages/cli#upload-command',
       )}`,
-    )
-    .add(
       `${ansis.gray('❯')} ${ansis.gray('Portal Integration')} - ${formatAsciiLink(
         'https://github.com/code-pushup/cli/blob/main/packages/cli/README.md#portal-integration',
       )}`,
-    )
-    .add(
       `${ansis.gray('❯')} ${ansis.gray('Upload Command')} - ${formatAsciiLink(
         'https://github.com/code-pushup/cli/blob/main/packages/cli/README.md#portal-integration',
       )}`,
-    )
-    .render();
+    ]),
+  );
 }

packages/utils/src/index.ts

@@ -145,6 +145,7 @@ export {
 } from './lib/reports/utils.js';
 export { isSemver, normalizeSemver, sortSemvers } from './lib/semver.js';
 export { formatAsciiLink } from './lib/text-formats/ascii/link.js';
+export { formatAsciiSticker } from './lib/text-formats/ascii/sticker.js';
 export { formatAsciiTable } from './lib/text-formats/ascii/table.js';
 export { formatAsciiTree } from './lib/text-formats/ascii/tree.js';
 export * from './lib/text-formats/index.js';

packages/utils/src/lib/text-formats/ascii/sticker.ts

@@ -0,0 +1,8 @@
+import { formatAsciiTable } from './table.js';
+
+export function formatAsciiSticker(lines: string[]): string {
+  return formatAsciiTable(
+    { rows: ['', ...lines, ''].map(line => [line]) },
+    { padding: 4 },
+  );
+}

packages/utils/src/lib/text-formats/ascii/sticker.unit.test.ts

@@ -0,0 +1,38 @@
+import ansis from 'ansis';
+import { formatAsciiSticker } from './sticker';
+
+describe('formatAsciiSticker', () => {
+  it('should frame lines with border and padding', () => {
+    const output = formatAsciiSticker(['Hello,', 'How are you today?']);
+    expect(ansis.strip(output)).toBe(
+      `
+┌──────────────────────────┐
+│                          │
+│    Hello,                │
+│    How are you today?    │
+│                          │
+└──────────────────────────┘
+      `.trim(),
+    );
+  });
+
+  it('should align emojis, color codes and line breaks correctly', () => {
+    const output = formatAsciiSticker([
+      `✅ ${ansis.bold('ESLint')} ${ansis.gray('(1.2 s)')}`,
+      `✅ ${ansis.bold('Code Coverage')} ${ansis.gray('(680 ms)')}`,
+      `❌ ${ansis.bold('Lighthouse')}\n   - ${ansis.red('Unable to connect to Chrome')}`,
+    ]);
+    expect(ansis.strip(output)).toBe(
+      `
+┌────────────────────────────────────────┐
+│                                        │
+│    ✅ ESLint (1.2 s)                   │
+│    ✅ Code Coverage (680 ms)           │
+│    ❌ Lighthouse                       │
+│       - Unable to connect to Chrome    │
+│                                        │
+└────────────────────────────────────────┘
+      `.trim(),
+    );
+  });
+});

packages/utils/src/lib/text-formats/ascii/table.ts

@@ -142,7 +142,7 @@ function wrapRow(cells: TableCell[], columnWidths: number[]): TableCell[][] {
     const wrapped: string = wrapText(cell.text, columnWidths[colIndex]);
     const lines = wrapped.split('\n').filter(Boolean);
 
-    const rowCount = Math.max(acc.length, lines.length);
+    const rowCount = Math.max(acc.length, lines.length, 1);
 
     return Array.from({ length: rowCount }).map((_, rowIndex) => {
       const prevCols =
@@ -154,7 +154,7 @@ function wrapRow(cells: TableCell[], columnWidths: number[]): TableCell[][] {
 }
 
 function wrapText(text: string, width: number | undefined): string {
-  if (!width || stringWidth(text) <= width) {
+  if (!width || getTextWidth(text) <= width) {
     return text;
   }
   const words = extractWords(text);
@@ -173,6 +173,10 @@ function wrapText(text: string, width: number | undefined): string {
   return wrapAnsi(textWithSplitLongWords, width);
 }
 
+function getTextWidth(text: string): number {
+  return Math.max(...text.split('\n').map(line => stringWidth(line)));
+}
+
 function extractWords(text: string): string[] {
   return ansis
     .strip(text)
@@ -234,7 +238,7 @@ function getColumnTexts(table: NormalizedTable): string[][] {
 
 function aggregateColumnsStats(columnTexts: string[][]): ColumnStats[] {
   return columnTexts.map(texts => {
-    const widths = texts.map(text => stringWidth(text));
+    const widths = texts.map(getTextWidth);
     const longestWords = texts
       .flatMap(extractWords)
       .toSorted((a, b) => b.length - a.length);