Handroll terminal component (#209)

Fixes #137

This removes the dependency on the `crt-terminal` package, which will
allow us to upgrade to docusaurus v3.5 and React v18 with no peer
dependency issues. For more context, see the linked issue.

Note that even if we decide to migrate off of Docusaurus, this would
most likely still have been a problem since it was blocking us from
updating React.

---------

Signed-off-by: Steve Ayers <[email protected]>
Signed-off-by: Timo Stamm <[email protected]>
Signed-off-by: dependabot[bot] <[email protected]>
Signed-off-by: Carol Gunby <[email protected]>
Signed-off-by: hirasawayuki <[email protected]>
Signed-off-by: Nick Snyder <[email protected]>
Signed-off-by: Philip K. Warren <[email protected]>
Signed-off-by: Dan Rice <[email protected]>
Signed-off-by: Ryan Linton <[email protected]>
Co-authored-by: Stefan VanBuren <[email protected]>
Co-authored-by: Derek Perez <[email protected]>
Co-authored-by: Nick Snyder <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Timo Stamm <[email protected]>
Co-authored-by: Carol Gunby <[email protected]>
Co-authored-by: Yuki Hirasawa <[email protected]>
Co-authored-by: Philip K. Warren <[email protected]>
Co-authored-by: Dan Rice <[email protected]>
Co-authored-by: SimulShift <[email protected]>
Co-authored-by: Ryan Linton <[email protected]>
Co-authored-by: Nick Snyder <[email protected]>

package.json

@@ -29,7 +29,6 @@
     "@docusaurus/theme-search-algolia": "^2.4.3",
     "@react-hookz/web": "^24.0.4",
     "clsx": "^2.1.1",
-    "crt-terminal": "^1.0.13",
     "prism-react-renderer": "^2.4.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"

src/components/eliza-demo/index.tsx

@@ -13,18 +13,10 @@
 // limitations under the License.
 
 import { ElizaService } from "@buf/connectrpc_eliza.connectrpc_es/connectrpc/eliza/v1/eliza_connect";
-import React, { useCallback, useEffect, useRef } from "react";
-import {
-  Terminal,
-  useEventQueue,
-  textLine,
-  textWord,
-  commandLine,
-} from "crt-terminal";
+import React, { useCallback, useState } from "react";
 import { createPromiseClient } from "@connectrpc/connect";
 import { createConnectTransport } from "@connectrpc/connect-web";
-import styles from "./styles.module.css";
-import { TerminalHeader } from "../home/examples";
+import { Terminal, Message } from "../terminal";
 
 const host = "https://demo.connectrpc.com";
 
@@ -34,63 +26,43 @@ const transport = createConnectTransport({
 
 const elizaServicePromiseClient = createPromiseClient(ElizaService, transport);
 
-export const ElizaDemo: React.FC<{ focusOnMount?: boolean }> = ({
-  focusOnMount = false,
-}) => {
-  const eventQueue = useEventQueue();
-  const { print, focus } = eventQueue.handlers;
+interface DemoProps {
+  focusOnMount?: boolean;
+}
 
-  const callbackRef = useRef(false);
-  useEffect(() => {
-    if (callbackRef.current) {
-      return;
-    }
-    print([
-      commandLine({
-        words: [textWord({ characters: "> Meet Eliza, our psychotherapist." })],
-      }),
-      textLine({
-        words: [
-          textWord({ characters: "Eliza: " }),
-          textWord({ characters: "Hi! How are you feeling?" }),
-        ],
-        className: styles.elizaResponse,
-      }),
-    ]);
-    callbackRef.current = true;
-  }, []);
+export const ElizaDemo: React.FC<DemoProps> = ({ focusOnMount = false }) => {
+  const [conversation, setConversation] = useState<Message[]>([
+    {
+      sender: "user",
+      text: "Meet Eliza, our psychotherapist",
+    },
+    {
+      sender: "eliza",
+      text: "Hello, how are you feeling?",
+    },
+  ]);
 
   const handleCommand = useCallback(
-    async (str: string) => {
+    async (inputText: string) => {
       const response = await elizaServicePromiseClient.say({
-        sentence: str,
+        sentence: inputText,
       });
-      print([
-        textLine({
-          words: [
-            textWord({ characters: "Eliza: " }),
-            textWord({ characters: response.sentence }),
-          ],
-          className: styles.elizaResponse,
-        }),
-      ]);
+      const updated = [
+        { sender: "user", text: inputText } as Message,
+        { sender: "eliza", text: response.sentence } as Message,
+      ];
+      const updatedConvo = [...conversation, ...updated];
+      setConversation(updatedConvo);
+      return;
     },
-    [elizaServicePromiseClient, print],
+    [elizaServicePromiseClient, conversation],
   );
 
   return (
-    <div className={styles.container} onClick={() => focus()}>
-      <TerminalHeader>Connect-Web</TerminalHeader>
-      <Terminal
-        queue={eventQueue}
-        onCommand={handleCommand}
-        effects={{
-          pixels: false,
-          screenEffects: true,
-          textEffects: false,
-        }}
-        focusOnMount={focusOnMount}
-      />
-    </div>
+    <Terminal
+      conversation={conversation}
+      handleCommand={handleCommand}
+      focusOnMount={focusOnMount}
+    />
   );
 };

src/components/home/examples.module.css

@@ -58,47 +58,6 @@
   align-items: center;
 }
 
-.terminalHeaderWrapper {
-  display: flex;
-  border-bottom: 1px solid #cbcbde;
-  height: 40px;
-  justify-content: flex-start;
-  align-items: center;
-  padding-left: 14px;
-  padding-right: 14px;
-  background-color: #f4f5fe;
-  width: 100%;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
-}
-
-.terminalHeaderFakeButtons {
-  display: flex;
-  gap: 8px;
-  position: absolute;
-}
-
-.terminalHeaderFakeButton {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  border: 1px solid #cbcbde;
-}
-
-.terminalHeaderText {
-  color: #9699b6;
-  font-family: var(--buf-mono-font);
-  text-transform: uppercase;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 18px;
-  text-align: center;
-  letter-spacing: 0.08em;
-  flex: 1 1 auto;
-  display: flex;
-  justify-content: center;
-}
-
 .codeFooter {
   padding-top: var(--ifm-pre-padding);
   padding-right: var(--ifm-pre-padding);

src/components/home/examples.tsx

@@ -12,8 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import React, { useEffect, useState } from "react";
 import clsx from "clsx";
-import React, { PropsWithChildren, useEffect, useState } from "react";
 import classes from "./examples.module.css";
 import codeBlockStyles from "@site/src/theme/CodeBlock/styles.module.css";
 import {
@@ -32,6 +32,7 @@ import { Highlight } from "prism-react-renderer";
 import Translate, { translate } from "@docusaurus/Translate";
 import Tooltip from "../tooltip";
 import { ElizaDemo } from "../eliza-demo";
+import { TerminalHeader } from "../terminal";
 
 const plainHttpTerminalContent = `
 $ curl \\
@@ -309,21 +310,3 @@ function CodeBlock({
     </Highlight>
   );
 }
-
-type TerminalHeaderProps = {
-  children: React.ReactNode;
-};
-export const TerminalHeader: React.FC<TerminalHeaderProps> = ({
-  children,
-}: PropsWithChildren<TerminalHeaderProps>) => {
-  return (
-    <div className={clsx(classes.terminalHeaderWrapper)}>
-      <div className={classes.terminalHeaderFakeButtons}>
-        <div className={classes.terminalHeaderFakeButton} />
-        <div className={classes.terminalHeaderFakeButton} />
-        <div className={classes.terminalHeaderFakeButton} />
-      </div>
-      <div className={classes.terminalHeaderText}>{children}</div>
-    </div>
-  );
-};

src/components/terminal/index.tsx

@@ -0,0 +1,15 @@
+// Copyright 2022-2023 The Connect Authors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+export * from "./terminal";