@contentful/experience-design-system-cli 2.7.0 → 2.7.1-dev-build-02830eb.0

package/dist/src/analyze/select/tui/hooks/useSideEffects.js

@@ -0,0 +1,226 @@
+import { useEffect, useLayoutEffect, useRef } from 'react';
+import { readFile } from 'node:fs/promises';
+import { openPipelineDb, storeRawComponents, loadCDFComponents } from '../../../../session/db.js';
+import { ImportApiClient } from '../../../../apply/api-client.js';
+import { readTokensFromPath } from '../../../../apply/manifest.js';
+import { buildManifest } from '@contentful/experience-design-system-types';
+/**
+ * All async side effects in one place.
+ * Detects transitions by comparing state to prevState — no pending* counter signals needed.
+ */
+export function useSideEffects(state, dispatch, services) {
+    const prevRef = useRef(state);
+    // Per-instance timer ref — avoids module-level state shared between test instances
+    const previewTimerRef = useRef(null);
+    // useLayoutEffect: fires synchronously after commit, before next render.
+    // This guarantees transitions are detected even if two renders fire in rapid
+    // succession — prevRef.current is updated before the next render reads it.
+    useLayoutEffect(() => {
+        const prev = prevRef.current;
+        prevRef.current = state;
+        // ── Session persistence: save whenever session components change ──────
+        if (state.session && state.paths && prev.session?.components !== state.session.components) {
+            void services.saveState(state.session);
+        }
+        // ── Draft persist: mode left editing (but not via discard — discard clears the draft) ──
+        if (prev.mode.type === 'editing' && state.mode.type !== 'editing') {
+            const { componentId } = prev.mode;
+            const draft = state.draftsByComponentId[componentId]; // undefined if discarded
+            if (draft && state.session && state.paths) {
+                void persistDraft(componentId, draft, state, dispatch, services);
+            }
+        }
+        // ── Finalize: mode just became finalized ──────────────────────────────
+        if (prev.mode.type !== 'finalized' && state.mode.type === 'finalized') {
+            if (state.session && state.paths) {
+                void persistFinalize(state, dispatch, services);
+            }
+        }
+        // ── Preview refresh: session components changed ───────────────────────
+        if (state.session?.components !== prev.session?.components && state.session) {
+            schedulePreviewRefresh(state, dispatch, services.sessionId, previewTimerRef);
+        }
+    });
+    // ── Source code lazy loading ──────────────────────────────────────────────
+    useEffect(() => {
+        if (!state.selectedId || !state.session)
+            return;
+        if (state.sourceCodeById[state.selectedId] !== undefined)
+            return;
+        const component = state.session.components.find((c) => c.id === state.selectedId);
+        if (!component)
+            return;
+        const id = state.selectedId;
+        readFile(component.resolvedSourcePath, 'utf8')
+            .then((code) => dispatch({ type: 'SOURCE_LOADED', componentId: id, code }))
+            .catch(() => dispatch({ type: 'SOURCE_LOADED', componentId: id, code: '' }));
+    }, [state.selectedId]);
+    // ── SIGINT ────────────────────────────────────────────────────────────────
+    useEffect(() => {
+        const handler = () => {
+            if (Object.keys(state.draftsByComponentId).length > 0) {
+                dispatch({ type: 'OPEN_DIALOG', which: 'quit' });
+            }
+            else {
+                process.exit(1);
+            }
+        };
+        process.on('SIGINT', handler);
+        return () => {
+            process.off('SIGINT', handler);
+        };
+    }, [state.draftsByComponentId]);
+    // ── Auto-clear errors ─────────────────────────────────────────────────────
+    useEffect(() => {
+        if (!state.saveError)
+            return;
+        const t = setTimeout(() => dispatch({ type: 'CLEAR_ERRORS' }), 3000);
+        return () => clearTimeout(t);
+    }, [state.saveError]);
+    // ── Seed preview from env (non-live mode) ─────────────────────────────────
+    useEffect(() => {
+        if (!state.session || state.previewResponse)
+            return;
+        const raw = process.env['EDS_PREVIEW_COUNTS'];
+        if (!raw)
+            return;
+        try {
+            const counts = JSON.parse(raw);
+            const make = (n) => Array(n).fill({});
+            dispatch({
+                type: 'PREVIEW_SUCCESS',
+                response: {
+                    components: {
+                        new: make(counts.compNew ?? 0),
+                        changed: make(counts.compChanged ?? 0),
+                        removed: make(counts.compRemoved ?? 0),
+                        unchanged: make(counts.compUnchanged ?? 0),
+                    },
+                    tokens: {
+                        new: make(counts.tokNew ?? 0),
+                        changed: make(counts.tokChanged ?? 0),
+                        removed: make(counts.tokRemoved ?? 0),
+                        unchanged: make(counts.tokUnchanged ?? 0),
+                    },
+                },
+                annotations: {},
+            });
+        }
+        catch { }
+    }, [state.session]);
+}
+// ── Helpers ───────────────────────────────────────────────────────────────────
+async function persistDraft(componentId, draft, state, dispatch, services) {
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const parsed = JSON.parse(draft);
+        const component = state.session.components.find((c) => c.id === componentId);
+        const currentStatus = component?.status;
+        const newStatus = currentStatus === 'needs-review' ? 'reviewed' : (currentStatus ?? 'reviewed');
+        const updatedComponents = state.session.components.map((c) => c.id === componentId ? { ...c, editedProposal: parsed, status: newStatus } : c);
+        await services.saveState({ ...state.session, components: updatedComponents });
+        await services.appendEvent({ type: 'draft_saved', payload: { componentId } });
+        const db = openPipelineDb();
+        try {
+            storeRawComponents(db, services.sessionId, updatedComponents.map((c) => c.editedProposal), {
+                status: 'generated',
+                preserveCDF: true,
+            });
+        }
+        finally {
+            db.close();
+        }
+        dispatch({ type: 'DRAFT_PERSIST_DONE', componentId, updatedComponents });
+    }
+    catch {
+        dispatch({ type: 'DRAFT_PERSIST_DONE', componentId, updatedComponents: state.session.components });
+    }
+}
+async function persistFinalize(state, dispatch, services) {
+    if (state.mode.type !== 'finalized')
+        return;
+    const { accepted, rejected, excluded } = state.mode;
+    try {
+        await services.appendEvent({ type: 'finalized', payload: { accepted, rejected, excluded } });
+        const acceptedNames = new Set(state.session.components.filter((c) => c.status === 'accepted').map((c) => c.name));
+        const db = openPipelineDb();
+        try {
+            storeRawComponents(db, services.sessionId, state.session.components.map((c) => c.editedProposal), { status: 'extracted', preserveCDF: true });
+            if (acceptedNames.size > 0) {
+                db.prepare(`UPDATE raw_components SET status = 'generated' WHERE session_id = ? AND name IN (${[...acceptedNames].map(() => '?').join(',')})`).run(services.sessionId, ...acceptedNames);
+            }
+        }
+        finally {
+            db.close();
+        }
+        process.stdout.write(JSON.stringify({ status: 'finalized', sessionDir: state.paths.sessionDir, accepted, rejected, excluded }, null, 2) + '\n');
+    }
+    catch (err) {
+        dispatch({ type: 'SAVE_ERROR', message: String(err) });
+    }
+}
+function schedulePreviewRefresh(state, dispatch, sessionId, timerRef) {
+    if (timerRef.current)
+        clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+        timerRef.current = null;
+        // Sync session to DB
+        const db = openPipelineDb();
+        try {
+            db.prepare(`UPDATE raw_components SET status = 'extracted' WHERE session_id = ?`).run(sessionId);
+            const acceptedNames = state
+                .session.components.filter((c) => c.status === 'accepted' || c.status === 'reviewed')
+                .map((c) => c.name);
+            if (acceptedNames.length > 0) {
+                db.prepare(`UPDATE raw_components SET status = 'generated' WHERE session_id = ? AND name IN (${acceptedNames.map(() => '?').join(',')})`).run(sessionId, ...acceptedNames);
+            }
+        }
+        finally {
+            db.close();
+        }
+        const cmaToken = process.env['EDS_CMA_TOKEN'];
+        const spaceId = process.env['EDS_SPACE_ID'];
+        const environmentId = process.env['EDS_ENVIRONMENT_ID'];
+        const tokensPath = process.env['EDS_TOKENS_PATH'];
+        if (!cmaToken || !spaceId || !environmentId)
+            return;
+        dispatch({ type: 'PREVIEW_START' });
+        void (async () => {
+            try {
+                const pdb = openPipelineDb();
+                let components = [];
+                try {
+                    components = loadCDFComponents(pdb, sessionId);
+                }
+                finally {
+                    pdb.close();
+                }
+                let tokens = [];
+                if (tokensPath)
+                    tokens = await readTokensFromPath('tokens', tokensPath);
+                const manifest = buildManifest(components, tokens);
+                if (!manifest.componentsManifest)
+                    manifest.componentsManifest = {};
+                const client = new ImportApiClient({ cmaToken, spaceId, environmentId });
+                const preview = await client.previewImport(manifest);
+                const annotations = {};
+                for (const item of preview.components.new) {
+                    const name = item.name ?? '';
+                    if (name)
+                        annotations[name] = 'new';
+                }
+                for (const item of preview.components.removed)
+                    annotations[item.name] = 'removed';
+                for (const item of preview.components.changed) {
+                    annotations[item.current.name] =
+                        item.changeClassification?.classification === 'breaking' ? 'breaking' : 'changed';
+                }
+                dispatch({ type: 'PREVIEW_SUCCESS', response: preview, annotations });
+            }
+            catch (err) {
+                const msg = err instanceof Error ? err.message : String(err);
+                dispatch({ type: 'PREVIEW_ERROR', message: msg.includes('token') ? 'Preview request failed' : msg });
+            }
+        })();
+    }, 500);
+}

package/dist/src/analyze/select/tui/hooks/useUndo.js

@@ -1,26 +1,20 @@
 import { useState } from 'react';
+// Single-state implementation — push and undo are atomic single setState calls,
+// eliminating the double-render that caused flash in the JsonEditor.
 export function useUndo(initial, maxSize = 50) {
-    const [stack, setStack] = useState([]);
-    const [current, setCurrent] = useState(initial);
+    const [state, setState] = useState({ stack: [], current: initial });
     return {
-        current,
-        push: (next) => {
-            setStack((prev) => {
-                const newStack = [...prev, current];
-                return newStack.length > maxSize ? newStack.slice(1) : newStack;
-            });
-            setCurrent(next);
-        },
-        undo: () => {
-            setStack((prev) => {
-                if (prev.length === 0)
-                    return prev;
-                const newStack = prev.slice(0, -1);
-                setCurrent(prev[prev.length - 1]);
-                return newStack;
-            });
-        },
-        canUndo: stack.length > 0,
-        clear: () => setStack([]),
+        current: state.current,
+        push: (next) => setState(({ stack, current }) => {
+            const newStack = [...stack, current];
+            return { stack: newStack.length > maxSize ? newStack.slice(1) : newStack, current: next };
+        }),
+        undo: () => setState(({ stack, current }) => {
+            if (stack.length === 0)
+                return { stack, current };
+            return { stack: stack.slice(0, -1), current: stack[stack.length - 1] };
+        }),
+        canUndo: state.stack.length > 0,
+        clear: () => setState(({ current }) => ({ stack: [], current })),
     };
 }

package/dist/src/analyze/select/tui/inputToAction.d.ts

@@ -0,0 +1,13 @@
+import type { AppAction, AppState, applyEditorKey } from './state.js';
+export type Key = Parameters<typeof applyEditorKey>[2] & {
+    tab: boolean;
+    pageUp: boolean;
+    pageDown: boolean;
+    shift: boolean;
+};
+/**
+ * Pure function: maps a keypress to an AppAction (or null).
+ * No hooks. No closures over stale React state.
+ * Branching is on mode — the committed state from the reducer.
+ */
+export declare function inputToAction(input: string, key: Key, state: AppState, visibleCount: number, terminalWidth: number): AppAction | null;

package/dist/src/analyze/select/tui/inputToAction.js

@@ -0,0 +1,68 @@
+/**
+ * Pure function: maps a keypress to an AppAction (or null).
+ * No hooks. No closures over stale React state.
+ * Branching is on mode — the committed state from the reducer.
+ */
+export function inputToAction(input, key, state, visibleCount, terminalWidth) {
+    const { mode } = state;
+    // ── Dialog ────────────────────────────────────────────────────────────────
+    if (mode.type === 'dialog') {
+        if (input === 'y' || key.return) {
+            if (mode.which === 'finalize')
+                return { type: 'FINALIZE_CONFIRM' };
+            if (mode.which === 'quit')
+                return { type: 'QUIT_CONFIRM' };
+            return { type: 'CLOSE_DIALOG' };
+        }
+        if (input === 'n' || key.escape)
+            return { type: 'CLOSE_DIALOG' };
+        return null;
+    }
+    // ── Editing ───────────────────────────────────────────────────────────────
+    if (mode.type === 'editing') {
+        if (key.ctrl && input === 's')
+            return { type: 'EDITOR_VALIDATE' };
+        if (key.escape)
+            return { type: 'DRAFT_DISCARD' };
+        // All other keys go to the editor
+        return { type: 'EDITOR_KEY', input, key, visibleHeight: visibleCount - 4 };
+    }
+    // ── Finalized ─────────────────────────────────────────────────────────────
+    if (mode.type === 'finalized') {
+        if (key.return || input === 'q' || key.escape)
+            process.exit(0);
+        return null;
+    }
+    // ── Browsing ──────────────────────────────────────────────────────────────
+    if (input === 'q')
+        return { type: 'OPEN_DIALOG', which: 'quit' };
+    if (input === '?')
+        return { type: 'OPEN_DIALOG', which: 'help' };
+    if (input === 'F')
+        return { type: 'OPEN_DIALOG', which: 'finalize' };
+    if (key.tab)
+        return { type: 'TOGGLE_FOCUS' };
+    if (input === 'a')
+        return { type: 'ACCEPT' };
+    if (input === 'r')
+        return { type: 'REJECT' };
+    if (input === 'e')
+        return { type: 'ENTER_EDIT' };
+    if (input === 's')
+        return { type: 'TOGGLE_SOURCE', terminalWidth };
+    if (input === 'A')
+        return { type: 'APPROVE_ALL' };
+    if (mode.sidebarFocused) {
+        if (key.upArrow || input === 'k')
+            return { type: 'SIDEBAR_UP', visibleCount };
+        if (key.downArrow || input === 'j')
+            return { type: 'SIDEBAR_DOWN', visibleCount };
+    }
+    else {
+        if (key.upArrow || input === 'k')
+            return { type: 'SCROLL_UP' };
+        if (key.downArrow || input === 'j')
+            return { type: 'SCROLL_DOWN' };
+    }
+    return null;
+}

package/dist/src/analyze/select/tui/state.d.ts

@@ -0,0 +1,136 @@
+import type { PreviewAnnotation, ReviewComponentRecord, ReviewComponentSummary, ReviewSessionSnapshot } from '../types.js';
+import type { ServerPreviewResponse } from '@contentful/experience-design-system-types';
+export type AppMode = {
+    type: 'browsing';
+    sidebarFocused: boolean;
+    sourceVisible: boolean;
+} | {
+    type: 'editing';
+    componentId: string;
+} | {
+    type: 'dialog';
+    which: 'help' | 'finalize' | 'quit';
+} | {
+    type: 'finalized';
+    accepted: number;
+    rejected: number;
+    excluded: number;
+};
+export type EditorCursor = {
+    lines: string[];
+    cursorRow: number;
+    cursorCol: number;
+};
+export type EditorState = {
+    cursor: EditorCursor;
+    undoStack: EditorCursor[];
+    scrollRow: number;
+    validationError: string | null;
+};
+export declare function applyEditorKey(e: EditorState, input: string, key: {
+    ctrl: boolean;
+    meta: boolean;
+    return: boolean;
+    backspace: boolean;
+    delete: boolean;
+    escape: boolean;
+    upArrow: boolean;
+    downArrow: boolean;
+    leftArrow: boolean;
+    rightArrow: boolean;
+}, visibleHeight: number): EditorState | null;
+export type AppState = {
+    mode: AppMode;
+    session: ReviewSessionSnapshot | null;
+    paths: {
+        sessionDir: string;
+        statePath: string;
+        eventsPath: string;
+    } | null;
+    selectedId: string | null;
+    sortedIds: string[];
+    sessionSummary: ReviewComponentSummary[];
+    sidebarScrollOffset: number;
+    jsonScrollOffset: number;
+    draftsByComponentId: Record<string, string>;
+    editor: EditorState | null;
+    sourceCodeById: Record<string, string>;
+    previewAnnotations: Record<string, PreviewAnnotation>;
+    previewResponse: ServerPreviewResponse | null;
+    previewLoading: boolean;
+    previewError: string | null;
+    saveError: string | null;
+};
+export declare const initialState: AppState;
+export type AppAction = {
+    type: 'SESSION_LOADED';
+    session: ReviewSessionSnapshot;
+    paths: AppState['paths'];
+} | {
+    type: 'SELECT';
+    id: string;
+} | {
+    type: 'SIDEBAR_UP';
+    visibleCount: number;
+} | {
+    type: 'SIDEBAR_DOWN';
+    visibleCount: number;
+} | {
+    type: 'ACCEPT';
+} | {
+    type: 'REJECT';
+} | {
+    type: 'APPROVE_ALL';
+} | {
+    type: 'ENTER_EDIT';
+} | {
+    type: 'EDITOR_KEY';
+    input: string;
+    key: Parameters<typeof applyEditorKey>[2];
+    visibleHeight: number;
+} | {
+    type: 'EDITOR_VALIDATE';
+} | {
+    type: 'DRAFT_DISCARD';
+} | {
+    type: 'TOGGLE_FOCUS';
+} | {
+    type: 'SCROLL_UP';
+} | {
+    type: 'SCROLL_DOWN';
+} | {
+    type: 'TOGGLE_SOURCE';
+    terminalWidth: number;
+} | {
+    type: 'OPEN_DIALOG';
+    which: 'help' | 'finalize' | 'quit';
+} | {
+    type: 'CLOSE_DIALOG';
+} | {
+    type: 'FINALIZE_CONFIRM';
+} | {
+    type: 'QUIT_CONFIRM';
+} | {
+    type: 'SOURCE_LOADED';
+    componentId: string;
+    code: string;
+} | {
+    type: 'PREVIEW_START';
+} | {
+    type: 'PREVIEW_SUCCESS';
+    response: ServerPreviewResponse;
+    annotations: Record<string, PreviewAnnotation>;
+} | {
+    type: 'PREVIEW_ERROR';
+    message: string;
+} | {
+    type: 'SAVE_ERROR';
+    message: string;
+} | {
+    type: 'CLEAR_ERRORS';
+} | {
+    type: 'DRAFT_PERSIST_DONE';
+    componentId: string;
+    updatedComponents: ReviewComponentRecord[];
+};
+export declare function reducer(state: AppState, action: AppAction): AppState;