@suzumiyaaoba/mdxr 0.1.0

package/src/ui/endpoints.tsx

@@ -0,0 +1,118 @@
+import { createContext, useContext } from "react";
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { attrTrue, BOOLISH_PROP } from "./attrs.js";
+import { CaptionBar, ListPanel, ListRow, RowNote } from "./bits.js";
+import { Icon } from "./icon.js";
+import {
+  CAPTION_TITLE_CLS,
+  MINI_CHIP_CLS,
+  MONO_CLS,
+  TEXT,
+  TEXT_MICRO,
+  TEXT_SUB,
+  TONE,
+  TRIM_CLS,
+} from "./tones.js";
+
+/** Tiny rounded chip (Deprecated/auth) inside an endpoint row. */
+const MINI_CHIP = `${MINI_CHIP_CLS} ${TONE.neutral}`;
+
+export const HTTP_METHODS = [
+  "GET",
+  "POST",
+  "PUT",
+  "PATCH",
+  "DELETE",
+  "HEAD",
+  "OPTIONS",
+] as const;
+
+const METHODS: Record<string, string> = {
+  DELETE: TONE.red,
+  GET: TONE.emerald,
+  HEAD: TONE.neutral,
+  OPTIONS: TONE.neutral,
+  PATCH: TONE.amber,
+  POST: TONE.sky,
+  PUT: TONE.violet,
+};
+
+/** `base` prefix from <Endpoints>, prepended (muted) to each endpoint path. */
+const BaseCtx = createContext("");
+
+export const Endpoint = defineComponent(
+  {
+    description:
+      "API エンドポイント1行。method は HTTP メソッド (大小無視、色付きチップ)、path は必須。auth に認可名 (admin|token …)、deprecated で打ち消し+ピル。<Endpoints> の base がパスに前置される。children は説明文",
+    schema: v.looseObject({
+      auth: v.optional(v.string()),
+      deprecated: BOOLISH_PROP,
+      method: v.optional(
+        v.pipe(v.string(), v.toUpperCase(), v.picklist(HTTP_METHODS)),
+        "GET"
+      ),
+      path: v.string(),
+    }),
+  },
+  ({ method, path, auth, deprecated, children }) => {
+    const base = useContext(BaseCtx);
+    const isDeprecated = attrTrue(deprecated);
+    return (
+      <ListRow>
+        <span
+          className={`inline-flex w-15 shrink-0 items-center justify-center rounded px-1 py-0.5 font-mono ${TEXT_MICRO} font-bold tracking-wide ${METHODS[method] ?? METHODS.GET}`}
+        >
+          {method}
+        </span>
+        <code
+          className={`${MONO_CLS} ${isDeprecated ? "line-through opacity-60" : ""}`}
+        >
+          {nonEmpty(base) ? <span className={TEXT.faint}>{base}</span> : null}
+          {path}
+        </code>
+        {isDeprecated ? <span className={MINI_CHIP}>Deprecated</span> : null}
+        {nonEmpty(auth) ? (
+          <span className={MINI_CHIP}>
+            <Icon className="h-2.5 w-2.5" name="lucide:lock" />
+            {auth}
+          </span>
+        ) : null}
+        <RowNote className={TRIM_CLS}>{children}</RowNote>
+      </ListRow>
+    );
+  }
+);
+
+export const Endpoints = defineComponent(
+  {
+    description:
+      "API エンドポイント一覧のコンテナ。<Endpoint> を並べる。title でキャプション、base で全行に付く共通パスプレフィックス",
+    schema: v.looseObject({
+      base: v.optional(v.string()),
+      title: v.optional(v.string()),
+    }),
+  },
+  ({ title, base, children }) => (
+    <ListPanel>
+      {nonEmpty(title) || nonEmpty(base) ? (
+        <CaptionBar className={CAPTION_TITLE_CLS}>
+          <Icon className="h-3.5 w-3.5" name="lucide:route" />
+          {nonEmpty(title) ? title : "Endpoints"}
+          {nonEmpty(base) ? (
+            <code
+              className={`ml-auto font-mono ${TEXT_SUB} font-normal ${TEXT.faint}`}
+            >
+              {base}
+            </code>
+          ) : null}
+        </CaptionBar>
+      ) : null}
+      <BaseCtx.Provider value={nonEmpty(base) ? base : ""}>
+        {children}
+      </BaseCtx.Provider>
+    </ListPanel>
+  )
+);

package/src/ui/envvars.tsx

@@ -0,0 +1,96 @@
+import * as v from "valibot";
+
+import { defineComponent, flattenChildren } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { attrTrue, BOOLISH_PROP } from "./attrs.js";
+import { CaptionBar, CopyButton, ListPanel, ListRow, RowNote } from "./bits.js";
+import { isEl, propOf } from "./children.js";
+import { Icon } from "./icon.js";
+import {
+  CAPTION_TITLE_CLS,
+  COUNT_CHIP_CLS,
+  MINI_CHIP_CLS,
+  MONO_CLS,
+  TEXT,
+  TONE,
+  TRIM_CLS,
+} from "./tones.js";
+
+const MASK = "••••••••";
+
+export const EnvVar = defineComponent(
+  {
+    description:
+      "環境変数1行。name は必須。required で必須チップ、value/default で値表示、secret で値をマスク (value 未指定でも secret 指定で MASK 表示)。children は説明文",
+    schema: v.looseObject({
+      default: v.optional(v.string()),
+      name: v.string(),
+      required: BOOLISH_PROP,
+      secret: BOOLISH_PROP,
+      value: v.optional(v.string()),
+    }),
+  },
+  ({ name, required, value, default: def, secret, children }) => {
+    const isSecret = attrTrue(secret);
+    const shown = isSecret ? MASK : (value ?? def);
+    return (
+      <ListRow>
+        <code className={`${MONO_CLS} font-medium`}>{name}</code>
+        {attrTrue(required) ? (
+          <span className={`${MINI_CHIP_CLS} ${TONE.amber}`}>required</span>
+        ) : null}
+        {shown === undefined || shown === "" ? null : (
+          <code className={`font-mono text-xs ${TEXT.muted}`}>
+            {nonEmpty(value) || isSecret ? "" : "default: "}
+            {shown}
+          </code>
+        )}
+        {isSecret ? (
+          <span className={`${MINI_CHIP_CLS} ${TONE.violet}`}>
+            <Icon className="h-2.5 w-2.5" name="lucide:key-round" />
+            secret
+          </span>
+        ) : null}
+        <RowNote className={TRIM_CLS}>{children}</RowNote>
+      </ListRow>
+    );
+  }
+);
+
+export const EnvVars = defineComponent(
+  {
+    description:
+      "環境変数一覧のコンテナ。<EnvVar> を並べる。title はキャプション、コピーボタンで変数名一覧をクリップボードにコピー可。セットアップ/デプロイ手順書向け",
+    schema: v.looseObject({
+      title: v.optional(v.string()),
+    }),
+  },
+  ({ title, children }) => {
+    const names = flattenChildren(children)
+      .filter((n) => isEl(n, EnvVar))
+      .map((n) => propOf(n, "name"))
+      .filter((x): x is string => typeof x === "string");
+    return (
+      <ListPanel>
+        {nonEmpty(title) || names.length > 0 ? (
+          <CaptionBar className={CAPTION_TITLE_CLS}>
+            <Icon className="h-3.5 w-3.5" name="lucide:settings-2" />
+            {nonEmpty(title) ? title : "Environment variables"}
+            <span className="ml-auto flex items-center gap-2">
+              {names.length > 0 ? (
+                <span className={COUNT_CHIP_CLS}>{names.length}</span>
+              ) : null}
+              {names.length > 0 ? (
+                <CopyButton
+                  copy={names.join("\n")}
+                  title="Copy variable names"
+                />
+              ) : null}
+            </span>
+          </CaptionBar>
+        ) : null}
+        {children}
+      </ListPanel>
+    );
+  }
+);

package/src/ui/figure.tsx

@@ -0,0 +1,37 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { BORDER_CLS, TEXT, TRIM_CLS } from "./tones.js";
+
+export const Figure = defineComponent(
+  {
+    description:
+      "キャプション付き画像。src は必須。caption 属性または children がキャプションになる",
+    schema: v.looseObject({
+      alt: v.optional(v.string()),
+      caption: v.optional(v.string()),
+      src: v.string(),
+    }),
+  },
+  ({ src, alt, caption, children }) => {
+    const cap = nonEmpty(caption) ? caption : children;
+    return (
+      <figure className="not-prose my-6">
+        <img
+          src={src}
+          alt={alt ?? ""}
+          loading="lazy"
+          className={`w-full rounded-lg border ${BORDER_CLS}`}
+        />
+        {cap === undefined ? null : (
+          <figcaption
+            className={`mt-2 text-center text-sm ${TEXT.muted} ${TRIM_CLS}`}
+          >
+            {cap}
+          </figcaption>
+        )}
+      </figure>
+    );
+  }
+);