@kud/jira-ink 0.1.0 → 0.2.1

package/dist/index.d.ts

@@ -1,4 +1,7 @@
 import * as react from 'react';
+import { ReactNode } from 'react';
+import { MarkdownTheme } from '@kud/ink-markdown';
+import { Hint } from '@kud/ink-ui';
 import { LocatedAttachment, JiraClient } from '@kud/jira';
 
 /**
@@ -53,8 +56,23 @@ type IssueDetailViewProps = {
     onComment?: () => void;
     onAssign?: () => void;
     onOpenBrowser?: () => void;
+    /**
+     * A host that draws its own chrome — a bordered drill frame with the title
+     * on top and the hints pinned at the foot — takes the screen in parts and
+     * places them. The view then draws neither its title line nor its footer,
+     * so nothing appears twice. `height` is still the whole area the host has
+     * given the body, frame excluded.
+     */
+    frame?: (parts: {
+        title: string;
+        subtitle: string;
+        hints: Hint[];
+        body: ReactNode;
+    }) => ReactNode;
+    /** Colours for the Markdown body; a host passes its own tokens so links, code and headings sit in its palette. */
+    theme?: MarkdownTheme;
 };
-declare const IssueDetailView: ({ issue, height, width, onBack, onTransition, onComment, onAssign, onOpenBrowser, }: IssueDetailViewProps) => react.JSX.Element;
+declare const IssueDetailView: ({ issue, height, width, onBack, onTransition, onComment, onAssign, onOpenBrowser, frame, theme, }: IssueDetailViewProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react.JSX.Element | null | undefined;
 
 type IssueBodyProps = {
     client: JiraClient;
@@ -65,6 +83,9 @@ type IssueBodyProps = {
     /** Override the terminal-derived size when the host draws inside a frame. */
     width?: number;
     height?: number;
+    /** The host's chrome around the screen — see `IssueDetailView`. */
+    frame?: IssueDetailViewProps["frame"];
+    theme?: IssueDetailViewProps["theme"];
 };
 /**
  * The issue screen as a host mounts it: hand it a client and a key, and it
@@ -76,6 +97,6 @@ type IssueBodyProps = {
  * `IssueDetailView` for jira-cli's own TUI, which owns the prompts they need;
  * here they are simply not wired, so the hint row does not offer them.
  */
-declare const IssueBody: ({ client, baseUrl, issueKey, onExit, width, height, }: IssueBodyProps) => react.JSX.Element;
+declare const IssueBody: ({ client, baseUrl, issueKey, onExit, width, height, frame, theme, }: IssueBodyProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react.JSX.Element | null | undefined;
 
 export { IssueBody, type IssueBodyProps, type IssueDetail, IssueDetailView, type IssueDetailViewProps, type Transition, issueDetailOf, transitionsOf };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { MarkdownViewport } from '@kud/ink-markdown';
-import { useTabs, KeyValue, Badge, Tabs, FooterHints, LoadingScreen, StatusMessage } from '@kud/ink-ui';
+import { useTabs, KeyValue, Badge, Tabs, FooterHints, StatusMessage, LoadingScreen } from '@kud/ink-ui';
 import { useInput, Box, Text, useStdout } from 'ink';
 import { useState, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -36,7 +36,9 @@ var IssueDetailView = ({
   onTransition,
   onComment,
   onAssign,
-  onOpenBrowser
+  onOpenBrowser,
+  frame,
+  theme
 }) => {
   const tabs = [
     { value: "description", label: "Description" },
@@ -50,7 +52,7 @@ var IssueDetailView = ({
   const { active } = useTabs(tabs, { initial: "description" });
   const [scroll, setScroll] = useState(0);
   useInput((input, key) => {
-    if (key.escape || key.leftArrow) return onBack();
+    if (key.escape) return onBack();
     if (input === "t" && onTransition) return onTransition();
     if (input === "c" && onComment) return onComment();
     if (input === "a" && onAssign) return onAssign();
@@ -59,7 +61,8 @@ var IssueDetailView = ({
     if (key.upArrow || input === "k") setScroll((s) => Math.max(0, s - 1));
   });
   const source = active === "comments" ? commentsAsMarkdown(issue) : active === "attachments" ? attachmentsAsMarkdown(issue) : issue.description || "_No description._";
-  const bodyHeight = Math.max(3, height - 12);
+  const chromeLines = frame ? 8 : 12;
+  const bodyHeight = Math.max(3, height - chromeLines);
   const hints = [
     ["\u2190\u2192", "section"],
     ["\u2191\u2193", "scroll"],
@@ -69,13 +72,8 @@ var IssueDetailView = ({
     ...onOpenBrowser ? [["o", "browser"]] : [],
     ["esc", "back"]
   ];
-  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsxs(Text, { bold: true, children: [
-      issue.key,
-      " ",
-      issue.summary
-    ] }),
-    /* @__PURE__ */ jsxs(Box, { marginTop: 1, flexDirection: "column", children: [
+  const body = /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
       issue.parent && /* @__PURE__ */ jsx(
         KeyValue,
         {
@@ -84,7 +82,7 @@ var IssueDetailView = ({
         }
       ),
       /* @__PURE__ */ jsx(KeyValue, { label: "status", value: /* @__PURE__ */ jsx(Badge, { children: issue.status }) }),
-      /* @__PURE__ */ jsx(KeyValue, { label: "type", value: issue.type }),
+      frame ? null : /* @__PURE__ */ jsx(KeyValue, { label: "type", value: issue.type }),
       /* @__PURE__ */ jsx(KeyValue, { label: "assignee", value: issue.assignee }),
       /* @__PURE__ */ jsx(KeyValue, { label: "reporter", value: issue.reporter }),
       issue.labels.length > 0 && /* @__PURE__ */ jsx(KeyValue, { label: "labels", value: issue.labels.join(", ") })
@@ -96,9 +94,25 @@ var IssueDetailView = ({
         source,
         width: Math.max(20, width - 2),
         height: bodyHeight,
-        scrollOffset: scroll
+        scrollOffset: scroll,
+        theme
       }
-    ) }),
+    ) })
+  ] });
+  if (frame)
+    return frame({
+      title: `${issue.key} \xB7 ${issue.type}`,
+      subtitle: issue.summary,
+      hints,
+      body
+    });
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs(Text, { bold: true, children: [
+      issue.key,
+      " ",
+      issue.summary
+    ] }),
+    /* @__PURE__ */ jsx(Box, { marginTop: 1, children: body }),
     /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(FooterHints, { hints }) })
   ] });
 };
@@ -157,7 +171,9 @@ var IssueBody = ({
   issueKey,
   onExit,
   width,
-  height
+  height,
+  frame,
+  theme
 }) => {
   const term = useTermSize();
   const [state, setState] = useState({ phase: "loading" });
@@ -174,20 +190,26 @@ var IssueBody = ({
       live = false;
     };
   }, [client, baseUrl, issueKey]);
-  useInput(
-    (_input, key) => {
-      if (key.escape) onExit();
-    },
-    { isActive: state.phase !== "ready" }
-  );
+  useInput((input, key) => {
+    if (input === "q") return onExit();
+    if (key.escape && state.phase !== "ready") onExit();
+  });
+  const framed = (body) => frame ? frame({
+    title: issueKey,
+    subtitle: "",
+    hints: [["esc", "back"]],
+    body
+  }) : body;
   if (state.phase === "loading")
-    return /* @__PURE__ */ jsx(LoadingScreen, { label: `Loading ${issueKey}\u2026` });
+    return framed(/* @__PURE__ */ jsx(LoadingScreen, { label: `Loading ${issueKey}\u2026` }));
   if (state.phase === "error")
-    return /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: /* @__PURE__ */ jsxs(StatusMessage, { variant: "error", children: [
-      issueKey,
-      ": ",
-      state.message
-    ] }) });
+    return framed(
+      /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: /* @__PURE__ */ jsxs(StatusMessage, { variant: "error", children: [
+        issueKey,
+        ": ",
+        state.message
+      ] }) })
+    );
   return /* @__PURE__ */ jsx(
     IssueDetailView,
     {
@@ -195,7 +217,9 @@ var IssueBody = ({
       width: width ?? term.cols,
       height: height ?? term.rows,
       onBack: onExit,
-      onOpenBrowser: () => openInBrowser(state.issue.url)
+      onOpenBrowser: () => openInBrowser(state.issue.url),
+      frame,
+      theme
     }
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kud/jira-ink",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Ink components for viewing Jira issues: the issue detail screen, shared by jira-cli's TUI and cockpit",
   "type": "module",
   "main": "dist/index.js",
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@kud/ink-ui": "0.25.0",
-    "@kud/ink-markdown": "0.1.1",
+    "@kud/ink-markdown": "0.3.0",
     "@kud/jira": "0.3.0"
   },
   "devDependencies": {