@hubspot/cli 7.7.0-experimental.2 → 7.7.0

package/package.json

@@ -1,35 +1,36 @@
 {
     "name": "@hubspot/cli",
-    "version": "7.7.0-experimental.2",
+    "version": "7.7.0",
     "description": "The official CLI for developing on HubSpot",
     "license": "Apache-2.0",
     "repository": "https://github.com/HubSpot/hubspot-cli",
+    "type": "module",
     "dependencies": {
-        "@hubspot/local-dev-lib": "3.7.0",
-        "@hubspot/project-parsing-lib": "0.2.0",
-        "@hubspot/serverless-dev-runtime": "7.0.2",
+        "@hubspot/local-dev-lib": "3.19.1",
+        "@hubspot/project-parsing-lib": "0.9.0",
+        "@hubspot/serverless-dev-runtime": "7.0.6",
         "@hubspot/theme-preview-dev-server": "0.0.10",
-        "@hubspot/ui-extensions-dev-server": "0.8.52",
-        "@modelcontextprotocol/sdk": "^1.12.1",
+        "@hubspot/ui-extensions-dev-server": "0.10.0",
         "archiver": "7.0.1",
         "boxen": "8.0.1",
-        "chalk": "4.1.2",
+        "chalk": "5.4.1",
         "chokidar": "3.6.0",
         "cli-cursor": "3.1.0",
         "cli-progress": "3.12.0",
         "express": "4.21.2",
         "findup-sync": "4.0.0",
         "fs-extra": "8.1.0",
-        "inquirer": "8.2.0",
+        "ink": "5.2.1",
+        "inquirer": "12.7.0",
         "js-yaml": "4.1.0",
-        "mcp-framework": "^0.2.2",
         "moment": "2.30.1",
         "open": "7.4.2",
-        "p-queue": "6.6.2",
-        "strip-ansi": "5.2.0",
+        "p-queue": "8.1.0",
+        "react": "^18.0.0",
+        "strip-ansi": "7.1.0",
         "table": "6.9.0",
         "tmp": "0.2.3",
-        "update-notifier": "5.1.0",
+        "update-notifier": "7.3.1",
         "ws": "^8.18.2",
         "yargs": "17.7.2",
         "yargs-parser": "21.1.1"
@@ -40,52 +41,61 @@
         "@types/express": "^5.0.0",
         "@types/findup-sync": "^4.0.5",
         "@types/fs-extra": "^11.0.4",
-        "@types/jest": "^29.5.14",
+        "@types/inquirer": "^9.0.8",
         "@types/js-yaml": "^4.0.9",
+        "@types/node": "^24.1.0",
+        "@types/react": "^18.3.12",
         "@types/semver": "^7.5.8",
         "@types/tmp": "^0.2.6",
+        "@types/update-notifier": "^6.0.8",
         "@types/ws": "^8.18.1",
         "@types/yargs": "^17.0.33",
         "@typescript-eslint/eslint-plugin": "^8.30.1",
         "@typescript-eslint/parser": "^8.11.0",
-        "axios": "^1.7.2",
+        "axios": "^1.7.4",
         "eslint": "^8.56.0",
         "eslint-plugin-import": "^2.31.0",
         "husky": "^4.3.8",
-        "jest": "^29.5.0",
         "lint-staged": "^10.5.4",
         "madge": "^8.0.0",
         "mock-stdin": "^1.0.0",
         "prettier": "^3.4.2",
         "semver": "^7.6.3",
-        "ts-jest": "^29.2.5",
         "ts-node": "^10.9.2",
-        "typescript": "^5.6.2"
+        "tsx": "^4.20.3",
+        "typescript": "^5.6.2",
+        "vitest": "^2.1.9"
     },
     "optionalDependencies": {
-        "@hubspot/cms-dev-server": "^1.0.9"
+        "@hubspot/cms-dev-server": "^1.0.9",
+        "@modelcontextprotocol/sdk": "1.13.3"
     },
     "scripts": {
-        "build": "ts-node ./scripts/build.ts",
+        "build": "tsx ./scripts/build.ts",
+        "build-docker": "docker image build --tag hs-cli-image . && docker image prune -f",
+        "circular-deps": "yarn madge --circular .",
+        "debug-mcp": "yarn build && npx @modelcontextprotocol/inspector node dist/mcp-server/server.js",
+        "hs": "yarn build && node ./dist/bin/hs",
+        "hs-debug": "yarn build && NODE_DEBUG=http* node --inspect-brk ./dist/bin/hs",
         "lint": "echo 'Linting is disabled for Blazar'",
-        "lint:local": "eslint . && prettier --list-different './**/*.{ts,js,json}'",
-        "list-all-commands": "yarn ts-node ./scripts/get-all-commands.ts",
-        "local-link": "yarn ts-node ./scripts/linking.ts",
+        "lint:local": "eslint . && prettier --list-different './**/*.{ts,tsx,js,json}'",
+        "list-all-commands": "yarn tsx ./scripts/get-all-commands.ts",
+        "local-link": "yarn tsx ./scripts/linking.ts",
+        "mcp-local": "yarn tsx ./scripts/mcp-local.ts",
         "prettier:write": "prettier --write './**/*.{ts,js,json}'",
-        "test": "node --experimental-vm-modules ./node_modules/jest/bin/jest.js",
+        "release": "yarn tsx ./scripts/release.ts release",
+        "view-ui": "yarn build && yarn tsx ./scripts/view-ui.ts",
+        "test": "vitest run",
+        "test-dev": "vitest",
         "test-cli": "yarn build && yarn --cwd 'acceptance-tests' test-ci",
         "test-cli-debug": "yarn build && yarn --cwd 'acceptance-tests' test-debug",
-        "test-cli-qa": "yarn build && yarn --cwd 'acceptance-tests' test-qa",
         "test-cli-latest": "yarn build && yarn build-docker && docker container run -it --rm --name=hs-cli-container hs-cli-image yarn --cwd 'acceptance-tests' test-latest",
-        "build-docker": "docker image build --tag hs-cli-image . && docker image prune -f",
-        "circular-deps": "yarn madge --circular .",
-        "release": "yarn ts-node ./scripts/release.ts release",
-        "hs": "yarn build && node ./dist/bin/hs",
-        "hs-debug": "yarn build && NODE_DEBUG=http* node --inspect-brk ./dist/bin/hs",
-        "update-ldl": "yarn add --exact @hubspot/local-dev-lib@latest"
+        "test-cli-qa": "yarn build && yarn --cwd 'acceptance-tests' test-qa",
+        "update-ldl": "yarn add --exact @hubspot/local-dev-lib@latest",
+        "view-unreleased-changes": "node ./scripts/unreleasedChanges.js"
     },
     "lint-staged": {
-        "**/*.{js,ts,scss,css}": [
+        "**/*.{js,ts,tsx,scss,css}": [
             "prettier -l",
             "eslint"
         ]
@@ -100,8 +110,7 @@
     },
     "bin": {
         "hs": "./bin/hs",
-        "hscms": "./bin/hscms",
-        "hsmcp": "./bin/hsmcp.js"
+        "hscms": "./bin/hscms"
     },
     "publishConfig": {
         "access": "public",

package/types/Cms.d.ts

@@ -1,10 +1,26 @@
-import { CommonArgs, ConfigArgs } from './Yargs';
+import { CommonArgs, ConfigArgs } from './Yargs.js';
+export declare const TEMPLATE_TYPES: readonly ["page-template", "email-template", "partial", "global-partial", "blog-listing-template", "blog-post-template", "search-template", "section"];
+export type TemplateType = (typeof TEMPLATE_TYPES)[number];
+export declare const HTTP_METHODS: readonly ["DELETE", "GET", "PATCH", "POST", "PUT"];
+export type HttpMethod = (typeof HTTP_METHODS)[number];
+export declare const CONTENT_TYPES: readonly ["ANY", "LANDING_PAGE", "SITE_PAGE", "BLOG_POST", "BLOG_LISTING", "EMAIL", "KNOWLEDGE_BASE", "QUOTE_TEMPLATE", "CUSTOMER_PORTAL", "WEB_INTERACTIVE", "SUBSCRIPTION", "MEMBERSHIP"];
+export type ContentType = (typeof CONTENT_TYPES)[number];
 export type CreateArgs = CommonArgs & ConfigArgs & {
     branch?: string;
     type: string;
     dest: string;
     name: string;
     internal?: boolean;
+    templateType?: TemplateType;
+    moduleLabel?: string;
+    reactType?: boolean;
+    contentTypes?: string;
+    global?: boolean;
+    availableForNewContent?: boolean;
+    functionsFolder?: string;
+    filename?: string;
+    endpointMethod?: HttpMethod;
+    endpointPath?: string;
 };
 export type CmsAssetOperationArgs = {
     assetType: string;

package/types/Cms.js

@@ -1,2 +1,25 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export const TEMPLATE_TYPES = [
+    'page-template',
+    'email-template',
+    'partial',
+    'global-partial',
+    'blog-listing-template',
+    'blog-post-template',
+    'search-template',
+    'section',
+];
+export const HTTP_METHODS = ['DELETE', 'GET', 'PATCH', 'POST', 'PUT'];
+export const CONTENT_TYPES = [
+    'ANY',
+    'LANDING_PAGE',
+    'SITE_PAGE',
+    'BLOG_POST',
+    'BLOG_LISTING',
+    'EMAIL',
+    'KNOWLEDGE_BASE',
+    'QUOTE_TEMPLATE',
+    'CUSTOMER_PORTAL',
+    'WEB_INTERACTIVE',
+    'SUBSCRIPTION',
+    'MEMBERSHIP',
+];

package/types/LocalDev.d.ts

@@ -1,24 +1,50 @@
-import { IntermediateRepresentationNodeLocalDev } from '@hubspot/project-parsing-lib/src/lib/types';
-import { Build } from '@hubspot/local-dev-lib/types/Build';
+import { HSProfileVariables, IntermediateRepresentationNodeLocalDev } from '@hubspot/project-parsing-lib/src/lib/types.js';
 import { Environment } from '@hubspot/local-dev-lib/types/Config';
-import { ProjectConfig } from './Projects';
-import LocalDevState from '../lib/projects/localDev/LocalDevState';
+import { ValueOf } from '@hubspot/local-dev-lib/types/Utils';
+import { Project } from '@hubspot/local-dev-lib/types/Project';
+import { ProjectConfig } from './Projects.js';
+import LocalDevState from '../lib/projects/localDev/LocalDevState.js';
+import { APP_INSTALLATION_STATES, LOCAL_DEV_UI_MESSAGE_RECEIVE_TYPES, LOCAL_DEV_SERVER_MESSAGE_TYPES } from '../lib/constants.js';
 export type LocalDevStateConstructorOptions = {
     targetProjectAccountId: number;
     targetTestingAccountId: number;
+    profile?: string;
     projectConfig: ProjectConfig;
     projectDir: string;
-    projectId: number;
+    projectData: Project;
     debug?: boolean;
-    deployedBuild?: Build;
-    isGithubLinked: boolean;
     initialProjectNodes: {
         [key: string]: IntermediateRepresentationNodeLocalDev;
     };
+    initialProjectProfileData: HSProfileVariables;
     env: Environment;
 };
 export type LocalDevWebsocketMessage = {
     type: string;
-    data: unknown;
+    data?: unknown;
+};
+export type LocalDevDeployWebsocketMessage = {
+    type: typeof LOCAL_DEV_UI_MESSAGE_RECEIVE_TYPES.DEPLOY;
+    data: {
+        force: boolean;
+    };
 };
 export type LocalDevStateListener<K extends keyof LocalDevState> = (value: LocalDevState[K]) => void;
+export type AppLocalDevData = {
+    id: number;
+    clientId: string;
+    name: string;
+    installationState: ValueOf<typeof APP_INSTALLATION_STATES>;
+    scopeGroupIds: number[];
+};
+export type LocalDevServerMessage = ValueOf<typeof LOCAL_DEV_SERVER_MESSAGE_TYPES>;
+export type LocalDevProjectUploadResult = {
+    uploadSuccess: boolean;
+    buildSuccess: boolean;
+    deploySuccess?: boolean;
+    deployId?: number;
+};
+export type LocalDevProjectDeployResult = {
+    success: boolean;
+    deployId?: number;
+};

package/types/LocalDev.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/types/ProjectComponents.d.ts

@@ -1,5 +1,5 @@
-import { IntermediateRepresentationNodeLocalDev } from '@hubspot/project-parsing-lib/src/lib/types';
-import { IR_COMPONENT_TYPES, APP_DISTRIBUTION_TYPES, APP_AUTH_TYPES } from '../lib/constants';
+import { IntermediateRepresentationNodeLocalDev } from '@hubspot/project-parsing-lib/src/lib/types.js';
+import { IR_COMPONENT_TYPES, APP_DISTRIBUTION_TYPES, APP_AUTH_TYPES } from '../lib/constants.js';
 import { ValueOf } from '@hubspot/local-dev-lib/types/Utils';
 type AppDistributionType = ValueOf<typeof APP_DISTRIBUTION_TYPES>;
 type AppAuthType = ValueOf<typeof APP_AUTH_TYPES>;

package/types/ProjectComponents.js

@@ -1,3 +1,2 @@
-"use strict";
 // These types are for Unified Apps and projects on platform version 2025.1 and above
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/types/Projects.d.ts

@@ -1,15 +1,24 @@
 import { Build, SubbuildStatus } from '@hubspot/local-dev-lib/types/Build';
 import { Deploy, SubdeployStatus } from '@hubspot/local-dev-lib/types/Deploy';
+import { appComponent, marketplaceDistribution, oAuth, privateDistribution, staticAuth } from '../lib/constants.js';
 export type ProjectTemplate = {
     name: string;
     label: string;
     path: string;
-    insertPath: string;
 };
 export type ComponentTemplate = {
     path: string;
     label: string;
-    insertPath: string;
+    type: string;
+    cliSelector?: string;
+    parentComponent?: string;
+    supportedAuthTypes?: string[];
+    supportedDistributions?: string[];
+};
+export type ComponentTemplateChoice = {
+    name: string;
+    value: ComponentTemplate;
+    disabled?: string | boolean;
 };
 export type ProjectConfig = {
     name: string;
@@ -32,9 +41,18 @@ export type ProjectPollStatusFunctionText = {
     TYPE_KEY: string;
     SUBTASK_NAME_KEY: string;
 };
+export type ParentComponent = {
+    label: string;
+    type: typeof appComponent;
+    authType: typeof staticAuth | typeof oAuth;
+    distribution: typeof privateDistribution | typeof marketplaceDistribution;
+    path: string;
+};
 export type ProjectTemplateRepoConfig = {
     projects?: ProjectTemplate[];
     components?: ComponentTemplate[];
+    defaultFiles?: string;
+    parentComponents?: ParentComponent[];
 };
 export type ProjectPollResult = {
     succeeded: boolean;

package/types/Projects.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentTypes = void 0;
-var ComponentTypes;
+export var ComponentTypes;
 (function (ComponentTypes) {
     ComponentTypes["PrivateApp"] = "private-app";
     ComponentTypes["PublicApp"] = "public-app";
     ComponentTypes["HublTheme"] = "hubl-theme";
-})(ComponentTypes || (exports.ComponentTypes = ComponentTypes = {}));
+})(ComponentTypes || (ComponentTypes = {}));

package/types/Prompts.d.ts

@@ -1,3 +1,4 @@
+import { Separator } from '@inquirer/prompts';
 export type GenericPromptResponse = {
     [key: string]: any;
 };
@@ -6,9 +7,10 @@ export type PromptChoices<T = any> = Array<string | {
     name: string;
     value?: T;
     disabled?: string | boolean;
-}>;
+    checked?: boolean;
+} | Separator>;
 export type PromptWhen = boolean | (() => boolean);
-type PromptOperand = string | number | boolean | string[] | boolean[] | null;
+export type PromptOperand = string | number | boolean | string[] | boolean[] | null;
 export type PromptConfig<T extends GenericPromptResponse> = {
     name: keyof T;
     type?: PromptType;
@@ -21,5 +23,6 @@ export type PromptConfig<T extends GenericPromptResponse> = {
     validate?: (answer?: any) => PromptOperand | Promise<PromptOperand>;
     mask?: string;
     filter?: (input: string) => string;
+    loop?: boolean;
 };
 export {};

package/types/Prompts.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/types/Sandboxes.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/types/Yargs.d.ts

@@ -2,7 +2,7 @@ import { Options, CommandModule, Argv } from 'yargs';
 import { CmsPublishMode } from '@hubspot/local-dev-lib/types/Files';
 export type CommonArgs = {
     derivedAccountId: number;
-    providedAccountId?: number;
+    userProvidedAccount?: string;
     d: boolean;
     debug: boolean;
 };
@@ -24,8 +24,14 @@ export type OverwriteArgs = Options & {
 export type StringArgType = Options & {
     type: 'string';
 };
+export type JSONOutputArgs = Options & {
+    json?: boolean;
+    formatOutputAsJson?: boolean;
+};
 export type ProjectDevArgs = CommonArgs & ConfigArgs & EnvironmentArgs & {
     profile?: string;
+    testingAccount?: string | number;
+    projectAccount?: string | number;
 };
 export type TestingArgs = {
     qa?: boolean;

package/types/Yargs.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

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