@bendyline/docblocks-react 2.0.0 → 2.1.1

package/src/Git/GitAuthGuidanceDialog.tsx

@@ -1,84 +0,0 @@
-/**
- * GitAuthGuidanceDialog — shown when a git operation fails to authenticate.
- *
- * DocBlocks deliberately never collects or stores credentials, so this
- * dialog only explains the three supported sign-in routes (credential
- * helper, GitHub CLI, SSH key). The copy is exported as a standalone
- * component so the clone dialog can embed it after an auth failure.
- */
-
-import { maybeGetDocBlocksHost } from '@bendyline/docblocks/host';
-import { Dialog } from '../components/Dialog.js';
-
-const LEARN_MORE_URL =
-  'https://docs.github.com/en/get-started/getting-started-with-git/caching-your-github-credentials-in-git';
-
-const OPERATION_LABELS: Record<'push' | 'pull' | 'fetch' | 'clone' | 'pr', string> = {
-  push: 'push',
-  pull: 'pull',
-  fetch: 'fetch',
-  clone: 'clone',
-  pr: 'create the pull request',
-};
-
-/** The credential guidance copy, reusable outside this dialog (clone flow). */
-export function GitCredentialGuidance({ detail }: { detail?: string }) {
-  return (
-    <>
-      <p className="db-settings-hint">
-        DocBlocks never stores Git credentials. Sign in with one of these, then try again:
-      </p>
-      <ul className="db-git-hint">
-        <li>
-          A git credential helper (<code>git config credential.helper</code>)
-        </li>
-        <li>
-          The GitHub CLI (<code>gh auth login</code>)
-        </li>
-        <li>An SSH key registered with your remote</li>
-      </ul>
-      {detail && (
-        <details>
-          <summary>Details</summary>
-          <p className="db-git-hint">{detail}</p>
-        </details>
-      )}
-    </>
-  );
-}
-
-export function GitAuthGuidanceDialog({
-  operation,
-  detail,
-  onClose,
-}: {
-  operation: 'push' | 'pull' | 'fetch' | 'clone' | 'pr';
-  detail?: string;
-  onClose: () => void;
-}) {
-  return (
-    <Dialog
-      title="Git needs credentials"
-      onClose={onClose}
-      footer={
-        <>
-          <button
-            type="button"
-            className="db-git-secondary-btn"
-            onClick={() => void maybeGetDocBlocksHost()?.shell.openExternal(LEARN_MORE_URL)}
-          >
-            Learn more
-          </button>
-          <button type="button" className="db-git-primary-btn" onClick={onClose}>
-            Close
-          </button>
-        </>
-      }
-    >
-      <p className="db-settings-hint">
-        Git could not authenticate with the remote while trying to {OPERATION_LABELS[operation]}.
-      </p>
-      <GitCredentialGuidance detail={detail} />
-    </Dialog>
-  );
-}

package/src/Git/GitBranchesDialog.tsx

@@ -1,144 +0,0 @@
-/**
- * GitBranchesDialog — switch between local branches or create a new one.
- *
- * Loads the branch list once from the host git API on mount. Remote
- * branches are display-only in v1 (a collapsed disclosure); switching and
- * creating go through the GitValue actions so errors (e.g. uncommitted
- * changes blocking a checkout) surface inline via lastResult.
- */
-
-import { useEffect, useRef, useState } from 'react';
-import type { GitBranchInfo } from '@bendyline/docblocks/host';
-import { Dialog } from '../components/Dialog.js';
-import { useGitContext } from './GitContext.js';
-
-export function GitBranchesDialog({
-  createFocus,
-  onClose,
-}: {
-  createFocus?: boolean;
-  onClose: () => void;
-}) {
-  const git = useGitContext();
-  const gitApi = git?.gitApi ?? null;
-  const repositoryId = git?.repositoryId ?? null;
-
-  const [branches, setBranches] = useState<GitBranchInfo[] | null>(null);
-  const [loadError, setLoadError] = useState<string | null>(null);
-  const [newName, setNewName] = useState('');
-  const createInputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (!gitApi || !repositoryId) return;
-    let cancelled = false;
-    void gitApi.listBranches(repositoryId).then((result) => {
-      if (cancelled) return;
-      if (result.ok) setBranches(result.value);
-      else setLoadError(result.error.message || 'Could not list branches');
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [gitApi, repositoryId]);
-
-  if (!git) return null;
-
-  const locals = branches?.filter((b) => b.kind === 'local') ?? [];
-  const remotes = branches?.filter((b) => b.kind === 'remote') ?? [];
-  const canCreate = newName.trim().length > 0 && git.busy === null;
-
-  const handleSwitch = async (name: string) => {
-    const ok = await git.switchBranch(name);
-    if (ok) onClose();
-  };
-
-  const handleCreate = async () => {
-    if (!canCreate) return;
-    const ok = await git.createBranch(newName.trim());
-    if (ok) onClose();
-  };
-
-  return (
-    <Dialog
-      title="Branches"
-      onClose={onClose}
-      initialFocusRef={createFocus ? createInputRef : undefined}
-    >
-      {branches === null && loadError === null && <p className="db-git-hint">Loading branches…</p>}
-      {loadError !== null && (
-        <p className="db-git-form-error" role="alert">
-          {loadError}
-        </p>
-      )}
-      {branches !== null && (
-        <div className="db-git-branch-list">
-          {locals.map((branch) =>
-            branch.current ? (
-              <span
-                key={branch.name}
-                className="db-git-branch-row db-git-branch-row--current"
-                aria-current="true"
-              >
-                {branch.name}
-              </span>
-            ) : (
-              <button
-                key={branch.name}
-                type="button"
-                className="db-git-branch-row"
-                disabled={git.busy !== null}
-                onClick={() => void handleSwitch(branch.name)}
-              >
-                {branch.name}
-              </button>
-            ),
-          )}
-        </div>
-      )}
-      {git.lastResult?.tone === 'error' && (
-        <p className="db-git-form-error" role="alert">
-          {git.lastResult.message}
-        </p>
-      )}
-      <hr />
-      <div className="db-git-form-row">
-        <label className="db-git-form-label" htmlFor="db-git-new-branch-name">
-          New branch
-        </label>
-        <input
-          id="db-git-new-branch-name"
-          ref={createInputRef}
-          className="db-git-form-input"
-          type="text"
-          value={newName}
-          onChange={(e) => setNewName(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') void handleCreate();
-          }}
-          placeholder="feature/my-branch"
-          spellCheck={false}
-        />
-        <button
-          type="button"
-          className="db-git-primary-btn"
-          disabled={!canCreate}
-          onClick={() => void handleCreate()}
-        >
-          Create
-        </button>
-      </div>
-      {remotes.length > 0 && (
-        <details>
-          <summary>Remote branches ({remotes.length})</summary>
-          <div className="db-git-branch-list">
-            {remotes.map((branch) => (
-              <span key={branch.name} className="db-git-branch-row">
-                {branch.name}
-              </span>
-            ))}
-          </div>
-        </details>
-      )}
-    </Dialog>
-  );
-}

package/src/Git/GitCloneDialog.tsx

@@ -1,200 +0,0 @@
-/**
- * GitCloneDialog — clone a remote repository into a new local workspace.
- *
- * The renderer only collects the URL; the main process shows the native
- * destination picker, streams progress back, and registers the clone as a
- * workspace. An auth failure swaps the body to the shared credential
- * guidance copy (no credentials are ever collected here).
- */
-
-import { useEffect, useRef, useState } from 'react';
-import type {
-  ElectronWorkspaceInfo,
-  GitCloneHandle,
-  GitCloneProgress,
-} from '@bendyline/docblocks/host';
-import { Dialog } from '../components/Dialog.js';
-import { useGitContext } from './GitContext.js';
-import { deriveCloneFolderName, isLikelyGitUrl } from './git-clone-utils.js';
-import { GitCredentialGuidance } from './GitAuthGuidanceDialog.js';
-
-export function GitCloneDialog({
-  onClose,
-  onCloned,
-}: {
-  onClose: () => void;
-  onCloned: (info: ElectronWorkspaceInfo) => void;
-}) {
-  const git = useGitContext();
-  const gitApi = git?.gitApi ?? null;
-
-  const [url, setUrl] = useState('');
-  const [cloning, setCloning] = useState(false);
-  const [progress, setProgress] = useState<GitCloneProgress | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  /** Non-null → show embedded credential guidance instead of the form. */
-  const [authDetail, setAuthDetail] = useState<{ detail?: string } | null>(null);
-  const handleRef = useRef<GitCloneHandle | null>(null);
-  const urlInputRef = useRef<HTMLInputElement>(null);
-
-  // Closing the dialog mid-clone abandons it — kill git and clean up.
-  useEffect(
-    () => () => {
-      handleRef.current?.cancel();
-    },
-    [],
-  );
-
-  if (!gitApi || typeof gitApi.clone !== 'function') return null;
-
-  const canClone = isLikelyGitUrl(url) && !cloning;
-
-  const handleClone = async () => {
-    if (!canClone) return;
-    setCloning(true);
-    setError(null);
-    setProgress(null);
-    const handle = gitApi.clone(url.trim(), (p) => setProgress(p));
-    handleRef.current = handle;
-    const result = await handle.result;
-    handleRef.current = null;
-    setCloning(false);
-    setProgress(null);
-    if (!result.ok) {
-      switch (result.error.code) {
-        case 'invalid-url':
-          setError('That doesn’t look like a valid repository URL.');
-          break;
-        case 'destination-exists':
-          setError('A folder with that name already exists there. Pick a different location.');
-          break;
-        case 'auth-failed':
-          setAuthDetail({ detail: result.error.message });
-          break;
-        case 'cancelled':
-          break; // user cancelled — just return to the form
-        default:
-          setError(result.error.message);
-      }
-      return;
-    }
-    if (result.value === null) return; // user cancelled the destination picker
-    onCloned(result.value);
-  };
-
-  const progressPercent = progress?.percent ?? null;
-  const progressText =
-    progress !== null
-      ? `${progress.phase}…${progressPercent !== null ? ` ${Math.round(progressPercent)}%` : ''}`
-      : 'Starting clone…';
-
-  if (authDetail !== null) {
-    return (
-      <Dialog
-        title="Clone repository"
-        onClose={onClose}
-        footer={
-          <>
-            <button
-              type="button"
-              className="db-git-secondary-btn"
-              onClick={() => setAuthDetail(null)}
-            >
-              Back
-            </button>
-            <button type="button" className="db-git-primary-btn" onClick={onClose}>
-              Close
-            </button>
-          </>
-        }
-      >
-        <p className="db-settings-hint">Git could not authenticate with that remote.</p>
-        <GitCredentialGuidance detail={authDetail.detail} />
-      </Dialog>
-    );
-  }
-
-  return (
-    <Dialog
-      title="Clone repository"
-      onClose={onClose}
-      closeOnBackdrop={!cloning}
-      initialFocusRef={urlInputRef}
-      footer={
-        <>
-          <button
-            type="button"
-            className="db-git-secondary-btn"
-            onClick={onClose}
-            disabled={cloning}
-          >
-            Cancel
-          </button>
-          <button
-            type="button"
-            className="db-git-primary-btn"
-            disabled={!canClone}
-            onClick={() => void handleClone()}
-          >
-            Clone
-          </button>
-        </>
-      }
-    >
-      <div className="db-git-form-row">
-        <label className="db-git-form-label" htmlFor="db-git-clone-url">
-          Repository URL
-        </label>
-        <input
-          id="db-git-clone-url"
-          ref={urlInputRef}
-          className="db-git-form-input"
-          type="text"
-          value={url}
-          onChange={(e) => setUrl(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') void handleClone();
-          }}
-          placeholder="https://github.com/owner/repo.git"
-          disabled={cloning}
-          spellCheck={false}
-        />
-      </div>
-      {isLikelyGitUrl(url) && (
-        <p className="db-git-hint">
-          Will clone into: <b>{deriveCloneFolderName(url)}</b> — you&rsquo;ll pick where next
-        </p>
-      )}
-      <p className="db-git-hint">
-        HTTPS and SSH URLs both work. You&rsquo;ll choose the destination folder in the next step.
-      </p>
-      {error !== null && (
-        <p className="db-git-form-error" role="alert">
-          {error}
-        </p>
-      )}
-      {cloning && (
-        <div className="db-git-progress">
-          {progressPercent !== null && (
-            <div
-              className="db-git-progress-bar"
-              role="progressbar"
-              aria-valuemin={0}
-              aria-valuemax={100}
-              aria-valuenow={Math.round(progressPercent)}
-              style={{ width: `${progressPercent}%` }}
-            />
-          )}
-          <p className="db-git-progress-text">{progressText}</p>
-          <button
-            type="button"
-            className="db-git-secondary-btn"
-            onClick={() => handleRef.current?.cancel()}
-          >
-            Cancel
-          </button>
-        </div>
-      )}
-    </Dialog>
-  );
-}

package/src/Git/GitCommitDialog.tsx

@@ -1,119 +0,0 @@
-/**
- * GitCommitDialog — message + per-file selection for committing changes.
- *
- * All changed files are included by default; while a merge is being
- * concluded, conflicted files are force-included (locked) because a commit
- * that omits them would not resolve the merge. Selection logic lives in
- * commit-selection.ts so it stays unit-testable.
- */
-
-import { useRef, useState } from 'react';
-import { Dialog } from '../components/Dialog.js';
-import { useGitContext } from './GitContext.js';
-import { BADGE_LABELS, badgeKindFor } from './git-status.js';
-import {
-  canCommit,
-  initSelection,
-  isMergeCommit,
-  selectedPaths,
-  setAllSelected,
-  toggleSelection,
-  type CommitSelection,
-} from './commit-selection.js';
-
-export function GitCommitDialog({ onClose }: { onClose: () => void }) {
-  const git = useGitContext();
-  const status = git?.status ?? null;
-  const merging = isMergeCommit(status);
-
-  const [message, setMessage] = useState('');
-  const [selection, setSelection] = useState<CommitSelection>(() =>
-    initSelection(status?.changes ?? [], merging),
-  );
-  const messageRef = useRef<HTMLTextAreaElement>(null);
-
-  if (!git || !status) return null;
-
-  const allOn = [...selection.included.values()].every(Boolean);
-  const commitDisabled = !canCommit(message, selection) || git.busy !== null;
-
-  const handleCommit = async () => {
-    const ok = await git.commit(message, selectedPaths(selection));
-    if (ok) onClose();
-  };
-
-  return (
-    <Dialog
-      title={merging ? 'Commit merge' : 'Commit changes'}
-      onClose={onClose}
-      size="wide"
-      closeOnBackdrop={false}
-      initialFocusRef={messageRef}
-      footer={
-        <>
-          <button type="button" className="db-git-secondary-btn" onClick={onClose}>
-            Cancel
-          </button>
-          <button
-            type="button"
-            className="db-git-primary-btn"
-            disabled={commitDisabled}
-            onClick={() => void handleCommit()}
-          >
-            Commit
-          </button>
-        </>
-      }
-    >
-      {merging && (
-        <p className="db-settings-hint">
-          You&rsquo;re completing a merge. Committing will conclude it.
-        </p>
-      )}
-      <textarea
-        ref={messageRef}
-        className="db-git-commit-message"
-        value={message}
-        onChange={(e) => setMessage(e.target.value)}
-        placeholder="Commit message"
-        aria-label="Commit message"
-        rows={3}
-      />
-      <div className="db-git-form-row">
-        <button
-          type="button"
-          className="db-git-secondary-btn"
-          onClick={() => setSelection((s) => setAllSelected(s, !allOn))}
-        >
-          {allOn ? 'Select none' : 'Select all'}
-        </button>
-      </div>
-      <ul className="db-git-file-list">
-        {status.changes.map((change) => {
-          const kind = badgeKindFor(change);
-          const locked = selection.locked.has(change.path);
-          const checked = locked || (selection.included.get(change.path) ?? true);
-          return (
-            <li key={change.path} className="db-git-file-row">
-              <label>
-                <input
-                  type="checkbox"
-                  checked={checked}
-                  disabled={locked}
-                  onChange={() => setSelection((s) => toggleSelection(s, change.path))}
-                />
-                <span>{change.path.replace(/^\/+/, '')}</span>
-              </label>
-              <span className="db-git-file-kind">{BADGE_LABELS[kind]}</span>
-            </li>
-          );
-        })}
-      </ul>
-      {git.lastResult?.tone === 'error' && (
-        <p className="db-git-form-error" role="alert">
-          {git.lastResult.message}
-        </p>
-      )}
-    </Dialog>
-  );
-}

package/src/Git/GitConflictsDialog.tsx

@@ -1,62 +0,0 @@
-/**
- * GitConflictsDialog — lists conflicted files after a pull hits a merge
- * conflict. Each row opens the file in the editor so the user can resolve
- * the markers; the primary action hands off to the commit dialog, which
- * concludes the merge.
- */
-
-import { Dialog } from '../components/Dialog.js';
-import { useGitContext } from './GitContext.js';
-
-export function GitConflictsDialog({
-  paths,
-  onOpenFile,
-  onClose,
-}: {
-  paths: string[];
-  onOpenFile: (path: string) => void;
-  onClose: () => void;
-}) {
-  const git = useGitContext();
-
-  return (
-    <Dialog
-      title="Merge conflicts"
-      onClose={onClose}
-      footer={
-        <>
-          <button type="button" className="db-git-secondary-btn" onClick={onClose}>
-            Close
-          </button>
-          <button
-            type="button"
-            className="db-git-primary-btn"
-            onClick={() => git?.openDialog({ kind: 'commit' })}
-          >
-            Open commit dialog
-          </button>
-        </>
-      }
-    >
-      <p className="db-settings-hint">
-        These files contain conflict markers. Edit each one to resolve the conflicts, then commit to
-        complete the merge.
-      </p>
-      <ul className="db-git-file-list">
-        {paths.map((path) => (
-          <li key={path} className="db-git-file-row">
-            <button
-              type="button"
-              onClick={() => {
-                onOpenFile(path);
-                onClose();
-              }}
-            >
-              {path.replace(/^\/+/, '')}
-            </button>
-          </li>
-        ))}
-      </ul>
-    </Dialog>
-  );
-}

package/src/Git/GitContext.tsx

@@ -1,88 +0,0 @@
-/**
- * GitContext — the seam between DocBlocksShell and every git UI surface.
- *
- * The shell calls useGit() once and provides the value here; the status
- * bar, file-tree badges, toolbar control, and dialogs all consume it.
- * Consumers must tolerate a null context (FileExplorer renders standalone
- * in tests and on surfaces with no git).
- */
-
-import { createContext, useContext } from 'react';
-import type {
-  DocBlocksHostGitAPI,
-  GitCapabilities,
-  GitRepoDetection,
-  GitStatus,
-} from '@bendyline/docblocks/host';
-import type { FileSystemProvider } from '@bendyline/docblocks/filesystem';
-import type { GitBadgeKind } from './git-status.js';
-
-export type GitDialogState =
-  | { kind: 'none' }
-  | { kind: 'commit' }
-  | { kind: 'branches'; createFocus?: boolean }
-  | { kind: 'history'; path?: string }
-  /** `revision` absent → working tree vs HEAD; present → that commit vs its parent. */
-  | { kind: 'diff'; path: string; revision?: { sha: string } }
-  | { kind: 'clone' }
-  | {
-      kind: 'auth-guidance';
-      operation: 'push' | 'pull' | 'fetch' | 'clone' | 'pr';
-      detail?: string;
-    }
-  | { kind: 'conflicts'; paths: string[] };
-
-export type GitBusyKind = 'push' | 'pull' | 'fetch' | 'commit' | 'branch' | 'pr' | null;
-
-export interface GitInlineResult {
-  tone: 'info' | 'error';
-  message: string;
-}
-
-export interface GitValue {
-  /** Tier 1 — Electron host with a working git. Gates the clone entry. */
-  available: boolean;
-  capabilities: GitCapabilities | null;
-  /** Tier 2 — the active workspace root is a repository. Gates everything else. */
-  repo: GitRepoDetection | null;
-  /** Main-owned repository capability; never a native path. */
-  repositoryId: string | null;
-  /** Parsed web location of the first remote, when one exists and parses. */
-  remoteWeb: { host: string; owner: string; repo: string; webUrl: string } | null;
-  /** Raw host API for read-heavy dialogs (log, branches, file-at-revision). */
-  gitApi: DocBlocksHostGitAPI | null;
-  provider: FileSystemProvider | null;
-  theme: 'light' | 'dark';
-
-  status: GitStatus | null;
-  badges: ReadonlyMap<string, GitBadgeKind>;
-  busy: GitBusyKind;
-  /** Latest operation outcome, surfaced in an aria-live region. */
-  lastResult: GitInlineResult | null;
-
-  refresh: () => void;
-  /** Debounced refresh — used after autosave writes. */
-  scheduleRefresh: () => void;
-
-  /** Actions route their typed errors to dialogs/lastResult internally. */
-  commit: (message: string, paths: string[]) => Promise<boolean>;
-  push: () => Promise<void>;
-  pull: () => Promise<void>;
-  fetchRemote: () => Promise<void>;
-  createBranch: (name: string) => Promise<boolean>;
-  switchBranch: (name: string) => Promise<boolean>;
-  /** Open the repo (or a file within it) on the remote's web host. */
-  openOnRemote: (filePath?: string) => void;
-  createPullRequest: () => Promise<void>;
-
-  dialog: GitDialogState;
-  openDialog: (dialog: GitDialogState) => void;
-  closeDialog: () => void;
-}
-
-export const GitContext = createContext<GitValue | null>(null);
-
-/** Null when no provider is mounted — callers must degrade gracefully. */
-export function useGitContext(): GitValue | null {
-  return useContext(GitContext);
-}