feat: Altered layout and UI to look more like a JSON object

Author: kevinwang5658

src/Form.tsx

@@ -1,4 +1,4 @@
-import { Box, measureElement, useFocusManager, useInput } from 'ink';
+import { Box, Text, measureElement, useFocusManager, useInput } from 'ink';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import * as React from 'react';
 import { FormProps } from './types.js';
@@ -127,6 +127,10 @@ export const Form: React.FC<FormProps> = props => {
               <DescriptionRenderer description={props.form.sections[currentTab]?.description} />
             </Box>
           )}
+          <Box marginLeft={1} marginTop={1}>
+            <Text bold>{sections[currentTab].title}</Text>
+          </Box>
+          <Text>{' {'}</Text>
           <Box flexDirection="column">
             {currentTab > props.form.sections.length - 1
               ? null
@@ -143,6 +147,7 @@ export const Form: React.FC<FormProps> = props => {
                   customManagers={props.customManagers}
                 />
               ))}
+            <Text>{' }'}</Text>
             <Box flexDirection="row-reverse">
               <Button label="Add Item (duplicate)" onClicked={() => duplicateCurrentItem()}/>
             </Box>

src/FormFieldRenderer.tsx

@@ -52,15 +52,17 @@ export const FormFieldRenderer: React.FC<FormFieldRendererProps<any>> = props =>
   if (!isEditing) {
     const RenderValue = manager?.renderValue ?? (() => <>{props.value}</>);
     return (
-      <Box marginX={2} paddingX={1} borderStyle="round" borderColor={isFocused ? 'blue' : undefined}>
+      <Box paddingX={1}>
         <Box flexGrow={1}>
-          <Text underline={isFocused} color={isFocused ? 'blue' : undefined}>
-            {props.field.label ?? props.field.name}
-          </Text>
-          {props.field.required && <Text color="red">*</Text>}
-          <Text>: </Text>
-          <Text dimColor>
-            <RenderValue value={props.value as any} field={props.field} />
+          <Text backgroundColor={isFocused ? 'magentaBright' : undefined}>
+            <Text>
+              {`${isFocused ? '> ' : '  '}${(props.field.label ?? props.field.name)}`}
+            </Text>
+            {props.field.required && <Text color="red">*</Text>}
+            <Text>: </Text>
+            <Text dimColor>
+              <RenderValue value={props.value as any} field={props.field} />
+            </Text>
           </Text>
         </Box>
         {isFocused && (

src/ScrollArea.tsx

@@ -19,14 +19,14 @@ const reducer = (state, action) => {
         ...state,
         scrollTop: Math.min(
           state.innerHeight - state.height,
-          state.scrollTop + 3
+          state.scrollTop + 1
         )
       };
 
     case 'SCROLL_UP':
       return {
         ...state,
-        scrollTop: Math.max(0, state.scrollTop - 3)
+        scrollTop: Math.max(0, state.scrollTop - 1)
       };
 
     default:
@@ -47,7 +47,7 @@ export function ScrollArea({height, isStart, children}) {
   const innerRef = React.useRef();
 
   useEffect(() => {
-    if (isStart || (children.length + 3) * 3 < (height - 6)) {
+    if (isStart || (children.length) * 1 + 3 * 3 < (height - 6)) {
       setCanScroll(false);
       dispatch({
         type: 'RESET'