feat: Changed to custom components intead of inkjs

Author: kevinwang5658

package-lock.json

@@ -7,7 +7,6 @@
     "@codifycli/ink-form": "0.0.12",
     "@codifycli/schemas": "1.1.0-beta4",
     "@homebridge/node-pty-prebuilt-multiarch": "^0.12.0-beta.5",
-    "@inkjs/ui": "^2",
     "@mischnic/json-sourcemap": "^0.1.1",
     "@oclif/core": "^4.0.8",
     "@oclif/plugin-autocomplete": "^3.2.24",

package.json

@@ -1,5 +1,4 @@
 import { Form, FormProps } from '@codifycli/ink-form';
-import { TextInput } from '@inkjs/ui';
 import chalk from 'chalk';
 import { Box, Static, Text } from 'ink';
 import SelectInput from 'ink-select-input';
@@ -21,6 +20,7 @@ import { PlanComponent } from './plan/plan.js';
 import { ProgressDisplay } from './progress/progress-display.js';
 import { PromptPressKeyToContinue } from './widgets/PromptPressKeyToContinue.js';
 import { SudoPasswordInput } from './widgets/SudoPasswordInput.js';
+import { TextInput } from './widgets/TextInput.js';
 
 export function DefaultComponent(props: {
   emitter: EventEmitter

src/ui/components/default-component.tsx

@@ -1,4 +1,3 @@
-import { OrderedList } from '@inkjs/ui';
 import { Box, Text } from 'ink';
 import React from 'react';
 
@@ -15,13 +14,11 @@ export function ImportResultComponent(props: {
     {
       result.length > 0 && !props.showConfigs && (<Box flexDirection="column">
         <Text bold={true} color={'green'}>Successfully imported the following configs:</Text>
-        <OrderedList>
-          {
-            result.map((r, idx) => <OrderedList.Item key={idx}>
-              <Text color={'green'}>{r.type}</Text>
-            </OrderedList.Item>)
-          }
-        </OrderedList>
+        <Box flexDirection="column">
+          {result.map((r, idx) => (
+            <Text key={idx} color={'green'}>{idx + 1}. {r.type}</Text>
+          ))}
+        </Box>
       </Box>)
     }
     {
@@ -39,13 +36,11 @@ export function ImportResultComponent(props: {
     {
       errors.length > 0 && (<Box flexDirection="column">
         <Text bold={true} color={'yellow'}>The following configs failed to import:</Text>
-        <OrderedList>
-          {
-            errors.map((e, idx) => <OrderedList.Item key={idx}>
-              <Text color={'yellow'}>{e}</Text>
-            </OrderedList.Item>)
-          }
-        </OrderedList>
+        <Box flexDirection="column">
+          {errors.map((e, idx) => (
+            <Text key={idx} color={'yellow'}>{idx + 1}. {e}</Text>
+          ))}
+        </Box>
       </Box>)
     }
 

src/ui/components/import/import-result.tsx

@@ -1,5 +1,4 @@
-import { Select } from '@inkjs/ui';
-import { Box, Static, Text } from 'ink';
+import { Box, Static, Text, useInput } from 'ink';
 import BigText from 'ink-big-text';
 import Gradient from 'ink-gradient';
 import EventEmitter from 'node:events';
@@ -8,6 +7,12 @@ import React from 'react';
 import { RenderEvent } from '../../reporters/reporter.js';
 
 export function InitBanner(props: { emitter: EventEmitter }) {
+  useInput((_, key) => {
+    if (key.return) {
+      props.emitter.emit(RenderEvent.PROMPT_RESULT);
+    }
+  });
+
   return <Box flexDirection='column'>
     <Static items={[{}]}>{
       () => <Box flexDirection='column' key='0'>
@@ -20,6 +25,6 @@ export function InitBanner(props: { emitter: EventEmitter }) {
         <Text bold>Codify will scan your system for any supported programs or settings and automatically generate configs for you.</Text>
       </Box>
     }</Static>
-    <Select onChange={() => { props.emitter.emit(RenderEvent.PROMPT_RESULT); }} options={[{ label: 'Continue', value: 'Continue' }]}/>
+    <Text dimColor>Press Enter to continue</Text>
   </Box>
 }

src/ui/components/init/InitBanner.tsx

@@ -0,0 +1,37 @@
+import { Text, useInput } from 'ink';
+import React, { useState } from 'react';
+
+export function TextInput(props: {
+  onSubmit: (value: string) => void;
+  placeholder?: string;
+}) {
+  const { onSubmit, placeholder } = props;
+  const [value, setValue] = useState('');
+
+  useInput((input, key) => {
+    if (key.return) {
+      onSubmit(value);
+      return;
+    }
+
+    if (key.backspace || key.delete) {
+      setValue((prev) => prev.slice(0, -1));
+      return;
+    }
+
+    if (input && !key.ctrl && !key.meta) {
+      setValue((prev) => prev + input);
+    }
+  });
+
+  const showPlaceholder = value.length === 0 && placeholder;
+
+  return (
+    <Text>
+      {showPlaceholder
+        ? <Text dimColor>{placeholder}<Text inverse> </Text></Text>
+        : <Text>{value}<Text inverse> </Text></Text>
+      }
+    </Text>
+  );
+}