@hubspot/cli 8.0.2-experimental.0 → 8.0.3-experimental.1

package/ui/components/GetStartedFlow.js

@@ -1,128 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { sanitizeFileName, untildify } from '@hubspot/local-dev-lib/path';
-import { Box, Text, useApp, useFocus, useInput } from 'ink';
-import { useCallback, useEffect, useState } from 'react';
-import { commands } from '../../lang/en.js';
-import { GET_STARTED_OPTIONS } from '../../lib/constants.js';
-import { uiAccountDescription } from '../../lib/ui/index.js';
-import { ActionSection } from '../components/ActionSection.js';
-import { BoxWithTitle } from '../components/BoxWithTitle.js';
-import { InputField } from '../components/InputField.js';
-import { SelectInput } from '../components/SelectInput.js';
-import { ACTION_STATUSES } from '../constants.js';
-import { INK_COLORS } from '../styles.js';
-export const DEFAULT_PROJECT_NAME = 'get-started-project';
-export const GET_STARTED_FLOW_OPTIONS = [
-    {
-        label: commands.getStarted.prompts.options.app,
-        value: GET_STARTED_OPTIONS.APP,
-    },
-    {
-        label: commands.getStarted.prompts.options.cmsTheme,
-        value: 'CMS_THEME',
-        disabled: true,
-    },
-    {
-        label: commands.getStarted.prompts.options.cmsReactModule,
-        value: 'CMS_REACT_MODULE',
-        disabled: true,
-    },
-];
-export const FLOW_STEPS = {
-    SELECT: 'select',
-    NAME_INPUT: 'name-input',
-    DEST_INPUT: 'dest-input',
-    CREATING: 'creating',
-    COMPLETE: 'complete',
-};
-export function getGetStartedFlow(props) {
-    return _jsx(GetStartedFlow, { ...props });
-}
-export function GetStartedFlow({ derivedAccountId, onRunCreateProject, initialName, initialDest, }) {
-    useFocus({ autoFocus: true });
-    const { exit } = useApp();
-    const accountName = uiAccountDescription(derivedAccountId);
-    // Determine initial step based on what was provided via CLI
-    const getInitialStep = () => {
-        if (initialName && initialDest) {
-            return FLOW_STEPS.CREATING;
-        }
-        else if (initialName) {
-            return FLOW_STEPS.DEST_INPUT;
-        }
-        else if (initialDest) {
-            return FLOW_STEPS.NAME_INPUT;
-        }
-        return FLOW_STEPS.SELECT;
-    };
-    const hasInitialValues = Boolean(initialName && initialDest);
-    const [step, setStep] = useState(getInitialStep());
-    const [selectedLabel, setSelectedLabel] = useState(initialName ? commands.getStarted.prompts.options.app : '');
-    const [projectName, setProjectName] = useState(initialName || DEFAULT_PROJECT_NAME);
-    const [projectDest, setProjectDest] = useState(initialDest
-        ? untildify(initialDest)
-        : sanitizeFileName(DEFAULT_PROJECT_NAME));
-    const [createStatus, setCreateStatus] = useState(initialName ? ACTION_STATUSES.RUNNING : ACTION_STATUSES.IDLE);
-    const [createError, setCreateError] = useState('');
-    // Only auto-update dest from name if dest wasn't provided via CLI
-    useEffect(() => {
-        if (!initialDest) {
-            setProjectDest(sanitizeFileName(projectName));
-        }
-    }, [projectName, initialDest]);
-    const handleSelect = useCallback((item) => {
-        if (item.disabled)
-            return;
-        setSelectedLabel(item.label);
-        setStep(FLOW_STEPS.NAME_INPUT);
-        setCreateStatus(ACTION_STATUSES.RUNNING);
-    }, []);
-    const handleNameSubmit = useCallback(() => {
-        setStep(FLOW_STEPS.DEST_INPUT);
-    }, []);
-    const handleDestChange = useCallback((value) => {
-        setProjectDest(value);
-        if (createError) {
-            setCreateError('');
-        }
-    }, [createError]);
-    const handleDestSubmit = useCallback(async () => {
-        setStep(FLOW_STEPS.CREATING);
-        setCreateError('');
-        setCreateStatus(ACTION_STATUSES.RUNNING);
-        try {
-            await onRunCreateProject({
-                projectName,
-                projectDest,
-            });
-            setCreateStatus(ACTION_STATUSES.DONE);
-            setStep(FLOW_STEPS.COMPLETE);
-        }
-        catch (error) {
-            const errorMessage = error instanceof Error
-                ? error.message
-                : commands.getStarted.v2.unknownError;
-            setCreateStatus(ACTION_STATUSES.ERROR);
-            setCreateError(errorMessage);
-            setStep(FLOW_STEPS.DEST_INPUT);
-        }
-    }, [onRunCreateProject, projectName, projectDest]);
-    // Auto-start project creation when initial values are provided
-    useEffect(() => {
-        if (hasInitialValues && step === FLOW_STEPS.CREATING) {
-            setCreateStatus(ACTION_STATUSES.RUNNING);
-            handleDestSubmit();
-        }
-    }, [hasInitialValues, step, handleDestSubmit]);
-    useInput((_, key) => {
-        if (step === FLOW_STEPS.COMPLETE && key.return) {
-            exit();
-        }
-    });
-    const titleText = commands.getStarted.v2.startTitle;
-    const overviewText = commands.getStarted.v2.guideOverview(accountName);
-    const projectsText = commands.getStarted.v2.projects;
-    const selectPrompt = commands.getStarted.v2.prompts.selectOptionV2;
-    const runningProjectCreateText = commands.getStarted.v2.runningProjectCreate;
-    return (_jsx(BoxWithTitle, { flexGrow: 1, title: "hs get-started", borderColor: INK_COLORS.HUBSPOT_ORANGE, titleBackgroundColor: INK_COLORS.HUBSPOT_ORANGE, children: _jsxs(Box, { flexDirection: "column", rowGap: 1, children: [_jsx(Text, { bold: true, children: titleText }), step === FLOW_STEPS.SELECT ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: overviewText }), _jsx(Text, { children: projectsText }), _jsxs(Box, { flexDirection: "row", flexWrap: "wrap", columnGap: 1, children: [_jsx(Text, { color: INK_COLORS.HUBSPOT_TEAL, children: "?" }), _jsx(Text, { children: selectPrompt })] }), _jsx(SelectInput, { items: GET_STARTED_FLOW_OPTIONS, onSelect: handleSelect })] })) : (_jsxs(Box, { flexDirection: "row", flexWrap: "wrap", columnGap: 1, children: [_jsx(Text, { color: INK_COLORS.HUBSPOT_TEAL, children: "?" }), _jsx(Text, { children: `${selectPrompt}` }), _jsx(Text, { color: INK_COLORS.INFO_BLUE, children: selectedLabel })] })), _jsxs(ActionSection, { status: createStatus, statusText: runningProjectCreateText, errorMessage: createError, children: [step !== FLOW_STEPS.SELECT && (_jsx(InputField, { flag: "name", prompt: "Enter your project name", value: projectName, isEditing: step === FLOW_STEPS.NAME_INPUT, onChange: setProjectName, onSubmit: handleNameSubmit })), step !== FLOW_STEPS.SELECT && step !== FLOW_STEPS.NAME_INPUT && (_jsx(InputField, { flag: "dest", prompt: "Choose where to create the project", value: projectDest, isEditing: step === FLOW_STEPS.DEST_INPUT, onChange: handleDestChange, onSubmit: handleDestSubmit }))] }), step === FLOW_STEPS.COMPLETE && (_jsxs(Box, { flexDirection: "row", flexWrap: "wrap", columnGap: 1, children: [_jsx(Text, { color: INK_COLORS.HUBSPOT_TEAL, children: "?" }), _jsx(Text, { children: commands.getStarted.v2.pressEnterToContinueDeploy(accountName) })] }))] }) }));
-}