@tyx1703/json-schema-editor-visual 1.0.0

package/dist/components/LocalProvider/index.js

@@ -0,0 +1,80 @@
+import { useContext } from "react";
+import { ConfigProvider } from "antd";
+const langs = {
+    en_US: {
+        title: 'Title',
+        import_json: 'Import JSON',
+        base_setting: 'Base Setting',
+        all_setting: 'Source Code',
+        default: 'Default',
+        description: "Description",
+        adv_setting: 'Advanced Settings',
+        add_child_node: 'Add child node',
+        add_sibling_node: 'Add sibling nodes',
+        add_node: 'Add sibling/child nodes',
+        child_node: 'Child node',
+        sibling_node: 'Sibling node',
+        ok: 'OK',
+        cancel: 'Cancel',
+        minLength: 'Min length',
+        maxLength: 'Max length',
+        pattern: 'MUST be a string and SHOULD be a valid regular expression.',
+        exclusiveMinimum: 'Value strictly less than',
+        exclusiveMaximum: 'Value strictly more than',
+        minimum: 'Min',
+        maximum: 'Max',
+        unique_items: 'Unique Items',
+        min_items: 'MinItems',
+        max_items: 'MaxItems',
+        checked_all: 'Checked All',
+        valid_json: 'Not valid json',
+        enum: 'Enum',
+        enum_msg: 'One value per line',
+        enum_desc: 'desc',
+        enum_desc_msg: "enum description",
+        required: 'required',
+        mock: 'mock',
+        mockLink: 'Help'
+    },
+    zh_CN: {
+        title: '标题',
+        import_json: '导入 json',
+        base_setting: '基础设置',
+        all_setting: '编辑源码',
+        default: '默认值',
+        description: '备注',
+        adv_setting: '高级设置',
+        add_child_node: '添加子节点',
+        add_sibling_node: '添加兄弟节点',
+        add_node: '添加兄弟/子节点',
+        child_node: '子节点',
+        sibling_node: '兄弟节点',
+        ok: '确定',
+        cancel: '取消',
+        minLength: '最小长度',
+        maxLength: '最大长度',
+        pattern: '用正则表达式约束字符串',
+        exclusiveMinimum: '开启后，数据必须大于最小值',
+        exclusiveMaximum: '开启后，数据必须小于最大值',
+        minimum: '最小值',
+        maximum: '最大值',
+        unique_items: '开启后，每个元素都不相同',
+        min_items: '最小元素个数',
+        max_items: '最大元素个数',
+        checked_all: '全选',
+        valid_json: '不是合法的json字符串',
+        enum: '枚举',
+        enum_msg: '每行只能写一个值',
+        enum_desc: '备注',
+        enum_desc_msg: '备注描述信息',
+        required: '是否必须',
+        mock: 'mock',
+        mockLink: '查看文档'
+    }
+};
+function useLocalProvider() {
+    const { locale } = useContext(ConfigProvider.ConfigContext);
+    const langKey = locale?.locale.startsWith('zh') ? 'zh_CN' : 'en_US';
+    return (message)=>langs[langKey][message];
+}
+export { useLocalProvider };

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

@@ -0,0 +1,9 @@
+import { JsonSchema, MockSource } from '../../types';
+interface MockSelectProps {
+    schema: JsonSchema;
+    showEdit: () => void;
+    onChange: (value: string) => void;
+    mock?: MockSource;
+}
+export default function MockSelect({ schema, showEdit, onChange, mock, }: MockSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/MockSelect/index.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { AutoComplete, Button, Space } from "antd";
+import { EditOutlined } from "@ant-design/icons";
+import { useLocalProvider } from "../LocalProvider/index.js";
+function MockSelect({ schema, showEdit, onChange, mock }) {
+    const LocaleProvider = useLocalProvider();
+    const disabled = 'object' === schema.type || 'array' === schema.type;
+    const options = useMemo(()=>(mock || []).map((item)=>({
+                value: item.mock
+            })), [
+        mock
+    ]);
+    return /*#__PURE__*/ jsxs(Space.Compact, {
+        className: "mock-select",
+        children: [
+            /*#__PURE__*/ jsx(AutoComplete, {
+                className: "certain-category-search",
+                style: {
+                    flex: 1
+                },
+                popupMatchSelectWidth: false,
+                options: options,
+                placeholder: LocaleProvider('mock'),
+                filterOption: true,
+                value: schema.mock?.mock,
+                onChange: onChange,
+                disabled: disabled
+            }),
+            /*#__PURE__*/ jsx(Button, {
+                icon: /*#__PURE__*/ jsx(EditOutlined, {}),
+                onClick: (e)=>{
+                    e.stopPropagation();
+                    showEdit();
+                }
+            })
+        ]
+    });
+}
+export default MockSelect;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface MockEditorData {
+    text: string;
+    format: boolean | string;
+    jsonData: Record<string, unknown> | null;
+}
+declare const LanguageMap: Record<string, string>;
+type ModeKey = keyof typeof LanguageMap;
+interface AceEditorProps {
+    data?: string;
+    onChange?: (data: MockEditorData) => void;
+    className?: string;
+    mode?: ModeKey;
+}
+declare const _default: React.NamedExoticComponent<AceEditorProps>;
+export default _default;

package/dist/components/MonacoEditor/index.js

@@ -0,0 +1,77 @@
+import { jsx } from "react/jsx-runtime";
+import react, { useCallback } from "react";
+import _monaco_editor_react, { loader } from "@monaco-editor/react";
+const LanguageMap = {
+    javascript: "javascript",
+    json: 'json',
+    text: 'plaintext',
+    xml: 'xml',
+    html: 'html'
+};
+function buildMockEditorData(text) {
+    try {
+        const jsonData = JSON.parse(text);
+        return {
+            text,
+            format: true,
+            jsonData
+        };
+    } catch (e) {
+        const message = e instanceof Error ? e.message : String(e);
+        return {
+            text,
+            format: message,
+            jsonData: null
+        };
+    }
+}
+const isBrowser = "u" > typeof window;
+const AceEditor = ({ data, onChange, className, mode = 'json' })=>{
+    const handleChange = useCallback((value)=>{
+        const text = value ?? '';
+        onChange?.(buildMockEditorData(text));
+    }, [
+        onChange
+    ]);
+    const handleBeforeMount = useCallback(async ()=>{
+        const monaco = await import("monaco-editor");
+        self.MonacoEnvironment = {
+            getWorker (_moduleId, label) {
+                if ('json' === label) return new Worker(new URL('monaco-editor/esm/vs/language/json/json.worker', import.meta.url));
+                if ('html' === label || 'handlebars' === label || 'razor' === label) return new Worker(new URL('monaco-editor/esm/vs/language/html/html.worker', import.meta.url));
+                if ("typescript" === label || "javascript" === label) return new Worker(new URL("monaco-editor/esm/vs/language/typescript/ts.worker", import.meta.url));
+                return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url));
+            }
+        };
+        loader.config({
+            monaco
+        });
+    }, []);
+    if (!isBrowser) return null;
+    return /*#__PURE__*/ jsx("div", {
+        className: className ?? 'monaco-editor-container',
+        style: className ? void 0 : {
+            width: '100%',
+            height: '200px'
+        },
+        children: /*#__PURE__*/ jsx(_monaco_editor_react, {
+            height: "100%",
+            language: LanguageMap[mode] ?? 'plaintext',
+            value: data ?? '',
+            onChange: handleChange,
+            beforeMount: handleBeforeMount,
+            options: {
+                minimap: {
+                    enabled: false
+                },
+                fontSize: 14,
+                scrollBeyondLastLine: false,
+                automaticLayout: true,
+                tabSize: 2,
+                wordWrap: 'on'
+            }
+        })
+    });
+};
+const MonacoEditor = /*#__PURE__*/ react.memo(AceEditor);
+export default MonacoEditor;

package/dist/components/SchemaComponents/FieldInput.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { InputProps } from 'antd';
+interface FieldInputProps extends Omit<InputProps, 'value' | 'onChange'> {
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export default function FieldInput({ value, onChange, ...restProps }: FieldInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SchemaComponents/FieldInput.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Input } from "antd";
+function FieldInput({ value = '', onChange, ...restProps }) {
+    const [internalValue, setInternalValue] = useState(value);
+    const propsValueRef = useRef(value);
+    const onChangeRef = useRef(onChange);
+    useEffect(()=>{
+        propsValueRef.current = value;
+        setInternalValue(value);
+    }, [
+        value
+    ]);
+    useEffect(()=>{
+        onChangeRef.current = onChange;
+    }, [
+        onChange
+    ]);
+    const handleChange = useCallback((e)=>{
+        setInternalValue(e.target.value);
+    }, []);
+    const handlePressEnter = useCallback((e)=>{
+        if (e.target.value !== propsValueRef.current) onChangeRef.current?.(e);
+    }, []);
+    const handleBlur = useCallback((e)=>{
+        if (e.target.value !== propsValueRef.current) onChangeRef.current?.(e);
+    }, []);
+    return /*#__PURE__*/ jsx(Input, {
+        ...restProps,
+        value: internalValue,
+        onChange: handleChange,
+        onPressEnter: handlePressEnter,
+        onBlur: handleBlur
+    });
+}
+export default FieldInput;

package/dist/components/SchemaComponents/SchemaJson.d.ts

@@ -0,0 +1,36 @@
+import './schemaJson.css';
+import { JsonSchema, MockSource } from '../../types.js';
+/**
+ * 通用属性接口
+ * @property prefix - 当前节点的路径前缀
+ * @property data - 当前节点的 JSON Schema 数据
+ * @property showEdit - 打开备注/mock 编辑弹窗的回调
+ * @property showAdv - 打开高级设置弹窗的回调
+ */
+export interface CommonProps {
+    prefix: string[];
+    data: JsonSchema;
+    showEdit: (prefix: string[], name: string, value: unknown, type: string) => void;
+    showAdv: (prefix: string[], value: unknown) => void;
+    mock?: MockSource;
+}
+export interface SchemaItemProps extends CommonProps {
+    name: string;
+}
+export interface DropPlusProps {
+    prefix: string[];
+    name: string;
+}
+/**
+ * Schema 编辑器入口组件，根据根节点数据类型渲染对应的 Schema 子树
+ * @property data - 根节点的 JSON Schema 数据
+ * @property showEdit - 打开备注/mock 编辑弹窗的回调
+ * @property showAdv - 打开高级设置弹窗的回调
+ */
+export interface SchemaJsonProps {
+    data: JsonSchema;
+    showEdit: (prefix: string[], name: string, value: unknown, type: string) => void;
+    showAdv: (prefix: string[], value: unknown) => void;
+    mock?: MockSource;
+}
+export default function SchemaJson({ data, showEdit, showAdv, mock, }: SchemaJsonProps): import("react/jsx-runtime").JSX.Element;