shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-15 20:17:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

form rerenders optimized

Browse Source
This commit is contained in:
dswbx
2025-02-07 16:11:21 +01:00
parent 02e7e1ca95
commit 324d641410
15 changed files with 546 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/src/ui/components/form/Formy/components.tsx
View File

@@ -189,7 +189,7 @@ export const Switch = forwardRef<
>(({ type, ...props }, ref) => {
return (
<RadixSwitch.Root
className="relative h-7 w-12 p-[2px] cursor-pointer rounded-full bg-muted/50 border border-muted outline-none data-[state=checked]:bg-primary appearance-none transition-colors hover:bg-muted/80"
className="relative h-7 w-12 p-[2px] cursor-pointer rounded-full bg-muted border border-primary/10 outline-none data-[state=checked]:bg-primary/75 appearance-none transition-colors hover:bg-muted/80"
onCheckedChange={(bool) => {
props.onChange?.({ target: { value: bool } });
}}
@@ -229,7 +229,7 @@ export const Select = forwardRef<
<>
{!props.required && <option value="" />}
{options
.map((o, i) => {
.map((o) => {
if (typeof o !== "object") {
return { value: o, label: String(o) };
}
@@ -246,7 +246,10 @@ export const Select = forwardRef<
)}
</select>
{!props.multiple && (
<TbChevronDown className="absolute right-3 top-0 bottom-0 h-full opacity-70" size={18} />
<TbChevronDown
className="absolute right-3 top-0 bottom-0 h-full opacity-70 pointer-events-none"
size={18}
/>
)}
</div>
));

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

@@ -1,28 +1,29 @@
import type { JsonError } from "json-schema-library";
import type { JSONSchema } from "json-schema-to-ts";
import { type ChangeEvent, type ReactNode, createContext, useContext, useState } from "react";
import { atom, useAtom } from "jotai";
import type { JsonError, JsonSchema } from "json-schema-library";
import { type ChangeEvent, type ReactNode, createContext, useContext, useMemo } from "react";
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, useFieldContext } from "./Form";
import { FormContextOverride, useDerivedFieldContext } from "./Form";
import { getLabel, getMultiSchemaMatched } from "./utils";
export type AnyOfFieldRootProps = {
path?: string;
schema?: Exclude<JSONSchema, boolean>;
schema?: JsonSchema;
children: ReactNode;
};
export type AnyOfFieldContext = {
path: string;
schema: Exclude<JSONSchema, boolean>;
schemas?: JSONSchema[];
selectedSchema?: Exclude<JSONSchema, boolean>;
schema: JsonSchema;
schemas?: JsonSchema[];
selectedSchema?: JsonSchema;
selected: number | null;
select: (index: number | null) => void;
options: string[];
errors: JsonError[];
selectSchema: JSONSchema;
selectSchema: JsonSchema;
};
const AnyOfContext = createContext<AnyOfFieldContext>(undefined!);
@@ -31,61 +32,80 @@ export const useAnyOfContext = () => {
return useContext(AnyOfContext);
};
const selectedAtom = atom<number | null>(null);
const Root = ({ path = "", schema: _schema, children }: AnyOfFieldRootProps) => {
const { setValue, pointer, lib, value, errors, ...ctx } = useFieldContext(path);
const schema = _schema ?? ctx.schema;
const {
setValue,
lib,
pointer,
errors,
value: { matchedIndex, schemas },
schema
} = useDerivedFieldContext(path, _schema, (ctx) => {
const [matchedIndex, schemas = []] = getMultiSchemaMatched(ctx.schema, ctx.value);
return { matchedIndex, schemas };
});
if (!schema) return `AnyOfField(${path}): no schema ${pointer}`;
const [matchedIndex, schemas = []] = getMultiSchemaMatched(schema, value);
const [selected, setSelected] = useState<number | null>(matchedIndex > -1 ? matchedIndex : null);
const options = schemas.map((s, i) => s.title ?? `Option ${i + 1}`);
const selectSchema = {
type: "string",
enum: options
} satisfies JSONSchema;
//console.log("AnyOf:root", { value, matchedIndex, selected, schema });
const [_selected, setSelected] = useAtom(selectedAtom);
const selected = _selected !== null ? _selected : matchedIndex > -1 ? matchedIndex : null;
const selectedSchema =
selected !== null ? (schemas[selected] as Exclude<JSONSchema, boolean>) : undefined;
function select(index: number | null) {
const select = useEvent((index: number | null) => {
setValue(pointer, index !== null ? lib.getTemplate(undefined, schemas[index]) : undefined);
setSelected(index);
}
});
const context = useMemo(() => {
const options = schemas.map((s, i) => s.title ?? `Option ${i + 1}`);
const selectSchema = {
type: "string",
enum: options
} satisfies JsonSchema;
const selectedSchema = selected !== null ? (schemas[selected] as JsonSchema) : undefined;
return {
options,
selectSchema,
selectedSchema,
schema,
schemas,
selected
};
}, [selected]);
return (
<AnyOfContext.Provider
key={selected}
value={{
selected,
...context,
select,
options,
selectSchema,
path,
schema,
schemas,
selectedSchema,
errors
}}
>
{/*<pre>{JSON.stringify({ value, selected, errors: errors.length }, null, 2)}</pre>*/}
{children}
</AnyOfContext.Provider>
);
};
const Select = () => {
const { selected, select, path, schema, selectSchema } = useAnyOfContext();
const { selected, select, path, schema, options, selectSchema } = useAnyOfContext();
function handleSelect(e: ChangeEvent<HTMLInputElement>) {
//console.log("selected", e.target.value);
const i = e.target.value ? Number(e.target.value) : null;
select(i);
}
return (
<>
<Formy.Label>{getLabel(path, schema)}</Formy.Label>
<Formy.Label>
{getLabel(path, schema)} {selected}
</Formy.Label>
<FieldComponent
schema={selectSchema as any}
/* @ts-ignore */
options={options.map((label, value) => ({ label, value }))}
onChange={handleSelect}
value={selected ?? undefined}
className="h-8 py-1"
@@ -94,11 +114,11 @@ const Select = () => {
);
};
const Field = ({ name, label, ...props }: Partial<FormFieldProps>) => {
const Field = ({ name, label, schema, ...props }: Partial<FormFieldProps>) => {
const { selected, selectedSchema, path, errors } = useAnyOfContext();
if (selected === null) return null;
return (
<FormContextOverride path={path} schema={selectedSchema} overrideData>
<FormContextOverride prefix={path} schema={selectedSchema}>
<div className={twMerge(errors.length > 0 && "bg-red-500/10")}>
<FormField key={`${path}_${selected}`} name={""} label={false} {...props} />
</div>

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

@@ -1,49 +1,33 @@
import { IconLibraryPlus, IconTrash } from "@tabler/icons-react";
import type { JSONSchema } from "json-schema-to-ts";
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";
import * as Formy from "ui/components/form/Formy";
import { Dropdown } from "ui/components/overlay/Dropdown";
import { useEvent } from "ui/hooks/use-event";
import { FieldComponent } from "./Field";
import { FieldWrapper } from "./FieldWrapper";
import { useFieldContext } from "./Form";
import { useDerivedFieldContext, useFormContext, useFormValue } from "./Form";
import { coerce, getMultiSchema, getMultiSchemaMatched } from "./utils";
export const ArrayField = ({
path = "",
schema: _schema
}: { path?: string; schema?: Exclude<JSONSchema, boolean> }) => {
const { setValue, value, pointer, required, ...ctx } = useFieldContext(path);
}: { path?: string; schema?: JsonSchema }) => {
const { setValue, pointer, required, ...ctx } = useDerivedFieldContext(path, _schema);
const schema = _schema ?? ctx.schema;
if (!schema || typeof schema === "undefined") return `ArrayField(${path}): no schema ${pointer}`;
const itemsMultiSchema = getMultiSchema(schema.items);
function handleAdd(template?: any) {
const currentIndex = value?.length ?? 0;
const newPointer = `${path}/${currentIndex}`.replace(/\/+/g, "/");
setValue(newPointer, template ?? ctx.lib.getTemplate(undefined, schema!.items));
}
function handleUpdate(pointer: string, value: any) {
setValue(pointer, value);
}
function handleDelete(pointer: string) {
return () => {
ctx.deleteValue(pointer);
};
}
// if unique items with enum
if (schema.uniqueItems && typeof schema.items === "object" && "enum" in schema.items) {
return (
<FieldWrapper pointer={path} schema={schema} wrapper="fieldset">
<FieldWrapper name={path} schema={schema} wrapper="fieldset">
<FieldComponent
required
name={path}
schema={schema.items}
multiple
value={value}
className="h-auto"
onChange={(e: any) => {
// @ts-ignore
@@ -56,48 +40,101 @@ export const ArrayField = ({
}
return (
<FieldWrapper pointer={path} schema={schema} wrapper="fieldset">
{value?.map((v, index: number) => {
const pointer = `${path}/${index}`.replace(/\/+/g, "/");
let subschema = schema.items;
if (itemsMultiSchema) {
const [, , _subschema] = getMultiSchemaMatched(schema.items, v);
subschema = _subschema;
<FieldWrapper name={path} schema={schema} wrapper="fieldset">
<ArrayIterator name={path}>
{({ value }) =>
value?.map((v, index: number) => (
<ArrayItem key={index} path={path} index={index} schema={schema} />
))
}
return (
<div key={pointer} className="flex flex-row gap-2">
<FieldComponent
name={pointer}
schema={subschema!}
value={v}
onChange={(e) => {
handleUpdate(pointer, coerce(e.target.value, subschema!));
}}
className="w-full"
/>
<IconButton Icon={IconTrash} onClick={handleDelete(pointer)} size="sm" />
</div>
);
})}
</ArrayIterator>
<div className="flex flex-row">
{itemsMultiSchema ? (
<Dropdown
dropdownWrapperProps={{
className: "min-w-0"
}}
items={itemsMultiSchema.map((s, i) => ({
label: s!.title ?? `Option ${i + 1}`,
onClick: () => handleAdd(ctx.lib.getTemplate(undefined, s!))
}))}
onClickItem={console.log}
>
<Button IconLeft={IconLibraryPlus}>Add</Button>
</Dropdown>
) : (
<Button onClick={() => handleAdd()}>Add</Button>
)}
<ArrayAdd path={path} schema={schema} />
</div>
</FieldWrapper>
);
};
const ArrayItem = memo(({ path, index, schema }: any) => {
const { value, ...ctx } = useDerivedFieldContext(path, schema, (ctx) => {
return ctx.value?.[index];
});
const pointer = [path, index].join(".");
let subschema = schema.items;
const itemsMultiSchema = getMultiSchema(schema.items);
if (itemsMultiSchema) {
const [, , _subschema] = getMultiSchemaMatched(schema.items, value);
subschema = _subschema;
}
const handleUpdate = useEvent((pointer: string, value: any) => {
ctx.setValue(pointer, value);
});
const handleDelete = useEvent((pointer: string) => {
ctx.deleteValue(pointer);
});
const DeleteButton = useMemo(
() => <IconButton Icon={IconTrash} onClick={() => handleDelete(pointer)} size="sm" />,
[pointer]
);
return (
<div key={pointer} className="flex flex-row gap-2">
<FieldComponent
name={pointer}
schema={subschema!}
value={value}
onChange={(e) => {
handleUpdate(pointer, coerce(e.target.value, subschema!));
}}
className="w-full"
/>
{DeleteButton}
</div>
);
}, isEqual);
const ArrayIterator = memo(
({ name, children }: any) => {
return children(useFormValue(name));
},
(prev, next) => prev.value.length === next.value.length
);
const ArrayAdd = ({ schema, path }: { schema: JsonSchema; path: string }) => {
const {
setValue,
value: { currentIndex },
...ctx
} = useDerivedFieldContext(path, schema, (ctx) => {
return { currentIndex: ctx.value?.length ?? 0 };
});
const itemsMultiSchema = getMultiSchema(schema.items);
function handleAdd(template?: any) {
//const currentIndex = value?.length ?? 0;
const newPointer = `${path}/${currentIndex}`.replace(/\/+/g, "/");
setValue(newPointer, template ?? ctx.lib.getTemplate(undefined, schema!.items));
}
if (itemsMultiSchema) {
return (
<Dropdown
dropdownWrapperProps={{
className: "min-w-0"
}}
items={itemsMultiSchema.map((s, i) => ({
label: s!.title ?? `Option ${i + 1}`,
onClick: () => handleAdd(ctx.lib.getTemplate(undefined, s!))
}))}
onClickItem={console.log}
>
<Button IconLeft={IconLibraryPlus}>Add</Button>
</Dropdown>
);
}
return <Button onClick={() => handleAdd()}>Add</Button>;
};

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

@@ -1,26 +1,30 @@
import type { JSONSchema } from "json-schema-to-ts";
import type { JsonSchema } from "json-schema-library";
import type { ChangeEvent, ComponentPropsWithoutRef } from "react";
import * as Formy from "ui/components/form/Formy";
import { useEvent } from "ui/hooks/use-event";
import { ArrayField } from "./ArrayField";
import { FieldWrapper } from "./FieldWrapper";
import { useFieldContext } from "./Form";
import { useDerivedFieldContext, useFormValue } from "./Form";
import { ObjectField } from "./ObjectField";
import { coerce, enumToOptions, isType, isTypeSchema } from "./utils";
import { coerce, isType, isTypeSchema } from "./utils";
export type FieldProps = {
name: string;
schema?: Exclude<JSONSchema, boolean>;
schema?: JsonSchema;
onChange?: (e: ChangeEvent<any>) => void;
label?: string | false;
hidden?: boolean;
};
export const Field = ({ name, schema: _schema, onChange, label: _label, hidden }: FieldProps) => {
const { pointer, value, errors, setValue, required, ...ctx } = useFieldContext(name);
const { pointer, setValue, required, ...ctx } = useDerivedFieldContext(name, _schema);
const schema = _schema ?? ctx.schema;
if (!isTypeSchema(schema)) return <Pre>{pointer} has no schema</Pre>;
//console.log("field", name, schema);
if (!isTypeSchema(schema))
return (
<Pre>
[Field] {pointer} has no schema ({JSON.stringify(schema)})
</Pre>
);
if (isType(schema.type, "object")) {
return <ObjectField path={name} schema={schema} />;
@@ -31,39 +35,23 @@ export const Field = ({ name, schema: _schema, onChange, label: _label, hidden }
}
const disabled = schema.readOnly ?? "const" in schema ?? false;
//console.log("field", name, disabled, schema, ctx.schema, _schema);
const handleChange = useEvent((e: ChangeEvent<HTMLInputElement>) => {
// don't remove for now, causes issues in anyOf
/*const value = coerce(e.target.value, schema as any);
setValue(pointer, value as any);*/
const value = coerce(e.target.value, schema as any, { required });
//console.log("handleChange", pointer, e.target.value, { value }, ctx.options);
if (typeof value === "undefined" && !required && ctx.options?.keepEmpty !== true) {
ctx.deleteValue(pointer);
} else {
//console.log("setValue", pointer, value);
setValue(pointer, value);
}
});
return (
<FieldWrapper
pointer={pointer}
label={_label}
required={required}
errors={errors}
schema={schema}
debug={{ value }}
hidden={hidden}
>
<FieldWrapper name={name} label={_label} required={required} schema={schema} hidden={hidden}>
<FieldComponent
schema={schema}
name={pointer}
name={name}
required={required}
disabled={disabled}
value={value}
onChange={onChange ?? handleChange}
/>
</FieldWrapper>
@@ -71,19 +59,25 @@ export const Field = ({ name, schema: _schema, onChange, label: _label, hidden }
};
export const Pre = ({ children }) => (
<pre className="dark:bg-red-950 bg-red-100 rounded-md px-3 py-1.5">{children}</pre>
<pre className="dark:bg-red-950 bg-red-100 rounded-md px-3 py-1.5 text-wrap whitespace-break-spaces break-all">
{children}
</pre>
);
export const FieldComponent = ({
schema,
...props
}: { schema: JSONSchema } & ComponentPropsWithoutRef<"input">) => {
..._props
}: { schema: JsonSchema } & ComponentPropsWithoutRef<"input">) => {
const { value } = useFormValue(_props.name!);
if (!isTypeSchema(schema)) return null;
const props = {
..._props,
// allow override
value: typeof _props.value !== "undefined" ? _props.value : value
};
if (schema.enum) {
return (
<Formy.Select id={props.name} {...(props as any)} options={enumToOptions(schema.enum)} />
);
return <Formy.Select id={props.name} options={schema.enum} {...(props as any)} />;
}
if (isType(schema.type, ["number", "integer"])) {
@@ -91,7 +85,7 @@ export const FieldComponent = ({
}
if (isType(schema.type, "boolean")) {
return <Formy.Switch id={props.name} {...(props as any)} checked={props.value as any} />;
return <Formy.Switch id={props.name} {...(props as any)} checked={value as any} />;
}
return <Formy.Input id={props.name} {...props} value={props.value ?? ""} />;

22
app/src/ui/components/form/json-schema-form/FieldWrapper.tsx
View File

@@ -1,19 +1,18 @@
import { Popover } from "@mantine/core";
import { IconBug } from "@tabler/icons-react";
import type { JsonError } from "json-schema-library";
import type { JSONSchema } from "json-schema-to-ts";
import type { JsonSchema } from "json-schema-library";
import { Children, type ReactElement, type ReactNode, cloneElement, isValidElement } from "react";
import { IconButton } from "ui/components/buttons/IconButton";
import { JsonViewer } from "ui/components/code/JsonViewer";
import * as Formy from "ui/components/form/Formy";
import { useFormError } from "ui/components/form/json-schema-form/Form";
import { getLabel } from "./utils";
export type FieldwrapperProps = {
pointer: string;
name: string;
label?: string | false;
required?: boolean;
errors?: JsonError[];
schema?: Exclude<JSONSchema, boolean>;
schema?: JsonSchema;
debug?: object | boolean;
wrapper?: "group" | "fieldset";
hidden?: boolean;
@@ -21,21 +20,20 @@ export type FieldwrapperProps = {
};
export function FieldWrapper({
pointer,
name,
label: _label,
required,
errors = [],
schema,
debug,
wrapper,
hidden,
children
}: FieldwrapperProps) {
const errors = useFormError(name, { strict: true });
const examples = schema?.examples || [];
const examplesId = `${pointer}-examples`;
const examplesId = `${name}-examples`;
const description = schema?.description;
const label =
typeof _label !== "undefined" ? _label : schema ? getLabel(pointer, schema) : pointer;
const label = typeof _label !== "undefined" ? _label : schema ? getLabel(name, schema) : name;
return (
<Formy.Group
@@ -54,7 +52,7 @@ export function FieldWrapper({
<JsonViewer
json={{
...(typeof debug === "object" ? debug : {}),
pointer,
name,
required,
schema,
errors
@@ -70,7 +68,7 @@ export function FieldWrapper({
{label && (
<Formy.Label
as={wrapper === "fieldset" ? "legend" : "label"}
htmlFor={pointer}
htmlFor={name}
className="self-start"
>
{label} {required && <span className="font-medium opacity-30">*</span>}

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

@@ -1,8 +1,14 @@
import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
import {
type PrimitiveAtom,
atom,
getDefaultStore,
useAtom,
useAtomValue,
useSetAtom
} from "jotai";
import { selectAtom } from "jotai/utils";
import { Draft2019, type JsonError } from "json-schema-library";
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 LibJsonSchema } from "json-schema-library/dist/lib/types";
import type { JSONSchema as $JSONSchema, FromSchema } from "json-schema-to-ts";
import { get, isEqual } from "lodash-es";
import * as immutable from "object-path-immutable";
@@ -15,13 +21,19 @@ import {
useContext,
useEffect,
useMemo,
useRef,
useState
useRef
} from "react";
import { JsonViewer } from "ui/components/code/JsonViewer";
import { useEvent } from "ui/hooks/use-event";
import { Field } from "./Field";
import { isRequired, normalizePath, omitSchema, prefixPointer } from "./utils";
import {
isRequired,
normalizePath,
omitSchema,
pathToPointer,
prefixPath,
prefixPointer
} from "./utils";
type JSONSchema = Exclude<$JSONSchema, boolean>;
type FormState<Data = any> = {
@@ -31,13 +43,6 @@ type FormState<Data = any> = {
data: Data;
};
const formStateAtom = atom<FormState>({
dirty: false,
submitting: false,
errors: [] as JsonError[],
data: {} as any
});
export type FormProps<
Schema extends JSONSchema = JSONSchema,
Data = Schema extends JSONSchema ? FromSchema<JSONSchema> : any
@@ -68,9 +73,12 @@ export type FormContext<Data> = {
schema: JSONSchema;
lib: Draft2019;
options: FormProps["options"];
root: string;
_formStateAtom: PrimitiveAtom<FormState<Data>>;
};
const FormContext = createContext<FormContext<any>>(undefined!);
FormContext.displayName = "FormContext";
export function Form<
Schema extends JSONSchema = JSONSchema,
@@ -92,20 +100,28 @@ export function Form<
const [schema, initial] = omitSchema(_schema, ignoreKeys, _initialValues);
const lib = useMemo(() => new Draft2019(schema), [JSON.stringify(schema)]);
const initialValues = initial ?? lib.getTemplate(undefined, schema, initialOpts);
const [formState, setFormState] = useAtom<FormState<Data>>(formStateAtom);
const _formStateAtom = useMemo(() => {
return atom<FormState<Data>>({
dirty: false,
submitting: false,
errors: [] as JsonError[],
data: initialValues
});
}, [initialValues]);
const setFormState = useSetAtom(_formStateAtom);
const formRef = useRef<HTMLFormElement | null>(null);
useEffect(() => {
console.log("setting data");
setFormState((prev) => ({ ...prev, data: initialValues }));
}, []);
if (initialValues) {
validate();
}
}, [initialValues]);
// @ts-ignore
async function handleSubmit(e: FormEvent<HTMLFormElement>) {
if (onSubmit) {
e.preventDefault();
setFormState((prev) => ({ ...prev, submitting: true }));
//setSubmitting(true);
try {
const { data, errors } = validate();
@@ -119,29 +135,20 @@ export function Form<
console.warn(e);
}
setFormState((prev) => ({ ...prev, submitting: false }));
//setSubmitting(false);
return false;
}
}
const setValue = useEvent((pointer: string, value: any) => {
const normalized = normalizePath(pointer);
//console.log("setValue", { pointer, normalized, value });
const key = normalized.substring(2).replace(/\//g, ".");
setFormState((state) => {
const prev = state.data;
const changed = immutable.set(prev, key, value);
onChange?.(changed, key, value);
//console.log("changed", prev, changed, { key, value });
return { ...state, data: changed };
});
/*setData((prev) => {
const changed = immutable.set(prev, key, value);
onChange?.(changed, key, value);
//console.log("changed", prev, changed, { key, value });
return changed;
});*/
check();
});
const deleteValue = useEvent((pointer: string) => {
@@ -151,56 +158,49 @@ export function Form<
const prev = state.data;
const changed = immutable.del(prev, key);
onChange?.(changed, key, undefined);
//console.log("changed", prev, changed, { key, value });
return { ...state, data: changed };
});
/*setData((prev) => {
const changed = immutable.del(prev, key);
onChange?.(changed, key, undefined);
//console.log("changed", prev, changed, { key });
return changed;
});*/
check();
});
useEffect(() => {
//setDirty(!isEqual(initialValues, data));
//setFormState((prev => ({ ...prev, dirty: !isEqual(initialValues, data) })));
const getCurrentState = useEvent(() => getDefaultStore().get(_formStateAtom));
const check = useEvent(() => {
const state = getCurrentState();
setFormState((prev) => ({ ...prev, dirty: !isEqual(initialValues, state.data) }));
if (validateOn === "change") {
validate();
} else if (formState?.errors?.length > 0) {
} else if (state?.errors?.length > 0) {
validate();
}
}, [formState?.data]);
});
function validate(_data?: Partial<Data>) {
const actual = _data ?? formState?.data;
const validate = useEvent((_data?: Partial<Data>) => {
const actual = _data ?? getCurrentState()?.data;
const errors = lib.validate(actual, schema);
//console.log("errors", errors);
setFormState((prev) => ({ ...prev, errors }));
//setErrors(errors);
return { data: actual, errors };
}
});
const context = useMemo(
() => ({
_formStateAtom,
setValue,
deleteValue,
schema,
lib,
options
options,
root: ""
}),
[]
[schema, initialValues]
) as any;
//console.log("context", context);
const Component = useMemo(() => {
return children ? children : <Field name="" />;
}, []);
return (
<form {...props} ref={formRef} onSubmit={handleSubmit}>
<FormContext.Provider value={context}>{Component}</FormContext.Provider>
<FormContext.Provider value={context}>
{children ? children : <Field name="" />}
</FormContext.Provider>
{hiddenSubmit && (
<button style={{ visibility: "hidden" }} type="submit">
Submit
@@ -217,25 +217,21 @@ export function useFormContext() {
export function FormContextOverride({
children,
overrideData,
path,
prefix,
...overrides
}: Partial<FormContext<any>> & { children: ReactNode; path?: string; overrideData?: boolean }) {
}: Partial<FormContext<any>> & { children: ReactNode; prefix?: string; overrideData?: boolean }) {
const ctx = useFormContext();
const additional: Partial<FormContext<any>> = {};
// this makes a local schema down the three
// especially useful for AnyOf, since it doesn't need to fully validate (e.g. pattern)
if (overrideData && path) {
const pointer = normalizePath(path);
const value =
pointer === "#/" ? ctx.data : get(ctx.data, pointer.substring(2).replace(/\//g, "."));
additional.data = value;
if (prefix) {
additional.root = prefix;
additional.setValue = (pointer: string, value: any) => {
ctx.setValue(prefixPointer(pointer, path), value);
ctx.setValue(prefixPointer(pointer, prefix), value);
};
additional.deleteValue = (pointer: string) => {
ctx.deleteValue(prefixPointer(pointer, path));
ctx.deleteValue(prefixPointer(pointer, prefix));
};
}
@@ -249,88 +245,128 @@ export function FormContextOverride({
}
export function useFormValue(name: string) {
const pointer = normalizePath(name);
const isRootPointer = pointer === "#/";
const { _formStateAtom, root } = useFormContext();
const selected = selectAtom(
formStateAtom,
_formStateAtom,
useCallback(
(state) => {
const data = state.data;
console.log("data", data);
return isRootPointer ? data : get(data, pointer.substring(2).replace(/\//g, "."));
const prefixedName = prefixPath(name, root);
const pointer = pathToPointer(prefixedName);
return {
value: get(state.data, prefixedName),
errors: state.errors.filter((error) => error.data.pointer.startsWith(pointer))
};
},
[pointer]
[name]
),
isEqual
);
return useAtom(selected)[0];
}
export function useFieldContext(name: string) {
const { lib, schema, errors: formErrors = [], ...rest } = useFormContext();
const pointer = normalizePath(name);
const isRootPointer = pointer === "#/";
//console.log("pointer", pointer);
const data = {};
const value = useFormValue(name);
console.log("value", pointer, value);
//const value = isRootPointer ? data : get(data, pointer.substring(2).replace(/\//g, "."));
const errors = useMemo(
() => formErrors.filter((error) => error.data.pointer.startsWith(pointer)),
[name]
export function useFormError(name: string, opt?: { strict?: boolean }) {
const { _formStateAtom, root } = useFormContext();
const selected = selectAtom(
_formStateAtom,
useCallback(
(state) => {
const prefixedName = prefixPath(name, root);
const pointer = pathToPointer(prefixedName);
return state.errors.filter((error) => {
return opt?.strict
? error.data.pointer === pointer
: error.data.pointer.startsWith(pointer);
});
},
[name]
),
isEqual
);
const fieldSchema = useMemo(
() => (isRootPointer ? (schema as LibJsonSchema) : lib.getSchema({ pointer, data, schema })),
[name]
return useAtom(selected)[0];
}
export function useFormStateSelector<Data = any, Reduced = Data>(
selector: (state: FormState<Data>) => Reduced
): Reduced {
const { _formStateAtom } = useFormContext();
const selected = selectAtom(_formStateAtom, useCallback(selector, []), isEqual);
return useAtom(selected)[0];
}
type SelectorFn<Ctx = any, Refined = any> = (state: Ctx) => Refined;
export function useDerivedFieldContext<Data = any, Reduced = undefined>(
path,
_schema?: LibJsonSchema,
deriveFn?: SelectorFn<
FormContext<Data> & {
pointer: string;
required: boolean;
errors: JsonError[];
value: any;
},
Reduced
>
): FormContext<Data> & { value: Reduced; pointer: string; required: boolean; errors: JsonError[] } {
const { _formStateAtom, root, lib, ...ctx } = useFormContext();
const schema = _schema ?? ctx.schema;
const selected = selectAtom(
_formStateAtom,
useCallback(
(state) => {
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) =>
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 context = {
...ctx,
root,
schema: fieldSchema as LibJsonSchema,
pointer,
required,
errors
};
const derived = deriveFn?.({ ...context, _formStateAtom, lib, value });
return {
...context,
value: derived
};
},
[path, schema ?? {}, root]
),
isEqual
);
const required = false; // isRequired(pointer, schema, data);
const options = useMemo(() => ({}), []);
return useMemo(
() => ({
...rest,
dirty: false,
submitting: false,
options,
lib,
value,
errors,
schema: fieldSchema,
pointer,
required
}),
[JSON.stringify([value])]
);
}
useFieldContext.displayName = "useFieldContext";
export function Subscribe({ children }: { children: (ctx: FormContext<any>) => ReactNode }) {
const ctx = useFormContext();
return children(ctx);
return {
...useAtomValue(selected),
_formStateAtom,
lib
} as any;
}
export function FormDebug() {
const { options, data, dirty, errors, submitting } = useFormContext();
if (options?.debug !== true) return null;
return <JsonViewer json={{ dirty, submitting, data, errors }} expand={99} />;
export function Subscribe<Data = any, Refined = Data>({
children,
selector
}: {
children: (state: Refined) => ReactNode;
selector?: SelectorFn<FormState<Data>, Refined>;
}) {
return children(useFormStateSelector(selector ?? ((state) => state as unknown as Refined)));
}
function useFieldContext2(name: string) {
const ctx = useRef(useFormContext());
const pointer = normalizePath(name);
const isRootPointer = pointer === "#/";
//console.log("pointer", pointer);
const data = {};
const options = useMemo(() => ({}), []);
const required = false;
export function FormDebug({ force = false }: { force?: boolean }) {
const { options } = useFormContext();
if (options?.debug !== true && force !== true) return null;
const ctx = useFormStateSelector((s) => s);
const value = useFormValue(name);
return { value, options, dirty: false, submitting: false, required, pointer };
}
export function FormDebug2({ name }: any) {
const { ...ctx } = useFieldContext2(name);
return <pre>{JSON.stringify({ ctx })}</pre>;
return <JsonViewer json={ctx} expand={99} />;
}

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

@@ -1,9 +1,9 @@
import type { JsonError } from "json-schema-library";
import type { JSONSchema } from "json-schema-to-ts";
import { isTypeSchema } from "ui/components/form/json-schema-form/utils";
import { AnyOfField } from "./AnyOfField";
import { Field } from "./Field";
import { FieldWrapper, type FieldwrapperProps } from "./FieldWrapper";
import { useFieldContext } from "./Form";
import { useDerivedFieldContext } from "./Form";
export type ObjectFieldProps = {
path?: string;
@@ -18,29 +18,28 @@ export const ObjectField = ({
label: _label,
wrapperProps = {}
}: ObjectFieldProps) => {
const ctx = useFieldContext(path);
const ctx = useDerivedFieldContext(path, _schema);
const schema = _schema ?? ctx.schema;
if (!schema) return "ObjectField: no schema";
if (!isTypeSchema(schema)) return `ObjectField "${path}": no schema`;
const properties = schema.properties ?? {};
return (
<FieldWrapper
pointer={path}
errors={ctx.errors}
name={path}
schema={{ ...schema, description: undefined }}
wrapper="fieldset"
{...wrapperProps}
>
{Object.keys(properties).map((prop) => {
const schema = properties[prop];
const pointer = `${path}/${prop}`.replace(/\/+/g, "/");
if (!schema) return;
const name = [path, prop].filter(Boolean).join(".");
if (typeof schema === "undefined" || typeof schema === "boolean") return;
if (schema.anyOf || schema.oneOf) {
return <AnyOfField key={pointer} path={pointer} />;
return <AnyOfField key={name} path={name} />;
}
return <Field key={pointer} name={pointer} />;
return <Field key={name} name={name} />;
})}
</FieldWrapper>
);

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

@@ -50,7 +50,7 @@ export function flatten(obj: any, parentKey = "", result: any = {}): any {
// @todo: make sure it's in the right order
export function unflatten(
obj: Record<string, string>,
schema: JSONSchema,
schema: JsonSchema,
selections?: Record<string, number | undefined>
) {
const result = {};
@@ -78,11 +78,7 @@ export function unflatten(
return result;
}
export function coerce(
value: any,
schema: Exclude<JSONSchema, boolean>,
opts?: { required?: boolean }
) {
export function coerce(value: any, schema: JsonSchema, opts?: { required?: boolean }) {
if (!value && typeof opts?.required === "boolean" && !opts.required) {
return undefined;
}
@@ -121,16 +117,25 @@ export function normalizePath(path: string) {
: `#/${path.replace(/#?\/?/, "").replace(/\./g, "/").replace(/\[/g, "/").replace(/\]/g, "")}`;
}
export function pathToPointer(path: string) {
return "#/" + (path.includes(".") ? path.split(".").join("/") : path);
}
export function prefixPointer(pointer: string, prefix: string) {
return pointer.replace("#/", `#/${prefix}/`).replace(/\/\//g, "/");
return pointer.replace("#/", `#/${prefix.length > 0 ? prefix + "/" : ""}`).replace(/\/\//g, "/");
}
export function prefixPath(path: string = "", prefix: string = "") {
const p = path.includes(".") ? path.split(".") : [path];
return [prefix, ...p].filter(Boolean).join(".");
}
export function getParentPointer(pointer: string) {
return pointer.substring(0, pointer.lastIndexOf("/"));
}
export function isRequired(pointer: string, schema: JSONSchema, data?: any) {
if (pointer === "#/") {
export function isRequired(pointer: string, schema: JsonSchema, data?: any) {
if (pointer === "#/" || !schema) {
return false;
}
const lib = new Draft2019(schema as any);
@@ -144,13 +149,6 @@ export function isRequired(pointer: string, schema: JSONSchema, data?: any) {
const parentSchema = lib.getSchema({ pointer: parentPointer, data });
const required = parentSchema?.required?.includes(pointer.split("/").pop()!);
/*console.log("isRequired", {
pointer,
parentPointer,
parent: parentSchema ? JSON.parse(JSON.stringify(parentSchema)) : null,
required
});*/
return !!required;
}
@@ -162,13 +160,14 @@ export function isType(_type: TType, _compare: TType) {
return compare.some((t) => type.includes(t));
}
export function getLabel(name: string, schema: JSONSchema) {
export function getLabel(name: string, schema: JsonSchema) {
if (typeof schema === "object" && "title" in schema) return schema.title;
const label = name.includes("/") ? (name.split("/").pop() ?? "") : name;
if (!name) return "";
const label = name.includes(".") ? (name.split(".").pop() ?? "") : name;
return autoFormatString(label);
}
export function getMultiSchema(schema: JSONSchema): Exclude<JSONSchema, boolean>[] | undefined {
export function getMultiSchema(schema: JsonSchema): JsonSchema[] | undefined {
if (!schema || typeof schema !== "object") return;
return (schema.anyOf ?? schema.oneOf) as any;
}
@@ -176,8 +175,9 @@ export function getMultiSchema(schema: JSONSchema): Exclude<JSONSchema, boolean>
export function getMultiSchemaMatched(
schema: JsonSchema,
data: any
): [number, Exclude<JSONSchema, boolean>[], Exclude<JSONSchema, boolean> | undefined] {
): [number, JsonSchema[], JsonSchema | undefined] {
const multiSchema = getMultiSchema(schema);
//console.log("getMultiSchemaMatched", schema, data, multiSchema);
if (!multiSchema) return [-1, [], undefined];
const index = multiSchema.findIndex((subschema) => {
const lib = new Draft2019(subschema as any);
@@ -220,7 +220,7 @@ export function omitSchema<Given extends JSONSchema>(_schema: Given, keys: strin
return [updated, reducedConfig];
}
export function isTypeSchema(schema?: JSONSchema): schema is Exclude<JSONSchema, boolean> {
export function isTypeSchema(schema?: JsonSchema): schema is JsonSchema {
return typeof schema === "object" && "type" in schema && !isType(schema.type, "error");
}

13
app/src/ui/layouts/AppShell/AppShell.tsx
View File

@@ -12,8 +12,8 @@ import {
import type { IconType } from "react-icons";
import { twMerge } from "tailwind-merge";
import { IconButton } from "ui/components/buttons/IconButton";
import { useEvent } from "ui/hooks/use-event";
import { AppShellProvider, useAppShell } from "ui/layouts/AppShell/use-appshell";
import { useEvent } from "../../hooks/use-event";
export function Root({ children }) {
return (
@@ -74,8 +74,15 @@ export function Content({ children, center }: { children: React.ReactNode; cente
}
export function Main({ children }) {
const { sidebar } = useAppShell();
return (
<div data-shell="main" className="flex flex-col flex-grow w-1 flex-shrink-0">
<div
data-shell="main"
className={twMerge(
"flex flex-col flex-grow w-1 flex-shrink-1",
sidebar.open && "max-w-[calc(100%-350px)]"
)}
>
{children}
</div>
);
@@ -298,7 +305,7 @@ export function Scrollable({
return (
<ScrollArea.Root style={{ height: `calc(100dvh - ${offset}px` }} ref={scrollRef}>
<ScrollArea.Viewport className="w-full h-full ">{children}</ScrollArea.Viewport>
<ScrollArea.Viewport className="w-full h-full">{children}</ScrollArea.Viewport>
<ScrollArea.Scrollbar
forceMount
className="flex select-none touch-none bg-transparent w-0.5"

19
app/src/ui/layouts/AppShell/Header.tsx
View File

@@ -73,18 +73,15 @@ export function HeaderNavigation() {
<>
<nav className="hidden md:flex flex-row gap-2.5 pl-0 p-2.5 items-center">
{items.map((item) => (
<Tooltip
key={item.label}
label={item.tooltip}
disabled={typeof item.tooltip === "undefined"}
position="bottom"
<NavLink
key={item.href}
as={Link}
href={item.href}
Icon={item.Icon}
disabled={item.disabled}
>
<div>
<NavLink as={Link} href={item.href} Icon={item.Icon} disabled={item.disabled}>
{item.label}
</NavLink>
</div>
</Tooltip>
{item.label}
</NavLink>
))}
</nav>
<nav className="flex md:hidden flex-row items-center">

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

@@ -48,14 +48,20 @@ function MediaSettingsInternal() {
return (
<>
<Form schema={schema} initialValues={config as any} onSubmit={onSubmit} {...formConfig}>
<Subscribe>
<Subscribe
selector={(state) => ({
dirty: state.dirty,
errors: state.errors.length > 0,
submitting: state.submitting
})}
>
{({ dirty, errors, submitting }) => (
<AppShell.SectionHeader
right={
<Button
variant="primary"
type="submit"
disabled={!dirty || errors.length > 0 || submitting}
disabled={!dirty || errors || submitting}
>
Update
</Button>
@@ -132,7 +138,7 @@ function Adapters() {
<Formy.Label as="legend" className="font-mono px-2">
{autoFormatString(ctx.selectedSchema!.title!)}
</Formy.Label>
<FormContextOverride schema={ctx.selectedSchema} path={ctx.path} overrideData>
<FormContextOverride schema={ctx.selectedSchema} prefix={ctx.path}>
<Field name="type" hidden />
<ObjectField path="config" wrapperProps={{ label: false, wrapper: "group" }} />
</FormContextOverride>
@@ -143,9 +149,9 @@ function Adapters() {
}
const Overlay = () => (
<Subscribe>
{({ data }) =>
!data.enabled && (
<Subscribe selector={(state) => ({ enabled: state.data.enabled })}>
{({ enabled }) =>
!enabled && (
<div className="absolute w-full h-full z-50 bg-background opacity-70 pointer-events-none" />
)
}

2
app/src/ui/routes/test/index.tsx
View File

@@ -88,7 +88,7 @@ function TestRoot({ children }) {
</div>
</AppShell.Scrollable>
</AppShell.Sidebar>
<main className="flex flex-col flex-grow">{children}</main>
<AppShell.Main>{children}</AppShell.Main>
</>
);
}

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

@@ -2,11 +2,11 @@ import { useBknd } from "ui/client/bknd";
import { Button } from "ui/components/buttons/Button";
import {
AnyOf,
AnyOfField,
Field,
Form,
FormContextOverride,
FormDebug,
FormDebug2,
ObjectField
} from "ui/components/form/json-schema-form";
import { Scrollable } from "ui/layouts/AppShell/AppShell";
@@ -33,16 +33,108 @@ const schema2 = {
export default function JsonSchemaForm3() {
const { schema, config } = useBknd();
config.media.storage.body_max_size = 1;
schema.media.properties.storage.properties.body_max_size.minimum = 0;
return (
<Scrollable>
<div className="flex flex-col p-3">
<Form schema={schema2} className="flex flex-col gap-3">
{/*<Form
schema={{
type: "object",
properties: {
name: { type: "string", default: "Peter", maxLength: 3 },
age: { type: "number" },
deep: {
type: "object",
properties: {
nested: { type: "string" }
}
}
},
required: ["age"]
}}
initialValues={{ name: "Peter", age: 20, deep: { nested: "hello" } }}
className="flex flex-col gap-3"
validateOn="change"
/>*/}
{/*<Form
schema={{
type: "object",
properties: {
name: { type: "string", default: "Peter", minLength: 3 },
age: { type: "number" },
deep: {
anyOf: [
{
type: "object",
properties: {
nested: { type: "string" }
}
},
{
type: "object",
properties: {
nested2: { type: "string" }
}
}
]
}
},
required: ["age"]
}}
className="flex flex-col gap-3"
validateOn="change"
>
<Field name="" />
<Subscribe2>
{(state) => (
<pre className="text-wrap whitespace-break-spaces break-all">
{JSON.stringify(state, null, 2)}
</pre>
)}
</Subscribe2>
</Form>*/}
{/*<Form
schema={{
type: "object",
properties: {
name: { type: "string", default: "Peter", maxLength: 3 },
age: { type: "number" },
gender: {
type: "string",
enum: ["male", "female", "uni"]
},
deep: {
type: "object",
properties: {
nested: { type: "string" }
}
}
},
required: ["age"]
}}
className="flex flex-col gap-3"
validateOn="change"
>
<div>random thing</div>
<Field name="name" />
<Field name="age" />
<FormDebug />
<FormDebug2 name="name" />
</Form>
<hr />
<Subscribe2
selector={(state) => ({ dirty: state.dirty, submitting: state.submitting })}
>
{(state) => (
<pre className="text-wrap whitespace-break-spaces break-all">
{JSON.stringify(state)}
</pre>
)}
</Subscribe2>
</Form>*/}
{/*<Form
schema={{
@@ -114,7 +206,7 @@ export default function JsonSchemaForm3() {
}
}
}}
initialValues={{ tags: [0, 1] }}
initialValues={{ tags: [0, 1], method: ["GET"] }}
options={{ debug: true }}
>
<Field name="" />
@@ -140,10 +232,15 @@ export default function JsonSchemaForm3() {
}
}}
initialValues={{ tags: [0, 1] }}
/>*/}
>
<Field name="" />
<FormDebug force />
</Form>*/}
{/*<CustomMediaForm />*/}
{/*<Form schema={schema.media} initialValues={config.media} />*/}
<CustomMediaForm />
{/*<Form schema={schema.media} initialValues={config.media} validateOn="change">
<Field name="" />
</Form>*/}
{/*<Form
schema={removeKeyRecursively(schema.media, "pattern") as any}
@@ -166,8 +263,16 @@ export default function JsonSchemaForm3() {
function CustomMediaForm() {
const { schema, config } = useBknd();
config.media.storage.body_max_size = 1;
schema.media.properties.storage.properties.body_max_size.minimum = 0;
return (
<Form schema={schema.media} initialValues={config.media} className="flex flex-col gap-3">
<Form
schema={schema.media}
initialValues={config.media}
className="flex flex-col gap-3"
validateOn="change"
>
<Field name="enabled" />
<Field name="basepath" />
<Field name="entity_name" />
@@ -175,6 +280,7 @@ function CustomMediaForm() {
<AnyOf.Root path="adapter">
<CustomMediaFormAdapter />
</AnyOf.Root>
<FormDebug force />
</Form>
);
}
@@ -197,7 +303,7 @@ function CustomMediaFormAdapter() {
</div>
{ctx.selected !== null && (
<FormContextOverride schema={ctx.selectedSchema} path={ctx.path} overrideData>
<FormContextOverride schema={ctx.selectedSchema} prefix={ctx.path}>
<Field name="type" hidden />
<ObjectField path="config" wrapperProps={{ label: false, wrapper: "group" }} />
</FormContextOverride>

5
app/src/ui/styles.css
View File

@@ -34,7 +34,10 @@ body {
scrollbar-width: none; /* Firefox */
}
/*div[data-radix-scroll-area-viewport] > div:first-child {}*/
div[data-radix-scroll-area-viewport] > div:first-child {
min-width: auto !important;
display: block !important;
}
/* hide calendar icon on inputs */
input[type="datetime-local"]::-webkit-calendar-picker-indicator,

1
packages/plasmic/src/contexts/BkndContext.tsx
View File

@@ -26,6 +26,7 @@ type BkndContextProps = {
};
const BkndContextContext = createContext<BkndGlobalContextProps>({} as any);
BkndContextContext.displayName = "BkndContext";
export const BkndContext = ({
children,