@suzumiyaaoba/mdxr 0.1.0

package/src/ui/checks.tsx

@@ -0,0 +1,203 @@
+import type { ReactElement, ReactNode } from "react";
+import * as v from "valibot";
+
+import { defineComponent, flattenChildren } from "../define.js";
+import { isOneOf, nonEmpty, safeHref } from "../guards.js";
+import { attrTrue, BOOLISH_PROP, NUMISH } from "./attrs.js";
+import { CaptionBar, ListPanel, MaybeLink, TrimBody } from "./bits.js";
+import { isEl, propOf } from "./children.js";
+import { Icon } from "./icon.js";
+import { formatDuration, parseDuration } from "./tests.js";
+import {
+  CHIP_BORDER_CLS,
+  COUNT_CHIP_CLS,
+  LOC_CLS,
+  MINI_CHIP_CLS,
+  SUNKEN_CLS,
+  TEXT,
+  TONE,
+  TONE_TEXT,
+} from "./tones.js";
+
+export const CHECK_STATUSES = [
+  "pass",
+  "fail",
+  "running",
+  "pending",
+  "skip",
+] as const;
+export type CheckStatus = (typeof CHECK_STATUSES)[number];
+
+const isCheckStatus = isOneOf(CHECK_STATUSES);
+
+const STYLES: Record<
+  CheckStatus,
+  { cls: string; icon: string; label: string }
+> = {
+  fail: {
+    cls: TONE_TEXT.red,
+    icon: "lucide:circle-x",
+    label: "failed",
+  },
+  pass: {
+    cls: TONE_TEXT.emerald,
+    icon: "lucide:circle-check",
+    label: "passed",
+  },
+  pending: {
+    cls: TONE_TEXT.neutral,
+    icon: "lucide:circle-dashed",
+    label: "pending",
+  },
+  running: {
+    cls: TONE_TEXT.sky,
+    icon: "lucide:loader-circle",
+    label: "running",
+  },
+  skip: {
+    cls: TONE_TEXT.neutral,
+    icon: "lucide:circle-minus",
+    label: "skipped",
+  },
+};
+
+export const Check = defineComponent(
+  {
+    description:
+      "CI チェック1行。name は必須、status は pass|fail|running|pending|skip。duration、required で必須チェックチップ、href で詳細リンク。children はログ抜粋などの詳細",
+    schema: v.looseObject({
+      duration: v.optional(NUMISH),
+      href: v.optional(v.string()),
+      name: v.string(),
+      required: BOOLISH_PROP,
+      status: v.optional(v.picklist(CHECK_STATUSES), "pass"),
+    }),
+  },
+  ({ name, status, duration, required, href, children }) => {
+    const s = STYLES[status];
+    const link = safeHref(href);
+    return (
+      <div className="px-4 py-2.5">
+        <div className="flex flex-wrap items-baseline gap-x-2.5 gap-y-1">
+          <Icon
+            className={`h-4 w-4 shrink-0 self-center ${s.cls}`}
+            label={s.label}
+            name={s.icon}
+          />
+          <MaybeLink
+            className="text-sm text-inherit no-underline hover:underline"
+            href={link}
+          >
+            {name}
+          </MaybeLink>
+          {attrTrue(required) ? (
+            <span className={`${MINI_CHIP_CLS} ${TONE.neutral}`}>Required</span>
+          ) : null}
+          {duration === undefined || duration === "" ? null : (
+            <span className={`${LOC_CLS} ml-auto tabular-nums`}>
+              {String(duration)}
+            </span>
+          )}
+        </div>
+        <TrimBody
+          className={`mt-1.5 rounded-md border-l-2 px-3 py-2 text-xs ${TEXT.body} ${
+            status === "fail"
+              ? "border-red-400/60 bg-red-500/5"
+              : `${CHIP_BORDER_CLS} ${SUNKEN_CLS}`
+          }`}
+        >
+          {children}
+        </TrimBody>
+      </div>
+    );
+  }
+);
+
+interface CheckSummary {
+  counts: Map<CheckStatus, number>;
+  durationOk: boolean;
+  total: number;
+  totalMs: number;
+}
+
+const summarizeChecks = (children: ReactNode): CheckSummary => {
+  const counts = new Map<CheckStatus, number>();
+  let totalMs = 0;
+  let total = 0;
+  let durationOk = true;
+  for (const node of flattenChildren(children)) {
+    if (!isEl(node, Check)) {
+      continue;
+    }
+    const st = propOf(node, "status");
+    const status = isCheckStatus(st) ? st : "pass";
+    counts.set(status, (counts.get(status) ?? 0) + 1);
+    total += 1;
+    const rawDuration = propOf(node, "duration");
+    const d = parseDuration(rawDuration);
+    if (d !== undefined) {
+      totalMs += d;
+      continue;
+    }
+    if (rawDuration !== undefined && rawDuration !== "") {
+      durationOk = false;
+    }
+  }
+  return { counts, durationOk, total, totalMs };
+};
+
+const ChecksCaption = ({
+  context,
+  summary,
+  title,
+}: {
+  context: string | undefined;
+  summary: CheckSummary;
+  title: string | undefined;
+}): ReactElement => (
+  <CaptionBar className="flex flex-wrap items-center gap-x-2.5 gap-y-1">
+    <Icon className="h-3.5 w-3.5" name="lucide:list-checks" />
+    <span className="font-medium">{nonEmpty(title) ? title : "Checks"}</span>
+    {nonEmpty(context) ? (
+      <span className={COUNT_CHIP_CLS}>{context}</span>
+    ) : null}
+    <span className="ml-auto flex items-center gap-x-2 font-medium">
+      {CHECK_STATUSES.map((st) => {
+        const c = summary.counts.get(st);
+        return c === undefined ? null : (
+          <span className={STYLES[st].cls} key={st}>
+            {c} {STYLES[st].label}
+          </span>
+        );
+      })}
+      {summary.durationOk && summary.totalMs > 0 ? (
+        <span className="font-mono tabular-nums">
+          {formatDuration(summary.totalMs)}
+        </span>
+      ) : null}
+    </span>
+  </CaptionBar>
+);
+
+export const Checks = defineComponent(
+  {
+    description:
+      "CI/検証ステータス一覧のコンテナ。<Check> を並べる。title はキャプション、context は対象チップ (commit SHA・PR 番号など)。status 別の件数と合計時間を自動集計",
+    schema: v.looseObject({
+      context: v.optional(v.string()),
+      title: v.optional(v.string()),
+    }),
+  },
+  ({ title, context, children }) => {
+    const summary = summarizeChecks(children);
+    const caption = nonEmpty(title) || nonEmpty(context) || summary.total > 0;
+    return (
+      <ListPanel>
+        {caption ? (
+          <ChecksCaption context={context} summary={summary} title={title} />
+        ) : null}
+        {children}
+      </ListPanel>
+    );
+  }
+);

package/src/ui/child-index.tsx

@@ -0,0 +1,44 @@
+import { createContext, isValidElement, useContext, useMemo } from "react";
+import type { ReactElement, ReactNode } from "react";
+
+import { flattenChildren } from "../define.js";
+
+export interface ChildIndex {
+  /** 1-based position among siblings; 0 when rendered outside an indexed container. */
+  n: number;
+  /** Whether this is the last sibling — used to hide trailing connectors. */
+  last: boolean;
+}
+
+const ChildIndexCtx = createContext<ChildIndex>({ last: true, n: 0 });
+
+export const useChildIndex = (): ChildIndex => useContext(ChildIndexCtx);
+
+const IndexedChild = ({
+  n,
+  last,
+  children,
+}: ChildIndex & { children?: ReactNode }): ReactElement => {
+  const value = useMemo(() => ({ last, n }), [last, n]);
+  return (
+    <ChildIndexCtx.Provider value={value}>{children}</ChildIndexCtx.Provider>
+  );
+};
+
+/**
+ * Wrap each flattened child in a provider carrying its position, so child
+ * components (FlowStep, Finding, …) can render numbers and connectors without
+ * prop injection.
+ */
+export const indexChildren = (children: ReactNode): ReactNode[] => {
+  const flat = flattenChildren(children);
+  return flat.map((child, i) => (
+    <IndexedChild
+      key={isValidElement(child) ? (child.key ?? i) : i}
+      last={i === flat.length - 1}
+      n={i + 1}
+    >
+      {child}
+    </IndexedChild>
+  ));
+};

package/src/ui/children.ts

@@ -0,0 +1,43 @@
+import { isValidElement } from "react";
+import type { ReactElement, ReactNode } from "react";
+
+import { flattenChildren } from "../define.js";
+import { isRecord } from "../guards.js";
+
+/**
+ * `n` is an element rendered by `type` — a string tag (`"ul"`, `"li"`) or a
+ * component reference (`Finding`, `Search`). Pairs with `flattenChildren`
+ * from define.ts to pick items out of a `children` tree.
+ */
+export const isEl = <P extends { children?: ReactNode }>(
+  n: unknown,
+  type: unknown
+): n is ReactElement<P> => isValidElement<P>(n) && n.type === type;
+
+/** Read a single prop off an element, or `undefined` for non-elements. */
+export const propOf = (n: unknown, key: string): unknown =>
+  isValidElement(n) && isRecord(n.props) ? n.props[key] : undefined;
+
+/**
+ * Tally `prop` across `children` elements rendered by `of` — the count
+ * summary behind `<Findings>`/`<Hypotheses>` headers. Values failing `is`
+ * bucket under `fallback`.
+ */
+export const countByProp = <T extends string>(
+  children: ReactNode,
+  of: unknown,
+  prop: string,
+  is: (x: unknown) => x is T,
+  fallback: T
+): Map<T, number> => {
+  const counts = new Map<T, number>();
+  for (const node of flattenChildren(children)) {
+    if (!isEl(node, of)) {
+      continue;
+    }
+    const val = propOf(node, prop);
+    const key = is(val) ? val : fallback;
+    counts.set(key, (counts.get(key) ?? 0) + 1);
+  }
+  return counts;
+};

package/src/ui/chips.tsx

@@ -0,0 +1,49 @@
+import type { ReactElement } from "react";
+import * as v from "valibot";
+
+import { nonEmpty } from "../guards.js";
+import { Due } from "./due.js";
+import { Effort, EFFORT_SIZES } from "./effort.js";
+import type { EffortSize } from "./effort.js";
+import { Owner } from "./owner.js";
+import { Priority, PRIORITY_LEVELS } from "./priority.js";
+import type { PriorityLevel } from "./priority.js";
+
+/**
+ * Schema entries matching ChipRow's props — spread into the schema of any
+ * component that renders a ChipRow so props and rendering stay in sync.
+ */
+export const CHIP_PROPS = {
+  due: v.optional(v.string()),
+  effort: v.optional(v.picklist(EFFORT_SIZES)),
+  owner: v.optional(v.string()),
+  priority: v.optional(v.picklist(PRIORITY_LEVELS)),
+} as const;
+
+/**
+ * The `priority · effort · owner · due` chip row shared by task-like
+ * components (Step, BoardCard). Renders nothing when no chip prop is set —
+ * callers must not pre-check, so a lone chip can never leave an empty row.
+ */
+export const ChipRow = (props: {
+  due?: string;
+  effort?: EffortSize;
+  owner?: string;
+  priority?: PriorityLevel;
+}): ReactElement | null => {
+  const any =
+    props.priority !== undefined ||
+    props.effort !== undefined ||
+    nonEmpty(props.owner) ||
+    nonEmpty(props.due);
+  return any ? (
+    <div className="mt-2 flex flex-wrap items-center gap-1.5">
+      {props.priority === undefined ? null : (
+        <Priority level={props.priority} />
+      )}
+      {props.effort === undefined ? null : <Effort size={props.effort} />}
+      {nonEmpty(props.owner) ? <Owner name={props.owner} /> : null}
+      {nonEmpty(props.due) ? <Due date={props.due} /> : null}
+    </div>
+  ) : null;
+};

package/src/ui/cmd.tsx

@@ -0,0 +1,27 @@
+import * as v from "valibot";
+
+import { defineComponent, textOf } from "../define.js";
+import { CodeChip, CopyButton } from "./bits.js";
+import { Icon } from "./icon.js";
+
+export const Cmd = defineComponent(
+  {
+    description:
+      "コマンドチップ。ターミナルアイコン + 等幅 + コピーボタン付き。rollout 手順などに",
+    schema: v.looseObject({}),
+  },
+  ({ children }) => (
+    <CodeChip>
+      <Icon
+        className="h-3.5 w-3.5 shrink-0 opacity-60"
+        name="lucide:terminal"
+      />
+      <span>{children}</span>
+      <CopyButton
+        className="-mr-0.5 opacity-40"
+        copy={textOf(children)}
+        title="Copy command"
+      />
+    </CodeChip>
+  )
+);

package/src/ui/columns.tsx

@@ -0,0 +1,31 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { TRIM_CLS } from "./tones.js";
+
+const COLS: Record<string, string> = {
+  "1": "",
+  "2": "sm:grid-cols-2",
+  "3": "sm:grid-cols-3",
+  "4": "sm:grid-cols-2 lg:grid-cols-4",
+};
+
+export const Columns = defineComponent(
+  {
+    description:
+      "横並びレイアウト。cols は 1|2|3|4 (デフォルト 2)。<Column> を子に取る",
+    schema: v.looseObject({
+      cols: v.optional(v.picklist(["1", "2", "3", "4"]), "2"),
+    }),
+  },
+  ({ cols, children }) => (
+    <div className={`my-6 grid gap-4 ${COLS[cols]}`}>{children}</div>
+  )
+);
+
+export const Column = defineComponent(
+  {
+    description: "<Columns> 内の1カラム",
+  },
+  ({ children }) => <div className={`min-w-0 ${TRIM_CLS}`}>{children}</div>
+);