fix(utils): fix long word wrapping with ansis styles in tables

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

@@ -1,5 +1,6 @@
 import ansis from 'ansis';
 
 export function formatAsciiLink(url: string): string {
-  return ansis.underline.blueBright(url);
+  // no underline because terminals recognize URLs, and nested ansis styles aren't handled by wrap-ansi
+  return ansis.blueBright(url);
 }

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

@@ -158,6 +158,9 @@ function wrapText(text: string, width: number | undefined): string {
   if (!width || getTextWidth(text) <= width) {
     return text;
   }
+  if (text !== ansis.strip(text)) {
+    return wrapAnsi(text, width, { hard: true });
+  }
   const words = extractWords(text);
   const longWords = words.filter(word => word.length > width);
   const replacements = longWords.map(original => {

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

@@ -1,15 +1,15 @@
 import ansis from 'ansis';
 import { formatAsciiTable } from './table.js';
 
 describe('formatAsciiTable', () => {
   it('should format table with primitive rows and no header', () => {
     const output = formatAsciiTable({
       rows: [
         ['x', '0'],
         ['y', '0'],
       ],
     });
     expect(ansis.strip(output)).toBe(
       `
 ┌───┬───┐
 │ x │ 0 │
@@ -19,7 +19,7 @@
     );
   });
 
   it('should format table with objects rows and column headers', () => {
     const output = formatAsciiTable({
       columns: [
         { key: 'x', label: 'X' },
@@ -32,7 +32,7 @@
         { x: 2, y: 1 },
       ],
     });
     expect(ansis.strip(output)).toBe(
       `
 ┌───┬───┐
 │ X │ Y │
@@ -46,11 +46,11 @@
     );
   });
 
   it('should support various primitive cell values', () => {
     const output = formatAsciiTable({
       rows: [['foo', 42, true, null]],
     });
     expect(ansis.strip(output)).toBe(
       `
 ┌─────┬────┬──────┬──┐
 │ foo │ 42 │ true │  │
@@ -59,7 +59,7 @@
     );
   });
 
   it('should align columns', () => {
     const output = formatAsciiTable({
       columns: [
         { key: 'property', label: 'Property', align: 'left' },
@@ -74,7 +74,7 @@
         { property: 'proj4', required: false, default: 'EPSG:3857' },
       ],
     });
     expect(ansis.strip(output)).toBe(
       `
 ┌───────────┬──────────┬───────────┐
 │ Property  │ Required │   Default │
@@ -89,7 +89,7 @@
     );
   });
 
   it('should align columns without header', () => {
     const output = formatAsciiTable({
       columns: ['left', 'center', 'right'],
       rows: [
@@ -453,6 +453,69 @@
 ├──────────┼────────────┼─────────┼────────────┼──────────┼─────────┼──────────┤
 │    81    │     64     │   92    │    100     │    95    │   62    │    6     │
 └──────────┴────────────┴─────────┴────────────┴──────────┴─────────┴──────────┘
+`.trim(),
+    );
+  });
+
+  it('should wrap ansi styles correctly', () => {
+    const output = formatAsciiTable(
+      {
+        rows: [
+          [''],
+          [ansis.bold('💡 Integrate the Portal')],
+          [''],
+          [`${ansis.gray('❯')} Configure upload in code-pushup.config.ts`],
+          [
+            ansis.underline(
+              'https://github.com/code-pushup/cli/blob/main/packages/cli/README.md#portal-integration',
+            ),
+          ],
+          [
+            `${ansis.gray('❯')} npx code-pushup upload${ansis.gray(' - Upload previously collected report to the Portal')}`,
+          ],
+          [
+            ansis.underline(
+              'https://github.com/code-pushup/cli/tree/main/packages/cli#upload-command',
+            ),
+          ],
+          [''],
+        ],
+      },
+      { padding: 4 },
+    );
+
+    expect(ansis.strip(output)).toBe(
+      `
+┌──────────────────────────────────────────────────────────────────────────────┐
+│                                                                              │
+│    💡 Integrate the Portal                                                   │
+│                                                                              │
+│    ❯ Configure upload in code-pushup.config.ts                               │
+│    https://github.com/code-pushup/cli/blob/main/packages/cli/README.md#po    │
+│    rtal-integration                                                          │
+│    ❯ npx code-pushup upload - Upload previously collected report to the      │
+│    Portal                                                                    │
+│    https://github.com/code-pushup/cli/tree/main/packages/cli#upload-comma    │
+│    nd                                                                        │
+│                                                                              │
+└──────────────────────────────────────────────────────────────────────────────┘
+`.trim(),
+    );
+    expect(output).toBe(
+      `
+${ansis.dim('┌──────────────────────────────────────────────────────────────────────────────┐')}
+${ansis.dim('│')}                                                                              ${ansis.dim('│')}
+${ansis.dim('│')}    ${ansis.bold('💡 Integrate the Portal')}                                                   ${ansis.dim('│')}
+${ansis.dim('│')}                                                                              ${ansis.dim('│')}
+${ansis.dim('│')}    ${ansis.gray('❯')} Configure upload in code-pushup.config.ts                               ${ansis.dim('│')}
+${ansis.dim('│')}    ${ansis.underline('https://github.com/code-pushup/cli/blob/main/packages/cli/README.md#po')}    ${ansis.dim('│')}
+${ansis.dim('│')}    ${ansis.underline('rtal-integration')}                                                          ${ansis.dim('│')}
+${ansis.dim('│')}    ${ansis.gray('❯')} npx code-pushup upload${ansis.gray(' - Upload previously collected report to the')}      ${ansis.dim('│')}
+${ansis.dim('│')}    ${ansis.gray('Portal')}                                                                    ${ansis.dim('│')}
+${ansis.dim('│')}    ${ansis.underline('https://github.com/code-pushup/cli/tree/main/packages/cli#upload-comma')}    ${ansis.dim('│')}
+${ansis.dim('│')}    ${ansis.underline('nd')}                                                                        ${ansis.dim('│')}
+${ansis.dim('│')}                                                                              ${ansis.dim('│')}
+${ansis.dim('└──────────────────────────────────────────────────────────────────────────────┘')}
 `.trim(),
     );
   });