@mawaru/sdk 0.38.0 → 0.40.0

package/views/_parts/SchemaForm.tsx

@@ -0,0 +1,742 @@
+import {
+  type CSSProperties,
+  type ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from "react"
+import { useViewBridge } from "../_bridge.js"
+import { type FileRef, isFileRef } from "./fileRef.js"
+import { isLongText, Markdown, useAutoGrow } from "./Markdown.js"
+
+// JSON Schema（ポートの schema）を解釈して入力フォームを描画する（手動実行の入力データ用・
+// 承認画面の書類）。object の各 property を string / number / integer / boolean / enum / file /
+// ネスト object のフィールドとして描画し、array や未知の型はフィールド単位の
+// JSON 入力にフォールバックする。
+// 値の入った長文 string は「読み物」として扱う：既定は Markdown の整形表示で、
+// 「編集」を押した時だけ raw の textarea に入れ替わる（生ソースを常時見せない）。
+// 長文が複数あるときは先頭（＝主役の成果物）だけ開き、以降は畳んで出す。
+
+export type JsonSchema = {
+  type?: string
+  title?: string
+  description?: string
+  properties?: Record<string, JsonSchema>
+  required?: string[]
+  enum?: unknown[]
+  items?: JsonSchema
+  // file 型のマーカー（port-spec.ts の fileSchema）
+  "x-mawaru-type"?: string
+}
+
+const isFileSchema = (schema: JsonSchema | undefined): boolean =>
+  schema?.["x-mawaru-type"] === "file"
+
+/** フォーム描画できる schema（properties を持つ object）なら型を付けて返す */
+export const asFormSchema = (schema: unknown): JsonSchema | null => {
+  if (schema == null || typeof schema !== "object") return null
+  const s = schema as JsonSchema
+  if (s.type !== "object") return null
+  if (!s.properties || Object.keys(s.properties).length === 0) return null
+  return s
+}
+
+const nameStyle: CSSProperties = {
+  fontFamily: "var(--font-mono)",
+  fontSize: "var(--text-sm)",
+  fontWeight: "var(--weight-medium)" as CSSProperties["fontWeight"],
+  color: "var(--ink)",
+  whiteSpace: "nowrap",
+}
+
+// 見出し行の右に置く小さな操作（「編集」「表示に戻す」）
+const headActionStyle: CSSProperties = {
+  minHeight: "22px",
+  padding: "0 var(--space-2)",
+  fontSize: "var(--text-xs)",
+  fontWeight: "var(--weight-normal)" as CSSProperties["fontWeight"],
+  flex: "none",
+}
+
+const FieldHead = ({
+  name,
+  schema,
+  required,
+  marker,
+  action,
+}: {
+  name: string
+  schema: JsonSchema
+  required: boolean
+  /** 開閉の三角（畳める見出しのときだけ） */
+  marker?: ReactNode
+  /** 見出し右の操作（長文フィールドの「編集」など） */
+  action?: ReactNode
+}) => (
+  <span
+    style={{
+      display: "flex",
+      // boolean ではチェックボックスと横並びの flex アイテムになる。残り幅に広げて説明を出す
+      flex: 1,
+      minWidth: 0,
+      alignItems: "baseline",
+      gap: "var(--space-2)",
+      fontSize: "var(--text-xs)",
+      color: "var(--muted)",
+    }}
+  >
+    {marker}
+    <span style={nameStyle}>{name}</span>
+    {required && (
+      <span style={{ color: "var(--accent)", flex: "none" }}>*</span>
+    )}
+    {/* 説明は残り幅に収めて省略する。width: 0 で最小幅に数えない（数えると長い説明が
+        フォーム全体を押し広げ、サイドパネルからはみ出す） */}
+    <span
+      style={{
+        flex: 1,
+        width: 0,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+      }}
+    >
+      {schema.description}
+    </span>
+    {action}
+  </span>
+)
+
+// array・未知の型のフォールバック：フィールド単位の JSON 入力。
+// 入力途中の不正 JSON は text に留め、valid になった時点で親へ反映する。
+const JsonField = ({
+  value,
+  onChange,
+}: {
+  value: unknown
+  onChange: (v: unknown) => void
+}) => {
+  const [text, setText] = useState(() => JSON.stringify(value ?? null, null, 2))
+  const [invalid, setInvalid] = useState(false)
+  const ref = useAutoGrow(text)
+  return (
+    <div style={{ display: "grid", gap: "2px" }}>
+      <textarea
+        ref={ref}
+        rows={3}
+        value={text}
+        onChange={(e) => {
+          setText(e.target.value)
+          try {
+            onChange(JSON.parse(e.target.value))
+            setInvalid(false)
+          } catch {
+            setInvalid(true)
+          }
+        }}
+        style={{
+          fontFamily: "var(--font-mono)",
+          fontSize: "var(--text-xs)",
+          lineHeight: 1.6,
+          maxHeight: "60vh",
+          resize: "vertical",
+        }}
+      />
+      {invalid && (
+        <p role="alert" style={{ fontSize: "var(--text-xs)" }}>
+          JSON として不正です
+        </p>
+      )}
+    </div>
+  )
+}
+
+// ---- file 型（x-mawaru-type: "file"）の添付フィールド ----
+// 選択と同時に backend（POST /tenants/:id/files）へアップロードし、フォーム値には
+// path 参照（fileRef）を入れる。実体は private バケットに置かれ、実行時に署名 URL が発行される
+
+const fileRefOf = (value: unknown): FileRef | null =>
+  isFileRef(value) ? value : null
+
+const formatSize = (size?: number): string | null => {
+  if (size == null) return null
+  if (size >= 1024 * 1024) return `${(size / 1024 / 1024).toFixed(1)}MB`
+  return `${Math.max(1, Math.round(size / 1024))}KB`
+}
+
+const useFileUpload = () => {
+  const bridge = useViewBridge()
+  const [uploading, setUploading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const upload = async (list: FileList): Promise<FileRef[]> => {
+    setUploading(true)
+    setError(null)
+    try {
+      const refs: FileRef[] = []
+      for (const file of Array.from(list)) {
+        refs.push(await bridge.uploadFile(file))
+      }
+      return refs
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+      return []
+    } finally {
+      setUploading(false)
+    }
+  }
+  return { upload, uploading, error }
+}
+
+const FileChip = ({
+  file,
+  onRemove,
+}: {
+  file: FileRef
+  onRemove: () => void
+}) => (
+  <span
+    style={{
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "var(--space-1)",
+      maxWidth: "100%",
+      border: "var(--border-w) solid var(--border)",
+      borderRadius: "var(--radius-s)",
+      background: "var(--surface-2)",
+      padding: "2px var(--space-2)",
+      fontSize: "var(--text-xs)",
+    }}
+  >
+    <span aria-hidden="true">📎</span>
+    <span
+      style={{
+        minWidth: 0,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+      }}
+    >
+      {file.name}
+    </span>
+    {formatSize(file.size) && (
+      <span style={{ color: "var(--muted)", flex: "none" }}>
+        {formatSize(file.size)}
+      </span>
+    )}
+    <button
+      type="button"
+      className="ghost"
+      onClick={onRemove}
+      aria-label={`${file.name} を外す`}
+      style={{
+        minHeight: "18px",
+        padding: "0 4px",
+        fontSize: "var(--text-xs)",
+      }}
+    >
+      ✕
+    </button>
+  </span>
+)
+
+// 破線のドロップゾーン兼選択ボタン。クリックで隠し input[type=file] を開き、
+// ドラッグ＆ドロップも受け付ける（アップロード中は無効化）
+const FilePicker = ({
+  label,
+  multiple,
+  uploading,
+  onPick,
+}: {
+  label: string
+  multiple?: boolean
+  uploading: boolean
+  onPick: (list: FileList) => void
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  // dragenter/leave は子要素をまたぐたびに発火するため深さを数えて判定する
+  const depthRef = useRef(0)
+  const [dragOver, setDragOver] = useState(false)
+  const hasFiles = (e: React.DragEvent) =>
+    Array.from(e.dataTransfer.types).includes("Files")
+  return (
+    <>
+      <input
+        ref={inputRef}
+        type="file"
+        multiple={multiple}
+        style={{ display: "none" }}
+        onChange={(e) => {
+          if (e.target.files && e.target.files.length > 0) {
+            onPick(e.target.files)
+          }
+          e.target.value = ""
+        }}
+      />
+      <button
+        type="button"
+        onClick={() => inputRef.current?.click()}
+        disabled={uploading}
+        onDragEnter={(e) => {
+          if (uploading || !hasFiles(e)) return
+          e.preventDefault()
+          depthRef.current += 1
+          setDragOver(true)
+        }}
+        onDragOver={(e) => {
+          if (uploading || !hasFiles(e)) return
+          e.preventDefault()
+        }}
+        onDragLeave={() => {
+          if (depthRef.current > 0) depthRef.current -= 1
+          if (depthRef.current === 0) setDragOver(false)
+        }}
+        onDrop={(e) => {
+          e.preventDefault()
+          depthRef.current = 0
+          setDragOver(false)
+          if (uploading) return
+          if (e.dataTransfer.files.length > 0) onPick(e.dataTransfer.files)
+        }}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "var(--space-1)",
+          width: "100%",
+          minHeight: "40px",
+          padding: "var(--space-2)",
+          border: `var(--border-w) dashed ${dragOver ? "var(--accent)" : "var(--border)"}`,
+          borderRadius: "var(--radius-s)",
+          background: dragOver ? "var(--surface-2)" : "transparent",
+          color: dragOver ? "var(--accent)" : "var(--muted)",
+          fontSize: "var(--text-xs)",
+        }}
+      >
+        <span aria-hidden="true">📎</span>
+        {uploading ? "アップロード中…" : `${label}、またはドラッグ＆ドロップ`}
+      </button>
+    </>
+  )
+}
+
+// file 単体：未選択（null）⇄ 選択済みチップ
+const FileField = ({
+  value,
+  onChange,
+}: {
+  value: unknown
+  onChange: (v: unknown) => void
+}) => {
+  const { upload, uploading, error } = useFileUpload()
+  const file = fileRefOf(value)
+  const pick = async (list: FileList) => {
+    const refs = await upload(list)
+    if (refs[0]) onChange(refs[0])
+  }
+  return (
+    <div style={{ display: "grid", gap: "var(--space-1)" }}>
+      {file ? (
+        <FileChip file={file} onRemove={() => onChange(null)} />
+      ) : (
+        <FilePicker
+          label="ファイルを選択"
+          uploading={uploading}
+          onPick={pick}
+        />
+      )}
+      {error && (
+        <p role="alert" style={{ margin: 0, fontSize: "var(--text-xs)" }}>
+          {error}
+        </p>
+      )}
+    </div>
+  )
+}
+
+// file 配列：チップのリスト＋追加（複数選択可）
+const FileArrayField = ({
+  value,
+  onChange,
+}: {
+  value: unknown
+  onChange: (v: unknown) => void
+}) => {
+  const { upload, uploading, error } = useFileUpload()
+  const files = Array.isArray(value)
+    ? value.map(fileRefOf).filter((f): f is FileRef => f !== null)
+    : []
+  const pick = async (list: FileList) => {
+    const refs = await upload(list)
+    if (refs.length > 0) onChange([...files, ...refs])
+  }
+  return (
+    <div style={{ display: "grid", gap: "var(--space-1)" }}>
+      {files.map((file, i) => (
+        <FileChip
+          key={file.path}
+          file={file}
+          onRemove={() => onChange(files.filter((_, j) => j !== i))}
+        />
+      ))}
+      <FilePicker
+        label="ファイルを追加"
+        multiple
+        uploading={uploading}
+        onPick={pick}
+      />
+      {error && (
+        <p role="alert" style={{ margin: 0, fontSize: "var(--text-xs)" }}>
+          {error}
+        </p>
+      )}
+    </div>
+  )
+}
+
+// 長文の raw 編集欄：内容の高さまで伸び、上限（60vh）を超えたらその中でスクロールする
+const LongTextArea = ({
+  value,
+  onChange,
+  autoFocus,
+}: {
+  value: string
+  onChange: (v: string) => void
+  autoFocus?: boolean
+}) => {
+  const ref = useAutoGrow(value)
+  return (
+    <textarea
+      ref={ref}
+      // biome-ignore lint/a11y/noAutofocus: 「編集」を押して現れる欄なので即入力できる方が自然
+      autoFocus={autoFocus}
+      rows={3}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      style={{
+        fontSize: "var(--text-base)",
+        lineHeight: 1.9,
+        maxHeight: "60vh",
+        resize: "vertical",
+      }}
+    />
+  )
+}
+
+// string フィールド：長文・改行入りの値は textarea に昇格する（AI の下書き等）。
+// 入力中に input ⇄ textarea が flip してフォーカスが飛ばないよう、昇格したら戻さない
+const StringInput = ({
+  value,
+  onChange,
+}: {
+  value: string
+  onChange: (v: string) => void
+}) => {
+  const long = isLongText(value)
+  const [multiline, setMultiline] = useState(long)
+  useEffect(() => {
+    if (long) setMultiline(true)
+  }, [long])
+  return multiline ? (
+    <LongTextArea value={value} onChange={onChange} />
+  ) : (
+    <input
+      type="text"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+    />
+  )
+}
+
+// 値の入った長文 string＝読み物。既定は Markdown の整形表示で、「編集」を押した時だけ
+// raw に入れ替わる。長文が複数あるときの2つ目以降は畳んだ状態で始まる（見出しだけ出す）
+const LongTextField = ({
+  name,
+  schema,
+  required,
+  value,
+  editable,
+  defaultCollapsed,
+  onChange,
+}: {
+  name: string
+  schema: JsonSchema
+  required: boolean
+  value: string
+  editable: boolean
+  defaultCollapsed: boolean
+  onChange: (v: string) => void
+}) => {
+  // 開閉は <details>：読み取り専用の局面で書類全体を <fieldset disabled> で包んでも
+  // （フォーム部品ではないので）畳んだ本文を開いて読める
+  const [open, setOpen] = useState(!defaultCollapsed)
+  const [editing, setEditing] = useState(false)
+  const lines = value.split("\n").length
+
+  return (
+    // details 自身には display を当てない（当てると閉じた中身が出てしまうブラウザがある）
+    <details open={open} onToggle={(e) => setOpen(e.currentTarget.open)}>
+      <summary style={{ cursor: "pointer", listStyle: "none" }}>
+        <FieldHead
+          name={name}
+          schema={schema}
+          required={required}
+          marker={
+            <span aria-hidden="true" style={{ flex: "none" }}>
+              {open ? "▾" : "▸"}
+            </span>
+          }
+          action={
+            open ? (
+              editable ? (
+                <button
+                  type="button"
+                  className="ghost"
+                  // summary の中なので、押しても開閉させない
+                  onClick={(e) => {
+                    e.preventDefault()
+                    setEditing((current) => !current)
+                  }}
+                  style={headActionStyle}
+                >
+                  {editing ? "表示に戻す" : "編集"}
+                </button>
+              ) : null
+            ) : (
+              <span
+                style={{
+                  flex: "none",
+                  fontVariantNumeric:
+                    "var(--numeric)" as CSSProperties["fontVariantNumeric"],
+                }}
+              >
+                {lines}行
+              </span>
+            )
+          }
+        />
+      </summary>
+      <div
+        style={{
+          display: "grid",
+          marginTop: "var(--space-3)",
+          borderTop: "var(--border-w) solid var(--border)",
+          paddingTop: "var(--space-3)",
+        }}
+      >
+        {editing ? (
+          <LongTextArea value={value} onChange={onChange} autoFocus />
+        ) : (
+          <Markdown text={value} />
+        )}
+      </div>
+    </details>
+  )
+}
+
+const Field = ({
+  name,
+  schema,
+  required,
+  value,
+  readOnly,
+  asDocument,
+  defaultCollapsed,
+  onChange,
+}: {
+  name: string
+  schema: JsonSchema
+  required: boolean
+  value: unknown
+  readOnly: boolean
+  /** 読み物（Markdown 表示）として描くか。開いた時点の値で決まる */
+  asDocument: boolean
+  /** 読み物を畳んだ状態で始めるか（先頭の読み物だけ開く） */
+  defaultCollapsed: boolean
+  onChange: (v: unknown) => void
+}) => {
+  const head = <FieldHead name={name} schema={schema} required={required} />
+
+  // file 型は enum / type 判定より先に見る（実体は object / array なので）
+  if (isFileSchema(schema)) {
+    return (
+      <div style={{ display: "grid", gap: "var(--space-1)" }}>
+        {head}
+        <FileField value={value} onChange={onChange} />
+      </div>
+    )
+  }
+  if (schema.type === "array" && isFileSchema(schema.items)) {
+    return (
+      <div style={{ display: "grid", gap: "var(--space-1)" }}>
+        {head}
+        <FileArrayField value={value} onChange={onChange} />
+      </div>
+    )
+  }
+
+  const options = schema.enum
+
+  if (options && options.length > 0) {
+    const idx = options.findIndex(
+      (opt) => JSON.stringify(opt) === JSON.stringify(value),
+    )
+    return (
+      <label>
+        {head}
+        <select
+          value={String(idx)}
+          onChange={(e) => onChange(options[Number(e.target.value)])}
+        >
+          {idx < 0 && (
+            <option value="-1" disabled>
+              選択してください
+            </option>
+          )}
+          {options.map((opt, i) => (
+            <option key={JSON.stringify(opt)} value={String(i)}>
+              {typeof opt === "string" ? opt : JSON.stringify(opt)}
+            </option>
+          ))}
+        </select>
+      </label>
+    )
+  }
+
+  switch (schema.type) {
+    case "string": {
+      const text = typeof value === "string" ? value : ""
+      if (asDocument) {
+        return (
+          <LongTextField
+            name={name}
+            schema={schema}
+            required={required}
+            value={text}
+            editable={!readOnly}
+            defaultCollapsed={defaultCollapsed}
+            onChange={onChange}
+          />
+        )
+      }
+      return (
+        <div style={{ display: "grid", gap: "var(--space-1)" }}>
+          {head}
+          <StringInput value={text} onChange={onChange} />
+        </div>
+      )
+    }
+    case "number":
+    case "integer":
+      return (
+        <label>
+          {head}
+          <input
+            type="number"
+            step={schema.type === "integer" ? 1 : "any"}
+            value={typeof value === "number" ? value : ""}
+            onChange={(e) => {
+              const raw = e.target.value
+              onChange(raw === "" ? null : Number(raw))
+            }}
+          />
+        </label>
+      )
+    case "boolean":
+      return (
+        <label
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "var(--space-2)",
+          }}
+        >
+          <input
+            type="checkbox"
+            checked={Boolean(value)}
+            onChange={(e) => onChange(e.target.checked)}
+            style={{ minHeight: 0, width: "14px", height: "14px" }}
+          />
+          {head}
+        </label>
+      )
+    case "object": {
+      if (!schema.properties || Object.keys(schema.properties).length === 0) {
+        break
+      }
+      const obj = (
+        value != null && typeof value === "object" ? value : {}
+      ) as Record<string, unknown>
+      return (
+        <div style={{ display: "grid", gap: "var(--space-2)" }}>
+          {head}
+          <div
+            style={{
+              borderLeft: "var(--border-w) solid var(--border)",
+              paddingLeft: "var(--space-3)",
+            }}
+          >
+            <SchemaForm
+              schema={schema}
+              value={obj}
+              readOnly={readOnly}
+              onChange={onChange}
+            />
+          </div>
+        </div>
+      )
+    }
+  }
+
+  return (
+    <div style={{ display: "grid", gap: "var(--space-1)" }}>
+      {head}
+      <JsonField value={value} onChange={onChange} />
+    </div>
+  )
+}
+
+export const SchemaForm = ({
+  schema,
+  value,
+  readOnly = false,
+  onChange,
+}: {
+  schema: JsonSchema
+  value: Record<string, unknown>
+  /** 値を直せない局面（担当外・全員承認・対応済み）では「編集」を出さない */
+  readOnly?: boolean
+  onChange: (v: Record<string, unknown>) => void
+}) => {
+  const fields = Object.entries(schema.properties ?? {})
+  // 中身の入った長文＝読み物（Markdown 表示）。開いた時点の値で決め、以後は変えない：
+  // 入力中に 80 文字を超えた瞬間に入力欄が表示に化けてフォーカスが飛ぶのを避ける
+  // （空欄から書き始める手動実行の入力フォームは従来どおり入力欄のまま）
+  const [documentKeys] = useState(() =>
+    fields
+      .filter(([key]) => {
+        const field = value[key]
+        return typeof field === "string" && isLongText(field)
+      })
+      .map(([key]) => key),
+  )
+
+  return (
+    <div style={{ display: "grid", gap: "var(--space-5)" }}>
+      {fields.map(([key, child]) => (
+        <Field
+          key={key}
+          name={key}
+          schema={child}
+          required={schema.required?.includes(key) ?? false}
+          value={value[key]}
+          readOnly={readOnly}
+          asDocument={documentKeys.includes(key)}
+          // 読み物が複数あるとき、先頭（＝主役の成果物）だけ開いて以降は畳む。
+          // key 名には依存せず、スキーマの並び順だけで決める
+          defaultCollapsed={key !== documentKeys[0]}
+          onChange={(v) => onChange({ ...value, [key]: v })}
+        />
+      ))}
+    </div>
+  )
+}