@suzumiyaaoba/mdxr 0.1.0

package/src/ui/ref.tsx

@@ -0,0 +1,160 @@
+import type { ReactElement, ReactNode } from "react";
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { safeHref } from "../guards.js";
+import { NUMISH } from "./attrs.js";
+import { CODE_CHIP_CLS } from "./bits.js";
+import { Icon } from "./icon.js";
+import { BORDER_CLS, TEXT } from "./tones.js";
+
+export const Ref = defineComponent(
+  {
+    description: "外部参照リンクカード。href/title は必須。children は説明文",
+    schema: v.looseObject({
+      href: v.string(),
+      title: v.string(),
+    }),
+  },
+  ({ href, title, children }) => (
+    <a
+      href={safeHref(href)}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={`group not-prose my-6 flex items-start gap-3 rounded-lg border px-4 py-3 text-inherit no-underline transition-colors hover:bg-neutral-50 active:bg-neutral-100 dark:hover:bg-neutral-900 dark:active:bg-neutral-800 ${BORDER_CLS}`}
+    >
+      <Icon
+        className={`mt-0.5 h-4 w-4 shrink-0 ${TEXT.faint} transition-transform duration-150 group-hover:translate-x-0.5 group-hover:-translate-y-0.5`}
+        name="lucide:external-link"
+      />
+      <span className="min-w-0 flex-1">
+        <span className={`block text-sm font-medium ${TEXT.strong}`}>
+          {title}
+        </span>
+        {children === undefined ? null : (
+          <span className={`mt-0.5 block text-sm ${TEXT.muted}`}>
+            {children}
+          </span>
+        )}
+      </span>
+    </a>
+  )
+);
+
+const GH_PATH: Record<"commit" | "issue" | "pr", string> = {
+  commit: "commit",
+  issue: "issues",
+  pr: "pull",
+};
+
+/** One repo/host path segment — GitHub names are alnum, `-`, `_`, `.`. */
+const REPO_SEG = /^[\w.-]+$/u;
+
+/** `o/r` → github.com; `host/o/r` or a full URL → that host (e.g. GHES). */
+const repoBase = (repo: string): string => {
+  const r = repo.replace(/\/+$/u, "");
+  // A `proto://` value is used verbatim only for web schemes — a
+  // `javascript:`/`data:` repo would otherwise land in `href` unchecked.
+  if (r.includes("://")) {
+    return /^https?:\/\//iu.test(r) ? r : `https://github.com/${r}`;
+  }
+  // The host/o/r form needs plausible segments — `javascript:alert(1)//x`
+  // has no `://` but is no repo either; treating its first piece as a host
+  // would mint `https://javascript:…` links. Degrade to a github.com path,
+  // which is at worst a broken link, never a scriptable one.
+  const segs = r.split("/");
+  if (!segs.every((s) => REPO_SEG.test(s))) {
+    return `https://github.com/${r}`;
+  }
+  return segs.length > 2 ? `https://${r}` : `https://github.com/${r}`;
+};
+
+const ghLink = (
+  kind: "issue" | "pr" | "commit",
+  repo: string,
+  id: string
+): string => `${repoBase(repo)}/${GH_PATH[kind]}/${id}`;
+
+const CHIP_CLS = `${CODE_CHIP_CLS} no-underline transition-all hover:bg-neutral-200 active:scale-95 dark:hover:bg-neutral-700`;
+
+const refChip = (
+  kind: "issue" | "pr",
+  repo: string,
+  number: string,
+  href: string | undefined,
+  children: ReactNode
+): ReactElement => (
+  <a
+    href={safeHref(href) ?? ghLink(kind, repo, number)}
+    target="_blank"
+    rel="noopener noreferrer"
+    className={CHIP_CLS}
+    title={`${repo}#${number}`}
+  >
+    <Icon
+      className="h-3.5 w-3.5 opacity-60"
+      name={kind === "pr" ? "lucide:git-pull-request" : "lucide:circle-dot"}
+    />
+    <span className="font-mono">#{number}</span>
+    {children === undefined ? null : (
+      <span className={TEXT.body}>{children}</span>
+    )}
+  </a>
+);
+
+const ghRefSchema = () =>
+  v.looseObject({
+    href: v.optional(v.string()),
+    number: NUMISH,
+    repo: v.string(),
+  });
+
+export const Issue = defineComponent(
+  {
+    description:
+      'GitHub issue 参照チップ。repo="owner/repo"（"host/owner/repo" や URL も可）と number は必須。children はタイトル',
+    schema: ghRefSchema(),
+  },
+  ({ repo, number, href, children }) =>
+    refChip("issue", repo, String(number), href, children)
+);
+
+export const PR = defineComponent(
+  {
+    description:
+      'GitHub pull request 参照チップ。repo="owner/repo"（"host/owner/repo" や URL も可）と number は必須。children はタイトル',
+    schema: ghRefSchema(),
+  },
+  ({ repo, number, href, children }) =>
+    refChip("pr", repo, String(number), href, children)
+);
+
+export const Commit = defineComponent(
+  {
+    description:
+      'GitHub コミット参照チップ。repo="owner/repo"（"host/owner/repo" や URL も可）と sha は必須。sha は先頭7文字で表示。children はタイトル',
+    schema: v.looseObject({
+      href: v.optional(v.string()),
+      repo: v.string(),
+      sha: v.string(),
+    }),
+  },
+  ({ repo, sha, href, children }) => (
+    <a
+      href={safeHref(href) ?? ghLink("commit", repo, sha)}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={CHIP_CLS}
+      title={`${repo}@${sha}`}
+    >
+      <Icon
+        className="h-3.5 w-3.5 opacity-60"
+        name="lucide:git-commit-horizontal"
+      />
+      <span className="font-mono">{sha.slice(0, 7)}</span>
+      {children === undefined ? null : (
+        <span className={TEXT.body}>{children}</span>
+      )}
+    </a>
+  )
+);

package/src/ui/release.tsx

@@ -0,0 +1,178 @@
+import type { ReactElement, ReactNode } from "react";
+import { Fragment } from "react";
+import * as v from "valibot";
+
+import { defineComponent, flattenChildren } from "../define.js";
+import { isOneOf, nonEmpty } from "../guards.js";
+import { CaptionBar, Panel } from "./bits.js";
+import { isEl, propOf } from "./children.js";
+import { Icon } from "./icon.js";
+import {
+  CAPTION_TITLE_CLS,
+  MONO_CLS,
+  TEXT,
+  TEXT_SUB,
+  TONE_TEXT,
+  TRIM_CLS,
+} from "./tones.js";
+
+export const ENTRY_KINDS = [
+  "breaking",
+  "added",
+  "changed",
+  "deprecated",
+  "removed",
+  "fixed",
+  "security",
+] as const;
+export type EntryKind = (typeof ENTRY_KINDS)[number];
+
+const isEntryKind = isOneOf(ENTRY_KINDS);
+
+const ENTRY_STYLES: Record<
+  EntryKind,
+  { icon: string; label: string; text: string }
+> = {
+  added: {
+    icon: "lucide:plus",
+    label: "Added",
+    text: TONE_TEXT.emerald,
+  },
+  breaking: {
+    icon: "lucide:zap",
+    label: "Breaking",
+    text: TONE_TEXT.orange,
+  },
+  changed: {
+    icon: "lucide:pen-line",
+    label: "Changed",
+    text: TONE_TEXT.sky,
+  },
+  deprecated: {
+    icon: "lucide:archive",
+    label: "Deprecated",
+    text: TONE_TEXT.amber,
+  },
+  fixed: {
+    icon: "lucide:wrench",
+    label: "Fixed",
+    text: TONE_TEXT.teal,
+  },
+  removed: {
+    icon: "lucide:minus",
+    label: "Removed",
+    text: TONE_TEXT.red,
+  },
+  security: {
+    icon: "lucide:shield",
+    label: "Security",
+    text: TONE_TEXT.violet,
+  },
+};
+
+export const Entry = defineComponent(
+  {
+    description:
+      "リリースノート項目1行。kind は breaking|added|changed|deprecated|removed|fixed|security、scope で対象スコープチップ。children は項目文",
+    schema: v.looseObject({
+      kind: v.optional(v.picklist(ENTRY_KINDS), "changed"),
+      scope: v.optional(v.string()),
+    }),
+  },
+  ({ kind, scope, children }) => {
+    const s = ENTRY_STYLES[kind];
+    return (
+      <div className="flex flex-wrap items-baseline gap-x-2.5 gap-y-1 px-4 py-1.5">
+        <Icon
+          className={`h-3.5 w-3.5 shrink-0 self-center ${s.text}`}
+          name={s.icon}
+        />
+        {nonEmpty(scope) ? (
+          <code className={`${MONO_CLS} ${TEXT.faint}`}>{scope}:</code>
+        ) : null}
+        <span className={`min-w-0 flex-1 text-sm ${TRIM_CLS}`}>{children}</span>
+      </div>
+    );
+  }
+);
+
+export const Release = defineComponent(
+  {
+    description:
+      "リリースノート/CHANGELOG ブロック。version は必須、date/href (比較リンク) をヘッダに表示。<Entry> を kind 別グループに自動整列。リリース報告・変更履歴ドキュメント向け",
+    schema: v.looseObject({
+      date: v.optional(v.string()),
+      href: v.optional(v.string()),
+      title: v.optional(v.string()),
+      version: v.string(),
+    }),
+  },
+  ({ version, date, href, title, children }): ReactElement => {
+    const groups = new Map<EntryKind, ReactNode[]>();
+    const rest: ReactNode[] = [];
+    for (const node of flattenChildren(children)) {
+      if (!isEl(node, Entry)) {
+        rest.push(node);
+        continue;
+      }
+      const k = propOf(node, "kind");
+      const kind = isEntryKind(k) ? k : "changed";
+      groups.set(kind, [...(groups.get(kind) ?? []), node]);
+    }
+    return (
+      <Panel>
+        <CaptionBar className={CAPTION_TITLE_CLS}>
+          <Icon className="h-3.5 w-3.5" name="lucide:tag" />
+          <code className={`font-mono font-semibold ${TEXT.code}`}>
+            {nonEmpty(title) ? `${title} ` : ""}
+            {version}
+          </code>
+          <span className="ml-auto flex items-center gap-x-2 font-normal">
+            {nonEmpty(date) ? (
+              <span className={`${TEXT_SUB} ${TEXT.faint}`}>{date}</span>
+            ) : null}
+            {nonEmpty(href) ? (
+              <a
+                className={`${TEXT_SUB} ${TEXT.muted} no-underline hover:underline`}
+                href={href}
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                compare
+              </a>
+            ) : null}
+          </span>
+        </CaptionBar>
+        <div className="py-2">
+          {ENTRY_KINDS.map((kind) => {
+            const items = groups.get(kind);
+            if (items === undefined || items.length === 0) {
+              return null;
+            }
+            const s = ENTRY_STYLES[kind];
+            return (
+              <div className="py-1" key={kind}>
+                <div
+                  className={`px-4 py-1 text-xs font-semibold tracking-wide uppercase ${TEXT.muted}`}
+                >
+                  {s.label}
+                  <span className={`ml-1.5 font-normal ${TEXT.faint}`}>
+                    {items.length}
+                  </span>
+                </div>
+                {items.map((node, i) => (
+                  // Entries arrive unkeyed from the doc — group position is
+                  // stable, so index keys on a fragment are safe here.
+                  <Fragment key={i}>{node}</Fragment>
+                ))}
+              </div>
+            );
+          })}
+          {rest.length > 0 ? (
+            <div className={`px-4 py-2 ${TRIM_CLS}`}>{rest}</div>
+          ) : null}
+        </div>
+      </Panel>
+    );
+  }
+);

package/src/ui/req.tsx

@@ -0,0 +1,42 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { NUMISH } from "./attrs.js";
+import { ListPanel, ListRow } from "./bits.js";
+import { Icon } from "./icon.js";
+import { STATUS_PROP, StatusBadge } from "./status-badge.js";
+import { TONE, TRIM_CLS } from "./tones.js";
+
+export const Reqs = defineComponent(
+  {
+    description: "要件/受け入れ基準リストのコンテナ。<Req> を並べる",
+  },
+  ({ children }) => <ListPanel as="div">{children}</ListPanel>
+);
+
+export const Req = defineComponent(
+  {
+    description:
+      '要件1行。id="REQ-1" などの識別子チップ。status (todo|doing|done|blocked) でバッジを付けられる',
+    schema: v.looseObject({
+      id: NUMISH,
+      status: STATUS_PROP,
+    }),
+  },
+  ({ id, status, children }) => (
+    <ListRow>
+      <span
+        className={`inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 font-mono text-xs font-medium ${TONE.neutral}`}
+      >
+        <Icon className="h-3 w-3" name="lucide:bookmark" />
+        {id}
+      </span>
+      <span className={`min-w-0 flex-1 text-sm ${TRIM_CLS}`}>{children}</span>
+      {status === undefined ? null : (
+        <span className="ml-auto">
+          <StatusBadge status={status} />
+        </span>
+      )}
+    </ListRow>
+  )
+);

package/src/ui/review.tsx

@@ -0,0 +1,133 @@
+import type { ReactNode } from "react";
+import * as v from "valibot";
+
+import { defineComponent, flattenChildren } from "../define.js";
+import { isOneOf, nonEmpty } from "../guards.js";
+import { LINK_LINES_PROPS } from "./attrs.js";
+import { IndexedCard, LocLink, Pill, Section } from "./bits.js";
+import { indexChildren, useChildIndex } from "./child-index.js";
+import { isEl, propOf } from "./children.js";
+import {
+  SEVERITY_LEVELS,
+  SEVERITY_STYLES,
+  Severity,
+  isSeverity,
+} from "./severity.js";
+import { TONE, TEXT } from "./tones.js";
+
+export const REVIEW_VERDICTS = ["approve", "comment", "changes"] as const;
+export type ReviewVerdict = (typeof REVIEW_VERDICTS)[number];
+
+const VERDICT_STYLES: Record<
+  ReviewVerdict,
+  { cls: string; icon: string; label: string }
+> = {
+  approve: {
+    cls: TONE.emerald,
+    icon: "lucide:circle-check-big",
+    label: "Approved",
+  },
+  changes: {
+    cls: TONE.amber,
+    icon: "lucide:message-square-warning",
+    label: "Changes requested",
+  },
+  comment: {
+    cls: TONE.sky,
+    icon: "lucide:message-square-text",
+    label: "Commented",
+  },
+};
+
+export const Comment = defineComponent(
+  {
+    description:
+      "レビュー指摘1件。severity は critical|high|medium|low|info、file/lines でコード位置へのエディタリンク。children は説明や修正案 (```diff フェンスで提案 diff も書ける)",
+    schema: v.looseObject({
+      ...LINK_LINES_PROPS,
+      file: v.optional(v.string()),
+      severity: v.optional(v.picklist(SEVERITY_LEVELS), "info"),
+      title: v.optional(v.string()),
+    }),
+  },
+  ({ severity, title, file, lines, href, children }) => {
+    const { n } = useChildIndex();
+    return (
+      <IndexedCard
+        aside={
+          nonEmpty(file) ? (
+            <LocLink href={href} lines={lines} path={file} />
+          ) : undefined
+        }
+        n={n}
+        pill={<Severity level={severity} />}
+        title={title}
+      >
+        {children}
+      </IndexedCard>
+    );
+  }
+);
+
+/** Tally `severity` across <Comment> children for the summary line. */
+const countComments = (children: ReactNode): Map<string, number> => {
+  const counts = new Map<string, number>();
+  for (const node of flattenChildren(children)) {
+    if (!isEl(node, Comment)) {
+      continue;
+    }
+    const sev = propOf(node, "severity");
+    const key = isSeverity(sev) ? sev : "info";
+    counts.set(key, (counts.get(key) ?? 0) + 1);
+  }
+  return counts;
+};
+
+const isReviewVerdict = isOneOf(REVIEW_VERDICTS);
+
+export const Review = defineComponent(
+  {
+    description:
+      "コードレビュー結果のコンテナ。<Comment> を列挙し、severity 別の件数を上部に集計。verdict は approve|comment|changes の判定ピル",
+    schema: v.looseObject({
+      title: v.optional(v.string()),
+      verdict: v.optional(v.picklist(REVIEW_VERDICTS)),
+    }),
+  },
+  ({ title, verdict, children }) => {
+    const counts = countComments(children);
+    const total = [...counts.values()].reduce((a, b) => a + b, 0);
+    const style = isReviewVerdict(verdict)
+      ? VERDICT_STYLES[verdict]
+      : undefined;
+    return (
+      <Section title={title}>
+        {total > 0 || style !== undefined ? (
+          <div
+            className={`mb-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs ${TEXT.muted}`}
+          >
+            {style === undefined ? null : (
+              <Pill className={style.cls} icon={style.icon}>
+                {style.label}
+              </Pill>
+            )}
+            {total > 0 ? (
+              <span>
+                {total} {total === 1 ? "comment" : "comments"}
+              </span>
+            ) : null}
+            {SEVERITY_LEVELS.map((k) => {
+              const count = counts.get(k);
+              return count === undefined ? null : (
+                <span key={k}>
+                  · {count} {SEVERITY_STYLES[k].label.toLowerCase()}
+                </span>
+              );
+            })}
+          </div>
+        ) : null}
+        <div className="not-prose space-y-3">{indexChildren(children)}</div>
+      </Section>
+    );
+  }
+);

package/src/ui/risk.tsx

@@ -0,0 +1,67 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { Pill, TrimBody } from "./bits.js";
+import { BORDER_CLS, EDGE_PANEL_CLS, SUNKEN_CLS, TONE } from "./tones.js";
+
+export const RISK_LEVELS = ["low", "medium", "high"] as const;
+export type RiskLevel = (typeof RISK_LEVELS)[number];
+
+const STYLES: Record<
+  RiskLevel,
+  { border: string; chip: string; icon: string; label: string }
+> = {
+  high: {
+    border: "border-red-500",
+    chip: TONE.red,
+    icon: "lucide:flame",
+    label: "High",
+  },
+  low: {
+    border: "border-neutral-400",
+    chip: TONE.neutral,
+    icon: "lucide:shield",
+    label: "Low",
+  },
+  medium: {
+    border: "border-amber-500",
+    chip: TONE.amber,
+    icon: "lucide:shield-alert",
+    label: "Medium",
+  },
+};
+
+export const Risk = defineComponent(
+  {
+    description:
+      "リスクブロック。level は low|medium|high。mitigation 属性で緩和策を示せる",
+    schema: v.looseObject({
+      level: v.optional(v.picklist(RISK_LEVELS), "medium"),
+      mitigation: v.optional(v.string()),
+      title: v.optional(v.string()),
+    }),
+  },
+  ({ level, title, mitigation, children }) => {
+    const s = STYLES[level];
+    return (
+      <aside className={`${EDGE_PANEL_CLS} ${SUNKEN_CLS} ${s.border}`}>
+        <div className="flex flex-wrap items-baseline gap-2">
+          <Pill className={s.chip} icon={s.icon}>
+            {s.label} risk
+          </Pill>
+          {nonEmpty(title) ? (
+            <span className="font-semibold">{title}</span>
+          ) : null}
+        </div>
+        <TrimBody className="mt-1.5">{children}</TrimBody>
+        {nonEmpty(mitigation) ? (
+          <div className={`mt-2 border-t pt-2 text-xs ${BORDER_CLS}`}>
+            <span className="font-medium">Mitigation: </span>
+            {mitigation}
+          </div>
+        ) : null}
+      </aside>
+    );
+  }
+);