fix: Fixed fullscreen bugs and added additional tests

Author: kevinwang5658

package.json

@@ -36,6 +36,7 @@
   "scripts": {
     "start": "ts-node-esm src/demo/overview.tsx",
     "demo:overview": "tsx src/demo/overview.tsx",
+    "demo:counter": "tsx src/demo/counter.tsx",
     "demo:codify": "tsx src/demo/codify.tsx",
     "demo:packagejson": "tsx src/demo/packagejson.tsx",
     "demo:custommanager": "tsx src/demo/custommanager.tsx",

src/FullScreen.tsx

@@ -1,34 +1,24 @@
-import { Box } from 'ink';
-import React from 'react';
+import { Box, BoxProps } from 'ink';
+import React, { PropsWithChildren, useLayoutEffect } from 'react';
 import { useEffect, useState } from 'react';
 
-export function FullScreen(props) {
-  const [size, setSize] = useState({
-    columns: process.stdout.columns,
-    rows: process.stdout.rows,
-  });
-
+function useStdoutDimensions(): [number, number] {
+  const {columns, rows} = process.stdout;
+  const [size, setSize] = useState({columns, rows});
   useEffect(() => {
     function onResize() {
-      setSize({
-        columns: process.stdout.columns,
-        rows: process.stdout.rows,
-      });
+      const {columns, rows} = process.stdout;
+      setSize({columns, rows});
     }
-
     process.stdout.on("resize", onResize);
-    process.stdout.write("\x1b[?1049h");
-    process.stdout.write("\x1b[?1000h");
     return () => {
       process.stdout.off("resize", onResize);
-      process.stdout.write("\x1b[?1049l");
-      process.stdout.write("\x1b[?1000l");
     };
   }, []);
+  return [size.columns, size.rows];
+}
 
-  return (
-    <Box width={size.columns} height={size.rows}>
-      {props.children}
-    </Box>
-  );
+export const FullScreen: React.FC<PropsWithChildren<BoxProps>> = ({children, ...styles}) => {
+  const [columns, rows] = useStdoutDimensions();
+  return <Box width={columns} height={rows} {...styles}>{children}</Box>;
 }

src/canSubmit.ts

@@ -1,9 +1,11 @@
 import { FormStructure } from './types.js';
 
-export const canSubmit = (form: FormStructure, value: object) => {
+export const canSubmit = (form: FormStructure, values: Array<Record<string, unknown>>) => {
   return form.sections
     .map(section => section.fields)
     .reduce((fields1, fields2) => [...fields1, ...fields2], [])
-    .map(field => !field.required || (value[field.name] !== undefined && value[field.name] !== ''))
+    .map(field => !field.required || (values[field.name] !== undefined && values[field.name] !== ''))
     .reduce((field1, field2) => field1 && field2, true);
+
+  return true;
 };

src/demo/Test.tsx

@@ -0,0 +1,91 @@
+import { Box, Text, useInput, useStdout } from "ink";
+import React, { useEffect, useLayoutEffect } from 'react';
+import { Form } from '../Form.js';
+import { clearInterval } from 'node:timers';
+import { FullScreen } from '../FullScreen.js';
+
+let counter = 0;
+
+export function Test() {
+  const stdout = useStdout();
+
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
+  const [showPrompt, setShowPrompt] = React.useState(false);
+
+  useLayoutEffect(() => {
+    stdout.write('This is ap revious message\n')
+
+    setTimeout(() => {
+      process.stdout.write('\x1b[?1049h');
+      process.stdout.write('\x1b[?1000h');
+      setShowPrompt(true)
+    }, 3000);
+
+  }, []);
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      if (isSubmitted) {
+        stdout.write('hi\n')
+        counter++;
+      }
+
+      if (counter >= 1) {
+        clearInterval(id)
+      }
+    }, 1000)
+  }, [isSubmitted]);
+
+  return (<Box flexDirection='column'>
+    {!isSubmitted && showPrompt && (
+      <Form
+        onSubmit={value => {
+          process.stdout.write('\x1b[?1049l');
+          process.stdout.write('\x1b[?1000l');
+          setIsSubmitted(true)
+        }}
+        form={{
+          title: "Form title",
+          sections: [
+            {
+              title: "asdf-global",
+              fields: [
+                { type: 'string', name: 'plugin', label: 'plugin', required: true },
+                { type: 'string', name: 'version', label: 'version', required: true },
+              ]
+            },
+            {
+              title: "asdf-install",
+              fields: [
+                { type: 'string', name: 'directory', label: 'directory', required: true },
+              ]
+            },
+            {
+              title: "asdf-local",
+              fields: [
+                { type: 'string', name: 'plugin', label: 'plugin', required: true },
+                { type: 'string', name: 'version', label: 'version', required: true },
+                { type: 'string', name: 'directory', label: 'directory' },
+                { type: 'string', name: 'directories', label: 'directories' },
+              ]
+            },
+            {
+              title: "asdf-plugin",
+              fields: [
+                { type: 'string', name: 'plugin', label: 'plugin', required: true },
+                { type: 'string', name: 'versions', label: 'version'},
+                { type: 'string', name: 'gitUrl', label: 'plugin' },
+              ]
+            },
+          ]
+        }}
+      />
+    )}
+    {
+      isSubmitted && (
+        <Text color={'green'}>Submitted!!</Text>
+      )
+    }
+  </Box>)
+
+}

src/demo/codify.tsx

@@ -1,6 +1,7 @@
-import { render } from 'ink';
+import { Box, Text, render } from 'ink';
 import { Form } from '../Form.js';
 import React from 'react';
+import { Test } from './Test.js';
 
 const options = [
   {label: 'Millenium Falcon', value: 'falcon'},
@@ -9,43 +10,13 @@ const options = [
   {label: 'Raizorcrest', value: 'mando'},
 ];
 
+console.log('Test');
+console.log('Test 1');
+console.log('Test 2');
+console.log('Test 3');
+
 render(
-  <Form
-    onSubmit={value => console.log(`Submitted: `, value)}
-    form={{
-      title: "Form title",
-      sections: [
-        {
-          title: "asdf-global",
-          fields: [
-            { type: 'string', name: 'plugin', label: 'plugin', required: true },
-            { type: 'string', name: 'version', label: 'version', required: true },
-          ]
-        },
-        {
-          title: "asdf-install",
-          fields: [
-            { type: 'string', name: 'directory', label: 'directory', required: true },
-          ]
-        },
-        {
-          title: "asdf-local",
-          fields: [
-            { type: 'string', name: 'plugin', label: 'plugin', required: true },
-            { type: 'string', name: 'version', label: 'version', required: true },
-            { type: 'string', name: 'directory', label: 'directory' },
-            { type: 'string', name: 'directories', label: 'directories' },
-          ]
-        },
-        {
-          title: "asdf-plugin",
-          fields: [
-            { type: 'string', name: 'plugin', label: 'plugin', required: true },
-            { type: 'string', name: 'versions', label: 'version'},
-            { type: 'string', name: 'gitUrl', label: 'plugin' },
-          ]
-        },
-      ]
-    }}
-  />
+  <Box>
+    <Test/>
+  </Box>
 );

src/demo/counter.tsx

@@ -0,0 +1,42 @@
+import { Box, Text, render, useApp, useInput } from "ink";
+import React, { useState } from 'react';
+
+console.log('Previous message ')
+console.log('Should still show up')
+
+const Counter = () => {
+  const [counter, setCounter] = React.useState(0);
+  const { exit } = useApp();
+  const [isExited, setIsExited] = useState(false);
+
+  React.useEffect(() => {
+    const timer = setInterval(() => {
+      setCounter(prevCounter => prevCounter + 1);
+    }, 100);
+
+    return () => {
+      clearInterval(timer);
+    };
+  });
+
+  useInput((input, key) => {
+    if (input === "q" || key.escape) {
+      setIsExited(true);
+      process.stdout.write(leaveAltScreenCommand);
+    }
+  });
+
+  return !isExited ? <Text color={'green'}>{counter} tests passed</Text> : <Box flexDirection={'column'}>
+    <Text color={'red'}>Exited</Text>
+    <Text color={'red'}>The program</Text>
+  </Box>
+};
+
+const enterAltScreenCommand = "\x1b[?1049h";
+const leaveAltScreenCommand = "\x1b[?1049l";
+process.stdout.write(enterAltScreenCommand);
+process.on("exit", () => {
+  process.stdout.write(leaveAltScreenCommand);
+});
+
+render(<Counter />);