@xeplr/ui-actions 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-actions",
+  "version": "1.0.1",
+  "description": "React components for @xeplr/actions — ActionExplorer + ActionRunner (builds on @xeplr/ui-schema-handler)",
+  "type": "module",
+  "main": "src/index.js",
+  "files": [
+    "src/"
+  ],
+  "keywords": [
+    "actions",
+    "action-explorer",
+    "runner",
+    "react"
+  ],
+  "author": "xeplr",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Xeplr/xeplr-ui-actions"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "@xeplr/actions": "^1.0.0",
+    "@xeplr/ui-schema-handler": "^1.0.0"
+  }
+}

package/src/ActionExplorer.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+/**
+ * List actions from the registry. Click one to expand its input/output schema.
+ *
+ * Props:
+ *   actions   — [{name, description, inputSchema, outputSchema}] (e.g. from actions.list())
+ *   onSelect(name)   — optional callback when an action is clicked
+ *   selected  — name of currently-selected action (for highlighting)
+ */
+export function ActionExplorer({ actions = [], onSelect, selected }) {
+  return (
+    <div className="xeplr-ax-explorer">
+      {actions.length === 0 && (
+        <div className="xeplr-ax-empty">No actions registered.</div>
+      )}
+      {actions.map(a => (
+        <ActionCard
+          key={a.name}
+          action={a}
+          selected={selected === a.name}
+          onClick={() => onSelect && onSelect(a.name)}
+        />
+      ))}
+    </div>
+  );
+}
+
+function ActionCard({ action, selected, onClick }) {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <div className={`xeplr-ax-card${selected ? ' xeplr-ax-card--selected' : ''}`}>
+      <div className="xeplr-ax-card-hd" onClick={() => { setOpen(!open); onClick && onClick(); }}>
+        <span className="xeplr-ax-name">{action.name}</span>
+        <span className="xeplr-ax-hint">{open ? '▾' : '▸'}</span>
+      </div>
+      {action.description && <div className="xeplr-ax-desc">{action.description}</div>}
+      {open && (
+        <div className="xeplr-ax-body">
+          <SchemaTable title="Inputs"  fields={action.inputSchema} />
+          {action.outputSchema && <SchemaTable title="Outputs" fields={action.outputSchema} />}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function SchemaTable({ title, fields }) {
+  if (!Array.isArray(fields) || fields.length === 0) {
+    return <div className="xeplr-ax-schema-empty">{title}: <em>none</em></div>;
+  }
+  const sorted = [...fields].sort((a, b) => (a.order ?? 999) - (b.order ?? 999));
+  return (
+    <div>
+      <div className="xeplr-ax-schema-title">{title}</div>
+      <table className="xeplr-ax-schema-tbl">
+        <thead>
+          <tr><th>Name</th><th>Type</th><th>Req</th><th>Default</th><th>Description</th></tr>
+        </thead>
+        <tbody>
+          {sorted.map(f => (
+            <tr key={f.name}>
+              <td><code>{f.name}</code></td>
+              <td>{f.type || 'string'}</td>
+              <td>{f.required ? '●' : ''}</td>
+              <td>{f.default === undefined ? '' : JSON.stringify(f.default)}</td>
+              <td>{f.description || ''}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/ActionRunner.jsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { DynamicForm } from '@xeplr/ui-schema-handler';
+
+/**
+ * "Try this action" playground. Pick an action, fill inputs, invoke, see result.
+ *
+ * Props:
+ *   actions        — [{name, description, inputSchema, outputSchema}]
+ *   onRun(name, input) => Promise<{status, output, error, durationMs}>
+ *                    Typically bound to actions.runAction from @xeplr/actions,
+ *                    or a network call if invoking on a remote scheduler.
+ *   initialAction  — optional action name to preselect
+ */
+export function ActionRunner({ actions = [], onRun, initialAction = null }) {
+  const [name, setName]     = React.useState(initialAction || (actions[0] && actions[0].name) || '');
+  const [input, setInput]   = React.useState({});
+  const [busy, setBusy]     = React.useState(false);
+  const [result, setResult] = React.useState(null);
+
+  // Reset input when switching actions.
+  React.useEffect(() => { setInput({}); setResult(null); }, [name]);
+
+  const action = actions.find(a => a.name === name);
+
+  const run = async () => {
+    if (!onRun) return;
+    setBusy(true); setResult(null);
+    try {
+      const r = await onRun(name, input);
+      setResult(r);
+    } catch (err) {
+      setResult({ status: 'failed', error: { name: err.name, message: err.message }, durationMs: 0 });
+    } finally { setBusy(false); }
+  };
+
+  return (
+    <div className="xeplr-ax-runner">
+      <div className="xeplr-ax-runner-row">
+        <label>
+          <span className="xeplr-ax-runner-lbl">Action</span>
+          <select
+            className="xeplr-ax-runner-select"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          >
+            {actions.map(a => <option key={a.name} value={a.name}>{a.name}</option>)}
+          </select>
+        </label>
+      </div>
+
+      {action && (
+        <>
+          {action.description && <div className="xeplr-ax-runner-desc">{action.description}</div>}
+
+          <div className="xeplr-ax-runner-form">
+            <div className="xeplr-ax-runner-lbl">Inputs</div>
+            <DynamicForm
+              schema={action.inputSchema || []}
+              value={input}
+              onChange={setInput}
+              disabled={busy}
+            />
+          </div>
+
+          <div className="xeplr-ax-runner-actions">
+            <button className="xeplr-ax-primary" onClick={run} disabled={busy}>
+              {busy ? 'Running…' : 'Run'}
+            </button>
+            <button onClick={() => { setInput({}); setResult(null); }} disabled={busy}>Reset</button>
+          </div>
+
+          {result && <ResultPanel result={result} />}
+        </>
+      )}
+    </div>
+  );
+}
+
+function ResultPanel({ result }) {
+  const cls = 'xeplr-ax-result xeplr-ax-result--' + result.status;
+  return (
+    <div className={cls}>
+      <div className="xeplr-ax-result-hd">
+        <span>{result.status === 'success' ? '✓' : '✗'} {result.status}</span>
+        {typeof result.durationMs === 'number' && (
+          <span className="xeplr-ax-result-dur">{result.durationMs}ms</span>
+        )}
+      </div>
+      {result.status === 'success' && (
+        <pre className="xeplr-ax-result-body">{safeJson(result.output)}</pre>
+      )}
+      {result.status !== 'success' && result.error && (
+        <>
+          <div className="xeplr-ax-result-err-title">{result.error.name || 'Error'}: {result.error.message}</div>
+          {Array.isArray(result.error.details) && result.error.details.length > 0 && (
+            <ul className="xeplr-ax-result-err-details">
+              {result.error.details.map((d, i) => <li key={i}>{d}</li>)}
+            </ul>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+function safeJson(v) {
+  try { return JSON.stringify(v, null, 2); } catch { return String(v); }
+}

package/src/index.js

@@ -0,0 +1,4 @@
+export { ActionExplorer } from './ActionExplorer.jsx';
+export { ActionRunner } from './ActionRunner.jsx';
+// styles.css opt-in:
+//   import '@xeplr/ui-actions/src/styles.css'

package/src/styles.css

@@ -0,0 +1,63 @@
+/* Prefix: xeplr-ax-* (Actions). All rules easy to override. */
+
+.xeplr-ax-explorer { display: flex; flex-direction: column; gap: 8px; }
+.xeplr-ax-empty { color: #999; font-style: italic; padding: 8px 0; }
+
+.xeplr-ax-card {
+  border: 1px solid #e0e0e0; border-radius: 6px; background: #fff;
+}
+.xeplr-ax-card--selected { border-color: #646cff; box-shadow: 0 0 0 2px rgba(100,108,255,0.15); }
+.xeplr-ax-card-hd {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 10px 12px; cursor: pointer; user-select: none;
+  font-family: system-ui, sans-serif;
+}
+.xeplr-ax-card-hd:hover { background: #f7f7f8; }
+.xeplr-ax-name { font-weight: 600; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
+.xeplr-ax-hint { color: #888; font-size: 12px; }
+.xeplr-ax-desc { padding: 0 12px 8px; color: #666; font-size: 12px; }
+.xeplr-ax-body { padding: 10px 12px 12px; border-top: 1px solid #eee; }
+
+.xeplr-ax-schema-title { font-size: 12px; font-weight: 600; color: #555; margin: 6px 0 4px; }
+.xeplr-ax-schema-empty { font-size: 12px; color: #999; margin: 4px 0; }
+.xeplr-ax-schema-tbl {
+  width: 100%; border-collapse: collapse; font-size: 12px; font-family: system-ui, sans-serif;
+}
+.xeplr-ax-schema-tbl th, .xeplr-ax-schema-tbl td {
+  border-bottom: 1px solid #f0f0f0; padding: 4px 6px; text-align: left; vertical-align: top;
+}
+.xeplr-ax-schema-tbl th { color: #666; font-weight: 600; }
+.xeplr-ax-schema-tbl code { background: #f4f4f6; padding: 1px 4px; border-radius: 3px; }
+
+/* Runner */
+.xeplr-ax-runner { display: flex; flex-direction: column; gap: 14px; font-family: system-ui, sans-serif; }
+.xeplr-ax-runner-lbl { font-size: 12px; font-weight: 600; color: #555; display: block; margin-bottom: 4px; }
+.xeplr-ax-runner-select {
+  padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px; font: inherit; min-width: 240px;
+}
+.xeplr-ax-runner-desc { color: #666; font-size: 12px; }
+.xeplr-ax-runner-form { }
+.xeplr-ax-runner-actions { display: flex; gap: 8px; }
+.xeplr-ax-runner-actions button {
+  padding: 8px 14px; border: 1px solid #ccc; background: #fff; border-radius: 4px; cursor: pointer; font: inherit;
+}
+.xeplr-ax-primary { background: #646cff; color: #fff; border-color: #646cff; }
+.xeplr-ax-primary:hover:not(:disabled) { background: #535bf2; }
+.xeplr-ax-primary:disabled { opacity: 0.6; cursor: not-allowed; }
+
+.xeplr-ax-result {
+  padding: 10px 12px; border-radius: 6px; margin-top: 4px;
+  font-family: system-ui, sans-serif; font-size: 13px;
+}
+.xeplr-ax-result--success { background: #e8f5e8; border: 1px solid #b6dfb6; color: #2d7d2d; }
+.xeplr-ax-result--failed  { background: #ffecec; border: 1px solid #f5c6c6; color: #c00; }
+.xeplr-ax-result--skipped { background: #fff4d6; border: 1px solid #e6c17d; color: #8a5a00; }
+.xeplr-ax-result-hd { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 6px; }
+.xeplr-ax-result-dur { font-weight: 400; opacity: 0.7; }
+.xeplr-ax-result-body {
+  background: rgba(255,255,255,0.7); padding: 8px; border-radius: 4px;
+  font-family: ui-monospace, Consolas, monospace; font-size: 12px;
+  margin: 0; overflow: auto; color: #222;
+}
+.xeplr-ax-result-err-title { font-weight: 600; }
+.xeplr-ax-result-err-details { margin: 4px 0 0 20px; padding: 0; }