Replace rainbow bar with moving hill for no-color mode

Author: amcaplan

packages/cli-kit/src/private/node/ui/components/Tasks.test.tsx

@@ -2,8 +2,28 @@ import {Task, Tasks} from './Tasks.js'
 import {getLastFrameAfterUnmount, render} from '../../testing/ui.js'
 import {unstyled} from '../../../../public/node/output.js'
 import {AbortController} from '../../../../public/node/abort.js'
+import {Stdout} from '../../ui.js'
 import React from 'react'
-import {describe, expect, test, vi} from 'vitest'
+import {beforeEach, describe, expect, test, vi} from 'vitest'
+import {useStdout} from 'ink'
+
+vi.mock('ink', async () => {
+  const original: any = await vi.importActual('ink')
+  return {
+    ...original,
+    useStdout: vi.fn(),
+  }
+})
+
+beforeEach(() => {
+  vi.mocked(useStdout).mockReturnValue({
+    stdout: new Stdout({
+      columns: 80,
+      rows: 80,
+    }) as any,
+    write: () => {},
+  })
+})
 
 describe('Tasks', () => {
   test('shows a loading state at the start', async () => {
@@ -29,6 +49,58 @@ describe('Tasks', () => {
     expect(firstTaskFunction).toHaveBeenCalled()
   })
 
+  test('shows a loading state that is useful in no-color mode', async () => {
+    // Given
+    const firstTaskFunction = vi.fn(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 2000))
+    })
+
+    const firstTask = {
+      title: 'task 1',
+      task: firstTaskFunction,
+    }
+
+    // When
+    const renderInstance = render(<Tasks tasks={[firstTask]} silent={false} noColor />)
+
+    // Then
+    expect(unstyled(renderInstance.lastFrame()!)).toMatchInlineSnapshot(`
+      "▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆▆▅▅▄▄▃▃▂▂▁▁▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆▆▅▅▄▄▃▃▂▂▁▁▁
+      task 1 ..."
+    `)
+    expect(firstTaskFunction).toHaveBeenCalled()
+  })
+
+  test('shrinks the no-color display for narrow screens', async () => {
+    // Given
+    vi.mocked(useStdout).mockReturnValue({
+      stdout: new Stdout({
+        columns: 10,
+        rows: 80,
+      }) as any,
+      write: () => {},
+    })
+
+    const firstTaskFunction = vi.fn(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 2000))
+    })
+
+    const firstTask = {
+      title: 'task 1',
+      task: firstTaskFunction,
+    }
+
+    // When
+    const renderInstance = render(<Tasks tasks={[firstTask]} silent={false} noColor />)
+
+    // Then
+    expect(unstyled(renderInstance.lastFrame()!)).toMatchInlineSnapshot(`
+      "▂▃▄▅▆▇█▇▆▅▄▃▂▁▁
+      task 1 ..."
+    `)
+    expect(firstTaskFunction).toHaveBeenCalled()
+  })
+
   test('shows nothing at the end in case of success', async () => {
     // Given
     const firstTaskFunction = vi.fn(async () => {})

packages/cli-kit/src/private/node/ui/components/Tasks.tsx

@@ -3,12 +3,22 @@ import useLayout from '../hooks/use-layout.js'
 import useAsyncAndUnmount from '../hooks/use-async-and-unmount.js'
 import {isUnitTest} from '../../../../public/node/context/local.js'
 import {AbortSignal} from '../../../../public/node/abort.js'
+import {shouldDisplayColors} from '../../../../public/node/output.js'
 import useAbortSignal from '../hooks/use-abort-signal.js'
 import {handleCtrlC} from '../../ui.js'
 import {Box, Text, useStdin, useInput} from 'ink'
 import React, {useRef, useState} from 'react'
 
 const loadingBarChar = '▀'
+// Chars that can be arranged to form a colorless horizontal figure that displays progress as it moves.
+// The string is 15 chars long so it can always be displayed even within a box inside a 20-char-wide terminal.
+const hillString = '▁▂▃▄▅▆▇█▇▆▅▄▃▂▁'
+// Like the hill string, but forming a gentler slope for motion that is less jarring
+const gradualHillString = hillString
+  .split('')
+  .map((char) => char.repeat(2).split(''))
+  .flat()
+  .join('')
 
 export interface Task<TContext = unknown> {
   title: string
@@ -25,6 +35,7 @@ interface TasksProps<TContext> {
   silent?: boolean
   onComplete?: (ctx: TContext) => void
   abortSignal?: AbortSignal
+  noColor?: boolean
 }
 
 enum TasksState {
@@ -65,9 +76,20 @@ function Tasks<TContext>({
   silent = isUnitTest(),
   onComplete = noop,
   abortSignal,
+  noColor,
 }: React.PropsWithChildren<TasksProps<TContext>>) {
   const {twoThirds} = useLayout()
-  const loadingBar = new Array(twoThirds).fill(loadingBarChar).join('')
+  let loadingBar = new Array(twoThirds).fill(loadingBarChar).join('')
+  if (noColor ?? !shouldDisplayColors()) {
+    // fill loading bar with the no color chars, repeating until the length is two thirds but only using a whole number repeat of the no color chars
+    const repeatCount = Math.floor(twoThirds / gradualHillString.length)
+    if (repeatCount === 0) {
+      const shortRepeatCount = Math.floor(twoThirds / hillString.length)
+      loadingBar = hillString.repeat(Math.max(1, shortRepeatCount))
+    } else {
+      loadingBar = gradualHillString.repeat(repeatCount)
+    }
+  }
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const [currentTask, setCurrentTask] = useState<Task<TContext>>(tasks[0]!)
   const [state, setState] = useState<TasksState>(TasksState.Loading)

packages/cli-kit/src/private/node/ui/components/TextAnimation.tsx

@@ -14,6 +14,16 @@ function rainbow(text: string, frame: number) {
   return gradient(leftColor, rightColor)(text, {interpolation: 'hsv', hsvSpin: 'long'})
 }
 
+function rotated(text: string, steps: number) {
+  const textLength = text.length
+  return text
+    .split('')
+    .map((_, index) => {
+      return text[(index + steps) % textLength]
+    })
+    .join('')
+}
+
 /**
  * `TextAnimation` applies a rainbow animation to text.
  */
@@ -26,7 +36,7 @@ const TextAnimation = memo(({text}: TextAnimationProps): JSX.Element => {
     const newFrame = frame.current + 1
     frame.current = newFrame
 
-    setRenderedFrame(rainbow(text, frame.current))
+    setRenderedFrame(rainbow(rotated(text, frame.current), frame.current))
 
     timeout.current = setTimeout(() => {
       renderAnimation()