git-stack-cli 1.0.2 → 1.0.4

package/src/app/Store.tsx

@@ -0,0 +1,252 @@
+import * as React from "react";
+
+import * as Ink from "ink-cjs";
+import { createStore, useStore } from "zustand";
+import { immer } from "zustand/middleware/immer";
+
+import { Exit } from "~/app/Exit";
+import { LogTimestamp } from "~/app/LogTimestamp";
+import { colors } from "~/core/colors";
+
+import type { Instance as InkInstance } from "ink-cjs";
+import type { Argv } from "~/command";
+import type * as CommitMetadata from "~/core/CommitMetadata";
+import type { PullRequest } from "~/core/github";
+
+type Setter = (state: State) => void;
+
+type CommitMap = Parameters<typeof CommitMetadata.range>[0];
+
+type MutateOutputArgs = {
+  node: React.ReactNode;
+  id?: string;
+  debug?: boolean;
+};
+
+export type State = {
+  argv: null | Argv;
+  ink: null | InkInstance;
+
+  cwd: null | string;
+  username: null | string;
+  repo_path: null | string;
+  repo_root: null | string;
+  master_branch: string;
+  head: null | string;
+  merge_base: null | string;
+  branch_name: null | string;
+  commit_range: null | CommitMetadata.CommitRange;
+  commit_map: null | CommitMap;
+
+  step:
+    | "github-api-error"
+    | "loading"
+    | "status"
+    | "pre-local-merge-rebase"
+    | "local-merge-rebase"
+    | "pre-select-commit-ranges"
+    | "select-commit-ranges"
+    | "manual-rebase"
+    | "manual-rebase-no-sync"
+    | "post-rebase-status";
+
+  output: Array<React.ReactNode>;
+  pending_output: Record<string, Array<React.ReactNode>>;
+
+  pr: { [branch: string]: PullRequest };
+
+  actions: {
+    exit(code: number, clear?: boolean): void;
+    clear(): void;
+    unmount(): void;
+    newline(): void;
+    json(value: object): void;
+    error(message: string): void;
+    output(node: React.ReactNode): void;
+    debug(node: React.ReactNode, id?: string): void;
+
+    isDebug(): boolean;
+
+    reset_pr(): void;
+
+    set(setter: Setter): void;
+  };
+
+  mutate: {
+    output(state: State, args: MutateOutputArgs): void;
+    pending_output(state: State, args: MutateOutputArgs): void;
+    end_pending_output(state: State, id: string): void;
+  };
+
+  select: {
+    debug(state: State): boolean;
+  };
+};
+
+const BaseStore = createStore<State>()(
+  immer((set, get) => ({
+    argv: null,
+    ink: null,
+
+    cwd: null,
+    username: null,
+    repo_path: null,
+    repo_root: null,
+    master_branch: "master",
+    head: null,
+    merge_base: null,
+    branch_name: null,
+    commit_range: null,
+    commit_map: null,
+
+    step: "loading",
+
+    output: [],
+    pending_output: {},
+
+    pr: {},
+
+    actions: {
+      exit(code, clear = true) {
+        set((state) => {
+          const node = <Exit clear={clear} code={code} />;
+          state.mutate.output(state, { node });
+        });
+      },
+
+      clear() {
+        get().ink?.clear();
+      },
+
+      unmount() {
+        get().ink?.unmount();
+      },
+
+      newline() {
+        set((state) => {
+          const node = "‎";
+          state.mutate.output(state, { node });
+        });
+      },
+
+      json(value) {
+        set((state) => {
+          const node = JSON.stringify(value, null, 2);
+          state.mutate.output(state, { node });
+        });
+      },
+
+      error(message) {
+        set((state) => {
+          const node = <Ink.Text color={colors.red}>{message}</Ink.Text>;
+          state.mutate.output(state, { node });
+        });
+      },
+
+      output(node) {
+        set((state) => {
+          state.mutate.output(state, { node });
+        });
+      },
+
+      debug(node, id) {
+        if (get().actions.isDebug()) {
+          const debug = true;
+
+          set((state) => {
+            if (id) {
+              state.mutate.pending_output(state, { id, node, debug });
+            } else {
+              state.mutate.output(state, { node, debug });
+            }
+          });
+        }
+      },
+
+      isDebug() {
+        const state = get();
+        return state.select.debug(state);
+      },
+
+      reset_pr() {
+        set((state) => {
+          state.pr = {};
+        });
+      },
+
+      set(setter) {
+        set((state) => {
+          setter(state);
+        });
+      },
+    },
+
+    mutate: {
+      output(state, args) {
+        const renderOutput = renderOutputArgs(args);
+        state.output.push(renderOutput);
+      },
+
+      pending_output(state, args) {
+        const { id } = args;
+
+        if (!id) {
+          return;
+        }
+
+        if (!state.pending_output[id]) {
+          state.pending_output[id] = [];
+        }
+
+        const renderOutput = renderOutputArgs(args);
+        state.pending_output[id].push(renderOutput);
+      },
+
+      end_pending_output(state, id) {
+        delete state.pending_output[id];
+      },
+    },
+
+    select: {
+      debug(state) {
+        return state.argv?.verbose || false;
+      },
+    },
+  }))
+);
+
+function renderOutputArgs(args: MutateOutputArgs) {
+  let output = args.node;
+
+  switch (typeof args.node) {
+    case "boolean":
+    case "number":
+    case "string":
+      output = <Ink.Text dimColor={args.debug}>{String(args.node)}</Ink.Text>;
+  }
+
+  if (args.debug) {
+    return (
+      <React.Fragment>
+        <LogTimestamp />
+        {output}
+      </React.Fragment>
+    );
+  }
+
+  return output;
+}
+
+function useState<R>(selector: (state: State) => R): R {
+  return useStore(BaseStore, selector);
+}
+
+function useActions() {
+  return useState((state) => state.actions);
+}
+
+const getState = BaseStore.getState;
+const setState = BaseStore.setState;
+const subscribe = BaseStore.subscribe;
+
+export const Store = { useActions, useState, getState, setState, subscribe };

package/src/app/Table.tsx

@@ -0,0 +1,137 @@
+import * as React from "react";
+
+import * as Ink from "ink-cjs";
+
+import { is_finite_value } from "~/core/is_finite_value";
+
+type Props<T extends BaseRow> = {
+  data: Array<T>;
+  columns: ColumnComponentMap<T>;
+  columnGap?: number;
+  fillColumn?: Column<T>;
+  maxWidth?: Partial<{ [key in Column<T>]: (maxWidth: number) => number }>;
+};
+
+export function Table<T extends BaseRow>(props: Props<T>) {
+  if (!props.data.length) {
+    return (
+      <Container>
+        <Ink.Text dimColor>No data found.</Ink.Text>
+      </Container>
+    );
+  }
+
+  const RowColumnList = Object.keys(props.columns) as Array<Column<T>>;
+
+  // walk data and discover max width for each column
+  const max_col_width = {} as { [key in Column<T>]: number };
+
+  for (const col of RowColumnList) {
+    max_col_width[col] = 0;
+  }
+
+  for (const row of props.data) {
+    for (const col of RowColumnList) {
+      const row_col = row[col];
+      max_col_width[col] = Math.max(String(row_col).length, max_col_width[col]);
+    }
+  }
+
+  for (const col of RowColumnList) {
+    const maxWidth = props.maxWidth?.[col];
+    if (maxWidth) {
+      max_col_width[col] = maxWidth(max_col_width[col]);
+    }
+  }
+
+  const { stdout } = Ink.useStdout();
+  const available_width = stdout.columns;
+  const columnGap = is_finite_value(props.columnGap) ? props.columnGap : 2;
+
+  // single character breathing room to prevent url including next line via overflow
+  const breathing_room = 1;
+
+  if (props.fillColumn) {
+    let remaining_space = available_width;
+
+    for (const col of RowColumnList) {
+      // skip fill column from calculation
+      if (props.fillColumn === col) {
+        continue;
+      }
+
+      remaining_space -= max_col_width[col];
+    }
+
+    // gap * col count
+    remaining_space -= columnGap * (RowColumnList.length - 1);
+
+    // remove some extra space
+    remaining_space -= breathing_room;
+
+    if (props.fillColumn) {
+      max_col_width[props.fillColumn] = Math.min(
+        max_col_width[props.fillColumn],
+        remaining_space
+      );
+    }
+  }
+
+  // console.debug({ available_width, max_col_width });
+
+  return (
+    <Container>
+      {props.data.map((row, i) => {
+        return (
+          <Ink.Box
+            key={i}
+            // borderStyle="round"
+            flexDirection="row"
+            columnGap={columnGap}
+            width={available_width}
+          >
+            {RowColumnList.map((column) => {
+              const ColumnComponent = props.columns[
+                column
+              ] as ColumnComponent<T>;
+
+              return (
+                <Ink.Box key={String(column)} width={max_col_width[column]}>
+                  <ColumnComponent row={row} column={column} />
+                </Ink.Box>
+              );
+            })}
+          </Ink.Box>
+        );
+      })}
+    </Container>
+  );
+}
+
+function Container(props: { children: React.ReactNode }) {
+  return (
+    <Ink.Box flexDirection="column">
+      <Ink.Box height={1} />
+      {props.children}
+      <Ink.Box height={1} />
+    </Ink.Box>
+  );
+}
+
+type BaseRow = Record<string, string | number>;
+
+type Column<T extends BaseRow> = keyof T;
+
+type ColumnComponent<T extends BaseRow> = (
+  props: TableColumnProps<T>
+) => React.ReactNode;
+
+type ColumnComponentMap<T extends BaseRow> = Record<
+  Column<T>,
+  ColumnComponent<T>
+>;
+
+export type TableColumnProps<T extends BaseRow> = {
+  row: T;
+  column: keyof T;
+};

package/src/app/TextInput.tsx

@@ -0,0 +1,88 @@
+import * as React from "react";
+
+import * as Ink from "ink-cjs";
+
+import { colors } from "~/core/colors";
+
+type Props = {
+  multiline?: boolean;
+  value?: string;
+  onChange?: (value: string) => void;
+  onSubmit?: (value: string) => void;
+};
+
+export function TextInput(props: Props) {
+  const [value, set_value] = React.useState(get_value(props));
+
+  React.useEffect(
+    function sync_value_prop() {
+      set_value(get_value(props));
+    },
+    [props.value]
+  );
+
+  const [caret_visible, set_caret_visible] = React.useState(false);
+
+  React.useEffect(function blink_caret() {
+    const interval_ms = 500;
+
+    let timeoutId = setTimeout(tick, interval_ms);
+
+    function tick() {
+      set_caret_visible((visible) => !visible);
+      timeoutId = setTimeout(tick, interval_ms);
+    }
+
+    return function cleanup() {
+      clearTimeout(timeoutId);
+    };
+  }, []);
+
+  Ink.useInput((input, key) => {
+    let next_value = value;
+
+    // console.debug("[useInput]", { input, key });
+
+    if (key.backspace || key.delete) {
+      next_value = value.slice(0, -1);
+    } else if (key.return) {
+      props.onSubmit?.(next_value);
+    } else {
+      switch (input) {
+        case "\r":
+          if (props.multiline) {
+            next_value = `${value}\n`;
+          }
+
+          break;
+
+        default:
+          next_value = `${value}${input}`;
+      }
+    }
+
+    set_value(next_value);
+    props.onChange?.(next_value);
+  });
+
+  // console.debug("[TextInput]", { value });
+
+  return (
+    <Ink.Box
+      borderStyle="single"
+      minHeight={1}
+      borderColor={colors.yellow}
+      borderDimColor
+    >
+      <Ink.Text>{value || ""}</Ink.Text>
+
+      <Ink.Text color={colors.yellow} dimColor inverse={caret_visible}>
+        {" "}
+      </Ink.Text>
+    </Ink.Box>
+  );
+}
+
+function get_value(props: Props) {
+  return props.value || "";
+}

package/src/app/Url.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+import * as Ink from "ink-cjs";
+
+import { colors } from "~/core/colors";
+
+type Props = InkTextProps & {
+  children: React.ReactNode;
+};
+
+type InkTextProps = React.ComponentProps<typeof Ink.Text>;
+
+export function Url(props: Props) {
+  return (
+    <Ink.Text bold color={colors.blue} {...props}>
+      {props.children}
+    </Ink.Text>
+  );
+}

package/src/app/Waterfall.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+
+import * as Ink from "ink-cjs";
+
+import { Await } from "~/app/Await";
+import { Store } from "~/app/Store";
+import { sleep } from "~/core/sleep";
+
+export function Waterfall() {
+  return (
+    <Await
+      fallback={<Ink.Text>Loading...</Ink.Text>}
+      function={async () => {
+        await sleep(3 * 1000);
+        Store.getState().actions.output(<Ink.Text>apple</Ink.Text>);
+      }}
+    >
+      <Await
+        fallback={<Ink.Text>Loading...</Ink.Text>}
+        function={async () => {
+          await sleep(3 * 1000);
+          Store.getState().actions.output(<Ink.Text>banana</Ink.Text>);
+        }}
+      >
+        <Await
+          fallback={<Ink.Text>Loading...</Ink.Text>}
+          function={async () => {
+            await sleep(3 * 1000);
+            Store.getState().actions.output(<Ink.Text>orange</Ink.Text>);
+          }}
+        >
+          <Ink.Text>Waterfall</Ink.Text>
+        </Await>
+      </Await>
+    </Await>
+  );
+}

package/src/app/YesNoPrompt.tsx

@@ -0,0 +1,73 @@
+import * as React from "react";
+
+import * as Ink from "ink-cjs";
+
+import { Parens } from "~/app/Parens";
+import { colors } from "~/core/colors";
+
+type Props = {
+  message: React.ReactNode;
+  onYes(): void;
+  onNo(): void;
+};
+
+export function YesNoPrompt(props: Props) {
+  const [answer, set_answer] = React.useState("");
+
+  Ink.useInput((input) => {
+    const inputLower = input.toLowerCase();
+
+    set_answer(inputLower);
+
+    switch (inputLower) {
+      case "n":
+        return props.onNo();
+
+      case "y":
+        return props.onYes();
+    }
+  });
+
+  // prettier-ignore
+  const y = <Ink.Text bold color={colors.green}>Y</Ink.Text>;
+  const n = <Ink.Text color={colors.red}>n</Ink.Text>;
+
+  let choices;
+
+  switch (answer) {
+    case "y":
+      choices = y;
+      break;
+
+    case "n":
+      choices = n;
+      break;
+
+    default:
+      choices = (
+        <React.Fragment>
+          {y}
+          <Ink.Text>/</Ink.Text>
+          {n}
+        </React.Fragment>
+      );
+  }
+
+  return (
+    <Ink.Box flexDirection="column">
+      <Ink.Box>
+        {typeof props.message === "object" ? (
+          props.message
+        ) : (
+          <Ink.Text color={colors.yellow}>{props.message}</Ink.Text>
+        )}
+
+        <Ink.Text> </Ink.Text>
+
+        <Parens>
+          <Ink.Text color={colors.gray}>{choices}</Ink.Text>
+        </Parens>
+      </Ink.Box>
+    </Ink.Box>
+  );
+}

package/src/command.ts

@@ -0,0 +1,78 @@
+import yargs from "yargs";
+import { hideBin } from "yargs/helpers";
+
+export type Argv = Awaited<ReturnType<typeof command>>;
+
+export async function command() {
+  // https://yargs.js.org/docs/#api-reference-optionkey-opt
+  return (
+    yargs(hideBin(process.argv))
+      .usage("Usage: git stack [options]")
+
+      .option("force", {
+        type: "boolean",
+        alias: ["f"],
+        default: false,
+        description: "Force sync even if no changes are detected",
+      })
+
+      .option("check", {
+        type: "boolean",
+        alias: ["c"],
+        default: false,
+        description: "Print status table without syncing",
+      })
+
+      .option("verify", {
+        type: "boolean",
+        default: true,
+        description: "Skip git hooks such as pre-commit and pre-push",
+      })
+
+      .option("verbose", {
+        type: "boolean",
+        alias: ["v"],
+        default: false,
+        description: "Print more detailed logs for debugging internals",
+      })
+
+      .option("update", {
+        type: "boolean",
+        alias: ["u", "upgrade"],
+        default: false,
+        description: "Check and install the latest version",
+      })
+
+      .option("branch", {
+        type: "string",
+        alias: ["b"],
+        description: `Set the master branch name, defaults to "master" (or "main" if "master" is not found)`,
+      })
+
+      .option("write-state-json", {
+        hidden: true,
+        type: "boolean",
+        default: false,
+        description: "Write state to local json file for debugging",
+      })
+
+      .option("mock-metadata", {
+        hidden: true,
+        type: "boolean",
+        default: false,
+        description: "Mock local store metadata for testing",
+      })
+
+      // do not wrap to 80 columns (yargs default)
+      // .wrap(yargs().terminalWidth()) will fill terminal (maximuize)
+      .wrap(null)
+      // disallow unknown options
+      .strict()
+      .version(process.env.CLI_VERSION || "unknown")
+      .showHidden(
+        "show-hidden",
+        "Show hidden options via `git stack help --show-hidden`"
+      )
+      .help("help", "Show usage via `git stack help`").argv
+  );
+}