@oclif/multi-stage-output 0.1.4 → 0.2.1

package/lib/components/divider.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-export declare function Divider({ dividerChar, dividerColor, padding, title, titleColor, titlePadding, width, }: {
+export declare function Divider({ dividerChar, dividerColor, padding, textColor, textPadding: titlePadding, title, width, }: {
     readonly title?: string;
     readonly width?: number | 'full';
     readonly padding?: number;
-    readonly titleColor?: string;
-    readonly titlePadding?: number;
+    readonly textColor?: string;
+    readonly textPadding?: number;
     readonly dividerChar?: string;
     readonly dividerColor?: string;
 }): React.ReactNode;

package/lib/components/divider.js

@@ -3,7 +3,7 @@ import React from 'react';
 const getSideDividerWidth = (width, titleWidth) => (width - titleWidth) / 2;
 const getNumberOfCharsPerWidth = (char, width) => width / char.length;
 const PAD = ' ';
-export function Divider({ dividerChar = '─', dividerColor = 'dim', padding = 1, title = '', titleColor = 'white', titlePadding = 1, width = 50, }) {
+export function Divider({ dividerChar = '─', dividerColor = 'dim', padding = 1, textColor = 'white', textPadding: titlePadding = 1, title = '', width = 50, }) {
     const titleString = title ? `${PAD.repeat(titlePadding) + title + PAD.repeat(titlePadding)}` : '';
     const titleWidth = titleString.length;
     const terminalWidth = process.stdout.columns ?? 80;
@@ -16,7 +16,7 @@ export function Divider({ dividerChar = '─', dividerColor = 'dim', padding = 1
         React.createElement(Text, null,
             paddingString,
             React.createElement(Text, { color: dividerColor }, dividerSideString),
-            React.createElement(Text, { color: titleColor }, titleString),
+            React.createElement(Text, { color: textColor }, titleString),
             React.createElement(Text, { color: dividerColor }, dividerSideString),
             paddingString)));
 }

package/lib/components/icon.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type IconProps = {
+    figure?: string;
+    paddingLeft?: number;
+    paddingRight?: number;
+    color?: string | false;
+};
+export declare function Icon({ children, icon, }: {
+    readonly children?: React.ReactNode;
+    readonly icon: IconProps;
+}): React.ReactNode;

package/lib/components/icon.js

@@ -0,0 +1,11 @@
+import { Box, Text } from 'ink';
+import React from 'react';
+export function Icon({ children, icon, }) {
+    if (!icon)
+        return false;
+    return (React.createElement(Box, null,
+        React.createElement(Box, { paddingLeft: icon.paddingLeft, paddingRight: icon.paddingRight },
+            icon.color && React.createElement(Text, { color: icon.color }, icon.figure),
+            !icon.color && React.createElement(Text, null, icon.figure)),
+        React.createElement(Box, null, children)));
+}

package/lib/components/spinner.d.ts

@@ -1,6 +1,7 @@
 import { type SpinnerName } from 'cli-spinners';
 import React from 'react';
-export type UseSpinnerProps = {
+import { IconProps } from './icon.js';
+type UseSpinnerProps = {
     /**
      * Type of a spinner.
      * See [cli-spinners](https://github.com/sindresorhus/cli-spinners) for available spinners.
@@ -9,11 +10,7 @@ export type UseSpinnerProps = {
      */
     readonly type?: SpinnerName;
 };
-export type UseSpinnerResult = {
-    frame: string;
-};
-export declare function useSpinner({ type }: UseSpinnerProps): UseSpinnerResult;
-export type SpinnerProps = UseSpinnerProps & {
+type SpinnerProps = UseSpinnerProps & {
     /**
      * Label to show near the spinner.
      */
@@ -22,10 +19,13 @@ export type SpinnerProps = UseSpinnerProps & {
     readonly labelPosition?: 'left' | 'right';
 };
 export declare function Spinner({ isBold, label, labelPosition, type }: SpinnerProps): React.ReactElement;
-export declare function SpinnerOrError({ error, labelPosition, ...props }: SpinnerProps & {
+export declare function SpinnerOrError({ error, failedIcon, labelPosition, ...props }: SpinnerProps & {
     readonly error?: Error;
+    readonly failedIcon: IconProps;
 }): React.ReactElement;
 export declare function SpinnerOrErrorOrChildren({ children, error, ...props }: SpinnerProps & {
     readonly children?: React.ReactNode;
     readonly error?: Error;
+    readonly failedIcon: IconProps;
 }): React.ReactElement;
+export {};

package/lib/components/spinner.js

@@ -1,8 +1,8 @@
 import spinners from 'cli-spinners';
 import { Box, Text } from 'ink';
 import React, { useEffect, useState } from 'react';
-import { icons } from '../design-elements.js';
-export function useSpinner({ type = 'dots' }) {
+import { Icon } from './icon.js';
+function useSpinner({ type = 'dots' }) {
     const [frame, setFrame] = useState(0);
     const spinner = spinners[type];
     useEffect(() => {
@@ -31,13 +31,13 @@ export function Spinner({ isBold, label, labelPosition = 'right', type }) {
             " ",
             label)));
 }
-export function SpinnerOrError({ error, labelPosition = 'right', ...props }) {
+export function SpinnerOrError({ error, failedIcon, labelPosition = 'right', ...props }) {
     if (error) {
         return (React.createElement(Box, null,
             props.label && labelPosition === 'left' && React.createElement(Text, null,
                 props.label,
                 " "),
-            React.createElement(Text, { color: "red" }, icons.failed),
+            React.createElement(Icon, { icon: failedIcon }),
             props.label && labelPosition === 'right' && React.createElement(Text, null,
                 " ",
                 props.label)));

package/lib/components/stages.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+import { RequiredDesign } from '../design.js';
+import { StageTracker } from '../stage-tracker.js';
+type Info<T extends Record<string, unknown>> = {
+    /**
+     * key-value: Display a key-value pair with a spinner.
+     * static-key-value: Display a key-value pair without a spinner.
+     * message: Display a message.
+     */
+    type: 'dynamic-key-value' | 'static-key-value' | 'message';
+    /**
+     * Color of the value.
+     */
+    color?: string;
+    /**
+     * Get the value to display. Takes the data property on the MultiStageComponent as an argument.
+     * Useful if you want to apply some logic (like rendering a link) to the data before displaying it.
+     *
+     * @param data The data property on the MultiStageComponent.
+     * @returns {string | undefined}
+     */
+    get: (data?: T) => string | undefined;
+    /**
+     * Whether the value should be bold.
+     */
+    bold?: boolean;
+};
+export type KeyValuePair<T extends Record<string, unknown>> = Info<T> & {
+    /**
+     * Label of the key-value pair.
+     */
+    label: string;
+    type: 'dynamic-key-value' | 'static-key-value';
+};
+export type SimpleMessage<T extends Record<string, unknown>> = Info<T> & {
+    type: 'message';
+};
+export type InfoBlock<T extends Record<string, unknown>> = Array<KeyValuePair<T> | SimpleMessage<T>>;
+export type StageInfoBlock<T extends Record<string, unknown>> = Array<(KeyValuePair<T> & {
+    stage: string;
+}) | (SimpleMessage<T> & {
+    stage: string;
+})>;
+export type FormattedKeyValue = {
+    readonly color?: string;
+    readonly isBold?: boolean;
+    readonly label?: string;
+    readonly value: string | undefined;
+    readonly stage?: string;
+    readonly type: 'dynamic-key-value' | 'static-key-value' | 'message';
+};
+export type StagesProps = {
+    readonly design?: RequiredDesign;
+    readonly error?: Error | undefined;
+    readonly postStagesBlock?: FormattedKeyValue[];
+    readonly preStagesBlock?: FormattedKeyValue[];
+    readonly stageSpecificBlock?: FormattedKeyValue[];
+    readonly title?: string;
+    readonly hasElapsedTime?: boolean;
+    readonly hasStageTime?: boolean;
+    readonly timerUnit?: 'ms' | 's';
+    readonly stageTracker: StageTracker;
+};
+export declare function Stages({ design, error, hasElapsedTime, hasStageTime, postStagesBlock, preStagesBlock, stageSpecificBlock, stageTracker, timerUnit, title, }: StagesProps): React.ReactNode;
+export {};

package/lib/components/stages.js

@@ -0,0 +1,86 @@
+import { capitalCase } from 'change-case';
+import { Box, Text } from 'ink';
+import React from 'react';
+import { constructDesignParams } from '../design.js';
+import { Divider } from './divider.js';
+import { Icon } from './icon.js';
+import { SpinnerOrError, SpinnerOrErrorOrChildren } from './spinner.js';
+import { Timer } from './timer.js';
+function StaticKeyValue({ color, isBold, label, value }) {
+    if (!value)
+        return false;
+    return (React.createElement(Box, { key: label },
+        React.createElement(Text, { bold: isBold },
+            label,
+            ": "),
+        React.createElement(Text, { color: color }, value)));
+}
+function SimpleMessage({ color, isBold, value }) {
+    if (!value)
+        return false;
+    return (React.createElement(Text, { bold: isBold, color: color }, value));
+}
+function StageInfos({ design, error, keyValuePairs, stage, }) {
+    return keyValuePairs
+        .filter((kv) => kv.stage === stage)
+        .map((kv) => {
+        const key = `${kv.label}-${kv.value}`;
+        if (kv.type === 'message') {
+            return (React.createElement(Box, { key: key, flexDirection: "row" },
+                React.createElement(Icon, { icon: design.icons.info }),
+                React.createElement(SimpleMessage, { ...kv })));
+        }
+        if (kv.type === 'dynamic-key-value') {
+            return (React.createElement(Box, { key: key },
+                React.createElement(Icon, { icon: design.icons.info }),
+                React.createElement(SpinnerOrErrorOrChildren, { error: error, label: `${kv.label}:`, labelPosition: "left", type: design.spinners.info, failedIcon: design.icons.failed }, kv.value && (React.createElement(Text, { bold: kv.isBold, color: kv.color }, kv.value)))));
+        }
+        if (kv.type === 'static-key-value') {
+            return (React.createElement(Box, { key: key },
+                React.createElement(Icon, { icon: design.icons.info }),
+                React.createElement(StaticKeyValue, { key: key, ...kv })));
+        }
+        return false;
+    });
+}
+function Infos({ design, error, keyValuePairs, }) {
+    return keyValuePairs.map((kv) => {
+        const key = `${kv.label}-${kv.value}`;
+        if (kv.type === 'message') {
+            return React.createElement(SimpleMessage, { key: key, ...kv });
+        }
+        if (kv.type === 'dynamic-key-value') {
+            return (React.createElement(SpinnerOrErrorOrChildren, { key: key, error: error, label: `${kv.label}:`, labelPosition: "left", type: design.spinners.info, failedIcon: design.icons.failed }, kv.value && (React.createElement(Text, { bold: kv.isBold, color: kv.color }, kv.value))));
+        }
+        if (kv.type === 'static-key-value') {
+            return React.createElement(StaticKeyValue, { key: key, ...kv });
+        }
+        return false;
+    });
+}
+export function Stages({ design = constructDesignParams(), error, hasElapsedTime = true, hasStageTime = true, postStagesBlock, preStagesBlock, stageSpecificBlock, stageTracker, timerUnit = 'ms', title, }) {
+    return (React.createElement(Box, { flexDirection: "column", paddingTop: 1, paddingBottom: 1 },
+        title && React.createElement(Divider, { title: title, ...design.title }),
+        preStagesBlock && preStagesBlock.length > 0 && (React.createElement(Box, { flexDirection: "column", marginLeft: 1, paddingTop: 1 },
+            React.createElement(Infos, { design: design, error: error, keyValuePairs: preStagesBlock }))),
+        React.createElement(Box, { flexDirection: "column", marginLeft: 1, paddingTop: 1 }, [...stageTracker.entries()].map(([stage, status]) => (React.createElement(Box, { key: stage, flexDirection: "column" },
+            React.createElement(Box, null,
+                (status === 'current' || status === 'failed') && (React.createElement(SpinnerOrError, { error: error, label: capitalCase(stage), type: design.spinners.stage, failedIcon: design.icons.failed })),
+                status === 'skipped' && (React.createElement(Icon, { icon: design.icons.skipped },
+                    React.createElement(Text, { color: "dim" },
+                        capitalCase(stage),
+                        " - Skipped"))),
+                status === 'completed' && (React.createElement(Icon, { icon: design.icons.completed },
+                    React.createElement(Text, null, capitalCase(stage)))),
+                status === 'pending' && (React.createElement(Icon, { icon: design.icons.pending },
+                    React.createElement(Text, null, capitalCase(stage)))),
+                status !== 'pending' && status !== 'skipped' && hasStageTime && (React.createElement(Box, null,
+                    React.createElement(Text, null, " "),
+                    React.createElement(Timer, { color: "dim", isStopped: status === 'completed', unit: timerUnit })))),
+            stageSpecificBlock && stageSpecificBlock.length > 0 && status !== 'pending' && status !== 'skipped' && (React.createElement(StageInfos, { design: design, error: error, keyValuePairs: stageSpecificBlock, stage: stage })))))),
+        postStagesBlock && postStagesBlock.length > 0 && (React.createElement(Box, { flexDirection: "column", marginLeft: 1, paddingTop: 1 },
+            React.createElement(Infos, { design: design, error: error, keyValuePairs: postStagesBlock }))),
+        hasElapsedTime && (React.createElement(Box, { marginLeft: 1 },
+            React.createElement(Text, null, "Elapsed Time: "),
+            React.createElement(Timer, { unit: timerUnit })))));
+}

package/lib/design.d.ts

@@ -0,0 +1,76 @@
+import { type SpinnerName } from 'cli-spinners';
+import { IconProps } from './components/icon.js';
+export type Design = {
+    icons?: {
+        /**
+         * Icon to display for a completed stage. Defaults to '✔'
+         */
+        completed?: IconProps;
+        /**
+         * Icon to display for the current stage in CI environments. Defaults to '▶'
+         *
+         * Non-CI environments will display the spinner instead.
+         */
+        current?: IconProps;
+        /**
+         * Icon to display for a failed stage. Defaults to '✘'
+         */
+        failed?: IconProps;
+        /**
+         * Icon to display for a pending stage. Defaults to '◼'
+         */
+        pending?: IconProps;
+        /**
+         * Icon to display for a skipped stage. Defaults to '◯'
+         */
+        skipped?: IconProps;
+        /**
+         * Icon to display for stage specific information. Defaults to '▸'
+         */
+        info?: IconProps;
+    };
+    title?: {
+        /**
+         * Character to use as a divider for the title. Defaults to '─'
+         */
+        dividerChar?: string;
+        /**
+         * Color of the divider. Defaults to 'dim'
+         */
+        dividerColor?: string;
+        /**
+         * Padding to add above and below the title. Defaults to 1
+         */
+        padding?: number;
+        /**
+         * Color of the title. Defaults to 'white'
+         */
+        textColor?: string;
+        /**
+         * Padding to add to the left and right of the title. Defaults to 1
+         */
+        textPadding?: number;
+        /**
+         * Width of the title. Defaults to 50
+         *
+         * The `full` value will use the terminal width minus the title padding.
+         */
+        width?: number | 'full';
+    };
+    spinners?: {
+        /**
+         * Spinner to display for dynamic info blocks. Defaults to 'line' on Windows and 'arc' on other platforms
+         */
+        info?: SpinnerName;
+        /**
+         * Spinner to display for stages. Defaults to 'line' on Windows and 'dots2' on other platforms
+         */
+        stage?: SpinnerName;
+    };
+};
+type RecursiveRequired<T> = Required<{
+    [P in keyof T]: T[P] extends object | undefined ? RecursiveRequired<Required<T[P]>> : T[P];
+}>;
+export type RequiredDesign = RecursiveRequired<Design>;
+export declare function constructDesignParams(design?: Design): RequiredDesign;
+export {};

package/lib/design.js

@@ -0,0 +1,63 @@
+import figures from 'figures';
+export function constructDesignParams(design) {
+    return {
+        icons: {
+            completed: {
+                color: 'green',
+                figure: figures.tick,
+                paddingLeft: 0,
+                paddingRight: 0,
+                ...design?.icons?.completed,
+            },
+            current: {
+                color: 'yellow',
+                figure: figures.play,
+                paddingLeft: 0,
+                paddingRight: 0,
+                ...design?.icons?.current,
+            },
+            failed: {
+                color: 'red',
+                figure: figures.cross,
+                paddingLeft: 0,
+                paddingRight: 0,
+                ...design?.icons?.failed,
+            },
+            info: {
+                color: false,
+                figure: figures.triangleRightSmall,
+                paddingLeft: 2,
+                paddingRight: 1,
+                ...design?.icons?.info,
+            },
+            pending: {
+                color: 'dim',
+                figure: figures.squareSmallFilled,
+                paddingLeft: 0,
+                paddingRight: 0,
+                ...design?.icons?.pending,
+            },
+            skipped: {
+                color: 'dim',
+                figure: figures.circle,
+                paddingLeft: 0,
+                paddingRight: 1,
+                ...design?.icons?.skipped,
+            },
+        },
+        spinners: {
+            info: process.platform === 'win32' ? 'line' : 'arc',
+            stage: process.platform === 'win32' ? 'line' : 'dots2',
+            ...design?.spinners,
+        },
+        title: {
+            dividerChar: '─',
+            dividerColor: 'dim',
+            padding: 1,
+            textColor: 'white',
+            textPadding: 1,
+            width: 50,
+            ...design?.title,
+        },
+    };
+}

package/lib/index.d.ts

@@ -1 +1 @@
-export { MultiStageOutput } from './components/multi-stage-output.js';
+export { MultiStageOutput, MultiStageOutputOptions } from './multi-stage-output.js';

package/lib/index.js

@@ -1 +1 @@
-export { MultiStageOutput } from './components/multi-stage-output.js';
+export { MultiStageOutput } from './multi-stage-output.js';

package/lib/multi-stage-output.d.ts

@@ -0,0 +1,74 @@
+import { KeyValuePair, SimpleMessage, StageInfoBlock } from './components/stages.js';
+import { Design } from './design.js';
+export type MultiStageOutputOptions<T extends Record<string, unknown>> = {
+    /**
+     * Stages to render.
+     */
+    readonly stages: readonly string[] | string[];
+    /**
+     * Title to display at the top of the stages component.
+     */
+    readonly title?: string;
+    /**
+     * Information to display at the bottom of the stages component.
+     */
+    readonly postStagesBlock?: Array<KeyValuePair<T> | SimpleMessage<T>>;
+    /**
+     * Information to display below the title but above the stages.
+     */
+    readonly preStagesBlock?: Array<KeyValuePair<T> | SimpleMessage<T>>;
+    /**
+     * Whether to show the total elapsed time. Defaults to true
+     */
+    readonly showElapsedTime?: boolean;
+    /**
+     * Whether to show the time spent on each stage. Defaults to true
+     */
+    readonly showStageTime?: boolean;
+    /**
+     * Whether to show the title. Defaults to true
+     */
+    readonly showTitle?: boolean;
+    /**
+     * Information to display for a specific stage. Each object must have a stage property set.
+     */
+    readonly stageSpecificBlock?: StageInfoBlock<T>;
+    /**
+     * The unit to use for the timer. Defaults to 'ms'
+     */
+    readonly timerUnit?: 'ms' | 's';
+    /**
+     * Data to display in the stages component. This data will be passed to the get function in the info object.
+     */
+    readonly data?: Partial<T>;
+    /**
+     * Design options to customize the output.
+     */
+    readonly design?: Design;
+};
+export declare class MultiStageOutput<T extends Record<string, unknown>> implements Disposable {
+    private ciInstance;
+    private data?;
+    private readonly design;
+    private readonly hasElapsedTime?;
+    private readonly hasStageTime?;
+    private inkInstance;
+    private readonly postStagesBlock?;
+    private readonly preStagesBlock?;
+    private readonly stages;
+    private readonly stageSpecificBlock?;
+    private stageTracker;
+    private stopped;
+    private readonly timerUnit?;
+    private readonly title?;
+    constructor({ data, design, postStagesBlock, preStagesBlock, showElapsedTime, showStageTime, stageSpecificBlock, stages, timerUnit, title, }: MultiStageOutputOptions<T>);
+    goto(stage: string, data?: Partial<T>): void;
+    next(data?: Partial<T>): void;
+    stop(error?: Error): void;
+    [Symbol.dispose](): void;
+    updateData(data: Partial<T>): void;
+    private formatKeyValuePairs;
+    /** shared method to populate everything needed for Stages cmp */
+    private generateStagesInput;
+    private update;
+}

package/lib/{components/multi-stage-output.js → multi-stage-output.js}

@@ -1,84 +1,19 @@
 import { ux } from '@oclif/core/ux';
 import { capitalCase } from 'change-case';
-import { Box, Text, render } from 'ink';
+import { render } from 'ink';
 import { env } from 'node:process';
 import React from 'react';
-import { icons, spinners } from '../design-elements.js';
-import { StageTracker } from '../stage-tracker.js';
-import { readableTime } from '../utils.js';
-import { Divider } from './divider.js';
-import { SpinnerOrError, SpinnerOrErrorOrChildren } from './spinner.js';
-import { Timer } from './timer.js';
+import { Stages, } from './components/stages.js';
+import { constructDesignParams } from './design.js';
+import { StageTracker } from './stage-tracker.js';
+import { readableTime } from './utils.js';
 // Taken from https://github.com/sindresorhus/is-in-ci
 const isInCi = env.CI !== '0' &&
     env.CI !== 'false' &&
     ('CI' in env || 'CONTINUOUS_INTEGRATION' in env || Object.keys(env).some((key) => key.startsWith('CI_')));
-function StaticKeyValue({ color, isBold, label, value }) {
-    if (!value)
-        return;
-    return (React.createElement(Box, { key: label },
-        React.createElement(Text, { bold: isBold },
-            label,
-            ": "),
-        React.createElement(Text, { color: color }, value)));
-}
-function SimpleMessage({ color, isBold, value }) {
-    if (!value)
-        return;
-    return (React.createElement(Text, { bold: isBold, color: color }, value));
-}
-function Infos({ error, keyValuePairs, stage, }) {
-    return (keyValuePairs
-        // If stage is provided, only show info for that stage
-        // otherwise, show all infos that don't have a specified stage
-        .filter((kv) => (stage ? kv.stage === stage : !kv.stage))
-        .map((kv) => {
-        const key = `${kv.label}-${kv.value}`;
-        if (kv.type === 'message') {
-            return React.createElement(SimpleMessage, { key: key, ...kv });
-        }
-        if (kv.type === 'dynamic-key-value') {
-            return (React.createElement(SpinnerOrErrorOrChildren, { key: key, error: error, label: `${kv.label}:`, labelPosition: "left", type: spinners.info }, kv.value && (React.createElement(Text, { bold: kv.isBold, color: kv.color }, kv.value))));
-        }
-        if (kv.type === 'static-key-value') {
-            return React.createElement(StaticKeyValue, { key: key, ...kv });
-        }
-        return null;
-    }));
-}
-export function Stages({ error, hasElapsedTime = true, hasStageTime = true, postStagesBlock, preStagesBlock, stageSpecificBlock, stageTracker, timerUnit = 'ms', title, }) {
-    return (React.createElement(Box, { flexDirection: "column", paddingTop: 1, paddingBottom: 1 },
-        React.createElement(Divider, { title: title }),
-        preStagesBlock && preStagesBlock.length > 0 && (React.createElement(Box, { flexDirection: "column", marginLeft: 1, paddingTop: 1 },
-            React.createElement(Infos, { error: error, keyValuePairs: preStagesBlock }))),
-        React.createElement(Box, { flexDirection: "column", marginLeft: 1, paddingTop: 1 }, [...stageTracker.entries()].map(([stage, status]) => (React.createElement(Box, { key: stage, flexDirection: "column" },
-            React.createElement(Box, null,
-                (status === 'current' || status === 'failed') && (React.createElement(SpinnerOrError, { error: error, label: capitalCase(stage), type: spinners.stage })),
-                status === 'skipped' && (React.createElement(Text, { color: "dim" },
-                    icons.skipped,
-                    " ",
-                    capitalCase(stage),
-                    " - Skipped")),
-                status === 'completed' && (React.createElement(Box, null,
-                    React.createElement(Text, { color: "green" }, icons.completed),
-                    React.createElement(Text, null, capitalCase(stage)))),
-                status === 'pending' && (React.createElement(Text, { color: "dim" },
-                    icons.pending,
-                    " ",
-                    capitalCase(stage))),
-                status !== 'pending' && status !== 'skipped' && hasStageTime && (React.createElement(Box, null,
-                    React.createElement(Text, null, " "),
-                    React.createElement(Timer, { color: "dim", isStopped: status === 'completed', unit: timerUnit })))),
-            stageSpecificBlock && stageSpecificBlock.length > 0 && status !== 'pending' && status !== 'skipped' && (React.createElement(Box, { flexDirection: "column", marginLeft: 5 },
-                React.createElement(Infos, { error: error, keyValuePairs: stageSpecificBlock, stage: stage }))))))),
-        postStagesBlock && postStagesBlock.length > 0 && (React.createElement(Box, { flexDirection: "column", marginLeft: 1, paddingTop: 1 },
-            React.createElement(Infos, { error: error, keyValuePairs: postStagesBlock }))),
-        hasElapsedTime && (React.createElement(Box, { marginLeft: 1, paddingTop: 1 },
-            React.createElement(Text, null, "Elapsed Time: "),
-            React.createElement(Timer, { unit: timerUnit })))));
-}
 class CIMultiStageOutput {
     data;
+    design;
     hasElapsedTime;
     hasStageTime;
     lastUpdateTime;
@@ -91,9 +26,8 @@ class CIMultiStageOutput {
     startTime;
     startTimes = new Map();
     timerUnit;
-    title;
-    constructor({ data, postStagesBlock, preStagesBlock, showElapsedTime, showStageTime, stageSpecificBlock, stages, timerUnit, title, }) {
-        this.title = title;
+    constructor({ data, design, postStagesBlock, preStagesBlock, showElapsedTime, showStageTime, stageSpecificBlock, stages, timerUnit, title, }) {
+        this.design = constructDesignParams(design);
         this.stages = stages;
         this.postStagesBlock = postStagesBlock;
         this.preStagesBlock = preStagesBlock;
@@ -103,7 +37,8 @@ class CIMultiStageOutput {
         this.timerUnit = timerUnit ?? 'ms';
         this.data = data;
         this.lastUpdateTime = Date.now();
-        ux.stdout(`───── ${this.title} ─────`);
+        if (title)
+            ux.stdout(`───── ${title} ─────`);
         ux.stdout('Stages:');
         for (const stage of this.stages) {
             ux.stdout(`${this.stages.indexOf(stage) + 1}. ${capitalCase(stage)}`);
@@ -142,7 +77,7 @@ class CIMultiStageOutput {
                     this.lastUpdateTime = Date.now();
                     if (!this.startTimes.has(stage))
                         this.startTimes.set(stage, Date.now());
-                    ux.stdout(`${icons.current} ${capitalCase(stage)}...`);
+                    ux.stdout(`${this.design.icons.current} ${capitalCase(stage)}...`);
                     this.printInfo(this.preStagesBlock, 3);
                     this.printInfo(this.stageSpecificBlock?.filter((info) => info.stage === stage), 3);
                     this.printInfo(this.postStagesBlock, 3);
@@ -156,16 +91,16 @@ class CIMultiStageOutput {
                         const startTime = this.startTimes.get(stage);
                         const elapsedTime = startTime ? Date.now() - startTime : 0;
                         const displayTime = readableTime(elapsedTime, this.timerUnit);
-                        ux.stdout(`${icons[status]} ${capitalCase(stage)} (${displayTime})`);
+                        ux.stdout(`${this.design.icons[status]} ${capitalCase(stage)} (${displayTime})`);
                         this.printInfo(this.preStagesBlock, 3);
                         this.printInfo(this.stageSpecificBlock?.filter((info) => info.stage === stage), 3);
                         this.printInfo(this.postStagesBlock, 3);
                     }
                     else if (status === 'skipped') {
-                        ux.stdout(`${icons[status]} ${capitalCase(stage)} - Skipped`);
+                        ux.stdout(`${this.design.icons[status]} ${capitalCase(stage)} - Skipped`);
                     }
                     else {
-                        ux.stdout(`${icons[status]} ${capitalCase(stage)}`);
+                        ux.stdout(`${this.design.icons[status]} ${capitalCase(stage)}`);
                         this.printInfo(this.preStagesBlock, 3);
                         this.printInfo(this.stageSpecificBlock?.filter((info) => info.stage === stage), 3);
                         this.printInfo(this.postStagesBlock, 3);
@@ -197,6 +132,7 @@ class CIMultiStageOutput {
 export class MultiStageOutput {
     ciInstance;
     data;
+    design;
     hasElapsedTime;
     hasStageTime;
     inkInstance;
@@ -208,8 +144,9 @@ export class MultiStageOutput {
     stopped = false;
     timerUnit;
     title;
-    constructor({ data, jsonEnabled, postStagesBlock, preStagesBlock, showElapsedTime, showStageTime, stageSpecificBlock, stages, timerUnit, title, }) {
+    constructor({ data, design, postStagesBlock, preStagesBlock, showElapsedTime, showStageTime, stageSpecificBlock, stages, timerUnit, title, }) {
         this.data = data;
+        this.design = constructDesignParams(design);
         this.stages = stages;
         this.title = title;
         this.postStagesBlock = postStagesBlock;
@@ -219,12 +156,10 @@ export class MultiStageOutput {
         this.timerUnit = timerUnit ?? 'ms';
         this.stageTracker = new StageTracker(stages);
         this.stageSpecificBlock = stageSpecificBlock;
-        if (jsonEnabled)
-            return;
         if (isInCi) {
             this.ciInstance = new CIMultiStageOutput({
                 data,
-                jsonEnabled,
+                design,
                 postStagesBlock,
                 preStagesBlock,
                 showElapsedTime,
@@ -236,7 +171,7 @@ export class MultiStageOutput {
             });
         }
         else {
-            this.inkInstance = render(React.createElement(Stages, { hasElapsedTime: this.hasElapsedTime, hasStageTime: this.hasStageTime, postStagesBlock: this.formatKeyValuePairs(this.postStagesBlock), preStagesBlock: this.formatKeyValuePairs(this.preStagesBlock), stageSpecificBlock: this.formatKeyValuePairs(this.stageSpecificBlock), stageTracker: this.stageTracker, timerUnit: this.timerUnit, title: this.title }));
+            this.inkInstance = render(React.createElement(Stages, { ...this.generateStagesInput() }));
         }
     }
     goto(stage, data) {
@@ -267,12 +202,8 @@ export class MultiStageOutput {
             this.ciInstance?.stop(this.stageTracker);
             return;
         }
-        if (error) {
-            this.inkInstance?.rerender(React.createElement(Stages, { error: error, hasElapsedTime: this.hasElapsedTime, hasStageTime: this.hasStageTime, postStagesBlock: this.formatKeyValuePairs(this.postStagesBlock), preStagesBlock: this.formatKeyValuePairs(this.preStagesBlock), stageSpecificBlock: this.formatKeyValuePairs(this.stageSpecificBlock), stageTracker: this.stageTracker, timerUnit: this.timerUnit, title: this.title }));
-        }
-        else {
-            this.inkInstance?.rerender(React.createElement(Stages, { hasElapsedTime: this.hasElapsedTime, hasStageTime: this.hasStageTime, postStagesBlock: this.formatKeyValuePairs(this.postStagesBlock), preStagesBlock: this.formatKeyValuePairs(this.preStagesBlock), stageSpecificBlock: this.formatKeyValuePairs(this.stageSpecificBlock), stageTracker: this.stageTracker, timerUnit: this.timerUnit, title: this.title }));
-        }
+        const stagesInput = { ...this.generateStagesInput(), ...(error ? { error } : {}) };
+        this.inkInstance?.rerender(React.createElement(Stages, { ...stagesInput }));
         this.inkInstance?.unmount();
     }
     [Symbol.dispose]() {
@@ -297,6 +228,20 @@ export class MultiStageOutput {
             };
         }) ?? []);
     }
+    /** shared method to populate everything needed for Stages cmp */
+    generateStagesInput() {
+        return {
+            design: this.design,
+            hasElapsedTime: this.hasElapsedTime,
+            hasStageTime: this.hasStageTime,
+            postStagesBlock: this.formatKeyValuePairs(this.postStagesBlock),
+            preStagesBlock: this.formatKeyValuePairs(this.preStagesBlock),
+            stageSpecificBlock: this.formatKeyValuePairs(this.stageSpecificBlock),
+            stageTracker: this.stageTracker,
+            timerUnit: this.timerUnit,
+            title: this.title,
+        };
+    }
     update(stage, data) {
         this.data = { ...this.data, ...data };
         this.stageTracker.refresh(stage);
@@ -304,7 +249,7 @@ export class MultiStageOutput {
             this.ciInstance?.update(this.stageTracker, this.data);
         }
         else {
-            this.inkInstance?.rerender(React.createElement(Stages, { hasElapsedTime: this.hasElapsedTime, hasStageTime: this.hasStageTime, postStagesBlock: this.formatKeyValuePairs(this.postStagesBlock), preStagesBlock: this.formatKeyValuePairs(this.preStagesBlock), stageSpecificBlock: this.formatKeyValuePairs(this.stageSpecificBlock), stageTracker: this.stageTracker, timerUnit: this.timerUnit, title: this.title }));
+            this.inkInstance?.rerender(React.createElement(Stages, { ...this.generateStagesInput() }));
         }
     }
 }

package/lib/stage-tracker.d.ts

@@ -1,12 +1,16 @@
 export type StageStatus = 'pending' | 'current' | 'completed' | 'skipped' | 'failed';
-export declare class StageTracker extends Map<string, StageStatus> {
+export declare class StageTracker {
     current: string | undefined;
+    private map;
     private markers;
     constructor(stages: readonly string[] | string[]);
+    entries(): IterableIterator<[string, StageStatus]>;
+    get(stage: string): StageStatus | undefined;
     refresh(nextStage: string, opts?: {
         hasError?: boolean;
         isStopping?: boolean;
     }): void;
-    set(stage: string, status: StageStatus): this;
+    set(stage: string, status: StageStatus): void;
+    values(): IterableIterator<StageStatus>;
     private stopMarker;
 }

package/lib/stage-tracker.js

@@ -1,16 +1,23 @@
 import { Performance } from '@oclif/core/performance';
-export class StageTracker extends Map {
+export class StageTracker {
     current;
+    map = new Map();
     markers = new Map();
     constructor(stages) {
-        super(stages.map((stage) => [stage, 'pending']));
+        this.map = new Map(stages.map((stage) => [stage, 'pending']));
+    }
+    entries() {
+        return this.map.entries();
+    }
+    get(stage) {
+        return this.map.get(stage);
     }
     refresh(nextStage, opts) {
-        const stages = [...this.keys()];
+        const stages = [...this.map.keys()];
         for (const stage of stages) {
-            if (this.get(stage) === 'skipped')
+            if (this.map.get(stage) === 'skipped')
                 continue;
-            if (this.get(stage) === 'failed')
+            if (this.map.get(stage) === 'failed')
                 continue;
             // .stop() was called with an error => set the stage to failed
             if (nextStage === stage && opts?.hasError) {
@@ -34,7 +41,7 @@ export class StageTracker extends Map {
                 continue;
             }
             // any stage before the current stage should be marked as skipped if it's still pending
-            if (stages.indexOf(stage) < stages.indexOf(nextStage) && this.get(stage) === 'pending') {
+            if (stages.indexOf(stage) < stages.indexOf(nextStage) && this.map.get(stage) === 'pending') {
                 this.set(stage, 'skipped');
                 continue;
             }
@@ -52,7 +59,10 @@ export class StageTracker extends Map {
         if (status === 'current') {
             this.current = stage;
         }
-        return super.set(stage, status);
+        this.map.set(stage, status);
+    }
+    values() {
+        return this.map.values();
     }
     stopMarker(stage) {
         const marker = this.markers.get(stage);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oclif/multi-stage-output",
   "description": "Terminal output for oclif commands with multiple stages",
-  "version": "0.1.4",
+  "version": "0.2.1",
   "author": "Salesforce",
   "bugs": "https://github.com/oclif/multi-stage-output/issues",
   "dependencies": {

package/lib/components/multi-stage-output.d.ts

@@ -1,130 +0,0 @@
-import React from 'react';
-import { StageTracker } from '../stage-tracker.js';
-type Info<T extends Record<string, unknown>> = {
-    /**
-     * key-value: Display a key-value pair with a spinner.
-     * static-key-value: Display a key-value pair without a spinner.
-     * message: Display a message.
-     */
-    type: 'dynamic-key-value' | 'static-key-value' | 'message';
-    /**
-     * Color of the value.
-     */
-    color?: string;
-    /**
-     * Get the value to display. Takes the data property on the MultiStageComponent as an argument.
-     * Useful if you want to apply some logic (like rendering a link) to the data before displaying it.
-     *
-     * @param data The data property on the MultiStageComponent.
-     * @returns {string | undefined}
-     */
-    get: (data?: T) => string | undefined;
-    /**
-     * Whether the value should be bold.
-     */
-    bold?: boolean;
-};
-type KeyValuePair<T extends Record<string, unknown>> = Info<T> & {
-    /**
-     * Label of the key-value pair.
-     */
-    label: string;
-    type: 'dynamic-key-value' | 'static-key-value';
-};
-type SimpleMessage<T extends Record<string, unknown>> = Info<T> & {
-    type: 'message';
-};
-type StageInfoBlock<T extends Record<string, unknown>> = Array<(KeyValuePair<T> & {
-    stage: string;
-}) | (SimpleMessage<T> & {
-    stage: string;
-})>;
-export type FormattedKeyValue = {
-    readonly color?: string;
-    readonly isBold?: boolean;
-    readonly label?: string;
-    readonly value: string | undefined;
-    readonly stage?: string;
-    readonly type: 'dynamic-key-value' | 'static-key-value' | 'message';
-};
-type MultiStageOutputOptions<T extends Record<string, unknown>> = {
-    /**
-     * Stages to render.
-     */
-    readonly stages: readonly string[] | string[];
-    /**
-     * Title to display at the top of the stages component.
-     */
-    readonly title: string;
-    /**
-     * Information to display at the bottom of the stages component.
-     */
-    readonly postStagesBlock?: Array<KeyValuePair<T> | SimpleMessage<T>>;
-    /**
-     * Information to display below the title but above the stages.
-     */
-    readonly preStagesBlock?: Array<KeyValuePair<T> | SimpleMessage<T>>;
-    /**
-     * Whether to show the total elapsed time. Defaults to true
-     */
-    readonly showElapsedTime?: boolean;
-    /**
-     * Whether to show the time spent on each stage. Defaults to true
-     */
-    readonly showStageTime?: boolean;
-    /**
-     * Information to display for a specific stage. Each object must have a stage property set.
-     */
-    readonly stageSpecificBlock?: StageInfoBlock<T>;
-    /**
-     * The unit to use for the timer. Defaults to 'ms'
-     */
-    readonly timerUnit?: 'ms' | 's';
-    /**
-     * Data to display in the stages component. This data will be passed to the get function in the info object.
-     */
-    readonly data?: Partial<T>;
-    /**
-     * Whether JSON output is enabled. Defaults to false.
-     *
-     * Pass in this.jsonEnabled() from the command class to determine if JSON output is enabled.
-     */
-    readonly jsonEnabled: boolean;
-};
-type StagesProps = {
-    readonly error?: Error | undefined;
-    readonly postStagesBlock?: FormattedKeyValue[];
-    readonly preStagesBlock?: FormattedKeyValue[];
-    readonly stageSpecificBlock?: FormattedKeyValue[];
-    readonly title: string;
-    readonly hasElapsedTime?: boolean;
-    readonly hasStageTime?: boolean;
-    readonly timerUnit?: 'ms' | 's';
-    readonly stageTracker: StageTracker;
-};
-declare function SimpleMessage({ color, isBold, value }: FormattedKeyValue): React.ReactNode;
-export declare function Stages({ error, hasElapsedTime, hasStageTime, postStagesBlock, preStagesBlock, stageSpecificBlock, stageTracker, timerUnit, title, }: StagesProps): React.ReactNode;
-export declare class MultiStageOutput<T extends Record<string, unknown>> implements Disposable {
-    private ciInstance;
-    private data?;
-    private readonly hasElapsedTime?;
-    private readonly hasStageTime?;
-    private inkInstance;
-    private readonly postStagesBlock?;
-    private readonly preStagesBlock?;
-    private readonly stages;
-    private readonly stageSpecificBlock?;
-    private stageTracker;
-    private stopped;
-    private readonly timerUnit?;
-    private readonly title;
-    constructor({ data, jsonEnabled, postStagesBlock, preStagesBlock, showElapsedTime, showStageTime, stageSpecificBlock, stages, timerUnit, title, }: MultiStageOutputOptions<T>);
-    goto(stage: string, data?: Partial<T>): void;
-    next(data?: Partial<T>): void;
-    stop(error?: Error): void;
-    [Symbol.dispose](): void;
-    updateData(data: Partial<T>): void;
-    private formatKeyValuePairs;
-    private update;
-}
-export {};

package/lib/design-elements.d.ts

@@ -1,9 +0,0 @@
-import { type SpinnerName } from 'cli-spinners';
-export declare const icons: {
-    completed: string;
-    current: string;
-    failed: string;
-    pending: string;
-    skipped: string;
-};
-export declare const spinners: Record<string, SpinnerName>;

package/lib/design-elements.js

@@ -1,12 +0,0 @@
-import figures from 'figures';
-export const icons = {
-    completed: figures.tick,
-    current: figures.play,
-    failed: figures.cross,
-    pending: figures.squareSmallFilled,
-    skipped: figures.circle,
-};
-export const spinners = {
-    info: process.platform === 'win32' ? 'line' : 'arc',
-    stage: process.platform === 'win32' ? 'line' : 'dots2',
-};