feat: Added array support. Added a type description for every field. Fixed index issues when entering and exiting a field. Fixed scrolling issues when entering and exiting a field.

Author: kevinwang5658

src/ArrayFieldRenderer.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { FormFieldArray, SpecificFormFieldRendererProps } from './types.js';
+import { Box } from 'ink';
+import TextInput from 'ink-text-input';
+
+export const ArrayFieldRenderer: React.FC<
+  SpecificFormFieldRendererProps<FormFieldArray>
+> = props => {
+  const regex = props.field.regex;
+
+  const change = (value: string) => {
+    if (regex) {
+      const arr = value.split(/(?<!\\),/);
+
+      if (arr.some((i) => !regex.test(i))) {
+        props.onError(`"${value}" does not pass the regex ${regex}`);
+        props.onChange(value as any);
+      }
+    } else {
+      props.onChange(value as any);
+    }
+  };
+
+  return (
+    <Box borderStyle={'round'} width="100%" flexDirection="column">
+      <Box>
+        <TextInput
+          value={props.value?.toString() ?? ''}
+          onChange={value => {
+            props.onClearError();
+            change(value);
+          }}
+          placeholder={props.field.placeholder ?? 'value1, value2, value3...'}
+          onSubmit={() => props.onSetEditingField(undefined)}
+        />
+      </Box>
+    </Box>
+  );
+};

src/Form.tsx

@@ -47,9 +47,18 @@ export const Form: React.FC<FormProps> = props => {
     }
   }, []);
 
+  const onSetEditingField = (field?: string) => {
+    const isEditing = !!editingField;
+    if (!isEditing && field) {
+      const elementNum = sections[currentTab].fields.findIndex((f) => f.name === field);
+      setFocusedElement(elementNum + 1);
+    }
+
+    setEditingField(field);
+  }
+
   const onChangeTab = (tab: number) => {
     setCurrentTab(tab);
-    focusManager.focus('0');
     setFocusedElement(0)
   }
 
@@ -107,7 +116,7 @@ export const Form: React.FC<FormProps> = props => {
     <FullScreen>
       <Box width="100%" height="90%" flexDirection="column" overflowY="hidden">
         <FormHeader {...props} headerRef={headerRef} form={form} currentTab={currentTab} onChangeTab={onChangeTab} editingField={editingField} />
-        <ScrollArea height={fullHeight - headerHeight} key={currentTab} isStart={focusedElement === 0}>
+        <ScrollArea height={fullHeight - headerHeight} key={currentTab} isStart={focusedElement === 0} editingMode={!!editingField}>
           {!editingField && sections[currentTab].description && (
             <Box marginX={4}>
               <DescriptionRenderer description={sections[currentTab]?.description} />
@@ -126,13 +135,13 @@ export const Form: React.FC<FormProps> = props => {
               ? null
               : sections[currentTab].fields.map((field, index) => (
                 <FormFieldRenderer
-                  id={index + ''}
+                  id={`${index}`}
                   field={field}
                   key={field.name + currentTab}
                   form={form}
                   value={value[currentTab][field.name]}
                   onChange={v => setValueAndPropagate(currentTab, { ...value[currentTab], [field.name]: v })}
-                  onSetEditingField={setEditingField}
+                  onSetEditingField={onSetEditingField}
                   editingField={editingField}
                   customManagers={props.customManagers}
                 />

src/FormFieldRenderer.tsx

@@ -105,6 +105,7 @@ export const FormFieldRenderer: React.FC<FormFieldRendererProps<any>> = props =>
         <Box>
           <Text>{props.field.label ?? props.field.name}</Text>
           {props.field.required && <Text color="red">*</Text>}
+          <Text dimColor>{` (${props.field.type})`}</Text>
           <Text>: </Text>
         </Box>
         <Box>{component}</Box>

src/ScrollArea.tsx

@@ -34,13 +34,14 @@ const reducer = (state, action) => {
   }
 };
 
-export function ScrollArea({height, isStart, children}) {
+export function ScrollArea({height, isStart, children, editingMode}) {
   const [state, dispatch] = React.useReducer(reducer, {
     height: 10,
     scrollTop: 0,
   });
   const focusManager = useFocusManager();
   const [canScroll, setCanScroll] = useState(true);
+  const [isEditing, setIsEditing] = useState(false);
   const innerRef = React.useRef();
 
   useLayoutEffect(() => {
@@ -59,6 +60,15 @@ export function ScrollArea({height, isStart, children}) {
     focusManager.enableFocus();
   }, [height, isStart, children.length]);
 
+  // Scroll to the top when entering or exiting edit mode
+  if (!isEditing && editingMode) {
+    setIsEditing(true);
+    dispatch({ type: 'RESET' })
+  } else if (isEditing && !editingMode) {
+    setIsEditing(false);
+    dispatch({ type: 'RESET' })
+  }
+
   React.useEffect(() => {
     const dimensions = measureElement(innerRef.current);
 

src/demo/Test.tsx

@@ -59,15 +59,15 @@ export function Test() {
                 { 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' },
+                { type: 'array', 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' },
+                { type: 'string', name: 'gitUrl', label: 'gitUrl' },
               ]
             },
           ]

src/demo/codify.tsx

@@ -3,13 +3,6 @@ import { Form } from '../Form.js';
 import React from 'react';
 import { Test } from './Test.js';
 
-const options = [
-  {label: 'Millenium Falcon', value: 'falcon'},
-  {label: 'TIE Advanced X1', value: 'tieadv'},
-  {label: 'X-Wing', value: 'xwing'},
-  {label: 'Raizorcrest', value: 'mando'},
-];
-
 console.log('Test');
 console.log('Test 1');
 console.log('Test 2');

src/managers/ArrayFormFieldManager.tsx

@@ -0,0 +1,19 @@
+import {
+  FormFieldArray,
+  FormFieldManager,
+  FormFieldValueRendererProps,
+  SpecificFormFieldRendererProps,
+  TypeOfField,
+} from '../types.js';
+import React from 'react';
+import { ArrayFieldRenderer } from '../ArrayFieldRenderer.js';
+
+export class ArrayFormFieldManager implements FormFieldManager<FormFieldArray> {
+  public type: TypeOfField<FormFieldArray> = 'array';
+
+  public renderField: React.FC<SpecificFormFieldRendererProps<FormFieldArray>> = props => (
+    <ArrayFieldRenderer {...props} />
+  );
+
+  public renderValue: React.FC<FormFieldValueRendererProps<FormFieldArray>> = props => <>{`[${props.value}]`}</>;
+}

src/managers/managers.ts

@@ -4,13 +4,15 @@ import { SelectFormFieldManager } from './SelectFormFieldManager.js';
 import { FormField, FormFieldManager, TypeOfField } from '../types.js';
 import { StringFormFieldManager } from './StringFormFieldManager.js';
 import { BooleanFormFieldManager } from './BooleanFormFieldManager.js';
+import { ArrayFormFieldManager } from './ArrayFormFieldManager.js';
 
 export const managers: FormFieldManager<FormField>[] = [
   new FloatFormFieldManager(),
   new IntegerFormFieldManager(),
   new SelectFormFieldManager(),
   new StringFormFieldManager(),
   new BooleanFormFieldManager(),
+  new ArrayFormFieldManager(),
 ];
 
 export const getManager = (

src/types.ts

@@ -122,6 +122,16 @@ export type AbstractFormField<T extends string, V> = {
   onChange?: (value: V, name: string) => void;
 };
 
+export type FormFieldArray = AbstractFormField<'array', string[]> & {
+  maxLength?: number;
+  minLength?: number;
+
+  /** If supplied, it validates per item*/
+  regex?: RegExp;
+
+  placeholder?: string;
+};
+
 export type FormFieldBoolean = AbstractFormField<'boolean', boolean> & {};
 
 export type FormFieldString = AbstractFormField<'string', string> & {