@lucidlayer/traceform-onboard/dist/components/ValidateStep.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
*/
import { useState, useEffect } from 'react';
import { Box, Text } from 'ink';
const ValidateStep = ({ onComplete, stepIndex, totalSteps }) => {
    const [confirmed, setConfirmed] = useState(null);
    useEffect(() => {
        // Print checklist to console before exiting
        const timer = setTimeout(() => {
            process.exit(0);
        }, 2000);
        return () => clearTimeout(timer);
    }, []);
    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "cyan", children: ["Step ", stepIndex, " of ", totalSteps] }), _jsx(Text, { bold: true, children: "--- Step 5: Final Validation ---" }), _jsx(Text, { color: "yellow", children: "Checklist to validate your Traceform setup:" }), _jsx(Text, { children: "1. Start your React dev server (e.g., npm run dev)." }), _jsxs(Text, { children: ["2. Navigate to the sidebar to the Traceform VS Code extension and make sure the latest logs show ", _jsx(Text, { color: "green", children: "client connected" }), ". If not, press ", _jsx(Text, { color: "yellow", children: "Restart" }), "."] }), _jsxs(Text, { children: ["3. Open your app in the browser. (e.g., open ", _jsx(Text, { color: "cyan", children: "http://localhost:5173/" }), ")"] }), _jsxs(Text, { children: ["4. In VS Code, open a React component file. (e.g., ", _jsx(Text, { color: "cyan", children: "Demo-01\\src\\components\\StockCard.tsx" }), ")"] }), _jsxs(Text, { children: ["5. Highlight and right-click the component name and select ", _jsx(Text, { color: "yellow", children: "'Traceform: Find Component in UI'" }), "."] }), _jsx(Text, { children: "6. Check your browser for highlighted components." }), confirmed === true && (_jsx(Text, { color: "green", bold: true, children: "\uD83C\uDF89 Congratulations! Your Traceform setup is working correctly!" })), confirmed === false && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: "red", bold: true, children: "\u274C Validation failed." }), _jsx(Text, { color: "cyan", children: "Troubleshooting Tips:" }), _jsx(Text, { color: "cyan", children: "- Double-check all previous setup steps." }), _jsx(Text, { color: "cyan", children: "- Ensure the Babel plugin is active in your DEV build." }), _jsx(Text, { color: "cyan", children: "- Check the VS Code Traceform sidebar for errors." }), _jsx(Text, { color: "cyan", children: "- Check the browser extension's status." }), _jsx(Text, { color: "cyan", children: "- Try restarting VS Code and your browser." })] }))] }));
};
export default ValidateStep;