@hubspot/cli 7.7.35-experimental.0 → 7.8.0-experimental.0

package/mcp-server/tools/project/__tests__/UploadProjectTools.test.js

@@ -21,7 +21,7 @@ describe('mcp-server/tools/project/UploadProjectTools', () => {
     describe('register', () => {
         it('should register tool with correct parameters', () => {
             const result = tool.register();
-            expect(mockMcpServer.registerTool).toHaveBeenCalledWith('upload-project', {
+            expect(mockMcpServer.registerTool).toHaveBeenCalledWith('upload-hubspot-project', {
                 title: 'Upload HubSpot Project',
                 description: expect.stringContaining('Uploads the HubSpot project in current working directory.'),
                 inputSchema: expect.any(Object),

package/mcp-server/tools/project/__tests__/ValidateProjectTool.test.js

@@ -21,7 +21,7 @@ describe('mcp-server/tools/project/ValidateProjectTool', () => {
     describe('register', () => {
         it('should register tool with correct parameters', () => {
             const result = tool.register();
-            expect(mockMcpServer.registerTool).toHaveBeenCalledWith('validate-project', {
+            expect(mockMcpServer.registerTool).toHaveBeenCalledWith('validate-hubspot-project', {
                 title: expect.stringContaining('Validate HubSpot Project'),
                 description: expect.stringContaining('Validates the HubSpot project and its configuration files.'),
                 inputSchema: expect.any(Object),

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">, z.ZodLiteral<"workflow-action-tool">, z.ZodLiteral<"app-object">, z.ZodLiteral<"app-event">, z.ZodLiteral<"scim">, z.ZodLiteral<"page">]>, "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

@@ -9,18 +9,12 @@ export const features = z
     .array(z.union([
     z.literal('card'),
     z.literal('settings'),
-    z
-        .literal('app-function')
-        .describe('Also known as a public serverless function'),
+    z.literal('app-function'),
     z.literal('webhooks'),
-    z
-        .literal('workflow-action')
-        .describe('Also known as a custom workflow action.'),
-    z.literal('workflow-action-tool').describe('Also known as agent tools.'),
+    z.literal('workflow-action'),
+    z.literal('workflow-action-tool'),
     z.literal('app-object'),
-    z.literal('app-event'),
     z.literal('scim'),
-    z.literal('page'),
 ]))
     .describe('The features to include in the project, multiple options can be selected')
     .optional();

package/package.json

@@ -1,16 +1,17 @@
 {
     "name": "@hubspot/cli",
-    "version": "7.7.35-experimental.0",
+    "version": "7.8.0-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.18.0",
-        "@hubspot/project-parsing-lib": "0.8.3",
+        "@hubspot/project-parsing-lib": "0.8.2",
         "@hubspot/serverless-dev-runtime": "7.0.6",
         "@hubspot/theme-preview-dev-server": "0.0.10",
         "@hubspot/ui-extensions-dev-server": "0.9.8",
+        "@inkjs/ui": "^2.0.0",
         "archiver": "7.0.1",
         "boxen": "8.0.1",
         "chalk": "5.4.1",
@@ -18,9 +19,12 @@
         "cli-cursor": "3.1.0",
         "cli-progress": "3.12.0",
         "express": "4.21.2",
+        "figlet": "^1.8.2",
+        "figures": "^6.1.0",
         "findup-sync": "4.0.0",
         "fs-extra": "8.1.0",
         "ink": "5.2.1",
+        "ink-link": "^4.1.0",
         "inquirer": "12.7.0",
         "js-yaml": "4.1.0",
         "moment": "2.30.1",
@@ -39,6 +43,7 @@
         "@types/archiver": "^6.0.3",
         "@types/cli-progress": "^3.11.6",
         "@types/express": "^5.0.0",
+        "@types/figlet": "^1.7.0",
         "@types/findup-sync": "^4.0.5",
         "@types/fs-extra": "^11.0.4",
         "@types/inquirer": "^9.0.8",

package/ui/components/Ascii.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import figlet from 'figlet';
+type AsciiProps = {
+    font?: figlet.Fonts;
+    horizontalLayout?: figlet.KerningMethods;
+    verticalLayout?: figlet.KerningMethods;
+    text?: string;
+};
+export declare function Ascii({ font, horizontalLayout, verticalLayout, text, }: AsciiProps): React.ReactNode;
+export default Ascii;

package/ui/components/Ascii.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import figlet from 'figlet';
+import { Box, Text } from 'ink';
+export function Ascii({ font = 'Slant Relief', horizontalLayout = 'default', verticalLayout = 'default', text = '', }) {
+    return (_jsx(Box, { alignSelf: "center", children: _jsx(Text, { color: "#FF7A59", children: figlet.textSync(text, {
+                font,
+                horizontalLayout,
+                verticalLayout,
+            }) }) }));
+}
+export default Ascii;

package/ui/components/HorizontalSelectPrompt.js

@@ -26,5 +26,5 @@ export function HorizontalSelectPrompt({ defaultOption, options, onSelect, promp
             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" }) })] }));
+    return (_jsxs(Box, { ...CONTAINER_STYLES, flexDirection: "column", marginTop: 1, width: "100%", justifyContent: "flex-start", children: [prompt && (_jsx(Box, { marginBottom: 1, alignSelf: "flex-start", children: _jsx(Text, { children: prompt }) })), _jsx(Box, { flexDirection: "row", justifyContent: "flex-start", 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: "flex-start", justifyContent: "flex-start", children: _jsx(Text, { dimColor: true, children: "Use arrow keys to navigate, Enter to select" }) })] }));
 }

package/ui/views/GetStarted.d.ts

@@ -0,0 +1,7 @@
+import { ArgumentsCamelCase } from 'yargs';
+import { GetStartedArgs } from '../../commands/getStarted.js';
+export type GetStartedProps = {
+    args: ArgumentsCamelCase<GetStartedArgs>;
+};
+export declare function getGetStarted(props: GetStartedProps): React.ReactNode;
+export declare function GetStarted({ args }: GetStartedProps): React.ReactNode;

package/ui/views/GetStarted.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import fs from 'fs-extra';
+import { useTerminalSize } from '../lib/useTerminalSize.js';
+import { uiAccountDescription } from '../../lib/ui/index.js';
+import { Box, Text } from 'ink';
+import figures from 'figures';
+import { AlertBox, InfoBox, } from '../components/StatusMessageBoxes.js';
+import { commands } from '../../lang/en.js';
+import Ascii from '../components/Ascii.js';
+import { HorizontalSelectPrompt } from '../components/HorizontalSelectPrompt.js';
+import { INK_COLORS } from '../styles.js';
+import { TextInput, Spinner, ConfirmInput, ThemeProvider, extendTheme, defaultTheme, Badge, } from '@inkjs/ui';
+import { getCwd } from '@hubspot/local-dev-lib/path';
+import path from 'path';
+import { cloneGithubRepo } from '@hubspot/local-dev-lib/github';
+import { HUBSPOT_PROJECT_COMPONENTS_GITHUB_PATH, PROJECT_CONFIG_FILE, } from '../../lib/constants.js';
+import { getProjectConfig, validateProjectConfig, writeProjectConfig, } from '../../lib/projects/config.js';
+import { getProjectPackageJsonLocations, installPackages, } from '../../lib/dependencyManagement.js';
+import { handleProjectUpload } from '../../lib/projects/upload.js';
+import { useV3Api } from '../../lib/projects/platformVersion.js';
+import { pollProjectBuildAndDeploy } from '../../lib/projects/pollProjectBuildAndDeploy.js';
+import { getProjectBuildDetailUrl, getProjectDeployDetailUrl, } from '../../lib/projects/urls.js';
+import { BoxWithTitle } from '../components/BoxWithTitle.js';
+export function getGetStarted(props) {
+    return _jsx(GetStarted, { ...props });
+}
+const customTheme = extendTheme(defaultTheme, {
+    components: {
+        Spinner: {
+            styles: {
+                frame: () => ({
+                    color: '#FF7A59',
+                }),
+            },
+        },
+    },
+});
+export function GetStarted({ args }) {
+    const { derivedAccountId } = args;
+    const toolTips = [
+        'Run hs doctor to diagnose common cli installation problems',
+        'Use hs project add to quickly add new features to your project',
+        'Unified apps are coming to the cli soon',
+        'Use hs test-account create to create and seed test accounts',
+    ];
+    const accountName = uiAccountDescription(derivedAccountId);
+    const { columns, rows } = useTerminalSize();
+    const templateSource = 'robrown-hubspot/hubspot-project-components-ua-app-objects-beta';
+    const projectTemplate = {
+        name: 'private-app-get-started-template',
+        label: 'CRM getting started project with private apps',
+        path: 'projects/private-app-get-started-template',
+    };
+    const repo = templateSource || HUBSPOT_PROJECT_COMPONENTS_GITHUB_PATH;
+    const cloneRepo = async () => {
+        await cloneGithubRepo(repo, projectSource, {
+            sourceDir: projectTemplate.path,
+            tag: undefined,
+            hideLogs: true,
+        });
+        setIsCloned(true);
+    };
+    const [projectType, setProjectType] = useState('');
+    const [showProjectTypeError, setShowProjectTypeError] = useState(false);
+    const [projectName, setProjectName] = useState('');
+    const [projectSource, setProjectSource] = useState('');
+    const [isCloned, setIsCloned] = useState(false);
+    const [isConfigUpdated, setIsConfigUpdated] = useState(false);
+    const [areDepsInstalled, setAreDepsInstalled] = useState(false);
+    const [isUploading, setIsUploading] = useState(null);
+    const [isUploaded, setIsUploaded] = useState(false);
+    const [projectPollResult, setProjectPollResult] = useState(null);
+    useEffect(() => {
+        if (projectType === 'CMS') {
+            setShowProjectTypeError(true);
+        }
+        else {
+            setShowProjectTypeError(false);
+        }
+    }, [projectType]);
+    const updateProjectConfig = () => {
+        const projectConfigPath = path.join(projectSource, PROJECT_CONFIG_FILE);
+        const parsedConfigFile = JSON.parse(fs.readFileSync(projectConfigPath).toString());
+        writeProjectConfig(projectConfigPath, {
+            ...parsedConfigFile,
+            name: projectName,
+        });
+        setIsConfigUpdated(true);
+    };
+    const installDeps = async () => {
+        const installLocations = await getProjectPackageJsonLocations(projectSource);
+        await installPackages({
+            installLocations: installLocations,
+        });
+        setAreDepsInstalled(true);
+    };
+    useEffect(() => {
+        if (projectSource && !isCloned) {
+            setTimeout(() => {
+                cloneRepo();
+            }, 500);
+        }
+        if (projectSource && isCloned) {
+            setTimeout(() => {
+                updateProjectConfig();
+            }, 500);
+        }
+    }, [projectSource, isCloned]);
+    useEffect(() => {
+        if (isConfigUpdated && !areDepsInstalled) {
+            setTimeout(() => {
+                installDeps();
+            }, 500);
+        }
+    }, [isConfigUpdated]);
+    const uploadProject = async () => {
+        const { projectConfig: newProjectConfig, projectDir: newProjectDir } = await getProjectConfig(projectSource);
+        validateProjectConfig(newProjectConfig, newProjectDir);
+        const { result, uploadError } = await handleProjectUpload({
+            accountId: derivedAccountId,
+            projectConfig: newProjectConfig,
+            projectDir: newProjectDir,
+            callbackFunc: pollProjectBuildAndDeploy,
+            uploadMessage: 'Initial upload from get-started command',
+            forceCreate: true, // Auto-create project on HubSpot
+            isUploadCommand: false,
+            sendIR: useV3Api(newProjectConfig.platformVersion),
+            skipValidation: false,
+        });
+        if (result) {
+            setIsUploaded(true);
+            setProjectPollResult(result);
+        }
+    };
+    const [toolTipIndex, setToolTipIndex] = useState(0);
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setToolTipIndex(prevIndex => (prevIndex + 1) % toolTips.length);
+        }, 5000);
+        return () => clearInterval(interval);
+    }, []);
+    useEffect(() => {
+        if (isUploading === true) {
+            setTimeout(() => {
+                uploadProject();
+            }, 500);
+        }
+    }, [isUploading]);
+    return (_jsx(ThemeProvider, { theme: customTheme, children: _jsxs(Box, { flexDirection: "column", width: columns, height: rows, children: [_jsx(Ascii, { text: "HubSpot CLI", font: "Standard" }), _jsx(InfoBox, { title: commands.getStarted.startTitle, message: commands.getStarted.startDescription +
+                        '\n' +
+                        commands.getStarted.guideOverview(accountName) }), projectType !== 'App' && (_jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsx(HorizontalSelectPrompt, { prompt: commands.getStarted.prompts.selectOption, options: ['App', 'CMS'], onSelect: setProjectType, defaultOption: 'App' }), showProjectTypeError && (_jsx(AlertBox, { title: "Bad Choice", message: "I didn't hook up the CMS flow for this demo" }))] })), projectType === 'App' && (_jsx(_Fragment, { children: _jsxs(Box, { flexDirection: "column", padding: 1, gap: 1, borderStyle: "round", borderColor: "#FF7A59", children: [_jsxs(Box, { flexDirection: "row", width: "100%", gap: 1, children: [_jsxs(Box, { flexDirection: "row", flexBasis: "50%", gap: 1, children: [_jsx(Text, { color: "#FF7A59", children: "Project Name:" }), projectName === '' ? (_jsx(TextInput, { placeholder: "give your project a name", onSubmit: setProjectName })) : (_jsx(Text, { children: projectName }))] }), _jsxs(Box, { flexDirection: "row", flexBasis: "50%", gap: 1, children: [_jsx(Text, { color: "#FF7A59", children: "Project Source:" }), projectSource === '' && projectName !== '' ? (_jsx(TextInput, { defaultValue: path.resolve(getCwd(), projectName), placeholder: path.resolve(getCwd(), projectName), onSubmit: setProjectSource })) : (_jsx(Text, { children: projectSource }))] })] }), projectSource && (_jsx(Box, { flexDirection: "row", width: "100%", gap: 1, children: isCloned ? (_jsxs(Text, { color: INK_COLORS.SUCCESS_GREEN, children: [figures.tick, " Project downloaded"] })) : (_jsx(Spinner, { type: "dots", label: "Downloading project" })) })), projectSource && isCloned && (_jsx(Box, { flexDirection: "row", width: "100%", gap: 1, children: isConfigUpdated ? (_jsxs(Text, { color: INK_COLORS.SUCCESS_GREEN, children: [figures.tick, " Project config updated"] })) : (_jsx(Spinner, { type: "dots", label: "Updating project config" })) })), isConfigUpdated && (_jsxs(Box, { flexDirection: "column", width: "100%", gap: 0, children: [_jsxs(Box, { flexDirection: "row", width: "100%", gap: 1, children: [_jsx(Badge, { color: INK_COLORS.SUCCESS_GREEN, children: "Success" }), _jsx(Text, { children: commands.project.create.logs.success(projectName, projectSource) })] }), _jsx(Text, { children: commands.getStarted.prompts.projectCreated.title }), _jsx(Text, { children: commands.getStarted.prompts.projectCreated.description })] })), isConfigUpdated && (_jsx(Box, { flexDirection: "row", width: "100%", gap: 1, children: areDepsInstalled ? (_jsxs(Text, { color: INK_COLORS.SUCCESS_GREEN, children: [figures.tick, " Project dependencies installed"] })) : (_jsx(Spinner, { type: "dots", label: "Installing project dependencies" })) })), areDepsInstalled && isUploading === null && (_jsxs(Box, { flexDirection: "row", width: "100%", gap: 1, children: [_jsx(Text, { color: INK_COLORS.WARNING_YELLOW, children: "Would you like to upload your project to HubSpot?" }), isUploading === null ? (_jsx(ConfirmInput, { onConfirm: () => {
+                                            setIsUploading(true);
+                                        }, onCancel: () => {
+                                            setIsUploading(false);
+                                        } })) : (_jsx(Text, { color: INK_COLORS.SUCCESS_GREEN, children: isUploading }))] })), isUploading === true && (_jsx(Box, { flexDirection: "row", width: "100%", gap: 1, children: isUploaded ? (_jsxs(Text, { color: INK_COLORS.SUCCESS_GREEN, children: [figures.tick, " Project uploaded, built, and deployed"] })) : (_jsx(Spinner, { type: "dots", label: "Uploading, building, and deploying project" })) })), projectPollResult && (_jsxs(Box, { flexDirection: "column", width: "100%", gap: 1, children: [_jsxs(Box, { flexDirection: "row", alignSelf: "center", width: "100%", gap: 1, children: [_jsx(Text, { color: "#FF7A59", children: "View build in HubSpot:" }), _jsx(Text, { color: INK_COLORS.INFO_BLUE, children: getProjectBuildDetailUrl(projectName, projectPollResult.buildId, derivedAccountId) })] }), _jsxs(Box, { flexDirection: "row", alignSelf: "center", width: "100%", gap: 1, children: [_jsx(Text, { color: "#FF7A59", children: "View deploy in HubSpot:" }), _jsx(Text, { color: INK_COLORS.INFO_BLUE, children: getProjectDeployDetailUrl(projectName, projectPollResult.deployResult?.deployId || 0, derivedAccountId) })] })] }))] }) })), _jsx(BoxWithTitle, { title: "Tips", message: toolTips[toolTipIndex], borderColor: "gray" })] }) }));
+}