@tyx1703/json-schema-editor-visual 1.0.0

package/dist/components/SchemaComponents/schemaJson.css

@@ -0,0 +1,128 @@
+.json-schema-react-editor .option-formStyle {
+  padding-top: 8px;
+}
+
+.json-schema-react-editor .required-icon {
+  color: red;
+  padding-left: 5px;
+  font-size: 1em;
+  font-weight: bold;
+}
+
+.json-schema-react-editor .object-style {
+  margin-top: 8px;
+  padding-top: 6px;
+}
+
+.json-schema-react-editor .col-item-type {
+  text-align: center;
+}
+
+.json-schema-react-editor .down-style {
+  cursor: pointer;
+}
+
+.json-schema-react-editor .col-item-desc {
+  text-align: center;
+}
+
+.json-schema-react-editor .col-item-mock {
+  text-align: center;
+  padding-right: 6px;
+}
+
+.json-schema-react-editor .col-item-setting {
+  cursor: pointer;
+  padding-left: 6px;
+}
+
+.json-schema-react-editor .plus {
+  color: #2395f1;
+}
+
+.json-schema-react-editor .close {
+  color: #ff561b;
+}
+
+.json-schema-react-editor .array-type {
+  margin-top: 8px;
+}
+
+.json-schema-react-editor .delete-item {
+  padding-right: 8px;
+}
+
+.json-schema-react-editor .object-style .name-item .ant-input-group-addon {
+  background-color: unset;
+  border: unset;
+}
+
+.json-schema-react-editor .object-style .name-item .ant-input-group > .ant-input:first-child, .ant-input-group-addon:first-child {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.json-schema-react-editor .icon-object {
+  color: #0d1b3ea6;
+  font-size: 10px;
+  font-weight: 400;
+}
+
+.json-schema-react-editor .down-style-col {
+  width: 10px;
+}
+
+.json-schema-react-editor .wrapper {
+  padding-left: 8px;
+}
+
+.json-schema-react-editor .adv-set {
+  color: #00a854;
+  padding-right: 8px;
+}
+
+.json-schema-react-editor .type-select-style {
+  width: 90%;
+}
+
+.json-schema-react-editor-import-modal .ant-tabs-nav .ant-tabs-tab {
+  height: auto;
+}
+
+.json-schema-react-editor-adv-modal .other-row {
+  margin-bottom: 16px;
+}
+
+.json-schema-react-editor-adv-modal .other-label {
+  text-align: right;
+  padding-right: 8px;
+}
+
+.json-schema-react-editor-adv-modal .default-setting {
+  border-left: 3px solid #2395f1;
+  margin-bottom: 16px;
+  padding-left: 8px;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.json-schema-react-editor-adv-modal .ant-modal-body {
+  min-height: 400px;
+}
+
+.json-schema-react-editor-adv-modal .ant-modal-body .monaco-editor-container {
+  min-height: 350px;
+}
+
+.json-schema-react-editor-adv-modal-select .format-items-title {
+  color: #999;
+  position: absolute;
+  right: 16px;
+}
+
+.ant-modal-close-x {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+

package/dist/index.css

@@ -0,0 +1,53 @@
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset006pxrgba(255, 0, 0, .3);
+  background: #ffffff1a;
+}
+
+::-webkit-scrollbar-thumb {
+  -webkit-box-shadow: inset006pxrgba(0, 0, 0, .5);
+  background: #0003;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:window-inactive {
+  background: #0003;
+}
+
+.json-schema-react-editor {
+  font-size: 14px;
+}
+
+.json-schema-react-editor .array-item-type {
+  text-align: left;
+}
+
+.json-schema-react-editor .add-btn {
+  margin: 8px;
+}
+
+.json-schema-react-editor .pretty-editor {
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  height: 800px;
+}
+
+.json-schema-react-editor .import-json-button {
+  margin: 5px;
+}
+
+.json-schema-react-editor .mock-select {
+  width: 100%;
+}
+
+.json-schema-react-editor .certain-category-search {
+  flex: 1;
+}
+
+.json-schema-react-editor .certain-category-search .ant-select-search__field__wrap {
+  display: unset;
+}
+

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import { JsonSchemaEditorCoreProps } from './JsonSchemaEditor';
+export default function JsonSchemaEditorVisual(props: JsonSchemaEditorCoreProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Provider } from "react-redux";
+import { createStore } from "./store/index.js";
+import JsonSchemaEditor from "./JsonSchemaEditor.js";
+function JsonSchemaEditorVisual(props) {
+    const store = useMemo(()=>createStore(), []);
+    return /*#__PURE__*/ jsx(Provider, {
+        store: store,
+        children: /*#__PURE__*/ jsx(JsonSchemaEditor, {
+            ...props
+        })
+    });
+}
+export default JsonSchemaEditorVisual;

package/dist/schema.d.ts

@@ -0,0 +1,15 @@
+import type { JsonSchema } from './types';
+/**
+ * Input type for schema handling functions.
+ * Allows missing fields that handleSchema will fill in with defaults.
+ */
+interface SchemaInput {
+    type?: string;
+    title?: string;
+    items?: SchemaInput;
+    properties?: Record<string, SchemaInput>;
+    required?: string[];
+    [key: string]: unknown;
+}
+export declare function handleSchema(schema: SchemaInput): JsonSchema;
+export {};

package/dist/schema.js

@@ -0,0 +1,24 @@
+function handleType(schema) {
+    if (!schema.type && schema.properties && 'object' == typeof schema.properties) schema.type = 'object';
+}
+function handleSchema(schema) {
+    if (schema && !schema.type && !schema.properties) schema.type = 'string';
+    handleType(schema);
+    if ('object' === schema.type) {
+        if (!schema.properties) schema.properties = {};
+        handleObject(schema.properties);
+        return schema;
+    }
+    if ('array' !== schema.type) return schema;
+    if (!schema.items) schema.items = {
+        type: 'string'
+    };
+    return handleSchema(schema.items);
+}
+function handleObject(properties) {
+    for(const key in properties){
+        handleType(properties[key]);
+        if ('array' === properties[key].type || 'object' === properties[key].type) handleSchema(properties[key]);
+    }
+}
+export { handleSchema };

package/dist/store/index.d.ts

@@ -0,0 +1,16 @@
+export declare const createStore: () => import("@reduxjs/toolkit").EnhancedStore<{
+    schema: import("./schemaSlice").SchemaState;
+}, import("@reduxjs/toolkit").UnknownAction, import("@reduxjs/toolkit").Tuple<[import("@reduxjs/toolkit").StoreEnhancer<{
+    dispatch: import("@reduxjs/toolkit").ThunkDispatch<{
+        schema: import("./schemaSlice").SchemaState;
+    }, undefined, import("@reduxjs/toolkit").UnknownAction>;
+}>, import("@reduxjs/toolkit").StoreEnhancer]>>;
+export type Store = ReturnType<typeof createStore>;
+export type RootState = ReturnType<Store['getState']>;
+export type AppDispatch = Store['dispatch'];
+export declare const useAppDispatch: import("react-redux").UseDispatch<import("@reduxjs/toolkit").ThunkDispatch<{
+    schema: import("./schemaSlice").SchemaState;
+}, undefined, import("@reduxjs/toolkit").UnknownAction> & import("@reduxjs/toolkit").Dispatch<import("@reduxjs/toolkit").UnknownAction>>;
+export declare const useAppSelector: import("react-redux").UseSelector<{
+    schema: import("./schemaSlice").SchemaState;
+}>;

package/dist/store/index.js

@@ -0,0 +1,11 @@
+import { configureStore } from "@reduxjs/toolkit";
+import { reducer } from "./schemaSlice.js";
+import { useDispatch, useSelector } from "react-redux";
+const createStore = ()=>configureStore({
+        reducer: {
+            schema: reducer
+        }
+    });
+const useAppDispatch = useDispatch.withTypes();
+const useAppSelector = useSelector.withTypes();
+export { createStore, useAppDispatch, useAppSelector };

package/dist/store/schemaSlice.d.ts

@@ -0,0 +1,49 @@
+import type { JsonSchema } from '../types';
+export interface SchemaState {
+    fieldNum: number;
+    message: string | null;
+    data: JsonSchema;
+    open: Record<string, boolean>;
+}
+interface ChangeEditorSchemaPayload {
+    value: Record<string, unknown>;
+}
+interface ChangeNamePayload {
+    prefix: string[];
+    name: string;
+    value: string;
+}
+interface ChangeValuePayload {
+    key: string[];
+    value: unknown;
+}
+interface ChangeTypePayload {
+    key: string[];
+    value: string;
+}
+interface EnableRequirePayload {
+    prefix: string[];
+    name: string;
+    required: boolean;
+}
+interface RequireAllPayload {
+    required: boolean;
+    value: JsonSchema;
+}
+interface DeleteItemPayload {
+    key: string[];
+}
+interface AddFieldPayload {
+    prefix: string[];
+    name: string;
+}
+interface AddChildFieldPayload {
+    key: string[];
+}
+interface SetOpenValuePayload {
+    key: string[];
+    value?: boolean;
+}
+export declare const reducer: import("@reduxjs/toolkit").Reducer<SchemaState>;
+export declare const changeEditorSchemaAction: import("@reduxjs/toolkit").ActionCreatorWithPayload<ChangeEditorSchemaPayload, "schema/changeEditorSchemaAction">, changeNameAction: import("@reduxjs/toolkit").ActionCreatorWithPayload<ChangeNamePayload, "schema/changeNameAction">, changeValueAction: import("@reduxjs/toolkit").ActionCreatorWithPayload<ChangeValuePayload, "schema/changeValueAction">, changeTypeAction: import("@reduxjs/toolkit").ActionCreatorWithPayload<ChangeTypePayload, "schema/changeTypeAction">, enableRequireAction: import("@reduxjs/toolkit").ActionCreatorWithPayload<EnableRequirePayload, "schema/enableRequireAction">, requireAllAction: import("@reduxjs/toolkit").ActionCreatorWithPayload<RequireAllPayload, "schema/requireAllAction">, deleteItemAction: import("@reduxjs/toolkit").ActionCreatorWithPayload<DeleteItemPayload, "schema/deleteItemAction">, addFieldAction: import("@reduxjs/toolkit").ActionCreatorWithPayload<AddFieldPayload, "schema/addFieldAction">, addChildFieldAction: import("@reduxjs/toolkit").ActionCreatorWithPayload<AddChildFieldPayload, "schema/addChildFieldAction">, setOpenValueAction: import("@reduxjs/toolkit").ActionCreatorWithPayload<SetOpenValuePayload, "schema/setOpenValueAction">;
+export {};

package/dist/store/schemaSlice.js

@@ -0,0 +1,208 @@
+import { createSlice, original } from "@reduxjs/toolkit";
+import { handleSchema } from "../schema.js";
+import * as __rspack_external__utils_js_db66b9f7 from "../utils.js";
+const initialState = {
+    fieldNum: 1,
+    message: null,
+    data: {
+        title: '',
+        type: 'object',
+        description: '',
+        properties: {},
+        required: []
+    },
+    open: {
+        properties: true
+    }
+};
+const schemaSlice = createSlice({
+    name: 'schema',
+    initialState: initialState,
+    reducers: {
+        changeEditorSchemaAction: function(state, action) {
+            const { payload } = action;
+            state.data = handleSchema(payload.value);
+        },
+        changeNameAction: function(state, action) {
+            const { payload } = action;
+            const oldState = original(state);
+            if (!oldState) return;
+            const keys = payload.prefix;
+            const name = payload.name;
+            const value = payload.value;
+            const oldData = oldState.data;
+            const parentKeys = __rspack_external__utils_js_db66b9f7.getParentKeys(keys);
+            const parentData = __rspack_external__utils_js_db66b9f7.getData(oldData, parentKeys);
+            let requiredData = [
+                ...parentData.required ?? []
+            ];
+            const propertiesData = __rspack_external__utils_js_db66b9f7.getData(oldData, keys);
+            const newPropertiesData = {};
+            const curData = propertiesData[name];
+            const openKeys = [
+                ...keys,
+                value,
+                'properties'
+            ].join(__rspack_external__utils_js_db66b9f7.JSONPATH_JOIN_CHAR);
+            const oldOpenKeys = [
+                ...keys,
+                name,
+                'properties'
+            ].join(__rspack_external__utils_js_db66b9f7.JSONPATH_JOIN_CHAR);
+            if (curData.properties) {
+                delete state.open[oldOpenKeys];
+                state.open[openKeys] = true;
+            }
+            if (propertiesData[value] && 'object' == typeof propertiesData[value]) return;
+            requiredData = requiredData.map((item)=>{
+                if (item === name) return value;
+                return item;
+            });
+            parentKeys.push('required');
+            __rspack_external__utils_js_db66b9f7.setData(state.data, parentKeys, requiredData);
+            for(const i in propertiesData)if (i === name) newPropertiesData[value] = propertiesData[i];
+            else newPropertiesData[i] = propertiesData[i];
+            __rspack_external__utils_js_db66b9f7.setData(state.data, keys, newPropertiesData);
+        },
+        changeValueAction: function(state, action) {
+            const { payload } = action;
+            const keys = payload.key;
+            if (payload.value) __rspack_external__utils_js_db66b9f7.setData(state.data, keys, payload.value);
+            else __rspack_external__utils_js_db66b9f7.deleteData(state.data, keys);
+        },
+        changeTypeAction: function(state, action) {
+            const { payload } = action;
+            const oldState = original(state);
+            if (!oldState) return;
+            const keys = payload.key;
+            const value = payload.value;
+            const parentKeys = __rspack_external__utils_js_db66b9f7.getParentKeys(keys);
+            const oldData = oldState.data;
+            const parentData = __rspack_external__utils_js_db66b9f7.getData(oldData, parentKeys);
+            if (parentData.type === value) return;
+            const newParentDataItem = __rspack_external__utils_js_db66b9f7.defaultSchema[value];
+            const parentDataItem = parentData.description ? {
+                description: parentData.description
+            } : {};
+            const newParentData = Object.assign({}, newParentDataItem, parentDataItem);
+            const newKeys = [
+                'data',
+                ...parentKeys
+            ];
+            __rspack_external__utils_js_db66b9f7.setData(state, newKeys, newParentData);
+        },
+        enableRequireAction: function(state, action) {
+            const { payload } = action;
+            const oldState = original(state);
+            if (!oldState) return;
+            const keys = payload.prefix;
+            const parentKeys = __rspack_external__utils_js_db66b9f7.getParentKeys(keys);
+            const oldData = oldState.data;
+            const parentData = __rspack_external__utils_js_db66b9f7.getData(oldData, parentKeys);
+            const requiredData = [
+                ...parentData.required ?? []
+            ];
+            const index = requiredData.indexOf(payload.name);
+            if (!payload.required && index >= 0) {
+                requiredData.splice(index, 1);
+                parentKeys.push('required');
+                if (0 === requiredData.length) __rspack_external__utils_js_db66b9f7.deleteData(state.data, parentKeys);
+                else __rspack_external__utils_js_db66b9f7.setData(state.data, parentKeys, requiredData);
+            } else if (payload.required && -1 === index) {
+                requiredData.push(payload.name);
+                parentKeys.push('required');
+                __rspack_external__utils_js_db66b9f7.setData(state.data, parentKeys, requiredData);
+            }
+        },
+        requireAllAction: function(state, action) {
+            const { payload } = action;
+            const oldState = original(state);
+            if (!oldState) return;
+            const data = __rspack_external__utils_js_db66b9f7.cloneObject(payload.value);
+            __rspack_external__utils_js_db66b9f7.handleSchemaRequired(data, payload.required);
+            state.data = data;
+        },
+        deleteItemAction: function(state, action) {
+            const { payload } = action;
+            const oldState = original(state);
+            if (!oldState) return;
+            const keys = payload.key;
+            const name = keys[keys.length - 1];
+            const oldData = oldState.data;
+            const parentKeys = __rspack_external__utils_js_db66b9f7.getParentKeys(keys);
+            const parentData = __rspack_external__utils_js_db66b9f7.getData(oldData, parentKeys);
+            const newParentData = {};
+            for(const i in parentData)if (i !== name) newParentData[i] = parentData[i];
+            __rspack_external__utils_js_db66b9f7.setData(state.data, parentKeys, newParentData);
+        },
+        addFieldAction: function(state, action) {
+            const { payload } = action;
+            const oldState = original(state);
+            if (!oldState) return;
+            const keys = payload.prefix;
+            const oldData = oldState.data;
+            const name = payload.name;
+            const propertiesData = __rspack_external__utils_js_db66b9f7.getData(oldData, keys);
+            let newPropertiesData = {};
+            const parentKeys = __rspack_external__utils_js_db66b9f7.getParentKeys(keys);
+            const parentData = __rspack_external__utils_js_db66b9f7.getData(oldData, parentKeys);
+            const requiredData = [
+                ...parentData.required ?? []
+            ];
+            if (name) for(const i in propertiesData){
+                newPropertiesData[i] = propertiesData[i];
+                if (i === name) {
+                    const ranName = 'field_' + state.fieldNum++;
+                    newPropertiesData[ranName] = __rspack_external__utils_js_db66b9f7.defaultSchema.string;
+                    requiredData.push(ranName);
+                }
+            }
+            else {
+                newPropertiesData = Object.assign({}, propertiesData);
+                const ranName = 'field_' + state.fieldNum++;
+                newPropertiesData[ranName] = __rspack_external__utils_js_db66b9f7.defaultSchema.string;
+                requiredData.push(ranName);
+            }
+            __rspack_external__utils_js_db66b9f7.setData(state.data, keys, newPropertiesData);
+            parentKeys.push('required');
+            __rspack_external__utils_js_db66b9f7.setData(state.data, parentKeys, requiredData);
+        },
+        addChildFieldAction: function(state, action) {
+            const { payload } = action;
+            const oldState = original(state);
+            if (!oldState) return;
+            const keys = payload.key;
+            const oldData = oldState.data;
+            const propertiesData = __rspack_external__utils_js_db66b9f7.getData(oldData, keys);
+            let newPropertiesData = {};
+            newPropertiesData = Object.assign({}, propertiesData);
+            const ranName = 'field_' + state.fieldNum++;
+            newPropertiesData[ranName] = __rspack_external__utils_js_db66b9f7.defaultSchema.string;
+            __rspack_external__utils_js_db66b9f7.setData(state.data, keys, newPropertiesData);
+            const parentKeys = __rspack_external__utils_js_db66b9f7.getParentKeys(keys);
+            const parentData = __rspack_external__utils_js_db66b9f7.getData(oldData, parentKeys);
+            const requiredData = [
+                ...parentData.required ?? []
+            ];
+            requiredData.push(ranName);
+            parentKeys.push('required');
+            __rspack_external__utils_js_db66b9f7.setData(state.data, parentKeys, requiredData);
+        },
+        setOpenValueAction: function(state, action) {
+            const { payload } = action;
+            const oldState = original(state);
+            if (!oldState) return;
+            const keys = payload.key.join(__rspack_external__utils_js_db66b9f7.JSONPATH_JOIN_CHAR);
+            let status;
+            status = __rspack_external__utils_js_db66b9f7.isNil(payload.value) ? !__rspack_external__utils_js_db66b9f7.getData(oldState.open, [
+                keys
+            ]) : payload.value;
+            __rspack_external__utils_js_db66b9f7.setData(state.open, [
+                keys
+            ], status);
+        }
+    }
+});
+const { reducer: reducer } = schemaSlice;
+const { changeEditorSchemaAction: changeEditorSchemaAction, changeNameAction: changeNameAction, changeValueAction: changeValueAction, changeTypeAction: changeTypeAction, enableRequireAction: enableRequireAction, requireAllAction: requireAllAction, deleteItemAction: deleteItemAction, addFieldAction: addFieldAction, addChildFieldAction: addChildFieldAction, setOpenValueAction: setOpenValueAction } = schemaSlice.actions;
+export { addChildFieldAction, addFieldAction, changeEditorSchemaAction, changeNameAction, changeTypeAction, changeValueAction, deleteItemAction, enableRequireAction, reducer, requireAllAction, setOpenValueAction };

package/dist/types.d.ts

@@ -0,0 +1,56 @@
+export type Format = {
+    name: string;
+    title?: string;
+}[];
+export type MockSource = {
+    name: string;
+    mock: string;
+}[];
+/**
+ * Discriminated union JSON Schema types
+ */
+interface JsonSchemaBase {
+    title?: string;
+    description?: string;
+    enumDesc?: string;
+    mock?: {
+        mock: string;
+    };
+    items?: JsonSchema;
+    properties?: Record<string, JsonSchema>;
+    required?: string[];
+    [key: string]: unknown;
+}
+export interface JsonSchemaString extends JsonSchemaBase {
+    type: 'string';
+    default?: string;
+    enum?: string[];
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+    format?: string;
+}
+export interface JsonSchemaNumber extends JsonSchemaBase {
+    type: 'number' | 'integer';
+    default?: number;
+    enum?: number[];
+    minimum?: number;
+    maximum?: number;
+    exclusiveMinimum?: boolean;
+    exclusiveMaximum?: boolean;
+}
+export interface JsonSchemaBoolean extends JsonSchemaBase {
+    type: 'boolean';
+    default?: boolean;
+}
+export interface JsonSchemaArray extends JsonSchemaBase {
+    type: 'array';
+    uniqueItems?: boolean;
+    minItems?: number;
+    maxItems?: number;
+}
+export interface JsonSchemaObject extends JsonSchemaBase {
+    type: 'object';
+}
+export type JsonSchema = JsonSchemaString | JsonSchemaNumber | JsonSchemaBoolean | JsonSchemaArray | JsonSchemaObject;
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,31 @@
+import { Format, JsonSchema } from './types';
+export declare const JSONPATH_JOIN_CHAR = ".";
+export declare const format: Format;
+export declare const SCHEMA_TYPE: readonly ["string", "number", "array", "object", "boolean", "integer"];
+export declare const defaultSchema: Record<string, JsonSchema>;
+export declare const debounce: <T extends (...args: unknown[]) => unknown>(func: T, wait: number) => ((...args: Parameters<T>) => void);
+export declare function getData(state: Record<string, unknown>, keys: PropertyKey[]): unknown;
+export declare function setData(state: Record<string, unknown>, keys: PropertyKey[], value: unknown): void;
+export declare function deleteData(state: Record<string, unknown>, keys: PropertyKey[]): void;
+export declare function getParentKeys<T>(keys: T[]): T[];
+export declare function clearSomeFields<T extends Record<string, unknown>>(keys: string[], data: T): T;
+export declare function handleSchemaRequired(schema: JsonSchema, checked: boolean): JsonSchema | void;
+/**
+ * 检查值是否为 null 或 undefined
+ * @param value - 要检查的值
+ * @returns 当值为 null 或 undefined 时返回 true，否则返回 false
+ * @example
+ * isNil(null)      // true
+ * isNil(undefined) // true
+ * isNil(0)         // false
+ * isNil('')        // false
+ */
+export declare function isNil(value: unknown): value is null | undefined;
+/**
+ * 深度比较两个值是否相等
+ * @param a - 第一个值
+ * @param b - 第二个值
+ * @returns 两个值深度相等时返回 true
+ */
+export declare function isEqual(a: unknown, b: unknown): boolean;
+export declare function cloneObject<T>(obj: T): T;