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

package/commands/app/__tests__/install.test.d.ts

@@ -0,0 +1 @@
+export {};

package/commands/app/__tests__/install.test.js

@@ -0,0 +1,47 @@
+import yargs from 'yargs';
+import { addAccountOptions, addConfigOptions, addUseEnvironmentOptions, addGlobalOptions, addJSONOutputOptions, } from '../../../lib/commonOpts.js';
+import installCommand from '../install.js';
+vi.mock('../../../lib/commonOpts');
+describe('commands/app/install', () => {
+    const yargsMock = yargs;
+    describe('command', () => {
+        it('should have the correct command structure', () => {
+            expect(installCommand.command).toEqual('install <test-account-id>');
+        });
+    });
+    describe('describe', () => {
+        it('should provide a description', () => {
+            expect(installCommand.describe).not.toBeDefined();
+        });
+    });
+    describe('builder', () => {
+        it('should support the correct options', () => {
+            installCommand.builder(yargsMock);
+            expect(addGlobalOptions).toHaveBeenCalledTimes(1);
+            expect(addGlobalOptions).toHaveBeenCalledWith(yargsMock);
+            expect(addAccountOptions).toHaveBeenCalledTimes(1);
+            expect(addAccountOptions).toHaveBeenCalledWith(yargsMock);
+            expect(addConfigOptions).toHaveBeenCalledTimes(1);
+            expect(addConfigOptions).toHaveBeenCalledWith(yargsMock);
+            expect(addUseEnvironmentOptions).toHaveBeenCalledTimes(1);
+            expect(addUseEnvironmentOptions).toHaveBeenCalledWith(yargsMock);
+            expect(addJSONOutputOptions).toHaveBeenCalledTimes(1);
+            expect(addJSONOutputOptions).toHaveBeenCalledWith(yargsMock);
+            expect(yargsMock.positional).toHaveBeenCalledTimes(1);
+            expect(yargsMock.positional).toHaveBeenCalledWith('test-account-id', expect.objectContaining({
+                type: 'number',
+                required: true,
+                describe: expect.any(String),
+            }));
+            expect(yargsMock.option).toHaveBeenCalledTimes(2);
+            expect(yargsMock.option).toHaveBeenCalledWith('app-uid', expect.objectContaining({
+                type: 'string',
+                describe: expect.any(String),
+            }));
+            expect(yargsMock.option).toHaveBeenCalledWith('project-name', expect.objectContaining({
+                type: 'string',
+                describe: expect.any(String),
+            }));
+        });
+    });
+});

package/commands/app/install.d.ts

@@ -0,0 +1,8 @@
+import { CommonArgs, ConfigArgs, AccountArgs, EnvironmentArgs, YargsCommandModule, JSONOutputArgs } from '../../types/Yargs.js';
+type InstallAppArgs = CommonArgs & ConfigArgs & AccountArgs & EnvironmentArgs & JSONOutputArgs & {
+    appUid?: string;
+    projectName?: string;
+    testAccountId: number;
+};
+declare const installAppCommand: YargsCommandModule<unknown, InstallAppArgs>;
+export default installAppCommand;

package/commands/app/install.js

@@ -0,0 +1,122 @@
+import { fetchDeveloperTestAccountOauthAppInstallStatus, installOauthAppIntoDeveloperTestAccount, } from '@hubspot/local-dev-lib/api/developerTestAccounts';
+import { trackCommandUsage } from '../../lib/usageTracking.js';
+import { commands } from '../../lang/en.js';
+import { EXIT_CODES } from '../../lib/enums/exitCodes.js';
+import { makeYargsBuilder } from '../../lib/yargsUtils.js';
+import { APP_AUTH_TYPES } from '../../lib/constants.js';
+import { uiLogger } from '../../lib/ui/logger.js';
+import SpinniesManager from '../../lib/ui/SpinniesManager.js';
+import { poll } from '../../lib/polling.js';
+import { getProjectConfig, validateProjectConfig, } from '../../lib/projects/config.js';
+import { handleTranslate } from '../../lib/projects/upload.js';
+import { isAppIRNode } from '../../lib/projects/structure.js';
+import { logError } from '../../lib/errorHandlers/index.js';
+const command = 'install <test-account-id>';
+const describe = undefined; // commands.app.subcommands.install.describe;
+async function handler(args) {
+    const { derivedAccountId, appUid, projectName, testAccountId, formatOutputAsJson, } = args;
+    trackCommandUsage('app-install', {}, derivedAccountId);
+    const jsonOutput = {};
+    let targetProjectName = projectName;
+    let targetAppUid = appUid;
+    const { projectConfig, projectDir } = await getProjectConfig();
+    if (!targetProjectName) {
+        validateProjectConfig(projectConfig, projectDir);
+        targetProjectName = projectConfig?.name;
+    }
+    if (!targetProjectName) {
+        uiLogger.error(commands.app.subcommands.install.errors.mustSpecifyProjectName);
+        process.exit(EXIT_CODES.ERROR);
+    }
+    let isAppOauth = true;
+    if (!targetAppUid) {
+        const intermediateRepresentation = await handleTranslate(projectDir, projectConfig, derivedAccountId, true, undefined);
+        if (intermediateRepresentation) {
+            Object.values(intermediateRepresentation.intermediateNodesIndexedByUid).forEach(node => {
+                if (isAppIRNode(node)) {
+                    targetAppUid = node.uid;
+                    isAppOauth = node.config.auth.type === APP_AUTH_TYPES.OAUTH;
+                }
+            });
+        }
+    }
+    if (!targetAppUid) {
+        uiLogger.error(commands.app.subcommands.install.errors.noAppUidFound);
+        process.exit(EXIT_CODES.ERROR);
+    }
+    if (!isAppOauth) {
+        uiLogger.error(commands.app.subcommands.install.errors.appMustBeOauth);
+        process.exit(EXIT_CODES.ERROR);
+    }
+    try {
+        const { data } = await installOauthAppIntoDeveloperTestAccount(derivedAccountId, testAccountId, targetProjectName, targetAppUid);
+        if (data?.authCodes.length > 0) {
+            jsonOutput.authCode = data.authCodes[0].authCode;
+        }
+    }
+    catch (err) {
+        logError(err);
+        process.exit(EXIT_CODES.ERROR);
+    }
+    SpinniesManager.init({
+        succeedColor: 'white',
+    });
+    SpinniesManager.add('installApp', {
+        text: commands.app.subcommands.install.polling.start,
+    });
+    let appInstallSucceeded = false;
+    try {
+        await poll(() => fetchDeveloperTestAccountOauthAppInstallStatus(derivedAccountId, targetProjectName, targetAppUid), {
+            successStates: ['SUCCESS'],
+            errorStates: [],
+        });
+        appInstallSucceeded = true;
+    }
+    catch (err) {
+        SpinniesManager.fail('installApp');
+        logError(err);
+        process.exit(EXIT_CODES.ERROR);
+    }
+    if (!appInstallSucceeded) {
+        SpinniesManager.fail('installApp');
+        process.exit(EXIT_CODES.ERROR);
+    }
+    SpinniesManager.succeed('installApp', {
+        text: commands.app.subcommands.install.polling.success,
+    });
+    if (formatOutputAsJson) {
+        uiLogger.json(jsonOutput);
+    }
+    process.exit(EXIT_CODES.SUCCESS);
+}
+function installAppBuilder(yargs) {
+    yargs.positional('test-account-id', {
+        describe: commands.app.subcommands.install.positionals.testAccountId,
+        required: true,
+        type: 'number',
+    });
+    yargs.option('app-uid', {
+        describe: commands.app.subcommands.install.options.appUid,
+        type: 'string',
+    });
+    yargs.option('project-name', {
+        describe: commands.app.subcommands.install.options.projectName,
+        type: 'string',
+    });
+    yargs.example('install 1234567890 --app-uid=my-app-uid --project-name=my-project', commands.app.subcommands.install.example);
+    return yargs;
+}
+const builder = makeYargsBuilder(installAppBuilder, command, commands.app.subcommands.install.describe, {
+    useGlobalOptions: true,
+    useAccountOptions: true,
+    useConfigOptions: true,
+    useEnvironmentOptions: true,
+    useJSONOutputOptions: true,
+});
+const installAppCommand = {
+    command,
+    describe,
+    handler,
+    builder,
+};
+export default installAppCommand;

package/commands/app.js

@@ -1,11 +1,16 @@
 import migrateCommand from './app/migrate.js';
 import appSecretCommand from './app/secret.js';
+import installAppCommand from './app/install.js';
 import { makeYargsBuilder } from '../lib/yargsUtils.js';
 import { commands } from '../lang/en.js';
 const command = ['app', 'apps'];
 const describe = commands.app.describe;
 function appBuilder(yargs) {
-    yargs.command(migrateCommand).command(appSecretCommand).demandCommand(1, '');
+    yargs
+        .command(migrateCommand)
+        .command(appSecretCommand)
+        .command(installAppCommand)
+        .demandCommand(1, '');
     return yargs;
 }
 const builder = makeYargsBuilder(appBuilder, command, describe);

package/commands/project/migrate.js

@@ -8,8 +8,8 @@ import { uiCommandReference } from '../../lib/ui/index.js';
 import { commands, lib } from '../../lang/en.js';
 import { uiLogger } from '../../lib/ui/logger.js';
 import { logInBox } from '../../lib/ui/boxen.js';
-// import { renderInline } from '../../ui/index.js';
-// import { getWarningBox } from '../../ui/components/StatusMessageBoxes.js';
+import { renderInline } from '../../ui/index.js';
+import { getWarningBox } from '../../ui/components/StatusMessageBoxes.js';
 import { getHasMigratableThemes, migrateThemes2025_2, } from '../../lib/theme/migrate.js';
 import { hasFeature } from '../../lib/hasFeature.js';
 import { FEATURES } from '../../lib/constants.js';
@@ -24,20 +24,18 @@ async function handler(args) {
         return process.exit(EXIT_CODES.ERROR);
     }
     if (projectConfig?.projectConfig) {
-        // TODO: Restore ink
-        // if (!process.env.HUBSPOT_ENABLE_INK) {
-        await logInBox({
-            contents: lib.migrate.projectMigrationWarning,
-            options: { title: lib.migrate.projectMigrationWarningTitle },
-        });
-        // } else {
-        //   await renderInline(
-        //     getWarningBox({
-        //       title: lib.migrate.projectMigrationWarningTitle,
-        //       message: lib.migrate.projectMigrationWarning,
-        //     })
-        //   );
-        // }
+        if (!process.env.HUBSPOT_ENABLE_INK) {
+            await logInBox({
+                contents: lib.migrate.projectMigrationWarning,
+                options: { title: lib.migrate.projectMigrationWarningTitle },
+            });
+        }
+        else {
+            await renderInline(getWarningBox({
+                title: lib.migrate.projectMigrationWarningTitle,
+                message: lib.migrate.projectMigrationWarning,
+            }));
+        }
     }
     const { derivedAccountId } = args;
     try {

package/commands/project/upload.d.ts

@@ -1,5 +1,5 @@
-import { CommonArgs, JSONOutputArgs, YargsCommandModule } from '../../types/Yargs.js';
-type ProjectUploadArgs = CommonArgs & JSONOutputArgs & {
+import { CommonArgs, EnvironmentArgs, JSONOutputArgs, YargsCommandModule } from '../../types/Yargs.js';
+type ProjectUploadArgs = CommonArgs & JSONOutputArgs & EnvironmentArgs & {
     forceCreate: boolean;
     message: string;
     m: string;

package/commands/project/upload.js

@@ -25,7 +25,7 @@ async function handler(args) {
     validateProjectConfig(projectConfig, projectDir);
     let targetAccountId;
     if (useV3Api(projectConfig.platformVersion)) {
-        targetAccountId = await loadAndValidateProfile(projectConfig, projectDir, profile);
+        targetAccountId = await loadAndValidateProfile(projectConfig, projectDir, profile, args.useEnv);
     }
     targetAccountId = targetAccountId || derivedAccountId;
     const accountConfig = getAccountConfig(targetAccountId);

package/commands/testAccount/create.js

@@ -75,6 +75,9 @@ async function handler(args) {
         resultJson.personalAccessKey = createResult.personalAccessKey;
     }
     catch (err) {
+        SpinniesManager.fail('createTestAccount', {
+            text: commands.testAccount.create.polling.createFailure,
+        });
         logError(err);
         SpinniesManager.fail('createTestAccount', {
             text: commands.testAccount.create.polling.createFailure,

package/lang/en.d.ts

@@ -1557,6 +1557,28 @@ ${string}`;
     readonly app: {
         readonly describe: "Commands for managing apps.";
         readonly subcommands: {
+            readonly install: {
+                readonly describe: "Install an OAuth app into a test account.";
+                readonly options: {
+                    readonly appUid: "The uid of the app to install";
+                    readonly projectName: "The name of the project that contains the app";
+                };
+                readonly positionals: {
+                    readonly testAccountId: "The id of the test account to install the app into";
+                };
+                readonly errors: {
+                    readonly mustSpecifyProjectName: `You must specify a project name. Use the ${string} flag to specify the project name or run this command from within a project directory.`;
+                    readonly noAppUidFound: `No app uid found. Please specify the app uid with the ${string} flag or run this command from within a project that contains an app.`;
+                    readonly appMustBeOauth: "This command only supports installing oauth apps. Please specify an app with oauth auth type.";
+                };
+                readonly polling: {
+                    readonly start: "Installing app...";
+                    readonly success: "App installed successfully";
+                    readonly failure: "App installation failed";
+                    readonly error: "Error installing app";
+                };
+                readonly example: "Install the app with uid my-app-uid from the project named \"my-project\" into the target account with id 1234567890";
+            };
             readonly secret: {
                 readonly describe: "Commands for managing secrets.";
                 readonly subcommands: {

package/lang/en.js

@@ -1555,6 +1555,28 @@ export const commands = {
     app: {
         describe: 'Commands for managing apps.',
         subcommands: {
+            install: {
+                describe: 'Install an OAuth app into a test account.',
+                options: {
+                    appUid: 'The uid of the app to install',
+                    projectName: 'The name of the project that contains the app',
+                },
+                positionals: {
+                    testAccountId: 'The id of the test account to install the app into',
+                },
+                errors: {
+                    mustSpecifyProjectName: `You must specify a project name. Use the ${uiCommandReference('--project-name')} flag to specify the project name or run this command from within a project directory.`,
+                    noAppUidFound: `No app uid found. Please specify the app uid with the ${uiCommandReference('--app-uid')} flag or run this command from within a project that contains an app.`,
+                    appMustBeOauth: 'This command only supports installing oauth apps. Please specify an app with oauth auth type.',
+                },
+                polling: {
+                    start: 'Installing app...',
+                    success: 'App installed successfully',
+                    failure: 'App installation failed',
+                    error: 'Error installing app',
+                },
+                example: 'Install the app with uid my-app-uid from the project named "my-project" into the target account with id 1234567890',
+            },
             secret: {
                 describe: 'Commands for managing secrets.',
                 subcommands: {

package/lib/middleware/fireAlarmMiddleware.js

@@ -3,8 +3,8 @@ import { fetchFireAlarms } from '@hubspot/local-dev-lib/api/fireAlarm';
 import { debugError } from '../errorHandlers/index.js';
 import pkg from '../../package.json' with { type: 'json' };
 import { logInBox } from '../ui/boxen.js';
-// import { renderInline } from '../../ui/index.js';
-// import { getWarningBox } from '../../ui/components/StatusMessageBoxes.js';
+import { renderInline } from '../../ui/index.js';
+import { getWarningBox } from '../../ui/components/StatusMessageBoxes.js';
 /*
  * Versions can be formatted like this:
  * =7.2.2 -> targets the exact version 7.2.2
@@ -100,22 +100,20 @@ async function logFireAlarms(accountId, command, version) {
             }
             return acc;
         }, '');
-        // TODO: Restore ink
-        // if (!process.env.HUBSPOT_ENABLE_INK) {
-        await logInBox({
-            contents: notifications,
-            options: {
+        if (!process.env.HUBSPOT_ENABLE_INK) {
+            await logInBox({
+                contents: notifications,
+                options: {
+                    title: 'Notifications',
+                },
+            });
+        }
+        else {
+            await renderInline(getWarningBox({
                 title: 'Notifications',
-            },
-        });
-        // } else {
-        //   await renderInline(
-        //     getWarningBox({
-        //       title: 'Notifications',
-        //       message: notifications,
-        //     })
-        //   );
-        // }
+                message: notifications,
+            }));
+        }
     }
 }
 export async function checkFireAlarms(argv) {

package/lib/projectProfiles.d.ts

@@ -4,4 +4,4 @@ export declare function logProfileHeader(profileName: string): void;
 export declare function logProfileFooter(profile: HsProfileFile, includeVariables?: boolean): void;
 export declare function loadProfile(projectConfig: ProjectConfig | null, projectDir: string | null, profileName: string): HsProfileFile | undefined;
 export declare function exitIfUsingProfiles(projectConfig: ProjectConfig | null, projectDir: string | null): Promise<void>;
-export declare function loadAndValidateProfile(projectConfig: ProjectConfig | null, projectDir: string | null, argsProfile: string | undefined): Promise<number | undefined>;
+export declare function loadAndValidateProfile(projectConfig: ProjectConfig | null, projectDir: string | null, argsProfile: string | undefined, useEnv?: boolean): Promise<number | undefined>;

package/lib/projectProfiles.js

@@ -38,7 +38,12 @@ export function loadProfile(projectConfig, projectDir, profileName) {
             uiLogger.error(lib.projectProfiles.loadProfile.errors.missingAccountId(profileFilename));
             return;
         }
-        return profile;
+        return {
+            ...profile,
+            accountId: process.env.HUBSPOT_ACCOUNT_ID
+                ? Number(process.env.HUBSPOT_ACCOUNT_ID)
+                : profile.accountId,
+        };
     }
     catch (e) {
         uiLogger.error(lib.projectProfiles.loadProfile.errors.failedToLoadProfile(profileFilename));
@@ -54,7 +59,7 @@ export async function exitIfUsingProfiles(projectConfig, projectDir) {
         }
     }
 }
-export async function loadAndValidateProfile(projectConfig, projectDir, argsProfile) {
+export async function loadAndValidateProfile(projectConfig, projectDir, argsProfile, useEnv = false) {
     if (argsProfile) {
         logProfileHeader(argsProfile);
         const profile = loadProfile(projectConfig, projectDir, argsProfile);
@@ -63,6 +68,9 @@ export async function loadAndValidateProfile(projectConfig, projectDir, argsProf
             process.exit(EXIT_CODES.ERROR);
         }
         logProfileFooter(profile, true);
+        if (useEnv) {
+            return Number(process.env.HUBSPOT_ACCOUNT_ID);
+        }
         return profile.accountId;
     }
     else {

package/lib/projects/structure.d.ts

@@ -1,5 +1,5 @@
 import { ComponentTypes, Component, GenericComponentConfig, PublicAppComponentConfig, PrivateAppComponentConfig, AppCardComponentConfig } from '../../types/Projects.js';
-import { IntermediateRepresentationNodeLocalDev } from '@hubspot/project-parsing-lib/src/lib/types.js';
+import { IntermediateRepresentationNode, IntermediateRepresentationNodeLocalDev } from '@hubspot/project-parsing-lib/src/lib/types.js';
 import { AppIRNode } from '../../types/ProjectComponents.js';
 export declare const CONFIG_FILES: {
     [k in ComponentTypes]: string;
@@ -15,4 +15,4 @@ export declare function getProjectComponentTypes(components: Array<Component>):
 export declare function getComponentUid(component?: Component | null): string | null;
 export declare function componentIsApp(component?: Component | null): component is Component<PublicAppComponentConfig | PrivateAppComponentConfig>;
 export declare function componentIsPublicApp(component?: Component | null): component is Component<PublicAppComponentConfig>;
-export declare function isAppIRNode(component: IntermediateRepresentationNodeLocalDev): component is AppIRNode;
+export declare function isAppIRNode(component: IntermediateRepresentationNodeLocalDev | IntermediateRepresentationNode): component is AppIRNode;

package/lib/projects/upload.d.ts

@@ -1,4 +1,5 @@
 import { FileResult } from 'tmp';
+import { IntermediateRepresentation } from '@hubspot/project-parsing-lib';
 import { ProjectConfig } from '../../types/Projects.js';
 type ProjectUploadCallbackFunction<T> = (accountId: number, projectConfig: ProjectConfig, tempFile: FileResult, buildId: number) => Promise<T>;
 type ProjectUploadResult<T> = {
@@ -20,5 +21,5 @@ type HandleProjectUploadArg<T> = {
 export declare function handleProjectUpload<T>({ accountId, projectConfig, projectDir, callbackFunc, profile, uploadMessage, forceCreate, isUploadCommand, sendIR, skipValidation, }: HandleProjectUploadArg<T>): Promise<ProjectUploadResult<T>>;
 export declare function validateSourceDirectory(srcDir: string, projectConfig: ProjectConfig): void;
 export declare function validateNoHSMetaMismatch(srcDir: string, projectConfig: ProjectConfig): Promise<void>;
-export declare function handleTranslate(projectDir: string, projectConfig: ProjectConfig, accountId: number, skipValidation: boolean, profile: string | undefined): Promise<unknown>;
+export declare function handleTranslate(projectDir: string, projectConfig: ProjectConfig, accountId: number, skipValidation: boolean, profile: string | undefined): Promise<IntermediateRepresentation | undefined>;
 export {};

package/lib/projects/upload.js

@@ -133,4 +133,5 @@ export async function handleTranslate(projectDir, projectConfig, accountId, skip
         }
         throw e;
     }
+    return undefined;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hubspot/cli",
-    "version": "7.8.11-experimental.0",
+    "version": "7.8.12-experimental.0",
     "description": "The official CLI for developing on HubSpot",
     "license": "Apache-2.0",
     "repository": "https://github.com/HubSpot/hubspot-cli",
@@ -20,6 +20,7 @@
         "express": "4.21.2",
         "findup-sync": "4.0.0",
         "fs-extra": "8.1.0",
+        "ink": "5.2.1",
         "inquirer": "12.7.0",
         "js-yaml": "4.1.0",
         "moment": "2.30.1",
@@ -55,7 +56,6 @@
         "eslint": "^8.56.0",
         "eslint-plugin-import": "^2.31.0",
         "husky": "^4.3.8",
-        "ink": "5.2.1",
         "lint-staged": "^10.5.4",
         "madge": "^8.0.0",
         "mock-stdin": "^1.0.0",

package/types/Yargs.d.ts

@@ -15,7 +15,7 @@ export type AccountArgs = {
     account?: string;
 };
 export type EnvironmentArgs = {
-    'use-env'?: string;
+    'use-env'?: boolean;
 };
 export type OverwriteArgs = Options & {
     o?: boolean;

package/ui/components/BoxWithTitle.d.ts

@@ -0,0 +1,8 @@
+export interface BoxWithTitleProps {
+    title: string;
+    message: string;
+    titleBackgroundColor?: string;
+    borderColor?: string;
+}
+export declare function getBoxWithTitle(props: BoxWithTitleProps): React.ReactNode;
+export declare function BoxWithTitle({ title, message, titleBackgroundColor, borderColor, }: BoxWithTitleProps): React.ReactNode;

package/ui/components/BoxWithTitle.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { CONTAINER_STYLES } from '../styles.js';
+export function getBoxWithTitle(props) {
+    return _jsx(BoxWithTitle, { ...props });
+}
+export function BoxWithTitle({ title, message, titleBackgroundColor, borderColor, }) {
+    return (_jsxs(Box, { ...CONTAINER_STYLES, borderStyle: "round", borderColor: borderColor, children: [_jsx(Box, { position: "absolute", marginTop: -2, paddingX: 0, alignSelf: "flex-start", justifyContent: "center", alignItems: "center", children: _jsx(Text, { backgroundColor: titleBackgroundColor, bold: true, children: ` ${title} ` }) }), _jsx(Box, { justifyContent: "center", alignItems: "center", children: _jsx(Text, { children: message }) })] }));
+}

package/ui/components/HorizontalSelectPrompt.d.ts

@@ -0,0 +1,8 @@
+export interface HorizontalSelectPromptProps {
+    defaultOption?: string;
+    options: string[];
+    onSelect: (value: string) => void;
+    prompt?: string;
+}
+export declare function getHorizontalSelectPrompt(props: HorizontalSelectPromptProps): React.ReactNode;
+export declare function HorizontalSelectPrompt({ defaultOption, options, onSelect, prompt, }: HorizontalSelectPromptProps): React.ReactNode;

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) })] }))] }));
+}