@lucidlayer/traceform-onboard/dist/components/VSCodeStep.js

Interactive CLI tool and onboarding wizard for setting up, validating, and configuring Traceform in React projects. Automates project setup, developer onboarding, and toolchain validation for React, TypeScript, and monorepos.

import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
// SPDX-License-Identifier: Apache-2.0
/*
// SPDX-License-Identifier: Apache-2.0
*/
import { useState } from 'react';
import { Box, Text, useInput } from 'ink';
const VSCodeStep = ({ onComplete, stepIndex, totalSteps }) => {
    const [confirmed, setConfirmed] = useState(null);
    const [answered, setAnswered] = useState(false); // to avoid repeated answers
    // Use Ink's useInput hook to handle user response
    useInput((input, key) => {
        if (!answered && confirmed === null) {
            if (key.return) {
                setConfirmed(true);
                setAnswered(true);
                onComplete(true);
            }
        }
    }, { isActive: confirmed === null });
    // Add universal quit handler
    useInput((input, key) => {
        if (input.toLowerCase() === 'q') {
            onComplete(false);
            return;
        }
    });
    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "cyan", children: ["Step ", stepIndex, " of ", totalSteps] }), _jsx(Text, { bold: true, children: "--- Step 3: VS Code Extension ---" }), _jsx(Text, { color: "yellow", children: "Install the Traceform VS Code extension:" }), _jsx(Text, { children: "1. Open VS Code." }), _jsx(Text, { children: "2. Go to Extensions (Ctrl+Shift+X)." }), _jsxs(Text, { children: ["3. Search for ", _jsx(Text, { bold: true, children: "Traceform" }), " and install it."] }), _jsx(Text, { children: "4. Or visit: https://marketplace.visualstudio.com/items?itemName=LucidLayer.traceform-vscode" }), confirmed === null && _jsx(Text, { color: "yellow", children: "Press Enter to continue or Q to quit" }), confirmed === true && _jsx(Text, { color: "green", children: "\u2714 VS Code Extension step confirmed." }), confirmed === false && _jsx(Text, { color: "red", children: "\u2716 VS Code Extension step not confirmed." })] }));
};
export default VSCodeStep;