@contentful/experience-design-system-cli 2.2.1

package/dist/src/import/tui/steps/CredentialsStep.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+type CredentialsStepProps = {
+    summary?: string;
+    error?: string;
+    initialSpaceId?: string;
+    initialEnvironmentId?: string;
+    initialCmaToken?: string;
+    /** Called when the user submits with all fields changed from their initial values */
+    onConfirm: (spaceId: string, environmentId: string, cmaToken: string) => void;
+    /** Called when the user submits without changing any field (use existing creds as-is) */
+    onContinue?: (spaceId: string, environmentId: string, cmaToken: string) => void;
+    onQuit: () => void;
+};
+export declare function CredentialsStep({ summary, error: externalError, initialSpaceId, initialEnvironmentId, initialCmaToken, onConfirm, onContinue, onQuit, }: CredentialsStepProps): React.ReactElement;
+export {};

package/dist/src/import/tui/steps/CredentialsStep.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { useImmediateInput } from '../../../analyze/select/tui/hooks/useImmediateInput.js';
+export function CredentialsStep({ summary, error: externalError, initialSpaceId = '', initialEnvironmentId = 'master', initialCmaToken = '', onConfirm, onContinue, onQuit, }) {
+    const [spaceId, setSpaceId] = useState(initialSpaceId);
+    const [environmentId, setEnvironmentId] = useState(initialEnvironmentId);
+    const [cmaToken, setCmaToken] = useState(initialCmaToken);
+    const [activeField, setActiveField] = useState('spaceId');
+    const [inlineError, setInlineError] = useState(null);
+    const [cursorVisible, setCursorVisible] = useState(true);
+    useEffect(() => {
+        const interval = setInterval(() => setCursorVisible((v) => !v), 500);
+        return () => clearInterval(interval);
+    }, []);
+    useImmediateInput((input, key) => {
+        if (key.return) {
+            if (activeField === 'spaceId') {
+                setActiveField('environmentId');
+                return;
+            }
+            if (activeField === 'environmentId') {
+                setActiveField('cmaToken');
+                return;
+            }
+            // Submit
+            if (!spaceId.trim() || !environmentId.trim() || !cmaToken.trim()) {
+                setInlineError('All fields are required.');
+                return;
+            }
+            setInlineError(null);
+            const unchanged = spaceId.trim() === initialSpaceId &&
+                environmentId.trim() === initialEnvironmentId &&
+                cmaToken.trim() === initialCmaToken;
+            if (unchanged && onContinue) {
+                onContinue(spaceId.trim(), environmentId.trim(), cmaToken.trim());
+            }
+            else {
+                onConfirm(spaceId.trim(), environmentId.trim(), cmaToken.trim());
+            }
+            return;
+        }
+        if (key.tab) {
+            setActiveField((f) => (f === 'spaceId' ? 'environmentId' : f === 'environmentId' ? 'cmaToken' : 'spaceId'));
+            return;
+        }
+        if (key.escape || input === 'q') {
+            onQuit();
+            return;
+        }
+        if (key.backspace || key.delete) {
+            if (activeField === 'spaceId')
+                setSpaceId((v) => v.slice(0, -1));
+            else if (activeField === 'environmentId')
+                setEnvironmentId((v) => v.slice(0, -1));
+            else
+                setCmaToken((v) => v.slice(0, -1));
+            return;
+        }
+        if (input && !key.ctrl && !key.meta) {
+            if (activeField === 'spaceId')
+                setSpaceId((v) => v + input);
+            else if (activeField === 'environmentId')
+                setEnvironmentId((v) => v + input);
+            else
+                setCmaToken((v) => v + input);
+        }
+    });
+    const cursor = cursorVisible ? '█' : ' ';
+    function renderField(label, value, field, masked = false) {
+        const isActive = activeField === field;
+        const display = masked ? '•'.repeat(value.length) : value;
+        return (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: isActive ? 'cyan' : undefined, children: '?' }), _jsxs(Text, { bold: isActive, children: [label, ":"] }), _jsx(Text, { children: isActive ? display + cursor : display || _jsx(Text, { dimColor: true, children: "(empty)" }) })] }));
+    }
+    const displayError = inlineError ?? externalError ?? null;
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, paddingX: 2, paddingY: 1, children: [summary && _jsxs(Text, { color: "green", children: ["\u2713 ", summary] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { children: initialSpaceId && initialCmaToken
+                        ? 'Credentials pre-filled from exo setup. Press Enter to continue or edit any field to update.'
+                        : 'Enter your Contentful credentials to continue.' }) }), !(initialSpaceId && initialCmaToken) && (_jsx(Text, { dimColor: true, children: "Tip: run exo setup to save these to ~/.config/exo/credentials.json so they pre-fill here automatically." })), _jsxs(Box, { flexDirection: "column", gap: 0, marginTop: 1, children: [renderField('Space ID', spaceId, 'spaceId'), renderField('Environment', environmentId, 'environmentId'), renderField('CMA Token', cmaToken, 'cmaToken', true)] }), displayError && _jsxs(Text, { color: "red", children: ["\u2717 ", displayError] }), _jsxs(Box, { gap: 3, marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "[Enter] Next field / Submit" }), _jsx(Text, { dimColor: true, children: "[Tab] Switch field" }), _jsx(Text, { dimColor: true, children: "[q] Quit" })] })] }));
+}

package/dist/src/import/tui/steps/DoneStep.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+type EntityResult = {
+    created: number;
+    updated: number;
+    failed: number;
+};
+type DoneStepProps = {
+    componentTypes: EntityResult;
+    designTokens: EntityResult;
+    summary?: {
+        total: number;
+        succeeded: number;
+        failed: number;
+    };
+    spaceId: string;
+    environmentId: string;
+    onExit: () => void;
+};
+export declare function DoneStep({ componentTypes, designTokens, summary, spaceId, environmentId, onExit, }: DoneStepProps): React.ReactElement;
+export {};

package/dist/src/import/tui/steps/DoneStep.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useImmediateInput } from '../../../analyze/select/tui/hooks/useImmediateInput.js';
+export function DoneStep({ componentTypes, designTokens, summary, spaceId, environmentId, onExit, }) {
+    useImmediateInput((input, key) => {
+        if (key.return || input === 'q' || key.escape) {
+            onExit();
+        }
+    });
+    const totalFailed = componentTypes.failed + designTokens.failed;
+    const totalPushed = componentTypes.created + componentTypes.updated + designTokens.created + designTokens.updated;
+    const success = totalFailed === 0;
+    function EntityRows({ entity, label }) {
+        return (_jsxs(_Fragment, { children: [entity.created > 0 && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "green", children: "\u2713" }), _jsxs(Text, { children: [entity.created, " ", label, entity.created !== 1 ? 's' : '', " created"] })] })), entity.updated > 0 && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "green", children: "\u2713" }), _jsxs(Text, { children: [entity.updated, " ", label, entity.updated !== 1 ? 's' : '', " updated"] })] })), entity.failed > 0 && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "red", children: "\u2717" }), _jsxs(Text, { color: "red", children: [entity.failed, " ", label, entity.failed !== 1 ? 's' : '', " failed \u2014 check logs above"] })] }))] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, paddingX: 2, paddingY: 1, children: [success ? (_jsx(Text, { bold: true, color: "green", children: "Done!" })) : (_jsx(Text, { bold: true, color: "yellow", children: "\u26A0 Finished with errors" })), totalPushed === 0 && totalFailed === 0 && !summary ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Nothing was pushed \u2014 everything was already up to date." }) })) : (_jsxs(Box, { flexDirection: "column", gap: 0, marginTop: 1, children: [_jsx(EntityRows, { entity: componentTypes, label: "Component Type" }), _jsx(EntityRows, { entity: designTokens, label: "Design Token" }), summary && (_jsxs(Box, { gap: 1, marginTop: 1, children: [_jsxs(Text, { dimColor: true, children: ["Server: ", summary.succeeded, "/", summary.total, " succeeded"] }), summary.failed > 0 && _jsxs(Text, { color: "red", children: [", ", summary.failed, " failed"] })] }))] })), _jsxs(Box, { gap: 1, marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "Space:" }), _jsx(Text, { children: spaceId }), _jsx(Text, { dimColor: true, children: "/" }), _jsx(Text, { dimColor: true, children: "Environment:" }), _jsx(Text, { children: environmentId })] }), success && totalPushed > 0 && (_jsxs(Box, { flexDirection: "column", gap: 1, marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "Your design system is now in Contentful ExO." }), _jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsx(Text, { dimColor: true, children: "View it here:" }), _jsx(Text, { color: "cyan", children: `https://app.contentful.com/spaces/${spaceId}/environments/${environmentId}/exo/components` })] })] })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "[Enter / q] Exit" }) })] }));
+}

package/dist/src/import/tui/steps/ErrorStep.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type ErrorStepProps = {
+    stepName: string;
+    message: string;
+    onExit: () => void;
+};
+export declare function ErrorStep({ stepName, message, onExit }: ErrorStepProps): React.ReactElement;
+export {};

package/dist/src/import/tui/steps/ErrorStep.js

@@ -0,0 +1,11 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useImmediateInput } from '../../../analyze/select/tui/hooks/useImmediateInput.js';
+export function ErrorStep({ stepName, message, onExit }) {
+    useImmediateInput((input, key) => {
+        if (key.return || input === 'q' || key.escape) {
+            onExit();
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, paddingX: 2, paddingY: 1, children: [_jsxs(Text, { bold: true, color: "red", children: ["\u2717 ", stepName, " failed"] }), _jsx(Text, { color: "red", children: message }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "[Enter / q] Exit" }) })] }));
+}

package/dist/src/import/tui/steps/GateStep.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+type GateStepProps = {
+    successMessage: string;
+    summary?: string;
+    context: string;
+    continueLabel?: string;
+    skipLabel?: string;
+    onContinue: () => void;
+    onSkip?: () => void;
+    onQuit: () => void;
+    showSkip?: boolean;
+};
+export declare function GateStep({ successMessage, summary, context, continueLabel, skipLabel, onContinue, onSkip, onQuit, showSkip, }: GateStepProps): React.ReactElement;
+export {};

package/dist/src/import/tui/steps/GateStep.js

@@ -0,0 +1,20 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useImmediateInput } from '../../../analyze/select/tui/hooks/useImmediateInput.js';
+export function GateStep({ successMessage, summary, context, continueLabel = 'Continue', skipLabel = 'Approve all and skip', onContinue, onSkip, onQuit, showSkip = true, }) {
+    useImmediateInput((input, key) => {
+        if (key.return) {
+            onContinue();
+            return;
+        }
+        if (input === 'a' && showSkip && onSkip) {
+            onSkip();
+            return;
+        }
+        if (input === 'q' || key.escape) {
+            onQuit();
+            return;
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, paddingX: 2, paddingY: 1, children: [_jsxs(Text, { color: "green", children: ["\u2713 ", successMessage] }), summary && _jsx(Text, { dimColor: true, children: summary }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { children: context }) }), _jsxs(Box, { gap: 3, marginTop: 1, children: [_jsxs(Text, { dimColor: true, children: ["[Enter] ", continueLabel] }), showSkip && onSkip && _jsxs(Text, { dimColor: true, children: ["[a] ", skipLabel] }), _jsx(Text, { dimColor: true, children: "[q] Quit" })] })] }));
+}

package/dist/src/import/tui/steps/GenerateReviewStep.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type GenerateReviewStepProps = {
+    extractSessionId: string;
+    onFinalize: (accepted: number, rejected: number) => void;
+    onQuit: () => void;
+};
+export declare function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, }: GenerateReviewStepProps): React.ReactElement;
+export {};

package/dist/src/import/tui/steps/GenerateReviewStep.js

@@ -0,0 +1,208 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Box, Text, useStdout } from 'ink';
+import { Sidebar } from '../../../analyze/select/tui/components/Sidebar.js';
+import { JsonPanel } from '../../../analyze/select/tui/components/JsonPanel.js';
+import { FieldEditor } from '../../../analyze/select/tui/components/FieldEditor.js';
+import { StatusBar } from '../../../analyze/select/tui/components/StatusBar.js';
+import { FinalizeDialog } from '../../../analyze/select/tui/components/FinalizeDialog.js';
+import { QuitDialog } from '../../../analyze/select/tui/components/QuitDialog.js';
+import { useImmediateInput } from '../../../analyze/select/tui/hooks/useImmediateInput.js';
+import { openPipelineDb, loadCDFComponents, storeCDFComponents } from '../../../session/db.js';
+const VISIBLE_COUNT = 20;
+const PANEL_HEIGHT = 22;
+export function GenerateReviewStep({ extractSessionId, onFinalize, onQuit, }) {
+    const { stdout } = useStdout();
+    const terminalWidth = stdout?.columns ?? 80;
+    const [components, setComponents] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [loadError, setLoadError] = useState(null);
+    const [selectedIdx, setSelectedIdx] = useState(0);
+    const [sidebarScrollOffset, setSidebarScrollOffset] = useState(0);
+    const [jsonScrollOffset, setJsonScrollOffset] = useState(0);
+    const [sidebarFocused, setSidebarFocused] = useState(true);
+    const [showFinalize, setShowFinalize] = useState(false);
+    const [showQuit, setShowQuit] = useState(false);
+    const [editMode, setEditMode] = useState(false);
+    const [draftValue, setDraftValue] = useState('');
+    const [saveError, setSaveError] = useState(null);
+    useEffect(() => {
+        async function load() {
+            const db = openPipelineDb();
+            let cdfComponents;
+            try {
+                cdfComponents = loadCDFComponents(db, extractSessionId);
+            }
+            finally {
+                db.close();
+            }
+            if (cdfComponents.length === 0) {
+                setLoadError('No generated definitions found for this session. Try re-running generate.');
+                setLoading(false);
+                return;
+            }
+            setComponents(cdfComponents.map(({ key, entry }) => ({ key, entry, status: 'needs-review' })));
+            setLoading(false);
+        }
+        load().catch((e) => {
+            setLoadError(String(e));
+            setLoading(false);
+        });
+    }, []);
+    const updateStatus = (idx, status) => {
+        setComponents((prev) => prev.map((c, i) => (i === idx ? { ...c, status } : c)));
+    };
+    const handleFinalizeConfirm = () => {
+        const rejected = components.filter((c) => c.status === 'rejected').map((c) => c.key);
+        if (rejected.length > 0) {
+            const db = openPipelineDb();
+            try {
+                const stmt = db.prepare(`UPDATE raw_components SET status = 'generate-rejected' WHERE session_id = ? AND name = ?`);
+                db.exec('BEGIN');
+                try {
+                    for (const name of rejected) {
+                        stmt.run(extractSessionId, name);
+                    }
+                    db.exec('COMMIT');
+                }
+                catch (e) {
+                    db.exec('ROLLBACK');
+                    throw e;
+                }
+            }
+            finally {
+                db.close();
+            }
+        }
+        const accepted = components.filter((c) => c.status !== 'rejected').length;
+        onFinalize(accepted, rejected.length);
+    };
+    const handleEditSave = () => {
+        const current = components[selectedIdx];
+        if (!current)
+            return;
+        try {
+            const parsed = JSON.parse(draftValue);
+            // Accept both bare entry and wrapped { [key]: entry } forms
+            const keys = Object.keys(parsed);
+            const entry = keys.length === 1 && typeof parsed[keys[0]] === 'object' && parsed[keys[0]] !== null
+                ? parsed[keys[0]]
+                : parsed;
+            if (entry.$type !== 'component' || typeof entry.$properties !== 'object' || entry.$properties === null) {
+                setSaveError('Invalid CDF entry: must have $type: "component" and $properties object');
+                return;
+            }
+            setComponents((prev) => prev.map((c, i) => i === selectedIdx ? { ...c, entry, status: c.status === 'needs-review' ? 'accepted' : c.status } : c));
+            setEditMode(false);
+            setDraftValue('');
+            setSaveError(null);
+            const db = openPipelineDb();
+            try {
+                storeCDFComponents(db, extractSessionId, [{ key: current.key, entry }]);
+            }
+            finally {
+                db.close();
+            }
+        }
+        catch (e) {
+            setSaveError(String(e));
+        }
+    };
+    const handleEditDiscard = () => {
+        setEditMode(false);
+        setDraftValue('');
+        setSaveError(null);
+    };
+    const dialogOpen = showFinalize || showQuit;
+    useImmediateInput((input, key) => {
+        if (loading || loadError)
+            return;
+        if (dialogOpen)
+            return;
+        if (editMode)
+            return;
+        if (input === 'q') {
+            setShowQuit(true);
+            return;
+        }
+        if (input === 'F') {
+            setShowFinalize(true);
+            return;
+        }
+        if (key.tab) {
+            setSidebarFocused((prev) => !prev);
+            return;
+        }
+        if (input === 'a') {
+            updateStatus(selectedIdx, 'accepted');
+            return;
+        }
+        if (input === 'r') {
+            updateStatus(selectedIdx, 'rejected');
+            return;
+        }
+        if (input === 'A') {
+            setComponents((prev) => prev.map((c) => (c.status === 'needs-review' ? { ...c, status: 'accepted' } : c)));
+            return;
+        }
+        if (input === 'e' && selected) {
+            setDraftValue(JSON.stringify({ [selected.key]: selected.entry }, null, 2));
+            setEditMode(true);
+            return;
+        }
+        if (sidebarFocused) {
+            if (key.upArrow || input === 'k') {
+                const newIdx = Math.max(0, selectedIdx - 1);
+                setSelectedIdx(newIdx);
+                setJsonScrollOffset(0);
+                setSidebarScrollOffset((prev) => Math.min(prev, newIdx));
+            }
+            else if (key.downArrow || input === 'j') {
+                const newIdx = Math.min(components.length - 1, selectedIdx + 1);
+                setSelectedIdx(newIdx);
+                setJsonScrollOffset(0);
+                setSidebarScrollOffset((prev) => (newIdx >= prev + VISIBLE_COUNT ? newIdx - VISIBLE_COUNT + 1 : prev));
+            }
+        }
+        else {
+            if (key.upArrow || input === 'k') {
+                setJsonScrollOffset((prev) => Math.max(0, prev - 1));
+            }
+            else if (key.downArrow || input === 'j') {
+                setJsonScrollOffset((prev) => prev + 1);
+            }
+        }
+    });
+    if (loading) {
+        return (_jsx(Box, { paddingX: 2, paddingY: 1, children: _jsx(Text, { dimColor: true, children: "Loading generated definitions..." }) }));
+    }
+    if (loadError) {
+        return (_jsx(Box, { paddingX: 2, paddingY: 1, children: _jsx(Text, { color: "red", children: loadError }) }));
+    }
+    const selected = components[selectedIdx] ?? null;
+    const selectedJson = selected ? JSON.stringify({ [selected.key]: selected.entry }, null, 2) : '';
+    const sidebarItems = components.map((c) => ({
+        id: c.key,
+        name: c.key,
+        status: c.status,
+    }));
+    const longestName = components.reduce((m, c) => Math.max(m, c.key.length), 0);
+    const sidebarWidth = Math.min(Math.max(longestName + 4, 14), 22);
+    const panelWidth = Math.max(10, terminalWidth - sidebarWidth - 4);
+    const accepted = components.filter((c) => c.status === 'accepted').length;
+    const rejected = components.filter((c) => c.status === 'rejected').length;
+    const needsReview = components.filter((c) => c.status === 'needs-review').length;
+    const propCount = selected ? Object.keys(selected.entry.$properties).length : 0;
+    const slotCount = selected?.entry.$slots ? Object.keys(selected.entry.$slots).length : 0;
+    return (_jsxs(Box, { flexDirection: "column", children: [showFinalize && (_jsx(FinalizeDialog, { accepted: accepted, rejected: rejected, needsReview: needsReview, onConfirm: handleFinalizeConfirm, onCancel: () => setShowFinalize(false) })), showQuit && _jsx(QuitDialog, { hasUnsavedDrafts: false, onConfirm: onQuit, onCancel: () => setShowQuit(false) }), !dialogOpen && (_jsxs(Box, { children: [_jsx(Sidebar, { components: sidebarItems, selectedId: selected?.key ?? null, focused: sidebarFocused, scrollOffset: sidebarScrollOffset, visibleCount: VISIBLE_COUNT, onSelect: (id) => {
+                            const idx = components.findIndex((c) => c.key === id);
+                            if (idx >= 0) {
+                                setSelectedIdx(idx);
+                                setJsonScrollOffset(0);
+                            }
+                        }, onScrollChange: setSidebarScrollOffset, width: sidebarWidth }), _jsx(Box, { flexGrow: 1, paddingLeft: 1, flexDirection: "column", children: selected ? (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: selected.key }), _jsx(Box, { flexGrow: 1 }), _jsxs(Text, { dimColor: true, children: [propCount, " prop", propCount !== 1 ? 's' : '', slotCount > 0 ? ` · ${slotCount} slot${slotCount !== 1 ? 's' : ''}` : '', '  ', sidebarFocused ? '[Tab] focus panel' : '[Tab] focus list'] })] }), editMode ? (_jsx(FieldEditor, { value: draftValue || selectedJson, width: panelWidth, height: PANEL_HEIGHT, onChange: setDraftValue, onSave: handleEditSave, onDiscard: handleEditDiscard })) : (_jsx(JsonPanel, { label: "GENERATED DEFINITION", value: selectedJson, scrollOffset: jsonScrollOffset, width: panelWidth, height: PANEL_HEIGHT, active: !sidebarFocused })), saveError && _jsx(Text, { color: "red", children: '✗ ' + saveError }), _jsx(Text, { dimColor: true, children: editMode
+                                        ? '  [Ctrl+S] save  [Esc] discard'
+                                        : '  [a] accept  [r] reject  [e] edit  [A] accept all  [F] finalize  [Tab] toggle focus  [q] quit' })] })) : (_jsx(Text, { dimColor: true, children: "No component selected" })) })] })), !dialogOpen && (_jsx(StatusBar, { accepted: accepted, rejected: rejected, reviewed: 0, needsReview: needsReview, onApproveAll: () => {
+                    setComponents((prev) => prev.map((c) => (c.status === 'needs-review' ? { ...c, status: 'accepted' } : c)));
+                }, onFinalize: () => setShowFinalize(true) }))] }));
+}

package/dist/src/import/tui/steps/PathValidationStep.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type PathValidationStepProps = {
+    projectPath: string;
+    onConfirm: (projectPath: string) => void;
+    onSkipComponents: () => void;
+    onChangePath: () => void;
+    onQuit: () => void;
+};
+export declare function PathValidationStep({ projectPath, onConfirm, onSkipComponents, onChangePath, onQuit, }: PathValidationStepProps): React.ReactElement;
+export {};

package/dist/src/import/tui/steps/PathValidationStep.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { promises as fs } from 'node:fs';
+import { join } from 'node:path';
+import { useImmediateInput } from '../../../analyze/select/tui/hooks/useImmediateInput.js';
+const IGNORE_DIRS = new Set([
+    'node_modules',
+    'dist',
+    'build',
+    '.next',
+    '.nuxt',
+    'coverage',
+    'storybook-static',
+    'out',
+    '.git',
+]);
+async function countFiles(dir) {
+    const counts = {
+        tsx: 0,
+        ts: 0,
+        vue: 0,
+        astro: 0,
+        jsx: 0,
+        js: 0,
+        json: 0,
+        other: 0,
+        total: 0,
+    };
+    async function walk(current) {
+        let entries;
+        try {
+            entries = await fs.readdir(current);
+        }
+        catch {
+            return;
+        }
+        await Promise.all(entries.map(async (entry) => {
+            if (IGNORE_DIRS.has(entry))
+                return;
+            const full = join(current, entry);
+            let stat;
+            try {
+                stat = await fs.stat(full);
+            }
+            catch {
+                return;
+            }
+            if (stat.isDirectory()) {
+                await walk(full);
+            }
+            else {
+                counts.total++;
+                const ext = entry.slice(entry.lastIndexOf('.'));
+                if (ext === '.tsx')
+                    counts.tsx++;
+                else if (ext === '.ts' && !entry.endsWith('.d.ts'))
+                    counts.ts++;
+                else if (ext === '.vue')
+                    counts.vue++;
+                else if (ext === '.astro')
+                    counts.astro++;
+                else if (ext === '.jsx')
+                    counts.jsx++;
+                else if (ext === '.js')
+                    counts.js++;
+                else if (ext === '.json')
+                    counts.json++;
+                else
+                    counts.other++;
+            }
+        }));
+    }
+    await walk(dir);
+    return counts;
+}
+export function PathValidationStep({ projectPath, onConfirm, onSkipComponents, onChangePath, onQuit, }) {
+    const [counts, setCounts] = useState(null);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        void (async () => {
+            try {
+                const stat = await fs.stat(projectPath);
+                if (stat.isFile()) {
+                    setError(`That's a file, not a directory.\n\nProvide the path to your component library's root folder, not a specific file.\n\nExample: ~/projects/my-design-system`);
+                    return;
+                }
+                if (!stat.isDirectory()) {
+                    setError(`Not a directory: ${projectPath}`);
+                    return;
+                }
+                const result = await countFiles(projectPath);
+                setCounts(result);
+            }
+            catch (e) {
+                const code = e.code;
+                if (code === 'ENOENT') {
+                    setError(`Directory not found: ${projectPath}\n\nDouble-check the path and try again. Tip: you can use ~, relative, or absolute paths.`);
+                }
+                else if (code === 'EACCES') {
+                    setError(`Permission denied: ${projectPath}\n\nYou don't have read access to this directory.`);
+                }
+                else {
+                    setError(`Cannot access: ${projectPath}`);
+                }
+            }
+        })();
+    }, [projectPath]);
+    useImmediateInput((input, key) => {
+        if (error) {
+            if (input === 'e' || key.return) {
+                onChangePath();
+                return;
+            }
+            if (input === 'q' || key.escape) {
+                onQuit();
+                return;
+            }
+            return;
+        }
+        if (!counts)
+            return;
+        if (key.return) {
+            onConfirm(projectPath);
+            return;
+        }
+        if (input === 's') {
+            onSkipComponents();
+            return;
+        }
+        if (input === 'e') {
+            onChangePath();
+            return;
+        }
+        if (input === 'q' || key.escape) {
+            onQuit();
+            return;
+        }
+    });
+    if (!counts && !error) {
+        return (_jsx(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: _jsxs(Text, { dimColor: true, children: ["Scanning ", _jsx(Text, { bold: true, children: projectPath }), "..."] }) }));
+    }
+    if (error) {
+        const lines = error.split('\n');
+        return (_jsxs(Box, { flexDirection: "column", gap: 1, paddingX: 2, paddingY: 1, children: [_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "red", children: ["\u2717 ", lines[0]] }), lines.slice(1).map((line, i) => (_jsx(Text, { dimColor: true, children: line }, i)))] }), _jsxs(Box, { gap: 3, marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "[e / Enter] Try a different path" }), _jsx(Text, { dimColor: true, children: "[q] Quit" })] })] }));
+    }
+    const c = counts;
+    const componentFiles = c.tsx + c.ts + c.vue + c.astro + c.jsx + c.js;
+    const tokenFiles = c.json;
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, paddingX: 2, paddingY: 1, children: [_jsxs(Text, { children: ["Scanning ", _jsx(Text, { bold: true, children: projectPath }), "..."] }), _jsxs(Box, { flexDirection: "column", gap: 0, marginTop: 1, children: [_jsxs(Text, { color: "green", children: ["\u2713 Found ", c.total, " files:"] }), c.tsx > 0 && (_jsxs(Text, { children: ['  • ', String(c.tsx).padStart(3), " .tsx files"] })), c.ts > 0 && (_jsxs(Text, { children: ['  • ', String(c.ts).padStart(3), " .ts files"] })), c.vue > 0 && (_jsxs(Text, { children: ['  • ', String(c.vue).padStart(3), " .vue files"] })), c.astro > 0 && (_jsxs(Text, { children: ['  • ', String(c.astro).padStart(3), " .astro files"] })), c.jsx > 0 && (_jsxs(Text, { children: ['  • ', String(c.jsx).padStart(3), " .jsx files"] })), c.js > 0 && (_jsxs(Text, { children: ['  • ', String(c.js).padStart(3), " .js files"] })), c.json > 0 && (_jsxs(Text, { color: "cyan", children: ['  • ', String(c.json).padStart(3), " .json files (design tokens)"] })), c.other > 0 && (_jsxs(Text, { dimColor: true, children: ['  • ', String(c.other).padStart(3), " other (ignored)"] }))] }), componentFiles === 0 && tokenFiles === 0 && (_jsx(Text, { color: "yellow", children: "\u26A0 No component or token files found. Try a different path." })), componentFiles === 0 && tokenFiles > 0 && (_jsx(Text, { color: "yellow", children: "\u26A0 No component files found \u2014 only token files detected." })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { children: "Does this look right?" }) }), _jsxs(Box, { gap: 3, marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "[Enter] Yes, start extracting" }), _jsx(Text, { dimColor: true, children: "[s] Skip components" }), _jsx(Text, { dimColor: true, children: "[e] Change path" }), _jsx(Text, { dimColor: true, children: "[q] Quit" })] })] }));
+}

package/dist/src/import/tui/steps/PreviewStep.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+type EntitySummary = {
+    created: number;
+    updated: number;
+    unchanged: number;
+    conflicts: number;
+    failed: number;
+};
+type PreviewStepProps = {
+    componentTypes: EntitySummary;
+    designTokens: EntitySummary;
+    spaceId: string;
+    environmentId: string;
+    stepNumber: number;
+    totalSteps: number;
+    onConfirm: () => void;
+    onSaveFiles?: () => void;
+    onQuit: () => void;
+};
+export declare function PreviewStep({ componentTypes, designTokens, spaceId, environmentId, stepNumber, totalSteps, onConfirm, onSaveFiles, onQuit, }: PreviewStepProps): React.ReactElement;
+export {};

package/dist/src/import/tui/steps/PreviewStep.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useImmediateInput } from '../../../analyze/select/tui/hooks/useImmediateInput.js';
+export function PreviewStep({ componentTypes, designTokens, spaceId, environmentId, stepNumber, totalSteps, onConfirm, onSaveFiles, onQuit, }) {
+    useImmediateInput((input, key) => {
+        if (key.return) {
+            onConfirm();
+            return;
+        }
+        if (input === 's' && onSaveFiles) {
+            onSaveFiles();
+            return;
+        }
+        if (input === 'q' || key.escape) {
+            onQuit();
+            return;
+        }
+    });
+    const hasComponents = componentTypes.created > 0 ||
+        componentTypes.updated > 0 ||
+        componentTypes.unchanged > 0 ||
+        componentTypes.conflicts > 0 ||
+        componentTypes.failed > 0;
+    const hasTokens = designTokens.created > 0 ||
+        designTokens.updated > 0 ||
+        designTokens.unchanged > 0 ||
+        designTokens.conflicts > 0 ||
+        designTokens.failed > 0;
+    const hasAnything = hasComponents || hasTokens;
+    function EntityRows({ label, summary }) {
+        if (!summary.created && !summary.updated && !summary.unchanged && !summary.conflicts && !summary.failed)
+            return null;
+        return (_jsxs(_Fragment, { children: [_jsx(Box, { gap: 1, marginTop: 1, children: _jsx(Text, { bold: true, dimColor: true, children: label }) }), summary.created > 0 && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "green", children: " \uFF0B" }), _jsxs(Text, { children: [summary.created, " will be created"] })] })), summary.updated > 0 && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "yellow", children: " \uFF5E" }), _jsxs(Text, { children: [summary.updated, " will be updated"] })] })), summary.unchanged > 0 && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { dimColor: true, children: " \u00B7" }), _jsxs(Text, { dimColor: true, children: [summary.unchanged, " unchanged"] })] })), summary.conflicts > 0 && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "red", children: " \u2717" }), _jsxs(Text, { color: "red", children: [summary.conflicts, " conflict", summary.conflicts !== 1 ? 's' : '', " \u2014 resolve before pushing"] })] })), summary.failed > 0 && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "red", children: " \u2717" }), _jsxs(Text, { color: "red", children: [summary.failed, " failed \u2014 check logs"] })] }))] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, paddingX: 2, paddingY: 1, children: [_jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsx(Text, { dimColor: true, children: '─'.repeat(40) }), _jsxs(Box, { gap: 1, children: [_jsxs(Text, { bold: true, children: ["Step ", stepNumber, " of ", totalSteps] }), _jsx(Text, { bold: true, children: "\u2014" }), _jsx(Text, { bold: true, children: "Push to Contentful" })] }), _jsx(Text, { dimColor: true, children: '─'.repeat(40) })] }), hasAnything ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: "Here's what will happen in your space:" }), _jsxs(Box, { flexDirection: "column", gap: 0, children: [hasComponents && _jsx(EntityRows, { label: "ComponentTypes", summary: componentTypes }), hasTokens && _jsx(EntityRows, { label: "Design Tokens", summary: designTokens })] })] })) : (_jsx(Text, { dimColor: true, children: "Nothing to push \u2014 everything is already up to date." })), _jsxs(Box, { gap: 1, marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "Space:" }), _jsx(Text, { children: spaceId }), _jsx(Text, { dimColor: true, children: "/" }), _jsx(Text, { dimColor: true, children: "Environment:" }), _jsx(Text, { children: environmentId })] }), _jsxs(Box, { gap: 3, marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "[Enter] Push to Contentful" }), onSaveFiles && _jsx(Text, { dimColor: true, children: "[s] Save files instead" }), _jsx(Text, { dimColor: true, children: "[q] Cancel" })] })] }));
+}