@mohou/ui 1.0.20

package/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 | undefined; value: string }
+  | { type: 'quote'; children: WikiInline[] }
+  | { type: 'panel'; title?: string | undefined; 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/src/products/jira-wiki.tsx

@@ -0,0 +1,287 @@
+
+import * as React from 'react'
+import { Paperclip } from 'lucide-react'
+
+import { cn } from '@mohou/ui/lib/utils'
+import { skipUndef } from '@mohou/ui/lib/defined'
+import { useLabels } from '@mohou/ui/i18n/context'
+import {
+  parseJiraWiki,
+  type WikiBlock,
+  type WikiInline,
+} from './jira-wiki-parse'
+
+export type JiraWikiClassNames = {
+  root?: string | undefined
+  heading?: string | undefined
+  paragraph?: string | undefined
+  list?: string | undefined
+  listItem?: string | undefined
+  code?: string | undefined
+  inlineCode?: string | undefined
+  quote?: string | undefined
+  panel?: string | undefined
+  panelTitle?: string | undefined
+  table?: string | undefined
+  th?: string | undefined
+  td?: string | undefined
+  hr?: string | undefined
+  link?: string | undefined
+  attachment?: string | undefined
+  strike?: string | undefined
+  bold?: string | undefined
+  italic?: string | undefined
+}
+
+function InlineView({
+  nodes,
+  classNames,
+  onAttachmentClick,
+}: {
+  nodes: WikiInline[]
+  classNames?: JiraWikiClassNames | undefined
+  onAttachmentClick?: ((name: string) => void) | undefined
+}) {
+  const extra = skipUndef({ classNames, onAttachmentClick })
+  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} {...extra} />
+            </strong>
+          )
+        if (node.type === 'italic')
+          return (
+            <em key={index} className={cn('italic', classNames?.italic)}>
+              <InlineView nodes={node.children} {...extra} />
+            </em>
+          )
+        if (node.type === 'strike')
+          return (
+            <s key={index} className={cn('text-muted-foreground', classNames?.strike)}>
+              <InlineView nodes={node.children} {...extra} />
+            </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 | undefined
+  onAttachmentClick?: ((name: string) => void) | undefined
+}) {
+  const inline = skipUndef({ 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} {...inline} />
+            </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>
+ * @family Rich text
+ */
+export function JiraWiki({
+  children,
+  className,
+  classNames,
+  onAttachmentClick,
+}: {
+  children: string
+  className?: string | undefined
+  classNames?: JiraWikiClassNames | undefined
+  onAttachmentClick?: ((name: string) => void) | undefined
+}) {
+  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} {...skipUndef({ classNames, onAttachmentClick })} />
+    </div>
+  )
+}
+
+export { parseJiraWiki } from './jira-wiki-parse'
+export type { WikiBlock, WikiInline } from './jira-wiki-parse'