@hubspot/cli 8.0.0 → 8.0.2-experimental.0

package/ui/components/StatusIcon.d.ts

@@ -0,0 +1,9 @@
+import { ValueOf } from '@hubspot/local-dev-lib/types/Utils';
+import { ACTION_STATUSES } from '../constants.js';
+type ActionStatus = ValueOf<typeof ACTION_STATUSES>;
+export type StatusIconProps = {
+    status: ActionStatus;
+};
+export declare function StatusIcon({ status }: StatusIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function getStatusIcon(props: StatusIconProps): React.ReactNode;
+export {};

package/ui/components/StatusIcon.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from 'ink';
+import Spinner from 'ink-spinner';
+import { ACTION_STATUSES } from '../constants.js';
+import { INK_COLORS } from '../styles.js';
+export function StatusIcon({ status }) {
+    if (status === ACTION_STATUSES.ERROR) {
+        return _jsx(Text, { color: INK_COLORS.ALERT_RED, children: "\u00D7" });
+    }
+    if (status === ACTION_STATUSES.DONE) {
+        return _jsx(Text, { color: INK_COLORS.HUBSPOT_TEAL, children: "\u2713" });
+    }
+    return (_jsx(Text, { color: INK_COLORS.HUBSPOT_TEAL, children: _jsx(Spinner, { type: "dots" }) }));
+}
+export function getStatusIcon(props) {
+    return _jsx(StatusIcon, { ...props });
+}

package/ui/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const ACTION_STATUSES: {
+    readonly IDLE: "idle";
+    readonly RUNNING: "running";
+    readonly DONE: "done";
+    readonly ERROR: "error";
+};

package/ui/constants.js

@@ -0,0 +1,6 @@
+export const ACTION_STATUSES = {
+    IDLE: 'idle',
+    RUNNING: 'running',
+    DONE: 'done',
+    ERROR: 'error',
+};

package/ui/playground/fixtures.js

@@ -1,8 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getSuccessBox, getInfoBox, getWarningBox, getAlertBox, } from '../components/StatusMessageBoxes.js';
 import { getBoxWithTitle } from '../components/BoxWithTitle.js';
 import { getTable } from '../components/Table.js';
+import { getActionSection } from '../components/ActionSection.js';
+import { getInputField } from '../components/InputField.js';
+import { getSelectInput } from '../components/SelectInput.js';
+import { getStatusIcon } from '../components/StatusIcon.js';
 import { SuccessBox, InfoBox, WarningBox, AlertBox, } from '../components/StatusMessageBoxes.js';
 import { BoxWithTitle } from '../components/BoxWithTitle.js';
+import { ActionSection } from '../components/ActionSection.js';
+import { InputField } from '../components/InputField.js';
+import { SelectInput } from '../components/SelectInput.js';
+import { StatusIcon } from '../components/StatusIcon.js';
+import { ACTION_STATUSES } from '../constants.js';
+import { Text } from 'ink';
 /**
  * These components will be used by the playground. Please add any new components here.
  */
@@ -73,6 +84,42 @@ export const populatedComponents = {
         }),
         signature: '',
     },
+    ActionSection: {
+        component: getActionSection({
+            status: ACTION_STATUSES.DONE,
+            statusText: 'Action completed successfully',
+            children: _jsx(Text, { children: "This is an action section" }),
+        }),
+        signature: ActionSection.toString(),
+    },
+    InputField: {
+        component: getInputField({
+            flag: 'name',
+            prompt: 'Enter your name',
+            value: 'example',
+            isEditing: false,
+            onChange: () => { },
+            onSubmit: () => { },
+        }),
+        signature: InputField.toString(),
+    },
+    SelectInput: {
+        component: getSelectInput({
+            items: [
+                { label: 'Option 1', value: 'option1' },
+                { label: 'Option 2', value: 'option2' },
+                { label: 'Option 3', value: 'option3' },
+            ],
+            onSelect: () => { },
+        }),
+        signature: SelectInput.toString(),
+    },
+    StatusIcon: {
+        component: getStatusIcon({
+            status: ACTION_STATUSES.DONE,
+        }),
+        signature: StatusIcon.toString(),
+    },
 };
 export function getComponentOptions() {
     return Object.keys(populatedComponents);

package/ui/render.d.ts

@@ -1,4 +1,5 @@
 import { Scalar } from './components/Table.js';
+import { ReactNode } from 'react';
 /**
  * Renders an Ink component to stdout and immediately unmounts.
  * Uses a proxy to report large viewport dimensions, preventing Ink from clipping output.
@@ -17,3 +18,6 @@ export declare function renderTable(tableHeaders: string[], tableData: Scalar[][
  * @param items - 2D array where each inner array is a row (typically single-item arrays for a simple list).
  */
 export declare function renderList(items: string[][]): Promise<void>;
+export declare function renderInteractive(component: ReactNode, options?: {
+    fullScreen?: boolean;
+}): Promise<void>;

package/ui/render.js

@@ -1,6 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from 'ink';
 import { getTable } from './components/Table.js';
 import { mapTableDataToObjects } from './lib/table.js';
+import { FullScreen } from './components/FullScreen.js';
 // Ink 6 clips output when it exceeds stdout.rows — we can use a large row count to prevent this.
 // This value is arbitrary but large enough to prevent clipping for any realistic static output.
 const INK_VIEWPORT_ROWS_FOR_STATIC_OUTPUT = 1000;
@@ -42,3 +44,26 @@ export async function renderTable(tableHeaders, tableData, borderless) {
 export async function renderList(items) {
     await renderTable([''], items, true);
 }
+export async function renderInteractive(component, options = {
+    fullScreen: false,
+}) {
+    if (options.fullScreen) {
+        // Enter alternative buffer
+        process.stdout.write('\x1b[?1049h');
+        let instance;
+        try {
+            instance = render(_jsx(FullScreen, { children: component }), {
+                patchConsole: true,
+            });
+            await instance.waitUntilExit();
+        }
+        finally {
+            // Exit alternative buffer
+            process.stdout.write('\x1b[?1049l');
+        }
+    }
+    else {
+        const instance = render(component);
+        await instance.waitUntilExit();
+    }
+}

package/ui/styles.d.ts

@@ -14,5 +14,8 @@ export declare const INK_COLORS: {
     SUCCESS_GREEN: string;
     INFO_BLUE: string;
     WARNING_YELLOW: string;
+    HUBSPOT_ORANGE: string;
+    HUBSPOT_TEAL: string;
     WHITE: string;
+    GRAY: string;
 };

package/ui/styles.js

@@ -14,5 +14,8 @@ export const INK_COLORS = {
     SUCCESS_GREEN: '#4deb7a',
     INFO_BLUE: '#4dcbeb',
     WARNING_YELLOW: '#EEB117',
+    HUBSPOT_ORANGE: '#FF7A59',
+    HUBSPOT_TEAL: '#00BDA5',
     WHITE: 'white',
+    GRAY: '#99ACC2',
 };