[Init] Initial commit - NetMesh terminal manager

components/settings/tabs/PluginStructuredSettingEditor.tsx

@@ -0,0 +1,362 @@
+import { ArrowDown, ArrowUp, Plus, Trash2 } from 'lucide-react';
+import React from 'react';
+
+import { canonicalJsonString, jsonValuesEqual } from '../../../domain/convergentSync/json';
+import type { JsonValue } from '../../../domain/convergentSync/types';
+import { Button } from '../../ui/button';
+import { Input } from '../../ui/input';
+
+type RestrictedSchema = {
+  type?: string;
+  const?: unknown;
+  enum?: unknown[];
+  minimum?: number;
+  maximum?: number;
+  minLength?: number;
+  maxLength?: number;
+  minItems?: number;
+  maxItems?: number;
+  items?: RestrictedSchema;
+  properties?: Record<string, RestrictedSchema>;
+  required?: string[];
+};
+
+function asSchema(value: unknown): RestrictedSchema {
+  return value && typeof value === 'object' && !Array.isArray(value) ? value as RestrictedSchema : {};
+}
+
+export function createPluginStructuredDefaultValue(schema: RestrictedSchema): unknown {
+  if (schema.const !== undefined) return structuredClone(schema.const);
+  if (schema.enum?.length) return structuredClone(schema.enum[0]);
+  if (schema.type === 'boolean') return false;
+  if (schema.type === 'number' || schema.type === 'integer') {
+    if (schema.type === 'integer') {
+      return schema.minimum !== undefined
+        ? Math.ceil(schema.minimum)
+        : Math.min(0, Math.floor(schema.maximum ?? 0));
+    }
+    return schema.minimum ?? Math.min(0, schema.maximum ?? 0);
+  }
+  if (schema.type === 'array') {
+    return Array.from(
+      { length: schema.minItems ?? 0 },
+      () => createPluginStructuredDefaultValue(asSchema(schema.items)),
+    );
+  }
+  if (schema.type === 'null') return null;
+  if (schema.type === 'object') {
+    const required = new Set(schema.required ?? []);
+    return Object.fromEntries(Object.entries(schema.properties ?? {})
+      .filter(([key]) => required.has(key))
+      .map(([key, child]) => [key, createPluginStructuredDefaultValue(child)]));
+  }
+  return ''.padEnd(schema.minLength ?? 0, 'x');
+}
+
+function StructuredValueInput({
+  schema,
+  value,
+  disabled,
+  label,
+  onChange,
+  onCommit,
+  sortable = false,
+  labels,
+}: {
+  schema: RestrictedSchema;
+  value: unknown;
+  disabled: boolean;
+  label: string;
+  onChange(value: unknown): void;
+  onCommit(value: unknown): void;
+  sortable?: boolean;
+  labels: { add: string; remove: string; moveUp(index: number): string; moveDown(index: number): string };
+}) {
+  if (schema.const !== undefined) {
+    return <code className="block rounded bg-muted/40 px-2 py-1.5 text-xs">{JSON.stringify(schema.const)}</code>;
+  }
+  if (schema.enum?.length) {
+    const selectedIndex = schema.enum.findIndex((candidate) => (
+      jsonValuesEqual(candidate as JsonValue, value as JsonValue)
+    ));
+    return (
+      <select
+        aria-label={label}
+        value={String(Math.max(0, selectedIndex))}
+        disabled={disabled}
+        onChange={(event) => {
+          const selected = schema.enum?.[Number(event.target.value)];
+          onChange(selected);
+          onCommit(selected);
+        }}
+        className="h-9 w-full rounded-md border border-input bg-background px-2 text-sm"
+      >
+        {schema.enum.map((candidate, index) => (
+          <option key={`${index}:${JSON.stringify(candidate)}`} value={String(index)}>
+            {typeof candidate === 'string' ? candidate : canonicalJsonString(candidate as JsonValue)}
+          </option>
+        ))}
+      </select>
+    );
+  }
+  if (schema.type === 'null') {
+    return <code className="block rounded bg-muted/40 px-2 py-1.5 text-xs">null</code>;
+  }
+  if (schema.type === 'boolean') {
+    return (
+      <input
+        aria-label={label}
+        type="checkbox"
+        checked={value === true}
+        disabled={disabled}
+        onChange={(event) => {
+          onChange(event.target.checked);
+          onCommit(event.target.checked);
+        }}
+        className="h-4 w-4 accent-primary"
+      />
+    );
+  }
+  if (schema.type === 'object') {
+    const record = value && typeof value === 'object' && !Array.isArray(value)
+      ? value as Record<string, unknown>
+      : {};
+    const required = new Set(schema.required ?? []);
+    return (
+      <div className="space-y-2 rounded-md border border-border/60 p-2">
+        {Object.entries(schema.properties ?? {}).map(([key, child]) => {
+          const present = Object.hasOwn(record, key);
+          if (!required.has(key) && !present) {
+            return (
+              <div key={key} className="flex items-center justify-between gap-2 text-xs">
+                <span className="font-medium text-muted-foreground">{key}</span>
+                <Button type="button" variant="outline" size="sm" disabled={disabled} onClick={() => {
+                  const next = { ...record, [key]: createPluginStructuredDefaultValue(child) };
+                  onChange(next);
+                  onCommit(next);
+                }} aria-label={`${labels.add}: ${key}`}><Plus size={13} className="mr-2" />{labels.add}</Button>
+              </div>
+            );
+          }
+          return (
+          <div key={key} className="block space-y-1 text-xs">
+            <span className="font-medium text-muted-foreground">{key}</span>
+            <div className="flex items-start gap-1">
+              <div className="min-w-0 flex-1">
+                <StructuredValueInput
+                  schema={child}
+                  value={record[key]}
+                  disabled={disabled}
+                  label={`${label} ${key}`}
+                  labels={labels}
+                  onChange={(next) => onChange({ ...record, [key]: next })}
+                  onCommit={(next) => onCommit({ ...record, [key]: next })}
+                />
+              </div>
+              {!required.has(key) && <Button type="button" variant="ghost" size="icon" className="h-7 w-7 text-destructive" disabled={disabled} onClick={() => {
+                const next = { ...record };
+                delete next[key];
+                onChange(next);
+                onCommit(next);
+              }} aria-label={`${labels.remove}: ${key}`}><Trash2 size={13} /></Button>}
+            </div>
+          </div>
+          );
+        })}
+      </div>
+    );
+  }
+  if (schema.type === 'array') {
+    const items = Array.isArray(value) ? value : [];
+    const itemSchema = asSchema(schema.items);
+    const commitItems = (next: unknown[]) => {
+      onChange(next);
+      onCommit(next);
+    };
+    return (
+      <div className="space-y-2 rounded-md border border-border/60 p-2">
+        {items.map((item, index) => (
+          <div key={index} className="flex items-start gap-2">
+            <div className="min-w-0 flex-1">
+              <StructuredValueInput
+                schema={itemSchema}
+                value={item}
+                disabled={disabled}
+                label={`${label} ${index + 1}`}
+                labels={labels}
+                onChange={(nextItem) => {
+                  const next = [...items];
+                  next[index] = nextItem;
+                  onChange(next);
+                }}
+                onCommit={(nextItem) => {
+                  const next = [...items];
+                  next[index] = nextItem;
+                  onCommit(next);
+                }}
+              />
+            </div>
+            <div className="flex shrink-0 items-center gap-1">
+              {sortable && <Button type="button" variant="ghost" size="icon" className="h-7 w-7" disabled={disabled || index === 0} onClick={() => {
+                const next = [...items];
+                const [moved] = next.splice(index, 1);
+                next.splice(index - 1, 0, moved);
+                commitItems(next);
+              }} aria-label={labels.moveUp(index)}><ArrowUp size={13} /></Button>}
+              {sortable && <Button type="button" variant="ghost" size="icon" className="h-7 w-7" disabled={disabled || index === items.length - 1} onClick={() => {
+                const next = [...items];
+                const [moved] = next.splice(index, 1);
+                next.splice(index + 1, 0, moved);
+                commitItems(next);
+              }} aria-label={labels.moveDown(index)}><ArrowDown size={13} /></Button>}
+              <Button type="button" variant="ghost" size="icon" className="h-7 w-7 text-destructive" disabled={disabled || items.length <= (schema.minItems ?? 0)} onClick={() => commitItems(items.filter((_item, itemIndex) => itemIndex !== index))} aria-label={labels.remove}><Trash2 size={13} /></Button>
+            </div>
+          </div>
+        ))}
+        <Button type="button" variant="outline" size="sm" disabled={disabled || items.length >= (schema.maxItems ?? Number.POSITIVE_INFINITY)} onClick={() => commitItems([...items, createPluginStructuredDefaultValue(itemSchema)])}>
+          <Plus size={13} className="mr-2" />{labels.add}
+        </Button>
+      </div>
+    );
+  }
+  const numeric = schema.type === 'number' || schema.type === 'integer';
+  return (
+    <Input
+      aria-label={label}
+      type={numeric ? 'number' : 'text'}
+      value={numeric ? Number(value ?? 0) : String(value ?? '')}
+      min={schema.minimum}
+      max={schema.maximum}
+      minLength={schema.minLength}
+      maxLength={schema.maxLength}
+      step={schema.type === 'integer' ? 1 : undefined}
+      disabled={disabled}
+      onChange={(event) => onChange(numeric ? Number(event.target.value) : event.target.value)}
+      onBlur={(event) => onCommit(numeric ? Number(event.currentTarget.value) : event.currentTarget.value)}
+      className="min-w-28"
+    />
+  );
+}
+
+export function PluginStructuredSettingEditor({
+  setting,
+  value,
+  disabled,
+  onChange,
+  onCommit,
+  labels,
+}: {
+  setting: NetcattyPluginSettingContribution;
+  value: unknown;
+  disabled: boolean;
+  onChange(value: unknown[]): void;
+  onCommit(value: unknown[]): void;
+  labels: { add: string; remove: string; moveUp(index: number): string; moveDown(index: number): string };
+}) {
+  const root = asSchema(setting.valueSchema);
+  const itemSchema = asSchema(root.items);
+  const items = Array.isArray(value) ? value : [];
+  const properties = itemSchema.type === 'object' && !itemSchema.enum?.length && itemSchema.const === undefined
+    ? Object.entries(itemSchema.properties ?? {})
+    : [];
+  const updateItem = (index: number, nextItem: unknown, commit: boolean) => {
+    const next = [...items];
+    next[index] = nextItem;
+    onChange(next);
+    if (commit) onCommit(next);
+  };
+  const move = (from: number, to: number) => {
+    if (to < 0 || to >= items.length) return;
+    const next = [...items];
+    const [item] = next.splice(from, 1);
+    next.splice(to, 0, item);
+    onChange(next);
+    onCommit(next);
+  };
+  const remove = (index: number) => {
+    const next = items.filter((_item, itemIndex) => itemIndex !== index);
+    onChange(next);
+    onCommit(next);
+  };
+  const add = () => {
+    const next = [...items, createPluginStructuredDefaultValue(itemSchema)];
+    onChange(next);
+    onCommit(next);
+  };
+
+  return (
+    <div className="max-w-2xl space-y-2">
+      {properties.length > 0 && (
+        <div className="grid gap-2 px-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground"
+          style={{ gridTemplateColumns: `repeat(${properties.length}, minmax(7rem, 1fr)) auto` }}>
+          {properties.map(([key]) => <span key={key}>{key}</span>)}
+          <span className="sr-only">Actions</span>
+        </div>
+      )}
+      {items.map((item, index) => {
+        const objectItem = item && typeof item === 'object' && !Array.isArray(item) ? item as Record<string, unknown> : {};
+        const required = new Set(itemSchema.required ?? []);
+        return (
+          <div
+            key={`${setting.id}:${index}`}
+            className="grid items-center gap-2 rounded-md border border-border/70 bg-muted/10 p-2"
+            style={{ gridTemplateColumns: properties.length ? `repeat(${properties.length}, minmax(7rem, 1fr)) auto` : 'minmax(0, 1fr) auto' }}
+          >
+            {properties.length ? properties.map(([key, schema]) => {
+              const present = Object.hasOwn(objectItem, key);
+              if (!required.has(key) && !present) {
+                return <Button key={key} type="button" variant="outline" size="sm" disabled={disabled} onClick={() => updateItem(index, {
+                  ...objectItem,
+                  [key]: createPluginStructuredDefaultValue(schema),
+                }, true)} aria-label={`${labels.add}: ${key}`}><Plus size={13} className="mr-2" />{labels.add}</Button>;
+              }
+              return (
+                <div key={key} className="flex min-w-0 items-start gap-1">
+                  <div className="min-w-0 flex-1">
+                    <StructuredValueInput
+                      schema={schema}
+                      value={objectItem[key]}
+                      disabled={disabled}
+                      label={`${setting.label} ${key} ${index + 1}`}
+                      labels={labels}
+                      onChange={(next) => updateItem(index, { ...objectItem, [key]: next }, false)}
+                      onCommit={(next) => updateItem(index, { ...objectItem, [key]: next }, true)}
+                    />
+                  </div>
+                  {!required.has(key) && <Button type="button" variant="ghost" size="icon" className="h-7 w-7 text-destructive" disabled={disabled} onClick={() => {
+                    const next = { ...objectItem };
+                    delete next[key];
+                    updateItem(index, next, true);
+                  }} aria-label={`${labels.remove}: ${key}`}><Trash2 size={13} /></Button>}
+                </div>
+              );
+            }) : (
+              <StructuredValueInput
+                schema={itemSchema}
+                value={item}
+                disabled={disabled}
+                label={`${setting.label} ${index + 1}`}
+                labels={labels}
+                sortable={setting.sortable}
+                onChange={(next) => updateItem(index, next, false)}
+                onCommit={(next) => updateItem(index, next, true)}
+              />
+            )}
+            <div className="flex items-center justify-end gap-1">
+              {setting.sortable && (
+                <>
+                  <Button type="button" variant="ghost" size="icon" className="h-7 w-7" disabled={disabled || index === 0} onClick={() => move(index, index - 1)} aria-label={labels.moveUp(index)}><ArrowUp size={13} /></Button>
+                  <Button type="button" variant="ghost" size="icon" className="h-7 w-7" disabled={disabled || index === items.length - 1} onClick={() => move(index, index + 1)} aria-label={labels.moveDown(index)}><ArrowDown size={13} /></Button>
+                </>
+              )}
+              <Button type="button" variant="ghost" size="icon" className="h-7 w-7 text-destructive" disabled={disabled || items.length <= (root.minItems ?? 0)} onClick={() => remove(index)} aria-label={labels.remove}><Trash2 size={13} /></Button>
+            </div>
+          </div>
+        );
+      })}
+      <Button type="button" variant="outline" size="sm" disabled={disabled || items.length >= (root.maxItems ?? Number.POSITIVE_INFINITY)} onClick={add}>
+        <Plus size={13} className="mr-2" />{labels.add}
+      </Button>
+    </div>
+  );
+}