git-stack-cli 2.9.6 → 2.9.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "git-stack-cli",
-  "version": "2.9.6",
+  "version": "2.9.8",
   "description": "",
   "author": "magus",
   "license": "MIT",

package/src/app/DebugOutput.tsx

@@ -3,6 +3,8 @@ import * as React from "react";
 import * as Ink from "ink-cjs";
 import { DateTime } from "luxon";
 
+import { render_node } from "~/core/render_node";
+
 type Props = {
   node: React.ReactNode;
 };
@@ -14,17 +16,7 @@ export function DebugOutput(props: Props) {
   const timestamp = DateTime.now().toFormat("yyyy-MM-dd HH:mm:ss.SSS");
   const content_width = available_width - timestamp.length - 2;
 
-  const content = (function () {
-    switch (typeof props.node) {
-      case "boolean":
-      case "number":
-      case "string": {
-        return <Ink.Text dimColor>{String(props.node)}</Ink.Text>;
-      }
-      default:
-        return props.node;
-    }
-  })();
+  const content = render_node(props.node);
 
   return (
     <Ink.Box flexDirection="column">

package/src/app/MultiSelect.tsx

@@ -92,6 +92,7 @@ export function MultiSelect<T>(props: Props<T>) {
   React.useEffect(ensure_selectable_focus, [props.items]);
   function ensure_selectable_focus() {
     const current = props.items[index];
+
     if (current && !current.disabled) {
       return;
     }
@@ -115,6 +116,11 @@ export function MultiSelect<T>(props: Props<T>) {
       return;
     }
 
+    // prevent accessing `.value` of undefined item
+    if (!props.items[index]) {
+      return;
+    }
+
     const item = props.items[index].value;
     const selected_list = Array.from(selected_set);
     const selected = selected_set.has(index);
@@ -125,6 +131,11 @@ export function MultiSelect<T>(props: Props<T>) {
   }, [selected_set]);
 
   React.useEffect(() => {
+    // prevent accessing `.value` of undefined item
+    if (!props.items[index]) {
+      return;
+    }
+
     const item = props.items[index].value;
     const selected_list = Array.from(selected_set);
     const selected = selected_set.has(index);

package/src/app/Output.tsx

@@ -4,6 +4,7 @@ import * as Ink from "ink-cjs";
 
 import { DebugOutput } from "~/app/DebugOutput";
 import { Store } from "~/app/Store";
+import { render_node } from "~/core/render_node";
 
 export function Output() {
   const output = Store.useState((state) => state.output);
@@ -14,7 +15,7 @@ export function Output() {
       <Ink.Static items={output}>
         {(entry) => {
           const [id, node] = entry;
-          return <Ink.Box key={id}>{node}</Ink.Box>;
+          return <Ink.Box key={id}>{render_node(node)}</Ink.Box>;
         }}
       </Ink.Static>
 

package/src/app/SelectCommitRanges.tsx

@@ -107,18 +107,24 @@ export function SelectCommitRanges() {
   Ink.useInput((input, key) => {
     const input_lower = input.toLowerCase();
 
-    // only allow pr select when on unassigned group
-    if (has_unassigned_commits && input_lower === SYMBOL.p) {
-      set_pr_select((v) => !v);
-      return;
-    }
     // allow cancelling pr select with esc
     if (pr_select && key.escape) {
       set_pr_select(false);
       return;
     }
 
-    // do not allow input when inputting
+    // only allow pr select when…
+    // 1. we have unassigned commits
+    // 2. not inputting group
+    // 3. at least one existing prs exists
+    if (has_unassigned_commits && !group_input && existing_pr_list.length > 0) {
+      if (input_lower === SYMBOL.p) {
+        set_pr_select((v) => !v);
+        return;
+      }
+    }
+
+    // disable key handlers below when inputting
     if (is_input_mode) {
       return;
     }
@@ -298,23 +304,25 @@ export function SelectCommitRanges() {
             />
           </Ink.Text>
 
-          <Ink.Text color={colors.blue}>
-            <FormatText
-              message="Press {p} to {pick} an existing PR"
-              values={{
-                p: (
-                  <Ink.Text bold color={colors.green}>
-                    p
-                  </Ink.Text>
-                ),
-                pick: (
-                  <Ink.Text bold color={colors.green}>
-                    <Parens>p</Parens>pick
-                  </Ink.Text>
-                ),
-              }}
-            />
-          </Ink.Text>
+          {existing_pr_list.length === 0 ? null : (
+            <Ink.Text color={colors.blue}>
+              <FormatText
+                message="Press {p} to {pick} an existing PR"
+                values={{
+                  p: (
+                    <Ink.Text bold color={colors.green}>
+                      p
+                    </Ink.Text>
+                  ),
+                  pick: (
+                    <Ink.Text bold color={colors.green}>
+                      <Parens>p</Parens>pick
+                    </Ink.Text>
+                  ),
+                }}
+              />
+            </Ink.Text>
+          )}
         </Ink.Box>
       )}
 
@@ -386,7 +394,7 @@ export function SelectCommitRanges() {
         </React.Fragment>
       )}
 
-      {!pr_select ? null : (
+      {!pr_select || !existing_pr_list.length ? null : (
         <React.Fragment>
           <FormatText
             wrapper={<Ink.Text color={colors.gray} />}
@@ -460,6 +468,8 @@ export function SelectCommitRanges() {
         </React.Fragment>
       )}
 
+      {is_input_mode ? null : <React.Fragment></React.Fragment>}
+
       <Ink.Box height={1} />
 
       <MultiSelect
@@ -489,143 +499,139 @@ export function SelectCommitRanges() {
         }}
       />
 
-      <Ink.Box height={1} />
-
-      {has_unassigned_commits ? (
+      {is_input_mode ? null : (
         <React.Fragment>
+          <Ink.Box height={1} />
+
+          {has_unassigned_commits ? (
+            <React.Fragment>
+              <FormatText
+                wrapper={<Ink.Text color={colors.gray} />}
+                message="{count} unassigned commits"
+                values={{
+                  count: (
+                    <Ink.Text color={colors.yellow} bold>
+                      {unassigned_count}
+                    </Ink.Text>
+                  ),
+                }}
+              />
+
+              <FormatText
+                wrapper={<Ink.Text color={colors.gray} />}
+                message="Press {c} to {create} a new PR"
+                values={{
+                  c: (
+                    <Ink.Text bold color={colors.green}>
+                      c
+                    </Ink.Text>
+                  ),
+                  create: (
+                    <Ink.Text bold color={colors.green}>
+                      <Parens>c</Parens>reate
+                    </Ink.Text>
+                  ),
+                }}
+              />
+
+              {existing_pr_list.length === 0 ? null : (
+                <FormatText
+                  wrapper={<Ink.Text color={colors.gray} />}
+                  message="Press {p} to {pick} an existing PR"
+                  values={{
+                    p: (
+                      <Ink.Text bold color={colors.green}>
+                        p
+                      </Ink.Text>
+                    ),
+                    pick: (
+                      <Ink.Text bold color={colors.green}>
+                        <Parens>p</Parens>pick
+                      </Ink.Text>
+                    ),
+                  }}
+                />
+              )}
+
+              {sync_status !== "allow_unassigned" ? null : (
+                <FormatText
+                  wrapper={<Ink.Text color={colors.gray} />}
+                  message={
+                    argv.sync
+                      ? "Press {s} to {sync} the {count} assigned commits to Github"
+                      : "Press {s} to {sync} the {count} assigned commits locally"
+                  }
+                  values={{
+                    ...S_TO_SYNC_VALUES,
+                    count: (
+                      <Ink.Text color={colors.yellow} bold>
+                        {assigned_count}
+                      </Ink.Text>
+                    ),
+                  }}
+                />
+              )}
+            </React.Fragment>
+          ) : (
+            <FormatText
+              wrapper={<Ink.Text color={colors.blue} />}
+              message={
+                argv.sync
+                  ? "🎉 Done! Press {s} to {sync} the PRs to Github"
+                  : "🎉 Done! Press {s} to {sync} the PRs locally"
+              }
+              values={S_TO_SYNC_VALUES}
+            />
+          )}
+
           <FormatText
             wrapper={<Ink.Text color={colors.gray} />}
-            message="{count} unassigned commits"
+            message="Press {left} and {right} to view PRs"
             values={{
-              count: (
-                <Ink.Text color={colors.yellow} bold>
-                  {unassigned_count}
+              left: (
+                <Ink.Text bold color={colors.green}>
+                  {SYMBOL.left}
+                </Ink.Text>
+              ),
+              right: (
+                <Ink.Text bold color={colors.green}>
+                  {SYMBOL.right}
                 </Ink.Text>
               ),
             }}
           />
 
-          {is_input_mode ? null : (
-            <FormatText
-              wrapper={<Ink.Text color={colors.gray} />}
-              message="Press {c} to {create} a new PR"
-              values={{
-                c: (
-                  <Ink.Text bold color={colors.green}>
-                    c
-                  </Ink.Text>
-                ),
-                create: (
-                  <Ink.Text bold color={colors.green}>
-                    <Parens>c</Parens>reate
-                  </Ink.Text>
-                ),
-              }}
-            />
-          )}
-
-          {is_input_mode ? null : (
-            <FormatText
-              wrapper={<Ink.Text color={colors.gray} />}
-              message="Press {p} to {pick} an existing PR"
-              values={{
-                p: (
-                  <Ink.Text bold color={colors.green}>
-                    p
-                  </Ink.Text>
-                ),
-                pick: (
-                  <Ink.Text bold color={colors.green}>
-                    <Parens>p</Parens>pick
-                  </Ink.Text>
-                ),
-              }}
-            />
-          )}
+          <FormatText
+            wrapper={<Ink.Text color={colors.gray} />}
+            message="Press {enter} to toggle commit selection"
+            values={{
+              enter: (
+                <Ink.Text bold color={colors.green}>
+                  {SYMBOL.enter}
+                </Ink.Text>
+              ),
+            }}
+          />
 
-          {sync_status !== "allow_unassigned" ? null : (
+          {group.id === commit_range.UNASSIGNED ? null : (
             <FormatText
               wrapper={<Ink.Text color={colors.gray} />}
               message={
-                argv.sync
-                  ? "Press {s} to {sync} the {count} assigned commits to Github"
-                  : "Press {s} to {sync} the {count} assigned commits locally"
+                is_master_base
+                  ? "Press {m} to {reset} current PR base to stack position"
+                  : "Press {m} to set current PR base to master"
               }
               values={{
-                ...S_TO_SYNC_VALUES,
-                count: (
-                  <Ink.Text color={colors.yellow} bold>
-                    {assigned_count}
+                m: (
+                  <Ink.Text bold color={colors.green}>
+                    {SYMBOL.m}
                   </Ink.Text>
                 ),
+                reset: <Ink.Text color={colors.yellow}>reset</Ink.Text>,
               }}
             />
           )}
         </React.Fragment>
-      ) : (
-        <FormatText
-          wrapper={<Ink.Text />}
-          message={
-            argv.sync
-              ? "🎉 Done! Press {s} to {sync} the PRs to Github"
-              : "🎉 Done! Press {s} to {sync} the PRs locally"
-          }
-          values={S_TO_SYNC_VALUES}
-        />
-      )}
-
-      <Ink.Box>
-        <FormatText
-          wrapper={<Ink.Text color={colors.gray} />}
-          message="Press {left} and {right} to view PRs"
-          values={{
-            left: (
-              <Ink.Text bold color={colors.green}>
-                {SYMBOL.left}
-              </Ink.Text>
-            ),
-            right: (
-              <Ink.Text bold color={colors.green}>
-                {SYMBOL.right}
-              </Ink.Text>
-            ),
-          }}
-        />
-      </Ink.Box>
-
-      <Ink.Box>
-        <FormatText
-          wrapper={<Ink.Text color={colors.gray} />}
-          message="Press {enter} to toggle commit selection"
-          values={{
-            enter: (
-              <Ink.Text bold color={colors.green}>
-                {SYMBOL.enter}
-              </Ink.Text>
-            ),
-          }}
-        />
-      </Ink.Box>
-
-      {group.id === commit_range.UNASSIGNED ? null : (
-        <Ink.Box>
-          <FormatText
-            wrapper={<Ink.Text color={colors.gray} />}
-            message={
-              is_master_base
-                ? "Press {m} to {reset} current PR base to stack position"
-                : "Press {m} to set current PR base to master"
-            }
-            values={{
-              m: (
-                <Ink.Text bold color={colors.green}>
-                  {SYMBOL.m}
-                </Ink.Text>
-              ),
-              reset: <Ink.Text color={colors.yellow}>reset</Ink.Text>,
-            }}
-          />
-        </Ink.Box>
       )}
     </Ink.Box>
   );

package/src/core/render_node.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+
+import * as Ink from "ink-cjs";
+
+import { Store } from "~/app/Store";
+
+export function render_node(node: React.ReactNode) {
+  const actions = Store.getState().actions;
+
+  if (node == null) {
+    return null;
+  }
+
+  if (React.isValidElement(node)) {
+    return node;
+  }
+
+  if (Array.isArray(node)) {
+    return (
+      <React.Fragment>
+        {node.map((entry, index) => (
+          <React.Fragment key={index}>{render_node(entry)}</React.Fragment>
+        ))}
+      </React.Fragment>
+    );
+  }
+
+  switch (typeof node) {
+    case "string":
+    case "number":
+    case "boolean":
+      return <Ink.Text>{String(node)}</Ink.Text>;
+    default:
+      actions.debug(`unhandled node ${typeof node}`);
+      return null;
+  }
+}