@cisri/json-schema-form 1.0.0

package/README.md

@@ -0,0 +1,58 @@
+# @cisri/json-schema-form
+
+A schema-driven JSON data form based on shadcn/ui (RJSF-style uiSchema). Given a `JsonSchema` (+ optional `uiSchema`), renders an editable form and emits JSON data via `onChange`.
+
+> 与 `@cisri/json-schema-editor`（编辑 schema 结构）不同，本组件的输入是 schema，产出是 **JSON 数据**。
+
+## 安装
+
+```bash
+npm install @cisri/json-schema-form
+```
+
+## Peer Dependencies
+
+```bash
+npm install react react-dom lucide-react
+```
+
+Radix/cva/clsx/tailwind-merge 由 `@cisri/shadcn` 与 `@cisri/core` 间接 peer（按其说明安装）。
+
+## 使用
+
+```tsx
+import { useState } from 'react';
+import { JsonSchemaForm } from '@cisri/json-schema-form';
+
+export default function App() {
+  const [data, setData] = useState({ name: '', age: 0 });
+  const schema = {
+    type: 'object',
+    properties: { name: { type: 'string', title: 'Name' }, age: { type: 'integer', title: 'Age' } },
+    required: ['name'],
+  };
+  return <JsonSchemaForm schema={schema} value={data} onChange={setData} />;
+}
+```
+
+## uiSchema
+
+可选 `uiSchema` prop（RJSF 风格 `ui:*` 键，来自 `@cisri/json-schema-ui-core`）控制每个字段的 widget/label/help/placeholder/order/hidden/disabled/readonly/classNames 等。缺省时用 `generateDefaultUiSchema(schema)`。
+
+## Tailwind 配置
+
+```ts
+content: [
+  './node_modules/@cisri/*/dist/**/*.{js,cjs}',
+];
+```
+
+## CSS 变量
+
+使用 shadcn/ui 标准 CSS 变量，可通过覆盖 `:root` 自定义主题。
+
+## 自定义样式
+
+```tsx
+<JsonSchemaForm schema={schema} value={data} onChange={setData} className="w-full max-w-2xl" />
+```

package/dist/form-utils.d.ts

@@ -0,0 +1,3 @@
+import type { JsonSchema } from '@cisri/json-schema-core';
+export declare function validateForm(schema: JsonSchema, value: unknown): string[];
+//# sourceMappingURL=form-utils.d.ts.map

package/dist/form-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-utils.d.ts","sourceRoot":"","sources":["../src/form-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D,wBAAgB,YAAY,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,EAAE,CAYzE"}

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),O=require("react"),u=require("@cisri/shadcn"),N=require("@cisri/core"),P=require("@cisri/json-schema-ui-core");function R(s,t){const r=[];if(s.type==="object"&&s.properties){const x=new Set(s.required??[]),n=t??{};for(const d of Object.keys(s.properties))x.has(d)&&(n[d]==null||n[d]==="")&&r.push(`${d} is required`)}return r}function V(s){if(s.enum)return"select";switch(s.type){case"number":case"integer":return"updown";case"boolean":return"checkbox";case"string":default:return"text"}}function C({schema:s,uiSchema:t,path:r,value:x,onChange:n,readOnly:d,required:f,renderFieldActions:l}){const a=(t==null?void 0:t["ui:widget"])??V(s);if((t==null?void 0:t["ui:hidden"])===!0||a==="hidden")return null;const p=(t==null?void 0:t["ui:label"])===!1?null:(t==null?void 0:t["ui:label"])??s.title??r[r.length-1],o=t==null?void 0:t["ui:help"],c=t==null?void 0:t["ui:placeholder"],v=d===!0||(t==null?void 0:t["ui:disabled"])===!0,q=d===!0||(t==null?void 0:t["ui:readonly"])===!0,k=t==null?void 0:t["ui:classNames"],$=(t==null?void 0:t["ui:autofocus"])===!0,T=`jsf-${r.join(".")}`;if(s.type==="object"&&s.properties){const g=(t==null?void 0:t["ui:order"])??Object.keys(s.properties),w=new Set(s.required??[]),b=x??{},i=l==null?void 0:l({path:r,uiSchema:t,schema:s});return e.jsxs("fieldset",{className:N.cn("space-y-3",k),children:[p&&e.jsx("legend",{className:"text-sm font-medium",children:p}),i&&e.jsx("div",{className:"mt-1",children:i}),g.map(j=>e.jsx(C,{schema:s.properties[j],uiSchema:t==null?void 0:t[j],path:[...r,j],value:b[j],onChange:y=>n({...b,[j]:y}),readOnly:d,required:w.has(j),renderFieldActions:l},j))]})}if(s.type==="array"&&s.items){const g=Array.isArray(x)?x:[],w=t==null?void 0:t.items,b=l==null?void 0:l({path:r,uiSchema:t,schema:s});return e.jsxs("fieldset",{className:N.cn("space-y-2",k),children:[p&&e.jsx("legend",{className:"text-sm font-medium",children:p}),b&&e.jsx("div",{className:"mt-1",children:b}),g.map((i,j)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(C,{schema:s.items,uiSchema:w,path:[...r,String(j)],value:i,onChange:y=>n(g.map((I,J)=>J===j?y:I)),readOnly:d,renderFieldActions:l}),!d&&e.jsx("button",{type:"button",onClick:()=>n(g.filter((y,I)=>I!==j)),"aria-label":`删除第 ${j+1} 项`,children:"×"})]},j)),!d&&e.jsx("button",{type:"button",onClick:()=>n([...g,void 0]),children:"添加一项"})]})}const U=l==null?void 0:l({path:r,uiSchema:t,schema:s});return e.jsxs("div",{className:N.cn("space-y-1",k),children:[p&&e.jsxs(u.Label,{htmlFor:T,children:[p,f&&e.jsx("span",{className:"text-destructive",children:" *"})]}),D(a,s,T,x,n,{placeholder:c,disabled:v,readonly:q,autoFocus:$}),o&&e.jsx("p",{className:"text-xs text-muted-foreground",children:o}),U&&e.jsx("div",{className:"mt-1",children:U})]})}function D(s,t,r,x,n,d){const{placeholder:f,disabled:l,readonly:a,autoFocus:p}=d;switch(s){case"textarea":return e.jsx(u.Textarea,{id:r,value:x??"",placeholder:f,disabled:l,readOnly:a,autoFocus:p,onChange:o=>n(o.target.value)});case"password":case"color":case"date":case"text":return e.jsx(u.Input,{id:r,type:s,value:x??"",placeholder:f,disabled:l,readOnly:a,autoFocus:p,onChange:o=>n(o.target.value)});case"updown":return e.jsx(u.Input,{id:r,type:"number",value:x??"",placeholder:f,disabled:l,readOnly:a,autoFocus:p,onChange:o=>n(o.target.value===""?void 0:Number(o.target.value))});case"range":return e.jsx(u.Input,{id:r,type:"range",value:x??0,disabled:l,readOnly:a,autoFocus:p,onChange:o=>n(Number(o.target.value))});case"checkbox":return e.jsx(u.Checkbox,{id:r,checked:x===!0,disabled:l,autoFocus:p,onCheckedChange:o=>n(o===!0)});case"radio":{const o=t.enum?t.enum:[!1,!0];return e.jsx("div",{className:"space-y-1",children:o.map(c=>e.jsxs("label",{className:"flex items-center gap-2 text-sm",children:[e.jsx("input",{type:"radio",name:r,checked:x===c,disabled:l,onChange:()=>n(c)}),t.enum?String(c):c?"true":"false"]},String(c)))})}case"select":{const o=t.enum??[];return e.jsxs(u.Select,{value:x!=null?String(x):void 0,disabled:l,onValueChange:c=>{const v=o.find(q=>String(q)===c);n(v)},children:[e.jsx(u.SelectTrigger,{id:r,children:e.jsx(u.SelectValue,{placeholder:f})}),e.jsx(u.SelectContent,{children:o.map(c=>e.jsx(u.SelectItem,{value:String(c),children:String(c)},String(c)))})]})}default:return e.jsx(u.Input,{id:r,value:x??"",placeholder:f,disabled:l,onChange:o=>n(o.target.value)})}}function L({schema:s,uiSchema:t,value:r,onChange:x,onError:n,readOnly:d,className:f,renderFieldActions:l}){const a=t??P.generateDefaultUiSchema(s);return O.useEffect(()=>{n==null||n(R(s,r))},[s,r,n]),e.jsx("div",{className:N.cn("space-y-3",f),children:e.jsx(C,{schema:s,uiSchema:a,path:[],value:r,onChange:x,readOnly:d,renderFieldActions:l})})}exports.JsonSchemaForm=L;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { JsonSchemaForm } from './json-schema-form';
+export type { JsonSchemaFormProps } from './json-schema-form';
+export type { UiSchema, UiWidget } from '@cisri/json-schema-ui-core';
+export type { JsonSchema } from '@cisri/json-schema-core';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACrE,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/index.js

@@ -0,0 +1,255 @@
+import { jsx as r, jsxs as b } from "react/jsx-runtime";
+import { useEffect as J } from "react";
+import { Label as L, Input as v, Select as O, SelectTrigger as P, SelectValue as R, SelectContent as W, SelectItem as z, Checkbox as B, Textarea as G } from "@cisri/shadcn";
+import { cn as j } from "@cisri/core";
+import { generateDefaultUiSchema as H } from "@cisri/json-schema-ui-core";
+function K(e, t) {
+  const s = [];
+  if (e.type === "object" && e.properties) {
+    const d = new Set(e.required ?? []), n = t ?? {};
+    for (const p of Object.keys(e.properties))
+      d.has(p) && (n[p] == null || n[p] === "") && s.push(`${p} is required`);
+  }
+  return s;
+}
+function M(e) {
+  if (e.enum) return "select";
+  switch (e.type) {
+    case "number":
+    case "integer":
+      return "updown";
+    case "boolean":
+      return "checkbox";
+    case "string":
+    default:
+      return "text";
+  }
+}
+function T({
+  schema: e,
+  uiSchema: t,
+  path: s,
+  value: d,
+  onChange: n,
+  readOnly: p,
+  required: g,
+  renderFieldActions: l
+}) {
+  const u = (t == null ? void 0 : t["ui:widget"]) ?? M(e);
+  if ((t == null ? void 0 : t["ui:hidden"]) === !0 || u === "hidden") return null;
+  const c = (t == null ? void 0 : t["ui:label"]) === !1 ? null : (t == null ? void 0 : t["ui:label"]) ?? e.title ?? s[s.length - 1], o = t == null ? void 0 : t["ui:help"], f = t == null ? void 0 : t["ui:placeholder"], k = p === !0 || (t == null ? void 0 : t["ui:disabled"]) === !0, w = p === !0 || (t == null ? void 0 : t["ui:readonly"]) === !0, q = t == null ? void 0 : t["ui:classNames"], V = (t == null ? void 0 : t["ui:autofocus"]) === !0, U = `jsf-${s.join(".")}`;
+  if (e.type === "object" && e.properties) {
+    const y = (t == null ? void 0 : t["ui:order"]) ?? Object.keys(e.properties), C = new Set(e.required ?? []), i = d ?? {}, x = l == null ? void 0 : l({ path: s, uiSchema: t, schema: e });
+    return /* @__PURE__ */ b("fieldset", { className: j("space-y-3", q), children: [
+      c && /* @__PURE__ */ r("legend", { className: "text-sm font-medium", children: c }),
+      x && /* @__PURE__ */ r("div", { className: "mt-1", children: x }),
+      y.map((a) => /* @__PURE__ */ r(
+        T,
+        {
+          schema: e.properties[a],
+          uiSchema: t == null ? void 0 : t[a],
+          path: [...s, a],
+          value: i[a],
+          onChange: (N) => n({ ...i, [a]: N }),
+          readOnly: p,
+          required: C.has(a),
+          renderFieldActions: l
+        },
+        a
+      ))
+    ] });
+  }
+  if (e.type === "array" && e.items) {
+    const y = Array.isArray(d) ? d : [], C = t == null ? void 0 : t.items, i = l == null ? void 0 : l({ path: s, uiSchema: t, schema: e });
+    return /* @__PURE__ */ b("fieldset", { className: j("space-y-2", q), children: [
+      c && /* @__PURE__ */ r("legend", { className: "text-sm font-medium", children: c }),
+      i && /* @__PURE__ */ r("div", { className: "mt-1", children: i }),
+      y.map((x, a) => /* @__PURE__ */ b("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ r(
+          T,
+          {
+            schema: e.items,
+            uiSchema: C,
+            path: [...s, String(a)],
+            value: x,
+            onChange: (N) => n(y.map((I, D) => D === a ? N : I)),
+            readOnly: p,
+            renderFieldActions: l
+          }
+        ),
+        !p && /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            onClick: () => n(y.filter((N, I) => I !== a)),
+            "aria-label": `删除第 ${a + 1} 项`,
+            children: "×"
+          }
+        )
+      ] }, a)),
+      !p && /* @__PURE__ */ r("button", { type: "button", onClick: () => n([...y, void 0]), children: "添加一项" })
+    ] });
+  }
+  const $ = l == null ? void 0 : l({ path: s, uiSchema: t, schema: e });
+  return /* @__PURE__ */ b("div", { className: j("space-y-1", q), children: [
+    c && /* @__PURE__ */ b(L, { htmlFor: U, children: [
+      c,
+      g && /* @__PURE__ */ r("span", { className: "text-destructive", children: " *" })
+    ] }),
+    Q(u, e, U, d, n, {
+      placeholder: f,
+      disabled: k,
+      readonly: w,
+      autoFocus: V
+    }),
+    o && /* @__PURE__ */ r("p", { className: "text-xs text-muted-foreground", children: o }),
+    $ && /* @__PURE__ */ r("div", { className: "mt-1", children: $ })
+  ] });
+}
+function Q(e, t, s, d, n, p) {
+  const { placeholder: g, disabled: l, readonly: u, autoFocus: c } = p;
+  switch (e) {
+    case "textarea":
+      return /* @__PURE__ */ r(
+        G,
+        {
+          id: s,
+          value: d ?? "",
+          placeholder: g,
+          disabled: l,
+          readOnly: u,
+          autoFocus: c,
+          onChange: (o) => n(o.target.value)
+        }
+      );
+    case "password":
+    case "color":
+    case "date":
+    case "text":
+      return /* @__PURE__ */ r(
+        v,
+        {
+          id: s,
+          type: e,
+          value: d ?? "",
+          placeholder: g,
+          disabled: l,
+          readOnly: u,
+          autoFocus: c,
+          onChange: (o) => n(o.target.value)
+        }
+      );
+    case "updown":
+      return /* @__PURE__ */ r(
+        v,
+        {
+          id: s,
+          type: "number",
+          value: d ?? "",
+          placeholder: g,
+          disabled: l,
+          readOnly: u,
+          autoFocus: c,
+          onChange: (o) => n(o.target.value === "" ? void 0 : Number(o.target.value))
+        }
+      );
+    case "range":
+      return /* @__PURE__ */ r(
+        v,
+        {
+          id: s,
+          type: "range",
+          value: d ?? 0,
+          disabled: l,
+          readOnly: u,
+          autoFocus: c,
+          onChange: (o) => n(Number(o.target.value))
+        }
+      );
+    case "checkbox":
+      return /* @__PURE__ */ r(
+        B,
+        {
+          id: s,
+          checked: d === !0,
+          disabled: l,
+          autoFocus: c,
+          onCheckedChange: (o) => n(o === !0)
+        }
+      );
+    case "radio": {
+      const o = t.enum ? t.enum : [!1, !0];
+      return /* @__PURE__ */ r("div", { className: "space-y-1", children: o.map((f) => /* @__PURE__ */ b("label", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ r(
+          "input",
+          {
+            type: "radio",
+            name: s,
+            checked: d === f,
+            disabled: l,
+            onChange: () => n(f)
+          }
+        ),
+        t.enum ? String(f) : f ? "true" : "false"
+      ] }, String(f))) });
+    }
+    case "select": {
+      const o = t.enum ?? [];
+      return /* @__PURE__ */ b(
+        O,
+        {
+          value: d != null ? String(d) : void 0,
+          disabled: l,
+          onValueChange: (f) => {
+            const k = o.find((w) => String(w) === f);
+            n(k);
+          },
+          children: [
+            /* @__PURE__ */ r(P, { id: s, children: /* @__PURE__ */ r(R, { placeholder: g }) }),
+            /* @__PURE__ */ r(W, { children: o.map((f) => /* @__PURE__ */ r(z, { value: String(f), children: String(f) }, String(f))) })
+          ]
+        }
+      );
+    }
+    default:
+      return /* @__PURE__ */ r(
+        v,
+        {
+          id: s,
+          value: d ?? "",
+          placeholder: g,
+          disabled: l,
+          onChange: (o) => n(o.target.value)
+        }
+      );
+  }
+}
+function F({
+  schema: e,
+  uiSchema: t,
+  value: s,
+  onChange: d,
+  onError: n,
+  readOnly: p,
+  className: g,
+  renderFieldActions: l
+}) {
+  const u = t ?? H(e);
+  return J(() => {
+    n == null || n(K(e, s));
+  }, [e, s, n]), /* @__PURE__ */ r("div", { className: j("space-y-3", g), children: /* @__PURE__ */ r(
+    T,
+    {
+      schema: e,
+      uiSchema: u,
+      path: [],
+      value: s,
+      onChange: d,
+      readOnly: p,
+      renderFieldActions: l
+    }
+  ) });
+}
+export {
+  F as JsonSchemaForm
+};

package/dist/json-schema-form.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+import type { JsonSchema } from '@cisri/json-schema-core';
+import { type UiSchema } from '@cisri/json-schema-ui-core';
+export interface JsonSchemaFormProps {
+    schema: JsonSchema;
+    uiSchema?: UiSchema;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    onError?: (errors: string[]) => void;
+    readOnly?: boolean;
+    className?: string;
+    renderFieldActions?: (ctx: {
+        path: string[];
+        uiSchema: UiSchema | undefined;
+        schema: JsonSchema;
+    }) => ReactNode;
+}
+export declare function JsonSchemaForm({ schema, uiSchema, value, onChange, onError, readOnly, className, renderFieldActions, }: JsonSchemaFormProps): import("react").JSX.Element;
+//# sourceMappingURL=json-schema-form.d.ts.map

package/dist/json-schema-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form.d.ts","sourceRoot":"","sources":["../src/json-schema-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAalD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAEL,KAAK,QAAQ,EAEd,MAAM,4BAA4B,CAAC;AAGpC,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,CAAC,GAAG,EAAE;QACzB,IAAI,EAAE,MAAM,EAAE,CAAC;QACf,QAAQ,EAAE,QAAQ,GAAG,SAAS,CAAC;QAC/B,MAAM,EAAE,UAAU,CAAC;KACpB,KAAK,SAAS,CAAC;CACjB;AAuRD,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,kBAAkB,GACnB,EAAE,mBAAmB,+BAkBrB"}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@cisri/json-schema-form",
+  "version": "1.0.0",
+  "description": "Schema-driven JSON data form editor based on shadcn/ui (RJSF-style uiSchema)",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@cisri/core": "1.0.0",
+    "@cisri/json-schema-core": "1.0.0",
+    "@cisri/json-schema-ui-core": "1.0.0",
+    "@cisri/shadcn": "1.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "lucide-react": "^0.300.0"
+  },
+  "peerDependenciesMeta": {
+    "lucide-react": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.0",
+    "@testing-library/react": "^15.0.0",
+    "@testing-library/user-event": "^14.5.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "jsdom": "^24.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "vitest": "^1.6.0",
+    "@vitejs/plugin-react": "^4.2.0"
+  },
+  "scripts": {
+    "build": "tsc && vite build",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}