fix: enable and fix new eslint rules

Signed-off-by: mmolisani <mmolisani@bloomberg.net>

Author: molisani

docs/eslint.config.mjs

@@ -1,9 +1,24 @@
+import react from "eslint-plugin-react";
+import hooks from "eslint-plugin-react-hooks";
+import a11y from "eslint-plugin-jsx-a11y";
 import ts from "typescript-eslint";
 import common from "../eslint.config.mjs";
 
 export default [
     ...ts.configs.strictTypeChecked,
     ...common,
+    {
+        ...react.configs.flat.recommended,
+        settings: {
+            react: {
+                version: "detect",
+            },
+        },
+    },
+    react.configs.flat["jsx-runtime"],
+    hooks.configs.flat.recommended,
+    a11y.flatConfigs.recommended,
+    a11y.flatConfigs.strict,
     {
         languageOptions: {
             parserOptions: {

docs/package.json

@@ -38,6 +38,9 @@
         "@docusaurus/types": "3.9.2",
         "@stricli/core": "^1.0.0",
         "docusaurus-plugin-typedoc": "^1.0.5",
+        "eslint-plugin-jsx-a11y": "^6.10.2",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^7.0.1",
         "monaco-editor": "^0.55.1",
         "sass": "^1.79.4",
         "typedoc": "^0.26.7",

docs/src/components/StricliPlayground/Terminal/Ansi.tsx

@@ -2,7 +2,6 @@
 // Distributed under the terms of the Apache 2.0 license.
 import { riffle } from "@site/src/util/array";
 import { ansiToJson } from "anser";
-import React from "react";
 
 export interface AnsiProps {
     children?: string;

docs/src/components/StricliPlayground/Terminal/index.tsx

@@ -2,6 +2,7 @@
 // Distributed under the terms of the Apache 2.0 license.
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import Ansi from "./Ansi";
+import clsx from "clsx";
 
 export type TerminalHistoryLine =
     | readonly [text: string, stream: "stdout" | "stderr"]
@@ -40,14 +41,15 @@ export default function Terminal({
     const [input, setInput] = useState<string>(defaultValue);
     const [history, setHistory] = useState<readonly TerminalHistoryLine[]>([]);
     const [historyIndex, setHistoryIndex] = useState<number | undefined>(void 0);
-    const [completions, setCompletions] = useState<readonly string[]>([]);
-    const [completionIndex, setCompletionIndex] = useState<number | undefined>(void 0);
+    const autocomplete = useRef<[index: number, completions: readonly string[]] | undefined>(void 0);
+
+    const selectedStdinIndex = typeof historyIndex === "number" ? historyIndex * 2 + 1 : void 0;
 
     useEffect(() => {
         if (appLoaded) {
             if (!firstRunComplete) {
-                setFirstRunComplete(true);
                 void (async () => {
+                    setFirstRunComplete(true);
                     const initialHistory = [...history];
                     for (const input of initialInputs) {
                         const lines = await executeInput(input);
@@ -58,7 +60,7 @@ export default function Terminal({
                 })();
             }
         }
-    }, [appLoaded, firstRunComplete, input, history, historyIndex, collapsed]);
+    }, [appLoaded, firstRunComplete, initialInputs, executeInput, history]);
 
     const focusInput = useCallback(() => {
         inputRef.current?.focus();
@@ -68,76 +70,95 @@ export default function Terminal({
         setInput(e.target.value);
     }, []);
 
-    const onKeyDown = useCallback(
-        async (e: React.KeyboardEvent<HTMLInputElement>) => {
-            if (e.key !== "Tab" && typeof completionIndex === "number") {
-                setCompletionIndex(void 0);
-            }
+    const onInputSubmit = useCallback(async () => {
+        const lines = await executeInput(input);
+        setHistory([...lines, ...history]);
+        setHistoryIndex(void 0);
+        setCollapsed(false);
+        setInput("");
+    }, [input, executeInput, history]);
 
-            const inputWithPrefix = `${commandPrefix} ${input}`;
-            if (e.key === "Enter") {
-                const lines = await executeInput(input);
-                setHistory([...lines, ...history]);
-                setHistoryIndex(void 0);
-                setCollapsed(false);
+    const setInputToHistoryAtIndex = useCallback(
+        (index: number) => {
+            const stdinHistory = history.filter((line) => line[1] === "stdin");
+            const historySelection = stdinHistory[index];
+            if (historySelection) {
+                setInput(historySelection[0]);
+            } else {
                 setInput("");
-            } else if (e.key === "ArrowUp") {
-                setHistoryIndex(typeof historyIndex === "number" ? historyIndex + 1 : 0);
-                e.preventDefault();
-            } else if (e.key === "ArrowDown") {
-                if (historyIndex === 0) {
-                    setInput("");
-                    setHistoryIndex(void 0);
-                } else if (typeof historyIndex === "number") {
-                    setHistoryIndex(historyIndex - 1);
-                }
-                e.preventDefault();
-            } else if (e.key === "Tab" && completeInput) {
-                if (typeof completionIndex === "number") {
-                    setCompletionIndex(completionIndex + 1);
-                } else {
-                    const inputCompletions = await completeInput(inputWithPrefix);
-                    const completions = inputCompletions.map((str) => str.slice(commandPrefix.length + 1));
-                    setCompletions(completions);
-                    setCompletionIndex(0);
-                }
-                e.preventDefault();
             }
         },
-        [input, history, historyIndex, completionIndex],
+        [history],
     );
 
-    useEffect(() => {
-        if (typeof historyIndex === "number") {
-            const stdinHistory = history.filter((line) => line[1] === "stdin");
-            const historySelection = stdinHistory[historyIndex];
-            if (historySelection) {
-                setInput(historySelection[0]);
-            } else {
+    const onScrollHistoryUp = useCallback(
+        (e: React.KeyboardEvent<HTMLInputElement>) => {
+            const newIndex = typeof historyIndex === "number" ? (historyIndex + 1) % (history.length / 2) : 0;
+            setHistoryIndex(newIndex);
+            setInputToHistoryAtIndex(newIndex);
+            e.preventDefault();
+        },
+        [history, historyIndex, setInputToHistoryAtIndex],
+    );
+
+    const onScrollHistoryDown = useCallback(
+        (e: React.KeyboardEvent<HTMLInputElement>) => {
+            if (historyIndex === 0) {
                 setInput("");
                 setHistoryIndex(void 0);
+            } else if (typeof historyIndex === "number") {
+                const newIndex = historyIndex - 1;
+                setHistoryIndex(newIndex);
+                setInputToHistoryAtIndex(newIndex);
             }
-        }
-    }, [history, historyIndex]);
+            e.preventDefault();
+        },
+        [historyIndex, setInputToHistoryAtIndex],
+    );
 
-    useEffect(() => {
-        if (typeof completionIndex === "number") {
-            const completionSelection = completions[completionIndex];
-            if (completionSelection) {
-                setInput(completionSelection);
-            } else if (completions.length > 0) {
-                setCompletionIndex(completionIndex % completions.length);
+    const onToggleAutocomplete = useCallback(
+        async (e: React.KeyboardEvent<HTMLInputElement>) => {
+            let currentIndex: number;
+            let completions: readonly string[];
+            if (autocomplete.current) {
+                [currentIndex, completions] = autocomplete.current;
             } else {
-                setCompletionIndex(void 0);
+                completions = await completeInput(input);
+                currentIndex = -1;
+                autocomplete.current = [0, completions];
             }
-        }
-    }, [completions, completionIndex]);
+            const nextIndex = (currentIndex + 1) % completions.length;
+            setInput(completions[nextIndex]);
+            autocomplete.current = [nextIndex, completions];
+            e.preventDefault();
+        },
+        [autocomplete, input, completeInput],
+    );
+
+    const onKeyDown = useCallback(
+        async (e: React.KeyboardEvent<HTMLInputElement>) => {
+            if (e.key !== "Tab" && autocomplete) {
+                autocomplete.current = void 0;
+            }
+
+            if (e.key === "Enter") {
+                await onInputSubmit();
+            } else if (e.key === "ArrowUp") {
+                onScrollHistoryUp(e);
+            } else if (e.key === "ArrowDown") {
+                onScrollHistoryDown(e);
+            } else if (e.key === "Tab") {
+                await onToggleAutocomplete(e);
+            }
+        },
+        [autocomplete, onInputSubmit, onScrollHistoryUp, onScrollHistoryDown, onToggleAutocomplete],
+    );
 
     const clearHistory = useCallback(() => {
         setHistory([]);
         setHistoryIndex(void 0);
         setCollapsed(true);
-    }, [history, historyIndex, collapsed]);
+    }, []);
 
     const height = collapsed ? `${LINE_HEIGHT_EM}em` : expandedHeight;
 
@@ -149,6 +170,7 @@ export default function Terminal({
                     Clear
                 </button>
             </div>
+            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events -- Click handler exists to focus on actual input element */}
             <div className="terminal-output" style={{ height }} onClick={focusInput}>
                 <div className="ansi-block terminal-input">
                     <span style={{ display: "inline-flex" }}>
@@ -169,7 +191,13 @@ export default function Terminal({
                 {history.map((line, i) => {
                     const text = line[1] === "stdin" ? `${commandPrompt}${line[2]} ${line[0]}` : line[0];
                     return (
-                        <Ansi key={`terminal-history-line-${i}`} className={`terminal-${line[1]}`}>
+                        <Ansi
+                            key={`terminal-history-line-${i}`}
+                            className={clsx({
+                                [`terminal-${line[1]}`]: true,
+                                [`terminal-history-selected`]: i === selectedStdinIndex,
+                            })}
+                        >
                             {text}
                         </Ansi>
                     );

docs/src/components/StricliPlayground/impl.tsx

@@ -1,6 +1,6 @@
 // Copyright 2024 Bloomberg Finance L.P.
 // Distributed under the terms of the Apache 2.0 license.
-import React, { useCallback, useMemo, useRef, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import Tippy from "@tippyjs/react";
 import Admonition from "@theme/Admonition";
 
@@ -62,9 +62,8 @@ export default function StricliPlayground({
     editorHeight = "250px",
     terminalHeight = "250px",
 }: StricliPlaygroundProps): React.JSX.Element {
-    const appRef = useRef<core.Application<core.CommandContext> | undefined>(void 0);
+    const [loadedApp, setLoadedApp] = useState<core.Application<core.CommandContext> | undefined>(void 0);
     const [lastLoaded, setLastLoaded] = useState<Date | undefined>();
-    const [appName, setAppName] = useState<string>("loading...");
 
     const id = useMemo(() => crypto.randomUUID(), []);
     const modelDirectory = `code_${id}`;
@@ -86,17 +85,16 @@ export default function StricliPlayground({
                 if (exports) {
                     const app = exports.default as PlaygroundApp;
                     app.consoleRedirect = consoleRedirect;
-                    appRef.current = app;
+                    setLoadedApp(app);
                     setLastLoaded(new Date());
-                    setAppName(app.config.name);
                 } else {
-                    appRef.current = void 0;
+                    setLoadedApp(void 0);
                 }
             } else {
-                appRef.current = void 0;
+                setLoadedApp(void 0);
             }
         },
-        [appRef],
+        [modelDirectory],
     );
 
     const lastLoadedTimestamp = useMemo(() => {
@@ -147,25 +145,23 @@ export default function StricliPlayground({
                 onEmit={onWorkspaceChange}
             ></TypeScriptPlayground>
             <Terminal
-                appLoaded={Boolean(appRef.current)}
+                appLoaded={Boolean(loadedApp)}
                 startCollapsed={collapsed}
                 height={terminalHeight}
-                commandPrefix={appName}
+                commandPrefix={loadedApp?.config.name ?? "loading..."}
                 initialInputs={initialInputs.slice(0, -1)}
                 defaultValue={initialInputs.at(-1)}
                 executeInput={async (input) => {
-                    const app = appRef.current;
-                    if (!app) {
+                    if (!loadedApp) {
                         return [["Application not loaded, check for type errors above ^", "stderr"]];
                     }
                     const argv = parseArgv(input);
-                    const lines = await runApplication(app, argv);
+                    const lines = await runApplication(loadedApp, argv);
                     const reversed = [...lines].reverse();
-                    return [...reversed, [input, "stdin", app.config.name]];
+                    return [...reversed, [input, "stdin", loadedApp.config.name]];
                 }}
                 completeInput={async (input) => {
-                    const app = appRef.current;
-                    if (!app) {
+                    if (!loadedApp) {
                         console.error("Application not loaded");
                         return [];
                     }
@@ -175,7 +171,9 @@ export default function StricliPlayground({
                         finalInput = "";
                         argv.push("");
                     }
-                    const completions = await proposeCompletions(app, argv);
+                    console.log("completeInput", argv);
+                    const completions = await proposeCompletions(loadedApp, argv);
+                    console.log("completions", completions);
                     if (finalInput === "") {
                         return completions.map((completion) => `${input}${completion}`);
                     }