privatenumber / ink-task-list

Task runner components for Ink

ink-task-list

Task list components for Ink

_{Support this project by ⭐️ starring and sharing it. Follow me to see what other cool projects I'm working on! ❤️}

🚀 Install

npm i ink-task-list

🚦 Quick usage

import React from 'react';
import { render } from 'ink';
import { TaskList, Task } from 'ink-task-list';
import spinners from 'cli-spinners';

render(
    <TaskList>
        {/* Pending state */}
        <Task
            label="Pending"
            state="pending"
        />

        {/* Loading state */}
        <Task
            label="Loading"
            state="loading"
            spinner={spinners.dots}
        />

        {/* Success state */}
        <Task
            label="Success"
            state="success"
        />

        {/* Warning state */}
        <Task
            label="Warning"
            state="warning"
        />

        {/* Error state */}
        <Task
            label="Error"
            state="error"
        />

        {/* Item with children */}
        <Task
            label="Item with children"
            isExpanded
        >
            <Task
                label="Loading"
                state="loading"
                spinner={spinners.dots}
            />
        </Task>
    </TaskList>,
);

🎛 API

TaskList

Optional wrapper to contain a list of Tasks.

Basically just a <Box flexDirection="column">; only for styling and semantic purposes.

children

Type: ReactNode | ReactNode[]

Required

Pass in list of Tasks

Task

Represents each task.

label

Type: string

Required

state

Type: 'pending'|'loading'|'success'|'warning'|'error'

Default: pending

status

Type: string

Status of the task to show on the right of the label

output

Type: string

Single-line output prefixed by → to show below the label

spinner

Type:

type Spinner = {
    interval: number
    frames: string[]
}

Required if state is loading

Spinner data used for loading state. Pass in a spinner from cli-spinners for convenience.

isExpanded

Type: boolean

Default: false

Whether or not to show the children.

children

Type: ReactNode | ReactNode[]

Pass in one or more <Task> components

🙏 Credits

The component UI was inspired listr and listr2 ❤️

ink-task-list's Issues

`listChildren` array elements have no `key`

Bug description

The Task component convert its non-array children into an array, but in doing so, doesn't provide a key to the element within, producing the following error:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Task`. It was passed a child from EnvSetup. See https://reactjs.org/link/warning-keys for more information.
    at Text (/[redacted]/cli/node_modules/ink/build/components/Text.js:12:17)
    in Task (created by EnvSetup)
    in ink-box (created by Box)
    in Box (created by TaskList)
    in TaskList (created by EnvSetup)
    in EnvSetup
    in InternalApp

Reproduction steps

1. Pass Task a single element child + isExpanded.
2. Run ink.
3. See the above error.

Environment

• ink-task-list version: 1.0.0
• Webpack version: Pastel
• Operating System: OSX
• Node version: 15.14.0
• Package manager (npm/yarn/pnpm) and version: yarn 1.22.10