@manthank/mgit 1.0.0

package/dist/views/RecipeView.js

@@ -0,0 +1,153 @@
+// Walks the user through a multi-step recipe one command at a time.
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import Spinner from 'ink-spinner';
+import { git } from '../git.js';
+import { recipes } from '../recipes.js';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+export default function RecipeView({
+  recipeId,
+  theme,
+  config
+}) {
+  const recipe = recipes[recipeId];
+  const inputs = recipe.inputs || [];
+  const [values, setValues] = useState(() => {
+    const init = {};
+    for (const inp of inputs) init[inp.name] = inp.default || '';
+    return init;
+  });
+  const [idx, setIdx] = useState(0);
+  const [phase, setPhase] = useState(inputs.length ? 'input' : 'run'); // input | run | busy | done
+  const [step, setStep] = useState(0);
+  const [log, setLog] = useState([]); // {title, ok, out}
+
+  const steps = phase !== 'input' ? recipe.steps(values) : [];
+  async function runStep() {
+    setPhase('busy');
+    const s = steps[step];
+    const r = await git(s.args);
+    const entry = {
+      title: s.title,
+      ok: r.ok,
+      out: r.stdout || r.stderr,
+      cmd: 'git ' + s.args.join(' ')
+    };
+    const nextLog = [...log, entry];
+    setLog(nextLog);
+    if (step < steps.length - 1) {
+      setStep(step + 1);
+      setPhase('run');
+    } else {
+      setPhase('done');
+    }
+  }
+  function skipStep() {
+    const s = steps[step];
+    const entry = {
+      title: s.title,
+      ok: true,
+      out: '(skipped)',
+      cmd: 'git ' + s.args.join(' '),
+      skipped: true
+    };
+    setLog([...log, entry]);
+    if (step < steps.length - 1) setStep(step + 1);else setPhase('done');
+  }
+  useInput((input, key) => {
+    if (phase === 'run') {
+      if (key.return) runStep();else if (input.toLowerCase() === 's') skipStep();
+    }
+  });
+  if (phase === 'input') {
+    const inp = inputs[idx];
+    return /*#__PURE__*/_jsxs(Box, {
+      flexDirection: "column",
+      children: [/*#__PURE__*/_jsxs(Text, {
+        color: theme.secondary,
+        bold: true,
+        children: [recipe.emoji, " ", recipe.title]
+      }), /*#__PURE__*/_jsx(Text, {
+        color: theme.muted,
+        children: recipe.intro
+      }), /*#__PURE__*/_jsxs(Box, {
+        marginTop: 1,
+        children: [/*#__PURE__*/_jsxs(Text, {
+          color: theme.accent,
+          children: [inp.label.padEnd(24), " "]
+        }), /*#__PURE__*/_jsx(TextInput, {
+          value: values[inp.name],
+          placeholder: inp.placeholder || '',
+          onChange: val => setValues(v => ({
+            ...v,
+            [inp.name]: val
+          })),
+          onSubmit: () => {
+            if (!values[inp.name].trim() && !inp.default) return;
+            if (idx < inputs.length - 1) setIdx(idx + 1);else setPhase('run');
+          }
+        })]
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(Box, {
+    flexDirection: "column",
+    children: [/*#__PURE__*/_jsxs(Text, {
+      color: theme.secondary,
+      bold: true,
+      children: [recipe.emoji, " ", recipe.title]
+    }), log.map((l, i) => /*#__PURE__*/_jsx(Box, {
+      children: /*#__PURE__*/_jsxs(Text, {
+        color: l.skipped ? theme.muted : l.ok ? theme.success : theme.danger,
+        children: [l.skipped ? '↷' : l.ok ? '✓' : '✗', " Step ", i + 1, ": ", l.title]
+      })
+    }, i)), phase === 'busy' && /*#__PURE__*/_jsxs(Text, {
+      color: theme.accent,
+      children: [/*#__PURE__*/_jsx(Spinner, {
+        type: "dots"
+      }), " Running step ", step + 1, "\u2026"]
+    }), phase === 'run' && steps[step] && /*#__PURE__*/_jsxs(Box, {
+      flexDirection: "column",
+      marginTop: 1,
+      children: [/*#__PURE__*/_jsxs(Text, {
+        color: theme.accent,
+        bold: true,
+        children: ["Step ", step + 1, " of ", steps.length, ": ", steps[step].title]
+      }), /*#__PURE__*/_jsx(Text, {
+        color: theme.muted,
+        children: steps[step].why
+      }), /*#__PURE__*/_jsxs(Box, {
+        marginTop: 1,
+        borderStyle: "round",
+        borderColor: theme.accent,
+        paddingX: 1,
+        children: [/*#__PURE__*/_jsx(Text, {
+          color: theme.muted,
+          children: "$ "
+        }), /*#__PURE__*/_jsxs(Text, {
+          color: theme.secondary,
+          bold: true,
+          children: ["git ", steps[step].args.map(a => /\s/.test(a) ? `"${a}"` : a).join(' ')]
+        })]
+      }), /*#__PURE__*/_jsx(Text, {
+        color: theme.muted,
+        children: "Enter \u2192 run this step \xB7 S \u2192 skip it \xB7 Esc \u2192 leave recipe"
+      })]
+    }), phase === 'done' && /*#__PURE__*/_jsxs(Box, {
+      flexDirection: "column",
+      marginTop: 1,
+      children: [/*#__PURE__*/_jsx(Text, {
+        color: theme.success,
+        bold: true,
+        children: "\uD83C\uDF89 Recipe complete!"
+      }), log.some(l => !l.ok && !l.skipped) && /*#__PURE__*/_jsx(Text, {
+        color: theme.danger,
+        children: "Some steps failed \u2014 scroll up to review. That's normal while learning!"
+      }), /*#__PURE__*/_jsx(Text, {
+        color: theme.muted,
+        children: "Press Esc / \u2190 to go back."
+      })]
+    })]
+  });
+}

package/dist/views/SettingsView.js

@@ -0,0 +1,66 @@
+// Customisation: pick a theme (with live preview) and toggle UI options.
+import React from 'react';
+import { Box, Text } from 'ink';
+import Gradient from 'ink-gradient';
+import Menu from '../components/Menu.js';
+import { themes, themeOrder } from '../themes.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function SettingsView({
+  theme,
+  config,
+  onChange
+}) {
+  const items = [...themeOrder.map(key => ({
+    label: `Theme: ${themes[key].emoji} ${themes[key].label}${key === config.theme ? '  ✓' : ''}`,
+    value: 'theme:' + key
+  })), {
+    label: `Animations: ${config.animations ? 'ON ✨' : 'OFF'}`,
+    value: 'toggle:animations'
+  }, {
+    label: `Confirm dangerous actions: ${config.confirmDanger ? 'ON 🛡' : 'OFF'}`,
+    value: 'toggle:confirmDanger'
+  }, {
+    label: `Show command hints: ${config.showHints ? 'ON 💡' : 'OFF'}`,
+    value: 'toggle:showHints'
+  }];
+  function handle({
+    value
+  }) {
+    const [kind, key] = value.split(':');
+    if (kind === 'theme') onChange({
+      ...config,
+      theme: key
+    });else onChange({
+      ...config,
+      [key]: !config[key]
+    });
+  }
+  return /*#__PURE__*/_jsxs(Box, {
+    flexDirection: "column",
+    children: [/*#__PURE__*/_jsx(Text, {
+      color: theme.muted,
+      children: "Pick a theme or toggle options. Changes save automatically."
+    }), /*#__PURE__*/_jsxs(Box, {
+      marginTop: 1,
+      marginBottom: 1,
+      children: [themeOrder.map(key => /*#__PURE__*/_jsx(Box, {
+        marginRight: 1,
+        children: /*#__PURE__*/_jsx(Gradient, {
+          colors: themes[key].gradient,
+          children: /*#__PURE__*/_jsx(Text, {
+            children: key === config.theme ? '◉' : '●'
+          })
+        })
+      }, key)), /*#__PURE__*/_jsx(Text, {
+        color: theme.muted,
+        children: " live palette"
+      })]
+    }), /*#__PURE__*/_jsx(Menu, {
+      items: items,
+      onSelect: handle,
+      theme: theme,
+      animations: config.animations,
+      limit: 12
+    })]
+  });
+}

package/dist/views/SetupWizard.js

@@ -0,0 +1,120 @@
+// One-time identity setup: name, email, default branch = main.
+import React, { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+import Spinner from 'ink-spinner';
+import { git, getGlobalIdentity } from '../git.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function SetupWizard({
+  theme,
+  onDone
+}) {
+  const [phase, setPhase] = useState('load'); // load | name | email | running | done
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [results, setResults] = useState([]);
+  useEffect(() => {
+    let alive = true;
+    getGlobalIdentity().then(id => {
+      if (!alive) return;
+      setName(id.name);
+      setEmail(id.email);
+      setPhase('name');
+    });
+    return () => {
+      alive = false;
+    };
+  }, []);
+  async function run() {
+    setPhase('running');
+    const steps = [{
+      label: 'Set your name',
+      args: ['config', '--global', 'user.name', name]
+    }, {
+      label: 'Set your email',
+      args: ['config', '--global', 'user.email', email]
+    }, {
+      label: 'Default branch → main',
+      args: ['config', '--global', 'init.defaultBranch', 'main']
+    }];
+    const out = [];
+    for (const s of steps) {
+      const r = await git(s.args);
+      out.push({
+        label: s.label,
+        ok: r.ok,
+        msg: r.ok ? 'done' : r.stderr
+      });
+      setResults([...out]);
+    }
+    setPhase('done');
+  }
+  if (phase === 'load') {
+    return /*#__PURE__*/_jsxs(Text, {
+      color: theme.accent,
+      children: [/*#__PURE__*/_jsx(Spinner, {
+        type: "dots"
+      }), " Checking existing config\u2026"]
+    });
+  }
+  return /*#__PURE__*/_jsxs(Box, {
+    flexDirection: "column",
+    children: [/*#__PURE__*/_jsx(Text, {
+      color: theme.muted,
+      children: "Tell git who you are. This is stored globally and only needs doing once."
+    }), /*#__PURE__*/_jsxs(Box, {
+      marginTop: 1,
+      children: [/*#__PURE__*/_jsx(Text, {
+        color: theme.accent,
+        children: "Name  "
+      }), phase === 'name' ? /*#__PURE__*/_jsx(TextInput, {
+        value: name,
+        onChange: setName,
+        onSubmit: () => name.trim() && setPhase('email'),
+        placeholder: "Your Name"
+      }) : /*#__PURE__*/_jsx(Text, {
+        color: "white",
+        children: name
+      })]
+    }), phase !== 'name' && /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        color: theme.accent,
+        children: "Email "
+      }), phase === 'email' ? /*#__PURE__*/_jsx(TextInput, {
+        value: email,
+        onChange: setEmail,
+        onSubmit: () => email.trim() && run(),
+        placeholder: "you@example.com"
+      }) : /*#__PURE__*/_jsx(Text, {
+        color: "white",
+        children: email
+      })]
+    }), (phase === 'running' || phase === 'done') && /*#__PURE__*/_jsxs(Box, {
+      flexDirection: "column",
+      marginTop: 1,
+      children: [results.map((r, i) => /*#__PURE__*/_jsxs(Text, {
+        color: r.ok ? theme.success : theme.danger,
+        children: [r.ok ? '✓' : '✗', " ", r.label, " ", r.ok ? '' : '— ' + r.msg]
+      }, i)), phase === 'done' && /*#__PURE__*/_jsx(Box, {
+        marginTop: 1,
+        children: /*#__PURE__*/_jsx(Text, {
+          color: theme.success,
+          bold: true,
+          children: "\uD83C\uDF89 All set! Press Esc / \u2190 to go back."
+        })
+      })]
+    }), phase === 'name' && /*#__PURE__*/_jsx(Box, {
+      marginTop: 1,
+      children: /*#__PURE__*/_jsx(Text, {
+        color: theme.muted,
+        children: "Type your name, press Enter \u2192"
+      })
+    }), phase === 'email' && /*#__PURE__*/_jsx(Box, {
+      marginTop: 1,
+      children: /*#__PURE__*/_jsx(Text, {
+        color: theme.muted,
+        children: "Type your email, press Enter to save \u2192"
+      })
+    })]
+  });
+}

package/dist/views/StatusView.js

@@ -0,0 +1,121 @@
+// Colour-coded working-tree dashboard.
+import React, { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+import { getStatus, getCurrentBranch } from '../git.js';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+function Row({
+  theme,
+  file
+}) {
+  const color = file.untracked ? theme.warn : file.label === 'Deleted' ? theme.danger : file.staged ? theme.success : theme.secondary;
+  const mark = file.staged ? '✓' : file.untracked ? '?' : '•';
+  return /*#__PURE__*/_jsxs(Text, {
+    children: [/*#__PURE__*/_jsxs(Text, {
+      color: color,
+      children: [mark, " "]
+    }), /*#__PURE__*/_jsxs(Text, {
+      color: theme.muted,
+      children: ["[", file.label.padEnd(9), "] "]
+    }), /*#__PURE__*/_jsx(Text, {
+      color: color,
+      children: file.name
+    })]
+  });
+}
+export default function StatusView({
+  theme
+}) {
+  const [state, setState] = useState({
+    loading: true
+  });
+  const [branch, setBranch] = useState('');
+  useEffect(() => {
+    let alive = true;
+    (async () => {
+      const [s, b] = [await getStatus(), await getCurrentBranch()];
+      if (!alive) return;
+      setState({
+        loading: false,
+        ...s
+      });
+      setBranch(b);
+    })();
+    return () => {
+      alive = false;
+    };
+  }, []);
+  if (state.loading) {
+    return /*#__PURE__*/_jsxs(Text, {
+      color: theme.accent,
+      children: [/*#__PURE__*/_jsx(Spinner, {
+        type: "dots"
+      }), " Reading working tree\u2026"]
+    });
+  }
+  if (!state.ok) {
+    return /*#__PURE__*/_jsxs(Text, {
+      color: theme.danger,
+      children: ["Could not read status: ", state.error]
+    });
+  }
+  const clean = state.files.length === 0;
+  return /*#__PURE__*/_jsxs(Box, {
+    flexDirection: "column",
+    children: [/*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsxs(Text, {
+        color: theme.accent,
+        bold: true,
+        children: ["On branch ", branch || '(detached)', ' ']
+      }), state.ahead > 0 && /*#__PURE__*/_jsxs(Text, {
+        color: theme.warn,
+        children: ["\u2191", state.ahead, " ahead "]
+      }), state.behind > 0 && /*#__PURE__*/_jsxs(Text, {
+        color: theme.danger,
+        children: ["\u2193", state.behind, " behind "]
+      })]
+    }), clean ? /*#__PURE__*/_jsx(Box, {
+      marginTop: 1,
+      children: /*#__PURE__*/_jsx(Text, {
+        color: theme.success,
+        children: "\u2728 Working tree clean \u2014 nothing to commit."
+      })
+    }) : /*#__PURE__*/_jsxs(Box, {
+      flexDirection: "column",
+      marginTop: 1,
+      children: [state.staged.length > 0 && /*#__PURE__*/_jsxs(Box, {
+        flexDirection: "column",
+        marginBottom: 1,
+        children: [/*#__PURE__*/_jsxs(Text, {
+          color: theme.success,
+          bold: true,
+          children: ["\u25CF Staged (", state.staged.length, ") \u2014 will be committed"]
+        }), state.staged.map((f, i) => /*#__PURE__*/_jsx(Row, {
+          theme: theme,
+          file: f
+        }, 's' + i))]
+      }), state.unstaged.length > 0 && /*#__PURE__*/_jsxs(Box, {
+        flexDirection: "column",
+        marginBottom: 1,
+        children: [/*#__PURE__*/_jsxs(Text, {
+          color: theme.secondary,
+          bold: true,
+          children: ["\u25CF Changed but not staged (", state.unstaged.length, ")"]
+        }), state.unstaged.map((f, i) => /*#__PURE__*/_jsx(Row, {
+          theme: theme,
+          file: f
+        }, 'u' + i))]
+      }), state.untracked.length > 0 && /*#__PURE__*/_jsxs(Box, {
+        flexDirection: "column",
+        children: [/*#__PURE__*/_jsxs(Text, {
+          color: theme.warn,
+          bold: true,
+          children: ["\u25CF Untracked (", state.untracked.length, ") \u2014 new files git isn't watching yet"]
+        }), state.untracked.map((f, i) => /*#__PURE__*/_jsx(Row, {
+          theme: theme,
+          file: f
+        }, 'n' + i))]
+      })]
+    })]
+  });
+}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@manthank/mgit",
+  "version": "1.0.0",
+  "description": "A friendly, animated terminal UI that teaches beginners how to use git & GitHub.",
+  "type": "module",
+  "bin": {
+    "mgit": "dist/cli.js"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "babel source --out-dir dist --extensions .js,.jsx --copy-files",
+    "dev": "npm run build && node ./dist/cli.js",
+    "start": "node ./dist/cli.js",
+    "prepare": "npm run build"
+  },
+  "keywords": [
+    "git",
+    "github",
+    "cli",
+    "tui",
+    "ink",
+    "beginner",
+    "interactive",
+    "learn-git",
+    "terminal",
+    "learning"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "execa": "^9.5.2",
+    "ink": "^5.1.0",
+    "ink-big-text": "^2.0.0",
+    "ink-gradient": "^3.0.0",
+    "ink-select-input": "^6.0.0",
+    "ink-spinner": "^5.0.0",
+    "ink-text-input": "^6.0.0",
+    "react": "^18.3.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.26.4",
+    "@babel/core": "^7.26.0",
+    "@babel/preset-react": "^7.26.3",
+    "ink-testing-library": "^4.0.0"
+  }
+}