@suzumiyaaoba/mdxr 0.1.0

package/src/ui/ask.tsx

@@ -0,0 +1,206 @@
+import { isValidElement } from "react";
+import type { ReactElement, ReactNode } from "react";
+import * as v from "valibot";
+
+import { formatAnswerSheet } from "../ask-sheet.js";
+import type { SheetEntry } from "../ask-sheet.js";
+import type { DocProps } from "../define.js";
+import { defineComponent, flattenChildren, textOf } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { Choice, Question, QUESTION_TYPES } from "./ask-question.js";
+import type { QuestionType } from "./ask-question.js";
+import { attrTrue } from "./attrs.js";
+import {
+  ACTION_BUTTON_CLS,
+  CAPTION_CLS,
+  CopyFeedback,
+  PANEL_CLS,
+} from "./bits.js";
+import { isEl, propOf } from "./children.js";
+import { Icon } from "./icon.js";
+import { BORDER_CLS, DIVIDE_CLS, SURFACE_CLS, TEXT } from "./tones.js";
+
+export { Choice, Question, QUESTION_TYPES } from "./ask-question.js";
+export type { QuestionType } from "./ask-question.js";
+
+type QuestionEl = ReactElement<DocProps>;
+
+// The initial sheet must match what client/doc-events.ts would compute —
+// syncAsk rewrites [data-ask-output] before hydration, so SSR renders the
+// seeded sheet rather than a placeholder; otherwise hydrateRoot would patch
+// the pane back and revert the reader's default answers.
+
+/** choiceText: a <Choice>'s visible label text, falling back to `value`. */
+const choiceLabel = (c: QuestionEl): string => {
+  const text = textOf(propOf(c, "children")).replaceAll(/\s+/gu, " ").trim();
+  if (text !== "") {
+    return text;
+  }
+  const value = propOf(c, "value");
+  return typeof value === "string" ? value : "";
+};
+
+const choicesOf = (q: QuestionEl): QuestionEl[] =>
+  flattenChildren(q.props.children).filter((c): c is QuestionEl =>
+    isEl(c, Choice)
+  );
+
+const checkedChoicesOf = (q: QuestionEl): QuestionEl[] =>
+  choicesOf(q).filter((c) => attrTrue(propOf(c, "checked")));
+
+// Same defaulting as Question's render: explicit `type`, else `choice` when
+// <Choice> children exist, else `text`.
+const questionType = (q: QuestionEl): QuestionType =>
+  QUESTION_TYPES.find((t) => t === propOf(q, "type")) ??
+  (choicesOf(q).length > 0 ? "choice" : "text");
+
+const selectAnswer = (q: QuestionEl): string => {
+  const [checked] = checkedChoicesOf(q);
+  // <select defaultValue> only lands when the checked choice's `value` is
+  // non-empty; otherwise the browser stays on the first option — the
+  // placeholder (value "", i.e. unanswered) when present, else the first
+  // choice. The client reads s.value, so a picked option with value=""
+  // still reports "".
+  const sel =
+    checked !== undefined && nonEmpty(propOf(checked, "value"))
+      ? checked
+      : undefined;
+  const picked =
+    sel ?? (nonEmpty(propOf(q, "placeholder")) ? undefined : choicesOf(q)[0]);
+  if (picked === undefined || !nonEmpty(propOf(picked, "value"))) {
+    return "";
+  }
+  return choiceLabel(picked);
+};
+
+// answerOf for the untouched default state: checked choices read as their
+// visible text, a select as its first selected option, a toggle as yes/no,
+// free-form fields as their `value`.
+const defaultAnswer = (q: QuestionEl): string => {
+  const t = questionType(q);
+  if (t === "multi") {
+    return checkedChoicesOf(q)
+      .map(choiceLabel)
+      .filter((s) => s !== "")
+      .join(", ");
+  }
+  if (t === "choice") {
+    const [first] = checkedChoicesOf(q);
+    return first === undefined ? "" : choiceLabel(first);
+  }
+  if (t === "select") {
+    return selectAnswer(q);
+  }
+  if (t === "toggle") {
+    return attrTrue(propOf(q, "checked")) ? "yes" : "no";
+  }
+  const value = propOf(q, "value");
+  return typeof value === "string" ? value.trim() : "";
+};
+
+// Every <Question> under <Ask>, matching the client's
+// querySelectorAll("[data-mdxr-q]") reach — descend through element children
+// (a Question's own children are choices, never questions).
+const collectQuestions = (node: ReactNode, out: QuestionEl[]): void => {
+  for (const c of flattenChildren(node)) {
+    if (isEl<DocProps>(c, Question)) {
+      out.push(c);
+    } else if (isValidElement<DocProps>(c)) {
+      collectQuestions(c.props.children, out);
+    }
+  }
+};
+
+// askMarkdown for the initial DOM — the client's formatter (ask-sheet.ts)
+// applied to the untouched default answers.
+const answerSheet = (title: unknown, children: ReactNode): string => {
+  const questions: QuestionEl[] = [];
+  collectQuestions(children, questions);
+  const entries: SheetEntry[] = [];
+  for (const q of questions) {
+    const rawLabel = nonEmpty(propOf(q, "label"))
+      ? propOf(q, "label")
+      : propOf(q, "name");
+    entries.push({
+      answer: defaultAnswer(q),
+      label: typeof rawLabel === "string" ? rawLabel : "",
+    });
+  }
+  return formatAnswerSheet(
+    typeof title === "string" ? title : undefined,
+    entries
+  );
+};
+
+/**
+ * A block of questions asking the reader for input — e.g. open decisions in
+ * a plan. Built on native form controls so it is interactive in static HTML.
+ * Answers are rendered live as a Markdown sheet (`- **label**: answer` lines
+ * under `# title`) in the output pane; "Copy answers" copies it to the
+ * clipboard and "Save .md" downloads it (nothing is submitted anywhere).
+ * `Choice`/`Question` and the per-type field chrome live in
+ * `ask-question.tsx`.
+ */
+export const Ask = defineComponent(
+  {
+    description:
+      "ユーザーへの質問フォーム。<Question> を並べる。ネイティブコントロールで JS なしに操作可能。回答はラベル付きの Markdown として表示され、「Copy answers」でコピー、「Save .md」で保存できる",
+    schema: v.looseObject({
+      description: v.optional(v.string()),
+      title: v.optional(v.string()),
+    }),
+  },
+  ({ title, description, children }) => (
+    <section
+      className={`mdxr-ask ${PANEL_CLS}`}
+      data-ask
+      data-ask-title={nonEmpty(title) ? title : undefined}
+    >
+      <div className={CAPTION_CLS}>
+        <div className="flex items-center gap-1.5 font-semibold">
+          <Icon className="h-3.5 w-3.5" name="lucide:list-checks" />
+          {nonEmpty(title) ? title : "Questions"}
+        </div>
+        {nonEmpty(description) ? <p className="mt-1">{description}</p> : null}
+      </div>
+      <div className={DIVIDE_CLS}>{children}</div>
+      <div className={`border-t ${BORDER_CLS}`}>
+        <div
+          className={`flex items-center gap-1.5 px-4 pt-2.5 text-xs font-medium ${TEXT.faint}`}
+        >
+          <Icon className="h-3 w-3" name="lucide:file-text" />
+          Markdown
+        </div>
+        <pre
+          className={`m-0 max-h-64 overflow-auto px-4 pt-1 pb-3 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap ${TEXT.body}`}
+          data-ask-output
+        >
+          {answerSheet(title, children)}
+        </pre>
+      </div>
+      <div
+        className={`flex items-center justify-between gap-3 border-t ${SURFACE_CLS} px-4 py-2 ${BORDER_CLS}`}
+      >
+        <span className={`text-xs ${TEXT.faint}`}>
+          Updates live as you answer — copy or save it.
+        </span>
+        <div className="flex shrink-0 items-center gap-2">
+          <button className={ACTION_BUTTON_CLS} data-ask-copy type="button">
+            <CopyFeedback
+              done="Copied"
+              icon="lucide:clipboard-list"
+              label="Copy answers"
+            />
+          </button>
+          <button className={ACTION_BUTTON_CLS} data-ask-save type="button">
+            <CopyFeedback
+              done="Saved"
+              icon="lucide:download"
+              label="Save .md"
+            />
+          </button>
+        </div>
+      </div>
+    </section>
+  )
+);

package/src/ui/attrs.ts

@@ -0,0 +1,51 @@
+import * as v from "valibot";
+
+/**
+ * MDX attributes arrive as strings: `open` → `""`, `open="false"` →
+ * `"false"`. `attrTrue` treats presence/`"true"` as on; `attrFalse` treats
+ * only an explicit `false`/`"false"` as off (absent stays open).
+ */
+export const attrTrue = (x: unknown): boolean =>
+  x === true || x === "" || x === "true";
+
+export const attrFalse = (x: unknown): boolean => x === false || x === "false";
+
+/** Numeric part of `"40"`, `"-15"`, `"40%"`, `"120ms"`, `1.2` — suffix text is dropped. */
+export const numOf = (x: unknown): number | undefined => {
+  if (typeof x === "number") {
+    return Number.isFinite(x) ? x : undefined;
+  }
+  if (typeof x !== "string") {
+    return undefined;
+  }
+  const m = /^\s*(?<n>[+-]?\d+(?:\.\d+)?)/u.exec(x);
+  return m?.groups === undefined ? undefined : Number(m.groups.n);
+};
+
+/**
+ * Optional boolean-ish prop schema: accepts a JSX boolean or an MDX string
+ * attribute; read it back with `attrTrue`/`attrFalse`.
+ */
+export const BOOLISH_PROP = v.optional(v.union([v.boolean(), v.string()]));
+
+/**
+ * String-or-number prop atom: MDX attributes arrive as strings but JSX
+ * expressions like `duration={300}` produce real numbers — both are valid.
+ * Required sites use it bare (`id: NUMISH`); optional sites wrap it.
+ */
+export const NUMISH = v.union([v.string(), v.number()]);
+
+/** Optional `title` — the heading attribute most containers share. */
+export const TITLE_PROP = { title: v.optional(v.string()) } as const;
+
+/** `href` + `lines` — the link-override pair shared by file-referencing props. */
+export const LINK_LINES_PROPS = {
+  href: v.optional(v.string()),
+  lines: v.optional(v.string()),
+} as const;
+
+/** Optional `href`/`lines`/`path` — the full file-link attribute triple. */
+export const FILE_LINK_PROPS = {
+  ...LINK_LINES_PROPS,
+  path: v.optional(v.string()),
+} as const;

package/src/ui/audit.tsx

@@ -0,0 +1,139 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { nonEmpty, safeHref } from "../guards.js";
+import { attrTrue, BOOLISH_PROP } from "./attrs.js";
+import {
+  CaptionBar,
+  ListPanel,
+  ListRow,
+  MaybeLink,
+  Pill,
+  RowNote,
+} from "./bits.js";
+import { countByProp } from "./children.js";
+import { Icon } from "./icon.js";
+import { isSeverity, SEVERITY_LEVELS, SEVERITY_STYLES } from "./severity.js";
+import {
+  CAPTION_TITLE_CLS,
+  COUNT_CHIP_CLS,
+  LOC_CLS,
+  MONO_CLS,
+  TEXT,
+  TRIM_CLS,
+} from "./tones.js";
+
+export const Vuln = defineComponent(
+  {
+    description:
+      "脆弱性1件。severity は critical|high|medium|low|info、id に CVE/GHSA 番号、package に対象パッケージ、affected に影響範囲、fix に修正バージョン、href でアドバイザリリンク、wontfix で対応外マーク。children は説明文",
+    schema: v.looseObject({
+      affected: v.optional(v.string()),
+      fix: v.optional(v.string()),
+      href: v.optional(v.string()),
+      id: v.optional(v.string()),
+      package: v.optional(v.string()),
+      severity: v.optional(v.picklist(SEVERITY_LEVELS), "medium"),
+      title: v.optional(v.string()),
+      wontfix: BOOLISH_PROP,
+    }),
+  },
+  ({
+    severity,
+    id,
+    package: pkg,
+    affected,
+    fix,
+    href,
+    title,
+    wontfix,
+    children,
+  }) => {
+    const s = SEVERITY_STYLES[severity];
+    const link = safeHref(href);
+    return (
+      <ListRow>
+        <Pill className={s.chip} icon={s.icon}>
+          {s.label}
+        </Pill>
+        <span className="min-w-0">
+          {nonEmpty(title) ? (
+            <span className="text-sm font-medium">{title}</span>
+          ) : null}
+          {nonEmpty(id) ? (
+            <MaybeLink
+              className={`${LOC_CLS} no-underline hover:underline ${nonEmpty(title) ? "ml-2" : ""}`}
+              href={link}
+            >
+              {id}
+            </MaybeLink>
+          ) : null}
+        </span>
+        {nonEmpty(pkg) ? <code className={MONO_CLS}>{pkg}</code> : null}
+        {nonEmpty(affected) ? (
+          <code className={`${MONO_CLS} ${TEXT.muted}`}>{affected}</code>
+        ) : null}
+        {nonEmpty(fix) ? (
+          <span
+            className={`inline-flex shrink-0 items-center gap-1 font-mono text-xs ${TEXT.muted}`}
+          >
+            <Icon className="h-3 w-3" name="lucide:arrow-right" />
+            <span className="font-medium text-emerald-600 dark:text-emerald-400">
+              {fix}
+            </span>
+          </span>
+        ) : null}
+        {attrTrue(wontfix) ? (
+          <span className={`${COUNT_CHIP_CLS} uppercase`}>wontfix</span>
+        ) : null}
+        <RowNote className={TRIM_CLS}>{children}</RowNote>
+      </ListRow>
+    );
+  }
+);
+
+export const Audit = defineComponent(
+  {
+    description:
+      "脆弱性・監査結果のコンテナ。<Vuln> を並べる。title はキャプション、tool はスキャナ名チップ (npm audit, osv, trivy …)。severity 別の件数を自動集計",
+    schema: v.looseObject({
+      title: v.optional(v.string()),
+      tool: v.optional(v.string()),
+    }),
+  },
+  ({ title, tool, children }) => {
+    const counts = countByProp(
+      children,
+      Vuln,
+      "severity",
+      isSeverity,
+      "medium"
+    );
+    const total = [...counts.values()].reduce((a, b) => a + b, 0);
+    const caption = nonEmpty(title) || nonEmpty(tool) || total > 0;
+    return (
+      <ListPanel>
+        {caption ? (
+          <CaptionBar className={CAPTION_TITLE_CLS}>
+            <Icon className="h-3.5 w-3.5" name="lucide:shield-alert" />
+            {nonEmpty(title) ? title : "Audit"}
+            {nonEmpty(tool) ? (
+              <span className={COUNT_CHIP_CLS}>{tool}</span>
+            ) : null}
+            <span className="ml-auto flex items-center gap-x-2 font-medium">
+              {SEVERITY_LEVELS.map((k) => {
+                const c = counts.get(k);
+                return c === undefined ? null : (
+                  <Pill className={SEVERITY_STYLES[k].chip} key={k}>
+                    {c} {SEVERITY_STYLES[k].label.toLowerCase()}
+                  </Pill>
+                );
+              })}
+            </span>
+          </CaptionBar>
+        ) : null}
+        {children}
+      </ListPanel>
+    );
+  }
+);