@hubspot/cli 7.7.31-experimental.0 → 7.7.33-experimental.0

package/mcp-server/tools/cms/__tests__/HsListFunctionsTool.test.js

@@ -0,0 +1,120 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { HsListFunctionsTool } from '../HsListFunctionsTool.js';
+import { runCommandInDir } from '../../../utils/project.js';
+import { addFlag } from '../../../utils/command.js';
+vi.mock('@modelcontextprotocol/sdk/server/mcp.js');
+vi.mock('../../../utils/project');
+vi.mock('../../../utils/command');
+vi.mock('../../../utils/toolUsageTracking', () => ({
+    trackToolUsage: vi.fn(),
+}));
+const mockRunCommandInDir = runCommandInDir;
+const mockAddFlag = addFlag;
+describe('HsListFunctionsTool', () => {
+    let mockMcpServer;
+    let tool;
+    let mockRegisteredTool;
+    beforeEach(() => {
+        vi.clearAllMocks();
+        // @ts-expect-error Not mocking the whole server
+        mockMcpServer = {
+            registerTool: vi.fn(),
+        };
+        mockRegisteredTool = {};
+        mockMcpServer.registerTool.mockReturnValue(mockRegisteredTool);
+        tool = new HsListFunctionsTool(mockMcpServer);
+    });
+    describe('register', () => {
+        it('should register the tool with the MCP server', () => {
+            const result = tool.register();
+            expect(mockMcpServer.registerTool).toHaveBeenCalledWith('list-hubspot-cms-serverless-functions', {
+                title: 'List HubSpot CMS Serverless Functions',
+                description: 'Get a list of all serverless functions deployed in a HubSpot portal/account. Shows function routes, HTTP methods, secrets, and timestamps.',
+                inputSchema: expect.any(Object),
+            }, expect.any(Function));
+            expect(result).toBe(mockRegisteredTool);
+        });
+    });
+    describe('handler', () => {
+        it('should execute hs function list command with no parameters', async () => {
+            mockRunCommandInDir.mockResolvedValue({
+                stdout: 'Route | Method | Secrets | Created | Updated\n/api/test | GET | | 2023-01-01 | 2023-01-01',
+                stderr: '',
+            });
+            const result = await tool.handler({
+                absoluteCurrentWorkingDirectory: '/test/dir',
+            });
+            expect(mockRunCommandInDir).toHaveBeenCalledWith('/test/dir', 'hs function list');
+            expect(result.content).toHaveLength(2);
+            expect(result.content[0].text).toContain('Route | Method | Secrets');
+            expect(result.content[1].text).toBe('');
+        });
+        it('should execute hs function list command with json flag', async () => {
+            mockRunCommandInDir.mockResolvedValue({
+                stdout: '[{"route": "/api/test", "method": "GET"}]',
+                stderr: '',
+            });
+            const result = await tool.handler({
+                absoluteCurrentWorkingDirectory: '/test/dir',
+                json: true,
+            });
+            expect(mockRunCommandInDir).toHaveBeenCalledWith('/test/dir', 'hs function list --json');
+            expect(result.content).toHaveLength(2);
+            expect(result.content[0].text).toContain('[{"route": "/api/test"');
+            expect(result.content[1].text).toBe('');
+        });
+        it('should execute hs function list command with account parameter', async () => {
+            mockAddFlag.mockReturnValue('hs function list --account test-account');
+            mockRunCommandInDir.mockResolvedValue({
+                stdout: 'account-specific-functions',
+                stderr: '',
+            });
+            const result = await tool.handler({
+                absoluteCurrentWorkingDirectory: '/test/dir',
+                account: 'test-account',
+            });
+            expect(mockAddFlag).toHaveBeenCalledWith('hs function list', 'account', 'test-account');
+            expect(mockRunCommandInDir).toHaveBeenCalledWith('/test/dir', 'hs function list --account test-account');
+            expect(result.content).toHaveLength(2);
+            expect(result.content[0].text).toContain('account-specific-functions');
+            expect(result.content[1].text).toBe('');
+        });
+        it('should execute hs function list command with both json and account parameters', async () => {
+            mockAddFlag.mockReturnValue('hs function list --json --account test-account');
+            mockRunCommandInDir.mockResolvedValue({
+                stdout: '[{"route": "/api/test"}]',
+                stderr: '',
+            });
+            const result = await tool.handler({
+                absoluteCurrentWorkingDirectory: '/test/dir',
+                json: true,
+                account: 'test-account',
+            });
+            expect(mockAddFlag).toHaveBeenCalledWith('hs function list --json', 'account', 'test-account');
+            expect(mockRunCommandInDir).toHaveBeenCalledWith('/test/dir', 'hs function list --json --account test-account');
+            expect(result.content).toHaveLength(2);
+            expect(result.content[0].text).toContain('[{"route": "/api/test"}]');
+            expect(result.content[1].text).toBe('');
+        });
+        it('should handle command execution errors', async () => {
+            mockRunCommandInDir.mockRejectedValue(new Error('Command failed'));
+            const result = await tool.handler({
+                absoluteCurrentWorkingDirectory: '/test/dir',
+            });
+            expect(result.content).toHaveLength(1);
+            expect(result.content[0].text).toContain('Error executing hs function list command: Command failed');
+        });
+        it('should handle stderr output', async () => {
+            mockRunCommandInDir.mockResolvedValue({
+                stdout: 'Route | Method | Secrets\n/api/test | GET |',
+                stderr: 'Warning: Some warning message',
+            });
+            const result = await tool.handler({
+                absoluteCurrentWorkingDirectory: '/test/dir',
+            });
+            expect(result.content).toHaveLength(2);
+            expect(result.content[0].text).toContain('/api/test | GET');
+            expect(result.content[1].text).toContain('Warning: Some warning message');
+        });
+    });
+});

package/mcp-server/tools/index.js

@@ -9,6 +9,10 @@ import { DocsSearchTool } from './project/DocsSearchTool.js';
 import { DocFetchTool } from './project/DocFetchTool.js';
 import { HsListTool } from './cms/HsListTool.js';
 import { HsCreateModuleTool } from './cms/HsCreateModuleTool.js';
+import { HsCreateTemplateTool } from './cms/HsCreateTemplateTool.js';
+import { HsCreateFunctionTool } from './cms/HsCreateFunctionTool.js';
+import { HsListFunctionsTool } from './cms/HsListFunctionsTool.js';
+import { HsFunctionLogsTool } from './cms/HsFunctionLogsTool.js';
 export function registerProjectTools(mcpServer) {
     return [
         new UploadProjectTools(mcpServer).register(),
@@ -26,5 +30,9 @@ export function registerCmsTools(mcpServer) {
     return [
         new HsListTool(mcpServer).register(),
         new HsCreateModuleTool(mcpServer).register(),
+        new HsCreateTemplateTool(mcpServer).register(),
+        new HsCreateFunctionTool(mcpServer).register(),
+        new HsListFunctionsTool(mcpServer).register(),
+        new HsFunctionLogsTool(mcpServer).register(),
     ];
 }

package/mcp-server/tools/project/AddFeatureToProjectTool.d.ts

@@ -6,19 +6,19 @@ declare const inputSchemaZodObject: z.ZodObject<{
     addApp: z.ZodBoolean;
     distribution: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"marketplace">, z.ZodLiteral<"private">]>>;
     auth: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"static">, z.ZodLiteral<"oauth">]>>;
-    features: z.ZodOptional<z.ZodArray<z.ZodUnion<[z.ZodLiteral<"card">, z.ZodLiteral<"settings">, z.ZodLiteral<"app-function">, z.ZodLiteral<"webhooks">, z.ZodLiteral<"workflow-action">]>, "many">>;
+    features: z.ZodOptional<z.ZodArray<z.ZodUnion<[z.ZodLiteral<"card">, z.ZodLiteral<"settings">, z.ZodLiteral<"app-function">, z.ZodLiteral<"webhooks">, z.ZodLiteral<"workflow-action">, z.ZodLiteral<"workflow-action-tool">, z.ZodLiteral<"app-object">, z.ZodLiteral<"scim">]>, "many">>;
 }, "strip", z.ZodTypeAny, {
     absoluteProjectPath: string;
     addApp: boolean;
     auth?: "oauth" | "static" | undefined;
     distribution?: "marketplace" | "private" | undefined;
-    features?: ("card" | "settings" | "app-function" | "webhooks" | "workflow-action")[] | undefined;
+    features?: ("card" | "settings" | "workflow-action-tool" | "workflow-action" | "app-function" | "webhooks" | "app-object" | "scim")[] | undefined;
 }, {
     absoluteProjectPath: string;
     addApp: boolean;
     auth?: "oauth" | "static" | undefined;
     distribution?: "marketplace" | "private" | undefined;
-    features?: ("card" | "settings" | "app-function" | "webhooks" | "workflow-action")[] | undefined;
+    features?: ("card" | "settings" | "workflow-action-tool" | "workflow-action" | "app-function" | "webhooks" | "app-object" | "scim")[] | undefined;
 }>;
 export type AddFeatureInputSchema = z.infer<typeof inputSchemaZodObject>;
 export declare class AddFeatureToProjectTool extends Tool<AddFeatureInputSchema> {

package/mcp-server/tools/project/CreateProjectTool.d.ts

@@ -8,7 +8,7 @@ declare const inputSchemaZodObject: z.ZodObject<{
     projectBase: z.ZodUnion<[z.ZodLiteral<"empty">, z.ZodLiteral<"app">]>;
     distribution: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"marketplace">, z.ZodLiteral<"private">]>>;
     auth: z.ZodOptional<z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"static">, z.ZodLiteral<"oauth">]>>>;
-    features: z.ZodOptional<z.ZodArray<z.ZodUnion<[z.ZodLiteral<"card">, z.ZodLiteral<"settings">, z.ZodLiteral<"app-function">, z.ZodLiteral<"webhooks">, z.ZodLiteral<"workflow-action">]>, "many">>;
+    features: z.ZodOptional<z.ZodArray<z.ZodUnion<[z.ZodLiteral<"card">, z.ZodLiteral<"settings">, z.ZodLiteral<"app-function">, z.ZodLiteral<"webhooks">, z.ZodLiteral<"workflow-action">, z.ZodLiteral<"workflow-action-tool">, z.ZodLiteral<"app-object">, z.ZodLiteral<"scim">]>, "many">>;
 }, "strip", z.ZodTypeAny, {
     projectBase: "app" | "empty";
     absoluteCurrentWorkingDirectory: string;
@@ -16,7 +16,7 @@ declare const inputSchemaZodObject: z.ZodObject<{
     name?: string | undefined;
     auth?: "oauth" | "static" | undefined;
     distribution?: "marketplace" | "private" | undefined;
-    features?: ("card" | "settings" | "app-function" | "webhooks" | "workflow-action")[] | undefined;
+    features?: ("card" | "settings" | "workflow-action-tool" | "workflow-action" | "app-function" | "webhooks" | "app-object" | "scim")[] | undefined;
 }, {
     projectBase: "app" | "empty";
     absoluteCurrentWorkingDirectory: string;
@@ -24,7 +24,7 @@ declare const inputSchemaZodObject: z.ZodObject<{
     name?: string | undefined;
     auth?: "oauth" | "static" | undefined;
     distribution?: "marketplace" | "private" | undefined;
-    features?: ("card" | "settings" | "app-function" | "webhooks" | "workflow-action")[] | undefined;
+    features?: ("card" | "settings" | "workflow-action-tool" | "workflow-action" | "app-function" | "webhooks" | "app-object" | "scim")[] | undefined;
 }>;
 export type CreateProjectInputSchema = z.infer<typeof inputSchemaZodObject>;
 export declare class CreateProjectTool extends Tool<CreateProjectInputSchema> {

package/mcp-server/tools/project/GetConfigValuesTool.js

@@ -3,7 +3,7 @@ import { z } from 'zod';
 import { formatTextContents } from '../../utils/content.js';
 import { getIntermediateRepresentationSchema, mapToInternalType, } from '@hubspot/project-parsing-lib';
 import { getAccountId, getConfigPath, loadConfig, } from '@hubspot/local-dev-lib/config';
-import { useV3Api } from '../../../lib/projects/buildAndDeploy.js';
+import { useV3Api } from '../../../lib/projects/platformVersion.js';
 const inputSchema = {
     platformVersion: z
         .string()
@@ -43,8 +43,8 @@ export class GetConfigValuesTool extends Tool {
     register() {
         return this.mcpServer.registerTool(toolName, {
             title: 'Fetch the JSON Schema for component',
-            description: `Fetches and returns the JSON schema for the provided feature 'type' found in -hsmeta.json file. 
-        This should be called before editing a '-hsmeta.json' file to get the list of possible values and restrictions on those values.    
+            description: `Fetches and returns the JSON schema for the provided feature 'type' found in -hsmeta.json file.
+        This should be called before editing a '-hsmeta.json' file to get the list of possible values and restrictions on those values.
         This will only work for projects with platformVersion 2025.2 and beyond`,
             inputSchema,
         }, this.handler);

package/mcp-server/tools/project/constants.d.ts

@@ -1,6 +1,6 @@
 import z from 'zod';
 export declare const absoluteProjectPath: z.ZodString;
 export declare const absoluteCurrentWorkingDirectory: z.ZodString;
-export declare const features: z.ZodOptional<z.ZodArray<z.ZodUnion<[z.ZodLiteral<"card">, z.ZodLiteral<"settings">, z.ZodLiteral<"app-function">, z.ZodLiteral<"webhooks">, z.ZodLiteral<"workflow-action">]>, "many">>;
+export declare const features: z.ZodOptional<z.ZodArray<z.ZodUnion<[z.ZodLiteral<"card">, z.ZodLiteral<"settings">, z.ZodLiteral<"app-function">, z.ZodLiteral<"webhooks">, z.ZodLiteral<"workflow-action">, z.ZodLiteral<"workflow-action-tool">, z.ZodLiteral<"app-object">, z.ZodLiteral<"scim">]>, "many">>;
 export declare const docsSearchQuery: z.ZodString;
 export declare const docUrl: z.ZodString;

package/mcp-server/tools/project/constants.js

@@ -6,15 +6,17 @@ export const absoluteCurrentWorkingDirectory = z
     .string()
     .describe('The absolute path to the current working directory.');
 export const features = z
-    .array(z
-    .union([
+    .array(z.union([
     z.literal('card'),
     z.literal('settings'),
     z.literal('app-function'),
     z.literal('webhooks'),
     z.literal('workflow-action'),
-])
-    .describe('The features to include in the project, multiple options can be selected'))
+    z.literal('workflow-action-tool'),
+    z.literal('app-object'),
+    z.literal('scim'),
+]))
+    .describe('The features to include in the project, multiple options can be selected')
     .optional();
 export const docsSearchQuery = z
     .string()

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@hubspot/cli",
-    "version": "7.7.31-experimental.0",
+    "version": "7.7.33-experimental.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.17.0",
-        "@hubspot/project-parsing-lib": "0.8.2",
+        "@hubspot/local-dev-lib": "3.18.0",
+        "@hubspot/project-parsing-lib": "0.8.3",
         "@hubspot/serverless-dev-runtime": "7.0.6",
         "@hubspot/theme-preview-dev-server": "0.0.10",
         "@hubspot/ui-extensions-dev-server": "0.9.8",
@@ -84,6 +84,7 @@
         "mcp-local": "yarn tsx ./scripts/mcp-local.ts",
         "prettier:write": "prettier --write './**/*.{ts,js,json}'",
         "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",

package/types/LocalDev.d.ts

@@ -1,4 +1,4 @@
-import { IntermediateRepresentationNodeLocalDev } from '@hubspot/project-parsing-lib/src/lib/types.js';
+import { HSProfileVariables, IntermediateRepresentationNodeLocalDev } from '@hubspot/project-parsing-lib/src/lib/types.js';
 import { Environment } from '@hubspot/local-dev-lib/types/Config';
 import { ValueOf } from '@hubspot/local-dev-lib/types/Utils';
 import { ProjectConfig } from './Projects.js';
@@ -16,6 +16,7 @@ export type LocalDevStateConstructorOptions = {
     initialProjectNodes: {
         [key: string]: IntermediateRepresentationNodeLocalDev;
     };
+    initialProjectProfileData: HSProfileVariables;
     env: Environment;
 };
 export type LocalDevWebsocketMessage = {

package/types/Projects.d.ts

@@ -10,6 +10,7 @@ export type ComponentTemplate = {
     path: string;
     label: string;
     type: string;
+    cliSelector?: string;
     parentComponent?: string;
     supportedAuthTypes?: string[];
     supportedDistributions?: string[];

package/types/Yargs.d.ts

@@ -15,7 +15,7 @@ export type AccountArgs = {
     account?: string;
 };
 export type EnvironmentArgs = {
-    'use-env'?: boolean;
+    'use-env'?: string;
 };
 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/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/commands/app/__tests__/install.test.js

@@ -1,47 +0,0 @@
-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),
-            }));
-        });
-    });
-});