@cisri/json-schema-selector 1.0.0

package/README.md

@@ -0,0 +1,98 @@
+# @cisri/json-schema-selector
+
+A dialog-based JSON Schema selector business component built on shadcn/ui.
+
+## Installation
+
+```bash
+pnpm add @cisri/json-schema-selector
+```
+
+## Peer Dependencies
+
+This component relies on the following libraries. Make sure they are installed in your project:
+
+```bash
+pnpm add react react-dom @radix-ui/react-dialog @radix-ui/react-scroll-area @radix-ui/react-separator @radix-ui/react-slot class-variance-authority clsx lucide-react tailwind-merge
+```
+
+## Usage
+
+```tsx
+import { JsonSchemaSelector, JsonSchemaEntry } from '@cisri/json-schema-selector';
+
+const entries: JsonSchemaEntry[] = [
+  {
+    id: 'user',
+    name: 'User',
+    description: 'User schema',
+    schema: { type: 'object', properties: { name: { type: 'string' } } },
+  },
+];
+
+export default function App() {
+  return (
+    <JsonSchemaSelector
+      entries={entries}
+      onSelect={(entry) => console.log('selected', entry)}
+    />
+  );
+}
+```
+
+## Tailwind 配置
+
+Ensure your `tailwind.config.ts` `content` array includes the package path so all component classes are scanned:
+
+```ts
+content: [
+  './node_modules/@cisri/json-schema-selector/dist/**/*.{js,cjs}',
+];
+```
+
+## 自定义样式
+
+This component is built on top of shadcn/ui CSS variables (such as `--card`, `--primary`, `--muted`, etc.). You can override the appearance by redefining CSS variables or passing `className` / `classNames`:
+
+```tsx
+<JsonSchemaSelector
+  entries={entries}
+  onSelect={(entry) => console.log('selected', entry)}
+  classNames={{
+    root: 'inline-block',
+    dialogContent: 'w-[720px] max-w-full',
+    list: 'bg-muted/30',
+    schemaPreview: 'border-border',
+  }}
+/>
+```
+
+```css
+/* Override global theme via CSS variables */
+:root {
+  --card: 0 0% 100%;
+  --card-foreground: 222 84% 5%;
+  --primary: 221 83% 53%;
+  --primary-foreground: 210 40% 98%;
+  --muted: 210 40% 96%;
+  --muted-foreground: 215 16% 47%;
+  --border: 214 32% 91%;
+}
+```
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `entries` | `JsonSchemaEntry[]` | List of schema entries to select from. |
+| `selectedId` | `string` | ID of the currently selected entry. |
+| `onSelect` | `(entry: JsonSchemaEntry) => void` | Callback when an entry is confirmed. |
+| `onSearch` | `(keyword: string) => void` | Optional external search handler. |
+| `searchDebounceMs` | `number` | Debounce delay for local search (default: `300`). |
+| `loading` | `boolean` | Show skeleton loaders. |
+| `trigger` | `React.ReactNode` | Custom trigger element. |
+| `title` | `string` | Dialog title. |
+| `emptyText` | `string` | Text shown when no entries match. |
+| `searchPlaceholder` | `string` | Search input placeholder. |
+| `className` | `string` | Additional classes for the root element. |
+| `classNames` | `JsonSchemaSelectorClassNames` | Style overrides for sub-components. |

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),c=require("@cisri/core"),I=require("@cisri/json-schema-core"),o=require("@cisri/shadcn"),J=require("lucide-react");function O(r,d){const[u,l]=i.useState(r);return i.useEffect(()=>{const m=window.setTimeout(()=>l(r),d);return()=>window.clearTimeout(m)},[r,d]),u}function S({label:r,value:d,className:u}){const l=i.useMemo(()=>JSON.stringify(d,null,2),[d]);return e.jsxs("div",{className:c.cn("flex flex-col gap-2",u),children:[e.jsx("h4",{className:"text-xs font-medium text-muted-foreground",children:r}),e.jsx("pre",{className:"rounded-md border border-border bg-muted/50 p-3 font-mono text-xs overflow-auto max-h-[240px]",children:l})]})}function B({entries:r,selectedId:d,onSelect:u,onSearch:l,searchDebounceMs:m=300,loading:D=!1,trigger:k,title:y="选择 Schema",emptyText:q="暂无可用 schema",searchPlaceholder:E="搜索 schema...",className:P,classNames:t}){const[f,b]=i.useState(!1),[p,v]=i.useState(""),w=O(p,m),[x,g]=i.useState(d??null),h=x;i.useEffect(()=>{f&&(l==null||l(w))},[w,l,f]),i.useEffect(()=>{f&&(g(d??null),v(""))},[f,d]);const s=i.useMemo(()=>{if(l)return r;const n=p.toLowerCase();return r.filter(j=>{var C;return j.name.toLowerCase().includes(n)||(((C=j.description)==null?void 0:C.toLowerCase().includes(n))??!1)})},[r,p,l]);i.useEffect(()=>{h&&!s.some(n=>n.id===h)&&g(null)},[h,s]);const a=i.useMemo(()=>r.find(n=>n.id===h)??null,[r,h]),M=i.useMemo(()=>a?I.generateSampleData(a.schema):null,[a]),T=i.useCallback(()=>{const n=r.find(j=>j.id===x);n&&(u(n),b(!1))},[r,u,x]);return e.jsx("div",{className:c.cn(t==null?void 0:t.root,P),children:e.jsxs(o.Dialog,{open:f,onOpenChange:b,children:[e.jsx(o.DialogTrigger,{asChild:!0,children:k??e.jsx(o.Button,{type:"button",className:t==null?void 0:t.trigger,children:"选择 Schema"})}),e.jsxs(o.DialogContent,{className:c.cn("flex max-h-[80vh] flex-col overflow-hidden p-0",t==null?void 0:t.dialogContent),children:[e.jsxs(o.DialogHeader,{className:"px-6 pt-6",children:[e.jsx(o.DialogTitle,{children:y}),e.jsx(o.DialogDescription,{children:"在左侧选择 schema，右侧可查看结构和示例数据。"})]}),e.jsxs("div",{className:"flex flex-1 overflow-hidden",children:[e.jsxs("div",{className:c.cn("flex w-1/3 flex-col border-r border-border p-4",t==null?void 0:t.list),children:[e.jsxs("div",{className:"relative mb-3",children:[e.jsx(J.Search,{className:"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground"}),e.jsx(o.Input,{value:p,onChange:n=>v(n.target.value),placeholder:E,className:c.cn("pl-9",t==null?void 0:t.searchInput),"aria-label":"搜索 schema"})]}),D?e.jsxs("div",{className:"space-y-2",children:[e.jsx(o.Skeleton,{className:"h-10 w-full"}),e.jsx(o.Skeleton,{className:"h-10 w-full"}),e.jsx(o.Skeleton,{className:"h-10 w-full"})]}):s.length===0?e.jsx("p",{className:"text-sm text-muted-foreground",children:q}):e.jsx(o.ScrollArea,{className:"flex-1",children:e.jsx("div",{"aria-label":"schema 列表",className:"space-y-1 pr-3",children:s.map(n=>e.jsxs("button",{type:"button","aria-label":n.name,"aria-pressed":x===n.id,onClick:()=>g(n.id),className:c.cn("w-full rounded-md border border-transparent px-3 py-2 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground",x===n.id&&"border-border bg-muted",t==null?void 0:t.listItem),children:[e.jsx("div",{className:"font-medium",children:n.name}),n.description&&e.jsx("div",{className:"mt-0.5 line-clamp-2 text-xs text-muted-foreground",children:n.description})]},n.id))})})]}),e.jsx("div",{className:c.cn("flex w-2/3 flex-col gap-4 overflow-auto p-4",t==null?void 0:t.previewPanel),children:a?e.jsxs(e.Fragment,{children:[e.jsx(S,{label:"Schema",value:a.schema,className:t==null?void 0:t.schemaPreview}),e.jsx(S,{label:"示例数据",value:M,className:t==null?void 0:t.samplePreview})]}):e.jsx("div",{className:"flex h-full flex-col items-center justify-center text-sm text-muted-foreground",children:"请从左侧选择一个 schema 以预览"})})]}),e.jsx(o.Separator,{}),e.jsxs(o.DialogFooter,{className:c.cn("px-6 pb-6 pt-2",t==null?void 0:t.footer),children:[e.jsx(o.Button,{type:"button",variant:"outline",onClick:()=>b(!1),children:"取消"}),e.jsx(o.Button,{type:"button",onClick:T,disabled:!x,children:"确定"})]})]})]})})}exports.JsonSchemaSelector=B;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { JsonSchemaSelector } from './json-schema-selector';
+export type { JsonSchemaEntry, JsonSchemaSelectorClassNames, JsonSchemaSelectorProps, } from './json-schema-selector';
+//# 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,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EACV,eAAe,EACf,4BAA4B,EAC5B,uBAAuB,GACxB,MAAM,wBAAwB,CAAC"}

package/dist/index.js

@@ -0,0 +1,152 @@
+import { jsx as t, jsxs as n, Fragment as B } from "react/jsx-runtime";
+import { useState as b, useEffect as g, useMemo as v, useCallback as H } from "react";
+import { cn as l } from "@cisri/core";
+import { generateSampleData as M } from "@cisri/json-schema-core";
+import { Dialog as q, DialogTrigger as z, Button as k, DialogContent as G, DialogHeader as Q, DialogTitle as R, DialogDescription as U, Input as V, Skeleton as y, ScrollArea as W, Separator as X, DialogFooter as Y } from "@cisri/shadcn";
+import { Search as Z } from "lucide-react";
+function _(r, d) {
+  const [u, i] = b(r);
+  return g(() => {
+    const w = window.setTimeout(() => i(r), d);
+    return () => window.clearTimeout(w);
+  }, [r, d]), u;
+}
+function T({
+  label: r,
+  value: d,
+  className: u
+}) {
+  const i = v(() => JSON.stringify(d, null, 2), [d]);
+  return /* @__PURE__ */ n("div", { className: l("flex flex-col gap-2", u), children: [
+    /* @__PURE__ */ t("h4", { className: "text-xs font-medium text-muted-foreground", children: r }),
+    /* @__PURE__ */ t("pre", { className: "rounded-md border border-border bg-muted/50 p-3 font-mono text-xs overflow-auto max-h-[240px]", children: i })
+  ] });
+}
+function re({
+  entries: r,
+  selectedId: d,
+  onSelect: u,
+  onSearch: i,
+  searchDebounceMs: w = 300,
+  loading: j = !1,
+  trigger: E,
+  title: J = "选择 Schema",
+  emptyText: L = "暂无可用 schema",
+  searchPlaceholder: O = "搜索 schema...",
+  className: F,
+  classNames: e
+}) {
+  const [f, C] = b(!1), [a, P] = b(""), I = _(a, w), [c, D] = b(d ?? null), h = c;
+  g(() => {
+    f && (i == null || i(I));
+  }, [I, i, f]), g(() => {
+    f && (D(d ?? null), P(""));
+  }, [f, d]);
+  const m = v(() => {
+    if (i) return r;
+    const o = a.toLowerCase();
+    return r.filter(
+      (x) => {
+        var S;
+        return x.name.toLowerCase().includes(o) || (((S = x.description) == null ? void 0 : S.toLowerCase().includes(o)) ?? !1);
+      }
+    );
+  }, [r, a, i]);
+  g(() => {
+    h && !m.some((o) => o.id === h) && D(null);
+  }, [h, m]);
+  const p = v(
+    () => r.find((o) => o.id === h) ?? null,
+    [r, h]
+  ), K = v(
+    () => p ? M(p.schema) : null,
+    [p]
+  ), A = H(() => {
+    const o = r.find((x) => x.id === c);
+    o && (u(o), C(!1));
+  }, [r, u, c]);
+  return /* @__PURE__ */ t("div", { className: l(e == null ? void 0 : e.root, F), children: /* @__PURE__ */ n(q, { open: f, onOpenChange: C, children: [
+    /* @__PURE__ */ t(z, { asChild: !0, children: E ?? /* @__PURE__ */ t(k, { type: "button", className: e == null ? void 0 : e.trigger, children: "选择 Schema" }) }),
+    /* @__PURE__ */ n(
+      G,
+      {
+        className: l(
+          "flex max-h-[80vh] flex-col overflow-hidden p-0",
+          e == null ? void 0 : e.dialogContent
+        ),
+        children: [
+          /* @__PURE__ */ n(Q, { className: "px-6 pt-6", children: [
+            /* @__PURE__ */ t(R, { children: J }),
+            /* @__PURE__ */ t(U, { children: "在左侧选择 schema，右侧可查看结构和示例数据。" })
+          ] }),
+          /* @__PURE__ */ n("div", { className: "flex flex-1 overflow-hidden", children: [
+            /* @__PURE__ */ n("div", { className: l("flex w-1/3 flex-col border-r border-border p-4", e == null ? void 0 : e.list), children: [
+              /* @__PURE__ */ n("div", { className: "relative mb-3", children: [
+                /* @__PURE__ */ t(Z, { className: "absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" }),
+                /* @__PURE__ */ t(
+                  V,
+                  {
+                    value: a,
+                    onChange: (o) => P(o.target.value),
+                    placeholder: O,
+                    className: l("pl-9", e == null ? void 0 : e.searchInput),
+                    "aria-label": "搜索 schema"
+                  }
+                )
+              ] }),
+              j ? /* @__PURE__ */ n("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ t(y, { className: "h-10 w-full" }),
+                /* @__PURE__ */ t(y, { className: "h-10 w-full" }),
+                /* @__PURE__ */ t(y, { className: "h-10 w-full" })
+              ] }) : m.length === 0 ? /* @__PURE__ */ t("p", { className: "text-sm text-muted-foreground", children: L }) : /* @__PURE__ */ t(W, { className: "flex-1", children: /* @__PURE__ */ t("div", { "aria-label": "schema 列表", className: "space-y-1 pr-3", children: m.map((o) => /* @__PURE__ */ n(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": o.name,
+                  "aria-pressed": c === o.id,
+                  onClick: () => D(o.id),
+                  className: l(
+                    "w-full rounded-md border border-transparent px-3 py-2 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground",
+                    c === o.id && "border-border bg-muted",
+                    e == null ? void 0 : e.listItem
+                  ),
+                  children: [
+                    /* @__PURE__ */ t("div", { className: "font-medium", children: o.name }),
+                    o.description && /* @__PURE__ */ t("div", { className: "mt-0.5 line-clamp-2 text-xs text-muted-foreground", children: o.description })
+                  ]
+                },
+                o.id
+              )) }) })
+            ] }),
+            /* @__PURE__ */ t("div", { className: l("flex w-2/3 flex-col gap-4 overflow-auto p-4", e == null ? void 0 : e.previewPanel), children: p ? /* @__PURE__ */ n(B, { children: [
+              /* @__PURE__ */ t(
+                T,
+                {
+                  label: "Schema",
+                  value: p.schema,
+                  className: e == null ? void 0 : e.schemaPreview
+                }
+              ),
+              /* @__PURE__ */ t(
+                T,
+                {
+                  label: "示例数据",
+                  value: K,
+                  className: e == null ? void 0 : e.samplePreview
+                }
+              )
+            ] }) : /* @__PURE__ */ t("div", { className: "flex h-full flex-col items-center justify-center text-sm text-muted-foreground", children: "请从左侧选择一个 schema 以预览" }) })
+          ] }),
+          /* @__PURE__ */ t(X, {}),
+          /* @__PURE__ */ n(Y, { className: l("px-6 pb-6 pt-2", e == null ? void 0 : e.footer), children: [
+            /* @__PURE__ */ t(k, { type: "button", variant: "outline", onClick: () => C(!1), children: "取消" }),
+            /* @__PURE__ */ t(k, { type: "button", onClick: A, disabled: !c, children: "确定" })
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+export {
+  re as JsonSchemaSelector
+};

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import type { JsonSchema } from '@cisri/json-schema-core';
+export interface JsonSchemaEntry {
+    id: string;
+    name: string;
+    description?: string;
+    schema: JsonSchema;
+}
+export interface JsonSchemaSelectorClassNames {
+    root?: string;
+    trigger?: string;
+    dialogContent?: string;
+    searchInput?: string;
+    list?: string;
+    listItem?: string;
+    previewPanel?: string;
+    schemaPreview?: string;
+    samplePreview?: string;
+    footer?: string;
+}
+export interface JsonSchemaSelectorProps {
+    entries: JsonSchemaEntry[];
+    selectedId?: string;
+    onSelect: (entry: JsonSchemaEntry) => void;
+    onSearch?: (keyword: string) => void;
+    searchDebounceMs?: number;
+    loading?: boolean;
+    trigger?: React.ReactNode;
+    title?: string;
+    emptyText?: string;
+    searchPlaceholder?: string;
+    className?: string;
+    classNames?: JsonSchemaSelectorClassNames;
+}
+export declare function JsonSchemaSelector({ entries, selectedId, onSelect, onSearch, searchDebounceMs, loading, trigger, title, emptyText, searchPlaceholder, className, classNames, }: JsonSchemaSelectorProps): React.JSX.Element;
+//# sourceMappingURL=json-schema-selector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-selector.d.ts","sourceRoot":"","sources":["../src/json-schema-selector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAkB1D,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,UAAU,CAAC;CACpB;AAED,MAAM,WAAW,4BAA4B;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,4BAA4B,CAAC;CAC3C;AA+BD,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,gBAAsB,EACtB,OAAe,EACf,OAAO,EACP,KAAmB,EACnB,SAAyB,EACzB,iBAAkC,EAClC,SAAS,EACT,UAAU,GACX,EAAE,uBAAuB,qBAmKzB"}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@cisri/json-schema-selector",
+  "version": "1.0.0",
+  "description": "JSON Schema selector business component based on shadcn/ui",
+  "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/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.5",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.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"
+  },
+  "scripts": {
+    "build": "tsc && vite build",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}