@monkey-mini-app/ui 0.1.0

package/dist/src/products/jql-language.ts

@@ -0,0 +1,70 @@
+import { StreamLanguage } from "@codemirror/language"
+import type { CompletionContext } from "@codemirror/autocomplete"
+
+const KEYWORDS =
+  /^(AND|OR|NOT|ORDER|BY|ASC|DESC|IN|IS|EMPTY|NULL|WAS|CHANGED)\b/i
+const OPERATORS = /^(!=|!~|>=|<=|=|~|>|<)/
+
+export const jqlLanguage = StreamLanguage.define({
+  token(stream) {
+    if (stream.eatSpace()) return null
+    if (stream.match(/"(?:[^"\\]|\\.)*"/) || stream.match(/'(?:[^'\\]|\\.)*'/)) return "string"
+    if (stream.match(/^[0-9]+(\.[0-9]+)?/)) return "number"
+    if (stream.match(KEYWORDS)) return "keyword"
+    if (stream.match(OPERATORS)) return "operator"
+    if (stream.match(/^[(),[\]]/)) return "punctuation"
+    if (stream.match(/^[A-Za-z_][A-Za-z0-9_]*(?=\s*\()/)) return "function"
+    if (stream.match(/^[A-Za-z][A-Za-z0-9_.]*/)) return "variableName"
+    stream.next()
+    return null
+  },
+})
+
+export type JqlSuggestItem = { name: string; detail?: string }
+
+export function jqlCompletion(fields: JqlSuggestItem[], functions: JqlSuggestItem[]) {
+  const keywords = ["AND", "OR", "NOT", "ORDER BY", "ASC", "DESC", "IN", "NOT IN", "IS", "IS NOT", "EMPTY"]
+  return (context: CompletionContext) => {
+    const word = context.matchBefore(/[A-Za-z_][\w.]*/)
+    if (!word && !context.explicit) return null
+    return {
+      from: word?.from ?? context.pos,
+      options: [
+        ...fields.map((field) => ({
+          label: field.name,
+          type: "property",
+          detail: field.detail,
+        })),
+        ...functions.map((fn) => ({
+          label: `${fn.name}()`,
+          type: "function",
+          detail: fn.detail,
+        })),
+        ...keywords.map((label) => ({ label, type: "keyword" })),
+      ],
+    }
+  }
+}
+
+export const defaultJqlFields: JqlSuggestItem[] = [
+  { name: "project", detail: "Project key" },
+  { name: "status", detail: "Status" },
+  { name: "assignee", detail: "Assignee" },
+  { name: "reporter", detail: "Reporter" },
+  { name: "issuetype", detail: "Issue type" },
+  { name: "priority", detail: "Priority" },
+  { name: "labels", detail: "Labels" },
+  { name: "fixVersion", detail: "Fix version" },
+  { name: "created", detail: "Created" },
+  { name: "updated", detail: "Updated" },
+  { name: "summary", detail: "Summary" },
+  { name: "key", detail: "Issue key" },
+]
+
+export const defaultJqlFunctions: JqlSuggestItem[] = [
+  { name: "currentUser", detail: "Logged-in user" },
+  { name: "now", detail: "Current time" },
+  { name: "startOfDay", detail: "Start of day" },
+  { name: "endOfDay", detail: "End of day" },
+  { name: "membersOf", detail: "Group members" },
+]

package/dist/src/products/json-viewer.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import * as React from "react"
+
+function Node({ label, value, depth }: { label?: string; value: unknown; depth: number }) {
+  const [open, setOpen] = React.useState(depth < 2)
+  if (value !== null && typeof value === "object") {
+    const entries = Object.entries(value as Record<string, unknown>)
+    return (
+      <div style={{ paddingLeft: depth * 12 }}>
+        <button type="button" className="text-left font-mono text-xs" onClick={() => setOpen((v) => !v)}>
+          {open ? "▾" : "▸"} {label ? `${label}: ` : ""}
+          {Array.isArray(value) ? `Array(${entries.length})` : "Object"}
+        </button>
+        {open
+          ? entries.map(([key, child]) => (
+              <Node key={key} label={key} value={child} depth={depth + 1} />
+            ))
+          : null}
+      </div>
+    )
+  }
+  return (
+    <div className="font-mono text-xs" style={{ paddingLeft: depth * 12 }}>
+      {label ? `${label}: ` : ""}
+      <span className="text-muted-foreground">{JSON.stringify(value)}</span>
+    </div>
+  )
+}
+
+export function JsonViewer({ value }: { value: unknown }) {
+  return (
+    <div data-testid="json-viewer" className="rounded-xl border bg-card p-3">
+      <Node value={value} depth={0} />
+    </div>
+  )
+}

package/dist/src/products/kanban-issue-panel.tsx

@@ -0,0 +1,98 @@
+"use client"
+
+import { Avatar, AvatarFallback } from "@monkey-mini-app/ui/components/avatar"
+import { Badge } from "@monkey-mini-app/ui/components/badge"
+import { Separator } from "@monkey-mini-app/ui/components/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@monkey-mini-app/ui/components/sheet"
+import { CommentThread } from "@monkey-mini-app/ui/blocks/comment-thread"
+import { DescriptionList } from "@monkey-mini-app/ui/blocks/description-list"
+import { SeverityChip } from "@monkey-mini-app/ui/blocks/severity-chip"
+import { StatusBadge } from "@monkey-mini-app/ui/blocks/status-badge"
+import type { KanbanCard } from "@monkey-mini-app/ui/products/kanban"
+import { useLabels } from "@monkey-mini-app/ui/i18n/context"
+
+export function KanbanIssuePanel({
+  card,
+  columnTitle,
+  open,
+  onOpenChange,
+}: {
+  card: KanbanCard | null
+  columnTitle?: string
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}) {
+  const t = useLabels("kanbanIssue")
+  if (!card) return null
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="sm:max-w-lg" data-testid="kanban-issue-panel">
+        <SheetHeader>
+          <SheetDescription className="font-mono text-xs">
+            {card.key ?? card.id}
+            {card.type ? ` · ${card.type}` : ""}
+          </SheetDescription>
+          <SheetTitle>{card.title}</SheetTitle>
+        </SheetHeader>
+        <div className="flex flex-1 flex-col gap-4 overflow-y-auto px-4 pb-6">
+          <div className="flex flex-wrap gap-2">
+            {card.status ? <StatusBadge status={card.status} /> : null}
+            {card.priority ? <SeverityChip severity={card.priority} /> : null}
+            {columnTitle ? <Badge variant="outline">{columnTitle}</Badge> : null}
+          </div>
+          <DescriptionList
+            items={[
+              { label: t.assignee, value: card.assignee ?? t.unassigned },
+              { label: t.reporter, value: card.reporter ?? "—" },
+              { label: t.updated, value: card.updated ?? "—" },
+            ]}
+          />
+          {card.tags?.length ? (
+            <div className="flex flex-wrap gap-1">
+              {card.tags.map((tag) => (
+                <Badge key={tag} variant="secondary">
+                  {tag}
+                </Badge>
+              ))}
+            </div>
+          ) : null}
+          <div>
+            <div className="mb-1 text-xs font-medium tracking-wide text-muted-foreground uppercase">
+              {t.description}
+            </div>
+            <p className="text-sm leading-6 whitespace-pre-wrap">
+              {card.description ?? t.noDescription}
+            </p>
+          </div>
+          <Separator />
+          <div>
+            <div className="mb-2 text-xs font-medium tracking-wide text-muted-foreground uppercase">
+              {t.comments}
+            </div>
+            {card.comments?.length ? (
+              <CommentThread comments={card.comments} />
+            ) : (
+              <p className="text-muted-foreground text-sm">{t.noComments}</p>
+            )}
+          </div>
+          {card.assignee ? (
+            <div className="mt-auto flex items-center gap-2 text-sm">
+              <Avatar className="size-6">
+                <AvatarFallback className="text-[10px]">
+                  {card.assignee.slice(0, 2).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+              {card.assignee}
+            </div>
+          ) : null}
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+}

package/dist/src/products/kanban.tsx

@@ -0,0 +1,245 @@
+"use client"
+
+import * as React from "react"
+import type { ReactNode } from "react"
+import {
+  DndContext,
+  PointerSensor,
+  closestCorners,
+  useDraggable,
+  useDroppable,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core"
+import { CSS } from "@dnd-kit/utilities"
+
+import { Badge } from "@monkey-mini-app/ui/components/badge"
+import { Avatar, AvatarFallback } from "@monkey-mini-app/ui/components/avatar"
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+
+export type KanbanComment = {
+  id: string
+  author: string
+  body: string
+  time?: string
+}
+
+export type KanbanCard = {
+  id: string
+  title: string
+  columnId: string
+  key?: string
+  type?: string
+  status?: string
+  description?: string
+  assignee?: string
+  reporter?: string
+  tags?: string[]
+  priority?: "P0" | "P1" | "P2" | "P3" | string
+  updated?: string
+  comments?: KanbanComment[]
+}
+
+export type KanbanColumn = {
+  id: string
+  title: string
+  limit?: number
+}
+
+const priorityTone: Record<string, string> = {
+  P0: "bg-destructive/15 text-destructive",
+  P1: "bg-orange-500/15 text-orange-700 dark:text-orange-400",
+  P2: "bg-amber-500/15 text-amber-700 dark:text-amber-400",
+  P3: "bg-muted text-muted-foreground",
+}
+
+function DefaultCard({ card }: { card: KanbanCard }) {
+  return (
+    <>
+      {card.key ? (
+        <div className="text-muted-foreground mb-1 font-mono text-[10px]">{card.key}</div>
+      ) : null}
+      <div className="flex items-start justify-between gap-2">
+        <div className="text-sm font-medium">{card.title}</div>
+        {card.priority ? (
+          <Badge
+            variant="outline"
+            className={cn(
+              "border-transparent text-[10px]",
+              priorityTone[card.priority] ?? "bg-muted"
+            )}
+          >
+            {card.priority}
+          </Badge>
+        ) : null}
+      </div>
+      {card.description ? (
+        <p className="text-muted-foreground line-clamp-2 text-xs">{card.description}</p>
+      ) : null}
+      <div className="mt-2 flex items-center justify-between gap-2">
+        <div className="flex flex-wrap gap-1">
+          {card.tags?.map((tag) => (
+            <Badge key={tag} variant="secondary" className="text-[10px]">
+              {tag}
+            </Badge>
+          ))}
+        </div>
+        {card.assignee ? (
+          <Avatar className="size-5">
+            <AvatarFallback className="text-[9px]">
+              {card.assignee.slice(0, 2).toUpperCase()}
+            </AvatarFallback>
+          </Avatar>
+        ) : null}
+      </div>
+    </>
+  )
+}
+
+function Card({
+  card,
+  children,
+  onCardClick,
+}: {
+  card: KanbanCard
+  children: ReactNode
+  onCardClick?: (card: KanbanCard) => void
+}) {
+  const origin = React.useRef({ x: 0, y: 0 })
+  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
+    id: card.id,
+  })
+  return (
+    <div
+      ref={setNodeRef}
+      data-testid={`kanban-card-${card.id}`}
+      style={{ transform: CSS.Translate.toString(transform) }}
+      className={cn(
+        "cursor-pointer rounded-lg border bg-card px-2.5 py-2 text-left shadow-xs",
+        isDragging && "opacity-70"
+      )}
+      {...attributes}
+      {...listeners}
+      onPointerDown={(event) => {
+        origin.current = { x: event.clientX, y: event.clientY }
+        listeners?.onPointerDown?.(event)
+      }}
+      onClick={(event) => {
+        if (
+          Math.hypot(
+            event.clientX - origin.current.x,
+            event.clientY - origin.current.y
+          ) > 6
+        ) {
+          return
+        }
+        onCardClick?.(card)
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+function Column({
+  column,
+  cards,
+  renderCard,
+  onCardClick,
+}: {
+  column: KanbanColumn
+  cards: KanbanCard[]
+  renderCard?: (card: KanbanCard) => ReactNode
+  onCardClick?: (card: KanbanCard) => void
+}) {
+  const { setNodeRef, isOver } = useDroppable({ id: column.id })
+  const overLimit = column.limit != null && cards.length > column.limit
+  return (
+    <div
+      className={cn(
+        "flex w-72 shrink-0 flex-col gap-2 rounded-xl border bg-muted/30 p-2",
+        isOver && "border-primary/50"
+      )}
+    >
+      <div className="flex items-center justify-between px-1">
+        <div className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
+          {column.title}
+        </div>
+        <span
+          className={cn(
+            "text-[11px] tabular-nums text-muted-foreground",
+            overLimit && "text-destructive"
+          )}
+        >
+          {cards.length}
+          {column.limit != null ? ` / ${column.limit}` : ""}
+        </span>
+      </div>
+      <div ref={setNodeRef} className="flex min-h-32 flex-col gap-2">
+        {cards.map((card) => (
+          <Card key={card.id} card={card} onCardClick={onCardClick}>
+            {renderCard ? renderCard(card) : <DefaultCard card={card} />}
+          </Card>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * DnD board: columns + cards. Move cards across columns via drag.
+ * @when Issue/workflow boards
+ * @example
+ * <Kanban columns={cols} cards={cards} onCardsChange={setCards} onCardClick={open} />
+ */
+export function Kanban({
+  columns,
+  cards,
+  onCardsChange,
+  renderCard,
+  onCardClick,
+}: {
+  columns: KanbanColumn[]
+  cards: KanbanCard[]
+  onCardsChange?: (cards: KanbanCard[]) => void
+  renderCard?: (card: KanbanCard) => ReactNode
+  onCardClick?: (card: KanbanCard) => void
+}) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } })
+  )
+  const onDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event
+    if (!over) return
+    const overId = String(over.id)
+    const overColumn = columns.some((column) => column.id === overId)
+      ? overId
+      : cards.find((card) => card.id === overId)?.columnId
+    if (!overColumn) return
+    onCardsChange?.(
+      cards.map((card) =>
+        card.id === String(active.id) ? { ...card, columnId: overColumn } : card
+      )
+    )
+  }
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCorners}
+      onDragEnd={onDragEnd}
+    >
+      <div className="flex gap-3 overflow-x-auto pb-2" data-testid="kanban">
+        {columns.map((column) => (
+          <Column
+            key={column.id}
+            column={column}
+            cards={cards.filter((card) => card.columnId === column.id)}
+            renderCard={renderCard}
+            onCardClick={onCardClick}
+          />
+        ))}
+      </div>
+    </DndContext>
+  )
+}

package/dist/src/products/log-viewer.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import { useVirtualizer } from "@tanstack/react-virtual"
+import * as React from "react"
+
+export function LogViewer({ lines }: { lines: string[] }) {
+  const parentRef = React.useRef<HTMLDivElement>(null)
+  const virtualizer = useVirtualizer({
+    count: lines.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 22,
+    overscan: 12,
+  })
+  return (
+    <div
+      ref={parentRef}
+      data-testid="log-viewer"
+      className="h-64 overflow-auto rounded-xl border bg-card font-mono text-xs"
+    >
+      <div style={{ height: virtualizer.getTotalSize(), position: "relative" }}>
+        {virtualizer.getVirtualItems().map((item) => (
+          <div
+            key={item.key}
+            className="absolute left-0 w-full truncate px-3"
+            style={{ top: item.start, height: item.size }}
+          >
+            {lines[item.index]}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/dist/src/products/markdown-editor.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import { Button } from "@monkey-mini-app/ui/components/button"
+import { CodeEditor } from "@monkey-mini-app/ui/products/code-editor"
+import { Markdown } from "@monkey-mini-app/ui/products/markdown"
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+import { useLabels } from "@monkey-mini-app/ui/i18n/context"
+
+export type MarkdownEditorMode = "edit" | "split" | "preview"
+
+export function MarkdownEditor({
+  value,
+  onChange,
+  mode = "split",
+  onModeChange,
+}: {
+  value: string
+  onChange?: (value: string) => void
+  mode?: MarkdownEditorMode
+  onModeChange?: (mode: MarkdownEditorMode) => void
+}) {
+  const t = useLabels("markdownEditor")
+  return (
+    <div data-testid="markdown-editor" className="overflow-hidden rounded-xl border bg-card">
+      <div className="flex items-center gap-1 border-b p-1">
+        {(["edit", "split", "preview"] as const).map((item) => (
+          <Button
+            key={item}
+            size="sm"
+            variant={mode === item ? "default" : "ghost"}
+            data-testid={`markdown-mode-${item}`}
+            onClick={() => onModeChange?.(item)}
+          >
+            {t[item]}
+          </Button>
+        ))}
+      </div>
+      <div
+        className={cn(
+          "grid min-h-[280px]",
+          mode === "split" ? "md:grid-cols-2" : "grid-cols-1"
+        )}
+      >
+        {mode !== "preview" ? (
+          <div className={cn(mode === "split" && "border-b md:border-r md:border-b-0")}>
+            <CodeEditor
+              value={value}
+              onChange={onChange}
+              language="md"
+              height="280px"
+              className="rounded-none border-0"
+            />
+          </div>
+        ) : null}
+        {mode !== "edit" ? (
+          <div className="overflow-auto p-3" data-testid="markdown-preview">
+            <Markdown>{value}</Markdown>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}

package/dist/src/products/markdown.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import ReactMarkdown from "react-markdown"
+import remarkGfm from "remark-gfm"
+
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+
+export function Markdown({
+  children,
+  className,
+}: {
+  children: string
+  className?: string
+}) {
+  return (
+    <div
+      data-testid="markdown"
+      className={cn(
+        "text-sm [&_a]:underline [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_h1]:mb-2 [&_h1]:text-lg [&_h1]:font-medium [&_h2]:mb-2 [&_h2]:text-base [&_h2]:font-medium [&_li]:ml-4 [&_p]:mb-2 [&_pre]:overflow-auto [&_pre]:rounded-lg [&_pre]:border [&_pre]:bg-muted/40 [&_pre]:p-3 [&_ul]:list-disc",
+        className
+      )}
+    >
+      <ReactMarkdown remarkPlugins={[remarkGfm]}>{children}</ReactMarkdown>
+    </div>
+  )
+}

package/dist/src/products/rich-text-editor.tsx

@@ -0,0 +1,84 @@
+"use client"
+
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Placeholder from "@tiptap/extension-placeholder"
+import { Bold, Code, Italic, List, ListOrdered } from "lucide-react"
+
+import { Toggle } from "@monkey-mini-app/ui/components/toggle"
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+import { useLabels } from "@monkey-mini-app/ui/i18n/context"
+
+export function RichTextEditor({
+  value = "<p></p>",
+  onChange,
+  placeholder,
+}: {
+  value?: string
+  onChange?: (html: string) => void
+  placeholder?: string
+}) {
+  const t = useLabels("richText")
+  const editor = useEditor({
+    immediatelyRender: false,
+    extensions: [StarterKit, Placeholder.configure({ placeholder: placeholder ?? t.placeholder })],
+    content: value,
+    onUpdate: ({ editor: instance }) => onChange?.(instance.getHTML()),
+    editorProps: {
+      attributes: {
+        class:
+          "min-h-32 px-3 py-2 text-sm outline-none [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5 [&_p]:my-1",
+      },
+    },
+  })
+
+  if (!editor) return <div data-testid="rich-text-editor" className="min-h-40 rounded-xl border" />
+
+  return (
+    <div data-testid="rich-text-editor" className="overflow-hidden rounded-xl border bg-card">
+      <div className="flex flex-wrap gap-0.5 border-b p-1">
+        <Toggle
+          size="sm"
+          pressed={editor.isActive("bold")}
+          aria-label={t.bold}
+          onPressedChange={() => editor.chain().focus().toggleBold().run()}
+        >
+          <Bold />
+        </Toggle>
+        <Toggle
+          size="sm"
+          pressed={editor.isActive("italic")}
+          aria-label={t.italic}
+          onPressedChange={() => editor.chain().focus().toggleItalic().run()}
+        >
+          <Italic />
+        </Toggle>
+        <Toggle
+          size="sm"
+          pressed={editor.isActive("bulletList")}
+          aria-label={t.bullet}
+          onPressedChange={() => editor.chain().focus().toggleBulletList().run()}
+        >
+          <List />
+        </Toggle>
+        <Toggle
+          size="sm"
+          pressed={editor.isActive("orderedList")}
+          aria-label={t.ordered}
+          onPressedChange={() => editor.chain().focus().toggleOrderedList().run()}
+        >
+          <ListOrdered />
+        </Toggle>
+        <Toggle
+          size="sm"
+          pressed={editor.isActive("code")}
+          aria-label={t.code}
+          onPressedChange={() => editor.chain().focus().toggleCode().run()}
+        >
+          <Code />
+        </Toggle>
+      </div>
+      <EditorContent editor={editor} className={cn("prose-sm max-w-none")} />
+    </div>
+  )
+}