UX improvements 2

Author: kevinwang5658

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codifycli/ink-form",
   "type": "module",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "Complex user-friendly form component for Codify",
   "main": "lib/index.js",
   "exports": "./lib/index.js",

src/Form.tsx

@@ -20,13 +20,14 @@ export const Form: React.FC<FormProps> = props => {
   const [editingField, setEditingField] = useState<string>();
   const canSubmitForm = useMemo(() => canSubmit(form, value), [value, form]);
   const focusManager = useFocusManager();
-  const [focusedElement, setFocusedElement] = useState(-1); // this is -1 because there is no initial focus. The first down click will focus on element 0
+  const [focusedElement, setFocusedElement] = useState(0); // this is -1 because there is no initial focus. The first down click will focus on element 0
   const headerRef = useRef();
   const headerHeight = headerRef.current ? measureElement(headerRef.current).height : 5
   const [, fullHeight] = useStdoutDimensions()
 
   useEffect(() => {
     focusManager.enableFocus();
+    setTimeout(() => focusManager.focusNext(), 50)
   }, []);
 
   useEffect(() => {
@@ -54,7 +55,8 @@ export const Form: React.FC<FormProps> = props => {
 
   const onChangeTab = (tab: number) => {
     setCurrentTab(tab);
-    setFocusedElement(-1)
+    setFocusedElement(0)
+    setTimeout(() => focusManager.focusNext(), 50)
   }
 
   const setValueAndPropagate = (index: number, newValue: Record<string, unknown>) => {
@@ -84,7 +86,7 @@ export const Form: React.FC<FormProps> = props => {
       } else if (key.downArrow) {
         // This calculates the maximum amount of children there is. We don't want to scroll past the last item
         // Fields.length is number of json fields. 2 is the add and remove buttons. Submit button is sometimes focusable
-        const totalFocusableElements = sections[currentTab].fields.length + 2 + (canSubmitForm ? 1 : 0) + ((sections.length <= 1) ? -1 : 0)
+        const totalFocusableElements = sections[currentTab].fields.length + (canSubmitForm ? 1 : 0)
         if (focusedElement + 1 >= totalFocusableElements) {
           return;
         }
@@ -126,6 +128,7 @@ export const Form: React.FC<FormProps> = props => {
 
     setSections(newTabs);
     setValue([...value]);
+    onChangeTab(Math.min(currentTab + 1, newTabs.length - 1));
   }
 
   const removeCurrentSection = () => {
@@ -198,14 +201,13 @@ export const Form: React.FC<FormProps> = props => {
           {!editingField && (
             <Box flexDirection='column' marginTop={1}>
               <Box flexDirection="row">
-                <Button label="[A]dd resource" id={'addButton'} onClicked={() => duplicateCurrentSection()}/>
-                <Button label="[R]emove resource" id={'removeButton'} isEnabled={sections.length > 1} onClicked={() => removeCurrentSection()}/>
                 <SubmitButton canSubmit={canSubmitForm} onSubmit={onSubmitForm}/>
               </Box>
-              <Text dimColor color='gray'> Provide all required information (<Text color="red">*</Text>) to submit.</Text>
-              <Text dimColor color='gray'> Up/down: navigate options.</Text>
-              <Text dimColor color='gray'> Left/right: navigate between resources.</Text>
-              <Text dimColor color='gray'> Enter: select or edit.</Text>
+              <Text color='gray'> Up/down: navigate between parameters.</Text>
+              <Text color='gray'> Left/right: navigate between resources.</Text>
+              <Text color='gray'> Enter: select or edit.</Text>
+              <Text color='gray'> [A]: add an additional instance.</Text>
+              <Text color='gray'> [R]: remove import.</Text>
             </Box>
 
             // </Box>

src/FormFieldRenderer.tsx

@@ -73,13 +73,11 @@ export const FormFieldRenderer: React.FC<FormFieldRendererProps<any>> = props =>
             <Text dimColor>
               <RenderValue value={props.value as any ?? '<undefined>'} field={props.field} />
             </Text>
+            {isFocused && (
+              <Text color='gray' dimColor>     (enter to edit)</Text>
+            )}
           </Text>
         </Box>
-        {/*{isFocused && (*/}
-        {/*  <Box>*/}
-        {/*    <Text>Press enter to edit</Text>*/}
-        {/*  </Box>*/}
-        {/*)}*/}
       </Box>
     );
   } else {

src/FormHeader.tsx

@@ -32,6 +32,7 @@ export const FormHeader: React.FC<
     <Box
       borderStyle="single"
       width="100%"
+      paddingBottom={1}
       flexDirection="column"
       ref={props.headerRef}>
       <Box width="100%" marginBottom={1}>

src/ScrollArea.tsx

@@ -49,7 +49,7 @@ export function ScrollArea({height, isStart, children, numFields, editingMode})
     // isStart ensures that the first down event will not scroll. This is because initially nothing has focus so the first down gives focus to the first element
     // The children.length calculation calculates a rough estimate of the total height. The 3 is the height of the buttons at the bottom.
     // The 5 is the fixed length of the static elements
-    if (isStart || ((numFields + (3 * 3) + 5) < height)) {
+    if (isStart || ((numFields + 13) < height)) {
       setCanScroll(false);
       dispatch({
         type: 'RESET'

src/SubmitButton.tsx

@@ -16,7 +16,7 @@ export const SubmitButton: React.FC<{
     <Box marginRight={2}>
       <Box borderStyle={'round'} borderColor={!props.canSubmit ? 'gray' : isFocused ? 'blue' : 'green'} paddingX={2}>
         <Text color={!props.canSubmit ? 'gray' : isFocused ? 'blue' : 'green'} bold={true} underline={isFocused}>
-          {props.canSubmit ? '[S]ubmit' : 'Cannot submit yet'}
+          {props.canSubmit ? '[s] Submit' : 'Cannot submit yet'}
         </Text>
       </Box>
     </Box>

src/demo/Test.tsx

@@ -40,8 +40,8 @@ export function Test() {
           }, 1000)
         }}
         form={{
-          title: "Need more info to identify resources for import",
-          description: 'multiples could exist on the system',
+          title: "Identify which instance to import",
+          description: 'fill out the required information to submit',
           sections: [
             {
               title: "asdf-global",