feat: Upgraded package versions for NodeJS types, react, ink and ink ui libraries. Modified state to support duplicates and added Add Item + Remove Item buttons

Author: kevinwang5658

package.json

@@ -23,22 +23,22 @@
   "license": "MIT",
   "bugs": "https://github.com/lukasbach/ink-form/issues",
   "devDependencies": {
-    "@types/node": "^14.14.45",
+    "@types/node": "20.14.8",
     "@types/react": "^18.2.41",
-    "ink": "^4.4.1",
+    "ink": "^5.1.0",
     "prettier": "^2.2.1",
     "publish-fast": "^0.0.20",
     "react": "^18.2.0",
-    "ts-node": "^10.9.1",
+    "tsx": "^4.19.2",
     "typedoc": "^0.25.4",
     "typescript": "^5.3.2"
   },
   "scripts": {
     "start": "ts-node-esm src/demo/overview.tsx",
-    "demo:overview": "ts-node-esm src/demo/overview.tsx",
-    "demo:packagejson": "ts-node-esm src/demo/packagejson.tsx",
-    "demo:custommanager": "ts-node-esm src/demo/custommanager.tsx",
-    "demo:imperative": "ts-node-esm src/demo/imperative.ts",
+    "demo:overview": "tsx src/demo/overview.tsx",
+    "demo:packagejson": "tsx src/demo/packagejson.tsx",
+    "demo:custommanager": "tsx src/demo/custommanager.tsx",
+    "demo:imperative": "tsx src/demo/imperative.ts",
     "build": "tsc",
     "build:docs": "typedoc --out docs src/index.ts",
     "lint": "prettier --check .",
@@ -47,11 +47,11 @@
     "release": "publish-fast"
   },
   "peerDependencies": {
-    "ink": ">=4",
+    "ink": ">=5",
     "react": ">=18"
   },
   "dependencies": {
-    "ink-select-input": "^5.0.0",
+    "ink-select-input": "^6.0.0",
     "ink-text-input": "^6.0.0"
   },
   "publishConfig": {

src/Button.tsx

@@ -0,0 +1,22 @@
+import { Box, Text, useFocus, useInput } from 'ink';
+import React from 'react';
+
+export function Button(props: {
+  label: string;
+  onClicked?: () => void;
+}) {
+  const { isFocused } = useFocus({});
+  useInput((input, key) => {
+    if (key.return && isFocused) {
+      props.onClicked?.();
+    }
+  });
+
+  return <Box marginX={2} paddingX={1} borderStyle="round" borderColor={isFocused ? 'blue' : 'magenta'}>
+    <Box flexGrow={1}>
+      <Text underline={isFocused} color={isFocused ? 'blue' : undefined}>
+        {props.label}
+      </Text>
+    </Box>
+  </Box>
+}

src/Form.tsx

@@ -7,11 +7,14 @@ import { FormFieldRenderer } from './FormFieldRenderer.js';
 import { DescriptionRenderer } from './DescriptionRenderer.js';
 import { canSubmit } from './canSubmit.js';
 import { SubmitButton } from './SubmitButton.js';
+import { Button } from './Button.js';
 
 export const Form: React.FC<FormProps> = props => {
   const isControlled = props.value !== undefined;
   const [currentTab, setCurrentTab] = useState(0);
-  const [value, setValue] = useState<object>(props.value ?? {});
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [sections, setSections] = useState(props.form.sections);
+  const [value, setValue] = useState<Array<Record<string, unknown>>>(props.value ?? Array.from({ length: sections.length }, () => ({})));
   const [editingField, setEditingField] = useState<string>();
   const canSubmitForm = useMemo(() => canSubmit(props.form, value), [value, props.form]);
   const focusManager = useFocusManager();
@@ -29,21 +32,25 @@ export const Form: React.FC<FormProps> = props => {
   useEffect(() => {
     // Set initial values
     if (!isControlled) {
-      setValueAndPropagate({
-        ...value,
-        ...props.form.sections
-          .map(section =>
-            section.fields
-              .map(field => (field.initialValue !== undefined ? { [field.name]: field.initialValue } : {}))
-              .reduce((obj1, obj2) => ({ ...obj1, ...obj2 }), {})
-          )
-          .reduce((obj1, obj2) => ({ ...obj1, ...obj2 }), {}),
-      });
+      setValue(Array.from({ length: sections.length }, () => ({})));
+
+
+      // setValueAndPropagate({
+      //   ...value,
+      //   ...props.form.sections
+      //     .map(section =>
+      //       section.fields
+      //         .map(field => (field.initialValue !== undefined ? { [field.name]: field.initialValue } : {}))
+      //         .reduce((obj1, obj2) => ({ ...obj1, ...obj2 }), {})
+      //     )
+      //     .reduce((obj1, obj2) => ({ ...obj1, ...obj2 }), {}),
+      // });
     }
   }, []);
 
-  const setValueAndPropagate = (value: object) => {
-    setValue(value);
+  const setValueAndPropagate = (index: number, newValue: Record<string, unknown>) => {
+    value[index] = newValue
+    setValue(structuredClone(value));
     props.onChange?.(value);
   };
 
@@ -58,33 +65,62 @@ export const Form: React.FC<FormProps> = props => {
     { isActive: !editingField }
   );
 
+  const duplicateCurrentItem = () => {
+    const newTabs = [...sections]
+    newTabs.splice(currentTab + 1, 0, sections[currentTab])
+
+    const newValue = { ...value[currentTab]};
+    value.splice(currentTab + 1, 0, newValue);
+
+    setSections(newTabs);
+    setValue([...value]);
+  }
+
+  const removeCurrentItem = () => {
+    const newTabs = [...sections]
+    newTabs.splice(currentTab, 1);
+    value.splice(currentTab, 1)
+
+    setSections(newTabs);
+    setValue([...value]);
+  }
+
   return (
-    <Box width="100%" height="100%" flexDirection="column">
-      <FormHeader {...props} currentTab={currentTab} onChangeTab={setCurrentTab} editingField={editingField} />
-      {!editingField && props.form.sections[currentTab].description && (
+    !isSubmitted && <Box width="100%" height="90%" flexDirection="column" overflowY="hidden">
+      <FormHeader {...props} form={{ ...props.form, sections }} currentTab={currentTab} onChangeTab={setCurrentTab} editingField={editingField} />
+      {!editingField && sections[currentTab].description && (
         <Box marginX={4}>
-          <DescriptionRenderer description={props.form.sections[currentTab].description} />
+          <DescriptionRenderer description={props.form.sections[currentTab]?.description} />
         </Box>
       )}
       <Box flexDirection="column">
         {currentTab > props.form.sections.length - 1
           ? null
-          : props.form.sections[currentTab].fields.map(field => (
-              <FormFieldRenderer
-                field={field}
-                key={field.name}
-                form={props.form}
-                value={value[field.name]}
-                onChange={v => setValueAndPropagate({ ...value, [field.name]: v })}
-                onSetEditingField={setEditingField}
-                editingField={editingField}
-                customManagers={props.customManagers}
-              />
-            ))}
+          : sections[currentTab].fields.map((field, index) => (
+            <FormFieldRenderer
+              field={field}
+              key={field.name + currentTab}
+              form={props.form}
+              value={value[currentTab][field.name]}
+              onChange={v => setValueAndPropagate(currentTab, { ...value[currentTab], [field.name]: v })}
+              onSetEditingField={setEditingField}
+              editingField={editingField}
+              customManagers={props.customManagers}
+            />
+          ))}
+        <Box flexDirection="row-reverse">
+          <Button label="Add Item (duplicate)" onClicked={() => duplicateCurrentItem()}/>
+        </Box>
+        <Box flexDirection="row-reverse">
+          <Button label="Remove" onClicked={() => removeCurrentItem()}/>
+        </Box>
       </Box>
       {!editingField && (
         <Box flexDirection="row-reverse">
-          <SubmitButton canSubmit={canSubmitForm} onSubmit={() => props.onSubmit?.(value)} />
+          <SubmitButton canSubmit={canSubmitForm} onSubmit={() => {
+            props.onSubmit?.(value)
+            setIsSubmitted(true);
+          }}/>
         </Box>
       )}
     </Box>

src/FormHeader.tsx

@@ -44,7 +44,7 @@ export const FormHeader: React.FC<
         <Box>
           {!props.editingField ? (
             sections.map((section, id) => (
-              <Box key={section.title}>
+              <Box key={section.title + id}>
                 <Text color="gray">[{id + 1}] </Text>
                 <Text color={props.currentTab === id ? 'blue' : undefined} underline={props.currentTab === id}>
                   {section.title}

src/ScrollArea.tsx

@@ -0,0 +1,75 @@
+import { Box, measureElement, useInput } from 'ink';
+import React from 'react';
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'SET_INNER_HEIGHT':
+      return {
+        ...state,
+        innerHeight: action.innerHeight
+      };
+
+    case 'SCROLL_DOWN':
+      return {
+        ...state,
+        scrollTop: Math.min(
+          state.innerHeight - state.height,
+          state.scrollTop + 1
+        )
+      };
+
+    case 'SCROLL_UP':
+      return {
+        ...state,
+        scrollTop: Math.max(0, state.scrollTop - 1)
+      };
+
+    default:
+      return state;
+  }
+};
+
+export function ScrollArea({height, children}) {
+  const [state, dispatch] = React.useReducer(reducer, {
+    height,
+    scrollTop: 0
+  });
+
+  const innerRef = React.useRef();
+
+  React.useEffect(() => {
+    const dimensions = measureElement(innerRef.current);
+
+    dispatch({
+      type: 'SET_INNER_HEIGHT',
+      innerHeight: dimensions.height
+    });
+  }, []);
+
+  useInput((_input, key) => {
+    if (key.downArrow) {
+      dispatch({
+        type: 'SCROLL_DOWN'
+      });
+    }
+
+    if (key.upArrow) {
+      dispatch({
+        type: 'SCROLL_UP'
+      });
+    }
+  });
+
+  return (
+    <Box height={height} flexDirection="column" overflow="hidden">
+      <Box
+        ref={innerRef}
+        flexShrink={0}
+        flexDirection="column"
+        marginTop={-state.scrollTop}
+      >
+        {children}
+      </Box>
+    </Box>
+  );
+}

src/types.ts

@@ -20,10 +20,10 @@ export type Description = string | string[] | JSX.Element | undefined | false;
 export interface FormProps {
   /** Structure of the form, i.e. which fields are contained in which sections. */
   form: FormStructure;
-  initialValue?: object;
+  initialValue?: Array<Record<string, any>>;
 
   /** Current value of the form. Omit to leave the component in uncontrolled mode. */
-  value?: object;
+  value?: Array<Record<string, any>>;
   onChange?: (value: object) => void;
 
   /**
@@ -32,7 +32,7 @@ export interface FormProps {
    *
    * @param value the final value of the form.
    * */
-  onSubmit?: (value: object) => void;
+  onSubmit?: (value: Array<Record<string, any>>) => void;
 
   /**
    * You can use custom field implementations, by specifying their ``type`` attribute to a custom