@hubspot/cli 7.8.11-experimental.0 → 7.8.12-experimental.1

package/ui/components/HorizontalSelectPrompt.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { useState } from 'react';
+import { CONTAINER_STYLES, INK_COLORS } from '../styles.js';
+export function getHorizontalSelectPrompt(props) {
+    return _jsx(HorizontalSelectPrompt, { ...props });
+}
+export function HorizontalSelectPrompt({ defaultOption, options, onSelect, prompt, }) {
+    const [selectedIndex, setSelectedIndex] = useState(defaultOption && options.indexOf(defaultOption) !== -1
+        ? options.indexOf(defaultOption)
+        : 0);
+    const moveRight = () => {
+        setSelectedIndex(prev => (prev < options.length - 1 ? prev + 1 : 0));
+    };
+    const moveLeft = () => {
+        setSelectedIndex(prev => (prev > 0 ? prev - 1 : options.length - 1));
+    };
+    useInput((_, key) => {
+        if (key.leftArrow) {
+            moveLeft();
+        }
+        else if (key.rightArrow) {
+            moveRight();
+        }
+        else if (key.return) {
+            onSelect(options[selectedIndex]);
+        }
+    });
+    return (_jsxs(Box, { ...CONTAINER_STYLES, flexDirection: "column", marginTop: 1, width: "100%", alignSelf: "center", justifyContent: "center", children: [prompt && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { children: prompt }) })), _jsx(Box, { flexDirection: "row", justifyContent: "center", flexWrap: "wrap", width: "100%", gap: 1, children: options.map((option, index) => (_jsx(Box, { children: _jsx(Text, { backgroundColor: index === selectedIndex ? INK_COLORS.INFO_BLUE : undefined, bold: index === selectedIndex, children: ` ${option} ` }) }, index))) }), _jsx(Box, { marginTop: 1, alignSelf: "center", justifyContent: "center", children: _jsx(Text, { dimColor: true, children: "Use arrow keys to navigate, Enter to select" }) })] }));
+}

package/ui/components/StatusMessageBoxes.d.ts

@@ -0,0 +1,12 @@
+export interface StatusMessageBoxProps {
+    title: string;
+    message: string;
+}
+export declare function getWarningBox(props: StatusMessageBoxProps): React.ReactNode;
+export declare function WarningBox({ title, message, }: StatusMessageBoxProps): React.ReactNode;
+export declare function getAlertBox(props: StatusMessageBoxProps): React.ReactNode;
+export declare function AlertBox({ title, message, }: StatusMessageBoxProps): React.ReactNode;
+export declare function getSuccessBox(props: StatusMessageBoxProps): React.ReactNode;
+export declare function SuccessBox({ title, message, }: StatusMessageBoxProps): React.ReactNode;
+export declare function getInfoBox(props: StatusMessageBoxProps): React.ReactNode;
+export declare function InfoBox({ title, message, }: StatusMessageBoxProps): React.ReactNode;

package/ui/components/StatusMessageBoxes.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { INK_COLORS } from '../styles.js';
+import { BoxWithTitle } from './BoxWithTitle.js';
+export function getWarningBox(props) {
+    return _jsx(WarningBox, { ...props });
+}
+export function WarningBox({ title, message, }) {
+    const color = INK_COLORS.WARNING_YELLOW;
+    return (_jsx(BoxWithTitle, { title: title, message: message, titleBackgroundColor: color, borderColor: color }));
+}
+export function getAlertBox(props) {
+    return _jsx(AlertBox, { ...props });
+}
+export function AlertBox({ title, message, }) {
+    const color = INK_COLORS.ALERT_RED;
+    return (_jsx(BoxWithTitle, { title: title, message: message, titleBackgroundColor: color, borderColor: color }));
+}
+export function getSuccessBox(props) {
+    return _jsx(SuccessBox, { ...props });
+}
+export function SuccessBox({ title, message, }) {
+    const color = INK_COLORS.SUCCESS_GREEN;
+    return (_jsx(BoxWithTitle, { title: title, message: message, titleBackgroundColor: color, borderColor: color }));
+}
+export function getInfoBox(props) {
+    return _jsx(InfoBox, { ...props });
+}
+export function InfoBox({ title, message, }) {
+    const color = INK_COLORS.INFO_BLUE;
+    return (_jsx(BoxWithTitle, { title: title, message: message, titleBackgroundColor: color, borderColor: color }));
+}

package/ui/index.d.ts

@@ -0,0 +1 @@
+export declare function renderInline(component: React.ReactNode): Promise<void>;

package/ui/index.js

@@ -0,0 +1,6 @@
+import { render } from 'ink';
+// Ink components will be enabled by setting the HUBSPOT_ENABLE_INK environment variable
+export async function renderInline(component) {
+    const { unmount } = render(component, { patchConsole: false });
+    unmount();
+}

package/ui/lib/ui-testing-utils.d.ts

@@ -0,0 +1,9 @@
+export type ComponentPropPair = {
+    component: React.ReactNode;
+    signature: string;
+};
+/**
+ * These components will be used by the sandbox ui. Please add any new components here.
+ */
+export declare const populatedComponents: Record<string, ComponentPropPair>;
+export declare function getComponentOptions(): string[];

package/ui/lib/ui-testing-utils.js

@@ -0,0 +1,47 @@
+import { getSuccessBox, getInfoBox, getWarningBox, getAlertBox, } from '../components/StatusMessageBoxes.js';
+import { getBoxWithTitle } from '../components/BoxWithTitle.js';
+import { SuccessBox, InfoBox, WarningBox, AlertBox, } from '../components/StatusMessageBoxes.js';
+import { BoxWithTitle } from '../components/BoxWithTitle.js';
+/**
+ * These components will be used by the sandbox ui. Please add any new components here.
+ */
+export const populatedComponents = {
+    SuccessBox: {
+        component: getSuccessBox({
+            title: 'Success',
+            message: 'This is a success message',
+        }),
+        signature: SuccessBox.toString(),
+    },
+    InfoBox: {
+        component: getInfoBox({
+            title: 'Info',
+            message: 'This is an info message',
+        }),
+        signature: InfoBox.toString(),
+    },
+    WarningBox: {
+        component: getWarningBox({
+            title: 'Warning',
+            message: 'This is a warning message',
+        }),
+        signature: WarningBox.toString(),
+    },
+    AlertBox: {
+        component: getAlertBox({
+            title: 'Alert',
+            message: 'This is an alert message',
+        }),
+        signature: AlertBox.toString(),
+    },
+    BoxWithTitle: {
+        component: getBoxWithTitle({
+            title: 'Title',
+            message: 'This is a box with a title',
+        }),
+        signature: BoxWithTitle.toString(),
+    },
+};
+export function getComponentOptions() {
+    return Object.keys(populatedComponents);
+}

package/ui/lib/useTerminalSize.d.ts

@@ -0,0 +1,13 @@
+/**
+ * This hook is used to get the current terminal size.
+ * It will return the current terminal size, and if a component is using this hook to set height/width,
+ * it will re-render when the terminal size changes.
+ * ONLY USE THIS HOOK WITH SCREENS. THIS HOOK WILL DESTROY ANY PRIOR LOG OUTPUT IF USED TO SET HEIGHT/WIDTH.
+ * @param minHeight - The minimum height of the terminal.
+ * @param minWidth - The minimum width of the terminal.
+ * @returns The current terminal size.
+ */
+export declare function useTerminalSize(minHeight?: number, minWidth?: number): {
+    columns: number;
+    rows: number;
+};

package/ui/lib/useTerminalSize.js

@@ -0,0 +1,31 @@
+import { useStdout } from 'ink';
+import { useEffect, useState } from 'react';
+/**
+ * This hook is used to get the current terminal size.
+ * It will return the current terminal size, and if a component is using this hook to set height/width,
+ * it will re-render when the terminal size changes.
+ * ONLY USE THIS HOOK WITH SCREENS. THIS HOOK WILL DESTROY ANY PRIOR LOG OUTPUT IF USED TO SET HEIGHT/WIDTH.
+ * @param minHeight - The minimum height of the terminal.
+ * @param minWidth - The minimum width of the terminal.
+ * @returns The current terminal size.
+ */
+export function useTerminalSize(minHeight, minWidth) {
+    const { stdout } = useStdout();
+    const [size, setSize] = useState({
+        columns: Math.max(stdout.columns, minWidth ?? 0),
+        rows: Math.max(stdout.rows, minHeight ?? 0),
+    });
+    useEffect(() => {
+        const handleResize = () => {
+            setSize({
+                columns: Math.max(stdout.columns, minWidth ?? 0),
+                rows: Math.max(stdout.rows, minHeight ?? 0),
+            });
+        };
+        stdout.on('resize', handleResize);
+        return () => {
+            stdout.off('resize', handleResize);
+        };
+    }, [stdout]);
+    return size;
+}

package/ui/styles.d.ts

@@ -0,0 +1,18 @@
+export declare const CONTAINER_STYLES: {
+    readonly padding: 1;
+    readonly marginY: 0.5;
+    readonly flexDirection: "column";
+    readonly flexWrap: "wrap";
+};
+/**
+ * Any color that can be used well in both WHITE and BLACK terminals.
+ * This is a best effort to ensure that the color is good looking in both
+ * light and dark modes.
+ */
+export declare const INK_COLORS: {
+    ALERT_RED: string;
+    SUCCESS_GREEN: string;
+    INFO_BLUE: string;
+    WARNING_YELLOW: string;
+    WHITE: string;
+};

package/ui/styles.js

@@ -0,0 +1,18 @@
+export const CONTAINER_STYLES = {
+    padding: 1,
+    marginY: 0.5,
+    flexDirection: 'column',
+    flexWrap: 'wrap',
+};
+/**
+ * Any color that can be used well in both WHITE and BLACK terminals.
+ * This is a best effort to ensure that the color is good looking in both
+ * light and dark modes.
+ */
+export const INK_COLORS = {
+    ALERT_RED: '#fc7272',
+    SUCCESS_GREEN: '#4deb7a',
+    INFO_BLUE: '#4dcbeb',
+    WARNING_YELLOW: '#EEB117',
+    WHITE: 'white',
+};

package/ui/views/UiSandbox.d.ts

@@ -0,0 +1,5 @@
+export type UiSandboxProps = {
+    componentName: string | undefined;
+};
+export declare function getUiSandbox(props: UiSandboxProps): React.ReactNode;
+export declare function UiSandbox({ componentName }: UiSandboxProps): React.ReactNode;

package/ui/views/UiSandbox.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useState } from 'react';
+import { HorizontalSelectPrompt } from '../components/HorizontalSelectPrompt.js';
+import { getComponentOptions, populatedComponents, } from '../lib/ui-testing-utils.js';
+import { useTerminalSize } from '../lib/useTerminalSize.js';
+import { CONTAINER_STYLES } from '../styles.js';
+export function getUiSandbox(props) {
+    return _jsx(UiSandbox, { ...props });
+}
+export function UiSandbox({ componentName }) {
+    const componentOptions = getComponentOptions();
+    const [selectedComponent, setSelectedComponent] = useState(componentName ? populatedComponents[componentName] : undefined);
+    const mapStringToComponent = (str) => {
+        setSelectedComponent(populatedComponents[str] || undefined);
+    };
+    const getFunctionArguments = (signature) => {
+        const startIndex = signature.indexOf('(');
+        const endIndex = signature.indexOf(')');
+        const functionArgs = signature.slice(startIndex, endIndex + 1);
+        return functionArgs;
+    };
+    const size = useTerminalSize(20);
+    return (_jsxs(Box, { flexDirection: "column", height: size.rows, children: [_jsx(HorizontalSelectPrompt, { defaultOption: componentName, options: componentOptions, onSelect: mapStringToComponent }), selectedComponent?.component, selectedComponent?.signature && (_jsxs(Box, { ...CONTAINER_STYLES, gap: 1, borderStyle: "classic", children: [_jsx(Text, { children: "Signature:" }), _jsx(Text, { children: getFunctionArguments(selectedComponent?.signature) })] }))] }));
+}

package/lib/middleware/__test__/utils.test.js

@@ -1,51 +0,0 @@
-import { isTargetedCommand } from '../utils.js';
-const targetCommandMap = {
-    init: { target: true },
-    account: {
-        target: true,
-        subCommands: {
-            use: { target: true },
-        },
-    },
-    project: {
-        subCommands: {
-            deploy: { target: true },
-        },
-    },
-};
-describe('lib/middleware/utils', () => {
-    describe('isTargetedCommand()', () => {
-        it('should return true for a direct target command', () => {
-            const result = isTargetedCommand(['init'], targetCommandMap);
-            expect(result).toBe(true);
-        });
-        it('should return true for a command with a subcommand', () => {
-            const result = isTargetedCommand(['account'], targetCommandMap);
-            expect(result).toBe(true);
-        });
-        it('should return true for a nested target command', () => {
-            const result = isTargetedCommand(['project', 'deploy'], targetCommandMap);
-            expect(result).toBe(true);
-        });
-        it('should return false for a non-existent command', () => {
-            const result = isTargetedCommand(['nonexistent'], targetCommandMap);
-            expect(result).toBe(false);
-        });
-        it('should return false for a non-targeted command', () => {
-            const result = isTargetedCommand(['auth'], targetCommandMap);
-            expect(result).toBe(false);
-        });
-        it('should return false for a command with a targeted subcommand', () => {
-            const result = isTargetedCommand(['project'], targetCommandMap);
-            expect(result).toBe(false);
-        });
-        it('should return false for a non-existent subcommand', () => {
-            const result = isTargetedCommand(['auth', 'nonexistent'], targetCommandMap);
-            expect(result).toBe(false);
-        });
-        it('should return false for an empty command array', () => {
-            const result = isTargetedCommand([], targetCommandMap);
-            expect(result).toBe(false);
-        });
-    });
-});

package/lib/middleware/utils.d.ts

@@ -1,8 +0,0 @@
-type TargetCommandMap = {
-    [key: string]: {
-        target?: boolean;
-        subCommands?: TargetCommandMap;
-    };
-};
-export declare function isTargetedCommand(commandParts: (string | number)[], targetCommandMap: TargetCommandMap): boolean;
-export {};

package/lib/middleware/utils.js

@@ -1,14 +0,0 @@
-export function isTargetedCommand(commandParts, targetCommandMap) {
-    const currentCommand = commandParts[0];
-    if (!targetCommandMap[currentCommand]) {
-        return false;
-    }
-    if (targetCommandMap[currentCommand].target) {
-        return true;
-    }
-    const subCommands = targetCommandMap[currentCommand].subCommands || {};
-    if (commandParts.length > 1) {
-        return isTargetedCommand(commandParts.slice(1), subCommands);
-    }
-    return false;
-}