@xeplr/ui-schema-handler 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Xeplr
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@xeplr/ui-schema-handler",
+  "version": "1.0.1",
+  "description": "React components for @xeplr/schema-handler — DynamicForm, SchemaEditor, FieldEditor",
+  "type": "module",
+  "main": "src/index.js",
+  "files": [
+    "src/"
+  ],
+  "keywords": [
+    "schema",
+    "form",
+    "react",
+    "dynamic-form",
+    "field-editor"
+  ],
+  "author": "xeplr",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Xeplr/xeplr-ui-schema-handler"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "@xeplr/schema-handler": "^1.0.0"
+  }
+}

package/src/DynamicForm.jsx

@@ -0,0 +1,138 @@
+import React from 'react';
+
+/**
+ * Render form inputs from a schema array.
+ *
+ * Props:
+ *   schema  — [{name, type, required, default, description, order}]
+ *   value   — { [name]: value }
+ *   onChange(nextValue)   — full-form change (called with the new value object)
+ *   errors  — optional { [name]: 'error message' } for inline field errors
+ *   disabled — optional boolean, disables all inputs
+ *   labels  — optional { [name]: 'Custom Label' } to override display labels
+ */
+export function DynamicForm({ schema = [], value = {}, onChange, errors = {}, disabled = false, labels = {} }) {
+  const fields = [...(schema || [])]
+    .filter(f => f && f.name)
+    .sort((a, b) => (a.order ?? 999) - (b.order ?? 999));
+
+  const setField = (name, next) => {
+    onChange && onChange({ ...value, [name]: next });
+  };
+
+  return (
+    <div className="xeplr-shf-form">
+      {fields.map(field => (
+        <FieldRow
+          key={field.name}
+          field={field}
+          label={labels[field.name] ?? humanize(field.name)}
+          value={value[field.name]}
+          onChange={(v) => setField(field.name, v)}
+          error={errors[field.name]}
+          disabled={disabled}
+        />
+      ))}
+    </div>
+  );
+}
+
+function FieldRow({ field, label, value, onChange, error, disabled }) {
+  return (
+    <label className={`xeplr-shf-field${error ? ' xeplr-shf-field--error' : ''}`}>
+      <span className="xeplr-shf-label">
+        {label}
+        {field.required && <span className="xeplr-shf-required" title="Required">*</span>}
+        <span className="xeplr-shf-type">{field.type || 'string'}</span>
+      </span>
+      {field.description && <span className="xeplr-shf-desc">{field.description}</span>}
+      <Input field={field} value={value} onChange={onChange} disabled={disabled} />
+      {error && <span className="xeplr-shf-err">{error}</span>}
+    </label>
+  );
+}
+
+function Input({ field, value, onChange, disabled }) {
+  const common = { disabled, className: 'xeplr-shf-input' };
+  const t = field.type || 'string';
+  const shown = value ?? field.default ?? '';
+
+  if (t === 'boolean') {
+    return (
+      <input
+        type="checkbox"
+        className="xeplr-shf-input xeplr-shf-input--check"
+        checked={!!value}
+        onChange={(e) => onChange(e.target.checked)}
+        disabled={disabled}
+      />
+    );
+  }
+  if (t === 'number') {
+    return (
+      <input
+        type="number"
+        {...common}
+        value={value ?? ''}
+        onChange={(e) => onChange(e.target.value === '' ? undefined : Number(e.target.value))}
+      />
+    );
+  }
+  if (t === 'date') {
+    // input type=date wants yyyy-mm-dd
+    const iso = value ? String(value).slice(0, 10) : '';
+    return <input type="date" {...common} value={iso} onChange={(e) => onChange(e.target.value)} />;
+  }
+  if (t === 'object' || t === 'array') {
+    // v1: JSON textarea. Nested sub-forms come later.
+    return <JsonInput common={common} value={value} onChange={onChange} kind={t} />;
+  }
+  // string (default)
+  return (
+    <input
+      type="text"
+      {...common}
+      value={shown ?? ''}
+      onChange={(e) => onChange(e.target.value)}
+    />
+  );
+}
+
+function JsonInput({ common, value, onChange, kind }) {
+  const [draft, setDraft] = React.useState(() => stringify(value));
+  const [err, setErr] = React.useState(null);
+  React.useEffect(() => { setDraft(stringify(value)); setErr(null); }, [value]);
+  const commit = (text) => {
+    setDraft(text);
+    if (text.trim() === '') { onChange(kind === 'array' ? [] : {}); setErr(null); return; }
+    try { onChange(JSON.parse(text)); setErr(null); }
+    catch (e) { setErr(e.message); }
+  };
+  return (
+    <div className="xeplr-shf-json">
+      <textarea
+        {...common}
+        className="xeplr-shf-input xeplr-shf-input--json"
+        rows={4}
+        value={draft}
+        onChange={(e) => commit(e.target.value)}
+        placeholder={kind === 'array' ? '[]' : '{}'}
+      />
+      {err && <span className="xeplr-shf-err">Invalid JSON: {err}</span>}
+    </div>
+  );
+}
+
+function stringify(v) {
+  if (v === undefined || v === null) return '';
+  try { return JSON.stringify(v, null, 2); } catch { return ''; }
+}
+
+function humanize(name) {
+  return String(name)
+    .replace(/([A-Z])/g, ' $1')
+    .replace(/[_-]/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .replace(/^\w/, c => c.toUpperCase());
+}

package/src/SchemaEditor.jsx

@@ -0,0 +1,218 @@
+import React from 'react';
+import { TYPES } from '@xeplr/schema-handler';
+
+/**
+ * Table-per-schema editor. One row = one field. Reorder via ↑/↓ arrows.
+ *
+ * Props:
+ *   schema     — array of field defs
+ *   onChange(nextSchema)
+ *   addLabel   — button label; default "+ Add field"
+ *
+ * Field shape:
+ *   { name, type, label?, required, default, description, order }
+ */
+export function SchemaEditor({ schema = [], onChange, addLabel = '+ Add field' }) {
+  const rows = React.useMemo(() => sortByOrder(schema), [schema]);
+  const emit = (next) => onChange && onChange(next);
+
+  const setAt = (idx, next) => {
+    const copy = rows.slice();
+    copy[idx] = next;
+    emit(reindexOrder(copy));
+  };
+  const removeAt = (idx) => {
+    const copy = rows.slice();
+    copy.splice(idx, 1);
+    emit(reindexOrder(copy));
+  };
+  const move = (idx, delta) => {
+    const target = idx + delta;
+    if (target < 0 || target >= rows.length) return;
+    const copy = rows.slice();
+    const [item] = copy.splice(idx, 1);
+    copy.splice(target, 0, item);
+    emit(reindexOrder(copy));
+  };
+  const add = () => {
+    const next = rows.concat([{ name: '', type: 'string' }]);
+    emit(reindexOrder(next));
+  };
+
+  return (
+    <div className="xeplr-shf-table-wrap">
+      <table className="xeplr-shf-table">
+        <thead>
+          <tr>
+            <th className="xeplr-shf-th-move"></th>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Label</th>
+            <th>Default value</th>
+            <th className="xeplr-shf-th-center">Required</th>
+            <th>Description</th>
+            <th className="xeplr-shf-th-remove"></th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.length === 0 && (
+            <tr><td colSpan={8} className="xeplr-shf-empty-row">No fields yet.</td></tr>
+          )}
+          {rows.map((field, i) => (
+            <FieldRow
+              key={i}
+              field={field}
+              isFirst={i === 0}
+              isLast={i === rows.length - 1}
+              onChange={(next) => setAt(i, next)}
+              onRemove={() => removeAt(i)}
+              onMoveUp={() => move(i, -1)}
+              onMoveDown={() => move(i, 1)}
+            />
+          ))}
+        </tbody>
+      </table>
+      <button type="button" className="xeplr-shf-add-btn" onClick={add}>{addLabel}</button>
+    </div>
+  );
+}
+
+function FieldRow({ field, isFirst, isLast, onChange, onRemove, onMoveUp, onMoveDown }) {
+  const set = (k, v) => onChange({ ...field, [k]: v });
+
+  return (
+    <tr className="xeplr-shf-tr">
+      <td className="xeplr-shf-td-move">
+        <button type="button" className="xeplr-shf-move" onClick={onMoveUp}   disabled={isFirst} title="Move up">↑</button>
+        <button type="button" className="xeplr-shf-move" onClick={onMoveDown} disabled={isLast}  title="Move down">↓</button>
+      </td>
+      <td>
+        <input
+          type="text"
+          className="xeplr-shf-inp xeplr-shf-inp--code"
+          value={field.name || ''}
+          onChange={(e) => set('name', e.target.value)}
+          placeholder="fieldName"
+        />
+      </td>
+      <td>
+        <select
+          className="xeplr-shf-inp xeplr-shf-inp--type"
+          value={field.type || 'string'}
+          onChange={(e) => set('type', e.target.value)}
+        >
+          {TYPES.map(t => <option key={t} value={t}>{t}</option>)}
+        </select>
+      </td>
+      <td>
+        <input
+          type="text"
+          className="xeplr-shf-inp xeplr-shf-inp--muted"
+          value={field.label || ''}
+          onChange={(e) => set('label', e.target.value)}
+          placeholder="optional"
+        />
+      </td>
+      <td>
+        <DefaultInput field={field} onChange={(v) => set('default', v)} />
+      </td>
+      <td className="xeplr-shf-td-center">
+        <input
+          type="checkbox"
+          className="xeplr-shf-chk"
+          checked={!!field.required}
+          onChange={(e) => set('required', e.target.checked)}
+        />
+      </td>
+      <td>
+        <input
+          type="text"
+          className="xeplr-shf-inp xeplr-shf-inp--muted"
+          value={field.description || ''}
+          onChange={(e) => set('description', e.target.value)}
+          placeholder="optional"
+        />
+      </td>
+      <td className="xeplr-shf-td-remove">
+        <button type="button" className="xeplr-shf-x" onClick={onRemove} title="Remove field">×</button>
+      </td>
+    </tr>
+  );
+}
+
+/**
+ * Default-value input adapts to the field's type but always renders as a
+ * single-line control that fits the table row.
+ */
+function DefaultInput({ field, onChange }) {
+  const t = field.type || 'string';
+  const common = { className: 'xeplr-shf-inp xeplr-shf-inp--muted' };
+
+  if (t === 'boolean') {
+    return (
+      <select
+        {...common}
+        value={field.default === undefined ? '' : String(field.default)}
+        onChange={(e) => {
+          const v = e.target.value;
+          onChange(v === '' ? undefined : v === 'true');
+        }}
+      >
+        <option value="">blank → the step must supply it</option>
+        <option value="true">true</option>
+        <option value="false">false</option>
+      </select>
+    );
+  }
+  if (t === 'number') {
+    return (
+      <input
+        type="number"
+        {...common}
+        value={field.default ?? ''}
+        onChange={(e) => onChange(e.target.value === '' ? undefined : Number(e.target.value))}
+        placeholder="blank → the step must supply it"
+      />
+    );
+  }
+  if (t === 'object' || t === 'array') {
+    // JSON one-liner. Wider forms should use a modal — keep the row compact.
+    return (
+      <input
+        type="text"
+        {...common}
+        value={field.default === undefined ? '' : safeStringify(field.default)}
+        onChange={(e) => {
+          const txt = e.target.value;
+          if (txt.trim() === '') { onChange(undefined); return; }
+          try { onChange(JSON.parse(txt)); }
+          catch { /* keep raw string in the input, don't commit invalid JSON */ }
+        }}
+        placeholder={t === 'array' ? '[] blank → the step must supply it' : '{} blank → the step must supply it'}
+      />
+    );
+  }
+  // string, date
+  return (
+    <input
+      type="text"
+      {...common}
+      value={field.default ?? ''}
+      onChange={(e) => onChange(e.target.value === '' ? undefined : e.target.value)}
+      placeholder="blank → the step must supply it"
+    />
+  );
+}
+
+function sortByOrder(list) {
+  return [...(list || [])].sort((a, b) => (a.order ?? 999) - (b.order ?? 999));
+}
+
+// Renumber order 10, 20, 30... so a fresh add at the end always slots in.
+function reindexOrder(list) {
+  return list.map((f, i) => ({ ...f, order: (i + 1) * 10 }));
+}
+
+function safeStringify(v) {
+  try { return JSON.stringify(v); } catch { return ''; }
+}

package/src/index.js

@@ -0,0 +1,4 @@
+export { DynamicForm } from './DynamicForm.jsx';
+export { SchemaEditor } from './SchemaEditor.jsx';
+// styles.css is opt-in — consumers who want defaults do:
+//   import '@xeplr/ui-schema-handler/src/styles.css'

package/src/styles.css

@@ -0,0 +1,87 @@
+/* Minimal, unopinionated defaults. All rules prefixed `xeplr-shf-*` so
+   consumers can restyle without conflict. Import optional. */
+
+/* ─── DynamicForm ─── */
+.xeplr-shf-form { display: flex; flex-direction: column; gap: 14px; }
+.xeplr-shf-field {
+  display: flex; flex-direction: column; gap: 4px;
+  font: 13px/1.4 system-ui, sans-serif; color: #333;
+}
+.xeplr-shf-label { display: flex; align-items: center; gap: 6px; font-weight: 500; }
+.xeplr-shf-required { color: #c00; font-weight: 700; }
+.xeplr-shf-type {
+  color: #888; font-weight: 400; font-size: 11px;
+  background: #f0f0f0; padding: 1px 6px; border-radius: 3px; margin-left: auto;
+}
+.xeplr-shf-desc { color: #666; font-size: 12px; }
+.xeplr-shf-err  { color: #c00; font-size: 12px; }
+.xeplr-shf-input {
+  padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px;
+  font: inherit; background: #fff;
+}
+.xeplr-shf-input:focus { outline: 2px solid #646cff; outline-offset: -1px; }
+.xeplr-shf-input--check { width: auto; }
+.xeplr-shf-input--json { font-family: ui-monospace, Consolas, monospace; font-size: 12px; resize: vertical; }
+.xeplr-shf-field--error .xeplr-shf-input { border-color: #c00; }
+
+/* ─── SchemaEditor (table) ─── */
+.xeplr-shf-table-wrap { font-family: system-ui, sans-serif; color: #222; }
+.xeplr-shf-table {
+  width: 100%; border-collapse: collapse; font-size: 13px;
+  border: 1px solid #e0e5ee; border-radius: 6px; overflow: hidden;
+  background: #fff;
+}
+.xeplr-shf-table thead th {
+  background: #eaf1fb;
+  text-align: left; font-weight: 600; text-transform: uppercase; font-size: 11px;
+  color: #4a5b78; letter-spacing: 0.5px;
+  padding: 10px 12px; border-bottom: 1px solid #d5deee;
+}
+.xeplr-shf-th-move,
+.xeplr-shf-th-remove { width: 32px; padding: 10px 4px; }
+.xeplr-shf-th-center { text-align: center !important; }
+
+.xeplr-shf-tr td { padding: 6px 8px; border-bottom: 1px solid #f0f2f5; vertical-align: middle; }
+.xeplr-shf-tr:last-child td { border-bottom: none; }
+.xeplr-shf-tr:hover td { background: #fafbfd; }
+.xeplr-shf-empty-row { text-align: center; color: #999; font-style: italic; padding: 16px !important; }
+
+.xeplr-shf-td-move { text-align: center; white-space: nowrap; padding: 0 !important; }
+.xeplr-shf-td-center { text-align: center; }
+.xeplr-shf-td-remove { text-align: center; width: 32px; }
+
+.xeplr-shf-inp {
+  width: 100%; box-sizing: border-box;
+  padding: 6px 8px; border: 1px solid transparent; border-radius: 4px;
+  font: inherit; background: transparent;
+}
+.xeplr-shf-inp:hover  { border-color: #e0e5ee; }
+.xeplr-shf-inp:focus  { outline: none; border-color: #646cff; background: #fff;
+  box-shadow: 0 0 0 2px rgba(100,108,255,0.15); }
+.xeplr-shf-inp--code  { font-family: ui-monospace, Consolas, monospace; font-weight: 500; }
+.xeplr-shf-inp--type  { padding-right: 20px; }
+.xeplr-shf-inp--muted::placeholder { color: #aaa; font-style: italic; }
+
+.xeplr-shf-chk { width: 16px; height: 16px; cursor: pointer; }
+
+.xeplr-shf-move {
+  border: none; background: transparent; cursor: pointer;
+  color: #8a95a8; font-size: 14px; line-height: 1;
+  padding: 2px 6px; border-radius: 3px;
+}
+.xeplr-shf-move:hover:not(:disabled) { background: #eef2f7; color: #333; }
+.xeplr-shf-move:disabled { opacity: 0.25; cursor: default; }
+
+.xeplr-shf-x {
+  border: none; background: transparent; cursor: pointer;
+  color: #d04040; font-size: 18px; line-height: 1;
+  padding: 4px 8px; border-radius: 3px;
+}
+.xeplr-shf-x:hover { background: #fdecec; }
+
+.xeplr-shf-add-btn {
+  margin-top: 10px; padding: 6px 12px;
+  border: 1px dashed #b6c0d1; background: transparent;
+  border-radius: 4px; cursor: pointer; color: #4a5b78; font: inherit; font-size: 13px;
+}
+.xeplr-shf-add-btn:hover { border-color: #646cff; color: #646cff; }