@acellera/pm-rjsf 0.0.1

package/README.md

@@ -0,0 +1,58 @@
+# @acellera/pm-rjsf
+
+The shared RJSF (Material-UI) renderer for **PlayMolecule v2 manifests** — the
+JSON Schema (`inputSchema`) + `uiSchema` produced by
+[`pmmanifest`](https://github.com/Acellera/pmmanifest). One implementation,
+consumed by both **pmview** and the **pmmanifest dev preview**, so they render
+identically.
+
+## Why a separate package
+
+The canonical `inputSchema` stays a faithful Pydantic JSON Schema (it's what the
+backend stages files against, what the SDK reconstructs signatures from, and
+what input validation uses). The RJSF-specific *presentation* lives here:
+
+- **AJV 2020 validator** (Pydantic emits 2020-12; RJSF's default is draft-07).
+- **Render-time transforms** (`prepareForRjsf`): collapse `Optional` (`anyOf[X, null]`)
+  to a clean field, label discriminated-`oneOf` options from the discriminator,
+  and strip platform-managed dirs (`outdir`/`scratchdir`/`execdir`).
+- **MUI templates**: grouped accordions (`ui:options.group`), flat arrays,
+  `additionalProperties` maps with custom key labels (`ui:options.keyLabel`),
+  `?`-tooltip descriptions, small field titles, hidden discriminators.
+
+These are **presentation only** — never mutate the canonical schema with them.
+
+## Use in pmview (Vite)
+
+```bash
+npm install @acellera/pm-rjsf
+```
+
+```tsx
+import { PMForm } from "@acellera/pm-rjsf";
+
+// For a v2 manifest function entry { inputSchema, uiSchema }:
+<PMForm schema={fn.inputSchema} uiSchema={fn.uiSchema} onSubmit={({ formData }) => run(formData)} />
+```
+
+(pmview keeps its existing bespoke renderer for v1 manifests; this is used only
+when `manifestVersion === 2` / an `inputSchema` is present.)
+
+## Use in the pmmanifest preview (no build step)
+
+Once published, the preview imports it from a CDN like its other deps:
+
+```js
+import { PMForm } from "https://esm.sh/@acellera/pm-rjsf";
+root.render(React.createElement(PMForm, { schema, uiSchema, onSubmit }));
+```
+
+## Build
+
+```bash
+npm install
+npm run build   # -> dist/pm-rjsf.js (ESM)
+```
+
+React, react-dom, MUI and emotion are **peer dependencies** (the consumer
+provides them); `@rjsf/*` and `ajv` are bundled-as-dependencies.

package/dist/pm-rjsf.js

@@ -0,0 +1,284 @@
+import p from "react";
+import T from "@rjsf/mui";
+import { customizeValidator as v } from "@rjsf/validator-ajv8";
+import A from "ajv/dist/2020";
+import { canExpand as F, ADDITIONAL_PROPERTY_FLAG as j } from "@rjsf/utils";
+function O() {
+  return v({
+    AjvClass: A,
+    customFormats: { path: () => !0 },
+    ajvOptionsOverrides: { strict: !1 }
+  });
+}
+const h = ["outdir", "scratchdir", "execdir"];
+function C(e) {
+  if (!e || !e.properties) return e;
+  const r = { ...e.properties };
+  for (const t of h) delete r[t];
+  const n = (e.required || []).filter((t) => !h.includes(t));
+  return { ...e, properties: r, required: n };
+}
+function s(e) {
+  if (Array.isArray(e)) return e.map(s);
+  if (e && typeof e == "object") {
+    if (Array.isArray(e.anyOf)) {
+      const n = e.anyOf.filter((t) => !(t && t.type === "null"));
+      if (n.length === 1) {
+        const { anyOf: t, ...a } = e;
+        return s({ ...n[0], ...a });
+      }
+      e = { ...e, anyOf: n };
+    }
+    if (Array.isArray(e.oneOf) && e.discriminator && e.discriminator.mapping) {
+      const n = {};
+      for (const [t, a] of Object.entries(e.discriminator.mapping))
+        n[a.split("/").pop()] = t;
+      e = {
+        ...e,
+        oneOf: e.oneOf.map((t) => {
+          const a = t && t.$ref ? t.$ref.split("/").pop() : null;
+          return a && n[a] && !t.title ? { ...t, title: n[a] } : t;
+        })
+      };
+    }
+    const r = {};
+    for (const [n, t] of Object.entries(e)) r[n] = s(t);
+    return r;
+  }
+  return e;
+}
+function B(e) {
+  return s(C(e));
+}
+const i = p.createElement;
+function I(e) {
+  const r = e.uiSchema || {}, n = e.registry.templates, t = [], a = /* @__PURE__ */ new Map();
+  for (const l of e.properties) {
+    const c = r[l.name] && r[l.name]["ui:options"] && r[l.name]["ui:options"].group;
+    c ? (a.get(c) || a.set(c, []).get(c)).push(l) : t.push(l);
+  }
+  const d = [];
+  e.title && d.push(
+    i(n.TitleFieldTemplate, {
+      key: "__title",
+      id: e.idSchema.$id + "__title",
+      title: e.title,
+      required: e.required,
+      schema: e.schema,
+      uiSchema: e.uiSchema,
+      registry: e.registry
+    })
+  ), e.description && d.push(
+    i(n.DescriptionFieldTemplate, {
+      key: "__desc",
+      id: e.idSchema.$id + "__description",
+      description: e.description,
+      schema: e.schema,
+      uiSchema: e.uiSchema,
+      registry: e.registry
+    })
+  );
+  for (const l of t)
+    d.push(i("div", { key: l.name, className: "pm-field" }, l.content));
+  for (const [l, c] of a)
+    d.push(
+      i(
+        "details",
+        { key: l, className: "pm-group" },
+        i("summary", null, l),
+        i(
+          "div",
+          { className: "pm-body" },
+          c.map((m) => i("div", { key: m.name, className: "pm-field" }, m.content))
+        )
+      )
+    );
+  return F(e.schema, e.uiSchema, e.formData) && d.push(
+    i(n.ButtonTemplates.AddButton, {
+      key: "__add",
+      className: "object-property-expand",
+      onClick: e.onAddClick(e.schema),
+      disabled: e.disabled || e.readonly,
+      uiSchema: e.uiSchema,
+      registry: e.registry
+    })
+  ), i("div", null, d);
+}
+function R(e) {
+  const {
+    children: r,
+    classNames: n,
+    style: t,
+    disabled: a,
+    id: d,
+    label: l,
+    onKeyChange: c,
+    onDropPropertyClick: m,
+    readonly: u,
+    schema: b,
+    uiSchema: o,
+    registry: f
+  } = e;
+  if (!(j in b))
+    return i("div", { className: n, style: t }, r);
+  const S = f.templates.ButtonTemplates.RemoveButton, k = o && o["ui:options"] && o["ui:options"].keyLabel || l + " Key", y = d + "-key", _ = {
+    width: "100%",
+    padding: ".5rem",
+    border: "1px solid #ccc",
+    borderRadius: "4px",
+    font: "inherit",
+    boxSizing: "border-box"
+  };
+  return i(
+    "div",
+    { style: { display: "flex", gap: "1rem", alignItems: "flex-start", marginBottom: ".75rem" } },
+    i(
+      "div",
+      { style: { flex: "0 0 30%" } },
+      i("label", { htmlFor: y, style: { display: "block", marginBottom: ".25rem" } }, k),
+      i("input", {
+        id: y,
+        type: "text",
+        defaultValue: l,
+        disabled: a || u,
+        style: _,
+        onBlur: (x) => c(x.target.value)
+      })
+    ),
+    i("div", { style: { flex: "1 1 auto" } }, r),
+    i(
+      "div",
+      { style: { flex: "0 0 auto", paddingTop: "1.6rem" } },
+      i(S, {
+        disabled: a || u,
+        onClick: m(l),
+        uiSchema: o,
+        registry: f
+      })
+    )
+  );
+}
+function D(e) {
+  const r = e.schema && e.schema.description || (typeof e.description == "string" ? e.description : "");
+  if (!r) return null;
+  const n = String(r);
+  return i(
+    "span",
+    {
+      title: n,
+      "aria-label": n,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "18px",
+        height: "18px",
+        borderRadius: "50%",
+        border: "1px solid #999",
+        color: "#666",
+        fontSize: "12px",
+        lineHeight: 1,
+        cursor: "help",
+        marginLeft: "6px",
+        verticalAlign: "middle"
+      }
+    },
+    "?"
+  );
+}
+function N(e) {
+  return e.title ? i(
+    "div",
+    { style: { fontSize: ".9rem", fontWeight: 600, margin: ".4rem 0 .3rem" } },
+    e.title,
+    e.required ? i("span", { style: { color: "#b00" } }, " *") : null
+  ) : null;
+}
+function w(e) {
+  const r = e.registry.templates, n = r.ArrayFieldItemTemplate, t = e.uiSchema && e.uiSchema["ui:title"] || e.title, a = [];
+  t && a.push(
+    i(r.TitleFieldTemplate, {
+      key: "__t",
+      id: e.idSchema.$id + "__title",
+      title: t,
+      required: e.required,
+      schema: e.schema,
+      uiSchema: e.uiSchema,
+      registry: e.registry
+    })
+  );
+  const d = e.schema && e.schema.description;
+  return d && a.push(
+    i(r.DescriptionFieldTemplate, {
+      key: "__d",
+      id: e.idSchema.$id + "__description",
+      description: d,
+      schema: e.schema,
+      uiSchema: e.uiSchema,
+      registry: e.registry
+    })
+  ), (e.items || []).forEach(
+    ({ key: l, ...c }) => a.push(i(n, { key: l, ...c }))
+  ), e.canAdd && a.push(
+    i(r.ButtonTemplates.AddButton, {
+      key: "__add",
+      onClick: e.onAddClick,
+      disabled: e.disabled || e.readonly,
+      uiSchema: e.uiSchema,
+      registry: e.registry
+    })
+  ), i("div", null, a);
+}
+const q = {
+  ObjectFieldTemplate: I,
+  WrapIfAdditionalTemplate: R,
+  DescriptionFieldTemplate: D,
+  TitleFieldTemplate: N,
+  ArrayFieldTemplate: w
+}, E = `
+.pm-field { margin: .5rem 0; }
+details.pm-group { border: 1px solid #e0e0e0; border-radius: 4px; margin: .75rem 0; }
+details.pm-group > summary {
+  list-style: none; cursor: pointer; padding: .6rem .9rem; font-size: .9rem;
+  font-weight: 600; display: flex; justify-content: space-between; align-items: center;
+}
+details.pm-group > summary::-webkit-details-marker { display: none; }
+details.pm-group > summary::after { content: "\\25be"; color: #888; font-weight: 400; }
+details.pm-group[open] > summary::after { content: "\\25b4"; }
+details.pm-group > .pm-body { padding: .25rem .9rem .6rem; }
+`;
+let g = !1;
+function L() {
+  if (g || typeof document > "u") return;
+  g = !0;
+  const e = document.createElement("style");
+  e.setAttribute("data-pm-rjsf", ""), e.textContent = E, document.head.appendChild(e);
+}
+const P = O();
+function K({ schema: e, uiSchema: r, ...n }) {
+  L();
+  const t = B(e);
+  return p.createElement(T, {
+    schema: t,
+    uiSchema: r,
+    validator: P,
+    templates: q,
+    ...n
+  });
+}
+export {
+  w as ArrayFieldTemplate,
+  D as DescriptionFieldTemplate,
+  I as GroupedObjectFieldTemplate,
+  K as PMForm,
+  E as PM_RJSF_CSS,
+  h as SPECIAL_DIRS,
+  N as TitleFieldTemplate,
+  R as WrapIfAdditionalTemplate,
+  L as injectStyles,
+  O as makeValidator,
+  B as prepareForRjsf,
+  s as simplify,
+  C as stripSpecialDirs,
+  q as templates
+};

package/index.d.ts

@@ -0,0 +1,36 @@
+import type { ComponentType } from "react";
+
+export interface PMFormProps {
+  /** Canonical inputSchema (JSON Schema 2020-12, as emitted by pmmanifest). */
+  schema: Record<string, unknown>;
+  /** uiSchema (RJSF), as emitted by pmmanifest. */
+  uiSchema?: Record<string, unknown>;
+  /** Called with { formData } on submit. */
+  onSubmit?: (data: { formData: unknown }) => void;
+  formData?: unknown;
+  disabled?: boolean;
+  readonly?: boolean;
+  [key: string]: unknown;
+}
+
+/** Drop-in RJSF (MUI) form for a PlayMolecule v2 manifest function entry. */
+export const PMForm: ComponentType<PMFormProps>;
+
+/** Build the AJV-2020 validator used by PMForm (Pydantic emits 2020-12). */
+export function makeValidator(): unknown;
+
+/** Render-time schema prep: strip platform dirs + collapse Optional anyOf + title oneOf options. */
+export function prepareForRjsf<T>(schema: T): T;
+export function simplify<T>(schema: T): T;
+export function stripSpecialDirs<T>(schema: T): T;
+export const SPECIAL_DIRS: string[];
+
+export const templates: Record<string, ComponentType<any>>;
+export const GroupedObjectFieldTemplate: ComponentType<any>;
+export const WrapIfAdditionalTemplate: ComponentType<any>;
+export const DescriptionFieldTemplate: ComponentType<any>;
+export const TitleFieldTemplate: ComponentType<any>;
+export const ArrayFieldTemplate: ComponentType<any>;
+
+export const PM_RJSF_CSS: string;
+export function injectStyles(): void;

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@acellera/pm-rjsf",
+  "version": "0.0.1",
+  "description": "Shared RJSF renderer for PlayMolecule v2 (JSON Schema) manifests — used by pmview and the pmmanifest preview.",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Acellera/pm-rjsf.git"
+  },
+  "files": [
+    "dist",
+    "index.d.ts"
+  ],
+  "main": "./dist/pm-rjsf.js",
+  "module": "./dist/pm-rjsf.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./dist/pm-rjsf.js"
+    }
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch"
+  },
+  "dependencies": {
+    "@rjsf/core": "^5",
+    "@rjsf/mui": "^5",
+    "@rjsf/utils": "^5",
+    "@rjsf/validator-ajv8": "^5",
+    "ajv": "^8.12.0"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "@mui/icons-material": "^5",
+    "@mui/material": "^5",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "vite": "^7"
+  }
+}