@tyx1703/json-schema-editor-visual 1.0.0

package/README.md

@@ -0,0 +1,109 @@
+# @tyx1703/json-schema-editor-visual
+
+A React component for visually editing JSON Schema.
+
+## Peer Dependencies
+
+- `react` ^18 or ^19
+- `react-dom` ^18 or ^19
+- `antd` ^5 or ^6
+- `@ant-design/icons` ^5 or ^6
+
+## Install
+
+```bash
+pnpm add @tyx1703/json-schema-editor-visual
+```
+
+## Usage
+
+### Basic
+
+```jsx
+import JsonSchemaEditorVisual from '@tyx1703/json-schema-editor-visual';
+
+export default () => {
+  return <JsonSchemaEditorVisual />;
+};
+```
+
+### Mock Data
+
+Pass a `mock` array to display a mock data column in the editor.
+
+```jsx
+import JsonSchemaEditorVisual from '@tyx1703/json-schema-editor-visual';
+
+const MOCK_SOURCE = [
+  { name: '字符串', mock: '@string' },
+  { name: '自然数', mock: '@natural' },
+  { name: '布尔', mock: '@boolean' },
+  { name: 'email', mock: '@email' },
+  { name: '日期', mock: '@date' },
+];
+
+export default () => {
+  return <JsonSchemaEditorVisual mock={MOCK_SOURCE} />;
+};
+```
+
+### Controlled Component
+
+Use `data` to initialize and `onChange` to receive schema updates.
+
+```jsx
+import JsonSchemaEditorVisual from '@tyx1703/json-schema-editor-visual';
+
+const data = `{"type":"object","title":"title","properties":{"field_1":{"type":"string","title":"field_1_title","description":"field_1_description"}},"required":["field_1"]}`;
+
+export default () => {
+  return (
+    <JsonSchemaEditorVisual
+      data={data}
+      onChange={(value) => console.log('value: ', value)}
+    />
+  );
+};
+```
+
+### i18n
+
+The component reads the locale from antd's `ConfigProvider`. Wrap with `ConfigProvider` and pass a locale to switch language.
+
+```jsx
+import { ConfigProvider } from 'antd';
+import zhCN from 'antd/locale/zh_CN';
+import JsonSchemaEditorVisual from '@tyx1703/json-schema-editor-visual';
+
+export default () => {
+  return (
+    <ConfigProvider locale={zhCN}>
+      <JsonSchemaEditorVisual />
+    </ConfigProvider>
+  );
+};
+```
+
+The component defaults to Chinese (`zh_CN`) when the antd locale starts with `zh`, and English (`en_US`) otherwise.
+
+## API
+
+| Prop         | Type                       | Default | Description                                                                                 |
+| ------------ | -------------------------- | ------- | ------------------------------------------------------------------------------------------- |
+| `data`       | `string`                   | —       | JSON Schema string to initialize the editor                                                 |
+| `onChange`   | `(schema: string) => void` | —       | Callback fired when the schema changes                                                      |
+| `showEditor` | `boolean`                  | `true`  | Show/hide the left-side JSON source editor panel                                            |
+| `format`     | `Format`                   | `[]`    | Custom format options (`{ name: string; title?: string }[]`)                                |
+| `mock`       | `MockSource`               | —       | Mock data source; when provided, a mock column appears (`{ name: string; mock: string }[]`) |
+
+## Development
+
+This project is a pnpm monorepo.
+
+```bash
+pnpm install          # Install dependencies
+pnpm run build        # Build the library
+pnpm run dev          # Watch mode
+pnpm run test         # Unit tests (Rstest)
+pnpm e2e              # Build + e2e tests (Playwright)
+```

package/dist/JsonSchemaEditor.d.ts

@@ -0,0 +1,19 @@
+import { MockSource, Format } from './types';
+import './index.css';
+/** JSON Schema 编辑器属性 */
+export interface JsonSchemaEditorCoreProps {
+    /** JSON Schema 字符串，用于初始化编辑器 */
+    data?: string;
+    /** Schema 变更回调 */
+    onChange?: (schema: string) => void;
+    /** 是否显示左侧 JSON 源码编辑器 */
+    showEditor?: boolean;
+    /**
+     * 自定义 format 选项列表
+     * @default []
+     */
+    format?: Format;
+    /** mock 数据源，传入后自动显示 mock 列 */
+    mock?: MockSource;
+}
+export default function JsonSchemaEditorCore(props: JsonSchemaEditorCoreProps): import("react/jsx-runtime").JSX.Element;

package/dist/JsonSchemaEditor.js

@@ -0,0 +1,478 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button, Checkbox, Col, Input, Modal, Row, Select, Space, Tabs, Tooltip, message } from "antd";
+import { CaretDownOutlined, CaretRightOutlined, EditOutlined, PlusOutlined, QuestionCircleOutlined, SettingOutlined } from "@ant-design/icons";
+import MonacoEditor from "./components/MonacoEditor/index.js";
+import SchemaJson from "./components/SchemaComponents/SchemaJson.js";
+import { SCHEMA_TYPE, debounce, format as external_utils_js_format } from "./utils.js";
+import json from "generate-schema/src/schemas/json.js";
+import SchemaOther from "./components/SchemaComponents/SchemaOther.js";
+import { useLocalProvider } from "./components/LocalProvider/index.js";
+import MockSelect from "./components/MockSelect/index.js";
+import { useAppDispatch, useAppSelector } from "./store/index.js";
+import { addChildFieldAction, changeEditorSchemaAction, changeTypeAction, changeValueAction, requireAllAction } from "./store/schemaSlice.js";
+import "./index.css";
+const Option = Select.Option;
+const { TextArea: TextArea } = Input;
+function JsonSchemaEditorCore(props) {
+    const { data, onChange, showEditor, format = external_utils_js_format, mock } = props;
+    const dispatch = useAppDispatch();
+    const schema = useAppSelector((state)=>state.schema.data);
+    const LocalProvider = useLocalProvider();
+    const jsonDataRef = useRef(null);
+    const jsonSchemaDataRef = useRef(null);
+    const importJsonTypeRef = useRef(null);
+    const prevDataRef = useRef(data);
+    const alterMsgRef = useRef(debounce(()=>{}, 2000));
+    const [visible, setVisible] = useState(false);
+    const [show, setShow] = useState(true);
+    const [editVisible, setEditVisible] = useState(false);
+    const [descriptionKey, setDescriptionKey] = useState(null);
+    const [advVisible, setAdvVisible] = useState(false);
+    const [itemKey, setItemKey] = useState([]);
+    const [curItemCustomValue, setCurItemCustomValue] = useState(null);
+    const [checked, setChecked] = useState(false);
+    const [editorModalName, setEditorModalName] = useState('');
+    const [editValue, setEditValue] = useState('');
+    useEffect(()=>{
+        const parsed = data ? JSON.parse(data) : {
+            type: 'object',
+            title: 'title',
+            properties: {}
+        };
+        dispatch(changeEditorSchemaAction({
+            value: parsed
+        }));
+    }, []);
+    useEffect(()=>{
+        if (data && data !== prevDataRef.current) dispatch(changeEditorSchemaAction({
+            value: JSON.parse(data)
+        }));
+        prevDataRef.current = data;
+    }, [
+        data,
+        dispatch
+    ]);
+    useEffect(()=>{
+        if ('function' == typeof onChange) onChange(JSON.stringify(schema || ''));
+    }, [
+        schema
+    ]);
+    const showModal = useCallback(()=>setVisible(true), []);
+    const handleOk = useCallback(()=>{
+        if ('schema' !== importJsonTypeRef.current) {
+            if (!jsonDataRef.current) return message.error('json 数据格式有误');
+            const jsonData = json(jsonDataRef.current);
+            dispatch(changeEditorSchemaAction({
+                value: jsonData
+            }));
+        } else {
+            if (!jsonSchemaDataRef.current) return message.error('json 数据格式有误');
+            dispatch(changeEditorSchemaAction({
+                value: jsonSchemaDataRef.current
+            }));
+        }
+        setVisible(false);
+    }, [
+        dispatch
+    ]);
+    const handleCancel = useCallback(()=>setVisible(false), []);
+    const handleImportJson = useCallback((e)=>{
+        if (!e.text || true !== e.format) {
+            jsonDataRef.current = null;
+            return;
+        }
+        jsonDataRef.current = e.jsonData;
+    }, []);
+    const handleImportJsonSchema = useCallback((e)=>{
+        if (!e.text || true !== e.format) {
+            jsonSchemaDataRef.current = null;
+            return;
+        }
+        jsonSchemaDataRef.current = e.jsonData;
+    }, []);
+    const handleParams = useCallback((e)=>{
+        if (!e.text) return;
+        if (true !== e.format) return alterMsgRef.current();
+        dispatch(changeEditorSchemaAction({
+            value: e.jsonData
+        }));
+    }, [
+        dispatch
+    ]);
+    const changeType = useCallback((key, value)=>{
+        dispatch(changeTypeAction({
+            key: [
+                key
+            ],
+            value
+        }));
+    }, [
+        dispatch
+    ]);
+    const addChildField = useCallback((key)=>{
+        dispatch(addChildFieldAction({
+            key: [
+                key
+            ]
+        }));
+        setShow(true);
+    }, [
+        dispatch
+    ]);
+    const clickIcon = useCallback(()=>setShow((s)=>!s), []);
+    const changeValue = useCallback((key, value)=>{
+        if ('mock' === key[0]) value = value ? {
+            mock: value
+        } : '';
+        dispatch(changeValueAction({
+            key,
+            value
+        }));
+    }, [
+        dispatch
+    ]);
+    const handleEditOk = useCallback((name)=>{
+        setEditVisible(false);
+        let value = editValue;
+        if ('mock' === name) value = value ? {
+            mock: value
+        } : '';
+        if (!descriptionKey) return;
+        dispatch(changeValueAction({
+            key: descriptionKey,
+            value
+        }));
+    }, [
+        editValue,
+        descriptionKey,
+        dispatch
+    ]);
+    const handleEditCancel = useCallback(()=>setEditVisible(false), []);
+    const showEdit = useCallback((prefix, name, value, type)=>{
+        if ('object' === type || 'array' === type) return;
+        const key = [
+            ...prefix,
+            name
+        ];
+        const val = 'mock' === name ? value ? value.mock : '' : value;
+        setEditVisible(true);
+        setEditValue(val);
+        setDescriptionKey(key);
+        setEditorModalName(name);
+    }, []);
+    const changeDesc = useCallback((e)=>setEditValue(e), []);
+    const handleAdvOk = useCallback(()=>{
+        if (0 === itemKey.length) {
+            if (!curItemCustomValue) return;
+            dispatch(changeEditorSchemaAction({
+                value: curItemCustomValue
+            }));
+        } else dispatch(changeValueAction({
+            key: itemKey,
+            value: curItemCustomValue
+        }));
+        setAdvVisible(false);
+    }, [
+        itemKey,
+        curItemCustomValue,
+        dispatch
+    ]);
+    const handleAdvCancel = useCallback(()=>setAdvVisible(false), []);
+    const showAdv = useCallback((key, value)=>{
+        setAdvVisible(true);
+        setItemKey(key);
+        setCurItemCustomValue(value);
+    }, []);
+    const changeCustomValue = useCallback((newValue)=>setCurItemCustomValue(newValue), []);
+    const changeCheckBox = useCallback((e)=>{
+        setChecked(e);
+        dispatch(requireAllAction({
+            required: e,
+            value: schema
+        }));
+    }, [
+        schema,
+        dispatch
+    ]);
+    const disabled = 'object' !== schema.type && 'array' !== schema.type;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "json-schema-react-editor",
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                className: "import-json-button",
+                type: "primary",
+                onClick: showModal,
+                children: LocalProvider('import_json')
+            }),
+            /*#__PURE__*/ jsx(Modal, {
+                width: 780,
+                maskClosable: false,
+                open: visible,
+                title: LocalProvider('import_json'),
+                onOk: handleOk,
+                onCancel: handleCancel,
+                className: "json-schema-react-editor-import-modal",
+                okText: 'ok',
+                cancelText: LocalProvider('cancel'),
+                footer: [
+                    /*#__PURE__*/ jsx(Button, {
+                        onClick: handleCancel,
+                        children: LocalProvider('cancel')
+                    }, "back"),
+                    /*#__PURE__*/ jsx(Button, {
+                        type: "primary",
+                        onClick: handleOk,
+                        children: LocalProvider('ok')
+                    }, "submit")
+                ],
+                children: /*#__PURE__*/ jsx(Tabs, {
+                    defaultActiveKey: "json",
+                    onChange: (key)=>{
+                        importJsonTypeRef.current = key;
+                    },
+                    items: [
+                        {
+                            key: 'json',
+                            label: 'JSON',
+                            children: /*#__PURE__*/ jsx(MonacoEditor, {
+                                data: "",
+                                mode: "json",
+                                onChange: handleImportJson
+                            })
+                        },
+                        {
+                            key: 'schema',
+                            label: 'JSON-SCHEMA',
+                            children: /*#__PURE__*/ jsx(MonacoEditor, {
+                                data: "",
+                                mode: "json",
+                                onChange: handleImportJsonSchema
+                            })
+                        }
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(Modal, {
+                title: /*#__PURE__*/ jsxs("div", {
+                    children: [
+                        LocalProvider(editorModalName),
+                        "\xa0",
+                        'mock' === editorModalName && /*#__PURE__*/ jsx(Tooltip, {
+                            title: LocalProvider('mockLink'),
+                            children: /*#__PURE__*/ jsx("a", {
+                                target: "_blank",
+                                rel: "noopener noreferrer",
+                                href: "https://github.com/YMFE/json-schema-editor-visual/issues/38",
+                                children: /*#__PURE__*/ jsx(QuestionCircleOutlined, {})
+                            })
+                        })
+                    ]
+                }),
+                maskClosable: false,
+                open: editVisible,
+                onOk: ()=>handleEditOk(editorModalName),
+                onCancel: handleEditCancel,
+                okText: LocalProvider('ok'),
+                cancelText: LocalProvider('cancel'),
+                children: /*#__PURE__*/ jsx(TextArea, {
+                    value: editValue,
+                    placeholder: LocalProvider(editorModalName),
+                    onChange: (e)=>changeDesc(e.target.value),
+                    autoSize: {
+                        minRows: 6,
+                        maxRows: 10
+                    }
+                })
+            }),
+            advVisible && /*#__PURE__*/ jsx(Modal, {
+                title: LocalProvider('adv_setting'),
+                maskClosable: false,
+                open: advVisible,
+                onOk: handleAdvOk,
+                onCancel: handleAdvCancel,
+                okText: LocalProvider('ok'),
+                width: 780,
+                cancelText: LocalProvider('cancel'),
+                className: "json-schema-react-editor-adv-modal",
+                "data-testid": null,
+                children: /*#__PURE__*/ jsx(SchemaOther, {
+                    data: JSON.stringify(curItemCustomValue, null, 2),
+                    changeCustomValue: changeCustomValue,
+                    format: format
+                })
+            }),
+            /*#__PURE__*/ jsxs(Row, {
+                children: [
+                    showEditor && /*#__PURE__*/ jsx(Col, {
+                        span: 8,
+                        children: /*#__PURE__*/ jsx(MonacoEditor, {
+                            className: "pretty-editor",
+                            mode: "json",
+                            data: JSON.stringify(schema, null, 2),
+                            onChange: handleParams
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs(Col, {
+                        span: showEditor ? 16 : 24,
+                        className: "wrapper object-style",
+                        children: [
+                            /*#__PURE__*/ jsxs(Row, {
+                                align: "middle",
+                                children: [
+                                    /*#__PURE__*/ jsx(Col, {
+                                        span: 8,
+                                        className: "col-item name-item col-item-name",
+                                        children: /*#__PURE__*/ jsxs(Row, {
+                                            justify: "space-around",
+                                            align: "middle",
+                                            children: [
+                                                /*#__PURE__*/ jsx(Col, {
+                                                    span: 2,
+                                                    className: "down-style-col",
+                                                    children: 'object' === schema.type ? /*#__PURE__*/ jsx("span", {
+                                                        className: "down-style",
+                                                        onClick: clickIcon,
+                                                        children: show ? /*#__PURE__*/ jsx(CaretDownOutlined, {
+                                                            className: "icon-object",
+                                                            type: "caret-down"
+                                                        }) : /*#__PURE__*/ jsx(CaretRightOutlined, {
+                                                            className: "icon-object",
+                                                            type: "caret-right"
+                                                        })
+                                                    }) : null
+                                                }),
+                                                /*#__PURE__*/ jsx(Col, {
+                                                    span: 22,
+                                                    children: /*#__PURE__*/ jsxs(Space.Compact, {
+                                                        children: [
+                                                            /*#__PURE__*/ jsx(Input, {
+                                                                disabled: true,
+                                                                value: "root"
+                                                            }),
+                                                            /*#__PURE__*/ jsx(Tooltip, {
+                                                                placement: "top",
+                                                                title: 'checked_all',
+                                                                children: /*#__PURE__*/ jsx(Button, {
+                                                                    type: "text",
+                                                                    disabled: true,
+                                                                    children: /*#__PURE__*/ jsx(Checkbox, {
+                                                                        checked: checked,
+                                                                        disabled: disabled,
+                                                                        onChange: (e)=>changeCheckBox(e.target.checked)
+                                                                    })
+                                                                })
+                                                            })
+                                                        ]
+                                                    })
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(Col, {
+                                        span: 3,
+                                        className: "col-item col-item-type",
+                                        children: /*#__PURE__*/ jsx(Select, {
+                                            className: "type-select-style",
+                                            onChange: (e)=>changeType("type", e),
+                                            value: schema.type || 'object',
+                                            children: SCHEMA_TYPE.map((item, index)=>/*#__PURE__*/ jsx(Option, {
+                                                    value: item,
+                                                    children: item
+                                                }, index))
+                                        })
+                                    }),
+                                    mock && /*#__PURE__*/ jsx(Col, {
+                                        span: 3,
+                                        className: "col-item col-item-mock",
+                                        children: /*#__PURE__*/ jsx(MockSelect, {
+                                            schema: schema,
+                                            showEdit: ()=>showEdit([], 'mock', schema.mock, schema.type),
+                                            onChange: (value)=>changeValue([
+                                                    'mock'
+                                                ], value),
+                                            mock: mock
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(Col, {
+                                        span: mock ? 4 : 5,
+                                        className: "col-item col-item-mock",
+                                        children: /*#__PURE__*/ jsxs(Space.Compact, {
+                                            children: [
+                                                /*#__PURE__*/ jsx(Input, {
+                                                    placeholder: LocalProvider('title'),
+                                                    value: schema.title,
+                                                    onChange: (e)=>changeValue([
+                                                            'title'
+                                                        ], e.target.value)
+                                                }),
+                                                /*#__PURE__*/ jsx(Button, {
+                                                    icon: /*#__PURE__*/ jsx(EditOutlined, {}),
+                                                    onClick: ()=>showEdit([], 'title', schema.title)
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(Col, {
+                                        span: mock ? 4 : 5,
+                                        className: "col-item col-item-desc",
+                                        children: /*#__PURE__*/ jsxs(Space.Compact, {
+                                            children: [
+                                                /*#__PURE__*/ jsx(Input, {
+                                                    placeholder: LocalProvider("description"),
+                                                    value: schema.description,
+                                                    onChange: (e)=>changeValue([
+                                                            "description"
+                                                        ], e.target.value)
+                                                }),
+                                                /*#__PURE__*/ jsx(Button, {
+                                                    icon: /*#__PURE__*/ jsx(EditOutlined, {}),
+                                                    onClick: ()=>showEdit([], "description", schema.description)
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxs(Col, {
+                                        span: 2,
+                                        className: "col-item col-item-setting",
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "adv-set",
+                                                onClick: ()=>showAdv([], schema),
+                                                children: /*#__PURE__*/ jsx(Tooltip, {
+                                                    placement: "top",
+                                                    title: LocalProvider('adv_setting'),
+                                                    children: /*#__PURE__*/ jsx(SettingOutlined, {
+                                                        type: "setting"
+                                                    })
+                                                })
+                                            }),
+                                            'object' === schema.type ? /*#__PURE__*/ jsx("span", {
+                                                onClick: ()=>addChildField('properties'),
+                                                children: /*#__PURE__*/ jsx(Tooltip, {
+                                                    placement: "top",
+                                                    title: LocalProvider('add_child_node'),
+                                                    children: /*#__PURE__*/ jsx(PlusOutlined, {
+                                                        type: "plus",
+                                                        className: "plus"
+                                                    })
+                                                })
+                                            }) : null
+                                        ]
+                                    })
+                                ]
+                            }),
+                            show && /*#__PURE__*/ jsx(SchemaJson, {
+                                data: schema,
+                                showEdit: showEdit,
+                                showAdv: showAdv,
+                                mock: mock
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+export default JsonSchemaEditorCore;

package/dist/components/LocalProvider/index.d.ts

@@ -0,0 +1,79 @@
+declare const langs: {
+    en_US: {
+        title: string;
+        import_json: string;
+        base_setting: string;
+        all_setting: string;
+        default: string;
+        description: string;
+        adv_setting: string;
+        add_child_node: string;
+        add_sibling_node: string;
+        add_node: string;
+        child_node: string;
+        sibling_node: string;
+        ok: string;
+        cancel: string;
+        minLength: string;
+        maxLength: string;
+        pattern: string;
+        exclusiveMinimum: string;
+        exclusiveMaximum: string;
+        minimum: string;
+        maximum: string;
+        unique_items: string;
+        min_items: string;
+        max_items: string;
+        checked_all: string;
+        valid_json: string;
+        enum: string;
+        enum_msg: string;
+        enum_desc: string;
+        enum_desc_msg: string;
+        required: string;
+        mock: string;
+        mockLink: string;
+    };
+    zh_CN: {
+        title: string;
+        import_json: string;
+        base_setting: string;
+        all_setting: string;
+        default: string;
+        description: string;
+        adv_setting: string;
+        add_child_node: string;
+        add_sibling_node: string;
+        add_node: string;
+        child_node: string;
+        sibling_node: string;
+        ok: string;
+        cancel: string;
+        minLength: string;
+        maxLength: string;
+        pattern: string;
+        exclusiveMinimum: string;
+        exclusiveMaximum: string;
+        minimum: string;
+        maximum: string;
+        unique_items: string;
+        min_items: string;
+        max_items: string;
+        checked_all: string;
+        valid_json: string;
+        enum: string;
+        enum_msg: string;
+        enum_desc: string;
+        enum_desc_msg: string;
+        required: string;
+        mock: string;
+        mockLink: string;
+    };
+};
+export type MessageKey = keyof (typeof langs)['en_US'];
+/**
+ * 从 antd ConfigProvider 中获取当前语言环境，并返回国际化查询函数
+ * @returns 一个接受 MessageKey 返回对应语言字符串的函数
+ */
+export declare function useLocalProvider(): (message: MessageKey) => string;
+export {};