shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-16 04:27:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

using path instead of pointer, replaced lodash usage

Browse Source
This commit is contained in:
dswbx
2025-02-08 09:18:24 +01:00
parent 2e3ee65aa7
commit f29641c702
11 changed files with 325 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
app/__test__/core/utils.spec.ts
View File

@@ -1,7 +1,6 @@
import { describe, expect, test } from "bun:test";
import { Perf } from "../../src/core/utils";
import * as reqres from "../../src/core/utils/reqres";
import * as strings from "../../src/core/utils/strings";
import * as utils from "../../src/core/utils";
async function wait(ms: number) {
return new Promise((resolve) => {
@@ -13,7 +12,7 @@ describe("Core Utils", async () => {
describe("[core] strings", async () => {
test("objectToKeyValueArray", async () => {
const obj = { a: 1, b: 2, c: 3 };
const result = strings.objectToKeyValueArray(obj);
const result = utils.objectToKeyValueArray(obj);
expect(result).toEqual([
{ key: "a", value: 1 },
{ key: "b", value: 2 },
@@ -22,24 +21,24 @@ describe("Core Utils", async () => {
});
test("snakeToPascalWithSpaces", async () => {
const result = strings.snakeToPascalWithSpaces("snake_to_pascal");
const result = utils.snakeToPascalWithSpaces("snake_to_pascal");
expect(result).toBe("Snake To Pascal");
});
test("randomString", async () => {
const result = strings.randomString(10);
const result = utils.randomString(10);
expect(result).toHaveLength(10);
});
test("pascalToKebab", async () => {
const result = strings.pascalToKebab("PascalCase");
const result = utils.pascalToKebab("PascalCase");
expect(result).toBe("pascal-case");
});
test("replaceSimplePlaceholders", async () => {
const str = "Hello, {$name}!";
const vars = { name: "John" };
const result = strings.replaceSimplePlaceholders(str, vars);
const result = utils.replaceSimplePlaceholders(str, vars);
expect(result).toBe("Hello, John!");
});
});
@@ -49,7 +48,7 @@ describe("Core Utils", async () => {
const headers = new Headers();
headers.append("Content-Type", "application/json");
headers.append("Authorization", "Bearer 123");
const obj = reqres.headersToObject(headers);
const obj = utils.headersToObject(headers);
expect(obj).toEqual({
"content-type": "application/json",
authorization: "Bearer 123"
@@ -59,21 +58,21 @@ describe("Core Utils", async () => {
test("replaceUrlParam", () => {
const url = "/api/:id/:name";
const params = { id: "123", name: "test" };
const result = reqres.replaceUrlParam(url, params);
const result = utils.replaceUrlParam(url, params);
expect(result).toBe("/api/123/test");
});
test("encode", () => {
const obj = { id: "123", name: "test" };
const result = reqres.encodeSearch(obj);
const result = utils.encodeSearch(obj);
expect(result).toBe("id=123&name=test");
const obj2 = { id: "123", name: ["test1", "test2"] };
const result2 = reqres.encodeSearch(obj2);
const result2 = utils.encodeSearch(obj2);
expect(result2).toBe("id=123&name=test1&name=test2");
const obj3 = { id: "123", name: { test: "test" } };
const result3 = reqres.encodeSearch(obj3, { encode: true });
const result3 = utils.encodeSearch(obj3, { encode: true });
expect(result3).toBe("id=123&name=%7B%22test%22%3A%22test%22%7D");
});
});
@@ -108,4 +107,91 @@ describe("Core Utils", async () => {
expect(count).toBe(2);
});
});
describe("objects", () => {
test("omitKeys", () => {
const objects = [
[{ a: 1, b: 2, c: 3 }, ["a"], { b: 2, c: 3 }],
[{ a: 1, b: 2, c: 3 }, ["b"], { a: 1, c: 3 }],
[{ a: 1, b: 2, c: 3 }, ["c"], { a: 1, b: 2 }],
[{ a: 1, b: 2, c: 3 }, ["a", "b"], { c: 3 }],
[{ a: 1, b: 2, c: 3 }, ["a", "b", "c"], {}]
] as [object, string[], object][];
for (const [obj, keys, expected] of objects) {
const result = utils.omitKeys(obj, keys as any);
expect(result).toEqual(expected);
}
});
test("isEqual", () => {
const objects = [
[1, 1, true],
[1, "1", false],
[1, 2, false],
["1", "1", true],
["1", "2", false],
[true, true, true],
[true, false, false],
[false, false, true],
[1, NaN, false],
[NaN, NaN, true],
[null, null, true],
[null, undefined, false],
[undefined, undefined, true],
[new Map([["a", 1]]), new Map([["a", 1]]), true],
[new Map([["a", 1]]), new Map([["a", 2]]), false],
[new Map([["a", 1]]), new Map([["b", 1]]), false],
[
new Map([["a", 1]]),
new Map([
["a", 1],
["b", 2]
]),
false
],
[{ a: 1 }, { a: 1 }, true],
[{ a: 1 }, { a: 2 }, false],
[{ a: 1 }, { b: 1 }, false],
[{ a: "1" }, { a: "1" }, true],
[{ a: "1" }, { a: "2" }, false],
[{ a: "1" }, { b: "1" }, false],
[{ a: 1 }, { a: 1, b: 2 }, false],
[{ a: [1, 2, 3] }, { a: [1, 2, 3] }, true],
[{ a: [1, 2, 3] }, { a: [1, 2, 4] }, false],
[{ a: [1, 2, 3] }, { a: [1, 2, 3, 4] }, false],
[{ a: { b: 1 } }, { a: { b: 1 } }, true],
[{ a: { b: 1 } }, { a: { b: 2 } }, false],
[{ a: { b: 1 } }, { a: { c: 1 } }, false],
[{ a: { b: 1 } }, { a: { b: 1, c: 2 } }, false],
[[1, 2, 3], [1, 2, 3], true],
[[1, 2, 3], [1, 2, 4], false],
[[1, 2, 3], [1, 2, 3, 4], false],
[[{ a: 1 }], [{ a: 1 }], true],
[[{ a: 1 }], [{ a: 2 }], false],
[[{ a: 1 }], [{ b: 1 }], false]
] as [any, any, boolean][];
for (const [a, b, expected] of objects) {
const result = utils.isEqual(a, b);
expect(result).toEqual(expected);
}
});
test("getPath", () => {
const tests = [
[{ a: 1, b: 2, c: 3 }, "a", 1],
[{ a: 1, b: 2, c: 3 }, "b", 2],
[{ a: { b: 1 } }, "a.b", 1],
[{ a: { b: 1 } }, "a.b.c", null, null],
[{ a: { b: 1 } }, "a.b.c", 1, 1],
[[[1]], "0.0", 1]
] as [object, string, any, any][];
for (const [obj, path, expected, defaultValue] of tests) {
const result = utils.getPath(obj, path, defaultValue);
expect(result).toEqual(expected);
}
});
});
});

93
app/__test__/ui/json-form.spec.ts
View File

@@ -2,23 +2,9 @@ import { describe, expect, test } from "bun:test";
import { Draft2019 } from "json-schema-library";
import type { JSONSchema } from "json-schema-to-ts";
import * as utils from "../../src/ui/components/form/json-schema-form/utils";
import type { IsTypeType } from "../../src/ui/components/form/json-schema-form/utils";
describe("json form", () => {
test("normalize path", () => {
const examples = [
["description", "#/description"],
["/description", "#/description"],
["nested/property", "#/nested/property"],
["nested.property", "#/nested/property"],
["nested.property[0]", "#/nested/property/0"],
["nested.property[0].name", "#/nested/property/0/name"]
];
for (const [input, output] of examples) {
expect(utils.normalizePath(input)).toBe(output);
}
});
test("coerse", () => {
const examples = [
["test", { type: "string" }, "test"],
@@ -38,6 +24,25 @@ describe("json form", () => {
}
});
test("isType", () => {
const examples = [
["string", "string", true],
["integer", "number", false],
["number", "number", true],
["boolean", "boolean", true],
["null", "null", true],
["object", "object", true],
["array", "array", true],
["object", "array", false],
[["string", "number"], "number", true],
["number", ["string", "number"], true]
] satisfies [IsTypeType, IsTypeType, boolean][];
for (const [type, schemaType, output] of examples) {
expect(utils.isType(type, schemaType)).toBe(output);
}
});
test("getParentPointer", () => {
const examples = [
["#/nested/property/0/name", "#/nested/property/0"],
@@ -97,49 +102,37 @@ describe("json form", () => {
] satisfies [string, Exclude<JSONSchema, boolean>, boolean][];
for (const [pointer, schema, output] of examples) {
expect(utils.isRequired(pointer, schema)).toBe(output);
expect(utils.isRequired(new Draft2019(schema), pointer, schema)).toBe(output);
}
});
test("unflatten", () => {
test("prefixPath", () => {
const examples = [
[
{ "#/description": "test" },
{
type: "object",
properties: {
description: { type: "string" }
}
},
{
description: "test"
}
]
] satisfies [Record<string, string>, Exclude<JSONSchema, boolean>, object][];
["normal", "", "normal"],
["", "prefix", "prefix"],
["tags", "0", "0.tags"],
["tags", 0, "0.tags"],
["nested.property", "prefix", "prefix.nested.property"],
["nested.property", "", "nested.property"]
] satisfies [string, any, string][];
for (const [input, schema, output] of examples) {
expect(utils.unflatten(input, schema)).toEqual(output);
for (const [path, prefix, output] of examples) {
expect(utils.prefixPath(path, prefix)).toBe(output);
}
});
test("...", () => {
const schema = {
type: "object",
properties: {
name: { type: "string", maxLength: 2 },
description: { type: "string", maxLength: 2 },
age: { type: "number", description: "Age of you" },
deep: {
type: "object",
properties: {
nested: { type: "string", maxLength: 2 }
}
}
},
required: ["description"]
};
test("suffixPath", () => {
const examples = [
["normal", "", "normal"],
["", "suffix", "suffix"],
["tags", "0", "tags.0"],
["tags", 0, "tags.0"],
["nested.property", "suffix", "nested.property.suffix"],
["nested.property", "", "nested.property"]
] satisfies [string, any, string][];
//const lib = new Draft2019(schema);
//lib.eachSchema(console.log);
for (const [path, suffix, output] of examples) {
expect(utils.suffixPath(path, suffix)).toBe(output);
}
});
});

93
app/src/core/utils/objects.ts
View File

@@ -12,6 +12,20 @@ export function isObject(value: unknown): value is Record<string, unknown> {
return value !== null && typeof value === "object";
}
export function omitKeys<T extends object, K extends keyof T>(
obj: T,
keys_: readonly K[]
): Omit<T, Extract<K, keyof T>> {
const keys = new Set(keys_);
const result = {} as Omit<T, Extract<K, keyof T>>;
for (const [key, value] of Object.entries(obj) as [keyof T, T[keyof T]][]) {
if (!keys.has(key as K)) {
(result as any)[key] = value;
}
}
return result;
}
export function safelyParseObjectValues<T extends { [key: string]: any }>(obj: T): T {
return Object.entries(obj).reduce((acc, [key, value]) => {
try {
@@ -266,3 +280,82 @@ export function mergeObjectWith(object, source, customizer) {
return object;
}
export function isEqual(value1: any, value2: any): boolean {
// Each type corresponds to a particular comparison algorithm
const getType = (value: any) => {
if (value !== Object(value)) return "primitive";
if (Array.isArray(value)) return "array";
if (value instanceof Map) return "map";
if (value != null && [null, Object.prototype].includes(Object.getPrototypeOf(value)))
return "plainObject";
if (value instanceof Function) return "function";
throw new Error(
`deeply comparing an instance of type ${value1.constructor?.name} is not supported.`
);
};
const type = getType(value1);
if (type !== getType(value2)) {
return false;
}
if (type === "primitive") {
return value1 === value2 || (Number.isNaN(value1) && Number.isNaN(value2));
} else if (type === "array") {
return (
value1.length === value2.length &&
value1.every((iterValue: any, i: number) => isEqual(iterValue, value2[i]))
);
} else if (type === "map") {
// In this particular implementation, map keys are not
// being deeply compared, only map values.
return (
value1.size === value2.size &&
[...value1].every(([iterKey, iterValue]) => {
return value2.has(iterKey) && isEqual(iterValue, value2.get(iterKey));
})
);
} else if (type === "plainObject") {
const value1AsMap = new Map(Object.entries(value1));
const value2AsMap = new Map(Object.entries(value2));
return (
value1AsMap.size === value2AsMap.size &&
[...value1AsMap].every(([iterKey, iterValue]) => {
return value2AsMap.has(iterKey) && isEqual(iterValue, value2AsMap.get(iterKey));
})
);
} else if (type === "function") {
// just check signature
return value1.toString() === value2.toString();
} else {
throw new Error("Unreachable");
}
}
export function getPath(
object: object,
_path: string | (string | number)[],
defaultValue = undefined
): any {
const path = typeof _path === "string" ? _path.split(/[.\[\]\"]+/).filter((x) => x) : _path;
if (path.length === 0) {
return object;
}
try {
const [head, ...tail] = path;
if (!head || !(head in object)) {
return defaultValue;
}
return getPath(object[head], tail, defaultValue);
} catch (error) {
if (typeof defaultValue !== "undefined") {
return defaultValue;
}
throw new Error(`Invalid path: ${path.join(".")}`);
}
}

1
app/src/media/media-schema.ts
View File

@@ -33,7 +33,6 @@ export function buildMediaSchema() {
{
body_max_size: Type.Optional(
Type.Number({
minimum: 0,
description: "Max size of the body in bytes. Leave blank for unlimited."
})
)

19
app/src/ui/components/form/json-schema-form/AnyOfField.tsx
View File

@@ -5,7 +5,7 @@ import { twMerge } from "tailwind-merge";
import * as Formy from "ui/components/form/Formy";
import { useEvent } from "ui/hooks/use-event";
import { FieldComponent, Field as FormField, type FieldProps as FormFieldProps } from "./Field";
import { FormContextOverride, useDerivedFieldContext } from "./Form";
import { FormContextOverride, useDerivedFieldContext, useFormError } from "./Form";
import { getLabel, getMultiSchemaMatched } from "./utils";
export type AnyOfFieldRootProps = {
@@ -39,19 +39,19 @@ const Root = ({ path = "", schema: _schema, children }: AnyOfFieldRootProps) =>
setValue,
lib,
pointer,
errors,
value: { matchedIndex, schemas },
schema
} = useDerivedFieldContext(path, _schema, (ctx) => {
const [matchedIndex, schemas = []] = getMultiSchemaMatched(ctx.schema, ctx.value);
return { matchedIndex, schemas };
});
const errors = useFormError(path, { strict: true });
if (!schema) return `AnyOfField(${path}): no schema ${pointer}`;
const [_selected, setSelected] = useAtom(selectedAtom);
const selected = _selected !== null ? _selected : matchedIndex > -1 ? matchedIndex : null;
const select = useEvent((index: number | null) => {
setValue(pointer, index !== null ? lib.getTemplate(undefined, schemas[index]) : undefined);
setValue(path, index !== null ? lib.getTemplate(undefined, schemas[index]) : undefined);
setSelected(index);
});
@@ -92,20 +92,20 @@ const Root = ({ path = "", schema: _schema, children }: AnyOfFieldRootProps) =>
const Select = () => {
const { selected, select, path, schema, options, selectSchema } = useAnyOfContext();
function handleSelect(e: ChangeEvent<HTMLInputElement>) {
const handleSelect = useEvent((e: ChangeEvent<HTMLInputElement>) => {
const i = e.target.value ? Number(e.target.value) : null;
select(i);
}
});
const _options = useMemo(() => options.map((label, value) => ({ label, value })), []);
return (
<>
<Formy.Label>
{getLabel(path, schema)} {selected}
</Formy.Label>
<Formy.Label>{getLabel(path, schema)}</Formy.Label>
<FieldComponent
schema={selectSchema as any}
/* @ts-ignore */
options={options.map((label, value) => ({ label, value }))}
options={_options}
onChange={handleSelect}
value={selected ?? undefined}
className="h-8 py-1"
@@ -114,6 +114,7 @@ const Select = () => {
);
};
// @todo: add local validation for AnyOf fields
const Field = ({ name, label, schema, ...props }: Partial<FormFieldProps>) => {
const { selected, selectedSchema, path, errors } = useAnyOfContext();
if (selected === null) return null;

21
app/src/ui/components/form/json-schema-form/ArrayField.tsx
View File

@@ -1,6 +1,5 @@
import { IconLibraryPlus, IconTrash } from "@tabler/icons-react";
import type { JsonSchema } from "json-schema-library";
import { isEqual } from "lodash-es";
import { memo, useMemo } from "react";
import { Button } from "ui/components/buttons/Button";
import { IconButton } from "ui/components/buttons/IconButton";
@@ -8,8 +7,8 @@ import { Dropdown } from "ui/components/overlay/Dropdown";
import { useEvent } from "ui/hooks/use-event";
import { FieldComponent } from "./Field";
import { FieldWrapper } from "./FieldWrapper";
import { useDerivedFieldContext, useFormContext, useFormValue } from "./Form";
import { coerce, getMultiSchema, getMultiSchemaMatched } from "./utils";
import { useDerivedFieldContext, useFormValue } from "./Form";
import { coerce, getMultiSchema, getMultiSchemaMatched, isEqual, suffixPath } from "./utils";
export const ArrayField = ({
path = "",
@@ -59,7 +58,7 @@ const ArrayItem = memo(({ path, index, schema }: any) => {
const { value, ...ctx } = useDerivedFieldContext(path, schema, (ctx) => {
return ctx.value?.[index];
});
const pointer = [path, index].join(".");
const itemPath = suffixPath(path, index);
let subschema = schema.items;
const itemsMultiSchema = getMultiSchema(schema.items);
if (itemsMultiSchema) {
@@ -76,18 +75,18 @@ const ArrayItem = memo(({ path, index, schema }: any) => {
});
const DeleteButton = useMemo(
() => <IconButton Icon={IconTrash} onClick={() => handleDelete(pointer)} size="sm" />,
[pointer]
() => <IconButton Icon={IconTrash} onClick={() => handleDelete(itemPath)} size="sm" />,
[itemPath]
);
return (
<div key={pointer} className="flex flex-row gap-2">
<div key={itemPath} className="flex flex-row gap-2">
<FieldComponent
name={pointer}
name={itemPath}
schema={subschema!}
value={value}
onChange={(e) => {
handleUpdate(pointer, coerce(e.target.value, subschema!));
handleUpdate(itemPath, coerce(e.target.value, subschema!));
}}
className="w-full"
/>
@@ -114,8 +113,8 @@ const ArrayAdd = ({ schema, path }: { schema: JsonSchema; path: string }) => {
const itemsMultiSchema = getMultiSchema(schema.items);
function handleAdd(template?: any) {
const newPointer = `${path}/${currentIndex}`.replace(/\/+/g, "/");
setValue(newPointer, template ?? ctx.lib.getTemplate(undefined, schema!.items));
const newPath = suffixPath(path, currentIndex);
setValue(newPath, template ?? ctx.lib.getTemplate(undefined, schema!.items));
}
if (itemsMultiSchema) {

10
app/src/ui/components/form/json-schema-form/Field.tsx
View File

@@ -17,12 +17,12 @@ export type FieldProps = {
};
export const Field = ({ name, schema: _schema, onChange, label: _label, hidden }: FieldProps) => {
const { pointer, setValue, required, ...ctx } = useDerivedFieldContext(name, _schema);
const { path, setValue, required, ...ctx } = useDerivedFieldContext(name, _schema);
const schema = _schema ?? ctx.schema;
if (!isTypeSchema(schema))
return (
<Pre>
[Field] {pointer} has no schema ({JSON.stringify(schema)})
[Field] {path} has no schema ({JSON.stringify(schema)})
</Pre>
);
@@ -39,9 +39,9 @@ export const Field = ({ name, schema: _schema, onChange, label: _label, hidden }
const handleChange = useEvent((e: ChangeEvent<HTMLInputElement>) => {
const value = coerce(e.target.value, schema as any, { required });
if (typeof value === "undefined" && !required && ctx.options?.keepEmpty !== true) {
ctx.deleteValue(pointer);
ctx.deleteValue(path);
} else {
setValue(pointer, value);
setValue(path, value);
}
});
@@ -68,7 +68,7 @@ export const FieldComponent = ({
schema,
..._props
}: { schema: JsonSchema } & ComponentPropsWithoutRef<"input">) => {
const { value } = useFormValue(_props.name!);
const { value } = useFormValue(_props.name!, { strict: true });
if (!isTypeSchema(schema)) return null;
const props = {
..._props,

53
app/src/ui/components/form/json-schema-form/Form.tsx
View File

@@ -10,7 +10,6 @@ import { selectAtom } from "jotai/utils";
import { Draft2019, type JsonError, type JsonSchema as LibJsonSchema } from "json-schema-library";
import type { TemplateOptions as LibTemplateOptions } from "json-schema-library/dist/lib/getTemplate";
import type { JSONSchema as $JSONSchema, FromSchema } from "json-schema-to-ts";
import { get, isEqual } from "lodash-es";
import * as immutable from "object-path-immutable";
import {
type ComponentPropsWithoutRef,
@@ -27,8 +26,9 @@ import { JsonViewer } from "ui/components/code/JsonViewer";
import { useEvent } from "ui/hooks/use-event";
import { Field } from "./Field";
import {
getPath,
isEqual,
isRequired,
normalizePath,
omitSchema,
pathToPointer,
prefixPath,
@@ -139,25 +139,21 @@ export function Form<
}
}
const setValue = useEvent((pointer: string, value: any) => {
const normalized = normalizePath(pointer);
const key = normalized.substring(2).replace(/\//g, ".");
const setValue = useEvent((path: string, value: any) => {
setFormState((state) => {
const prev = state.data;
const changed = immutable.set(prev, key, value);
onChange?.(changed, key, value);
const changed = immutable.set(prev, path, value);
onChange?.(changed, path, value);
return { ...state, data: changed };
});
check();
});
const deleteValue = useEvent((pointer: string) => {
const normalized = normalizePath(pointer);
const key = normalized.substring(2).replace(/\//g, ".");
const deleteValue = useEvent((path: string) => {
setFormState((state) => {
const prev = state.data;
const changed = immutable.del(prev, key);
onChange?.(changed, key, undefined);
const changed = immutable.del(prev, path);
onChange?.(changed, path, undefined);
return { ...state, data: changed };
});
check();
@@ -191,7 +187,8 @@ export function Form<
schema,
lib,
options,
root: ""
root: "",
path: ""
}),
[schema, initialValues]
) as any;
@@ -245,8 +242,11 @@ export function FormContextOverride({
return <FormContext.Provider value={context}>{children}</FormContext.Provider>;
}
export function useFormValue(name: string) {
export function useFormValue(name: string, opts?: { strict?: boolean }) {
const { _formStateAtom, root } = useFormContext();
if ((typeof name !== "string" || name.length === 0) && opts?.strict === true)
return { value: undefined, errors: [] };
const selected = selectAtom(
_formStateAtom,
useCallback(
@@ -254,7 +254,7 @@ export function useFormValue(name: string) {
const prefixedName = prefixPath(name, root);
const pointer = pathToPointer(prefixedName);
return {
value: get(state.data, prefixedName),
value: getPath(state.data, prefixedName),
errors: state.errors.filter((error) => error.data.pointer.startsWith(pointer))
};
},
@@ -265,7 +265,7 @@ export function useFormValue(name: string) {
return useAtom(selected)[0];
}
export function useFormError(name: string, opt?: { strict?: boolean }) {
export function useFormError(name: string, opt?: { strict?: boolean; debug?: boolean }) {
const { _formStateAtom, root } = useFormContext();
const selected = selectAtom(
_formStateAtom,
@@ -303,12 +303,17 @@ export function useDerivedFieldContext<Data = any, Reduced = undefined>(
FormContext<Data> & {
pointer: string;
required: boolean;
errors: JsonError[];
value: any;
path: string;
},
Reduced
>
): FormContext<Data> & { value: Reduced; pointer: string; required: boolean; errors: JsonError[] } {
): FormContext<Data> & {
value: Reduced;
pointer: string;
required: boolean;
path: string;
} {
const { _formStateAtom, root, lib, ...ctx } = useFormContext();
const schema = _schema ?? ctx.schema;
const selected = selectAtom(
@@ -318,23 +323,23 @@ export function useDerivedFieldContext<Data = any, Reduced = undefined>(
const pointer = pathToPointer(path);
const prefixedName = prefixPath(path, root);
const prefixedPointer = pathToPointer(prefixedName);
const value = get(state.data, prefixedName);
const errors = state.errors.filter((error) =>
const value = getPath(state.data, prefixedName);
/*const errors = state.errors.filter((error) =>
error.data.pointer.startsWith(prefixedPointer)
);
);*/
const fieldSchema =
pointer === "#/"
? (schema as LibJsonSchema)
: lib.getSchema({ pointer, data: value, schema });
const required = isRequired(prefixedPointer, schema, state.data);
const required = isRequired(lib, prefixedPointer, schema, state.data);
const context = {
...ctx,
path: prefixedName,
root,
schema: fieldSchema as LibJsonSchema,
pointer,
required,
errors
required
};
const derived = deriveFn?.({ ...context, _formStateAtom, lib, value });

156
app/src/ui/components/form/json-schema-form/utils.ts
View File

@@ -1,82 +1,10 @@
import { autoFormatString } from "core/utils";
import { Draft2019, type JsonSchema } from "json-schema-library";
import { autoFormatString, omitKeys } from "core/utils";
import { type Draft, Draft2019, type JsonSchema } from "json-schema-library";
import type { JSONSchema } from "json-schema-to-ts";
import type { JSONSchemaType } from "json-schema-to-ts/lib/types/definitions/jsonSchema";
import { omit, set } from "lodash-es";
import type { FormEvent } from "react";
export function getFormTarget(e: FormEvent<HTMLFormElement>) {
const form = e.currentTarget;
const target = e.target as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null;
// check if target has attribute "data-ignore" set
// also check if target is within a "data-ignore" element
if (
!target ||
!form.contains(target) ||
!target.name ||
target.hasAttribute("data-ignore") ||
target.closest("[data-ignore]")
) {
return; // Ignore events from outside the form
}
return target;
}
export function flatten(obj: any, parentKey = "", result: any = {}): any {
for (const key in obj) {
if (key in obj) {
const newKey = parentKey ? `${parentKey}/${key}` : "#/" + key;
if (typeof obj[key] === "object" && obj[key] !== null && !Array.isArray(obj[key])) {
flatten(obj[key], newKey, result);
} else if (Array.isArray(obj[key])) {
obj[key].forEach((item, index) => {
const arrayKey = `${newKey}.${index}`;
if (typeof item === "object" && item !== null) {
flatten(item, arrayKey, result);
} else {
result[arrayKey] = item;
}
});
} else {
result[newKey] = obj[key];
}
}
}
return result;
}
// @todo: make sure it's in the right order
export function unflatten(
obj: Record<string, string>,
schema: JsonSchema,
selections?: Record<string, number | undefined>
) {
const result = {};
const lib = new Draft2019(schema as any);
for (const pointer in obj) {
const required = isRequired(pointer, schema);
let subschema = lib.getSchema({ pointer });
//console.log("subschema", pointer, subschema, selections);
if (!subschema) {
throw new Error(`"${pointer}" not found in schema`);
}
// if subschema starts with "anyOf" or "oneOf"
if (subschema.anyOf || subschema.oneOf) {
const selected = selections?.[pointer];
if (selected !== undefined) {
subschema = subschema.anyOf ? subschema.anyOf[selected] : subschema.oneOf![selected];
}
}
const value = coerce(obj[pointer], subschema as any, { required });
set(result, pointer.substring(2).replace(/\//g, "."), value);
}
return result;
}
export { isEqual, getPath } from "core/utils/objects";
//export { isEqual } from "lodash-es";
export function coerce(value: any, schema: JsonSchema, opts?: { required?: boolean }) {
if (!value && typeof opts?.required === "boolean" && !opts.required) {
@@ -98,25 +26,6 @@ export function coerce(value: any, schema: JsonSchema, opts?: { required?: boole
return value;
}
/**
* normalizes any path to a full json pointer
*
* examples: in -> out
* description -> #/description
* #/description -> #/description
* /description -> #/description
* nested/property -> #/nested/property
* nested.property -> #/nested/property
* nested.property[0] -> #/nested/property/0
* nested.property[0].name -> #/nested/property/0/name
* @param path
*/
export function normalizePath(path: string) {
return path.startsWith("#/")
? path
: `#/${path.replace(/#?\/?/, "").replace(/\./g, "/").replace(/\[/g, "/").replace(/\]/g, "")}`;
}
export function pathToPointer(path: string) {
return "#/" + (path.includes(".") ? path.split(".").join("/") : path);
}
@@ -125,22 +34,28 @@ export function prefixPointer(pointer: string, prefix: string) {
return pointer.replace("#/", `#/${prefix.length > 0 ? prefix + "/" : ""}`).replace(/\/\//g, "/");
}
export function prefixPath(path: string = "", prefix: string = "") {
const PathFilter = (value: any) => typeof value !== "undefined" && value !== null && value !== "";
export function prefixPath(path: string = "", prefix: string | number = "") {
const p = path.includes(".") ? path.split(".") : [path];
return [prefix, ...p].filter(Boolean).join(".");
return [prefix, ...p].filter(PathFilter).join(".");
}
export function suffixPath(path: string = "", suffix: string | number = "") {
const p = path.includes(".") ? path.split(".") : [path];
return [...p, suffix].filter(PathFilter).join(".");
}
export function getParentPointer(pointer: string) {
return pointer.substring(0, pointer.lastIndexOf("/"));
}
export function isRequired(pointer: string, schema: JsonSchema, data?: any) {
export function isRequired(lib: Draft, pointer: string, schema: JsonSchema, data?: any) {
if (pointer === "#/" || !schema) {
return false;
}
const lib = new Draft2019(schema as any);
const childSchema = lib.getSchema({ pointer, data });
const childSchema = lib.getSchema({ pointer, data, schema });
if (typeof childSchema === "object" && "const" in childSchema) {
return true;
}
@@ -152,12 +67,17 @@ export function isRequired(pointer: string, schema: JsonSchema, data?: any) {
return !!required;
}
type TType = JSONSchemaType | JSONSchemaType[] | readonly JSONSchemaType[] | string | undefined;
export function isType(_type: TType, _compare: TType) {
if (!_type || !_compare) return false;
const type = Array.isArray(_type) ? _type : [_type];
const compare = Array.isArray(_compare) ? _compare : [_compare];
return compare.some((t) => type.includes(t));
export type IsTypeType =
| JSONSchemaType
| JSONSchemaType[]
| readonly JSONSchemaType[]
| string
| undefined;
export function isType(type: IsTypeType, compare: IsTypeType) {
if (!type || !compare) return false;
const _type = Array.isArray(type) ? type : [type];
const _compare = Array.isArray(compare) ? compare : [compare];
return _compare.some((t) => _type.includes(t));
}
export function getLabel(name: string, schema: JsonSchema) {
@@ -188,19 +108,6 @@ export function getMultiSchemaMatched(
return [index, multiSchema, multiSchema[index]];
}
export function removeKeyRecursively<Given extends object>(obj: Given, keyToRemove: string): Given {
if (Array.isArray(obj)) {
return obj.map((item) => removeKeyRecursively(item, keyToRemove)) as any;
} else if (typeof obj === "object" && obj !== null) {
return Object.fromEntries(
Object.entries(obj)
.filter(([key]) => key !== keyToRemove)
.map(([key, value]) => [key, removeKeyRecursively(value, keyToRemove)])
) as any;
}
return obj;
}
export function omitSchema<Given extends JSONSchema>(_schema: Given, keys: string[], _data?: any) {
if (typeof _schema !== "object" || !("properties" in _schema) || keys.length === 0)
return [_schema, _data];
@@ -209,13 +116,13 @@ export function omitSchema<Given extends JSONSchema>(_schema: Given, keys: strin
const updated = {
...schema,
properties: omit(schema.properties, keys)
properties: omitKeys(schema.properties, keys)
};
if (updated.required) {
updated.required = updated.required.filter((key) => !keys.includes(key as any));
}
const reducedConfig = omit(data, keys) as any;
const reducedConfig = omitKeys(data, keys) as any;
return [updated, reducedConfig];
}
@@ -223,10 +130,3 @@ export function omitSchema<Given extends JSONSchema>(_schema: Given, keys: strin
export function isTypeSchema(schema?: JsonSchema): schema is JsonSchema {
return typeof schema === "object" && "type" in schema && !isType(schema.type, "error");
}
export function enumToOptions(_enum: any) {
if (!Array.isArray(_enum)) return [];
return _enum.map((v, i) =>
typeof v === "string" ? { value: v, label: v } : { value: i, label: v }
);
}

1
app/src/ui/routes/media/media.settings.tsx
View File

@@ -42,7 +42,6 @@ function MediaSettingsInternal() {
async function onSubmit(data: any) {
console.log("submit", data);
await actions.config.patch(data);
//await new Promise((resolve) => setTimeout(resolve, 1000));
}
return (

25
app/src/ui/routes/test/tests/json-schema-form3.tsx
View File

@@ -36,6 +36,7 @@ export default function JsonSchemaForm3() {
config.media.storage.body_max_size = 1;
schema.media.properties.storage.properties.body_max_size.minimum = 0;
//schema.media.properties.adapter.anyOf[2].properties.config.properties.path.minLength = 1;
return (
<Scrollable>
@@ -239,9 +240,14 @@ export default function JsonSchemaForm3() {
</Form>*/}
{/*<CustomMediaForm />*/}
{/*<Form schema={schema.media} initialValues={config.media} validateOn="change">
<Form
schema={schema.media}
initialValues={config.media as any}
/* validateOn="change"*/
onSubmit={console.log}
>
<Field name="" />
</Form>*/}
</Form>
{/*<Form
schema={removeKeyRecursively(schema.media, "pattern") as any}
@@ -257,20 +263,7 @@ export default function JsonSchemaForm3() {
<AutoForm />
</Form>*/}
<Form
schema={ss}
initialValues={{
name: "Peter",
age: 20,
interested: true,
dinnerTime: "2023-12-31T23:59:59+02:00"
}}
ignoreKeys={["what"]}
onChange={(state) => console.log(state)}
onSubmit={(state) => console.log(state)}
validateOn="change"
options={{ debug: true }}
/>
{/*<Form schema={ss} validateOn="change" />*/}
</div>
</Scrollable>
);