sp2react 0.1.0__py3-none-any.whl

sp2react/scaffold/templates/frontend/src/components/sp/Tiles.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+
+export interface Tile {
+  id?: string;
+  label: string;
+  value: ReactNode;
+  alert?: boolean;
+}
+
+export function Tiles({ tiles, className = "db-tiles" }: { tiles: Tile[]; className?: string }) {
+  return (
+    <div className={className}>
+      {tiles.map((t, i) => (
+        <div key={t.id ?? i} id={t.id} className={`db-tile${t.alert ? " db-alert" : ""}`}>
+          <span className="db-count">{t.value}</span>
+          {t.label}
+        </div>
+      ))}
+    </div>
+  );
+}

sp2react/scaffold/templates/frontend/src/components/sp/fields.tsx

@@ -0,0 +1,132 @@
+// Field controls that render like SharePoint 2013/2016 list form controls.
+// `title` attributes match SharePoint's ("<Label>" / "<Label> Required Field") so parity tests can
+// use the same selectors the legacy jQuery used.
+import { useEffect, useRef, useState } from "react";
+import { api } from "../../api";
+import { formatValue } from "../../runtime/format";
+import type { Field } from "../../runtime/spec";
+
+export interface Option {
+  id: number;
+  title: string;
+  [k: string]: any;
+}
+
+interface Props {
+  field: Field;
+  value: any;
+  onChange: (v: any) => void;
+  onBlur?: () => void;
+  options?: Option[];
+  disabled?: boolean;
+  required?: boolean;
+}
+
+function PeoplePicker({ field, value, onChange, onBlur, disabled, required }: Props) {
+  const multi = !!field.multi;
+  const selected: any[] = multi ? (value ?? []) : value ? [value] : [];
+  const [text, setText] = useState("");
+  const [hits, setHits] = useState<any[]>([]);
+  const timer = useRef<number | undefined>(undefined);
+  useEffect(() => {
+    window.clearTimeout(timer.current);
+    if (text.trim().length < 2) { setHits([]); return; }
+    timer.current = window.setTimeout(() => { api.users(text.trim()).then(setHits).catch(() => setHits([])); }, 250);
+  }, [text]);
+  const pick = (u: any) => {
+    const v = { id: u.id, login: u.login, title: u.title };
+    onChange(multi ? [...selected.filter((s) => s.id !== u.id), v] : v);
+    setText("");
+    setHits([]);
+  };
+  return (
+    <div className={`sp-peoplepicker${disabled ? " is-disabled" : ""}`} title={`${field.label}${required ? " Required Field" : ""}`}>
+      {selected.map((s) => (
+        <span key={s.id} className="ms-entity-resolved">
+          {s.title}
+          {!disabled && <button type="button" aria-label={`Remove ${s.title}`} onClick={() => onChange(multi ? selected.filter((x) => x.id !== s.id) : null)}>×</button>}
+        </span>
+      ))}
+      {!disabled && (multi || selected.length === 0) && (
+        <input className="ms-inputuserfield" value={text} onChange={(e) => setText(e.target.value)} onBlur={onBlur}
+               placeholder="Enter a name or email address..." aria-label={field.label} />
+      )}
+      {hits.length > 0 && (
+        <ul className="sp-picker-hits" role="listbox">
+          {hits.map((h) => <li key={h.id} role="option" aria-selected={false} onMouseDown={() => pick(h)}>{h.title} <span className="sp-muted">{h.email}</span></li>)}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+export function FieldControl(props: Props) {
+  const { field, value, onChange, onBlur, options, disabled, required } = props;
+  const title = `${field.label}${required ? " Required Field" : ""}`;
+  const common = { title, disabled, onBlur, id: `fld-${field.name}`, name: field.name };
+  switch (field.type) {
+    case "note":
+      return <textarea {...common} className="ms-long" rows={field.lines ?? 6} value={value ?? ""} onChange={(e) => onChange(e.target.value)} />;
+    case "choice":
+      if (field.format === "radio")
+        return (
+          <span className="sp-radios" title={title}>
+            {(field.choices ?? []).map((c) => (
+              <label key={c}><input type="radio" name={field.name} disabled={disabled} checked={value === c} onChange={() => onChange(c)} /> {c}</label>
+            ))}
+          </span>
+        );
+      return (
+        <select {...common} value={value ?? ""} onChange={(e) => onChange(e.target.value || null)}>
+          {(!required || field.default === undefined) && <option value=""></option>}
+          {(field.choices ?? []).map((c) => <option key={c} value={c}>{c}</option>)}
+        </select>
+      );
+    case "multichoice": {
+      const vals: string[] = value ?? [];
+      return (
+        <span className="sp-checks" title={title}>
+          {(field.choices ?? []).map((c) => (
+            <label key={c}>
+              <input type="checkbox" disabled={disabled} checked={vals.includes(c)}
+                     onChange={(e) => onChange(e.target.checked ? [...vals, c] : vals.filter((x) => x !== c))} /> {c}
+            </label>
+          ))}
+        </span>
+      );
+    }
+    case "lookup": {
+      const id = value && typeof value === "object" ? value.id : value ?? "";
+      return (
+        <select {...common} value={id ?? ""} onChange={(e) => {
+          const o = (options ?? []).find((x) => String(x.id) === e.target.value);
+          onChange(o ? { id: o.id, title: o.title } : null);
+        }}>
+          {!required && <option value="">(None)</option>}
+          {required && !id && <option value=""></option>}
+          {(options ?? []).map((o) => <option key={o.id} value={o.id}>{o.title}</option>)}
+        </select>
+      );
+    }
+    case "user":
+      return <PeoplePicker {...props} />;
+    case "date":
+      return <input {...common} type="date" className="ms-input" value={value ?? ""} onChange={(e) => onChange(e.target.value || null)} />;
+    case "datetime":
+      return <input {...common} type="datetime-local" className="ms-input" value={value ? String(value).slice(0, 16) : ""} onChange={(e) => onChange(e.target.value || null)} />;
+    case "number":
+    case "currency":
+      return (
+        <span className="sp-number">
+          {field.type === "currency" && <span className="sp-currency">$</span>}
+          <input {...common} type="text" inputMode="decimal" className="ms-input" size={11} value={value ?? ""} onChange={(e) => onChange(e.target.value)} />
+        </span>
+      );
+    case "boolean":
+      return <input {...common} type="checkbox" checked={!!value} onChange={(e) => onChange(e.target.checked)} />;
+    case "calculated":
+      return <span>{formatValue(field, value)}</span>;
+    default:
+      return <input {...common} type="text" className="ms-long" maxLength={field.max_length} value={value ?? ""} onChange={(e) => onChange(e.target.value)} />;
+  }
+}

sp2react/scaffold/templates/frontend/src/custom/types.ts

@@ -0,0 +1,10 @@
+import type { Api } from "../api";
+import type { Ctx, RuleError } from "../runtime/rules";
+import type { Values } from "../runtime/spec";
+
+// Contract for agent-written behaviour that spec rules cannot express (rule kind "custom").
+export interface Handler {
+  onLoad?: (ctx: Ctx, api: Api) => void;
+  onChange?: (field: string, ctx: Ctx) => Values | void;
+  validate?: (ctx: Ctx) => RuleError[];
+}

sp2react/scaffold/templates/frontend/src/main.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from "./App";
+import "./styles/sp.css";
+import "./styles/legacy.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

sp2react/scaffold/templates/frontend/src/runtime/format.ts

@@ -0,0 +1,36 @@
+// SharePoint (en-US) display formats, so read-only values look the same as before.
+import type { Field } from "./spec";
+
+export function formatDate(v: unknown, withTime = false): string {
+  if (!v) return "";
+  const s = String(v);
+  const d = /^\d{4}-\d{2}-\d{2}$/.test(s) ? new Date(`${s}T00:00:00`) : new Date(s);
+  if (Number.isNaN(d.getTime())) return s;
+  const date = `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;
+  if (!withTime) return date;
+  let h = d.getHours();
+  const ap = h >= 12 ? "PM" : "AM";
+  h = h % 12 || 12;
+  return `${date} ${h}:${String(d.getMinutes()).padStart(2, "0")} ${ap}`;
+}
+
+export function formatCurrency(v: unknown): string {
+  if (v === null || v === undefined || v === "") return "";
+  const n = typeof v === "number" ? v : parseFloat(String(v).replace(/[$,]/g, ""));
+  return Number.isNaN(n) ? String(v) : n.toLocaleString("en-US", { style: "currency", currency: "USD" });
+}
+
+export function formatValue(f: Field | undefined, v: any): string {
+  if (v === null || v === undefined || v === "") return "";
+  if (Array.isArray(v)) return v.map((x) => formatValue(f, x)).join("; ");
+  if (typeof v === "object") return v.title ?? String(v.id ?? "");
+  if (!f) return String(v);
+  switch (f.type) {
+    case "boolean": return v ? "Yes" : "No";
+    case "currency": return formatCurrency(v);
+    case "number": return typeof v === "number" ? v.toLocaleString("en-US") : String(v);
+    case "date": return formatDate(v);
+    case "datetime": return formatDate(v, true);
+    default: return String(v);
+  }
+}

sp2react/scaffold/templates/frontend/src/runtime/rules.ts

@@ -0,0 +1,225 @@
+// Spec rule engine (browser side). Mirrors backend/app/rules.py; both run the same test vectors.
+import type { Condition, Field, Mode, Rule, User, Values } from "./spec";
+
+export const REQUIRED_MESSAGE = "You can't leave this blank.";
+
+export interface Ctx {
+  mode: Mode;
+  values: Values;
+  original?: Values;
+  user?: User | null;
+}
+
+export interface FieldState {
+  visible: boolean;
+  readonly: boolean;
+  required: boolean;
+  requiredRule?: Rule;
+}
+
+export interface RuleError {
+  field?: string | null;
+  message: string;
+  presentation: string;
+  rule: string;
+}
+
+export function isEmpty(v: unknown): boolean {
+  if (v === null || v === undefined || v === "") return true;
+  if (Array.isArray(v)) return v.length === 0;
+  if (typeof v === "object") {
+    const id = (v as { id?: unknown }).id;
+    return id === null || id === undefined || id === 0 || id === "";
+  }
+  return false;
+}
+
+function scalar(v: unknown, against?: unknown): unknown {
+  if (v !== null && typeof v === "object" && !Array.isArray(v)) {
+    const o = v as { id?: unknown; title?: unknown };
+    if (typeof against === "number") return o.id;
+    return "title" in o ? o.title : o.id;
+  }
+  return v;
+}
+
+function numOrDate(v: unknown): unknown {
+  if (typeof v === "string" && /^\s*\$?-?[\d,]+(\.\d+)?\s*$/.test(v)) return parseFloat(v.replace(/[$,]/g, ""));
+  return v;
+}
+
+function cmp(a0: unknown, op: string, b0: unknown): boolean {
+  const a = numOrDate(scalar(a0, b0)) as number | string | boolean | null | undefined;
+  const b = numOrDate(b0) as number | string | boolean | null | undefined;
+  if (op === "eq") return a === b;
+  if (op === "ne") return a !== b;
+  if (a === null || a === undefined || b === null || b === undefined || a === "") return false;
+  if (typeof a !== typeof b) return false;
+  if (op === "gt") return a > b;
+  if (op === "gte") return a >= b;
+  if (op === "lt") return a < b;
+  if (op === "lte") return a <= b;
+  throw new Error(`unknown operator ${op}`);
+}
+
+export function getValue(values: Values, path: string): unknown {
+  const [head, rest] = path.includes(".") ? [path.slice(0, path.indexOf(".")), path.slice(path.indexOf(".") + 1)] : [path, ""];
+  const v = values[head];
+  if (rest && v && typeof v === "object") {
+    const o = v as Record<string, unknown>;
+    return rest in o ? o[rest] : o[rest.toLowerCase()];
+  }
+  return v;
+}
+
+export function evaluate(cond: Condition | null | undefined, ctx: Ctx): boolean {
+  if (!cond) return true;
+  const c = cond as Record<string, any>;
+  if ("all" in c) return (c.all as Condition[]).every((x) => evaluate(x, ctx));
+  if ("any" in c) return (c.any as Condition[]).some((x) => evaluate(x, ctx));
+  if ("not" in c) return !evaluate(c.not as Condition, ctx);
+  if ("role" in c) return (ctx.user?.groups ?? []).includes(c.role);
+  if ("mode" in c) return (Array.isArray(c.mode) ? c.mode : [c.mode]).includes(ctx.mode);
+  if ("field" in c) {
+    const v = getValue(ctx.values ?? {}, c.field);
+    let result = true;
+    for (const [op, arg] of Object.entries(c)) {
+      if (op === "field") continue;
+      let ok: boolean;
+      if (op === "empty") ok = isEmpty(v) === Boolean(arg);
+      else if (op === "notEmpty") ok = !isEmpty(v) === Boolean(arg);
+      else if (op === "changed") ok = (scalar(v) !== scalar(getValue(ctx.original ?? {}, c.field))) === Boolean(arg);
+      else if (op === "in") ok = (arg as unknown[]).includes(scalar(v, (arg as unknown[])[0]));
+      else if (op === "nin") ok = !(arg as unknown[]).includes(scalar(v, (arg as unknown[])[0]));
+      else ok = cmp(v, op, arg);
+      result = result && ok;
+    }
+    return result;
+  }
+  throw new Error(`unknown condition ${JSON.stringify(cond)}`);
+}
+
+export const applies = (r: Rule, mode: Mode) => !r.modes || r.modes.length === 0 || r.modes.includes(mode);
+
+export function rulesFor(rules: Rule[], kind: string, field: string | null, mode: Mode): Rule[] {
+  return rules.filter((r) => r.kind === kind && (field === null || r.field === field) && applies(r, mode));
+}
+
+export function fieldState(field: Field, rules: Rule[], ctx: Ctx): FieldState {
+  const name = field.name;
+  const mode = ctx.mode;
+  // visible rules: those for this mode must all hold; a field whose visible rules are all scoped to
+  // other modes is hidden in this one (e.g. Status shown only on edit/display)
+  const allVis = rules.filter((r) => r.kind === "visible" && r.field === name);
+  const visRules = allVis.filter((r) => applies(r, mode));
+  let visible = visRules.length ? visRules.every((r) => evaluate(r.when, ctx)) : !allVis.length || !allVis.every((r) => r.modes && r.modes.length);
+  if (field.type === "calculated" && mode !== "display") visible = false;
+  const readonly = mode === "display" || Boolean(field.read_only) || rulesFor(rules, "readonly", name, mode).some((r) => evaluate(r.when, ctx));
+  const required = Boolean(field.required) && mode !== "display" && !readonly;
+  const requiredRule = rulesFor(rules, "required", name, mode).find((r) => evaluate(r.when, ctx));
+  return { visible, readonly, required: required || (requiredRule !== undefined && visible), requiredRule };
+}
+
+export function resolveToken(token: unknown, user: User | null | undefined, today?: string): unknown {
+  if (token === "@me") return user ? { id: user.id, login: user.login, title: user.title } : null;
+  if (token === "@today") return today ?? new Date().toLocaleDateString("en-CA");
+  return token;
+}
+
+export function defaults(fields: Field[], rules: Rule[], user: User | null | undefined, today?: string): Values {
+  const out: Values = {};
+  for (const f of fields) if (f.default !== undefined) out[f.name] = resolveToken(f.default, user, today);
+  for (const r of rulesFor(rules, "default", null, "new")) out[r.field as string] = resolveToken(r.params?.value, user, today);
+  return out;
+}
+
+export function fillTemplate(text: string, values: Values): string {
+  return (text ?? "").replace(/\{([\w.]+)(?:\|(lower|upper))?\}/g, (_m: string, path: string, filter?: string) => {
+    const v = scalar(getValue(values, path));
+    if (v === null || v === undefined) return "";
+    const out = String(v);
+    return filter === "lower" ? out.toLowerCase() : filter === "upper" ? out.toUpperCase() : out;
+  });
+}
+
+export function validate(fields: Field[], rules: Rule[], ctx: Ctx): RuleError[] {
+  const errors: RuleError[] = [];
+  const values = ctx.values ?? {};
+  const mode = ctx.mode;
+  const states: Record<string, FieldState> = {};
+  for (const f of fields) states[f.name] = fieldState(f, rules, ctx);
+
+  for (const f of fields) {
+    const st = states[f.name];
+    const v = values[f.name];
+    if (!st.visible || st.readonly) continue;
+    if (f.required && isEmpty(v)) {
+      errors.push({ field: f.name, message: REQUIRED_MESSAGE, presentation: "inline", rule: "schema" });
+      continue;
+    }
+    if (isEmpty(v)) continue;
+    if (f.max_length && typeof v === "string" && v.length > f.max_length)
+      errors.push({ field: f.name, message: `The value of this field may not contain more than ${f.max_length} characters.`, presentation: "inline", rule: "schema" });
+    if (f.type === "number" || f.type === "currency") {
+      const n = numOrDate(v);
+      if (typeof n !== "number" || Number.isNaN(n)) errors.push({ field: f.name, message: "The value of this field must be a number.", presentation: "inline", rule: "schema" });
+      else {
+        if (f.min !== undefined && n < f.min) errors.push({ field: f.name, message: `The value of this field must be greater than or equal to ${f.min}.`, presentation: "inline", rule: "schema" });
+        if (f.max !== undefined && n > f.max) errors.push({ field: f.name, message: `The value of this field must be less than or equal to ${f.max}.`, presentation: "inline", rule: "schema" });
+      }
+    }
+    if (f.type === "choice" && f.choices && f.choices.length && !f.fill_in && !f.choices.includes(v as string))
+      errors.push({ field: f.name, message: "Select a valid value.", presentation: "inline", rule: "schema" });
+  }
+
+  for (const r of rules) {
+    if (!applies(r, mode) || mode === "display") continue;
+    const fname = r.field ?? null;
+    const st = fname ? states[fname] : undefined;
+    if (st && (!st.visible || st.readonly) && r.kind !== "lock_item") continue;
+    if (r.when && !evaluate(r.when, ctx)) continue;
+    const v = fname ? values[fname] : undefined;
+    const p = (r.params ?? {}) as Record<string, any>;
+    let failed = false;
+    if (r.kind === "required") failed = isEmpty(v);
+    else if (r.kind === "compare") {
+      const other = values[p.other];
+      failed = isEmpty(v) || isEmpty(other) ? false : !cmp(v, p.op, scalar(other));
+    } else if (r.kind === "length") failed = !(p.allow_empty && isEmpty(v)) && !cmp(String(v ?? "").length, p.op, p.value);
+    else if (r.kind === "range") failed = !isEmpty(v) && !cmp(v, p.op, p.value);
+    else if (r.kind === "pattern") failed = !isEmpty(v) && !new RegExp(`^(?:${p.regex})$`).test(String(v));
+    if (failed) errors.push({ field: fname, message: fillTemplate(r.message ?? REQUIRED_MESSAGE, values), presentation: r.presentation ?? "inline", rule: r.id });
+  }
+  const seen = new Set<string>();
+  return errors.filter((e) => {
+    const key = e.field ? `${e.field}|${e.presentation}` : e.rule;
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}
+
+export function lock(rules: Rule[], ctx: Ctx): Rule | undefined {
+  return rulesFor(rules, "lock_item", null, ctx.mode).find((r) => evaluate(r.when, ctx));
+}
+
+export function setOnSave(rules: Rule[], ctx: Ctx): Values {
+  const out: Values = {};
+  for (const r of rulesFor(rules, "set_on_save", null, ctx.mode)) if (evaluate(r.when, ctx)) out[r.field as string] = resolveToken(r.params?.value, ctx.user);
+  return out;
+}
+
+export function banners(rules: Rule[], ctx: Ctx): Rule[] {
+  return rulesFor(rules, "banner", null, ctx.mode).filter((r) => evaluate(r.when, ctx));
+}
+
+// Fields hidden by a visible rule with params.clear lose their value (legacy: hide row + .val("")).
+export function clearHidden(fields: Field[], rules: Rule[], ctx: Ctx): Values {
+  const out: Values = {};
+  if (ctx.mode === "display") return out;
+  for (const f of fields) {
+    const clears = rules.some((r) => r.kind === "visible" && r.field === f.name && r.params?.clear);
+    if (clears && !fieldState(f, rules, ctx).visible && !isEmpty(ctx.values?.[f.name])) out[f.name] = null;
+  }
+  return out;
+}

sp2react/scaffold/templates/frontend/src/runtime/spec.ts

@@ -0,0 +1,102 @@
+// Types of the screen spec produced by sp2react (see sp2react/spec/model.py).
+export type Mode = "new" | "edit" | "display";
+export type Values = Record<string, any>;
+
+export type Condition =
+  | { all: Condition[] }
+  | { any: Condition[] }
+  | { not: Condition }
+  | { role: string }
+  | { mode: Mode | Mode[] }
+  | ({ field: string } & Partial<Record<"eq" | "ne" | "gt" | "gte" | "lt" | "lte", unknown>> &
+      Partial<Record<"in" | "nin", unknown[]>> & Partial<Record<"empty" | "notEmpty" | "changed", boolean>>);
+
+export interface Field {
+  name: string;
+  label: string;
+  type: "text" | "note" | "choice" | "multichoice" | "lookup" | "user" | "date" | "datetime" | "number" | "currency" | "boolean" | "url" | "calculated" | "taxonomy";
+  required?: boolean;
+  description?: string;
+  max_length?: number;
+  choices?: string[];
+  format?: "dropdown" | "radio" | "checkboxes";
+  fill_in?: boolean;
+  lookup?: { list: string; field: string };
+  multi?: boolean;
+  min?: number;
+  max?: number;
+  lines?: number;
+  read_only?: boolean;
+  default?: unknown;
+}
+
+export interface Rule {
+  id: string;
+  kind: string;
+  field?: string | null;
+  list?: string | null;
+  modes?: Mode[];
+  when?: Condition | null;
+  message?: string | null;
+  presentation?: "inline" | "alert" | "banner" | "confirm";
+  params?: Record<string, any>;
+}
+
+export interface Endpoint {
+  id: string;
+  method: string;
+  path: string;
+  purpose: string;
+  list?: string | null;
+  query?: Record<string, any>;
+  roles?: string[];
+}
+
+export interface Component {
+  id: string;
+  kind: "form" | "tiles" | "table" | "list_view" | "banner" | "html" | "actions" | "custom";
+  title?: string | null;
+  region?: string | null;
+  order?: number;
+  data?: string[];
+  props?: Record<string, any>;
+  roles?: string[];
+}
+
+export interface ListSpec {
+  title: string;
+  primary?: boolean;
+  fields: Field[];
+  attachments?: boolean;
+  views?: Record<string, { fields: string[]; title?: string; rowLimit?: number }>;
+}
+
+export interface Spec {
+  version: number;
+  screen: {
+    id: string;
+    kind: "list-form" | "page";
+    title: string;
+    route: string;
+    legacy_urls: string[];
+    list?: string | null;
+    modes: Mode[];
+    components: Component[];
+  };
+  lists: Record<string, ListSpec>;
+  rules: Rule[];
+  endpoints: Endpoint[];
+  roles: string[];
+}
+
+export interface User {
+  id: number;
+  login: string;
+  title: string;
+  email?: string;
+  groups: string[];
+}
+
+export function rulesForList(spec: Spec, list: string): Rule[] {
+  return spec.rules.filter((r) => (r.list ?? spec.screen.list) === list);
+}

sp2react/scaffold/templates/frontend/src/runtime/user.tsx

@@ -0,0 +1,21 @@
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+import { api } from "../api";
+import type { User } from "./spec";
+
+const Ctx = createContext<{ user: User | null; error: string | null; reload: () => void }>({ user: null, error: null, reload: () => {} });
+
+export function UserProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [n, setN] = useState(0);
+  useEffect(() => {
+    api.me().then((u) => { setUser(u); setError(null); }).catch((e) => setError(e.message));
+  }, [n]);
+  return <Ctx.Provider value={{ user, error, reload: () => setN((x) => x + 1) }}>{children}</Ctx.Provider>;
+}
+
+export const useUser = () => useContext(Ctx);
+
+export function inGroup(user: User | null, group: string): boolean {
+  return !!user && user.groups.includes(group);
+}

sp2react/scaffold/templates/frontend/src/screens/LegacyRedirect.tsx

@@ -0,0 +1,27 @@
+// Old SharePoint URLs (bookmarks, emails, links in other sites) keep working:
+// /sites/x/Lists/Y/EditForm.aspx?ID=3&Source=... -> /lists/y/edit/3?Source=...
+import { Navigate, useLocation } from "react-router-dom";
+import type { Spec } from "../runtime/spec";
+
+export function LegacyRedirect({ specs }: { specs: Spec[] }) {
+  const loc = useLocation();
+  const path = decodeURIComponent(loc.pathname).toLowerCase();
+  const q = new URLSearchParams(loc.search);
+  for (const s of specs) {
+    for (const u of s.screen.legacy_urls) {
+      if (u.toLowerCase() !== path) continue;
+      const file = u.split("/").pop()!.toLowerCase();
+      const id = q.get("ID") ?? q.get("id");
+      const src = q.get("Source");
+      const keep = src ? `?Source=${encodeURIComponent(src.replace(/^https?:\/\/[^/]+/, ""))}` : "";
+      if (s.screen.kind === "list-form") {
+        if (file.startsWith("newform")) return <Navigate replace to={`${s.screen.route}/new${keep}`} />;
+        if (file.startsWith("editform") && id) return <Navigate replace to={`${s.screen.route}/edit/${id}${keep}`} />;
+        if (file.startsWith("dispform") && id) return <Navigate replace to={`${s.screen.route}/display/${id}${keep}`} />;
+        return <Navigate replace to={s.screen.route} />;
+      }
+      return <Navigate replace to={s.screen.route} />;
+    }
+  }
+  return <div className="sp-content"><h2>404 NOT FOUND</h2><p>Sorry, something went wrong. The page {loc.pathname} does not exist.</p></div>;
+}

sp2react/scaffold/templates/frontend/src/screens/ListFormScreen.tsx

@@ -0,0 +1,33 @@
+// Routes for one list's forms: AllItems, NewForm, EditForm, DispForm.
+import { Route, Routes, useParams } from "react-router-dom";
+import { Layout } from "../components/sp/Layout";
+import { ListForm } from "../components/sp/Form";
+import { ListView } from "../components/sp/ListView";
+import type { Mode, Spec } from "../runtime/spec";
+
+function FormRoute({ spec, mode }: { spec: Spec; mode: Mode }) {
+  const { id } = useParams();
+  const list = spec.lists[spec.screen.list as string];
+  const suffix = mode === "new" ? "New Item" : list.title;
+  return (
+    <Layout title={mode === "new" ? `${list.title} - ${suffix}` : list.title}>
+      <ListForm key={`${mode}-${id ?? ""}`} spec={spec} mode={mode} id={id} />
+    </Layout>
+  );
+}
+
+export function ListFormScreen({ spec }: { spec: Spec }) {
+  const listName = spec.screen.list as string;
+  const list = spec.lists[listName];
+  const views = list.views ?? {};
+  const v = views.AllItems ?? Object.values(views)[0];
+  const view = { fields: v?.fields?.length ? v.fields : list.fields.slice(0, 6).map((f) => f.name), orderby: "ID desc", top: v?.rowLimit ?? 30 };
+  return (
+    <Routes>
+      <Route index element={<Layout title={list.title}><ListView list={listName} fields={list.fields} view={view} route={spec.screen.route} /></Layout>} />
+      {spec.screen.modes.includes("new") && <Route path="new" element={<FormRoute spec={spec} mode="new" />} />}
+      {spec.screen.modes.includes("edit") && <Route path="edit/:id" element={<FormRoute spec={spec} mode="edit" />} />}
+      {spec.screen.modes.includes("display") && <Route path="display/:id" element={<FormRoute spec={spec} mode="display" />} />}
+    </Routes>
+  );
+}