@monkey-mini-app/ui 0.1.0

package/dist/src/products/export-csv.ts

@@ -0,0 +1,25 @@
+export function exportCsv<T extends Record<string, unknown>>(
+  rows: T[],
+  filename = "export.csv"
+) {
+  if (rows.length === 0) return
+  const keys = Object.keys(rows[0])
+  const csv = [
+    keys.join(","),
+    ...rows.map((row) =>
+      keys
+        .map((key) => {
+          const raw = String(row[key] ?? "")
+          return `"${raw.replaceAll('"', '""')}"`
+        })
+        .join(",")
+    ),
+  ].join("\n")
+  const blob = new Blob([csv], { type: "text/csv;charset=utf-8" })
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement("a")
+  link.href = url
+  link.download = filename
+  link.click()
+  URL.revokeObjectURL(url)
+}

package/dist/src/products/file-dropzone.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import { useDropzone } from "react-dropzone"
+
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+import { useLabels } from "@monkey-mini-app/ui/i18n/context"
+import { Attachment, AttachmentContent, AttachmentTitle } from "@monkey-mini-app/ui/components/attachment"
+
+export function FileDropzone({
+  files,
+  onFiles,
+}: {
+  files?: File[]
+  onFiles?: (files: File[]) => void
+}) {
+  const t = useLabels("fileDropzone")
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop: (accepted) => onFiles?.(accepted),
+  })
+  return (
+    <div className="flex flex-col gap-2" data-testid="file-dropzone">
+      <div
+        {...getRootProps()}
+        className={cn(
+          "flex cursor-pointer flex-col items-center justify-center rounded-xl border border-dashed px-4 py-8 text-sm text-muted-foreground",
+          isDragActive && "border-primary bg-muted/40"
+        )}
+      >
+        <input {...getInputProps()} />
+        {t.drop}
+      </div>
+      {files?.map((file) => (
+        <Attachment key={file.name}>
+          <AttachmentContent>
+            <AttachmentTitle>{file.name}</AttachmentTitle>
+          </AttachmentContent>
+        </Attachment>
+      ))}
+    </div>
+  )
+}

package/dist/src/products/gantt.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import { differenceInCalendarDays, min, max } from "date-fns"
+
+export type GanttTask = {
+  id: string
+  title: string
+  start: Date
+  end: Date
+}
+
+export function Gantt({ tasks }: { tasks: GanttTask[] }) {
+  if (tasks.length === 0) {
+    return <div data-testid="gantt" className="text-muted-foreground text-sm">No tasks</div>
+  }
+  const start = min(tasks.map((task) => task.start))
+  const end = max(tasks.map((task) => task.end))
+  const span = Math.max(differenceInCalendarDays(end, start), 1)
+  return (
+    <div className="flex flex-col gap-2" data-testid="gantt">
+      {tasks.map((task) => {
+        const offset = differenceInCalendarDays(task.start, start)
+        const width = Math.max(differenceInCalendarDays(task.end, task.start), 1)
+        return (
+          <div key={task.id} className="grid grid-cols-[8rem_1fr] items-center gap-3">
+            <div className="truncate text-sm">{task.title}</div>
+            <div className="relative h-7 rounded-md bg-muted">
+              <div
+                className="absolute top-1 bottom-1 rounded-sm bg-primary/70"
+                style={{
+                  left: `${(offset / span) * 100}%`,
+                  width: `${(width / span) * 100}%`,
+                }}
+              />
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/dist/src/products/jira-wiki-parse.ts

@@ -0,0 +1,197 @@
+export type WikiInline =
+  | { type: "text"; value: string }
+  | { type: "bold"; children: WikiInline[] }
+  | { type: "italic"; children: WikiInline[] }
+  | { type: "strike"; children: WikiInline[] }
+  | { type: "code"; value: string }
+  | { type: "link"; href: string; label: string }
+  | { type: "attachment"; name: string }
+
+export type WikiBlock =
+  | { type: "heading"; level: number; children: WikiInline[] }
+  | { type: "paragraph"; children: WikiInline[] }
+  | { type: "list"; ordered: boolean; items: WikiInline[][] }
+  | { type: "code"; language?: string; value: string }
+  | { type: "quote"; children: WikiInline[] }
+  | { type: "panel"; title?: string; children: WikiBlock[] }
+  | { type: "table"; header: WikiInline[][]; rows: WikiInline[][][] }
+  | { type: "hr" }
+
+export function parseInline(input: string): WikiInline[] {
+  const nodes: WikiInline[] = []
+  let rest = input
+  while (rest.length) {
+    const attachment = /^\[\^([^\]]+)\]/.exec(rest)
+    if (attachment) {
+      nodes.push({ type: "attachment", name: attachment[1] ?? "" })
+      rest = rest.slice(attachment[0].length)
+      continue
+    }
+    const link = /^\[([^\]|]+)\|([^\]]+)\]/.exec(rest) ?? /^\[([^\]]+)\]/.exec(rest)
+    if (link) {
+      const label = link[1] ?? ""
+      const href = link[2] ?? link[1] ?? ""
+      nodes.push({ type: "link", href, label })
+      rest = rest.slice(link[0].length)
+      continue
+    }
+    const code = /^\{\{(.+?)\}\}/.exec(rest)
+    if (code) {
+      nodes.push({ type: "code", value: code[1] ?? "" })
+      rest = rest.slice(code[0].length)
+      continue
+    }
+    const bold = /^\*([^*\n]+)\*/.exec(rest)
+    if (bold) {
+      nodes.push({ type: "bold", children: parseInline(bold[1] ?? "") })
+      rest = rest.slice(bold[0].length)
+      continue
+    }
+    const italic = /^_([^_\n]+)_/.exec(rest)
+    if (italic) {
+      nodes.push({ type: "italic", children: parseInline(italic[1] ?? "") })
+      rest = rest.slice(italic[0].length)
+      continue
+    }
+    const strike = /^-([^-]+)-(?=$|[\s.,;:!?)"]])/.exec(rest)
+    if (strike) {
+      nodes.push({ type: "strike", children: parseInline(strike[1] ?? "") })
+      rest = rest.slice(strike[0].length)
+      continue
+    }
+    const next = rest.search(/[\[*{_-]/)
+    if (next <= 0) {
+      const take = next === 0 ? 1 : rest.length
+      const last = nodes.at(-1)
+      if (last?.type === "text") last.value += rest.slice(0, take)
+      else nodes.push({ type: "text", value: rest.slice(0, take) })
+      rest = rest.slice(take)
+      continue
+    }
+    const last = nodes.at(-1)
+    if (last?.type === "text") last.value += rest.slice(0, next)
+    else nodes.push({ type: "text", value: rest.slice(0, next) })
+    rest = rest.slice(next)
+  }
+  return nodes
+}
+
+function splitCells(line: string, delim: "||" | "|") {
+  const trimmed = line.trim()
+  const inner =
+    delim === "||"
+      ? trimmed.replace(/^\|\|/, "").replace(/\|\|$/, "")
+      : trimmed.replace(/^\|/, "").replace(/\|$/, "")
+  return inner.split(delim === "||" ? "||" : "|").map((cell) => parseInline(cell.trim()))
+}
+
+function isTableRow(line: string) {
+  return line.startsWith("|") && line.endsWith("|") && line.length >= 2
+}
+
+function collectFence(lines: string[], start: number, close: string) {
+  const body: string[] = []
+  let i = start + 1
+  while (i < lines.length && lines[i]?.trim() !== close) {
+    body.push(lines[i] ?? "")
+    i += 1
+  }
+  return { body: body.join("\n"), end: i }
+}
+
+export function parseJiraWiki(input: string): WikiBlock[] {
+  const lines = input.replace(/\r\n/g, "\n").split("\n")
+  const blocks: WikiBlock[] = []
+  let i = 0
+  while (i < lines.length) {
+    const line = lines[i] ?? ""
+    const trimmed = line.trim()
+    if (!trimmed) {
+      i += 1
+      continue
+    }
+    if (trimmed === "----") {
+      blocks.push({ type: "hr" })
+      i += 1
+      continue
+    }
+    const heading = /^h([1-6])\.\s+(.*)$/.exec(trimmed)
+    if (heading) {
+      blocks.push({
+        type: "heading",
+        level: Number(heading[1]),
+        children: parseInline(heading[2] ?? ""),
+      })
+      i += 1
+      continue
+    }
+    const codeOpen = /^\{code(?::([a-zA-Z0-9+-]+))?\}$/.exec(trimmed)
+    if (codeOpen) {
+      const fence = collectFence(lines, i, "{code}")
+      blocks.push({ type: "code", language: codeOpen[1], value: fence.body })
+      i = fence.end + 1
+      continue
+    }
+    if (trimmed === "{noformat}") {
+      const fence = collectFence(lines, i, "{noformat}")
+      blocks.push({ type: "code", value: fence.body })
+      i = fence.end + 1
+      continue
+    }
+    if (trimmed === "{quote}") {
+      const fence = collectFence(lines, i, "{quote}")
+      blocks.push({ type: "quote", children: parseInline(fence.body.replace(/\n/g, " ")) })
+      i = fence.end + 1
+      continue
+    }
+    const panelOpen = /^\{panel(?::title=([^}]+))?\}$/.exec(trimmed)
+    if (panelOpen) {
+      const fence = collectFence(lines, i, "{panel}")
+      blocks.push({
+        type: "panel",
+        title: panelOpen[1],
+        children: parseJiraWiki(fence.body),
+      })
+      i = fence.end + 1
+      continue
+    }
+    if (isTableRow(trimmed)) {
+      const collected: { header: boolean; cells: WikiInline[][] }[] = []
+      while (i < lines.length) {
+        const row = lines[i]?.trim() ?? ""
+        if (!isTableRow(row)) break
+        const header = row.startsWith("||")
+        collected.push({ header, cells: splitCells(row, header ? "||" : "|") })
+        i += 1
+      }
+      const headerRows = collected.filter((row) => row.header).map((row) => row.cells)
+      const rows = collected.filter((row) => !row.header).map((row) => row.cells)
+      const header = headerRows[0] ?? rows.shift() ?? []
+      blocks.push({ type: "table", header, rows })
+      continue
+    }
+    if (/^[*#-]\s+/.test(trimmed)) {
+      const ordered = trimmed.startsWith("#")
+      const items: WikiInline[][] = []
+      while (i < lines.length) {
+        const item = lines[i]?.trim() ?? ""
+        const match = ordered ? /^#\s+(.*)$/.exec(item) : /^[*#-]\s+(.*)$/.exec(item)
+        if (!match) break
+        items.push(parseInline(match[1] ?? ""))
+        i += 1
+      }
+      blocks.push({ type: "list", ordered, items })
+      continue
+    }
+    const para: string[] = [trimmed]
+    i += 1
+    while (i < lines.length) {
+      const next = lines[i]?.trim() ?? ""
+      if (!next || /^(h[1-6]\.|----|\{code|\{panel|\{quote|\{noformat|\||[*#-]\s)/.test(next)) break
+      para.push(next)
+      i += 1
+    }
+    blocks.push({ type: "paragraph", children: parseInline(para.join(" ")) })
+  }
+  return blocks
+}

package/dist/src/products/jira-wiki.tsx

@@ -0,0 +1,285 @@
+"use client"
+
+import * as React from "react"
+import { Paperclip } from "lucide-react"
+
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+import { useLabels } from "@monkey-mini-app/ui/i18n/context"
+import {
+  parseJiraWiki,
+  type WikiBlock,
+  type WikiInline,
+} from "./jira-wiki-parse"
+
+export type JiraWikiClassNames = {
+  root?: string
+  heading?: string
+  paragraph?: string
+  list?: string
+  listItem?: string
+  code?: string
+  inlineCode?: string
+  quote?: string
+  panel?: string
+  panelTitle?: string
+  table?: string
+  th?: string
+  td?: string
+  hr?: string
+  link?: string
+  attachment?: string
+  strike?: string
+  bold?: string
+  italic?: string
+}
+
+function InlineView({
+  nodes,
+  classNames,
+  onAttachmentClick,
+}: {
+  nodes: WikiInline[]
+  classNames?: JiraWikiClassNames
+  onAttachmentClick?: (name: string) => void
+}) {
+  return (
+    <>
+      {nodes.map((node, index) => {
+        if (node.type === "text") return <span key={index}>{node.value}</span>
+        if (node.type === "bold")
+          return (
+            <strong key={index} className={cn("font-semibold", classNames?.bold)}>
+              <InlineView nodes={node.children} classNames={classNames} onAttachmentClick={onAttachmentClick} />
+            </strong>
+          )
+        if (node.type === "italic")
+          return (
+            <em key={index} className={cn("italic", classNames?.italic)}>
+              <InlineView nodes={node.children} classNames={classNames} onAttachmentClick={onAttachmentClick} />
+            </em>
+          )
+        if (node.type === "strike")
+          return (
+            <s key={index} className={cn("text-muted-foreground", classNames?.strike)}>
+              <InlineView nodes={node.children} classNames={classNames} onAttachmentClick={onAttachmentClick} />
+            </s>
+          )
+        if (node.type === "code")
+          return (
+            <code
+              key={index}
+              className={cn("rounded-md bg-muted px-1 py-0.5 font-mono text-[0.85em]", classNames?.inlineCode)}
+            >
+              {node.value}
+            </code>
+          )
+        if (node.type === "attachment")
+          return (
+            <button
+              key={index}
+              type="button"
+              className={cn(
+                "inline-flex items-center gap-1 rounded-md border bg-muted/50 px-1.5 py-0.5 align-middle text-xs font-medium hover:bg-muted",
+                classNames?.attachment
+              )}
+              onClick={() => onAttachmentClick?.(node.name)}
+            >
+              <Paperclip className="size-3" />
+              {node.name}
+            </button>
+          )
+        return (
+          <a
+            key={index}
+            href={node.href}
+            className={cn("text-primary underline decoration-primary/40 underline-offset-2 hover:decoration-primary", classNames?.link)}
+            target="_blank"
+            rel="noreferrer"
+          >
+            {node.label}
+          </a>
+        )
+      })}
+    </>
+  )
+}
+
+function Blocks({
+  blocks,
+  classNames,
+  onAttachmentClick,
+}: {
+  blocks: WikiBlock[]
+  classNames?: JiraWikiClassNames
+  onAttachmentClick?: (name: string) => void
+}) {
+  const inline = { classNames, onAttachmentClick }
+  return (
+    <>
+      {blocks.map((block, index) => {
+        if (block.type === "heading") {
+          const level = Math.min(6, Math.max(1, block.level))
+          return React.createElement(
+            `h${level}`,
+            {
+              key: index,
+              className: cn(
+                "font-semibold tracking-tight first:mt-0",
+                level <= 1 && "mt-6 mb-2 text-xl",
+                level === 2 && "mt-5 mb-2 text-base",
+                level >= 3 && "mt-4 mb-1.5 text-sm",
+                classNames?.heading
+              ),
+            },
+            <InlineView nodes={block.children} {...inline} />
+          )
+        }
+        if (block.type === "paragraph")
+          return (
+            <p key={index} className={cn("mb-3 last:mb-0", classNames?.paragraph)}>
+              <InlineView nodes={block.children} {...inline} />
+            </p>
+          )
+        if (block.type === "list") {
+          const Tag = block.ordered ? "ol" : "ul"
+          return (
+            <Tag
+              key={index}
+              className={cn(
+                "mb-3 ml-5 space-y-1 last:mb-0",
+                block.ordered ? "list-decimal" : "list-disc",
+                classNames?.list
+              )}
+            >
+              {block.items.map((item, itemIndex) => (
+                <li key={itemIndex} className={cn("pl-0.5", classNames?.listItem)}>
+                  <InlineView nodes={item} {...inline} />
+                </li>
+              ))}
+            </Tag>
+          )
+        }
+        if (block.type === "code")
+          return (
+            <pre
+              key={index}
+              className={cn(
+                "mb-3 overflow-auto rounded-lg border bg-muted/40 p-3 font-mono text-[0.85em] last:mb-0",
+                classNames?.code
+              )}
+            >
+              <code>{block.value}</code>
+            </pre>
+          )
+        if (block.type === "quote")
+          return (
+            <blockquote
+              key={index}
+              className={cn(
+                "mb-3 border-l-2 border-foreground/20 pl-3 text-muted-foreground italic last:mb-0",
+                classNames?.quote
+              )}
+            >
+              <InlineView nodes={block.children} {...inline} />
+            </blockquote>
+          )
+        if (block.type === "panel")
+          return (
+            <div
+              key={index}
+              className={cn(
+                "mb-3 rounded-lg border border-l-2 border-l-primary/70 bg-muted/30 px-3 py-2 last:mb-0",
+                classNames?.panel
+              )}
+            >
+              {block.title ? (
+                <div className={cn("mb-1 text-xs font-semibold tracking-wide uppercase", classNames?.panelTitle)}>
+                  {block.title}
+                </div>
+              ) : null}
+              <Blocks blocks={block.children} classNames={classNames} onAttachmentClick={onAttachmentClick} />
+            </div>
+          )
+        if (block.type === "table")
+          return (
+            <div key={index} className="mb-3 overflow-x-auto last:mb-0">
+              <table className={cn("w-full border-collapse overflow-hidden rounded-lg text-sm", classNames?.table)}>
+                {block.header.length ? (
+                  <thead>
+                    <tr>
+                      {block.header.map((cell, cellIndex) => (
+                        <th
+                          key={cellIndex}
+                          className={cn(
+                            "border border-border bg-muted/60 px-2.5 py-1.5 text-left text-xs font-semibold",
+                            classNames?.th
+                          )}
+                        >
+                          <InlineView nodes={cell} {...inline} />
+                        </th>
+                      ))}
+                    </tr>
+                  </thead>
+                ) : null}
+                <tbody>
+                  {block.rows.map((row, rowIndex) => (
+                    <tr key={rowIndex}>
+                      {row.map((cell, cellIndex) => (
+                        <td
+                          key={cellIndex}
+                          className={cn("border border-border px-2.5 py-1.5", classNames?.td)}
+                        >
+                          <InlineView nodes={cell} {...inline} />
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )
+        return <hr key={index} className={cn("my-4 border-border", classNames?.hr)} />
+      })}
+    </>
+  )
+}
+
+/**
+ * Render Jira wiki markup to tokens (headings, lists, tables, [^file], -strike-).
+ * Style via className / classNames; full control via parseJiraWiki().
+ * @when Jira description / comment body
+ * @example
+ * <JiraWiki classNames={{ heading: "text-base" }}>{`h2. Title\n* item`}</JiraWiki>
+ */
+export function JiraWiki({
+  children,
+  className,
+  classNames,
+  onAttachmentClick,
+}: {
+  children: string
+  className?: string
+  classNames?: JiraWikiClassNames
+  onAttachmentClick?: (name: string) => void
+}) {
+  const t = useLabels("jiraWiki")
+  const blocks = parseJiraWiki(children)
+  if (!blocks.length) {
+    return (
+      <p data-testid="jira-wiki" className={cn("text-muted-foreground text-sm", classNames?.root, className)}>
+        {t.empty}
+      </p>
+    )
+  }
+  return (
+    <div
+      data-testid="jira-wiki"
+      className={cn("text-sm leading-relaxed text-foreground", classNames?.root, className)}
+    >
+      <Blocks blocks={blocks} classNames={classNames} onAttachmentClick={onAttachmentClick} />
+    </div>
+  )
+}
+
+export { parseJiraWiki } from "./jira-wiki-parse"
+export type { WikiBlock, WikiInline } from "./jira-wiki-parse"

package/dist/src/products/jql-input.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import { oneDark } from "@codemirror/theme-one-dark"
+import { autocompletion } from "@codemirror/autocomplete"
+import CodeMirror from "@uiw/react-codemirror"
+
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+import { useLabels } from "@monkey-mini-app/ui/i18n/context"
+import {
+  defaultJqlFields,
+  defaultJqlFunctions,
+  jqlCompletion,
+  jqlLanguage,
+  type JqlSuggestItem,
+} from "./jql-language"
+
+/**
+ * CodeMirror JQL editor with field/function completion (host injects fields).
+ * @when Issue search / saved filters
+ * @example
+ * <JqlInput value={jql} onChange={setJql} fields={[{ name: "status" }]} />
+ */
+export function JqlInput({
+  value,
+  onChange,
+  fields = defaultJqlFields,
+  functions = defaultJqlFunctions,
+  height = "88px",
+  className,
+}: {
+  value: string
+  onChange?: (value: string) => void
+  fields?: JqlSuggestItem[]
+  functions?: JqlSuggestItem[]
+  height?: string
+  className?: string
+}) {
+  const t = useLabels("jqlInput")
+  const dark =
+    typeof document !== "undefined" &&
+    document.documentElement.classList.contains("dark")
+
+  return (
+    <div data-testid="jql-input" className={cn("overflow-hidden rounded-xl border", className)}>
+      <CodeMirror
+        value={value}
+        height={height}
+        theme={dark ? oneDark : "light"}
+        placeholder={t.placeholder}
+        extensions={[
+          jqlLanguage,
+          autocompletion({ override: [jqlCompletion(fields, functions)] }),
+        ]}
+        onChange={(next) => onChange?.(next)}
+        basicSetup={{ lineNumbers: false, foldGutter: false }}
+      />
+    </div>
+  )
+}
+
+export { defaultJqlFields, defaultJqlFunctions } from "./jql-language"
+export type { JqlSuggestItem }